.device-list{padding:var(--spacing-md) 0}.list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.list-header h2{font-size:20px;font-weight:600}.add-device-btn{padding:var(--spacing-sm) var(--spacing-md);font-size:14px}.device-cards{display:flex;flex-direction:column;gap:var(--spacing-md)}.device-card{background-color:var(--line-background);border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:0 2px 8px #00000014;transition:all .2s ease;cursor:pointer;text-decoration:none;color:inherit;display:block}.device-card:hover{box-shadow:0 4px 16px #0000001f;transform:translateY(-2px)}.device-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.device-name{font-size:18px;font-weight:600;color:var(--line-text-primary)}.device-status{display:flex;align-items:center;gap:var(--spacing-xs);font-size:12px;font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm)}.device-status.online{background-color:#06c7551a;color:var(--line-primary)}.device-status.offline{background-color:#7b7b7b1a;color:var(--line-text-secondary)}.status-dot{width:8px;height:8px;border-radius:50%;background-color:currentColor}.device-info{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.info-item{display:flex;flex-direction:column;gap:var(--spacing-xs)}.info-label{font-size:12px;color:var(--line-text-secondary);font-weight:500}.info-value{font-size:24px;font-weight:600;color:var(--line-text-primary)}.info-value.temperature{color:#ff6b6b}.info-value.humidity{color:#4ecdc4}.info-unit{font-size:14px;font-weight:400;color:var(--line-text-secondary);margin-left:2px}.last-update{margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--line-border);font-size:12px;color:var(--line-text-secondary);text-align:right}.empty-state{text-align:center;padding:var(--spacing-xl) var(--spacing-lg)}.empty-icon{width:80px;height:80px;margin:0 auto var(--spacing-lg);background-color:var(--line-surface);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--line-text-secondary)}.empty-state h3{font-size:18px;font-weight:600;margin-bottom:var(--spacing-sm);color:var(--line-text-primary)}.empty-state p{font-size:14px;color:var(--line-text-secondary);margin-bottom:var(--spacing-lg)}.device-list-loading{display:flex;justify-content:center;align-items:center;padding:var(--spacing-xl)}.device-list-error{text-align:center;padding:var(--spacing-xl);color:var(--line-error)}.device-list-error h3{margin-bottom:var(--spacing-sm)}.device-list-error p{font-size:14px;color:var(--line-text-secondary)}.temperature-chart{width:100%;height:400px;position:relative}.no-data-message{display:flex;align-items:center;justify-content:center;height:100%;color:#666;font-style:italic}@media (max-width: 768px){.temperature-chart{height:300px}}@media (max-width: 480px){.temperature-chart{height:250px}}.notification-settings{background:#fff;border-radius:8px;padding:20px;margin-top:20px}.notification-settings h3{margin:0 0 20px;color:#333;font-size:1.2rem}.notification-settings.loading{text-align:center;color:#666;padding:40px}.settings-section{margin-bottom:30px;padding:20px;background:#f9f9f9;border-radius:8px}.settings-section h4{margin:0 0 15px;color:#444;font-size:1.1rem}.subsection{margin-top:20px;padding:15px;background:#fff;border-radius:6px}.subsection h5{margin:0 0 15px;color:#555;font-size:1rem;font-weight:600}.setting-item{margin-bottom:15px}.setting-item label{display:flex;align-items:center;gap:10px;cursor:pointer}.setting-item label span{flex:1;color:#666;font-size:.95rem}.setting-item input[type=checkbox]{width:20px;height:20px;cursor:pointer}.setting-item input[type=number]{width:100px;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:.95rem}.setting-item input[type=number]:focus{outline:none;border-color:#06c755}.settings-actions{margin-top:20px;text-align:right}.save-button{background:#06c755;color:#fff;border:none;padding:12px 24px;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}.save-button:hover:not(:disabled){background:#05a647}.save-button:disabled{background:#ccc;cursor:not-allowed}.device-detail{max-width:800px;margin:0 auto}.device-detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.back-button{background:none;border:none;font-size:1rem;color:#00b900;cursor:pointer;padding:.5rem;display:flex;align-items:center;gap:.5rem}.back-button:hover{text-decoration:underline}.device-actions{display:flex;gap:.5rem}.device-detail-loading,.device-detail-error{text-align:center;padding:3rem;color:#666}.device-info h2{margin:0 0 1rem;font-size:1.75rem}.device-uuid{font-family:monospace;font-size:.875rem;color:#666;margin-bottom:.5rem}.device-name-input{font-size:1.75rem;font-weight:600;margin-bottom:1rem}.sensor-data h3{margin:0 0 1rem;font-size:1.25rem}.sensor-values{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.sensor-value{text-align:center;padding:1rem;background:#f8f9fa;border-radius:8px}.sensor-value .label{display:block;font-size:.875rem;color:#666;margin-bottom:.5rem}.sensor-value .value{display:block;font-size:2rem;font-weight:600;color:#333}.last-updated{text-align:center;font-size:.875rem;color:#666}.chart-container h3,.events h3{margin:0 0 1rem;font-size:1.25rem}.event-list{display:flex;flex-direction:column;gap:.5rem}.event-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:#f8f9fa;border-radius:4px;font-size:.875rem}.event-type{font-weight:500;color:#333}.event-time{color:#666}@media (max-width: 640px){.sensor-values{grid-template-columns:1fr}.device-detail-header{flex-direction:column;align-items:flex-start;gap:1rem}.device-actions{align-self:flex-end}}.device-registration{max-width:400px;margin:0 auto;padding:var(--spacing-lg) 0}.registration-header{text-align:center;margin-bottom:var(--spacing-xl)}.registration-header h2{font-size:24px;font-weight:600;margin-bottom:var(--spacing-sm)}.registration-header p{color:var(--line-text-secondary);font-size:14px}.code-display{background-color:var(--line-primary);color:#fff;padding:var(--spacing-xl);border-radius:var(--radius-lg);text-align:center;margin-bottom:var(--spacing-lg)}.code-display h3{font-size:14px;font-weight:400;margin-bottom:var(--spacing-md);opacity:.9}.code-number{font-size:48px;font-weight:700;letter-spacing:8px;font-family:Courier New,monospace;margin-bottom:var(--spacing-md)}.code-expiry{font-size:14px;opacity:.9}.code-expiry.expiring{color:var(--line-warning)}.code-expiry.expired{color:var(--line-error)}.registration-steps{display:flex;flex-direction:column;gap:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.step{display:flex;gap:var(--spacing-md);padding:var(--spacing-lg);position:relative}.step-number{flex-shrink:0;width:32px;height:32px;background-color:var(--line-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}.step-content{flex:1;min-width:0}.step-content h3{font-size:18px;font-weight:600;margin-bottom:var(--spacing-sm);color:var(--line-text-primary)}.step-content p{font-size:14px;color:var(--line-text-secondary);margin-bottom:var(--spacing-md);line-height:1.6}.step-content ol{margin:var(--spacing-sm) 0 0 0;padding-left:20px;color:var(--line-text-secondary);font-size:14px;list-style-position:inside}.step-content li{margin-bottom:var(--spacing-xs);line-height:1.6;word-wrap:break-word;overflow-wrap:break-word;padding-left:4px}.generated-code-container{margin-top:var(--spacing-md);padding:var(--spacing-md);background-color:var(--line-surface);border-radius:var(--radius-md);text-align:center}.generated-code{font-size:32px;font-weight:700;letter-spacing:4px;font-family:Courier New,monospace;color:var(--line-primary);margin-bottom:var(--spacing-sm)}.code-timer{font-size:14px;color:var(--line-text-secondary);margin-bottom:var(--spacing-md)}.code-actions{display:flex;gap:var(--spacing-sm);justify-content:center;flex-wrap:wrap}.copy-button{background-color:var(--line-primary);color:#fff;min-width:100px;transition:background-color .2s}.copy-button:hover{background-color:#05a85c}.instructions{background-color:var(--line-surface);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-lg)}.instructions h3{font-size:16px;font-weight:600;margin-bottom:var(--spacing-sm)}.instructions ol{padding-left:var(--spacing-lg);color:var(--line-text-secondary);font-size:14px;margin:0;list-style-position:inside}.instructions li{margin-bottom:var(--spacing-sm);line-height:1.6;padding-left:var(--spacing-xs)}.generate-section{text-align:center;padding:var(--spacing-xl) 0}.generate-btn{width:100%;max-width:300px;font-size:18px;padding:var(--spacing-md) var(--spacing-xl)}.action-buttons{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-xl);flex-direction:column}.action-buttons .button{width:100%}.error-message{background-color:#ff3b301a;color:var(--line-error);padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);font-size:14px;text-align:center}.registration-loading{text-align:center;padding:var(--spacing-xl);color:var(--line-text-secondary)}.connection-status{background-color:var(--line-surface);border-radius:var(--radius-md);padding:var(--spacing-md);margin-top:var(--spacing-lg);text-align:center}.connection-status.checking{border:2px solid var(--line-primary)}.connection-status.connected{border:2px solid var(--line-primary);background-color:#06c7551a}.connection-status h4{font-size:16px;font-weight:500;margin-bottom:var(--spacing-xs)}.connection-status p{font-size:14px;color:var(--line-text-secondary)}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.checking-animation{animation:pulse 1.5s ease-in-out infinite}:root{--line-primary: #06C755;--line-secondary: #5AC463;--line-background: #FFFFFF;--line-surface: #F7F8FA;--line-text-primary: #1A1A1A;--line-text-secondary: #7B7B7B;--line-border: #E5E5E5;--line-error: #FF3B30;--line-warning: #FF9500;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--line-text-primary);background-color:var(--line-surface);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background-color:var(--line-background);border-bottom:1px solid var(--line-border);padding:var(--spacing-md);position:sticky;top:0;z-index:100;box-shadow:0 2px 4px #0000000d}.app-header h1{font-size:20px;font-weight:600;color:var(--line-text-primary);text-align:center}.app-main{flex:1;padding:var(--spacing-md);max-width:600px;margin:0 auto;width:100%}.app-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:var(--spacing-md)}.spinner{width:40px;height:40px;border:3px solid var(--line-border);border-top-color:var(--line-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:var(--spacing-lg);text-align:center}.app-error h2{color:var(--line-error);margin-bottom:var(--spacing-md)}.app-error p{color:var(--line-text-secondary);margin-bottom:var(--spacing-sm)}.button,.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-lg);font-size:16px;font-weight:500;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;text-decoration:none;min-height:44px;gap:var(--spacing-sm);background-color:var(--line-primary);color:#fff}.button:hover:not(:disabled),.btn:hover:not(:disabled){background-color:var(--line-secondary)}.btn-primary{background-color:var(--line-primary);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--line-secondary)}.btn-secondary{background-color:var(--line-surface);color:var(--line-text-primary);border:1px solid var(--line-border)}.btn-secondary:hover:not(:disabled){background-color:var(--line-border)}.btn:disabled{opacity:.5;cursor:not-allowed}.card{background-color:var(--line-background);border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:0 2px 8px #00000014;margin-bottom:var(--spacing-md)}.form-group{margin-bottom:var(--spacing-lg)}.form-label{display:block;font-size:14px;font-weight:500;color:var(--line-text-secondary);margin-bottom:var(--spacing-xs)}.form-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:16px;border:1px solid var(--line-border);border-radius:var(--radius-md);background-color:var(--line-background);transition:border-color .2s ease}.form-input:focus{outline:none;border-color:var(--line-primary)}@media (max-width: 600px){.app-main{padding:var(--spacing-sm)}.card{border-radius:var(--radius-md)}}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;color:#333}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600}p{margin:0 0 1rem}a{color:#00b900;text-decoration:none}a:hover{text-decoration:underline}button,input,textarea,select{font-family:inherit}.text-center{text-align:center}.text-right{text-align:right}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mt-5{margin-top:2rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:2rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:1rem}.gap-4{gap:1.5rem}.gap-5{gap:2rem}