:root {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface-soft: #fafafe;
  --ink: #232235;
  --muted: #777589;
  --line: #e9e8f0;
  --purple: #6f57df;
  --purple-dark: #5941c7;
  --purple-soft: #eeebff;
  --mint: #55a885;
  --mint-soft: #e7f6f0;
  --peach: #e99a61;
  --peach-soft: #fff0e4;
  --rose: #d97791;
  --sky: #5a9cce;
  --shadow: 0 12px 36px rgba(39, 31, 78, 0.07);
  --shadow-soft: 0 4px 18px rgba(39, 31, 78, 0.05);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --sidebar: 246px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); }
button, input, textarea, select { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin-top: 0; }
.hidden { display: none !important; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  padding: 28px 18px 20px;
  background: #fbfbfd;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px; }
.brand-mark { position: relative; width: 35px; height: 35px; border-radius: 11px; background: var(--purple); overflow: hidden; box-shadow: 0 6px 14px rgba(111,87,223,.24); flex: 0 0 auto; }
.brand-mark span:first-child { position: absolute; width: 22px; height: 12px; border: 3px solid white; border-left: 0; border-bottom: 0; transform: rotate(-24deg); top: 11px; left: 6px; border-radius: 50%; }
.brand-mark span:last-child { position: absolute; width: 15px; height: 2px; background: white; transform: rotate(-42deg); top: 18px; left: 10px; border-radius: 4px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong, .mobile-brand strong { font-size: 21px; letter-spacing: -.6px; }
.brand-copy small { color: #9491a3; text-transform: uppercase; font-size: 8px; letter-spacing: 1.6px; margin-top: 5px; font-weight: 700; }

.main-nav { margin-top: 45px; }
.nav-label { color: #aaa8b4; font-size: 10px; font-weight: 800; letter-spacing: 1.25px; text-transform: uppercase; padding: 0 13px; margin: 0 0 10px; }
.nav-label-spaced { margin-top: 30px; }
.nav-item { position: relative; width: 100%; border: 0; background: transparent; border-radius: 12px; display: flex; align-items: center; gap: 12px; padding: 11px 13px; color: #6e6c7d; text-align: left; font-size: 14px; font-weight: 600; margin: 2px 0; transition: .18s ease; }
.nav-item:hover { background: #f2f0fa; color: var(--purple-dark); }
.nav-item.active { color: var(--purple-dark); background: var(--purple-soft); font-weight: 750; }
.nav-icon { width: 21px; height: 21px; display: grid; place-items: center; font-size: 19px; font-family: Georgia, serif; }
.spark-icon { color: var(--purple); }
.status-dot { width: 6px; height: 6px; margin-left: auto; background: #58bd8c; border-radius: 50%; box-shadow: 0 0 0 3px #e5f6ed; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 13px; }
.upgrade-card { border: 0; padding: 14px 12px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; border-radius: 14px; background: #29263f; color: white; text-align: left; }
.upgrade-card:hover { background: #37324e; transform: translateY(-1px); }
.upgrade-card span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.upgrade-card strong { font-size: 11px; }
.upgrade-card small { color: #b8b4cd; font-size: 9px; margin-top: 3px; }
.upgrade-orbit { display: grid; place-items: center; background: rgba(255,255,255,.12); border-radius: 9px; width: 31px; height: 31px; color: #c9bbff; }
.profile-mini { display: grid; grid-template-columns: 35px 1fr auto; gap: 9px; align-items: center; padding: 9px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; }
.profile-mini > span:nth-child(2) { display: flex; flex-direction: column; }
.profile-mini strong { font-size: 12px; }
.profile-mini small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.more-dots { font-size: 10px; color: #aaa8b4; letter-spacing: 1px; }

.mobile-header { display: none; }
.main-content { margin-left: var(--sidebar); min-height: 100vh; }
.view { display: none; padding: 38px clamp(28px, 3.4vw, 58px) 60px; max-width: 1600px; margin: 0 auto; animation: viewIn .25s ease; }
.view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 25px; margin-bottom: 30px; }
.page-header h1 { margin: 3px 0 8px; font-size: clamp(29px, 3vw, 39px); letter-spacing: -1.55px; line-height: 1.08; }
.page-header p:not(.eyebrow) { color: var(--muted); margin-bottom: 0; font-size: 14px; }
.eyebrow { font-size: 9px; letter-spacing: 1.45px; font-weight: 800; text-transform: uppercase; color: #9b98a9; margin-bottom: 8px; }
.wave { font-size: .75em; display: inline-block; transform: rotate(-8deg); }
.header-actions { display: flex; align-items: center; gap: 13px; }
.icon-button { width: 39px; height: 39px; border-radius: 12px; border: 1px solid var(--line); background: white; display: grid; place-items: center; }
.notification-button { position: relative; font-size: 18px; }
.notification-button span { position: absolute; width: 6px; height: 6px; background: var(--rose); border-radius: 50%; right: 8px; top: 7px; border: 1px solid white; }
.avatar { width: 42px; height: 42px; border-radius: 13px; border: 0; display: grid; place-items: center; color: #5e49b5; background: linear-gradient(145deg, #ded6ff, #f5edff); font-weight: 800; box-shadow: inset 0 0 0 1px rgba(111,87,223,.13); }
.avatar-small { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 25px; }
.dashboard-primary { min-width: 0; }
.dashboard-aside { display: grid; align-content: start; gap: 16px; }
.focus-card { min-height: 291px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); border-radius: var(--radius-xl); padding: 34px 37px; color: white; background: linear-gradient(125deg, #7461e7 0%, #6f5bde 52%, #5541b8 100%); box-shadow: 0 15px 40px rgba(80, 59, 170, .2); }
.focus-card::before { content: ""; position: absolute; width: 430px; height: 430px; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; right: -180px; top: -200px; box-shadow: 0 0 0 54px rgba(255,255,255,.025), 0 0 0 108px rgba(255,255,255,.025); }
.focus-copy { position: relative; z-index: 2; }
.focus-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1.15px; font-weight: 800; color: #ddd8ff; margin-bottom: 14px; }
.focus-label span { margin-right: 5px; color: white; }
.focus-card h2 { font-size: clamp(26px, 2.7vw, 37px); line-height: 1.07; letter-spacing: -1.15px; margin-bottom: 13px; }
.focus-card p { max-width: 515px; font-size: 12px; line-height: 1.65; color: #e5e1ff; margin-bottom: 16px; }
.focus-meta { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #d9d4fb; margin-bottom: 20px; }
.level-pill { background: rgba(255,255,255,.13); padding: 4px 8px; border-radius: 99px; }
.primary-button, .secondary-button { border: 0; border-radius: 11px; padding: 11px 16px; font-size: 11px; font-weight: 750; display: inline-flex; align-items: center; justify-content: center; gap: 13px; transition: .18s ease; }
.primary-button { color: white; background: var(--purple); box-shadow: 0 7px 17px rgba(111,87,223,.2); }
.primary-button:hover { background: var(--purple-dark); transform: translateY(-1px); }
.primary-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.light-button { background: white; color: #5944bf; box-shadow: 0 7px 18px rgba(40,25,100,.18); }
.light-button:hover { background: #f6f3ff; }
.secondary-button { background: #f0edff; color: var(--purple-dark); }
.secondary-button:hover { background: #e5e0ff; }
.full-button { width: 100%; }
.focus-visual { position: relative; min-height: 220px; z-index: 1; }
.math-orbit { position: absolute; display: grid; place-items: center; border-radius: 13px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); font: 700 22px Georgia,serif; }
.orbit-one { width: 50px; height: 50px; right: 32px; top: 4px; transform: rotate(8deg); }
.orbit-two { width: 38px; height: 38px; left: 10px; top: 54px; transform: rotate(-11deg); }
.orbit-three { width: 43px; height: 43px; right: 0; bottom: 26px; transform: rotate(12deg); }
.balance { position: absolute; left: 50%; top: 56%; width: 145px; height: 105px; transform: translate(-50%,-50%); }
.balance-beam { position: absolute; left: 10px; top: 20px; width: 125px; height: 6px; border-radius: 4px; background: #eeeaff; transform: rotate(-3deg); box-shadow: 0 7px 15px rgba(28,16,89,.25); }
.balance-beam::before { content: ""; position: absolute; left: 59px; top: 5px; width: 4px; height: 58px; background: #e8e2ff; }
.balance-beam span { position: absolute; top: 4px; width: 43px; height: 29px; border: 3px solid rgba(255,255,255,.84); border-top: 0; border-radius: 0 0 28px 28px; }
.balance-beam span:first-child { left: 0; }
.balance-beam span:last-child { right: 0; }
.balance-base { position: absolute; left: 51px; bottom: 8px; width: 44px; height: 5px; border-radius: 5px; background: #e8e2ff; }

.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin: 32px 1px 15px; }
.section-heading .eyebrow { margin-bottom: 5px; }
.section-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.35px; }
.text-button { border: 0; background: transparent; color: var(--purple); font-size: 10px; font-weight: 750; padding: 7px 0; }
.text-button:hover { color: var(--purple-dark); }
.text-button span { margin-left: 5px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.stat-card { position: relative; display: grid; grid-template-columns: 43px 1fr; align-items: center; gap: 12px; min-height: 82px; border-radius: var(--radius-md); border: 1px solid var(--line); padding: 15px; background: var(--surface); box-shadow: var(--shadow-soft); }
.stat-icon { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 12px; font-weight: 800; }
.lilac { background: var(--purple-soft); color: var(--purple); }
.mint { background: var(--mint-soft); color: var(--mint); }
.peach { background: var(--peach-soft); color: var(--peach); }
.sky { background: #e8f4fd; color: var(--sky); }
.stat-card > div:nth-child(2) { display: flex; flex-direction: column; }
.stat-value { font-size: 21px; font-weight: 800; line-height: 1; }
.stat-card small { color: var(--muted); font-size: 9px; margin-top: 5px; }
.trend { position: absolute; right: 11px; top: 11px; font-size: 8px; font-weight: 800; padding: 3px 5px; border-radius: 5px; }
.trend.positive { color: #3f9975; background: #e9f7f1; }
.trend.neutral { color: #9895a4; background: #f4f3f7; }
.compact-heading { margin-top: 30px; }
.round-add { width: 28px; height: 28px; border: 1px solid var(--line); background: white; color: var(--purple); border-radius: 9px; }
.subject-list { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.subject-row { width: 100%; display: grid; grid-template-columns: 42px minmax(130px,1fr) minmax(100px, 190px) 18px; align-items: center; gap: 13px; text-align: left; border: 0; border-bottom: 1px solid #f0eff4; background: white; padding: 13px 16px; transition: .18s; }
.subject-row:last-child { border-bottom: 0; }
.subject-row:hover { background: #fcfbff; padding-left: 19px; }
.subject-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; font: 700 18px Georgia,serif; }
.subject-purple { color: var(--purple); background: var(--purple-soft); }
.subject-green { color: var(--mint); background: var(--mint-soft); }
.subject-orange { color: var(--peach); background: var(--peach-soft); }
.subject-icon.mini { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }
.subject-info { display: flex; flex-direction: column; }
.subject-info strong { font-size: 12px; }
.subject-info small { color: var(--muted); font-size: 9px; margin-top: 4px; }
.subject-progress { display: flex; align-items: center; gap: 9px; }
.subject-progress > span { height: 4px; background: #eeedf3; flex: 1; border-radius: 9px; overflow: hidden; }
.subject-progress i { display: block; height: 100%; background: var(--purple); border-radius: 9px; }
.subject-progress small { width: 25px; font-size: 9px; font-weight: 700; color: var(--muted); }
.row-arrow { color: #aaa8b6; font-size: 20px; }

.streak-card, .mentor-card, .next-card, .tool-card, .analytics-card, .settings-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.streak-card, .mentor-card, .next-card { padding: 19px; }
.card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-title-row h3 { margin: 0; font-size: 13px; }
.fire-badge { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--peach-soft); font-size: 14px; }
.streak-value { display: flex; align-items: center; gap: 9px; margin: 12px 0 14px; }
.streak-value strong { font-size: 37px; letter-spacing: -1px; line-height: 1; }
.streak-value span { font-size: 10px; line-height: 1.25; color: var(--muted); }
.week-row { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.week-row > div { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.day { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: #f3f2f6; color: #a2a0ac; font-size: 8px; font-weight: 800; }
.day.done { background: var(--purple); color: white; }
.day.current { background: white; color: var(--purple); border: 1px solid var(--purple); box-shadow: 0 0 0 3px var(--purple-soft); }
.week-row small { font-size: 7px; color: #aaa8b4; }
.encouragement { margin: 14px 0 0; font-size: 9px; line-height: 1.5; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line); }
.mentor-card { background: linear-gradient(145deg, #29263f, #35304d); color: white; border: 0; box-shadow: 0 12px 28px rgba(34,29,62,.16); }
.mentor-head { display: flex; align-items: center; gap: 10px; }
.nexo-avatar { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: linear-gradient(145deg, #9684ee, #624bc8); color: white; box-shadow: 0 6px 15px rgba(31,20,79,.2); }
.nexo-avatar.small { width: 31px; height: 31px; border-radius: 9px; font-size: 10px; }
.online-label { font-size: 7px; letter-spacing: 1px; color: #a9e3c7; font-weight: 800; }
.online-label i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #68ca98; margin-right: 4px; }
.mentor-head h3 { margin: 3px 0 0; font-size: 13px; }
.mentor-card > p { color: #cac6d8; font-size: 10px; line-height: 1.55; margin: 15px 0; }
.mentor-card .secondary-button { background: white; color: #4e3f9f; }
.mentor-suggestions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.mentor-suggestions button { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #bab6ca; font-size: 8px; border-radius: 7px; padding: 5px 7px; }
.mentor-suggestions button:hover { color: white; background: rgba(255,255,255,.1); }
.tiny-calendar { width: 30px; height: 31px; border-radius: 9px; background: var(--purple-soft); color: var(--purple); display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.next-detail { display: flex; gap: 10px; align-items: center; margin: 15px 0 8px; }
.next-detail > div { display: flex; flex-direction: column; }
.next-detail strong { font-size: 10px; }
.next-detail small { color: var(--muted); font-size: 8px; margin-top: 4px; }

/* Tutor */
.inner-header { align-items: center; }
.provider-badge { border: 1px solid var(--line); border-radius: 99px; padding: 8px 12px; display: flex; align-items: center; gap: 7px; background: white; color: var(--muted); font-size: 10px; font-weight: 700; }
.provider-badge i { width: 7px; height: 7px; background: #55bb89; border-radius: 50%; box-shadow: 0 0 0 3px #e7f6ee; }
.tutor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 275px; gap: 20px; align-items: start; min-width: 0; }
.chat-panel { width: 100%; min-width: 0; height: calc(100vh - 180px); min-height: 590px; display: flex; flex-direction: column; border: 1px solid var(--line); background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow); overflow: hidden; }
.chat-context-bar { min-height: 60px; border-bottom: 1px solid var(--line); padding: 10px 17px; display: flex; align-items: center; gap: 20px; }
.chat-context-bar label { display: flex; align-items: center; gap: 8px; font-size: 9px; color: var(--muted); }
.chat-context-bar select { border: 0; font-size: 11px; font-weight: 750; color: var(--ink); background: transparent; outline: 0; }
.session-status { margin-left: auto; font-size: 8px; color: #8f8c9c; }
.session-status i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #5fbd90; margin-right: 4px; }
.clear-chat { border: 0; background: #f5f3fb; color: var(--purple); padding: 7px 9px; border-radius: 8px; font-size: 8px; font-weight: 700; }
.messages { flex: 1; overflow-y: auto; padding: 25px 25px 12px; scrollbar-width: thin; scrollbar-color: #d9d6e3 transparent; }
.message-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; }
.message-row.user { justify-content: flex-end; }
.message-wrap { max-width: min(78%, 680px); }
.message-row.user .message-wrap { display: flex; flex-direction: column; align-items: flex-end; }
.message-author { display: block; font-size: 8px; font-weight: 800; color: #9895a3; margin: 0 0 5px 3px; }
.message-bubble { padding: 12px 15px; border-radius: 5px 16px 16px 16px; background: #f5f3fb; color: #484657; font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-bubble strong { color: var(--ink); }
.message-row.user .message-bubble { color: white; background: var(--purple); border-radius: 16px 5px 16px 16px; }
.typing { display: inline-flex; gap: 4px; align-items: center; min-height: 40px; }
.typing i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #9b94c4; animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%,60%,100%{ transform: translateY(0); opacity:.45 } 30%{ transform: translateY(-4px); opacity:1 } }
.prompt-chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 19px 10px; }
.prompt-chips button { white-space: nowrap; border: 1px solid var(--line); background: white; color: #6f6c7d; border-radius: 99px; padding: 7px 10px; font-size: 8px; }
.prompt-chips button:hover { border-color: #cfc8f1; color: var(--purple); background: #fbfaff; }
.composer { margin: 0 17px 17px; padding: 11px 12px 8px; border: 1px solid #dcd9e7; border-radius: 15px; box-shadow: 0 4px 16px rgba(42,34,75,.05); }
.composer:focus-within { border-color: #a99ce6; box-shadow: 0 0 0 3px var(--purple-soft); }
.composer textarea { display: block; width: 100%; max-height: 120px; resize: none; border: 0; outline: 0; color: var(--ink); font-size: 12px; line-height: 1.5; background: transparent; padding: 1px 3px 8px; }
.composer textarea::placeholder { color: #aaa7b4; }
.composer-bottom { border-top: 1px solid #f0eff4; padding-top: 7px; display: flex; justify-content: space-between; align-items: center; }
.composer-hint { color: #aaa8b3; font-size: 7px; }
.send-button { width: 28px; height: 28px; border: 0; border-radius: 9px; background: var(--purple); color: white; font-size: 15px; font-weight: 800; }
.send-button:hover { background: var(--purple-dark); }
.send-button:disabled { opacity: .5; cursor: wait; }
.tutor-tools { display: grid; gap: 15px; }
.tool-card { padding: 19px; }
.tool-card h3 { font-size: 13px; margin: 0; }
.learning-path { list-style: none; padding: 0; margin: 20px 0 0; }
.learning-path li { position: relative; display: flex; gap: 10px; min-height: 58px; }
.learning-path li:not(:last-child)::before { content: ""; position: absolute; left: 12px; top: 27px; bottom: 0; border-left: 1px dashed #d8d5e1; }
.learning-path li > span { width: 25px; height: 25px; border-radius: 8px; background: #f1f0f5; color: #9c99a6; display: grid; place-items: center; flex: 0 0 auto; font-size: 8px; font-weight: 800; z-index: 1; }
.learning-path li.active > span { background: var(--purple); color: white; box-shadow: 0 4px 10px rgba(111,87,223,.2); }
.learning-path li div { display: flex; flex-direction: column; padding-top: 2px; }
.learning-path strong { font-size: 9px; }
.learning-path small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.tip-card { background: var(--purple-soft); border-color: #ded8fa; display: flex; gap: 11px; box-shadow: none; }
.tip-icon { font-size: 20px; color: var(--purple); }
.tip-card p { margin: 0; color: #68627e; font-size: 9px; line-height: 1.55; }
.tip-card strong { display: block; color: #4e4864; margin-bottom: 3px; }
.time-pill { font-size: 9px; color: var(--purple); background: var(--purple-soft); border-radius: 7px; padding: 5px 7px; font-variant-numeric: tabular-nums; }
.session-metric { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 9px; }
.session-metric span { color: var(--muted); }.session-metric strong { font-size: 9px; }
.session-card .secondary-button { margin-top: 14px; }

/* Practice */
.practice-score { display: flex; align-items: baseline; gap: 6px; background: var(--peach-soft); padding: 10px 14px; border-radius: 12px; color: var(--peach); }
.practice-score span { font-size: 8px; color: #a77758; }.practice-score strong { font-size: 18px; }.practice-score i { font-size: 8px; font-style: normal; font-weight: 800; }
.practice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.practice-main { max-width: 800px; width: 100%; }
.practice-topline { display: flex; justify-content: space-between; margin: 0 3px 9px; font-size: 9px; color: var(--muted); font-weight: 700; }
.progress-track { height: 5px; background: #e8e6ee; border-radius: 9px; margin-bottom: 18px; overflow: hidden; }
.progress-track i { display: block; height: 100%; width: 20%; background: var(--purple); border-radius: 9px; transition: width .3s ease; }
.quiz-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(27px, 4vw, 45px); box-shadow: var(--shadow); min-height: 475px; }
.quiz-type { color: var(--purple); font-size: 9px; text-transform: uppercase; letter-spacing: .9px; font-weight: 800; }
.quiz-type span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--purple-soft); margin-right: 7px; }
.quiz-card h2 { font-size: clamp(19px, 2.1vw, 25px); letter-spacing: -.55px; line-height: 1.35; margin: 23px 0; max-width: 650px; }
.answer-list { display: grid; gap: 9px; }
.answer-option { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--line); background: white; border-radius: 12px; font-size: 11px; color: #595667; }
.answer-option span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: #f3f2f6; font-size: 9px; font-weight: 800; }
.answer-option:hover { border-color: #cfc8ed; background: #fcfbff; }
.answer-option.selected { border-color: var(--purple); box-shadow: 0 0 0 2px var(--purple-soft); color: var(--purple-dark); }
.answer-option.selected span { background: var(--purple); color: white; }
.answer-option.correct { border-color: #65b591; background: #f2fbf7; }.answer-option.correct span { background: var(--mint); color: white; }
.answer-option.incorrect { border-color: #dc8a86; background: #fff7f6; }.answer-option.incorrect span { background: #d97d79; color: white; }
.quiz-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.hint-box, .answer-feedback { padding: 11px 13px; margin-top: 13px; border-radius: 10px; font-size: 10px; line-height: 1.5; }
.hint-box { background: #fff9eb; color: #8b744b; border: 1px solid #f4e5bb; }
.answer-feedback.correct { background: var(--mint-soft); color: #39795f; }.answer-feedback.incorrect { background: #fff0ee; color: #9b5a56; }
.practice-aside { display: grid; gap: 15px; }
.topic-selector { display: grid; gap: 6px; margin-top: 15px; }
.topic-selector button { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; border: 1px solid transparent; background: #f8f7fa; border-radius: 11px; padding: 9px; text-align: left; }
.topic-selector button.active { border-color: #d6cff4; background: #f5f2ff; }
.topic-selector button > span:nth-child(2) { display: flex; flex-direction: column; }
.topic-selector strong { font-size: 9px; }.topic-selector small { font-size: 7px; color: var(--muted); margin-top: 3px; }.topic-selector button > i { font-size: 8px; color: var(--muted); font-style: normal; }
.confidence-card { display: flex; align-items: flex-start; gap: 11px; background: linear-gradient(135deg,#2d2a43,#3b3655); border: 0; color: white; }
.confidence-card > span { color: #b9aaff; font-size: 22px; }.confidence-card strong { font-size: 10px; }.confidence-card p { margin: 5px 0 0; color: #c5c1d1; font-size: 8px; line-height: 1.5; }

/* Library */
.library-header { align-items: flex-end; }
.search-box { width: min(340px, 38vw); height: 41px; display: flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--line); background: white; border-radius: 12px; box-shadow: var(--shadow-soft); }
.search-box span { color: #9996a4; font-size: 18px; }.search-box input { border: 0; outline: 0; width: 100%; font-size: 10px; color: var(--ink); }.search-box input::placeholder { color: #aaa7b4; }
.filter-row { display: flex; gap: 7px; margin-bottom: 20px; }
.filter-row button { padding: 8px 13px; border: 1px solid var(--line); background: white; color: var(--muted); border-radius: 99px; font-size: 9px; font-weight: 700; }
.filter-row button.active { background: var(--purple); border-color: var(--purple); color: white; }
.library-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.library-card { min-width: 0; background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); transition: .2s ease; }
.library-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.library-visual { height: 138px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; position: relative; overflow: hidden; }
.library-visual::before,.library-visual::after { content:""; position:absolute; border:1px solid currentColor; opacity:.12; border-radius:50%; width:170px; height:170px; right:-70px; top:-85px; }.library-visual::after { width:100px;height:100px;left:-40px;top:auto;bottom:-55px; }
.library-visual span { font: 700 35px Georgia,serif; z-index:1; }.library-visual i { font-size: 9px; font-style: normal; opacity:.7; z-index:1; }
.purple-visual { color: #684ed1; background: #eeeaff; }.green-visual { color:#3e9371;background:#e8f6f0; }.orange-visual{color:#c47c45;background:#fff0e4}.blue-visual{color:#437faa;background:#e8f4fb}.rose-visual{color:#bd617d;background:#faeaf0}.cyan-visual{color:#3c8f9b;background:#e6f6f6}
.library-body { padding: 17px; }
.library-category { color: #9996a5; font-size: 7px; text-transform: uppercase; letter-spacing: .9px; font-weight: 800; }
.library-body h3 { margin: 6px 0; font-size: 16px; }.library-body p { min-height: 34px; margin: 0 0 14px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.library-body > div { padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items:center; }.library-body small { color:#9c99a6;font-size:8px;}.library-body button{border:0;background:transparent;color:var(--purple);font-size:8px;font-weight:800;}
.empty-library { padding: 60px; text-align:center; color:var(--muted); font-size:12px; }

/* Progress */
.period-select { border: 1px solid var(--line); background: white; color: var(--muted); padding: 9px 12px; border-radius: 10px; font-size: 9px; }
.progress-summary { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px; }
.progress-summary article { display:flex;align-items:center;gap:11px;background:white;border:1px solid var(--line);border-radius:var(--radius-md);padding:15px;box-shadow:var(--shadow-soft); }
.progress-summary article > div { display:flex;flex-direction:column; }.progress-summary small { color:var(--muted);font-size:8px; }.progress-summary strong { font-size:16px;margin:4px 0 3px; }.progress-summary em { color:#4d9b79;font-size:7px;font-style:normal; }
.analytics-grid { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:18px; }
.analytics-card { padding:21px; }.analytics-card h3 { font-size:14px; }.chart-total { color:var(--purple);background:var(--purple-soft);padding:6px 8px;border-radius:8px;font-size:9px;font-weight:800; }
.bar-chart { height:220px;display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:12px;padding:24px 5px 0;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0,transparent 54px,#f0eff4 55px); }
.bar-chart > div { height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px; }.bar-chart i { position:relative;width:min(28px,70%);min-height:5px;background:#dedbe9;border-radius:7px 7px 2px 2px;transition:.25s; }.bar-chart i.highlight { background:linear-gradient(#8a75e9,#6f57df);box-shadow:0 5px 13px rgba(111,87,223,.2); }.bar-chart b { position:absolute;top:-17px;width:100%;text-align:center;font-size:7px;color:#9996a4;font-style:normal; }.bar-chart span { font-size:7px;color:#9996a4;margin-bottom:-17px; }
.skill-row { margin-top:16px; }.skill-row > div { display:flex;justify-content:space-between;align-items:center;font-size:9px;margin-bottom:7px; }.skill-row > div span { display:flex;align-items:center;gap:7px; }.skill-row > div i { width:25px;height:25px;display:grid;place-items:center;border-radius:7px;font-style:normal;font-family:Georgia,serif; }.skill-row > span { display:block;height:5px;background:#eeedf3;border-radius:7px;overflow:hidden; }.skill-row > span i { display:block;height:100%;background:linear-gradient(90deg,#8b78e8,#6f57df);border-radius:7px; }
.skills-note { display:flex;gap:8px;margin:20px 0 0;padding:12px;background:var(--purple-soft);border-radius:10px;color:#68627c;font-size:8px;line-height:1.5; }.skills-note span{color:var(--purple);font-size:14px;}
.achievements-card { margin-top:18px; }.achievements-card .section-heading { margin-top:0; }.achievement-list { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }.achievement-list > div { display:grid;grid-template-columns:36px 1fr;column-gap:9px;align-items:center;padding:12px;background:#f9f8fb;border-radius:12px; }.achievement-icon { grid-row:1/3;width:36px;height:36px;display:grid;place-items:center;background:var(--peach-soft);border-radius:10px; }.achievement-list strong { font-size:9px; }.achievement-list small { color:var(--muted);font-size:7px;margin-top:2px; }.achievement-list .locked { opacity:.45;filter:grayscale(.8); }

/* Settings */
.settings-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;max-width:1000px; }.settings-card { padding:23px; }.settings-heading { display:flex;gap:11px;align-items:flex-start;margin-bottom:19px; }.settings-icon { width:37px;height:37px;display:grid;place-items:center;background:var(--purple-soft);color:var(--purple);border-radius:11px;font-weight:800; }.settings-heading h3 { margin:1px 0 5px;font-size:14px; }.settings-heading p { margin:0;color:var(--muted);font-size:8px; }
.settings-card > label { display:grid;gap:6px;margin:12px 0;color:#666374;font-size:9px;font-weight:700; }.settings-card input,.settings-card select { width:100%;border:1px solid var(--line);background:#fbfbfd;border-radius:10px;padding:10px 11px;outline:0;color:var(--ink);font-size:10px; }.settings-card input:focus,.settings-card select:focus { border-color:#aaa0dd;box-shadow:0 0 0 3px var(--purple-soft); }.settings-card > .primary-button { margin-top:7px; }
.provider-status-list { border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-top:15px; }.provider-status-list > div { display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid var(--line);font-size:8px; }.provider-status-list > div:last-child{border-bottom:0}.provider-status-list span { display:flex;align-items:center;gap:7px; }.provider-status-list i { width:7px;height:7px;border-radius:50%;background:#cac8d0; }.provider-status-list i.available { background:#58b989;box-shadow:0 0 0 3px #e8f6ef; }.provider-status-list strong { color:var(--muted);font-size:8px; }
.server-note { display:flex;gap:9px;background:#fff8eb;color:#806f51;border:1px solid #f1e4c7;border-radius:10px;padding:11px;margin-top:14px; }.server-note > span { font-size:17px; }.server-note p { margin:0;font-size:8px;line-height:1.5; }.server-note code,.settings-card code { font-family:"SFMono-Regular",Consolas,monospace; }
.api-help-card { grid-column:1/-1; }.code-settings { display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }.code-settings > div { background:#29263f;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px; }.code-settings span { color:#c8c2e4;font-size:8px;text-transform:uppercase;letter-spacing:1px;font-weight:800; }.code-settings code { color:#f2f0f8;font-size:9px;line-height:1.7;white-space:normal; }.codex-note { margin:14px 0 0;color:var(--muted);font-size:8px;line-height:1.6; }

.toast { position:fixed;left:50%;bottom:25px;z-index:60;transform:translate(-50%,20px);padding:10px 15px;border-radius:10px;background:#29263f;color:white;font-size:10px;box-shadow:0 12px 30px rgba(26,21,50,.25);opacity:0;pointer-events:none;transition:.25s ease; }.toast.visible{opacity:1;transform:translate(-50%,0)}
.sidebar-overlay { display:none; }

@media (max-width: 1180px) {
  :root { --sidebar: 218px; }
  .sidebar { padding-inline: 13px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-aside { grid-template-columns: repeat(3,1fr); }
  .mentor-card { order: -1; }
  .library-grid { grid-template-columns: repeat(2,1fr); }
  .progress-summary { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  :root { --sidebar: 238px; }
  .sidebar { transform:translateX(-100%);transition:.25s ease;box-shadow:18px 0 40px rgba(30,25,55,.13); }
  .sidebar.open { transform:none; }
  .sidebar-overlay { position:fixed;inset:0;background:rgba(25,22,42,.25);z-index:15;backdrop-filter:blur(2px); }.sidebar-overlay.visible{display:block;}
  .mobile-header { height:62px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;background:rgba(250,250,253,.92);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:12;backdrop-filter:blur(12px); }
  .mobile-header .icon-button { border:0;background:transparent;font-size:18px; }.mobile-brand{padding:0;gap:8px}.mobile-brand .brand-mark{width:29px;height:29px;border-radius:9px}.mobile-brand strong{font-size:18px}
  .main-content { margin-left:0; }
  .view { padding:28px 23px 50px; }
  .tutor-layout,.practice-layout,.analytics-grid { grid-template-columns:1fr; }
  .chat-panel { height:calc(100vh - 190px); }
  .tutor-tools,.practice-aside { grid-template-columns:repeat(3,1fr); }
  .practice-aside { grid-template-columns:1fr 1fr; }.practice-aside .tool-card:first-child{grid-column:1/-1}.topic-selector{grid-template-columns:repeat(3,1fr)}
  .settings-grid { max-width:none; }
}

@media (max-width: 680px) {
  .view { padding:22px 16px 42px; }
  .dashboard-header .header-actions { display:none; }
  .page-header { margin-bottom:22px; }.page-header h1{font-size:30px}.page-header p:not(.eyebrow){font-size:12px;line-height:1.5}
  .focus-card { grid-template-columns:1fr;padding:27px;min-height:430px; }.focus-card h2{font-size:30px}.focus-visual{position:absolute;right:-5px;bottom:-15px;width:230px;height:205px;opacity:.55}.focus-copy{z-index:3}.focus-card p{max-width:85%}
  .stats-grid { grid-template-columns:1fr; }.stat-card{min-height:73px}
  .subject-row { grid-template-columns:39px 1fr 17px; }.subject-progress{grid-column:2/3}.subject-row>.row-arrow{grid-column:3;grid-row:1/3}.subject-progress>span{max-width:140px}
  .dashboard-aside { grid-template-columns:1fr; }
  .mentor-card { order:0; }
  .inner-header { align-items:flex-start; flex-direction:column; }.provider-badge,.practice-score,.period-select{margin-top:5px}
  .tutor-layout { gap:13px; }.chat-panel{min-height:570px;height:calc(100vh - 170px);border-radius:18px}.chat-context-bar{gap:8px;padding:9px 11px;overflow:hidden}.session-status{display:none}.clear-chat{margin-left:auto;white-space:nowrap}.messages{padding:20px 13px 8px}.message-row.assistant .message-wrap{max-width:calc(100% - 42px)}.message-row.user .message-wrap{max-width:88%}.message-bubble{font-size:11px}.composer{margin:0 10px 10px}.composer-hint{display:none}
  .tutor-tools { grid-template-columns:1fr; }.tutor-tools .tool-card:first-child,.tutor-tools .tip-card{display:none}
  .practice-layout{gap:15px}.quiz-card{padding:25px 18px;min-height:470px}.quiz-card h2{font-size:19px}.practice-aside{grid-template-columns:1fr}.topic-selector{grid-template-columns:1fr}.practice-aside .confidence-card{display:none}
  .library-header { display:block; }.search-box{width:100%;margin-top:17px}.filter-row{overflow-x:auto;padding-bottom:3px}.library-grid{grid-template-columns:1fr}.library-visual{height:115px}
  .progress-summary { grid-template-columns:1fr 1fr; }.progress-summary article{padding:12px}.progress-summary .stat-icon{width:35px;height:35px}.progress-summary strong{font-size:13px}.activity-chart-card{overflow:hidden}.bar-chart{gap:5px}.achievement-list{grid-template-columns:1fr 1fr}
  .settings-grid { grid-template-columns:1fr; }.api-help-card{grid-column:auto}.code-settings{grid-template-columns:1fr}
}

@media (max-width: 420px) {
  .progress-summary{grid-template-columns:1fr}.achievement-list{grid-template-columns:1fr}.page-header{gap:10px}.focus-card p{max-width:100%}.focus-meta{flex-wrap:wrap}.section-heading{align-items:center}.day{width:26px;height:26px}.clear-chat{display:none}
}

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