:root {
  --vidyam-navy: #39243a;
  --vidyam-navy-dark: #27192b;
  --vidyam-orange: #6c3167;
  --vidyam-orange-hover: #54254f;
  --vidyam-blue: #6c3167;
  --vidyam-page-bg: #faf8f6;
  --vidyam-surface: #fff;
  --vidyam-border: #e9e3e5;
  --vidyam-blue-soft: #f8eff6;
  --vidyam-text: #312b31;
  --vidyam-text-muted: #726b71;
  --vidyam-radius-sm: 12px;
  --vidyam-radius-md: 18px;
  --vidyam-radius-lg: 24px;
  --vidyam-shadow-card: 0 1px 2px rgba(49, 43, 49, .025);
  --vidyam-shadow-hover: 0 16px 32px rgba(49, 43, 49, .075);
}

html { scroll-behavior: smooth; }
body {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  background: var(--vidyam-page-bg);
  color: var(--vidyam-text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .96rem;
  -webkit-font-smoothing: antialiased;
}
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 1000; padding: .75rem 1rem; border-radius: .75rem; background: #fff; }
.skip-link:focus { top: 1rem; }
.workspace-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--vidyam-border); background: rgba(255, 255, 255, .94); backdrop-filter: blur(18px); }
.workspace-header-inner, .workspace-nav-inner { width: min(100% - 2.5rem, 1280px); margin-inline: auto; }
.workspace-header-inner { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 1rem; }
.workspace-brand { display: inline-flex; min-width: 0; align-items: center; gap: .9rem; color: var(--vidyam-text); text-decoration: none; }
.workspace-brand img { display: block; width: 147px; height: auto; max-height: 54px; object-fit: contain; object-position: left center; }
.workspace-brand-divider { width: 1px; height: 24px; background: var(--vidyam-border); }
.workspace-brand-label { color: var(--vidyam-text-muted); font-size: .85rem; font-weight: 550; letter-spacing: .01em; }
.workspace-header-actions { display: flex; align-items: center; gap: .8rem; }
.workspace-header-actions form { margin: 0; }
.workspace-user { display: flex; min-width: 0; align-items: center; gap: .6rem; font-size: .86rem; font-weight: 600; }
.workspace-user-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #f5e7f1; color: #6c3167; }
.workspace-user-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-signout, .workspace-back { border: 1px solid var(--vidyam-border); border-radius: 999px; padding: .55rem .9rem; background: #fff; color: var(--vidyam-text); text-decoration: none; font-size: .84rem; font-weight: 600; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.workspace-signout:hover, .workspace-back:hover { background: #f8f4f6; color: var(--vidyam-orange); }
.workspace-signout:active, .workspace-back:active { transform: scale(.98); }
.workspace-nav { border-top: 1px solid #f2eef0; }
.workspace-nav-inner { display: flex; align-items: center; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.workspace-nav-inner::-webkit-scrollbar { display: none; }
.workspace-nav a { flex: 0 0 auto; margin-block: .4rem; border-radius: 999px; padding: .58rem .88rem; color: #665d64; text-decoration: none; font-size: .85rem; font-weight: 560; white-space: nowrap; transition: background .18s ease, color .18s ease; }
.workspace-nav a:hover { background: #f6f1f5; color: var(--vidyam-orange); }
.workspace-nav a[aria-current="page"] { background: #f4e7f0; color: #602b5c; font-weight: 700; }
.workspace-main { flex: 1 0 auto; width: min(100% - 2.5rem, 1280px); max-width: 1280px !important; padding: clamp(1.5rem, 3.5vw, 3.25rem) 0 4rem !important; }
.workspace-main > .d-flex:first-child, .workspace-main > .mb-4:first-child { margin-bottom: 2rem !important; }
.workspace-main h1 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); letter-spacing: -.045em; line-height: 1.15; }
.workspace-main h2 { letter-spacing: -.025em; }
.workspace-main .display-6 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 650; letter-spacing: -.05em; }
.workspace-footer { display: flex; justify-content: space-between; gap: 1rem; width: min(100% - 2.5rem, 1280px); margin: auto auto 0; padding: 1.1rem 0 1.4rem; border-top: 1px solid var(--vidyam-border); color: var(--vidyam-text-muted); font-size: .78rem; }

main .card, .metric, .section-card { border: 1px solid var(--vidyam-border) !important; border-radius: var(--vidyam-radius-lg) !important; background: #fff; box-shadow: var(--vidyam-shadow-card); }
.metric { padding: 1.35rem !important; }
.metric-link, .section-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.metric-link:hover, .section-card:hover { border-color: #dbcbd7 !important; box-shadow: var(--vidyam-shadow-hover); transform: translateY(-2px); }
.section-card { min-height: 94px; padding: 1.2rem 1.25rem; gap: 1rem; }
.section-card strong { font-weight: 650; }
.section-card small { margin-top: .3rem; line-height: 1.4; }
.section-icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 14px; background: #faf2f7; font-size: 1.3rem; }
.section-heading { border-color: var(--vidyam-border); padding-bottom: .8rem; }
.teacher-work-pending { border-color: #efd4d5 !important; background: #fffafb !important; box-shadow: none; }
.teacher-work-clear { border-left-color: #6c9b83 !important; }
.birthday-card { border-radius: var(--vidyam-radius-md); }

.btn { min-height: 42px; border-radius: 12px; padding: .55rem 1rem; font-size: .87rem; letter-spacing: -.005em; }
.btn-primary { --bs-btn-bg: #6c3167; --bs-btn-border-color: #6c3167; --bs-btn-hover-bg: #54254f; --bs-btn-hover-border-color: #54254f; --bs-btn-active-bg: #4c2048; --bs-btn-active-border-color: #4c2048; }
.btn-outline-primary { --bs-btn-color: #6c3167; --bs-btn-border-color: #d9bfD5; --bs-btn-hover-bg: #6c3167; --bs-btn-hover-border-color: #6c3167; }
.btn-outline-secondary { --bs-btn-color: #514950; --bs-btn-border-color: #ded7dc; --bs-btn-hover-bg: #faf6f8; --bs-btn-hover-color: #6c3167; --bs-btn-hover-border-color: #cdbaca; }
.btn:active { transform: scale(.985); }
main :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) { min-height: 44px; border-color: #ded7dc; border-radius: 12px; background-color: #fff; }
main :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea):focus { border-color: #9d6a98; box-shadow: 0 0 0 3px rgba(108, 49, 103, .1); }
main .form-label { color: var(--vidyam-text); font-size: .85rem; font-weight: 650; }
main :where(a, button, input, select, textarea):focus-visible, .workspace-header :where(a, button):focus-visible { outline: 3px solid rgba(108, 49, 103, .38); outline-offset: 2px; }
.alert { border-radius: 15px; border-width: 1px; }
.badge { border-radius: 999px; padding: .45em .7em; }
.table-responsive { border: 1px solid var(--vidyam-border); background: #fff; }
main .table > thead { background: #faf7f9; color: #4b364a; }
main .table > :not(caption) > * > * { border-bottom-color: #f0ebee; padding: .85rem 1rem; }
main .table-hover > tbody > tr:hover > * { --bs-table-bg-state: #fdf9fc; }
.text-primary { color: #6c3167 !important; }
.role-student, .role-parent { background: var(--vidyam-page-bg); }

.login-page .workspace-header { position: relative; border-bottom: 0; background: transparent; backdrop-filter: none; }
.login-page .workspace-header-inner { min-height: 96px; }
.login-page .workspace-main { display: flex; align-items: center; padding-block: 1rem 5rem !important; }
.login-page .workspace-footer { border-top: 0; }
.auth-shell { display: grid; width: 100%; min-height: 580px; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--vidyam-border); border-radius: 30px; background: #fff; box-shadow: 0 24px 70px rgba(52, 33, 52, .07); }
.auth-story { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 4vw, 4rem); background: #f5eff3; }
.auth-story .eyebrow { color: #6c3167; font-size: .75rem; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.auth-story h2 { max-width: 430px; margin-top: 1.2rem; font-size: clamp(2.3rem, 4vw, 4rem); letter-spacing: -.06em; line-height: 1.05; }
.auth-story p { max-width: 430px; color: #675c66; line-height: 1.7; }
.auth-story-mark { width: min(100%, 400px); aspect-ratio: 1.8; align-self: center; border: 1px solid #e9dce7; border-radius: 28px; background: radial-gradient(circle at 68% 36%, #fff 0 19%, transparent 19.2%), radial-gradient(circle at 30% 70%, #e5cfde 0 31%, transparent 31.2%), #f8f4f7; }
.auth-form-panel { display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 5rem); }
.auth-form-inner { width: min(100%, 390px); }
.auth-form-inner h1 { margin-bottom: .5rem; font-size: clamp(2rem, 3vw, 2.7rem); }
.auth-form-inner .form-control { min-height: 52px; }
.auth-form-inner .btn { min-height: 52px; }

@media (max-width: 767px) {
  .workspace-header-inner, .workspace-nav-inner, .workspace-main, .workspace-footer { width: min(100% - 2rem, 1280px); }
  .workspace-header-inner { min-height: 68px; }
  .workspace-brand img { width: 124px; }
  .workspace-brand-label, .workspace-brand-divider, .workspace-user-name { display: none; }
  .workspace-header-actions { gap: .45rem; }
  .workspace-signout { padding: .5rem .68rem; }
  .workspace-nav a { padding: .55rem .75rem; }
  .workspace-main { padding-top: 1.6rem !important; }
  .workspace-footer { flex-direction: column; gap: .2rem; }
  .auth-shell { min-height: 0; grid-template-columns: 1fr; border-radius: 24px; }
  .auth-story { min-height: 170px; padding: 1.5rem; }
  .auth-story h2 { max-width: 300px; margin: .4rem 0; font-size: 2rem; }
  .auth-story p { margin-bottom: 0; font-size: .84rem; }
  .auth-story-mark { display: none; }
  .auth-form-panel { padding: 2rem 1.5rem 2.4rem; }
  .login-page .workspace-main { padding-block: 1rem 2rem !important; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .metric-link:hover, .section-card:hover { transform: none; } }