/* Screen-specific styles */

.text-error { color: var(--error-text); }
.text-info { color: var(--info-text); }
.mb-4 { margin-bottom: var(--sp-4); }
code { font-size: 0.92em; background: var(--surface-sunken); padding: 1px 6px; border-radius: 5px; }

/* ---------- Topbar extras ---------- */
.topbar__year { width: auto; min-width: 0; }
.topbar .topbar__search-btn { display: none; }
.child-switch {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 4px;
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-full);
  box-shadow: var(--shadow-xs); color: var(--text-2);
}
.child-switch:hover:not(:disabled) { border-color: var(--border-strong); }
.child-switch:disabled { cursor: default; padding-right: 14px; }
.child-switch__text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.child-switch__name { font-weight: 700; font-size: var(--fs-sm); color: var(--text); }
.child-switch__meta { font-size: 11px; color: var(--text-3); }
.child-pop { right: 0; top: calc(100% + 8px); min-width: 260px; }
.profile-pop { right: 0; top: calc(100% + 8px); min-width: 250px; }
.sidebar__footer .profile-pop { left: 0; right: auto; top: auto; bottom: calc(100% + 8px); }

.net-status {
  position: fixed; left: 50%; transform: translateX(-50%); top: calc(10px + var(--safe-top)); z-index: 1200;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
  padding: 10px 16px; border-radius: var(--r-full); background: var(--navy-800); color: #fff;
  font-size: var(--fs-sm); box-shadow: var(--shadow-lg);
}
.update-pill {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + var(--safe-bottom)); z-index: 1150;
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: var(--r-full);
  background: var(--navy-800); color: #fff; font-size: var(--fs-sm); box-shadow: var(--shadow-lg); white-space: nowrap;
}

/* ---------- Welcome panel ---------- */
.welcome {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-6);
  padding: var(--sp-8);
  border-radius: var(--r-xl);
  background: var(--brand-gradient);
  color: #fff;
  margin-bottom: var(--sp-5);
  box-shadow: 0 20px 40px -24px rgba(20, 33, 61, 0.6);
}
.welcome::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(600px 300px at 85% -10%, rgba(124, 58, 237, 0.45), transparent 60%), radial-gradient(400px 260px at 0% 120%, rgba(20, 184, 166, 0.25), transparent 60%);
}
.welcome__pattern { position: absolute; right: -20px; top: 0; height: 100%; width: 60%; z-index: -1; opacity: 0.9; pointer-events: none; }
.welcome__date { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.75); }
.welcome__demo { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.2); }
.welcome__title { color: #fff; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.03em; margin-top: var(--sp-3); }
.welcome__sub { color: rgba(255, 255, 255, 0.78); margin-top: 6px; font-size: var(--fs-md); }
.welcome__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.welcome__aside {
  align-self: stretch; display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-5); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
}
.welcome__aside-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); font-weight: 600; }
.welcome__big { font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.welcome__big span { font-size: 20px; color: rgba(255, 255, 255, 0.55); }
.welcome__aside-meta { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.75); }
.welcome__progress { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.16); overflow: hidden; margin: 6px 0 10px; }
.welcome__progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal-400), #A5F3FC); border-radius: inherit; }
.welcome__next { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); color: #fff; min-width: 0; margin-top: auto; }
.welcome__next:hover { text-decoration: none; }
.welcome__next:hover .fw-6 { text-decoration: underline; }
.welcome--compact { grid-template-columns: minmax(0, 1fr); }

/* ---------- KPI grid ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.kpi-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-grid .kpi__value { font-size: 26px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; white-space: nowrap; }
.delta--up { color: var(--success-text); }
.delta--down { color: var(--error-text); }

/* ---------- Dashboard grid ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5); }
.dash-span-4 { grid-column: span 4; }
.dash-span-6 { grid-column: span 6; }
.dash-span-8 { grid-column: span 8; }
.dash-span-12 { grid-column: 1 / -1; }

.att-overview { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-6); align-items: start; }
.att-overview__side { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Bar chart */
.chart { margin: 0; }
.chart__plot { position: relative; height: calc(var(--h) + 44px); padding-left: 38px; }
.chart__grid { position: absolute; left: 0; right: 0; top: 20px; height: var(--h); }
.chart__grid span { position: absolute; left: 38px; right: 0; border-top: 1px dashed var(--border); }
.chart__grid em { position: absolute; left: -38px; top: -8px; font-style: normal; font-size: 11px; color: var(--text-4); font-variant-numeric: tabular-nums; }
.chart__bars { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; height: 100%; align-items: end; }
.chart__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.chart__val { font-size: 11px; color: var(--text-3); font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--dur); }
.chart__col:hover .chart__val, .chart__col.is-current .chart__val { opacity: 1; }
.chart__bar {
  width: 100%; max-width: 34px; border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, var(--indigo-200), var(--indigo-100));
  transition: background var(--dur), transform var(--dur);
  transform-origin: bottom;
  animation: bar-grow var(--dur-slow) var(--ease) both;
}
[data-theme='dark'] .chart__bar { background: linear-gradient(180deg, rgba(129, 124, 250, 0.55), rgba(129, 124, 250, 0.25)); }
.chart__col:hover .chart__bar { background: linear-gradient(180deg, var(--indigo-300), var(--indigo-200)); }
.chart__col.is-current .chart__bar { background: linear-gradient(180deg, var(--primary), var(--violet-600)); }
@keyframes bar-grow { from { transform: scaleY(0.2); opacity: 0; } }
.chart__label { font-size: 11px; color: var(--text-3); display: flex; flex-direction: column; align-items: center; line-height: 1.2; height: 26px; }
.chart__label small { font-size: 10px; color: var(--text-4); }
.chart__col.is-current .chart__label { color: var(--primary-text); font-weight: 700; }

.stackbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface-sunken); }
.stackbar__seg { min-width: 4px; }
.stackbar__seg--present { background: var(--success); }
.stackbar__seg--late { background: var(--warning); }
.stackbar__seg--absent { background: var(--error); }
.stackbar__seg--leave { background: var(--info); }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.legend li { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.legend__num { font-weight: 700; font-size: var(--fs-sm); }

/* Shared list visuals */
.date-chip {
  width: 44px; height: 46px; flex: none; border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--cs, var(--surface-sunken)); color: var(--c, var(--text));
  border: 1px solid color-mix(in srgb, var(--c, var(--border)) 18%, transparent);
}
.date-chip__m { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; }
.date-chip__d { font-family: var(--font-display); font-size: 18px; font-weight: 800; line-height: 1.1; }
.date-chip--lg { width: 64px; height: 68px; }
.date-chip--lg .date-chip__d { font-size: 26px; }
.event-row .cat-dot { background: var(--c); }

.subject-icon { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: var(--primary-soft); color: var(--primary); }

.announce-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.announce-list--cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.announce { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.announce:last-child { border-bottom: 0; padding-bottom: 0; }
.announce-list--cols .announce { border-bottom: 0; padding: 0 0 0 var(--sp-4); border-left: 2px solid var(--primary-soft-2); }
.announce__title { font-size: var(--fs-base); font-weight: 700; font-family: var(--font-ui); letter-spacing: 0; }
.announce__body { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }

.activity-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.mini-activity { display: flex; flex-direction: column; gap: 4px; color: inherit; min-width: 0; }
.mini-activity:hover { text-decoration: none; }
.mini-activity__img { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: var(--surface-sunken); margin-bottom: 6px; }
.mini-activity__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.mini-activity:hover img { transform: scale(1.04); }
.mini-activity__count { position: absolute; right: 8px; bottom: 8px; display: inline-flex; gap: 4px; align-items: center; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-full); background: rgba(11, 19, 40, 0.65); color: #fff; }
.mini-activity__title { font-weight: 600; font-size: var(--fs-sm); }

/* Teacher class cards */
.class-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.class-card { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.class-card__name { font-size: var(--fs-lg); display: flex; align-items: center; gap: 8px; }
.class-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* ---------- Parent home ---------- */
.child-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--sp-6); border-radius: var(--r-xl); color: #fff;
  background: var(--brand-gradient); margin-bottom: var(--sp-4);
}
.child-hero .welcome__pattern { width: 70%; }
.child-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px 260px at 90% -20%, rgba(124, 58, 237, 0.45), transparent 60%); }
.child-hero__top { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.child-hero .avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); }
.child-hero__greet { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.7); }
.child-hero__name { color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.child-hero__meta { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.75); }
.child-hero__switch { margin-left: auto; padding: 4px 10px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.12); }
.child-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-6); }
.child-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; transition: background var(--dur); }
.child-stat:hover { background: rgba(255, 255, 255, 0.15); text-decoration: none; }
.child-stat__label { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.7); }
.child-stat__value { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.child-stat__meta { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.65); }

.today-strip { display: flex; gap: 0; margin-bottom: var(--sp-4); overflow: hidden; }
.today-strip__item { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4) var(--sp-5); min-width: 0; color: inherit; }
.today-strip__item + .today-strip__item { border-left: 1px solid var(--border); }
a.today-strip__item:hover { background: var(--surface-hover); text-decoration: none; }

.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.quick { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--sp-4) var(--sp-2); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: var(--fs-sm); text-align: center; transition: all var(--dur) var(--ease); }
.quick:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.quick:active { transform: scale(0.97); }
.quick__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.quick__icon--amber { background: var(--warning-soft); color: var(--warning-text); }
.quick__icon--violet { background: var(--cat-cultural-soft); color: var(--cat-cultural); }
.quick__icon--teal { background: var(--accent-soft); color: var(--accent-text); }

.fee-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.fee-summary__big { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }

