*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100vw}
:root{
  --bg:#050b16;
  --bg-soft:#091325;
  --bg-deep:#07101f;
  --panel:rgba(10,19,35,.86);
  --panel-2:rgba(14,25,46,.88);
  --panel-3:rgba(20,35,60,.88);
  --panel-solid:#0e192e;
  --line:rgba(157,189,255,.12);
  --line-strong:rgba(157,189,255,.22);
  --text:#e1eaf6;
  --text-strong:#e6edf7;
  --text-secondary:#d3dfef;
  --muted:#a7b5cf;
  --muted-2:#8db8e9;
  --blue:#67b4ff;
  --blue-2:#8fd8ff;
  --info-soft:#cfe5ff;
  --steel:#8298c0;
  --gold:#d6b15d;
  --gold-soft:#f5d990;
  --green:#25d89b;
  --positive-soft:#a7f1d2;
  --amber:#f0bf62;
  --warning-soft:#ffd89b;
  --red:#f16f86;
  --danger-soft:#ffc0cb;
  --shadow:0 24px 80px rgba(0,0,0,.38);
  --shadow-soft:0 16px 40px rgba(0,0,0,.25);
  --radius:24px;
  --radius-sm:16px;
}

/* Light theme adjustments for extended palette (overrides themes.css base) */
body.theme-light{
  --bg-deep:#ffffff;
  --panel-solid:#ffffff;
  --text-strong:#0f172a;
  --text-secondary:#1e293b;
  --muted:#475569;
  --steel:#3f5a80;
  --muted-2:#475569;
  --info-soft:#1d4ed8;
  --gold-soft:#92400e;
  --positive-soft:#065f46;
  --warning-soft:#92400e;
  --danger-soft:#991b1b;
}

/* Vibrant theme adjustments for extended palette */
body.theme-vibrant{
  --bg-deep:#fafafa;
  --panel-solid:#ffffff;
  --text-strong:#18181b;
  --text-secondary:#27272a;
  --muted:#52525b;
  --steel:#3f3f46;
  --muted-2:#52525b;
  --info-soft:#6d28d9;
  --gold-soft:#b45309;
  --positive-soft:#047857;
  --warning-soft:#b45309;
  --danger-soft:#b91c1c;
}
html{font-size:15px}
body{
  margin:0;
  min-height:100vh;
  font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;
  line-height:1.45;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 18%, rgba(103,180,255,.16), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(103,180,255,.12), transparent 18%),
    radial-gradient(circle at 80% 80%, rgba(79,125,204,.14), transparent 24%),
    linear-gradient(180deg,#07101f 0%,#050b16 42%,#040811 100%);
}
body[data-entry="login"]{
  background:url('../img/login-hero.png') center center / cover no-repeat fixed;
  background-color:#050b16;
}
h1,h2,h3,h4,h5,h6{
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--text-strong);
}
p{font-weight:400}
.btn,.login-btn,.status-chip,.pill,.section-kicker,.nav-label,.card-tag,th{font-weight:600}
.card-sub,.meta,.mini-note,.hero-copy,.list-copy,.topbar-sub,.sidebar-user-role{color:var(--muted)}
a{color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:rgba(157,189,255,.18);border-radius:999px}

