/* Rental SMM Billing - shared theme v1.1.0 (light + dark). Loaded after app.css on every page except the installer. */
:root{color-scheme:light;--bg:#f5f7fb;--card:#fff;--card2:#f8fafd;--ink:#0b1324;--text:#475569;--muted:#66758b;--line:#e3e8f1;--input:#fff;--input-line:#d6dce8;--hover:#f3f6fd;--code:#eef1f8;
--sh1:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);--sh2:0 18px 40px -18px rgba(16,24,40,.22);
--ok-bg:#dcfce7;--ok-tx:#15803d;--bad-bg:#ffe4e6;--bad-tx:#be123c;--warn-bg:#fef3c7;--warn-tx:#b45309;--info-bg:#dbeafe;--info-tx:#1d4ed8;--pill:#eef1f8;--pill-tx:#475569;--switch:#cbd5e1;--nav-bg:rgba(255,255,255,.86)}
html[data-theme=dark]{color-scheme:dark;--bg:#070b17;--card:#0f1629;--card2:#131b33;--ink:#f2f5ff;--text:#b3bddc;--muted:#8793b8;--line:rgba(255,255,255,.09);--input:#0a1124;--input-line:rgba(255,255,255,.14);--hover:rgba(255,255,255,.04);--code:rgba(255,255,255,.08);
--sh1:0 1px 2px rgba(0,0,0,.4);--sh2:0 26px 50px -22px rgba(0,0,0,.75);
--ok-bg:rgba(34,197,94,.15);--ok-tx:#86efac;--bad-bg:rgba(244,63,94,.15);--bad-tx:#fda4b4;--warn-bg:rgba(245,158,11,.15);--warn-tx:#fcd34d;--info-bg:rgba(59,130,246,.18);--info-tx:#93c5fd;--pill:rgba(255,255,255,.08);--pill-tx:#c7cfee;--switch:#2a3358;--nav-bg:rgba(7,11,23,.82)}

body{background:var(--bg);color:var(--text);transition:background-color .2s,color .2s}
html[data-theme=dark] a{color:#a79fff}
html[data-theme=dark] ::selection{background:var(--primary);color:#fff}
h1,h2,h3,h4,label{color:var(--ink)}
.h2{font-size:22px}
code,.mono{background:var(--code);color:var(--ink)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--primary);color:#fff!important;padding:10px 16px;border-radius:10px;font-weight:700}.skip:focus{left:12px}

/* buttons */
.btn{background:var(--card);border-color:var(--line);color:var(--ink)}
.btn:hover{background:var(--hover)}
.btn-primary{background:var(--grad);border-color:transparent;color:#fff!important}.btn-primary:hover{background:var(--grad)}
.btn-ok{background:linear-gradient(135deg,#16a34a,#22c55e);border-color:transparent;color:#fff!important}.btn-ok:hover{background:linear-gradient(135deg,#16a34a,#22c55e)}
.btn-dark{background:var(--ink);border-color:var(--ink);color:var(--bg)!important}.btn-dark:hover{background:var(--ink)}
.btn-danger{background:var(--card);border-color:rgba(225,29,72,.35);color:var(--bad)!important}.btn-danger:hover{background:var(--bad-bg)}

/* surfaces */
.card,.stat,.feat,.plan,.demo-card,.faq details,.cmp,.chip,.tabs,.pager a,.nav-toggle{background:var(--card);border-color:var(--line);color:var(--ink)}
.card,.stat,.feat,.plan,.demo-card,.faq details{color:var(--text)}
.stat b,.plan .amt{color:var(--ink)}
.muted,.hint,.stat span,.feat p,.faq details p,.sec .sub{color:var(--muted)}
.chip i{color:var(--primary)}
.pager a{color:var(--text)}.pager a.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.tabs a{color:var(--muted)}.tabs a:hover{color:var(--ink)}.tabs a.on{color:#fff}
.topbar{background:var(--nav-bg);border-bottom-color:var(--line)}.topbar h1{color:var(--ink)}
.empty{color:var(--muted)}
.kv{border-bottom-color:var(--line)}.kv.total{color:var(--ink)}
.cmp:has(input:checked){background:var(--primary-soft2);border-color:var(--primary)}
.demo-cred{background:var(--card2);border-color:var(--line);color:var(--text)}
.qr{background:#fff}

/* pills + alerts */
.pill{background:var(--pill);color:var(--pill-tx)}
.pill.ok{background:var(--ok-bg);color:var(--ok-tx)}.pill.bad{background:var(--bad-bg);color:var(--bad-tx)}.pill.warn{background:var(--warn-bg);color:var(--warn-tx)}.pill.info{background:var(--info-bg);color:var(--info-tx)}
.alert.ok,.alert.success{background:var(--ok-bg);color:var(--ok-tx);border-color:transparent}.alert.bad,.alert.danger{background:var(--bad-bg);color:var(--bad-tx);border-color:transparent}
.alert.warning{background:var(--warn-bg);color:var(--warn-tx);border-color:transparent}.alert.info{background:var(--info-bg);color:var(--info-tx);border-color:transparent}
.alert a{color:inherit;text-decoration:underline}

/* tables */
.tbl th{background:var(--card2);color:var(--muted)}
.tbl td{border-bottom-color:var(--line);color:var(--text)}.tbl td b{color:var(--ink)}
.tbl tr:hover td{background:var(--hover)}

/* forms */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=hidden]),select,textarea{background:var(--input);border-color:var(--input-line);color:var(--ink)}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=hidden]):focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}
input:disabled{background:var(--card2);color:var(--muted)}
input[type=file]{background:var(--card2);border-color:var(--input-line);color:var(--text)}
input[type=color]{background:var(--input);border-color:var(--input-line)}
select option{background:var(--card);color:var(--ink)}
.sw span{background:var(--switch)}.chk{color:var(--text)}
.pw{position:relative}.pw input{padding-right:46px!important}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:10px}.pw-eye:hover{color:var(--ink);background:var(--hover)}

/* theme toggle */
.theme-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;display:inline-grid;place-items:center;font-size:15px;transition:.15s;flex:none}
.theme-btn:hover{background:var(--hover);transform:translateY(-1px)}
html[data-theme=dark] .theme-btn .i-moon{display:none}html:not([data-theme=dark]) .theme-btn .i-sun{display:none}
html[data-theme=dark] .theme-btn .i-sun{color:#fcd34d}

/* auth pages (client + admin login / register / reset) */
.auth-brand{background:linear-gradient(155deg,#080b1e,#161c58 68%,var(--primary))}
.auth-main{position:relative;background:radial-gradient(640px 380px at 100% 0,var(--primary-soft),transparent),var(--bg)}
.auth-main .box{background:var(--card);border-color:var(--line);box-shadow:0 30px 70px -34px rgba(16,24,40,.3)}
html[data-theme=dark] .auth-main .box{box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.auth-main h2{color:var(--ink);letter-spacing:-.02em}
.auth-top{position:absolute;top:18px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.auth-top a.back{font-weight:600;font-size:13px;color:var(--muted)}.auth-top a.back:hover{color:var(--ink);text-decoration:none}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1.5px solid var(--input-line);border-radius:12px;background:var(--card);color:var(--ink)!important;font:600 14px Inter,sans-serif;text-decoration:none!important;transition:.15s;box-shadow:var(--sh1)}
.btn-google:hover{background:var(--hover);border-color:var(--primary);transform:translateY(-1px)}
.btn-google .g-ico{flex:none}
.or-sep{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:12.5px;font-weight:600}.or-sep:before,.or-sep:after{content:"";flex:1;height:1px;background:var(--line)}
@media(max-width:900px){.auth-top{position:static;margin-bottom:14px}.auth-main{align-content:start}}

/* mobile fixes: two-column pages (order, pay, tickets...) stack on phones; hero buttons keep their colours */
@media(max-width:900px){.grid[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}}
.hello .btn-primary{background:#fff!important;color:var(--primary)!important;border-color:#fff}
.hello .btn:not(.btn-primary){color:#fff!important}
select{text-overflow:ellipsis;min-width:0}
.cmp>div,.cmp label{min-width:0}

/* mobile fixes: inline two-column grids (order, pay, tickets...) must stack; dashboard banner button must stay readable */
.grid>*{min-width:0}
@media(max-width:900px){.grid[style*="grid-template-columns"]{grid-template-columns:1fr!important}}
.hello .btn-primary{background:#fff;color:var(--primary)!important;border-color:#fff}
.hello .btn-primary:hover{background:#fff}
.hello .btn:not(.btn-primary){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff!important}
.hello .btn:not(.btn-primary):hover{background:rgba(255,255,255,.2)}
select{text-overflow:ellipsis}