/* ---------- Login ---------- */
.auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--surface); }
.auth__brand { position: relative; overflow: hidden; isolation: isolate; background: var(--brand-gradient); color: #fff; padding: var(--sp-10) clamp(32px, 5vw, 72px); display: flex; }
.auth__brand::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(700px 400px at 100% 0%, rgba(124, 58, 237, 0.5), transparent 60%), radial-gradient(500px 360px at 0% 100%, rgba(20, 184, 166, 0.3), transparent 60%);
}
.auth__brand::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64l28 16v32M28 64 0 80v32' fill='none' stroke='%23ffffff' stroke-opacity='.06'/%3E%3C/svg%3E");
  mask-image: linear-gradient(120deg, transparent 20%, #000 80%);
}
.auth__brand-inner { display: flex; flex-direction: column; gap: var(--sp-10); max-width: 520px; width: 100%; }
.auth__logo { height: 40px; width: auto; }
.auth__pitch { margin-top: auto; }
.auth__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); padding: 6px 12px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.85); }
.auth__headline { color: #fff; font-size: clamp(32px, 3.6vw, 46px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; margin-top: var(--sp-5); }
.auth__headline span { background: linear-gradient(90deg, #A5F3FC, #C4B5FD); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth__lede { color: rgba(255, 255, 255, 0.75); font-size: var(--fs-lg); margin-top: var(--sp-4); max-width: 44ch; }
.auth__features { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth__features li { display: flex; gap: 14px; align-items: flex-start; color: rgba(255, 255, 255, 0.72); font-size: var(--fs-sm); }
.auth__features li > .icon { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: var(--teal-400); }
.auth__features strong { display: block; color: #fff; font-weight: 600; font-size: var(--fs-base); }
.auth__school { display: flex; align-items: center; gap: 12px; padding: var(--sp-4); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); margin-top: auto; }
.auth__panel { display: grid; place-items: center; padding: var(--sp-10) var(--sp-6); background: var(--bg); }
.auth__card { width: min(460px, 100%); display: flex; flex-direction: column; gap: var(--sp-5); }
.auth__logo-mobile { display: none; height: 34px; width: auto; }
.auth__title { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.role-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 14px; border-radius: var(--r-lg); background: var(--surface); border: 1.5px solid var(--border);
  transition: all var(--dur) var(--ease);
}
.role-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.role-card[aria-checked='true'] { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12); background: color-mix(in srgb, var(--primary-soft) 40%, var(--surface)); }
.role-card__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-2); transition: all var(--dur); }
.role-card__label { font-weight: 700; font-size: var(--fs-sm); }
.role-card__desc { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.role-card__check { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; opacity: 0; transform: scale(0.6); transition: all var(--dur) var(--ease); }
.role-card[aria-checked='true'] .role-card__check { opacity: 1; transform: none; }
.auth__divider { display: flex; align-items: center; gap: 12px; color: var(--text-4); font-size: var(--fs-xs); }
.auth__divider::before, .auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ---------- Public pages ---------- */
.public-page { min-height: 100dvh; background: var(--bg); }
.public-header { display: flex; align-items: center; gap: var(--sp-4); padding: calc(14px + var(--safe-top)) var(--sp-6) 14px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.public-header__logo { height: 30px; width: auto; }
.public-header__school { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); padding-left: var(--sp-4); border-left: 1px solid var(--border); }
.public-main { padding: var(--sp-8) var(--sp-4) var(--sp-12); }
.public-main:focus { outline: none; }

/* ---------- Application form ---------- */
.apply { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-5); scroll-margin-top: 90px; }
.apply__card { padding: var(--sp-6); }
.apply__h { font-size: var(--fs-lg); outline: none; }
.apply__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.review-sec { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.file-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); min-width: 0; }
.file-row > .icon { color: var(--text-3); }
.success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-4) 0; }
.success__icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success); animation: pop var(--dur-slow) var(--ease) both; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }
.success__title { font-size: var(--fs-2xl); outline: none; }
.success__ref { display: flex; flex-direction: column; gap: 2px; padding: 12px 24px; border-radius: var(--r-md); border: 1px dashed var(--border-strong); background: var(--surface-2); }
.success__ref .num { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 0.02em; }
.success__next { text-align: left; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); max-width: 440px; counter-reset: n; }
.success__next li { display: flex; gap: 10px; }
.success__next li::before { counter-increment: n; content: counter(n); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text); font-size: 12px; font-weight: 700; display: grid; place-items: center; }

.option-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
.option-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.option-card input { accent-color: var(--primary); width: 18px; height: 18px; }
.seg-radio { position: relative; }
.seg-radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg-radio span { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 7px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.seg-radio input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.seg-radio input:focus-visible + span { box-shadow: var(--ring); }

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.stat-pill { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); text-align: left; transition: all var(--dur); box-shadow: var(--shadow-xs); }
.stat-pill:hover { border-color: var(--border-strong); }
.stat-pill.is-active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12); }
.stat-pill__num { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1; }
.stat-pill__label { font-size: var(--fs-sm); color: var(--text-3); }

