:root { color-scheme:light; font:16px/1.5 system-ui,sans-serif; color:#25332d; background:#f5f4ef; }
* { box-sizing:border-box; } body { margin:0; } main { max-width:960px; margin:auto; padding:32px 20px 60px; }
header { margin-bottom:32px; } h1 { font-size:clamp(2rem,5vw,3rem); letter-spacing:-.04em; margin:8px 0; } h2 { font-size:1.2rem; margin:0 0 16px; } p { margin:8px 0 16px; }
.eyebrow { letter-spacing:.14em; font-size:.75rem; font-weight:700; color:#64796b; }
section { background:white; border:1px solid #dddeda; border-radius:12px; padding:24px; margin:20px 0; }
form { display:grid; gap:14px; } label { display:grid; gap:5px; font-size:.9rem; font-weight:600; }
input,textarea,select { width:100%; font:inherit; padding:10px; border:1px solid #bfcac2; border-radius:6px; background:white; color:inherit; }
button { border:0; border-radius:6px; padding:11px 18px; background:#285e46; color:white; font:inherit; cursor:pointer; width:fit-content; }
button:disabled { opacity:.5; cursor:wait; } button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #91bfa8; outline-offset:2px; }
small,footer { color:#66736b; font-size:.8rem; } small { display:block; margin-top:12px; } footer { margin-top:32px; }
#message { min-height:24px; } #message.error { color:#9c2626; } .section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:20px; }
.card { border:1px solid #dddeda; border-radius:8px; padding:14px; overflow:hidden; } .card img { width:100%; height:150px; object-fit:contain; background:#f5f4ef; border-radius:4px; }
.card h3 { font-size:1rem; margin:8px 0; overflow-wrap:anywhere; } .card a { color:#285e46; overflow-wrap:anywhere; } .card p { font-size:.85rem; overflow-wrap:anywhere; } .badge { font-size:.75rem; color:#66736b; }
[hidden] { display:none !important; }
dialog { border:1px solid #bfcac2; border-radius:12px; width:min(540px,95vw); max-height:90vh; color:inherit; }
dialog::backdrop { background:#17291d88; } .actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .actions button { font-size:.85rem; padding:8px 12px; } .danger { background:#9c3737; }
#devices li { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:12px 0; } #new-token { border:2px solid #285e46; padding:16px; margin:16px 0; border-radius:8px; } #device-token { font-family:monospace; } button { min-height:44px; }