/* =====================================================================
   MYLORD — Nigerian Litigation Dashboard
   Palette: Deep Navy #0B192C · Gold #D4AF37 · White #FFFFFF
   Pure CSS, no frameworks.
   ===================================================================== */

:root{
  --navy:        #0B192C;
  --navy-2:      #0E1F38;
  --navy-3:      #132A4A;
  --navy-line:   rgba(212,175,55,.22);
  --gold:        #D4AF37;
  --gold-2:      #E7C75F;
  --gold-soft:   #F7EFD3;
  --gold-tint:   #FBF7E9;
  --white:       #FFFFFF;
  --bg:          #F3F5FA;
  --card:        #FFFFFF;
  --ink:         #101828;
  --muted:       #5B6B82;
  --faint:       #8A97AB;
  --line:        #E5E9F2;
  --green:       #15803D;
  --green-bg:    #E6F5EC;
  --green-bar:   #1FA055;
  --amber:       #B45309;
  --amber-bg:    #FCF0DA;
  --amber-bar:   #E0A11C;
  --red:         #B42318;
  --red-bg:      #FDECEA;
  --red-bar:     #D92D20;
  --shadow:      0 1px 2px rgba(11,25,44,.05), 0 8px 24px rgba(11,25,44,.07);
  --shadow-lg:   0 12px 40px rgba(11,25,44,.18);
  --radius:      14px;
  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif:       'Playfair Display', Georgia, 'Times New Roman', serif;
  --mono:        'JetBrains Mono', 'Courier New', monospace;
  --side-w:      268px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; cursor:pointer; }
a{ cursor:pointer; text-decoration:none; color:inherit; }
svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
::selection{ background:var(--gold); color:var(--navy); }

/* ============ APP SHELL ============ */
.app{ display:flex; min-height:100vh; }