/* ---------- Calendar ---------- */
.cal-card { overflow: hidden; }
.cal-toolbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); flex-wrap: wrap; }
.cal-title { font-size: var(--fs-xl); min-width: 160px; }
.cal-filters { display: flex; gap: 6px; padding: 0 var(--sp-5) var(--sp-4); overflow-x: auto; scrollbar-width: none; }
.cal-filters::-webkit-scrollbar { display: none; }
.cal-filters .chip { flex: none; height: 30px; font-size: var(--fs-xs); }
.cal-filters .chip .cat-dot { background: var(--c); }
.cal-grid { border-top: 1px solid var(--border); }
.cal-grid__head, .cal-grid__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-grid__head span { padding: 10px 12px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); }
.cal-day { position: relative; min-height: 112px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; min-width: 0; transition: background var(--dur-fast); }
.cal-grid__row .cal-day:last-child { border-right: 0; }
.cal-grid__row:last-child .cal-day { border-bottom: 0; }
.cal-day.is-out { background: var(--surface-2); }
.cal-day.is-out .cal-day__num { color: var(--text-4); }
.cal-day:hover { background: var(--surface-hover); }
.cal-day.is-selected { background: color-mix(in srgb, var(--primary-soft) 70%, transparent); }
.cal-day__btn { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: flex-start; padding: 6px; border-radius: 0; }
.cal-day__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 0; }
.cal-day__num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-day.is-today .cal-day__num { background: var(--primary); color: #fff; }
.cal-day__events { position: relative; z-index: 1; margin-top: 30px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; min-width: 0; }
.cal-pill { pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 5px; font-size: 11px; font-weight: 600; background: var(--cs); color: var(--c); border-left: 3px solid var(--c); min-width: 0; line-height: 1.5; }
.cal-pill:hover { text-decoration: none; filter: brightness(0.97); }
.cal-pill.is-draft { border-left-style: dashed; opacity: 0.75; }
.cal-pill__time { opacity: 0.75; font-weight: 500; flex: none; }
.cal-more { font-size: 11px; color: var(--text-3); padding-left: 6px; }
.cal-day__dots { display: none; }
.cal-day__dots .cat-dot { background: var(--c); width: 6px; height: 6px; }

.event-card { display: flex; gap: 12px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: inherit; transition: all var(--dur-fast); }
.event-card:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.event-card__bar { width: 4px; border-radius: 4px; background: var(--c); flex: none; }
.event-card.is-draft .event-card__bar { background: repeating-linear-gradient(180deg, var(--c) 0 4px, transparent 4px 7px); }
.event-card__cat { font-size: 11px; font-weight: 700; color: var(--c); text-transform: uppercase; letter-spacing: 0.04em; }
.event-card__title { display: block; font-weight: 700; font-size: var(--fs-sm); }
.event-card__meta { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.agenda { border-top: 1px solid var(--border); padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.agenda__day { display: flex; gap: var(--sp-4); }
.agenda__date { width: 48px; flex: none; display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.agenda__dow { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-3); }
.agenda__num { font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.agenda__day.is-today .agenda__num { color: var(--primary); }
.event-hero { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--cs); }

/* ---------- Students ---------- */
.profile-head { overflow: hidden; }
.profile-head__main { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-6); flex-wrap: wrap; }
.att-strip { display: flex; flex-wrap: wrap; gap: 4px; }
.att-strip__cell { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; }
.att-strip__cell--present { background: var(--success); }
.att-strip__cell--late { background: var(--warning); color: #3B2300; }
.att-strip__cell--absent { background: var(--error); }
.att-strip__cell--leave { background: var(--info); }
.st--late .st__mark { color: #3B2300; }
.class-switch { margin-bottom: var(--sp-4); max-width: 100%; }
.class-summary { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: center; padding: var(--sp-4) var(--sp-5); }
.class-summary__item { display: flex; flex-direction: column; }
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.roster-card { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); color: inherit; }
.roster-card:hover { text-decoration: none; }

/* ---------- Attendance ---------- */
.att-controls { display: flex; align-items: flex-end; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); flex-wrap: wrap; }
.att-controls .field { min-width: 220px; }
.att-controls__status { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; }
.att-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.att-summary__item { display: flex; flex-direction: column; gap: 2px; padding: 12px var(--sp-5); font-size: var(--fs-xs); color: var(--text-3); border-right: 1px solid var(--border); }
.att-summary__item:last-child { border-right: 0; }
.att-summary__num { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--text); }
.att-summary__item--present .att-summary__num { color: var(--success-text); }
.att-summary__item--late .att-summary__num { color: var(--warning-text); }
.att-summary__item--absent .att-summary__num { color: var(--error-text); }
.att-summary__item--leave .att-summary__num { color: var(--info-text); }
.roster-row { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-5); border-bottom: 1px solid var(--border); }
.roster-row:last-child { border-bottom: 0; }
.mark-group { display: inline-flex; gap: 4px; flex: none; }
.mark {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-2);
  transition: all var(--dur-fast) var(--ease);
}
.mark:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.mark:active:not(:disabled) { transform: scale(0.96); }
.mark:disabled { opacity: 0.6; }
.mark__short { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font-size: 10px; font-weight: 800; background: var(--surface-sunken); color: var(--text-3); }
.mark[aria-checked='true'] { color: #fff; }
.mark--present[aria-checked='true'] { background: var(--success); border-color: var(--success); }
.mark--late[aria-checked='true'] { background: var(--warning); border-color: var(--warning); color: #3B2300; }
.mark--absent[aria-checked='true'] { background: var(--error); border-color: var(--error); }
.mark--leave[aria-checked='true'] { background: var(--info); border-color: var(--info); }
.mark[aria-checked='true'] .mark__short { background: rgba(255, 255, 255, 0.24); color: inherit; }
.save-bar {
  position: sticky; bottom: 16px; z-index: 20; margin-top: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4); padding: 12px 12px 12px 20px;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.save-bar[data-dirty='true'] { border-color: var(--primary); }
.save-bar__text { flex: 1; font-size: var(--fs-sm); color: var(--text-2); }
.save-bar[data-dirty='true'] .save-bar__text { color: var(--primary-text); font-weight: 600; }
.is-current-row { background: var(--primary-soft); }

.att-cal { padding: 0 var(--sp-5) var(--sp-4); }
.att-cal__head, .att-cal__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.att-cal__head span { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-3); padding: 6px 0; }
.att-cal__row { margin-bottom: 6px; }
.att-cal__day { aspect-ratio: 1; min-height: 44px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; }
.att-cal__num { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.att-cal__tag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; padding: 0 5px; border-radius: 4px; color: #fff; }
.att-cal__day.is-out { visibility: hidden; }
.att-cal__day.is-weekend { background: transparent; border-style: dashed; color: var(--text-4); }
.att-cal__day.is-present { background: var(--success-soft); border-color: var(--success-border); }
.att-cal__day.is-present .att-cal__tag { background: var(--success); }
.att-cal__day.is-late { background: var(--warning-soft); border-color: var(--warning-border); }
.att-cal__day.is-late .att-cal__tag { background: var(--warning); color: #3B2300; }
.att-cal__day.is-absent { background: var(--error-soft); border-color: var(--error-border); }
.att-cal__day.is-absent .att-cal__tag { background: var(--error); }
.att-cal__day.is-leave { background: var(--info-soft); border-color: var(--info-border); }
.att-cal__day.is-leave .att-cal__tag { background: var(--info); }
.att-cal__day.is-today { box-shadow: 0 0 0 2px var(--primary); }

/* ---------- Leave ---------- */
.leave-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.leave-card { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); border-left: 3px solid var(--border-strong); }
.leave-card[data-status='pending'] { border-left-color: var(--warning); }
.leave-card[data-status='approved'] { border-left-color: var(--success); }
.leave-card[data-status='rejected'] { border-left-color: var(--error); }
.leave-card__head { display: flex; align-items: center; gap: var(--sp-3); }
.leave-card__reply { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); }

/* ---------- Fees ---------- */
.fee-hero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-6); padding: var(--sp-6); }
.fee-hero__amount { font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.fee-hero__main { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.fee-hero__side { display: flex; flex-direction: column; gap: var(--sp-3); }
.fee-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.fee-card { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.fee-card[data-status='overdue'] { border-color: var(--error-border); }
.fee-card__dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.fee-card__dl dt { font-size: 11px; color: var(--text-3); }
.fee-card__dl dd { margin: 0; font-size: var(--fs-sm); }

/* ---------- Homework ---------- */
.hw-list { display: flex; flex-direction: column; }
.hw-item { display: flex; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); align-items: flex-start; }
.hw-item:last-child { border-bottom: 0; }
.hw-item[data-state='draft'] { background: repeating-linear-gradient(135deg, transparent 0 12px, var(--surface-2) 12px 24px); }
.hw-item__title { font-family: var(--font-ui); font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.005em; }
.hw-item__actions { display: flex; align-items: center; gap: 4px; flex: none; }
.hw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.hw-card { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.hw-card[data-state='overdue'] { background: var(--surface-2); }
.hw-card__details summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--primary); list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.hw-card__details summary::-webkit-details-marker { display: none; }
.hw-card__details summary::after { content: '▾'; font-size: 11px; transition: transform var(--dur); }
.hw-card__details[open] summary::after { transform: rotate(180deg); }
.hw-card__details p { margin-top: 6px; }
.hw-card__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.hw-card__dates dt { font-size: 11px; color: var(--text-3); }
.hw-card__dates dd { margin: 0; font-size: var(--fs-sm); font-weight: 500; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); }
.file-chip:hover { border-color: var(--border-strong); color: var(--text); }

/* ---------- Activities ---------- */
.activity-feature { display: grid; grid-template-columns: 1.4fr 1fr; overflow: hidden; color: inherit; min-height: 300px; background: var(--navy-800); border-color: transparent; }
.activity-feature:hover { text-decoration: none; }
.activity-feature__img { position: relative; overflow: hidden; }
.activity-feature__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.activity-feature:hover .activity-feature__img img { transform: scale(1.03); }
.activity-feature__body { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-8); color: #fff; }
.activity-feature__title { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.activity-feature__desc { color: rgba(255, 255, 255, 0.75); }
.activity-feature .badge--primary { background: rgba(255, 255, 255, 0.14); color: #fff; }
.activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.activity-card { overflow: hidden; display: flex; flex-direction: column; color: inherit; }
.activity-card:hover { text-decoration: none; }
.activity-card__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-sunken); }
.activity-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.activity-card:hover .activity-card__img img { transform: scale(1.05); }
.activity-card__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-4); }
.activity-card__count { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-full); background: rgba(11, 19, 40, 0.65); color: #fff; }
.activity-card__draft { position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-full); background: var(--warning); color: #3B2300; }
.activity-card__body { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.activity-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.015em; }
.activity-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; background: var(--navy-800); }
.activity-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.activity-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 19, 40, 0.1) 30%, rgba(11, 19, 40, 0.85)); }
.activity-hero__content { position: relative; padding: var(--sp-8); color: #fff; display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.activity-hero__back { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.85); font-size: var(--fs-sm); font-weight: 600; margin-bottom: auto; width: max-content; padding: 6px 12px 6px 8px; border-radius: var(--r-full); background: rgba(11, 19, 40, 0.4); backdrop-filter: blur(6px); position: absolute; top: 20px; left: 20px; }
.activity-hero__back:hover { color: #fff; text-decoration: none; }
.activity-hero__title { color: #fff; font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.03em; }
.activity-hero__meta { color: rgba(255, 255, 255, 0.8); }
.activity-hero .badge--primary { background: rgba(255, 255, 255, 0.16); color: #fff; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); }
.gallery .media-thumb { border-radius: var(--r-md); }
.gallery .media-thumb img { transition: transform 400ms var(--ease); }
.gallery .media-thumb:hover img { transform: scale(1.05); }
.act-form { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-6); }

/* ---------- Notifications ---------- */
.notif-list .notif { padding-right: 56px; }
.notif-wrap { position: relative; }
.notif-toggle { position: absolute; right: 10px; bottom: 10px; color: var(--text-3); }

/* ---------- Settings ---------- */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: start; }
.settings-col { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.setting-row { display: flex; align-items: center; gap: var(--sp-4); padding: 8px 0; min-height: 44px; }
.setting-row + .setting-row { border-top: 1px solid var(--border); }
.settings-about { grid-column: 1 / -1; }
.install-steps li { padding-left: 12px; border-left: 2px solid var(--primary-soft-2); }
.more-profile { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); color: inherit; }
.more-profile:hover { text-decoration: none; }
.more-link { min-height: 60px; }
.more-link > .icon:last-child { color: var(--text-4); }

/* ---------- School ---------- */
.school-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 260px; display: flex; align-items: flex-end; background: var(--navy-800); }
.school-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.school-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 19, 40, 0.72) 0%, rgba(11, 19, 40, 0.35) 55%, rgba(11, 19, 40, 0) 85%), linear-gradient(180deg, rgba(11, 19, 40, 0) 15%, rgba(11, 19, 40, 0.9)); }
.school-hero__content { position: relative; display: flex; align-items: flex-end; gap: var(--sp-5); padding: var(--sp-8); width: 100%; color: #fff; flex-wrap: wrap; }
.school-hero__logo { width: 72px; height: 72px; flex: none; border-radius: 18px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--teal-500), var(--teal-700)); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 22px; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18); }
.school-hero__logo img { width: 100%; height: 100%; object-fit: cover; }
.school-hero__logo--edit { box-shadow: none; }
.school-hero__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: rgba(255, 255, 255, 0.65); }
.school-hero__name { color: #fff; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -0.03em; }
.school-hero__tag { color: rgba(255, 255, 255, 0.8); }
.facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: var(--sp-4); background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.fact { background: var(--surface); padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: 2px; }
.fact__label { font-size: var(--fs-xs); color: var(--text-3); }
.fact__value { font-weight: 700; font-family: var(--font-display); }
.about-text { font-size: var(--fs-md); line-height: 1.7; max-width: 70ch; }
.facility-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.facility { padding: var(--sp-5); display: flex; flex-direction: column; gap: 8px; }
.facility__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.facility__name { font-size: var(--fs-md); }
.contact-list { display: flex; flex-direction: column; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px var(--sp-5); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); min-width: 0; overflow-wrap: anywhere; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list li > .icon { color: var(--text-3); margin-top: 2px; }
.location { overflow: hidden; }
.location__art { position: relative; height: 140px; background: var(--primary-soft); color: var(--primary); }
.location__art svg { width: 100%; height: 100%; }
.location__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%); width: 46px; height: 46px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--primary); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-md); }
.location__pin .icon { rotate: 45deg; }
.cover-preview { aspect-ratio: 3 / 1.3; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface-sunken); }
.cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.repeat { display: flex; flex-direction: column; gap: 8px; }
.repeat__row { display: flex; gap: 8px; align-items: center; }
.repeat__row .input:first-of-type { max-width: 240px; }
.repeat__icon { width: 170px; flex: none; }
.cal-filters .chip[aria-pressed='true'] { background: var(--cs); color: var(--c); border-color: color-mix(in srgb, var(--c) 25%, transparent); }
.cal-filters .chip[aria-pressed='false'] { color: var(--text-3); }
.cal-filters .chip[aria-pressed='false'] .cat-dot { background: var(--border-strong); }

