/* Unispire Portal — design system. Colours live in variables so light/dark both look right. */
:root {
  --bg:#f3f1fb; --bg2:#ece8fb; --panel:#ffffff; --panel2:#faf9ff; --fg:#1d1a3d; --muted:#6b6894; --line:#e6e2f6;
  --brand:#5b21d6; --brand2:#7c3aed; --brand3:#4338ca; --ring:rgba(124,58,237,.35);
  --violet:#7c3aed; --sky:#0ea5e9; --amber:#f59e0b; --emerald:#10b981; --rose:#f43f5e; --teal:#14b8a6; --slate:#64748b;
  --violet-bg:#efe9ff; --sky-bg:#e0f3fe; --amber-bg:#fef3d8; --emerald-bg:#dcf7ec; --rose-bg:#ffe4ea; --teal-bg:#d9f7f3; --slate-bg:#eceff4;
  --shadow:0 12px 32px -14px rgba(76,29,149,.28); --shadow-lg:0 24px 60px -20px rgba(76,29,149,.45);
  --side1:#160a45; --side2:#2c1a80; --radius:18px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0e0b1f; --bg2:#15112e; --panel:#171332; --panel2:#1c1740; --fg:#ece9ff; --muted:#a29fcb; --line:#2b2559;
    --brand:#9b7bff; --brand2:#8b5cf6; --brand3:#6366f1; --ring:rgba(155,123,255,.45);
    --violet-bg:#2a1f5c; --sky-bg:#0f2f44; --amber-bg:#3d2d0a; --emerald-bg:#0d3a2b; --rose-bg:#46141f; --teal-bg:#0b3b37; --slate-bg:#252a3a;
    --shadow:0 12px 32px -14px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.8);
    --side1:#0a0624; --side2:#1d1260;
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:radial-gradient(1200px 600px at 100% -10%,var(--bg2),transparent 60%),var(--bg); color:var(--fg); line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { margin:0; line-height:1.2; letter-spacing:-.01em; }
a { color:var(--brand); }
button { font:inherit; }
.muted { color:var(--muted); } .small { font-size:.85rem; } .tiny { font-size:.75rem; } .center { text-align:center; padding:3rem 1rem; }
.mono { font-family:ui-monospace,Menlo,Consolas,monospace; } .pre { white-space:pre-wrap; } .nowrap { white-space:nowrap; } .right { text-align:right; }
.ic { width:1.15em; height:1.15em; flex:none; vertical-align:-.2em; }
:focus-visible { outline:3px solid var(--ring); outline-offset:2px; border-radius:8px; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:0; cursor:pointer; text-decoration:none; padding:.65rem 1.15rem; border-radius:12px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,var(--brand2),var(--brand3)); box-shadow:0 8px 20px -8px rgba(91,33,214,.7); transition:transform .15s,box-shadow .15s,filter .15s; }
.btn:hover { transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 12px 24px -8px rgba(91,33,214,.75); }
.btn:active { transform:translateY(0); } .btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.btn-ghost { background:var(--panel); color:var(--brand); border:1px solid var(--line); box-shadow:none; }
.btn-ghost:hover { background:var(--violet-bg); box-shadow:none; }
.btn-ok { background:linear-gradient(135deg,#10b981,#0d9488); box-shadow:0 8px 20px -8px rgba(16,185,129,.7); }
.btn-danger { background:linear-gradient(135deg,#f43f5e,#e11d48); box-shadow:0 8px 20px -8px rgba(244,63,94,.7); }
.btn-light { background:rgba(255,255,255,.18); color:#fff; box-shadow:none; border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(6px); }
.btn-white { background:#fff; color:#3b1d9a; box-shadow:0 10px 24px -10px rgba(0,0,0,.45); }
.btn-sm { padding:.4rem .75rem; font-size:.85rem; border-radius:10px; } .btn-block { width:100%; }
button.link { background:none; border:0; color:var(--brand); padding:0; cursor:pointer; text-decoration:underline; }

/* ---------- forms ---------- */
label { display:block; font-size:.82rem; font-weight:600; color:var(--muted); margin:.9rem 0 .3rem; }
input,select,textarea { font:inherit; width:100%; padding:.7rem .85rem; border:1.5px solid var(--line); border-radius:12px; background:var(--panel); color:var(--fg); transition:border-color .15s,box-shadow .15s; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--brand2); box-shadow:0 0 0 4px var(--ring); }
input[type=checkbox],input[type=radio] { width:auto; accent-color:var(--brand2); }
textarea { resize:vertical; }
.req { color:var(--rose); }
.hint { font-size:.8rem; color:var(--muted); margin-top:.3rem; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; } .row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:0 1rem; }
.inline { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.check { display:flex; align-items:center; gap:.55rem; margin:.5rem 0; font-weight:500; color:var(--fg); }
.msg { margin-top:1rem; padding:.7rem .9rem; border-radius:12px; font-size:.9rem; background:var(--violet-bg); }
.msg.err { background:var(--rose-bg); color:var(--rose); }

/* ---------- sign-in ---------- */
.auth-wrap { min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; }
.auth-brand { position:relative; overflow:hidden; color:#fff; padding:3rem; display:flex; flex-direction:column; justify-content:center; gap:1.4rem;
  background:radial-gradient(800px 500px at 10% 0%,#7c3aed,transparent 60%),radial-gradient(700px 500px at 100% 100%,#0ea5e9,transparent 55%),linear-gradient(160deg,#1a0b52,#3b1d9a); }
.auth-brand::before,.auth-brand::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.07); }
.auth-brand::before { width:420px; height:420px; right:-120px; top:-100px; } .auth-brand::after { width:300px; height:300px; left:-90px; bottom:-90px; }
.auth-brand > * { position:relative; z-index:1; }
.auth-brand h1 { font-size:clamp(2rem,4vw,3rem); } .auth-brand p { max-width:34rem; opacity:.9; font-size:1.05rem; }
.feat { display:grid; gap:.7rem; margin-top:.5rem; } .feat div { display:flex; gap:.7rem; align-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:.7rem .9rem; backdrop-filter:blur(6px); }
.logo { display:flex; align-items:center; gap:.7rem; font-weight:800; font-size:1.3rem; letter-spacing:-.02em; }
.logo-mark { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:#fff; font-weight:800; background:linear-gradient(135deg,#a78bfa,#38bdf8); box-shadow:0 10px 24px -8px rgba(124,58,237,.9); }
.auth-panel { display:grid; place-items:center; padding:2rem; }
.auth { width:100%; max-width:410px; background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:2.2rem; box-shadow:var(--shadow-lg); animation:rise .5s both; }
.auth h2 { font-size:1.6rem; margin-bottom:.2rem; } .auth .alt { display:flex; justify-content:space-between; margin-top:1rem; font-size:.9rem; }
.auth button[type=submit] { width:100%; margin-top:1.3rem; }

/* ---------- shell ---------- */
.shell { display:grid; grid-template-columns:272px 1fr; min-height:100vh; }
.side { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:.15rem; padding:1.3rem .9rem; color:#fff; overflow-y:auto;
  background:radial-gradient(300px 260px at 0% 0%,rgba(124,58,237,.55),transparent 70%),linear-gradient(180deg,var(--side1),var(--side2)); }
.side .logo { padding:.2rem .6rem 1.3rem; }
.nav-label { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; opacity:.55; padding:1.1rem .8rem .35rem; }
.nav { display:flex; align-items:center; gap:.75rem; padding:.7rem .85rem; border-radius:13px; color:rgba(255,255,255,.82); text-decoration:none; cursor:pointer; font-weight:550; transition:background .15s,color .15s,transform .15s; position:relative; }
.nav:hover { background:rgba(255,255,255,.1); color:#fff; transform:translateX(2px); }
.nav.on { background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08)); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.nav.on::before { content:""; position:absolute; left:-.9rem; top:22%; bottom:22%; width:4px; border-radius:4px; background:linear-gradient(#a78bfa,#38bdf8); }
.nav .badge { margin-left:auto; background:linear-gradient(135deg,#f43f5e,#f59e0b); color:#fff; font-size:.72rem; font-weight:700; padding:.1rem .5rem; border-radius:99px; }
.who { margin-top:auto; padding:.9rem; border-radius:16px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); display:grid; gap:.6rem; }
.who-row { display:flex; gap:.7rem; align-items:center; } .avatar { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:700; background:linear-gradient(135deg,#a78bfa,#38bdf8); flex:none; }
.who-name { font-weight:650; line-height:1.2; word-break:break-word; } .who-role { font-size:.75rem; opacity:.7; text-transform:capitalize; }
.who-actions { display:flex; gap:.5rem; } .who-actions button { flex:1; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:10px; padding:.4rem; cursor:pointer; font-size:.8rem; display:flex; align-items:center; justify-content:center; gap:.35rem; }
.who-actions button:hover { background:rgba(255,255,255,.22); }
.content { min-width:0; } .page { max-width:1320px; margin:0 auto; padding:1.8rem 2rem 3rem; animation:rise .45s both; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.page-head h1 { font-size:1.9rem; } .page-head .sub { color:var(--muted); margin-top:.3rem; }
.crumb { display:inline-flex; align-items:center; gap:.35rem; color:var(--muted); text-decoration:none; font-size:.88rem; margin-bottom:.5rem; cursor:pointer; background:none; border:0; padding:0; }
.crumb:hover { color:var(--brand); }

/* ---------- cards & grids ---------- */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.3rem; }
.card > h3,.card-title { font-size:1.05rem; margin-bottom:1rem; display:flex; align-items:center; gap:.55rem; }
.card-title .ic { color:var(--brand2); }
.grid { display:grid; gap:1.1rem; } .g2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .g3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.g21 { grid-template-columns:minmax(0,2fr) minmax(0,1fr); } .g12 { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1.1rem; margin-bottom:1.2rem; }
.stat { position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow); display:flex; gap:1rem; align-items:center; transition:transform .2s,box-shadow .2s; animation:rise .5s both; text-decoration:none; color:inherit; cursor:default; }
a.stat,.stat.click { cursor:pointer; } a.stat:hover,.stat.click:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.stat::after { content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%; opacity:.12; background:var(--tone,var(--violet)); }
.stat-ic { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:#fff; font-size:1.35rem; flex:none; background:var(--tone,var(--violet)); box-shadow:0 10px 22px -10px var(--tone,var(--violet)); }
.stat-num { font-size:1.9rem; font-weight:800; letter-spacing:-.03em; line-height:1; } .stat-label { color:var(--muted); font-size:.85rem; margin-top:.3rem; } .stat-sub { font-size:.75rem; margin-top:.15rem; color:var(--muted); }
.tone-violet { --tone:linear-gradient(135deg,#8b5cf6,#6d28d9); } .tone-sky { --tone:linear-gradient(135deg,#38bdf8,#0284c7); } .tone-amber { --tone:linear-gradient(135deg,#fbbf24,#f97316); }
.tone-emerald { --tone:linear-gradient(135deg,#34d399,#059669); } .tone-rose { --tone:linear-gradient(135deg,#fb7185,#e11d48); } .tone-teal { --tone:linear-gradient(135deg,#2dd4bf,#0d9488); } .tone-slate { --tone:linear-gradient(135deg,#94a3b8,#475569); }
.stat:nth-child(2){animation-delay:.05s} .stat:nth-child(3){animation-delay:.1s} .stat:nth-child(4){animation-delay:.15s} .stat:nth-child(5){animation-delay:.2s}

.hero { position:relative; overflow:hidden; border-radius:26px; color:#fff; padding:2rem 2.2rem; margin-bottom:1.4rem; box-shadow:var(--shadow-lg);
  background:radial-gradient(600px 300px at 90% 0%,rgba(56,189,248,.6),transparent 60%),radial-gradient(500px 300px at 0% 100%,rgba(244,63,94,.35),transparent 60%),linear-gradient(120deg,#4c1d95,#5b21d6 45%,#2563eb); }
.hero::before,.hero::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.08); }
.hero::before { width:260px; height:260px; right:-60px; bottom:-120px; } .hero::after { width:120px; height:120px; right:220px; top:-50px; }
.hero > * { position:relative; z-index:1; } .hero h1 { font-size:clamp(1.5rem,3vw,2.1rem); } .hero p { opacity:.92; margin:.5rem 0 1.2rem; max-width:40rem; }
.hero-actions { display:flex; gap:.7rem; flex-wrap:wrap; }

/* ---------- chips ---------- */
.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .7rem; border-radius:99px; font-size:.76rem; font-weight:700; white-space:nowrap; }
.chip::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.t-violet { background:var(--violet-bg); color:var(--violet); } .t-sky { background:var(--sky-bg); color:#0284c7; } .t-amber { background:var(--amber-bg); color:#b45309; }
.t-emerald { background:var(--emerald-bg); color:#047857; } .t-rose { background:var(--rose-bg); color:#be123c; } .t-teal { background:var(--teal-bg); color:#0f766e; } .t-slate { background:var(--slate-bg); color:var(--slate); }
@media (prefers-color-scheme: dark) { .t-sky{color:#7dd3fc} .t-amber{color:#fcd34d} .t-emerald{color:#6ee7b7} .t-rose{color:#fda4af} .t-teal{color:#5eead4} .t-violet{color:#c4b5fd} }

/* ---------- tables & lists ---------- */
.table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow); }
table.tbl { width:100%; border-collapse:collapse; font-size:.92rem; }
.tbl th { text-align:left; padding:.85rem 1rem; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); background:var(--panel2); border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td { padding:.85rem 1rem; border-bottom:1px solid var(--line); vertical-align:middle; } .tbl tr:last-child td { border-bottom:0; }
.tbl tr.row { cursor:pointer; transition:background .12s; } .tbl tr.row:hover td { background:var(--violet-bg); }
.tbl .ref { font-weight:700; color:var(--brand); }
.toolbar { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
.toolbar input,.toolbar select { width:auto; min-width:180px; flex:1; max-width:320px; }
.tabs { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.tab { border:1px solid var(--line); background:var(--panel); color:var(--muted); padding:.45rem .9rem; border-radius:99px; cursor:pointer; font-weight:600; font-size:.85rem; }
.tab.on { background:linear-gradient(135deg,var(--brand2),var(--brand3)); color:#fff; border-color:transparent; }
.tab .n { opacity:.75; margin-left:.3rem; }
.empty { text-align:center; padding:2.5rem 1rem; color:var(--muted); }
.empty .ic { width:2.6rem; height:2.6rem; color:var(--brand2); opacity:.6; margin-bottom:.6rem; }
.list { display:grid; gap:.6rem; } .list-item { display:flex; align-items:center; gap:.9rem; padding:.8rem .9rem; border-radius:14px; background:var(--panel2); border:1px solid var(--line); cursor:pointer; transition:transform .15s,border-color .15s; }
.list-item:hover { transform:translateX(3px); border-color:var(--brand2); } .list-item .grow { flex:1; min-width:0; } .list-item .t { font-weight:650; } .list-item .s { font-size:.8rem; color:var(--muted); }
.dot-ic { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; background:var(--tone,var(--violet)); flex:none; }

/* ---------- service cards ---------- */
.svc-layout { display:grid; grid-template-columns:230px 1fr; gap:1.4rem; } .subnav { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; align-self:start; box-shadow:var(--shadow); }
.subnav a { display:block; padding:.8rem 1rem; border-left:4px solid transparent; border-bottom:1px solid var(--line); cursor:pointer; color:var(--muted); font-weight:600; font-size:.9rem; } .subnav a:last-child { border-bottom:0; }
.subnav a.on { border-left-color:var(--brand2); color:var(--brand); background:var(--violet-bg); }
.svc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.1rem; }
.svc { background:var(--panel); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); cursor:pointer; display:flex; flex-direction:column; transition:transform .2s,box-shadow .2s; animation:rise .5s both; }
.svc:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.svc-band { height:96px; position:relative; display:flex; align-items:flex-end; padding:.7rem 1rem; color:rgba(255,255,255,.95); font-weight:800; font-size:1.55rem; text-transform:uppercase; letter-spacing:.05em; overflow:hidden; }
.svc-band::after { content:""; position:absolute; right:-30px; top:-40px; width:140px; height:140px; border-radius:50%; background:rgba(255,255,255,.18); }
.band0 { background:linear-gradient(120deg,#9333ea,#f97316); } .band1 { background:linear-gradient(120deg,#0ea5e9,#22c55e); } .band2 { background:linear-gradient(120deg,#10b981,#84cc16); }
.band3 { background:linear-gradient(120deg,#38bdf8,#7c3aed); } .band4 { background:linear-gradient(120deg,#f59e0b,#e11d48); } .band5 { background:linear-gradient(120deg,#14b8a6,#6366f1); }
.svc-body { padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.5rem; flex:1; } .svc-body h3 { font-size:1.05rem; color:var(--brand); }
.price-tag { margin-top:auto; display:flex; align-items:baseline; gap:.4rem; } .price-tag b { font-size:1.35rem; letter-spacing:-.02em; } .price-tag span { font-size:.78rem; color:var(--muted); }

/* ---------- stepper & timeline ---------- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:.4rem 0 .2rem; }
.step { position:relative; text-align:center; padding-top:2.6rem; font-size:.82rem; font-weight:600; color:var(--muted); }
.step::before { content:""; position:absolute; top:.95rem; left:-50%; right:50%; height:4px; border-radius:4px; background:var(--line); }
.step:first-child::before { display:none; }
.step .bubble { position:absolute; left:50%; top:0; transform:translateX(-50%); width:2.2rem; height:2.2rem; border-radius:50%; display:grid; place-items:center; background:var(--panel); border:3px solid var(--line); color:var(--muted); z-index:1; font-weight:800; }
.step.done { color:var(--fg); } .step.done::before,.step.current::before { background:linear-gradient(90deg,var(--brand2),var(--sky)); }
.step.done .bubble { background:linear-gradient(135deg,var(--brand2),var(--sky)); border-color:transparent; color:#fff; }
.step.current .bubble { border-color:var(--brand2); color:var(--brand2); box-shadow:0 0 0 6px var(--ring); animation:pulse 1.8s infinite; }
.step.current { color:var(--fg); } .step small { display:block; font-weight:500; color:var(--muted); font-size:.72rem; margin-top:.15rem; }
.step.fail .bubble { background:var(--rose); border-color:transparent; color:#fff; }
.timeline { display:grid; gap:0; } .tl { position:relative; padding:0 0 1.1rem 2rem; } .tl::before { content:""; position:absolute; left:.55rem; top:.5rem; bottom:-.2rem; width:2px; background:var(--line); } .tl:last-child::before { display:none; }
.tl::after { content:""; position:absolute; left:.2rem; top:.3rem; width:.8rem; height:.8rem; border-radius:50%; background:var(--tone-c,var(--brand2)); box-shadow:0 0 0 4px var(--ring); }
.tl .t { font-weight:650; } .tl .s { color:var(--muted); font-size:.8rem; } .tl .n { margin-top:.2rem; font-size:.9rem; background:var(--panel2); border:1px solid var(--line); padding:.45rem .7rem; border-radius:10px; }
.tl.ok::after { --tone-c:var(--emerald); } .tl.bad::after { --tone-c:var(--rose); } .tl.info::after { --tone-c:var(--sky); }

/* ---------- details, docs ---------- */
.kv { display:grid; grid-template-columns:minmax(120px,170px) 1fr; gap:.65rem 1rem; } .kv dt { color:var(--muted); font-size:.88rem; } .kv dd { margin:0; font-weight:550; word-break:break-word; }
.docs { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.9rem; }
.doc { border:1.5px dashed var(--line); border-radius:16px; padding:1rem; display:grid; gap:.5rem; background:var(--panel2); } .doc.has { border-style:solid; border-color:var(--emerald); background:var(--emerald-bg); }
.doc .t { font-weight:700; display:flex; gap:.5rem; align-items:center; } .doc .f { font-size:.8rem; color:var(--muted); word-break:break-all; }
.file-pill { display:inline-flex; align-items:center; gap:.45rem; background:var(--violet-bg); color:var(--brand); border-radius:10px; padding:.35rem .7rem; font-weight:600; font-size:.85rem; text-decoration:none; border:0; cursor:pointer; max-width:100%; }
.file-pill span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drop { border:2px dashed var(--line); border-radius:14px; padding:1rem; text-align:center; color:var(--muted); background:var(--panel2); cursor:pointer; transition:border-color .15s,background .15s; }
.drop:hover,.drop.over { border-color:var(--brand2); background:var(--violet-bg); } .drop.ok { border-style:solid; border-color:var(--emerald); background:var(--emerald-bg); color:var(--fg); }
.pay-tabs { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1rem; } .pay-tab { border:2px solid var(--line); border-radius:14px; padding:.8rem; text-align:center; cursor:pointer; background:var(--panel); font-weight:700; color:var(--muted); display:grid; gap:.2rem; justify-items:center; }
.pay-tab.on { border-color:var(--brand2); color:var(--brand); background:var(--violet-bg); box-shadow:0 0 0 4px var(--ring); }
.bank { background:linear-gradient(135deg,#1e1b4b,#4c1d95); color:#fff; border-radius:16px; padding:1.1rem 1.2rem; white-space:pre-wrap; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.88rem; line-height:1.7; box-shadow:var(--shadow); }
.amount { font-size:2rem; font-weight:800; letter-spacing:-.03em; background:linear-gradient(135deg,var(--brand2),var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.note { padding:.7rem 0; border-bottom:1px solid var(--line); } .note:last-of-type { border-bottom:0; } .note small { color:var(--muted); } .note p { margin:.25rem 0 0; white-space:pre-wrap; }
.note.mine p { background:var(--violet-bg); border-radius:12px; padding:.5rem .8rem; display:inline-block; }

/* ---------- charts ---------- */
.donut-wrap { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; } .donut { width:150px; height:150px; flex:none; } .donut text { fill:var(--fg); font-weight:800; }
.legend { display:grid; gap:.45rem; font-size:.88rem; flex:1; min-width:140px; } .legend div { display:flex; align-items:center; gap:.55rem; } .legend .sw { width:12px; height:12px; flex:none; } .legend b { margin-left:auto; }
.bar-row { display:grid; grid-template-columns:minmax(90px,1.2fr) 3fr auto; gap:.7rem; align-items:center; margin:.55rem 0; font-size:.88rem; }
progress.prog { appearance:none; -webkit-appearance:none; width:100%; height:12px; border:0; border-radius:99px; overflow:hidden; background:var(--line); }
progress.prog::-webkit-progress-bar { background:var(--line); border-radius:99px; } progress.prog::-webkit-progress-value { background:linear-gradient(90deg,var(--brand2),var(--sky)); border-radius:99px; } progress.prog::-moz-progress-bar { background:linear-gradient(90deg,var(--brand2),var(--sky)); border-radius:99px; }
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.2rem; }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:1rem 1.1rem; box-shadow:var(--shadow); } .kpi b { display:block; font-size:1.5rem; letter-spacing:-.02em; } .kpi span { font-size:.8rem; color:var(--muted); }

/* ---------- modal / toast ---------- */
.modal { position:fixed; inset:0; background:rgba(14,9,40,.55); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:50; animation:fade .2s both; }
.modal-box { background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:1.6rem; width:100%; max-width:560px; max-height:92vh; overflow:auto; box-shadow:var(--shadow-lg); animation:rise .3s both; } .modal-box.wide { max-width:780px; }
.modal-box h3 { font-size:1.3rem; margin-bottom:.4rem; } .actions { display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.3rem; flex-wrap:wrap; }
.toast { position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%); background:#1d1a3d; color:#fff; padding:.75rem 1.2rem; border-radius:14px; z-index:80; box-shadow:var(--shadow-lg); animation:rise .3s both; font-weight:600; }
.toast.err { background:#be123c; }
.warn { background:var(--amber-bg); border-left:4px solid var(--amber); padding:.65rem .9rem; border-radius:10px; font-size:.9rem; }
.cred { background:linear-gradient(135deg,#1e1b4b,#4c1d95); color:#fff; border-radius:16px; padding:1.1rem; } .cred dt { opacity:.7; } .cred .mono { font-size:1.15rem; }
.field-row { display:grid; grid-template-columns:1.6fr 1fr auto auto auto; gap:.5rem; align-items:center; padding:.5rem; background:var(--panel2); border:1px solid var(--line); border-radius:12px; margin-bottom:.5rem; } .field-row input,.field-row select { padding:.45rem .6rem; }
.assign-row { display:grid; grid-template-columns:auto 1fr 140px; gap:.7rem; align-items:center; padding:.5rem .7rem; border-radius:12px; background:var(--panel2); border:1px solid var(--line); margin:.4rem 0; }

@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 4px var(--ring); } 50% { box-shadow:0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

@media (max-width:1000px) { .g21,.g12,.g3,.g2 { grid-template-columns:1fr; } .svc-layout { grid-template-columns:1fr; } .auth-wrap { grid-template-columns:1fr; } .auth-brand { display:none; } }
@media (max-width:820px) {
  .shell { grid-template-columns:1fr; } .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:.7rem; gap:.3rem; }
  .side .logo { width:100%; padding:.2rem .4rem .5rem; } .nav-label,.who { display:none; } .nav { padding:.5rem .7rem; font-size:.88rem; } .nav.on::before { display:none; }
  .page { padding:1.1rem 1rem 2.5rem; } .row2,.row3 { grid-template-columns:1fr; } .steps { font-size:.7rem; } .kv { grid-template-columns:1fr; gap:.1rem; } .kv dd { margin-bottom:.5rem; }
  .field-row { grid-template-columns:1fr 1fr; } .page-head h1 { font-size:1.5rem; }
}

/* spacing helpers (no inline styles allowed by the security policy) */
.mt1{margin-top:1rem} .mt08{margin-top:.8rem} .mt04{margin-top:.4rem} .mb1{margin-bottom:1.1rem} .nm{margin:-.5rem 0 .6rem} .grow{flex:1;min-width:0}
.small-num { font-size:1.15rem !important; letter-spacing:-.01em; line-height:1.25; }
.cat-label { color:var(--brand); opacity:1; padding:.8rem 0 .2rem; }

/* ---------- polish ---------- */
.stats.five { grid-template-columns:repeat(5,minmax(0,1fr)); } .stats.four { grid-template-columns:repeat(4,minmax(0,1fr)); } .stats.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.stat > div { min-width:0; } .stat-num.money { font-size:1.45rem; white-space:nowrap; }
.grid > *, .page > *, .card { min-width:0; } .content { min-width:0; overflow-x:hidden; }
.tbl.compact { font-size:.82rem; } .tbl.compact th, .tbl.compact td { padding:.6rem .7rem; } .tbl.compact td.ref, .tbl.compact td.nowrap { white-space:nowrap; }
.drop.compact { padding:.55rem; } .drop.compact .tiny { display:none; }
.list-item .t, .list-item .s { overflow-wrap:anywhere; }
@media (max-width:1180px) { .stats.five, .stats.four { grid-template-columns:repeat(2,minmax(0,1fr)); } .stats.three { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:820px) {
  .shell { grid-template-columns:minmax(0,1fr); } .stats.five, .stats.four, .stats.three { grid-template-columns:minmax(0,1fr); }
  .list-item { flex-wrap:wrap; } .hero { padding:1.4rem 1.2rem; border-radius:20px; } .stat { padding:1rem; } .modal-box { padding:1.2rem; border-radius:20px; }
  .assign-row { grid-template-columns:auto 1fr; } .assign-row input[type=number] { grid-column:1 / -1; }
  .pay-tabs { gap:.4rem; } .row2 > *, .row3 > * { min-width:0; }
}