:root {
  color-scheme: light;
  --brand-primary: #667eea;
  --brand-accent: #20c997;
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  --danger-gradient: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
  --warning-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --info-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --dark-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  --ink: #2d3748;
  --muted: #718096;
  --brand: #667eea;
  --brand-dark: #654aa4;
  --brand-soft: #f0f1ff;
  --surface: #fff;
  --surface-soft: #f7fafc;
  --bg: #f3f5f9;
  --body-bg: linear-gradient(180deg, #f8f9fc 0, #f1f3f8 100%);
  --header-bg: rgba(255, 255, 255, .96);
  --footer-bg: #fff;
  --input-bg: #fbfcfe;
  --panel-bg: #fbfcfe;
  --note-bg: #fffdf8;
  --note-line: #f2e7ce;
  --control-bg: #f8f9fd;
  --control-active: #fff;
  --type-bg: #eef0ff;
  --type-ink: #5e55a0;
  --line: #e2e8f0;
  --success: #11998e;
  --success-soft: #e7f8f3;
  --danger: #ed4051;
  --danger-soft: #fff0f2;
  --warning: #e89234;
  --warning-soft: #fff5e8;
  --info: #318fca;
  --info-soft: #eaf8fd;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, .1);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, .15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--body-bg);
  color: var(--ink);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  line-height: 1.6;
}
.container { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
.public-home-page .container { width: min(1200px, calc(100% - 80px)); }
.page { width: 100%; flex: 1; padding-block: 26px 58px; }
.public-home-page .page { padding-block: 28px 64px; }
.skip-link { position: fixed; inset: 10px auto auto 10px; z-index: 50; padding: 9px 13px; border-radius: 9px; background: var(--ink); color: var(--surface); text-decoration: none; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.card, .modern-card-match {
  background: var(--surface);
  border: 0;
  border-radius: 20px;
  box-shadow: var(--card-shadow);
}

/* Shared chrome: deliberately quiet so the report card remains dominant. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 16px rgba(45, 55, 72, .06);
}
.header-row { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mark {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-gradient);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  box-shadow: 0 7px 17px rgba(102, 126, 234, .28);
}
.brand-image-wrap {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 7px 17px rgba(45,55,72,.1);
}
.brand-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 5px;
}
.brand-copy { display: grid; line-height: 1.2; }
.brand-copy strong { font-size: 1rem; }
.brand-copy small { color: var(--brand-dark); font-size: .72rem; letter-spacing: .08em; }
.header-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.center-name { max-width: 270px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: .78rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.center-name i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.header-actions form { margin: 0; }
.header-button {
  padding: 7px 12px;
  border: 1px solid #d9def0;
  border-radius: 9px;
  background: var(--control-bg);
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.theme-switcher { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--control-bg); }
.theme-switcher button { min-width: 46px; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 7px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }.theme-switcher button span { font-size: .92rem; line-height: 1; }.theme-switcher button small { font-size: .65rem; font-weight: 800; }.theme-switcher button[aria-pressed="true"] { background: var(--control-active); color: var(--ink); box-shadow: 0 2px 8px rgba(45,55,72,.12); }.theme-switcher button:focus-visible { outline: 3px solid rgba(102,126,234,.25); outline-offset: 2px; }
.site-footer { padding: 20px 0; border-top: 1px solid var(--line); background: var(--footer-bg); color: var(--muted); text-align: center; font-size: .78rem; }
.site-footer .container { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.site-footer strong { color: var(--ink); }.site-footer span::before { content: "·"; margin-inline-end: 9px; }

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 19px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .header-button:focus-visible, .brand:focus-visible, a:focus-visible { outline: 3px solid rgba(102,126,234,.3); outline-offset: 3px; }
.button-primary { background: var(--primary-gradient); color: #fff; box-shadow: 0 6px 15px rgba(102, 126, 234, .26); }
.button-soft { border-color: #e0e3f8; background: var(--brand-soft); color: var(--brand-dark); }
.button-outline { border-color: var(--line); background: var(--surface); color: var(--brand-dark); }
.button-wide { width: 100%; }
.button-small { min-height: 36px; padding: 6px 14px; font-size: .82rem; }
.eyebrow { display: block; margin-bottom: 4px; color: #667eea; font-size: .76rem; font-weight: 900; }
.back-link, .breadcrumb a { color: #667eea; text-decoration: none; font-weight: 800; }
.back-link { display: inline-flex; margin-bottom: 13px; font-size: .86rem; }
.kicker { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--brand-dark); font-size: .8rem; font-weight: 800; }
.kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: #11998e; box-shadow: 0 0 0 4px #e7f8f3; }

/* Landing and authentication share the Desktop gradients and white cards. */
.landing-grid { min-height: calc(100vh - 190px); display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 56px; padding-block: 30px; }
.landing-copy h1 { max-width: 650px; margin: 17px 0 13px; font-size: clamp(2.25rem, 5vw, 3.85rem); line-height: 1.15; letter-spacing: -.03em; }
.lead { max-width: 620px; margin: 0; color: var(--muted); font-size: 1.03rem; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
.privacy-note { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--muted); font-size: .84rem; }
.privacy-note span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--success-soft); color: var(--success); font-weight: 900; }
.landing-preview { position: relative; padding: 30px; }
.preview-glow { position: absolute; inset: 0; border-radius: 35px; background: var(--primary-gradient); opacity: .22; transform: rotate(-4deg); }
.preview-card { position: relative; padding: 24px; border-radius: 20px; background: var(--surface); box-shadow: var(--card-hover-shadow); }
.preview-heading { display: flex; align-items: center; gap: 12px; }
.preview-heading div { display: grid; }
.preview-heading small { color: var(--muted); }
.avatar-placeholder { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-gradient); color: #fff; font-weight: 900; }
.preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0; }
.preview-stats span { display: grid; padding: 11px; border-radius: 11px; background: var(--surface-soft); color: var(--muted); text-align: center; font-size: .7rem; }
.preview-stats b { color: var(--ink); font-size: 1.15rem; }
.preview-line { height: 8px; margin: 11px 0; overflow: hidden; border-radius: 999px; background: #edf0f5; }
.preview-line i { display: block; height: 100%; border-radius: inherit; background: var(--primary-gradient); }
.preview-line.line-a i { width: 92%; }.preview-line.line-b i { width: 74%; }.preview-line.line-c i { width: 83%; }

.auth-page .page { display: grid; align-items: center; }
.auth-shell { width: min(510px, 100%); margin: 16px auto; }
.auth-card { position: relative; overflow: hidden; padding: clamp(24px,5vw,36px); border: 1px solid rgba(226,232,240,.75); box-shadow: 0 24px 65px rgba(40,49,86,.13); }
.auth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--primary-gradient); }
.auth-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 14px; background: var(--primary-gradient); color: #fff; font-size: 1.4rem; font-weight: 900; }
.auth-icon-accent { background: var(--info-gradient); }.auth-icon-success { background: var(--success-gradient); }
.auth-heading h1 { margin: 2px 0 7px; font-size: 1.75rem; letter-spacing: -.02em; }.auth-heading p { margin: 0 0 23px; color: var(--muted); font-size: .91rem; }
.form-stack { display: grid; gap: 16px; }.form-stack label > span { display: block; margin-bottom: 5px; font-size: .87rem; font-weight: 800; }
.form-stack input { width: 100%; height: 49px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--input-bg); color: var(--ink); font: inherit; outline: none; }
.form-stack input:focus { border-color: #8193e7; background: var(--surface); box-shadow: 0 0 0 4px rgba(102, 126, 234, .13); }
.admin-field-grid select, .admin-field-grid input, .admin-field-grid textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
  outline: none;
}
.admin-field-grid select:focus, .admin-field-grid input:focus, .admin-field-grid textarea:focus {
  border-color: #8193e7;
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(102,126,234,.13);
}
.form-stack input::placeholder { color: #a0a8b8; }
.forgot-placeholder { justify-self: start; margin-top: -8px; color: var(--muted); font-size: .78rem; }.forgot-placeholder small { margin-inline-start: 5px; padding: 2px 7px; border-radius: 99px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 800; }
.alert { display: grid; gap: 2px; margin: 0 0 18px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent); border-radius: 11px; background: var(--danger-soft); color: var(--danger); font-size: .84rem; }
.auth-divider { display: flex; align-items: center; gap: 11px; margin: 20px 0; color: var(--muted); font-size: .78rem; text-align: center; }.auth-divider::before,.auth-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.auth-alternative { text-align: center; }.auth-alternative strong { font-size: .91rem; }.auth-alternative p { margin: 3px 0 12px; color: var(--muted); font-size: .82rem; }.form-hint { margin: 14px 0 0; color: var(--muted); font-size: .78rem; text-align: center; }

/* Children picker */
.page-heading { margin-bottom: 22px; }.page-heading h1 { margin: 7px 0 2px; font-size: clamp(1.9rem, 4vw, 2.7rem); }.page-heading p { margin: 0; color: var(--muted); }
.portal-picker-shell { width: min(1120px,100%); margin-inline: auto; }
.portal-picker-cover { position: relative; min-height: 178px; display: grid; place-items: center; margin-bottom: 0; padding: 34px clamp(18px,4vw,44px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line)); border-radius: 24px 24px 0 0; background: var(--primary-gradient); color: #fff; text-align: center; box-shadow: 0 18px 55px rgba(32,43,78,.12); }
.portal-picker-cover::after { content: ""; position: absolute; width: 280px; height: 280px; inset: -170px auto auto -90px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.05), 0 0 0 78px rgba(255,255,255,.035); }
.portal-cover-context { position: absolute; inset: 16px 18px auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgba(255,255,255,.76); font-size: .7rem; font-weight: 800; }
.portal-cover-context span { max-width: min(42vw, 260px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; background: rgba(255,255,255,.08); }
.portal-cover-title { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 13px; }
.portal-cover-title > div { display: grid; text-align: right; }
.portal-cover-title h1 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.35rem); line-height: 1.2; }
.portal-cover-title p { margin: 3px 0 0; color: rgba(255,255,255,.8); font-size: .93rem; }
.portal-secure-chip { position: absolute; inset: auto auto 15px 18px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.78); font-size: .7rem; font-weight: 900; }
.portal-picker-panel { overflow: hidden; padding: clamp(16px,3vw,28px); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 24px 24px; box-shadow: 0 18px 55px rgba(32,43,78,.12); }
.portal-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.portal-picker-header h2 { margin: 2px 0 0; font-size: clamp(1.05rem,2vw,1.35rem); }
.portal-count-badge { flex: none; padding: 6px 11px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: .74rem; font-weight: 900; }
.portal-student-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 16px; align-items: stretch; }
.portal-student-grid.single-child-grid { grid-template-columns: minmax(0, 520px); justify-content: center; }
.portal-student-card { position: relative; display: grid; gap: 16px; min-height: 100%; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 72%, transparent), var(--surface)); box-shadow: 0 12px 30px rgba(32,43,78,.08); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.portal-student-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--primary-gradient); }
.portal-student-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); box-shadow: 0 18px 40px rgba(32,43,78,.13); }
.portal-student-main { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 15px; align-items: center; }
.portal-student-avatar { width: 96px; height: 96px; display: grid; place-items: center; overflow: hidden; border: 4px solid color-mix(in srgb, var(--surface) 82%, transparent); border-radius: 50%; background: var(--primary-gradient); color: #fff; font-size: 2.25rem; font-weight: 900; box-shadow: 0 10px 24px rgba(0,0,0,.14), 0 0 0 5px color-mix(in srgb, var(--brand) 13%, transparent); }
.portal-student-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.portal-student-copy { min-width: 0; display: grid; justify-items: start; gap: 6px; }
.portal-student-copy h3 { width: 100%; margin: 0; color: var(--ink); font-size: 1.18rem; line-height: 1.35; overflow-wrap: anywhere; }
.portal-student-copy p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.portal-student-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 0; }
.portal-student-meta div { min-width: 0; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--line) 82%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--surface) 72%, var(--surface-soft)); }
.portal-student-meta dt { color: var(--muted); font-size: .68rem; font-weight: 800; }
.portal-student-meta dd { margin: 2px 0 0; color: var(--ink); font-size: .82rem; font-weight: 900; overflow-wrap: anywhere; }
.portal-student-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.portal-report-state { display: inline-flex; align-items: center; gap: 7px; color: var(--success); font-size: .74rem; font-weight: 900; }
.portal-report-state i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px var(--success-soft); }
.empty-state { grid-column: 1/-1; padding: 48px 22px; text-align: center; }.empty-state h2 { margin: 8px 0 2px; }.empty-state p { margin: 0; color: var(--muted); }.empty-icon { width: 55px; height: 55px; display: grid; place-items: center; margin: auto; border-radius: 50%; background: var(--primary-gradient); color: #fff; font-size: 1.5rem; }
.portal-empty-state { border: 1px solid var(--line); box-shadow: none; }
.center-text { padding: 45px 22px; text-align: center; }

/* Teacher-branded center and auth pages */
.teacher-landing-shell { width: min(1120px,100%); margin-inline: auto; display: grid; gap: 22px; }
.teacher-landing-hero { display: grid; grid-template-columns: 380px minmax(0,1fr); gap: clamp(22px,4vw,48px); align-items: center; padding: clamp(22px,4vw,38px); border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(135deg,color-mix(in srgb, var(--brand) 8%, var(--surface)),var(--surface)); box-shadow: var(--card-shadow); }
.teacher-identity-card { display: grid; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 16px 42px rgba(45,55,72,.1); }
.teacher-avatar { width: 104px; height: 104px; display: grid; place-items: center; overflow: hidden; border-radius: 28px; background: var(--primary-gradient); color: #fff; font-size: 2.1rem; font-weight: 900; box-shadow: 0 14px 34px rgba(102,126,234,.24); }
.teacher-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.teacher-identity-copy { display: grid; gap: 6px; }.teacher-identity-copy h2 { margin: 0; font-size: clamp(1.35rem,3vw,2rem); }.teacher-identity-copy strong { color: var(--brand-dark); }.teacher-identity-copy p { margin: 0; color: var(--muted); line-height: 1.8; }
.teacher-hero-copy h1 { margin: 16px 0 10px; font-size: clamp(2rem,4.5vw,3.5rem); line-height: 1.08; letter-spacing: -.035em; }.teacher-hero-copy > p { max-width: 620px; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.9; }
.teacher-how-card { padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--card-shadow); text-align: center; }
.teacher-step-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 16px; text-align: right; }
.teacher-step-grid article { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); }.teacher-step-grid b { width: fit-content; padding: 5px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: .72rem; }.teacher-step-grid span { color: var(--muted); font-size: .85rem; line-height: 1.7; }
.teacher-auth-shell { width: min(980px,100%); margin: 18px auto; display: grid; grid-template-columns: 360px minmax(0,1fr); gap: 18px; align-items: stretch; }
.teacher-auth-identity { align-content: center; }.teacher-auth-shell .auth-card { margin: 0; }

