:root {
  color-scheme:dark;
  --bg:#090b18;
  --sidebar:#0c0f20;
  --surface:#111427;
  --surface-2:#14182f;
  --surface-3:#191e38;
  --line:rgba(174,184,239,.10);
  --line-strong:rgba(174,184,239,.17);
  --text:#f4f5ff;
  --muted:#949ab8;
  --muted-2:#6f7798;
  --violet:#a78bfa;
  --violet-2:#8266eb;
  --cyan:#55e2d2;
  --green:#62d6a6;
  --amber:#f0be72;
  --red:#ff788c;
  --radius:18px;
  --shadow:0 18px 52px rgba(0,0,0,.2);
  font-family:'DM Sans',Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-synthesis:none;
  text-rendering:optimizeLegibility
}
* {
  box-sizing:border-box
}
html {
  min-width:320px;
  background:var(--bg);
  scroll-behavior:smooth
}
body {
  margin:0;
  min-height:100vh;
  background:radial-gradient(ellipse at 89% -12%,rgba(95,76,188,.17),transparent 35%),var(--bg);
  color:var(--text)
}
button,input,select,textarea {
  font:inherit
}
button {
  color:inherit
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:3px
}
.app-shell {
  min-height:100vh
}
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:252px;
  padding:24px 16px 18px 18px;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,#0d1022 0%,#0b0e1d 100%);
  border-right:1px solid rgba(187,191,255,.08);
  z-index:30
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  padding:2px 9px 35px;
  text-decoration:none;
  color:var(--text)
}
.brand-mark {
  width:41px;
  height:41px;
  border-radius:13px;
  display:grid;
  place-items:center;
  color:#b9a4ff;
  background:linear-gradient(145deg,rgba(157,123,255,.23),rgba(75,54,157,.16));
  box-shadow:inset 0 0 0 1px rgba(187,155,255,.19),0 7px 18px rgba(86,62,167,.14)
}
.brand-mark svg {
  width:29px;
  height:29px
}
.brand-copy strong {
  display:block;
  font:700 17px/1.1 'Space Grotesk',sans-serif;
  letter-spacing:-.6px
}
.brand-copy strong span {
  color:var(--cyan)
}
.brand-copy small {
  display:block;
  margin-top:5px;
  color:#858ba7;
  font-size:8px;
  letter-spacing:1.6px;
  font-weight:700
}
.sidebar-label,.eyebrow {
  font-size:9px;
  line-height:1.3;
  font-weight:700;
  letter-spacing:1.5px;
  color:var(--muted-2)
}
.sidebar-label {
  padding:0 12px 11px
}
.nav-list {
  display:grid;
  gap:5px
}
.nav-item {
  width:100%;
  min-height:46px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:13px;
  position:relative;
  border:1px solid transparent;
  border-radius:12px;
  background:none;
  color:#9aa0bd;
  text-align:left;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .2s
}
.nav-item:hover {
  background:rgba(150,135,241,.07);
  color:var(--text);
  transform:translateX(2px)
}
.nav-item.active {
  color:#e9e3ff;
  background:linear-gradient(100deg,rgba(147,110,243,.17),rgba(147,110,243,.045));
  border-color:rgba(172,141,255,.13)
}
.nav-icon,.nav-item [data-icon],.button [data-icon],.text-button [data-icon],.icon-button [data-icon],.gap-icon [data-icon],.recommendation-note [data-icon],.action-plan-note [data-icon],.selector-icon [data-icon],.tip-icon [data-icon] {
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  flex:none
}
.nav-item svg,.button svg,.text-button svg,.icon-button svg,.gap-icon svg,.recommendation-note svg,.action-plan-note svg,.selector-icon svg,.tip-icon svg {
  width:18px;
  height:18px;
  stroke:currentColor;
  stroke-width:1.7;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}
