:root { color-scheme:light; --ink:#10233f; --muted:#68778d; --accent:#ffad32; --accent2:#ff7a45; --paper:#fff; --bg:#edf2f8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:Inter,Segoe UI,sans-serif; color:var(--ink); background:radial-gradient(circle at top right,#ffe7bd 0,transparent 32rem),linear-gradient(145deg,#e7eef8,#f8fafc); }
button,a,label { -webkit-tap-highlight-color:transparent; }
.shell { width:min(760px,calc(100% - 28px)); margin:auto; padding:42px 0 calc(60px + env(safe-area-inset-bottom)); }
.hero { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:24px; }
.hero h1 { margin:6px 0 0; font-size:clamp(2.4rem,10vw,5rem); line-height:.93; letter-spacing:-.06em; }
.eyebrow { margin:0; color:var(--muted); font-size:.72rem; font-weight:900; letter-spacing:.16em; }
.counter { flex:none; padding:9px 13px; border-radius:999px; background:rgba(255,255,255,.72); font-weight:800; }
.capture-card,.player-card,.session-card { margin-top:18px; padding:20px; border:1px solid rgba(16,35,63,.1); border-radius:24px; background:rgba(255,255,255,.94); box-shadow:0 18px 55px rgba(16,35,63,.09); }
.camera-button { display:flex; min-height:160px; padding:24px; flex-direction:column; gap:12px; justify-content:center; align-items:center; text-align:center; border:2px dashed #a6b4c6; border-radius:18px; font-size:1.15rem; font-weight:900; cursor:pointer; background:#f8fafc; }
.camera-button:active { transform:scale(.99); background:#fff7e8; }
.camera-icon { display:grid; place-items:center; width:58px; height:58px; color:white; border-radius:18px; background:linear-gradient(135deg,var(--accent),var(--accent2)); font-size:1.7rem; }
.camera-button input { position:absolute; width:1px; height:1px; opacity:0; }
#file-name { margin:12px 2px; color:var(--muted); text-align:center; font-size:.88rem; }
.submit-hint { margin:10px 2px 0; color:var(--muted); text-align:center; font-size:.78rem; }
button,.actions a { display:inline-flex; min-height:48px; align-items:center; justify-content:center; border:0; border-radius:999px; padding:12px 18px; font-weight:900; text-decoration:none; cursor:pointer; }
#process-button,.merge-button { width:100%; color:#172033; background:linear-gradient(90deg,var(--accent),#ffc75a); font-size:1rem; }
#process-button:disabled { opacity:.42; cursor:not-allowed; }
.player-title,.session-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
h2 { margin:5px 0 12px; }
audio { width:100%; }
.pulse { color:#24a267; animation:pulse 1.4s infinite; }
.preview { max-height:100px; overflow:hidden; color:#435168; font:1rem/1.5 Georgia,serif; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.actions a { min-height:40px; padding:9px 14px; color:white; background:var(--ink); font-size:.8rem; }
.final-player { border-color:#efb24e; }
.page-list { list-style:none; margin:10px 0 20px; padding:0; }
.page-list li { display:grid; grid-template-columns:85px 1fr; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid #e5eaf0; font-size:.86rem; font-weight:800; }
.page-list audio { height:40px; }
.reset-button { width:100%; margin-top:10px; color:#9c3434; background:#fff0f0; }
.notice { margin:14px 0; padding:14px 17px; border-radius:14px; font-weight:700; }
.notice.error { color:#991b1b; background:#fee2e2; }.notice.success { color:#12633c; background:#dcfce7; }
.loading { position:fixed; inset:0; z-index:10; display:flex; padding:25px; flex-direction:column; gap:12px; align-items:center; justify-content:center; text-align:center; color:white; background:rgba(8,20,38,.92); }
.loading[hidden] { display:none; }.loading span { color:#bfcbda; }
.spinner { width:52px; height:52px; border:5px solid rgba(255,255,255,.2); border-top-color:var(--accent); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes pulse { 50% { opacity:.35; } }
@media(max-width:540px){ .shell{padding-top:25px}.hero h1{font-size:2.85rem}.counter{font-size:.78rem}.capture-card,.player-card,.session-card{padding:15px;border-radius:20px}.page-list li{grid-template-columns:1fr}.page-list li span{padding-left:5px} }
.account-nav { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-bottom:20px; color:var(--muted); font-size:.82rem; }
.account-nav a,.account-nav button { min-height:34px; padding:7px 12px; color:var(--ink); background:white; border-radius:999px; text-decoration:none; font-weight:800; }
.account-nav form { margin:0; }
.auth-shell { display:grid; min-height:100vh; place-items:center; padding:24px; }
.auth-card { width:min(920px,100%); padding:28px; border:1px solid rgba(16,35,63,.1); border-radius:24px; background:white; box-shadow:0 18px 55px rgba(16,35,63,.12); }
.auth-card > h1,.auth-card h1 { margin:8px 0 12px; }
.auth-card > p { color:var(--muted); line-height:1.5; }
.auth-form { display:grid; gap:14px; margin-top:20px; }
.auth-form label { display:grid; gap:7px; font-weight:800; font-size:.9rem; }
.auth-form input { width:100%; padding:13px 14px; border:1px solid #cbd5e1; border-radius:12px; font:inherit; }
.auth-form button { width:100%; color:#172033; background:linear-gradient(90deg,var(--accent),#ffc75a); }
.auth-form button.secondary { background:#e8edf4; }
.auth-link { margin:18px 0 0; text-align:center; }
.auth-link a,.admin-heading a { color:var(--ink); font-weight:800; }
.admin-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.admin-group { margin-top:25px; }
.admin-group h2 span { display:inline-grid; min-width:28px; height:28px; place-items:center; border-radius:50%; background:#edf2f8; font-size:.75rem; }
.user-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 0; border-top:1px solid #e5eaf0; }
.user-row span,.empty { color:var(--muted); font-size:.78rem; }
.user-row small { padding:3px 6px; border-radius:6px; color:white; background:var(--ink); }
.admin-actions { display:flex; flex-wrap:wrap; gap:8px; }
.admin-actions a { padding:8px 11px; border-radius:9px; color:#12633c; background:#dcfce7; text-decoration:none; font-size:.78rem; font-weight:900; }
.admin-actions a.danger { color:#991b1b; background:#fee2e2; }
@media(max-width:650px){.user-row{align-items:flex-start;flex-direction:column}.admin-heading{flex-direction:column}.auth-card{padding:20px}}