:root{--bg:#05090d;--panel:#0b151d;--line:#243540;--text:#e8f0f3;--muted:#84939d;--orange:#ff9b18;--red:#ff2938}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -20%,#142631,var(--bg) 48%);color:var(--text);font-family:Arial,Helvetica,sans-serif}header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--line);background:#05090dea}header span{font-size:1em;letter-spacing:3px;color:#35d1ef}header h1{margin:4px 0 0;font-size:1.25em;letter-spacing:2px}header nav{display:flex;gap:10px}header a{color:#a9b7be;border:1px solid var(--line);padding:9px 12px;text-decoration:none;font-size:1em}main{max-width:1050px;margin:auto;padding:42px 25px}.login-card{max-width:420px;margin:8vh auto;padding:25px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.login-card p,.intro p,aside p{color:var(--muted);font-size:1em;line-height:1.6}.login-card input,.login-card button{width:100%;padding:12px;margin-top:10px;border:1px solid var(--line);background:#071017;color:white}.login-card button{background:#e56e19;border:0;font-weight:800;cursor:pointer}.login-card small{display:block;color:#ff5a64;margin-top:10px}.intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.intro h2{margin:0;font-size:1.5em}.intro p{margin:7px 0 0}.sound-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.sound-card{--accent:var(--orange);padding:22px;border:1px solid var(--accent);border-radius:12px;background:linear-gradient(155deg,color-mix(in srgb,var(--accent),transparent 86%),var(--panel) 45%);box-shadow:0 0 22px color-mix(in srgb,var(--accent),transparent 85%)}.sound-card.alarm{--accent:var(--red)}.sound-card header{height:auto;padding:0 0 20px;background:none;border:0;justify-content:flex-start;gap:13px}.sound-card header>span{display:grid;place-items:center;width:45px;height:45px;background:var(--accent);border-radius:7px;color:white;font-size:1.25em;letter-spacing:0;font-weight:900}.sound-card h3{margin:3px 0 0;font-size:1.1875em}.sound-card header small{color:var(--muted);font-size:1em}.toggle{display:flex;align-items:center;gap:9px;padding:15px 0;border-top:1px solid #ffffff16;font-size:1em}.toggle input{accent-color:var(--accent)}.upload{display:block;margin:10px 0;padding:13px;border:1px dashed color-mix(in srgb,var(--accent),white 25%);border-radius:6px;text-align:center;color:var(--accent);font-size:1em;font-weight:800;cursor:pointer}.upload input{display:none}.filename{height:18px;color:var(--muted);font-size:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.volume-label{display:block;margin-top:20px;color:var(--muted);font-size:1em}.volume-label b{float:right;color:white}.volume{width:100%;margin:12px 0;accent-color:var(--accent)}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.buttons button{padding:12px;border:1px solid var(--line);border-radius:5px;background:#12212b;color:white;font-weight:800;cursor:pointer}.buttons .save{background:var(--accent);border-color:var(--accent)}.buttons button:disabled{opacity:.45;cursor:not-allowed}aside{margin-top:20px;padding:15px 18px;border:1px solid var(--line);border-radius:7px;background:#09131a}aside p{margin:5px 0 0}#saveStatus{font-size:1em;color:#54d98b}@media(max-width:700px){header{padding:0 15px}main{padding:25px 12px}.sound-grid{grid-template-columns:1fr}.intro{display:block}}