/* =====================================================================
   Niterra MPS — Brand-aligned stylesheet (v2)
   - Logo:   Niterra wordmark (teal #006D6A) + yellow tittle (#F5B91D)
   - Shell:  Suzuki OMS-style dark navy sidebar + light content surface
   - Font:   DM Sans (headings) + Inter (body), Google Fonts
   ===================================================================== */

:root{
  /* Niterra brand */
  --c-brand:#006D6A;            /* Niterra teal wordmark */
  --c-brand-d:#004B49;
  --c-brand-l:#E0F0EF;
  --c-tittle:#F5B91D;           /* Niterra yellow tittle */
  --c-tittle-d:#D9A310;
  --c-tittle-l:#FFF5D6;

  /* Module gradient palette (used for icon tiles) */
  --g-teal:linear-gradient(135deg,#10C5C0,#006D6A);
  --g-blue:linear-gradient(135deg,#4F8DF9,#1D4ED8);
  --g-purple:linear-gradient(135deg,#A06CFF,#6B2FE0);
  --g-pink:linear-gradient(135deg,#FF6FB1,#D6256E);
  --g-orange:linear-gradient(135deg,#FFA94D,#F26A21);
  --g-green:linear-gradient(135deg,#5BD27D,#1E9E4F);
  --g-amber:linear-gradient(135deg,#FFD27A,#F5B91D);
  --g-slate:linear-gradient(135deg,#7A8BAE,#37456A);

  /* Surfaces */
  --c-ink:#0F1830;
  --c-ink-2:#3a4256;
  --c-mute:#6b7388;
  --c-line:#E4E8F0;
  --c-line-2:#EEF1F7;
  --c-bg:#EDF1F7;               /* light blue-tinted page bg */
  --c-panel:#ffffff;            /* cards, tables, inputs */
  --c-surface-2:#F8FAFD;        /* panel headers, footers, subtle bands */
  --c-hover:#F6F8FC;            /* hover fills */
  --c-row-hover:#FBFCFE;        /* table row hover */
  --c-chip:#EEF1F7;             /* neutral chips */
  --c-tint:#FAFDFD;             /* faint brand-tinted fill */
  --c-code:#0F1830;             /* inline code / monospace text */

  /* Sidebar (dark navy) */
  --sb-bg:#162032;
  --sb-bg-2:#1B2740;
  --sb-line:#2A3550;
  --sb-text:#C7D0E3;
  --sb-mute:#7E8AA6;
  --sb-active:#22324F;

  /* Functional */
  --ok:#1E9E6A;       --ok-bg:#E6F6EE;
  --warn:#B45309;     --warn-bg:#FFF4DC;
  --bad:#DC2A42;      --bad-bg:#FDE6EA;
  --info:#1D4ED8;     --info-bg:#E6EDFB;

  --radius:8px;
  --radius-lg:12px;
  --shadow-sm:0 1px 2px rgba(15,24,48,.04);
  --shadow:0 8px 24px rgba(15,24,48,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--c-bg);color:var(--c-ink);
  font:14px/1.5 "Inter","DM Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

/* ============================ NITERRA LOGO ============================ */
/* SVG-based wordmark: dark teal "Niterra" with yellow tittle on the i.
   Uses DM Sans Heavy from Google Fonts so it matches the brand. */
.niterra-logo{display:inline-block;line-height:0}
.niterra-logo svg{display:block}
.niterra-logo .lg-tag{display:none}

/* ============================ APP SHELL ============================ */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh;transition:grid-template-columns .2s ease}
.app.collapsed{grid-template-columns:64px 1fr}
.app.collapsed .side a span.label{display:none}
.app.collapsed .side .grp-label{display:none}
.app.collapsed .side a{justify-content:center;padding:10px 0}
.app.collapsed .side a::before{display:none!important}
.app.collapsed .side .logo-wrap{padding:14px 8px;text-align:center}
.app.collapsed .side .logo-wrap .niterra-logo svg{width:32px;height:auto}
.app.collapsed .side .logo-wrap small{display:none}
.app.collapsed .side a .badge-cnt{display:none}
.app.collapsed .side .sb-foot{display:none}

/* ---------- Top bar ---------- */
.topbar{grid-column:2/3;height:64px;background:var(--c-panel);border-bottom:1px solid var(--c-line);
  display:flex;align-items:center;padding:0 22px;gap:16px;position:sticky;top:0;z-index:20}
.hamburger{width:36px;height:36px;border-radius:var(--radius);border:1px solid var(--c-line);
  background:var(--c-panel);display:grid;place-items:center;cursor:pointer;color:var(--c-ink-2);font-size:18px}
.hamburger:hover{background:var(--c-hover)}
.crumbs{color:var(--c-mute);font-size:14px;display:flex;align-items:center;gap:10px}
.crumbs a:hover{color:var(--c-brand);text-decoration:underline}
.crumbs b{color:var(--c-ink);font-weight:600}
.crumbs .sep{color:var(--c-line);font-weight:400}

.search{margin-left:8px;flex:1;max-width:380px;position:relative}
.search input{width:100%;border:1px solid var(--c-line);background:var(--c-panel);
  border-radius:var(--radius);padding:9px 12px 9px 34px;outline:none;font-size:13px;
  transition:.15s}
.search input:focus{border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-brand-l)}
.search:before{content:"⌕";position:absolute;left:11px;top:6px;color:var(--c-mute);font-size:15px}

.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.pill{font-size:12.5px;background:var(--c-panel);border:1px solid var(--c-line);
  border-radius:999px;padding:6px 12px;color:var(--c-ink-2);display:inline-flex;
  align-items:center;gap:6px;font-weight:500}
.pill b{color:var(--c-ink);font-weight:700}
.pill.flag{background:var(--c-tittle);border-color:var(--c-tittle-d);color:#1c1700;font-weight:700}
.pill.flag::before{content:"●";color:#1c1700;font-size:8px;margin-right:2px}

.icon-btn{width:38px;height:38px;border-radius:var(--radius);border:1px solid var(--c-line);
  background:var(--c-panel);display:grid;place-items:center;cursor:pointer;position:relative;color:var(--c-ink-2);font-size:16px}
.icon-btn:hover{background:var(--c-hover)}
.icon-btn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--bad)}

.user-pill{display:flex;align-items:center;gap:10px;border:1px solid var(--c-line);
  border-radius:999px;padding:4px 12px 4px 4px;background:var(--c-panel);cursor:pointer}
.user-pill .av{width:30px;height:30px;border-radius:50%;background:var(--g-purple);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:11px;letter-spacing:.02em}
.user-pill .uinfo{line-height:1.15;text-align:left}
.user-pill .uinfo b{font-size:12.5px;display:block}
.user-pill .uinfo small{font-size:11px;color:var(--c-mute)}
.user-pill .caret{color:var(--c-mute);font-size:10px}

.logout-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--c-line);
  background:var(--c-panel);border-radius:var(--radius);padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer}
.logout-btn:hover{background:var(--c-hover);color:var(--bad);border-color:#f0c8cd}

/* ---------- Sidebar (dark) ---------- */
.side{background:var(--sb-bg);color:var(--sb-text);min-height:100vh;
  border-right:1px solid var(--sb-line);position:sticky;top:0;height:100vh;overflow:auto;
  display:flex;flex-direction:column;grid-row:1/3;grid-column:1/2}
.side .logo-wrap{padding:18px 18px 14px;border-bottom:1px solid var(--sb-line);background:var(--c-panel)}
.side .logo-wrap small{display:block;color:var(--c-mute);font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-top:6px}
.side .nav{padding:14px 10px;flex:1}
.side .grp-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--sb-mute);padding:14px 14px 8px;font-weight:700}
.side a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius);
  color:var(--sb-text);font-weight:600;cursor:pointer;font-size:13px;
  margin-bottom:2px;text-transform:uppercase;letter-spacing:.04em;position:relative}
.side a:hover{background:var(--sb-bg-2);color:#fff}
.side a.active{background:var(--sb-active);color:#fff}
.side a.active::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;
  background:var(--c-tittle);border-radius:0 2px 2px 0}
.side a .ic{width:30px;height:30px;border-radius:var(--radius);display:grid;place-items:center;
  font-size:14px;color:#fff;flex-shrink:0}
.side a .ic.g1{background:var(--g-teal)}
.side a .ic.g2{background:var(--g-blue)}
.side a .ic.g3{background:var(--g-purple)}
.side a .ic.g4{background:var(--g-pink)}
.side a .ic.g5{background:var(--g-orange)}
.side a .ic.g6{background:var(--g-green)}
.side a .ic.g7{background:var(--g-amber)}
.side a .ic.g8{background:var(--g-slate)}
.side a.active .ic{box-shadow:0 0 0 2px rgba(245,185,29,.25)}
.side .sb-foot{padding:14px 18px;border-top:1px solid var(--sb-line);
  font-size:11px;color:var(--sb-mute);line-height:1.55}

/* ---------- Main ---------- */
.main{padding:24px 28px 56px;min-width:0;grid-column:2/3}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{margin:0;font-family:"DM Sans","Inter",sans-serif;
  font-size:24px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.page-head .lede{margin:6px 0 0;color:var(--c-mute);font-size:13.5px;max-width:780px}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Buttons */
.btn{background:var(--c-panel);border:1px solid var(--c-line);color:var(--c-ink);
  padding:9px 16px;border-radius:var(--radius);font-weight:600;cursor:pointer;
  font-size:13px;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.btn:hover{background:var(--c-hover);border-color:#d6dceb}
.btn.primary{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
.btn.primary:hover{background:var(--c-brand-d)}
.btn.accent{background:var(--c-tittle);color:#1c1700;border-color:var(--c-tittle);font-weight:700}
.btn.accent:hover{background:var(--c-tittle-d)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--c-chip)}
.btn.danger{background:var(--c-panel);border-color:#f0c8cd;color:var(--bad)}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn .ar{font-size:14px;line-height:1}
.btn.ai{background:linear-gradient(135deg,#FF9A4D,#F26A21);color:#fff;border:0}
.btn.ai:hover{filter:brightness(1.05)}

/* Stepper */
.stepper{display:flex;align-items:stretch;background:var(--c-panel);border:1px solid var(--c-line);
  border-radius:var(--radius-lg);overflow-x:auto;margin-bottom:18px}
.stepper .s{display:flex;align-items:center;gap:10px;padding:14px 18px;flex:0 0 auto;
  border-right:1px solid var(--c-line);min-width:210px;color:var(--c-ink-2)}
.stepper .s:last-child{border-right:0}
.stepper .s:hover{background:var(--c-surface-2)}
.stepper .num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--c-chip);color:var(--c-mute);font-size:12px;font-weight:700;flex-shrink:0}
.stepper .s.done .num{background:var(--c-brand);color:#fff}
.stepper .s.on{background:var(--c-brand-l)}
.stepper .s.on .num{background:var(--c-brand);color:#fff;
  box-shadow:0 0 0 3px var(--c-tittle)}
.stepper .s b{font-size:13px;display:block;color:var(--c-ink);line-height:1.2}
.stepper .s small{color:var(--c-mute);font-size:11px;display:block;margin-top:2px}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--radius-lg);
  padding:18px;position:relative;overflow:hidden;display:flex;gap:14px;align-items:flex-start}
.kpi .ic{width:42px;height:42px;border-radius:10px;background:var(--g-teal);
  color:#fff;display:grid;place-items:center;font-size:18px;flex-shrink:0}
.kpi.k2 .ic{background:var(--g-purple)}
.kpi.k3 .ic{background:var(--g-blue)}
.kpi.k4 .ic{background:var(--g-pink)}
.kpi .body{min-width:0}
.kpi .lbl{color:var(--c-mute);font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;font-weight:600}
.kpi .val{font-family:"DM Sans","Inter",sans-serif;
  font-size:26px;font-weight:700;margin-top:2px;letter-spacing:-.02em;line-height:1.1}
.kpi .delta{font-size:12px;margin-top:4px;color:var(--c-mute)}
.kpi .delta.up{color:var(--ok)}
.kpi .delta.down{color:var(--bad)}

/* Panels and filters */
.panel{background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--radius-lg);
  overflow:hidden;margin-bottom:14px}
.panel-head{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--c-line);gap:12px}
.panel-head h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;font-family:"DM Sans",sans-serif}
.panel-head .meta{margin-left:auto;font-size:12px;color:var(--c-mute)}
.panel-head .meta b{color:var(--c-ink)}

.filterbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--c-line);background:var(--c-row-hover)}
.filterbar .grp{display:flex;align-items:center;gap:6px}
.filterbar label{font-size:11.5px;color:var(--c-mute);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.filterbar select, .filterbar input{border:1px solid var(--c-line);border-radius:var(--radius);
  padding:8px 12px;background:var(--c-panel);font-size:13px;outline:none}
.filterbar select:focus, .filterbar input:focus{border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-brand-l)}
.filterbar .right{margin-left:auto;display:flex;gap:8px}

/* Status segmented pill (Suzuki-style) */
.seg{display:inline-flex;border:1px solid var(--c-line);border-radius:999px;padding:3px;background:var(--c-panel)}
.seg button{background:transparent;border:0;padding:5px 12px;border-radius:999px;
  font-size:12px;font-weight:600;cursor:pointer;color:var(--c-ink-2);display:inline-flex;
  align-items:center;gap:6px}
.seg button .d{width:7px;height:7px;border-radius:50%;background:var(--c-mute)}
.seg button:hover{background:var(--c-hover)}
.seg button.on{background:var(--c-brand-l);color:var(--c-brand-d)}
.seg button.on .d{background:var(--c-brand)}
.seg .d-ok{background:var(--ok)!important}
.seg .d-warn{background:var(--warn)!important}
.seg .d-bad{background:var(--bad)!important}

/* Table */
.tbl-wrap{overflow:auto;max-height:600px}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 14px;text-align:left;font-size:13px;border-bottom:1px solid var(--c-line-2);
  white-space:nowrap}
th{background:var(--c-hover);font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--c-mute);font-weight:700;position:sticky;top:0;z-index:1;
  border-bottom-color:var(--c-line)}
tbody tr:hover{background:var(--c-row-hover)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.editable input{width:90px;border:1px solid transparent;border-radius:var(--radius);
  padding:5px 7px;text-align:right;background:var(--c-hover);font-variant-numeric:tabular-nums;
  font:inherit}
td.editable input:hover{border-color:var(--c-line);background:var(--c-panel)}
td.editable input:focus{border-color:var(--c-brand);background:var(--c-panel);outline:none;box-shadow:0 0 0 3px var(--c-brand-l)}
input[type=checkbox].chk{accent-color:var(--c-brand);width:14px;height:14px}

/* Badges */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;
  font-weight:600;line-height:1.4;letter-spacing:.01em;display:inline-flex;align-items:center;gap:5px}
.badge::before{content:"●";font-size:7px}
.badge.no-dot::before{content:""}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-warn{background:var(--warn-bg);color:var(--warn)}
.b-bad{background:var(--bad-bg);color:var(--bad)}
.b-info{background:var(--info-bg);color:var(--info)}
.b-mute{background:var(--c-chip);color:var(--c-mute)}
.b-tag{background:var(--c-brand-l);color:var(--c-brand-d)}
.b-tag::before{content:""}

/* Action bar */
.actionbar{display:flex;align-items:center;padding:14px 18px;background:var(--c-panel);
  border:1px solid var(--c-line);border-radius:var(--radius-lg);gap:18px}
.actionbar .sum{display:flex;gap:28px}
.actionbar .sum div small{color:var(--c-mute);display:block;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.actionbar .sum div b{font-size:16px;letter-spacing:-.01em;font-family:"DM Sans",sans-serif}
.actionbar .right{margin-left:auto;display:flex;gap:8px}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,24,48,.55);z-index:60;
  display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px)}
