:root {
  --ui-scale: 1;
  --text-main: #f4f4f6;
  --text-secondary: #b8bac2;
  --text-muted: #92959f;
  --surface-0: #08090b;
  --surface-1: #101115;
  --surface-2: #16171c;
  --surface-3: #1d1e24;
  --line-soft: #272930;
  --violet: #8978ff;
  --cyan: #49c9e8;
  font-size: calc(16px * var(--ui-scale));
}

:root[data-scale="compact"] { --ui-scale: .95; }
:root[data-scale="comfortable"] { --ui-scale: 1.08; }
:root[data-scale="large"] { --ui-scale: 1.2; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

body { color: var(--text-main); font-size: 1rem; }
.sidebar nav button { min-height: 2.85rem; font-size: .82rem; }
.sidebar nav > small, .page-head p, section header small { font-size: .68rem; letter-spacing: .15em; }
.page-head > div > span { max-width: 52rem; color: var(--text-secondary); font-size: .92rem; line-height: 1.65; }
.page-head h1 { font-size: clamp(2.35rem, 4vw, 3.45rem); }
button, input, select, textarea { font: inherit; }
button { font-size: .8rem; }
.topbar input { font-size: .82rem; }

.head-actions { display: flex; gap: .65rem; }
.head-actions button, .command-copy button, .focus-panel header button, .settings-section button, .tool-workspace button { min-height: 2.8rem; padding: .7rem 1rem; border: 1px solid var(--line-soft); border-radius: .7rem; background: var(--surface-2); color: var(--text-main); }
.head-actions .primary, .command-copy button:first-child, .settings-section > button, .settings-section > div > button:first-child { border-color: transparent; background: #f1f1f3; color: #0b0c0f; font-weight: 750; }

.command-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(20rem, .75fr); gap: 1rem; margin-bottom: 1rem; }
.command-copy, .player-card { min-height: 18rem; padding: clamp(1.65rem, 3vw, 2.6rem); border: 1px solid var(--line-soft); border-radius: 1.25rem; background: var(--surface-1); }
.command-copy { background: radial-gradient(circle at 90% 15%, #282044 0, transparent 18rem), linear-gradient(145deg, #15151a, #0f1014); }
.command-copy small { color: #9386f5; font-size: .68rem; letter-spacing: .14em; }
.command-copy h2 { max-width: 42rem; margin: 1rem 0 .75rem; font-size: clamp(1.8rem, 3.1vw, 3rem); line-height: 1.04; letter-spacing: -.045em; }
.command-copy p { max-width: 44rem; color: var(--text-secondary); font-size: .95rem; line-height: 1.7; }
.command-copy > div { display: flex; gap: .65rem; margin-top: 1.5rem; }
.command-copy button.secondary { background: transparent; color: var(--text-main); }
.player-card { display: flex; flex-direction: column; justify-content: space-between; }
.player-identity { display: flex; gap: 1rem; align-items: center; }
.player-identity > span { display: grid; width: 3.6rem; height: 3.6rem; place-items: center; border-radius: 1rem; background: #211d39; color: #b2a8ff; font-weight: 800; }
.player-identity small, .dual-progress span { color: var(--text-muted); font-size: .67rem; letter-spacing: .12em; }
.player-identity strong { display: block; margin: .25rem 0; font-size: 1.15rem; }
.player-identity p, .dual-progress b { color: var(--text-secondary); font-size: .78rem; }
.dual-progress label { display: flex; justify-content: space-between; margin: 1rem 0 .45rem; }
.dual-progress > i, .academy-summary > i, .course-main footer i { display: block; height: .34rem; overflow: hidden; border-radius: 999px; background: #282a30; }
.dual-progress em, .academy-summary em, .course-main footer em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.dual-progress em.xp { background: linear-gradient(90deg, #d8a85a, #f4d38f); }

.dashboard-pulse { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1rem; }
.dashboard-pulse article { padding: 1.25rem; border: 1px solid var(--line-soft); border-radius: 1rem; background: var(--surface-1); }
.dashboard-pulse small { color: var(--text-muted); font-size: .65rem; letter-spacing: .12em; }
.dashboard-pulse strong { display: block; margin: .65rem 0 .35rem; font-size: 1.55rem; }
.dashboard-pulse strong span { color: #777a84; font-size: .8rem; }
.dashboard-pulse p { color: var(--text-muted); font-size: .75rem; }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .65fr); gap: 1rem; }
.dashboard-primary, .dashboard-secondary { display: grid; align-content: start; gap: 1rem; }
.focus-panel { padding: 1.35rem; border: 1px solid var(--line-soft); border-radius: 1rem; background: var(--surface-1); }
.focus-panel > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.focus-panel h2 { margin-top: .25rem; font-size: 1.15rem; }
.goal-list article { display: grid; grid-template-columns: 2rem 1fr 2rem; gap: .8rem; align-items: center; padding: .85rem 0; border-top: 1px solid #202127; }
.goal-list article > button:first-child { display: grid; width: 1.8rem; height: 1.8rem; padding: 0; place-items: center; border: 1px solid #343641; border-radius: .55rem; background: transparent; color: white; }
.goal-list article.done strong { color: #777a83; text-decoration: line-through; }
.goal-list strong, .compact-feed strong { font-size: .87rem; }
.goal-list small, .compact-feed small { display: block; margin-top: .25rem; color: var(--text-muted); font-size: .72rem; }
.goal-delete { border: 0; background: transparent; color: #6f727b; }
.compact-feed > button { display: grid; width: 100%; grid-template-columns: 2.35rem 1fr auto; gap: .8rem; align-items: center; padding: .85rem 0; border: 0; border-top: 1px solid #202127; background: transparent; color: var(--text-main); text-align: left; }
.compact-feed > button > span { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .7rem; background: #1d1f26; color: #aaa0f6; font-size: .72rem; }
.compact-feed b { color: var(--text-muted); font-size: .7rem; }
.badge-panel > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.badge-panel article { display: grid; min-height: 5.4rem; place-items: center; padding: .65rem; border: 1px solid #202229; border-radius: .75rem; color: #545760; text-align: center; }
.badge-panel article.unlocked { border-color: #403b65; background: #171424; color: #c3bbff; }
.badge-panel article span { font-size: 1.15rem; }
.badge-panel article small { font-size: .64rem; }
.clean-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.clean-shortcuts button { display: flex; gap: .65rem; padding: .85rem; border: 1px solid #24262c; border-radius: .7rem; background: #15161b; color: var(--text-main); text-align: left; }
.clean-shortcuts span { color: #7f73dc; font-size: .65rem; }

.academy-summary { display: grid; grid-template-columns: auto minmax(12rem, 1fr) auto; gap: 1.25rem; align-items: center; margin-bottom: 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line-soft); border-radius: 1rem; background: var(--surface-1); }
.academy-summary > i { min-width: 10rem; }
.academy-summary small { color: var(--text-muted); font-size: .63rem; letter-spacing: .12em; }
.academy-summary strong { display: block; margin-top: .3rem; font-size: 1.4rem; }
.academy-summary p { color: var(--text-muted); font-size: .7rem; }
.refined-levels { margin-bottom: 2rem; }
.refined-levels button span { font-size: .75rem; }
.refined-levels button small { font-size: .64rem; }
.course-list { display: grid; gap: .65rem; }
.course-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 12rem; gap: 1.2rem; align-items: center; padding: 1.3rem; border: 1px solid var(--line-soft); border-radius: .9rem; background: var(--surface-1); }
.course-number { color: #747783; font-size: 1.4rem; font-weight: 700; text-align: center; }
.course-main > div { display: flex; justify-content: space-between; gap: 1rem; }
.course-main small, .course-main > div > span, .course-action > span { color: var(--text-muted); font-size: .62rem; letter-spacing: .1em; }
.course-main h2 { margin: .55rem 0 .35rem; font-size: 1.15rem; }
.course-main p { color: var(--text-secondary); font-size: .82rem; line-height: 1.6; }
.course-main footer { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center; margin-top: .8rem; }
.course-main footer span { color: var(--text-muted); font-size: .68rem; }
.course-action { display: grid; justify-items: end; gap: .65rem; }
.course-action button { width: 100%; min-height: 2.6rem; padding: .65rem; border: 1px solid #30323a; border-radius: .65rem; background: #18191e; color: var(--text-main); }
.course-row.locked { opacity: .58; }
.course-row.complete { border-color: #2e594b; }

.course-player { width: min(68rem, calc(100vw - 3rem)); max-width: none; padding: 0; overflow: hidden; }
.course-player > header { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem; border-bottom: 1px solid var(--line-soft); }
.course-player header h2 { margin: .45rem 0; font-size: 1.8rem; }
.course-player header p { color: var(--text-secondary); line-height: 1.6; }
.course-player > header > div:last-child { min-width: 7rem; text-align: right; }
.course-player > header > div:last-child strong { display: block; font-size: 2rem; }
.course-player-layout { display: grid; grid-template-columns: 18rem 1fr; min-height: 30rem; }
.course-player-layout > nav { padding: 1rem; border-right: 1px solid var(--line-soft); background: #0d0e11; }
.course-player-layout > nav button { display: grid; width: 100%; grid-template-columns: 2.1rem 1fr; gap: .7rem; align-items: center; margin-bottom: .45rem; padding: .8rem; border: 1px solid transparent; border-radius: .7rem; background: transparent; color: var(--text-main); text-align: left; }
.course-player-layout > nav button:hover { border-color: #2d2f37; background: #15161a; }
.course-player-layout nav button > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .55rem; background: #1c1e24; color: #9b91eb; font-size: .7rem; }
.course-player-layout nav small { color: var(--text-muted); font-size: .57rem; letter-spacing: .1em; }
.course-player-layout nav strong { display: block; margin-top: .18rem; font-size: .76rem; }
.lesson-stage { padding: 2.2rem; }
.lesson-stage h3 { margin: .55rem 0 1rem; font-size: 1.55rem; }
.lesson-stage > p, .lesson-reading { color: var(--text-secondary); font-size: .9rem; line-height: 1.8; }
.course-overview { display: grid; gap: .55rem; margin-top: 1.5rem; }
.course-overview article { display: flex; gap: .8rem; padding: .8rem; border: 1px solid #24262d; border-radius: .7rem; }
.lesson-complete { margin-top: 2rem; padding: .8rem 1rem; border: 0; border-radius: .7rem; background: #f0f0f2; color: #0a0b0e; font-weight: 750; }
#course-quiz fieldset { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line-soft); border-radius: .8rem; }
#course-quiz legend { padding: 0 .4rem; font-size: .86rem; font-weight: 700; }
#course-quiz label { display: flex; gap: .65rem; margin-top: .65rem; padding: .65rem; border-radius: .55rem; background: #15161b; color: var(--text-secondary); font-size: .8rem; }
#course-quiz > button { padding: .8rem 1rem; border: 0; border-radius: .65rem; background: white; color: black; font-weight: 750; }
.quiz-feedback { margin: 1rem 0; color: #e7bd73 !important; }

.tool-workspace, .community-profile-strip { margin-bottom: 1rem; padding: 1.25rem; border: 1px solid var(--line-soft); border-radius: 1rem; background: var(--surface-1); }
.tool-workspace > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.tool-workspace h2 { margin-top: .25rem; font-size: 1.2rem; }
.tool-workspace-grid { display: grid; grid-template-columns: 11rem 11rem 1fr; gap: .7rem; }
.tool-workspace-grid > article { padding: 1rem; border-radius: .75rem; background: var(--surface-2); }
.tool-workspace-grid strong { display: block; margin: .5rem 0; font-size: 1.6rem; }
.tool-workspace-grid p, .tool-workspace-grid small { color: var(--text-muted); font-size: .68rem; }
.recent-tools button { display: flex; width: 100%; justify-content: space-between; padding: .35rem 0; border: 0; background: transparent; color: var(--text-secondary); font-size: .72rem; }
.project-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .55rem; margin-top: .75rem; }
.project-strip > button { display: flex; justify-content: space-between; align-items: center; padding: .8rem; border: 1px solid #25272d; border-radius: .7rem; background: #131419; color: var(--text-main); text-align: left; }
.project-strip strong { display: block; margin-top: .2rem; font-size: .78rem; }
.project-strip small, .project-strip span { color: var(--text-muted); font-size: .62rem; }
.project-results { max-height: 10rem; overflow: auto; padding: .8rem; border-radius: .7rem; background: #0e0f13; }
.project-results article { padding: .6rem 0; border-top: 1px solid #25272d; }
.project-results p { color: var(--text-secondary); font-size: .75rem; line-height: 1.5; }
.project-results time { color: var(--text-muted); font-size: .62rem; }
.community-profile-strip { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.community-profile-strip > div { display: flex; gap: .9rem; align-items: center; }
.community-profile-strip > div > span { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: .8rem; background: #1f1c35; color: #b8affc; font-weight: 800; }
.community-profile-strip p { max-width: 36rem; margin-top: .2rem; color: var(--text-muted); font-size: .72rem; }
.community-profile-strip > button { padding: .7rem .9rem; border: 1px solid var(--line-soft); border-radius: .65rem; background: var(--surface-2); color: white; }
.community-profile-strip aside { display: grid; grid-template-columns: auto auto; gap: .1rem 1rem; text-align: right; }
.community-profile-strip aside small { color: var(--text-muted); font-size: .57rem; }

.settings-layout { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.settings-layout > nav { display: grid; gap: .35rem; padding: .55rem; border: 1px solid var(--line-soft); border-radius: .85rem; background: var(--surface-1); }
.settings-layout > nav button { padding: .75rem; border: 0; border-radius: .55rem; background: transparent; color: var(--text-muted); text-align: left; }
.settings-layout > nav button.active { background: var(--surface-3); color: white; }
.settings-layout > div { display: grid; gap: .8rem; }
.settings-section, .admin-communications, .admin-system, .platform-admin-analytics { padding: 1.5rem; border: 1px solid var(--line-soft); border-radius: 1rem; background: var(--surface-1); }
.settings-section header, .admin-communications header, .admin-system header, .platform-admin-analytics header { margin-bottom: 1.2rem; }
.settings-section header p { margin-top: .4rem; color: var(--text-muted); font-size: .78rem; }
.settings-section label { display: grid; gap: .45rem; margin-top: .9rem; color: var(--text-secondary); font-size: .78rem; }
.settings-section input, .settings-section select, .settings-section textarea, .admin-communications input, .admin-communications textarea, .admin-communications select { width: 100%; padding: .8rem; border: 1px solid #2b2d34; border-radius: .65rem; outline: none; background: #0d0e12; color: white; }
.settings-section > button { margin-top: 1rem; }
.settings-check { grid-template-columns: auto 1fr !important; align-items: start; padding: .8rem; border: 1px solid #24262d; border-radius: .7rem; }
.settings-check small { display: block; margin-top: .2rem; color: var(--text-muted); }
.connection-result { margin-top: 1rem; color: var(--text-secondary); font-size: .76rem; }

.platform-admin-tabs { overflow-x: auto; }
.platform-admin-tabs button { min-width: 7rem; font-size: .72rem; }
.platform-admin-analytics > header { display: flex; justify-content: space-between; }
.platform-admin-analytics > header span { color: var(--text-muted); font-size: .7rem; }
.platform-admin-analytics > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; }
.platform-admin-analytics article { padding: 1rem; border-radius: .75rem; background: var(--surface-2); }
.platform-admin-analytics article small { color: var(--text-muted); font-size: .62rem; }
.platform-admin-analytics article strong { display: block; margin: .5rem 0; font-size: 1.4rem; }
.platform-admin-analytics article p { color: var(--text-muted); font-size: .68rem; }
.admin-communications form { display: grid; grid-template-columns: 1fr 1fr 13rem; gap: .75rem; align-items: end; }
.admin-communications form label { display: grid; gap: .4rem; color: var(--text-secondary); font-size: .72rem; }
.admin-communications form button { height: 2.7rem; border: 0; border-radius: .65rem; background: white; color: black; font-weight: 750; }
.notification-history { margin-top: 1rem; }
.notification-history article, .notification-center article { display: grid; grid-template-columns: .7rem 1fr auto; gap: .8rem; align-items: start; padding: .85rem 0; border-top: 1px solid #23252b; }
.notification-history article > span, .notification-center article > span, .status-dot { width: .55rem; height: .55rem; margin-top: .3rem; border-radius: 999px; background: #777b85; }
.notification-history span.success, .notification-center span.success, .status-dot.online { background: #50d39a; box-shadow: 0 0 1rem #50d39a55; }
.notification-history span.warning, .notification-center span.warning { background: #e7b45f; }
.notification-history span.announcement, .notification-center span.announcement { background: #8e7fff; }
.notification-history strong { display: block; font-size: .8rem; }
.notification-history small { color: var(--text-muted); font-size: .7rem; }
.notification-history time { color: var(--text-muted); font-size: .65rem; }
.system-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.system-grid article { display: grid; grid-template-columns: .7rem 1fr; gap: .75rem; padding: 1rem; border-radius: .75rem; background: var(--surface-2); }
.system-grid small { display: block; margin-top: .2rem; color: var(--text-muted); font-size: .7rem; }
.system-actions { display: flex; gap: .6rem; margin-top: 1rem; }
.system-actions button { padding: .7rem .9rem; border: 1px solid #2c2e35; border-radius: .65rem; background: var(--surface-2); color: white; }
.system-actions button.danger { color: #ef9898; }

.compact-modal { width: min(34rem, calc(100vw - 2rem)); }
.modal-backdrop { align-items: flex-start; overflow: auto; padding: 1.5rem; }
.modal-card { max-height: calc(100vh - 3rem); overflow-y: auto; overscroll-behavior: contain; }
.modal-card > .close { position: sticky; z-index: 5; top: 0; float: right; }
.notification-center { width: min(42rem, calc(100vw - 2rem)); }
.notification-center > div { max-height: 30rem; overflow: auto; }
.notification-center article strong { font-size: .85rem; }
.notification-center article p { margin: .25rem 0; color: var(--text-secondary); font-size: .76rem; line-height: 1.5; }
.notification-center article small { color: var(--text-muted); font-size: .66rem; }
.validation-sheet { width: min(46rem, calc(100vw - 2rem)); }
.course-builder-fields { display: grid; gap: .8rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--line-soft); border-radius: .8rem; background: #0e0f13; }
.course-builder-fields header { margin-bottom: 0; }
.course-builder-fields h3 { margin-top: .3rem; }
.course-builder-fields textarea { min-height: 7rem; }
.validation-sheet > section { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1rem 0; }
.validation-sheet > section article, .validation-note { padding: .9rem; border-radius: .7rem; background: var(--surface-2); }
.validation-sheet small { color: var(--text-muted); font-size: .62rem; }
.validation-sheet strong { display: block; margin-top: .35rem; font-size: .8rem; }
.validation-note p { margin-top: .45rem; color: var(--text-secondary); line-height: 1.6; }
.review-actions { display: flex; gap: .6rem; margin-top: 1rem; }
.ai-review-output { margin-top: .8rem; padding: .9rem; border: 1px solid #282a31; border-radius: .7rem; color: var(--text-secondary); font-size: .75rem; line-height: 1.6; white-space: pre-wrap; }
.warning-line { color: #e0b36c; font-size: .75rem; }
.validation-request > span { display: block; margin-bottom: 1rem; color: var(--text-secondary); line-height: 1.6; }
.validation-request label > small { color: var(--text-muted); }
.evidence-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin: .8rem 0; }
.evidence-actions button { padding: .65rem .8rem; border: 1px solid #30323a; border-radius: .6rem; background: var(--surface-2); color: var(--text-main); }

@media (max-width: 1050px) {
  .command-hero, .dashboard-columns { grid-template-columns: 1fr; }
  .dashboard-pulse { grid-template-columns: 1fr 1fr; }
  .course-row { grid-template-columns: 3.5rem 1fr; }
  .course-action { grid-column: 2; justify-items: stretch; }
  .tool-workspace-grid { grid-template-columns: 1fr 1fr; }
  .recent-tools { grid-column: 1 / -1; }
  .platform-admin-analytics > div { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .view { width: calc(100% - 1.5rem); padding-top: 1.5rem; }
  .page-head { align-items: flex-start; }
  .page-head, .community-profile-strip { flex-direction: column; }
  .page-head h1 { font-size: 2.25rem; }
  .command-copy, .player-card { min-height: auto; padding: 1.35rem; }
  .dashboard-pulse, .badge-panel > div, .clean-shortcuts, .system-grid, .validation-sheet > section { grid-template-columns: 1fr 1fr; }
  .course-player-layout { grid-template-columns: 1fr; }
  .course-player-layout > nav { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .academy-summary, .settings-layout { grid-template-columns: 1fr; }
  .course-row { grid-template-columns: 1fr; }
  .course-number { text-align: left; }
  .course-action { grid-column: auto; }
  .admin-communications form { grid-template-columns: 1fr; }
}