/* Public product home and branded application states. */
.public-home-page .site-header { position: sticky; }
.public-hero { min-height: min(640px, calc(100vh - 130px)); display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.82fr); align-items: center; gap: clamp(34px,5vw,68px); padding: clamp(38px,6vw,72px) 0 46px; overflow: hidden; }
.configurable-home { --primary-gradient: linear-gradient(135deg,var(--brand-primary),var(--brand-accent)); --brand: var(--brand-primary); --accent: var(--brand-accent); }
.branded-home-hero { position: relative; }
.branded-home-hero::before { content: ""; position: absolute; inset: 7% -6% auto auto; width: min(340px,38vw); height: min(340px,38vw); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 68%); pointer-events: none; opacity: .55; }
.public-hero-copy { position: relative; z-index: 1; }
.product-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #dfe4f6; border-radius: 99px; background: var(--surface); color: var(--brand-dark); font-size: .78rem; font-weight: 800; box-shadow: 0 5px 18px rgba(45,55,72,.05); }.product-pill span { color: var(--success); }
.public-hero h1 { max-width: 680px; margin: 18px 0 14px; color: var(--ink); font-size: clamp(2.55rem,5vw,4.25rem); line-height: 1.08; letter-spacing: -.04em; overflow-wrap: anywhere; }.public-hero h1 em { background: var(--primary-gradient); background-clip: text; color: transparent; font-style: normal; }
.public-hero-copy > p { max-width: 620px; margin: 0; color: var(--muted); font-size: 1.05rem; }
.public-logo { max-width: 130px; max-height: 70px; object-fit: contain; display: block; margin-bottom: 14px; }
.public-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.public-visual-shell { position: relative; z-index: 1; min-width: 0; max-width: 100%; }
.public-banner-card { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--card-shadow); }
.public-banner-card img { width: 100%; height: min(420px,55vh); display: block; object-fit: cover; }
.public-contact-note, .public-coming-soon { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); }
.public-coming-soon { display: grid; gap: 5px; margin: 0 0 40px; }
.public-coming-soon strong { color: var(--ink); }
.public-service-card { max-width: 640px; display: flex; align-items: flex-start; gap: 14px; margin-top: 27px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg,color-mix(in srgb, var(--brand-primary) 7%, var(--surface)),var(--surface)); box-shadow: var(--card-shadow); }.public-service-card div:last-child { display: grid; gap: 3px; }.public-service-card strong { color: var(--ink); }.public-service-card small { color: var(--muted); line-height: 1.7; }
.public-guidance { max-width: 600px; display: flex; align-items: center; gap: 14px; margin-top: 27px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--card-shadow); }.guidance-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 13px; background: var(--primary-gradient); color: #fff; font-size: 1.2rem; }.public-guidance div { display: grid; }.public-guidance small { color: var(--muted); }
.public-safety { display: flex; align-items: center; gap: 8px; margin-top: 18px !important; font-size: .8rem !important; }.public-safety span { color: var(--success); }
.public-product-card { position: relative; width: min(100%, 500px); max-width: 100%; padding: 26px; border: 1px solid rgba(255,255,255,.55); border-radius: 25px; background: var(--surface); box-shadow: 0 26px 62px rgba(56,65,106,.16); transform: rotate(-1deg); }.public-product-card::before { content: ""; position: absolute; z-index: -1; inset: -14px; border-radius: 36px; background: var(--primary-gradient); opacity: .14; transform: rotate(4deg); }
.product-card-head, .product-student { display: flex; align-items: center; gap: 12px; }.product-card-head > div, .product-student > div { display: grid; }.product-card-head small, .product-student small { color: var(--muted); }.product-mark { flex: none; }
.product-card-logo { width: 39px; height: 39px; flex: none; display: block; object-fit: contain; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 7px 17px rgba(45,55,72,.1); }
.product-student { margin: 24px 0; padding: 18px; border-radius: 17px; background: var(--surface-soft); }.product-student > span { width: 54px; height: 54px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--success-gradient); color: #fff; font-size: 1.25rem; font-weight: 900; }
.product-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }.product-metrics span { display: grid; padding: 12px; border: 1px solid var(--line); border-radius: 12px; text-align: center; }.product-metrics b { font-size: 1.2rem; }.product-metrics small { color: var(--muted); }
.product-bars { display: grid; gap: 10px; margin-top: 23px; }.product-bars i { position: relative; height: 8px; overflow: hidden; border-radius: 99px; background: var(--surface-soft); }.product-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 80%; border-radius: inherit; background: var(--primary-gradient); }.product-bars .bar-92::after { width: 92%; }.product-bars .bar-76::after { width: 76%; }.product-bars .bar-84::after { width: 84%; }
.public-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: -10px 0 28px; }
.public-feature-card { position: relative; overflow: hidden; min-height: 180px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--card-shadow); }
.public-feature-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--primary-gradient); }
.public-feature-card span { display: inline-flex; margin-bottom: 28px; padding: 6px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: .72rem; font-weight: 900; }
.public-feature-card h2 { margin: 0 0 8px; font-size: 1.04rem; }
.public-feature-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.75; }
.public-section-intro { max-width: 780px; margin: -12px auto 18px; text-align: center; }.public-section-intro h2 { margin: 8px 0; font-size: clamp(1.45rem,3vw,2.2rem); }.public-section-intro p { margin: 0; color: var(--muted); line-height: 1.8; }
.public-contact-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 28px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(135deg,color-mix(in srgb, var(--brand-primary) 8%, var(--surface)),var(--surface)); box-shadow: var(--card-shadow); }
.public-contact-panel h2 { margin: 5px 0 7px; }.public-contact-panel p { margin: 0; color: var(--muted); }.public-contact-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.public-directory-section { margin: 18px 0 54px; padding: clamp(24px,4vw,38px); border: 1px solid var(--line); border-radius: 30px; background: radial-gradient(circle at 16% 0,color-mix(in srgb, var(--brand-accent) 16%, transparent),transparent 34%),linear-gradient(135deg,color-mix(in srgb, var(--brand-primary) 10%, var(--surface)),var(--surface)); box-shadow: var(--card-shadow); }
.directory-intro { margin: 0 auto 24px; }
.public-directory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: stretch; }
.directory-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 18px; min-height: 245px; padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg,color-mix(in srgb, var(--surface-soft) 58%, var(--surface)),var(--surface)); box-shadow: 0 12px 32px rgba(45,55,72,.08); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.directory-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--line)); box-shadow: var(--card-hover-shadow); }
.directory-card-featured::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--primary-gradient); }
.directory-avatar { width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; border-radius: 20px; background: var(--primary-gradient); color: #fff; font-size: 1.55rem; font-weight: 900; box-shadow: 0 10px 24px rgba(102,126,234,.22); }
.directory-avatar-large { width: 92px; height: 92px; border-radius: 26px; box-shadow: 0 16px 28px rgba(78,115,223,.18); }
.directory-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.directory-avatar-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 30% 20%,rgba(255,255,255,.28),transparent 34%),var(--primary-gradient); font-size: 2rem; }
.directory-card-body { min-width: 0; display: grid; gap: 9px; align-content: start; }
.directory-card-body h3 { margin: 0; font-size: 1.14rem; line-height: 1.35; }
.directory-card-body strong { color: var(--ink); font-size: .9rem; }
.directory-card-body p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.7; }
.directory-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.directory-subject, .directory-featured { width: fit-content; display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: .7rem; font-weight: 900; }
.directory-featured { gap: 4px; background: var(--success-soft); color: var(--success); border: 1px solid rgba(32,201,151,.22); }
.directory-center-name { display: inline-flex; width: fit-content; max-width: 100%; padding: 7px 10px; border-radius: 12px; background: var(--surface-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.directory-cta { align-self: end; margin-top: 6px; box-shadow: 0 12px 24px color-mix(in srgb, var(--brand-primary) 22%, transparent); }
.state-card { width: min(560px,100%); margin: 7vh auto; padding: 48px 28px; text-align: center; }.state-code { display: inline-block; margin-bottom: 10px; color: var(--brand); font-size: .72rem; font-weight: 900; letter-spacing: .14em; }.state-icon { width: 72px; height: 72px; display: grid; place-items: center; margin: auto; border-radius: 22px; background: var(--primary-gradient); color: #fff; font-size: 2rem; box-shadow: 0 13px 30px rgba(102,126,234,.27); }.state-icon-muted { background: var(--dark-gradient); box-shadow: 0 13px 30px rgba(44,62,80,.2); }.state-card h1 { margin: 19px 0 7px; }.state-card p { max-width: 440px; margin: 0 auto 22px; color: var(--muted); }

/* Desktop report visual match */
.report-page { width: min(1160px, 100%); margin-inline: auto; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin: 0 3px 13px; color: var(--muted); font-size: .82rem; }
.desktop-report-card { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 18px 55px rgba(32,43,78,.12); }
.report-cover { position: relative; min-height: 142px; display: grid; place-items: center; padding: 27px clamp(18px,4vw,42px); overflow: hidden; background: var(--primary-gradient); color: #fff; text-align: center; }.report-cover::after { content: ""; position: absolute; width: 250px; height: 250px; inset: -150px auto auto -80px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.04), 0 0 0 70px rgba(255,255,255,.03); }
.report-cover-context { position: absolute; inset: 16px 18px auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgba(255,255,255,.74); font-size: .68rem; font-weight: 700; }.report-cover-context span { padding: 4px 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; background: rgba(255,255,255,.08); }
.report-cover-title { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; }.report-cover-title > div { display: grid; text-align: right; }.report-cover h1 { margin: 0; font-size: 1.72rem; line-height: 1.2; }.report-cover p { margin: 2px 0 0; color: rgba(255,255,255,.78); font-size: .83rem; }
.report-cover-updated { position: absolute; inset: auto auto 13px 18px; color: rgba(255,255,255,.72); font-size: .65rem; }.report-cap-badge, .report-cap { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.2); color: #fff; font-size: 1.45rem; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.32); box-shadow: 0 10px 24px rgba(0,0,0,.15); transition: transform .3s ease; }
.report-cap-badge:hover, .report-cap:hover { transform: scale(1.08) rotate(-4deg); background: rgba(255,255,255,.28); }
.report-body { padding: clamp(15px,3vw,28px); }

.student-information-card { overflow: hidden; margin-bottom: 24px; border: 1px solid var(--line); }
.panel-gradient-title { display: flex; align-items: center; gap: 10px; padding: 13px 17px; background: var(--primary-gradient); color: #fff; }.panel-gradient-title h2 { margin: 0; font-size: .98rem; }.panel-title-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 99px; background: rgba(255,255,255,.17); font-size: .62rem; }
.student-information-body { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 28px; padding: 24px 28px 26px; }
.student-avatar-column { display: grid; justify-items: center; gap: 12px; }
.desktop-student-avatar { width: 142px; height: 142px; display: grid; place-items: center; overflow: hidden; border: 4px solid rgba(255,255,255,.7); border-radius: 50%; background: var(--primary-gradient); color: #fff; font-size: 3.4rem; font-weight: 900; box-shadow: 0 6px 20px rgba(0,0,0,.15), 0 0 0 4px rgba(102,126,234,.12); }.desktop-student-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }.student-photo-form { display: grid; gap: 8px; justify-items: center; width: min(100%, 220px); }.student-photo-form input[type="file"] { max-width: 100%; font-size: .78rem; }
.modern-badge { display: inline-flex; align-items: center; justify-content: center; padding: 5px 11px; border-radius: 999px; font-size: .72rem; font-weight: 800; }.badge-success { background: var(--success-gradient); color: #fff; }.badge-warning { background: var(--warning-gradient); color: #fff; }
.student-name-row { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }.student-name-row h2 { margin: 0; font-size: 1.65rem; }.detail-overline { color: var(--muted); font-size: .72rem; }.report-updated-chip { padding: 6px 10px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: .7rem; white-space: nowrap; }
.desktop-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px 22px; }
.desktop-detail-item { display: flex; align-items: center; gap: 11px; min-width: 0; }.detail-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: 11px; color: #fff; font-size: .95rem; font-weight: 900; }.detail-primary .detail-icon { background: var(--primary-gradient); }.detail-success .detail-icon { background: var(--success-gradient); }.detail-info .detail-icon { background: var(--info-gradient); }.detail-warning .detail-icon { background: var(--warning-gradient); }
.desktop-detail-item div { min-width: 0; display: grid; }.desktop-detail-item small { color: var(--muted); font-size: .7rem; }.desktop-detail-item strong { overflow: hidden; color: var(--ink); font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.student-birth-date-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 14px; }.student-birth-date-form label { display: grid; gap: 5px; min-width: min(100%, 190px); }.student-birth-date-form span { color: var(--muted); font-size: .72rem; font-weight: 800; }.student-birth-date-form input { height: 38px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--input-bg); color: var(--ink); font: inherit; }
.student-information-body { align-items: stretch; grid-template-columns: minmax(184px, 230px) minmax(0, 1fr); }
.student-avatar-column { align-self: stretch; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 18px 14px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); }
.student-details-column { min-width: 0; display: grid; align-content: center; }
.avatar-photo-form { display: grid; justify-items: center; gap: 10px; width: 100%; margin: 0; }
#student-photo-input { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.student-photo-picker { position: relative; cursor: pointer; user-select: none; transition: border-color .3s ease, box-shadow .3s ease; }
.student-photo-picker.photo-selected-active { border-color: #20c997 !important; box-shadow: 0 0 0 4px rgba(32,201,151,.35), 0 8px 25px rgba(0,0,0,.2) !important; animation: pulse-avatar-ring 2s infinite ease-in-out; }
@keyframes pulse-avatar-ring {
  0% { box-shadow: 0 0 0 4px rgba(32,201,151,.35), 0 8px 25px rgba(0,0,0,.2); }
  50% { box-shadow: 0 0 0 8px rgba(32,201,151,.18), 0 12px 30px rgba(0,0,0,.25); }
  100% { box-shadow: 0 0 0 4px rgba(32,201,151,.35), 0 8px 25px rgba(0,0,0,.2); }
}
.avatar-img-wrapper { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--primary-gradient); position: relative; z-index: 1; }
.avatar-current-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar-initial-letter { color: #ffffff; font-size: 3.4rem; font-weight: 900; line-height: 1; display: grid; place-items: center; width: 100%; height: 100%; }
.student-photo-picker span:not(.photo-change-overlay) { display: grid; place-items: center; width: 100%; height: 100%; }
.photo-change-overlay { position: absolute; z-index: 2; inset: auto 13px 12px; display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(15,23,42,.82); color: #fff; font-size: .7rem; font-weight: 900; opacity: .92; backdrop-filter: blur(10px); }
.photo-save-button { min-height: 33px; padding-inline: 13px; background: var(--dark-gradient); color: #fff; box-shadow: none; transition: transform .2s ease, background .3s ease; }
.photo-save-button.photo-save-pulse { background: linear-gradient(135deg, #1cc88a, #13855c) !important; color: #ffffff !important; font-weight: 900 !important; transform: scale(1.05); box-shadow: 0 6px 20px rgba(28,200,138,.35) !important; }
.photo-selected-status { max-width: 180px; color: var(--muted); font-size: .66rem; font-weight: 800; line-height: 1.5; text-align: center; transition: color .3s ease; }
.photo-selected-status.status-success-active { color: #20c997 !important; font-weight: 900 !important; }
.visually-hidden-file,.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.inline-birth-date-form { margin: 0; padding: 0; border: 0; background: transparent; }.inline-birth-date-form .birth-date-inline { min-width: 0; display: grid; gap: 6px; }.inline-birth-date-form label { min-width: 0; display: block; }.inline-birth-date-form input { width: min(100%, 165px); height: 34px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--input-bg); color: var(--ink); font: inherit; font-size: .78rem; }.inline-birth-date-form .button { width: fit-content; min-height: 31px; padding: 5px 10px; font-size: .7rem; }
.student-quick-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }.student-quick-badges span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--surface-soft); color: var(--ink); font-size: .75rem; font-weight: 800; }.student-quick-badges small { color: var(--muted); font-size: .65rem; font-weight: 700; }

.desktop-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 16px; margin: 0 0 24px; }
.desktop-stat-card { position: relative; overflow: hidden; min-height: 168px; padding: 19px; border: 1px solid rgba(226,232,240,.75); border-radius: 17px; background: var(--surface); box-shadow: 0 8px 25px rgba(45,55,72,.08); transition: transform .25s ease, box-shadow .25s ease; }.desktop-stat-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--primary-gradient); }.desktop-stat-card.stat-success::before { background: var(--success-gradient); }.desktop-stat-card.stat-info::before { background: var(--info-gradient); }.desktop-stat-card.stat-warning::before { background: var(--warning-gradient); }.desktop-stat-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow); }
.desktop-stat-card.stat-remaining::before { background: var(--dark-gradient); }.desktop-stat-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.desktop-stat-heading > div { display: grid; text-align: left; }.desktop-stat-heading strong { color: var(--ink); font-size: 1.25rem; line-height: 1.2; }.desktop-stat-heading small { color: var(--muted); font-size: .72rem; }.desktop-stat-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: var(--primary-gradient); color: #fff; font-size: 1.15rem; font-weight: 900; }.stat-success .desktop-stat-icon { background: var(--success-gradient); }.stat-info .desktop-stat-icon { background: var(--info-gradient); }.stat-warning .desktop-stat-icon { background: var(--warning-gradient); }.stat-remaining .desktop-stat-icon { background: var(--dark-gradient); }
.desktop-progress { width: 100%; height: 8px; margin: 18px 0 13px; overflow: hidden; border: 0; border-radius: 10px; background: var(--surface-soft); appearance: none; }.desktop-progress::-webkit-progress-bar { background: var(--surface-soft); }.desktop-progress::-webkit-progress-value { border-radius: 10px; background: var(--primary-gradient); }.desktop-progress::-moz-progress-bar { border-radius: 10px; background: var(--primary-gradient); }.stat-success .desktop-progress::-webkit-progress-value { background: var(--success-gradient); }.stat-success .desktop-progress::-moz-progress-bar { background: var(--success-gradient); }.stat-info .desktop-progress::-webkit-progress-value { background: var(--info-gradient); }.stat-info .desktop-progress::-moz-progress-bar { background: var(--info-gradient); }.stat-warning .desktop-progress::-webkit-progress-value { background: var(--warning-gradient); }.stat-warning .desktop-progress::-moz-progress-bar { background: var(--warning-gradient); }.stat-remaining .desktop-progress::-webkit-progress-value { background: var(--dark-gradient); }.stat-remaining .desktop-progress::-moz-progress-bar { background: var(--dark-gradient); }
.stat-badges { display: flex; flex-wrap: wrap; gap: 5px; }.stat-badges span { padding: 4px 7px; border-radius: 999px; color: #fff; font-size: .65rem; font-weight: 800; }.mini-success { background: var(--success-gradient); }.mini-danger { background: var(--danger-gradient); }.mini-warning { background: var(--warning-gradient); }
.stat-footer { display: flex; align-items: center; justify-content: space-between; gap: 7px; }.stat-footer small { color: var(--muted); font-size: .66rem; text-align: left; }

.status-badge, .type-badge, .record-count { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; white-space: nowrap; font-size: .7rem; font-weight: 800; }.status-badge { padding: 5px 9px; }.status-success { background: var(--success-soft); color: var(--success); }.status-danger { background: var(--danger-soft); color: var(--danger); }.status-warning { background: var(--warning-soft); color: var(--warning); }.status-info { background: var(--info-soft); color: var(--info); }.status-neutral { background: var(--surface-soft); color: var(--muted); }.type-badge { padding: 5px 9px; background: var(--type-bg); color: var(--type-ink); }.record-count { padding: 5px 9px; background: var(--surface-soft); color: var(--muted); }

.records-card { overflow: hidden; }.records-card-header { padding: 17px 20px; background: var(--dark-gradient); color: #fff; }.records-card-header h2 { margin: 0; font-size: 1rem; }.records-card-header p { margin: 2px 0 0; color: rgba(255,255,255,.7); font-size: .72rem; }
.rankings-panel { overflow: hidden; margin: 0 0 24px; }.rankings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 18px; }.ranking-mini-card { display: flex; align-items: center; gap: 15px; min-height: 122px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel-bg); }.ranking-mini-card small { display: block; color: var(--muted); font-size: .72rem; font-weight: 800; }.ranking-mini-card strong { display: block; color: var(--ink); font-size: 1.7rem; line-height: 1.1; margin: 4px 0; }.ranking-mini-card span:last-child { color: var(--muted); font-size: .78rem; }.ranking-icon { width: 56px; height: 56px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 16px; color: #fff; font-size: 1.45rem; font-weight: 900; box-shadow: 0 12px 24px rgba(0,0,0,.12); }.ranking-group .ranking-icon { background: var(--success-gradient); }.ranking-grade .ranking-icon { background: var(--primary-gradient); }
.record-panel { margin: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }.record-panel + .record-panel { margin-top: 20px; }
.record-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--panel-bg); }.record-panel-title > div { display: flex; align-items: center; gap: 10px; }.record-panel-title h3 { margin: 0; font-size: .9rem; }.record-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: #fff; font-size: .85rem; font-weight: 900; }.gradient-primary { background: var(--primary-gradient); }.gradient-success { background: var(--success-gradient); }.gradient-info { background: var(--info-gradient); }.gradient-warning { background: var(--warning-gradient); }
.table-wrap { overflow: auto; }.desktop-table { width: 100%; border-collapse: collapse; }.desktop-table th { padding: 11px 14px; background: var(--primary-gradient); color: #fff; text-align: right; white-space: nowrap; font-size: .72rem; font-weight: 700; }.desktop-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .79rem; vertical-align: middle; }.desktop-table tbody tr:last-child td { border-bottom: 0; }.desktop-table tbody tr:hover { background: var(--surface-soft); }.grade-percent { color: var(--success); font-weight: 900; }.empty-row td { padding: 23px !important; color: var(--muted); text-align: center !important; }
.financial-summary-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; background: var(--line); }.financial-summary-grid div { display: grid; gap: 2px; padding: 16px; background: var(--surface); text-align: center; }.financial-summary-grid small { color: var(--muted); font-size: .68rem; }.financial-summary-grid strong { font-size: .84rem; }
.desktop-notes-list { display: grid; gap: 9px; padding: 14px; }.desktop-note { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid var(--note-line); border-radius: 12px; background: var(--note-bg); }.note-symbol { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 9px; background: var(--warning-soft); color: var(--warning); font-size: 1.35rem; font-weight: 900; }.desktop-note p { margin: 0; white-space: pre-wrap; }.desktop-note small { color: var(--muted); font-size: .68rem; }.empty-note { padding: 18px; color: var(--muted); text-align: center; }.report-footnote { display: grid; justify-items: center; gap: 3px; margin: 24px 0 0; padding: 19px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; font-size: .72rem; }.report-footnote strong { color: var(--ink); font-size: .8rem; }.report-footnote small { color: var(--muted); }

