:root {
  --cyan: #21c7ea;
  --cyan-2: #0795b5;
  --cyan-dark: #05738d;
  --cyan-soft: rgba(33, 199, 234, .12);
  --sky: #5bd8f1;
  --orange: #f6a623;
  --orange-soft: rgba(246, 166, 35, .13);
  --ink: #f4f9fb;
  --ink-strong: #ffffff;
  --muted: #8ea5b0;
  --muted-2: #607783;
  --line: rgba(132, 174, 191, .16);
  --line-strong: rgba(114, 204, 231, .28);
  --bg: #061018;
  --bg-2: #091620;
  --bg-3: #0b1b25;
  --card: rgba(12, 29, 39, .94);
  --card-2: rgba(15, 36, 47, .92);
  --card-hover: rgba(18, 43, 55, .96);
  --input: #0a1821;
  --success: #46d7a0;
  --success-soft: rgba(70, 215, 160, .12);
  --warning: #f4bd58;
  --warning-soft: rgba(244, 189, 88, .13);
  --danger: #ff7f87;
  --danger-soft: rgba(255, 127, 135, .12);
  --violet: #9488ff;
  --shadow: 0 26px 70px rgba(0, 0, 0, .35);
  --shadow-sm: 0 14px 40px rgba(0, 0, 0, .22);
  --glow: 0 0 0 1px rgba(33, 199, 234, .06), 0 18px 55px rgba(1, 141, 176, .10);
  --radius: 18px;
  --radius-sm: 12px;
  --sidebar-width: 266px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, Aptos, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 0%, rgba(20, 156, 195, .16), transparent 30%),
    radial-gradient(circle at 15% 100%, rgba(12, 103, 137, .12), transparent 34%),
    var(--bg);
  letter-spacing: -.006em;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image:
    linear-gradient(rgba(116, 184, 209, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 184, 209, .025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 60% 35%, #000, transparent 78%);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; transform: none !important; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small-text { font-size: .82rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.stack { display: grid; gap: 12px; }
.stack-lg { display: grid; gap: 18px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wrap { flex-wrap: wrap; }
.full { width: 100%; }
::selection { color: #00141d; background: var(--cyan); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #07131b; }
::-webkit-scrollbar-thumb { background: #24414f; border: 2px solid #07131b; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #315b6d; }

/* LOGIN */
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(420px, .78fr);
  background: #050c12;
  isolation: isolate;
}
.login-art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(46px, 6vw, 90px);
  color: white;
  background:
    radial-gradient(circle at 75% 22%, rgba(38, 211, 242, .30), transparent 20%),
    radial-gradient(circle at 18% 88%, rgba(7, 149, 181, .22), transparent 32%),
    linear-gradient(145deg, #02070b 0%, #06151e 45%, #0a2f3e 100%);
}
.login-art::before {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(33,199,234,.10) 46.2% 46.5%, transparent 46.8%),
    linear-gradient(45deg, transparent 0 62%, rgba(33,199,234,.08) 62.2% 62.5%, transparent 62.8%);
  transform: rotate(-4deg) scale(1.05);
}
.login-art::after {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  right: -190px;
  top: -190px;
  border: 1px solid rgba(33,199,234,.20);
  border-radius: 110px;
  transform: rotate(34deg);
  box-shadow: inset 0 0 0 45px rgba(33,199,234,.018), inset 0 0 0 90px rgba(33,199,234,.015);
}
.login-art-content { position: relative; z-index: 2; max-width: 730px; }
.login-logo {
  width: min(300px, 72%);
  height: auto;
  object-fit: contain;
  margin-bottom: 62px;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.4));
}
.product-pill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid rgba(84, 217, 242, .24);
  border-radius: 999px;
  color: #bceff8;
  background: rgba(4, 17, 24, .46);
  backdrop-filter: blur(14px);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.product-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.login-art h1 {
  max-width: 760px;
  margin: 20px 0 24px;
  color: #fff;
  font-size: clamp(2.85rem, 5.4vw, 5.7rem);
  line-height: .97;
  letter-spacing: -.065em;
  font-weight: 820;
}
.login-art h1 span { color: var(--cyan); }
.login-art p { max-width: 590px; margin: 0; color: rgba(224, 242, 248, .74); font-size: 1.03rem; line-height: 1.75; }
.eyebrow { margin: 0 0 8px; font-size: .69rem; letter-spacing: .19em; font-weight: 850; color: var(--cyan); text-transform: uppercase; }
.eyebrow.light { color: #7ee8f8; }
.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 650px; margin-top: 48px; }
.feature-strip div {
  min-height: 104px;
  padding: 17px;
  border: 1px solid rgba(115, 193, 218, .16);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(13, 34, 45, .76), rgba(8, 22, 30, .54));
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.feature-strip strong { display: block; margin-bottom: 8px; color: #fff; font-size: 1.4rem; letter-spacing: -.04em; }
.feature-strip span { color: #88a8b4; font-size: .78rem; line-height: 1.4; }
.login-panel {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 70px);
  background:
    radial-gradient(circle at 100% 0%, rgba(9, 147, 181, .13), transparent 34%),
    #071119;
  border-left: 1px solid rgba(93, 172, 197, .12);
}
.login-panel::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(transparent, rgba(33,199,234,.75), transparent);
  box-shadow: 0 0 28px rgba(33,199,234,.4);
}
.login-card {
  width: min(450px, 100%);
  padding: 42px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(14, 32, 42, .96), rgba(8, 20, 28, .98));
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.035);
}
.login-card h2 { margin: 0; color: #fff; font-size: 2rem; letter-spacing: -.04em; }
.login-card > .muted { margin-bottom: 26px; }
.mobile-brand { display: none; }
.mobile-brand img { filter: drop-shadow(0 7px 20px rgba(0,0,0,.35)); }
.mobile-brand span { display: block; margin-top: 12px; color: var(--muted); font-weight: 700; }
label { display: grid; gap: 8px; color: #adc0c9; font-size: .82rem; font-weight: 750; }
input, select, textarea {
  width: 100%;
  border: 1px solid #203945;
  background: var(--input);
  color: #eef8fb;
  border-radius: 11px;
  padding: 11px 13px;
  outline: none;
  color-scheme: dark;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input::placeholder, textarea::placeholder { color: #526b77; }
input:hover, select:hover, textarea:hover { border-color: #315360; }
input:focus, select:focus, textarea:focus { border-color: var(--cyan-2); box-shadow: 0 0 0 4px rgba(33,199,234,.10), 0 0 25px rgba(33,199,234,.05); background: #0b1b25; }
textarea { resize: vertical; min-height: 96px; }
.password-field { position: relative; }
.password-field input { padding-right: 46px; }
.password-field button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }

.btn {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 15px;
  color: #dfeef3;
  background: #10232e;
  font-weight: 800;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary {
  color: #001219;
  background: linear-gradient(135deg, #6fe8fa 0%, #21c7ea 48%, #0795b5 100%);
  box-shadow: 0 10px 28px rgba(7,149,181,.28), inset 0 1px rgba(255,255,255,.45);
}
.btn.primary:hover { background: linear-gradient(135deg, #8ceefa, #29cdeb 50%, #0aa4c5); box-shadow: 0 13px 34px rgba(7,149,181,.34); }
.btn.secondary { color: #8deafd; background: rgba(33,199,234,.10); border-color: rgba(33,199,234,.22); }
.btn.secondary:hover { background: rgba(33,199,234,.16); border-color: rgba(33,199,234,.4); }
.btn.warning { color: #ffd78f; background: var(--warning-soft); border-color: rgba(244,189,88,.18); }
.btn.danger { color: #ff9ca2; background: var(--danger-soft); border-color: rgba(255,127,135,.18); }
.btn.danger:hover { background: rgba(255,127,135,.18); border-color: rgba(255,127,135,.32); }
.btn.ghost { color: #b9cad1; border-color: var(--line); background: rgba(255,255,255,.01); }
.btn.ghost:hover { color: white; border-color: var(--line-strong); background: rgba(255,255,255,.035); }
.btn.subtle { color: #9fd9e6; background: #0d202a; border-color: #193541; }
.btn.small { padding: 7px 10px; font-size: .76rem; border-radius: 8px; }
.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 1.18rem;
}
.icon-btn:hover { color: #fff; border-color: var(--line); background: rgba(255,255,255,.04); }
.icon-btn.small { width: 34px; height: 34px; font-size: .88rem; }

.demo-access { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.demo-title { margin-bottom: 8px; color: #718894; font-size: .69rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.demo-user { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border: 0; border-bottom: 1px dashed rgba(120,163,179,.13); color: #e1edf1; background: transparent; font-weight: 750; text-align: left; }
.demo-user:hover { color: var(--cyan); }
.demo-user small { color: #6f8792; font-weight: 500; }
.demo-access p, .environment-note { font-size: .73rem; color: #728a95; line-height: 1.5; }
.demo-access code { color: #9defff; }
.environment-note { margin-top: 15px; padding: 11px 12px; border: 1px solid rgba(76,173,203,.13); border-radius: 10px; background: rgba(33,199,234,.045); }

/* APP SHELL */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  color: white;
  background:
    radial-gradient(circle at 50% 100%, rgba(8, 139, 172, .14), transparent 35%),
    linear-gradient(180deg, #03090e 0%, #06121a 58%, #071720 100%);
  border-right: 1px solid rgba(100,173,197,.12);
  box-shadow: 18px 0 48px rgba(0,0,0,.17);
}
.sidebar::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 116px;
  height: 155px;
  opacity: .25;
  pointer-events: none;
  background:
    linear-gradient(30deg, transparent 38%, rgba(33,199,234,.22) 39% 40%, transparent 41%),
    linear-gradient(150deg, transparent 38%, rgba(33,199,234,.13) 39% 40%, transparent 41%);
  background-size: 52px 36px;
  mask-image: linear-gradient(transparent, black 45%, transparent);
}
.brand-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 76px; padding: 4px 8px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.brand-lockup { min-width: 0; display: grid; gap: 7px; }
.brand-row img { width: 172px; max-width: calc(100% - 30px); height: auto; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.28)); }
.brand-product { color: #6e8994; font-size: .62rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.sidebar-close { display: none; color: white; }
.main-nav { position: relative; z-index: 2; display: grid; gap: 4px; margin-top: 18px; overflow-y: auto; padding-right: 2px; }
.nav-button {
  width: 100%;
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #79919c;
  background: transparent;
  font-size: .83rem;
  font-weight: 730;
  text-align: left;
  transition: color .2s, background .2s, border-color .2s, transform .15s;
}
.nav-button:hover { color: #e9f8fb; background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.035); }
.nav-button.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(12,126,157,.28), rgba(33,199,234,.06));
  border-color: rgba(33,199,234,.12);
  box-shadow: inset 3px 0 0 var(--cyan), 0 10px 30px rgba(0, 132, 168, .08);
}
.nav-icon { width: 20px; height: 20px; display: grid; place-items: center; color: currentColor; flex: 0 0 auto; }
.nav-icon svg, .kpi-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-footer { position: relative; z-index: 2; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar-user { display: flex; gap: 10px; align-items: center; margin: 0 6px 14px; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: #00131b; background: linear-gradient(145deg, #81ecfb, #16bede); box-shadow: 0 7px 20px rgba(0,136,171,.20); font-weight: 900; }
.avatar.orange { background: linear-gradient(145deg, #ffd685, #f2a521); color: #251400; box-shadow: 0 7px 20px rgba(246,166,35,.16); }
.sidebar-user strong, .top-user strong { display: block; color: #eef8fb; font-size: .82rem; }
.sidebar-user span, .top-user span { display: block; margin-top: 2px; color: #667f8a; font-size: .69rem; }
.main-area { min-width: 0; background: transparent; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(95,162,184,.11);
  background: rgba(6, 16, 24, .80);
  backdrop-filter: blur(18px) saturate(130%);
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
.topbar-mobile-logo { display: none; width: 108px; height: auto; }
.page-kicker { margin: 0; color: var(--cyan); font-size: .62rem; letter-spacing: .18em; font-weight: 900; }
.topbar h1 { margin: 2px 0 0; color: #fff; font-size: 1.45rem; letter-spacing: -.035em; font-weight: 780; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.secure-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(70,215,160,.13); border-radius: 999px; color: #7fc9aa; background: rgba(70,215,160,.055); font-size: .68rem; font-weight: 800; }
.secure-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 12px rgba(70,215,160,.7); }
.top-user { display: flex; align-items: center; gap: 9px; margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--line); }
.menu-btn { display: none; }
.content { max-width: 1680px; margin: 0 auto; padding: 27px 30px 46px; animation: contentIn .28s ease-out; }
@keyframes contentIn { from { opacity: 0; transform: translateY(5px); } }

/* DASHBOARD / CARDS */
.hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  align-items: center;
  gap: 26px;
  padding: 30px;
  border: 1px solid rgba(65,198,229,.16);
  border-radius: 20px;
  color: white;
  background:
    radial-gradient(circle at 92% 10%, rgba(75, 217, 242, .24), transparent 25%),
    linear-gradient(115deg, #0b2531 0%, #0a3342 52%, #096680 100%);
  box-shadow: 0 20px 55px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.04);
}
.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent, black);
}
.hero-card::after {
  content: '';
  position: absolute;
  width: 290px;
  height: 290px;
  right: -90px;
  top: -125px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 70px;
  transform: rotate(35deg);
  box-shadow: inset 0 0 0 40px rgba(255,255,255,.015), inset 0 0 0 80px rgba(255,255,255,.012);
}
.hero-card > * { position: relative; z-index: 1; }
.hero-card h2 { margin: 0 0 8px; color: #fff; font-size: clamp(1.75rem, 3vw, 2.55rem); letter-spacing: -.045em; }
.hero-card p { margin: 0; max-width: 720px; color: rgba(227,245,250,.74); line-height: 1.55; }
.hero-progress { padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(4,18,25,.28); backdrop-filter: blur(12px); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.hero-progress strong { color: #fff; font-size: 2rem; letter-spacing: -.05em; }
.progress { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(0,0,0,.28); }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), #ffd676); box-shadow: 0 0 18px rgba(246,166,35,.32); }
.hero-progress .progress { margin-top: 10px; background: rgba(0,0,0,.25); }

.grid { display: grid; gap: 17px; }
.grid.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(14,33,44,.96), rgba(10,25,34,.96));
  box-shadow: var(--shadow-sm), inset 0 1px rgba(255,255,255,.025);
}
.card:hover { border-color: rgba(99,185,213,.19); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.card-header h3 { margin: 0; color: #f4fbfd; font-size: .99rem; letter-spacing: -.01em; }
.card-header p { margin: 5px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.kpi-card { position: relative; min-height: 132px; overflow: hidden; }
.kpi-card::after { content: ''; position: absolute; width: 100px; height: 100px; right: -45px; bottom: -55px; border: 1px solid rgba(33,199,234,.10); border-radius: 30px; transform: rotate(30deg); }
.kpi-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.kpi-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(33,199,234,.16); border-radius: 12px; color: var(--cyan); background: rgba(33,199,234,.08); box-shadow: inset 0 1px rgba(255,255,255,.02); }
.kpi-value { position: relative; z-index: 1; display: block; margin-top: 16px; color: #fff; font-size: 1.8rem; line-height: 1; letter-spacing: -.045em; }
.kpi-label { position: relative; z-index: 1; display: block; margin-top: 8px; color: var(--muted); font-size: .76rem; }
.trend { position: relative; z-index: 1; font-size: .7rem; font-weight: 850; }
.trend.up { color: var(--success); }
.trend.warning { color: var(--warning); }

/* CHARTS */
.chart-wrap { width: 100%; min-height: 240px; display: grid; align-items: end; }
.bar-chart { position: relative; height: 230px; display: flex; align-items: flex-end; gap: 10px; padding: 16px 4px 0; border-bottom: 1px solid var(--line); }
.bar-chart::before { content: ''; position: absolute; inset: 18px 0 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 47px, rgba(126,171,188,.07) 48px 49px); }
.bar-item { position: relative; z-index: 1; flex: 1; min-width: 24px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; }
.bar-value { color: #758d98; font-size: .66rem; font-weight: 800; }
.bar { width: min(31px, 74%); min-height: 2px; position: relative; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, #65e2f6 0%, #22c5e7 46%, #087f9d 100%); box-shadow: 0 0 20px rgba(33,199,234,.12), inset 0 1px rgba(255,255,255,.35); transition: filter .2s, transform .2s; }
.bar:hover { filter: brightness(1.12); transform: scaleX(1.06); }
.bar-label { color: #778f99; font-size: .66rem; white-space: nowrap; }
.donut-layout { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 24px; }
.donut { width: 175px; height: 175px; position: relative; margin: auto; border-radius: 50%; box-shadow: 0 0 34px rgba(33,199,234,.08); }
.donut::after { content: ''; position: absolute; inset: 27px; border: 1px solid rgba(255,255,255,.035); border-radius: 50%; background: #0d202a; box-shadow: inset 0 0 35px rgba(0,0,0,.22); }
.donut-center { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; text-align: center; }
.donut-center strong { display: block; color: #fff; font-size: 1.42rem; letter-spacing: -.04em; }
.donut-center span { color: var(--muted); font-size: .68rem; }
.legend { display: grid; gap: 11px; }
.legend-row { display: grid; grid-template-columns: 9px 1fr auto; gap: 9px; align-items: center; color: #a9bec7; font-size: .77rem; }
.legend-row strong { color: #eef8fb; font-size: .75rem; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }

/* TABLES / FILTERS */
.table-shell { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; background: rgba(4,14,20,.16); }
table { width: 100%; min-width: 760px; border-collapse: collapse; }
th, td { padding: 12px 13px; border-bottom: 1px solid rgba(128,171,187,.10); color: #b6c8cf; font-size: .78rem; text-align: left; vertical-align: middle; }
th { position: sticky; top: 0; z-index: 1; color: #6f8a95; background: #0a1a23; font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(33,199,234,.035); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid transparent; border-radius: 999px; font-size: .65rem; font-weight: 900; white-space: nowrap; }
.badge.draft { color: #9bb0b9; background: rgba(141,167,177,.10); border-color: rgba(141,167,177,.10); }
.badge.submitted, .badge.review { color: #ffd483; background: var(--warning-soft); border-color: rgba(244,189,88,.12); }
.badge.approved, .badge.active { color: #75e5b8; background: var(--success-soft); border-color: rgba(70,215,160,.12); }
.badge.returned, .badge.rejected, .badge.inactive { color: #ff9aa0; background: var(--danger-soft); border-color: rgba(255,127,135,.12); }
.badge.closed { color: #b7afff; background: rgba(148,136,255,.12); border-color: rgba(148,136,255,.12); }
.role-badge { color: #8ce9fa; background: rgba(33,199,234,.10); border-color: rgba(33,199,234,.12); }
.hours-cell { color: #83e9fa; font-weight: 900; }
.filters { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 12px; align-items: end; }
.filters .btn { height: 42px; }
.report-filters { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.report-help { margin-top: 14px; }
.report-timeline-card { margin-top: 18px; overflow: hidden; }
.report-secondary-charts { margin-top: 18px; }
.timeline-chart-shell { width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 5px; scrollbar-width: thin; scrollbar-color: rgba(33,199,234,.35) rgba(255,255,255,.03); }
.timeline-chart-shell::-webkit-scrollbar { height: 8px; }
.timeline-chart-shell::-webkit-scrollbar-track { background: rgba(255,255,255,.03); border-radius: 999px; }
.timeline-chart-shell::-webkit-scrollbar-thumb { background: rgba(33,199,234,.32); border-radius: 999px; }
.timeline-summary { position: sticky; left: 0; z-index: 2; width: fit-content; display: flex; align-items: center; gap: 11px; margin-bottom: 4px; color: var(--muted); font-size: .7rem; }
.timeline-summary strong { color: #e8f9fc; }
.timeline-bars { gap: 7px; padding-left: 2px; padding-right: 2px; }
.timeline-item { min-width: 34px; }
.timeline-item .bar { width: min(24px, 72%); }
.timeline-item .bar.zero { opacity: .22; box-shadow: none; background: #36515d; }
.timeline-item .bar-label { font-size: .62rem; }
.timeline-item .bar-value { font-size: .61rem; }
.section-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.empty-state { padding: 48px 18px; color: #718995; text-align: center; }
.empty-state strong { color: #9db2bb; font-size: .84rem; }
.empty-icon { margin-bottom: 8px; color: #476673; font-size: 2.4rem; }
.notice { display: flex; align-items: flex-start; gap: 9px; padding: 13px 15px; border: 1px solid transparent; border-radius: 12px; font-size: .8rem; line-height: 1.5; }
.notice.info { color: #9eeafb; background: rgba(33,199,234,.075); border-color: rgba(33,199,234,.10); }
.notice.warning { color: #f4d28f; background: var(--warning-soft); border-color: rgba(244,189,88,.10); }
.notice.success { color: #8be7c1; background: var(--success-soft); border-color: rgba(70,215,160,.10); }
.notice.danger { color: #ff9fa5; background: var(--danger-soft); border-color: rgba(255,127,135,.10); }
.month-nav { display: flex; align-items: center; gap: 8px; }
.month-title { min-width: 160px; color: #fff; font-weight: 850; text-align: center; text-transform: capitalize; }
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.summary-item { padding: 13px; border: 1px solid rgba(116,167,185,.09); border-radius: 11px; background: rgba(5,17,24,.34); }
.summary-item span { display: block; color: var(--muted); font-size: .69rem; }
.summary-item strong { display: block; margin-top: 4px; color: #fff; font-size: 1.12rem; }

/* PROFILE / MODAL */
.profile-card { display: flex; gap: 17px; align-items: center; }
.profile-avatar { width: 74px; height: 74px; display: grid; place-items: center; border: 1px solid rgba(33,199,234,.20); border-radius: 20px; color: #00131b; background: linear-gradient(145deg, #75e6f9, #0ca8ca); box-shadow: 0 14px 32px rgba(7,149,181,.20); font-size: 1.7rem; font-weight: 900; }
.profile-card h2 { margin: 0; color: #fff; }
.profile-card p { margin: 4px 0 0; color: var(--muted); }
.health-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.health-item { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5,16,23,.28); }
.health-item strong { display: block; margin-top: 4px; color: #fff; }
.modal { width: min(700px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 1px solid rgba(89,171,198,.18); border-radius: 20px; color: var(--ink); background: #0b1b25; box-shadow: 0 35px 90px rgba(0,0,0,.55); }
.modal::backdrop { background: rgba(0,7,11,.72); backdrop-filter: blur(6px); }
.modal-card { margin: 0; background: linear-gradient(145deg, #0f2430, #091820); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 21px 23px 17px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; color: #fff; font-size: 1.32rem; }
.modal-body { max-height: 65vh; overflow-y: auto; padding: 22px 23px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 23px 20px; border-top: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.checkbox-row { display: flex; align-items: center; gap: 9px; }
.checkbox-row input { width: auto; accent-color: var(--cyan); }
.toast-root { position: fixed; right: 18px; top: 18px; z-index: 100; display: grid; gap: 9px; }
.toast { min-width: 280px; max-width: 420px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 11px; color: white; background: #0d202a; box-shadow: var(--shadow); animation: toastIn .22s ease-out; font-size: .8rem; }
.toast.success { border-left: 4px solid #46d7a0; }
.toast.error { border-left: 4px solid #ff7f87; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }

/* RESPONSIVE */
@media (max-width: 1180px) {
  .grid.kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .filters { grid-template-columns: repeat(3, minmax(140px,1fr)); }
  .secure-chip { display: none; }
  .top-user > div:last-child { display: none; }
}
@media (max-width: 920px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login-panel { min-height: 100vh; }
  .login-panel::before { display: none; }
  .mobile-brand { display: block; margin-bottom: 28px; }
  .mobile-brand img { width: 190px; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -292px; width: 276px; transition: left .25s ease; box-shadow: 20px 0 55px rgba(0,0,0,.45); }
  .sidebar.open { left: 0; }
  .sidebar-close, .menu-btn { display: grid; }
  .grid.two, .grid.three { grid-template-columns: 1fr; }
  .hero-card { grid-template-columns: 1fr; }
  .donut-layout { grid-template-columns: 1fr; }
  .topbar-mobile-logo { display: none; }
}
@media (max-width: 680px) {
  .login-panel { padding: 15px; }
  .login-card { padding: 28px 22px; }
  .demo-user { align-items: flex-start; flex-direction: column; gap: 3px; }
  .topbar { min-height: 70px; padding: 11px 14px; }
  .topbar h1 { font-size: 1.14rem; }
  .page-kicker { font-size: .56rem; }
  .topbar-actions .btn.subtle, .top-user { display: none; }
  .topbar-actions .btn.primary { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 0; }
  .topbar-actions .btn.primary::after { content: '+'; font-size: 1.45rem; font-weight: 500; }
  .content { padding: 15px 12px 34px; }
  .hero-card { padding: 21px; border-radius: 16px; }
  .hero-progress { width: 100%; }
  .grid.kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-card { min-height: 120px; padding: 15px; }
  .kpi-value { font-size: 1.45rem; }
  .kpi-label { font-size: .69rem; }
  .filters { grid-template-columns: 1fr; }
  .summary-strip { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .card { padding: 15px; border-radius: 15px; }
  .month-nav { width: 100%; justify-content: space-between; }
  .month-title { min-width: 120px; }
  .health-grid { grid-template-columns: 1fr; }
  .donut { width: 158px; height: 158px; }
  .feature-strip { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .grid.kpis { grid-template-columns: 1fr; }
  .summary-strip { grid-template-columns: 1fr; }
  .topbar-actions { gap: 6px; }
  .card-header { flex-direction: column; }
  .section-actions { width: 100%; }
  .section-actions .btn { flex: 1; }
}

/* V9.2 — registro estandarizado, calendario, carga múltiple y cursos */
.simple-month-hours { align-items: center; }
.month-hours-box {
  min-width: min(100%, 300px);
  padding: 20px 24px;
  border: 1px solid rgba(126,232,248,.22);
  border-radius: 16px;
  background: rgba(4,20,28,.46);
  box-shadow: inset 0 0 0 1px rgba(33,199,234,.04);
}
.month-hours-box span { display:block; color:#a8dce6; font-size:.78rem; margin-bottom:7px; text-transform:capitalize; }
.month-hours-box strong { display:block; color:#fff; font-size:2rem; line-height:1; }
.timesheet-filter-card { margin-top:18px; }
.timesheet-filters { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.compact-filters { grid-template-columns:minmax(220px,1fr) minmax(180px,.5fr); margin-bottom:16px; }
.timesheet-calendar { overflow-x:auto; }
.calendar-weekdays, .calendar-grid { min-width:650px; display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.calendar-weekdays { margin-bottom:8px; }
.calendar-weekdays span { color:var(--muted); text-align:center; font-size:.69rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.calendar-day {
  position:relative;
  min-height:92px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--ink);
  background:rgba(5,17,24,.34);
  text-align:left;
  transition:.16s ease;
}
.calendar-day:not(.empty):hover { border-color:rgba(33,199,234,.42); transform:translateY(-1px); background:rgba(12,37,48,.74); }
.calendar-day.empty { visibility:hidden; pointer-events:none; }
.calendar-day.has-hours { border-color:rgba(70,215,160,.26); background:rgba(70,215,160,.075); }
.calendar-number { display:block; font-weight:900; color:#ddecf1; }
.calendar-check { position:absolute; right:10px; top:9px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#04170f; background:var(--success); font-weight:900; }
.calendar-day strong { display:block; margin-top:18px; color:#8be7c1; font-size:.78rem; }
.calendar-empty-label { display:block; margin-top:18px; color:#59717c; font-size:.67rem; }
.bulk-section { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.bulk-rows { display:grid; gap:10px; margin-top:14px; }
.bulk-row { display:grid; grid-template-columns:minmax(180px,1fr) minmax(110px,.45fr) auto; gap:10px; align-items:end; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(5,17,24,.30); }
.bulk-row .btn { margin-bottom:1px; }
.bulk-total { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px; padding:14px 16px; border-radius:12px; background:rgba(33,199,234,.08); border:1px solid rgba(33,199,234,.12); }
.bulk-total span { color:var(--muted); }
.bulk-total strong { color:#fff; font-size:1.2rem; }
.course-grid { align-items:start; }
.course-summary { grid-template-columns:repeat(2,1fr); }
#load-status-filter { min-width:150px; }
input[readonly] { color:#8ce9fa; background:rgba(33,199,234,.05); cursor:default; }
@media (max-width:680px) {
  .month-hours-box { width:100%; }
  .bulk-row { grid-template-columns:1fr 1fr; }
  .bulk-row .btn { grid-column:1/-1; width:100%; }
  .compact-filters { grid-template-columns:1fr; }
}


/* V9.2 corregida: ocultar 24/7 / 3 roles / Reportes sin tocar index.html */
.feature-strip { display: none !important; }