/* WIT brand layer for the app pages (login, dashboards list, manage, users, account).
   Tokens follow the WIT brand handoff. Dashboards themselves use dashboard.css and keep their own data colours. */
@import url(/assets/fonts/fonts.css);
:root{
  --wit-white:#FFFFFF;--wit-mist:#F5F6F8;--wit-cloud:#ECEEF2;--wit-line:#E4E6EC;--wit-line-strong:#D3D6DE;
  --wit-ink:#0B0B0C;--wit-ink-soft:#26282D;--wit-ink-muted:#6A6E77;--wit-ink-faint:#9AA0A9;
  --wit-cyan:#14C4E3;--wit-violet:#7A3FF2;--wit-pink:#FF2E8B;--wit-coral:#FF5A3C;--wit-lime:#CDF73A;
  --wit-violet-wash:#ECE4FE;--wit-pink-wash:#FFE3F0;--wit-coral-wash:#FFE7E1;--wit-lime-wash:#F6FDD5;--wit-cyan-wash:#E1F8FC;
  --wit-spray-full:linear-gradient(105deg,#14C4E3 0%,#7A3FF2 38%,#FF2E8B 70%,#FF5A3C 100%);
  --r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:28px;--r-pill:999px;
  --sh-sm:0 2px 6px rgba(11,11,12,.06);--sh-md:0 8px 24px rgba(11,11,12,.08);--sh-lg:0 20px 48px rgba(11,11,12,.10);
  --font-head:'Montserrat','Helvetica Neue',Arial,sans-serif;--font-body:'Manrope','Helvetica Neue',Arial,sans-serif;
  --ok:#1F8A4C;--warn:#B7791F;--bad:#C8321F;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wit-white);color:var(--wit-ink-soft);font:400 15px/1.55 var(--font-body)}
a{color:var(--wit-ink);text-decoration:none}a:hover{color:var(--wit-pink)}
::selection{background:var(--wit-lime);color:var(--wit-ink)}
:focus-visible{outline:3px solid var(--wit-violet);outline-offset:2px;border-radius:var(--r-sm)}
h1,h2{font-family:var(--font-head);color:var(--wit-ink);margin:0}
h1{font-weight:200;font-size:clamp(34px,5.5vw,60px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
h2{font-weight:300;font-size:22px;letter-spacing:-.01em}
.spray{background-image:var(--wit-spray-full);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:300;padding-right:.04em}
.eyebrow{font:600 12px var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--wit-ink-muted)}
.help,.stamp{font-size:13px;color:var(--wit-ink-muted);margin:0}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--wit-line)}
.top .in{max-width:1200px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:baseline;line-height:1}.logo:hover{color:inherit}
.logo .w{font:900 26px/1 'Archivo','Helvetica Neue',Arial,sans-serif;letter-spacing:-.03em;background-image:var(--wit-spray-full);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.logo .a{font:600 12px/1 'Syne','Helvetica Neue',Arial,sans-serif;color:var(--wit-ink)}
.top nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.top nav a.nl{font:600 13px var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--wit-ink-soft);padding:6px 0;border-bottom:2px solid transparent}
.top nav a.nl:hover{color:var(--wit-pink)}
.top nav a.nl[aria-current=page]{color:var(--wit-ink);border-bottom-color:var(--wit-ink)}
.langpill{display:inline-flex;border:1px solid var(--wit-line-strong);border-radius:var(--r-pill);padding:2px;gap:2px}
.langpill a{font:700 12px var(--font-body);letter-spacing:.08em;padding:4px 10px;border-radius:var(--r-pill);color:var(--wit-ink-muted)}
.langpill a[aria-pressed=true]{background:var(--wit-ink);color:#fff}
.langpill a:hover{color:var(--wit-pink)}.langpill a[aria-pressed=true]:hover{color:#fff}
.top form{margin:0}

/* ---------- buttons ---------- */
.btn,button.act,.login button[type=submit],button.ghost{font:700 13px var(--font-body);letter-spacing:.04em;border-radius:var(--r-pill);padding:10px 20px;border:1px solid var(--wit-line-strong);background:var(--wit-white);color:var(--wit-ink);cursor:pointer;display:inline-block;text-align:center;transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.btn:hover,button.act:hover,button.ghost:hover{transform:translateY(-2px);box-shadow:var(--sh-md);color:var(--wit-ink)}
.btn.primary,button.act.primary,.login button[type=submit],.top button.solid{background:var(--wit-ink);border-color:var(--wit-ink);color:#fff}
.btn.primary:hover,button.act.primary:hover,.login button[type=submit]:hover,.top button.solid:hover{color:#fff}
button.act{padding:7px 14px;font-size:12.5px}
button.act.danger{color:var(--bad);border-color:currentColor}button.act.danger:hover{color:var(--bad)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.top button.solid{font:700 13px var(--font-body);letter-spacing:.04em;border-radius:var(--r-pill);padding:10px 20px;border:1px solid var(--wit-ink);cursor:pointer;transition:transform .15s,box-shadow .15s}
.top button.solid:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}

/* ---------- forms ---------- */
label{display:flex;flex-direction:column;gap:8px;font:600 13px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--wit-ink-muted)}
label .help{text-transform:none;letter-spacing:0;font-weight:400}
input,select,textarea{font:500 16px var(--font-body);letter-spacing:0;text-transform:none;color:var(--wit-ink);background:var(--wit-white);border:1px solid var(--wit-line-strong);border-radius:var(--r-md);padding:13px 16px;max-width:100%;transition:border-color .15s}
input:hover,select:hover,textarea:hover{border-color:var(--wit-ink-faint)}
input::placeholder{color:var(--wit-ink-faint)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--wit-violet);outline-offset:2px;border-color:var(--wit-violet)}
input[type=file]{padding:9px 12px;font-size:14px}
.err,.notice.bad{color:var(--bad)}

/* ---------- login ---------- */
body.center{min-height:100vh;display:flex;flex-direction:column}
body.center main{flex:1;display:grid;place-items:center;padding:48px 20px}
.login{width:100%;max-width:440px;display:flex;flex-direction:column;gap:18px;background:var(--wit-white);border:1px solid var(--wit-line);border-radius:var(--r-xl);padding:40px;box-shadow:var(--sh-lg)}
.login h1{font-size:clamp(34px,8vw,48px)}
.login .err{margin:0;background:var(--wit-coral-wash);border-radius:var(--r-md);padding:10px 14px;font-size:14px}
.login button[type=submit]{padding:15px 32px;font-size:15px;margin-top:6px}
.login .other{text-align:center}
.foot{border-top:1px solid var(--wit-line)}
.foot .in{max-width:1200px;margin:0 auto;padding:28px 32px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--wit-ink-muted)}
.foot a{color:var(--wit-ink-muted)}.foot a:hover{color:var(--wit-pink)}

/* ---------- page shell ---------- */
.page{max-width:1200px;margin:0 auto;padding:56px 32px 80px;display:flex;flex-direction:column;gap:32px}
.page>.lead{display:flex;flex-direction:column;gap:12px}
.rolebadge{font:700 11px var(--font-body);letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border-radius:var(--r-pill);background:var(--wit-mist);color:var(--wit-ink-soft);align-self:flex-start}

/* ---------- dashboards list ---------- */
.clientgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.clientcard{border:1px solid var(--wit-line);border-radius:var(--r-lg);padding:24px;background:var(--wit-white);display:flex;flex-direction:column;gap:14px;transition:transform .15s,box-shadow .15s}
.clientcard:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.clientcard h2{font-size:20px;text-transform:none}
.clientcard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.clientcard li a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--wit-line);font-weight:600;color:var(--wit-ink)}
.clientcard li a::after{content:"\2192";color:var(--wit-ink-faint);transition:transform .15s,color .15s}
.clientcard li a:hover{color:var(--wit-ink)}.clientcard li a:hover::after{transform:translateX(4px);color:var(--wit-pink)}
.emptycard{border:1px dashed var(--wit-line-strong);border-radius:var(--r-lg);padding:40px;color:var(--wit-ink-muted);text-align:center}

/* ---------- admin ---------- */
.panelx{border:1px solid var(--wit-line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:16px;min-width:0;background:var(--wit-white)}
.panelx h2{font-size:22px}
.formrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;align-items:end}
.formrow>label{min-width:0;justify-content:flex-end}
.formrow input,.formrow select{width:100%;height:50px}
.formrow>button{height:50px;padding:0 28px}
.admin table{border-collapse:collapse;width:100%;font-size:14px}
.admin th,.admin td{padding:12px 12px;text-align:left;border-top:1px solid var(--wit-line);vertical-align:middle}
.admin th{font:600 11.5px var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--wit-ink-muted);border-top:0}
.admin tbody tr:hover td{background:var(--wit-mist)}
.admin .tw{overflow-x:auto}
.admin td input,.admin td select{padding:8px 12px;font-size:14px;border-radius:var(--r-sm)}
.admin textarea{width:100%;min-height:420px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;tab-size:2;padding:16px}
.admin a.act{font:700 12.5px var(--font-body);letter-spacing:.04em;border:1px solid var(--wit-line-strong);border-radius:var(--r-pill);padding:7px 14px;display:inline-block}
.admin a.act:hover{box-shadow:var(--sh-md);transform:translateY(-2px);color:var(--wit-ink)}
.notice{border-radius:var(--r-md);padding:12px 16px;font-size:14px;white-space:pre-wrap;background:var(--wit-mist);border:1px solid var(--wit-line);color:var(--wit-ink-soft)}
.notice.ok{background:var(--wit-lime-wash);border-color:#E3F59A}
.notice.warn{background:var(--wit-coral-wash);border-color:#FFC9BD}
.notice.bad{background:var(--wit-pink-wash);border-color:#FFB8D6;color:var(--wit-ink)}
.notice code{font:13px ui-monospace,Menlo,monospace;background:var(--wit-white);padding:2px 8px;border-radius:var(--r-sm);user-select:all;border:1px solid var(--wit-line)}

@media (max-width:640px){
  .top .in{padding:12px 16px}.top nav{gap:14px}.page{padding:36px 16px 56px}.panelx{padding:20px}.login{padding:28px}.foot .in{padding:24px 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
[hidden]{display:none!important}

.admin td button.act{margin:2px 2px 2px 0}

.mvrow{display:flex;align-items:center;gap:10px}.mvrow>div{min-width:0}button.act.mv{padding:2px 9px;font-size:14px;line-height:1.4}