#login-screen{
  position:fixed;
  inset:0;
  z-index:30;
  overflow:auto;
  overscroll-behavior:contain;
  isolation:isolate;
  background:
    radial-gradient(circle at 15% 18%, rgba(103,180,255,.12), transparent 24%),
    radial-gradient(circle at 78% 12%, rgba(143,216,255,.08), transparent 20%),
    linear-gradient(180deg,#06101f 0%,#050a14 100%);
}
.login-shell{
  position:relative;
  width:min(1280px,100%);
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:clamp(24px,3vw,34px);
  padding:clamp(24px,3vw,36px) clamp(16px,2.8vw,32px) clamp(18px,2vw,24px);
}
.login-shell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:32px;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0) 18%),
    linear-gradient(90deg, rgba(103,180,255,.02), rgba(103,180,255,0) 28%, rgba(103,180,255,0) 72%, rgba(103,180,255,.02));
  opacity:.75;
}
.login-ambient{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.login-ambient::before,
.login-ambient::after{
  content:"";
  position:absolute;
  inset:auto;
  width:48vw;
  height:48vw;
  min-width:360px;
  min-height:360px;
  border-radius:50%;
  filter:blur(22px);
  opacity:.32;
}
.login-ambient::before{
  left:50%;
  top:46%;
  transform:translate(-56%,-44%);
  background:radial-gradient(circle, rgba(103,180,255,.14) 0%, rgba(103,180,255,.02) 54%, transparent 72%);
  animation:ambientFloat 16s ease-in-out infinite;
}
.login-ambient::after{
  left:52%;
  top:48%;
  width:36vw;
  height:36vw;
  min-width:260px;
  min-height:260px;
  transform:translate(-38%,-28%);
  background:radial-gradient(circle, rgba(143,216,255,.11) 0%, rgba(143,216,255,.025) 52%, transparent 75%);
  animation:ambientPulse 18s ease-in-out infinite;
}
.login-wave,
.login-wave::before,
.login-wave::after{
  position:absolute;
  inset:auto;
  content:"";
  pointer-events:none;
}
.login-wave{
  left:12%;
  right:12%;
  top:49%;
  height:240px;
  border-radius:999px;
  border:1px solid rgba(103,180,255,.06);
  box-shadow:0 0 0 1px rgba(103,180,255,.02) inset;
  filter:blur(.2px);
  animation:waveShift 14s ease-in-out infinite;
}
.login-wave::before{
  inset:-22px 8%;
  border-radius:999px;
  border:1px solid rgba(143,216,255,.06);
}
.login-wave::after{
  inset:26px 14%;
  border-radius:999px;
  border:1px solid rgba(103,180,255,.05);
}
.login-orbit,
.login-orbit::before{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.login-orbit{
  right:6%;
  top:14%;
  width:min(24vw,280px);
  height:min(24vw,280px);
  border:1px solid rgba(157,189,255,.08);
  opacity:.42;
  animation:orbitDrift 20s linear infinite;
}
.login-orbit::before{
  content:"";
  inset:18px;
  border:1px dashed rgba(214,177,93,.1);
}
.login-streaks,
.login-streaks::before,
.login-streaks::after{
  position:absolute;
  content:"";
  pointer-events:none;
}
.login-streaks{
  left:7%;
  top:14%;
  width:min(320px,32vw);
  height:1px;
  background:linear-gradient(90deg, rgba(143,216,255,0), rgba(143,216,255,.28), rgba(143,216,255,0));
  transform:rotate(-9deg);
  opacity:.54;
}
.login-streaks::before{
  inset:26px auto auto 22px;
  width:min(220px,24vw);
  height:1px;
  background:linear-gradient(90deg, rgba(103,180,255,0), rgba(103,180,255,.22), rgba(103,180,255,0));
}
.login-streaks::after{
  inset:54px auto auto 54px;
  width:min(150px,18vw);
  height:1px;
  background:linear-gradient(90deg, rgba(214,177,93,0), rgba(214,177,93,.18), rgba(214,177,93,0));
}
.login-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.login-particles span{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.8) 0%, rgba(143,216,255,.18) 55%, transparent 72%);
  opacity:.5;
  animation:particleFloat 12s ease-in-out infinite;
}
.login-particles span:nth-child(1){left:14%;top:28%;animation-delay:0s}
.login-particles span:nth-child(2){left:24%;top:68%;animation-delay:2s}
.login-particles span:nth-child(3){left:46%;top:20%;animation-delay:4s}
.login-particles span:nth-child(4){left:68%;top:62%;animation-delay:1.5s}
.login-particles span:nth-child(5){left:82%;top:26%;animation-delay:3s}
.login-particles span:nth-child(6){left:88%;top:78%;animation-delay:5s}
@keyframes ambientFloat{
  0%,100%{transform:translate(-56%,-44%) scale(1)}
  50%{transform:translate(-50%,-40%) scale(1.06)}
}
@keyframes ambientPulse{
  0%,100%{transform:translate(-38%,-28%) scale(.94);opacity:.34}
  50%{transform:translate(-46%,-34%) scale(1.06);opacity:.48}
}
@keyframes waveShift{
  0%,100%{transform:translateY(0) scale(1);opacity:.7}
  50%{transform:translateY(-8px) scale(1.02);opacity:.95}
}
@keyframes orbitDrift{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes particleFloat{
  0%,100%{transform:translate3d(0,0,0) scale(.85);opacity:.28}
  50%{transform:translate3d(0,-16px,0) scale(1.15);opacity:.72}
}
.login-top{
  position:relative;
  z-index:1;
  display:grid;
  width:min(1210px,100%);
  margin:0 auto;
  gap:22px;
  justify-items:center;
}
.login-brand-row{
  width:100%;
}
.login-brand-static{
  display:flex;
  align-items:stretch;
  gap:clamp(14px,1.8vw,22px);
  width:100%;
  padding:8px 0 16px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.login-brand-static::-webkit-scrollbar{display:none}
.login-brand-static .login-brand-tile{
  flex:1 1 0;
  min-width:180px;
  max-width:none;
  width:auto;
}
.login-brand-marquee-shell{
  position:relative;
  overflow:hidden;
  width:100%;
  padding:8px 0 16px;
}
.login-brand-marquee-shell::before,
.login-brand-marquee-shell::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:72px;
  z-index:2;
  pointer-events:none;
}
.login-brand-marquee-shell::before{
  left:0;
  background:linear-gradient(90deg, #060e1c 0%, rgba(6,14,28,0) 100%);
}
.login-brand-marquee-shell::after{
  right:0;
  background:linear-gradient(270deg, #060e1c 0%, rgba(6,14,28,0) 100%);
}
.login-brand-track{
  display:flex;
  width:max-content;
  will-change:transform;
  transform:translate3d(0,0,0);
  animation:topLogoMarquee 34s linear infinite;
}
.login-brand-marquee-shell:hover .login-brand-track{
  animation-play-state:paused;
}
.login-brand-set{
  display:flex;
  flex:0 0 auto;
  align-items:stretch;
  gap:clamp(14px,1.8vw,24px);
  padding-right:clamp(14px,1.8vw,24px);
}
.login-brand-tile{
  position:relative;
  flex:0 0 auto;
  width:clamp(220px,23vw,286px);
  height:clamp(104px,10.2vw,132px);
  padding:clamp(14px,1.6vw,20px);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  border:1px solid rgba(70,128,255,.42);
  background:
    linear-gradient(180deg, rgba(15,34,73,.6), rgba(4,12,27,.88)),
    linear-gradient(135deg, rgba(13,24,45,.94), rgba(8,15,28,.96));
  box-shadow:
    0 0 0 1px rgba(57,120,255,.18) inset,
    0 16px 42px rgba(0,0,0,.24),
    0 0 26px rgba(46,107,255,.08);
}
.login-brand-tile::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(123,179,255,.08), rgba(255,255,255,0) 36%);
  opacity:.8;
  pointer-events:none;
}
.login-brand-tile::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1px;
  width:96px;
  height:10px;
  transform:translateX(-50%);
  border-radius:999px;
  background:radial-gradient(circle, rgba(91,170,255,.95) 0%, rgba(91,170,255,.24) 55%, rgba(91,170,255,0) 100%);
  filter:blur(2px);
  pointer-events:none;
}
.login-brand-art{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.login-brand-tile img{
  width:100%;
  max-width:100%;
  max-height:76px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.22));
}
.login-center{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}
.login-focus-field{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.login-focus-grid,
.login-focus-spark{
  pointer-events:none;
}
.login-stack{
  position:relative;
  z-index:2;
  width:min(430px,100%);
  display:grid;
  gap:24px;
  justify-items:center;
  padding-block:clamp(12px,2vh,28px);
}
.login-title{
  text-align:center;
  max-width:none;
  font-size:clamp(.68rem,.76vw,.78rem);
  line-height:1.4;
  letter-spacing:.3em;
  font-weight:700;
  margin:0;
  color:rgba(147,191,232,.62);
  text-wrap:balance;
  text-shadow:none;
}
.login-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  background:
    linear-gradient(180deg, rgba(20,46,97,.18), rgba(4,10,23,.94)),
    rgba(9,17,30,.9);
  border:1px solid rgba(92,133,201,.34);
  border-radius:24px;
  padding:28px 28px 26px;
  box-shadow:
    0 0 0 1px rgba(70,128,255,.16) inset,
    0 24px 72px rgba(0,0,0,.36),
    0 0 34px rgba(38,109,255,.14);
  backdrop-filter:blur(18px);
  z-index:3;
}
.login-panel{position:relative;z-index:4}
.login-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.03);
  pointer-events:none;
}
.login-card::before{
  content:"";
  position:absolute;
  inset:auto -24% 72% auto;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(69,129,255,.2), transparent 72%);
  pointer-events:none;
}
.login-card-head{
  display:grid;
  justify-items:center;
  text-align:center;
  gap:12px;
  margin-bottom:24px;
}
.login-emblem{
  width:76px;
  height:76px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 38%, rgba(88,154,255,.36), rgba(18,41,94,.88) 60%, rgba(8,18,41,.94) 100%);
  border:1px solid rgba(78,140,255,.5);
  box-shadow:
    0 0 0 10px rgba(47,102,221,.08),
    0 0 28px rgba(50,115,255,.28);
}
.login-emblem-core{
  width:34px;
  height:34px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.08));
  position:relative;
}
.login-emblem-core::before{
  content:"";
  position:absolute;
  left:50%;
  top:8px;
  width:14px;
  height:10px;
  transform:translateX(-50%);
  border:3px solid #eff6ff;
  border-bottom:none;
  border-radius:999px 999px 0 0;
}
.login-emblem-core::after{
  content:"";
  position:absolute;
  left:50%;
  top:15px;
  width:16px;
  height:13px;
  transform:translateX(-50%);
  border-radius:4px;
  background:#eff6ff;
  box-shadow:inset 0 -2px 0 rgba(70,128,255,.22);
}
.login-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:0;
  border-radius:999px;
  border:none;
  background:none;
  color:#7db7ff;
  font-size:.64rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.22em;
}
.login-badge::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#5ba9ff;
  box-shadow:0 0 18px rgba(91,169,255,.72);
}
.login-card h2{
  margin:0;
  font-size:1.1rem;
  line-height:1.08;
  letter-spacing:-.03em;
}
.login-card-copy{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  font-size:.8rem;
  max-width:28ch;
}
.field{
  display:grid;
  gap:8px;
  margin-bottom:14px;
}
.field label{
  font-size:.72rem;
  letter-spacing:.01em;
  color:#c6d5ea;
  font-weight:600;
}
.field input{
  width:100%;
  outline:none;
  color:var(--text);
  border-radius:10px;
  min-height:44px;
  padding:12px 14px;
  background:rgba(4,10,23,.72);
  border:1px solid rgba(90,136,231,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.password-input-wrap{position:relative}
.password-input-wrap input{padding-right:46px}
.password-toggle{
  position:absolute;
  top:50%;
  right:6px;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(207,220,239,.65);
  border-radius:8px;
  cursor:pointer;
  transition:color .2s ease, background .2s ease;
}
.password-toggle:hover,.password-toggle:focus-visible{
  color:#cfe1ff;
  background:rgba(90,136,231,.12);
  outline:none;
}
.password-toggle:active{transform:translateY(-50%) scale(.95)}
.field select,
.field textarea{
  width:100%;
  outline:none;
  color:var(--text);
  border-radius:10px;
  min-height:44px;
  padding:12px 14px;
  background:rgba(4,10,23,.72);
  border:1px solid rgba(90,136,231,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input::placeholder{
  color:#6f83a8;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:rgba(86,152,255,.52);
  box-shadow:0 0 0 3px rgba(68,126,243,.14);
  background:rgba(6,14,31,.82);
}
.login-actions{
  display:grid;
  gap:12px;
  margin-top:10px;
}
.login-btn{
  position:relative;
  z-index:5;
  pointer-events:auto;
  width:100%;
  border:none;
  color:#f7fbff;
  font-weight:600;
  letter-spacing:.01em;
  border-radius:10px;
  min-height:46px;
  padding:12px 16px;
  background:linear-gradient(180deg,#397dff 0%, #295fe6 100%);
  box-shadow:0 12px 24px rgba(41,95,230,.26), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.login-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(41,95,230,.32), inset 0 1px 0 rgba(255,255,255,.24);
  filter:saturate(1.05);
}
.login-btn:focus-visible{
  outline:2px solid rgba(143,216,255,.7);
  outline-offset:3px;
}
.login-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
  font-size:.72rem;
  color:var(--muted);
  text-align:center;
}
.login-link{
  color:#57a8ff;
  text-decoration:none;
}
.login-link:hover{color:#e6f2ff}
.login-protected{
  margin-top:16px;
  padding:16px 0 0;
  border-radius:0;
  background:none;
  border:none;
  border-top:1px solid rgba(91,137,231,.24);
  color:#cfdaf1;
  font-size:.78rem;
  line-height:1.5;
  text-align:center;
}
.login-error{
  display:none;
  margin-top:12px;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(241,111,134,.18);
  background:rgba(241,111,134,.08);
  color:#ffc2cd;
  font-size:.82rem;
}
.login-help{
  text-align:center;
  color:#7e90b4;
  font-size:.74rem;
  max-width:44ch;
  line-height:1.6;
  margin:0 auto;
}
.login-help strong{color:var(--text)}
.login-bottom{
  position:relative;
  z-index:1;
  width:100%;
}
.login-logo-rail-frame{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) 1px minmax(0,.88fr);
  align-items:center;
  gap:22px;
  padding:18px 22px 16px;
  border-radius:20px;
  border:1px solid rgba(52,109,235,.34);
  background:
    linear-gradient(180deg, rgba(10,26,55,.56), rgba(4,10,23,.92)),
    rgba(6,12,26,.9);
  box-shadow:
    0 0 0 1px rgba(70,128,255,.08) inset,
    0 18px 38px rgba(0,0,0,.22);
}
.logo-lane{
  min-width:0;
  display:grid;
  gap:14px;
}
.logo-lane-label{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.76rem;
  font-weight:800;
  color:#6fb6ff;
}
.logo-lane-divider{
  width:1px;
  align-self:stretch;
  background:linear-gradient(180deg, rgba(78,139,255,0), rgba(78,139,255,.52), rgba(78,139,255,0));
}
.marquee-shell{
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:0;
}
.marquee-shell::before,
.marquee-shell::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:92px;
  z-index:2;
  pointer-events:none;
}
.marquee-shell::before{
  left:0;
  background:linear-gradient(90deg, #07101f 0%, rgba(7,16,31,0) 100%);
}
.marquee-shell::after{
  right:0;
  background:linear-gradient(270deg, #07101f 0%, rgba(7,16,31,0) 100%);
}
.marquee-track{
  display:flex;
  width:max-content;
  will-change:transform;
  transform:translate3d(0,0,0);
  animation:logoMarquee 28s linear infinite;
}
.logo-lane-bodies .marquee-track{
  animation-duration:20s;
}
.marquee-shell:hover .marquee-track{animation-play-state:paused}
.marquee-set{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:12px;
  padding-right:12px;
}
.marquee-tile{
  flex:0 0 auto;
  width:92px;
  height:92px;
  padding:12px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  border:1px solid rgba(57,116,240,.26);
  background:linear-gradient(180deg, rgba(12,31,67,.62), rgba(7,16,35,.94));
  box-shadow:0 0 0 1px rgba(57,116,240,.08) inset;
  opacity:.9;
  transition:opacity .2s ease,border-color .2s ease,transform .2s ease;
}
.marquee-tile:hover{
  opacity:1;
  transform:translateY(-1px);
  border-color:rgba(102,159,255,.38);
}
.marquee-art{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.marquee-tile img{
  width:auto;
  max-width:100%;
  max-height:54px;
  height:auto;
  object-fit:contain;
}
@keyframes logoMarquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translateX(-50%)}
}
@keyframes topLogoMarquee{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}
#app{
  display:none;
  min-height:100vh;
}
.app-shell{
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  min-height:100vh;
}
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  padding:22px 16px;
  background:
    linear-gradient(180deg, rgba(8,15,28,.98), rgba(7,12,22,.96)),
    rgba(7,12,22,.96);
  border-right:1px solid rgba(157,189,255,.08);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.brand-block{
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(157,189,255,.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(10,18,32,.76);
  box-shadow:var(--shadow-soft);
}
.brand-block-top{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand-mark{
  width:52px;
  height:52px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg, rgba(103,180,255,.22), rgba(103,180,255,.08));
  border:1px solid rgba(157,189,255,.14);
  color:#dff0ff;
  font-size:1rem;
  font-weight:900;
  box-shadow:0 16px 30px rgba(0,0,0,.24);
}
.brand-meta{display:grid;gap:5px}
.brand-kicker{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:#90b5df;
  font-weight:800;
}
.brand-title{
  font-size:1.05rem;
  font-weight:700;
  line-height:1.15;
}
.brand-short{
  font-size:.74rem;
  color:var(--muted);
}
.nav-label{
  padding:0 10px;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:#7f95b7;
  font-weight:600;
}
.nav-list{
  display:grid;
  gap:6px;
}
#sidebar-nav{
  flex:1 1 auto;
  overflow-y:auto;
  min-height:0;
  scrollbar-gutter:stable;
}
.nav-item{
  width:100%;
  border:none;
  background:transparent;
  color:#aab9d7;
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:18px;
  padding:13px 14px;
  text-align:left;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.nav-item:hover{
  color:#eef5ff;
  background:rgba(103,180,255,.08);
  transform:translateX(2px);
}
.nav-item.active{
  color:#f5f9ff;
  background:linear-gradient(90deg, rgba(103,180,255,.2), rgba(103,180,255,.06));
  border:1px solid rgba(103,180,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.nav-icon{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:inherit;
  flex:0 0 auto;
}
.nav-badge{
  margin-left:auto;
  min-width:24px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(241,111,134,.12);
  color:#ffd4dc;
  font-size:.68rem;
  font-weight:800;
  text-align:center;
}
.sidebar-footer{
  margin-top:auto;
  padding:12px;
  border-radius:20px;
  border:1px solid rgba(157,189,255,.08);
  background:rgba(255,255,255,.03);
}
.sidebar-user{
  display:flex;
  align-items:center;
  gap:12px;
}
.avatar{
  width:42px;
  height:42px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg, rgba(103,180,255,.24), rgba(103,180,255,.08));
  border:1px solid rgba(157,189,255,.14);
  font-weight:900;
}
.sidebar-user-meta{
  display:grid;
  gap:3px;
  min-width:0;
}
.sidebar-user-name{
  font-size:.88rem;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sidebar-user-role{
  font-size:.72rem;
  color:var(--muted);
}
.sidebar-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:12px;
}
.ghost-btn,
.ghost-link{
  border:none;
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.04);
  color:#dce8ff;
  text-decoration:none;
}
.ghost-btn:hover,.ghost-link:hover{background:rgba(103,180,255,.1)}
.main{
  min-width:0;
  position:relative;
}
.main::before{
  content:"";
  position:fixed;
  inset:0 0 0 290px;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 8%, rgba(103,180,255,.09), transparent 24%),
    radial-gradient(circle at 82% 12%, rgba(143,216,255,.07), transparent 20%);
}
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:16px 26px;
  border-bottom:1px solid rgba(157,189,255,.08);
  background:rgba(5,11,22,.76);
  backdrop-filter:blur(16px);
}
.topbar-title-group{display:grid;gap:4px}
.topbar-title{
  font-size:1.08rem;
  font-weight:700;
}
.topbar-sub{
  font-size:.74rem;
  color:var(--muted);
}
.topbar-search{
  flex:1;
  min-width:240px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(157,189,255,.12);
  background:rgba(255,255,255,.035);
}
.topbar-search input{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  color:var(--text);
}
.topbar-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}
.topbar-home-btn{
  border:1px solid rgba(157,189,255,.12);
  background:rgba(255,255,255,.05);
  color:#eaf3ff;
  border-radius:18px;
  padding:10px 14px;
  font-size:.76rem;
  font-weight:700;
  white-space:nowrap;
}
.topbar-home-btn:hover{
  background:rgba(103,180,255,.1);
}
.topbar-preview-btn{
  border-color:rgba(143,216,255,.24);
  color:#cfeeff;
}
.topbar-preview-btn[hidden]{
  display:none;
}
.topbar-pill,
.topbar-icon,
.topbar-profile{
  border:1px solid rgba(157,189,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:18px;
}
.topbar-pill{
  padding:10px 12px;
  font-size:.76rem;
  color:var(--muted);
}
.topbar-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  color:#dce8ff;
}
.topbar-menu{
  display:none;
  font-size:1.1rem;
  font-weight:800;
}
.topbar-profile{
  padding:8px 12px 8px 8px;
  display:flex;
  align-items:center;
  gap:10px;
}
.topbar-profile .avatar{width:36px;height:36px;border-radius:14px}
.topbar-profile-meta{display:grid;gap:2px}
.topbar-profile-name{font-size:.8rem;font-weight:800}
.topbar-profile-name{font-weight:600}
.topbar-profile-role{font-size:.7rem;color:var(--muted)}
.page{
  padding:28px;
  display:none;
  position:relative;
  z-index:1;
}
.page.active{display:block}
.main.is-loading::after{
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:220px;
  max-width:40vw;
  height:3px;
  background:linear-gradient(90deg, rgba(103,180,255,.05), rgba(103,180,255,.9), rgba(103,180,255,.05));
  z-index:140;
  animation:mainLoad 1.1s linear infinite;
  pointer-events:none;
}
@keyframes mainLoad{
  from{transform:translateX(-100%)}
  to{transform:translateX(calc(100vw + 260px))}
}
.sidebar-backdrop{
  position:fixed;
  inset:0;
  background:rgba(4,10,20,.62);
  z-index:110;
  opacity:0;
  transition:opacity .2s ease;
}
.sidebar-backdrop.visible,
.sidebar-backdrop:not([hidden]){
  opacity:1;
}
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.page-head-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.page-head h1{
  margin:0;
  font-size:1.48rem;
  font-weight:700;
  letter-spacing:-.04em;
}
.page-head p{
  margin:6px 0 0;
  color:var(--muted);
  max-width:70ch;
  line-height:1.6;
}
.section-kicker{
  font-size:.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted-2);
}
.hero{
  position:relative;
  overflow:hidden;
  padding:28px;
  border-radius:28px;
  border:1px solid rgba(157,189,255,.12);
  background:
    radial-gradient(circle at 15% 18%, rgba(103,180,255,.14), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(143,216,255,.12), transparent 20%),
    linear-gradient(135deg, rgba(10,20,38,.95), rgba(8,15,27,.92));
  box-shadow:0 22px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.03);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.45fr .9fr;
  gap:20px;
  position:relative;
  z-index:1;
}
.hero-title{
  margin:8px 0 0;
  font-size:clamp(2rem,3vw,3.2rem);
  line-height:.98;
  letter-spacing:-.06em;
}
.hero-copy{
  margin:14px 0 0;
  max-width:66ch;
  color:#a6bad8;
  line-height:1.7;
}
.hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-size:.76rem;
  font-weight:800;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(157,189,255,.1);
}
.pill::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
}
.pill.ok{color:#a9f2d6}
.pill.warn{color:#ffdca1}
.pill.bad{color:#ffbfca}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.btn{
  border:none;
  border-radius:16px;
  padding:12px 16px;
  font-weight:800;
  letter-spacing:.01em;
}
.btn-primary{
  color:#06111d;
  background:linear-gradient(135deg,#8fd8ff,#67b4ff);
  box-shadow:0 16px 32px rgba(61,127,201,.22);
}
.btn-secondary{
  color:#eaf3ff;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(157,189,255,.12);
}
.hero-side{
  display:grid;
  gap:12px;
  align-content:start;
}
.hero-side-card{
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(157,189,255,.1);
  background:rgba(255,255,255,.04);
}
.hero-side-card .label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted-2);
  font-weight:800;
}
.hero-side-card .value{
  margin-top:8px;
  font-size:1.26rem;
  font-weight:900;
}
.hero-side-card .copy{
  margin-top:8px;
  color:#a6bad8;
  line-height:1.6;
  font-size:.8rem;
}
.grid-4,.grid-3,.grid-2{
  display:grid;
  gap:16px;
}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  border-radius:24px;
  border:1px solid rgba(157,189,255,.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    rgba(10,18,32,.82);
  box-shadow:0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.02);
  padding:22px;
}
.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.card-title{
  font-size:1rem;
  font-weight:600;
}
.card-sub{
  margin-top:5px;
  color:var(--muted);
  line-height:1.55;
  font-size:.8rem;
}
.card-tag{
  padding:5px 10px;
  border-radius:999px;
  font-size:.72rem;
  color:#bfd7f7;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(157,189,255,.1);
  white-space:nowrap;
}
.metric-card{
  display:grid;
  gap:14px;
}
.metric-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.metric-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(103,180,255,.12);
  color:#d5ebff;
  border:1px solid rgba(157,189,255,.12);
}
.metric-value{
  font-size:2rem;
  font-weight:700;
  letter-spacing:-.05em;
}
.metric-label{
  font-size:.8rem;
  color:var(--muted);
}
.status-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
}
.status-chip::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
}
.tone-green{color:var(--positive-soft);background:rgba(37,216,155,.12)}
.tone-amber{color:var(--warning-soft);background:rgba(240,191,98,.12)}
.tone-red{color:var(--danger-soft);background:rgba(241,111,134,.12)}
.tone-blue{color:#b8ddff;background:rgba(103,180,255,.12)}
.split-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.action-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.analytics-list{
  display:grid;
  gap:14px;
}
.bar-row{
  display:grid;
  gap:8px;
}
.bar-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:.8rem;
}
.bar-track{
  width:100%;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  overflow:hidden;
  border:1px solid rgba(157,189,255,.08);
}
.bar-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(103,180,255,.68), rgba(143,216,255,.95));
}
.table-wrap{overflow:auto}
table{
  width:100%;
  border-collapse:collapse;
}
th,td{
  padding:12px 10px;
  text-align:left;
  border-bottom:1px solid rgba(157,189,255,.08);
  vertical-align:top;
}
th{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#7f95b7;
  font-weight:600;
  white-space:nowrap;
}
td{
  font-size:.82rem;
  color:var(--text-secondary);
}
tbody tr:hover td{background:rgba(255,255,255,.02)}
.meta{
  color:var(--muted);
  font-size:.76rem;
  line-height:1.55;
}
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}
.filter-chip{
  border:1px solid rgba(157,189,255,.1);
  background:rgba(255,255,255,.03);
  color:#d9e7ff;
  border-radius:999px;
  padding:9px 12px;
  font-size:.76rem;
  font-weight:700;
}
.filter-chip.active{
  background:rgba(103,180,255,.12);
  border-color:rgba(103,180,255,.22);
}
.panel-list{
  display:grid;
  gap:14px;
}
.list-card{
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(157,189,255,.08);
}
.list-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.list-title{
  font-size:.93rem;
  font-weight:600;
}
.list-copy{
  margin-top:6px;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.55;
}
.kpi-stat{
  display:grid;
  gap:8px;
}
.kpi-stat .value{
  font-size:1.72rem;
  font-weight:700;
  letter-spacing:-.04em;
}
.kpi-stat .label{
  color:var(--muted);
  font-size:.78rem;
}
.hierarchy-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.hierarchy-column{
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(157,189,255,.1);
  background:rgba(255,255,255,.03);
}
.hierarchy-column h3{
  margin:0 0 12px;
  font-size:.94rem;
}
.hierarchy-person{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(157,189,255,.08);
  margin-bottom:10px;
}
.hierarchy-person:last-child{margin-bottom:0}
.mini-note{
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(157,189,255,.08);
  color:#a6bad8;
  line-height:1.55;
  font-size:.82rem;
}
.restricted{
  border:1px solid rgba(240,191,98,.14);
  background:rgba(240,191,98,.06);
  color:#f4ddb3;
}
.permission-grid{
  display:grid;
  gap:14px;
}
.permission-card{
  display:grid;
  grid-template-columns:minmax(220px,.55fr) 1fr;
  gap:16px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(157,189,255,.08);
  background:rgba(255,255,255,.03);
}
.permission-meta{
  display:grid;
  gap:8px;
}
.permission-name{
  font-size:1rem;
  font-weight:700;
}
.permission-body{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.permission-cell{
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(157,189,255,.08);
}
.permission-cell strong{
  display:block;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted-2);
  margin-bottom:8px;
}
.settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.settings-item{
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(157,189,255,.08);
  background:rgba(255,255,255,.03);
}
.settings-item h3{
  margin:0 0 10px;
  font-size:1rem;
}
.settings-item p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  font-size:.82rem;
}
.meeting-layout{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
}
.timeline{
  display:grid;
  gap:12px;
}
.timeline-item{
  display:grid;
  gap:8px;
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border:1px solid rgba(157,189,255,.12);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.timeline-item:hover{
  transform:translateY(-1px);
  border-color:rgba(103,180,255,.24);
  background:linear-gradient(180deg, rgba(103,180,255,.085), rgba(255,255,255,.03));
}
.timeline-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.timeline-title{
  font-size:.9rem;
  font-weight:800;
}
.timeline-meta{
  font-size:.76rem;
  color:var(--muted);
}
.notification-list{
  display:grid;
  gap:12px;
}
.notification-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border:1px solid rgba(157,189,255,.12);
}
.notification-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  flex:0 0 auto;
  margin-top:5px;
}
.dot-blue{background:var(--blue)}
.dot-green{background:var(--green)}
.dot-amber{background:var(--amber)}
.dot-red{background:var(--red)}
@media (max-width: 1180px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3,.hero-grid,.meeting-layout,.permission-card,.permission-body,.settings-grid,.grid-2,.hierarchy-grid{grid-template-columns:1fr}
}
@media (max-width: 900px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{
    position:fixed;
    top:0;
    left:0;
    width:min(82vw,300px);
    height:100vh;
    z-index:120;
    transform:translateX(-106%);
    transition:transform .22s ease;
  }
  .sidebar.mobile-open,
  body.sidebar-open .sidebar{transform:translateX(0)}
  .topbar-menu{display:grid}
  .main::before{inset:0}
  .topbar{padding:16px}
  .page{padding:16px}
  .login-shell{padding:22px 14px 18px}
  .login-top,.login-bottom{width:min(980px,100%)}
  .login-wave{left:8%;right:8%;top:46%;height:200px}
  .login-orbit{top:10%;right:2%;width:180px;height:180px}
  .login-brand-tile{width:auto;height:118px}
  .login-brand-static .login-brand-tile{min-width:200px}
  .login-logo-rail-frame{grid-template-columns:1fr;gap:16px}
  .logo-lane-divider{display:none}
  .login-card{padding:26px 24px 22px}
}
@media (max-width: 640px){
  .login-shell{gap:20px;padding:18px 12px 16px}
  .login-top,.login-bottom{width:100%}
  .login-center{min-height:auto}
  .login-wave{left:0;right:0;top:45%;height:154px}
  .login-orbit,.login-streaks{display:none}
  .login-brand-static{padding:4px 0 12px}
  .login-brand-static .login-brand-tile{min-width:160px;height:88px;padding:10px}
  .login-brand-tile img{max-height:50px}
  .login-card{padding:22px 18px 20px;border-radius:22px}
  .login-emblem{width:68px;height:68px}
  .login-card h2{font-size:1.2rem}
  .login-meta{flex-direction:column;align-items:center}
  .marquee-shell::before,.marquee-shell::after{width:48px}
  .login-logo-rail-frame{padding:14px 14px 12px}
  .logo-lane-label{font-size:.68rem;letter-spacing:.22em}
  .marquee-track{animation-duration:24s}
  .marquee-tile{width:84px;height:84px;padding:10px}
  .marquee-tile img{max-height:46px}
}
@media (max-width: 420px){
  .login-brand-static .login-brand-tile{min-width:148px;height:82px}
  .login-card{padding:22px 16px 18px}
  .login-meta{gap:8px}
}
.keyboard-nav .nav-item:focus,
.keyboard-nav .btn:focus,
.keyboard-nav button:focus,
.keyboard-nav a:focus,
.keyboard-nav input:focus,
.keyboard-nav select:focus,
.keyboard-nav textarea:focus{
  outline:2px solid var(--blue, #67b4ff);
  outline-offset:2px
}
#toast-container{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:380px;
  pointer-events:none
}
.toast{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  background:var(--panel-2, #0e192e);
  border-radius:14px;
  border:1px solid var(--line-strong, rgba(157,189,255,.22));
  box-shadow:var(--shadow-soft);
  transform:translateX(120%);
  opacity:0;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;
  pointer-events:auto
}
.toast-visible{
  transform:translateX(0);
  opacity:1
}
.toast-success{border-left:3px solid var(--green, #25d89b)}
.toast-error{border-left:3px solid var(--red, #f16f86)}
.toast-warning{border-left:3px solid var(--amber, #f0bf62)}
.toast-info{border-left:3px solid var(--blue, #67b4ff)}
.toast-icon{
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:.75rem;
  font-weight:900;
  flex-shrink:0
}
.toast-success .toast-icon{background:rgba(37,216,155,.16);color:var(--green, #25d89b)}
.toast-error .toast-icon{background:rgba(241,111,134,.16);color:var(--red, #f16f86)}
.toast-warning .toast-icon{background:rgba(240,191,98,.16);color:var(--amber, #f0bf62)}
.toast-info .toast-icon{background:rgba(103,180,255,.16);color:var(--blue, #67b4ff)}
.toast-message{
  flex:1;
  font-size:.85rem;
  line-height:1.4;
  color:var(--text, #e1eaf6)
}
.toast-action{
  padding:8px 14px;
  border-radius:10px;
  border:none;
  background:rgba(103,180,255,.12);
  color:var(--blue-2, #8fd8ff);
  font-size:.75rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease
}
.toast-action:hover{background:rgba(103,180,255,.22)}
.toast-overlay{
  position:fixed;
  inset:0;
  background:rgba(5,11,22,.78);
  z-index:9998;
  display:flex;
  place-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .25s ease
}
.confirm-visible{opacity:1}
.confirm-dialog{
  background:var(--panel-2, #0e192e);
  border-radius:20px;
  border:1px solid var(--line-strong, rgba(157,189,255,.22));
  padding:28px 32px;
  max-width:380px;
  text-align:center;
  box-shadow:var(--shadow)
}
.confirm-title{
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:10px;
  color:var(--text, #e1eaf6)
}
.confirm-message{
  font-size:.9rem;
  color:var(--muted, #8f9fb9);
  margin-bottom:24px;
  line-height:1.5
}
.confirm-actions{
  display:flex;
  gap:12px;
  justify-content:center
}
.confirm-cancel,.confirm-ok{
  padding:12px 24px;
  border-radius:12px;
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease
}
.confirm-cancel{
  background:transparent;
  border:1px solid var(--line-strong, rgba(157,189,255,.22));
  color:var(--muted, #8f9fb9)
}
.confirm-ok{
  background:var(--blue, #67b4ff);
  border:none;
  color:#050b16
}
.confirm-ok:hover{background:var(--blue-2, #8fd8ff)}
.skeleton{
  background:linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 75%);
  background-size:200% 100%;
  animation:skeleton-pulse 1.5s ease-in-out infinite;
  border-radius:8px
}
@keyframes skeleton-pulse{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.error-state,.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:48px 24px;
  gap:12px
}
.error-icon,.empty-icon{
  font-size:2.5rem;
  color:var(--muted, #8f9fb9);
  margin-bottom:8px
}
.error-title,.empty-title{
  font-size:1.1rem;
  font-weight:700;
  color:var(--text, #e1eaf6)
}
.error-message,.empty-message{
  font-size:.9rem;
  color:var(--muted, #8f9fb9);
  max-width:320px;
  line-height:1.5
}
.error-retry,.empty-action{
  margin-top:8px;
  padding:12px 28px;
  border-radius:12px;
  border:none;
  background:var(--blue, #67b4ff);
  color:#050b16;
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease
}
.error-retry:hover,.empty-action:hover{background:var(--blue-2, #8fd8ff)}
.breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.75rem;
  color:var(--muted, #8f9fb9);
  margin-bottom:8px
}
.breadcrumb-item{
  display:flex;
  align-items:center;
  gap:8px
}
.breadcrumb-item::after{
  content:"›";
  margin-left:8px;
  opacity:.5
}
.breadcrumb-item:last-child::after{display:none}
.breadcrumb-link{
  color:var(--muted, #8f9fb9);
  text-decoration:none;
  transition:color .2s ease
}
.breadcrumb-link:hover{color:var(--blue, #67b4ff)}
.breadcrumb-current{
  color:var(--text, #e1eaf6);
  font-weight:600
}
.shortcuts-panel{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:var(--panel-2, #0e192e);
  border-radius:20px;
  border:1px solid var(--line-strong, rgba(157,189,255,.22));
  padding:28px 32px;
  min-width:320px;
  box-shadow:var(--shadow);
  z-index:10000;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease
}
.shortcuts-visible{opacity:1;pointer-events:auto}
.shortcuts-panel h3{
  font-size:1rem;
  margin-bottom:20px;
  color:var(--text, #e1eaf6)
}
.shortcut-item{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid rgba(157,189,255,.06)
}
.shortcut-key{
  font-family:monospace;
  background:rgba(103,180,255,.1);
  padding:4px 10px;
  border-radius:6px;
  font-size:.75rem;
  color:var(--blue, #67b4ff)
}
.shortcut-desc{
  font-size:.85rem;
  color:var(--muted, #8f9fb9)
}
.keyboard-hint{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:.65rem;
  color:var(--muted, #8f9fb9);
  background:rgba(255,255,255,.04);
  padding:3px 8px;
  border-radius:6px;
  pointer-events:none
}
.topbar-search{position:relative}
.topbar-search input{font-size:.8rem;padding-right:60px}
.footer-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  margin-top:auto;
  border-top:1px solid rgba(157,189,255,.08)
}
.footer-nav-pages{
  display:flex;
  gap:8px
}
.footer-nav-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid var(--line-strong, rgba(157,189,255,.22));
  background:transparent;
  color:var(--muted, #8f9fb9);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all .2s ease
}
.footer-nav-btn:hover:not(:disabled){
  background:rgba(103,180,255,.1);
  color:var(--text, #e1eaf6)
}
.footer-nav-btn:disabled{
  opacity:.4;
  cursor:not-allowed
}
.footer-nav-info{
  font-size:.75rem;
  color:var(--muted, #8f9fb9)
}
.sort-filter-bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  flex-wrap:wrap
}
.sort-filter-bar select,.sort-filter-bar button{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--line-strong, rgba(157,189,255,.22));
  background:transparent;
  color:var(--muted, #8f9fb9);
  font-size:.75rem;
  cursor:pointer;
  transition:all .2s ease
}
.sort-filter-bar select:hover,.sort-filter-bar button:hover{
  background:rgba(103,180,255,.08);
  color:var(--text, #e1eaf6)
}
.export-actions{
  display:flex;
  gap:8px;
  margin-left:auto
}
.export-btn{
  padding:8px 14px;
  border-radius:10px;
  border:1px solid var(--line-strong, rgba(157,189,255,.22));
  background:transparent;
  color:var(--muted, #8f9fb9);
  font-size:.75rem;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease
}
.export-btn:hover{
  background:rgba(103,180,255,.1);
  color:var(--blue, #67b4ff)
}
.offline-banner{
  position:fixed;
  top:0;
  left:0;
  right:0;
  background:var(--amber, #f0bf62);
  color:#050b16;
  text-align:center;
  padding:8px;
  font-size:.8rem;
  font-weight:700;
  z-index:10001;
  transform:translateY(-100%);
  transition:transform .3s ease
}
.offline-banner-visible{transform:translateY(0)}
.search-highlight{
  background:rgba(240,191,98,.35);
  color:inherit;
  padding:1px 4px;
  border-radius:4px
}
.table-wrap{
  overflow-x:auto;
  border-radius:16px;
  background:var(--panel, rgba(10,19,35,.86));
  border:1px solid rgba(157,189,255,.08)
}
table{
  width:100%;
  border-collapse:collapse;
  font-size:.85rem
}
th,td{
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid rgba(157,189,255,.06)
}
th{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted, #8f9fb9);
  font-weight:700;
  background:rgba(255,255,255,.02);
  position:sticky;
  top:0;
  z-index:1
}
th.sortable{
  cursor:pointer;
  transition:background .2s ease
}
th.sortable:hover{
  background:rgba(103,180,255,.08)
}
th.sortable::after{
  content:"";
  margin-left:6px;
  opacity:.4
}
th[data-dir="asc"]::after{content:"↑"}
th[data-dir="desc"]::after{content:"↓"}
tr{transition:background .15s ease}
tr:hover{background:rgba(103,180,255,.04)}
tr.selected{background:rgba(103,180,255,.1)}
td{vertical-align:middle}
td strong{color:var(--text, #e1eaf6)}
.action-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.table-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  border-top:1px solid rgba(157,189,255,.08);
  flex-wrap:wrap;
  gap:12px
}
.pagination-info{
  font-size:.8rem;
  color:var(--muted, #8f9fb9)
}
.pagination-controls{
  display:flex;
  align-items:center;
  gap:8px
}
.pagination-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(157,189,255,.15);
  background:transparent;
  color:var(--muted, #8f9fb9);
  cursor:pointer;
  transition:all .2s ease
}
.pagination-btn:hover:not(:disabled){
  background:rgba(103,180,255,.1);
  color:var(--text, #e1eaf6)
}
.pagination-btn:disabled{
  opacity:.35;
  cursor:not-allowed
}
.pagination-current{
  font-size:.8rem;
  color:var(--muted, #8f9fb9);
  padding:0 12px
}
.pagination-size select{
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(157,189,255,.15);
  background:transparent;
  color:var(--text, #e1eaf6);
  font-size:.75rem;
  cursor:pointer
}
.quick-actions-menu{
  position:relative;
  display:inline-block
}
.quick-actions-btn{
  width:32px;
  height:32px;
  border-radius:8px;
  border:none;
  background:rgba(255,255,255,.04);
  color:var(--muted, #8f9fb9);
  cursor:pointer;
  transition:all .2s ease
}
.quick-actions-btn:hover{
  background:rgba(103,180,255,.12);
  color:var(--text, #e1eaf6)
}
.quick-actions-dropdown{
  position:absolute;
  right:0;
  top:100%;
  margin-top:4px;
  min-width:160px;
  background:var(--panel-2, #0e192e);
  border-radius:12px;
  border:1px solid rgba(157,189,255,.15);
  box-shadow:var(--shadow);
  z-index:100;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:all .2s ease
}
.quick-actions-dropdown-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0)
}
.quick-actions-item{
  display:block;
  width:100%;
  padding:10px 14px;
  border:none;
  background:transparent;
  color:var(--text, #e1eaf6);
  text-align:left;
  cursor:pointer;
  transition:background .15s ease
}
.quick-actions-item:hover{
  background:rgba(103,180,255,.08)
}
.quick-actions-item:first-child{border-radius:12px 12px 0 0}
.quick-actions-item:last-child{border-radius:0 0 12px 12px}
.page-transition-enter{
  opacity:0;
  transform:translateY(12px)
}
.page-transition-enter-active{
  opacity:1;
  transform:translateY(0);
  transition:opacity .25s ease,transform .25s ease
}
.page-transition-exit{
  opacity:1
}
.page-transition-exit-active{
  opacity:0;
  transition:opacity .15s ease
}
.sort-filter-bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  flex-wrap:wrap
}
.sort-filter-bar select,.sort-filter-bar button{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(157,189,255,.22);
  background:transparent;
  color:var(--muted, #8f9fb9);
  font-size:.75rem;
  cursor:pointer;
  transition:all .2s ease
}
.sort-filter-bar select:hover,.sort-filter-bar button:hover{
  background:rgba(103,180,255,.08);
  color:var(--text, #e1eaf6)
}
.export-actions{
  display:flex;
  gap:8px;
  margin-left:auto
}
.export-btn{
  padding:8px 14px;
  border-radius:10px;
  border:1px solid rgba(157,189,255,.22);
  background:transparent;
  color:var(--muted, #8f9fb9);
  font-size:.75rem;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease
}
.export-btn:hover{
  background:rgba(103,180,255,.1);
  color:var(--blue, #67b4ff)
}
.action-menu-item{
  display:flex;
  align-items:center;
  gap:8px
}
.action-menu-divider{
  height:1px;
  background:rgba(157,189,255,.1);
  margin:4px 0
}
.checkbox-cell{
  width:40px
}
input[type="checkbox"]{
  width:18px;
  height:18px;
  cursor:pointer;
  accent-color:var(--blue, #67b4ff)
}
.empty-table-icon{
  font-size:3rem;
  opacity:.3;
  margin-bottom:12px
}
.table-actions-header{
  display:flex;
  align-items:center;
  gap:8px
}
.table-row-count{
  font-size:.8rem;
  color:var(--muted, #8f9fb9);
  margin-left:auto
}
.status-active,.tone-green{color:var(--green, #25d89b)}
.status-inactive,.tone-amber{color:var(--amber, #f0bf62)}
.status-pending{color:var(--blue, #67b4ff)}
.status-error{color:var(--red, #f16f86)}
.card-with-table .card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px
}
.filters{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 0 16px;
  flex-wrap:wrap
}
.filter-chip{
  padding:6px 12px;
  border-radius:999px;
  font-size:.75rem;
  cursor:pointer;
  transition:all .2s ease;
  border:1px solid transparent
}
.filter-chip.active{
  background:rgba(103,180,255,.15);
  border-color:rgba(103,180,255,.25);
  color:var(--blue-2, #8fd8ff)
}
.filter-chip:hover:not(.active){
  background:rgba(255,255,255,.04)
}
.column-visibility-toggle{
  position:relative;
  display:inline-block
}
.column-visibility-dropdown{
  position:absolute;
  right:0;
  top:100%;
  margin-top:4px;
  min-width:180px;
  max-height:300px;
  overflow-y:auto;
  background:var(--panel-2, #0e192e);
  border-radius:12px;
  border:1px solid rgba(157,189,255,.15);
  box-shadow:var(--shadow);
  z-index:100
}
.column-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  cursor:pointer;
  transition:background .15s ease
}
.column-toggle:hover{background:rgba(103,180,255,.08)}
.column-toggle input{margin:0}
.column-toggle label{
  flex:1;
  cursor:pointer;
  font-size:.8rem
}
.row-details-panel{
  display:none;
  padding:16px;
  background:rgba(255,255,255,.02);
  border-top:1px solid rgba(157,189,255,.08)
}
.row-details-open{display:block}
@keyframes rowExpand{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}
.row-details-panel{
  animation:rowExpand .2s ease
}
.dashboard-quick-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px
}
.quick-action-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid rgba(157,189,255,.15);
  background:rgba(255,255,255,.03);
  color:var(--text, #e1eaf6);
  font-size:.8rem;
  cursor:pointer;
  transition:all .2s ease
}
.quick-action-btn:hover{
  background:rgba(103,180,255,.1);
  border-color:rgba(103,180,255,.3);
  transform:translateY(-2px)
}
.quick-action-icon{font-size:1rem}
.quick-action-label{font-weight:600}
.quick-actions-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
  padding:4px 0
}
.quick-actions-grid .quick-action-btn{
  justify-content:flex-start
}
.activity-feed{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:320px;
  overflow-y:auto
}
.activity-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.02);
  transition:background .2s ease
}
.activity-item:hover{
  background:rgba(103,180,255,.06)
}
.activity-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(103,180,255,.2), rgba(103,180,255,.08));
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:.85rem;
  color:var(--blue-2, #8fd8ff)
}
.activity-content{
  flex:1;
  min-width:0
}
.activity-name{
  font-size:.85rem;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.activity-meta{
  font-size:.72rem;
  color:var(--muted, #8f9fb9)
}
.activity-status{
  width:8px;
  height:8px;
  border-radius:50%
}
.activity-status.active{background:var(--green, #25d89b)}
.activity-status.inactive{background:var(--amber, #f0bf62)}
.activity-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px;
  gap:8px
}
.activity-empty-icon{font-size:2rem;opacity:.4}
.activity-empty-text{font-size:.85rem;color:var(--muted, #8f9fb9)}
.mini-charts-grid{
  display:grid;
  gap:16px
}
.mini-chart-card{
  padding:12px 0
}
.mini-chart-title{
  font-size:.75rem;
  font-weight:700;
  color:var(--muted, #8f9fb9);
  margin-bottom:12px
}
.mini-chart-donut{
  display:flex;
  justify-content:center;
  margin-bottom:12px
}
.donut-chart{
  width:100px;
  height:100px;
  transform:rotate(0)
}
.donut-center-text{
  font-size:.35rem;
  font-weight:700;
  fill:var(--text, #e1eaf6)
}
.mini-chart-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px
}
.legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.7rem
}
.legend-dot{
  width:8px;
  height:8px;
  border-radius:50%
}
.legend-label{
  color:var(--muted, #8f9fb9)
}
.legend-value{
  font-weight:700;
  color:var(--text, #e1eaf6)
}
.mini-chart-comparison{
  padding:8px 0
}
.comparison-bar{
  display:flex;
  height:28px;
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.05)
}
.comparison-seg{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:width .5s ease
}
.comparison-seg.active{
  background:var(--green, #25d89b);
  color:#050b16
}
.comparison-seg.inactive{
  background:var(--amber, #f0bf62);
  color:#050b16;
  flex-direction:row-reverse
}
.comparison-label{
  font-size:.65rem;
  font-weight:600
}
.comparison-value{
  font-size:.7rem;
  font-weight:800
}
.hero-side-card.highlight{
  background:linear-gradient(135deg, rgba(103,180,255,.12), rgba(103,180,255,.04));
  border-color:rgba(103,180,255,.25)
}
.hero-side-card .value.large{
  font-size:2.2rem
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px
}
.grid-3>.card{
  min-width:0
}
@media (max-width: 768px){
  #toast-container{
    left:16px;
    right:16px;
    bottom:16px;
    max-width:none
  }
  .toast{flex-wrap:wrap}
  .shortcuts-panel{
    width:90%;
    max-width:320px
  }
  .app-shell{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .quick-actions-grid{grid-template-columns:1fr}
  .mini-charts-grid{grid-template-columns:1fr}
  .dashboard-quick-actions{flex-wrap:wrap}
  .hero-side{display:none}
}

/* Phase 2: Workforce Governance */
.wg-subnav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
}
.wg-subnav-btn{
  border:1px solid rgba(157,189,255,.18);
  background:rgba(255,255,255,.03);
  color:#dce8ff;
  border-radius:999px;
  padding:9px 14px;
  font-size:.78rem;
  font-weight:700;
}
.wg-subnav-btn.active{
  background:rgba(103,180,255,.18);
  border-color:rgba(103,180,255,.32);
}
.wg-section-stack{
  display:grid;
  gap:14px;
}
.wg-form-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.wg-filter-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
.wg-inline-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.wg-inline-controls input,
.wg-inline-controls select{
  min-width:120px;
}
.wg-actions-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.wg-checkbox-field{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:26px;
}
.wg-full-width{
  grid-column:1 / -1;
}
.wg-inline-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.wg-detail-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.wg-checklist-wrap{
  margin-top:12px;
  border:1px solid rgba(157,189,255,.1);
  border-radius:16px;
  padding:12px;
  background:rgba(255,255,255,.02);
}
.wg-progress-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  font-size:.82rem;
}
.wg-progress-bar{
  width:100%;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(157,189,255,.1);
  overflow:hidden;
}
.wg-progress-bar>span{
  display:block;
  height:100%;
  background:linear-gradient(90deg, rgba(103,180,255,.68), rgba(143,216,255,.95));
}
.wg-checklist{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:grid;
  gap:6px;
}
.wg-checklist li{
  display:grid;
  grid-template-columns:24px 1.3fr 90px 140px;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(157,189,255,.08);
  background:rgba(255,255,255,.02);
  font-size:.78rem;
}
.wg-check-icon{
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:.74rem;
  font-weight:800;
}
.wg-check-icon.ok{
  color:var(--positive-soft);
  background:rgba(37,216,155,.14);
}
.wg-check-icon.bad{
  color:var(--danger-soft);
  background:rgba(241,111,134,.14);
}
.wg-banner-hold{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(241,111,134,.32);
  background:rgba(241,111,134,.12);
  color:#ffd1da;
  font-weight:700;
  font-size:.8rem;
}
.wg-transfer-list{
  display:grid;
  gap:10px;
}
.wg-transfer-item{
  padding:12px;
  border:1px solid rgba(157,189,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  display:grid;
  gap:10px;
}
.wg-transfer-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  font-size:.8rem;
}
.wg-transfer-track{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.wg-transfer-step{
  border:1px solid rgba(157,189,255,.1);
  background:rgba(255,255,255,.02);
  border-radius:12px;
  padding:8px;
  display:grid;
  gap:4px;
}
.wg-step-title{
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted-2);
  font-weight:700;
}

@media (max-width: 1280px){
  .wg-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .wg-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .wg-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .wg-checklist li{grid-template-columns:24px 1fr 90px 120px;}
}
@media (max-width: 780px){
  .wg-form-grid,
  .wg-filter-grid,
  .wg-detail-grid,
  .wg-transfer-track{grid-template-columns:1fr;}
  .wg-checklist li{grid-template-columns:24px 1fr;}
  .wg-checklist li span:nth-child(3),
  .wg-checklist li span:nth-child(4){justify-self:start;}
}
.sla-widget{display:grid;gap:3px}
.sla-bar{height:6px;border-radius:3px;background:rgba(157,189,255,.12);overflow:hidden}
.sla-bar>span{display:block;height:100%;border-radius:3px;transition:width .3s}
.sla-bar>.tone-green{background:var(--green)}
.sla-bar>.tone-amber{background:var(--amber)}
.sla-bar>.tone-red{background:var(--red)}
.duplicate-row{background:rgba(241,111,134,.06)}
.btn-link{background:none;border:none;color:var(--blue);text-decoration:underline;cursor:pointer;padding:0;font:inherit;text-align:left}
.btn-link:hover{color:var(--blue-2)}

/* ── Usability additions (offline, loading, skeletons, empty, print) ── */

.offline-banner{position:fixed;top:0;left:0;right:0;z-index:9000;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px;background:rgba(241,111,134,.95);color:#1a0608;font:600 13px/1.3 inherit;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.offline-banner-dot{width:8px;height:8px;border-radius:50%;background:#1a0608;animation:offline-pulse 1.4s ease-in-out infinite}
@keyframes offline-pulse{0%,100%{opacity:1}50%{opacity:.35}}
body.is-offline .topbar{padding-top:12px}

.login-btn[aria-busy="true"],
.login-btn.is-loading{position:relative;color:transparent !important;pointer-events:none;opacity:.85}
.login-btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Skeleton loader (use .skeleton class on any element to animate shimmer) */
.skeleton{position:relative;overflow:hidden;background:rgba(157,189,255,.08);border-radius:6px;color:transparent !important;user-select:none}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(157,189,255,.14) 50%,transparent 100%);transform:translateX(-100%);animation:skeleton-shimmer 1.4s ease-in-out infinite}
@keyframes skeleton-shimmer{to{transform:translateX(100%)}}
.skeleton-row{height:14px;margin:8px 0;border-radius:6px}
.skeleton-block{height:80px;margin:12px 0;border-radius:12px}
.main.is-loading::before{content:"";position:absolute;top:64px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--blue) 50%,transparent 100%);background-size:200% 100%;animation:skeleton-shimmer 1.2s linear infinite;z-index:50}
.main{position:relative}

/* Standard empty state card (reuse on every page) */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:36px 24px;text-align:center;background:rgba(20,32,52,.55);border:1px dashed rgba(157,189,255,.22);border-radius:18px;margin:16px 0;color:var(--text)}
.empty-table-icon,.empty-state-icon{font-size:34px;line-height:1;opacity:.85}
.empty-title{font-weight:700;font-size:15px;letter-spacing:.02em}
.empty-message{color:var(--text-muted,rgba(225,234,246,.7));font-size:13px;max-width:42ch}
.empty-state .btn{margin-top:6px}

/* Inline form error/credentials block */
.inline-credentials{background:rgba(37,216,155,.08);border:1px solid rgba(37,216,155,.35);border-radius:12px;padding:12px 14px;margin:12px 0;font:600 13px/1.5 inherit;color:#caf6e3}
.inline-credentials kbd{display:inline-block;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.4);font-family:ui-monospace,monospace;font-size:12px}

/* Password strength meter (recovery flow) */
.pw-strength{display:grid;gap:4px;margin:-4px 0 8px}
.pw-strength-bar{height:5px;border-radius:3px;background:rgba(157,189,255,.12);overflow:hidden}
.pw-strength-bar>span{display:block;height:100%;width:0;transition:width .25s ease,background .25s ease;border-radius:3px;background:var(--red)}
.pw-strength-bar[data-score="1"]>span{width:25%;background:var(--red)}
.pw-strength-bar[data-score="2"]>span{width:50%;background:var(--amber,#f5b94d)}
.pw-strength-bar[data-score="3"]>span{width:75%;background:#8bd2ff}
.pw-strength-bar[data-score="4"]>span{width:100%;background:var(--green)}
.pw-strength-label{font-size:11px;color:rgba(225,234,246,.7);letter-spacing:.04em;text-transform:uppercase}

/* OTP countdown chip */
.recovery-countdown{font-size:12px;color:rgba(225,234,246,.65);margin-top:6px}
.recovery-countdown[data-tone="warn"]{color:var(--amber,#f5b94d)}
.recovery-countdown[data-tone="expired"]{color:var(--red)}
.recovery-secondary-btn[disabled]{opacity:.5;cursor:not-allowed}

/* Global search dropdown */
.topbar-search{position:relative}
.global-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:380px;overflow-y:auto;background:var(--panel);border:1px solid rgba(157,189,255,.22);border-radius:14px;box-shadow:var(--shadow);padding:6px;display:none;z-index:80}
.global-search-results.is-open{display:block}
.global-search-group{padding:6px 8px 4px;font:700 10px/1 inherit;text-transform:uppercase;letter-spacing:.12em;color:rgba(225,234,246,.55)}
.global-search-result{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;color:var(--text);font-size:13px}
.global-search-result:hover,.global-search-result.is-active{background:rgba(103,180,255,.12)}
.global-search-result .grs-meta{font-size:11px;color:rgba(225,234,246,.55)}
.global-search-empty{padding:14px;font-size:12px;color:rgba(225,234,246,.6);text-align:center}

/* Reduced motion: kill background animation/marquee for users who request it */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .login-ambient,.login-wave,.login-orbit,.login-streaks,.login-particles{animation:none !important}
  /* Keep the brand marquees rolling — they're the main visual content of the login screen, not decorative ambient motion. */
  .marquee-track{animation:logoMarquee 28s linear infinite !important}
  .logo-lane-bodies .marquee-track{animation-duration:20s !important}
  .login-brand-track{animation:topLogoMarquee 34s linear infinite !important}
}

/* Print: hide chrome and let the main content flow on white paper */
@media print{
  body{background:#fff !important;color:#000 !important}
  .sidebar,.topbar,.topbar-actions,#sidebar-backdrop,.offline-banner,#toast-container,.shortcuts-panel,#login-screen{display:none !important}
  .main{padding:0 !important}
  .page{display:block !important;break-inside:auto}
  .card,.panel,table{background:#fff !important;color:#000 !important;border-color:#ccc !important;box-shadow:none !important}
  a{color:#000 !important;text-decoration:underline}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Responsive R1 foundation ─────────────────────────────────────── */

/* A) Nav group styles (desktop + mobile both) */
.nav-group{
  display:block;
  margin-bottom:8px;
}
.nav-group-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:8px 12px;
  background:transparent;
  border:0;
  color:var(--muted, #9aa);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  cursor:pointer;
}
.nav-group-header:hover{
  color:var(--text, #fff);
}
.nav-group-chevron{
  font-size:10px;
  opacity:0.6;
}
.nav-group.is-collapsed .nav-group-items{
  display:none;
}
.nav-group-items{
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* B) Hamburger button — desktop default hidden, shown ≤1024px */
.sidebar-toggle{
  display:none;
}
@media (max-width: 900px){
  .sidebar-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    background:transparent;
    border:0;
    color:var(--text, #fff);
    font-size:20px;
    cursor:pointer;
    border-radius:8px;
    margin-right:8px;
  }
  .sidebar-toggle:hover{
    background:var(--panel-2, rgba(255,255,255,0.05));
  }
}

/* C) Sidebar backdrop — supports JS that uses [hidden] attribute */
.sidebar-backdrop[hidden]{
  display:none;
}

/* D) Tablet (≤1024px) — narrow sidebar slightly, tighten main padding */
@media (max-width: 1024px) and (min-width: 901px){
  .sidebar{
    width:220px;
  }
  .app-shell{
    grid-template-columns:220px minmax(0,1fr);
  }
  .page{
    padding:16px;
  }
}

/* E) Mobile (<640px) — Drawer behaviour driven by body.sidebar-open */
@media (max-width: 640px){
  .sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:280px;
    max-width:80vw;
    transform:translateX(-100%);
    transition:transform 0.25s ease;
    z-index:120;
    overflow-y:auto;
  }
  body.sidebar-open .sidebar{
    transform:translateX(0);
  }
  .app-shell{
    grid-template-columns:1fr;
  }
  .main{
    margin-left:0 !important;
  }
  .page{
    padding:12px;
  }
}

/* F) Mobile grids stack into single column */
@media (max-width: 640px){
  .metric-cards,
  .wg-filter-grid,
  .grid-4,
  .grid-3,
  .grid-2,
  .stat-grid,
  .scope-grid,
  .hero-grid,
  .meeting-layout,
  .settings-grid,
  .hierarchy-grid{
    grid-template-columns:1fr !important;
    gap:12px;
  }
}

/* G) Mobile cards / tables fallback */
@media (max-width: 640px){
  .card{
    padding:14px;
  }
  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  table.table,
  .table-wrap table{
    min-width:600px;
  }
  /* Bare <table> not wrapped in .table-wrap — fall back to block-level
     horizontal scroll so the content doesn't clip on narrow viewports.
     Tables inside .table-wrap keep their normal table layout (the wrap
     handles scroll) so we don't double-scroll. */
  table:not(.table-wrap table):not([data-mobile-card]){
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }
}

/* H) Mobile modals go full-screen */
@media (max-width: 640px){
  .modal,
  .modal-card,
  .modal-content{
    width:100vw;
    height:100vh;
    max-width:100vw;
    max-height:100vh;
    border-radius:0;
    padding:16px;
  }
  .modal-backdrop{
    padding:0;
  }
}

/* I) Touch targets — 44px minimum, 16px input font to avoid iOS zoom */
@media (max-width: 640px){
  .btn,
  .nav-item,
  .nav-group-header{
    min-height:44px;
  }
  input,
  select,
  textarea{
    min-height:44px;
    font-size:16px;
  }
}

/* J) Mobile topbar / page-head tweaks */
@media (max-width: 640px){
  .page-head{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .topbar-title{
    font-size:16px;
  }
  .topbar-sub{
    font-size:12px;
  }
  .topbar{
    padding:8px 12px;
  }
}

/* ── R2 — Responsive card-stacked tables (opt-in via data-mobile-card) ── */
/*
 * Tables with the attribute data-mobile-card become a vertical stack of
 * card-like rows below 640px. Each <td> renders as a labelled row using its
 * data-label attribute as the field name. Tables without the attribute keep
 * the R1 horizontal-scroll fallback unchanged.
 */
@media (max-width: 640px){
  table.table[data-mobile-card]{
    min-width: 0;
    display: block;
    width: 100%;
  }
  table.table[data-mobile-card] thead{
    /* Headers hidden on mobile — data-label on each <td> takes over. */
    display: none;
  }
  table.table[data-mobile-card] tbody,
  table.table[data-mobile-card] tr{
    display: block;
    width: 100%;
  }
  table.table[data-mobile-card] tr{
    background: rgba(8, 16, 34, 0.55);
    border: 1px solid rgba(90,136,231,.18);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  table.table[data-mobile-card] tr + tr{
    margin-top: 0;
  }
  table.table[data-mobile-card] td{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    border: 0;
    border-bottom: 1px dashed rgba(90,136,231,.14);
    text-align: right;
    word-break: break-word;
  }
  table.table[data-mobile-card] td:last-child{
    border-bottom: 0;
  }
  table.table[data-mobile-card] td::before{
    content: attr(data-label);
    flex: 0 0 40%;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted, #9aa);
    text-align: left;
    font-weight: 600;
  }
  /* Cells with no data-label (e.g. action buttons) stack full-width. */
  table.table[data-mobile-card] td:not([data-label])::before{
    content: none;
  }
  table.table[data-mobile-card] td:not([data-label]){
    justify-content: flex-end;
  }
  /* Empty-state row spans the whole card cleanly. */
  table.table[data-mobile-card] td.empty-state-cell,
  table.table[data-mobile-card] td[colspan]{
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  /* Status chips and small action buttons need room on the right. */
  table.table[data-mobile-card] td .status-chip,
  table.table[data-mobile-card] td .btn,
  table.table[data-mobile-card] td .ghost-btn{
    flex-shrink: 0;
  }
}

/* ── R3 — Mobile form polish ────────────────────────────────────────────── */
/*
 * Catches the form patterns R1 missed:
 *   - .modal-overlay (newer pages use this instead of .modal-backdrop)
 *   - inline `style="grid-template-columns:repeat(2,...)"` form grids
 *   - action button rows on very narrow screens
 */
@media (max-width: 640px){
  /* Mobile full-screen modal — covers .modal-overlay too. */
  .modal-overlay{
    align-items: flex-start;
    padding: 0;
  }
  .modal-overlay > .card,
  .modal-overlay > .modal,
  .modal-overlay > .modal-card,
  .modal-overlay > div{
    width: 100vw !important;
    min-height: 100vh;
    max-width: 100vw !important;
    border-radius: 0;
    margin: 0;
  }

  /* Inline 2-column form grids collapse to single column. */
  [style*="grid-template-columns:repeat(2"]{
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(2"]{
    grid-template-columns: 1fr !important;
  }

  /* Textareas with inline width:100% need explicit min-height for tap. */
  textarea[style*="width:100%"]{
    min-height: 88px;
  }

  /* Field grids inside forms get tighter gaps on mobile. */
  .wg-form-grid,
  .wg-detail-grid,
  .wg-filter-grid{
    gap: 10px;
  }
}

/* Very narrow screens — buttons in action rows go full-width for thumb reach. */
@media (max-width: 480px){
  .action-row,
  .wg-actions-row{
    flex-direction: column;
    align-items: stretch;
  }
  .action-row > .btn,
  .action-row > button,
  .wg-actions-row > .btn,
  .wg-actions-row > button{
    width: 100%;
  }
  /* But preserve horizontal layout for chip/badge clusters and small icon rows. */
  .action-row.inline,
  .wg-actions-row.inline{
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Conversion Dashboard upgrade — hero KPIs, SVG charts, ranking, insights
   ========================================================================== */

.grid-6{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(6,minmax(0,1fr));
}

.kpi-card{
  position:relative;
  display:grid;
  gap:10px;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(157,189,255,.12);
  background:
    linear-gradient(180deg, rgba(103,180,255,.05), rgba(255,255,255,.012)),
    rgba(10,18,32,.86);
  box-shadow:0 14px 34px rgba(0,0,0,.24);
  overflow:hidden;
}
.kpi-card::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120% 80% at 100% 0%, rgba(103,180,255,.10), transparent 60%);
  pointer-events:none;
}
.kpi-card-top{
  display:flex; align-items:center; gap:12px;
  position:relative;
}
.kpi-icon{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:14px;
  background:rgba(103,180,255,.14);
  color:var(--info-soft);
  border:1px solid rgba(157,189,255,.18);
}
.kpi-icon.amber{background:rgba(240,191,98,.14); color:var(--warning-soft); border-color:rgba(240,191,98,.25)}
.kpi-icon.green{background:rgba(37,216,155,.14); color:var(--positive-soft); border-color:rgba(37,216,155,.25)}
.kpi-icon.red{background:rgba(241,111,134,.14); color:var(--danger-soft); border-color:rgba(241,111,134,.25)}
.kpi-icon.gold{background:rgba(214,177,93,.14); color:var(--gold-soft); border-color:rgba(214,177,93,.28)}
.kpi-icon.steel{background:rgba(74,107,153,.18); color:#cfe2ff; border-color:rgba(74,107,153,.32)}
.kpi-label{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#90a3c4;
  font-weight:600;
}
.kpi-value{
  font-size:1.75rem;
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1.05;
  position:relative;
}
.kpi-sub{
  font-size:.74rem; color:var(--muted);
}
.kpi-trend{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:600;
  padding:4px 9px; border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(157,189,255,.12);
  color:#bcd0ee;
  width:fit-content;
}
.kpi-trend.up{color:var(--positive-soft); background:rgba(37,216,155,.10); border-color:rgba(37,216,155,.22)}
.kpi-trend.down{color:var(--danger-soft); background:rgba(241,111,134,.10); border-color:rgba(241,111,134,.22)}
.kpi-trend.flat{color:#cfd9ec}

/* Chart card / SVG containers */
.chart-card{
  display:flex; flex-direction:column; gap:14px;
}
.chart-svg{ width:100%; height:auto; display:block; }
.chart-donut-row{
  display:grid;
  grid-template-columns:minmax(160px,1fr) minmax(0,1.2fr);
  gap:16px;
  align-items:center;
}
.chart-legend{
  display:grid; gap:8px;
  font-size:.78rem;
}
.legend-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.legend-left{display:inline-flex; align-items:center; gap:8px; color:#cfd9ec}
.legend-swatch{
  display:inline-block;
  width:10px; height:10px; border-radius:3px;
  background:var(--blue);
}
.legend-value{color:var(--text); font-weight:700}
.legend-pct{color:var(--muted); font-size:.72rem; margin-left:4px; font-weight:500}

/* Top performer hero card */
.top-performer{
  position:relative;
  padding:22px;
  border-radius:20px;
  border:1px solid rgba(214,177,93,.32);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(214,177,93,.16), transparent 60%),
    linear-gradient(180deg, rgba(214,177,93,.06), rgba(10,19,35,.86));
  display:grid; gap:14px;
  overflow:hidden;
}
.top-performer::after{
  content:"";
  position:absolute; right:-30px; top:-30px;
  width:160px; height:160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(214,177,93,.16), transparent 60%);
  pointer-events:none;
}
.top-performer-kicker{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-soft); font-weight:700;
  display:inline-flex; align-items:center; gap:8px;
  position:relative;
}
.top-performer-name{
  font-size:1.4rem; font-weight:700; letter-spacing:-.02em;
  position:relative;
}
.top-performer-sub{ color:#a8b8d4; font-size:.82rem; position:relative; }
.top-performer-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  margin-top:4px;
  position:relative;
}
.top-performer-stat{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(157,189,255,.12);
}
.top-performer-stat-value{font-size:1.1rem; font-weight:700; color:var(--gold-soft)}
.top-performer-stat-label{font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-top:2px}

/* Star rating */
.stars{
  display:inline-flex; gap:1px; color:#d6b15d; font-size:.85rem;
  letter-spacing:1px;
  line-height:1;
}
.stars .star-empty{color:rgba(214,177,93,.28)}
.stars.lg{font-size:1.1rem}

/* Rank badge */
.rank-badge{
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  font-size:.78rem; font-weight:700;
  background:rgba(157,189,255,.10);
  color:#cfe2ff;
  border:1px solid rgba(157,189,255,.18);
}
.rank-badge.gold{background:linear-gradient(180deg,#f1d894,#c69a3d); color:#1f1602; border-color:rgba(214,177,93,.5)}
.rank-badge.silver{background:linear-gradient(180deg,#e3eaf3,#9bafc9); color:#0c1422; border-color:rgba(157,189,255,.4)}
.rank-badge.bronze{background:linear-gradient(180deg,#e2a778,#9b5a31); color:#241006; border-color:rgba(241,170,130,.4)}

/* Insights list */
.insights-list{
  display:grid; gap:10px;
}
.insight-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(157,189,255,.10);
}
.insight-icon{
  width:30px; height:30px; flex:0 0 30px;
  display:grid; place-items:center;
  border-radius:9px;
  background:rgba(103,180,255,.14);
  color:var(--info-soft);
  border:1px solid rgba(157,189,255,.18);
}
.insight-icon.green{background:rgba(37,216,155,.12); color:var(--positive-soft); border-color:rgba(37,216,155,.25)}
.insight-icon.amber{background:rgba(240,191,98,.12); color:var(--warning-soft); border-color:rgba(240,191,98,.25)}
.insight-icon.red{background:rgba(241,111,134,.12); color:var(--danger-soft); border-color:rgba(241,111,134,.25)}
.insight-icon.gold{background:rgba(214,177,93,.12); color:var(--gold-soft); border-color:rgba(214,177,93,.28)}
.insight-text{font-size:.86rem; color:var(--text-secondary); line-height:1.5}
.insight-text strong{color:#e9f0fb}

/* Ranking + sidebar split layout */
.ds-rank-split{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:16px;
}
.ds-rank-split > *{min-width:0}

/* Conversion bucket strip */
.bucket-strip{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;
}
.bucket-pill{
  padding:5px 10px; border-radius:999px;
  font-size:.72rem; font-weight:600;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(157,189,255,.12);
  color:#bfd7f7;
}
.bucket-pill.excellent{color:var(--positive-soft); background:rgba(37,216,155,.10); border-color:rgba(37,216,155,.25)}
.bucket-pill.good{color:var(--info-soft); background:rgba(103,180,255,.10); border-color:rgba(103,180,255,.25)}
.bucket-pill.fair{color:var(--warning-soft); background:rgba(240,191,98,.10); border-color:rgba(240,191,98,.25)}
.bucket-pill.poor{color:var(--danger-soft); background:rgba(241,111,134,.10); border-color:rgba(241,111,134,.25)}

/* Conversion cells inside tables */
.table .agent-cell{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.table .conv-cell{display:flex; align-items:center; gap:10px}
.conv-pct{font-weight:700; font-size:.88rem}
.conv-pct.excellent{color:var(--positive-soft)}
.conv-pct.good{color:var(--info-soft)}
.conv-pct.fair{color:var(--warning-soft)}
.conv-pct.poor{color:var(--danger-soft)}

/* Inline horizontal bar for table rows */
.row-bar{
  display:inline-block;
  width:90px; height:6px;
  border-radius:999px;
  background:rgba(157,189,255,.10);
  position:relative;
  overflow:hidden;
}
.row-bar > i{
  display:block; height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(103,180,255,.7), rgba(143,216,255,.95));
}
.row-bar.excellent > i{background:linear-gradient(90deg, rgba(37,216,155,.7), rgba(167,241,210,.95))}
.row-bar.fair > i{background:linear-gradient(90deg, rgba(240,191,98,.7), rgba(255,216,155,.95))}
.row-bar.poor > i{background:linear-gradient(90deg, rgba(241,111,134,.7), rgba(255,192,203,.95))}

@media (max-width: 1280px){
  .grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 1180px){
  .ds-rank-split{grid-template-columns:1fr}
  .chart-donut-row{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .grid-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top-performer-stats{grid-template-columns:1fr}
}


/* ═══════════════════════════════════════════════════════════════════════════
   COMMAND CENTRE HUD DESIGN SYSTEM
   Military-ops / HUD aesthetic for the Command Centre dashboard.
   All classes prefixed with `cc-` to avoid collisions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Fonts ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Chakra+Petch:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* --- Design Tokens ---------------------------------------------------- */
.cc-stage{
  --cc-bg-deep:#040912;
  --cc-bg-1:#080F1E;
  --cc-bg-2:#0C1729;
  --cc-bg-3:#11203C;
  --cc-bg-panel:rgba(8,18,38,0.85);
  --cc-bg-panel-2:rgba(10,22,44,0.7);
  --cc-hud-line:#00B8FF;
  --cc-hud-line-soft:rgba(0,184,255,0.4);
  --cc-hud-line-faint:rgba(0,184,255,0.15);
  --cc-hud-glow:rgba(0,184,255,0.5);
  --cc-hud-deep:#1E4FD8;
  --cc-text:#E5EEF8;
  --cc-text-2:#94A8C0;
  --cc-text-3:#5A6B82;
  --cc-line:rgba(0,184,255,0.18);
  --cc-line-soft:rgba(0,184,255,0.08);
  --cc-ok:#22D67A;
  --cc-ok-soft:rgba(34,214,122,0.15);
  --cc-warn:#FFB400;
  --cc-warn-soft:rgba(255,180,0,0.15);
  --cc-crit:#FF4554;
  --cc-crit-soft:rgba(255,69,84,0.15);
}

/* --- 1. Root Container ------------------------------------------------ */
.cc-stage{
  position:relative;
  min-height:100vh;
  background:var(--cc-bg-deep);
  color:var(--cc-text);
  font-family:'Chakra Petch',Inter,system-ui,sans-serif;
  font-size:14px;
  line-height:1.5;
  overflow-x:hidden;
}
.cc-stage::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(var(--cc-line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--cc-line-soft) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
  z-index:0;
}
.cc-stage>*{position:relative;z-index:1}

/* --- 2. HUD Frame ----------------------------------------------------- */
.cc-hud{
  border:1px solid var(--cc-hud-line-faint);
  border-radius:4px;
  margin:12px;
  padding:0;
  position:relative;
  overflow:hidden;
  background:var(--cc-bg-1);
}
/* Corner bracket decorations */
.cc-hud::before,
.cc-hud::after{
  content:'';
  position:absolute;
  width:20px;height:20px;
  border-color:var(--cc-hud-line-soft);
  border-style:solid;
  pointer-events:none;
  z-index:5;
}
.cc-hud::before{
  top:0;left:0;
  border-width:2px 0 0 2px;
}
.cc-hud::after{
  bottom:0;right:0;
  border-width:0 2px 2px 0;
}

/* --- 3. Top Bar ------------------------------------------------------- */
.cc-topbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  padding:10px 20px;
  border-bottom:1px solid var(--cc-line);
  background:var(--cc-bg-panel);
}
.cc-topbar-brand{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:800;
  font-size:18px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--cc-hud-line);
  white-space:nowrap;
}
.cc-topbar-status{
  text-align:center;
  font-size:12px;
  color:var(--cc-text-2);
  font-family:'JetBrains Mono',monospace;
}
.cc-topbar-user{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--cc-text-2);
  white-space:nowrap;
}

/* --- 4. Tabs ---------------------------------------------------------- */
.cc-tabs{
  display:flex;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
  border-bottom:1px solid var(--cc-line);
  background:var(--cc-bg-2);
}
.cc-tabs::-webkit-scrollbar{display:none}
.cc-tab{
  position:relative;
  padding:10px 20px;
  font-family:'Chakra Petch',sans-serif;
  font-weight:600;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--cc-text-3);
  background:transparent;
  border:none;
  cursor:pointer;
  white-space:nowrap;
  transition:color .2s,text-shadow .2s;
}
.cc-tab:hover{color:var(--cc-text)}
.cc-tab.active{
  color:var(--cc-hud-line);
  text-shadow:0 0 10px var(--cc-hud-glow);
}
.cc-tab.active::after{
  content:'';
  position:absolute;
  bottom:0;left:12px;right:12px;
  height:2px;
  background:var(--cc-hud-line);
  box-shadow:0 0 8px var(--cc-hud-glow);
  border-radius:2px 2px 0 0;
}
/* Red dot alert indicator */
.cc-tab.alert::after{
  content:'';
  position:absolute;
  top:8px;right:8px;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--cc-crit);
  box-shadow:0 0 6px var(--cc-crit);
}
.cc-tab.active.alert::after{
  top:8px;right:8px;
  left:auto;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--cc-crit);
  box-shadow:0 0 6px var(--cc-crit);
  height:7px;
}

/* --- 5. Page Content -------------------------------------------------- */
.cc-page{display:none;padding:20px}
.cc-page.active{display:block}

/* --- 6. Panel --------------------------------------------------------- */
.cc-panel{
  position:relative;
  background:var(--cc-bg-panel);
  border:1px solid var(--cc-line);
  border-radius:3px;
  padding:20px;
  margin-bottom:16px;
  box-shadow:0 0 24px rgba(0,184,255,0.03);
}
/* Corner brackets — top-left & bottom-right */
.cc-panel::before,
.cc-panel::after{
  content:'';
  position:absolute;
  width:8px;height:8px;
  border-color:var(--cc-hud-line-soft);
  border-style:solid;
  pointer-events:none;
}
.cc-panel::before{
  top:-1px;left:-1px;
  border-width:2px 0 0 2px;
}
.cc-panel::after{
  bottom:-1px;right:-1px;
  border-width:0 2px 2px 0;
}

/* --- 7. Panel Label --------------------------------------------------- */
.cc-panel-label{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Chakra Petch',sans-serif;
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--cc-text-2);
  margin-bottom:16px;
}
.cc-panel-label::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--cc-hud-line-soft),transparent);
}

/* --- 8. KPI Grid ------------------------------------------------------ */
.cc-kpi-grid{
  display:grid;
  gap:12px;
}
.cc-kpi-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.cc-kpi-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.cc-kpi-grid.cols-2{grid-template-columns:repeat(2,1fr)}

/* --- 9. KPI Card ------------------------------------------------------ */
.cc-kpi{
  position:relative;
  background:linear-gradient(170deg,var(--cc-bg-3),var(--cc-bg-2));
  border:1px solid var(--cc-line);
  border-radius:3px;
  padding:16px 18px 14px;
  overflow:hidden;
}
/* Top glow line */
.cc-kpi::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--cc-hud-line-soft),transparent);
}
/* Corner bracket — top-left */
.cc-kpi::after{
  content:'';
  position:absolute;
  top:-1px;left:-1px;
  width:6px;height:6px;
  border-top:2px solid var(--cc-hud-line-soft);
  border-left:2px solid var(--cc-hud-line-soft);
}
.cc-kpi-label{
  font-family:'Chakra Petch',sans-serif;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--cc-text-3);
  margin-bottom:6px;
}
.cc-kpi-value{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:800;
  font-size:34px;
  line-height:1.1;
  color:var(--cc-text);
}
.cc-kpi-sub{
  font-size:11px;
  color:var(--cc-text-3);
  margin-top:4px;
  font-family:'JetBrains Mono',monospace;
}
.cc-kpi-delta{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:600;
  margin-top:6px;
  padding:2px 6px;
  border-radius:3px;
}
.cc-kpi-delta.up{color:var(--cc-ok);background:var(--cc-ok-soft)}
.cc-kpi-delta.down{color:var(--cc-crit);background:var(--cc-crit-soft)}
.cc-kpi-delta.flat{color:var(--cc-text-3);background:var(--cc-line-soft)}

/* --- 10. KPI Value Status Glows --------------------------------------- */
.cc-kpi-value.ok{color:var(--cc-ok);text-shadow:0 0 16px rgba(34,214,122,0.4)}
.cc-kpi-value.warn{color:var(--cc-warn);text-shadow:0 0 16px rgba(255,180,0,0.4)}
.cc-kpi-value.crit{color:var(--cc-crit);text-shadow:0 0 16px rgba(255,69,84,0.4)}
.cc-kpi-value.bright{color:var(--cc-hud-line);text-shadow:0 0 16px var(--cc-hud-glow)}

/* --- 11. Badge -------------------------------------------------------- */
.cc-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:'Chakra Petch',sans-serif;
  font-size:11px;
  font-weight:600;
  padding:3px 10px;
  border-radius:3px;
  text-transform:uppercase;
  letter-spacing:0.8px;
  white-space:nowrap;
}
.cc-badge::before{
  content:'';
  width:6px;height:6px;
  border-radius:50%;
  flex-shrink:0;
}
.cc-badge.ok{color:var(--cc-ok);background:var(--cc-ok-soft)}
.cc-badge.ok::before{background:var(--cc-ok);box-shadow:0 0 6px var(--cc-ok)}
.cc-badge.warn{color:var(--cc-warn);background:var(--cc-warn-soft)}
.cc-badge.warn::before{background:var(--cc-warn);box-shadow:0 0 6px var(--cc-warn)}
.cc-badge.crit{color:var(--cc-crit);background:var(--cc-crit-soft)}
.cc-badge.crit::before{background:var(--cc-crit);box-shadow:0 0 6px var(--cc-crit)}
.cc-badge.info{color:var(--cc-hud-line);background:var(--cc-hud-line-faint)}
.cc-badge.info::before{background:var(--cc-hud-line);box-shadow:0 0 6px var(--cc-hud-line)}
.cc-badge.muted{color:var(--cc-text-3);background:var(--cc-line-soft)}
.cc-badge.muted::before{background:var(--cc-text-3)}

/* --- 12. Data Table --------------------------------------------------- */
.cc-htable{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.cc-htable thead th{
  font-family:'Chakra Petch',sans-serif;
  font-weight:600;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--cc-text-2);
  background:var(--cc-bg-3);
  padding:10px 14px;
  text-align:left;
  border-bottom:1px solid var(--cc-line);
  white-space:nowrap;
}
.cc-htable tbody td{
  padding:10px 14px;
  border-bottom:1px solid var(--cc-line-soft);
  color:var(--cc-text);
  vertical-align:middle;
}
.cc-htable tbody tr:hover{
  background:var(--cc-bg-panel-2);
}
.cc-htable .num{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  font-weight:500;
  text-align:right;
}
.cc-htable .rank{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:800;
  font-size:22px;
  color:var(--cc-hud-line);
  width:36px;
  text-align:center;
}
.cc-htable .bar{
  position:relative;
  width:100%;
  height:6px;
  background:var(--cc-bg-3);
  border-radius:3px;
  overflow:hidden;
  min-width:60px;
}
.cc-htable .bar-fill{
  position:absolute;
  top:0;left:0;bottom:0;
  background:linear-gradient(90deg,var(--cc-hud-deep),var(--cc-hud-line));
  border-radius:3px;
  transition:width .4s ease;
}

/* --- 13. Filters ------------------------------------------------------ */
.cc-filters{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:12px 0;
  margin-bottom:12px;
}
.cc-filter-group{
  display:flex;
  align-items:center;
  gap:6px;
}
.cc-filter-label{
  font-family:'Chakra Petch',sans-serif;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:var(--cc-text-3);
}
.cc-filter-select{
  background:var(--cc-bg-3);
  color:var(--cc-text);
  border:1px solid var(--cc-line);
  border-radius:3px;
  padding:6px 28px 6px 10px;
  font-family:'Chakra Petch',sans-serif;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394A8C0'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}
.cc-filter-select:focus{
  outline:none;
  border-color:var(--cc-hud-line-soft);
  box-shadow:0 0 6px rgba(0,184,255,0.15);
}
.cc-filter-chip{
  padding:5px 12px;
  font-family:'Chakra Petch',sans-serif;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.8px;
  color:var(--cc-text-3);
  background:var(--cc-bg-3);
  border:1px solid var(--cc-line-soft);
  border-radius:3px;
  cursor:pointer;
  transition:all .2s;
}
.cc-filter-chip:hover{color:var(--cc-text);border-color:var(--cc-line)}
.cc-filter-chip.active{
  color:var(--cc-hud-line);
  border-color:var(--cc-hud-line-soft);
  background:var(--cc-hud-line-faint);
  box-shadow:0 0 8px rgba(0,184,255,0.1);
}
.cc-filter-search{
  background:var(--cc-bg-3);
  color:var(--cc-text);
  border:1px solid var(--cc-line);
  border-radius:3px;
  padding:6px 12px;
  font-family:'Chakra Petch',sans-serif;
  font-size:12px;
  font-weight:500;
  min-width:180px;
}
.cc-filter-search::placeholder{color:var(--cc-text-3)}
.cc-filter-search:focus{
  outline:none;
  border-color:var(--cc-hud-line-soft);
  box-shadow:0 0 6px rgba(0,184,255,0.15);
}

/* --- 14. Merchant Grid ------------------------------------------------ */
.cc-merchant-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:12px;
}
.cc-merchant-card{
  position:relative;
  background:var(--cc-bg-panel);
  border:1px solid var(--cc-line);
  border-radius:3px;
  padding:18px;
  transition:border-color .2s,box-shadow .2s;
}
.cc-merchant-card:hover{
  border-color:var(--cc-hud-line-soft);
  box-shadow:0 0 20px rgba(0,184,255,0.08);
}
/* Corner brackets */
.cc-merchant-card::before,
.cc-merchant-card::after{
  content:'';
  position:absolute;
  width:8px;height:8px;
  border-color:var(--cc-hud-line-soft);
  border-style:solid;
  pointer-events:none;
}
.cc-merchant-card::before{
  top:-1px;left:-1px;
  border-width:2px 0 0 2px;
}
.cc-merchant-card::after{
  bottom:-1px;right:-1px;
  border-width:0 2px 2px 0;
}

/* --- 15. Hero Strip --------------------------------------------------- */
.cc-hero-strip{
  position:relative;
  padding:18px 24px;
  background:linear-gradient(135deg,var(--cc-bg-3),var(--cc-bg-2));
  border:1px solid var(--cc-line);
  border-radius:3px;
  margin-bottom:16px;
  font-family:'Chakra Petch',sans-serif;
  font-size:14px;
  color:var(--cc-text-2);
  overflow:hidden;
}
.cc-hero-strip::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--cc-hud-line),transparent);
  box-shadow:0 0 12px var(--cc-hud-glow);
}

/* --- 16. Activity Feed ------------------------------------------------ */
.cc-feed{
  display:flex;
  flex-direction:column;
  gap:0;
}
.cc-feed-row{
  display:grid;
  grid-template-columns:70px 24px 1fr;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-bottom:1px solid var(--cc-line-soft);
  transition:background .15s;
}
.cc-feed-row:last-child{border-bottom:none}
.cc-feed-row:hover{background:var(--cc-bg-panel-2)}
.cc-feed-time{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--cc-text-3);
  white-space:nowrap;
}
.cc-feed-ico{
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  font-size:10px;
  flex-shrink:0;
}
.cc-feed-ico.ok{background:var(--cc-ok-soft);color:var(--cc-ok)}
.cc-feed-ico.crit{background:var(--cc-crit-soft);color:var(--cc-crit)}
.cc-feed-ico.info{background:var(--cc-hud-line-faint);color:var(--cc-hud-line)}
.cc-feed-text{
  font-size:13px;
  color:var(--cc-text);
}

/* --- 17. Form Grid ---------------------------------------------------- */
.cc-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 20px;
}
.cc-form-field{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.cc-form-label{
  font-family:'Chakra Petch',sans-serif;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:var(--cc-text-3);
}
.cc-form-input,
.cc-form-select,
.cc-form-textarea{
  background:var(--cc-bg-3);
  color:var(--cc-text);
  border:1px solid var(--cc-line);
  border-radius:3px;
  padding:8px 12px;
  font-family:'Chakra Petch',sans-serif;
  font-size:13px;
  font-weight:500;
  transition:border-color .2s,box-shadow .2s;
}
.cc-form-input:focus,
.cc-form-select:focus,
.cc-form-textarea:focus{
  outline:none;
  border-color:var(--cc-hud-line-soft);
  box-shadow:0 0 8px rgba(0,184,255,0.15);
}
.cc-form-textarea{
  min-height:80px;
  resize:vertical;
}
.cc-form-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394A8C0'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:28px;
  cursor:pointer;
}

/* --- 18. Buttons ------------------------------------------------------ */
.cc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:'Chakra Petch',sans-serif;
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:8px 20px;
  border-radius:3px;
  border:1px solid var(--cc-hud-line-soft);
  background:transparent;
  color:var(--cc-hud-line);
  cursor:pointer;
  transition:all .2s;
  white-space:nowrap;
}
.cc-btn:hover{
  border-color:var(--cc-hud-line);
  box-shadow:0 0 12px rgba(0,184,255,0.2);
  text-shadow:0 0 8px var(--cc-hud-glow);
}
.cc-btn.solid{
  background:linear-gradient(135deg,var(--cc-hud-deep),var(--cc-hud-line));
  border-color:transparent;
  color:#fff;
}
.cc-btn.solid:hover{
  box-shadow:0 0 16px var(--cc-hud-glow);
}
.cc-btn.ghost{
  background:transparent;
  border-color:var(--cc-line);
  color:var(--cc-text-2);
}
.cc-btn.ghost:hover{
  border-color:var(--cc-hud-line-soft);
  color:var(--cc-hud-line);
}

/* --- 19. Client Card -------------------------------------------------- */
.cc-client-card{
  position:relative;
  background:var(--cc-bg-panel);
  border:1px solid var(--cc-line);
  border-radius:3px;
  padding:20px;
  overflow:hidden;
}
/* Corner brackets */
.cc-client-card::before,
.cc-client-card::after{
  content:'';
  position:absolute;
  width:8px;height:8px;
  border-color:var(--cc-hud-line-soft);
  border-style:solid;
  pointer-events:none;
}
.cc-client-card::before{
  top:-1px;left:-1px;
  border-width:2px 0 0 2px;
}
.cc-client-card::after{
  bottom:-1px;right:-1px;
  border-width:0 2px 2px 0;
}
.cc-client-name{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:800;
  font-size:22px;
  color:var(--cc-text);
  margin-bottom:4px;
}
.cc-client-balance{
  font-family:'JetBrains Mono',monospace;
  font-weight:600;
  font-size:18px;
  color:var(--cc-hud-line);
  margin-bottom:12px;
}
.cc-client-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 16px;
  font-size:12px;
}
.cc-client-field-label{
  font-family:'Chakra Petch',sans-serif;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--cc-text-3);
}
.cc-client-field-value{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  color:var(--cc-text);
}

/* --- Animation: Live Pulse -------------------------------------------- */
@keyframes cc-live-pulse{
  0%,100%{opacity:1;box-shadow:0 0 4px var(--cc-ok)}
  50%{opacity:.4;box-shadow:0 0 8px var(--cc-ok)}
}
.cc-live-pulse{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--cc-ok);
  animation:cc-live-pulse 2s ease-in-out infinite;
}

/* --- Responsive: <= 1200px -------------------------------------------- */
@media(max-width:1200px){
  .cc-kpi-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .cc-kpi-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .cc-merchant-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}

/* --- Responsive: <= 768px --------------------------------------------- */
@media(max-width:768px){
  .cc-topbar{
    grid-template-columns:1fr;
    text-align:center;
    gap:8px;
    padding:10px 14px;
  }
  .cc-topbar-user{justify-content:center}
  .cc-kpi-grid.cols-4,
  .cc-kpi-grid.cols-3,
  .cc-kpi-grid.cols-2{
    grid-template-columns:1fr;
  }
  .cc-merchant-grid{grid-template-columns:1fr}
  .cc-form-grid{grid-template-columns:1fr}
  .cc-client-fields{grid-template-columns:1fr}
  .cc-page{padding:12px}
  .cc-hud{margin:6px}
  .cc-feed-row{grid-template-columns:56px 20px 1fr}
}

/* ═══ END COMMAND CENTRE HUD DESIGN SYSTEM ═══ */

/* ═══ CLIENT QUERIES — threaded, admin-grouped queue (Phase 2) ═══ */
.cq-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;margin-top:16px}
@media (max-width:960px){.cq-layout{grid-template-columns:1fr}}
.cq-list{padding:0;overflow:hidden}

/* Query-code chip + handling/overdue badges */
.cq-code-chip{display:inline-block;padding:2px 7px;border-radius:6px;font-size:11px;font-weight:700;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(59,130,246,0.14);color:#2563eb;letter-spacing:.02em}
.cq-handling-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;
  background:color-mix(in srgb, var(--cqh,#0ea5e9) 14%, transparent);color:var(--cqh,#0ea5e9)}
.cq-overdue-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;
  background:rgba(239,68,68,0.14);color:#dc2626}
.cq-callcount{font-size:11px;opacity:0.8}
.cq-msgcount{font-size:11px;opacity:0.7}

/* Legend */
.cq-legend{margin-top:12px}
.cq-legend-head{display:flex;justify-content:space-between;align-items:center;width:100%;
  background:transparent;border:0;cursor:pointer;font-weight:600;font-size:13px;color:inherit;padding:2px 0}
.cq-legend-caret{opacity:0.7}
.cq-legend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 16px;margin-top:10px}
.cq-legend-item{display:flex;align-items:center;gap:8px;font-size:12px}
.cq-legend-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cq-legend-handling{font-size:10px;opacity:0.6;text-transform:capitalize}

/* New Query modal */
.cq-modal-overlay{position:fixed;inset:0;background:rgba(4,6,12,0.55);display:flex;
  align-items:flex-start;justify-content:center;padding:48px 16px;z-index:1000;overflow-y:auto}
.cq-modal{background:var(--panel,#12151d);color:inherit;border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;width:100%;max-width:560px;box-shadow:0 24px 64px rgba(0,0,0,0.5)}
.cq-modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.08)}
.cq-modal-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.cq-modal-foot{display:flex;justify-content:flex-end;gap:8px;
  padding:14px 18px;border-top:1px solid rgba(255,255,255,0.08)}
.cq-field{display:flex;flex-direction:column;gap:4px;font-size:12px;flex:1;min-width:0}
.cq-field > span{opacity:0.8;font-weight:600}
.cq-field input,.cq-field select,.cq-field textarea{padding:8px;border-radius:6px;
  border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.03);color:inherit;font:inherit;width:100%}
.cq-field textarea{resize:vertical;min-height:72px}
.cq-field-row{display:flex;gap:12px;flex-wrap:wrap}

/* Toolbar */
.cq-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.cq-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;opacity:0.9;cursor:pointer}

/* Owner groups */
.cq-group{border-top:1px solid rgba(148,163,184,0.18)}
.cq-group:first-child{border-top:0}
.cq-group-head{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:0;
  cursor:pointer;padding:10px 12px;font-size:13px;color:inherit;text-align:left}
.cq-group-head:hover{background:rgba(148,163,184,0.06)}
.cq-group-caret{opacity:0.7;width:14px}
.cq-group-title{font-weight:600}
.cq-group-count{font-size:12px;opacity:0.75}
.cq-group-overdue{color:#dc2626;font-weight:600}
.cq-active-dot{width:8px;height:8px;border-radius:50%;background:#10b981;margin-left:auto;box-shadow:0 0 6px #10b98188}
.cq-group-body{background:rgba(148,163,184,0.04)}
.cq-group--legacy .cq-group-title{opacity:0.75}
.cq-legacy-section{border-top:1px dashed rgba(148,163,184,0.3)}
.cq-legacy-head{font-size:11px;font-weight:600;opacity:0.7;padding:8px 12px;text-transform:uppercase;letter-spacing:.04em}

/* Thread rows */
.cq-thread{padding:8px 12px 8px 22px;border-top:1px solid rgba(148,163,184,0.12);cursor:pointer}
.cq-thread:hover{background:rgba(59,130,246,0.06)}
.cq-thread--active{background:rgba(59,130,246,0.10)}
.cq-thread-main{display:flex;align-items:center;gap:8px}
.cq-thread-subject{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cq-thread-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:11px;opacity:0.85}
.cq-thread-client{font-weight:600;opacity:0.9}
.cq-thread-when{margin-left:auto;opacity:0.7}
.cq-open-dot,.cq-closed-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;vertical-align:middle}
.cq-open-dot{background:#10b981}
.cq-closed-dot{background:#94a3b8}
.cq-openstate{display:inline-flex;align-items:center}

/* Client cross-link scope */
.cq-clientscope-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;font-size:13px}
.cq-crosslink{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;
  padding:8px 10px;border-radius:8px;background:rgba(148,163,184,0.08);font-size:12px}

/* Thread detail */
.cq-section-title{font-weight:600;margin-bottom:8px;font-size:13px}
.cq-detail-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;margin-top:12px}
@media (max-width:760px){.cq-detail-grid{grid-template-columns:1fr}}
.cq-messages{display:flex;flex-direction:column;gap:8px}
.cq-msg{border:1px solid rgba(148,163,184,0.22);border-radius:10px;padding:10px;cursor:pointer;background:rgba(148,163,184,0.04)}
.cq-msg:hover{border-color:rgba(59,130,246,0.4)}
.cq-msg--target{border-color:#3b82f6;box-shadow:0 0 0 1px rgba(59,130,246,0.25)}
.cq-msg-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cq-msg-when{font-size:11px;opacity:0.7;white-space:nowrap}
.cq-msg-subject{font-size:13px;font-weight:600;margin-top:6px}
.cq-msg-body{white-space:pre-wrap;font-size:12px;margin-top:6px;max-height:160px;overflow:auto}
.cq-msg-reply{margin-top:8px;border:1px solid #10b98144;border-radius:8px;padding:8px;background:#10b9810f}
.cq-msg-draft{margin-top:8px;border:1px solid #8b5cf644;border-radius:8px;padding:8px;background:#8b5cf60f}
.cq-msg-reply-head{font-size:11px;opacity:0.75}
.cq-msg-reply-body{white-space:pre-wrap;font-size:12px;margin-top:4px}
.cq-msg-ref{font-size:10px;opacity:0.6;margin-top:6px;font-family:ui-monospace,monospace}
.cq-msg-hint{font-size:11px;opacity:0.65;margin-top:4px}
.cq-spam-tag{display:inline-block;padding:1px 6px;border-radius:6px;font-size:10px;background:rgba(239,68,68,0.14);color:#dc2626;font-weight:600}

/* Call log */
.cq-calls{display:flex;flex-direction:column;gap:6px}
.cq-call{border:1px solid rgba(148,163,184,0.22);border-radius:8px;padding:8px}
.cq-call-head{display:flex;justify-content:space-between;gap:8px;font-size:11px;opacity:0.8}
.cq-call-outcome{font-size:12px;font-weight:600;margin-top:2px}
.cq-call-notes{font-size:12px;margin-top:2px;white-space:pre-wrap}

/* Actions */
.cq-actions{margin-top:14px;border-top:1px solid rgba(148,163,184,0.2);padding-top:12px}
.cq-actions-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.cq-draft-ta{width:100%;min-height:180px;margin-top:6px;padding:10px;border-radius:8px;font-family:inherit;font-size:13px;line-height:1.5}
.cq-portfolio{margin-top:16px;border-top:1px solid rgba(148,163,184,0.2);padding-top:12px}

/* Phase 3 — thread action controls (triage / log call / resolve / reallocate) */
.cq-thread-actions{margin-top:14px;border-top:1px solid rgba(148,163,184,0.2);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.cq-action-block{border:1px solid rgba(148,163,184,0.22);border-radius:10px;padding:10px;background:rgba(148,163,184,0.04)}
.cq-action-block--accent{border-color:#7c3aed55;background:rgba(124,58,237,0.06)}
.cq-action-block--resolve{border-color:#10b98155;background:rgba(16,185,129,0.05)}
.cq-action-label{font-size:12px;font-weight:600;margin-bottom:6px}
.cq-action-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cq-action-row select,.cq-action-row input[type="text"]{padding:6px;border-radius:6px}
.cq-action-row input[type="text"]{flex:1;min-width:160px}
.cq-action-hint{font-size:12px;opacity:0.7}
.cq-action-ok{margin-top:6px;font-size:11px;color:#166534}
.cq-action-err{margin-top:6px;font-size:12px;padding:6px 8px;border-radius:6px;background:#fee2e2;color:#991b1b}
.cq-resolve-ta{width:100%;min-height:70px;margin-bottom:6px;padding:8px;border-radius:8px;font-family:inherit;font-size:13px;line-height:1.4}
/* ═══ END CLIENT QUERIES THREADED QUEUE ═══ */

/* ═══ PHONE-HOST FRAME (Horizon persistent softphone iframe) ═══
   tactical.html?...&phone=1 sets body[data-phone-host="1"]. That frame must
   render ONLY the floating webphone widget — never the dashboard chrome or the
   full-screen boot splash. Without this the frame showed the black #app-splash
   (inset:0) behind the phone, which read as a "black block around the softphone"
   inside the Horizon phone panel. Gated to the attribute, so no other shell is
   affected. #webphone-widget is appended to <body> outside #app, so hiding the
   app chrome leaves the phone fully intact. */
body[data-phone-host="1"] { background: transparent !important; }
body[data-phone-host="1"] #app,
body[data-phone-host="1"] #app-splash,
body[data-phone-host="1"] #theme-picker { display: none !important; }
body[data-phone-host="1"] #webphone-widget { display: block !important; }