:root {
  color-scheme: light;
  --ink: #202b2a;
  --muted: #83908e;
  --line: #e9eeec;
  --surface: #fff;
  --canvas: #f6f8f7;
  --teal: #147d70;
  --teal-dark: #10685e;
  --teal-pale: #e7f4f1;
  --navy: #213d3a;
  --shadow: 0 10px 32px rgba(31, 63, 58, .055);
  --radius: 16px;
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(20, 125, 112, .25); outline-offset: 2px; }
.app-shell { min-height: 100vh; }
.sidebar { width: 246px; background: #fff; border-right: 1px solid var(--line); position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; padding: 25px 17px 15px; z-index: 20; }
.brand { height: 39px; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); padding-left: 7px; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: white; background: var(--teal); }
.brand-mark svg { width: 19px; height: 19px; stroke-width: 2.1; }
.brand-copy { font-family: Manrope, sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -.7px; }
.brand-copy span { color: var(--teal); }
.workspace-label { font-size: 9px; letter-spacing: 1.4px; font-weight: 700; color: #a0aaa8; margin: 43px 0 13px 12px; }
.side-nav { display: grid; gap: 5px; }
.nav-link { width: 100%; border: 0; background: transparent; display: flex; align-items: center; gap: 13px; height: 44px; padding: 0 12px; text-align: left; color: #707d7a; border-radius: 10px; cursor: pointer; transition: .18s ease; font-size: 13px; font-weight: 500; }
.nav-link svg { width: 18px; height: 18px; stroke-width: 1.8; }
.nav-link:hover { background: #f6f8f7; color: var(--ink); }
.nav-link.active { color: var(--teal-dark); background: #eaf4f1; font-weight: 700; }
.nav-link.active svg { stroke-width: 2.15; }
.nav-count { margin-left: auto; min-width: 22px; height: 21px; display: grid; place-items: center; background: #fff; border-radius: 7px; font-size: 11px; color: var(--teal); font-weight: 700; }
.private-dot { width: 6px; height: 6px; border-radius: 50%; margin-left: auto; background: #87a99f; }
.sidebar-bottom { margin-top: auto; }
.sidebar-tip { position: relative; padding: 17px 14px 15px; border-radius: 13px; background: #f5f8f7; margin: 0 2px 14px; }
.tip-icon { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: white; color: #d39b45; margin-bottom: 12px; }
.tip-icon svg { width: 15px; height: 15px; }
.sidebar-tip strong { display: block; font: 700 13px/1.45 Manrope, sans-serif; letter-spacing: -.25px; }
.sidebar-tip > span:nth-of-type(2) { display: block; color: var(--muted); font-size: 11px; line-height: 1.55; margin-top: 6px; }
.sidebar-tip button { margin-top: 12px; border: 0; padding: 0; background: transparent; color: var(--teal); font-weight: 700; font-size: 11px; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.sidebar-tip button svg { width: 13px; height: 13px; }
.profile-button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 5px 4px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.profile-meta { flex: 1; display: grid; gap: 3px; }
.profile-meta strong { font-size: 11px; }
.profile-meta small { color: var(--muted); font-size: 10px; }
.profile-button > svg { width: 15px; color: #99a4a1; }
.avatar { flex: 0 0 auto; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; }
.avatar-small { width: 32px; height: 32px; font-size: 10px; }
.avatar-teal { color: #fff; background: #77a79d; }
.avatar-lilac { color: #7355a2; background: #eee8f8; }
.avatar-peach { color: #af6949; background: #f9e6dc; }
.avatar-mint { color: #39856d; background: #e2f3ea; }
.main-area { min-height: 100vh; margin-left: 246px; display: flex; flex-direction: column; }
.topbar { height: 72px; padding: 0 43px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.83); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 15; backdrop-filter: blur(12px); }
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #9aa5a2; }
.breadcrumb svg { width: 13px; height: 13px; }
.breadcrumb strong { color: #34413e; font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 17px; }
.icon-button { width: 35px; height: 35px; border: 1px solid transparent; border-radius: 10px; display: grid; place-items: center; background: transparent; color: #65716e; cursor: pointer; position: relative; }
.icon-button:hover { background: #f5f8f7; border-color: var(--line); }
.icon-button svg { width: 18px; height: 18px; stroke-width: 1.8; }
.notification-dot { width: 6px; height: 6px; background: #e58b67; border: 1px solid white; border-radius: 50%; position: absolute; top: 7px; right: 7px; }
.top-profile { border: 0; padding: 0; display: flex; align-items: center; gap: 8px; background: transparent; cursor: pointer; }
.top-profile > svg { width: 14px; color: #8b9794; }
.mobile-brand { display: none; }
.page-content { flex: 1; max-width: 1440px; width: 100%; margin: 0 auto; padding: 35px 43px 44px; }
.view-panel { display: none; animation: rise .24s ease; }
.view-panel.active { display: block; }
@keyframes rise { from { opacity: .65; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 700; letter-spacing: 1.25px; color: #92a09c; margin-bottom: 10px; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #76a99c; }
h1, h2, h3, p { margin-top: 0; }
h1 { font: 700 26px/1.22 Manrope, sans-serif; letter-spacing: -.9px; margin-bottom: 7px; color: #23312f; }
.wave { font-size: 19px; color: #d9a451; vertical-align: 2px; margin-left: 2px; }
.intro { color: #85918e; font-size: 12px; margin: 0; }
.button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; padding: 0 14px; font-size: 11px; font-weight: 700; cursor: pointer; transition: .18s ease; white-space: nowrap; }
.button svg { width: 15px; height: 15px; }
.button-primary { background: var(--teal); color: white; border: 1px solid var(--teal); box-shadow: 0 4px 10px rgba(20,125,112,.12); }
.button-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); transform: translateY(-1px); }
.button-outline { background: white; color: #52615e; border: 1px solid #e0e7e4; }
.button-outline:hover { color: var(--teal); border-color: #a8c9c1; background: #fbfdfc; }
.button-light { background: white; color: var(--teal-dark); border: 1px solid rgba(255,255,255,.5); }
.button-light:hover { background: #eff7f4; }
.button-small { min-height: 33px; padding: 0 11px; font-size: 10px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card, .panel, .class-card, .subject-card, .ride-card, .discussion-card, .prospect-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-card { min-height: 142px; padding: 16px 17px 14px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-icon, .summary-icon { width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; }
.stat-icon svg { width: 16px; height: 16px; }
.stat-violet { color: #8069ae; background: #f0ebf8; }
.stat-blue { color: #5381ad; background: #eaf1f8; }
.stat-amber { color: #bb8d3e; background: #f9f1e1; }
.stat-green { color: #3f9479; background: #e7f3ed; }
.stat-trend { display: flex; gap: 3px; align-items: center; font-size: 9px; color: #628d76; }
.stat-trend svg { width: 12px; height: 12px; }
.trend-neutral { color: #ac8751; }
.stat-value { margin-top: 10px; font: 700 24px/1 Manrope, sans-serif; letter-spacing: -.8px; }
.stat-unit { font-size: 15px; margin-left: 1px; }
.stat-label { margin-top: 5px; font-weight: 600; font-size: 11px; }
.stat-foot { margin-top: 3px; font-size: 9px; color: #9aa4a1; }
.content-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); gap: 16px; margin-bottom: 16px; }
.panel { padding: 19px 20px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-heading h2, .section-heading h2, .travel-toolbar h2, .matrimony-controls h2 { font: 700 14px/1.3 Manrope, sans-serif; letter-spacing: -.3px; margin: 0 0 5px; }
.panel-heading p, .section-heading p, .travel-toolbar p, .matrimony-controls p { color: #97a19f; font-size: 10px; margin: 0; }
.text-button { border: 0; display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--teal); font-weight: 700; font-size: 10px; cursor: pointer; white-space: nowrap; padding: 3px 0; }
.text-button svg { width: 14px; height: 14px; }
.progress-list { padding-top: 16px; }
.progress-row { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.progress-row:last-child { margin-bottom: 0; }
.class-avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: 0 0 auto; }
.class-purple { background: #f0ebf8; color: #7964a4; }
.class-blue { background: #eaf2f8; color: #507ba3; }
.class-orange { background: #faf0e6; color: #b37b43; }
.class-green { background: #e8f3eb; color: #43846a; }
.class-pink { background: #f8eaf0; color: #a6607b; }
.progress-info { flex: 1; min-width: 0; }
.progress-title { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; margin-bottom: 6px; }
.progress-title strong { font-weight: 600; }
.progress-title span { color: #a0aaa7; font-size: 9px; }
.progress-track { height: 5px; width: 100%; background: #eff2f1; border-radius: 20px; overflow: hidden; }
.progress-track > span { display: block; height: 100%; border-radius: inherit; }
.bar-purple { background: #9a87c0; }.bar-blue { background: #79a5c5; }.bar-orange { background: #d4a06b; }.bar-green { background: #75aa8b; }.bar-pink { background: #cc8ea6; }
.progress-percent { font-size: 10px; min-width: 28px; text-align: right; }
.panel-footnote { border-top: 1px solid #f0f2f1; margin-top: 16px; padding-top: 11px; display: flex; align-items: center; gap: 6px; color: #a0aaa7; font-size: 9px; }
.panel-footnote svg { width: 13px; height: 13px; }
.subtle-button { width: 29px; height: 29px; border-color: var(--line); }
.schedule-list { margin-top: 18px; }
.schedule-item { display: grid; grid-template-columns: 43px 10px 1fr auto; align-items: center; gap: 8px; min-height: 47px; }
.schedule-time { color: #53615e; font-size: 10px; font-weight: 700; display: flex; gap: 3px; }
.schedule-time small { color: #9ba6a3; font-size: 8px; font-weight: 500; }
.schedule-line { width: 3px; height: 25px; border-radius: 4px; }
.line-teal { background: #67a898; }.line-blue { background: #7ba3c3; }.line-orange { background: #d2a16d; }.line-purple { background: #a190c5; }
.schedule-details { display: grid; gap: 3px; }
.schedule-details strong { font-size: 10px; font-weight: 600; }
.schedule-details span { font-size: 9px; color: #9aa4a1; }
.schedule-tag { padding: 4px 7px; border-radius: 5px; font-size: 8px; font-weight: 700; }
.tag-now { color: #498b7d; background: #e8f4f0; }
.lower-grid { margin-top: 0; }
.attention-list { margin-top: 13px; }
.attention-item { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: transparent; padding: 10px 0; cursor: pointer; border-top: 1px solid #f1f3f2; }
.attention-item:first-child { border-top: 0; }
.attention-icon { width: 31px; height: 31px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; }
.attention-icon svg { width: 15px; height: 15px; }
.attention-amber { background: #fbf3e4; color: #bd9049; }.attention-blue { background: #eaf2f8; color: #6692b4; }.attention-green { background: #e7f3ed; color: #5e9b79; }
.attention-item > span:nth-child(2) { display: grid; gap: 4px; flex: 1; }
.attention-item strong { font-size: 10px; font-weight: 600; }
.attention-item small { font-size: 9px; color: #9aa5a2; }
.attention-item > svg { width: 14px; color: #b4bdba; }
.community-highlight { display: grid; grid-template-columns: 35px 1fr 28px; align-items: center; gap: 10px; margin-top: 17px; padding: 12px; border: 1px solid #edf1ef; border-radius: 11px; background: #fcfdfc; }
.question-mark { width: 33px; height: 33px; background: #e8f3ef; color: #468a7b; display: grid; place-items: center; border-radius: 9px; }
.question-mark svg { width: 16px; }
.question-purple { background: #f0ebf7; color: #8670b1; }
.community-highlight > div { display: grid; gap: 5px; min-width: 0; }
.category-label { font-size: 8px; font-weight: 700; color: #629b89; letter-spacing: .4px; }
.category-purple { color: #8b79ad; }
.community-highlight strong { font-size: 10px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.post-author { color: #9da7a4; font-size: 9px; }
.post-author span { margin: 0 3px; }
.round-arrow { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--line); background: white; color: #82908c; border-radius: 50%; cursor: pointer; }
.round-arrow svg { width: 13px; height: 13px; }
.second-highlight { margin-top: 8px; }
.page-footer { min-height: 47px; border-top: 1px solid var(--line); padding: 0 43px; color: #a5afac; font-size: 9px; display: flex; align-items: center; gap: 20px; }
.page-footer span:nth-child(2) { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.page-footer svg { width: 11px; height: 11px; color: #d4877c; fill: #d4877c; }
.page-footer button { border: 0; background: transparent; color: #7c8986; cursor: pointer; font-size: 9px; }
.module-welcome { margin-bottom: 23px; }
.module-tabs { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.module-tab { position: relative; border: 0; background: transparent; padding: 0 0 11px; color: #8e9a97; font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.module-tab.active { color: var(--teal); font-weight: 700; }
.module-tab.active::after { content: ""; height: 2px; background: var(--teal); border-radius: 2px; position: absolute; bottom: -1px; left: 0; right: 0; }
.tab-count { min-width: 18px; height: 18px; border-radius: 6px; background: #edf4f2; color: #658d82; display: grid; place-items: center; font-size: 9px; }
.module-toolbar, .community-toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 17px; }
.search-box { display: flex; align-items: center; gap: 8px; min-height: 37px; padding: 0 11px; border: 1px solid #e5ebe8; border-radius: 9px; background: white; flex: 1; max-width: 360px; color: #9aa5a2; }
.search-box svg { width: 15px; height: 15px; flex: 0 0 auto; }
.search-box input { border: 0; outline: 0; background: transparent; width: 100%; min-width: 0; font-size: 10px; color: var(--ink); }
.search-box input::placeholder { color: #a3adaa; }
.filter-button { min-height: 36px; border: 1px solid #e5ebe8; background: white; border-radius: 9px; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; font-size: 10px; color: #687572; cursor: pointer; }
.filter-button svg { width: 14px; height: 14px; }
.module-toolbar > .button { margin-left: auto; }
.class-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.class-card { padding: 16px; min-width: 0; }
.class-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.more-button { width: 29px; height: 29px; border: 0; background: transparent; color: #9aa5a2; display: grid; place-items: center; border-radius: 7px; cursor: pointer; }
.more-button:hover { background: #f3f6f5; color: var(--ink); }
.more-button svg { width: 17px; height: 17px; }
.class-subject { color: #8872b1; font-size: 8px; font-weight: 700; letter-spacing: .9px; }
.subject-orange { color: #b7834e; }.subject-green { color: #548d70; }.subject-purple { color: #9b7295; }
.class-card h3 { font: 700 13px/1.4 Manrope,sans-serif; margin: 5px 0 3px; letter-spacing: -.2px; }
.class-card > p { color: #9da7a4; font-size: 9px; margin-bottom: 15px; }
.class-card-meta { display: flex; gap: 12px; color: #85918e; font-size: 9px; border-bottom: 1px solid #f0f2f1; padding-bottom: 13px; }
.class-card-meta span { display: flex; gap: 5px; align-items: center; }
.class-card-meta svg { width: 13px; height: 13px; }
.class-progress-head { display: flex; justify-content: space-between; margin: 12px 0 7px; color: #85918e; font-size: 9px; }
.class-progress-head strong { color: #46524f; }
.card-link { margin-top: 14px; border: 0; background: transparent; color: var(--teal); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 0; font-size: 10px; font-weight: 700; }
.card-link svg { width: 13px; height: 13px; }
.add-class-card, .add-subject-card { border: 1px dashed #cfdad6; border-radius: var(--radius); background: rgba(255,255,255,.45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 230px; cursor: pointer; color: #677672; transition: .18s ease; }
.add-class-card:hover, .add-subject-card:hover { border-color: #76aa9d; background: white; }
.add-class-card > span, .add-subject-card > span { width: 34px; height: 34px; background: white; border: 1px solid var(--line); color: var(--teal); border-radius: 10px; display: grid; place-items: center; }
.add-class-card svg, .add-subject-card svg { width: 16px; height: 16px; }
.add-class-card strong, .add-subject-card strong { font-size: 11px; }
.add-class-card small, .add-subject-card small { color: #9ba6a2; font-size: 9px; }
.demo-note, .matrimony-footnote { display: flex; align-items: center; gap: 6px; color: #9ca7a4; font-size: 9px; margin-top: 16px; }
.demo-note svg, .matrimony-footnote svg { width: 13px; height: 13px; }
.classroom-hero { min-height: 220px; position: relative; overflow: hidden; border-radius: 18px; background: #edf4ef; padding: 25px 30px; display: flex; align-items: center; margin-bottom: 26px; }
.classroom-hero-copy { position: relative; z-index: 2; }
.hero-eyebrow { color: #739183; font-size: 8px; letter-spacing: 1.1px; font-weight: 700; }
.classroom-hero h2 { font: 700 27px/1.14 Manrope,sans-serif; letter-spacing: -.8px; margin: 9px 0; color: #324d43; }
.classroom-hero h2 em { font-family: Georgia,serif; font-weight: 500; color: #6b9885; }
.classroom-hero p { color: #83978d; font-size: 10px; margin-bottom: 15px; }
.classroom-hero .button { min-height: 34px; font-size: 9px; }
.hero-art { position: absolute; width: 330px; height: 260px; right: 5%; top: -20px; }
.hero-circle { position: absolute; border-radius: 50%; }
.circle-one { width: 210px; height: 210px; right: 35px; top: 23px; background: #e0ece3; }
.circle-two { width: 150px; height: 150px; right: 65px; top: 51px; background: #d4e4d9; }
.hero-book { position: absolute; width: 98px; height: 119px; right: 93px; top: 62px; border-radius: 13px 23px 17px 12px; background: #fffdf6; color: #678c7d; display: grid; place-items: center; transform: rotate(8deg); box-shadow: 12px 12px 28px rgba(55,99,78,.12); }
.hero-book::before { content: ""; width: 4px; position: absolute; left: 11px; inset-block: 0; border-left: 1px solid #e5e7d8; }
.hero-book svg { width: 34px; height: 34px; stroke-width: 1.35; }
.art-spark { position: absolute; color: #d7ac68; font-size: 22px; }.spark-one { top: 44px; right: 56px; }.spark-two { bottom: 37px; right: 224px; font-size: 15px; color: #84a892; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 0 13px; }
.subject-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.subject-card { min-height: 151px; padding: 14px; position: relative; overflow: hidden; }
.subject-top { display: flex; align-items: center; justify-content: space-between; }
.subject-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; }
.subject-icon svg { width: 17px; height: 17px; }
.subject-math { background: #f0ebf8; color: #836bac; }.subject-science { background: #e8f3eb; color: #548e6d; }.subject-english { background: #eaf2f8; color: #5882a6; }
.subject-menu { display: flex; align-items: center; gap: 10px; color: #9ba6a3; font-size: 8px; }
.subject-menu svg { width: 15px; height: 15px; }
.subject-card h3 { margin: 14px 0 3px; font: 700 12px Manrope,sans-serif; }
.subject-card > p { margin: 0; font-size: 9px; color: #97a19e; }
.subject-footer { border-top: 1px solid #f0f2f1; margin-top: 13px; padding-top: 9px; display: flex; align-items: center; justify-content: space-between; color: #a1aaa8; font-size: 8px; }
.mini-avatars { display: flex; padding-left: 2px; }
.mini-avatar { width: 20px; height: 20px; margin-left: -3px; border: 2px solid white; border-radius: 50%; display: grid; place-items: center; font-size: 6px; font-weight: 700; }
.mini-violet { color: #7861a2; background: #eee8f6; }.mini-blue { color: #507ca1; background: #e8f0f7; }.mini-pink { color: #9d6079; background: #f6e9ef; }.mini-orange { color: #a87543; background: #f9eee1; }
.subject-open { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; }
.subject-open:focus-visible { outline-offset: -4px; }
.add-subject-card { min-height: 151px; gap: 5px; }
.add-subject-card > span { margin-bottom: 2px; }
.topic-heading { margin-top: 27px; }
.topic-list { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: white; }
.topic-row { width: 100%; display: grid; grid-template-columns: 34px minmax(150px,1fr) 100px 100px 16px; align-items: center; gap: 12px; padding: 11px 14px; text-align: left; border: 0; border-top: 1px solid #f0f2f1; background: white; cursor: pointer; }
.topic-row:first-child { border-top: 0; }.topic-row:hover { background: #fbfcfb; }
.topic-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; }
.topic-icon svg { width: 15px; height: 15px; }
.topic-violet { color: #8069ab; background: #f0ebf7; }.topic-green { color: #538b6c; background: #e8f3eb; }.topic-blue { color: #5682a5; background: #eaf2f8; }
.topic-main { display: grid; gap: 4px; }
.topic-main strong { font-size: 10px; font-weight: 600; }.topic-main small { font-size: 8px; color: #98a29f; }
.topic-status { font-size: 8px; display: flex; gap: 5px; align-items: center; color: #608b75; }
.topic-status > span { width: 5px; height: 5px; background: #75ad8b; border-radius: 50%; }
.status-draft { color: #a88b58; }.status-draft > span { background: #d3b16d; }
.topic-edited { font-size: 8px; color: #a1aaa7; }.topic-row > svg { width: 14px; color: #a1aaa7; }
.travel-search { padding: 17px 18px 12px; margin-bottom: 24px; }
.travel-search-fields { display: grid; grid-template-columns: 1fr 22px 1fr 1fr auto; align-items: end; gap: 10px; }
.travel-search-fields label > span { display: block; font-size: 8px; color: #9ca6a3; font-weight: 700; letter-spacing: .7px; margin: 0 0 7px 1px; }
.travel-search-fields label > div { height: 38px; display: flex; gap: 8px; align-items: center; padding: 0 9px; border: 1px solid #e7ece9; border-radius: 8px; }
.travel-search-fields label svg { width: 14px; color: #7e9b92; flex: 0 0 auto; }
.travel-search-fields input, .travel-search-fields select { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #55625f; font-size: 9px; }
.travel-search-fields input::placeholder { color: #a9b2af; }
.travel-swap { display: grid; place-items: center; height: 38px; color: #9da9a5; }.travel-swap svg { width: 14px; }
.search-rides { min-height: 38px; font-size: 10px; }
.privacy-hint { border-top: 1px solid #f0f2f1; padding-top: 10px; margin-top: 12px; display: flex; align-items: center; gap: 6px; color: #8c9b96; font-size: 9px; }
.privacy-hint svg { width: 13px; height: 13px; color: #72a18f; }
.travel-toolbar { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 13px; }
.ride-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.ride-card { padding: 14px; }
.ride-card-top { display: flex; justify-content: space-between; align-items: center; }
.ride-days { display: flex; align-items: center; gap: 5px; color: #738f85; font-size: 8px; font-weight: 700; letter-spacing: .4px; }
.ride-days svg { width: 13px; height: 13px; }
.route-display { display: grid; grid-template-columns: 13px minmax(0,1fr) auto; align-items: center; gap: 10px; margin-top: 10px; }
.route-points { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.route-point { width: 7px; height: 7px; border-radius: 50%; border: 2px solid #5f9f8e; background: white; }
.route-end { border-color: #d09a64; }
.route-dash { flex: 0 0 21px; width: 1px; border-left: 1px dashed #c7d5d0; }
.route-display > div:nth-child(2) { display: grid; gap: 4px; }
.route-display strong { font-size: 10px; font-weight: 600; }.route-display small { font-size: 8px; color: #9ba6a3; }
.route-display strong:nth-of-type(2) { margin-top: 7px; }
.route-time { display: flex; align-items: baseline; gap: 3px; align-self: start; margin-top: 1px; font-weight: 700; font-size: 11px; }
.route-time small { font-size: 7px; font-weight: 500; }
.ride-divider { border-top: 1px solid #f0f2f1; margin: 13px 0 10px; }
.ride-person { display: flex; align-items: center; gap: 8px; }
.ride-person > span:nth-child(2) { display: grid; gap: 3px; flex: 1; }
.ride-person strong { font-size: 9px; font-weight: 600; }.ride-person small { color: #9aa5a2; font-size: 8px; }.star { color: #d7a54f; }
.seats { display: flex; align-items: center; gap: 4px; color: #899591; font-size: 8px; }.seats svg { width: 12px; height: 12px; }
.ride-card-bottom { border-top: 1px solid #f0f2f1; padding-top: 10px; margin-top: 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ride-cost { display: flex; align-items: baseline; gap: 4px; }.ride-cost strong { font-size: 11px; }.ride-cost small { font-size: 7px; color: #9ca6a3; }
.safety-banner { display: flex; align-items: center; gap: 12px; margin-top: 17px; padding: 12px 14px; background: #edf5f1; border-radius: 12px; }
.safety-banner > span { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; background: #dcece4; color: #60927c; border-radius: 9px; }.safety-banner > span svg { width: 16px; }
.safety-banner > div { flex: 1; }.safety-banner strong { font-size: 10px; }.safety-banner p { margin: 3px 0 0; color: #83968d; font-size: 8px; line-height: 1.45; }
.safety-banner .text-button { font-size: 9px; }
.community-summary { display: grid; grid-template-columns: repeat(3,1fr); background: white; border: 1px solid var(--line); border-radius: 13px; margin-bottom: 22px; padding: 14px 17px; }
.community-summary > div { display: flex; align-items: center; gap: 9px; border-left: 1px solid #edf0ef; padding-left: 18px; }.community-summary > div:first-child { border: 0; padding-left: 0; }
.summary-icon { width: 32px; height: 32px; }.summary-icon svg { width: 16px; }
.summary-purple { background: #f0ebf7; color: #826caa; }.summary-teal { background: #e7f3ef; color: #568d7f; }.summary-orange { background: #faf0e5; color: #b7834b; }
.community-summary > div > span:last-child { display: grid; gap: 3px; }.community-summary strong { font: 700 14px Manrope,sans-serif; }.community-summary small { color: #929d99; font-size: 8px; }
.community-tabs { margin-bottom: 13px; gap: 21px; }
.new-tag { color: #638f80; background: #e8f3ee; padding: 3px 5px; font-size: 7px; border-radius: 4px; font-weight: 700; }
.community-toolbar { margin-bottom: 12px; }.community-toolbar .search-box { max-width: none; }.sort-select, .matrimony-filters select { min-height: 36px; border: 1px solid #e5ebe8; background: white; border-radius: 9px; padding: 0 10px; font-size: 9px; color: #64716e; }
.community-feed { display: grid; gap: 11px; }
.discussion-card { padding: 15px 17px 11px; }
.discussion-author { display: flex; align-items: center; gap: 8px; }.discussion-author > span:nth-child(2) { flex: 1; display: grid; gap: 3px; }.discussion-author strong { font-size: 9px; }.discussion-author small { color: #9da7a4; font-size: 8px; }
.discussion-category { display: inline-block; margin-top: 12px; font-size: 7px; letter-spacing: .65px; color: #639481; font-weight: 700; }
.category-blue { color: #6189a8; }
.discussion-card h3 { margin: 5px 0 5px; font: 700 12px/1.45 Manrope,sans-serif; letter-spacing: -.2px; }
.discussion-card > p { color: #7f8c88; font-size: 9px; line-height: 1.55; margin-bottom: 8px; max-width: 780px; }
.tag-row { display: flex; gap: 6px; }.tag-row span { color: #79948a; background: #f0f6f3; padding: 4px 7px; border-radius: 5px; font-size: 7px; }
.discussion-footer { border-top: 1px solid #f0f2f1; margin-top: 10px; padding-top: 9px; display: flex; align-items: center; gap: 16px; }
.discussion-footer button { border: 0; background: transparent; color: #83908c; display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; cursor: pointer; font-size: 8px; }
.discussion-footer button svg { width: 13px; height: 13px; }.discussion-footer button.liked { color: var(--teal); }.discussion-views { color: #a1aaa7; display: flex; align-items: center; gap: 4px; font-size: 8px; }.discussion-views svg { width: 12px; }
.discussion-footer .reply-cta { margin-left: auto; color: var(--teal); font-weight: 700; }
.transfer-promo { display: flex; align-items: center; gap: 12px; padding: 15px; background: #f1eff7; border-radius: 13px; margin-top: 17px; }
.transfer-promo-icon { width: 37px; height: 37px; border-radius: 11px; background: white; color: #8975aa; display: grid; place-items: center; flex: 0 0 auto; }.transfer-promo-icon svg { width: 18px; }
.transfer-promo > div:nth-child(2) { flex: 1; display: grid; gap: 4px; }.transfer-promo > div:nth-child(2) > span { font-size: 7px; letter-spacing: .7px; font-weight: 700; color: #8c7da9; }.transfer-promo strong { font: 600 10px Manrope,sans-serif; }.transfer-promo p { margin: 0; color: #8f899e; font-size: 8px; }
.transfer-promo .button { min-height: 33px; font-size: 9px; }
.matrimony-header { border-radius: 18px; color: white; background: #314b46; padding: 21px 24px 0; margin-bottom: 24px; overflow: hidden; }
.matrimony-lock { display: inline-flex; align-items: center; gap: 6px; color: #c3d5cd; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 6px 9px; font-size: 7px; letter-spacing: .7px; font-weight: 700; }
.matrimony-lock svg { width: 12px; height: 12px; }.matrimony-header .welcome-row { align-items: center; margin-top: 16px; margin-bottom: 18px; }.matrimony-header .eyebrow { color: #a8c3b8; }.matrimony-header h1 { color: white; font-size: 23px; }.matrimony-header .intro { color: #bfd0c9; line-height: 1.6; max-width: 440px; font-size: 10px; }
.matrimony-steps { display: flex; align-items: center; gap: 15px; padding: 13px 0 14px; border-top: 1px solid rgba(255,255,255,.12); }.matrimony-steps > div { display: grid; grid-template-columns: 23px 1fr; column-gap: 7px; row-gap: 3px; flex: 1; }.matrimony-steps > div > span { grid-row: span 2; color: #a9c7b9; font-size: 9px; font-weight: 700; }.matrimony-steps strong { font-size: 8px; font-weight: 600; }.matrimony-steps small { color: #b1c4bc; font-size: 7px; }.matrimony-steps > svg { width: 14px; height: 14px; color: #809d91; }
.matrimony-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }.matrimony-filters { display: flex; gap: 8px; }.matrimony-filters select { min-height: 34px; }.matrimony-filters .filter-button { min-height: 34px; }
.privacy-notice { display: flex; align-items: center; gap: 9px; border: 1px solid #e4eee8; background: #f0f6f2; color: #71867c; padding: 10px 12px; border-radius: 9px; margin-bottom: 13px; font-size: 8px; line-height: 1.5; }.privacy-notice > svg { color: #65937e; width: 16px; height: 16px; flex: 0 0 auto; }.privacy-notice strong { color: #4d6d5c; }.notice-close { border: 0; background: transparent; color: #81958a; padding: 3px; margin-left: auto; cursor: pointer; }.notice-close svg { width: 13px; }
.profile-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }.prospect-card { padding: 14px; }.prospect-top { display: flex; align-items: center; gap: 8px; }.anonymous-avatar { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; }.anonymous-avatar svg { width: 22px; height: 22px; stroke-width: 1.5; }.anon-lilac { color: #8773a9; background: #f0ebf6; }.anon-sage { color: #668d7a; background: #eaf3ec; }.anon-peach { color: #b17b5a; background: #f8eee5; }
.match-badge { display: inline-flex; align-items: center; gap: 4px; color: #668b74; background: #edf5ee; padding: 5px 7px; border-radius: 6px; font-size: 8px; font-weight: 700; }.match-badge svg { width: 11px; height: 11px; }
.save-button { margin-left: auto; width: 28px; height: 28px; border: 1px solid #edf0ef; border-radius: 8px; color: #9ba6a3; background: white; display: grid; place-items: center; cursor: pointer; }.save-button svg { width: 14px; }.save-button.saved { color: #a981bf; background: #f5f0f8; }
.profile-id { display: block; margin-top: 12px; color: #91a099; font-size: 7px; font-weight: 700; letter-spacing: .6px; }.prospect-card h3 { font: 700 11px Manrope,sans-serif; margin: 6px 0 3px; }.prospect-card > p { margin: 0; color: #9ba6a2; font-size: 8px; }
.prospect-details { display: grid; gap: 8px; padding: 12px 0; margin-top: 11px; border-top: 1px solid #f0f2f1; border-bottom: 1px solid #f0f2f1; }.prospect-details span { display: flex; align-items: center; gap: 7px; color: #71807b; font-size: 8px; }.prospect-details svg { width: 13px; height: 13px; color: #8ca59a; }
.prospect-footer { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding-top: 10px; }.prospect-footer > span { display: flex; align-items: center; gap: 4px; color: #9ba7a2; font-size: 7px; }.prospect-footer > span svg { width: 12px; height: 12px; }.matrimony-footnote { line-height: 1.5; }
.mobile-nav { display: none; }
.toast-region { position: fixed; z-index: 60; right: 22px; bottom: 22px; display: grid; gap: 8px; pointer-events: none; }
.toast { background: #263d38; color: #fff; padding: 12px 15px; border-radius: 10px; box-shadow: 0 8px 28px rgba(20,40,35,.2); font-size: 11px; display: flex; align-items: center; gap: 8px; animation: rise .2s ease; max-width: 340px; }.toast svg { width: 15px; height: 15px; color: #a8d0bd; flex: 0 0 auto; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(24,40,36,.38); display: grid; place-items: center; padding: 20px; backdrop-filter: blur(3px); }.modal-backdrop[hidden] { display: none; }
.modal-card { width: min(100%,420px); background: white; border-radius: 18px; padding: 25px; box-shadow: 0 20px 80px rgba(21,42,37,.2); position: relative; animation: rise .18s ease; }.modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: #f5f7f6; color: #74817d; display: grid; place-items: center; cursor: pointer; }.modal-close svg { width: 15px; }.modal-icon { width: 36px; height: 36px; display: grid; place-items: center; background: #e9f4f0; color: var(--teal); border-radius: 11px; margin-bottom: 15px; }.modal-icon svg { width: 18px; }.modal-card h2 { font: 700 17px Manrope,sans-serif; letter-spacing: -.4px; margin: 0 0 7px; }.modal-card > p { color: #83908c; font-size: 11px; line-height: 1.6; margin-bottom: 0; }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }.modal-form { margin-top: 15px; display: grid; gap: 11px; }.modal-field { display: grid; gap: 6px; color: #62706b; font-size: 9px; font-weight: 600; }.modal-field input, .modal-field select, .modal-field textarea { width: 100%; min-height: 37px; border: 1px solid #e4eae7; border-radius: 8px; padding: 9px 10px; font-size: 10px; color: var(--ink); outline: none; }.modal-field textarea { min-height: 75px; resize: vertical; }
.quick-choice { width: 100%; border: 1px solid #e7ece9; background: #fff; border-radius: 9px; min-height: 40px; padding: 0 11px; text-align: left; color: #4e5d59; font-size: 10px; font-weight: 600; cursor: pointer; }.quick-choice:hover { border-color: #a8c9c1; background: #f8fbfa; }
.mobile-break { display: none; }
@media (min-width: 1500px) { .page-content { padding-top: 42px; }.stats-grid { gap: 17px; }.stat-card { min-height: 153px; padding: 18px; } }
@media (max-width: 1150px) {
  .sidebar { width: 220px; }.main-area { margin-left: 220px; }.topbar { padding: 0 30px; }.page-content { padding: 29px 30px 36px; }.page-footer { padding: 0 30px; }
  .stats-grid { gap: 10px; }.stat-card { padding: 14px; }.content-grid { grid-template-columns: minmax(0,1.1fr) minmax(275px,.9fr); gap: 12px; }
  .class-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.subject-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.ride-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.ride-card:last-child { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 13px; }.sidebar { display: none; }.main-area { margin-left: 0; padding-bottom: 72px; }.topbar { height: 58px; padding: 0 17px; }.mobile-brand { display: flex; align-items: center; gap: 8px; }.mobile-brand .brand-mark { width: 29px; height: 29px; border-radius: 9px; }.mobile-brand .brand-mark svg { width: 16px; }.mobile-brand .brand-copy { font-size: 14px; }.breadcrumb { display: none; }.top-actions { gap: 7px; }.top-actions .help-button { display: none; }.top-profile { display: none; }.icon-button { width: 34px; height: 34px; }
  .page-content { padding: 25px 16px 30px; }.welcome-row { align-items: flex-start; margin-bottom: 19px; }.welcome-row h1 { font-size: 23px; }.welcome-row > .button { align-self: center; min-height: 36px; padding: 0 10px; font-size: 10px; }.welcome-row > .button svg { width: 14px; }.intro { font-size: 11px; line-height: 1.55; max-width: 450px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-bottom: 12px; }.stat-card { min-height: 128px; padding: 13px; }.stat-value { font-size: 22px; }.stat-trend { font-size: 8px; }
  .content-grid { grid-template-columns: 1fr; gap: 11px; margin-bottom: 11px; }.panel { padding: 16px; }.lower-grid { margin-top: 0; }.schedule-item { min-height: 43px; }.page-footer { padding: 0 16px; min-height: 43px; }.page-footer span:nth-child(2) { display: none; }.page-footer button { margin-left: auto; }
  .module-welcome { margin-bottom: 19px; }.module-toolbar { flex-wrap: wrap; }.module-toolbar .search-box { flex-basis: 100%; max-width: none; }.module-toolbar > .button { margin-left: 0; }.filter-button { min-height: 36px; }.class-grid { gap: 9px; }.class-card { padding: 13px; }.class-card-meta { gap: 8px; font-size: 8px; }.class-card h3 { font-size: 11px; }.class-card > p { margin-bottom: 12px; }.add-class-card { min-height: 211px; }
  .classroom-hero { min-height: 205px; padding: 21px 18px; margin-bottom: 22px; }.classroom-hero h2 { font-size: 24px; }.classroom-hero p { max-width: 200px; line-height: 1.5; }.hero-art { right: -92px; opacity: .77; }.section-heading { margin-bottom: 11px; }.subject-grid { gap: 9px; }.subject-card { padding: 12px; min-height: 145px; }.subject-footer { font-size: 7px; }.topic-heading { margin-top: 23px; }.topic-row { grid-template-columns: 32px 1fr 16px; gap: 9px; padding: 10px; }.topic-status, .topic-edited { display: none; }.topic-main strong { font-size: 9px; }
  .travel-search { padding: 13px; }.travel-search-fields { grid-template-columns: 1fr 20px 1fr; gap: 8px; }.travel-search-fields label:nth-of-type(3) { grid-column: 1 / 3; }.travel-swap { grid-column: 2; grid-row: 1; }.search-rides { grid-column: 3; grid-row: 2; width: 100%; }.travel-search-fields label > div { height: 36px; }.travel-search-fields label > span { font-size: 7px; }.travel-search-fields input, .travel-search-fields select { font-size: 8px; }.privacy-hint { font-size: 8px; line-height: 1.4; }.ride-grid { grid-template-columns: 1fr; }.ride-card:last-child { display: block; }.safety-banner { align-items: flex-start; flex-wrap: wrap; }.safety-banner > div { min-width: calc(100% - 50px); }.safety-banner .text-button { margin-left: 42px; }
  .community-summary { padding: 12px 10px; }.community-summary > div { padding-left: 9px; gap: 6px; }.community-summary > div:first-child { padding-left: 0; }.summary-icon { width: 28px; height: 28px; }.community-summary strong { font-size: 12px; }.community-summary small { font-size: 7px; }.discussion-card { padding: 13px; }.discussion-card h3 { font-size: 11px; }.discussion-footer { gap: 10px; }.discussion-footer .discussion-views { display: none; }.transfer-promo { align-items: flex-start; flex-wrap: wrap; }.transfer-promo > div:nth-child(2) { min-width: calc(100% - 55px); }.transfer-promo .button { margin-left: 49px; }
  .matrimony-header { padding: 16px 15px 0; }.matrimony-header .welcome-row { align-items: flex-start; flex-direction: column; gap: 12px; margin: 14px 0; }.matrimony-header h1 { font-size: 21px; }.matrimony-header .intro { font-size: 9px; }.matrimony-header .button { min-height: 32px; font-size: 9px; }.matrimony-steps { gap: 7px; }.matrimony-steps > div { grid-template-columns: 17px 1fr; column-gap: 4px; }.matrimony-steps strong { font-size: 7px; }.matrimony-steps small { font-size: 6px; }.matrimony-steps > svg { width: 11px; }.matrimony-controls { align-items: flex-start; gap: 10px; flex-direction: column; }.matrimony-filters { width: 100%; }.matrimony-filters select { flex: 1; }.privacy-notice { align-items: flex-start; }.profile-grid { grid-template-columns: 1fr; }.prospect-card { padding: 14px; }
  .mobile-nav { display: grid; grid-template-columns: repeat(5,1fr); position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; min-height: 63px; padding: 5px 4px max(6px, env(safe-area-inset-bottom)); border-top: 1px solid #e7ece9; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }.mobile-nav-link { border: 0; background: transparent; color: #99a4a1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; min-width: 0; min-height: 48px; position: relative; }.mobile-nav-link svg { width: 18px; height: 18px; stroke-width: 1.8; }.mobile-nav-link span { font-size: 8px; white-space: nowrap; }.mobile-nav-link.active { color: var(--teal); font-weight: 700; }.mobile-nav-link.active::before { content: ""; position: absolute; width: 21px; height: 2px; border-radius: 0 0 3px 3px; background: var(--teal); top: -5px; }
  .toast-region { right: 12px; left: 12px; bottom: 77px; }.toast { max-width: none; }.modal-card { padding: 22px 19px; }.mobile-break { display: initial; }
}
@media (max-width: 390px) {
  .page-content { padding-left: 12px; padding-right: 12px; }.welcome-row h1 { font-size: 21px; }.welcome-row > .button { font-size: 9px; padding: 0 8px; }.stat-card { padding: 11px; }.stat-trend { font-size: 7px; }.stat-value { font-size: 20px; }.class-card-meta { flex-direction: column; gap: 5px; }.class-card { padding: 11px; }.community-summary > div { flex-direction: column; align-items: flex-start; }.matrimony-steps { gap: 4px; }.matrimony-steps small { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }