:root{color-scheme:dark;--bg: #0b0b0f;--surface: #16161d;--text: #f2f2f5;--muted: #9a9aa5;--accent: #4f9dff;--danger: #ff6b6b;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}.app-shell{min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid #26262f}.app-title{color:var(--text);text-decoration:none;font-weight:700;font-size:1.25rem}.app-header nav{display:flex;align-items:center;gap:1rem}.app-header a{color:var(--accent)}.app-user{color:var(--muted)}.app-main{flex:1;width:100%;max-width:960px;margin:0 auto;padding:1.5rem}.nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.5rem}.nav-card{display:block;padding:1.25rem;border-radius:.75rem;background:var(--surface);color:var(--text);text-decoration:none;border:1px solid #26262f;transition:border-color .15s ease}.nav-card:hover,.nav-card:focus-visible{border-color:var(--accent)}.nav-card h2{margin:0 0 .5rem;font-size:1.05rem}.nav-card p{margin:0;color:var(--muted);font-size:.9rem}.auth-form{max-width:360px}.auth-form form{display:flex;flex-direction:column;gap:.5rem}.auth-form label{margin-top:.5rem;font-size:.9rem;color:var(--muted)}.auth-form input{padding:.6rem .75rem;border-radius:.5rem;border:1px solid #34343f;background:var(--surface);color:var(--text);font-size:1rem}.auth-form button{margin-top:1rem;padding:.65rem;border-radius:.5rem;border:none;background:var(--accent);color:#061024;font-weight:600;cursor:pointer}.auth-form button:disabled{opacity:.6;cursor:not-allowed}.form-error{color:var(--danger);font-size:.9rem}.phase-note{color:var(--muted);font-size:.9rem;border-left:3px solid var(--accent);padding-left:.75rem}.app-header button{background:none;border:1px solid #34343f;color:var(--text);border-radius:.4rem;padding:.35rem .75rem;cursor:pointer}.pairing-card{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;margin-top:1.5rem;border-radius:.75rem;background:var(--surface);border:1px solid #26262f;max-width:320px;text-align:center}.pairing-pin{font-size:2.5rem;font-weight:700;letter-spacing:.35rem;font-variant-numeric:tabular-nums}.pairing-card img{border-radius:.5rem;background:#fff;padding:.5rem}.pairing-status{margin-top:1.5rem}.pairing-status--connected{color:var(--accent)}.connection-status{color:var(--muted);font-size:.9rem}.upload-dropzone{margin-top:1.5rem;padding:2rem;border:2px dashed #34343f;border-radius:.75rem;text-align:center;color:var(--muted);cursor:pointer;transition:border-color .15s ease}.upload-dropzone--active,.upload-dropzone:hover{border-color:var(--accent)}.upload-tasks{list-style:none;padding:0;margin:1rem 0;display:flex;flex-direction:column;gap:.5rem}.upload-tasks li{display:flex;align-items:center;gap:.75rem;font-size:.9rem}.upload-tasks progress{flex:1;max-width:200px}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-top:1.5rem}.media-card{border-radius:.75rem;overflow:hidden;background:var(--surface);border:1px solid #26262f}.media-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#0006}.media-card__placeholder{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;color:var(--muted);text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}.media-card__body{padding:.6rem .75rem}.media-card__name{margin:0 0 .25rem;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-card--pickable{cursor:pointer;text-align:left;font:inherit;color:inherit;padding:0}.media-card--active{outline:2px solid var(--accent)}.receiver-media{max-width:100%;max-height:90vh;display:block;margin:0 auto}.receiver-audio{text-align:center;padding:2rem}.transport-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.5rem;padding:1rem;border-radius:.75rem;background:var(--surface);border:1px solid #26262f}.transport-controls input[type=range]{flex:1;min-width:120px}@media (min-width: 768px){.app-main{padding:2.5rem}}