/* Scrubline end-customer portal — Neumorphism (Soft-UI), matching the brand. */
:root{
  --bg:#E0E5EC; --fg:#3D4852; --muted:#6B7280; --accent:#6C63FF;
  --red:#EF4444; --yellow:#F59E0B; --green:#22C55E;
  --r-card:28px; --r-base:16px;
  --sh-out:9px 9px 18px rgba(163,177,198,.6),-9px -9px 18px rgba(255,255,255,.5);
  --sh-out-sm:5px 5px 10px rgba(163,177,198,.6),-5px -5px 10px rgba(255,255,255,.5);
  --sh-in:inset 6px 6px 10px rgba(163,177,198,.6),inset -6px -6px 10px rgba(255,255,255,.5);
  --sh-in-deep:inset 10px 10px 20px rgba(163,177,198,.7),inset -10px -10px 20px rgba(255,255,255,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:"DM Sans",system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:"Plus Jakarta Sans",sans-serif;letter-spacing:-.02em}
.muted{color:var(--muted)} .tiny{font-size:.85rem} .center-t{text-align:center}
.wrap{max-width:760px;margin:0 auto;padding:2rem 1.5rem}

.card{background:var(--bg);box-shadow:var(--sh-out);border-radius:var(--r-card);padding:2rem}
.card.sm{box-shadow:var(--sh-out-sm);border-radius:var(--r-base);padding:1.25rem}

.brandmark{display:flex;align-items:center;gap:.7rem;font-family:"Plus Jakarta Sans";font-weight:800;font-size:1.3rem;justify-content:center;margin-bottom:.4rem}
.brandmark .dot{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;color:var(--accent);box-shadow:var(--sh-out-sm)}

label{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin:.9rem 0 .4rem}
input{width:100%;font-family:inherit;font-size:1rem;color:var(--fg);background:var(--bg);border:none;border-radius:var(--r-base);padding:.85rem 1rem;box-shadow:var(--sh-in)}
input:focus{outline:none;box-shadow:var(--sh-in-deep)}
input::placeholder{color:#A0AEC0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:"Plus Jakarta Sans";font-weight:700;font-size:1rem;
  width:100%;min-height:50px;padding:.8rem 1.4rem;border:none;cursor:pointer;border-radius:var(--r-base);
  background:var(--accent);color:#fff;box-shadow:6px 6px 12px rgba(108,99,255,.35),-6px -6px 12px rgba(255,255,255,.5);transition:all .25s ease-out}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(.5px);box-shadow:inset 4px 4px 8px rgba(70,60,180,.5),inset -4px -4px 8px rgba(150,143,255,.5)}
.btn.ghost{background:var(--bg);color:var(--fg);box-shadow:var(--sh-out-sm);width:auto;min-height:38px;font-size:.85rem;padding:.4rem 1rem}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}

.authbox{max-width:420px;margin:8vh auto 0}
.hide{display:none}

/* ── Gauge ─────────────────────────────────────────────────────────────── */
.gauge-wrap{text-align:center;padding:1rem 0 .5rem}
.gauge{width:100%;max-width:440px;margin:0 auto;display:block}
.gauge-arc{fill:none;stroke-width:34;stroke-linecap:round}
.gauge-needle{stroke:var(--fg);stroke-width:6;stroke-linecap:round}
.gauge-hub{fill:var(--fg)}
.score-num{font-family:"Plus Jakarta Sans";font-weight:800;font-size:3.4rem;line-height:1}
.score-label{font-family:"Plus Jakarta Sans";font-weight:700;font-size:1.15rem;margin-top:.2rem}
.score-label.red{color:var(--red)} .score-label.yellow{color:var(--yellow)} .score-label.green{color:var(--green)}
.score-sub{color:var(--muted);font-size:.9rem;margin-top:.35rem}

/* ── Metric tiles ─────────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.25rem;margin-top:1.75rem}
.tile{padding:1.5rem;border-radius:var(--r-card);background:var(--bg);box-shadow:var(--sh-out-sm);text-align:center}
.tile .n{font-family:"Plus Jakarta Sans";font-weight:800;font-size:2.1rem}
.tile .n.green{color:var(--green)} .tile .n.amber{color:var(--yellow)}
.tile .l{font-size:.9rem;color:var(--muted);margin-top:.3rem;line-height:1.3}
.tile .ic{width:52px;height:52px;margin:0 auto .75rem;border-radius:15px;display:grid;place-items:center;color:var(--accent);box-shadow:var(--sh-in);}

.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.err{color:var(--red);font-size:.9rem;margin-top:.75rem;min-height:1.1rem}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(163,177,198,.4),transparent);margin:1.75rem 0}