:root {
  --sidebar-width: 236px;
  --navy: #001c38;
  --navy-soft: #143b5c;
  --ink: #183149;
  --muted: #6f8293;
  --teal: #4f7894;
  --gold: #b69b5f;
  --line: #e0e8ee;
  --canvas: #f5f7f9;
  --paper: #fff;
  --blue-wash: #e8eef3;
  --green: #7fb69d;
  --shadow: 0 12px 32px rgba(0, 28, 56, .055);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid rgba(79, 120, 148, .25);
  outline-offset: 2px;
}

.site-shell { min-height: 100vh; background: var(--canvas); }
.topbar {
  min-height: 92px;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 0;
  border-bottom: 1px solid #e9eef2;
  background: rgba(255, 255, 255, .98);
}
.brand { display: inline-flex; width: var(--sidebar-width); height: 92px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 0 8px 0 30px; background: transparent; text-decoration: none; }
.brand img { display: block; width: 196px; height: auto; }
.brand span { margin-left: 3px; color: var(--teal); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.topbar-tools, .connected, .profile, .role-switch { display: flex; align-items: center; }
.topbar-tools { justify-self: end; gap: 16px; padding-right: max(28px, calc((100vw - 1320px) / 2)); }
.connected { gap: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.connected i { width: 7px; height: 7px; border-radius: 50%; background: #6fd0a7; box-shadow: 0 0 0 4px rgba(111, 208, 167, .14); }
.icon-button { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; }
.icon-button:hover { color: var(--navy); background: #f3f7f9; }
.icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.role-switch { gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9fb; }
.role-switch a { padding: 5px 7px; border-radius: 5px; color: var(--muted); font-size: 10px; text-decoration: none; }
.role-switch a:hover, .role-switch a.is-current { color: var(--navy); background: #e9eef3; }
.profile { gap: 8px; padding-left: 15px; border-left: 1px solid var(--line); color: var(--muted); font-size: 11px; white-space: nowrap; }
.profile span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: var(--navy); background: #e8eef4; font-size: 10px; font-weight: 700; }

.site-layout { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: calc(100vh - 132px); }
.sidebar { padding: 30px 18px; border-right: 1px solid var(--line); background: rgba(255, 255, 255, .8); }
.motto { max-width: 175px; margin: 0 12px 37px; color: #617c91; font-family: Cinzel, Georgia, serif; font-size: 13px; line-height: 1.55; }
.sidebar-label { margin: 0 12px 14px; color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.sidebar-nav { display: grid; gap: 5px; }
.sidebar-nav a, .mobile-nav a { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid transparent; border-radius: 10px; color: #667b8b; font-size: 12px; text-decoration: none; transition: none; }
.sidebar-nav a svg, .mobile-nav a svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.sidebar-nav a:hover, .mobile-nav a:hover { color: var(--navy); background: #f4f7f9; border-color: #e4eaf0; }
.sidebar-nav a.is-active, .mobile-nav a.is-active { color: var(--navy); background: var(--blue-wash); border-color: #d9e2eb; box-shadow: inset 3px 0 0 var(--teal); font-weight: 650; }
.sidebar-note { margin: 35px 12px 0; padding-top: 20px; border-top: 1px solid var(--line); color: #94a2ad; font-size: 10px; line-height: 1.45; }
.sidebar-note strong { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 500; }
.mobile-nav { display: none; }

.page-content { min-width: 0; padding: 43px clamp(22px, 4vw, 60px) 64px; background: radial-gradient(circle at 88% -4%, rgba(215, 237, 246, .7), transparent 30rem), linear-gradient(180deg, #fff 0%, #fbfcfd 100%); }
.page-wrap { width: min(1240px, 100%); margin: 0 auto; }
.breadcrumb { color: #94a2ad; font-size: 11px; }
.breadcrumb span { padding: 0 5px; color: #c6d0da; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 12px 0 25px; }
.page-kicker, .eyebrow { display: block; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.page-kicker { margin-bottom: 8px; }
h1, h2, h3, h4, p { margin-top: 0; }
.page-heading h1 { margin: 0; color: var(--navy); font-family: Cinzel, Georgia, serif; font-size: clamp(34px, 4vw, 48px); font-weight: 400; letter-spacing: -.045em; line-height: 1.12; }
.page-heading p { max-width: 680px; margin: 9px 0 0; color: var(--muted); font-size: 14px; }
.heading-actions, .button-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.heading-meta { min-width: 150px; padding: 12px 0 12px 17px; border-left: 2px solid var(--gold); white-space: nowrap; }
.heading-meta span, .heading-meta strong { display: block; }
.heading-meta span { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.heading-meta strong { margin-top: 4px; color: var(--navy); font-size: 13px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 37px; padding: 0 14px; border: 1px solid var(--line-strong, #c6d0da); border-radius: 8px; color: var(--navy); background: #fff; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.button:hover { border-color: #99afbe; background: #f8fafb; }
.button-primary { border-color: var(--navy); color: #fff; background: var(--navy); }
.button-primary:hover { border-color: #123c5e; background: #123c5e; }
.button-quiet { min-height: auto; padding: 0; border: 0; color: var(--teal); background: transparent; }
.button-quiet:hover { color: var(--navy); background: transparent; }

.student-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 17px; padding: 16px 19px; border: 1px solid #dfe7ee; border-radius: 12px; background: rgba(255, 255, 255, .85); }
.student-identity, .detail-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.student-avatar { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 13px; color: var(--navy); background: linear-gradient(145deg, #e8f0f6, #f5eee0); font-size: 12px; font-weight: 700; }
.student-identity h2, .detail-identity h3 { margin: 4px 0 0; color: var(--navy); font-family: Cinzel, Georgia, serif; font-size: 21px; font-weight: 400; letter-spacing: -.025em; }
.student-identity p, .detail-identity p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.student-meta { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; }
.student-meta strong { color: var(--navy); font-size: 12px; }
.student-select { display: grid; gap: 5px; min-width: 185px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.student-select select, .select { height: 37px; padding: 0 11px; border: 1px solid #c6d0da; border-radius: 8px; color: var(--navy); background: #fff; font-size: 12px; }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .72fr); gap: 17px; }
.overview-primary { display: grid; gap: 17px; min-width: 0; }
.panel, .stat-card, .document, .calendar-card { border: 1px solid #e1e8ee; border-radius: 12px; background: rgba(255, 255, 255, .83); box-shadow: var(--shadow); }
.panel { padding: 21px 23px; }
.panel-heading, .section-heading, .document-heading, .table-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-heading h2, .section-heading h2 { margin: 0; color: var(--navy); font-family: Cinzel, Georgia, serif; font-size: 24px; font-weight: 400; letter-spacing: -.025em; }
.panel-heading p, .section-heading p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.calendar-list { display: grid; gap: 0; margin-top: 17px; }
.calendar-item { display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: 15px; padding: 13px 0; border-top: 1px solid #e9eef2; }
.calendar-item time { color: var(--teal); font-size: 11px; font-weight: 700; }
.calendar-item strong { display: block; color: var(--ink); font-size: 13px; }
.calendar-item span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.course-list { margin-top: 20px; }
.course-head, .course-row { display: grid; grid-template-columns: minmax(200px, 1.35fr) minmax(160px, 1fr) 50px; align-items: center; gap: 16px; }
.course-head { padding-bottom: 9px; color: #9aa8b3; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.course-row { padding: 13px 0; border-top: 1px solid #e9eef2; }
.course-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.course-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #77a0ba; }
.course-dot.teal, .bar.teal { background: #8fbaa8; }
.course-dot.gold, .bar.gold { background: #c8ae71; }
.course-name strong, .course-name small { display: block; }
.course-name strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.course-name small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.bar-track { height: 7px; overflow: hidden; border-radius: 99px; background: #edf1f3; }
.bar { height: 100%; border-radius: inherit; background: #82a8be; }
.percentage { color: var(--navy); font-size: 12px; text-align: right; }
.chart-foot { margin: 17px 0 0; color: #99a7b1; font-size: 10px; }
.announcement-list { display: grid; gap: 0; margin-top: 17px; }
.announcement-item { padding: 14px 0; border-top: 1px solid #e9eef2; }
.announcement-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--teal); font-size: 10px; font-weight: 650; }
.announcement-item h3 { margin: 6px 0 3px; color: var(--ink); font-size: 13px; }
.announcement-item p { margin: 0; color: var(--muted); font-size: 11px; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.stats.manager-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card { display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 16px 15px; }
.stat-card > div { margin-left: 42px; }
.stat-icon { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--navy); background: #e8eef4; font-size: 16px; font-weight: 600; }
.stat-icon > svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.stat-icon.green { color: #4f877f; background: #e8f4f0; }
.stat-icon.gold { color: #a77a32; background: #fff4df; }
.stat-icon.lilac { color: #817ba2; background: #f0eef9; }
.stat-card span, .stat-card strong { display: block; }
.stat-card span { color: var(--muted); font-size: 10px; }
.stat-card strong { margin-top: 3px; color: var(--navy); font-size: 22px; line-height: 1.1; }
.stat-card small { display: block; margin-top: 5px; color: #9aa7b0; font-size: 10px; }

.cafeteria-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .72fr); gap: 17px; }
.cafeteria-main-column, .cafeteria-side-column { display: grid; align-content: start; gap: 17px; min-width: 0; }
.balance-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 21px 23px; }
.balance-card .label { color: var(--muted); font-size: 12px; }
.balance-card .amount { margin: 3px 0 4px; color: var(--navy); font-family: Poppins, sans-serif; font-size: 35px; font-weight: 700; letter-spacing: -.05em; }
.balance-card p { margin: 0; color: #98a7b1; font-size: 11px; }
.balance-card .balance-side { padding-left: 17px; border-left: 2px solid var(--gold); }
.balance-card .balance-side span, .balance-card .balance-side strong { display: block; }
.balance-card .balance-side span { color: var(--muted); font-size: 10px; }
.balance-card .balance-side strong { margin-top: 4px; color: var(--navy); font-size: 13px; }
.spending-bars { display: grid; gap: 17px; margin-top: 21px; }
.spending-row { display: grid; gap: 7px; }
.spending-label { display: flex; justify-content: space-between; color: var(--ink); font-size: 12px; font-weight: 600; }
.spending-label span:last-child { color: var(--muted); font-weight: 500; }
.spending-row .bar-track { height: 8px; }
.menu-list { display: grid; gap: 0; margin-top: 17px; }
.menu-day { display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid #e9eef2; }
.menu-date strong, .menu-date span { display: block; }
.menu-date strong { color: var(--teal); font-size: 12px; }
.menu-date span { margin-top: 2px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.menu-day h3 { margin: 0; color: var(--ink); font-size: 13px; }
.menu-day p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.menu-day small { display: block; margin-top: 7px; color: #a17a39; font-size: 10px; }
.activity-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 19px; }
.filter-group { display: flex; gap: 5px; }
.filter-button { padding: 6px 9px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; font-size: 10px; cursor: pointer; }
.filter-button:hover, .filter-button.is-active { border-color: #d9e2eb; color: var(--navy); background: var(--blue-wash); }
.activity-table, .manager-table { width: 100%; border-collapse: collapse; }
.activity-table { margin-top: 11px; }
.activity-table th, .activity-table td, .manager-table th, .manager-table td { padding: 12px 7px; border-top: 1px solid #e9eef2; text-align: left; vertical-align: middle; }
.activity-table th, .manager-table th { color: #9aa8b3; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.activity-table td { color: var(--muted); font-size: 11px; }
.activity-table td strong { color: var(--ink); font-size: 12px; font-weight: 600; }
.activity-table .right, .manager-table .right { text-align: right; }
.amount-positive { color: #548c77 !important; font-weight: 650; }
.amount-negative { color: #8c6360 !important; font-weight: 650; }
.table-empty { padding: 27px 0; color: var(--muted); text-align: center; }

.calendar-toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 17px; }
.calendar-toolbar h2 { flex: 1; margin: 0; color: var(--navy); font-family: Cinzel, Georgia, serif; font-size: 24px; font-weight: 400; }
.calendar-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); gap: 17px; }
.calendar-card { overflow: hidden; }
.calendar-grid-head, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-grid-head { border-bottom: 1px solid var(--line); }
.calendar-grid-head span { padding: 12px 9px; color: #94a2ad; font-size: 10px; text-align: right; text-transform: uppercase; }
.calendar-day { min-height: 116px; padding: 10px; border: 0; border-right: 1px solid #e9eef2; border-bottom: 1px solid #e9eef2; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day:hover, .calendar-day.is-selected { background: #f3f7f9; }
.calendar-day.is-outside { color: #c0cbd2; background: #fbfcfd; }
.calendar-day.is-today .day-number { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff; background: var(--navy); }
.day-number { display: inline-block; color: var(--muted); font-size: 11px; font-weight: 700; }
.calendar-event { display: block; overflow: hidden; margin-top: 8px; padding: 5px 6px; border-left: 2px solid #85a8bc; border-radius: 4px; background: #eef4f7; color: var(--ink); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event.major { border-color: var(--gold); background: #fbf5e9; }
.calendar-event strong { margin-right: 3px; font-size: 9px; }
.calendar-details { align-self: start; padding: 21px; }
.calendar-details h2 { margin: 5px 0 0; color: var(--navy); font-family: Cinzel, Georgia, serif; font-size: 23px; font-weight: 400; }
.calendar-details > span { color: var(--teal); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.detail-list { display: grid; gap: 0; margin-top: 18px; }
.detail-item { padding: 13px 0; border-top: 1px solid #e9eef2; }
.detail-item strong, .detail-item span { display: block; }
.detail-item strong { color: var(--ink); font-size: 12px; }
.detail-item span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.detail-item p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.feed-empty { padding: 25px 0; color: var(--muted); font-size: 12px; }

.manager-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.search { min-width: 240px; height: 37px; padding: 0 12px; border: 1px solid #c6d0da; border-radius: 8px; color: var(--navy); background: #fff; font-size: 12px; }
.manager-panel { overflow: hidden; padding: 0; }
.table-heading { align-items: center; padding: 19px 21px; }
.table-heading h2 { margin: 0; color: var(--navy); font-family: Cinzel, Georgia, serif; font-size: 23px; font-weight: 400; }
.table-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.manager-table-wrap { overflow-x: auto; }
.manager-table { min-width: 760px; }
.manager-table th { padding: 11px 21px; background: #f8fafb; }
.manager-table td { padding: 13px 21px; color: var(--muted); font-size: 11px; }
.manager-table th button { border: 0; color: inherit; background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.manager-table th button:hover { color: var(--navy); }
.manager-student { display: flex; align-items: center; gap: 10px; }
.manager-student .avatar { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 10px; color: var(--navy); background: #edf2f5; font-size: 10px; font-weight: 700; }
.manager-student strong, .manager-student small { display: block; }
.manager-student strong { color: var(--ink); font-size: 12px; }
.manager-student small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.balance-low { color: #a26e3d !important; font-weight: 700; }
.expand-button { display: inline-grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--teal); background: #fff; cursor: pointer; }
.expand-button:hover { color: var(--navy); background: #f3f7f9; }
.detail-row td { padding: 0 21px 15px; background: #fbfcfd; }
.detail-box { padding: 13px 15px; border-left: 2px solid var(--gold); background: #fff; }
.detail-box h4 { margin: 0 0 8px; color: var(--navy); font-size: 12px; }
.detail-box table { width: 100%; border-collapse: collapse; }
.detail-box td { padding: 5px 0; border-top: 1px solid #eef2f4; font-size: 10px; }
.detail-box td:last-child { color: var(--navy); font-weight: 650; text-align: right; }

.ai-demo-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid #d8e5eb; border-radius: 8px; color: var(--teal); background: #f5fafb; font-size: 10px; font-weight: 650; white-space: nowrap; }
.ai-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .7fr); gap: 17px; align-items: start; }
.ai-chat-panel, .ai-context { border: 1px solid #e1e8ee; border-radius: 13px; background: rgba(255, 255, 255, .87); box-shadow: var(--shadow); }
.ai-chat-panel { overflow: hidden; }
.ai-chat-header { display: flex; align-items: center; gap: 11px; padding: 17px 21px; border-bottom: 1px solid #e9eef2; background: #fbfcfd; }
.ai-avatar, .message-avatar { display: grid; place-items: center; color: #fff; background: var(--navy); }
.ai-avatar { width: 35px; height: 35px; flex: 0 0 auto; border-radius: 11px; font-size: 16px; }
.ai-chat-header h2 { margin: 0; color: var(--navy); font-family: Cinzel, Georgia, serif; font-size: 19px; font-weight: 400; }
.ai-chat-header p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.ai-status { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #5d987e; font-size: 10px; font-weight: 650; }
.ai-status i { width: 7px; height: 7px; border-radius: 50%; background: #6fd0a7; box-shadow: 0 0 0 3px rgba(111, 208, 167, .14); }
.chat-messages { display: grid; gap: 20px; max-height: 600px; overflow-y: auto; padding: 23px 21px 12px; }
.chat-message { display: flex; align-items: flex-start; gap: 10px; max-width: 88%; }
.chat-message.user { justify-self: end; flex-direction: row-reverse; }
.message-avatar { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 9px; color: var(--navy); background: #e8eef4; font-size: 10px; font-weight: 700; }
.chat-message.assistant .message-avatar { color: #fff; background: var(--teal); }
.message-body { min-width: 0; }
.message-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.chat-message.user .message-meta { justify-content: flex-end; }
.message-meta strong { color: var(--ink); font-size: 11px; }
.message-meta time { color: #a0adb5; font-size: 9px; }
.message-body p { margin: 0; padding: 11px 13px; border: 1px solid #e2e9ee; border-radius: 4px 12px 12px 12px; color: #536c7c; background: #fbfcfd; font-size: 12px; line-height: 1.6; }
.chat-message.user .message-body p { border-color: #d8e4ec; border-radius: 12px 4px 12px 12px; color: #fff; background: var(--navy); }
.ai-suggestions { padding: 15px 21px 4px; border-top: 1px solid #e9eef2; }
.ai-suggestions > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.ai-suggestions > div { display: flex; flex-wrap: wrap; gap: 6px; }
.suggestion-button { padding: 7px 9px; border: 1px solid #d9e5eb; border-radius: 7px; color: var(--teal); background: #f7fafb; font-size: 10px; cursor: pointer; }
.suggestion-button:hover { border-color: #aac3d0; color: var(--navy); background: #eef4f7; }
.ai-composer { display: flex; gap: 8px; padding: 13px 21px 0; }
.ai-composer input { min-width: 0; flex: 1; height: 39px; padding: 0 12px; border: 1px solid #c6d0da; border-radius: 8px; color: var(--navy); background: #fff; font-size: 12px; }
.ai-disclaimer { margin: 10px 21px 17px; color: #9aa8b1; font-size: 10px; }
.ai-context { padding: 21px; }
.ai-context h2 { margin: 6px 0 0; color: var(--navy); font-family: Cinzel, Georgia, serif; font-size: 23px; font-weight: 400; }
.ai-context > p { margin: 8px 0 19px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.ai-context-list { display: grid; gap: 0; }
.ai-context-list > div { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #e9eef2; }
.context-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--navy); background: #e8eef4; font-size: 14px; font-weight: 650; }
.context-icon.green { color: #4f877f; background: #e8f4f0; }
.context-icon.gold { color: #a77a32; background: #fff4df; }
.context-icon.lilac { color: #817ba2; background: #f0eef9; }
.ai-context-list strong, .ai-context-list small { display: block; }
.ai-context-list strong { color: var(--ink); font-size: 11px; }
.ai-context-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.ai-context-note { display: grid; gap: 4px; margin-top: 18px; padding: 12px; border-left: 2px solid var(--gold); color: #74888f; background: #fbf8f0; font-size: 10px; line-height: 1.5; }
.ai-context-note strong { color: #876b35; font-size: 10px; }

.transcript-student { min-width: 190px; padding: 14px 16px; border: 1px solid #dfe7ee; border-radius: 13px; background: linear-gradient(122deg, rgba(231, 245, 249, .8), rgba(235, 246, 238, .8)); }
.transcript-student span, .transcript-student small { display: block; color: #76919a; font-size: 11px; }
.transcript-student strong { display: block; margin: 3px 0; color: #2d566c; font-size: 16px; }
.document { padding: clamp(20px, 3vw, 34px); }
.document-heading { padding-bottom: 22px; border-bottom: 1px solid #e8eff1; }
.document-heading h2 { margin: 5px 0 0; color: var(--navy); font-family: Cinzel, Georgia, serif; font-size: 28px; font-weight: 400; }
.document-eyebrow, .document-id { color: #87999f; font-size: 11px; }
.document-id { white-space: nowrap; }
.transcript-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin: 21px 0 25px; }
.transcript-summary div { padding: 13px 14px; border: 1px solid #e1eaed; border-radius: 10px; background: #fbfdfd; }
.transcript-summary span, .transcript-summary strong { display: block; }
.transcript-summary span { color: #82969e; font-size: 10px; }
.transcript-summary strong { margin-top: 4px; color: #2b5669; font-size: 19px; }
.transcript-year { margin-top: 25px; padding-top: 21px; border-top: 1px solid #e8eff1; }
.transcript-year-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.transcript-year-heading h3 { margin: 0; color: #2b5669; font-family: Cinzel, Georgia, serif; font-size: 20px; font-weight: 400; }
.transcript-year-heading span { color: #82969e; font-size: 11px; }
.transcript-year h4 { margin: 20px 0 8px; color: #62818d; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.transcript-table-wrap { overflow-x: auto; }
.transcript-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.transcript-table th, .transcript-table td { padding: 9px 10px; border-top: 1px solid #edf2f3; color: #69838c; font-size: 11px; text-align: left; }
.transcript-table th { color: #8ca0a7; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.transcript-table td:not(:first-child), .transcript-table th:not(:first-child) { text-align: right; }
.transcript-table .total th, .transcript-table .total td { color: #2b5669; font-weight: 700; }
.simple-table { margin-bottom: 13px; }
.transcript-note { margin: 25px 0 0; padding: 13px 15px; border-left: 2px solid var(--gold); color: #71868d; background: #fbf8f0; font-size: 11px; }

.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 15px max(28px, calc((100vw - 1320px) / 2)); border-top: 1px solid #e2e9ee; color: #92a1ab; background: #fff; font-size: 10px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(0, 19, 36, .42); }
.modal { width: min(480px, 100%); padding: 25px; border: 1px solid #dfe7ee; border-radius: 15px; background: #fff; box-shadow: 0 22px 70px rgba(0, 20, 42, .22); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.modal-heading h2 { margin: 0; color: var(--navy); font-family: Cinzel, Georgia, serif; font-size: 27px; font-weight: 400; }
.modal-heading p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.close-button { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 21px; cursor: pointer; }
.close-button:hover { background: #f3f7f9; }
.amount-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0 15px; }
.amount-option { padding: 12px 4px; border: 1px solid var(--line); border-radius: 8px; color: var(--navy); background: #fff; font-size: 12px; font-weight: 650; cursor: pointer; }
.amount-option:hover, .amount-option.is-selected { border-color: var(--teal); background: #eef4f7; }
.modal label { display: grid; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 23px; }
.modal-help { margin: 0; padding: 11px 12px; color: #74888f; background: #fbf8f0; font-size: 11px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 30; max-width: 340px; padding: 12px 15px; border: 1px solid #d7e1e6; border-radius: 9px; color: var(--navy); background: #fff; box-shadow: var(--shadow); font-size: 12px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .topbar-tools { padding-right: 22px; }
  .topbar-tools { gap: 9px; }
  .profile strong, .connected { display: none; }
  .site-layout { grid-template-columns: 214px minmax(0, 1fr); }
  .overview-grid, .cafeteria-layout, .calendar-layout { grid-template-columns: 1fr; }
  .ai-layout { grid-template-columns: 1fr; }
  .calendar-details { order: -1; }
  .stats.manager-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .topbar { display: flex; min-height: 77px; padding-inline: 15px; }
  .brand { width: auto; height: auto; padding: 0; border-right: 0; }
  .brand img { width: 164px; }
  .brand span { font-size: 8px; }
  .role-switch a { padding-inline: 5px; font-size: 9px; }
  .site-layout { display: block; min-height: calc(100vh - 77px); }
  .sidebar { display: none; }
  .mobile-nav { display: flex; gap: 5px; overflow-x: auto; padding: 9px 14px; border-bottom: 1px solid var(--line); background: #fff; }
  .mobile-nav a { flex: 0 0 auto; width: auto; min-height: 36px; padding: 7px 10px; font-size: 10px; }
  .mobile-nav a svg { width: 15px; height: 15px; }
  .page-content { padding: 27px 15px 40px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .heading-actions { width: 100%; justify-content: space-between; }
  .heading-meta { margin-left: 4px; }
  .student-strip, .balance-card { align-items: flex-start; flex-direction: column; }
  .student-meta, .student-select { width: 100%; }
  .stats, .stats.manager-stats { grid-template-columns: 1fr; }
  .panel { padding: 18px 15px; }
  .ai-chat-header, .ai-suggestions, .ai-composer { padding-left: 15px; padding-right: 15px; }
  .ai-disclaimer { margin-left: 15px; margin-right: 15px; }
  .course-head { display: none; }
  .course-row { grid-template-columns: minmax(0, 1fr) 46px; gap: 10px; }
  .course-row .bar-group { grid-column: 1 / -1; grid-row: 2; }
  .calendar-day { min-height: 82px; padding: 7px; }
  .calendar-event { display: none; }
  .calendar-day.is-selected .calendar-event { display: block; }
  .transcript-summary { grid-template-columns: repeat(2, 1fr); }
  .document-heading { flex-direction: column; }
  .site-footer { flex-direction: column; padding-inline: 15px; }
  .search { min-width: 0; width: 100%; }
  .manager-toolbar { align-items: stretch; flex-direction: column; }
  .ai-demo-badge { align-self: flex-start; }
}