:root {
  --bg: #f5f7f3; --surface: #fff; --surface-2: #edf3ec; --text: #172019;
  --muted: #5e6b61; --primary: #1f6b3b; --primary-dark: #154b2a; --primary-soft: #d8f4df;
  --danger: #b3261e; --border: #d9e1d8; --shadow: 0 18px 50px rgba(19, 44, 27, .09);
  --radius: 22px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0d1510; --surface:#151f18; --surface-2:#1d2a21; --text:#ecf3ed; --muted:#abb8ad; --primary:#8bd69d; --primary-dark:#a6e8b4; --primary-soft:#173c24; --danger:#ffb4ab; --border:#344438; --shadow:0 18px 50px rgba(0,0,0,.3); color-scheme:dark; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at 85% 0, var(--primary-soft), transparent 32rem), var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.topbar { position: sticky; top: 0; z-index: 20; display:flex; align-items:center; justify-content:space-between; padding:14px max(18px, env(safe-area-inset-right)) 14px max(18px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(18px); border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; }
.brand span { display:grid; line-height:1.05; }.brand strong{font-size:1.05rem}.brand small{color:var(--muted);font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;margin-top:4px}
.header-actions { display:flex; align-items:center; gap:8px; position:relative; }
.icon-button { width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--text); font-size:1.55rem; }
.icon-button:hover,.icon-button:focus-visible { background:var(--surface-2); }
.menu { position:absolute; right:0; top:50px; min-width:240px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:8px; }
.menu button { display:block; width:100%; padding:12px; text-align:left; border:0; border-radius:10px; color:var(--text); background:transparent; }.menu button:hover{background:var(--surface-2)}
main { width:min(100% - 32px, 920px); margin:0 auto; padding:54px 0 28px; }
.hero { display:flex; align-items:end; justify-content:space-between; gap:24px; margin:0 4px 30px; }
.eyebrow { margin:0 0 8px; color:var(--primary); font-size:.76rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }.hero h1{font-size:clamp(2rem,6vw,3.4rem);line-height:1.03;margin-bottom:12px;letter-spacing:-.045em}.hero p:last-child{color:var(--muted);max-width:560px;margin-bottom:0}
.button { min-height:44px; border-radius:13px; border:1px solid transparent; padding:10px 17px; font-weight:750; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.button.primary { color:#fff; background:var(--primary-dark); box-shadow:0 8px 22px rgba(24,94,49,.19); }.button.secondary{color:var(--text);background:var(--surface);border-color:var(--border)}.button.danger{color:#fff;background:#a92720}.wide{width:100%;margin-top:10px}
.content-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.search { margin:18px; padding:0 15px; min-height:52px; display:flex; align-items:center; gap:11px; border:1px solid var(--border); background:var(--surface-2); border-radius:15px; }
.search span { font-size:1.5rem;color:var(--muted) }.search input { width:100%; border:0; outline:0; background:transparent; color:var(--text); }
.list-meta { display:flex; justify-content:space-between; padding:0 21px 12px; color:var(--muted); font-size:.78rem; }
.mapping-list { list-style:none; margin:0; padding:0; }.mapping-item{display:flex;align-items:center;gap:15px;padding:15px 18px;border-top:1px solid var(--border)}
.mapping-item:hover{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}.id-badge{min-width:62px;padding:10px 9px;border-radius:12px;background:var(--primary-soft);color:var(--primary-dark);font-weight:850;text-align:center;letter-spacing:.04em}.mapping-copy{flex:1;min-width:0}.mapping-copy strong,.mapping-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mapping-copy span{color:var(--muted);font-size:.83rem;margin-top:3px}.row-actions{display:flex}.row-actions button{font-size:1rem}
.empty-state { text-align:center;padding:65px 24px 72px;color:var(--muted) }.empty-state h2{color:var(--text);margin:14px 0 8px}.empty-icon{width:62px;height:62px;border-radius:19px;display:grid;place-items:center;margin:auto;background:var(--primary-soft);color:var(--primary-dark);font-size:1.8rem;font-weight:900}
footer { display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:22px 20px calc(22px + env(safe-area-inset-bottom));color:var(--muted);font-size:.78rem }
.lock-screen { position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 10%,var(--primary-soft),transparent 28rem),var(--bg) }.lock-card{width:min(100%,420px);text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:38px 32px;box-shadow:var(--shadow)}.lock-card img{margin-bottom:22px}.lock-card h1{font-size:2rem;margin-bottom:10px}.lock-card>p:not(.eyebrow){color:var(--muted)}.fine-print{font-size:.76rem;margin:18px 0 0!important}
dialog { width:min(calc(100% - 28px),480px);border:1px solid var(--border);border-radius:22px;padding:0;background:var(--surface);color:var(--text);box-shadow:0 25px 80px rgba(0,0,0,.28) }dialog::backdrop{background:rgba(5,12,7,.62);backdrop-filter:blur(4px)}dialog form{padding:25px}.dialog-heading{display:flex;align-items:start;justify-content:space-between;gap:15px}.dialog-heading h2{margin-top:5px}.notice{background:var(--primary-soft);padding:12px;border-radius:12px;color:var(--primary-dark);font-size:.84rem}dialog label{display:grid;gap:7px;margin-top:15px;font-size:.84rem;font-weight:700}dialog input,dialog select{width:100%;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:12px;padding:12px;outline:none}dialog input:focus,dialog select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.error{min-height:1.15em;color:var(--danger);font-size:.8rem;margin:10px 0 0}.prose{color:var(--muted);line-height:1.55}.toast{position:fixed;left:50%;bottom:28px;z-index:200;transform:translateX(-50%);background:var(--text);color:var(--surface);padding:12px 18px;border-radius:12px;box-shadow:var(--shadow);font-weight:700;text-align:center;max-width:min(90vw,500px)}
@media(max-width:640px){main{padding-top:32px}.hero{align-items:stretch;flex-direction:column}.hero .button{align-self:flex-start}.topbar #installButton{display:none!important}.mapping-item{padding:14px 12px;gap:10px}.id-badge{min-width:54px}.lock-card{padding:30px 22px}.dialog-actions{flex-wrap:wrap}.dialog-actions .button{flex:1}}
@media(prefers-reduced-motion:no-preference){.button,.mapping-item,.icon-button{transition:transform .16s ease,background .16s ease}.button:active{transform:scale(.97)}}