.modal-backdrop.on{display:flex}
.modal-card{background:var(--c-panel);border-radius:14px;width:100%;max-width:640px;max-height:90vh;
  overflow:hidden;box-shadow:0 30px 70px rgba(15,24,48,.4);display:flex;flex-direction:column;
  border-top:4px solid var(--c-brand)}
.modal-card.lg{max-width:880px}
.modal-card.xl{max-width:1100px}
.modal-head{display:flex;align-items:center;padding:16px 22px;border-bottom:1px solid var(--c-line)}
.modal-head h3{margin:0;font-family:"DM Sans",sans-serif;font-size:17px;font-weight:700;letter-spacing:-.01em}
.modal-head .sub{margin-left:14px;color:var(--c-mute);font-size:12.5px}
.modal-head .close{margin-left:auto;cursor:pointer;color:var(--c-mute);font-size:22px;
  background:none;border:0;line-height:1;padding:4px 8px;border-radius:6px}
.modal-head .close:hover{background:var(--c-hover);color:var(--c-ink)}
.modal-body{padding:20px 22px;overflow:auto;flex:1}
.modal-foot{padding:14px 22px;border-top:1px solid var(--c-line);display:flex;
  justify-content:flex-end;gap:8px;background:var(--c-row-hover)}

/* Modal — import flow */
.import-tabs{display:flex;gap:0;margin-bottom:18px;border-bottom:1px solid var(--c-line)}
.import-tabs button{background:none;border:0;padding:10px 16px;font:inherit;font-weight:600;
  cursor:pointer;color:var(--c-mute);border-bottom:2px solid transparent;font-size:13px}
