/* Shared styling for the sign-in, account and admin pages — frosted glass over the brand's ambient light. */
:root{
  --pine:#104236; --pine-2:#0B3128; --moss:#2E7D5B; --apricot:#E78A53; --apricot-2:#C96F3B;
  --mist:#EEF1EF; --ink:#1F2A27; --muted:#5F6B67; --hair:rgba(16,66,54,.12);
  --danger:#B02A2A; --danger-bg:rgba(176,42,42,.10); --ok:#17693F; --ok-bg:rgba(46,125,91,.14); --warn:#A5501F;
  --glass:rgba(255,255,255,.58); --glass-edge:rgba(255,255,255,.75); --glass-solid:#fff;
  --r-lg:22px; --r-md:14px; --r-pill:100px;
  --blur:blur(22px) saturate(170%);
  --shadow:0 18px 50px -20px rgba(16,66,54,.35), 0 1px 0 rgba(255,255,255,.7) inset;
  /* semantic tokens: daylight by default, the same glass at night under [data-theme="dark"] (set by theme.js before first paint) */
  --ground:var(--mist); --fg-strong:var(--pine);
  --solid:var(--pine); --solid-hover:var(--moss); --on-solid:#fff;
  --field-bg:rgba(255,255,255,.7); --field-bd:rgba(16,66,54,.14); --field-bd-focus:var(--pine); --field-focus:#fff; --ring:rgba(16,66,54,.10);
  --chip-bg:rgba(255,255,255,.6); --tint:rgba(16,66,54,.09); --th-bg:rgba(255,255,255,.45);
  --hero-a:var(--pine); --hero-b:var(--pine-2); --glow:.7;
}
[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0A1C17; --ink:#ECEBE4; --muted:#9DB0A8; --hair:rgba(236,235,228,.10);
  --danger:#F08A8A; --danger-bg:rgba(240,138,138,.12); --ok:#7ED3A6; --ok-bg:rgba(126,211,166,.12); --warn:#F3A97A;
  --glass:rgba(22,54,45,.55); --glass-edge:rgba(255,255,255,.10); --glass-solid:#12312A;
  --shadow:0 18px 50px -20px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.06) inset;
  --fg-strong:#CFEADB;
  --solid:#2E7D5B; --solid-hover:#3A9670; --on-solid:#fff;
  --field-bg:rgba(255,255,255,.06); --field-bd:rgba(255,255,255,.14); --field-bd-focus:#7ED3A6; --field-focus:rgba(255,255,255,.10); --ring:rgba(126,211,166,.18);
  --chip-bg:rgba(255,255,255,.05); --tint:rgba(255,255,255,.08); --th-bg:rgba(255,255,255,.04);
  --hero-a:#173F33; --hero-b:#0F2D25; --glow:.5;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ground)}
