/* ============================================================
   TECH DEFENDERS BUSINESS OS - Design System
   Theme: Black / Gold / White  (original interface)
   ============================================================ */

/* ---------------- tokens ---------------- */
:root {
  --black: #0a0a0a;
  --black-2: #111111;
  --black-3: #1a1a1a;
  --panel-dark: #141414;
  --gold: #d4af37;
  --gold-strong: #b8912c;
  --gold-soft: #f3e6bd;
  --gold-dim: rgba(212, 175, 55, .14);
  --white: #ffffff;
  --canvas: #f6f5f1;
  --surface: #ffffff;
  --text: #16181d;
  --muted: #6b7280;
  --line: #e6e4dd;
  --line-dark: #262626;

  --success: #15803d;   --success-bg: #e8f5ec;
  --danger: #b91c1c;    --danger-bg: #fbeaea;
  --warning: #b45309;   --warning-bg: #fdf3e3;
  --info: #1d4ed8;      --info-bg: #e9effd;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow-1: 0 1px 2px rgba(15, 15, 15, .06), 0 1px 6px rgba(15, 15, 15, .05);
  --shadow-2: 0 8px 30px rgba(10, 10, 10, .16);
  --t-fast: 140ms cubic-bezier(.2,.6,.3,1);
  --font: "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------- base ---------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--canvas);
  font-size: 14px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.center { text-align: center; display: block; margin-top: 12px; }
.fine { font-size: 12px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cfcabb; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.dark-scroll::-webkit-scrollbar-thumb { background: #333; border: 2px solid transparent; background-clip: content-box; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   BUTTONS / BADGES / FORMS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  padding: 9px 16px; font-weight: 600; font-size: 13.5px;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), opacity var(--t-fast);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-gold { background: linear-gradient(180deg, #e3c25b, var(--gold) 55%, #c39c22); color: #171204; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 8px rgba(184,145,44,.35); }
.btn-gold:hover { filter: brightness(1.05); }
.btn-dark { background: var(--black); color: var(--gold); border-color: var(--black); }
.btn-dark:hover { background: #000; }
.btn-outline { background: transparent; border-color: var(--line); color: var(--text); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold-strong); background: var(--gold-dim); }
.btn-ghost { background: transparent; color: var(--muted); padding: 6px 10px; }
.btn-ghost:hover { color: var(--text); background: rgba(0,0,0,.05); border-radius: 6px; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 5px 11px; font-size: 12.5px; }
.btn-block { width: 100%; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px; text-transform: capitalize;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-neutral { background: #efeee9; color: #57534e; }
.b-success { background: var(--success-bg); color: var(--success); }
.b-danger  { background: var(--danger-bg);  color: var(--danger); }
.b-warning { background: var(--warning-bg); color: var(--warning); }
.b-info    { background: var(--info-bg);    color: var(--info); }
.b-gold    { background: var(--gold-dim);   color: var(--gold-strong); }

.field { display: block; margin-bottom: 13px; }
.field > span { display: block; font-size: 12.5px; font-weight: 600; color: #3f3f46; margin-bottom: 5px; }
.field small { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: #fff; color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim);
}
.pw-box { position: relative; }
.pw-box input { padding-right: 58px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--gold-strong); font-weight: 700; font-size: 12px; padding: 4px 6px;
}
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #3f3f46; cursor: pointer; }
.check input { accent-color: var(--gold-strong); width: 15px; height: 15px; }
.link { color: var(--gold-strong); font-weight: 600; font-size: 13px; }
.link:hover { text-decoration: underline; }
.row-between { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-body { background: var(--canvas); min-height: 100vh; }
.auth-wrap { display: grid; grid-template-columns: minmax(430px, 46%) 1fr; min-height: 100vh; }

.auth-brand {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 500px at -10% -20%, rgba(212,175,55,.16), transparent 60%),
    radial-gradient(800px 600px at 120% 115%, rgba(212,175,55,.10), transparent 55%),
    linear-gradient(160deg, #101010 0%, #060606 100%);
  color: #ececec;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 42px 48px;
}
.brand-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.brand-glow-1 { width: 420px; height: 420px; top: -140px; left: -120px; background: rgba(212,175,55,.18); }
.brand-glow-2 { width: 380px; height: 380px; bottom: -160px; right: -100px; background: rgba(212,175,55,.10); }

.brand-top { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.brand-logo {
  width: 68px; height: 68px; border-radius: 17px; object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 12px 34px rgba(0,0,0,.38), 0 0 22px rgba(63,211,225,.16);
}

/* ============================================================
   V4 OPERATIONS · Import, communication and automation
   ============================================================ */
.package-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); gap:34px; align-items:center; min-height:310px; padding:34px; border:1px solid #2c2718; border-radius:18px; color:#fff; background:radial-gradient(650px 300px at 5% 0%,rgba(212,175,55,.17),transparent 62%),linear-gradient(135deg,#070707 0%,#111 58%,#211b0d 100%); box-shadow:0 24px 60px rgba(10,10,10,.22); }
.package-hero::after { content:''; position:absolute; width:280px; height:280px; right:-100px; bottom:-180px; border:1px solid rgba(212,175,55,.24); border-radius:50%; box-shadow:0 0 0 38px rgba(212,175,55,.025),0 0 0 76px rgba(212,175,55,.018); pointer-events:none; }
.package-copy { position:relative; z-index:1; }.package-copy .eyebrow { color:var(--gold); font-size:10px; letter-spacing:.2em; font-weight:900; }.package-copy h2 { max-width:650px; margin:9px 0 12px; font-size:clamp(28px,4vw,48px); line-height:1.02; letter-spacing:-.035em; }.package-copy p { max-width:670px; color:#aaa69b; font-size:14px; }
.package-flow { display:flex; align-items:center; gap:9px; margin-top:30px; }.package-flow span { color:#d5d0c1; font-size:10px; font-weight:800; letter-spacing:.08em; }.package-flow i { width:32px; height:1px; background:linear-gradient(90deg,var(--gold),rgba(212,175,55,.15)); }
.package-drop { position:relative; z-index:1; display:grid; place-items:center; min-height:210px; padding:26px; text-align:center; border:1px dashed rgba(212,175,55,.72); border-radius:14px; background:rgba(255,255,255,.035); cursor:pointer; transition:transform var(--t-fast),background var(--t-fast),border-color var(--t-fast); }.package-drop:hover,.package-drop.dragging { transform:translateY(-2px); background:rgba(212,175,55,.09); border-color:#f0cf68; }.package-drop input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }.package-drop b { margin-top:13px; font-size:15px; }.package-drop small { color:#8f8b81; max-width:240px; }.drop-orbit { display:grid; place-items:center; width:58px; height:58px; border:1px solid rgba(212,175,55,.48); border-radius:50%; color:var(--gold); font-size:28px; background:#12100a; box-shadow:0 0 0 9px rgba(212,175,55,.05); }
.package-client { display:grid; grid-template-columns:1fr 1fr auto; gap:16px; align-items:end; margin:18px 0; padding:18px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow-1); }.package-client .field { margin:0; }.package-meter { display:grid; min-width:120px; padding:8px 12px; border-left:1px solid var(--line); }.package-meter span { color:var(--muted); font-size:11px; }.package-meter b { font-size:18px; }
.package-empty { display:grid; place-items:center; min-height:260px; padding:34px; text-align:center; border:1px dashed #d3cfc2; border-radius:14px; background:rgba(255,255,255,.52); }.package-empty>span { color:var(--gold-strong); font-size:35px; }.package-empty h3 { margin:9px 0 4px; }.package-empty p { max-width:550px; color:var(--muted); }.package-loading>span { width:34px; height:34px; border:3px solid var(--gold-dim); border-top-color:var(--gold); border-radius:50%; animation:package-spin .8s linear infinite; } @keyframes package-spin{to{transform:rotate(360deg)}}
.package-review-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:24px 0 12px; }.package-review-head p { color:var(--muted); }.package-file-list { display:grid; gap:8px; }.package-file-row { display:grid; grid-template-columns:48px minmax(180px,1fr) 60px minmax(220px,310px) auto; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 1px 1px rgba(0,0,0,.02); }.package-file-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:8px; color:#d8bc64; background:#14120d; font-size:9px; font-weight:900; letter-spacing:.04em; }.package-file-meta { min-width:0; }.package-file-meta b,.package-file-meta span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.package-file-meta span { color:var(--muted); font-size:11px; margin-top:2px; }.package-file-row select { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; }.package-confidence { justify-self:center; font-size:10px; font-weight:900; }.package-confidence::before { content:''; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:currentColor; }.package-confidence.high{color:var(--success)}.package-confidence.medium{color:var(--warning)}.package-confidence.low{color:var(--muted)}
.package-buildbar { position:sticky; z-index:18; bottom:14px; display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:18px; padding:14px 16px; border:1px solid #2d281a; border-radius:12px; color:#fff; background:rgba(9,9,9,.96); box-shadow:0 16px 44px rgba(0,0,0,.24); backdrop-filter:blur(12px); }.package-buildbar div { display:grid; }.package-buildbar span { color:#8f8f8f; font-size:11px; }
.import-hero { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr); gap:28px; align-items:center; padding:26px; border-radius:16px; color:#fff; background:linear-gradient(125deg,#0a0a0a 0%,#17150e 68%,#2b2310 100%); border:1px solid rgba(212,175,55,.3); box-shadow:var(--shadow-2); }
.import-hero .eyebrow { color:var(--gold); font-size:10px; letter-spacing:.18em; font-weight:900; }
.import-hero h2 { font-size:clamp(22px,3vw,34px); line-height:1.1; margin:7px 0 10px; max-width:700px; }
.import-hero p { color:#bbb7aa; max-width:720px; }
.import-drop { display:grid; gap:10px; padding:14px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.05); }
.import-drop input { position:absolute; opacity:0; pointer-events:none; }
.import-drop label { min-height:98px; display:grid; place-content:center; text-align:center; padding:16px; border:1px dashed rgba(212,175,55,.6); border-radius:9px; cursor:pointer; transition:background var(--t-fast),border-color var(--t-fast); }
.import-drop label:hover { background:rgba(212,175,55,.1); border-color:var(--gold); }
.import-drop label b,.import-drop label span { display:block; }.import-drop label span { color:#999; font-size:11px; margin-top:4px; }
.subline { display:block; margin-top:2px; color:var(--muted); font-weight:400; }
.import-progress { margin-top:16px; }.import-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.import-steps span { position:relative; padding:7px 10px 7px 28px; color:var(--muted); font-size:11px; font-weight:800; text-align:center; }
.import-steps span::before { content:''; position:absolute; left:0; top:50%; width:100%; height:2px; background:var(--line); z-index:0; }
.import-steps span::after { content:''; position:absolute; left:12px; top:50%; width:11px; height:11px; transform:translateY(-50%); border:2px solid #bbb; border-radius:50%; background:#fff; z-index:1; }
.import-steps span.done,.import-steps span.active { color:var(--text); }.import-steps span.done::before { background:var(--success); }.import-steps span.done::after { border-color:var(--success); background:var(--success); }.import-steps span.active::after { border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-dim); }
.category-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.category-summary { display:grid; gap:3px; padding:16px; background:#fff; border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:var(--radius); box-shadow:var(--shadow-1); }
.category-summary strong { font-size:25px; }.category-summary span,.category-summary small { color:var(--muted); font-size:11px; }
.mapping-list { display:grid; gap:12px; }.mapping-card { overflow:hidden; }.mapping-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; padding:14px; }
.mapping-grid label { display:grid; grid-template-columns:1fr; gap:4px; padding:10px; border:1px solid var(--line); border-radius:8px; }.mapping-grid label>span { font-size:11px; font-weight:800; color:var(--muted); }.mapping-grid select,.decision-select { width:100%; padding:8px; border:1px solid var(--line); border-radius:7px; background:#fff; }
.mapping-grid small { font-size:10px; font-weight:800; }.confidence-ok { color:var(--success); }.confidence-low { color:var(--warning); }
.import-actionbar { position:sticky; bottom:14px; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:18px; padding:13px 16px; border:1px solid #2e2a1f; border-radius:12px; color:#fff; background:rgba(10,10,10,.96); box-shadow:0 14px 40px rgba(0,0,0,.24); backdrop-filter:blur(12px); }
.import-actionbar>div { display:flex; align-items:center; gap:10px; }.import-actionbar span { color:#aaa; font-size:11px; }
.template-list { display:grid; gap:10px; }.template-list article strong { display:block; margin:10px 0 5px; }.template-list article p { color:var(--muted); font-size:12px; }.row-split { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.recipient-picker { margin-top:16px; max-height:280px; overflow:auto; padding:12px; background:#f7f5ee; border:1px solid var(--line); border-radius:10px; }.recipient-picker>.check { padding:8px 3px; border-bottom:1px solid var(--line); }.recipient-picker>.check:last-child { border-bottom:0; }.recipient-picker .check span { display:grid; }.recipient-picker .check small { color:var(--muted); }
.automation-guide { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:14px; margin-bottom:18px; padding:18px; color:#fff; border-radius:14px; background:#111; border:1px solid #2c2718; }.automation-guide div { display:grid; gap:3px; min-height:70px; place-content:center; text-align:center; border:1px solid rgba(212,175,55,.25); border-radius:10px; background:rgba(212,175,55,.07); }.automation-guide span,.rule-block>span { color:var(--gold); font-size:10px; letter-spacing:.14em; font-weight:900; }.automation-guide i { color:var(--gold); font-style:normal; font-size:21px; }
.automation-form { display:grid; gap:12px; }.rule-block { display:grid; gap:10px; padding:14px; border-radius:10px; border-left:4px solid var(--gold); background:#f8f7f3; }.rule-block.if { border-left-color:var(--info); }.rule-block.then { border-left-color:var(--success); }.grid-3 { display:grid; grid-template-columns:1fr 150px 1fr; gap:10px; }

@media(max-width:1050px){.package-file-row{grid-template-columns:48px minmax(160px,1fr) 55px minmax(190px,260px)}.package-file-row>.btn{grid-column:4;justify-self:end}}
@media(max-width:900px){.package-hero,.import-hero{grid-template-columns:1fr}.package-client{grid-template-columns:1fr 1fr}.package-meter{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding-left:0}.import-steps{grid-template-columns:1fr}.import-steps span{text-align:left}.automation-guide{grid-template-columns:1fr}.automation-guide i{transform:rotate(90deg);text-align:center}.grid-3{grid-template-columns:1fr}.import-actionbar,.package-buildbar{position:static;align-items:flex-start;flex-direction:column}.import-actionbar>div{flex-wrap:wrap}}
@media(max-width:620px){.package-hero{padding:24px 18px}.package-copy h2{font-size:30px}.package-flow{display:grid;grid-template-columns:1fr 1fr}.package-flow i{display:none}.package-client{grid-template-columns:1fr}.package-file-row{grid-template-columns:42px 1fr auto}.package-file-meta{grid-column:2}.package-confidence{grid-column:3;grid-row:1}.package-file-row label{grid-column:1/-1}.package-file-row>.btn{grid-column:1/-1;justify-self:start}.package-buildbar .btn{width:100%}}
.logo-mark {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(150deg, #1c1c1c, #000);
  border: 1px solid rgba(212,175,55,.55);
  color: var(--gold); font-family: Georgia, serif; font-size: 22px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 0 24px rgba(212,175,55,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-name { font-weight: 800; letter-spacing: .34em; font-size: 15px; color: #fff; }
.brand-sub { font-size: 11px; letter-spacing: .5em; color: var(--gold); font-weight: 600; margin-top: 2px; }

.brand-mid { position: relative; z-index: 1; max-width: 520px; }
.brand-mid h1 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.22; font-weight: 800; color: #fff; margin-bottom: 14px; }
.gold-text { color: var(--gold); }
.brand-lede { color: #b9b9b9; font-size: 14.5px; margin-bottom: 30px; max-width: 480px; }

.feature-list { list-style: none; display: grid; gap: 16px; }
.feature-list li { display: flex; gap: 13px; align-items: flex-start; }
.f-ico { color: var(--gold); font-size: 11px; margin-top: 5px; }
.feature-list strong { color: #fff; font-size: 14.5px; display: block; }
.feature-list small { color: #9c9c9c; font-size: 12.5px; }

.brand-stats { position: relative; z-index: 1; display: flex; gap: 38px; border-top: 1px solid var(--line-dark); padding-top: 22px; }
.brand-stats b { display: block; font-size: 22px; color: var(--gold); font-weight: 800; }
.brand-stats span { font-size: 12px; color: #9c9c9c; letter-spacing: .06em; text-transform: uppercase; }
.brand-foot { position: relative; z-index: 1; font-size: 11.5px; color: #777; letter-spacing: .04em; }

.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-card {
  width: 100%; max-width: 470px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-2); padding: 30px 32px 26px;
}
.auth-card h2 { font-size: 21px; font-weight: 800; margin-bottom: 4px; }
.auth-card > .auth-form > .muted { margin-bottom: 20px; font-size: 13.5px; }

.tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: #f1efe8; border-radius: 10px; padding: 4px; margin-bottom: 24px; }
.tab { position: relative; z-index: 1; background: none; border: none; padding: 9px 0; font-weight: 700; font-size: 13.5px; color: var(--muted); border-radius: 8px; transition: color var(--t-fast); }
.tab.active { color: #171204; }
.tab-slider {
  position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); bottom: 4px;
  background: linear-gradient(180deg, #e3c25b, var(--gold));
  border-radius: 8px; box-shadow: 0 2px 8px rgba(184,145,44,.4);
  transition: transform 200ms cubic-bezier(.2,.6,.3,1);
}
.tabs[data-active="register"] .tab-slider { transform: translateX(100%); }

.demo-box { margin-top: 20px; border: 1px dashed var(--gold); background: #fffdf4; border-radius: var(--radius-sm); padding: 13px 15px; }
.demo-title { font-weight: 700; font-size: 12.5px; color: var(--gold-strong); margin-bottom: 8px; }
.demo-box code { display: block; margin-top: 8px; font-size: 12px; color: #57534e; background: #faf7ec; padding: 6px 9px; border-radius: 6px; }
.terms { align-items: flex-start; margin: 6px 0 16px; font-size: 12.5px; }
.auth-foot { margin-top: 22px; font-size: 12px; color: var(--muted); }
.auth-divider { display: flex; align-items: center; gap: 10px; color: #9a9a9a; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; margin: 13px 0; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.google-auth { margin-top: 13px; }
.google-button-shell { min-height: 44px; width: 100%; display: flex; justify-content: center; overflow: hidden; }
.google-button-shell > div { max-width: 100%; }
.google-auth-note { min-height: 16px; margin-top: 7px; color: var(--muted); font-size: 11px; text-align: center; }
.otp-hint { color: var(--muted); font-size: 11.5px; text-align: center; margin-top: 8px; }
.otp-modal-body { display: grid; gap: 16px; }
.otp-code { text-align: center; font-size: 26px !important; font-weight: 800; letter-spacing: .3em; padding-left: calc(12px + .3em) !important; font-variant-numeric: tabular-nums; }
.otp-security-note { display: flex; gap: 10px; align-items: flex-start; background: #fffaf0; border: 1px solid #ead9a1; border-radius: 9px; padding: 11px 12px; }
.otp-security-note b { color: #8a6819; font-size: 12px; white-space: nowrap; }
.otp-security-note span { color: #6b6250; font-size: 12px; }

/* forgot modal on auth page */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(8,8,8,.55); backdrop-filter: blur(2px);
  display: grid; place-items: center; z-index: 90; animation: fadeIn 160ms ease;
}
.modal {
  background: #fff; border-radius: 14px; width: min(92vw, 440px);
  box-shadow: var(--shadow-2); animation: popIn 170ms cubic-bezier(.2,.6,.3,1);
  overflow: hidden; max-height: calc(100dvh - 32px); display: flex; flex-direction: column;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.modal-head h3 { font-size: 16px; }
.modal-x { background: none; border: none; font-size: 19px; color: var(--muted); line-height: 1; }
.modal-body { padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); background: #fbfaf6; flex: 0 0 auto; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* toasts */
.toast-host { position: fixed; top: 18px; right: 18px; z-index: 200; display: grid; gap: 10px; }
.toast {
  min-width: 260px; max-width: 360px; background: var(--black); color: #f3f3f3;
  border-left: 3px solid var(--gold); border-radius: 9px; padding: 12px 16px;
  box-shadow: var(--shadow-2); font-size: 13.5px; animation: slideIn 180ms cubic-bezier(.2,.6,.3,1);
}
.toast.t-success { border-left-color: #22c55e; }
.toast.t-error { border-left-color: #ef4444; }
.toast.t-warning { border-left-color: #f59e0b; }
.toast b { display: block; margin-bottom: 2px; color: var(--gold); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; transition: grid-template-columns 200ms cubic-bezier(.2,.6,.3,1); }
.app-shell.collapsed { grid-template-columns: 68px 1fr; }

/* ---- sidebar ---- */
.sidebar {
  background: linear-gradient(180deg, #0d0d0d, #080808);
  color: #cfcfcf; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
.side-brand { display: flex; align-items: center; gap: 11px; padding: 17px 16px 15px; border-bottom: 1px solid var(--line-dark); }
.side-logo {
  width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.3); box-shadow: 0 5px 16px rgba(0,0,0,.35);
}
.side-brand-text { min-width: 0; }
.side-brand-text b { color: #fff; font-size: 12.5px; letter-spacing: .22em; display: block; white-space: nowrap; }
.side-brand-text span { color: var(--gold); font-size: 9.5px; letter-spacing: .38em; }
.app-shell.collapsed .side-brand-text { display: none; }

.nav-group { padding: 5px 10px 0; }
.nav-overview { padding-top: 12px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.06); }
.nav-group-toggle {
  width: 100%; min-height: 40px; display: grid; grid-template-columns: 22px 1fr auto 16px; align-items: center; gap: 9px;
  color: #a9a9a9; background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 7px 8px; text-align: left;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.nav-group-toggle:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav-accordion.open > .nav-group-toggle { color: var(--gold); background: rgba(212,175,55,.08); border-color: rgba(212,175,55,.16); }
.nav-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group-count { min-width: 21px; height: 19px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.07); color: #818181; font-size: 10px; letter-spacing: 0; }
.nav-chevron { font-size: 15px; line-height: 1; transform: rotate(-90deg); transition: transform 170ms ease; }
.nav-accordion.open .nav-chevron { transform: rotate(0); }
.nav-group-items { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 180ms ease, opacity 140ms ease; }
.nav-group-items > .nav-item { display: none; }
.nav-accordion.open .nav-group-items { grid-template-rows: 1fr; opacity: 1; padding-top: 3px; }
.nav-accordion.open .nav-group-items > .nav-item { display: flex; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 10px; margin: 1px 0; border: none; background: none;
  color: #bdbdbd; font-size: 13.5px; font-weight: 500; text-align: left;
  border-radius: 8px; transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap; position: relative;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: linear-gradient(90deg, rgba(212,175,55,.18), rgba(212,175,55,.05)); color: var(--gold); }
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--gold); }
.nav-ico { width: 20px; text-align: center; font-size: 14px; flex-shrink: 0; }
.app-shell.collapsed .nav-item span.lbl { display: none; }
.app-shell.collapsed .nav-item { justify-content: center; padding: 9px 0; }
.app-shell.collapsed .nav-group-toggle { display: flex; justify-content: center; padding: 8px 0; }
.app-shell.collapsed .nav-group-name, .app-shell.collapsed .nav-group-count, .app-shell.collapsed .nav-chevron, .app-shell.collapsed .nav-group-items { display: none; }

.side-foot { margin-top: auto; padding: 14px; border-top: 1px solid var(--line-dark); }
.side-user { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(140deg, var(--gold), #8a6d1c);
  color: #171204; font-weight: 800; display: grid; place-items: center; font-size: 13px;
}
.side-user-meta { min-width: 0; }
.side-user-meta b { color: #eee; font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-meta span { color: #8a8a8a; font-size: 11px; text-transform: capitalize; }
.app-shell.collapsed .side-user-meta { display: none; }

/* ---- main column ---- */
.main-col { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--black); color: #ddd;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px; height: 56px;
  border-bottom: 1px solid #222;
}
.icon-btn {
  background: none; border: 1px solid transparent; color: #bbb;
  width: 36px; height: 36px; border-radius: 8px; font-size: 16px;
  display: grid; place-items: center; transition: all var(--t-fast);
}
.icon-btn:hover { background: rgba(255,255,255,.08); color: var(--gold); }

.global-search { position: relative; flex: 1; max-width: 460px; }
.global-search input {
  width: 100%; background: #1b1b1b; border: 1px solid #2c2c2c; color: #eee;
  border-radius: 9px; padding: 8px 12px 8px 34px; font-size: 13px;
}
.global-search input::placeholder { color: #777; }
.global-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.15); }
.gs-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #888; font-size: 13px; }
.search-pop {
  position: absolute; top: 44px; left: 0; right: 0; background: #fff; color: var(--text);
  border-radius: 10px; box-shadow: var(--shadow-2); overflow: hidden; border: 1px solid var(--line);
}
.search-pop a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; font-size: 13px; border-bottom: 1px solid #f1efe8; }
.search-pop a:last-child { border-bottom: none; }
.search-pop a:hover { background: #fffdf4; }
.search-pop .st { font-size: 11px; color: var(--gold-strong); font-weight: 700; text-transform: uppercase; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.org-chip { font-size: 12px; color: var(--gold); background: #111; border: 1px solid rgba(212,175,55,.4); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.org-chip:hover { border-color: var(--gold); background: #1a170e; }
.org-chip:focus-visible { outline: 3px solid rgba(212,175,55,.35); outline-offset: 2px; }
.notif-wrap, .user-wrap { position: relative; }
.notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; border: 2px solid var(--black); }
.dropdown {
  position: absolute; right: 0; top: 46px; width: 330px; max-width: 88vw;
  background: #fff; color: var(--text); border-radius: 12px; border: 1px solid var(--line);
  box-shadow: var(--shadow-2); overflow: hidden; z-index: 60; animation: popIn 150ms ease;
}
.dd-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13.5px; }
.dd-list { max-height: 340px; overflow-y: auto; }
.dd-item { display: block; padding: 11px 15px; border-bottom: 1px solid #f2f0ea; font-size: 13px; color: inherit; }
.dd-item[href]:hover { background: #fffdf4; }
.dd-item:last-child { border-bottom: none; }
.dd-item b { display: block; font-size: 13px; }
.dd-item small { color: var(--muted); }
.dd-empty { padding: 26px; text-align: center; color: var(--muted); font-size: 13px; }
.user-menu-item { display: block; width: 100%; text-align: left; padding: 10px 15px; background: none; border: none; font-size: 13.5px; }
.user-menu-item:hover { background: #faf7ec; color: var(--gold-strong); }

.content { padding: 22px 26px 40px; max-width: 1460px; width: 100%; }

/* page header */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.page-head p { color: var(--muted); font-size: 13px; margin-top: 2px; }
.page-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.crumbs b { color: var(--gold-strong); }

/* cards & grids */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.card-pad { padding: 18px 20px; }
.card-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.card-head h3 { font-size: 14.5px; font-weight: 700; }
.grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow-1); position: relative; overflow: hidden; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.kpi::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), transparent 70%); }
.kpi .k-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.kpi .k-value { font-size: 23px; font-weight: 800; margin-top: 5px; font-variant-numeric: tabular-nums; }
.kpi .k-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.kpi.k-gold .k-value { color: var(--gold-strong); }
.kpi.k-danger .k-value { color: var(--danger); }
.kpi.k-success .k-value { color: var(--success); }
.kpi-link { color: inherit; cursor: pointer; }
.kpi-link:hover { border-color: rgba(212,175,55,.75); }
.kpi-link:focus-visible { outline: 3px solid rgba(212,175,55,.35); outline-offset: 2px; }
.dashboard-link-card { display: block; color: inherit; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.dashboard-link-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: rgba(212,175,55,.65); }

/* dashboard business-app launcher */
.app-launcher { margin-bottom: 20px; border: 1px solid #2b281f; border-radius: 14px; padding: 18px; background: linear-gradient(135deg, #0b0b0b 0%, #1d1b15 100%); box-shadow: var(--shadow-2); color: #fff; }
.app-launcher-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-end; margin-bottom: 14px; }
.app-launcher-head .eyebrow { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.app-launcher-head h2 { margin-top: 2px; font-size: 20px; }
.app-launcher-head p { color: #aaa69a; font-size: 12px; margin-top: 3px; }
.app-launcher-count { color: #cbbd8c; border: 1px solid rgba(212,175,55,.28); background: rgba(212,175,55,.08); border-radius: 999px; padding: 5px 10px; font-size: 11px; white-space: nowrap; }
.app-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; align-items: start; }
.app-module { overflow: hidden; border: 1px solid #2d2d2d; border-radius: 10px; background: rgba(255,255,255,.035); transition: border-color var(--t-fast), background var(--t-fast); }
.app-module:hover, .app-module.open { border-color: rgba(212,175,55,.5); background: rgba(212,175,55,.065); }
.app-module-toggle { width: 100%; min-height: 58px; display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 10px; padding: 10px 11px; border: 0; background: transparent; color: #fff; text-align: left; }
.app-module-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(212,175,55,.26); border-radius: 9px; background: rgba(212,175,55,.1); color: var(--gold); }
.app-module-toggle b { display: block; font-size: 13px; }
.app-module-toggle small { display: block; color: #8f8c84; font-size: 10.5px; margin-top: 1px; }
.app-module-arrow { justify-self: end; color: #777; transform: rotate(0); transition: transform 170ms ease, color 170ms ease; }
.app-module.open .app-module-arrow { transform: rotate(90deg); color: var(--gold); }
.app-module-items { display: none; padding: 0 8px 8px; }
.app-module.open .app-module-items { display: grid; animation: fadeIn 140ms ease; }
.app-module-items a { display: grid; grid-template-columns: 22px 1fr 18px; align-items: center; gap: 8px; min-height: 37px; padding: 7px 8px; border-top: 1px solid rgba(255,255,255,.06); color: #c7c7c7; font-size: 12px; }
.app-module-items a:first-child { border-top-color: rgba(212,175,55,.14); }
.app-module-items a:hover { color: var(--gold); background: rgba(255,255,255,.035); border-radius: 7px; }
.app-module-items a b { color: #666; text-align: right; }

/* iOS-style access-control switches */
.access-layout { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr); gap: 16px; margin-top: 18px; }
.access-users { padding: 8px; max-height: 620px; overflow-y: auto; }
.access-user { width: 100%; border: 0; background: transparent; text-align: left; padding: 11px 12px; border-radius: 10px; display: grid; gap: 2px; color: var(--text); }
.access-user:hover { background: #faf7ec; }
.access-user.active { background: #111; color: #fff; }
.access-user small { color: var(--muted); }
.access-user.active small { color: #aaa; }
.access-modules { padding: 4px 20px 8px; }
.access-row { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.access-row:last-child { border-bottom: 0; }
.access-copy b { display: block; font-size: 13.5px; }
.access-copy small { color: var(--muted); font-size: 12px; }
.ios-switch { display: inline-flex; align-items: center; min-width: 52px; min-height: 44px; cursor: pointer; position: relative; flex-shrink: 0; }
.ios-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ios-track { width: 48px; height: 28px; border-radius: 999px; background: #d1d1d6; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); padding: 2px; transition: background 180ms ease; }
.ios-track::after { content: ''; display: block; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.28); transition: transform 180ms cubic-bezier(.2,.8,.2,1); }
.ios-switch input:checked + .ios-track { background: var(--gold); }
.ios-switch input:checked + .ios-track::after { transform: translateX(20px); }
.ios-switch input:focus-visible + .ios-track { outline: 3px solid rgba(212,175,55,.35); outline-offset: 2px; }
.ios-switch input:disabled + .ios-track { opacity: .45; cursor: not-allowed; }
.access-state { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); min-width: 26px; }
.protected-label { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.role-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; background: #f1f1f1; color: #444; font-size: 11px; font-weight: 800; white-space: nowrap; }
.role-pill.role-admin { background: #111; color: var(--gold); border: 1px solid rgba(212,175,55,.35); }
.role-pill.role-super { background: linear-gradient(135deg, #071629, #0b2434); color: #55e2ef; border: 1px solid rgba(85,226,239,.38); box-shadow: 0 0 0 1px rgba(85,226,239,.05); }
.org-switch-list { display: grid; gap: 8px; max-height: 410px; overflow: auto; }
.org-switch-item { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 11px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; color: var(--text); }
.org-switch-item:hover { border-color: rgba(212,175,55,.65); background: #fffdf6; }
.org-switch-item.active { border-color: var(--gold); background: #faf7ec; }
.org-switch-item span:first-child { display: grid; gap: 2px; }
.org-switch-item small { color: var(--muted); }

/* Super Admin platform command centre */
.super-admin-banner { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 20px; margin-bottom: 18px; padding: 22px 24px; border-radius: 16px; color: #fff; background: radial-gradient(500px 180px at 0 0, rgba(49,204,224,.18), transparent 70%), linear-gradient(135deg,#07101f,#0c2130); border: 1px solid rgba(79,215,230,.24); box-shadow: 0 16px 36px rgba(7,16,31,.16); }
.super-admin-banner img { width: 72px; height: 72px; object-fit: cover; border-radius: 17px; border: 1px solid rgba(255,255,255,.32); }
.super-admin-banner h2 { font-size: clamp(18px,2vw,24px); margin: 3px 0 5px; }
.super-admin-banner p { color: #bad0dc; font-size: 13px; max-width: 720px; }
.super-admin-banner .eyebrow, .org-card .eyebrow { color: #55e2ef; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.super-shield { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(85,226,239,.12); color: #55e2ef; font-size: 20px; }
.org-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap: 14px; }
.org-card { padding: 18px; }
.org-card.active { border-color: rgba(212,175,55,.7); box-shadow: 0 0 0 2px rgba(212,175,55,.10); }
.org-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.org-card h3 { margin-top: 3px; }
.org-card > p { color: var(--muted); font-size: 12px; min-height: 34px; margin: 8px 0 14px; }
.org-stats { display: flex; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 11px 0; margin-bottom: 14px; color: var(--muted); font-size: 11px; }
.org-stats b { color: var(--text); font-size: 13px; }
.section-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin: 26px 0 12px; }
.section-title h2 { font-size: 18px; }
.section-title p { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.platform-account-head { padding-top: 3px; border-top: 1px solid var(--line); }
.platform-filters { padding: 12px; background: #f7f5ee; border: 1px solid var(--line); border-radius: 10px; }
.platform-filters input { min-width: min(100%, 320px); flex: 1; }
.global-actions { min-width: 360px; flex-wrap: wrap; }
.danger-text { color: var(--danger); }
.access-summary b { font-size: 14px; }
.access-summary small { color: var(--muted); }
.credential-code { display: block; background: #faf7ec; padding: 12px; border-radius: 8px; font-size: 16px; font-weight: 800; margin-top: 10px; }

.modal.dashboard-control-modal { width: min(96vw, 1120px); max-height: 94vh; }
.dashboard-control-modal .modal-body { overflow-y: auto; padding: 0; }
.dashboard-user-strip { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.dashboard-user-strip > div:nth-child(2) { display: grid; gap: 2px; }
.dashboard-user-strip small { color: var(--muted); }
.dashboard-control-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); min-height: 540px; }
.dashboard-control-grid > section { padding: 18px 20px 24px; border-right: 1px solid var(--line); }
.dashboard-control-grid > aside { padding: 18px; background: #f7f5ef; }
.policy-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
.policy-head h3 { font-size: 14px; }
.policy-head p { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.widget-head { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.policy-list { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.policy-row { min-height: 62px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #fff; }
.policy-row:last-child { border-bottom: 0; }
.policy-row > div:first-child { display: grid; gap: 2px; }
.policy-row b { font-size: 12.5px; }
.policy-row small { color: var(--muted); font-size: 11px; }
.policy-row.policy-disabled { background: #f8f8f8; }
.live-dot { color: #0c7a43; background: #e7f8ef; border: 1px solid #b7e6cb; padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.preview-shell { overflow: hidden; border-radius: 14px; border: 1px solid #243442; background: #0a141e; box-shadow: 0 18px 36px rgba(5,15,24,.18); }
.preview-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; color: #b9ccd7; border-bottom: 1px solid rgba(255,255,255,.09); font-size: 11px; }
.preview-top b { color: #55e2ef; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.preview-widget { min-height: 94px; display: grid; align-content: start; gap: 3px; padding: 10px; border-radius: 9px; background: #122330; border: 1px solid rgba(85,226,239,.14); color: #fff; }
.preview-widget span { color: #a9c0cc; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.preview-widget b { color: #55e2ef; font-size: 18px; }
.preview-widget small { color: #8fa5b0; font-size: 10px; }
.preview-widget.preview-off { opacity: .48; filter: grayscale(.6); border-style: dashed; }
.preview-widget.preview-off b { color: #87939a; }
.nav-overlay { display: none; }

.grid-2col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.grid-even { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

/* tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.2px; }
.tbl th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 700; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: #fbfaf6; white-space: nowrap;
}
.tbl td { padding: 10px 14px; border-bottom: 1px solid #f1efe8; vertical-align: middle; }
.tbl tbody tr { transition: background var(--t-fast); }
.tbl tbody tr:hover { background: #fffdf4; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .actions-cell { display: flex; gap: 6px; justify-content: flex-end; }
.empty-state { padding: 44px 20px; text-align: center; color: var(--muted); }
.empty-state .big { font-size: 30px; margin-bottom: 8px; }

/* filter bar */
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filter-bar input, .filter-bar select {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-size: 13px;
}
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--gold); }

/* kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: 272px; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.kan-col { background: #efede6; border-radius: var(--radius); padding: 10px; min-height: 220px; }
.kan-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #57534e; padding: 4px 6px 10px; display: flex; justify-content: space-between; }
.kan-col h4 span { background: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.kan-card {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 8px; padding: 11px 13px; margin-bottom: 9px; cursor: grab;
  box-shadow: var(--shadow-1); transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.kan-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.kan-card.dragging { opacity: .45; }
.kan-card b { font-size: 13px; display: block; margin-bottom: 3px; }
.kan-card .kv { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 5px; }
.kan-card .val { color: var(--gold-strong); font-weight: 700; }

/* bar chart (pure CSS) */
.chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding: 10px 6px 0; }
.chart-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.chart-bar i {
  display: block; width: 100%; max-width: 44px; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--gold), #9c7c1e); min-height: 3px;
  transition: height 300ms cubic-bezier(.2,.6,.3,1);
}
.chart-bar.alt i { background: linear-gradient(180deg, #2f2f2f, #0a0a0a); }
.chart-bar span { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.chart-bar em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--text); }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); padding: 8px 6px 0; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* funnel bars */
.funnel-row { display: grid; grid-template-columns: 110px 1fr 44px; gap: 10px; align-items: center; margin-bottom: 9px; font-size: 12.5px; }
.funnel-track { background: #f1efe8; border-radius: 999px; height: 20px; overflow: hidden; }
.funnel-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-strong), var(--gold)); transition: width 350ms ease; }

/* timeline */
.timeline { list-style: none; }
.timeline li { position: relative; padding: 0 0 16px 24px; border-left: 2px solid var(--line); margin-left: 8px; }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; }
.timeline b { font-size: 13px; }
.timeline small { color: var(--muted); display: block; }

/* doc lines editor */
.document-editor { overflow: hidden; }
.document-meta { margin: 18px 0 16px; }
.manual-entry-callout { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid #e5ce82; border-left: 4px solid var(--gold); border-radius: 8px; background: #fffbec; }
.manual-entry-callout b { font-size: 12.5px; }
.manual-entry-callout span { color: #665f4b; font-size: 12px; }
.manual-entry-callout.invoice-callout { border-color: #cbdce8; border-left-color: #246683; background: #f3f9fc; }
.lines-editor { width: 100%; overflow-x: auto; padding-bottom: 2px; }
.lines-editor table { width: 100%; border-collapse: collapse; font-size: 13px; }
.manual-lines-table { min-width: 980px; table-layout: fixed; }
.manual-lines-table th:nth-child(1) { width: 28%; }
.manual-lines-table th:nth-child(2) { width: 12%; }
.manual-lines-table th:nth-child(3) { width: 9%; }
.manual-lines-table th:nth-child(4) { width: 9%; }
.manual-lines-table th:nth-child(5) { width: 13%; }
.manual-lines-table th:nth-child(6), .manual-lines-table th:nth-child(7) { width: 11%; }
.manual-lines-table th:nth-child(8) { width: 7%; }
.lines-editor th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.lines-editor td { padding: 5px 6px; border-bottom: 1px solid #f1efe8; }
.lines-editor input, .lines-editor select { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.lines-editor input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); }
.lines-editor .rm { width: 34px; height: 34px; display: grid; place-items: center; background: none; border: 1px solid transparent; border-radius: 7px; color: var(--danger); font-size: 19px; }
.lines-editor .rm:hover { border-color: #efb7b7; background: var(--danger-bg); }
.add-line-btn { margin-top: 10px; }
.document-actions { margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }

/* totals box */
.totals-box { margin-left: auto; width: 320px; max-width: 100%; font-size: 13.5px; }
.totals-box .tr { display: flex; justify-content: space-between; padding: 6px 2px; }
.totals-box .tr.grand { border-top: 2px solid var(--black); font-weight: 800; font-size: 15px; margin-top: 6px; padding-top: 10px; }
.totals-box .tr.grand span:last-child { color: var(--gold-strong); }

/* chips for meta info */
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.meta-item { background: #fbfaf6; border: 1px solid var(--line); border-radius: 8px; padding: 10px 13px; }
.meta-item span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.meta-item b { font-size: 13.5px; word-break: break-word; }

/* print document */
.print-doc { background: #fff; max-width: 820px; margin: 0 auto; padding: 34px 40px; border: 1px solid var(--line); border-radius: var(--radius); }
.print-doc .pd-top { display: flex; justify-content: space-between; gap: 20px; border-bottom: 3px solid var(--black); padding-bottom: 16px; margin-bottom: 18px; }
.print-doc .pd-org b { font-size: 19px; letter-spacing: .04em; }
.print-doc .pd-org div { font-size: 12px; color: var(--muted); }
.print-doc .pd-title { text-align: right; }
.print-doc .pd-title h2 { font-size: 21px; letter-spacing: .12em; color: var(--gold-strong); }
.print-doc .pd-title div { font-size: 12.5px; color: var(--muted); }
.pd-table { width: 100%; border-collapse: collapse; font-size: 12.8px; margin: 14px 0; }
.pd-table th { background: var(--black); color: var(--gold); text-align: left; padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.pd-table td { border-bottom: 1px solid var(--line); padding: 8px 10px; }
.pd-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pd-sign { display: flex; justify-content: space-between; margin-top: 46px; font-size: 12.5px; color: var(--muted); }
.pd-sign div { border-top: 1px solid var(--text); padding-top: 6px; width: 210px; text-align: center; }

@media print {
  body * { visibility: hidden; }
  .print-doc, .print-doc * { visibility: visible; }
  .print-doc { position: absolute; inset: 0; border: none; box-shadow: none; }
  .no-print { display: none !important; }
}

/* A4 GST invoice: dense, official and intentionally print-first. */
.gst-print{max-width:900px;padding:0;border:1px solid #161616;border-radius:0;color:#111;font-family:Arial,sans-serif;font-size:12px}.gst-brand{display:flex;gap:14px;align-items:center;padding:18px 20px}.gst-brand img{width:70px;height:70px;object-fit:contain}.gst-brand b{font-size:27px;letter-spacing:-.03em}.gst-brand p{margin:3px 0;font-size:12px}.gst-titlebar{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;border:2px solid #161616;border-left:0;border-right:0;padding:7px 14px}.gst-titlebar h1{text-align:center;font-size:25px;margin:0}.gst-titlebar strong:last-child{text-align:right}.gst-party-grid{display:grid;grid-template-columns:40% 60%;border-bottom:1px solid #161616}.gst-recipient,.gst-document{padding:9px 12px}.gst-recipient{border-right:1px solid #161616}.gst-recipient>b{font-size:15px}.gst-recipient p{margin:4px 0}.gst-recipient strong{display:inline-block;min-width:102px}.gst-document>div{display:grid;grid-template-columns:130px 1fr 110px 1fr;margin:4px 0}.gst-lines{width:100%;border-collapse:collapse}.gst-lines th,.gst-lines td{border:1px solid #161616;padding:6px 7px;vertical-align:top}.gst-lines th{text-align:center;font-weight:800}.gst-lines .num{text-align:right}.gst-lines tfoot th{padding:7px}.gst-bottom{display:grid;grid-template-columns:56% 18% 26%;border-top:0}.gst-left,.gst-qr,.gst-summary{border-right:1px solid #161616}.gst-words,.gst-terms,.gst-customer-sign{padding:8px 12px;border-bottom:1px solid #161616}.gst-words{font-size:14px;text-transform:uppercase}.gst-terms{min-height:68px}.gst-customer-sign{min-height:100px;border-bottom:0}.gst-qr{text-align:center;padding:10px 7px;display:flex;flex-direction:column;gap:5px;align-items:center}.qr-placeholder{width:105px;height:105px;display:grid;place-content:center;background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 50%/18px 18px;color:#fff;text-shadow:0 1px 2px #000;font-weight:900;font-size:18px}.gst-qr small{font-size:9px}.gst-summary>div{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid #161616}.gst-summary .gst-grand b{font-size:18px}.gst-signatory{min-height:113px;display:flex!important;flex-direction:column;align-items:flex-end;justify-content:space-between}.gst-signatory small{font-size:10px;transform:rotate(-8deg);margin-top:22px}.gst-bank{padding:8px 14px;border-top:1px solid #161616;font-size:13px}.gst-print .meta-grid,.gst-print .pd-top,.gst-print .pd-table,.gst-print .totals-box,.gst-print .pd-sign{display:none}@media(max-width:700px){.gst-print{overflow:auto}.gst-print>*{min-width:760px}}@media print{.gst-print{width:100%;max-width:none;font-size:10px}.gst-brand{padding:10px 12px}.gst-brand img{width:45px;height:45px}.gst-brand b{font-size:20px}.gst-titlebar h1{font-size:19px}.gst-lines th,.gst-lines td{padding:4px}.gst-bottom{break-inside:avoid}.gst-customer-sign{min-height:65px}.gst-signatory{min-height:75px}}

/* skeleton loading */
.skel { border-radius: 8px; background: linear-gradient(90deg, #eceae2 25%, #f6f4ec 50%, #eceae2 75%); background-size: 200% 100%; animation: shimmer 1.1s infinite linear; height: 14px; margin: 10px 0; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* modal generic (app) */
.modal.wide { width: min(94vw, 760px); }
.modal .grid-2 { margin-bottom: 0; }

/* responsive */
@media (max-width: 1080px) {
  .grid-2col, .grid-even { grid-template-columns: 1fr; }
  .app-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .app-shell, .app-shell.collapsed { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(84vw, 286px); z-index: 90; transform: translateX(-105%); transition: transform 200ms cubic-bezier(.2,.7,.2,1); box-shadow: 18px 0 40px rgba(0,0,0,.28); }
  .app-shell.mobile-nav-open .sidebar { transform: translateX(0); }
  .app-shell.mobile-nav-open .nav-overlay { display: block; position: fixed; inset: 0; z-index: 80; border: 0; background: rgba(0,0,0,.46); backdrop-filter: blur(2px); }
  .side-brand-text, .side-user-meta, .app-shell.collapsed .side-brand-text, .app-shell.collapsed .side-user-meta { display: block; }
  .nav-item span.lbl, .app-shell.collapsed .nav-item span.lbl { display: inline; }
  .nav-item, .app-shell.collapsed .nav-item { justify-content: flex-start; padding: 10px; min-height: 44px; }
  .app-shell.collapsed .nav-group-toggle { display: grid; grid-template-columns: 22px 1fr auto 16px; justify-content: initial; padding: 7px 8px; }
  .app-shell.collapsed .nav-group-name, .app-shell.collapsed .nav-group-count, .app-shell.collapsed .nav-chevron { display: initial; }
  .app-shell.collapsed .nav-accordion.open .nav-group-items { display: grid; }
  .content { padding: 16px 14px 40px; }
  .org-chip { display: none; }
  .access-layout { grid-template-columns: 1fr; }
  .access-users { max-height: 230px; }
  .super-admin-banner { grid-template-columns: auto 1fr; padding: 18px; }
  .super-shield { display: none; }
  .dashboard-control-grid { grid-template-columns: 1fr; }
  .dashboard-control-grid > section { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .app-module-grid { grid-template-columns: 1fr; }
  .app-launcher { padding: 14px; }
  .app-launcher-head { align-items: flex-start; }
  .manual-message-strip { align-items: stretch; flex-direction: column; }
  .manual-message-strip > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
  .document-editor { padding: 14px; }
  .document-meta { grid-template-columns: 1fr; gap: 0; }
  .manual-lines-table { min-width: 0; display: block; }
  .manual-lines-table thead { display: none; }
  .manual-lines-table tbody { display: grid; gap: 12px; }
  .manual-lines-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfaf6; }
  .manual-lines-table td { display: grid; gap: 4px; padding: 0; border: 0; min-width: 0; }
  .manual-lines-table td::before { content: attr(data-label); color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
  .manual-lines-table td:first-child { grid-column: 1 / -1; }
  .manual-lines-table td.line-remove { display: flex; grid-column: 1 / -1; justify-content: flex-end; }
  .manual-lines-table td.line-remove::before { display: none; }
  .manual-lines-table .rm { width: auto; min-width: 92px; padding: 0 12px; }
  .manual-lines-table .rm::after { content: ' Remove'; font-size: 12px; font-weight: 700; }
  .document-actions .btn { width: 100%; min-height: 44px; }
}
@media (max-width: 560px) {
  .super-admin-banner { grid-template-columns: 1fr; }
  .super-admin-banner img { width: 60px; height: 60px; }
  .tbl .actions-cell { flex-wrap: wrap; min-width: 210px; }
  .section-title { align-items: flex-start; flex-direction: column; }
  .dashboard-user-strip { grid-template-columns: auto 1fr; }
  .dashboard-user-strip .role-pill { grid-column: 1/-1; justify-self: start; }
  .policy-row { grid-template-columns: minmax(0,1fr) auto auto; padding: 8px 9px; }
  .preview-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   v3 operational surfaces
   Dense, black/gold/white, keyboard and touch friendly.
   ============================================================ */
.compact-kpis { margin-bottom: 16px; }
.audit-note {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  margin: 0 0 16px; padding: 11px 14px; border: 1px solid #e6d496;
  border-left: 4px solid var(--gold); border-radius: 8px; background: #fffbed;
}
.audit-note b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.audit-note span { color: #655f4d; font-size: 12.5px; line-height: 1.5; }
.score-cell { min-width: 170px; display: grid; grid-template-columns: 30px 1fr; gap: 4px 8px; align-items: center; }
.score-cell > b { font-size: 16px; color: var(--gold-strong); }
.score-cell > span { height: 7px; overflow: hidden; border-radius: 999px; background: #ece8da; }
.score-cell > span i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9d7713, var(--gold)); }
.score-cell small { grid-column: 1/-1; color: var(--muted); font-size: 10px; }
.ai-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: 16px; align-items: start; }
.ai-layout > section, .ai-layout > aside { min-height: 520px; }
.ai-layout .manual-lines-table { min-width: 760px; }
.ai-assumptions { margin: 14px 0; padding: 12px 14px; border-radius: 8px; background: #f7f5ef; font-size: 12px; }
.ai-assumptions ul { margin: 6px 0 0 18px; color: var(--muted); }
.provider-help { margin-top: 18px; padding: 14px; border: 1px dashed #c9c3b1; border-radius: 8px; background: #f8f7f3; }
.provider-help b { font-size: 13px; }
.provider-help p { margin: 4px 0 10px; color: var(--muted); font-size: 12px; }
.provider-help code { display: block; padding: 9px 10px; color: #e8c75f; background: #151515; border-radius: 6px; font-size: 11px; line-height: 1.6; }
.statement-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.statement-grid > section, .statement-grid > aside { min-width: 0; }
.statement-grid > .card > .card { box-shadow: none; border-radius: 8px; }
.ledger-explorer { margin-top: 16px; }
.ledger-selectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.statement-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 8px; padding: 10px 12px; border: 1px solid var(--line); background: #fbfaf6; }
.statement-title span { color: var(--gold-strong); font-weight: 800; }
.automation-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(350px, .75fr); gap: 16px; align-items: start; }
.automation-row { min-height: 70px; display: grid; grid-template-columns: minmax(0,1fr) 100px auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fff; }
.automation-row:last-child { border-bottom: 0; }
.automation-row > div { display: grid; gap: 3px; }
.automation-row small, .automation-row > span { color: var(--muted); font-size: 11px; }
.integration-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; margin-bottom: 16px; padding: 22px; border: 1px solid #2b281f; border-radius: 14px; background: linear-gradient(135deg, #0b0b0b, #222018); color: #fff; box-shadow: var(--shadow-2); }
.integration-hero .eyebrow { display: block; margin-bottom: 7px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.integration-hero h2 { font-size: clamp(18px, 2vw, 25px); line-height: 1.2; }
.integration-hero p { max-width: 720px; margin-top: 7px; color: #c9c5b9; font-size: 12px; line-height: 1.6; }
.manual-message-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid #dfd7bc; border-radius: 11px; background: #fffaf0; }
.manual-message-strip > div:first-child { display: grid; gap: 2px; }
.manual-message-strip .eyebrow { color: #8a6819; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.manual-message-strip b { font-size: 13px; }
.manual-message-strip p { color: #6c6453; font-size: 11.5px; max-width: 740px; }
.manual-message-strip > div:last-child { display: flex; gap: 8px; flex-shrink: 0; }
.integration-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 13px; color: #e5e0d4; font-size: 10px; white-space: nowrap; }
.integration-legend span { display: flex; align-items: center; gap: 6px; }
.integration-legend .dot { width: 7px; height: 7px; border-radius: 50%; background: #777; }
.integration-legend .dot.active { background: #20b56c; box-shadow: 0 0 0 3px rgba(32,181,108,.15); }
.integration-legend .dot.configured { background: var(--gold); }
.integration-legend .dot.missing { background: #dc6d5e; }
.integration-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.integration-card { display: flex; flex-direction: column; min-height: 265px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow-1); }
.integration-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.integration-head > div { min-width: 0; display: flex; align-items: center; gap: 11px; }
.integration-head h3 { font-size: 13px; }
.integration-head p { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.provider-mark { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--gold); background: #151515; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.provider-status { display: flex; align-items: center; gap: 7px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line); color: #8a5b0b; font-size: 11px; }
.provider-status span { width: 7px; height: 7px; border-radius: 50%; background: #d49119; }
.provider-status.ready { color: #147347; }
.provider-status.ready span { background: #21a665; }
.provider-status.configured { color: #8a5b0b; }
.provider-status.configured span { background: var(--gold); }
.provider-setup { margin-top: 13px; }
.provider-setup b { display: block; color: var(--ink); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.provider-setup p { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.provider-setup code { display: block; margin-top: 7px; padding: 7px 8px; border: 1px solid #ece2c5; border-radius: 6px; background: #fffbef; color: #6d5114; font-size: 9px; white-space: normal; overflow-wrap: anywhere; }
.provider-actions { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 13px; }
.provider-actions small { margin-left: auto; color: var(--muted); font-size: 9px; text-align: right; }
.integration-history { display: grid; gap: 22px; margin-top: 24px; }
.integration-history code { font-size: 9px; overflow-wrap: anywhere; }
.break-code { overflow-wrap: anywhere; word-break: break-all; }

/* Branded GST invoice: polished on-screen, dependable on paper. */
.gst-print { border-color: #b99125; box-shadow: 0 16px 40px rgba(92,67,10,.16); animation: invoiceEnter .38s ease-out both; }
.gst-print .gst-titlebar { background: linear-gradient(90deg, #16120a, #9b741b, #16120a); color: #fff; border-color: #6b4b08; }
.gst-print .gst-titlebar strong { color: #fff4cc; }
.gst-print .gst-brand { background: linear-gradient(135deg,#fffdf6,#f7edd2); }
.gst-print .gst-qr img { width: 132px; height: 132px; object-fit: contain; padding: 5px; background: #fff; border: 1px solid #d6b451; }
@keyframes invoiceEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media print { .gst-print { box-shadow:none; animation:none; } .gst-print .gst-titlebar { -webkit-print-color-adjust:exact; print-color-adjust:exact; } }

@media (max-width: 1080px) {
  .ai-layout, .statement-grid, .automation-grid { grid-template-columns: 1fr; }
  .ai-layout > section, .ai-layout > aside { min-height: 0; }
}
@media (max-width: 760px) {
  .audit-note { grid-template-columns: 1fr; gap: 3px; }
  .ledger-selectors { grid-template-columns: 1fr; }
  .automation-row { grid-template-columns: minmax(0,1fr) auto; }
  .automation-row > span { grid-row: 2; }
  .automation-row .btn { min-height: 40px; }
  .integration-grid { grid-template-columns: 1fr; }
  .integration-hero { grid-template-columns: 1fr; padding: 17px; }
  .integration-legend { justify-content: flex-start; white-space: normal; }
  .provider-actions { align-items: flex-start; flex-wrap: wrap; }
  .provider-actions small { width: 100%; margin-left: 0; text-align: left; }
}
/* Customer 360: action-first CRM controls. */
.customer-actionbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;align-items:center}
.customer-health{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:11px 14px;margin:0 0 16px;border-left:3px solid var(--gold,#b58b19);background:#fbfaf7;font-size:13px}.customer-health b{text-transform:uppercase;font-size:11px;letter-spacing:.06em}.customer-health-watch{border-color:#c48119}.customer-health-attention{border-color:#bf3c31;background:#fff8f7}.customer-health-healthy{border-color:#2f8f63;background:#f7fbf8}
.document-list{border-top:1px solid var(--line,#e7e1d6)}.document-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line,#e7e1d6)}.document-item span{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.document-item small{color:var(--muted,#777);font-size:12px}@media(max-width:640px){.customer-actionbar .btn{flex:1 1 calc(50% - 4px)}.customer-health{align-items:flex-start}.document-item{align-items:flex-start;flex-direction:column}.document-item>span:last-child{width:100%}}


/***** Customer 360 enhancement cards *****/
.customer-insight-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  padding: 12px 0 4px; margin-bottom: 16px;
}
.customer-insight-strip > span {
  min-width: 0; padding: 12px 14px; border: 1px solid var(--line, #e7e2d9);
  border-radius: 10px; background: var(--card, #fff); display: grid; gap: 4px;
}
.customer-insight-strip b { font-size: 15px; color: var(--ink, #151515); overflow-wrap: anywhere; }
.customer-insight-strip small { color: var(--muted, #68717d); font-size: 11px; }
@media (max-width: 720px) {
  .customer-insight-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-actionbar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .customer-actionbar .btn { white-space: nowrap; flex: 0 0 auto; }
}