/* ===========================================================================
   gzportal design system — colorful premium.
   Light/white base, vibrant per-meaning color, serif numerals for character.
   =========================================================================== */
:root{
  --canvas:#f3f6fc; --surface:#ffffff; --raise:#f9fbff;
  --ink:#0f1a2e; --ink-2:#54637c; --ink-3:#8593a9;
  --line:#e5ebf4; --line-2:#eef2f9;

  /* brand */
  --brand:#6d5ef6; --brand-2:#9b6bff; --brand-ink:#5a4ee0;
  --grad-brand:linear-gradient(135deg,#6d5ef6,#9b6bff);

  /* semantic (each with a soft tint) */
  --em:#0ea371;  --em-bg:#e6f7ef;   /* ready / free / money */
  --bl:#2f6bff;  --bl-bg:#e8efff;   /* live / active */
  --rd:#ef4444;  --rd-bg:#fdecec;   /* today / urgent */
  --am:#e8890c;  --am-bg:#fcf0db;   /* this week / warning */
  --ro:#f2436a;  --ro-bg:#fdeaef;   /* problem */
  --vi:#8b5cf6;  --vi-bg:#f1ecfe;   /* accent */

  --shadow:0 1px 2px rgba(15,26,46,.04), 0 12px 28px -14px rgba(15,26,46,.16);
  --shadow-sm:0 1px 2px rgba(15,26,46,.06);
  --shadow-lg:0 24px 50px -22px rgba(15,26,46,.3);
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --disp:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --canvas:#0a1020; --surface:#111a2c; --raise:#152135;
  --ink:#eef2fa; --ink-2:#9db0ca; --ink-3:#6b7d98;
  --line:#21314a; --line-2:#1a2740;
  --em:#2fcd94; --em-bg:#0f3326; --bl:#5b8bff; --bl-bg:#132545;
  --rd:#f16a6a; --rd-bg:#371a1a; --am:#f0a84a; --am-bg:#352611;
  --ro:#f76a8a; --ro-bg:#371823; --vi:#a98bff; --vi-bg:#231a3f;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 20px 42px -18px rgba(0,0,0,.65);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 28px 60px -24px rgba(0,0,0,.75);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --canvas:#0a1020; --surface:#111a2c; --raise:#152135;
  --ink:#eef2fa; --ink-2:#9db0ca; --ink-3:#6b7d98;
  --line:#21314a; --line-2:#1a2740;
  --em:#2fcd94; --em-bg:#0f3326; --bl:#5b8bff; --bl-bg:#132545;
  --rd:#f16a6a; --rd-bg:#371a1a; --am:#f0a84a; --am-bg:#352611;
  --ro:#f76a8a; --ro-bg:#371823; --vi:#a98bff; --vi-bg:#231a3f;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 20px 42px -18px rgba(0,0,0,.65);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 28px 60px -24px rgba(0,0,0,.75);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--canvas); color:var(--ink);
  font-family:var(--ui); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.num{font-family:var(--disp); font-variant-numeric:tabular-nums; letter-spacing:-.01em; font-weight:600}

/* ---------- login ---------- */
.auth-wrap{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(109,94,246,.10), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(242,67,106,.08), transparent 55%),
    var(--canvas);
}
.auth-card{width:100%; max-width:390px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:34px 30px}
.brand{text-align:center; margin-bottom:24px}
.brand .mark{display:inline-grid; place-items:center; width:48px; height:48px; border-radius:14px;
  background:var(--grad-brand); color:#fff; font-family:var(--disp); font-weight:700; font-size:19px;
  margin-bottom:12px; box-shadow:0 8px 20px -8px rgba(109,94,246,.7)}
.brand h1{font-family:var(--disp); font-size:21px; margin:0; font-weight:600; letter-spacing:-.01em}
.brand p{margin:5px 0 0; color:var(--ink-3); font-size:13px}
.brand-logo{max-width:220px; width:80%; height:auto; display:block; margin:0 auto 10px}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .brand-logo{filter:brightness(1.12)} }
:root[data-theme="dark"] .brand-logo{filter:brightness(1.12)}
label{display:block; font-size:13px; font-weight:600; margin:16px 0 6px}
input[type="text"],input[type="password"]{width:100%; padding:12px 13px; border:1px solid var(--line);
  border-radius:11px; font-size:14px; background:var(--raise); color:var(--ink);
  font-family:var(--ui); transition:border-color .15s, box-shadow .15s}
input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(109,94,246,.16); background:var(--surface)}
.btn{width:100%; margin-top:22px; padding:12px 14px; border:0; border-radius:11px;
  background:var(--grad-brand); color:#fff; font-family:var(--ui); font-size:14px; font-weight:600;
  cursor:pointer; box-shadow:0 10px 22px -10px rgba(109,94,246,.7); transition:filter .15s, transform .05s}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(1px)}
.alert{margin-top:16px; padding:11px 13px; border-radius:11px; background:var(--rd-bg);
  border:1px solid color-mix(in srgb, var(--rd) 30%, transparent); color:var(--rd); font-size:13px; font-weight:500}

/* ---- shared 3-card stat strip (dividers), used on every section ---- */
.cards3{display:flex; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg,16px); box-shadow:var(--shadow-sm); overflow:hidden; margin:0 0 16px}
.card3{flex:1; min-width:0; padding:16px 18px; border-right:1px solid var(--line-2)}
.card3:last-child{border-right:0}
.c3v{font-family:var(--disp); font-weight:700; font-size:26px; letter-spacing:-.02em; line-height:1; color:var(--ink)}
.c3l{font-size:12.5px; color:var(--ink-3); font-weight:600; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card3.t-ok .c3v{color:var(--em)} .card3.t-bl .c3v{color:var(--bl)} .card3.t-warn .c3v{color:var(--am)}
.card3.t-rd .c3v{color:var(--rd)} .card3.t-vi .c3v{color:var(--brand-ink)}
@media (max-width:560px){ .card3{padding:13px 11px} .c3v{font-size:21px} .c3l{font-size:11px; white-space:normal; overflow:visible; line-height:1.25} }