.nav-item.active .nav-icon {
  color:#beaaff
}
.nav-current {
  position:absolute;
  left:-17px;
  width:3px;
  height:24px;
  border-radius:0 4px 4px 0;
  background:var(--violet);
  box-shadow:0 0 11px rgba(166,130,255,.6)
}
.nav-count {
  margin-left:auto;
  padding:2px 7px;
  border-radius:8px;
  color:#c3b3ff;
  background:rgba(161,128,255,.11);
  font-size:10px
}
.sidebar-spacer {
  flex:1;
  min-height:35px
}
.sidebar-tip {
  position:relative;
  overflow:hidden;
  margin:0 1px 17px;
  padding:16px 14px 14px;
  border:1px solid rgba(158,129,248,.17);
  border-radius:15px;
  background:linear-gradient(144deg,rgba(116,86,199,.16),rgba(19,24,49,.7) 70%)
}
.tip-glow {
  position:absolute;
  width:80px;
  height:80px;
  right:-20px;
  top:-33px;
  background:rgba(162,125,255,.22);
  filter:blur(35px);
  pointer-events:none
}
.tip-icon {
  width:28px;
  height:28px;
  margin-bottom:12px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:rgba(171,139,255,.16);
  color:#c1abff
}
.tip-icon svg {
  width:16px;
  height:16px
}
.sidebar-tip .eyebrow {
  margin:0 0 5px;
  font-size:8px
}
.sidebar-tip>strong {
  font:600 14px 'Space Grotesk',sans-serif
}
.tip-progress {
  height:4px;
  margin:12px 0 7px;
  overflow:hidden;
  border-radius:6px;
  background:rgba(255,255,255,.1)
}
.tip-progress span {
  height:100%;
  width:0;
  display:block;
  border-radius:inherit;
  background:linear-gradient(90deg,#9774fa,var(--cyan));
  transition:width .4s
}
.sidebar-tip small {
  font-size:10px;
  color:var(--muted)
}
.sidebar-footer {
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 8px;
  color:#757d9b;
  font-size:10px
}
.status-dot,.today-dot,.sample-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 9px rgba(98,214,166,.55)
}
.main-shell {
  min-height:100vh;
  margin-left:252px
}
.topbar {
  height:70px;
  padding:0 37px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(187,191,255,.08);
  background:rgba(10,12,26,.64);
  backdrop-filter:blur(15px)
}
.breadcrumb {
  display:flex;
  gap:11px;
  align-items:center;
  color:#737a99;
  font-size:9px;
  font-weight:700;
  letter-spacing:1.2px
}
.breadcrumb i {
  font-style:normal;
  color:#414764
}
.breadcrumb strong {
  color:#c4c7dc;
  font-size:10px;
  letter-spacing:.35px
}
.topbar-actions {
  display:flex;
  align-items:center;
  gap:10px
}
.today-chip {
  display:flex;
  align-items:center;
  gap:8px;
  padding-right:7px;
  color:#a7adc5;
  font-size:11px
}
.today-dot {
  width:6px;
  height:6px;
  background:var(--cyan);
  box-shadow:0 0 8px rgba(85,226,210,.6)
}
.button {
  min-height:39px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:10px;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s,box-shadow .2s
}
.button:hover {
  transform:translateY(-1px)
}
.button svg {
  width:15px;
  height:15px
}
.button-quiet {
  min-height:34px;
  padding:0 10px;
  border-color:transparent;
  background:transparent;
  color:#a3a9c2;
  font-size:11px
}
.button-quiet:hover,.icon-button:hover {
  background:rgba(255,255,255,.06);
  color:var(--text)
}
.button-outline {
  border-color:var(--line-strong);
  background:rgba(255,255,255,.018);
  color:#d5d8ed
}
.button-outline:hover {
  border-color:rgba(175,149,255,.4);
  background:rgba(161,129,250,.08)
}
.button-primary {
  background:linear-gradient(120deg,#8e69ed,#7c5dd6);
  color:#fff;
  box-shadow:0 7px 22px rgba(111,79,211,.23)
}
.button-primary:hover {
  box-shadow:0 9px 26px rgba(128,93,230,.38)
}
.button-primary svg {
  stroke-width:2
}
.button-small {
  min-height:33px;
  padding:0 11px;
  font-size:11px
}
.avatar-button {
  width:34px;
  height:34px;
  border:1px solid rgba(175,149,255,.25);
  border-radius:50%;
  background:linear-gradient(145deg,#44347c,#26294a);
  color:#e6dcff;
  font-size:11px;
  font-weight:700;
  cursor:pointer
}
.icon-button.mobile-menu {
  display:none
}
.content-wrap {
  max-width:1480px;
  margin:0 auto;
  padding:29px 37px 54px
}
.page-panel {
  animation:fadeUp .28s ease both
}
.page-panel[hidden] {
  display:none
}
.page-intro {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px
}
.intro-dashboard {
  align-items:center
}
.page-intro .eyebrow {
  margin:0 0 9px
}
.intro-eyebrow {
  color:#a58bf6
}
.page-intro h1 {
  margin:0;
  font:600 clamp(25px,2.45vw,34px)/1.18 'Space Grotesk',sans-serif;
  letter-spacing:-1.15px
}
.heading-accent {
  color:#b39eff
}
.intro-dashboard h1 {
  font-size:31px
}
.page-subtitle {
  margin:8px 0 0;
  color:#959bb8;
  font-size:13px;
  line-height:1.6
}
.wave {
  margin-left:10px;
  color:var(--cyan);
  font-size:19px
}
.intro-actions {
  display:flex;
  align-items:center;
  gap:12px
}
.sample-indicator {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border:1px solid rgba(240,190,114,.16);
  border-radius:20px;
  background:rgba(240,190,114,.055);
  color:#d9c19b;
  font-size:10px;
  white-space:nowrap
}
.sample-indicator[hidden] {
  display:none !important
}
.sample-dot {
  width:6px;
  height:6px;
  background:var(--amber);
  box-shadow:none
}
.metrics-row {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px
}
.metric-card {
  min-height:111px;
  padding:16px 17px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:linear-gradient(135deg,rgba(21,25,49,.96),rgba(16,19,38,.8));
  box-shadow:0 8px 27px rgba(0,0,0,.1);
  transition:transform .22s,border-color .22s
}
.metric-card:hover {
  transform:translateY(-2px);
  border-color:rgba(172,143,255,.25)
}
.metric-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  color:#9ba1bd;
  font-size:10px
}
.metric-icon {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(161,128,255,.12);
  color:#b59cff
}
.metric-icon svg {
  width:16px;
  height:16px;
  stroke:currentColor;
  stroke-width:1.8;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}
.metric-card[data-tone="cyan"] .metric-icon {
  background:rgba(85,226,210,.1);
  color:var(--cyan)
}
.metric-card[data-tone="green"] .metric-icon {
  background:rgba(98,214,166,.1);
  color:var(--green)
}
.metric-card[data-tone="amber"] .metric-icon {
  background:rgba(240,190,114,.1);
  color:var(--amber)
}
.metric-value {
  display:flex;
  align-items:baseline;
  gap:7px;
  font:600 25px/1.1 'Space Grotesk',sans-serif;
  letter-spacing:-.8px
}
.metric-detail {
  margin-top:5px;
  color:#77809e;
  font-size:10px
}
.metric-trend {
  color:var(--green);
  font-size:9px
}
.dashboard-grid {
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(290px,.88fr);
  gap:15px
}
.panel {
  min-width:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(20,23,45,.94),rgba(15,18,36,.91));
  box-shadow:var(--shadow)
}
.chart-panel,.career-progress-panel,.skill-chart-panel,.next-actions-panel,.table-panel,.skills-panel,.requirements-panel,.action-list-panel {
  padding:19px 20px
}
.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px
}
.panel-heading .eyebrow {
  margin:0 0 6px
}
.panel-heading h2 {
  margin:0;
  font:600 16px/1.3 'Space Grotesk',sans-serif;
  letter-spacing:-.35px
}
.text-button {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 0;
  border:0;
  background:transparent;
  color:#aa92fa;
  font-size:10px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer
}
.text-button:hover {
  color:var(--cyan)
}
.text-button svg {
  width:14px;
  height:14px
}
.chart-subtitle {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:21px 0 10px;
  color:#9299b4;
  font-size:10px
}
.chart-legend {
  display:flex;
  align-items:center;
  gap:6px;
  color:#8289a7;
  font-size:9px
}
.chart-legend i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--violet)
}
.subject-chart {
  display:grid;
  gap:14px;
  min-height:155px;
  align-content:start
}
.chart-row {
  display:grid;
  grid-template-columns:minmax(94px,130px) 1fr 36px;
  gap:11px;
  align-items:center
}
.chart-name {
  overflow:hidden;
  color:#bec2d7;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap
}
.bar-track {
  height:7px;
  overflow:hidden;
  border-radius:8px;
  background:#222744
}
.bar-fill {
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#8663df,#a68cf7 80%,#59dfd2);
  transition:width .55s cubic-bezier(.2,.75,.2,1)
}
.chart-score {
  text-align:right;
  color:#cdd0e2;
  font:600 10px 'Space Grotesk',sans-serif
}
.chart-empty {
  padding:30px 5px;
  text-align:center;
  color:#8188a7;
  font-size:11px
}
.career-progress-panel {
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 87% 19%,rgba(99,77,168,.19),transparent 38%),linear-gradient(145deg,#171933,#111529)
}
.career-progress-panel:after {
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-65px;
  bottom:-119px;
  border:1px solid rgba(175,151,255,.11);
  border-radius:50%;
  box-shadow:0 0 0 18px rgba(175,151,255,.018),0 0 0 38px rgba(175,151,255,.018);
  pointer-events:none
}
.panel-arrow {
  width:31px;
  height:31px;
  border:1px solid var(--line);
  border-radius:9px;
  color:#aea2d8
}
.career-radial-wrap {
  display:flex;
  align-items:center;
  gap:20px;
  padding:19px 4px 16px
}
.radial-progress {
  width:98px;
  height:98px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(var(--cyan) 0deg,var(--violet) var(--readiness-deg,0deg),rgba(121,129,173,.13) var(--readiness-deg,0deg) 360deg);
  transform:rotate(0deg);
  position:relative
}
.radial-progress:before {
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:#151832
}
.radial-inner {
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  gap:2px
}
.radial-inner strong {
  font:600 22px 'Space Grotesk',sans-serif
}
.radial-inner small {
  color:#858cab;
  font-size:8px
}
.career-radial-copy {
  display:grid;
  gap:5px
}
.career-kicker {
  font-size:8px;
  letter-spacing:1.35px;
  color:#858cab;
  font-weight:700
}
.career-radial-copy strong {
  font:600 18px 'Space Grotesk',sans-serif
}
.career-radial-copy small {
  color:#9ba1ba;
  font-size:10px
}
.gap-callout {
  position:relative;
  z-index:1;
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px;
  border:1px solid rgba(159,133,248,.15);
  border-radius:12px;
  background:rgba(115,83,187,.085)
}
.gap-icon {
  width:20px;
  height:20px;
  flex:none;
  color:#c0a5ff
}
.gap-icon svg {
  width:17px;
  height:17px
}
.gap-callout strong {
  display:block;
  margin-bottom:4px;
  color:#e2d8ff;
  font-size:10px
}
.gap-callout p {
  margin:0;
  color:#a5a8bf;
  font-size:10px;
  line-height:1.5
}
.skill-chart-panel,.next-actions-panel {
  min-height:225px
}
.skill-chart {
  display:grid;
  gap:13px;
  margin-top:21px
}
.skill-bar-row {
  display:grid;
  grid-template-columns:102px 1fr 73px;
  gap:11px;
  align-items:center
}
.skill-level-label {
  color:#c5c8dc;
  font-size:10px
}
.skill-level-tag {
  justify-self:end;
  color:#858cab;
  font-size:9px
}
.skill-track {
  height:6px;
  overflow:hidden;
  border-radius:8px;
  background:#242844
}
.skill-track span {
  height:100%;
  display:block;
  border-radius:inherit;
  background:linear-gradient(90deg,#8d6df0,#a88cff);
  transition:width .45s
}
.dashboard-actions {
  display:grid;
  margin-top:11px
}
.dashboard-action {
  min-height:41px;
  display:grid;
  grid-template-columns:21px 1fr 16px;
  gap:9px;
  align-items:center;
  border-bottom:1px solid rgba(166,175,227,.075);
  color:#c9cce0
}
.dashboard-action:last-child {
  border-bottom:0
}
.action-index {
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:rgba(166,136,255,.11);
  color:#b99fff;
  font:600 9px 'Space Grotesk',sans-serif
}
.dashboard-action strong {
  font-size:10px;
  font-weight:500
}
.dashboard-action>span:last-child {
  color:#8b91ad
}
.dashboard-action>span:last-child svg {
  width:14px;
  height:14px
}
.dashboard-action.done strong {
  text-decoration:line-through;
  color:#8186a2
}
.dashboard-action.done .action-index {
  background:rgba(98,214,166,.1);
  color:var(--green)
}
.compact-metrics {
  margin-bottom:17px
}
.compact-metrics .metric-card {
  min-height:90px;
  padding:14px 16px
}
.compact-metrics .metric-top {
  margin-bottom:8px
}
.compact-metrics .metric-value {
  font-size:22px
}
.table-panel {
  overflow:hidden
}
.table-panel>.panel-heading {
  padding-bottom:17px
}
.quiet-count {
  color:#8790ad;
  font-size:10px;
  white-space:nowrap
}
.table-scroll {
  overflow:auto
}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  min-width:620px
}
th {
  padding:10px 12px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:#727a98;
  font-size:8px;
  font-weight:700;
  letter-spacing:1.15px;
  white-space:nowrap
}
td {
  padding:13px 12px;
  border-bottom:1px solid rgba(166,175,227,.07);
  color:#c9cde0;
  font-size:11px;
  vertical-align:middle
}
tbody tr:last-child td {
  border-bottom:0
}
.subject-name-cell,.assignment-name-cell {
  min-width:150px
}
.subject-name-wrap,.assignment-name-wrap {
  display:flex;
  align-items:center;
  gap:9px
}
.subject-avatar {
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(164,135,255,.12);
  color:#b9a2ff;
  font-size:10px;
  font-weight:700
}
.assignment-avatar {
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(85,226,210,.09);
  color:var(--cyan)
}
.assignment-avatar svg {
  width:15px;
  height:15px
}
.subject-title,.assignment-title {
  font-size:11px;
  font-weight:600;
  color:#e0e2f0
}
.subject-subtitle,.assignment-subtitle {
  margin-top:3px;
  color:#79809f;
  font-size:9px
}
.sample-badge {
  margin-left:5px;
  padding:2px 5px;
  border:1px solid rgba(240,190,114,.14);
  border-radius:5px;
  color:#caad80;
  font-size:8px;
  vertical-align:1px
}
.table-progress {
  width:114px;
  display:flex;
  align-items:center;
  gap:8px
}
.table-progress .bar-track {
  width:75px;
  height:5px
}
.table-progress strong {
  color:#bdc1d7;
  font:500 10px 'Space Grotesk',sans-serif
}
.status-pill,.priority-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.025);
  color:#b0b5ca;
  font-size:9px;
  white-space:nowrap
}
.status-pill:before {
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:#8a91ab
}
.status-pill.on-track {
  color:#83dab1;
  border-color:rgba(98,214,166,.14);
  background:rgba(98,214,166,.05)
}
.status-pill.on-track:before {
  background:var(--green)
}
.status-pill.due-soon {
  color:#e9bf7c;
  border-color:rgba(240,190,114,.17);
  background:rgba(240,190,114,.06)
}
.status-pill.due-soon:before {
  background:var(--amber)
}
.status-pill.overdue {
  color:#ff8c9d;
  border-color:rgba(255,120,140,.16);
  background:rgba(255,120,140,.06)
}
.status-pill.overdue:before {
  background:var(--red)
}
.status-pill.completed {
  color:#85dab3;
  border-color:rgba(98,214,166,.14);
  background:rgba(98,214,166,.05)
}
.status-pill.completed:before {
  background:var(--green)
}
.priority-pill.priority-high {
  color:#ff9aa7;
  border-color:rgba(255,120,140,.16)
}
.priority-pill.priority-medium {
  color:#e8bd7a;
  border-color:rgba(240,190,114,.15)
}
.priority-pill.priority-low {
  color:#9ecdbd;
  border-color:rgba(98,214,166,.13)
}
.table-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px
}
.assignment-complete-button {
  min-height:30px;
  padding:0 8px;
  gap:5px;
  border-color:rgba(98,214,166,.2);
  background:rgba(98,214,166,.05);
  color:#8adbb5;
  font-size:10px;
  white-space:nowrap
}
.assignment-complete-button svg {
  width:13px;
  height:13px
}
.assignment-complete-button:hover {
  border-color:rgba(98,214,166,.42);
  background:rgba(98,214,166,.1)
}
.assignment-complete-button.is-completed {
  border-color:var(--line);
  background:rgba(255,255,255,.025);
  color:#aab0c8
}
.icon-button {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#8790ad;
  cursor:pointer;
  transition:background .18s,color .18s,border-color .18s
}
.icon-button svg {
  width:15px;
  height:15px;
  stroke:currentColor;
  stroke-width:1.8;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}