/* ============ SIDEBAR ============ */
.sidebar{
  width:var(--side-w);
  background:linear-gradient(180deg, var(--navy) 0%, #0A1626 100%);
  color:#C7D0DE;
  position:fixed; inset:0 auto 0 0;
  display:flex; flex-direction:column;
  padding:22px 16px;
  z-index:50;
  border-right:1px solid rgba(212,175,55,.14);
}
.brand{ display:flex; align-items:center; gap:12px; padding:4px 8px 18px; border-bottom:1px solid rgba(255,255,255,.07); }
.brand-mark{
  width:42px; height:42px; border-radius:11px;
  background:linear-gradient(145deg, var(--gold) 0%, #B8932B 100%);
  color:var(--navy); display:grid; place-items:center;
  font-size:21px;
  box-shadow:0 4px 14px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.brand-name{ font-family:var(--serif); font-size:21px; font-weight:800; letter-spacing:3px; color:#fff; display:block; line-height:1.1; }
.brand-sub{ font-size:10.5px; letter-spacing:2.2px; text-transform:uppercase; color:var(--gold-2); }

.counsel-card{
  display:flex; align-items:center; gap:11px;
  margin:16px 4px 14px; padding:12px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
}
.counsel-avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--navy-3); border:1.5px solid var(--gold);
  color:var(--gold-2); font-weight:700; font-size:13px;
  display:grid; place-items:center; flex:none;
}
.counsel-meta{ min-width:0; }
.counsel-meta strong{ display:block; color:#fff; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.counsel-meta span{ font-size:10.5px; color:var(--faint); }

.nav{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:3px; }
.nav-label{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(231,199,95,.75); padding:14px 12px 6px; font-weight:600; }
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px;
  color:#AEB9CB; font-size:13.5px; font-weight:500;
  border-left:3px solid transparent;
  transition:.18s; position:relative;
}
.nav-item svg{ width:18px; height:18px; flex:none; opacity:.85; }
.nav-item span{ flex:1; }
.nav-item em{ font-style:normal; font-size:10px; color:var(--faint); white-space:nowrap; }
.nav-item:hover{ background:rgba(255,255,255,.05); color:#fff; }
.nav-item.active{
  background:linear-gradient(90deg, rgba(212,175,55,.16), rgba(212,175,55,.05));
  color:#fff; border-left-color:var(--gold);
}
.nav-item.active svg{ color:var(--gold-2); }
.nav-item.active em{ color:var(--gold-2); }
.danger-dot{ width:8px; height:8px; border-radius:50%; background:var(--red-bar); display:inline-block; box-shadow:0 0 0 3px rgba(217,45,32,.18); }

.sidebar-foot{ border-top:1px solid rgba(255,255,255,.07); padding-top:14px; }
.court-term{ display:flex; justify-content:space-between; align-items:center; padding:0 8px 8px; font-size:11.5px; color:var(--faint); }
.court-term strong{ color:var(--gold-2); font-weight:600; }
.sidebar-foot p{ font-size:10px; color:rgba(255,255,255,.35); padding:0 8px; margin-bottom:10px; }
.sidebar-actions{ display:flex; gap:8px; padding:0 6px; }
.side-action{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 6px; border-radius:9px; font-size:12.5px; font-weight:600; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:rgba(255,255,255,.82);
  transition:.15s; text-decoration:none; }
.side-action:hover{ background:rgba(212,175,55,.14); border-color:rgba(212,175,55,.5); color:var(--gold-2); }
.side-action.side-logout{ color:#f3b6b0; border-color:rgba(217,45,32,.35); }
.side-action.side-logout:hover{ background:rgba(217,45,32,.16); border-color:rgba(217,45,32,.6); color:#ff9d94; }

/* ============ MAIN ============ */
.main{ flex:1; margin-left:var(--side-w); min-width:0; display:flex; flex-direction:column; }

.topbar{
  height:70px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:18px;
  padding:0 30px; position:sticky; top:0; z-index:40;
}
.burger{ display:none; background:none; border:none; color:var(--navy); }
.topbar-date{ display:flex; flex-direction:column; line-height:1.25; }
.topbar-date span{ font-weight:600; font-size:13.5px; color:var(--navy); }
.topbar-date small{ font-size:11px; color:var(--faint); }
.topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.topbar-search{
  display:flex; align-items:center; gap:9px;
  background:var(--bg); border:1px solid var(--line);
  border-radius:10px; padding:8px 12px; width:320px;
  transition:.2s;
}
.topbar-search:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.15); background:#fff; }
.topbar-search svg{ width:15px; height:15px; color:var(--faint); }
.topbar-search input{ border:none; background:none; outline:none; flex:1; font-size:13px; font-family:inherit; }
.topbar-search kbd{ font-family:var(--mono); font-size:10px; color:var(--faint); border:1px solid var(--line); border-radius:5px; padding:1px 5px; background:#fff; }
.icon-btn{
  position:relative; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--navy);
  display:grid; place-items:center; transition:.2s;
}
.icon-btn:hover{ border-color:var(--gold); color:var(--gold); }
.btn-badge{
  position:absolute; top:-5px; right:-5px;
  background:var(--red-bar); color:#fff; font-size:10px; font-weight:700;
  min-width:17px; height:17px; border-radius:9px; padding:0 4px;
  display:grid; place-items:center; border:2px solid #fff;
}
.topbar-avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--navy); color:var(--gold-2);
  display:grid; place-items:center; font-weight:700; font-size:13px;
  border:2px solid var(--gold);
}

.view-root{ padding:28px 30px 60px; max-width:1440px; width:100%; margin:0 auto; }
.view{ display:none; animation:fade .35s ease; }
.view.active{ display:block; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.view-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.view-head h1{ font-family:var(--serif); font-size:27px; font-weight:700; color:var(--navy); letter-spacing:-.3px; }
.view-sub{ color:var(--muted); font-size:13.5px; max-width:760px; margin-top:5px; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:10px; padding:10px 18px;
  font-size:13px; font-weight:600; border:1px solid transparent;
  transition:.18s; white-space:nowrap;
}
.btn svg{ width:15px; height:15px; }
.btn-gold{ background:linear-gradient(145deg, var(--gold) 0%, #C3A030 100%); color:var(--navy); box-shadow:0 3px 12px rgba(212,175,55,.35); }
.btn-gold:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(212,175,55,.45); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn.btn-navy:hover{ background:var(--navy-3); }
.btn-ghost{ background:#fff; border-color:var(--line); color:var(--navy); }
.btn-ghost:hover{ border-color:var(--gold); color:#9a7b1e; }
.btn-sm{ padding:7px 13px; font-size:12px; border-radius:8px; }
.btn-link{ background:none; border:none; color:#9a7b1e; font-weight:600; font-size:12.5px; }
.btn-link:hover{ text-decoration:underline; }

/* ============ PANELS ============ */
.panel{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  margin-bottom:20px;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:17px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.panel-head.tight{ padding:15px 18px; }
.panel-head h2{ font-family:var(--serif); font-size:17px; color:var(--navy); font-weight:700; }
.panel-head p{ font-size:12px; color:var(--faint); margin-top:1px; }
.legend{ display:flex; gap:14px; font-size:11.5px; color:var(--muted); align-items:center; }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:5px; }
.dot-navy{ background:var(--navy); }
.dot-gold{ background:var(--gold); }

/* ============ STATS ============ */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:17px 19px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.stat::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gold); }
.stat.danger::before{ background:var(--red-bar); }
.stat .stat-label{ font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--faint); font-weight:600; }
.stat .stat-num{ font-family:var(--serif); font-size:34px; font-weight:700; color:var(--navy); line-height:1.15; }
.stat .stat-note{ font-size:11.5px; color:var(--muted); }
.stat .stat-ic{ position:absolute; right:14px; top:14px; font-size:20px; opacity:.9; }

/* ============ TIMELINE (48h) ============ */
.timeline{ padding:8px 20px 18px; }
.day-block{ position:relative; padding:14px 0 4px; }
.day-block + .day-block{ border-top:1px dashed var(--line); }
.day-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--navy); background:var(--gold-soft);
  border:1px solid rgba(212,175,55,.4);
  padding:4px 12px; border-radius:20px; margin:10px 0 12px;
}
.tl-item{
  display:grid; grid-template-columns:86px 3px 1fr; gap:0 16px;
  position:relative; padding:6px 0;
}
.tl-time{ text-align:right; padding-top:14px; }
.tl-time strong{ display:block; font-family:var(--mono); font-size:14px; color:var(--navy); font-weight:600; }
.tl-time small{ font-size:10.5px; color:var(--faint); }
.tl-rail{ position:relative; }
.tl-rail::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:2px; background:linear-gradient(var(--gold), rgba(212,175,55,.25)); transform:translateX(-50%); }
.tl-node{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width:12px; height:12px; border-radius:50%;
  background:#fff; border:3px solid var(--gold); z-index:2;
}
.tl-item.adjourned .tl-node{ border-color:var(--amber-bar); background:var(--amber-bg); }
.tl-card{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:13px 16px; margin-bottom:10px;
  display:flex; align-items:center; gap:15px; flex-wrap:wrap;
  transition:.18s;
}
.tl-card:hover{ border-color:rgba(212,175,55,.55); box-shadow:var(--shadow); transform:translateX(2px); }

/* ============ COURT CARDS ============ */
.court-group{ margin-bottom:8px; }
.court-head{
  display:flex; align-items:center; gap:13px;
  padding:16px 20px 12px;
}
.court-badge{
  width:44px; height:44px; border-radius:11px; flex:none;
  display:grid; place-items:center;
  font-family:var(--mono); font-weight:700; font-size:11.5px;
  background:var(--navy); color:var(--gold-2);
  border:1px solid rgba(212,175,55,.35);
}
.court-head h3{ font-family:var(--serif); font-size:16.5px; color:var(--navy); }
.court-head small{ font-size:11.5px; color:var(--faint); display:block; }
.court-head .court-count{ margin-left:auto; font-size:11px; font-weight:700; color:var(--navy); background:var(--gold-soft); border:1px solid rgba(212,175,55,.4); border-radius:20px; padding:3px 12px; }

.cause-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(390px, 1fr)); gap:14px; padding:0 20px 18px; }
.cause-card{
  background:#fff; border:1px solid var(--line); border-radius:13px;
  padding:16px 17px; position:relative;
  transition:.2s; display:flex; flex-direction:column; gap:10px;
  border-top:3px solid var(--navy);
}
.cause-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); border-top-color:var(--gold); }
.cause-card.adjourned{ border-top-color:var(--amber-bar); background:linear-gradient(180deg, #fff, #FFFBF2); }
.cc-top{ display:flex; align-items:center; gap:10px; }
.suit-chip{
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  background:var(--navy); color:var(--gold-2);
  padding:4px 10px; border-radius:6px; letter-spacing:.3px;
}
.cc-time{ margin-left:auto; font-family:var(--mono); font-size:13px; font-weight:600; color:var(--navy); }
.cc-parties{ font-family:var(--serif); font-size:15px; font-weight:700; color:var(--navy); line-height:1.35; }
.cc-session{ font-size:12px; color:var(--muted); font-style:italic; }
.cc-meta{ display:grid; grid-template-columns:1fr 1fr; gap:7px 14px; border-top:1px dashed var(--line); padding-top:10px; }
.cc-meta div{ display:flex; gap:7px; align-items:flex-start; font-size:12px; color:var(--muted); min-width:0; }
.cc-meta b{ color:var(--ink); font-weight:600; display:block; font-size:12px; white-space:normal; }
.cc-meta .ic{ flex:none; font-size:12px; line-height:1.5; }
.cc-foot{ display:flex; align-items:center; gap:10px; margin-top:2px; }
.status-pill{
  font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  padding:4px 11px; border-radius:20px;
}
.pill-sitting{ background:var(--navy); color:#fff; }
.pill-adj{ background:var(--amber-bg); color:var(--amber); border:1px solid rgba(224,161,28,.35); }
.pill-crit{ background:var(--red-bg); color:var(--red); border:1px solid rgba(217,45,32,.3); }
.cc-foot .btn{ margin-left:auto; }
.adj-detail{
  font-size:11.5px; color:var(--amber); background:var(--amber-bg);
  border-radius:8px; padding:8px 11px; border-left:3px solid var(--amber-bar);
}

/* date pills */
.date-pills{ display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.date-pill{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:10px 18px; text-align:left; transition:.18s; min-width:128px;
  box-shadow:var(--shadow);
}
.date-pill strong{ display:block; font-size:13px; color:var(--navy); }
.date-pill small{ font-size:11px; color:var(--faint); }
.date-pill.active{ background:var(--navy); border-color:var(--navy); }
.date-pill.active strong{ color:var(--gold-2); }
.date-pill.active small{ color:rgba(255,255,255,.6); }
.date-pill .pill-count{ float:right; font-size:10px; background:var(--gold-soft); color:var(--navy); border-radius:10px; padding:1px 8px; font-weight:700; margin-top:2px; }
.date-pill.active .pill-count{ background:rgba(212,175,55,.25); color:var(--gold-2); }

.empty{ text-align:center; padding:44px 20px; color:var(--faint); }
.empty .ic{ font-size:32px; display:block; margin-bottom:8px; }

/* ============ DEADLINES ============ */
.status-bar{ display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; align-items:center; }
.status-chip{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:11px;
  padding:9px 15px; box-shadow:var(--shadow);
}
.status-chip i{ width:11px; height:11px; border-radius:50%; }
.status-chip strong{ display:block; font-size:12.5px; color:var(--navy); }
.status-chip span{ font-size:10.5px; color:var(--faint); }
.status-green i{ background:var(--green-bar); box-shadow:0 0 0 3px var(--green-bg); }
.status-amber i{ background:var(--amber-bar); box-shadow:0 0 0 3px var(--amber-bg); }
.status-red i{ background:var(--red-bar); box-shadow:0 0 0 3px var(--red-bg); }
.filter-chips{ margin-left:auto; display:flex; gap:7px; }
.chip{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:6px 15px; font-size:12px; font-weight:600; color:var(--muted); transition:.15s;
}
.chip:hover{ border-color:var(--gold); }
.chip.active{ background:var(--navy); color:var(--gold-2); border-color:var(--navy); }

.matter-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden; }
.matter-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:15px 20px; background:linear-gradient(90deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff;
}
.matter-head .suit-chip{ background:rgba(212,175,55,.15); color:var(--gold-2); border:1px solid rgba(212,175,55,.3); }
.matter-head h3{ font-family:var(--serif); font-size:15.5px; font-weight:700; flex:1; min-width:220px; }
.matter-head small{ font-size:11px; color:rgba(255,255,255,.6); }

.task-row{
  display:grid; grid-template-columns:1fr 300px 190px 120px; gap:18px; align-items:center;
  padding:15px 20px; border-bottom:1px solid var(--line);
}
.task-row:last-child{ border-bottom:none; }
.task-info strong{ display:block; font-size:13.5px; color:var(--navy); }
.task-info small{ font-size:11px; color:var(--faint); display:block; margin-top:2px; line-height:1.45; }
.task-dates{ font-size:11.5px; color:var(--muted); }
.task-dates b{ display:block; color:var(--ink); font-size:12px; }
.task-dates .due{ font-family:var(--mono); color:var(--navy); }
.progress-wrap{ }
.progress-meta{ display:flex; justify-content:space-between; font-size:11px; margin-bottom:5px; }
.progress-meta span{ color:var(--faint); }
.progress-meta b{ font-family:var(--mono); }
.progress{ height:9px; border-radius:6px; background:#EEF1F7; overflow:hidden; }
.progress i{ display:block; height:100%; border-radius:6px; transition:width 1s ease; }
.pg-green i{ background:linear-gradient(90deg, #2BB673, var(--green-bar)); }
.pg-amber i{ background:linear-gradient(90deg, #F0B93E, var(--amber-bar)); }
.pg-red i{ background:linear-gradient(90deg, #EF5B52, var(--red-bar)); }
.countdown{ text-align:right; }
.countdown .num{ font-family:var(--serif); font-size:27px; font-weight:800; line-height:1; }
.countdown .lbl{ font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--faint); font-weight:600; }
.cd-green .num{ color:var(--green); }
.cd-amber .num{ color:var(--amber); }
.cd-red .num{ color:var(--red); }
.barred-stamp{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:1.5px;
  color:var(--red); border:2px solid var(--red); border-radius:5px;
  padding:2px 8px; margin-top:5px; transform:rotate(-3deg); text-transform:uppercase;
}

.mini-deadlines{ padding:8px 20px 16px; display:flex; flex-direction:column; }
.mini-d{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px dashed var(--line); font-size:12.5px; }
.mini-d:last-child{ border-bottom:none; }
.mini-d .m-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.mini-d b{ color:var(--navy); font-weight:600; }
.mini-d small{ color:var(--faint); display:block; font-size:11px; }
.mini-d .m-right{ margin-left:auto; text-align:right; font-family:var(--mono); font-size:12px; font-weight:700; }

.dash-cols{ display:grid; grid-template-columns:1.2fr 1fr; gap:20px; }
.dash-cols .panel{ margin-bottom:0; }
.quick-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px 20px 20px; }
.quick{
  background:var(--bg); border:1px solid var(--line); border-radius:12px;
  padding:15px; text-align:left; transition:.18s;
}
.quick:hover{ border-color:var(--gold); background:var(--gold-tint); transform:translateY(-2px); }
.quick-ic{ font-size:20px; }
.quick strong{ display:block; color:var(--navy); font-size:13px; margin:6px 0 2px; }
.quick small{ color:var(--faint); font-size:11px; }

/* ============ PRECEDENT ENGINE ============ */
.precedent-grid{
  display:grid;
  grid-template-columns:280px 340px 1fr;
  gap:18px; align-items:start;
}
.precedent-grid .panel{ margin-bottom:0; }
.tpl-list{ padding:6px 14px 14px; display:flex; flex-direction:column; gap:8px; }
.tpl-item{
  display:flex; gap:11px; align-items:flex-start;
  border:1px solid var(--line); border-radius:11px; padding:12px 13px;
  cursor:pointer; transition:.16s; position:relative;
}
.tpl-item:hover{ border-color:rgba(212,175,55,.6); }
.tpl-item input{ position:absolute; opacity:0; }
.tpl-check{
  width:19px; height:19px; border-radius:5px; border:2px solid #C4CDDB; flex:none;
  margin-top:1px; display:grid; place-items:center; transition:.15s;
}
.tpl-check::after{ content:'✓'; color:#fff; font-size:12px; font-weight:800; opacity:0; transform:scale(.5); transition:.15s; }
.tpl-item input:checked + .tpl-check{ background:var(--navy); border-color:var(--navy); }
.tpl-item input:checked + .tpl-check::after{ opacity:1; transform:scale(1); }
.tpl-item input:checked ~ .tpl-body strong{ color:var(--navy); }
.tpl-body strong{ font-size:12.5px; color:var(--ink); display:block; line-height:1.35; }
.tpl-body small{ font-size:11px; color:var(--faint); line-height:1.4; display:block; margin-top:2px; }
.tpl-note{ margin:6px 14px 16px; background:var(--gold-tint); border:1px solid rgba(212,175,55,.35); border-left:3px solid var(--gold); border-radius:8px; padding:11px 13px; }
.tpl-note strong{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#8a6d1b; }
.tpl-note p{ font-size:11.5px; color:var(--muted); margin-top:3px; }

.form-grid{ padding:16px 18px; display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field.span-2{ grid-column:span 2; }
.field > span{ font-size:11px; font-weight:600; letter-spacing:.4px; color:var(--muted); text-transform:uppercase; }
.field input, .field select, .field textarea{
  font-family:inherit; font-size:13px; color:var(--ink);
  border:1px solid var(--line); border-radius:9px; padding:9px 12px;
  background:#FCFDFE; outline:none; transition:.15s; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.14); background:#fff;
}
.field textarea{ resize:vertical; }
.check-field{ flex-direction:row; align-items:center; gap:9px; }
.check-field input{ width:16px; height:16px; accent-color:var(--navy); }
.check-field span{ font-size:12px; color:var(--muted); text-transform:none; font-weight:500; }
.form-actions{ display:flex; gap:10px; padding:0 18px 18px; }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }

.preview-pill{ font-size:10.5px; font-weight:700; color:var(--green); background:var(--green-bg); padding:4px 11px; border-radius:20px; display:inline-flex; align-items:center; gap:6px; }
.preview-pill i{ width:7px; height:7px; border-radius:50%; background:var(--green-bar); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.paper-scroll{ max-height:calc(100vh - 230px); overflow-y:auto; padding:18px; background:repeating-linear-gradient(45deg, #F7F8FB, #F7F8FB 12px, #F4F6FA 12px, #F4F6FA 24px); border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius); }
.paper{
  background:#fff; border-radius:6px; padding:46px 52px;
  box-shadow:0 4px 20px rgba(11,25,44,.14);
  font-family:var(--serif); color:#14203A; font-size:13.5px; line-height:1.75;
  min-height:500px;
}
.doc-section + .doc-section{ margin-top:34px; padding-top:26px; border-top:2px double var(--gold); }
.doc-court{ text-align:center; margin-bottom:18px; }
.doc-court .dc-line{ font-weight:800; font-size:15px; letter-spacing:.6px; text-transform:uppercase; line-height:1.7; }
.doc-rules{ text-align:center; font-family:var(--font); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:14px; }
.doc-between{ margin:16px 0 8px; font-weight:800; letter-spacing:2px; text-align:center; font-size:13px; }
.doc-parties{ margin:0 auto; max-width:430px; line-height:2; }
.doc-parties .p-row{ display:grid; grid-template-columns:1fr auto; gap:14px; align-items:baseline; }
.doc-parties .p-name{ font-weight:800; text-transform:uppercase; font-size:12.5px; }
.doc-parties .p-role{ font-family:var(--font); font-size:10.5px; font-weight:700; letter-spacing:1px; color:var(--muted); text-transform:uppercase; white-space:nowrap; }
.doc-parties .p-and{ text-align:center; font-weight:800; letter-spacing:3px; margin:4px 0; }
.doc-suit{ text-align:center; font-weight:800; font-family:var(--mono); font-size:13px; margin:14px 0 4px; border-top:1px solid var(--navy); border-bottom:1px solid var(--navy); padding:7px 0; }
.doc-title{ text-align:center; font-weight:800; font-size:15px; letter-spacing:1.5px; text-transform:uppercase; margin:22px 0 16px; color:var(--navy); }
.doc-body p{ margin-bottom:10px; }
.doc-body .para{ text-indent:2.2em; text-align:justify; }
.doc-order{ font-family:var(--font); font-size:12px; }
.doc-order ol{ padding-left:22px; }
.doc-order li{ margin-bottom:7px; }
.doc-issues li{ margin-bottom:8px; text-align:justify; }
.doc-h{ font-weight:800; text-transform:uppercase; letter-spacing:1px; font-size:13px; color:var(--navy); margin:16px 0 8px; }
.doc-h .num{ color:var(--gold); }
.doc-sign{ margin-top:30px; }
.doc-sign .sig-line{ border-top:1px solid var(--navy); width:230px; margin-top:38px; padding-top:5px; font-family:var(--font); font-size:11.5px; }
.doc-witness{ font-family:var(--font); font-size:11.5px; color:var(--muted); margin-top:16px; }
.doc-taken{ font-style:italic; font-family:var(--font); font-size:11.5px; }

/* ============ CITATIONS ============ */
.search-hero{ padding:20px; }
.seg{ display:inline-flex; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:4px; gap:2px; margin-bottom:14px; }
.seg-btn{ border:none; background:none; padding:8px 18px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--muted); transition:.15s; }
.seg-btn.active{ background:var(--navy); color:var(--gold-2); box-shadow:var(--shadow); }
.big-search{
  display:flex; align-items:center; gap:13px;
  border:2px solid var(--line); border-radius:13px; padding:4px 16px;
  transition:.2s; background:#fff;
}
.big-search:focus-within{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(212,175,55,.13); }
.big-search svg{ width:21px; height:21px; color:var(--gold); flex:none; }
.big-search input{ flex:1; border:none; outline:none; font-size:15px; padding:14px 0; font-family:inherit; color:var(--navy); }
.search-hint{ font-size:12px; color:var(--faint); margin-top:10px; }
.search-hint strong{ color:var(--navy); }
.results-meta{ font-size:12px; color:var(--faint); margin:4px 2px 14px; }

.cite-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:14px; overflow:hidden; transition:.2s;
}
.cite-card:hover{ border-color:rgba(212,175,55,.5); }
.cite-top{ padding:17px 20px 14px; display:flex; gap:16px; align-items:flex-start; cursor:pointer; }
.cite-year{
  flex:none; width:54px; text-align:center;
  background:var(--navy); color:var(--gold-2); border-radius:9px; padding:8px 0;
}
.cite-year b{ font-family:var(--serif); font-size:19px; display:block; line-height:1.1; }
.cite-year small{ font-size:9px; letter-spacing:1.5px; opacity:.75; }
.cite-main{ flex:1; min-width:0; }
.cite-title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cite-title{ font-family:var(--serif); font-size:16px; font-weight:700; color:var(--navy); line-height:1.3; }
.locus-star{ font-size:10.5px; font-weight:800; letter-spacing:.8px; background:var(--gold-soft); color:#8a6d1b; border:1px solid rgba(212,175,55,.5); border-radius:20px; padding:3px 10px; text-transform:uppercase; }
.cite-cite{ font-family:var(--mono); font-size:12px; color:var(--navy); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:3px 10px; display:inline-block; margin-top:7px; }
.cite-court{ font-size:11.5px; color:var(--faint); margin-top:6px; }
.cite-chev{ flex:none; width:30px; height:30px; border-radius:8px; border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); transition:.25s; margin-top:2px; }
.cite-chev svg{ width:15px; height:15px; }
.cite-card.open .cite-chev{ transform:rotate(180deg); background:var(--navy); color:var(--gold-2); border-color:var(--navy); }
.cite-held{
  max-height:0; overflow:hidden; transition:max-height .4s ease;
  border-top:0px solid var(--line);
}
.cite-card.open .cite-held{ max-height:600px; border-top:1px dashed var(--line); }
.held-inner{ padding:16px 20px 18px 90px; background:linear-gradient(180deg, #FBFAF6, #fff); }
.held-label{ font-size:10.5px; font-weight:800; letter-spacing:1.8px; color:var(--gold); text-transform:uppercase; margin-bottom:7px; }
.held-text{ font-family:var(--serif); font-size:14px; line-height:1.75; color:#24304A; text-align:justify; }
.held-text mark{ background:var(--gold-soft); color:var(--navy); padding:0 3px; border-radius:3px; }
.cite-tags{ margin-top:11px; display:flex; gap:7px; flex-wrap:wrap; }
.cite-tag{ font-size:10.5px; font-family:var(--mono); color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:20px; padding:2px 10px; }

/* ============ MODAL ============ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(11,25,44,.62);
  backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center;
  z-index:100; padding:20px;
}
.modal-overlay.open{ display:flex; animation:fade .2s; }
.modal{
  background:#fff; border-radius:16px; width:100%; max-width:560px;
  box-shadow:var(--shadow-lg); animation:pop .25s ease;
  border-top:4px solid var(--gold);
  max-height:92vh; overflow-y:auto;
}
@keyframes pop{ from{ opacity:0; transform:scale(.96) translateY(10px); } to{ opacity:1; transform:none; } }
.modal-head{ display:flex; justify-content:space-between; gap:14px; padding:20px 24px 14px; border-bottom:1px solid var(--line); }
.modal-head h3{ font-family:var(--serif); font-size:19px; color:var(--navy); }
.modal-head p{ font-size:12px; color:var(--muted); margin-top:3px; line-height:1.5; }
.modal-close{ background:none; border:none; font-size:15px; color:var(--faint); width:32px; height:32px; border-radius:8px; }
.modal-close:hover{ background:var(--bg); color:var(--navy); }
.modal-body{ padding:20px 24px 24px; display:flex; flex-direction:column; gap:15px; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }

/* ============ TOAST ============ */
.toast-wrap{ position:fixed; bottom:24px; right:24px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.toast{
  background:var(--navy); color:#fff; border-left:4px solid var(--gold);
  border-radius:10px; padding:13px 18px; font-size:13px;
  box-shadow:var(--shadow-lg); animation:slideIn .3s ease;
  max-width:360px; display:flex; gap:10px; align-items:flex-start;
}
.toast .t-ic{ font-size:16px; }
.toast.gold{ background:linear-gradient(145deg, #13284A, var(--navy)); }
@keyframes slideIn{ from{ opacity:0; transform:translateX(30px); } to{ opacity:1; transform:none; } }

/* ============ RESPONSIVE ============ */
@media (max-width: 1280px){
  .precedent-grid{ grid-template-columns:260px 320px 1fr; }
  .task-row{ grid-template-columns:1fr 240px 160px 105px; gap:14px; }
  .held-inner{ padding-left:20px; }
}
@media (max-width: 1080px){
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .dash-cols{ grid-template-columns:1fr; }
  .precedent-grid{ grid-template-columns:1fr; }
  .paper-scroll{ max-height:none; }
  .topbar-search{ width:200px; }
  .task-row{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 860px){
  .sidebar{ transform:translateX(-100%); transition:.25s; box-shadow:var(--shadow-lg); }
  .sidebar.open{ transform:none; }
  .main{ margin-left:0; }
  .burger{ display:grid; place-items:center; }
  .topbar-search{ display:none; }
  .cause-grid{ grid-template-columns:1fr; }
  .view-root{ padding:20px 16px 50px; }
  .task-row{ grid-template-columns:1fr; gap:12px; }
  .countdown{ text-align:left; }
}

/* =====================================================================
   v2 — AUTH, MULTI-TENANCY, BRANDING, PROFILE, TEAM, BILLING, SUPERADMIN
   ===================================================================== */

/* ---------- generic nav emoji icon ---------- */
.nav-item .nav-ic{ font-size:15px; width:18px; text-align:center; flex:none; display:inline-block; }
.nav-item em{ flex:none; }
.nav-item .danger-dot{ margin-left:auto; }
/* avatar images */
.counsel-avatar img, .topbar-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }

/* ---------- LOGIN ---------- */
.login-screen{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:
    radial-gradient(1100px 500px at 80% -10%, rgba(212,175,55,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(212,175,55,.10), transparent 55%),
    linear-gradient(160deg, #081222 0%, #0B192C 55%, #0E1F38 100%);
  padding:40px 20px;
}
.login-card{
  display:grid; grid-template-columns:1.05fr .95fr;
  width:min(980px, 96vw); border-radius:20px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45); border:1px solid rgba(212,175,55,.25);
  background:#fff; min-height:560px;
}
.login-left{
  background:linear-gradient(165deg, #0B192C 0%, #0E1F38 100%);
  color:#E9EEF6; padding:44px 42px; display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.login-left::after{ content:'⚖'; position:absolute; right:-30px; bottom:-60px; font-size:240px; opacity:.05; }
.login-left .brand{ padding:0; border:none; margin-bottom:34px; }
.login-left h1{ font-family:var(--serif); font-size:31px; line-height:1.25; font-weight:800; color:#fff; }
.login-left h1 em{ color:var(--gold-2); font-style:normal; }
.login-left>p{ color:#AEB9CB; font-size:13.5px; margin:16px 0 24px; line-height:1.7; max-width:380px; }
.login-points{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:28px; }
.login-points li{ display:flex; gap:11px; align-items:center; font-size:13px; color:#D6DEEA; }
.login-badge{ margin-top:auto; font-size:11.5px; color:var(--gold-2); border:1px solid rgba(212,175,55,.35);
  background:rgba(212,175,55,.08); border-radius:10px; padding:10px 14px; text-align:center; }
.login-right{ padding:44px 42px; display:flex; flex-direction:column; justify-content:center; }
.login-right h2{ font-family:var(--serif); font-size:25px; color:var(--navy); }
.login-sub{ color:var(--faint); font-size:12.5px; margin:6px 0 22px; }
#loginForm{ display:flex; flex-direction:column; gap:14px; }
.login-row{ display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.check-field.mini{ flex-direction:row; gap:8px; }
.check-field.mini input{ accent-color:var(--navy); width:15px; height:15px; }
.check-field.mini span{ font-size:12px; color:var(--muted); }
.btn-block{ width:100%; justify-content:center; padding:12px; font-size:14px; }
.login-error{ color:var(--red); font-size:12.5px; min-height:18px; margin-top:10px; font-weight:600; }
.demo-accounts{ margin-top:18px; border-top:1px dashed var(--line); padding-top:16px; }
.da-head{ display:flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--faint); font-weight:700; margin-bottom:11px; text-align:center; }
.da-head span{ flex:1; height:1px; background:var(--line); }
.da-list{ display:grid; gap:8px; }
.da-item{ display:flex; gap:11px; align-items:center; text-align:left; background:var(--bg);
  border:1px solid var(--line); border-radius:10px; padding:9px 12px; transition:.15s; }
.da-item:hover{ border-color:var(--gold); background:var(--gold-tint); transform:translateY(-1px); }
.da-ic{ font-size:17px; }
.da-item strong{ display:block; font-size:11.5px; color:var(--navy); letter-spacing:.4px; }
.da-item small{ font-size:10.5px; color:var(--faint); line-height:1.5; }
.login-foot{ color:rgba(255,255,255,.5); font-size:11.5px; margin-top:22px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px; }
.login-foot .foot-home{ color:var(--gold-2); font-weight:600; font-size:12.5px; transition:.15s; }
.login-foot .foot-home:hover{ color:#fff; text-decoration:underline; }
#loginBrand, #sideBrand{ cursor:pointer; }

/* ---------- topbar user ---------- */
.topbar-user{ display:flex; align-items:center; gap:9px; background:none; border:1px solid var(--line);
  border-radius:10px; padding:5px 10px 5px 5px; transition:.15s; }
.topbar-user:hover{ border-color:var(--gold); }
.topbar-uname{ font-size:12.5px; font-weight:600; color:var(--navy); }
.topbar-user .caret{ width:13px; height:13px; color:var(--faint); }
.topbar-user-wrap{ position:relative; }
.user-menu{
  position:absolute; top:calc(100% + 10px); right:0; width:250px; background:#fff;
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
  padding:8px; display:none; z-index:120;
}
.user-menu.open{ display:block; animation:fade .18s; }
.user-menu a{ display:flex; gap:10px; align-items:center; padding:9px 11px; border-radius:8px;
  font-size:13px; color:var(--ink); font-weight:500; cursor:pointer; }
.user-menu a:hover{ background:var(--gold-tint); }
.user-menu hr{ border:none; border-top:1px solid var(--line); margin:6px 4px; }
.um-head{ padding:8px 11px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.um-head strong{ display:block; font-size:13px; color:var(--navy); }
.um-head span{ font-size:11px; color:var(--faint); }

/* ---------- avatars with images ---------- */
.counsel-avatar.has-img, .topbar-avatar.has-img, .team-avatar img,
.profile-card .pc-passport img, .upload-preview img, .bp-brand .brand-mark.has-img img, .brand-mark.has-img img{
  overflow:hidden;
}
.counsel-avatar.has-img img, .topbar-avatar.has-img img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.brand-mark.has-img{ padding:0; background:var(--navy-3); }
.brand-mark.has-img img{ width:100%; height:100%; object-fit:contain; border-radius:11px; padding:3px; }

/* ---------- BRANDING ---------- */
.brand-grid{ display:grid; grid-template-columns:1.2fr .9fr; gap:18px; align-items:start; }
.upload-row{ display:flex; gap:16px; padding:6px 18px 16px; }
.upload-tile{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.upload-preview{
  width:128px; height:128px; border-radius:14px; border:2px dashed var(--line);
  display:grid; place-items:center; background:var(--bg); color:var(--faint); font-size:34px;
  overflow:hidden;
}
.upload-preview img{ width:100%; height:100%; object-fit:contain; background:#fff; }
.upload-preview.fav{ width:72px; height:72px; border-radius:12px; }
.upload-preview.fav img{ object-fit:cover; }
.color-row{ display:flex; gap:16px; align-items:flex-end; padding:6px 18px 18px; flex-wrap:wrap; }
.color-field{ display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; }
.color-field input{ width:64px; height:40px; border:1px solid var(--line); border-radius:9px; padding:3px; background:#fff; cursor:pointer; }
.save-note{ font-size:12px; color:var(--green); font-weight:600; align-self:center; }
.bp-sidebar{ margin:16px 18px; border-radius:12px; padding:18px;
  background:var(--bp-navy, var(--navy)); color:#fff; }
.bp-brand{ display:flex; gap:12px; align-items:center; margin-bottom:18px; }
.bp-brand .brand-mark{ width:40px; height:40px; background:var(--bp-gold, var(--gold)); color:var(--bp-navy, var(--navy));
  display:grid; place-items:center; border-radius:10px; font-size:20px; font-weight:800; }
.bp-brand strong{ display:block; font-family:var(--serif); letter-spacing:1px; font-size:15px; color:#fff; }
.bp-brand small{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--bp-gold, var(--gold-2)); }
.bp-nav{ display:flex; flex-direction:column; gap:8px; }
.bp-nav span{ height:9px; border-radius:5px; background:rgba(255,255,255,.12); }
.bp-nav span:first-child{ background:var(--bp-gold, var(--gold)); width:65%; }
.bp-nav span:nth-child(2){ width:85%; } .bp-nav span:nth-child(3){ width:50%; } .bp-nav span:nth-child(4){ width:72%; }
.bp-seal{ margin:0 18px 18px; border:2px solid var(--gold); border-radius:12px; padding:16px; text-align:center;
  background:var(--gold-tint); }
.bp-seal span{ font-family:var(--serif); font-weight:800; color:var(--navy); font-size:16px; display:block; }
.bp-seal small{ font-size:10.5px; color:var(--muted); }

/* ---------- PROFILE ---------- */
.profile-grid{ display:grid; grid-template-columns:320px 1fr; gap:18px; align-items:start; }
.profile-card{ text-align:center; overflow:hidden; }
.pc-banner{ height:96px; background:linear-gradient(120deg, var(--navy) 0%, var(--navy-3) 100%);
  border-bottom:3px solid var(--gold); position:relative; }
.pc-passport{
  width:118px; height:118px; border-radius:50%; margin:-59px auto 12px;
  border:4px solid #fff; background:var(--navy); color:var(--gold-2);
  display:grid; place-items:center; font-family:var(--serif); font-size:38px; font-weight:800;
  overflow:hidden; box-shadow:var(--shadow);
}
.pc-passport img{ width:100%; height:100%; object-fit:cover; }
.profile-card h3{ font-family:var(--serif); font-size:19px; color:var(--navy); padding:0 16px; }
.pc-designation{ color:var(--muted); font-size:12.5px; margin:3px 0 12px; padding:0 16px; }
.pc-meta{ border-top:1px solid var(--line); margin-top:18px; text-align:left; }
.pc-meta div{ display:flex; justify-content:space-between; gap:12px; padding:11px 18px; border-bottom:1px solid var(--line); font-size:12.5px; }
.pc-meta span{ color:var(--faint); } .pc-meta b{ color:var(--ink); text-align:right; word-break:break-word; }

/* ---------- TEAM ---------- */
.seat-bar{ padding:16px 20px; }
.seat-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:8px; }
.seat-head strong{ font-family:var(--serif); color:var(--navy); font-size:15px; }
.seat-head span{ display:block; font-size:12px; color:var(--faint); font-weight:400; }
.team-list{ padding:6px 12px 12px; }
.team-row{ display:flex; align-items:center; gap:14px; padding:13px 10px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.team-row:last-child{ border-bottom:none; }
.team-avatar{ width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--gold-2);
  display:grid; place-items:center; font-weight:700; font-size:14px; flex:none; overflow:hidden; }
.team-avatar img{ width:100%; height:100%; object-fit:cover; }
.team-who{ flex:1; min-width:200px; }
.team-who strong{ display:block; color:var(--navy); font-size:14px; }
.team-who span{ font-size:12px; color:var(--muted); }
.team-who small{ display:block; font-size:11px; color:var(--faint); }
.role-tag{ font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  padding:4px 11px; border-radius:20px; }
.role-tag.admin{ background:var(--gold-soft); color:#8a6d1b; border:1px solid rgba(212,175,55,.45); }
.role-tag.staff{ background:var(--navy); color:var(--gold-2); }

/* ---------- BILLING ---------- */
.billing-status{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 24px; flex-wrap:wrap;
  background:linear-gradient(100deg, var(--navy) 0%, var(--navy-2) 100%); border:none; }
.billing-status .bs-plan{ font-family:var(--serif); font-size:19px; color:#fff; font-weight:700; margin-right:12px; }
.billing-status p{ color:rgba(255,255,255,.72); font-size:12.5px; margin-top:9px; max-width:560px; }
.billing-status p strong{ color:var(--gold-2); }
.bs-amount{ text-align:right; }
.bs-amount small{ display:block; color:rgba(255,255,255,.6); font-size:11px; text-transform:uppercase; letter-spacing:1px; }
.bs-amount strong{ font-family:var(--serif); font-size:30px; color:var(--gold-2); }
.billing-toggle{ display:flex; justify-content:center; margin:4px 0 18px; }
.billing-toggle .seg-btn em{ font-style:normal; font-size:10px; color:var(--green); font-weight:700; display:block; }
.plans-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.plan-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px;
  box-shadow:var(--shadow); position:relative; display:flex; flex-direction:column; }
.plan-card.featured{ border:2px solid var(--gold); box-shadow:0 14px 40px rgba(212,175,55,.22); transform:translateY(-4px); }
.plan-card.current{ border-color:var(--navy); }
.plan-flag{ position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(145deg,var(--gold),#C3A030); color:var(--navy); font-size:10.5px; font-weight:800;
  letter-spacing:.8px; text-transform:uppercase; padding:4px 14px; border-radius:20px; }
.plan-current-badge{ position:absolute; top:14px; right:14px; font-size:9.5px; font-weight:800; letter-spacing:.8px;
  text-transform:uppercase; background:var(--navy); color:var(--gold-2); padding:3px 10px; border-radius:20px; }
.plan-card h3{ font-family:var(--serif); font-size:20px; color:var(--navy); }
.plan-tag{ font-size:12px; color:var(--faint); min-height:34px; margin:4px 0 14px; }
.plan-price .amt{ font-family:var(--serif); font-size:32px; font-weight:800; color:var(--navy); }
.plan-price .per{ font-size:12.5px; color:var(--faint); }
.plan-save{ display:block; color:var(--green); font-size:11px; font-weight:600; margin:6px 0 14px; min-height:16px; }
.plan-feats{ list-style:none; display:flex; flex-direction:column; gap:9px; margin:0 0 20px; font-size:12.5px; color:var(--muted); }
.plan-feats li{ display:flex; gap:8px; }
.plan-feats li::before{ content:''; }
.plan-card .btn{ margin-top:auto; }
.plan-card button:disabled{ opacity:.7; cursor:default; }

.txn-table-wrap{ overflow-x:auto; }
.txn-table{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:720px; }
.txn-table th{ text-align:left; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--faint);
  padding:12px 18px; border-bottom:1px solid var(--line); background:var(--bg); }
.txn-table td{ padding:13px 18px; border-bottom:1px solid var(--line); vertical-align:middle; }
.txn-table tr:last-child td{ border-bottom:none; }
.txn-table .mono{ font-family:var(--mono); font-size:11.5px; color:var(--navy); font-weight:600; }
.txn-table small{ color:var(--faint); }
.t-pill{ font-size:10.5px; font-weight:700; padding:4px 11px; border-radius:20px; text-transform:capitalize; }
.t-pill.ok{ background:var(--green-bg); color:var(--green); }
.t-pill.bad{ background:var(--red-bg); color:var(--red); }
.t-pill.warn{ background:var(--amber-bg); color:var(--amber); }
.mini-select{ border:1px solid var(--line); border-radius:7px; padding:5px 8px; font-size:12px;
  font-family:inherit; background:#fff; color:var(--navy); }

/* ---------- pay modal ---------- */
.pay-box{ background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:6px 16px; }
.pay-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px dashed var(--line); font-size:13px; color:var(--muted); }
.pay-row strong{ color:var(--navy); }
.pay-row.total{ border-bottom:none; }
.pay-row.total strong{ font-family:var(--serif); font-size:22px; color:var(--navy); }
.pay-secure{ text-align:center; font-size:11.5px; color:var(--faint); padding:10px 0 4px; }
.pay-secure b{ color:#0EA5E9; }

/* ---------- superadmin ---------- */
.tenants-table .status-pill{ margin-left:8px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .brand-grid, .profile-grid{ grid-template-columns:1fr; }
  .plans-grid{ grid-template-columns:1fr; }
  .plan-card.featured{ transform:none; }
}
@media (max-width: 860px){
  .login-card{ grid-template-columns:1fr; }
  .login-left{ display:none; }
  .topbar-uname{ display:none; }
  .user-menu{ right:12px; }
}

/* =====================================================================
   v2.1 — REGISTRATION, SUPERADMIN INTEGRATIONS, CHARTS, SUPPORT FAB
   ===================================================================== */

/* ---------- auth mode switch ---------- */
.auth-switch{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:16px; }
.auth-switch a{ color:#9a7b1e; font-weight:700; cursor:pointer; }
.auth-switch a:hover{ text-decoration:underline; }
.register-form{ display:flex; flex-direction:column; gap:12px; }
.check-field.mini.terms{ align-items:flex-start; }
.check-field.mini.terms span{ text-transform:none; font-size:11.5px; color:var(--muted); font-weight:400; line-height:1.5; }

/* ---------- superadmin quick actions ---------- */
.sa-quick{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:14px; margin-bottom:20px; }
.sa-quick .quick{ background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:12px; }

/* ---------- revenue chart ---------- */
.chart-wrap{ padding:22px 24px 12px; display:flex; align-items:flex-end; gap:18px; height:260px; }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:9px; height:100%; justify-content:flex-end; }
.bar-val{ font-size:11px; font-weight:700; color:var(--navy); font-family:var(--mono); }
.bar{ width:min(58px,70%); background:linear-gradient(180deg, var(--gold-2), var(--gold)); border-radius:8px 8px 3px 3px;
  min-height:4px; transition:height .8s cubic-bezier(.2,.8,.2,1); position:relative; }
.bar.zero{ background:var(--line); }
.bar-lbl{ font-size:11px; color:var(--faint); font-weight:600; letter-spacing:.5px; text-transform:uppercase; }

/* ---------- plans manager ---------- */
.plans-manage{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.plan-admin{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow); position:relative; display:flex; flex-direction:column; gap:10px; }
.plan-admin .pa-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.plan-admin h3{ font-family:var(--serif); font-size:17px; color:var(--navy); }
.plan-admin .pa-price{ font-family:var(--serif); font-size:24px; font-weight:800; color:var(--navy); }
.plan-admin .pa-price small{ font-size:12px; color:var(--faint); font-family:var(--font); font-weight:500; }
.plan-admin .pa-limits{ font-size:11.5px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; }
.plan-admin .pa-limits span{ background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:3px 10px; }
.plan-admin .pa-feats{ font-size:11.5px; color:var(--faint); line-height:1.7; flex:1; }
.plan-admin .pa-actions{ display:flex; gap:8px; }
.plan-admin.off{ opacity:.55; }
.plan-admin .pa-tag{ font-size:9.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; padding:3px 9px; border-radius:20px; }
.pa-tag.live{ background:var(--green-bg); color:var(--green); }
.pa-tag.off{ background:var(--bg); color:var(--faint); }
.pa-tag.subs{ background:var(--gold-soft); color:#8a6d1b; }

/* ---------- integration settings ---------- */
.integ-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:start; }
.pk-status{ margin:0 18px 18px; font-size:12.5px; border-radius:9px; padding:0; }
.pk-status.show{ padding:11px 14px; }
.pk-status.ok{ background:var(--green-bg); color:var(--green); border:1px solid rgba(31,160,85,.3); }
.pk-status.bad{ background:var(--red-bg); color:var(--red); border:1px solid rgba(217,45,32,.3); }
.webhook-box{ display:flex; gap:8px; align-items:center; margin:14px 18px; background:var(--navy);
  border-radius:10px; padding:11px 14px; }
.webhook-box code{ color:var(--gold-2); font-family:var(--mono); font-size:11px; flex:1; word-break:break-all; }
.webhook-box .btn{ flex:none; }
.integ-note{ font-size:12px; color:var(--muted); margin:4px 18px 16px; line-height:1.6; }
.event-list{ list-style:none; margin:0 18px 16px; display:flex; flex-direction:column; gap:9px; }
.event-list li{ display:flex; flex-direction:column; gap:2px; font-size:12.5px; padding:9px 12px; background:var(--bg); border-radius:9px; border:1px solid var(--line); }
.event-list code{ color:var(--navy); font-family:var(--mono); font-size:11.5px; font-weight:600; }
.event-list span{ color:var(--faint); font-size:11.5px; }
.test-cards{ margin:0 18px 18px; display:flex; flex-direction:column; gap:8px; }
.test-cards div{ background:var(--gold-tint); border:1px solid rgba(212,175,55,.3); border-radius:9px; padding:9px 13px; font-size:12px; }
.test-cards b{ color:var(--navy); font-family:var(--mono); display:block; font-size:12.5px; }
.test-cards span{ color:var(--faint); font-size:11px; }

/* registration queue / platform health */
.reg-queue{ display:flex; flex-direction:column; padding:6px 14px 14px; }
.reg-row{ display:flex; gap:11px; align-items:center; padding:10px 4px; border-bottom:1px dashed var(--line); font-size:12.5px; }
.reg-row:last-child{ border-bottom:none; }
.reg-row .rg-ic{ width:34px; height:34px; border-radius:50%; background:var(--navy); color:var(--gold-2); display:grid; place-items:center; font-weight:700; font-size:12px; flex:none; }
.reg-row b{ display:block; color:var(--navy); font-size:12.5px; }
.reg-row small{ color:var(--faint); font-size:11px; }
.reg-row .btn{ margin-left:auto; flex:none; }

/* ---------- support FAB ---------- */
.support-fab{ position:fixed; right:22px; bottom:22px; z-index:300; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.fab-main{
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(145deg,#25D366,#128C7E); color:#fff; font-size:25px;
  box-shadow:0 10px 30px rgba(18,140,126,.45); display:grid; place-items:center;
  transition:transform .25s; position:relative;
}
.fab-main:hover{ transform:scale(1.07); }
.fab-main::after{ content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,.5); animation:fabPulse 2.2s infinite; }
@keyframes fabPulse{ 0%{ transform:scale(1); opacity:.8; } 100%{ transform:scale(1.6); opacity:0; } }
.fab-close{ display:none; font-size:20px; }
.support-fab.open .fab-main{ background:var(--navy); }
.support-fab.open .fab-chat{ display:none; }
.support-fab.open .fab-close{ display:block; }
.support-panel{
  width:300px; background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lg); padding:14px; opacity:0; transform:translateY(12px) scale(.97);
  pointer-events:none; transition:.22s; transform-origin:bottom right;
}
.support-fab.open .support-panel{ opacity:1; transform:none; pointer-events:auto; }
.sp-head{ padding:4px 6px 12px; border-bottom:1px solid var(--line); margin-bottom:10px; }
.sp-head strong{ display:block; font-family:var(--serif); color:var(--navy); font-size:15px; }
.sp-head span{ font-size:11.5px; color:var(--faint); }
.sp-link{ display:flex; align-items:center; gap:11px; padding:11px 10px; border-radius:11px; text-decoration:none;
  transition:.15s; margin-bottom:8px; border:1px solid var(--line); }
.sp-link:hover{ background:var(--gold-tint); border-color:rgba(212,175,55,.45); transform:translateX(-2px); }
.sp-ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:18px; flex:none; }
.sp-link.whatsapp .sp-ic{ background:rgba(37,211,102,.14); }
.sp-link.email .sp-ic{ background:var(--gold-soft); }
.sp-link b{ display:block; color:var(--navy); font-size:13px; }
.sp-link small{ color:var(--faint); font-size:11px; display:block; word-break:break-all; }
.sp-link svg{ width:15px; height:15px; color:var(--faint); flex:none; margin-left:auto; }
.sp-foot{ font-size:10px; color:var(--faint); text-align:center; padding-top:8px; border-top:1px dashed var(--line); }

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .sa-quick{ grid-template-columns:repeat(2,1fr); }
  .plans-manage{ grid-template-columns:1fr; }
  .integ-grid{ grid-template-columns:1fr; }
}

/* ---------- platform branding login preview ---------- */
.bp-login{ margin:16px 18px; border-radius:12px; padding:20px; background:linear-gradient(160deg,#0B192C,#0E1F38); color:#fff; }
.bp-login-brand{ display:flex; gap:12px; align-items:center; }
.bp-login-brand .brand-mark{ width:44px; height:44px; border-radius:11px; background:var(--gold); color:var(--navy); display:grid; place-items:center; font-size:22px; overflow:hidden; flex:none; }
.bp-login-brand .brand-mark img{ width:100%; height:100%; object-fit:contain; }
.bp-login-brand strong{ display:block; font-family:var(--serif); font-size:21px; letter-spacing:3px; }
.bp-login-brand small{ font-size:10px; letter-spacing:2.2px; text-transform:uppercase; color:var(--gold-2); }
.bp-login-line{ height:9px; border-radius:5px; background:rgba(255,255,255,.12); margin-top:16px; }
.bp-login-line.short{ width:55%; }
.bp-login-fav{ display:flex; align-items:center; gap:10px; margin-top:16px; font-size:11px; color:rgba(255,255,255,.6); }
.bp-login-fav img{ width:22px; height:22px; border-radius:5px; background:#fff; padding:2px; object-fit:contain; }

/* =====================================================================
   v2.2 — ANNOUNCEMENTS & MESSAGING
   ===================================================================== */
.nav-item .nav-badge{ margin-left:auto; background:var(--red-bar); color:#fff; font-style:normal;
  font-size:10px; font-weight:800; min-width:18px; height:18px; border-radius:9px; display:grid; place-items:center; padding:0 5px; }
.seg-btn em.ann-badge{ display:inline-grid; place-items:center; background:var(--red-bar); color:#fff;
  font-style:normal; font-size:9.5px; font-weight:800; min-width:16px; height:16px; border-radius:8px; margin-left:6px; padding:0 4px; }

/* dashboard banners */
.ann-banners{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.ann-banner{ display:flex; gap:13px; align-items:flex-start; border-radius:12px; padding:13px 17px;
  border:1px solid; font-size:13px; cursor:pointer; animation:fade .3s; }
.ann-banner .ab-ic{ font-size:18px; flex:none; }
.ann-banner b{ display:block; color:var(--navy); font-size:13px; }
.ann-banner p{ margin:2px 0 0; font-size:12.5px; color:var(--muted); }
.ann-banner .ab-go{ margin-left:auto; align-self:center; color:var(--faint); flex:none; font-size:15px; }
.ann-banner.lv-info{ background:#EEF4FF; border-color:#B9CCF5; }
.ann-banner.lv-success{ background:var(--green-bg); border-color:rgba(31,160,85,.35); }
.ann-banner.lv-warning{ background:var(--amber-bg); border-color:rgba(224,161,28,.4); }
.ann-banner.lv-critical{ background:var(--red-bg); border-color:rgba(217,45,32,.35); }

.announce-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:18px; align-items:start; }
.sent-list{ padding:8px 14px 14px; display:flex; flex-direction:column; gap:10px; max-height:560px; overflow-y:auto; }
.sent-card{ border:1px solid var(--line); border-radius:11px; padding:13px 15px; border-left:4px solid var(--navy); }
.sent-card.lv-info{ border-left-color:#4C7DF0; }
.sent-card.lv-success{ border-left-color:var(--green-bar); }
.sent-card.lv-warning{ border-left-color:var(--amber-bar); }
.sent-card.lv-critical{ border-left-color:var(--red-bar); }
.sent-card h4{ font-size:13.5px; color:var(--navy); font-family:var(--serif); }
.sent-card p{ font-size:12px; color:var(--muted); margin:4px 0 8px; line-height:1.55; }
.sent-card .sc-meta{ display:flex; gap:10px; align-items:center; font-size:10.5px; color:var(--faint); flex-wrap:wrap; }
.lv-chip{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; padding:2px 8px; border-radius:12px; background:var(--bg); }
.aud-chip{ font-size:10px; color:var(--navy); background:var(--gold-soft); border:1px solid rgba(212,175,55,.4); padding:2px 9px; border-radius:12px; font-weight:700; }

/* announcement feed */
.ann-feed{ display:flex; flex-direction:column; gap:13px; }
.ann-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:17px 20px; border-top:3px solid var(--navy); }
.ann-card.lv-info{ border-top-color:#4C7DF0; }
.ann-card.lv-success{ border-top-color:var(--green-bar); }
.ann-card.lv-warning{ border-top-color:var(--amber-bar); }
.ann-card.lv-critical{ border-top-color:var(--red-bar); }
.ann-card .ac-top{ display:flex; align-items:center; gap:10px; margin-bottom:7px; flex-wrap:wrap; }
.ann-card h3{ font-family:var(--serif); font-size:16px; color:var(--navy); flex:1; min-width:200px; }
.ann-card .ac-body{ font-size:13px; color:var(--muted); line-height:1.6; }
.ann-card .ac-foot{ font-size:11px; color:var(--faint); margin-top:10px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.ann-card .ac-foot .author{ color:var(--navy); font-weight:600; }

/* messaging layout */
.msg-layout{ display:grid; grid-template-columns:300px 1fr; min-height:520px; }
.msg-threads{ border-right:1px solid var(--line); overflow-y:auto; }
.msg-thread{ display:flex; gap:11px; padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer; transition:.15s; position:relative; }
.msg-thread:hover{ background:var(--gold-tint); }
.msg-thread.active{ background:var(--navy); color:#fff; }
.msg-thread.active .mt-sub, .msg-thread.active .mt-time{ color:rgba(255,255,255,.65); }
.mt-ava{ width:38px; height:38px; border-radius:50%; background:var(--gold-soft); color:#8a6d1b; display:grid; place-items:center; font-weight:700; font-size:13px; flex:none; }
.msg-thread.active .mt-ava{ background:rgba(212,175,55,.2); color:var(--gold-2); }
.mt-body{ flex:1; min-width:0; }
.mt-name{ font-size:13px; font-weight:700; }
.mt-sub{ font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mt-time{ font-size:10px; color:var(--faint); white-space:nowrap; }
.mt-unread{ width:9px; height:9px; border-radius:50%; background:var(--red-bar); position:absolute; top:18px; right:14px; border:2px solid #fff; }
.msg-thread.active .mt-unread{ border-color:var(--navy); }
.msg-chat{ display:flex; flex-direction:column; background:var(--bg); }
.chat-empty{ margin:auto; text-align:center; color:var(--faint); }
.chat-empty span{ font-size:38px; display:block; margin-bottom:8px; }
.chat-head{ background:#fff; border-bottom:1px solid var(--line); padding:13px 20px; }
.chat-head b{ color:var(--navy); font-size:14px; }
.chat-head span{ display:block; font-size:11px; color:var(--faint); }
.chat-messages{ flex:1; padding:18px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; max-height:360px; }
.bubble{ max-width:74%; padding:11px 15px; border-radius:14px; font-size:13px; line-height:1.55; box-shadow:var(--shadow); }
.bubble.in{ background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; align-self:flex-start; }
.bubble.out{ background:var(--navy); color:#fff; border-bottom-right-radius:4px; align-self:flex-end; }
.bubble .b-meta{ font-size:10px; opacity:.65; margin-top:4px; }
.bubble b.sub{ display:block; font-size:11px; margin-bottom:4px; color:var(--gold-2); }
.chat-input{ background:#fff; border-top:1px solid var(--line); padding:14px; display:flex; flex-direction:column; gap:9px; }
.chat-input textarea{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-family:inherit; font-size:13px; resize:none; }
.chat-input .ci-row{ display:flex; justify-content:flex-end; }

.msg-thread-view{ padding:0 20px 20px; display:flex; flex-direction:column; gap:10px; }
@media (max-width: 900px){
  .announce-grid{ grid-template-columns:1fr; }
  .msg-layout{ grid-template-columns:1fr; }
  .msg-threads{ border-right:none; border-bottom:1px solid var(--line); max-height:200px; }
}

/* =====================================================================
   v2.3 — CHAMBER APPROVAL WORKFLOW (gate + approvals queue)
   ===================================================================== */

/* full-screen approval gate */
.gate-screen{
  position:fixed; inset:0; z-index:400; overflow-y:auto;
  display:flex; align-items:center; justify-content:center; padding:30px 20px;
  background:
    radial-gradient(900px 480px at 80% -10%, rgba(212,175,55,.14), transparent 60%),
    linear-gradient(165deg,#081222 0%,var(--navy) 55%,var(--navy-2) 100%);
}
.gate-card{
  width:min(520px,96vw); background:#fff; border-radius:20px; padding:44px 42px; text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.5); border:1px solid rgba(212,175,55,.3); position:relative;
}
.gate-mark{ width:78px; height:78px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center;
  font-size:36px; background:var(--gold-soft); border:2px solid var(--gold); animation:gatePulse 2s infinite; }
.gate-mark.rejected{ background:var(--red-bg); border-color:var(--red-bar); animation:none; }
@keyframes gatePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(212,175,55,.45) } 50%{ box-shadow:0 0 0 14px rgba(212,175,55,0) } }
.gate-card h1{ font-family:var(--serif); font-size:26px; color:var(--navy); margin-bottom:12px; }
.gate-card > p{ color:var(--muted); font-size:14px; line-height:1.7; }
.gate-meta{ margin:20px 0; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px; font-size:12.5px; color:var(--muted); }
.gate-meta b{ color:var(--navy); }
.gate-note{ font-size:12.5px; border-radius:10px; padding:0; margin:0 0 4px; text-align:left; display:none; }
.gate-note.show{ display:block; padding:12px 14px; margin-bottom:16px; }
.gate-note.rejected{ background:var(--red-bg); border:1px solid rgba(217,45,32,.3); color:var(--red); }
.gate-actions{ display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.gate-whatsapp{ display:inline-block; margin-top:18px; font-size:12.5px; color:#128C7E; font-weight:600; }
.gate-whatsapp:hover{ text-decoration:underline; }

/* approvals queue */
.approval-list{ padding:8px 14px 14px; display:flex; flex-direction:column; gap:12px; }
.approval-card{ display:flex; gap:16px; align-items:flex-start; border:1px solid var(--line);
  border-left:4px solid var(--amber-bar); border-radius:13px; padding:16px 18px; flex-wrap:wrap; background:#fff; }
.approval-card .ap-ava{ width:48px; height:48px; border-radius:50%; background:var(--navy); color:var(--gold-2);
  display:grid; place-items:center; font-weight:700; flex:none; }
.approval-card .ap-body{ flex:1; min-width:240px; }
.approval-card .ap-body b{ color:var(--navy); font-size:15px; }
.approval-card .ap-body .ap-line{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.approval-card .ap-meta{ display:flex; gap:14px; font-size:11px; color:var(--faint); margin-top:8px; flex-wrap:wrap; }
.approval-card .ap-actions{ display:flex; gap:9px; align-self:center; }
.approval-history{ padding:6px 14px 14px; }
.ah-row{ display:flex; align-items:center; gap:12px; padding:11px 6px; border-bottom:1px dashed var(--line); font-size:12.5px; flex-wrap:wrap; }
.ah-row:last-child{ border-bottom:none; }
.ah-tag{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; padding:3px 10px; border-radius:14px; }
.ah-tag.approved{ background:var(--green-bg); color:var(--green); }
.ah-tag.rejected{ background:var(--red-bg); color:var(--red); }
.ah-row b{ color:var(--navy); }
.ah-row .ah-note{ color:var(--faint); font-size:11.5px; width:100%; padding-left:2px; }
.ah-row .ah-time{ margin-left:auto; color:var(--faint); font-size:11px; }
.pill-pending{ background:#EEF4FF; color:#2F5BC4; border:1px solid #B9CCF5; }