:root {
  --ink: #07151f;
  --indigo: #111046;
  --deep: #090d2d;
  --deep-2: #0d1438;
  --surface: #f4f7f8;
  --surface-2: #ffffff;
  --text: #17212b;
  --muted: #68747d;
  --line: #dce5e8;
  --line-dark: rgba(128, 160, 190, 0.2);
  --lime: #ccff2f;
  --cyan: #44eaff;
  --purple: #9172ff;
  --orange: #ff8a3d;
  --pink: #ff3eac;
  --coral: #ff6b62;
  --radius: 8px;
  --shadow: 0 24px 80px rgba(4, 8, 35, 0.22);
  color-scheme: light;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #080d2a; }
body { margin: 0; min-height: 100vh; color: var(--text); background:
  linear-gradient(rgba(68, 234, 255, 0.035) 1px, transparent 1px),
  linear-gradient(90deg, rgba(68, 234, 255, 0.035) 1px, transparent 1px),
  radial-gradient(circle at 50% 0%, #172159 0, #080d2a 54%);
  background-size: 48px 48px, 48px 48px, auto;
}
button, input { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
svg { width: 1em; height: 1em; stroke-width: 1.8; }
[hidden] { display: none !important; }

.demo-toolbar {
  position: fixed;
  z-index: 100;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 286px;
  height: 48px;
  padding: 5px 6px 5px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #eff8ff;
  border: 1px solid rgba(112, 148, 192, 0.26);
  border-radius: 8px;
  background: rgba(8, 13, 42, 0.92);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}
.demo-brand { display: flex; align-items: center; gap: 8px; font-weight: 750; }
.demo-brand img { width: 22px; height: 22px; object-fit: contain; }
.mode-switch { display: flex; gap: 3px; padding: 2px; background: rgba(255,255,255,.06); border-radius: 6px; }
.mode-switch button {
  height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 6px;
  border: 0; border-radius: 5px; color: #9faccc; background: transparent; font-size: 12px; font-weight: 700;
}
.mode-switch button svg { font-size: 15px; }
.mode-switch button.is-active { color: #081121; background: linear-gradient(120deg, var(--lime), var(--cyan)); }

.demo-stage { min-height: 100vh; padding: 84px 24px 40px; }
.employee-preview { width: 100%; display: grid; place-items: start center; }
.mobile-app {
  position: relative;
  width: min(390px, calc(100vw - 24px));
  min-height: 844px;
  overflow: hidden;
  border: 1px solid rgba(96, 132, 176, 0.28);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.employee-header {
  position: relative;
  padding: max(18px, env(safe-area-inset-top)) 20px 26px;
  overflow: hidden;
  color: #f8fbff;
  background:
    linear-gradient(115deg, rgba(68,234,255,.08), transparent 38%),
    linear-gradient(145deg, #0a1733 0%, #15104a 58%, #20134d 100%);
}
.employee-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--lime), var(--purple), var(--pink));
}
.mobile-topbar { display: flex; align-items: center; justify-content: space-between; }
.wordmark { display: flex; align-items: center; gap: 8px; }
.wordmark img { width: 24px; height: 24px; }
.wordmark strong { font-size: 16px; }
.icon-button, .identity-more {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px;
  color: inherit; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(255,255,255,.05);
}
.unread-dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.identity-row { position: relative; z-index: 1; display: grid; grid-template-columns: 58px 1fr 38px; gap: 12px; align-items: center; margin-top: 26px; }
.avatar {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  color: #07151f; font-size: 23px; font-weight: 850;
  background: linear-gradient(145deg, #caff31, #4ce9e6 62%, #8b75ff);
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}
.identity-copy p, .identity-copy h1, .identity-copy small { margin: 0; }
.identity-copy p { color: #9baed1; font-size: 12px; }
.identity-copy h1 { margin-top: 3px; font-size: 22px; line-height: 1.25; }
.identity-copy h1 span { color: var(--lime); font-size: 13px; }
.identity-copy small { display: flex; align-items: center; gap: 4px; margin-top: 5px; color: #b6c2dc; font-size: 11px; }
.identity-copy small svg { font-size: 12px; }
.identity-more { border: 0; background: transparent; }

.growth-focus { position: relative; z-index: 1; display: grid; grid-template-columns: 106px 1fr; align-items: center; gap: 15px; margin-top: 24px; }
.growth-ring {
  --angle: calc(var(--progress) * 3.6deg);
  width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%;
  background: conic-gradient(var(--lime) 0 var(--angle), rgba(255,255,255,.1) var(--angle) 360deg);
  box-shadow: 0 0 26px rgba(204,255,47,.12);
}
.growth-ring::before { content: ""; position: absolute; width: 82px; height: 82px; border-radius: 50%; background: #11133f; }
.growth-ring div { position: relative; display: flex; align-items: baseline; }
.growth-ring strong { font-size: 31px; line-height: 1; }
.growth-ring span { margin-left: 2px; color: var(--lime); font-size: 12px; font-weight: 800; }
.growth-copy p, .growth-copy h2 { margin: 0; }
.growth-copy p { color: #a5b4d2; font-size: 11px; }
.growth-copy h2 { max-width: 195px; margin-top: 5px; font-size: 19px; line-height: 1.35; }
.growth-copy button {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 13px; padding: 0; border: 0;
  color: var(--cyan); background: transparent; font-size: 11px; font-weight: 750;
}

.employee-pages { min-height: 510px; padding-bottom: 84px; }
.employee-page { display: none; animation: page-in .22s ease; }
.employee-page.is-active { display: block; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.metric-rail { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.metric-rail button { min-height: 92px; padding: 16px 18px; text-align: left; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; }
.metric-rail button:nth-child(2n) { border-right: 0; }
.metric-rail button:nth-last-child(-n+2) { border-bottom: 0; }
.metric-rail span, .metric-rail strong, .metric-rail em { display: block; font-style: normal; }
.metric-rail span { color: var(--muted); font-size: 11px; }
.metric-rail strong { margin-top: 3px; color: #121a2c; font-size: 26px; line-height: 1.1; }
.metric-rail .status-value { color: #187b6f; font-size: 19px; margin-top: 8px; }
.metric-rail em { margin-top: 4px; color: #839097; font-size: 10px; }

.content-section { margin-top: 10px; padding: 21px 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.section-heading span, .section-heading h2 { display: block; margin: 0; }
.section-heading span { color: #76848d; font-size: 10px; font-weight: 750; }
.section-heading h2 { margin-top: 3px; font-size: 17px; line-height: 1.35; }
.section-heading > strong { padding: 4px 7px; color: #16756a; border-radius: 4px; background: #e3f8ee; font-size: 11px; }
.section-heading > svg { color: #1d8a78; font-size: 22px; }
.task-list { margin-top: 14px; }
.task-row { width: 100%; min-height: 62px; padding: 11px 0; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; border: 0; border-top: 1px solid #edf1f2; text-align: left; background: transparent; }
.task-row:first-child { border-top: 0; }
.task-check { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #9eb0b6; border-radius: 50%; color: transparent; }
.task-row.is-done .task-check { color: #0d2726; border-color: var(--lime); background: var(--lime); }
.task-row.is-done .task-main strong { color: #7d888e; text-decoration: line-through; }
.task-main strong, .task-main small { display: block; }
.task-main strong { font-size: 13px; }
.task-main small { margin-top: 4px; color: #7c898f; font-size: 10px; }
.task-score { color: #208578; font-size: 11px; font-weight: 800; }

.trend-plot { margin-top: 17px; }
.trend-meta { display: flex; justify-content: space-between; color: #77858d; font-size: 10px; }
.trend-meta strong { color: #147e70; font-size: 12px; }
.bars { height: 88px; margin-top: 10px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; border-bottom: 1px solid #dce5e7; }
.bars span { height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #54c8d0, #166f92 78%, #16375c); }
.bars span.current { background: linear-gradient(180deg, var(--lime), #4ad8bd 56%, #26758c); box-shadow: 0 0 14px rgba(204,255,47,.22); }
.trend-labels { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; margin-top: 6px; color: #879399; font-size: 9px; text-align: center; }
.insight-line { margin: 15px 0 0; padding: 10px 12px; display: flex; gap: 8px; color: #315458; border-left: 3px solid var(--cyan); background: #ecf8f8; font-size: 11px; line-height: 1.55; }
.insight-line svg { flex: 0 0 auto; margin-top: 2px; color: #168b85; }

.coach-band { margin-top: 10px; padding: 17px 20px; display: grid; grid-template-columns: 44px 1fr 36px; gap: 12px; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0d1539; color: #fff; }
.coach-avatar { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(68,234,255,.35); border-radius: 50%; color: var(--cyan); background: #17244a; font-weight: 800; }
.coach-band span, .coach-band strong, .coach-band small { display: block; }
.coach-band span { color: #8da0c6; font-size: 9px; }
.coach-band strong { margin-top: 2px; font-size: 13px; }
.coach-band small { margin-top: 3px; color: #9aaccc; font-size: 9px; }
.coach-band button { display: grid; place-items: center; width: 34px; height: 34px; color: #08151e; border: 0; border-radius: 50%; background: var(--cyan); }

.honor-story { margin: 10px 0 0; padding: 22px 20px; display: grid; grid-template-columns: 48px 1fr; gap: 14px; border-top: 1px solid #f1d7bd; border-bottom: 1px solid #f1d7bd; background: linear-gradient(125deg, #fff9f1, #fff 64%, #fff5e8); }
.honor-symbol { display: grid; place-items: center; width: 46px; height: 46px; color: #8c3d12; border-radius: 50%; background: linear-gradient(145deg, #ffc46e, var(--orange)); box-shadow: 0 8px 18px rgba(255,138,61,.2); }
.honor-story span { color: #b55b1e; font-size: 10px; font-weight: 800; }
.honor-story h2 { margin: 5px 0 0; font-size: 14px; line-height: 1.5; }
.honor-story p { margin: 6px 0 0; color: #8d7768; font-size: 9px; }

.mobile-bottom-nav {
  position: absolute; z-index: 20; left: 0; right: 0; bottom: 0;
  min-height: calc(67px + env(safe-area-inset-bottom)); padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
}
.mobile-bottom-nav button { min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; color: #89959b; background: transparent; font-size: 9px; font-weight: 700; }
.mobile-bottom-nav button svg { font-size: 20px; }
.mobile-bottom-nav button.is-active { color: #0b796d; }
.mobile-bottom-nav button.is-active svg { filter: drop-shadow(0 0 8px rgba(204,255,47,.55)); }

.page-title { min-height: 88px; padding: 26px 20px 18px; display: flex; align-items: center; gap: 14px; color: #fff; background: linear-gradient(135deg, #0a1733, #17104a); }
.page-title button { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(255,255,255,.05); }
.page-title span { color: #95a9cb; font-size: 10px; }
.page-title h2 { margin: 3px 0 0; font-size: 20px; }
.growth-overview { padding: 24px 20px; color: #fff; background: #11133f; }
.large-progress { display: flex; align-items: baseline; justify-content: space-between; }
.large-progress strong { color: var(--lime); font-size: 36px; }
.large-progress span { color: #9cafce; font-size: 11px; }
.level-track { position: relative; margin-top: 24px; display: grid; grid-template-columns: repeat(4,1fr); text-align: center; }
.level-track::before { content:""; position: absolute; top: 12px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg,var(--lime) 0 50%,rgba(255,255,255,.15) 50%); }
.level-track span { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; width: 27px; height: 27px; border: 2px solid #465077; border-radius: 50%; color: #8996b9; background: #11133f; font-size: 9px; font-weight: 800; }
.level-track span.done { color: #0b1c23; border-color: var(--lime); background: var(--lime); }
.level-track span.active { color: var(--lime); border-color: var(--lime); box-shadow: 0 0 12px rgba(204,255,47,.3); }
.requirement-list { margin-top: 12px; }
.requirement { width: 100%; min-height: 58px; padding: 10px 0; display: grid; grid-template-columns: 24px 1fr auto; gap: 9px; align-items: center; text-align: left; border: 0; border-top: 1px solid #edf1f2; color: #99a5aa; background: transparent; }
.requirement:first-child { border-top: 0; }
.requirement svg { color: #8d999f; font-size: 19px; }
.requirement.is-complete svg { color: #15907d; }
.requirement span strong, .requirement span small { display: block; }
.requirement span strong { color: #182229; font-size: 12px; }
.requirement span small { margin-top: 4px; color: #86939a; font-size: 9px; }
.requirement em { color: #158576; font-size: 10px; font-style: normal; font-weight: 800; }
.growth-timeline { margin: 17px 0 0; padding: 0; list-style: none; }
.growth-timeline li { position: relative; padding: 0 0 20px 60px; display: grid; grid-template-columns: 1fr; }
.growth-timeline li::before { content:""; position: absolute; left: 43px; top: 5px; bottom: -5px; width: 1px; background: #dce7e8; }
.growth-timeline li::after { content:""; position:absolute; left: 39px; top: 4px; width: 9px; height: 9px; border-radius:50%; background:var(--cyan); }
.growth-timeline time { position:absolute; left:0; top:0; color:#718087; font-size:9px; }
.growth-timeline strong, .growth-timeline span { display:block; }
.growth-timeline strong { font-size:12px; }
.growth-timeline span { margin-top:4px; color:#7e8b91; font-size:9px; }

.score-hero { padding: 28px 20px; color: #fff; background: linear-gradient(145deg,#11133f,#16215a); }
.score-hero > div:first-child { display:flex; align-items:flex-end; gap:10px; }
.score-hero strong { color:var(--lime); font-size:56px; line-height:1; }
.score-hero div span { padding:4px 7px; color:#0b2420; border-radius:4px; background:var(--lime); font-size:10px; font-weight:800; }
.score-hero p { color:#aebbd4; font-size:11px; }
.score-line { height:5px; overflow:hidden; border-radius:3px; background:rgba(255,255,255,.1); }
.score-line span { display:block; width:var(--score); height:100%; background:linear-gradient(90deg,var(--cyan),var(--lime)); }
.dimension-list { margin-top:16px; }
.dimension-list div { display:grid; grid-template-columns:72px 1fr 30px; gap:10px; align-items:center; min-height:38px; }
.dimension-list span { font-size:11px; }
.dimension-list b { height:6px; overflow:hidden; border-radius:3px; background:#e5ecee; }
.dimension-list b::after { content:""; display:block; width:var(--score); height:100%; background:linear-gradient(90deg,#2e779b,#4adccf); }
.dimension-list strong { text-align:right; font-size:11px; }
.manager-comment { margin:10px 0 0; padding:22px 20px; color:#fff; background:#10183c; }
.manager-comment svg { color:var(--cyan); font-size:22px; }
.manager-comment p { margin:10px 0; font-size:13px; line-height:1.7; }
.manager-comment span { color:#94a6c4; font-size:9px; }

.payroll-locked { min-height:480px; padding:70px 35px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.lock-mark { display:grid; place-items:center; width:72px; height:72px; color:#0e3430; border-radius:50%; background:linear-gradient(145deg,var(--lime),var(--cyan)); }
.lock-mark svg { font-size:31px; }
.payroll-locked h2 { margin:22px 0 0; font-size:20px; }
.payroll-locked p { margin:10px 0 0; color:#718087; font-size:11px; line-height:1.7; }
.payroll-locked > button { width:100%; height:46px; margin-top:24px; color:#07151f; border:0; border-radius:6px; background:linear-gradient(105deg,var(--lime),var(--cyan)); font-weight:800; }
.payroll-locked small { display:flex; align-items:center; gap:5px; margin-top:12px; color:#89959b; font-size:9px; }
.payroll-total { padding:30px 20px; color:#fff; background:linear-gradient(145deg,#0b1735,#19124d); }
.payroll-total span,.payroll-total strong,.payroll-total small { display:block; }
.payroll-total span { color:#99aac9; font-size:10px; }
.payroll-total strong { margin-top:7px; color:var(--lime); font-size:33px; }
.payroll-total small { margin-top:8px; color:#a7b4ce; font-size:9px; }
.payroll-list { margin:15px 0 0; }
.payroll-list div { min-height:40px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid #edf1f2; }
.payroll-list dt { color:#57666d; font-size:11px; }
.payroll-list dd { margin:0; font-size:11px; font-weight:700; }
.deductions dd { color:#b34c4c; }
.confirm-payroll { width:calc(100% - 40px); height:44px; margin:18px 20px 28px; border:0; border-radius:6px; color:#07151f; background:var(--lime); font-weight:800; }
.confirm-payroll.is-confirmed { color:#14695f; background:#dff4ed; }

.profile-hero { padding:42px 20px 28px; text-align:center; color:#fff; background:linear-gradient(145deg,#0a1733,#18104c); }
.avatar.large { width:72px; height:72px; margin:0 auto; }
.profile-hero h2 { margin:14px 0 0; font-size:21px; }
.profile-hero p { margin:6px 0 0; color:#a1b0cc; font-size:10px; }
.settings-list { margin-top:10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.settings-list button { width:100%; min-height:58px; padding:0 20px; display:grid; grid-template-columns:24px 1fr auto 16px; gap:10px; align-items:center; text-align:left; border:0; border-top:1px solid #edf1f2; background:transparent; }
.settings-list button:first-child { border-top:0; }
.settings-list button > svg:first-child { color:#1d7c73; font-size:19px; }
.settings-list span { font-size:12px; font-weight:700; }
.settings-list em { color:#8a969c; font-size:9px; font-style:normal; }
.settings-list button > svg:last-child { color:#9aa5aa; font-size:15px; }
.privacy-note { margin:20px; color:#8a969c; font-size:9px; text-align:center; }

.payroll-dialog { width:min(348px,calc(100vw - 28px)); padding:0; border:0; border-radius:10px; background:#fff; box-shadow:0 28px 90px rgba(0,0,0,.35); }
.payroll-dialog::backdrop { background:rgba(4,8,30,.72); backdrop-filter:blur(4px); }
.payroll-dialog form { position:relative; padding:30px 24px 24px; text-align:center; }
.dialog-close { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:50%; color:#68757d; background:#edf2f3; }
.dialog-icon { display:grid; place-items:center; width:62px; height:62px; margin:0 auto; color:#0b302b; border-radius:50%; background:linear-gradient(145deg,var(--lime),var(--cyan)); }
.dialog-icon svg { font-size:28px; }
.payroll-dialog h2 { margin:18px 0 0; font-size:20px; }
.payroll-dialog p { margin:8px 0 0; color:#728087; font-size:11px; line-height:1.6; }
.payroll-dialog label { margin-top:20px; display:flex; align-items:flex-start; gap:9px; text-align:left; color:#425159; font-size:11px; line-height:1.5; }
.payroll-dialog input { width:18px; height:18px; accent-color:#159585; }
.dialog-primary { width:100%; height:44px; margin-top:18px; border:0; border-radius:6px; color:#07151f; background:linear-gradient(105deg,var(--lime),var(--cyan)); font-weight:800; }
.dialog-primary:disabled { color:#91a0a6; background:#e4eaec; cursor:not-allowed; }

.admin-preview { width:100%; }
.admin-shell { width:min(1780px,100%); min-height:900px; margin:0 auto; display:grid; grid-template-columns:220px minmax(0,1fr); overflow:hidden; border:1px solid rgba(102,138,180,.26); border-radius:10px; background:#080d2a; box-shadow:var(--shadow); }
.admin-sidebar { padding:22px 14px; display:flex; flex-direction:column; color:#b5c0dc; border-right:1px solid var(--line-dark); background:linear-gradient(180deg,#090e2d,#0c1132); }
.admin-logo img { width:118px; max-height:42px; object-fit:contain; object-position:left center; }
.admin-product { margin:24px 8px 16px; padding:13px 12px; border-left:3px solid var(--lime); background:rgba(204,255,47,.06); }
.admin-product span,.admin-product strong { display:block; }
.admin-product span { color:#7182aa; font-size:10px; }
.admin-product strong { margin-top:3px; color:#f3f7ff; font-size:15px; }
.admin-sidebar nav { display:flex; flex-direction:column; gap:4px; }
.admin-sidebar nav button { height:42px; padding:0 12px; display:flex; align-items:center; gap:11px; text-align:left; border:1px solid transparent; border-radius:6px; color:#8999bd; background:transparent; font-size:12px; font-weight:700; }
.admin-sidebar nav button svg { font-size:17px; }
.admin-sidebar nav button.is-active { color:#eff9ff; border-color:rgba(68,234,255,.2); background:linear-gradient(90deg,rgba(68,234,255,.14),rgba(145,114,255,.08)); }
.admin-sidebar nav button.is-active svg { color:var(--lime); }
.admin-user { margin-top:auto; padding:13px 10px 0; display:grid; grid-template-columns:34px 1fr 16px; gap:9px; align-items:center; border-top:1px solid var(--line-dark); }
.admin-user > div { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#08151e; background:linear-gradient(145deg,var(--lime),var(--cyan)); font-size:10px; font-weight:850; }
.admin-user strong,.admin-user small { display:block; }
.admin-user strong { color:#e6edff; font-size:11px; }
.admin-user small { margin-top:3px; color:#7081a7; font-size:8px; }
.admin-workspace { min-width:0; background:
  linear-gradient(rgba(68,234,255,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(68,234,255,.025) 1px,transparent 1px),#080d2a; background-size:40px 40px; }
.admin-topbar { height:74px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line-dark); background:rgba(9,14,45,.84); }
.admin-topbar > div:first-child span,.admin-topbar > div:first-child strong { display:block; }
.admin-topbar > div:first-child span { color:#7182aa; font-size:9px; }
.admin-topbar > div:first-child strong { margin-top:4px; color:#f1f6ff; font-size:17px; }
.admin-actions { display:flex; align-items:center; gap:9px; }
.search-box { width:250px; height:38px; padding:0 11px; display:flex; align-items:center; gap:8px; border:1px solid var(--line-dark); border-radius:6px; color:#7181a8; background:#0b1235; }
.search-box input { min-width:0; flex:1; border:0; outline:0; color:#e5edff; background:transparent; font-size:10px; }
.search-box svg { font-size:15px; }
.admin-actions .icon-button { color:#aab7d3; }
.primary-action { height:38px; padding:0 13px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:6px; color:#08151e; background:linear-gradient(110deg,var(--lime),var(--cyan)); font-size:10px; font-weight:850; }
.primary-action svg { font-size:15px; }
.admin-content { padding:24px; }
.admin-page { display:none; animation:page-in .2s ease; }
.admin-page.is-active { display:block; }
.admin-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.admin-page-head h1 { margin:0; color:#f3f7ff; font-size:23px; }
.admin-page-head p { margin:6px 0 0; color:#7f90b5; font-size:10px; }
.filter-row { display:flex; gap:7px; }
.filter-row button,.filter-toolbar button { height:36px; padding:0 11px; display:flex; align-items:center; gap:8px; color:#9aa9c7; border:1px solid var(--line-dark); border-radius:6px; background:#0b1235; font-size:9px; }
.admin-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.admin-kpis article { position:relative; min-height:112px; padding:18px; overflow:hidden; border:1px solid var(--line-dark); border-radius:7px; background:linear-gradient(135deg,rgba(16,27,65,.98),rgba(15,18,57,.98)); }
.admin-kpis article::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,var(--cyan),var(--lime),var(--purple)); }
.admin-kpis span,.admin-kpis strong,.admin-kpis small { display:block; }
.admin-kpis span { color:#8c9abd; font-size:10px; }
.admin-kpis strong { margin-top:6px; color:#f4f7ff; font-size:28px; }
.admin-kpis small { margin-top:6px; color:#7787aa; font-size:9px; }
.admin-kpis small b { color:var(--lime); }
.admin-kpis article > svg { position:absolute; top:18px; right:18px; color:rgba(68,234,255,.34); font-size:25px; }
.overview-grid { margin-top:10px; display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr); gap:10px; }
.admin-panel { border:1px solid var(--line-dark); border-radius:7px; background:rgba(12,18,54,.94); }
.panel-head { min-height:62px; padding:14px 17px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid var(--line-dark); }
.panel-head span,.panel-head h2 { display:block; margin:0; }
.panel-head span { color:#7283a8; font-size:8px; font-weight:750; }
.panel-head h2 { margin-top:3px; color:#e9efff; font-size:15px; }
.panel-head > button { display:flex; align-items:center; gap:5px; padding:0; color:#7ce9ed; border:0; background:transparent; font-size:9px; }
.panel-head > strong { color:var(--lime); font-size:20px; }
.level-chart { height:240px; padding:25px 22px 16px; display:grid; grid-template-columns:28px 1fr; gap:10px; }
.chart-axis { display:flex; flex-direction:column; justify-content:space-between; color:#536489; font-size:8px; }
.level-bars { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; align-items:end; border-bottom:1px solid #273356; background:repeating-linear-gradient(to bottom,transparent 0,transparent 43px,rgba(112,143,187,.1) 44px); }
.level-bars div { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.level-bars div > span { position:relative; width:min(44px,70%); height:var(--height); border-radius:5px 5px 0 0; background:linear-gradient(180deg,#44eaff,#278bb6 52%,#172b69); box-shadow:0 0 14px rgba(68,234,255,.09); }
.level-bars div:nth-child(3) > span { background:linear-gradient(180deg,var(--lime),#45d8b5 52%,#1c5575); }
.level-bars em { position:absolute; top:-18px; left:50%; transform:translateX(-50%); color:#cad5ee; font-size:9px; font-style:normal; font-weight:800; }
.level-bars b { margin:8px 0 -14px; color:#7f8eaf; font-size:8px; }
.chart-insight { margin:0 18px 18px; padding:10px 12px; display:flex; gap:9px; color:#91a0be; border-left:2px solid var(--lime); background:rgba(204,255,47,.055); font-size:9px; line-height:1.5; }
.chart-insight svg { flex:0 0 auto; color:var(--lime); font-size:16px; }
.chart-insight strong { color:#dfe8ff; }
.attention-list { padding:5px 16px 12px; }
.attention-list button { width:100%; min-height:62px; display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; text-align:left; border:0; border-top:1px solid var(--line-dark); color:#fff; background:transparent; }
.attention-list button:first-child { border-top:0; }
.attention-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:6px; }
.attention-icon.lime { color:var(--lime); background:rgba(204,255,47,.1); }
.attention-icon.purple { color:#a78dff; background:rgba(145,114,255,.12); }
.attention-icon.orange { color:var(--orange); background:rgba(255,138,61,.12); }
.attention-icon.coral { color:var(--coral); background:rgba(255,107,98,.12); }
.attention-list button span strong,.attention-list button span small { display:block; }
.attention-list button span strong { font-size:10px; }
.attention-list button span small { margin-top:4px; color:#7788ad; font-size:8px; }
.attention-list button em { color:#c8d3e9; font-size:10px; font-style:normal; }
.employee-focus { margin-top:10px; }
.panel-tabs { display:flex; gap:4px; }
.panel-tabs button { height:28px; padding:0 10px; border:0; border-radius:4px; color:#7f8fb2; background:transparent; font-size:8px; }
.panel-tabs button.is-active { color:#dff8f3; background:rgba(68,234,255,.1); }
.employee-table { overflow-x:auto; }
.table-row { width:100%; min-width:900px; min-height:58px; padding:0 17px; display:grid; grid-template-columns:1.25fr 1.35fr .65fr .65fr 1.1fr .75fr .7fr; gap:12px; align-items:center; text-align:left; border:0; border-top:1px solid var(--line-dark); color:#d8e1f4; background:transparent; font-size:9px; }
.table-row:not(.table-head):hover { background:rgba(68,234,255,.035); }
.table-head { min-height:38px; color:#68799f; border-top:0; font-size:8px; font-weight:800; }
.table-row > span:first-child { display:flex; align-items:center; gap:8px; }
.table-row span strong,.table-row span small { display:block; }
.table-row span small { margin-top:3px; color:#69799e; font-size:7px; }
.table-row em { font-style:normal; }
.mini-avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#08151e; font-size:9px; }
.mini-avatar.cyan { background:linear-gradient(145deg,var(--cyan),#52baee); }
.mini-avatar.purple { background:linear-gradient(145deg,#b28cff,#6a70ef); }
.mini-avatar.orange { background:linear-gradient(145deg,#ffc16d,var(--orange)); }
.score-good { color:var(--lime); font-size:11px; }
.progress-mini { width:60px; height:5px; display:inline-block; overflow:hidden; border-radius:3px; background:#263354; }
.progress-mini i { display:block; width:var(--value); height:100%; background:linear-gradient(90deg,var(--cyan),var(--lime)); }
.state-lime,.state-purple,.state-cyan { display:inline-block; padding:4px 6px; border-radius:4px; font-size:7px; }
.state-lime { color:var(--lime); background:rgba(204,255,47,.09); }
.state-purple { color:#b9a8ff; background:rgba(145,114,255,.1); }
.state-cyan { color:var(--cyan); background:rgba(68,234,255,.09); }

.filter-toolbar { padding:14px 16px; display:flex; gap:8px; border-bottom:1px solid var(--line-dark); }
.filter-toolbar label { width:240px; height:36px; padding:0 10px; display:flex; align-items:center; gap:8px; color:#7081a5; border:1px solid var(--line-dark); border-radius:6px; background:#091032; }
.filter-toolbar input { min-width:0; flex:1; color:#e4ebfa; border:0; outline:0; background:transparent; font-size:9px; }
.simple-table { padding:0 16px 16px; }
.simple-row { min-height:62px; display:grid; grid-template-columns:1.2fr 1fr .8fr .8fr .8fr auto; gap:12px; align-items:center; border-top:1px solid var(--line-dark); color:#cfd9ef; font-size:9px; }
.simple-row:first-child { border-top:0; }
.simple-row > span:first-child { display:flex; align-items:center; gap:9px; }
.simple-row strong,.simple-row small { display:block; }
.simple-row small { margin-top:3px; color:#7181a6; font-size:8px; }
.simple-row button { width:32px; height:32px; display:grid; place-items:center; color:#8da0c4; border:1px solid var(--line-dark); border-radius:5px; background:transparent; }

.position-board { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.position-card { padding:18px; border:1px solid var(--line-dark); border-radius:7px; background:rgba(12,18,54,.94); }
.position-card header { display:flex; align-items:center; justify-content:space-between; }
.position-card h2 { margin:0; color:#eef4ff; font-size:15px; }
.position-card header span { color:#7283a8; font-size:8px; }
.level-steps { margin-top:20px; display:flex; flex-direction:column; gap:8px; }
.level-step { padding:11px; display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:9px; border-left:2px solid #3b4b72; background:#0b1235; }
.level-step b { color:var(--cyan); font-size:10px; }
.level-step strong,.level-step small { display:block; }
.level-step strong { color:#dce6f8; font-size:9px; }
.level-step small { margin-top:3px; color:#6e7e9f; font-size:7px; }
.level-step em { color:#91a0bd; font-size:8px; font-style:normal; }
.level-step.active { border-left-color:var(--lime); }

.cycle-board,.payroll-batches,.honor-board,.coaching-board { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.workflow-card { min-height:190px; padding:18px; border:1px solid var(--line-dark); border-radius:7px; background:rgba(12,18,54,.94); }
.workflow-card > span { color:#7182a7; font-size:8px; }
.workflow-card h2 { margin:6px 0 0; color:#edf4ff; font-size:16px; }
.workflow-card p { margin:8px 0 0; color:#7f8fb0; font-size:9px; line-height:1.6; }
.workflow-stats { margin-top:20px; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.workflow-stats div { padding:10px; border-left:2px solid var(--cyan); background:#0a1133; }
.workflow-stats strong,.workflow-stats small { display:block; }
.workflow-stats strong { color:#eef5ff; font-size:17px; }
.workflow-stats small { margin-top:3px; color:#7181a4; font-size:7px; }
.workflow-card footer { margin-top:18px; display:flex; justify-content:space-between; align-items:center; }
.workflow-card footer b { color:var(--lime); font-size:8px; }
.workflow-card footer button { height:30px; padding:0 9px; color:#a7f7f0; border:1px solid rgba(68,234,255,.23); border-radius:5px; background:rgba(68,234,255,.06); font-size:8px; }

.employee-drawer { position:fixed; z-index:130; inset:0; display:none; }
.employee-drawer.is-open { display:block; }
.drawer-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(3,7,25,.7); }
.drawer-panel { position:absolute; top:0; right:0; width:min(460px,100%); height:100%; padding:34px 24px; overflow:auto; color:#dfe8fb; border-left:1px solid var(--line-dark); background:#0b1235; box-shadow:-24px 0 60px rgba(0,0,0,.3); animation:drawer-in .22s ease; }
@keyframes drawer-in { from { transform:translateX(30px); opacity:.4; } to { transform:none; opacity:1; } }
.drawer-profile { display:flex; gap:14px; align-items:center; }
.drawer-profile h2 { margin:0; color:#fff; font-size:20px; }
.drawer-profile p { margin:5px 0 0; color:#7f90b5; font-size:9px; }
.drawer-grid { margin-top:24px; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.drawer-grid div { padding:13px; border:1px solid var(--line-dark); border-radius:6px; background:#0d173e; }
.drawer-grid span,.drawer-grid strong { display:block; }
.drawer-grid span { color:#7081a5; font-size:8px; }
.drawer-grid strong { margin-top:5px; color:#ecf3ff; font-size:12px; }
.drawer-section { margin-top:24px; }
.drawer-section h3 { color:#fff; font-size:13px; }
.drawer-section p { color:#91a1bf; font-size:10px; line-height:1.7; }

.toast { position:fixed; z-index:160; left:50%; bottom:26px; transform:translate(-50%,20px); padding:11px 16px; color:#07151f; border-radius:6px; background:linear-gradient(110deg,var(--lime),var(--cyan)); box-shadow:0 12px 30px rgba(0,0,0,.25); font-size:11px; font-weight:800; opacity:0; pointer-events:none; transition:.2s ease; }
.toast.is-visible { transform:translate(-50%,0); opacity:1; }

@media (max-width: 760px) {
  body { background:var(--surface); }
  .demo-toolbar { top:8px; height:42px; }
  .demo-stage { padding:58px 0 0; }
  .mobile-app { width:100%; min-height:calc(100vh - 58px); border:0; border-radius:0; box-shadow:none; }
  .employee-header { padding-top:16px; }
  .admin-preview { overflow:auto; }
  .admin-shell { width:1180px; border-radius:0; }
}

@media (min-width: 761px) and (max-width: 1200px) {
  .admin-shell { grid-template-columns:190px minmax(900px,1fr); overflow:auto; }
}

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