.import-tabs button.on{color:var(--c-brand);border-bottom-color:var(--c-brand)}
.drop-zone{border:2px dashed var(--c-line);border-radius:12px;padding:36px 24px;text-align:center;
  background:var(--c-row-hover);transition:.15s;cursor:pointer}
.drop-zone:hover{border-color:var(--c-brand);background:var(--c-brand-l)}
.drop-zone .ic{width:54px;height:54px;border-radius:50%;background:var(--c-brand-l);
  color:var(--c-brand);display:grid;place-items:center;margin:0 auto 14px;font-size:24px}
.drop-zone h4{margin:0 0 4px;font-size:15px;font-family:"DM Sans",sans-serif}
.drop-zone p{margin:0;color:var(--c-mute);font-size:12.5px}
.drop-zone .fmt{display:inline-flex;gap:6px;margin-top:14px}
.drop-zone .fmt span{background:var(--c-panel);border:1px solid var(--c-line);padding:4px 10px;
  border-radius:999px;font-size:11.5px;font-weight:600;color:var(--c-ink-2)}

.map-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:10px 14px;align-items:center;font-size:13px}
.map-grid .src{padding:8px 12px;background:var(--c-row-hover);border:1px solid var(--c-line);border-radius:6px}
.map-grid .arr{color:var(--c-mute);text-align:center}
.map-grid select{padding:8px 10px;border:1px solid var(--c-line);border-radius:6px;font-size:13px;background:var(--c-panel)}

