:root{color-scheme:dark;--font-family-sans: Inter, Segoe UI, system-ui, -apple-system, sans-serif;--font-family-mono: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--spacing-0: 0;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.5rem;--spacing-6: 2rem;--spacing-7: 3rem;--radius-xs: .25rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--shadow-sm: 0 2px 4px rgba(15, 23, 42, .2);--shadow-md: 0 8px 24px rgba(15, 23, 42, .3);--shadow-lg: 0 12px 32px rgba(15, 23, 42, .45);--color-surface: #040b1a;--color-surface-elevated: #0b172d;--color-panel: #12213f;--color-panel-muted: #1b2c4c;--color-border: rgba(148, 163, 184, .2);--color-divider: rgba(148, 163, 184, .12);--color-text: #f8fafc;--color-text-muted: rgba(226, 232, 240, .68);--color-text-inverse: #040b1a;--color-brand: #38bdf8;--color-brand-strong: #0ea5e9;--color-success: #22c55e;--color-success-soft: rgba(34, 197, 94, .15);--color-warning: #facc15;--color-warning-soft: rgba(250, 204, 21, .16);--color-error: #f87171;--color-error-soft: rgba(248, 113, 113, .15);--color-offline: #475569;--transition-fast: .12s ease-in-out;--transition-medium: .2s ease-in-out;--transition-slow: .32s ease}*{box-sizing:border-box}html{font-family:var(--font-family-sans);line-height:1.5}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,rgba(56,189,248,.12),transparent 55%),var(--color-surface);color:var(--color-text);-webkit-font-smoothing:antialiased}#root{min-height:100vh}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px;border-radius:var(--radius-sm)}button,input,select,textarea{font:inherit;color:inherit;background:transparent;border:none;padding:0;cursor:pointer}hr{border:none;border-top:1px solid var(--color-divider);margin:var(--spacing-4) 0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-shell{min-height:100vh;display:flex;flex-direction:column;gap:var(--spacing-4);padding:var(--spacing-4)}.top-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--spacing-3);align-items:center}.brand h1{margin:0;font-size:var(--font-size-2xl)}.brand .version{display:inline-block;margin-left:var(--spacing-2);font-size:var(--font-size-sm);color:var(--color-text-muted)}.top-actions{display:flex;align-items:center;gap:var(--spacing-3);flex-wrap:wrap}.connection{display:inline-flex;align-items:center;gap:.4rem;background:#0f766e1f;padding:.35rem .75rem;border-radius:999px}.connection .dot{width:.65rem;height:.65rem;border-radius:50%;background:var(--color-success)}.updated{color:var(--color-text-muted);font-size:var(--font-size-sm)}.primary-nav{display:flex;gap:var(--spacing-2);flex-wrap:wrap}.primary-nav a{display:inline-flex;align-items:center;gap:var(--spacing-2);padding:.5rem .85rem;border-radius:var(--radius-md);border:1px solid transparent;color:var(--color-text-muted);transition:background var(--transition-fast),color var(--transition-fast),border var(--transition-fast)}.primary-nav a:hover,.primary-nav a:focus-visible{background:#38bdf81f;color:var(--color-text);border-color:#38bdf840}.primary-nav a.item-active{background:#38bdf833;color:var(--color-text);border-color:#38bdf859}.layout{display:flex;flex-direction:column;gap:var(--spacing-4);flex:1}@media(max-width:720px){.app-shell{padding:var(--spacing-3)}.primary-nav{overflow-x:auto;padding-bottom:.5rem}.top-bar{align-items:flex-start}}.toast-container{position:fixed;bottom:var(--spacing-5);right:var(--spacing-5);display:flex;flex-direction:column;gap:var(--spacing-3);z-index:2000;pointer-events:none}.toast{pointer-events:auto;display:grid;grid-template-columns:auto 1fr auto;gap:var(--spacing-3);align-items:center;min-width:18rem;padding:var(--spacing-3);border-radius:var(--radius-md);border:1px solid rgba(148,163,184,.2);background:#081020f2;box-shadow:var(--shadow-md);animation:slideIn .18s ease-out}.toast.exiting{animation:slideOut .14s ease-in forwards}.toast.success{border-color:#22c55e66}.toast.warning{border-color:#facc1573}.toast.error{border-color:#f8717173}.toast .icon{font-size:1.2rem}.toast .message{display:flex;flex-direction:column;gap:.35rem}.toast .message p{margin:0;font-size:var(--font-size-sm)}.toast .action{align-self:flex-start;background:none;border:none;color:var(--color-brand);cursor:pointer;font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.05em;padding:0}.toast .action:hover,.toast .action:focus-visible{text-decoration:underline}.toast .dismiss{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:1.25rem;line-height:1;padding:0}.toast .dismiss:hover,.toast .dismiss:focus-visible{color:var(--color-text)}@keyframes slideIn{0%{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{0%{transform:translateY(0);opacity:1}to{transform:translateY(-12px);opacity:0}}@media(max-width:640px){.toast-container{left:var(--spacing-4);right:var(--spacing-4)}.toast{min-width:0}}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-4)}.login-box{background:var(--color-panel);border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-lg);padding:var(--spacing-6);width:100%;max-width:420px}.login-header{text-align:center;margin-bottom:var(--spacing-5)}.login-header h1{margin:0 0 var(--spacing-2);font-size:var(--font-size-2xl);color:var(--color-text)}.login-header .subtitle{color:var(--color-text-muted);font-size:var(--font-size-md)}.login-form{display:flex;flex-direction:column;gap:var(--spacing-4)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.form-group label{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text)}.form-group input{padding:.75rem 1rem;background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--font-size-md);transition:border-color var(--transition-fast)}.form-group input:focus{border-color:var(--color-brand);outline:none}.form-group input:disabled{opacity:.5;cursor:not-allowed}.error-message{padding:.75rem 1rem;background:var(--color-error-soft);border:1px solid rgba(248,113,113,.3);border-radius:var(--radius-md);color:var(--color-error);font-size:var(--font-size-sm)}.login-button{padding:.875rem 1.5rem;background:var(--color-brand);color:var(--color-text-inverse);border:none;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.login-button:hover:not(:disabled){background:var(--color-brand-strong);transform:translateY(-1px);box-shadow:var(--shadow-md)}.login-button:active:not(:disabled){transform:translateY(0)}.login-button:disabled{opacity:.5;cursor:not-allowed}.login-footer{text-align:center;padding-top:var(--spacing-2)}.login-footer small{color:var(--color-text-muted);font-size:var(--font-size-sm)}button.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);padding:.5rem 1rem;border-radius:var(--radius-md);border:1px solid transparent;font-size:var(--font-size-sm);font-weight:600;letter-spacing:.01em;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);background:var(--color-panel);color:var(--color-text);min-height:2.5rem}button.button.full{width:100%}button.button.primary{background:linear-gradient(135deg,var(--color-brand-strong),var(--color-brand));box-shadow:var(--shadow-sm);border-color:transparent}button.button.primary:hover:not(:disabled){box-shadow:var(--shadow-md);transform:translateY(-1px)}button.button.secondary{background:var(--color-panel-muted);border-color:#94a3b840}button.button.secondary:hover:not(:disabled){border-color:#94a3b866}button.button.ghost{background:transparent;border-color:transparent;color:var(--color-text-muted)}button.button.ghost:hover:not(:disabled){background:#94a3b81a;color:var(--color-text)}button.button:disabled{opacity:.55;cursor:not-allowed}button.button.is-loading{position:relative}.spinner{width:1rem;height:1rem;border-radius:999px;border:2px solid rgba(255,255,255,.2);border-top-color:#ffffffe6;animation:spin .7s linear infinite}.content{display:inline-flex;align-items:center;gap:var(--spacing-2)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}article.card{background:linear-gradient(180deg,#12213feb,#12213fd1);border:1px solid rgba(148,163,184,.1);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--spacing-3);min-width:0;position:relative;overflow:hidden}article.card.padded{padding:var(--spacing-4)}article.card header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-3)}.heading h2{margin:0;font-size:var(--font-size-lg);letter-spacing:.01em}.heading .subtitle{margin:.35rem 0 0;color:var(--color-text-muted);font-size:var(--font-size-sm)}.body.with-padding{display:flex;flex-direction:column;gap:var(--spacing-3)}article.card footer{margin-top:auto;padding-top:var(--spacing-3);border-top:1px solid var(--color-divider)}.status{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:999px;font-size:var(--font-size-xs);font-weight:600;letter-spacing:.02em;text-transform:uppercase;background:#94a3b824;color:var(--color-text-muted)}.status.ok{background:var(--color-success-soft);color:var(--color-success)}.status.warn{background:var(--color-warning-soft);color:var(--color-warning)}.status.error{background:var(--color-error-soft);color:var(--color-error)}.status.offline{background:#4755692e;color:var(--color-offline)}.status .dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor}.status.warn .dot{animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.35}to{opacity:1}}.empty-state{text-align:center;border:1px dashed rgba(148,163,184,.3);border-radius:var(--radius-md);padding:var(--spacing-5) var(--spacing-4);display:grid;gap:var(--spacing-3);justify-items:center;background:#0f172a59}.empty-state .icon{font-size:2.25rem}.empty-state h3{margin:0;font-size:var(--font-size-lg)}.empty-state p{margin:0;max-width:32ch;color:var(--color-text-muted)}.skeleton{background:linear-gradient(90deg,#94a3b826,#94a3b84d,#94a3b826);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite}.skeleton.rounded{border-radius:var(--radius-md)}.skeleton.line{height:.8rem}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.slider{display:flex;flex-direction:column;gap:var(--spacing-2)}.slider label{display:flex;align-items:center;justify-content:space-between;font-size:var(--font-size-sm);color:var(--color-text-muted)}.slider label strong{font-size:var(--font-size-sm);color:var(--color-text)}input[type=range]{appearance:none;height:.6rem;border-radius:var(--radius-md);background:linear-gradient(90deg,var(--color-brand) 0%,rgba(56,189,248,.35) 100%);outline:none}input[type=range]::-webkit-slider-thumb{appearance:none;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--color-surface-elevated);border:2px solid var(--color-brand);box-shadow:0 0 0 2px #38bdf859;transition:transform var(--transition-fast);cursor:pointer}input[type=range]::-moz-range-thumb{width:1.1rem;height:1.1rem;border-radius:50%;background:var(--color-surface-elevated);border:2px solid var(--color-brand);box-shadow:0 0 0 2px #38bdf859;transition:transform var(--transition-fast);cursor:pointer}input[type=range]:focus-visible::-webkit-slider-thumb,input[type=range]:active::-webkit-slider-thumb{transform:scale(1.05)}input[type=range]:focus-visible::-moz-range-thumb,input[type=range]:active::-moz-range-thumb{transform:scale(1.05)}.slider.disabled{opacity:.6}.slider.disabled input[type=range]::-webkit-slider-thumb,.slider.disabled input[type=range]::-moz-range-thumb{cursor:not-allowed}.toggle-switch{display:inline-flex;align-items:center;gap:var(--spacing-3);cursor:pointer;user-select:none}.toggle-label{font-size:var(--font-size-sm);color:var(--color-text)}.toggle-switch input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.toggle-slider{position:relative;width:48px;height:24px;background-color:#9ca3af4d;border-radius:24px;transition:background-color .2s ease;flex-shrink:0}.toggle-slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background-color:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 2px 4px #0003}.toggle-switch input:checked+.toggle-slider{background-color:#3b82f6}.toggle-switch input:checked+.toggle-slider:before{transform:translate(24px)}.toggle-switch input:disabled+.toggle-slider{opacity:.5;cursor:not-allowed}.toggle-switch:has(input:disabled){cursor:not-allowed}.toggle-switch:has(input:disabled) .toggle-label{opacity:.6}.enhanced-audio-device-card{min-width:320px}.device-content{display:flex;flex-direction:column;gap:var(--spacing-2)}.device-name{margin:0;font-size:var(--font-size-md);font-weight:600;color:var(--color-text)}.sync-badge{padding:.25rem .5rem;border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:600;display:inline-flex;align-items:center;gap:.25rem;align-self:flex-start}.badge-success{background:var(--color-success-soft);color:var(--color-success);border:1px solid rgba(34,197,94,.2)}.badge-warning{background:var(--color-warning-soft);color:var(--color-warning);border:1px solid rgba(250,204,21,.2)}.current-track{padding:var(--spacing-2);background:#0f172a59;border-radius:var(--radius-md);border:1px solid rgba(148,163,184,.1)}.track-title{font-weight:600;font-size:var(--font-size-sm);color:var(--color-text);margin-bottom:var(--spacing-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-artist{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--spacing-1)}.playback-progress{height:3px;background:#94a3b833;border-radius:2px;overflow:hidden;margin-bottom:var(--spacing-1)}.progress-bar{height:100%;background:linear-gradient(90deg,var(--color-brand-strong),var(--color-brand));transition:width .3s ease}.playback-time{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--spacing-1)}.playback-state{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:capitalize}.no-track{text-align:center;padding:var(--spacing-2);color:var(--color-text-muted);font-size:var(--font-size-xs);background:#0f172a33;border-radius:var(--radius-md);border:1px dashed rgba(148,163,184,.2)}.audio-page{padding:var(--spacing-5);max-width:1400px;margin:0 auto}.streaming-infrastructure,.streaming-section,.devices-section,.library-section{margin-bottom:var(--spacing-6)}.streaming-infrastructure h2,.streaming-section h2,.devices-section h2,.library-section h2{margin:0 0 var(--spacing-4);font-size:var(--font-size-xl);color:var(--color-text)}.status-cards-grid,.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--spacing-4)}@media(min-width:1024px){.status-cards-grid,.status-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.status-cards-grid,.status-grid{grid-template-columns:1fr}}.devices-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--spacing-4)}@media(min-width:1024px){.devices-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.devices-grid{grid-template-columns:1fr}}.error-message{padding:var(--spacing-5);background:#f871711a;border:1px solid rgba(248,113,113,.2);borderRadius:var(--radius-lg);text-align:center}.error-message p{margin:0;color:var(--color-error)}.error-message p:first-child{font-weight:600;margin-bottom:var(--spacing-2)}@media(max-width:640px){.audio-page{padding:var(--spacing-4)}.page-header h1{font-size:var(--font-size-xl)}.streaming-infrastructure h2,.streaming-section h2,.devices-section h2,.library-section h2{font-size:var(--font-size-lg)}}.video-page{padding:var(--spacing-5);max-width:1400px;margin:0 auto}.page-header h1{margin:0 0 var(--spacing-2);font-size:var(--font-size-2xl)}.video-status-section,.video-controls-section,.video-library-section,.device-storage-section{margin-bottom:var(--spacing-6)}.video-status-section h2,.video-controls-section h2,.video-library-section h2,.device-storage-section h2{margin:0 0 var(--spacing-4);font-size:var(--font-size-xl);color:var(--color-text)}.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-4)}.status-item{padding:var(--spacing-4);background:#0f172a4d;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.1)}.status-label{display:block;font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--spacing-2);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.status-value{display:block;font-size:var(--font-size-lg);font-weight:600;color:var(--color-text)}.status-value.power-on{color:var(--color-success)}.status-value.power-standby{color:var(--color-text-muted)}.controls-container{display:flex;flex-direction:column;gap:var(--spacing-5);padding:var(--spacing-5);background:#0f172a4d;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.1)}.control-group{display:flex;flex-direction:column;gap:var(--spacing-3)}.control-group label{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text)}.control-group>button,.input-buttons button{padding:var(--spacing-3) var(--spacing-4);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);background:#0f172a80;color:var(--color-text);font-weight:600;cursor:pointer;transition:all .2s}.control-group>button:hover:not(:disabled),.input-buttons button:hover:not(:disabled){background:#38bdf84d;border-color:#38bdf880}.control-group>button.active,.input-buttons button.active{background:#38bdf866;border-color:#38bdf899;color:var(--color-brand-strong)}.control-group>button:disabled,.input-buttons button:disabled{opacity:.5;cursor:not-allowed}.input-buttons{display:flex;gap:var(--spacing-2);flex-wrap:wrap}.volume-header{display:flex;justify-content:space-between;align-items:center}.volume-value{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text)}.volume-slider{width:100%;height:8px;border-radius:4px;background:#0f172a80;outline:none;-webkit-appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-brand);cursor:pointer}.volume-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-brand);cursor:pointer;border:none}.volume-slider:disabled{opacity:.5;cursor:not-allowed}.btn-mute{margin-top:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);background:#0f172a80;color:var(--color-text);font-weight:600;cursor:pointer;transition:all .2s}.btn-mute:hover:not(:disabled){background:#ef44444d;border-color:#ef444480}.btn-mute:disabled{opacity:.5;cursor:not-allowed}.video-library-list{display:flex;flex-direction:column;gap:var(--spacing-3)}.video-library-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-4);background:#0f172a4d;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.1);transition:all .2s}.video-library-item:hover{background:#0f172a80;border-color:#fff3}.video-info{display:flex;align-items:center;gap:var(--spacing-3);flex:1}.video-icon{font-size:var(--font-size-2xl)}.video-details{display:flex;flex-direction:column;gap:var(--spacing-1)}.video-filename{font-weight:600;color:var(--color-text);font-size:var(--font-size-md)}.video-meta{font-size:var(--font-size-sm);color:var(--color-text-muted)}.video-actions{display:flex;gap:var(--spacing-2)}.btn-sync,.btn-play,.btn-stop{padding:var(--spacing-2) var(--spacing-3);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);background:#0f172a80;color:var(--color-text);font-weight:600;font-size:var(--font-size-sm);cursor:pointer;transition:all .2s;white-space:nowrap}.btn-sync:hover:not(:disabled){background:#a855f74d;border-color:#a855f780}.btn-play:hover:not(:disabled){background:#22c55e4d;border-color:#22c55e80}.btn-stop:hover:not(:disabled){background:#ef44444d;border-color:#ef444480}.btn-sync:disabled,.btn-play:disabled,.btn-stop:disabled{opacity:.5;cursor:not-allowed}.storage-info{padding:var(--spacing-4);background:#38bdf81a;border-radius:var(--radius-md);border:1px solid rgba(56,189,248,.2);color:var(--color-text-muted);font-size:var(--font-size-sm);margin:0}.empty-message{padding:var(--spacing-5);text-align:center;color:var(--color-text-muted);font-style:italic}@media(max-width:768px){.video-page{padding:var(--spacing-4)}.page-header h1{font-size:var(--font-size-xl)}.status-grid{grid-template-columns:1fr}.video-library-item{flex-direction:column;align-items:flex-start;gap:var(--spacing-3)}.video-actions{width:100%;justify-content:flex-end}.control-group>button,.input-buttons button{font-size:var(--font-size-sm)}}@media(max-width:640px){.video-actions{flex-direction:column}.btn-sync,.btn-play,.btn-stop{width:100%}}.playback-progress{margin-top:var(--spacing-5);padding:var(--spacing-4);background:var(--color-surface-variant);border-radius:var(--radius-md)}.progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-3);font-size:var(--font-size-sm)}.playing-file{font-weight:600;color:var(--color-text)}.time-display{font-family:Monaco,Menlo,monospace;color:var(--color-text-muted)}.progress-bar-container{width:100%;height:8px;background:var(--color-surface);border-radius:var(--radius-full);overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transition:width .3s ease-out}.device-storage-section{margin-top:var(--spacing-6)}.storage-info{margin-bottom:var(--spacing-4);color:var(--color-text-muted);font-size:var(--font-size-sm)}.device-library-list h3{margin-bottom:var(--spacing-3);font-size:var(--font-size-md);color:var(--color-text-muted)}.device-library-item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3);background:var(--color-surface-variant);border-radius:var(--radius-md);margin-bottom:var(--spacing-2)}.device-library-item .file-icon{font-size:var(--font-size-xl)}.device-library-item .file-name{flex:1;font-weight:500}.device-library-item .file-size{color:var(--color-text-muted);font-size:var(--font-size-sm)}.empty-device-storage{padding:var(--spacing-5);text-align:center;color:var(--color-text-muted);font-style:italic;background:var(--color-surface-variant);border-radius:var(--radius-md)}.video-realtime-section{margin-bottom:var(--spacing-6)}.video-realtime-section h2{margin:0 0 var(--spacing-4);font-size:var(--font-size-xl);color:var(--color-text)}.realtime-status{padding:var(--spacing-5);background:#0f172a66;border-radius:var(--radius-lg);border:1px solid rgba(56,189,248,.3)}.loading-message{padding:var(--spacing-4);text-align:center;color:var(--color-text-muted);font-style:italic}.status-value.mpv-active{color:var(--color-success)}.status-value.mpv-stopped{color:var(--color-error)}.status-value.freshness-green{color:var(--color-success)}.status-value.freshness-yellow{color:#fbbf24}.status-value.freshness-red{color:var(--color-error)}.video-playback-section{margin-bottom:var(--spacing-6)}.video-playback-section h2,.video-tv-controls-section h2{margin:0 0 var(--spacing-4);font-size:var(--font-size-xl);color:var(--color-text)}.section-description{margin:0 0 var(--spacing-4);color:var(--color-text-muted);font-size:var(--font-size-sm)}.playback-controls{flex-direction:row!important;gap:var(--spacing-3)}.btn-control{flex:1;padding:var(--spacing-4);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);background:#0f172a80;color:var(--color-text);font-weight:600;font-size:var(--font-size-md);cursor:pointer;transition:all .2s}.btn-control.btn-play:hover:not(:disabled){background:#22c55e4d;border-color:#22c55e80}.btn-control.btn-pause:hover:not(:disabled){background:#fbbf244d;border-color:#fbbf2480}.btn-control.btn-stop:hover:not(:disabled){background:#ef44444d;border-color:#ef444480}.btn-control:disabled{opacity:.5;cursor:not-allowed}.video-tv-controls-section{margin-bottom:var(--spacing-6)}.command-result{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-md);margin-bottom:var(--spacing-4);font-size:var(--font-size-sm)}.command-result.success{background:#22c55e33;border:1px solid rgba(34,197,94,.4)}.command-result.error{background:#ef444433;border:1px solid rgba(239,68,68,.4)}.result-icon{font-size:var(--font-size-lg)}.result-message{flex:1;color:var(--color-text);font-weight:500}.result-time{color:var(--color-text-muted);font-size:var(--font-size-xs)}.power-buttons{display:flex;gap:var(--spacing-3)}.video-command-history-section{margin-bottom:var(--spacing-6)}.section-header-collapsible{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:var(--spacing-3);background:#0f172a4d;border-radius:var(--radius-md);transition:all .2s}.section-header-collapsible:hover{background:#0f172a80}.section-header-collapsible h2{margin:0;font-size:var(--font-size-xl);color:var(--color-text)}.collapse-icon{font-size:var(--font-size-lg);color:var(--color-text-muted)}.command-history-list{margin-top:var(--spacing-4);display:flex;flex-direction:column;gap:var(--spacing-3)}.command-item{padding:var(--spacing-4);background:#0f172a4d;border-radius:var(--radius-md);border-left:3px solid;transition:all .2s}.command-item.success{border-left-color:var(--color-success)}.command-item.error{border-left-color:var(--color-error)}.command-header{display:flex;align-items:center;gap:var(--spacing-3);margin-bottom:var(--spacing-2)}.command-icon{font-size:var(--font-size-lg)}.command-name{flex:1;font-weight:600;color:var(--color-text);font-size:var(--font-size-md)}.command-time{color:var(--color-text-muted);font-size:var(--font-size-xs)}.command-error{padding:var(--spacing-2);margin-top:var(--spacing-2);background:#ef444433;border-radius:var(--radius-sm);color:var(--color-error);font-size:var(--font-size-sm);font-family:monospace}.command-footer{display:flex;justify-content:flex-end;margin-top:var(--spacing-2)}.response-time{color:var(--color-text-muted);font-size:var(--font-size-xs);font-family:monospace}@media(max-width:768px){.playback-controls{flex-direction:column!important}.btn-control{width:100%}.power-buttons{flex-direction:column}.command-result{flex-direction:column;align-items:flex-start}.command-header{flex-wrap:wrap}}.camera-page{padding:var(--spacing-5);max-width:1400px;margin:0 auto}.page-header{margin-bottom:var(--spacing-6)}.page-header h1{margin:0 0 var(--spacing-2);font-size:var(--font-size-2xl);color:var(--color-text)}.page-header p{margin:0;color:var(--color-text-muted);font-size:var(--font-size-md)}.cameras-section{margin-bottom:var(--spacing-6)}.cameras-section h2{margin:0 0 var(--spacing-4);font-size:var(--font-size-xl);color:var(--color-text)}.cameras-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:var(--spacing-4)}.camera-card{background:linear-gradient(180deg,#12213feb,#12213fd1);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-4);cursor:pointer;transition:all var(--transition-medium);box-shadow:var(--shadow-sm)}.camera-card:hover{border-color:#94a3b84d;box-shadow:var(--shadow-md)}.camera-card.selected{border-color:var(--color-brand);box-shadow:0 0 0 3px #38bdf81a}.camera-card.offline{opacity:.6}.camera-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-3)}.camera-header h3{margin:0;font-size:var(--font-size-lg);color:var(--color-text);font-weight:600}.status-badge{padding:var(--spacing-1) var(--spacing-3);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.status-badge.online{background:var(--color-success-soft);color:var(--color-success)}.status-badge.offline{background:var(--color-error-soft);color:var(--color-error)}.video-container{margin-bottom:var(--spacing-3);background:#000;border-radius:var(--radius-md);aspect-ratio:16/9;overflow:hidden;position:relative}.video-container video{width:100%;height:100%;object-fit:contain}.video-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--color-text-muted);font-size:var(--font-size-sm)}.camera-info{display:flex;flex-direction:column;gap:var(--spacing-2)}.camera-info-item{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-sm)}.camera-info-label{color:var(--color-text-muted);font-weight:500}.camera-info-value{color:var(--color-text);font-weight:600}.night-mode-toggle{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) 0}.night-mode-toggle label{font-size:var(--font-size-sm);color:var(--color-text);font-weight:500}.events-section{margin-bottom:var(--spacing-6)}.events-section h2{margin:0 0 var(--spacing-4);font-size:var(--font-size-xl);color:var(--color-text)}.events-list{display:flex;flex-direction:column;gap:var(--spacing-3)}.event-card{background:var(--color-panel);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-4);transition:all var(--transition-fast)}.event-card:hover{border-color:#94a3b84d}.event-card.critical{border-left:4px solid var(--color-error)}.event-card.warning{border-left:4px solid var(--color-warning)}.event-card.info{border-left:4px solid var(--color-brand)}.event-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-2)}.event-type{font-weight:600;color:var(--color-text);font-size:var(--font-size-md)}.event-timestamp{color:var(--color-text-muted);font-size:var(--font-size-sm);font-family:var(--font-family-mono)}.event-message{color:var(--color-text-muted);font-size:var(--font-size-sm);margin:var(--spacing-2) 0}.event-actions{display:flex;gap:var(--spacing-2);margin-top:var(--spacing-3)}.detections-section{margin-bottom:var(--spacing-6)}.detections-section h2{margin:0 0 var(--spacing-4);font-size:var(--font-size-xl);color:var(--color-text)}.detections-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-3)}.detection-card{background:var(--color-panel);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-3);transition:all var(--transition-fast)}.detection-card:hover{border-color:var(--color-brand);transform:translateY(-2px);box-shadow:var(--shadow-md)}.detection-image{width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius-sm);margin-bottom:var(--spacing-2);object-fit:cover}.detection-info{display:flex;flex-direction:column;gap:var(--spacing-1)}.detection-class{font-weight:600;color:var(--color-text);font-size:var(--font-size-sm);text-transform:capitalize}.detection-confidence{color:var(--color-text-muted);font-size:var(--font-size-xs);font-family:var(--font-family-mono)}.detection-timestamp{color:var(--color-text-muted);font-size:var(--font-size-xs)}.loading-container{padding:var(--spacing-6);text-align:center}.loading-container h1{margin:0 0 var(--spacing-2);color:var(--color-text);font-size:var(--font-size-2xl)}.loading-container p{margin:0;color:var(--color-text-muted)}.empty-state{padding:var(--spacing-6);text-align:center;color:var(--color-text-muted);background:var(--color-panel);border:1px dashed var(--color-border);border-radius:var(--radius-lg)}.empty-state p{margin:0;font-style:italic}@media(max-width:768px){.camera-page{padding:var(--spacing-4)}.cameras-grid{grid-template-columns:1fr}.detections-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.page-header h1{font-size:var(--font-size-xl)}}@media(max-width:640px){.camera-header{flex-direction:column;gap:var(--spacing-2)}.event-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-1)}}.logs-page{padding:20px;max-width:1600px;margin:0 auto;display:flex;flex-direction:column;height:calc(100vh - 120px);background:#0f1a2d}.logs-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.header-left h1{margin:0 0 8px;color:#e2e8f0;font-size:2rem}.page-subtitle{margin:0;color:#94a3b8;font-size:.95rem}.header-actions{display:flex;gap:12px}.export-btn{padding:10px 16px;background:#3b82f6;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:.9rem;transition:background .2s}.export-btn:hover{background:#2563eb}.export-btn:disabled{opacity:.5;cursor:not-allowed}.log-filters{margin-bottom:16px}.filter-row{display:flex;gap:12px;flex-wrap:wrap}.filter-select{padding:10px 12px;border:2px solid #334155;border-radius:8px;background:#1e293b;color:#e2e8f0;font-size:.95rem;cursor:pointer;min-width:150px;transition:border-color .2s}.filter-select:focus{outline:none;border-color:#3b82f6}.filter-select.filter-limit{min-width:120px}.filter-search{flex:1;padding:10px 12px;border:2px solid #334155;border-radius:8px;background:#1e293b;color:#e2e8f0;font-size:.95rem;min-width:200px}.filter-search::placeholder{color:#64748b}.filter-search:focus{outline:none;border-color:#3b82f6}.filter-refresh-btn{padding:10px 16px;background:#1e293b;border:2px solid #334155;border-radius:8px;cursor:pointer;font-size:1.2rem;transition:all .2s;color:#94a3b8}.filter-refresh-btn:hover{background:#334155;border-color:#3b82f6;color:#3b82f6;transform:rotate(180deg)}.live-controls{display:flex;align-items:center;gap:20px;padding:12px 16px;background:#1e293b;border:2px solid #334155;border-radius:8px;margin-bottom:16px}.toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;color:#e2e8f0;font-size:.95rem}.toggle-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#3b82f6}.toggle-text{user-select:none}.new-logs-badge{padding:6px 12px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-weight:600;font-size:.9rem;cursor:pointer;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.log-count{color:#94a3b8;font-size:.9rem;margin-left:auto}.log-container{flex:1;overflow-y:auto;background:#1e293b;border:2px solid #334155;border-radius:12px;padding:16px}.log-list{display:flex;flex-direction:column;gap:2px}.log-entry{border-left:4px solid transparent;padding:10px 14px;background:#0f1a2d;border-radius:6px;font-family:Courier New,monospace;font-size:.9rem;transition:background .15s}.log-entry:hover{background:#1a2538}.log-entry[data-severity=debug]{border-left-color:#94a3b8}.log-entry[data-severity=info]{border-left-color:#3b82f6}.log-entry[data-severity=warning]{border-left-color:#f59e0b}.log-entry[data-severity=error]{border-left-color:#ef4444}.log-entry[data-severity=critical]{border-left-color:#dc2626;background:#1f1210}.log-row{display:flex;align-items:center;gap:12px}.log-timestamp{color:#94a3b8;font-size:.85rem;white-space:nowrap;min-width:180px}.log-severity{padding:2px 8px;border-radius:4px;font-size:.75rem;font-weight:700;letter-spacing:.05em;white-space:nowrap;min-width:60px;text-align:center;text-transform:uppercase}.log-severity[data-severity=debug]{background:#334155;color:#94a3b8}.log-severity[data-severity=info]{background:#1e3a8a;color:#93c5fd}.log-severity[data-severity=warning]{background:#78350f;color:#fcd34d}.log-severity[data-severity=error]{background:#991b1b;color:#fca5a5}.log-severity[data-severity=critical]{background:#7f1d1d;color:#fef2f2}.log-source{color:#60a5fa;font-weight:600;white-space:nowrap;min-width:120px}.log-message{color:#e2e8f0;flex:1;word-break:break-word}.log-expand-btn{background:none;border:none;cursor:pointer;color:#94a3b8;padding:4px 8px;font-size:.8rem;transition:color .2s}.log-expand-btn:hover{color:#60a5fa}.log-correlation{margin-top:8px;padding-left:24px;display:flex;align-items:center;gap:8px;font-size:.85rem}.correlation-label{color:#94a3b8}.correlation-link{background:#1e3a8a;color:#93c5fd;padding:2px 8px;border:1px solid #1e40af;border-radius:4px;cursor:pointer;font-family:Courier New,monospace;font-size:.8rem;transition:all .2s}.correlation-link:hover{background:#1e40af;border-color:#3b82f6}.log-details{margin-top:12px;padding:12px;background:#0a0f1a;color:#cbd5e1;border-radius:6px;border:1px solid #334155;overflow-x:auto;font-size:.85rem;font-family:Courier New,monospace}.loading-state{text-align:center;padding:60px 20px;color:#64748b;font-size:1rem}.empty-state{text-align:center;padding:60px 20px;color:#64748b;background:#1e293b;border:2px dashed #334155;border-radius:12px}.empty-state p{margin:0 0 8px;font-size:1.1rem}.empty-state .hint{margin-top:8px;font-size:.9rem;color:#475569}@media(max-width:1024px){.logs-page{height:auto;min-height:calc(100vh - 120px)}.logs-header{flex-direction:column;gap:16px}.header-actions{width:100%}.export-btn{flex:1}.log-row{flex-wrap:wrap}.log-timestamp,.log-source{min-width:auto}.filter-row{flex-direction:column}.filter-select,.filter-search{width:100%}.live-controls{flex-wrap:wrap}}@media(max-width:768px){.logs-page{padding:12px}.header-left h1{font-size:1.5rem}.log-container{padding:12px}.log-entry{font-size:.8rem}.log-timestamp{font-size:.75rem;min-width:150px}.log-severity{font-size:.7rem;min-width:50px}}.log-container::-webkit-scrollbar{width:12px}.log-container::-webkit-scrollbar-track{background:#0f1a2d;border-radius:6px}.log-container::-webkit-scrollbar-thumb{background:#334155;border-radius:6px}.log-container::-webkit-scrollbar-thumb:hover{background:#475569}.health-page{padding:20px;max-width:1400px;margin:0 auto}.health-page h1{margin:0 0 8px;color:#1e293b;font-size:2rem}.page-subtitle{color:#64748b;margin:0 0 30px;font-size:1rem}.health-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:32px}.overview-card{background:#fff;border:2px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:8px}.overview-label{font-size:.85rem;color:#64748b;text-transform:uppercase;font-weight:600;letter-spacing:.05em}.overview-value{font-size:1.75rem;font-weight:700;color:#1e293b}.overview-value.status-ok{color:#10b981}.overview-value.status-warn{color:#f59e0b}.overview-value.status-error{color:#ef4444}.module-health-section{margin-bottom:32px}.module-health-section h2{margin:0 0 16px;color:#1e293b;font-size:1.5rem}.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}.module-health-card{background:#fff;border:2px solid #e2e8f0;border-radius:12px;padding:20px}.module-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.module-title{display:flex;align-items:center;gap:12px}.module-icon{font-size:1.5rem}.module-title h3{margin:0;font-size:1.2rem;color:#1e293b}.status-pill{padding:4px 12px;border-radius:999px;font-size:.85rem;font-weight:600}.status-pill.status-ok{background:#dcfce7;color:#166534}.status-pill.status-warn{background:#fef3c7;color:#92400e}.status-pill.status-error{background:#fee2e2;color:#991b1b}.module-stats{display:flex;gap:24px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e2e8f0}.stat-item{display:flex;flex-direction:column;gap:4px}.stat-label{font-size:.85rem;color:#64748b}.stat-value{font-size:1.5rem;font-weight:700;color:#1e293b}.stat-value.stat-offline{color:#ef4444}.expand-toggle{width:100%;padding:10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;font-weight:600;color:#3b82f6;transition:all .2s}.expand-toggle:hover{background:#eff6ff;border-color:#3b82f6}.device-list{margin-top:16px;display:flex;flex-direction:column;gap:12px}.device-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px}.device-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.device-info{display:flex;align-items:center;gap:12px}.device-id{font-weight:600;color:#1e293b}.device-status{padding:2px 8px;border-radius:4px;font-size:.75rem;font-weight:600;text-transform:uppercase}.device-status.status-online{background:#dcfce7;color:#166534}.device-status.status-offline{background:#fee2e2;color:#991b1b}.device-status.status-error{background:#fef3c7;color:#92400e}.circuit-badge{padding:4px 10px;border-radius:6px;font-size:.8rem;font-weight:600}.circuit-badge.cb-closed{background:#dcfce7;color:#166534}.circuit-badge.cb-open{background:#fee2e2;color:#991b1b}.circuit-badge.cb-half-open{background:#fef3c7;color:#92400e}.device-meta{font-size:.85rem;color:#64748b;margin-bottom:8px}.device-error{display:flex;align-items:center;gap:8px;padding:8px;background:#fef3c7;border-left:3px solid #f59e0b;border-radius:4px;margin-top:8px}.error-icon{font-size:1.2rem}.error-reason{font-size:.9rem;color:#92400e;font-weight:500}.probe-history{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid #e2e8f0}.probe-label{font-size:.85rem;color:#64748b}.probe-dots{display:flex;gap:4px}.probe-dot{width:12px;height:12px;border-radius:50%;cursor:help}.probe-dot.probe-ok{background:#10b981}.probe-dot.probe-fail{background:#ef4444}.alerts-section,.events-section{margin-bottom:32px}.alerts-section h2,.events-section h2{margin:0 0 16px;color:#1e293b;font-size:1.5rem}.event-filters{display:flex;gap:12px;margin-bottom:16px}.filter-btn{padding:8px 16px;background:#fff;border:2px solid #e2e8f0;border-radius:8px;cursor:pointer;font-weight:600;color:#64748b;transition:all .2s}.filter-btn:hover{border-color:#3b82f6;color:#3b82f6}.filter-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}.event-list{display:flex;flex-direction:column;gap:12px}.health-event{background:#fff;border:2px solid #e2e8f0;border-left-width:4px;border-radius:8px;padding:16px}.health-event.severity-critical{border-left-color:#7f1d1d;background:#fef2f2}.health-event.severity-error{border-left-color:#ef4444}.health-event.severity-warning{border-left-color:#f59e0b}.health-event.severity-info{border-left-color:#3b82f6}.event-header{display:flex;gap:12px}.event-icon{font-size:1.5rem;flex-shrink:0}.event-main{flex:1}.event-top-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}.severity-badge{padding:2px 8px;border-radius:4px;font-size:.75rem;font-weight:700;letter-spacing:.05em}.severity-badge.severity-critical{background:#7f1d1d;color:#fff}.severity-badge.severity-error{background:#ef4444;color:#fff}.severity-badge.severity-warning{background:#f59e0b;color:#fff}.severity-badge.severity-info{background:#3b82f6;color:#fff}.event-timestamp{font-size:.85rem;color:#64748b}.event-source{font-weight:600;color:#1e293b;margin:0 0 4px}.event-message{color:#475569;margin:0 0 8px}.details-toggle{margin-top:12px;padding:6px 12px;background:#f8fafc;border:1px solid #cbd5e1;border-radius:6px;cursor:pointer;font-size:.9rem;font-weight:600;color:#3b82f6}.details-toggle:hover{background:#eff6ff}.event-details{margin-top:12px;padding:12px;background:#1e293b;color:#e2e8f0;border-radius:6px;font-size:.85rem;overflow-x:auto;font-family:Courier New,monospace}.empty-state{text-align:center;padding:60px 20px;color:#94a3b8;background:#fff;border:2px dashed #cbd5e1;border-radius:12px}.empty-state p{font-size:1.1rem;margin:0}.loading{text-align:center;padding:40px;color:#64748b}.error-state{text-align:center;padding:40px;color:#ef4444;background:#fee2e2;border:2px solid #fca5a5;border-radius:12px}@media(max-width:768px){.module-grid{grid-template-columns:1fr}.health-overview{grid-template-columns:repeat(2,1fr)}.event-header{flex-direction:column;align-items:flex-start}.event-filters{flex-wrap:wrap}}.component-demo{max-width:1200px;margin:0 auto;padding:var(--spacing-5)}.demo-header{margin-bottom:var(--spacing-6);text-align:center}.demo-header h1{margin:0 0 var(--spacing-2);font-size:var(--font-size-2xl)}.demo-header p{margin:0;color:var(--color-text-muted);font-size:var(--font-size-lg)}.demo-section{margin-bottom:var(--spacing-6);padding:var(--spacing-5);background:#12213f66;border:1px solid rgba(148,163,184,.1);border-radius:var(--radius-lg)}.demo-section h2{margin:0 0 var(--spacing-4);font-size:var(--font-size-xl);color:var(--color-brand)}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-3);align-items:center}.demo-grid-cards{display:grid;gap:var(--spacing-4)}.demo-grid-wide{display:grid;gap:var(--spacing-4);max-width:500px}@media(min-width:768px){.demo-grid-cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.component-demo,.demo-section{padding:var(--spacing-4)}.demo-grid{grid-template-columns:1fr}}