:root,[data-theme=neon]{--bg:#0b1220;--card:#131c2e;--tx:#e6edf7;--mu:#8da2c0;--ac:#22d3ee;--ac2:#6366f1;--bd:#223049;--btx:#041018}
[data-theme=ice]{--bg:#eef3fb;--card:#fff;--tx:#0f1b2d;--mu:#5b6b84;--ac:#2563eb;--ac2:#06b6d4;--bd:#d5deec;--btx:#fff}
[data-theme=amber]{--bg:#121212;--card:#1c1c1f;--tx:#f2f2f2;--mu:#9a9aa2;--ac:#f59e0b;--ac2:#ef4444;--bd:#2c2c31;--btx:#150e00}
*{box-sizing:border-box}
body{margin:0;font-family:Tahoma,system-ui,sans-serif;background:var(--bg);color:var(--tx);
 background-image:radial-gradient(circle at 85% -10%,color-mix(in srgb,var(--ac) 18%,transparent),transparent 45%)}
.wrap{max-width:720px;margin:auto;padding:14px}
h2{margin:.4em 0;background:linear-gradient(90deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
h3{color:var(--mu);font-weight:600}
.bar{display:flex;gap:6px;align-items:center;margin-bottom:10px}.bar span{margin-inline-end:auto}
.chip{background:var(--card);color:var(--tx);border:1px solid var(--bd);border-radius:999px;padding:6px 12px;font-size:13px;width:auto;margin:0;text-decoration:none;cursor:pointer}
input,textarea,select{font:inherit;width:100%;padding:12px;margin:5px 0;border:1px solid var(--bd);border-radius:12px;background:var(--card);color:var(--tx)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ac);border-color:transparent}
button{font:inherit;width:100%;padding:12px;margin:5px 0;border:0;border-radius:12px;cursor:pointer;font-weight:700;
 background:linear-gradient(90deg,var(--ac),var(--ac2));color:var(--btx);box-shadow:0 4px 14px color-mix(in srgb,var(--ac) 30%,transparent)}
button:active{transform:scale(.98)}
button.sm{width:auto;padding:6px 14px;font-size:13px;background:var(--card);color:var(--mu);border:1px solid var(--bd);box-shadow:none}
.row{display:flex;gap:8px}.row input{flex:1}.row button{width:auto;flex:0 0 auto;padding:12px 20px}
.list{list-style:none;padding:0;margin:10px 0}
.pbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;padding:16px 18px;min-height:56px;
 background:var(--card);border:1px solid var(--bd);border-inline-start:4px solid var(--ac);border-radius:14px;color:var(--tx);
 text-decoration:none;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.18);transition:.15s}
.pbtn:active{transform:scale(.98);border-color:var(--ac)}.pbtn::after{content:"‹";color:var(--ac);font-size:24px}
.pbtn small{color:var(--mu);font-weight:400}
.item{background:var(--card);border:1px solid var(--bd);padding:12px;margin:12px 0;border-radius:14px}
.item img,.item video{max-width:100%;border-radius:10px;display:block}.item audio{width:100%}
.item small{color:var(--mu)}.off{opacity:.5}.err{color:#f87171}.okmsg{color:#34d399}
label.plain{display:block;padding:6px 0 0;font-size:14px;color:var(--mu)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:104px;padding:12px;margin:0;
 background:var(--card);border:1px dashed var(--ac);border-radius:16px;color:var(--tx);cursor:pointer;text-align:center;font-weight:700}
.tile i{font-style:normal;font-size:34px}.tile small{color:var(--mu);font-weight:400;font-size:12px}
.tile input{display:none}.tile:active{background:color-mix(in srgb,var(--ac) 15%,var(--card))}
#busy{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);color:#fff;align-items:center;justify-content:center;font-size:18px;z-index:9}

/* FARA identity and installable web app */
.brand-header{display:flex;justify-content:center;align-items:center;padding:8px 0 14px;margin-bottom:10px;border-bottom:1px solid var(--bd)}
.brand-header a{display:flex;align-items:center;justify-content:center;width:100%;max-width:380px}
.brand-header img{display:block;width:100%;max-height:100px;object-fit:contain}
.login-brand{text-align:center;margin:clamp(24px,8vh,72px) auto 28px}
.login-brand img{display:block;width:clamp(112px,30vw,164px);height:auto;aspect-ratio:1;object-fit:contain;margin:0 auto 12px;border-radius:26px}
.login-brand h1{font-size:2.2rem;letter-spacing:.02em;margin:0;background:linear-gradient(100deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
.login-brand p{margin:8px 0;color:var(--mu);font-size:.95rem}
body:has(.login-brand) .wrap{min-height:100svh;display:flex;flex-direction:column}
body:has(.login-brand) .brand-header{padding-top:4px}
@media(max-width:480px){.brand-header img{max-height:76px}.wrap{padding:12px}}