.validate-list{margin:0;padding:0;list-style:none}
.validate-list li{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--c-line-2);font-size:13px}
.validate-list li:last-child{border-bottom:0}
.validate-list li .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700}
.validate-list li.ok .ic{background:var(--ok-bg);color:var(--ok)}
.validate-list li.warn .ic{background:var(--warn-bg);color:var(--warn)}
.validate-list li.bad .ic{background:var(--bad-bg);color:var(--bad)}

/* Form */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-grid .field{margin:0}
.form-grid .field.full{grid-column:1/-1}
.form-grid label{display:block;font-size:11.5px;color:var(--c-ink-2);
  margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.form-grid input, .form-grid select, .form-grid textarea{
  width:100%;border:1px solid var(--c-line);border-radius:var(--radius);
  padding:9px 12px;background:var(--c-panel);outline:none;font-size:13px}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{
  border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-brand-l)}

/* ============================ HERO BANNER (Resume / Start) ============================ */
.hero{background:linear-gradient(135deg,#0F4F4D 0%,#006D6A 60%,#00928C 100%);color:#fff;
  border-radius:14px;padding:24px 28px;margin-bottom:22px;position:relative;overflow:hidden;display:flex;gap:24px;align-items:center}
.hero::after{content:"";position:absolute;right:-100px;bottom:-100px;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(245,185,29,.22),transparent)}
.hero .hero-body{flex:1;min-width:0;position:relative;z-index:1}
.hero .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--c-tittle);font-weight:700;display:inline-block;background:rgba(255,255,255,.08);
  padding:4px 10px;border-radius:999px;margin-bottom:10px}
