:root {
  color-scheme: light;
  --navy: #101d3a;
  --navy-2: #17284b;
  --blue: #386bff;
  --blue-dark: #2454e8;
  --sky: #eaf0ff;
  --ink: #17223b;
  --muted: #7e899f;
  --line: #e8ecf4;
  --canvas: #f5f7fc;
  --white: #fff;
  --green: #25a77a;
  --orange: #f3a544;
  --red: #e46f75;
  --shadow: 0 18px 55px rgba(25, 43, 84, 0.08);
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
svg { display: block; }
.app-root { min-height: 100vh; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font: 800 1.13rem/1 "Manrope", sans-serif;
  letter-spacing: -0.055em;
  white-space: nowrap;
}
.brand-symbol {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  color: white;
  border-radius: 12px;
  background: linear-gradient(145deg, #4f7eff, #2f58e9);
  box-shadow: 0 7px 16px #386bff40;
}
.brand-symbol svg { width: 24px; height: 24px; }
.brand-image {
  width: 43px;
  height: 43px;
  flex: none;
  border-radius: 13px;
  object-fit: cover;
  box-shadow: 0 7px 18px #0005;
}
.brand small { color: var(--blue); font: inherit; }

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #8daaff;
  outline-offset: 3px;
}
.button-primary { color: white; background: var(--blue); box-shadow: 0 9px 22px #386bff30; }
.button-primary:hover { background: var(--blue-dark); box-shadow: 0 11px 25px #386bff40; }
.button-outline { color: var(--navy); background: white; border-color: var(--line); }
.button-outline:hover { border-color: #b9c9f6; background: #f9faff; }
.button-quiet { color: var(--blue); background: #edf2ff; }
.button-small { min-height: 38px; padding: 0 13px; border-radius: 10px; font-size: .88rem; }
.icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  cursor: pointer;
}
.icon-button svg { width: 19px; height: 19px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #42c29b; }
.muted { color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-weight: 700; }
.text-link svg { width: 16px; height: 16px; }

.public-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid #e9edf5d9;
  background: #ffffffeb;
  backdrop-filter: blur(14px);
}
.public-nav {
  width: min(1180px, calc(100% - 48px));
  min-height: 76px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.public-links { display: flex; align-items: center; gap: 30px; color: #65718a; font-size: .92rem; font-weight: 600; }
.public-links a:hover { color: var(--blue); }
.public-actions { display: flex; align-items: center; gap: 10px; }
.public-actions .button { min-height: 42px; }
.hero {
  overflow: hidden;
  position: relative;
  padding: 72px 24px 76px;
  background:
    radial-gradient(ellipse at 78% 37%, #dce7ff 0, #eef3ff 24%, transparent 47%),
    linear-gradient(180deg, #fff 0%, #f7f9ff 100%);
}
.hero::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  right: -220px;
  top: -240px;
  border: 1px solid #dce5fb;
  border-radius: 50%;
}
.hero-inner {
  width: min(1180px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 48px;
  position: relative;
}
.hero-copy { padding: 15px 0; }
.hero-copy .eyebrow { padding: 9px 13px; border-radius: 999px; background: #edf2ff; letter-spacing: .08em; }
.hero h1 {
  max-width: 640px;
  margin: 22px 0 18px;
  color: var(--navy);
  font: 800 clamp(2.75rem, 5.3vw, 4.75rem)/1.04 "Manrope", sans-serif;
  letter-spacing: -.072em;
}
.hero h1 span { color: var(--blue); }
.hero-copy > p { max-width: 570px; margin: 0; color: #68758e; font-size: 1.08rem; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-actions .button { min-height: 52px; padding: 0 22px; }
.apk-download-note { max-width: 560px; margin: 12px 0 0; color: #758097; font-size: .78rem; line-height: 1.6; }
.hero-proof { display: flex; align-items: center; gap: 12px; margin-top: 28px; color: #758097; font-size: .85rem; }
.avatar-stack { display: flex; padding-left: 4px; }
.avatar-stack span {
  width: 27px; height: 27px; display: grid; place-items: center; margin-left: -5px;
  border: 2px solid white; border-radius: 50%; background: #dce7ff; color: #3558b8; font-size: .62rem; font-weight: 800;
}
.avatar-stack span:nth-child(2) { background: #fbe3d4; color: #a96237; }
.avatar-stack span:nth-child(3) { background: #d8f2e8; color: #277b5c; }
.hero-visual { min-height: 450px; position: relative; display: grid; place-items: center; }
.hero-orbit {
  position: absolute; width: min(420px, 88%); aspect-ratio: 1;
  border: 1px solid #d8e3fb; border-radius: 50%;
}
.hero-orbit::before, .hero-orbit::after { content: ""; position: absolute; inset: 30px; border: 1px dashed #d8e3fb; border-radius: 50%; }
.hero-orbit::after { inset: 65px; border-style: solid; opacity: .6; }
.preview-card {
  width: min(390px, 84%); z-index: 1; overflow: hidden;
  border: 1px solid #e6ebf5; border-radius: 22px; background: #fff;
  box-shadow: 0 35px 80px #23396521;
  transform: rotate(-2deg);
  animation: rise-in .7s ease both;
}
.preview-top { display: flex; align-items: center; justify-content: space-between; padding: 17px 19px; border-bottom: 1px solid #edf0f5; }
.preview-top strong { font: 800 .88rem "Manrope", sans-serif; }
.preview-top small { color: var(--muted); font-size: .7rem; }
.preview-content { padding: 19px; }
.preview-greeting { color: var(--muted); font-size: .72rem; }
.preview-content h3 { margin: 5px 0 17px; color: var(--navy); font: 800 1.2rem "Manrope", sans-serif; }
.preview-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.preview-stat { padding: 12px; border: 1px solid #edf0f5; border-radius: 13px; }
.preview-stat small { color: var(--muted); font-size: .68rem; }
.preview-stat strong { display: block; margin-top: 4px; font: 800 1.2rem "Manrope", sans-serif; }
.preview-stat strong em { color: var(--green); font-size: .68rem; font-style: normal; }
.preview-chart { height: 110px; position: relative; overflow: hidden; margin-top: 13px; padding: 11px 12px; border-radius: 14px; background: #f4f7ff; }
.preview-chart::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: 17px; height: 48px; background: linear-gradient(180deg, #6189ff5e, #6189ff00); clip-path: polygon(0 73%, 16% 55%, 32% 64%, 49% 28%, 66% 47%, 82% 15%, 100% 0, 100% 100%, 0 100%); }
.preview-chart::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 17px; height: 58px; border-bottom: 2px solid #5480fa; clip-path: polygon(0 70%, 16% 53%, 32% 62%, 49% 28%, 66% 46%, 82% 14%, 100% 0, 100% 100%, 0 100%); }
.preview-chart small { color: #77839b; font-size: .67rem; }
.floating-note {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  border: 1px solid #edf0f5; border-radius: 15px; background: white; box-shadow: 0 15px 35px #20345c17;
  animation: float 4s ease-in-out infinite;
}
.floating-note svg { width: 19px; height: 19px; color: var(--blue); }
.floating-note strong { display: block; color: var(--navy); font-size: .77rem; }
.floating-note small { color: var(--muted); font-size: .68rem; }
.note-top { top: 32px; right: 0; }
.note-bottom { bottom: 30px; left: -4px; animation-delay: -2s; }
.trust-strip { padding: 19px 24px; border-block: 1px solid #edf0f5; background: #fff; }
.trust-inner { width: min(1000px, 100%); margin: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px; color: #8390a7; font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.trust-inner span:first-child { color: #a0a9ba; font-weight: 600; letter-spacing: 0; text-transform: none; }
.home-section { padding: 88px 24px; }
.home-section.white { background: white; }
.section-inner { width: min(1120px, 100%); margin: auto; }
.section-title { max-width: 650px; margin: 0 auto 40px; text-align: center; }
.section-title h2 { margin: 12px 0; color: var(--navy); font: 800 clamp(1.95rem, 3.6vw, 2.8rem)/1.15 "Manrope", sans-serif; letter-spacing: -.06em; }
.section-title p { margin: 0; color: var(--muted); line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 10px 35px #23396508; transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.feature-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 14px; color: var(--blue); background: #edf2ff; }
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { margin: 0 0 8px; color: var(--navy); font: 800 1.02rem "Manrope", sans-serif; }
.feature-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.course-teaser { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: center; }
.course-teaser h2 { margin: 13px 0; color: var(--navy); font: 800 clamp(2rem, 3.4vw, 2.8rem)/1.14 "Manrope", sans-serif; letter-spacing: -.06em; }
.course-teaser p { color: var(--muted); line-height: 1.75; }
.teaser-list { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.teaser-course { display: flex; align-items: center; gap: 13px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.teaser-course > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font-size: 1.15rem; background: #edf2ff; }
.teaser-course strong { display: block; color: var(--navy); font-size: .84rem; }
.teaser-course small { color: var(--muted); font-size: .72rem; }
.home-cta { padding: 52px 24px; background: var(--navy); }
.home-cta-inner { width: min(1120px, 100%); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.home-cta h2 { margin: 0 0 7px; color: #fff; font: 800 clamp(1.7rem, 3vw, 2.35rem) "Manrope", sans-serif; letter-spacing: -.05em; }
.home-cta p { margin: 0; color: #b6c4e1; }
.public-footer { padding: 35px 24px; background: #0c1832; color: #b6c4e1; }
.public-footer-inner { width: min(1120px, 100%); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: .83rem; }
.public-footer .brand { color: white; }
.public-footer nav { display: flex; gap: 22px; }
.public-footer a:hover { color: white; }

.auth-screen { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; background: white; }
.auth-art {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 100vh; padding: 38px clamp(30px, 6vw, 86px); color: white;
  background: linear-gradient(145deg, #101d3a, #183567);
}
.auth-art::before, .auth-art::after { content: ""; position: absolute; border: 1px solid #ffffff18; border-radius: 50%; }
.auth-art::before { width: 560px; height: 560px; top: 20%; right: -210px; }
.auth-art::after { width: 390px; height: 390px; top: 29%; right: -125px; }
.auth-art .brand { color: white; position: relative; z-index: 1; }
.auth-art-copy { position: relative; z-index: 1; max-width: 500px; margin: auto 0; padding: 40px 0; }
.auth-art-copy .eyebrow { color: #99b5ff; }
.auth-art-copy h1 { margin: 16px 0; font: 800 clamp(2.2rem, 4.7vw, 3.75rem)/1.08 "Manrope", sans-serif; letter-spacing: -.065em; }
.auth-art-copy p { color: #c1cce2; line-height: 1.8; }
.auth-art-foot { position: relative; z-index: 1; color: #aab9d6; font-size: .82rem; }
.auth-panel { display: grid; place-items: center; padding: 35px 24px; }
.auth-box { width: min(420px, 100%); }
.auth-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 40px; color: var(--muted); font-size: .85rem; font-weight: 600; }
.auth-back svg { width: 16px; height: 16px; }
.auth-box h2 { margin: 0 0 8px; color: var(--navy); font: 800 2rem "Manrope", sans-serif; letter-spacing: -.06em; }
.auth-box > p { margin: 0 0 26px; color: var(--muted); font-size: .92rem; }
.form-field { display: grid; gap: 7px; margin-bottom: 16px; }
.form-field label { color: #36435d; font-size: .82rem; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; min-height: 47px; padding: 11px 13px; border: 1px solid #dfe5ef; border-radius: 11px;
  outline: 0; background: white; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #7d9cff; box-shadow: 0 0 0 4px #386bff14; }
.form-field textarea { min-height: 115px; resize: vertical; }
.form-help { color: var(--muted); font-size: .77rem; line-height: 1.5; }
.auth-submit { width: 100%; margin-top: 4px; }
.auth-switch { margin-top: 18px; color: var(--muted); text-align: center; font-size: .86rem; }
.auth-switch button { padding: 0; border: 0; background: none; color: var(--blue); cursor: pointer; font-weight: 700; }
.demo-notice { margin-top: 20px; padding: 12px; border-radius: 10px; background: #f3f6fc; color: #697792; font-size: .76rem; line-height: 1.55; }

.app-layout { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 23px 16px 18px; color: #cad5ea; background: var(--navy);
}
.sidebar .brand { padding: 0 8px 26px; color: white; }
.sidebar .brand-symbol { background: #4777ff; box-shadow: none; }
.sidebar .brand-image { width: 40px; height: 40px; }
.nav-label { padding: 15px 11px 9px; color: #8190ac; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.side-nav { display: grid; gap: 4px; }
.side-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  border: 0; color: #b7c3da; background: transparent; cursor: pointer; text-align: left;
  font-family: inherit; font-size: .86rem; font-weight: 600; transition: background .15s, color .15s;
}
.side-link svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.side-link:hover { color: white; background: #ffffff10; }
.side-link.active { color: white; background: #386bff; box-shadow: 0 7px 17px #0002; }
.side-link.active svg { opacity: 1; }
.sidebar-bottom { margin-top: auto; }
.study-tip { margin: 16px 4px; padding: 15px; border: 1px solid #ffffff1a; border-radius: 14px; background: #ffffff0b; }
.study-tip svg { width: 20px; height: 20px; color: #ffd16d; }
.study-tip strong { display: block; margin: 10px 0 4px; color: white; font-size: .8rem; }
.study-tip p { margin: 0; color: #9eacc5; font-size: .72rem; line-height: 1.55; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 13px 7px 3px; border-top: 1px solid #ffffff1a; }
.user-avatar { width: 35px; height: 35px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #e4ebff; color: #3159cb; font-size: .76rem; font-weight: 800; }
.sidebar-user strong { display: block; color: white; font-size: .78rem; }
.sidebar-user small { color: #9eacc5; font-size: .68rem; }
.sidebar-user button { margin-left: auto; padding: 6px; border: 0; color: #aab8d0; background: none; cursor: pointer; }
.sidebar-user button svg { width: 17px; height: 17px; }
.app-main { min-width: 0; }
.app-topbar {
  position: sticky; top: 0; z-index: 10; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 clamp(20px, 4vw, 44px); border-bottom: 1px solid var(--line); background: #f9faffee; backdrop-filter: blur(14px);
}
.breadcrumb { color: var(--muted); font-size: .82rem; }
.breadcrumb strong { color: var(--navy); font-weight: 700; }
.topbar-actions { display: flex; align-items: center; gap: 11px; }
.search-box { display: flex; align-items: center; gap: 8px; min-width: 190px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.search-box svg { width: 17px; height: 17px; color: #8a95aa; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .79rem; }
.topbar-avatar { width: 37px; height: 37px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #dce7ff; color: #3159cb; cursor: pointer; font-size: .75rem; font-weight: 800; }
.view-content { width: min(1380px, 100%); margin: auto; padding: 33px clamp(20px, 4vw, 44px) 60px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.page-heading h1 { margin: 5px 0 5px; color: var(--navy); font: 800 clamp(1.65rem, 3vw, 2.2rem)/1.18 "Manrope", sans-serif; letter-spacing: -.06em; }
.page-heading p { margin: 0; color: var(--muted); font-size: .9rem; }
.heading-actions { display: flex; gap: 9px; flex: none; }
.welcome-banner {
  overflow: hidden; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 22px;
  min-height: 200px; margin-bottom: 23px; padding: 27px 32px; border-radius: 20px; color: white;
  background: linear-gradient(110deg, #19356d, #2556b6 72%, #3b6ff0);
}
.welcome-banner::after { content: ""; position: absolute; width: 280px; height: 280px; right: 5%; top: -115px; border: 1px solid #ffffff25; border-radius: 50%; box-shadow: 0 0 0 35px #ffffff08, 0 0 0 70px #ffffff05; }
.welcome-text { position: relative; z-index: 1; max-width: 560px; }
.welcome-text .eyebrow { color: #bcd0ff; }
.welcome-text h2 { margin: 9px 0; font: 800 clamp(1.5rem, 2.7vw, 2.1rem)/1.15 "Manrope", sans-serif; letter-spacing: -.055em; }
.welcome-text p { margin: 0; color: #d2defa; font-size: .88rem; }
.welcome-banner .button { position: relative; z-index: 1; flex: none; color: var(--navy); background: white; box-shadow: none; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .85fr); gap: 20px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; margin-bottom: 20px; }
.stat-card, .panel, .course-card, .material-card, .test-card, .setting-card, .result-card {
  border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 7px 24px #263d6b06;
}
.stat-card { min-width: 0; padding: 17px; }
.stat-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .75rem; }
.stat-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; color: var(--blue); background: #edf2ff; }
.stat-icon svg { width: 17px; height: 17px; }
.stat-card strong { display: block; margin: 12px 0 4px; color: var(--navy); font: 800 1.55rem "Manrope", sans-serif; letter-spacing: -.05em; }
.stat-card small { color: var(--green); font-size: .7rem; }
.panel { padding: 20px; }
.panel + .panel { margin-top: 18px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-header h2, .panel-header h3 { margin: 0; color: var(--navy); font: 800 1rem "Manrope", sans-serif; letter-spacing: -.035em; }
.panel-header small { color: var(--muted); font-size: .73rem; }
.progress-list { display: grid; gap: 16px; }
.progress-row { display: grid; grid-template-columns: minmax(90px, .75fr) 1.25fr auto; align-items: center; gap: 12px; }
.progress-name { display: flex; align-items: center; gap: 9px; min-width: 0; color: #36435d; font-size: .8rem; font-weight: 700; }
.subject-mark { width: 29px; height: 29px; flex: none; display: grid; place-items: center; border-radius: 9px; font-size: .88rem; background: #edf2ff; }
.progress-track { height: 7px; overflow: hidden; border-radius: 20px; background: #edf0f6; }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4778ff, #75a2ff); }
.progress-percent { color: #78849a; font-size: .74rem; }
.activity-list { display: grid; gap: 15px; }
.activity-item { display: flex; align-items: center; gap: 11px; }
.activity-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; background: #edf2ff; color: var(--blue); }
.activity-icon svg { width: 17px; height: 17px; }
.activity-item strong { display: block; color: #35415b; font-size: .78rem; }
.activity-item small { color: var(--muted); font-size: .69rem; }
.streak-card { padding: 19px; border: 1px solid #f6e3c6; border-radius: 16px; background: #fffaf2; }
.streak-top { display: flex; align-items: center; justify-content: space-between; }
.streak-top strong { color: var(--navy); font: 800 .95rem "Manrope", sans-serif; }
.streak-number { margin: 14px 0 4px; color: #dc8b2b; font: 800 2rem "Manrope", sans-serif; }
.streak-card p { margin: 0; color: #8e806d; font-size: .76rem; line-height: 1.55; }
.week-dots { display: flex; justify-content: space-between; margin-top: 16px; }
.week-day { display: grid; justify-items: center; gap: 6px; color: #a09380; font-size: .61rem; }
.week-day span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #f0e7d8; color: #9c8c76; font-size: .65rem; }
.week-day.done span { color: white; background: #f2ad54; }
.section-gap { margin-top: 20px; }
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 20px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { min-height: 35px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; color: #69758b; background: white; cursor: pointer; font-size: .77rem; font-weight: 700; }
.filter-chip.active, .filter-chip:hover { border-color: #c8d5fb; color: var(--blue); background: #edf2ff; }
.course-grid, .material-grid, .test-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.course-card { overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.course-card:hover, .material-card:hover, .test-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.course-cover { min-height: 117px; position: relative; display: flex; align-items: flex-start; justify-content: space-between; padding: 17px; background: linear-gradient(135deg,#e5edff,#f4f7ff); }
.course-cover.math { background: linear-gradient(135deg,#e9eaff,#f8f7ff); }
.course-cover.science { background: linear-gradient(135deg,#def5ed,#effbf6); }
.course-cover.english { background: linear-gradient(135deg,#fff0dd,#fffaf2); }
.course-cover.history { background: linear-gradient(135deg,#fce7eb,#fff3f3); }
.course-cover.computer { background: linear-gradient(135deg,#e0f0ff,#f1f8ff); }
.course-emoji { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; background: #ffffffb5; font-size: 1.35rem; }
.course-level { padding: 5px 8px; border-radius: 999px; color: #576783; background: #ffffffb5; font-size: .65rem; font-weight: 800; }
.course-body { padding: 16px; }
.course-body h3 { margin: 0 0 5px; color: var(--navy); font: 800 1rem "Manrope", sans-serif; }
.course-body p { min-height: 38px; margin: 0 0 13px; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.course-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; color: #7f8ba1; font-size: .7rem; }
.course-meta strong { color: var(--blue); }
.material-card, .test-card { padding: 18px; transition: transform .2s ease, box-shadow .2s ease; }
.resource-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 13px; color: var(--blue); background: #edf2ff; }
.resource-icon.green { color: #238f68; background: #e6f7ef; }
.resource-icon.orange { color: #c57b28; background: #fff2dd; }
.resource-icon.pink { color: #bf5962; background: #ffedef; }
.resource-icon svg { width: 21px; height: 21px; }
.material-card h3, .test-card h3 { margin: 0 0 6px; color: var(--navy); font: 800 .98rem "Manrope", sans-serif; }
.material-card p, .test-card p { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.6; }
.resource-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 13px; border-top: 1px solid #eef1f6; color: #8792a6; font-size: .68rem; }
.tag { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; color: #5170c6; background: #edf2ff; font-size: .65rem; font-weight: 800; }
.test-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.test-card .resource-icon { margin-bottom: 13px; }
.test-card h3 { margin-top: 3px; }
.test-card .button { width: 100%; margin-top: 16px; }
.difficulty { color: #c47a29; font-size: .68rem; font-weight: 800; }
.empty-state { grid-column: 1/-1; padding: 40px 20px; border: 1px dashed #d9e0ed; border-radius: 16px; color: var(--muted); text-align: center; }
.progress-overview { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 18px; }
.overview-card { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.overview-card span { color: var(--muted); font-size: .75rem; }
.overview-card strong { display: block; margin-top: 8px; color: var(--navy); font: 800 1.55rem "Manrope", sans-serif; }
.overview-card small { color: var(--green); font-size: .7rem; }
.chart-area { height: 235px; display: grid; grid-template-columns: 35px 1fr; gap: 10px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; padding: 0 0 20px; color: #9aa4b7; font-size: .65rem; }
.chart-plot { position: relative; display: flex; align-items: flex-end; justify-content: space-around; gap: 12px; padding: 12px 12px 23px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent 48px, #eff2f7 49px, transparent 50px); }
.chart-column { width: min(46px, 13%); height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.chart-bar { width: 100%; min-height: 9%; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg,#6e95ff,#386bff); animation: bar-in .6s ease both; transform-origin: bottom; }
.chart-label { position: absolute; bottom: -20px; color: #8d98ac; font-size: .63rem; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th { padding: 11px 9px; color: #8a95a9; border-bottom: 1px solid var(--line); font-size: .67rem; font-weight: 700; }
.data-table td { padding: 13px 9px; color: #45516a; border-bottom: 1px solid #eff2f6; font-size: .76rem; }
.data-table tr:last-child td { border-bottom: 0; }
.score-pill { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #21815f; background: #e8f7f0; font-size: .68rem; font-weight: 800; }
.score-pill.needs-work { color: #ae762b; background: #fff4e1; }
.quiz-wrap { width: min(760px, 100%); margin: auto; }
.quiz-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 11px; color: var(--muted); font-size: .78rem; }
.quiz-question { margin: 22px 0; padding: 26px; border: 1px solid var(--line); border-radius: 17px; background: white; }
.quiz-question h2 { margin: 0 0 20px; color: var(--navy); font: 800 1.35rem/1.4 "Manrope", sans-serif; letter-spacing: -.04em; }
.answer-list { display: grid; gap: 10px; }
.answer-option { display: flex; align-items: center; gap: 12px; min-height: 51px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: #4d5a73; background: white; cursor: pointer; text-align: left; transition: .15s ease; }
.answer-option:hover { border-color: #b6c8ff; background: #f8faff; }
.answer-option.selected { border-color: var(--blue); color: #2d55cd; background: #eff3ff; box-shadow: 0 0 0 3px #386bff10; }
.answer-letter { width: 26px; height: 26px; display: grid; place-items: center; flex: none; border-radius: 8px; color: #70809d; background: #f1f3f8; font-size: .72rem; font-weight: 800; }
.quiz-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.result-card { padding: 28px; text-align: center; }
.result-score { width: 128px; height: 128px; display: grid; place-items: center; margin: 10px auto 20px; border: 9px solid #e9efff; border-top-color: var(--blue); border-right-color: var(--blue); border-radius: 50%; color: var(--navy); font: 800 1.65rem "Manrope", sans-serif; transform: rotate(30deg); }
.result-score span { transform: rotate(-30deg); }
.result-card h2 { margin: 0 0 7px; color: var(--navy); font: 800 1.45rem "Manrope", sans-serif; }
.result-card p { color: var(--muted); }
.result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.profile-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(270px,.9fr); gap: 18px; align-items: start; }
.profile-card { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.profile-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.profile-avatar { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 19px; color: #3159cb; background: #e6edff; font: 800 1.2rem "Manrope", sans-serif; }
.profile-heading h2 { margin: 0 0 3px; color: var(--navy); font: 800 1.1rem "Manrope", sans-serif; }
.profile-heading p { margin: 0; color: var(--muted); font-size: .78rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.setting-list { display: grid; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #eff2f6; }
.setting-row:last-child { border-bottom: 0; }
.setting-row strong { display: block; color: #36435d; font-size: .8rem; }
.setting-row small { color: var(--muted); font-size: .7rem; }
.switch { width: 40px; height: 23px; position: relative; border: 0; border-radius: 999px; background: #d9dfeb; cursor: pointer; transition: .18s; }
.switch::after { content: ""; width: 17px; height: 17px; position: absolute; left: 3px; top: 3px; border-radius: 50%; background: white; box-shadow: 0 1px 4px #1d2c4d33; transition: transform .18s; }
.switch[aria-checked="true"] { background: var(--blue); }
.switch[aria-checked="true"]::after { transform: translateX(17px); }
.support-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; }
.support-info { display: grid; gap: 12px; }
.support-item { display: flex; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.support-item .feature-icon { flex: none; margin: 0; }
.support-item strong { display: block; margin: 3px 0 4px; color: var(--navy); font-size: .83rem; }
.support-item p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.about-banner { padding: 30px; border-radius: 18px; color: white; background: linear-gradient(115deg,#14284f,#2d5bc0); }
.about-banner h2 { margin: 8px 0 10px; font: 800 clamp(1.5rem,3vw,2rem) "Manrope",sans-serif; letter-spacing: -.05em; }
.about-banner p { max-width: 730px; margin: 0; color: #d2defa; line-height: 1.75; }
.about-values { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 18px; }
.value-card { padding: 19px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.value-card strong { display: block; margin: 10px 0 5px; color: var(--navy); font: 800 .9rem "Manrope",sans-serif; }
.value-card p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.toast-region { position: fixed; z-index: 60; right: 22px; bottom: 22px; display: grid; gap: 9px; }
.toast { max-width: min(380px, calc(100vw - 32px)); padding: 13px 17px; border-radius: 12px; color: white; background: var(--navy); box-shadow: 0 12px 32px #101d3a35; font-size: .85rem; animation: toast-in .22s ease both; }
.mobile-menu-button { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }

@keyframes rise-in { from { opacity: 0; transform: translateY(12px) rotate(-2deg); } to { opacity: 1; transform: translateY(0) rotate(-2deg); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes bar-in { from { transform: scaleY(.1); } to { transform: scaleY(1); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 1050px) {
  .public-links { gap: 18px; }
  .app-layout { grid-template-columns: 220px minmax(0,1fr); }
  .course-grid, .material-grid, .test-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 800px) {
  .hero-inner { grid-template-columns: 1fr .85fr; gap: 16px; }
  .hero-visual { min-height: 390px; }
  .note-top { right: -4px; }
  .course-teaser { grid-template-columns: 1fr; gap: 24px; }
  .auth-screen { grid-template-columns: .8fr 1.2fr; }
  .auth-art { padding-inline: 30px; }
  .app-layout { display: block; }
  .sidebar { position: sticky; top: 0; z-index: 30; width: 100%; height: auto; padding: 10px 16px; }
  .sidebar .brand { padding: 0 4px 9px; }
  .sidebar .brand-symbol { width: 32px; height: 32px; }
  .sidebar .brand-image { width: 36px; height: 36px; }
  .sidebar .brand-symbol svg { width: 21px; height: 21px; }
  .nav-label, .sidebar-bottom { display: none; }
  .side-nav { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-link { flex: none; padding: 8px 10px; font-size: .77rem; }
  .side-link svg { width: 16px; height: 16px; }
  .app-topbar { position: static; min-height: 60px; }
  .view-content { padding-top: 25px; }
}
@media (max-width: 600px) {
  .public-nav { width: calc(100% - 32px); min-height: 66px; }
  .public-links { display: none; }
  .public-actions { gap: 7px; }
  .public-actions .button { min-height: 39px; padding-inline: 12px; font-size: .78rem; }
  .public-actions .button-outline { display: none; }
  .hero { padding: 49px 19px 48px; }
  .hero-inner { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { padding: 0; }
  .hero h1 { margin-top: 16px; font-size: clamp(2.65rem, 12vw, 3.8rem); }
  .hero-copy > p { font-size: .98rem; }
  .hero-visual { min-height: 375px; margin-top: 12px; }
  .preview-card { width: min(340px, 82%); }
  .hero-orbit { width: min(360px, 94%); }
  .note-top { top: 17px; right: 0; }
  .note-bottom { bottom: 13px; left: 0; }
  .trust-strip { padding-inline: 18px; }
  .trust-inner { gap: 14px 23px; font-size: .68rem; }
  .trust-inner span:first-child { width: 100%; text-align: center; }
  .home-section { padding: 64px 19px; }
  .section-title { margin-bottom: 28px; }
  .feature-grid, .about-values { grid-template-columns: 1fr; }
  .feature-card { padding: 21px; }
  .teaser-list { grid-template-columns: 1fr 1fr; gap: 9px; }
  .teaser-course { gap: 9px; padding: 11px; }
  .teaser-course > span { width: 34px; height: 34px; flex: none; }
  .teaser-course strong { font-size: .75rem; }
  .teaser-course small { font-size: .65rem; }
  .home-cta { padding: 38px 20px; }
  .home-cta-inner { align-items: flex-start; flex-direction: column; }
  .home-cta .button { width: 100%; }
  .public-footer-inner { align-items: flex-start; flex-direction: column; }
  .public-footer nav { flex-wrap: wrap; gap: 12px 18px; }
  .auth-screen { display: block; }
  .auth-art { display: none; }
  .auth-panel { min-height: 100vh; padding: 25px 22px; }
  .auth-back { margin-bottom: 34px; }
  .sidebar { padding: 9px 11px; }
  .sidebar .brand { padding-left: 3px; }
  .sidebar .brand:not(.brand-symbol) { font-size: 1rem; }
  .side-link { flex-direction: column; gap: 4px; min-width: 63px; padding: 7px 6px; font-size: .62rem; }
  .side-link svg { width: 17px; height: 17px; }
  .app-topbar { min-height: 53px; padding-inline: 16px; }
  .search-box { min-width: 0; width: min(50vw, 190px); padding: 8px 9px; }
  .search-box input { font-size: .73rem; }
  .topbar-actions { gap: 8px; }
  .app-topbar .icon-button { width: 37px; height: 37px; }
  .topbar-avatar { width: 34px; height: 34px; }
  .view-content { padding: 22px 15px 45px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 19px; }
  .page-heading .heading-actions { width: 100%; }
  .page-heading .heading-actions .button { flex: 1; }
  .welcome-banner { align-items: flex-start; flex-direction: column; min-height: 0; padding: 23px; }
  .welcome-banner::after { right: -80px; }
  .welcome-banner .button { width: 100%; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .stat-grid { gap: 9px; }
  .stat-card { padding: 13px; }
  .stat-card strong { font-size: 1.3rem; }
  .stat-card-top { font-size: .68rem; }
  .stat-icon { width: 29px; height: 29px; }
  .progress-row { grid-template-columns: minmax(85px,.8fr) 1fr auto; gap: 8px; }
  .progress-name { gap: 6px; font-size: .7rem; }
  .subject-mark { width: 25px; height: 25px; font-size: .77rem; }
  .progress-percent { font-size: .67rem; }
  .panel { padding: 16px; }
  .course-grid, .material-grid, .test-grid { grid-template-columns: 1fr; }
  .filter-row { align-items: flex-start; flex-direction: column; }
  .progress-overview { grid-template-columns: 1fr 1fr; gap: 9px; }
  .overview-card { padding: 14px; }
  .overview-card strong { font-size: 1.3rem; }
  .profile-layout, .support-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .quiz-question { padding: 19px; }
  .quiz-question h2 { font-size: 1.12rem; }
  .quiz-controls .button { min-height: 42px; padding-inline: 12px; font-size: .8rem; }
  .data-table { min-width: 540px; }
  .about-banner { padding: 23px; }
}

/* Futuristic midnight interface */
:root {
  --ink: #eaf1ff;
  --muted: #9aaccb;
  --line: #263858;
  --canvas: #071329;
  --white: #0d1b34;
  --shadow: 0 18px 55px rgba(0, 8, 25, .38);
}
body {
  color: #eaf1ff;
  background:
    radial-gradient(ellipse at 80% -10%, #173a7650, transparent 42%),
    radial-gradient(ellipse at 0% 40%, #0d265043, transparent 35%),
    #071329;
}
.public-header, .app-topbar {
  border-color: #d6e2ff17;
  background: #071329e8;
}
.public-nav .brand, .public-footer .brand { color: #f5f8ff; }
.public-links { color: #a9bad7; }
.public-links a:hover { color: #68a3ff; }
.button-outline, .icon-button {
  color: #e6eeff;
  border-color: #d6e2ff24;
  background: #ffffff08;
}
.button-outline:hover { border-color: #6d9dff8c; background: #386bff1c; }
.button-primary { color: #fff; background: linear-gradient(115deg, #386bff, #2861e8); box-shadow: 0 8px 25px #386bff42; }
.button-primary:hover { background: linear-gradient(115deg, #5485ff, #3473ff); }
.button-quiet { color: #95c6ff; background: #386bff1c; }
.hero {
  background:
    radial-gradient(ellipse at 77% 37%, #2253a335 0, transparent 40%),
    linear-gradient(180deg, #0a1831 0%, #071329 100%);
}
.hero::before { border-color: #5f8ff32a; }
.hero-copy .eyebrow { color: #9bbcff; background: #386bff19; }
.hero h1, .section-title h2, .course-teaser h2, .home-cta h2 { color: #f1f5ff; }
.hero h1 span { color: #70a5ff; text-shadow: 0 0 32px #386bff55; }
.hero-copy > p { color: #a7b7d3; }
.apk-download-note { color: #9aaccb; }
.hero-proof { color: #9aaccb; }
.avatar-stack span { border-color: #0a1831; }
.hero-orbit { border-color: #6385c433; }
.hero-orbit::before, .hero-orbit::after { border-color: #6385c433; }
.preview-card, .floating-note {
  border-color: #56719c52;
  background: linear-gradient(145deg, #112440ee, #0d1a31f2);
  box-shadow: 0 35px 90px #0008, 0 0 38px #386bff14;
}
.preview-top { border-color: #d6e2ff16; }
.preview-top strong, .preview-content h3, .preview-stat strong, .floating-note strong { color: #edf4ff; }
.preview-top small, .preview-greeting, .preview-stat small, .floating-note small { color: #9aaccb; }
.preview-stat { border-color: #d6e2ff17; background: #ffffff06; }
.preview-chart { background: #386bff13; }
.preview-chart small { color: #afbfdb; }
.floating-note { backdrop-filter: blur(12px); }
.trust-strip, .home-section.white, .home-section { border-color: #d6e2ff14; background: #08162d; }
.trust-strip { border-block: 1px solid #d6e2ff14; }
.trust-inner, .trust-inner span:first-child { color: #9caecc; }
.home-section.white { background: linear-gradient(180deg, #091831, #0b1932); }
.section-title p, .course-teaser p { color: #9aaccb; }
.feature-card, .teaser-course, .value-card {
  border-color: #304362;
  background: linear-gradient(145deg, #10203a, #0c1a32);
  box-shadow: 0 14px 34px #0003, inset 0 1px #ffffff08;
}
.feature-card:hover, .course-card:hover, .material-card:hover, .test-card:hover {
  border-color: #5486f477;
  box-shadow: 0 18px 44px #0005, 0 0 26px #386bff12;
}
.feature-card h3, .teaser-course strong, .value-card strong, .support-item strong { color: #ecf3ff; }
.feature-card p, .teaser-course small, .value-card p, .support-item p { color: #9aaccb; }
.feature-icon { color: #91b6ff; background: #386bff21; }
.home-cta { background: linear-gradient(110deg, #10244a, #15356d); }
.home-cta p { color: #bbcbe7; }
.public-footer { border-top: 1px solid #d6e2ff14; background: #050e20; }
.public-footer-inner { color: #9aaccb; }
.auth-screen { background: #091831; }
.auth-art { background: radial-gradient(circle at 90% 43%, #3476ef60, transparent 42%), linear-gradient(145deg, #08152c, #102b55); }
.auth-panel { background: #091831; }
.auth-back, .auth-box > p, .auth-switch { color: #9aaccb; }
.auth-box h2 { color: #eff4ff; }
.form-field label { color: #d2def2; }
.form-field input, .form-field select, .form-field textarea {
  color: #edf4ff;
  border-color: #344867;
  background: #0c1c36;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: #768bad; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #6292ff; box-shadow: 0 0 0 4px #386bff25; }
.form-help, .auth-art-foot { color: #9aaccb; }
.demo-notice { color: #a9bad7; background: #ffffff0a; }
.app-layout { background: #071329; }
.sidebar { border-right: 1px solid #d6e2ff12; background: #08162d; }
.side-link { color: #aebdda; }
.side-link.active { color: white; background: linear-gradient(110deg, #386bff, #2c5bce); }
.view-content { color: #eaf1ff; }
.breadcrumb, .page-heading p { color: #9aaccb; }
.breadcrumb strong, .page-heading h1 { color: #edf4ff; }
.welcome-banner { border: 1px solid #72a0ff3b; background: linear-gradient(110deg, #102c5b, #1b4aa2 70%, #2461cc); box-shadow: 0 20px 45px #0003; }
.welcome-text p { color: #d0def7; }
.stat-card, .panel, .course-card, .material-card, .test-card, .setting-card, .result-card, .profile-card, .overview-card, .support-item {
  border-color: #263b5c;
  background: linear-gradient(145deg, #0f203a, #0b1931);
  box-shadow: 0 10px 32px #0003, inset 0 1px #ffffff07;
}
.stat-card-top, .panel-header small, .progress-percent, .activity-item small, .course-body p, .course-meta,
.material-card p, .test-card p, .resource-meta, .overview-card span, .chart-y, .chart-label,
.data-table th, .data-table td, .profile-heading p, .setting-row small { color: #9aaccb; }
.stat-card strong, .panel-header h2, .panel-header h3, .progress-name, .activity-item strong,
.course-body h3, .material-card h3, .test-card h3, .overview-card strong, .setting-row strong,
.profile-heading h2, .quiz-question h2, .result-card h2 { color: #edf4ff; }
.stat-icon, .activity-icon, .subject-mark, .resource-icon { color: #9bbaff; background: #386bff20; }
.progress-track { background: #1c2e4b; }
.progress-fill, .chart-bar { background: linear-gradient(180deg, #65aaff, #386bff); box-shadow: 0 0 15px #386bff42; }
.course-cover { background: linear-gradient(135deg, #172d53, #11213e); }
.course-cover.math { background: linear-gradient(135deg,#222950,#151e3e); }
.course-cover.science { background: linear-gradient(135deg,#133d42,#102b36); }
.course-cover.english { background: linear-gradient(135deg,#48351f,#28243a); }
.course-cover.history { background: linear-gradient(135deg,#482b3d,#29213b); }
.course-cover.computer { background: linear-gradient(135deg,#173752,#152641); }
.course-emoji, .course-level { color: #dce8ff; background: #07132970; }
.resource-icon.green { color: #71dbb4; background: #1b5a4b55; }
.resource-icon.orange { color: #ffc36e; background: #6a492455; }
.resource-icon.pink { color: #ff9eab; background: #63333f55; }
.tag { color: #adcbff; background: #386bff24; }
.filter-chip { color: #a8b8d5; border-color: #304362; background: #0c1c36; }
.filter-chip.active, .filter-chip:hover { color: #c4d7ff; border-color: #5486f477; background: #386bff24; }
.streak-card { border-color: #6b5537; background: linear-gradient(145deg,#31291c,#1e2028); }
.streak-top strong { color: #f4ead8; }
.streak-card p { color: #c1af92; }
.week-day { color: #b5a58c; }
.week-day span { color: #c4b297; background: #4b3c29; }
.week-day.done span { color: #fff; background: #cf893c; }
.chart-plot { border-color: #304362; background: repeating-linear-gradient(to bottom, transparent 0, transparent 48px, #d6e2ff14 49px, transparent 50px); }
.data-table th, .data-table td { border-color: #263b5c; }
.score-pill { color: #78e1b9; background: #1b5a4b55; }
.score-pill.needs-work { color: #ffd080; background: #6a492455; }
.quiz-question { border-color: #263b5c; background: #0f203a; }
.answer-option { color: #c0cce0; border-color: #304362; background: #0b1931; }
.answer-option:hover, .answer-option.selected { color: #dbe7ff; border-color: #5f8ff3; background: #386bff1f; }
.answer-letter { color: #b7c6df; background: #172945; }
.result-card p { color: #9aaccb; }
.result-score { color: #eaf1ff; border-color: #263b5c; border-top-color: #5792ff; border-right-color: #5792ff; }
.profile-avatar, .user-avatar, .topbar-avatar { color: #c8d9ff; background: #294b86; }
.setting-row { border-color: #263b5c; }
.about-banner { border: 1px solid #72a0ff3b; background: radial-gradient(circle at 90% 20%, #4d88ff55, transparent 43%), linear-gradient(115deg,#10244a,#193e82); }
.about-banner p { color: #cfdef9; }
.install-dialog {
  width: min(530px, calc(100% - 30px));
  max-height: min(90vh, 760px);
  padding: 25px;
  border: 1px solid #5473a1;
  border-radius: 22px;
  color: #eaf1ff;
  background: radial-gradient(circle at 100% 0%, #264d8a66, transparent 38%), #0b1931;
  box-shadow: 0 30px 100px #0009, 0 0 45px #386bff22;
}
.install-dialog::backdrop { background: #020817b8; backdrop-filter: blur(7px); }
.install-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 23px; }
.install-dialog h2 { margin: 9px 0; color: #f0f5ff; font: 800 1.7rem "Manrope", sans-serif; letter-spacing: -.05em; }
.install-intro, .install-note { color: #a9bad7; font-size: .88rem; line-height: 1.7; }
.install-steps { display: grid; gap: 9px; margin: 18px 0; }
.install-steps div { display: grid; gap: 4px; padding: 13px; border: 1px solid #ffffff16; border-radius: 12px; background: #ffffff08; }
.install-steps strong { color: #eaf1ff; font-size: .82rem; }
.install-steps span { color: #a9bad7; font-size: .76rem; line-height: 1.55; }
.install-note { padding: 11px 12px; border-left: 2px solid #5792ff; background: #386bff12; font-size: .77rem; }
.install-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
@media (max-width: 600px) {
  .app-topbar { background: #071329; }
  .public-nav .brand { color: #f5f8ff; }
  .install-dialog { padding: 20px; }
  .install-dialog-actions { flex-direction: column-reverse; }
  .install-dialog-actions .button { width: 100%; }
}

.actual-study-tip { border-color: #ffffff14; background: linear-gradient(145deg,#102345,#0c1b34); }
.actual-study-tip strong { color: #eaf1ff; }
.actual-study-tip p { color: #9aaccb; }
.actual-welcome .button { display: inline-flex; align-items: center; gap: 8px; }
.actual-welcome .button svg, .text-button svg { width: 15px; height: 15px; }
.actual-stat-grid { margin-top: 0; }
.actual-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.subject-progress-item { display: grid; grid-template-columns: minmax(115px, .8fr) 1.2fr auto; align-items: center; gap: 12px; }
.readiness-list { display: grid; gap: 18px; }
.readiness-row > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.readiness-row strong { color: #edf4ff; font-size: .81rem; }
.readiness-row span { color: #9aaccb; font-size: .72rem; }
.text-button { display: inline-flex; align-items: center; gap: 6px; border: 0; color: #9bbaff; background: transparent; cursor: pointer; font-size: .76rem; font-weight: 700; }
.next-chapter-card { padding: 15px; border: 1px solid #ffffff12; border-radius: 13px; background: #ffffff06; }
.next-chapter-card h3 { margin: 11px 0 6px; color: #edf4ff; font-size: .95rem; }
.next-chapter-card p, .tool-description, .chapter-detail-copy { color: #9aaccb; font-size: .77rem; line-height: 1.6; }
.next-chapter-card .button { margin-top: 8px; }
.quick-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.quick-tools button { display: flex; align-items: center; gap: 9px; padding: 11px; border: 1px solid #ffffff14; border-radius: 11px; color: #c4d2eb; background: #ffffff05; cursor: pointer; font-size: .73rem; text-align: left; }
.quick-tools button:hover { border-color: #5486f477; background: #386bff16; }
.quick-tools button span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #9bbaff; background: #386bff20; }
.quick-tools svg { width: 16px; height: 16px; }
.local-data-note { margin: 14px 2px 0; color: #8da1c2; font-size: .72rem; line-height: 1.55; }
.roadmap-summary { display: grid; grid-template-columns: minmax(160px,.5fr) 1fr; align-items: center; gap: 22px; margin-bottom: 17px; }
.roadmap-summary > div:first-child { display: grid; gap: 5px; }
.roadmap-summary strong { color: #edf4ff; font: 800 1.5rem "Manrope", sans-serif; }
.roadmap-summary strong small { color: #9aaccb; font: 500 .78rem "Manrope", sans-serif; }
.roadmap-summary > div:last-child { display: grid; gap: 9px; }
.roadmap-summary > div:last-child small { color: #9aaccb; font-size: .72rem; }
.roadmap-filters { display: grid; gap: 10px; margin-bottom: 17px; }
.chapter-list { display: grid; gap: 9px; }
.chapter-row { padding: 12px 14px; border: 1px solid #263b5c; border-radius: 13px; background: linear-gradient(145deg,#0f203a,#0b1931); }
.chapter-open { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) auto 38px 16px; align-items: center; gap: 12px; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.chapter-order { color: #7893c4; font: 800 .73rem "Manrope", sans-serif; }
.chapter-info { display: grid; gap: 4px; min-width: 0; }
.chapter-info strong { overflow: hidden; color: #e7efff; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.chapter-info small, .chapter-progress-text { color: #91a5c7; font-size: .68rem; }
.chapter-weight { padding: 5px 8px; border-radius: 999px; color: #93b8ff; background: #386bff1d; font-size: .63rem; font-weight: 700; white-space: nowrap; }
.chapter-weight.medium { color: #d7bd81; background: #715b281c; }
.chapter-weight.low { color: #9aaac3; background: #ffffff0c; }
.chapter-weight.base { color: #a9a0db; background: #634fb61c; }
.chapter-open > svg, .revision-sheet-row > svg { width: 15px; height: 15px; color: #7893c4; }
.chapter-inline-progress { margin: 10px 28px 0 46px; }
.chapter-inline-progress .progress-track { height: 4px; }
.chapter-detail { margin-bottom: 16px; scroll-margin-top: 20px; }
.chapter-detail .panel-header { align-items: flex-start; }
.chapter-detail .panel-header h2 { margin-top: 8px; }
.checkpoint-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.checkpoint { display: flex; align-items: flex-start; gap: 9px; min-height: 66px; padding: 11px; border: 1px solid #304362; border-radius: 11px; background: #ffffff04; cursor: pointer; }
.checkpoint input { position: absolute; opacity: 0; pointer-events: none; }
.checkpoint-mark { width: 19px; height: 19px; flex: none; display: grid; place-items: center; border: 1px solid #58709a; border-radius: 6px; color: white; font-size: .72rem; }
.checkpoint.completed { border-color: #386bff66; background: #386bff13; }
.checkpoint.completed .checkpoint-mark { border-color: #5486f4; background: #386bff; }
.checkpoint strong, .checkpoint small { display: block; }
.checkpoint strong { color: #e7efff; font-size: .75rem; }
.checkpoint small { margin-top: 4px; color: #91a5c7; font-size: .64rem; line-height: 1.4; }
.vault-tabs, .tool-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vault-exam-filter { margin-bottom: 16px; }
.vault-tab { padding: 10px 14px; border: 1px solid #304362; border-radius: 10px; color: #9aaccb; background: #ffffff05; cursor: pointer; font-size: .75rem; font-weight: 700; }
.vault-tab.active { border-color: #5486f477; color: #d8e5ff; background: #386bff24; }
.flashcard-layout { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 16px; }
.flashcard { min-height: 310px; display: flex; flex-direction: column; align-items: flex-start; }
.flashcard-top { width: 100%; display: flex; justify-content: space-between; color: #9aaccb; font-size: .71rem; }
.flashcard-chapter { margin: 34px 0 9px; color: #91a5c7; font-size: .74rem; }
.flashcard h2 { max-width: 680px; margin: 0; color: #edf4ff; font: 800 clamp(1.2rem,2.5vw,1.75rem)/1.4 "Manrope",sans-serif; white-space: pre-line; }
.flashcard-answer-label { margin-top: 14px; color: #8ca2c6; font-size: .7rem; }
.flashcard-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; padding-top: 28px; }
.vault-progress > strong { display: block; color: #edf4ff; font: 800 2rem "Manrope",sans-serif; }
.vault-progress > p { color: #9aaccb; font-size: .75rem; }
.revision-sheet-list, .mistake-list { display: grid; gap: 8px; }
.revision-sheet-row { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border: 1px solid #263b5c; border-radius: 12px; background: #ffffff04; }
.revision-sheet-row { width: 100%; color: inherit; text-align: left; cursor: pointer; }
.revision-sheet-row.selected { border-color: #5486f477; background: #386bff18; }
.revision-sheet-row .resource-icon { flex: none; width: 35px; height: 35px; margin: 0; }
.revision-sheet-row > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.revision-sheet-row strong { color: #e7efff; font-size: .76rem; }
.revision-sheet-row small { color: #91a5c7; font-size: .67rem; }
.revision-material-layout { display: grid; grid-template-columns: minmax(230px,.72fr) minmax(0,1.6fr); gap: 16px; align-items: start; }
.revision-sheet-detail { min-width: 0; }
.revision-sheet-detail .panel-header h2 { margin: 9px 0 0; color: #edf4ff; font: 800 clamp(1.15rem,2vw,1.55rem)/1.3 "Manrope",sans-serif; }
.revision-note-section { padding: 16px 0; border-top: 1px solid #ffffff10; }
.revision-note-section h3 { margin: 0 0 9px; color: #c8d8f4; font-size: .82rem; }
.revision-note-section p { margin: 0; color: #a9bad7; font-size: .79rem; line-height: 1.8; white-space: pre-line; }
.revision-scheduler { margin-bottom: 16px; }
.schedule-form, .mock-form { display: grid; grid-template-columns: minmax(190px,1fr) minmax(140px,.6fr) auto; align-items: end; gap: 12px; }
.form-select { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #344867; border-radius: 10px; color: #edf4ff; background: #0c1c36; }
.form-field > span { display: block; margin-bottom: 7px; color: #d2def2; font-size: .73rem; font-weight: 700; }
.revision-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.revision-queue-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #263b5c; }
.revision-queue-row:first-of-type { border-top: 0; }
.revision-date { min-width: 74px; color: #9bbaff; font-size: .7rem; font-weight: 700; }
.revision-row-info { display: grid; flex: 1; gap: 4px; min-width: 0; }
.revision-row-info strong { color: #e7efff; font-size: .75rem; }
.revision-row-info small { overflow: hidden; color: #91a5c7; font-size: .67rem; text-overflow: ellipsis; }
.revision-queue-row.is-due { border-radius: 10px; }
.mock-form { grid-template-columns: 1fr .8fr .55fr .7fr; }
.mock-form .form-field { margin: 0; }
.mock-weak-topics { grid-column: span 3; }
.mock-form > .button { align-self: end; }
.tool-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.tool-tab { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px; border: 1px solid #263b5c; border-radius: 12px; color: inherit; background: linear-gradient(145deg,#0f203a,#0b1931); cursor: pointer; text-align: left; }
.tool-tab.active { border-color: #5486f477; background: #386bff13; }
.tool-tab .resource-icon { flex: none; width: 35px; height: 35px; margin: 0; }
.tool-tab > span:nth-child(2) { display: grid; flex: 1; gap: 4px; min-width: 0; }
.tool-tab strong { color: #e7efff; font-size: .75rem; }
.tool-tab small { color: #91a5c7; font-size: .66rem; }
.tool-tab > svg { width: 14px; height: 14px; color: #7893c4; }
.tool-detail { min-height: 190px; }
.timer-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.timer-display { display: grid; justify-items: center; gap: 5px; margin: 20px 0; }
.timer-display strong { color: #edf4ff; font: 800 clamp(3rem,8vw,5rem)/1 "Manrope",sans-serif; letter-spacing: .05em; }
.timer-display span { color: #9aaccb; font-size: .75rem; }
.timer-actions { display: flex; justify-content: center; gap: 9px; }
.pyq-form { display: grid; grid-template-columns: minmax(220px,1fr) 150px auto; align-items: end; gap: 14px; }
.pyq-count { display: grid; align-content: center; gap: 4px; min-height: 70px; padding: 10px; border: 1px solid #263b5c; border-radius: 11px; }
.pyq-count strong { color: #edf4ff; font: 800 1.35rem "Manrope",sans-serif; }
.pyq-count span { color: #91a5c7; font-size: .68rem; }
.mistake-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: end; gap: 12px; margin-bottom: 16px; }
.mistake-form .form-field { margin: 0; }
.mistake-form .form-field:nth-child(2), .mistake-form .form-field:nth-child(3) { grid-column: span 2; }
.strategy-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.strategy-card { padding: 14px; border: 1px solid #263b5c; border-radius: 12px; background: #ffffff04; }
.strategy-card h3 { min-height: 56px; margin: 12px 0 7px; color: #e7efff; font-size: .8rem; line-height: 1.5; }
.strategy-card p, .strategy-card strong { color: #9aaccb; font-size: .7rem; line-height: 1.5; }
.strategy-card .progress-track { margin-top: 10px; }
@media (max-width: 900px) {
  .actual-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .flashcard-layout { grid-template-columns: minmax(0,1fr); }
  .revision-material-layout { grid-template-columns: minmax(0,1fr); }
  .vault-progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .vault-progress .panel-header { width: 100%; margin-bottom: 0; }
  .vault-progress > p { margin-right: auto; }
  .mock-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mock-weak-topics { grid-column: span 2; }
}
@media (max-width: 650px) {
  .actual-dashboard-grid, .revision-columns, .tool-tabs, .strategy-grid { grid-template-columns: 1fr; }
  .roadmap-summary { grid-template-columns: 1fr; gap: 14px; }
  .chapter-open { grid-template-columns: 27px minmax(0,1fr) auto 30px 13px; gap: 8px; }
  .chapter-weight { padding: 4px 6px; font-size: .56rem; }
  .chapter-info strong { font-size: .71rem; }
  .chapter-info small { font-size: .62rem; }
  .chapter-inline-progress { margin-left: 35px; margin-right: 22px; }
  .checkpoint-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .schedule-form, .pyq-form { grid-template-columns: 1fr; }
  .schedule-form .button, .pyq-form .button { width: 100%; }
  .mock-form, .mistake-form { grid-template-columns: 1fr; }
  .mock-weak-topics, .mistake-form .form-field:nth-child(2), .mistake-form .form-field:nth-child(3) { grid-column: auto; }
  .revision-queue-row { align-items: flex-start; flex-wrap: wrap; }
  .revision-date { min-width: 66px; }
}