.icon-button:hover {
  border-color:var(--line);
  color:#d7d9e9
}
.icon-button.danger:hover {
  color:var(--red);
  background:rgba(255,120,140,.06);
  border-color:rgba(255,120,140,.13)
}
.icon-button.success:hover {
  color:var(--green);
  background:rgba(98,214,166,.06)
}
.empty-state {
  padding:44px 16px 38px;
  display:grid;
  justify-items:center;
  text-align:center;
  color:#8088a7
}
.empty-state>[data-icon] {
  margin-bottom:10px;
  color:#a88fff
}
.empty-state svg {
  width:25px;
  height:25px;
  stroke:currentColor;
  stroke-width:1.5;
  fill:none
}
.empty-state strong {
  color:#cfd2e3;
  font:500 14px 'Space Grotesk',sans-serif
}
.empty-state p {
  max-width:280px;
  margin:7px 0 15px;
  font-size:11px;
  line-height:1.6
}
.filter-tabs {
  display:flex;
  align-items:center;
  gap:3px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(5,8,20,.3)
}
.filter-tab {
  padding:6px 9px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#848ba7;
  font-size:9px;
  white-space:nowrap;
  cursor:pointer
}
.filter-tab span {
  margin-left:3px;
  color:#6e7693;
  font-size:8px
}
.filter-tab.active {
  background:rgba(168,140,255,.15);
  color:#d1c2ff
}
.filter-tab.active span {
  color:#bdabf6
}
.assignment-toolbar {
  align-items:flex-start;
  flex-wrap:wrap
}
.assignment-toolbar .filter-tabs {
  margin-top:1px
}
.career-selector-panel {
  padding:19px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin-bottom:15px;
  background:radial-gradient(ellipse at 14% 0%,rgba(112,83,191,.15),transparent 48%),linear-gradient(135deg,rgba(21,24,47,.96),rgba(16,19,38,.92))
}
.career-selector-copy {
  display:flex;
  align-items:center;
  gap:14px
}
.selector-icon {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:none;
  border:1px solid rgba(173,146,255,.19);
  border-radius:13px;
  background:rgba(158,125,251,.12);
  color:#c0a9ff
}
.selector-icon svg {
  width:20px;
  height:20px;
  stroke:currentColor;
  stroke-width:1.7;
  fill:none
}
.career-selector-copy .eyebrow {
  margin:0 0 5px;
  color:#a68cf2
}
.career-selector-copy h2 {
  margin:0;
  font:600 15px 'Space Grotesk',sans-serif
}
.career-selector-copy p:not(.eyebrow) {
  margin:5px 0 0;
  max-width:600px;
  color:#8990ad;
  font-size:10px;
  line-height:1.5
}
.select-field {
  position:relative;
  display:grid;
  gap:7px;
  width:205px;
  flex:none
}
.select-field>span:first-child {
  font-size:8px;
  font-weight:700;
  letter-spacing:1px;
  color:#8189a7
}
.select-field select,.dialog-field input,.dialog-field select,.dialog-field textarea {
  width:100%;
  height:39px;
  padding:0 32px 0 11px;
  appearance:none;
  border:1px solid var(--line-strong);
  border-radius:9px;
  background:#171a34;
  color:#e5e6f0;
  font-size:11px
}
.select-field select {
  cursor:pointer
}
.select-chevron {
  position:absolute;
  right:11px;
  bottom:11px;
  color:#9ea3ba;
  pointer-events:none
}
.select-chevron svg {
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:1.8;
  fill:none
}
.career-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  align-items:start
}
.panel-description {
  margin:8px 0 16px;
  color:#8c93b0;
  font-size:10px;
  line-height:1.55
}
.skill-list,.requirements-list {
  display:grid;
  gap:8px
}
.skill-row {
  min-height:52px;
  padding:8px 10px;
  display:grid;
  grid-template-columns:1fr minmax(115px,145px) 30px;
  gap:9px;
  align-items:center;
  border:1px solid rgba(177,184,230,.08);
  border-radius:11px;
  background:rgba(255,255,255,.017);
  transition:border-color .2s,background .2s
}
.skill-row:hover {
  border-color:rgba(174,149,255,.18);
  background:rgba(158,129,250,.035)
}
.skill-name-wrap {
  min-width:0;
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:center;
  gap:8px
}
.skill-symbol {
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:rgba(167,139,250,.12);
  color:#c2aeff;
  font:700 9px 'Space Grotesk',sans-serif
}
.skill-name-text {
  overflow:hidden;
  color:#d6d8e8;
  font-size:10px;
  font-weight:500;
  text-overflow:ellipsis;
  white-space:nowrap
}
.skill-name-text .sample-badge {
  margin-left:3px
}
.level-select {
  height:31px;
  width:100%;
  padding:0 7px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#171a32;
  color:#c5c8dc;
  font-size:9px;
  cursor:pointer
}
.skill-delete {
  width:28px;
  height:28px
}
.empty-inline {
  padding:24px 9px;
  text-align:center;
  color:#858cab;
  font-size:10px
}
.requirements-count {
  padding:5px 8px;
  border:1px solid rgba(240,190,114,.14);
  border-radius:15px;
  background:rgba(240,190,114,.05);
  color:#d9b979;
  font-size:9px;
  white-space:nowrap
}
.requirements-count.on-track {
  border-color:rgba(98,214,166,.15);
  background:rgba(98,214,166,.05);
  color:#7ed5a8
}
.requirement-row {
  padding:9px 10px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
  border-bottom:1px solid rgba(177,184,230,.07)
}
.requirement-row:last-child {
  border-bottom:0
}
.requirement-main {
  min-width:0
}
.requirement-main strong {
  display:block;
  color:#d6d9e8;
  font-size:10px;
  font-weight:500
}
.requirement-main small {
  display:block;
  margin-top:4px;
  color:#7d84a3;
  font-size:9px
}
.requirement-level {
  display:grid;
  justify-items:end;
  gap:4px
}
.requirement-level span {
  font-size:8px;
  color:#8b92ad
}
.requirement-level strong {
  font-size:9px;
  font-weight:600
}
.requirement-level strong.gap {
  color:var(--amber)
}
.requirement-level strong.met {
  color:var(--green)
}
.recommendation-note {
  margin-top:13px;
  padding:11px;
  display:flex;
  gap:9px;
  border-radius:10px;
  background:rgba(85,226,210,.045);
  border:1px solid rgba(85,226,210,.11);
  color:var(--cyan)
}
.recommendation-note>span {
  flex:none
}
.recommendation-note svg {
  width:16px;
  height:16px
}
.recommendation-note p {
  margin:0;
  display:grid;
  gap:4px
}
.recommendation-note strong {
  color:#b6e9df;
  font-size:9px
}
.recommendation-note p span {
  color:#8da9a9;
  font-size:9px;
  line-height:1.5
}
.plan-summary {
  margin-bottom:15px;
  padding:15px 19px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border:1px solid rgba(166,139,255,.17);
  border-radius:15px;
  background:linear-gradient(100deg,rgba(95,72,162,.17),rgba(31,31,65,.2) 60%,rgba(53,127,137,.08))
}
.plan-summary-main {
  display:flex;
  align-items:center;
  gap:12px
}
.plan-summary-icon {
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  border:1px solid rgba(170,140,255,.18);
  border-radius:11px;
  background:rgba(163,131,255,.13);
  color:#c3adff
}
.plan-summary-icon svg {
  width:18px;
  height:18px;
  stroke:currentColor;
  stroke-width:1.7;
  fill:none
}
.plan-summary p {
  margin:0 0 4px;
  color:#9299b7;
  font-size:9px
}
.plan-summary strong {
  font:600 14px 'Space Grotesk',sans-serif
}
.plan-summary-meta {
  display:flex;
  align-items:center;
  gap:14px
}
.plan-stat {
  text-align:right
}
.plan-stat strong {
  display:block;
  font:600 15px 'Space Grotesk',sans-serif
}
.plan-stat small {
  color:#858cab;
  font-size:8px
}
.plan-progress-track {
  width:126px;
  height:6px;
  overflow:hidden;
  border-radius:8px;
  background:rgba(255,255,255,.1)
}
.plan-progress-track span {
  height:100%;
  display:block;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--violet-2),var(--cyan));
  transition:width .3s
}
.action-list {
  display:grid;
  gap:9px
}
.action-item {
  padding:13px 12px;
  display:grid;
  grid-template-columns:23px 1fr auto;
  gap:12px;
  align-items:start;
  border:1px solid rgba(171,179,227,.085);
  border-radius:12px;
  background:rgba(255,255,255,.017);
  transition:border-color .18s,background .18s
}
.action-item:hover {
  border-color:rgba(170,144,248,.2);
  background:rgba(158,128,247,.035)
}
.action-item.completed {
  opacity:.67
}
.action-check {
  width:21px;
  height:21px;
  margin-top:1px;
  display:grid;
  place-items:center;
  border:1px solid rgba(178,184,232,.24);
  border-radius:7px;
  background:transparent;
  color:transparent;
  cursor:pointer
}
.action-check svg {
  width:13px;
  height:13px;
  stroke:currentColor;
  stroke-width:2.2;
  fill:none
}
.action-check:hover {
  border-color:var(--cyan);
  color:var(--cyan)
}
.action-item.completed .action-check {
  border-color:rgba(98,214,166,.4);
  background:rgba(98,214,166,.12);
  color:var(--green)
}
.action-copy {
  min-width:0
}
.action-meta {
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin:0 0 5px
}
.action-type {
  color:#b59df9;
  font-size:8px;
  font-weight:700;
  letter-spacing:.85px;
  text-transform:uppercase
}
.action-sample {
  padding:2px 5px;
  border:1px solid rgba(240,190,114,.13);
  border-radius:5px;
  color:#c9ae7c;
  font-size:8px
}
.action-copy strong {
  display:block;
  color:#e0e1ed;
  font-size:11px;
  font-weight:600
}
.action-copy p {
  margin:5px 0 0;
  color:#9298b4;
  font-size:10px;
  line-height:1.5
}
.action-item.completed .action-copy strong {
  text-decoration:line-through;
  color:#969bb0
}
.action-tools {
  display:flex;
  gap:3px
}
.action-plan-note {
  margin-top:14px;
  padding:12px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid rgba(85,226,210,.1);
  border-radius:12px;
  background:rgba(85,226,210,.04);
  color:var(--cyan)
}
.action-plan-note svg {
  width:17px;
  height:17px
}
.action-plan-note p {
  margin:0;
  color:#99b9b5;
  font-size:10px;
  line-height:1.5
}
.action-plan-note strong {
  color:#b9e7df
}
.app-dialog {
  width:min(445px,calc(100% - 28px));
  max-width:445px;
  padding:0;
  overflow:visible;
  border:1px solid rgba(172,154,236,.21);
  border-radius:18px;
  background:#13162b;
  color:var(--text);
  box-shadow:0 24px 90px rgba(0,0,0,.57)
}
.app-dialog::backdrop {
  background:rgba(3,5,13,.7);
  backdrop-filter:blur(5px)
}
.dialog-content {
  padding:23px
}
.dialog-header {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:18px
}
.dialog-header .eyebrow {
  margin:0 0 6px;
  color:#ae96fc
}
.dialog-header h2 {
  margin:0;
  font:600 19px 'Space Grotesk',sans-serif
}
.dialog-close {
  width:29px;
  height:29px;
  border:0;
  border-radius:8px;
  background:rgba(255,255,255,.045);
  color:#9da3bd;
  cursor:pointer
}
.dialog-close:hover {
  color:#fff;
  background:rgba(255,255,255,.09)
}
.dialog-close svg {
  width:15px;
  height:15px;
  stroke:currentColor;
  stroke-width:2;
  fill:none
}
.dialog-form {
  display:grid;
  gap:13px
}
.dialog-field {
  display:grid;
  gap:6px
}
.dialog-field label,.dialog-field>span {
  color:#a2a8c2;
  font-size:9px;
  font-weight:700;
  letter-spacing:.75px
}
.dialog-field input,.dialog-field select {
  height:40px;
  padding:0 11px;
  appearance:none
}
.dialog-field textarea {
  height:83px;
  padding:10px 11px;
  resize:vertical
}
.dialog-field input::placeholder,.dialog-field textarea::placeholder {
  color:#6e7694
}
.dialog-field small {
  color:#7e86a3;
  font-size:9px;
  line-height:1.45
}
.dialog-field-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px
}
.dialog-select-wrap {
  position:relative
}
.dialog-select-wrap select {
  padding-right:29px
}
.dialog-select-wrap [data-icon] {
  position:absolute;
  right:10px;
  top:12px;
  color:#8991ad;
  pointer-events:none
}
.dialog-select-wrap svg {
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:1.8;
  fill:none
}
.dialog-footer {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:4px
}
.form-error {
  padding:8px 10px;
  border:1px solid rgba(255,120,140,.18);
  border-radius:8px;
  background:rgba(255,120,140,.055);
  color:#ffa3af;
  font-size:10px;
  line-height:1.45
}
.toast-region {
  position:fixed;
  z-index:60;
  right:24px;
  bottom:22px;
  display:grid;
  gap:8px;
  pointer-events:none
}
.toast {
  max-width:min(350px,calc(100vw - 40px));
  padding:12px 15px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(169,148,241,.23);
  border-radius:12px;
  background:rgba(24,28,51,.95);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  color:#d8dbee;
  font-size:11px;
  animation:toastIn .24s ease both
}
.toast:before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 9px rgba(98,214,166,.48)
}
.toast.error:before {
  background:var(--red);
  box-shadow:0 0 9px rgba(255,120,140,.48)
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
@keyframes fadeUp {
  from {
    opacity:0;
    transform:translateY(7px)
  }
to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes toastIn {
  from {
    opacity:0;
    transform:translateY(8px)
  }
to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(max-width:1180px) {
  .sidebar {
    width:224px
  }
.main-shell {
    margin-left:224px
  }
.topbar {
    padding:0 26px
  }
.content-wrap {
    padding:26px
  }
.dashboard-grid {
    grid-template-columns:1fr 1fr
  }
.chart-row {
    grid-template-columns:minmax(85px,110px) 1fr 33px
  }
.career-layout {
    grid-template-columns:1fr
  }
.career-selector-panel {
    align-items:flex-start
  }
.select-field {
    margin-top:4px
  }
}
@media(max-width:820px) {
  .sidebar {
    width:72px;
    padding:18px 10px
  }
.brand {
    justify-content:center;
    padding:0 0 31px
  }
.brand-mark {
    width:42px;
    height:42px
  }
.brand-copy,.sidebar-label,.nav-item>span:not(.nav-icon):not(.nav-current):not(.nav-count),.sidebar-tip,.sidebar-footer {
    display:none
  }
.nav-list {
    gap:8px
  }
.nav-item {
    min-height:47px;
    padding:0;
    justify-content:center
  }
.nav-item .nav-icon {
    width:21px;
    height:21px
  }
.nav-item .nav-count {
    position:absolute;
    right:0;
    top:2px;
    min-width:17px;
    height:17px;
    padding:1px 4px;
    display:grid;
    place-items:center;
    font-size:8px
  }
.nav-current {
    left:-11px
  }
.main-shell {
    margin-left:72px
  }
.topbar {
    height:64px;
    padding:0 20px
  }
.content-wrap {
    padding:24px 20px 42px
  }
.breadcrumb>span {
    display:none
  }
.breadcrumb i {
    display:none
  }
.dashboard-grid {
    grid-template-columns:1fr 1fr
  }
.metrics-row {
    gap:10px
  }
.metric-card {
    padding:14px
  }
.intro-dashboard h1 {
    font-size:27px
  }
}
@media(max-width:620px) {
  .sidebar {
    width:min(280px,84vw);
    padding:18px 15px;
    transform:translateX(-105%);
    transition:transform .25s ease;
    box-shadow:20px 0 60px rgba(0,0,0,.37)
  }
.sidebar.open {
    transform:translateX(0)
  }
.brand {
    justify-content:flex-start;
    padding:2px 8px 25px
  }
.brand-copy,.sidebar-label,.nav-item>span:not(.nav-icon):not(.nav-current):not(.nav-count),.sidebar-tip,.sidebar-footer {
    display:block
  }
.sidebar-label {
    display:block
  }
.nav-list {
    gap:5px
  }
.nav-item {
    justify-content:flex-start;
    padding:0 12px
  }
.nav-item .nav-count {
    position:static;
    min-width:18px;
    height:auto;
    padding:2px 6px;
    display:inline-block;
    margin-left:auto
  }
.nav-current {
    left:-16px
  }
.sidebar-spacer {
    display:block
  }
.sidebar-tip {
    display:block
  }
.sidebar-footer {
    display:flex
  }
.main-shell {
    margin-left:0
  }
.topbar {
    height:60px;
    padding:0 14px;
    gap:10px
  }
.icon-button.mobile-menu {
    display:grid;
    flex:none
  }
.mobile-menu svg {
    width:18px;
    height:18px
  }
.breadcrumb {
    gap:7px;
    font-size:8px;
    letter-spacing:.8px
  }
.breadcrumb strong {
    font-size:9px
  }
.topbar-actions {
    gap:5px
  }
.today-chip {
    display:none
  }
.button-backup,.button-import {
    width:33px;
    height:33px;
    min-height:33px;
    padding:0;
    justify-content:center;
    font-size:0
  }
.button-backup svg,.button-import svg {
    width:15px;
    height:15px
  }
.avatar-button {
    width:31px;
    height:31px
  }
.content-wrap {
    padding:22px 14px 34px
  }
.page-intro {
    align-items:flex-start;
    flex-direction:column;
    gap:15px;
    margin-bottom:18px
  }
.page-intro h1 {
    font-size:27px
  }
.intro-dashboard {
    align-items:flex-start;
    flex-direction:column
  }
.intro-dashboard h1 {
    font-size:25px
  }
.intro-actions {
    width:100%;
    justify-content:space-between
  }
.page-subtitle {
    font-size:11px
  }
.metrics-row {
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-bottom:12px
  }
.metric-card {
    min-height:95px;
    padding:12px
  }
.metric-top {
    margin-bottom:9px;
    font-size:9px
  }
.metric-icon {
    width:26px;
    height:26px
  }
.metric-value {
    font-size:22px
  }
.metric-detail {
    font-size:9px
  }
.dashboard-grid {
    grid-template-columns:1fr;
    gap:11px
  }
.chart-panel,.career-progress-panel,.skill-chart-panel,.next-actions-panel,.table-panel,.skills-panel,.requirements-panel,.action-list-panel {
    padding:16px 14px
  }
.panel-heading h2 {
    font-size:15px
  }
.subject-chart {
    gap:12px
  }
.chart-row {
    grid-template-columns:minmax(87px,110px) 1fr 32px;
    gap:7px
  }
.chart-name {
    font-size:9px
  }
.career-radial-wrap {
    padding:16px 4px
  }
.career-layout {
    gap:11px
  }
.career-selector-panel {
    padding:15px 13px;
    display:grid;
    gap:14px
  }
.career-selector-copy {
    align-items:flex-start;
    gap:10px
  }
.selector-icon {
    width:37px;
    height:37px
  }
.career-selector-copy h2 {
    font-size:13px
  }
.career-selector-copy p:not(.eyebrow) {
    font-size:9px
  }
.select-field {
    width:100%
  }
.filter-tabs {
    width:100%;
    justify-content:space-between
  }
.filter-tab {
    padding:6px 5px;
    font-size:8px
  }
.assignment-toolbar {
    display:grid
  }
.assignment-toolbar .filter-tabs {
    margin-top:5px
  }
.table-scroll {
    margin:0 -14px;
    padding:0 14px
  }
.compact-metrics .metric-card {
    min-height:85px
  }
.plan-summary {
    align-items:flex-start;
    flex-direction:column
  }
.plan-summary-meta {
    width:100%;
    justify-content:flex-end
  }
.plan-progress-track {
    flex:1;
    max-width:180px
  }
.action-item {
    grid-template-columns:22px 1fr auto;
    gap:8px;
    padding:11px 9px
  }
.action-copy strong {
    font-size:10px
  }
.action-copy p {
    font-size:9px
  }
.action-tools .icon-button {
    width:25px;
    height:25px
  }
.dialog-content {
    padding:19px
  }
.dialog-field-grid {
    grid-template-columns:1fr
  }
.toast-region {
    right:13px;
    bottom:13px
  }
.skill-row {
    grid-template-columns:1fr minmax(104px,127px) 28px;
    gap:5px;
    padding:7px
  }
.skill-name-wrap {
    gap:5px
  }
.skill-name-text {
    font-size:9px
  }
.skill-delete {
    width:26px;
    height:26px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}
.empty-state[hidden],.empty-inline[hidden] {
  display:none!important
}


/* Authentication and account controls */
#authLoading[hidden], #loginScreen[hidden], #appShell[hidden], #accountMenu[hidden] {
  display: none !important;
}
.auth-loading {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  background: radial-gradient(ellipse at 70% 5%, rgba(95,76,188,.18), transparent 40%), var(--bg);
  font-size: 14px;
}
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background: radial-gradient(ellipse at 82% 6%, rgba(95,76,188,.22), transparent 38%), radial-gradient(ellipse at 4% 92%, rgba(37,163,158,.09), transparent 35%), var(--bg);
}
.login-card {
  width: min(100%, 460px);
  padding: 34px;
  border: 1px solid rgba(174,184,239,.14);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(20,24,47,.96), rgba(14,17,34,.98));
  box-shadow: 0 28px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.035);
  animation: login-rise .38s ease both;
}
.login-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 32px;
  color: var(--text);
  text-decoration: none;
}
.login-brand .brand-mark {
  flex: none;
}
.login-card > .eyebrow {
  margin: 0 0 10px;
  color: var(--cyan);
}
.login-card h1 {
  margin: 0;
  font: 600 clamp(28px, 6vw, 36px)/1.12 'Space Grotesk', sans-serif;
  letter-spacing: -1.2px;
}
.login-subtitle {
  margin: 15px 0 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.login-button {
  width: 100%;
  min-height: 50px;
  justify-content: center;
}
.auth-message {
  min-height: 20px;
  margin: 13px 0 0;
  color: var(--amber);
  font-size: 12px;
  line-height: 1.5;
}
.login-footnote {
  margin: 19px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 11px;
  line-height: 1.6;
}
.account-control {
  position: relative;
  flex: none;
}
.account-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 12px);
  right: 0;
  width: 254px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 15px;
  background: #15182c;
  box-shadow: 0 18px 48px rgba(0,0,0,.38);
  animation: login-rise .16s ease both;
}
.account-menu-summary {
  display: grid;
  gap: 4px;
  padding: 5px 7px 12px;
  overflow: hidden;
}
.account-menu-summary strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-action {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: var(--text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.account-menu-action:hover {
  border-color: rgba(255,120,140,.35);
  background: rgba(255,120,140,.07);
}
.account-menu-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes login-rise {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 560px) {
  .login-screen { padding: 16px; }
  .login-card { padding: 25px 22px; }
  .login-brand { margin-bottom: 26px; }
  .account-menu { right: -4px; width: min(254px, calc(100vw - 32px)); }
}


/* Semester scope and print-ready performance card */
.semester-picker {
  position: relative;
  width: 164px;
  flex: none;
  display: flex;
  align-items: center;
}
.semester-picker select {
  width: 100%;
  height: 34px;
  appearance: none;
  padding: 0 31px 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface-2);
  color: #d9daf0;
  font-size: 10px;
  cursor: pointer;
}
.semester-chevron {
  position: absolute;
  right: 9px;
  display: grid;
  place-items: center;
  color: var(--muted);
  pointer-events: none;
}
.semester-chevron svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.semester-picker[hidden] {
  display: none !important;
}
.performance-card-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.performance-card-report {
  padding: clamp(20px, 3.2vw, 36px);
  background: linear-gradient(150deg, rgba(23, 27, 52, .96), rgba(15, 19, 37, .96));
}
.performance-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-strong);
}
.performance-card-header h2 {
  margin: 7px 0 5px;
  font: 600 25px/1.2 'Space Grotesk', sans-serif;
  letter-spacing: -.5px;
}
.performance-card-meta {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.card-semester {
  min-width: 138px;
  padding: 12px 14px;
  border: 1px solid rgba(167, 139, 250, .24);
  border-radius: 12px;
  background: rgba(167, 139, 250, .09);
}
.card-semester span,
.card-semester strong {
  display: block;
}
.card-semester span {
  margin-bottom: 5px;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.2px;
}
.card-semester strong {
  color: #d9ceff;
  font: 600 13px 'Space Grotesk', sans-serif;
}
.performance-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin: 21px 0 25px;
}
.performance-card-metrics .metric-card {
  min-width: 0;
  min-height: 98px;
  padding: 14px;
  background: rgba(255, 255, 255, .025);
}
.performance-card-section .panel-heading {
  margin: 0;
  padding-bottom: 12px;
}
.performance-card-section .panel-heading h3 {
  margin: 5px 0 0;
  font: 600 16px 'Space Grotesk', sans-serif;
}
.performance-card-table {
  min-width: 560px;
}
.performance-assignment-summary {
  margin-top: 20px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .025);
}
.performance-assignment-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.performance-assignment-heading .eyebrow {
  margin: 0;
}
.performance-assignment-count {
  color: #c7cbe0;
  font-size: 10px;
  text-align: right;
}
.performance-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 9px;
}
@media (max-width: 620px) {
  .semester-picker {
    width: min(134px, 34vw);
  }
  .semester-picker select {
    padding-left: 8px;
    font-size: 9px;
  }
  .performance-card-actions {
    width: 100%;
  }
  .performance-card-actions .button {
    flex: 1;
  }
  .performance-card-report {
    padding: 16px;
  }
  .performance-card-header {
    grid-template-columns: 1fr;
  }
  .card-semester {
    min-width: 0;
  }
  .performance-card-metrics {
    grid-template-columns: 1fr;
  }
  .performance-card-footer,
  .performance-assignment-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .performance-assignment-count {
    text-align: left;
  }
}
@media print {
  @page {
    size: A4 portrait;
    margin: 16mm;
  }
  html,
  body {
    min-width: 0 !important;
    background: #fff !important;
    color: #172033 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .sidebar,
  .topbar,
  .toast-region,
  .page-panel:not(#page-performanceCard),
  #page-performanceCard > .page-intro,
  .no-print,
  dialog {
    display: none !important;
  }
  .app-shell,
  .main-shell,
  .content-wrap {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  #page-performanceCard,
  #page-performanceCard[hidden] {
    display: block !important;
  }
  .performance-card-report {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #172033 !important;
    box-shadow: none !important;
  }
  .performance-card-report * {
    color: #172033 !important;
  }
  .performance-card-header,
  .performance-card-footer,
  .performance-assignment-summary {
    border-color: #cbd5e1 !important;
    background: #fff !important;
  }
  .performance-card-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .performance-card-metrics .metric-card {
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .table-scroll {
    overflow: visible !important;
  }
  .performance-card-table {
    min-width: 0 !important;
  }
  .performance-card-table th,
  .performance-card-table td {
    padding: 8px 6px !important;
    border-color: #cbd5e1 !important;
  }
}


/* Student interests and tailored project guidance */
.profile-interest-summary {
  margin: 8px 0 0;
  color: var(--cyan);
  font-size: 12px;
  line-height: 1.6;
}
.profile-interest-summary:empty {
  display: none;
}
.interest-project-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 20px 22px;
  border-color: rgba(154,126,255,.20);
  background: linear-gradient(115deg, rgba(126,93,255,.075), rgba(59,209,230,.045));
}
.interest-project-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(154,126,255,.22);
  border-radius: 13px;
  background: rgba(154,126,255,.10);
  color: var(--violet);
}
.interest-project-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.interest-project-copy {
  min-width: 0;
  flex: 1;
}
.interest-project-copy .eyebrow {
  margin: 0 0 6px;
  color: var(--cyan);
}
.interest-project-copy h2 {
  margin: 0 0 6px;
  font-size: 16px;
}
.interest-project-copy p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
@media (max-width: 680px) {
  .interest-project-panel {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 18px;
  }
  .interest-project-copy {
    width: calc(100% - 58px);
    flex: 1 1 calc(100% - 58px);
  }
  .interest-project-panel > .button {
    margin-left: 58px;
  }
}