.hero h2{margin:0;font-family:"DM Sans",sans-serif;font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.hero h2 em{font-style:normal;color:var(--c-tittle)}
.hero p{margin:6px 0 0;opacity:.85;font-size:14.5px;line-height:1.55;max-width:640px}
.hero .hero-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.hero .hero-actions .btn{background:var(--c-panel);color:#0F4F4D;border-color:var(--c-panel)}
.hero .hero-actions .btn:hover{background:var(--c-hover)}
.hero .hero-actions .btn.accent{background:var(--c-tittle);color:#1c1700;border-color:var(--c-tittle)}
.hero .hero-actions .btn.accent:hover{background:var(--c-tittle-d)}
.hero .hero-actions .btn.ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.hero .hero-actions .btn.ghost-light:hover{background:rgba(255,255,255,.1)}
.hero .hero-side{width:260px;flex-shrink:0;position:relative;z-index:1}
.hero .hero-side .meta{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  border-radius:10px;padding:14px;font-size:13px;line-height:1.6}
.hero .hero-side .meta b{color:var(--c-tittle);display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
@media (max-width:980px){.hero{flex-direction:column;align-items:stretch}.hero .hero-side{width:auto}}

/* Quick-action grid (large, friendly buttons) */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.quick a{background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--radius-lg);
  padding:18px;color:inherit;display:flex;align-items:center;gap:14px;
  cursor:pointer;transition:.15s;text-decoration:none}
.quick a:hover{border-color:var(--c-brand);transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none}
.quick .ic{width:46px;height:46px;border-radius:12px;background:var(--g-teal);color:#fff;
  display:grid;place-items:center;font-size:20px;flex-shrink:0}
.quick.q2 .ic, .quick a.q2 .ic{background:var(--g-purple)}
.quick a.q3 .ic{background:var(--g-orange)}
.quick a.q4 .ic{background:var(--g-blue)}
.quick a.q5 .ic{background:var(--g-pink)}
.quick a.q6 .ic{background:var(--g-green)}
.quick a.q7 .ic{background:var(--g-amber)}
.quick a.q8 .ic{background:var(--g-slate)}
.quick b{display:block;font-size:14px;font-weight:700;font-family:"DM Sans",sans-serif;letter-spacing:-.01em}
.quick small{color:var(--c-mute);font-size:12px;display:block;margin-top:1px}
.quick .ar{margin-left:auto;color:var(--c-mute);font-size:18px}
.quick a:hover .ar{color:var(--c-brand)}
@media (max-width:1100px){.quick{grid-template-columns:repeat(2,1fr)}}

/* Page intro card — "what to do here" */
.intro-card{background:linear-gradient(135deg,#FFFDF2,#FFF7D6);border:1px solid #F5DC8D;
  border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:18px;display:flex;align-items:center;gap:16px}
.intro-card .badge-ic{width:38px;height:38px;border-radius:50%;background:var(--c-tittle);
  color:#1c1700;display:grid;place-items:center;font-weight:800;font-size:16px;flex-shrink:0}
.intro-card .txt{flex:1;min-width:0}
.intro-card .txt h4{margin:0;font-size:14px;font-weight:700;letter-spacing:-.01em;font-family:"DM Sans",sans-serif}
.intro-card .txt p{margin:3px 0 0;color:var(--c-ink-2);font-size:13px;line-height:1.5}
.intro-card .txt strong{color:var(--c-ink)}
.intro-card .actions{display:flex;gap:8px;flex-shrink:0}

/* Bigger primary CTA */
.cta-primary{background:var(--c-brand);color:#fff;border:0;padding:14px 22px;border-radius:var(--radius);
  font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 6px 18px rgba(0,109,106,.25);letter-spacing:-.005em}
.cta-primary:hover{background:var(--c-brand-d);box-shadow:0 8px 24px rgba(0,109,106,.32)}
.cta-primary .ar{font-size:18px}

/* Section header for grouped panels */
.sect-head{display:flex;align-items:baseline;justify-content:space-between;margin:24px 0 12px}
.sect-head h2{margin:0;font-family:"DM Sans",sans-serif;font-size:18px;font-weight:700;letter-spacing:-.01em}
.sect-head .sub{color:var(--c-mute);font-size:12.5px;margin-left:10px}
.sect-head .ar{color:var(--c-brand);font-weight:600;font-size:13px}

/* Side-nav badge counters */
.side a .badge-cnt{margin-left:auto;background:var(--c-tittle);color:#1c1700;
  font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;line-height:1.4}
.side a.active .badge-cnt{background:var(--c-tittle);color:#1c1700}

/* Toast */
.toast{position:fixed;bottom:24px;right:24px;background:var(--c-ink);color:#fff;padding:12px 18px;
  border-radius:var(--radius);font-size:13.5px;box-shadow:var(--shadow);opacity:0;
  transform:translateY(8px);transition:.2s;z-index:60;border-left:3px solid var(--c-tittle)}
.toast.on{opacity:1;transform:none}
.toast b{color:var(--c-tittle)}

/* Hub cards (workspace + step picker) */
.hub{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hub-card{background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--radius-lg);
  padding:20px;cursor:pointer;transition:.15s;display:block;color:inherit;position:relative;overflow:hidden}
.hub-card:hover{border-color:var(--c-brand);transform:translateY(-2px);box-shadow:var(--shadow)}
.hub-card .tile{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;
  color:#fff;font-size:20px;margin-bottom:14px;background:var(--g-teal)}
.hub-card.t2 .tile{background:var(--g-purple)}
.hub-card.t3 .tile{background:var(--g-pink)}
.hub-card.t4 .tile{background:var(--g-orange)}
.hub-card.t5 .tile{background:var(--g-blue)}
.hub-card.t6 .tile{background:var(--g-green)}
.hub-card.t7 .tile{background:var(--g-amber)}
.hub-card.t8 .tile{background:var(--g-slate)}
.hub-card .step-num{position:absolute;top:16px;right:18px;font-family:"DM Sans",sans-serif;
  font-size:28px;font-weight:800;color:var(--c-chip);letter-spacing:-.04em;line-height:1}
.hub-card.done .step-num{color:var(--ok)}
.hub-card.on .step-num{color:var(--c-brand)}
.hub-card h4{margin:8px 0 4px;font-size:16px;font-weight:700;letter-spacing:-.01em;
  font-family:"DM Sans",sans-serif}
.hub-card p{margin:0;color:var(--c-mute);font-size:12.5px;line-height:1.55}
.hub-card .meta{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:11.5px}
.hub-card .meta .ar{margin-left:auto;color:var(--c-brand);font-weight:700}

/* ============================ LOGIN ============================ */
.login{position:fixed;inset:0;display:grid;grid-template-columns:1.05fr .95fr;background:var(--c-panel);z-index:50}
.login-left{background:linear-gradient(135deg,#004B49 0%,#006D6A 50%,#00837A 100%);
  color:#fff;padding:56px 64px;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden}
.login-left::after{content:"";position:absolute;right:-160px;bottom:-160px;width:560px;height:560px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(245,185,29,.25),transparent)}
.login-left::before{content:"";position:absolute;left:-90px;top:-90px;width:380px;height:380px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.08),transparent)}
.login-left > *{position:relative;z-index:1}
.login-left .login-logo{background:var(--c-panel);display:inline-block;padding:14px 20px;border-radius:10px}
.login-left .sub-tag{font-size:11px;color:rgba(255,255,255,.7);
  letter-spacing:.14em;text-transform:uppercase;margin-top:10px;font-weight:600}
.login-left .mid h2{font-family:"DM Sans",sans-serif;font-size:46px;line-height:1.1;
  margin:0 0 16px;font-weight:800;letter-spacing:-.025em}
.login-left .mid h2 em{font-style:normal;color:var(--c-tittle)}
.login-left .mid p{opacity:.85;font-size:15px;line-height:1.65;max-width:520px}
.modlist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:30px;max-width:540px}
.modlist div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius);padding:12px 14px;font-size:12.5px}
.modlist div b{display:block;font-size:13px;margin-bottom:2px;color:#fff;font-family:"DM Sans",sans-serif}
.modlist div span{color:rgba(255,255,255,.6);font-size:11.5px}
.login-left .foot{font-size:11px;opacity:.6;letter-spacing:.04em}

.login-right{padding:64px;display:flex;align-items:center;justify-content:center;background:var(--c-panel)}
.login-card{width:100%;max-width:400px}
.login-card h3{margin:0 0 8px;font-family:"DM Sans",sans-serif;font-size:28px;font-weight:700;letter-spacing:-.02em}
.login-card .hint{color:var(--c-mute);margin-bottom:32px;font-size:14px}
.field{margin-bottom:16px}
.field label{display:block;font-size:11.5px;color:var(--c-ink-2);
  margin-bottom:7px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.field input{width:100%;border:1px solid var(--c-line);border-radius:var(--radius);
  padding:12px 14px;background:var(--c-panel);outline:none;transition:.15s;font-size:14px}
.field input:focus{border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-brand-l)}
.login-actions{display:flex;align-items:center;justify-content:space-between;margin:6px 0 22px}
.login-actions label{font-size:12.5px;color:var(--c-mute);display:flex;align-items:center;gap:6px}
.login-actions a{color:var(--c-brand);font-size:12.5px;font-weight:600}
.login-actions a:hover{text-decoration:underline}
.btn-primary{background:var(--c-brand);color:#fff;border:0;padding:13px 20px;
  border-radius:var(--radius);font-weight:700;cursor:pointer;width:100%;
  font-size:14px;letter-spacing:-.005em;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-primary:hover{background:var(--c-brand-d)}
.secure{margin-top:22px;font-size:11.5px;color:var(--c-mute);
  display:flex;align-items:center;gap:6px;letter-spacing:.04em}

/* Misc */
.kv{display:grid;grid-template-columns:180px 1fr;gap:8px 16px;font-size:13px}
.kv div:nth-child(odd){color:var(--c-mute);font-weight:500}
.kv div:nth-child(even){color:var(--c-ink);font-weight:500}

.help{font-size:12px;color:var(--c-mute);margin-top:8px}
.legend{display:flex;gap:16px;font-size:12px;color:var(--c-mute);margin-top:10px;flex-wrap:wrap;align-items:center}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}

.split2{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.split3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* Workspace selection */
.workspace{padding:48px 32px;max-width:1280px;margin:0 auto}
.workspace h1{font-family:"DM Sans",sans-serif;font-size:32px;font-weight:800;
  letter-spacing:-.02em;margin:0}
.workspace .lede{color:var(--c-mute);font-size:14.5px;margin:6px 0 30px}
.workspace .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.wks-card{background:linear-gradient(180deg,#fff,var(--c-surface-2));
  border:1px solid var(--c-line);border-radius:14px;padding:22px;cursor:pointer;
  transition:.2s;display:block;color:inherit}
.wks-card:hover{border-color:var(--c-brand);transform:translateY(-3px);box-shadow:var(--shadow)}
.wks-card .tile{width:54px;height:54px;border-radius:12px;display:grid;place-items:center;
  color:#fff;font-size:24px;margin-bottom:18px}
.wks-card h2{margin:0 0 6px;font-family:"DM Sans",sans-serif;font-size:20px;font-weight:700;letter-spacing:-.01em}
.wks-card p{margin:0;color:var(--c-mute);font-size:13.5px;line-height:1.55;min-height:42px}
.wks-card .cta{margin-top:20px;color:var(--c-brand);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.08em;display:inline-flex;align-items:center;gap:8px}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1100px){
  .app{grid-template-columns:72px 1fr}
  .side a span.label{display:none}
  .side .grp-label{text-align:center;font-size:9px}
  .side a{justify-content:center;padding:10px 0}
  .side a::before{display:none!important}
  .side .logo-wrap small{display:none}
  .kpis,.hub,.workspace .grid{grid-template-columns:repeat(2,1fr)}
  .login{grid-template-columns:1fr}
  .login-left{display:none}
}