/* Lunar Apps design system v1 — lunarapps.app. System fonts only (CSP-safe). Set --accent / --accent-d per app. */
:root{color-scheme:light dark;
--accent-l:#4338ca;--accent-d:#a5b4fc;--accent:var(--accent-l);--accent-ink:#fff;
--bg:#f6f7fb;--surface:#fff;--surface-2:#f0f2f8;--fg:#141826;--muted:#525a6e;--line:#dfe3ec;--line-strong:#8a93a6;
--red:#b42318;--amber:#b54708;--blue:#175cd3;--green:#067647;
--red-bg:#fef3f2;--amber-bg:#fffaeb;--blue-bg:#eff5ff;--green-bg:#ecfdf3;--banner:#eef0ff;
--r-sm:8px;--r:14px;--r-lg:20px;
--sh-1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);--sh-2:0 4px 16px rgba(16,24,40,.08),0 2px 4px rgba(16,24,40,.04);
--s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;
--f-sm:.875rem;--f-base:1rem;--f-lg:1.125rem;--f-xl:1.375rem;--f-2xl:clamp(1.5rem,1.2rem + 1.4vw,2rem);
--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media (prefers-color-scheme:dark){:root{--accent:var(--accent-d);--accent-ink:#0b1020;
--bg:#0d111b;--surface:#161b27;--surface-2:#1e2433;--fg:#e8ebf3;--muted:#a9b1c3;--line:#2b3244;--line-strong:#6b7489;
--red:#f97066;--amber:#fdb022;--blue:#84adff;--green:#47cd89;
--red-bg:#2a1615;--amber-bg:#2a2013;--blue-bg:#141e33;--green-bg:#10241a;--banner:#1c2238;
--sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 6px 20px rgba(0,0,0,.45)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0 auto;max-width:720px;padding:var(--s5) var(--s4) var(--s7);font:var(--f-base)/1.55 var(--font);color:var(--fg);background:var(--bg);overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
body::before{content:"☾ Lunar Apps";display:block;font-size:var(--f-sm);font-weight:600;letter-spacing:.04em;color:var(--muted);margin-bottom:var(--s2)}
h1{font-size:var(--f-2xl);line-height:1.2;letter-spacing:-.02em;margin:0 0 var(--s3);font-weight:750}
h1::after{content:"";display:block;width:48px;height:4px;border-radius:4px;background:var(--accent);margin-top:var(--s3)}
h2{font-size:var(--f-lg);font-weight:650;margin:var(--s6) 0 var(--s3);letter-spacing:-.01em}
h3{font-size:var(--f-base);margin:var(--s4) 0 var(--s2)}
p{margin:var(--s2) 0}small,.muted{color:var(--muted);font-size:var(--f-sm)}
a{color:var(--accent);text-underline-offset:3px;font-weight:550}
code{font-family:var(--mono);font-size:.85em;background:var(--surface-2);padding:.1em .4em;border-radius:6px;word-break:break-all}
.banner{background:var(--banner);border:1px solid var(--line);border-left:4px solid var(--accent);padding:var(--s3) var(--s4);border-radius:var(--r-sm);font-size:var(--f-sm);color:var(--fg)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);margin:var(--s3) 0;box-shadow:var(--sh-1);transition:box-shadow .15s}
.card:hover{box-shadow:var(--sh-2)}
.card b{font-weight:650}
.red,.trial{border-left:5px solid var(--red)}.amber,.hike{border-left:5px solid var(--amber)}.blue,.renewal{border-left:5px solid var(--blue)}.green{border-left:5px solid var(--green)}
.card.red,.card.trial{background:linear-gradient(90deg,var(--red-bg),var(--surface) 60%)}.card.amber,.card.hike{background:linear-gradient(90deg,var(--amber-bg),var(--surface) 60%)}
.card.blue,.card.renewal{background:linear-gradient(90deg,var(--blue-bg),var(--surface) 60%)}.card.green{background:linear-gradient(90deg,var(--green-bg),var(--surface) 60%)}
label{font-weight:600;font-size:var(--f-sm);display:inline-block;margin:var(--s2) var(--s2) var(--s1) 0}
input,select,textarea{font:inherit;font-size:16px;color:var(--fg);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:.55rem .7rem;max-width:100%}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:1.1em;height:1.1em;vertical-align:-2px;padding:0}
input[type=file]{border-style:dashed;width:100%}
textarea{display:block;width:100%;min-height:7rem;resize:vertical;margin-bottom:var(--s2)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button,.btn{font:inherit;font-weight:600;font-size:.95rem;min-height:44px;padding:.55rem 1.05rem;margin:var(--s1) var(--s1) var(--s1) 0;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4em;box-shadow:var(--sh-1);transition:filter .15s,transform .05s}
button:hover,.btn:hover{filter:brightness(1.08)}button:active,.btn:active{transform:translateY(1px)}
.card button,button.secondary{background:var(--surface);color:var(--accent);box-shadow:none}
.card button:hover,button.secondary:hover{background:var(--surface-2);filter:none}
/* Empty states: a container whose only child is a short paragraph */
div[id]>p:only-child{text-align:center;color:var(--muted);background:var(--surface);border:1.5px dashed var(--line-strong);border-radius:var(--r);padding:var(--s5) var(--s4);margin:var(--s3) 0;font-size:var(--f-sm)}
div[id]>p:only-child::before{content:"☾";display:block;font-size:1.6rem;color:var(--accent);margin-bottom:var(--s1)}
@media (max-width:480px){body{padding:var(--s4) var(--s3) var(--s6)}.card{padding:var(--s3)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
label:has(textarea){display:block}
[hidden]{display:none!important}

/* App accent */
:root{--accent-l:#4338ca;--accent-d:#a5b4fc}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s3)}.actions button{margin:0}
#tot .card{font-size:var(--f-lg);background:var(--accent);color:var(--accent-ink);border:0}
#tot .card b{font-size:1.5rem}
label{display:block;margin-top:var(--s4)}
.status{font-size:var(--f-sm);color:var(--green)}
#offline{display:none;background:var(--blue-bg);border:1px solid var(--line);padding:var(--s2) var(--s3);border-radius:var(--r-sm)}
.pay{background:var(--surface);border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);padding:var(--s5);margin-top:var(--s6);text-align:center}
.pay h2{margin-top:0}
@media (max-width:420px){.actions button,.btn{flex:1 1 auto}}