/* QA pass: month pills put the title first (time on its own line), filters wrap on wide screens */
.cal-pill { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; padding: 3px 6px; }
.cal-pill > .truncate { max-width: 100%; }
.cal-pill__time { font-size: 10px; }
@media (min-width: 1024px) { .cal-filters { flex-wrap: wrap; overflow: visible; } }
.list-row > .subject-icon { margin-right: 2px; }
.welcome__date > span { flex: none; max-width: 100%; }

/* ---------- Sign-in: centred layout with role-themed cards ---------- */
.auth--center { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: clamp(24px, 5vh, 56px) var(--sp-4); background: var(--bg); }
.auth__wrap { width: min(560px, 100%); display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-6); }
.auth--center .auth__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); }
.auth--center .auth__logo { height: 36px; display: block; }
.auth--center .auth__eyebrow { margin-top: var(--sp-2); color: var(--text-2); background: var(--surface); border: 1px solid var(--border); }
.auth--center .auth__headline { color: var(--text); font-size: clamp(26px, 3.2vw, 36px); margin: 0; }
.auth--center .auth__headline span { background: linear-gradient(90deg, #5B5BF0, #0D9488); -webkit-background-clip: text; background-clip: text; color: transparent; }

.auth--center .auth__card {
  --rc1: #818CF8; --rc2: #4F46E5; --rc-soft: #EEF0FF;
  width: 100%; gap: var(--sp-5); padding: clamp(20px, 4vw, 32px); border-radius: 28px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  transition: box-shadow var(--dur) var(--ease);
}
.auth__card[data-role='teacher'] { --rc1: #2DD4BF; --rc2: #0D9488; --rc-soft: #E6FAF7; }
.auth__card[data-role='parent'] { --rc1: #FBBF24; --rc2: #EA580C; --rc-soft: #FFF4E5; }
.auth__card-head { text-align: center; }
.auth--center .auth__title { font-size: 24px; }

.auth--center .role-grid { gap: var(--sp-3); }
.auth--center .role-card { --c1: #818CF8; --c2: #4F46E5; --cs: #EEF0FF;
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 18px 10px 14px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--surface);
  overflow: hidden; isolation: isolate; transition: transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur);
}
.auth--center .role-card--teacher { --c1: #2DD4BF; --c2: #0D9488; --cs: #E6FAF7; }
.auth--center .role-card--parent { --c1: #FBBF24; --c2: #EA580C; --cs: #FFF4E5; }
.auth--center .role-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 56%; z-index: -1; background: linear-gradient(180deg, var(--cs), transparent); }
.auth--center .role-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c2) 40%, var(--border)); box-shadow: var(--shadow-md); }
.auth--center .role-card[aria-checked='true'] { border-color: var(--c2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c2) 16%, transparent), var(--shadow-md); background: var(--surface); }
.auth--center .role-card[aria-checked='true']::before { height: 100%; background: linear-gradient(180deg, var(--cs), color-mix(in srgb, var(--cs) 30%, var(--surface))); }
.auth--center .role-card__label { font-size: var(--fs-base); font-weight: 800; font-family: var(--font-display); color: var(--text); }
.auth--center .role-card[aria-checked='true'] .role-card__label { color: var(--c2); }
.role-card__perks { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--text-3); line-height: 1.35; }
.auth--center .role-card__check { top: 10px; right: 10px; background: var(--c2); }
.auth--center .role-card__icon .glass-ico__front { border-color: #fff; }

.auth__submit { color: #fff; border: 0; background: linear-gradient(135deg, var(--rc1), var(--rc2)); box-shadow: 0 10px 24px -10px var(--rc2); transition: background var(--dur), box-shadow var(--dur), transform var(--dur-fast); }
.auth__submit:hover { color: #fff; filter: brightness(1.05); box-shadow: 0 14px 28px -10px var(--rc2); }
.auth--center .input:focus { border-color: var(--rc2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc2) 18%, transparent); }

.auth__foot { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; }
.auth--center .auth__features { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.auth--center .auth__features li { align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; }
.auth--center .auth__features li .icon { color: var(--primary); }

[data-theme='dark'] .auth--center .role-card--admin { --cs: rgba(99, 102, 241, 0.16); }
[data-theme='dark'] .auth--center .role-card--teacher { --cs: rgba(20, 184, 166, 0.16); }
[data-theme='dark'] .auth--center .role-card--parent { --cs: rgba(245, 158, 11, 0.16); }

@media (max-width: 520px) {
  .auth--center { place-items: start center; }
  .auth--center .role-grid { gap: var(--sp-2); }
  .auth--center .role-card { padding: 14px 6px 12px; border-radius: 16px; }
  .role-card__perks { display: none; }
  .auth--center .auth__headline { font-size: 24px; }
  .auth--center .auth__eyebrow { display: none; }
}
.auth--center .auth__logo--ondark { display: none; }
[data-theme='dark'] .auth--center .auth__logo--onlight { display: none; }
[data-theme='dark'] .auth--center .auth__logo--ondark { display: block; }
.auth--center .auth__headline span { display: block; }
.role-card__short { display: none; }
@media (max-width: 520px) {
  .role-card__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .role-card__short { display: inline; }
  .auth--center .role-card__check { top: 6px; right: 6px; width: 18px; height: 18px; }
}

/* Featured activity: brand gradient + tiled HexaClass logo pattern */
.activity-feature__body { position: relative; isolation: isolate; overflow: hidden; }
.activity-feature__body::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(420px 300px at 100% 0%, rgba(167, 139, 250, 0.55), transparent 65%),
    radial-gradient(360px 260px at 0% 100%, rgba(45, 212, 191, 0.35), transparent 65%),
    linear-gradient(155deg, #1E1B4B 0%, #312E81 45%, #4338CA 80%, #6D28D9 100%);
}
.activity-feature__body::after {
  content: ''; position: absolute; inset: -20px; z-index: -1; opacity: 0.22;
  background: url("../assets/images/pattern-hexaclass.svg") 0 0 / 96px auto repeat;
  transform: rotate(-8deg);
  -webkit-mask-image: linear-gradient(200deg, #000 15%, rgba(0, 0, 0, 0.55) 45%, transparent 78%);
  mask-image: linear-gradient(200deg, #000 15%, rgba(0, 0, 0, 0.55) 45%, transparent 78%);
  transition: transform 1.2s var(--ease);
}
.activity-feature:hover .activity-feature__body::after { transform: rotate(-8deg) translate(6px, -4px); }
@media (prefers-reduced-motion: reduce) { .activity-feature__body::after { transition: none; } }

/* Extracurricular chips with tinted icons */
.activity-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.activity-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-2);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--ac) 18%, var(--border));
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.activity-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px var(--ac); }
.activity-chip__icon {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--ac);
  background: radial-gradient(circle at 30% 25%, #fff, color-mix(in srgb, var(--ac) 16%, #fff));
  box-shadow: inset 0 -2px 4px color-mix(in srgb, var(--ac) 14%, transparent), 0 3px 6px -3px color-mix(in srgb, var(--ac) 60%, transparent);
}
[data-theme='dark'] .activity-chip__icon { color: color-mix(in srgb, var(--ac) 60%, #fff); background: color-mix(in srgb, var(--ac) 22%, var(--surface)); }
[data-style='v2'] .activity-chip { background: var(--glass-strong); }

/* Fees: collection by category tiles */
.progress span.progress__bar { display: block; }
.cat-progress { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); }
.cat-progress__item { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); }
.cat-progress__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cat-progress__name { font-weight: 700; font-size: var(--fs-sm); line-height: 1.3; min-width: 0; }
.cat-progress__pct { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-top: 2px; }
.cat-progress__pct small { font-size: 15px; font-weight: 700; color: var(--text-3); }
.cat-progress__pct span { margin-left: 6px; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.cat-progress__bar { height: 8px; }
.cat-progress__bar .progress__bar { background: linear-gradient(90deg, var(--g1), var(--g2)); }
.cat-progress__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-3); }
.cat-progress__foot strong { color: var(--text); font-weight: 700; }
.cat-progress__due, .cat-progress__done { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.cat-progress__due { background: var(--warning-soft); color: var(--warning-text); }
.cat-progress__done { background: var(--success-soft); color: var(--success-text); }
[data-style='v2'] .cat-progress__item { background: var(--glass); border-color: var(--glass-border); border-radius: 20px; }
.auth--center { position: relative; }

/* Sign-in in dark mode: lighter accents on dark surfaces, deeper button fill under white text */
[data-theme='dark'] .auth--center .role-card[aria-checked='true'] .role-card__label { color: color-mix(in srgb, var(--c1) 70%, #fff); }
[data-theme='dark'] .auth--center .auth__headline span,
[data-style='v2'][data-theme='dark'] .auth__headline span { background: linear-gradient(90deg, #A5B4FC, #5EEAD4); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme='dark'] .auth__submit { background: linear-gradient(135deg, color-mix(in srgb, var(--rc2) 86%, #000), color-mix(in srgb, var(--rc2) 66%, #000)); }
.setting-row > .segmented { flex: none; }
@media (max-width: 479px) { .setting-row:has(> .segmented) { flex-wrap: wrap; } }

/* Sign-in hover states */
.auth__submit:hover { background: linear-gradient(135deg, var(--rc1), var(--rc2)); transform: translateY(-1px); }
[data-theme='dark'] .auth__submit:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--rc2) 92%, #fff), color-mix(in srgb, var(--rc2) 72%, #000)); }
.auth__submit:active { transform: translateY(0); }
.auth__tools .icon-btn:hover { background: var(--surface); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: var(--shadow-md); transform: translateY(-1px); }
[data-style='v2'] .auth__tools .icon-btn:hover { background: color-mix(in srgb, var(--surface) 96%, transparent); }
[data-theme='dark'] .auth__tools .icon-btn:hover { color: #C7CBFE; }
[data-theme='dark'] .auth__tools .theme-toggle:hover .theme-toggle__sun { color: #FDE68A; }
.auth__tools .icon-btn { transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur), transform var(--dur-fast); }
.auth--center .role-card__icon { width: 46px; height: 46px; margin-bottom: 6px; background: none; }
@media (max-width: 479px) { .auth--center .role-card__icon { margin-bottom: 4px; } }