/* Professional report polish: calmer cards and compact utility icons. */
.desktop-report-card { box-shadow: 0 14px 42px rgba(15,23,42,.18); }
.report-cover { min-height: 124px; background: linear-gradient(135deg, #6878dc 0%, #7650a5 100%); }
.report-cover::after { opacity: .72; }
.panel-gradient-title { background: linear-gradient(135deg, #6476dd 0%, #744fa3 100%); }
.student-avatar-column { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 70%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)); }
.desktop-student-avatar { width: 128px; height: 128px; box-shadow: 0 5px 16px rgba(0,0,0,.18), 0 0 0 4px rgba(102,126,234,.1); }
.detail-icon { width: 34px; height: 34px; border-radius: 9px; font-size: .78rem; }
.desktop-stat-card { min-height: 142px; padding: 16px; border-radius: 14px; box-shadow: 0 6px 18px rgba(15,23,42,.12); }
.desktop-stat-card:hover { transform: translateY(-1px); box-shadow: 0 10px 25px rgba(15,23,42,.16); }
.desktop-stat-icon { width: 42px; height: 42px; border-radius: 11px; font-size: .95rem; }
.modern-badge, .status-badge, .type-badge, .record-count { font-weight: 800; }
.mini-success, .mini-danger, .mini-warning, .badge-success, .badge-warning { background-image: none; }
.mini-success, .badge-success { background: var(--success-soft); color: var(--success); }
.mini-danger { background: var(--danger-soft); color: var(--danger); }
.mini-warning, .badge-warning { background: var(--warning-soft); color: var(--warning); }
.records-card-header { background: #2e4255; }
.record-panel { border-radius: 12px; }
.record-panel-title { padding: 12px 14px; }
.record-icon { width: 30px; height: 30px; border-radius: 8px; font-size: .72rem; }
.gradient-primary, .gradient-success, .gradient-info, .gradient-warning,
.ranking-group .ranking-icon, .ranking-grade .ranking-icon { background-image: none; }
.gradient-primary { background: #6b6edf; }
.gradient-success { background: #1fa477; }
.gradient-info { background: #22a9d6; }
.gradient-warning { background: #d86b9e; }
.rankings-grid { gap: 12px; padding: 15px; }
.ranking-mini-card { min-height: 104px; padding: 15px; border-radius: 12px; box-shadow: none; }
.ranking-icon { width: 44px; height: 44px; border-radius: 11px; font-size: 1rem; box-shadow: none; }
.ranking-group .ranking-icon { background: #1fa477; }
.ranking-grade .ranking-icon { background: #6b6edf; }
.ranking-mini-card strong { font-size: 1.45rem; }
.desktop-table th { background: #6472d9; font-size: .7rem; }
.desktop-table td { padding: 11px 13px; }
.note-symbol { width: 26px; height: 26px; border-radius: 8px; font-size: .8rem; }
.desktop-note { border-radius: 10px; }
.desktop-detail-item strong[dir="ltr"] { direction: ltr; unicode-bidi: plaintext; text-align: left; }
.student-information-body { gap: 24px; }
.desktop-details-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px 16px; }
.desktop-detail-item { padding: 4px 0; }
.rankings-panel .records-card-header { background: #176fcf; }
.ranking-mini-card { position: relative; display: grid; grid-template-rows: auto 1fr; justify-items: center; align-items: stretch; gap: 0; overflow: hidden; min-height: 210px; padding: 0; text-align: center; background: #eef1f7; }
.ranking-mini-card::before { content: ""; display: block; width: 100%; height: 48px; background: #3158c9; }
.ranking-group::before { background: #15966d; }
.ranking-mini-card > div { display: grid; justify-items: center; align-content: center; gap: 8px; width: 100%; padding: 18px 18px 20px; }
.ranking-icon { position: absolute; inset-block-start: 64px; width: 38px; height: 38px; border-radius: 50%; background: transparent !important; color: #f4b92d; font-size: 1.15rem; }
.ranking-mini-card strong { margin: 36px 0 0; color: #f4b92d; font-size: 3rem; text-shadow: 0 2px 4px rgba(244,185,45,.18); }
.ranking-mini-card small { position: absolute; inset-block-start: 13px; color: #fff; font-size: .86rem; }
.ranking-mini-card div > span:not(.ranking-progress) { color: var(--ink); }
.ranking-progress { width: 100%; height: 10px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, #f4b92d 18%, var(--line)); }
.ranking-progress i { display: block; height: 100%; border-radius: inherit; background: #f4b92d; }
.panel-title-icon i,
.detail-icon i,
.desktop-stat-icon i,
.record-icon i,
.note-symbol i,
.ranking-icon i { display: block; line-height: 1; }
.detail-icon { font-size: .95rem; }
.desktop-stat-icon { font-size: .95rem; }
.record-icon { font-size: .82rem; }
.note-symbol { font-size: .78rem; }
.ranking-mini-card { position: relative; display: grid; grid-template-rows: auto 1fr; justify-items: center; align-items: stretch; gap: 0; overflow: hidden; min-height: 220px; padding: 0; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.ranking-mini-card::before { content: ""; display: block; width: 100%; height: 48px; background: #3158c9; }
.ranking-group::before { background: #15966d; }
.ranking-mini-card > div { display: grid; justify-items: center; align-content: center; gap: 8px; width: 100%; padding: 18px 18px 20px; }
.ranking-icon { position: absolute; inset-block-start: 66px; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, #f4b92d 15%, var(--surface)) !important; color: #f4b92d; font-size: 1.3rem; box-shadow: 0 4px 12px rgba(0,0,0,.15); display: grid; place-items: center; }
.ranking-mini-card strong { margin-top: 68px; color: #f4b92d; font-size: 2.5rem; line-height: 1.1; text-shadow: 0 2px 4px rgba(244,185,45,.18); letter-spacing: 0; }
.ranking-mini-card small { position: absolute; inset-block-start: 14px; color: #fff; font-size: .88rem; font-weight: 800; }
.ranking-mini-card div > span:not(.ranking-progress) { padding: 5px 12px; border-radius: 999px; background: var(--surface-soft); color: var(--ink); font-size: .78rem; font-weight: 900; }
.ranking-progress { width: 100%; height: 8px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, #f4b92d 18%, var(--line)); }
.ranking-progress i { display: block; height: 100%; border-radius: inherit; background: #f4b92d; }
.ranking-percentile-note { position: static !important; display: block; margin-top: 4px; color: var(--muted); font-size: .76rem !important; font-weight: 700; }

/* Ranking Tier Styling matching Desktop App Gold/Silver/Bronze/Blue badges */
.rank-tier-gold .ranking-icon { color: #f6c23e; background: color-mix(in srgb, #f6c23e 18%, var(--surface)) !important; text-shadow: 0 0 10px rgba(246,194,62,.5); }
.rank-num-gold { color: #f6c23e !important; text-shadow: 0 2px 6px rgba(246,194,62,.25) !important; }
.badge-tier-gold { background: #f6c23e !important; color: #1a202c !important; font-weight: 900 !important; }

.rank-tier-silver .ranking-icon { color: #858796; background: color-mix(in srgb, #858796 18%, var(--surface)) !important; text-shadow: 0 0 10px rgba(133,135,150,.5); }
.rank-num-silver { color: #858796 !important; text-shadow: 0 2px 6px rgba(133,135,150,.25) !important; }
.badge-tier-silver { background: #858796 !important; color: #ffffff !important; font-weight: 900 !important; }

.rank-tier-bronze .ranking-icon { color: #e74a3b; background: color-mix(in srgb, #e74a3b 18%, var(--surface)) !important; text-shadow: 0 0 10px rgba(231,74,59,.5); }
.rank-num-bronze { color: #e74a3b !important; text-shadow: 0 2px 6px rgba(231,74,59,.25) !important; }
.badge-tier-bronze { background: #e74a3b !important; color: #ffffff !important; font-weight: 900 !important; }

.rank-tier-blue .ranking-icon { color: #4e73df; background: color-mix(in srgb, #4e73df 18%, var(--surface)) !important; text-shadow: 0 0 10px rgba(78,115,223,.5); }
.rank-num-blue { color: #4e73df !important; text-shadow: 0 2px 6px rgba(78,115,223,.25) !important; }
.badge-tier-blue { background: #4e73df !important; color: #ffffff !important; font-weight: 900 !important; }

/* Explicit dark mode and System mode share the same semantic palette. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf1fb;
  --muted: #aab3c7;
  --brand-dark: #c7c8ff;
  --brand-soft: #252849;
  --surface: #161c2c;
  --surface-soft: #20283a;
  --bg: #0c1220;
  --body-bg: radial-gradient(circle at 85% 0, #19223a 0, #0c1220 42%, #090e19 100%);
  --header-bg: rgba(15,21,35,.94);
  --footer-bg: #0f1523;
  --input-bg: #111827;
  --panel-bg: #1c2435;
  --note-bg: #242118;
  --note-line: #4a3c25;
  --control-bg: #111827;
  --control-active: #293247;
  --type-bg: #2c3057;
  --type-ink: #cbc9ff;
  --line: #2d374c;
  --success-soft: #153a35;
  --danger-soft: #3a2029;
  --warning-soft: #3a3023;
  --info-soft: #183445;
  --card-shadow: 0 12px 35px rgba(0,0,0,.28);
  --card-hover-shadow: 0 22px 50px rgba(0,0,0,.38);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --ink: #edf1fb;
    --muted: #aab3c7;
    --brand-dark: #c7c8ff;
    --brand-soft: #252849;
    --surface: #161c2c;
    --surface-soft: #20283a;
    --bg: #0c1220;
    --body-bg: radial-gradient(circle at 85% 0, #19223a 0, #0c1220 42%, #090e19 100%);
    --header-bg: rgba(15,21,35,.94);
    --footer-bg: #0f1523;
    --input-bg: #111827;
    --panel-bg: #1c2435;
    --note-bg: #242118;
    --note-line: #4a3c25;
    --control-bg: #111827;
    --control-active: #293247;
    --type-bg: #2c3057;
    --type-ink: #cbc9ff;
    --line: #2d374c;
    --success-soft: #153a35;
    --danger-soft: #3a2029;
    --warning-soft: #3a3023;
    --info-soft: #183445;
    --card-shadow: 0 12px 35px rgba(0,0,0,.28);
    --card-hover-shadow: 0 22px 50px rgba(0,0,0,.38);
  }
}

.admin-workspace { width: min(1500px, calc(100vw - 28px)); display: grid; grid-template-columns: 255px minmax(0,1fr); gap: 18px; margin: 0 auto; }
.admin-sidebar { position: sticky; top: 86px; align-self: start; min-height: calc(100vh - 120px); padding: 18px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg,var(--surface),var(--surface-soft)); box-shadow: var(--card-shadow); }
.admin-sidebar-brand { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; padding-bottom: 17px; margin-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }.admin-sidebar-brand .brand-mark { grid-row: span 2; }.admin-sidebar-brand strong { line-height: 1; }.admin-sidebar-brand small { color: var(--muted); font-size: .72rem; font-weight: 800; }
.admin-sidebar-nav { display: grid; gap: 8px; }.admin-sidebar-nav a { display: flex; align-items: center; justify-content: space-between; padding: 12px 13px; border: 1px solid transparent; border-radius: 13px; color: var(--muted); text-decoration: none; font-size: .88rem; font-weight: 900; transition: transform .18s ease, background .18s ease, color .18s ease; }.admin-sidebar-nav a:hover { transform: translateX(-2px); background: var(--surface); color: var(--brand-dark); }.admin-sidebar-nav a.active { border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); background: var(--brand-soft); color: var(--brand-dark); }
.admin-main-panel { min-width: 0; }
.admin-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--card-shadow); }.admin-topbar h1 { margin: 4px 0 6px; font-size: clamp(1.55rem,2.6vw,2.35rem); }.admin-topbar p { margin: 0; color: var(--muted); line-height: 1.7; }
.admin-shell { max-width: 1180px; margin: 0 auto; }
.admin-workspace .admin-shell { max-width: none; }
.admin-dashboard-hero { position: relative; overflow: hidden; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 28px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg,rgba(78,115,223,.14),rgba(32,201,151,.11)),var(--surface); box-shadow: var(--card-shadow); }
.admin-dashboard-hero::after { content: ""; position: absolute; inset: auto -90px -120px auto; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle,rgba(78,115,223,.24),transparent 62%); pointer-events: none; }
.admin-dashboard-copy { position: relative; z-index: 1; max-width: 720px; }
.admin-dashboard-copy h1 { margin: 6px 0 10px; font-size: clamp(1.85rem,3vw,2.75rem); }
.admin-dashboard-copy p { margin: 0; color: var(--muted); line-height: 1.8; }
.admin-dashboard-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.admin-live-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(32,201,151,.28); border-radius: 999px; padding: 8px 12px; background: var(--success-soft); color: var(--success); font-size: .78rem; font-weight: 900; }
.admin-summary-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.admin-summary-card { min-height: 118px; display: grid; align-content: space-between; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--card-shadow); }
.admin-summary-card, .admin-table tbody tr { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.admin-summary-card:hover { transform: translateY(-3px); box-shadow: var(--card-hover-shadow); }
.admin-table tbody tr:hover { background: var(--surface-soft); }
.admin-summary-card small { color: var(--muted); font-size: .75rem; font-weight: 900; }
.admin-summary-card strong { color: var(--ink); font-size: 1.55rem; line-height: 1.1; }
.admin-profile-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
.public-profiles-admin-card { padding-bottom: 18px; }
.admin-profile-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 16px; }
.admin-profile-card { display: grid; grid-template-columns: 82px 1fr; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--card-shadow); transition: transform .18s ease, box-shadow .18s ease; }
.admin-profile-card:hover { transform: translateY(-3px); box-shadow: var(--card-hover-shadow); }
.admin-profile-card-body { display: grid; gap: 10px; min-width: 0; }
.profile-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.profile-card-heading > div { display: grid; gap: 2px; min-width: 0; }
.profile-card-heading strong { color: var(--ink); font-size: 1rem; }
.profile-card-heading small { color: var(--muted); font-size: .78rem; }
.admin-profile-card p { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.7; }
.profile-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: .75rem; font-weight: 800; }
.admin-empty-directory { display: grid; gap: 9px; justify-items: center; padding: 42px 18px; color: var(--muted); text-align: center; }.admin-empty-directory strong { color: var(--ink); font-size: 1.1rem; }
.admin-profile-edit-form { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 18px; }
.admin-profile-editor-card { padding: 22px; }
.public-profile-preview { position: sticky; top: 88px; align-self: start; padding: 20px; }
.preview-directory-card { grid-template-columns: 1fr; margin-top: 12px; }
.preview-directory-card .directory-avatar { width: 86px; height: 86px; }
.admin-help-note { margin: 12px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.admin-connection-card { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(0,1.15fr); gap: 18px; align-items: center; }
.connection-copy-grid { display: grid; gap: 9px; }
.connection-copy-grid label { display: grid; grid-template-columns: 92px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); color: var(--muted); font-size: .78rem; font-weight: 900; }
.connection-copy-grid code { min-width: 0; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: left; color: var(--ink); font-size: .78rem; }
.admin-connection-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding-top: 4px; }
.admin-summary-card span { color: var(--muted); font-size: .72rem; line-height: 1.45; }
.summary-success { border-color: rgba(32,201,151,.28); }.summary-danger { border-color: rgba(231,74,59,.28); }.summary-warning { border-color: rgba(246,194,62,.34); }.summary-info { border-color: rgba(54,185,204,.30); }.summary-muted { border-color: rgba(133,135,150,.28); }
.admin-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.admin-heading h1 { margin: 4px 0 8px; font-size: clamp(1.7rem,3vw,2.5rem); }
.admin-heading p { margin: 0; color: var(--muted); }
.admin-table-card, .admin-panel, .token-once-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--card-shadow); }
.admin-table-card { padding: 0; overflow: hidden; }
.admin-table-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.admin-table-head h2 { margin: 0 0 5px; font-size: 1.15rem; }
.admin-table-head p { margin: 0; color: var(--muted); font-size: .84rem; }
.admin-table th { background: var(--surface); color: var(--muted); border-bottom: 1px solid var(--line); font-size: .7rem; letter-spacing: 0; }
.admin-table td { padding-block: 14px; }
.admin-table td small { display: block; color: var(--muted); margin-top: 4px; }
.admin-center-cell { display: flex; align-items: center; gap: 11px; }
.admin-center-avatar { width: 38px; height: 38px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--primary-gradient); color: #fff; font-weight: 900; }
.admin-link-pill { direction: ltr; display: inline-flex; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--brand-dark); font-weight: 900; }
.admin-status-pill, .token-badge { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 82px; padding: 7px 10px; border-radius: 999px; font-size: .72rem; font-weight: 900; }
.admin-status-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.admin-status-pill.status-success, .token-ready { background: var(--success-soft); color: var(--success); }
.admin-status-pill.status-warning { background: var(--warning-soft); color: var(--warning); }
.admin-status-pill.status-danger, .token-missing { background: var(--danger-soft); color: var(--danger); }
.admin-date { color: var(--muted); white-space: nowrap; }
.admin-count { font-size: 1rem; }
.admin-edit-button { min-width: 72px; }
.admin-center-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 26px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg,rgba(78,115,223,.13),rgba(32,201,151,.09)),var(--surface); box-shadow: var(--card-shadow); }
.admin-center-identity h1 { margin: 6px 0 12px; font-size: clamp(1.75rem,3vw,2.55rem); }
.admin-hero-subtitle { max-width: 760px; margin: -4px 0 13px; color: var(--muted); line-height: 1.8; }
.admin-center-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.admin-center-tools { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.admin-public-link-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--card-shadow); }
.admin-public-link-card small, .admin-muted-copy { color: var(--muted); }
.admin-public-link-card strong { display: block; margin: 3px 0; }
.admin-public-link-card code { direction: ltr; display: inline-flex; padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface-soft); color: var(--brand-dark); font-weight: 900; }
.admin-flash { margin-bottom: 14px; }
.admin-token-reveal { display: grid; gap: 12px; }
.admin-edit-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
.admin-center-edit-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; align-items: start; }
.admin-center-form-grid { grid-template-columns: repeat(12,minmax(0,1fr)); gap: 16px; }
.admin-center-form-grid > .admin-card { min-height: 0; }
.admin-center-form-grid > [data-admin-section="center-details"],
.admin-center-form-grid > [data-admin-section="allowed-sections"],
.admin-center-form-grid > [data-admin-section="save-actions"] { grid-column: 1 / -1; }
.admin-center-form-grid > [data-admin-section="subscription"],
.admin-center-form-grid > [data-admin-section="telegram-settings"],
.admin-center-form-grid > [data-admin-section="sync-token"],
.admin-center-form-grid > [data-admin-section="internal-notes"] { grid-column: span 6; }
.app-settings-form { align-items: start; }
.admin-card { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--card-shadow); }
.admin-card-wide, .admin-card-main, .admin-save-card { grid-column: 1 / -1; }
.brand-preview-card { position: sticky; top: 92px; align-self: start; grid-row: span 3; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg,color-mix(in srgb, var(--brand-primary) 7%, var(--surface)),var(--surface)); }
.brand-preview-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--primary-gradient); }
.brand-preview-top { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.brand-preview-top h2 { margin: 3px 0 0; font-size: 1.12rem; }.brand-preview-top p { margin: 1px 0 0; color: var(--muted); font-size: .78rem; font-weight: 800; }
.brand-preview-logo { width: 62px; height: 62px; display: grid; place-items: center; flex: none; overflow: hidden; border-radius: 18px; background: var(--primary-gradient); color: #fff; font-size: 1.5rem; font-weight: 900; box-shadow: 0 14px 28px rgba(78,115,223,.22); }
.brand-preview-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; background: var(--surface); }
.brand-preview-surface { padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.brand-preview-surface h3 { margin: 14px 0 8px; font-size: 1.35rem; line-height: 1.25; }.brand-preview-surface p { margin: 0; color: var(--muted); line-height: 1.75; font-size: .86rem; }
.brand-preview-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }.brand-preview-buttons .button { pointer-events: none; font-size: .78rem; padding: 9px 11px; }
.brand-preview-swatches { display: grid; gap: 9px; margin-top: 15px; }
.color-swatch-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.color-swatch-row i { width: 28px; height: 28px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }.color-swatch-row span { color: var(--ink); font-size: .78rem; font-weight: 900; }.color-swatch-row code { direction: ltr; color: var(--muted); font-size: .72rem; }
.settings-url-note { margin: 13px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.65; }
.homepage-builder-status { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; margin-bottom: 16px; }
.homepage-builder-status span { display: block; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.homepage-builder-status strong { display: block; color: var(--ink); }
.homepage-builder-status small { display: block; margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.homepage-builder-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.homepage-builder-tabs a { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 700; }
.homepage-builder-panel { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(15, 23, 42, .03); }
.homepage-builder-panel > summary { cursor: pointer; color: var(--ink); font-weight: 800; }
.homepage-builder-subsection { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.homepage-builder-subsection h3 { margin: 0 0 12px; font-size: 1rem; color: var(--ink); }
.homepage-row-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.homepage-row-heading h3 { margin: 0; }
.homepage-dynamic-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); margin-bottom: 10px; }
.homepage-dynamic-row label, .homepage-stat-row label { min-width: 0; }
.homepage-dynamic-row input, .homepage-dynamic-row select, .homepage-dynamic-row textarea,
.homepage-stat-row input, .homepage-stat-row select { width: 100%; max-width: 100%; }
.homepage-profile-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: 260px; overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.homepage-profile-picker label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.homepage-profile-picker span { overflow-wrap: anywhere; }
.homepage-section-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.homepage-section-grid .section-toggle-card span { width: 100%; }
.homepage-section-grid input[inputmode="numeric"] { margin-top: 8px; }
.homepage-stat-list { display: grid; gap: 12px; }
.homepage-stat-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.homepage-stat-row label { min-width: 0; }
.homepage-builder-actions { margin-top: 18px; justify-content: flex-start; }
.homepage-builder-entry-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.homepage-builder-entry-card p { margin: 6px 0 0; color: var(--muted); }
.homepage-builder-shell { display: grid; gap: 16px; }
.homepage-builder-shell,
.homepage-builder-shell * { box-sizing: border-box; }
.homepage-builder-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.homepage-builder-topbar h2 { margin: 4px 0 6px; color: var(--ink); }
.homepage-builder-topbar p { margin: 0; color: var(--muted); }
.homepage-builder-shell h1,
.homepage-builder-shell h2,
.homepage-builder-shell h3,
.homepage-builder-shell strong { overflow-wrap: normal; word-break: normal; }
.homepage-builder-actionbar { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.homepage-publish-button { border-color: rgba(34, 197, 94, .45); color: #bbf7d0; }
.homepage-builder-grid { display: grid; grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); gap: 16px; align-items: start; }
.homepage-builder-sidebar { position: sticky; top: 86px; display: grid; gap: 12px; }
.homepage-builder-nav { display: grid; gap: 7px; }
.homepage-builder-nav button { width: 100%; min-height: 38px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: rgba(15, 23, 42, .28); color: var(--ink); text-align: right; cursor: pointer; font-weight: 700; }
.homepage-builder-nav button:hover,
.homepage-builder-nav button.is-active { border-color: var(--accent); background: rgba(99, 102, 241, .18); color: #fff; }
.homepage-builder-wizard { display: grid; gap: 7px; }
.homepage-builder-wizard button { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: rgba(15, 23, 42, .32); color: var(--ink); text-align: right; cursor: pointer; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.homepage-builder-wizard button:hover,
.homepage-builder-wizard button.is-active { border-color: var(--accent); background: rgba(99, 102, 241, .18); color: #fff; }
.homepage-builder-wizard i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: rgba(34, 197, 94, .16); color: #86efac; font-style: normal; font-size: .78rem; flex: 0 0 auto; }
.homepage-builder-nav { display: none; }
.homepage-builder-mobile-select { display: none; width: 100%; }
.homepage-builder-panels { min-width: 0; }
.homepage-work-panel { display: none; min-width: 0; }
.homepage-work-panel.is-active { display: block; }
.homepage-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.homepage-overview-grid div,
.homepage-builder-init-card,
.homepage-section-row,
.homepage-dynamic-row,
.homepage-stat-row { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.homepage-overview-grid strong { color: var(--ink); }
.homepage-overview-grid p { margin: 6px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.homepage-overview-dashboard > div { min-height: 126px; }
.homepage-overview-dashboard span { display: block; color: var(--muted); font-size: .78rem; font-weight: 900; margin-bottom: 7px; }
.homepage-builder-timeline { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.homepage-builder-timeline h3 { margin: 0 0 10px; color: var(--ink); }
.homepage-builder-timeline div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.homepage-builder-timeline div:first-of-type { border-top: 0; }
.homepage-builder-timeline i { color: #86efac; font-style: normal; }
.homepage-builder-timeline span { color: var(--ink); font-weight: 800; }
.homepage-builder-timeline small,
.homepage-builder-timeline p { color: var(--muted); overflow-wrap: anywhere; }
.homepage-builder-init-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.homepage-builder-init-card p { margin: 6px 0 0; color: var(--muted); }
.homepage-builder-init-card button[value="initialize_homepage_draft_from_legacy"] { display: none; }
.homepage-builder-modal { max-width: min(560px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 16px; color: var(--ink); background: transparent; }
.homepage-builder-modal::backdrop { background: rgba(2, 6, 23, .72); backdrop-filter: blur(7px); }
.homepage-builder-modal-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 26px 90px rgba(0, 0, 0, .38); }
.homepage-builder-modal-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.homepage-builder-modal-card header span { color: var(--accent); font-size: .78rem; font-weight: 900; }
.homepage-builder-modal-card h3 { margin: 4px 0 0; color: var(--ink); }
.homepage-builder-modal-card header button { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink); cursor: pointer; }
.homepage-builder-modal-card p,
.homepage-builder-modal-card li,
.homepage-builder-modal-card span { color: var(--muted); line-height: 1.7; }
.homepage-builder-modal-card ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; padding: 0; margin: 14px 0; list-style: none; }
.homepage-builder-modal-warning { padding: 12px; border: 1px solid rgba(245, 158, 11, .34); border-radius: 10px; background: rgba(245, 158, 11, .10); }
.homepage-builder-modal-warning strong { display: block; color: #fbbf24; margin-bottom: 4px; }
.homepage-builder-modal-card footer { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; margin-top: 16px; }
.homepage-section-list { display: grid; gap: 10px; }
.homepage-section-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.homepage-section-row label { margin: 0; }
.homepage-section-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.homepage-dynamic-row,
.homepage-stat-row { margin-top: 10px; }
.homepage-work-panel .homepage-dynamic-row,
.homepage-work-panel .homepage-stat-row { display: block; grid-template-columns: none; }
.homepage-dynamic-row > summary,
.homepage-stat-row > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; color: var(--ink); font-weight: 800; }
.homepage-dynamic-row[open],
.homepage-stat-row[open] { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.homepage-dynamic-row[open] > summary,
.homepage-stat-row[open] > summary { grid-column: 1 / -1; }
.homepage-profile-picker { display: grid; gap: 8px; margin-top: 14px; }
.homepage-work-panel .homepage-profile-picker { grid-template-columns: 1fr; max-height: 280px; overflow: auto; }
.homepage-profile-picker label { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(15, 23, 42, .24); }
.homepage-builder-publish-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.admin-card-title > div { display: flex; align-items: center; gap: 10px; }
.admin-card-title h2 { margin: 0; font-size: 1.15rem; }
.admin-card-title p { max-width: 620px; margin: 4px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.7; }
.admin-card-icon { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 900; }
.admin-field-grid, .admin-subscription-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.admin-metric-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}
.admin-metric-card strong {
  color: var(--brand);
  font-size: 1.3rem;
}
.admin-metric-card small {
  color: var(--muted);
}
.admin-card label { display: grid; gap: 7px; color: var(--muted); font-weight: 800; }
.admin-card input:not([type="checkbox"]), .admin-card textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--input-bg); color: var(--ink); padding: 12px 13px; font: inherit; }
.admin-card input.color-input { direction: ltr; font-weight: 900; letter-spacing: .04em; }
.setting-help { color: var(--muted); font-size: .7rem; font-weight: 700; line-height: 1.45; }
.app-builder { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 18px; align-items: start; }
.app-builder-main { display: grid; gap: 18px; min-width: 0; }
.settings-tab-nav { position: sticky; top: 86px; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 10px 25px rgba(45,55,72,.06); backdrop-filter: blur(14px); }
.settings-tab-nav a { padding: 8px 11px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); text-decoration: none; font-size: .76rem; font-weight: 900; }.settings-tab-nav a:hover { background: var(--brand-soft); color: var(--brand-dark); }
.app-builder-section { scroll-margin-top: 120px; border-radius: 18px; }
.app-builder-preview { top: 86px; max-height: calc(100vh - 112px); overflow: auto; }
.color-control span { display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: center; }.color-control input[type="color"] { width: 56px; height: 44px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.preset-palette { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }.preset-palette button { min-height: 34px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink); padding: 6px 12px; font: inherit; font-size: .75rem; font-weight: 900; cursor: pointer; }.preset-palette button:hover { border-color: var(--brand); color: var(--brand-dark); }
.feature-editor-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.feature-editor-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); }.feature-editor-card > strong { color: var(--ink); }
.media-upload-control { align-content: start; }.media-upload-control input[type="file"] { padding: 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--muted); }.media-upload-control small { min-height: 18px; color: var(--muted); font-size: .72rem; font-weight: 800; }
.admin-search-box { display: grid; gap: 6px; min-width: min(320px,100%); color: var(--muted); font-weight: 900; font-size: .75rem; }.admin-search-box input { border: 1px solid var(--line); border-radius: 999px; background: var(--input-bg); color: var(--ink); padding: 10px 14px; font: inherit; }
.admin-empty-state { padding: 26px; color: var(--muted); text-align: center; font-weight: 900; }
.admin-full-field { grid-column: 1 / -1; }
.compact-field-grid { margin-top: 14px; }
.compact-section-grid { grid-template-columns: 1fr; }
.admin-subscription-grid .toggle-card { grid-row: span 2; min-height: 100%; }
.toggle-card, .section-toggle-card { display: flex !important; align-items: flex-start; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--ink) !important; }
.toggle-card input, .section-toggle-card input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--brand); }
.toggle-card strong, .section-toggle-card strong { display: block; color: var(--ink); }
.section-toggle-card em { display: inline-flex; margin-top: 5px; padding: 3px 7px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .68rem; font-style: normal; direction: ltr; }
.toggle-card small, .section-toggle-card small { display: block; margin-top: 5px; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.admin-inline-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.section-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.section-future-note { margin: -4px 0 14px; padding: 10px 12px; border: 1px solid rgba(246,194,62,.24); border-radius: 8px; background: var(--warning-soft); color: var(--muted); font-size: .82rem; font-weight: 800; line-height: 1.55; }
.section-toggle-card.future-section { border-style: dashed; background: linear-gradient(135deg,var(--surface-soft),var(--warning-soft)); opacity: .82; cursor: not-allowed; }
.section-toggle-card.future-section input { cursor: not-allowed; filter: grayscale(1); opacity: .45; }
.section-coming-soon-badge { display: inline-flex; align-items: center; margin-inline-start: 7px; padding: 3px 7px; border-radius: 999px; background: var(--warning-soft); color: var(--warning); font-size: .66rem; font-weight: 900; vertical-align: middle; }
.admin-token-warning { display: grid; gap: 4px; margin: 14px 0; padding: 12px; border: 1px solid rgba(246,194,62,.34); border-radius: 8px; background: var(--warning-soft); color: var(--ink); font-size: .84rem; line-height: 1.6; }
.admin-token-warning span { color: var(--muted); }
.admin-save-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--card-shadow); }
.admin-save-card h2 { margin: 0 0 5px; font-size: 1.08rem; }
.admin-save-card p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.65; }
.admin-save-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.admin-panel { padding: 22px; }
.admin-panel h2 { margin: 0 0 16px; font-size: 1.15rem; }
.admin-panel p { margin: -8px 0 16px; color: var(--muted); font-size: .9rem; }
.admin-panel label { display: grid; gap: 7px; margin-bottom: 14px; color: var(--muted); font-weight: 800; }
.admin-panel input, .admin-panel textarea, .admin-login-card input { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--input-bg); color: var(--ink); padding: 12px 13px; font: inherit; }
.owner-login-card { position: relative; overflow: hidden; }
.owner-login-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg,var(--brand),var(--accent)); }
.owner-login-card .auth-card-heading { align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.password-field { position: relative; display: block; }
.password-field input { padding-inline-start: 76px; }
.password-toggle { position: absolute; inset: 50% 9px auto auto; transform: translateY(-50%); min-width: 56px; border: 0; border-radius: 7px; background: var(--brand-soft); color: var(--brand-dark); padding: 7px 9px; font: inherit; font-size: .78rem; font-weight: 900; cursor: pointer; }
.password-toggle:hover { filter: brightness(.98); }
.check-row { display: flex !important; flex-direction: row; align-items: center; gap: 10px; color: var(--ink) !important; }
.check-row input { width: auto; inline-size: 18px; block-size: 18px; }
.section-toggle-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 14px; }
.admin-actions-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.button-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.token-once-card { padding: 18px 20px; margin-bottom: 18px; border-color: rgba(245,158,11,.45); background: var(--warning-soft); }
.token-once-card h2 { margin: 0 0 8px; }
.token-once-card p { margin: 0 0 12px; color: var(--muted); }
.token-once-card code { display: block; direction: ltr; text-align: left; white-space: pre-wrap; word-break: break-all; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.alert-success { background: var(--success-soft); color: #117b5c; }
.alert-warning { background: var(--warning-soft); color: #8a5800; }
.hidden-section, .minimal-student-info .detail-success, .minimal-student-info .detail-info, .minimal-student-info .detail-warning { display: none !important; }

@media (max-width: 980px) {
  .public-home-page .container { width: min(1180px, calc(100% - 48px)); }
  .public-home-page .page { padding-block: 26px 52px; }
  .admin-workspace { grid-template-columns: 1fr; }.admin-sidebar { position: relative; top: auto; min-height: auto; }.admin-sidebar-nav { grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); }.admin-sidebar-nav a { justify-content: center; text-align: center; }
  .app-builder { grid-template-columns: 1fr; }.app-builder-preview { position: relative; top: auto; max-height: none; order: 2; }.settings-tab-nav { position: relative; top: auto; }.homepage-builder-status,.homepage-section-grid,.homepage-stat-row,.homepage-dynamic-row,.homepage-profile-picker { grid-template-columns: 1fr; }
  .homepage-builder-topbar,.homepage-builder-entry-card,.homepage-builder-init-card,.homepage-section-row { flex-direction: column; align-items: stretch; }
  .homepage-builder-grid { grid-template-columns: 1fr; }
  .homepage-builder-sidebar { position: relative; top: auto; }
  .homepage-builder-shell,
  .homepage-builder-topbar,
  .homepage-builder-grid,
  .homepage-builder-sidebar,
  .homepage-builder-panels,
  .homepage-work-panel,
  .homepage-overview-dashboard,
  .homepage-builder-timeline,
  .homepage-builder-init-card { width: 100%; max-width: 100%; min-width: 0; overflow-wrap: break-word; }
  .homepage-builder-actionbar .button,
  .homepage-builder-publish-grid .button,
  .homepage-builder-init-card .button { width: 100%; }
  .homepage-builder-wizard { display: none; }
  .homepage-builder-wizard button { min-width: 0; max-width: 100%; }
  .homepage-builder-nav { display: none; }
  .homepage-builder-mobile-select { display: block; }
  .admin-summary-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .admin-center-edit-form { grid-template-columns: 1fr; }.admin-center-form-grid > [data-admin-section] { grid-column: 1 / -1; }.brand-preview-card { position: relative; top: auto; grid-row: auto; }.section-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .public-hero { grid-template-columns: minmax(0,1fr); gap: 34px; min-height: auto; }.public-visual-shell { width: min(620px,100%); margin-inline: auto; }.public-product-card { width: min(620px,100%); margin-inline: auto; }.public-feature-grid,.feature-editor-grid { grid-template-columns: 1fr; }.public-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.admin-profile-edit-form { grid-template-columns: 1fr; }.public-profile-preview { position: relative; top: auto; }.admin-profile-grid { grid-template-columns: 1fr; }.teacher-landing-hero,.teacher-auth-shell { grid-template-columns: 1fr; }.teacher-hero-profile { grid-template-columns: 104px 1fr; align-items: center; }.teacher-step-grid { grid-template-columns: 1fr; }.admin-connection-card { grid-template-columns: 1fr; }
  .landing-grid { grid-template-columns: 1fr; gap: 18px; padding-top: 20px; }.landing-preview { width: min(600px,100%); margin: auto; }
  .portal-student-grid { grid-template-columns: 1fr; }
  .desktop-stats-grid { grid-template-columns: repeat(2,1fr); }
  .student-information-body { grid-template-columns: 160px 1fr; gap: 20px; padding-inline: 20px; }.desktop-student-avatar { width: 125px; height: 125px; font-size: 3rem; }
  .inline-birth-date-form input { width: min(100%, 150px); }
  .financial-summary-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 680px) {
  .container { width: min(100% - 20px,1180px); }.public-home-page .container { width: min(100% - 32px,1180px); }.page { padding-block: 18px 42px; }.public-home-page .page { padding-block: 18px 42px; }.header-row { min-height: 60px; gap: 8px; }.center-name { display: none; }.header-actions { gap: 6px; }.header-button { padding: 6px 8px; font-size: .7rem; }.theme-switcher { gap: 2px; padding: 2px; }.theme-switcher button { min-width: 31px; height: 31px; padding: 3px; }.theme-switcher button small { display: none; }
  .landing-grid { min-height: auto; }.landing-copy h1 { font-size: 2.15rem; }.landing-actions { display: grid; }.landing-preview { padding: 18px 5px; }
  .public-hero { min-height: auto; gap: 22px; padding: 18px 0 26px; overflow: hidden; }.branded-home-hero { min-height: auto; }.branded-home-hero::before { width: 190px; height: 190px; inset: -20px -110px auto auto; opacity: .45; }.public-hero h1 { font-size: clamp(1.9rem,9vw,2.35rem); line-height: 1.16; letter-spacing: -.025em; }.public-hero-copy > p { font-size: .94rem; }.public-cta-row { display: grid; grid-template-columns: 1fr; }.public-cta-row .button { width: 100%; }.public-banner-card img { height: min(260px,42vh); }.public-product-card { width: 100%; padding: 16px; transform: none; box-shadow: 0 18px 42px rgba(56,65,106,.12); }.public-product-card::before { inset: -5px; transform: none; }.product-metrics { grid-template-columns: 1fr; }.public-guidance,.public-service-card { align-items: flex-start; }.public-feature-card { min-height: auto; }.public-directory-section { padding: 18px; border-radius: 22px; }.public-directory-grid { grid-template-columns: 1fr; }.directory-card { grid-template-columns: 72px minmax(0,1fr); min-height: auto; padding: 15px; }.directory-avatar,.directory-avatar-large { width: 64px; height: 64px; border-radius: 18px; }.site-footer span { width: 100%; }.site-footer span::before { display: none; }
  .auth-card { padding: 23px 18px; }.portal-picker-cover { min-height: 160px; padding: 42px 14px 34px; border-radius: 18px 18px 0 0; }.portal-cover-context { inset: 10px 10px auto; }.portal-cover-context span { max-width: 46vw; }.portal-secure-chip { inset: auto auto 10px 12px; }.portal-picker-panel { padding: 14px; border-radius: 0 0 18px 18px; }.portal-picker-header { align-items: flex-start; flex-direction: column; gap: 10px; }.portal-student-card { padding: 15px; }.portal-student-main { grid-template-columns: 82px minmax(0,1fr); gap: 12px; }.portal-student-avatar { width: 82px; height: 82px; font-size: 1.9rem; }.portal-student-meta { grid-template-columns: 1fr 1fr; }.portal-student-actions { align-items: stretch; flex-direction: column; }.portal-student-actions .button { width: 100%; }
  .admin-workspace { width: min(100%, calc(100vw - 20px)); }.admin-sidebar-nav { grid-template-columns: 1fr 1fr; }.admin-topbar { flex-direction: column; padding: 18px; }.public-contact-panel { align-items: stretch; flex-direction: column; }.public-contact-actions { justify-content: flex-start; }.admin-dashboard-hero,.admin-center-hero,.admin-public-link-card,.admin-save-card { flex-direction: column; align-items: stretch; padding: 22px; }.admin-dashboard-actions,.admin-center-tools,.admin-save-actions { justify-content: flex-start; }.admin-heading { flex-direction: column; }.admin-edit-grid { grid-template-columns: 1fr; }.admin-field-grid { grid-template-columns: 1fr; }.section-toggle-grid { grid-template-columns: 1fr; }.admin-actions-row .button { width: 100%; }.brand-preview-surface h3 { font-size: 1.1rem; }.color-swatch-row { grid-template-columns: 24px 1fr; }.color-swatch-row code { grid-column: 2; }.color-control span { grid-template-columns: 1fr; }.color-control input[type="color"] { width: 100%; }.admin-profile-card { grid-template-columns: 62px 1fr; }.admin-profile-card .directory-avatar { width: 58px; height: 58px; }.connection-copy-grid label { grid-template-columns: 1fr; }.admin-connection-actions .button { width: 100%; }
  .admin-page:has(.homepage-builder-shell) .admin-workspace { width: calc(100% - 20px); max-width: calc(100% - 20px); }
  .admin-page:has(.homepage-builder-shell) .admin-workspace { direction: ltr; }
  .admin-page:has(.homepage-builder-shell) .admin-main-panel,
  .admin-page:has(.homepage-builder-shell) .admin-topbar,
  .admin-page:has(.homepage-builder-shell) .admin-sidebar { min-width: 0; max-width: 100%; direction: rtl; }
  .report-cover { min-height: 148px; padding: 37px 15px 27px; }.report-cover h1 { font-size: 1.35rem; }.report-cover-context { inset: 11px 11px auto; }.report-cover-updated { inset: auto auto 9px 11px; }.report-body { padding: 12px; }
  .student-information-body { grid-template-columns: 1fr; gap: 14px; padding: 17px 14px; }.desktop-student-avatar { width: 118px; height: 118px; font-size: 2.5rem; }.student-name-row { align-items: center; flex-direction: column; text-align: center; margin-bottom: 14px; }.desktop-details-grid { grid-template-columns: 1fr; gap: 10px; }.student-quick-badges { justify-content: center; margin-top: 14px; padding-top: 12px; }
  .student-avatar-column { align-self: auto; min-height: 190px; padding: 15px; }.photo-change-overlay { inset: auto 10px 9px; min-height: 28px; font-size: .66rem; }.photo-save-button { width: min(100%, 150px); }.inline-birth-date-form { align-items: flex-start; }.inline-birth-date-form .birth-date-inline { width: 100%; }.inline-birth-date-form input { width: 100%; }.inline-birth-date-form .button { width: 100%; }
  .desktop-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.desktop-stat-card { min-height: 132px; padding: 14px; }.desktop-stat-icon { width: 40px; height: 40px; border-radius: 12px; }.desktop-stat-heading strong { font-size: 1rem; }
  .record-panel { margin: 12px; }.record-panel-title { padding: 11px 12px; }
  .panel-header-controls { display: flex; align-items: center; gap: 8px; }
  .month-filter-select { height: 30px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--input-bg); color: var(--ink); font-size: .72rem; font-weight: 800; cursor: pointer; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .desktop-table { min-width: 100%; white-space: nowrap; }
  .desktop-table th, .desktop-table td { padding: 10px 12px; font-size: .78rem; }
  .admin-table tr { margin: 10px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }.admin-table td { align-items: flex-start; }.admin-table td:last-child { padding-top: 12px; }.admin-table td:last-child .button { width: 100%; }.admin-link-pill { max-width: 165px; }.admin-table-head { align-items: flex-start; flex-direction: column; padding: 16px; }
  .financial-summary-grid { grid-template-columns: repeat(2,1fr); }.desktop-note { padding: 11px; }
}

@media (max-width: 410px) {
  .admin-summary-grid,.admin-profile-summary,.admin-field-grid,.admin-subscription-grid,.section-card-grid { grid-template-columns: 1fr; }.admin-save-actions .button { width: 100%; }.product-metrics { grid-template-columns: 1fr; }.product-metrics span { grid-template-columns: auto 1fr; align-items: center; gap: 8px; text-align: right; }.teacher-hero-profile { grid-template-columns: 1fr; }.teacher-avatar { width: 86px; height: 86px; }
  .desktop-stats-grid { grid-template-columns: 1fr; }.desktop-details-grid { grid-template-columns: 1fr; }.financial-summary-grid,.rankings-grid { grid-template-columns: 1fr; }.preview-stats { gap: 4px; }.landing-copy h1 { font-size: 1.95rem; }.brand-mark,.brand-image-wrap { width: 35px; height: 35px; }.brand-copy strong { font-size: .82rem; }.brand-copy small { font-size: .65rem; }.header-button { max-width: 74px; line-height: 1.15; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.brand-image-wrap.logo-size-small { width: 34px; height: 34px; }
.brand-image-wrap.logo-size-medium { width: 50px; height: 50px; }
.brand-image-wrap.logo-size-large { width: 72px; height: 72px; }
.brand-image-wrap.logo-size-xlarge { width: 96px; height: 96px; }
.admin-table-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.button-danger { background: #e53e3e; color: #fff; border-color: #e53e3e; }
.button-danger:hover { background: #c53030; color: #fff; }
.button-warning { background: #dd6b20; color: #fff; border-color: #dd6b20; }
.button-warning:hover { background: #c05621; color: #fff; }
.button-success { background: #38a169; color: #fff; border-color: #38a169; }
.button-success:hover { background: #2f855a; color: #fff; }

.lifecycle-dashboard,
.center-manage-shell {
  display: grid;
  gap: 22px;
}
.lifecycle-summary,
.lifecycle-storage-grid {
  align-items: stretch;
}
.lifecycle-centers-table .button {
  white-space: nowrap;
}
.admin-manage-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), var(--surface));
  box-shadow: var(--card-shadow);
}
.admin-manage-hero h1 {
  margin: 4px 0 6px;
  font-size: clamp(1.7rem, 4vw, 2.35rem);
}
.admin-manage-hero p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}
.admin-manage-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.admin-manage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.admin-detail-list {
  display: grid;
  gap: 10px;
  margin: 0;
}
.admin-detail-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}
.admin-detail-list dt {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
}
.admin-detail-list dd {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  text-align: left;
  overflow-wrap: anywhere;
}
.admin-mini-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.admin-mini-metrics span {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
.admin-mini-metrics strong {
  color: var(--ink);
  font-size: 1.25rem;
}
.admin-mini-metrics small {
  color: var(--muted);
  font-weight: 800;
  overflow-wrap: anywhere;
}
.danger-zone-card {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
}
.admin-lifecycle-actions {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.admin-lifecycle-actions form {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
.admin-lifecycle-actions input,
.admin-lifecycle-actions textarea,
.admin-lifecycle-actions select {
  width: 100%;
  margin-top: 5px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
}
.admin-cleanup-preview {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-soft));
}
.admin-cleanup-preview h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}
.admin-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
  align-items: end;
}
.admin-filter-bar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
  font-size: .82rem;
}
.admin-filter-bar input,
.admin-filter-bar select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
}
.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
}
.admin-table {
  min-width: 760px;
}
.admin-table code,
.admin-cleanup-preview code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 14px;
  color: var(--muted);
  font-weight: 900;
}
.admin-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.admin-compact-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.admin-compact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}
.admin-compact-row > div:first-child {
  min-width: 0;
}
.admin-compact-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.student-photo-admin {
  display: grid;
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.photo-admin-metrics {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
}
.photo-filter-bar {
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto auto;
}
.photo-selection-toolbar,
.photo-bulk-card {
  position: sticky;
  top: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-color: color-mix(in srgb, var(--warning) 45%, var(--line));
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
}
.photo-select-all,
.photo-selection-summary,
.photo-selection-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.photo-select-all {
  color: var(--ink);
  font-weight: 900;
}
.photo-select-all input {
  width: 22px;
  height: 22px;
  accent-color: var(--brand);
}
.photo-selection-summary {
  color: var(--muted);
  font-size: .9rem;
}
.photo-selection-summary strong {
  color: var(--ink);
}
.photo-selection-hint {
  color: var(--warning);
  font-size: .82rem;
  font-weight: 800;
}
.photo-selection-hint[hidden] {
  display: none;
}
.student-photo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.student-photo-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
  aspect-ratio: 1 / 1;
  min-width: 0;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.student-photo-card.is-selected {
  border-color: color-mix(in srgb, var(--brand) 78%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent), var(--card-shadow);
  transform: translateY(-2px);
}
.photo-select {
  position: absolute;
  z-index: 10;
  inset: 10px auto auto 10px;
  display: block !important;
  width: 28px;
  height: 28px;
  padding: 3px;
  border-radius: 9px;
  background: rgba(7, 13, 27, .72);
  border: 1px solid rgba(255, 255, 255, .32);
  backdrop-filter: blur(8px);
  cursor: pointer;
  pointer-events: auto;
}
.photo-select input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid rgba(255, 255, 255, .78);
  border-radius: 6px;
  background: rgba(15, 23, 42, .74);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.photo-select input::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .12s ease;
}
.photo-select input:checked {
  border-color: var(--brand);
  background: var(--brand);
}
.photo-select input:checked::after {
  transform: rotate(-45deg) scale(1);
}
.photo-select input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 65%, #fff);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 24%, transparent);
}
.photo-select input:disabled {
  opacity: .35;
}
.photo-preview-button {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--surface-soft);
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  color: inherit;
  text-align: inherit;
}
.photo-preview-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--muted);
  font-weight: 900;
}
.photo-tile-overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  padding: 34px 10px 10px;
  background: linear-gradient(180deg, transparent, rgba(7, 13, 27, .9));
  color: #fff;
  pointer-events: none;
}
.photo-tile-overlay > span:first-child {
  min-width: 0;
}
.photo-tile-overlay strong,
.photo-tile-overlay small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-tile-overlay strong {
  font-size: .86rem;
  font-weight: 900;
}
.photo-tile-overlay small {
  margin-top: 2px;
  color: rgba(255, 255, 255, .72);
  font-size: .68rem;
  font-weight: 800;
}
.photo-placeholder.large {
  min-height: 260px;
  border: 1px dashed var(--line);
  border-radius: 14px;
}
.photo-card-body {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.photo-card-body strong,
.photo-card-body small {
  display: block;
  overflow-wrap: anywhere;
}
.photo-card-body small {
  color: var(--muted);
  margin-top: 3px;
}
.photo-card-body dl {
  display: grid;
  gap: 6px;
  margin: 0;
}
.photo-card-body dl div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: .74rem;
}
.photo-card-body dd {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
}
.photo-badge {
  width: max-content;
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  background: var(--surface-soft);
  color: var(--muted);
  flex: 0 0 auto;
}
.badge-display { background: var(--success-soft); color: var(--success); }
.badge-pending { background: var(--warning-soft); color: var(--warning); }
.badge-orphan { background: var(--danger-soft); color: var(--danger); }
.badge-missing { background: var(--danger-soft); color: var(--danger); }
.photo-empty-state {
  grid-column: 1 / -1;
}
.photo-lightbox[hidden] {
  display: none;
}
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 13, 27, .76);
}
.photo-lightbox-panel {
  width: min(880px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
.photo-lightbox-close {
  position: absolute;
  inset: 20px 20px auto auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  padding: 8px 12px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.photo-lightbox-media img {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  border-radius: 14px;
  background: var(--surface-soft);
}
.photo-lightbox-details h3 {
  margin: 0 0 12px;
}
.photo-lightbox-details dl {
  display: grid;
  gap: 9px;
  margin: 0;
}
.photo-lightbox-details div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}
.photo-lightbox-details dt {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 900;
}
.photo-lightbox-details dd {
  margin: 4px 0 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .admin-manage-grid {
    grid-template-columns: 1fr;
  }
  .admin-filter-bar {
    grid-template-columns: 1fr;
  }
  .photo-admin-metrics,
  .student-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .photo-filter-bar {
    grid-template-columns: 1fr 1fr;
  }
  .photo-lightbox-panel {
    grid-template-columns: 1fr;
  }
  .admin-compact-row {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 1180px) and (min-width: 981px) {
  .student-photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .admin-manage-hero {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-manage-status {
    justify-content: flex-start;
  }
  .admin-mini-metrics {
    grid-template-columns: 1fr;
  }
  .photo-admin-metrics,
  .photo-filter-bar {
    grid-template-columns: 1fr;
  }
  .student-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .photo-selection-toolbar,
  .photo-bulk-card {
    align-items: stretch;
    flex-direction: column;
  }
  .photo-selection-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .photo-selection-actions .button {
    width: 100%;
  }
}

/* Parent communication and notification cards */
.communication-section {
  max-width: 100%;
  overflow: hidden;
  margin: 0 0 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, #0ea5e9 8%);
  box-shadow: 0 12px 35px rgba(32, 43, 78, 0.08);
}
.communication-section,
.communication-section * {
  box-sizing: border-box;
}
.communication-section-header {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(99, 102, 241, 0.11));
}
.communication-section-header > div,
.communication-card-head > div {
  min-width: 0;
  max-width: 100%;
}
.communication-section-icon,
.communication-card-icon,
.channel-brand-icon,
.telegram-account-row > span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.communication-section-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: #fff;
  background: #2563eb;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.communication-section-header h2 {
  margin: 0 0 3px;
  color: var(--ink);
  font-size: 1.04rem;
  font-weight: 900;
}
.communication-section-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.communication-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 100%;
  padding: 14px;
}
.communication-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  min-height: 250px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-soft) 76%, #0ea5e9 8%), var(--surface));
}
.communication-card-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}
.communication-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #fff;
  font-size: 1.18rem;
}
.icon-groups {
  background: linear-gradient(135deg, #10b981, #0ea5e9);
}
.icon-telegram {
  background: linear-gradient(135deg, #38bdf8, #2563eb);
}
.communication-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.communication-title-row h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 900;
}
.communication-card-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.65;
}
.communication-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  gap: 12px;
}
.group-channels-notes-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line));
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 0.8rem;
}
.communication-channel-list,
.telegram-account-list {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 10px;
}
.communication-channel-row,
.telegram-account-row {
  display: grid;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-soft) 74%, transparent);
}
.communication-channel-row {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
}
.telegram-account-row {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  padding: 10px 12px;
}
.channel-brand-icon,
.telegram-account-row > span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  font-size: 1rem;
}
.channel-whatsapp .channel-brand-icon {
  background: #16a34a;
}
.channel-telegram .channel-brand-icon,
.telegram-account-row > span {
  background: #229ed9;
}
.channel-copy,
.telegram-account-row div {
  min-width: 0;
}
.channel-copy strong,
.telegram-account-row strong,
.telegram-account-summary strong {
  display: block;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 900;
  overflow-wrap: anywhere;
  word-break: normal;
}
.channel-copy small,
.telegram-account-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}
.group-channel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.group-channel-btn:hover {
  transform: translateY(-1px);
}
.btn-channel-whatsapp {
  background: #16a34a !important;
  color: #ffffff !important;
  border: 1px solid #12823d;
}
.btn-channel-telegram {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0369a1;
}
.telegram-notifications-panel {
  border-color: color-mix(in srgb, #229ed9 26%, var(--line));
}
.telegram-account-summary,
.communication-empty-state {
  min-width: 0;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 80%, transparent);
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.telegram-notification-actions {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  gap: 10px;
  margin-top: auto;
}
.telegram-notification-actions form {
  margin: 0;
}
.telegram-primary-action {
  min-width: 132px;
}
.telegram-inline-error {
  display: block;
  color: #fb7185 !important;
  font-size: 0.78rem;
}
@media (max-width: 860px) {
  .communication-grid {
    grid-template-columns: 1fr;
  }
  .communication-card {
    min-height: 0;
  }
}
@media (max-width: 560px) {
  .communication-section-header,
  .communication-card-head {
    align-items: start;
  }
  .communication-grid {
    padding: 12px;
  }
  .communication-card {
    padding: 14px;
  }
  .communication-channel-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .communication-channel-row .group-channel-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
  .telegram-notification-actions,
  .telegram-primary-action,
  .telegram-notification-actions form {
    width: 100%;
  }
}