*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#050b16;
  --bg-soft:#091325;
  --panel:rgba(10,19,35,.86);
  --panel-2:rgba(14,25,46,.88);
  --panel-3:rgba(20,35,60,.88);
  --line:rgba(157,189,255,.12);
  --line-strong:rgba(157,189,255,.22);
  --text:#e1eaf6;
  --muted:#8f9fb9;
  --blue:#67b4ff;
  --blue-2:#8fd8ff;
  --steel:#4a6b99;
  --gold:#d6b15d;
  --green:#25d89b;
  --amber:#f0bf62;
  --red:#f16f86;
  --shadow:0 24px 80px rgba(0,0,0,.38);
  --shadow-soft:0 16px 40px rgba(0,0,0,.25);
  --radius:24px;
  --radius-sm:16px;
}
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%);
}
h1,h2,h3,h4,h5,h6{
  font-weight:700;
  letter-spacing:-.015em;
  color:#e6edf7;
}
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;
}
.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;
  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;
}
.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-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{
  opacity:1;
}
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.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:#8db8e9;
}
.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:#8db8e9;
  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:#a7f1d2;background:rgba(37,216,155,.12)}
.tone-amber{color:#ffd89b;background:rgba(240,191,98,.12)}
.tone-red{color:#ffc0cb;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:#d3dfef;
}
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:#8db8e9;
  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{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:#a7f1d2;
  background:rgba(37,216,155,.14);
}
.wg-check-icon.bad{
  color:#ffc0cb;
  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:#8db8e9;
  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)}