body{margin:0;min-height:100vh;color:var(--ink);background:transparent;font-family:Tajawal,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select{font:inherit}
:focus-visible{outline:2px solid var(--apricot);outline-offset:2px;border-radius:6px}

/* ambient light behind the glass */
body::before,body::after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(80px);opacity:var(--glow);pointer-events:none}
body::before{width:64vw;height:64vw;max-width:880px;max-height:880px;left:-22vw;top:-18vw;background:radial-gradient(circle at 45% 45%,#2E7D5B 0%,rgba(46,125,91,.55) 35%,rgba(46,125,91,0) 70%)}
body::after{width:56vw;height:56vw;max-width:760px;max-height:760px;right:-18vw;bottom:-20vw;background:radial-gradient(circle,#E78A53 0%,rgba(231,138,83,.55) 35%,rgba(231,138,83,0) 70%)}
[dir="rtl"] body::before{left:auto;right:-18vw} [dir="rtl"] body::after{right:auto;left:-16vw}

.glass,.card,.panel,dialog{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);box-shadow:var(--shadow)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass,.card,.panel,dialog{background:var(--glass-solid)} }
@media (prefers-reduced-transparency:reduce){ .glass,.card,.panel,dialog{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none} body::before,body::after{display:none} }
@media (prefers-reduced-motion:reduce){ .pill{transition:none} }

.topbar{background:linear-gradient(160deg,var(--hero-a) 0%,var(--hero-b) 70%);color:#fff;position:relative;overflow:hidden}
.topbar::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-160px;top:-340px;background:radial-gradient(circle,rgba(231,138,83,.45),rgba(231,138,83,0) 62%);filter:blur(10px);pointer-events:none}
[dir="rtl"] .topbar::before{right:auto;left:-160px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px;position:relative}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{height:36px;width:auto;display:block}
.brand .t1{font-weight:800;font-size:17px;line-height:1.05;white-space:nowrap}
.brand .t2{font-size:12px;opacity:.7}
.nav-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pill{border:0;text-decoration:none;display:inline-block;border-radius:var(--r-pill);padding:9px 18px;cursor:pointer;font-weight:700;white-space:nowrap;line-height:1.2;transition:background .15s,transform .15s}
.pill:active{transform:translateY(1px)}
.pill.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pill.ghost:hover{background:rgba(255,255,255,.2)}
.pill.orange{background:var(--apricot);color:var(--pine-2)}
.pill.orange:hover{background:#F09A66}
.pill.green{background:var(--solid);color:var(--on-solid)}
.pill.green:hover{background:var(--solid-hover)}
.pill.line{background:var(--chip-bg);color:var(--fg-strong);border:1px solid var(--field-bd)}
.pill.line:hover{border-color:var(--fg-strong);background:var(--field-focus)}
.pill.danger{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(176,42,42,.25)}
.pill.sm{padding:6px 12px;font-size:13px}
.pill:disabled{opacity:.55;cursor:default}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0}

/* ---- centered auth card ---- */
.auth{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}
.auth-body{display:grid;place-items:center;padding:40px 16px}
.card{border-radius:var(--r-lg);padding:30px;width:100%;max-width:420px}
.card h1{margin:0 0 4px;font-size:26px;font-weight:800;color:var(--fg-strong);letter-spacing:-.01em}
.card p.sub{margin:0 0 18px;color:var(--muted);font-size:14.5px}
label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 6px}
input[type=text],input[type=email],input[type=password],select{width:100%;border:1px solid var(--field-bd);background:var(--field-bg);border-radius:12px;padding:12px 14px;outline:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s}
input::placeholder{color:var(--muted);opacity:.8}
select{color-scheme:light} select option{background:#fff;color:#1F2A27}
[data-theme="dark"] select{color-scheme:dark} [data-theme="dark"] select option{background:#12312A;color:#ECEBE4}
input:focus,select:focus{border-color:var(--field-bd-focus);box-shadow:0 0 0 4px var(--ring);background:var(--field-focus)}
input.code{font-size:26px;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;align-items:center}
.btn-row .pill{flex:1}
.msg{display:none;margin-top:14px;padding:11px 14px;border-radius:12px;font-size:14px}
.msg.err{display:block;background:var(--danger-bg);color:var(--danger);border:1px solid rgba(176,42,42,.2)}
.msg.ok{display:block;background:var(--ok-bg);color:var(--ok);border:1px solid rgba(46,125,91,.25)}
.hint{font-size:13px;color:var(--muted);margin-top:10px}
.foot{text-align:center;color:var(--muted);font-size:13px;padding:16px}

/* ---- account / admin layout ---- */
main.page{padding:28px 0 60px}
.page h1{font-size:28px;font-weight:800;color:var(--fg-strong);margin:0 0 4px;letter-spacing:-.01em}
.page .lead{color:var(--muted);margin:0 0 22px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start}
.panel{border-radius:var(--r-lg);padding:22px}
.panel h2{margin:0 0 4px;font-size:18px;color:var(--fg-strong)}
.panel p.sub{margin:0 0 8px;color:var(--muted);font-size:14px}
.panel.wide{grid-column:1/-1}
.tablewrap{overflow-x:auto;margin-top:12px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:var(--th-bg);text-align:start;font-size:13px;color:var(--fg-strong);padding:10px 12px;white-space:nowrap;font-weight:700;border-bottom:1px solid var(--hair)}
td{padding:10px 12px;border-top:1px solid var(--hair);vertical-align:middle}
tr:first-child td{border-top:0}
td.actions{white-space:nowrap}
td.actions .pill{margin:2px 2px 2px 0}
.tag{display:inline-block;border-radius:var(--r-pill);padding:3px 10px;font-size:12px;font-weight:700;background:var(--chip-bg);color:var(--muted);border:1px solid var(--field-bd);white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok);border-color:rgba(46,125,91,.3)}
.tag.warn{background:rgba(231,138,83,.16);color:var(--warn);border-color:rgba(231,138,83,.35)}
.tag.bad{background:var(--danger-bg);color:var(--danger);border-color:rgba(176,42,42,.3)}
.tag.green{background:var(--solid);color:var(--on-solid);border-color:var(--solid)}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:14px;background:var(--chip-bg);border:1px dashed var(--field-bd);padding:10px 14px;border-radius:12px;word-break:break-all;user-select:all}
.qr{display:block;margin:12px auto;border:1px solid var(--hair);border-radius:14px;background:#fff}
.muted{color:var(--muted)}
.small{font-size:13px}
/* settings + notification rules (admin) */
label.check{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--ink);margin:6px 0;cursor:pointer}
label.check input{width:16px;height:16px;accent-color:var(--solid);margin:0}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 12px}
.inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .inline select{width:auto;flex:1 1 auto}
select[multiple]{padding:6px;border-radius:12px;height:auto} select[multiple] option{padding:5px 8px;border-radius:8px}
.rules-layout{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:22px;align-items:start;margin-top:8px}
.rule-form h3{margin:0 0 2px;font-size:15px;color:var(--fg-strong)}
.rules-list table{margin-top:0}
.tag.ev{margin:2px 2px 2px 0;font-weight:600}
@media (max-width:860px){ .rules-layout{grid-template-columns:1fr} }
dialog{border-radius:var(--r-lg);padding:24px;max-width:460px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(11,49,40,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (max-width:600px){ .card{padding:22px} .btn-row .pill{flex:1 1 100%} }