:root {
    --brand: #14532d;
    --brand-2: #0f766e;
    --ink: #111827;
    --muted: #6b7280;
    --line: #e5e7eb;
    --surface: #f8fafc;
    --card: #fff;
    --sidebar: #0f172a;
    --sidebar-text: #cbd5e1;
    --sidebar-muted: #94a3b8;
    --sidebar-section: #f8fafc;
    --sidebar-icon-bg: rgba(255,255,255,.08);
    --sidebar-icon-color: #e2e8f0;
    --sidebar-active-bg: rgba(255,255,255,.1);
    --sidebar-active-text: #fff;
    --sidebar-hover-bg: rgba(255,255,255,.08);
    --sidebar-border: rgba(255,255,255,.08);
    --sidebar-accent: #38bdf8;
    --sidebar-font-size: 14px;
    --sidebar-section-font-size: 13px;
}

/* Teacher application onboarding v2 — mobile-first, six-step workflow. */
.teacher-onboarding-v2 { --ta2-ink:#14213d; --ta2-muted:#667085; --ta2-line:#e4e7ec; --ta2-brand:#4f46e5; --ta2-soft:#f7f8fc; background:#f7f8fc; color:var(--ta2-ink); min-height:100vh; }
.ta2-shell { width:min(1160px, calc(100% - 32px)); margin:0 auto; padding-bottom:112px; }
.ta2-header { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--ta2-line); }
.ta2-brand { display:flex; align-items:center; gap:10px; color:var(--ta2-ink); font-weight:800; text-decoration:none; }
.ta2-brand img { width:38px; height:38px; object-fit:contain; border-radius:10px; }
.ta2-header-actions { display:flex; align-items:center; gap:16px; font-size:.9rem; }
.ta2-header-actions a { color:#475467; text-decoration:none; }
.ta2-intro { display:flex; justify-content:space-between; align-items:end; gap:32px; padding:34px 0 26px; }
.ta2-intro h1 { margin:6px 0 8px; font-size:clamp(1.75rem,4vw,2.65rem); letter-spacing:-.035em; }
.ta2-intro p { color:var(--ta2-muted); margin:0; max-width:640px; }
.ta2-eyebrow { color:var(--ta2-brand); font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.ta2-trust { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.ta2-trust span { display:flex; gap:7px; align-items:center; background:#fff; border:1px solid var(--ta2-line); border-radius:999px; padding:8px 12px; font-size:.8rem; color:#475467; white-space:nowrap; }
.ta2-workspace { display:grid; grid-template-columns:260px minmax(0, 1fr); gap:28px; align-items:start; }
.ta2-progress { position:sticky; top:16px; background:#fff; border:1px solid var(--ta2-line); border-radius:18px; padding:18px; box-shadow:0 8px 30px rgba(16,24,40,.04); }
.ta2-progress-meter span { color:var(--ta2-muted); font-size:.78rem; font-weight:700; }
.ta2-progress-meter>div { height:5px; margin-top:8px; background:#eef0f6; border-radius:99px; overflow:hidden; }
.ta2-progress-meter i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6366f1,#8b5cf6); transition:width .2s; }
.ta2-progress ol { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:5px; }
.ta2-progress li button { width:100%; display:grid; grid-template-columns:30px 1fr 20px; gap:9px; align-items:center; text-align:start; border:0; background:transparent; color:#667085; padding:9px 8px; border-radius:11px; }
.ta2-progress li b { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#f2f4f7; font-size:.76rem; }
.ta2-progress li span { display:grid; }
.ta2-progress li strong { font-size:.83rem; color:#344054; }
.ta2-progress li small { font-size:.68rem; }
.ta2-progress li>button>i { opacity:0; color:#12b76a; }
.ta2-progress li.is-active button { background:#f0f0ff; color:var(--ta2-brand); }
.ta2-progress li.is-active b { background:var(--ta2-brand); color:#fff; }
.ta2-progress li.is-complete>button>i { opacity:1; }
.ta2-form { min-width:0; }
.ta2-panel { background:#fff; border:1px solid var(--ta2-line); border-radius:20px; padding:clamp(20px,4vw,34px); box-shadow:0 12px 38px rgba(16,24,40,.05); }
.ta2-panel[hidden] { display:none !important; }
.ta2-panel>header { display:flex; gap:14px; align-items:flex-start; border-bottom:1px solid var(--ta2-line); padding-bottom:20px; margin-bottom:24px; }
.ta2-panel>header>span { display:grid; place-items:center; flex:0 0 38px; height:38px; color:#fff; background:linear-gradient(145deg,#6366f1,#7c3aed); border-radius:12px; font-weight:800; }
.ta2-panel h2 { font-size:1.25rem; margin:0 0 4px; }
.ta2-panel header p { color:var(--ta2-muted); font-size:.88rem; margin:0; }
.ta2-grid { display:grid; gap:18px; }
.ta2-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ta2-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ta2-panel label>span,.ta2-suitability legend { display:block; margin-bottom:7px; font-size:.83rem; font-weight:700; color:#344054; }
.ta2-panel label span b,.ta2-suitability legend b { color:#b42318; font-size:.69rem; text-transform:uppercase; margin-inline-start:4px; }
.ta2-panel label span em { color:#667085; font-weight:500; font-style:normal; font-size:.72rem; margin-inline-start:4px; }
.ta2-panel label>small { display:block; color:var(--ta2-muted); font-size:.72rem; margin-top:6px; line-height:1.4; }
.ta2-panel .form-control,.ta2-panel .form-select { min-height:46px; border-color:#d0d5dd; border-radius:10px; }
.ta2-repeat-list { display:grid; gap:12px; margin-bottom:14px; }
.ta2-repeat-row,.ta2-subject-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:12px; padding:14px; background:var(--ta2-soft); border:1px solid var(--ta2-line); border-radius:14px; }
.ta2-language-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(170px,.65fr) auto; transition:border-color .16s ease,background .16s ease; }
.ta2-language-row.is-suggested { border-color:#f5b942; background:#fffbeb; }
.ta2-language-row.is-confirmed { border-color:#75d6a4; background:#f2fcf6; }
.ta2-language-policy { display:flex; gap:9px; align-items:flex-start; margin:-4px 0 16px; padding:12px 14px; border:1px solid #c7d7fe; border-radius:12px; background:#f5f8ff; color:#344054; }
.ta2-language-policy i { color:#4f46e5; margin-top:1px; }
.ta2-language-policy p { margin:0; font-size:.79rem; line-height:1.5; }
.ta2-language-confirmation { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:7px; min-height:46px; }
.ta2-language-confirmation .btn { white-space:nowrap; }
.ta2-language-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:999px; font-size:.7rem; font-weight:800; line-height:1.2; }
.ta2-language-badge.suggested { color:#92400e; background:#fef3c7; }
.ta2-language-badge.confirmed { color:#027a48; background:#d1fadf; }
.ta2-subject-row { grid-template-columns:1.2fr 1fr 1fr auto; }
.ta2-range { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ta2-suitability { border:0; padding:24px 0 0; margin-top:24px; border-top:1px solid var(--ta2-line); }
.ta2-suitability p { color:var(--ta2-muted); font-size:.82rem; }
.ta2-suitability>div { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.ta2-suitability>div label { display:flex; align-items:center; gap:9px; border:1px solid var(--ta2-line); border-radius:12px; padding:11px; cursor:pointer; }
.ta2-suitability>div label span { margin:0; }
.ta2-approval-note,.ta2-submit-note { display:flex; gap:11px; padding:14px; border-radius:12px; background:#fffaeb; color:#7a2e0e; margin-bottom:20px; }
.ta2-approval-note span { display:grid; font-size:.82rem; }
.ta2-upload-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.ta2-upload { display:grid; grid-template-columns:32px 1fr; gap:10px; padding:16px; border:1px dashed #98a2b3; border-radius:14px; background:#fcfcfd; cursor:pointer; }
.ta2-upload>i { color:var(--ta2-brand); font-size:1.35rem; }
.ta2-upload span { display:grid !important; margin:0 !important; }
.ta2-upload small { color:var(--ta2-muted); font-weight:400; }
.ta2-upload input { grid-column:1/-1; width:100%; font-size:.78rem; }
.ta2-optional { margin-top:18px; border:1px solid var(--ta2-line); border-radius:12px; padding:13px; }
.ta2-optional summary { cursor:pointer; font-weight:700; font-size:.84rem; }
.ta2-optional label { display:block; margin-top:14px; }
.ta2-private-note { display:flex; gap:8px; color:#027a48; background:#ecfdf3; padding:12px; border-radius:10px; font-size:.78rem; margin:16px 0 0; }
.ta2-consent { display:flex; gap:12px; align-items:flex-start; padding:18px; border:1px solid var(--ta2-line); border-radius:14px; }
.ta2-consent input { margin-top:4px; }
.ta2-consent span { margin:0 !important; display:grid !important; gap:5px; }
.ta2-submit-note { margin:16px 0 0; background:#eef4ff; color:#3538cd; }
.ta2-submit-note p { margin:0; font-size:.82rem; }
.ta2-review-warning,.ta2-review-ready { padding:16px; border-radius:12px; margin-bottom:16px; }
.ta2-review-warning { background:#fff1f0; color:#b42318; }.ta2-review-ready { background:#ecfdf3; color:#027a48; }
.ta2-review-warning p,.ta2-review-ready p { margin:4px 0 0; font-size:.8rem; }
.ta2-inline-errors { margin:12px 0; padding:12px 16px; border:1px solid #fda29b; background:#fff1f0; color:#b42318; border-radius:12px; font-size:.83rem; }
.ta2-inline-errors ul { margin:6px 0 0; }
.ta2-missing-link { border:0; padding:3px 0; color:inherit; background:transparent; text-decoration:underline; text-align:start; font:inherit; }
.ta2-missing-link:focus-visible { outline:3px solid rgba(79,70,229,.3); outline-offset:2px; }
.ta2-field-error { width:100%; margin-top:6px; font-size:.75rem; color:#b42318; }
.ta2-local-recovery,.ta2-resume-help { margin:0 0 18px; border-radius:14px; }
.ta2-local-recovery>span { display:block; margin:4px 0 10px; }
.ta2-local-recovery>div { display:flex; flex-wrap:wrap; gap:8px; }
.ta2-resume-help { padding:14px 16px; border:1px solid var(--ta2-line); background:#fff; }
.ta2-resume-help summary { cursor:pointer; font-weight:800; }
.ta2-resume-help>p { margin:10px 0; color:var(--ta2-muted); font-size:.82rem; }
.ta2-resume-help .btn { align-self:end; min-height:46px; }
.ta2-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; padding:12px; background:rgba(255,255,255,.96); border:1px solid var(--ta2-line); border-radius:15px; box-shadow:0 10px 30px rgba(16,24,40,.08); position:sticky; bottom:10px; z-index:20; backdrop-filter:blur(12px); }
.ta2-actions [data-ta-back] { margin-inline-end:auto; }
.ta2-success { display:flex; gap:18px; background:#ecfdf3; border:1px solid #a6f4c5; border-radius:18px; padding:22px; margin-bottom:22px; color:#05603a; }
.ta2-success>i { font-size:2rem; }.ta2-success h2 { font-size:1.2rem; margin:0 0 4px; }.ta2-success p { margin:0 0 12px; }
.ta2-success dl { display:flex; flex-wrap:wrap; gap:12px 28px; margin:0; }.ta2-success dl div { display:grid; }.ta2-success dt { font-size:.7rem; text-transform:uppercase; }.ta2-success dd { margin:0; font-weight:800; }
.ta2-draft-banner { display:flex; align-items:center; gap:8px; margin-bottom:20px; }
[dir="rtl"] .ta2-actions .bi-arrow-left,[dir="rtl"] .ta2-actions .bi-arrow-right { transform:scaleX(-1); }

@media (max-width: 800px) {
  .ta2-shell { width:min(100% - 24px,680px); padding-bottom:96px; }
  .ta2-header { min-height:62px; }.ta2-header-actions>a { display:none; }
  .ta2-intro { display:block; padding:24px 2px 18px; }.ta2-trust { justify-content:flex-start; margin-top:14px; }
  .ta2-workspace { display:block; }.ta2-progress { position:static; padding:13px; margin-bottom:12px; }
  .ta2-progress ol { display:flex; overflow-x:auto; gap:5px; margin-top:12px; scrollbar-width:none; }
  .ta2-progress li { flex:0 0 auto; }.ta2-progress li button { display:flex; width:auto; padding:6px; }.ta2-progress li span,.ta2-progress li>button>i { display:none; }
  .ta2-grid.two,.ta2-grid.three,.ta2-upload-grid { grid-template-columns:1fr; }
  .ta2-subject-row,.ta2-repeat-row,.ta2-language-row { grid-template-columns:1fr; }.ta2-subject-row>button,.ta2-repeat-row>button { justify-self:end; }
  .ta2-language-confirmation { min-height:0; }
  .ta2-suitability>div { grid-template-columns:1fr 1fr; }
  .ta2-actions { position:fixed; left:0; right:0; bottom:0; border-radius:16px 16px 0 0; margin:0; padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .ta2-actions .btn { min-height:44px; font-size:.8rem; }.ta2-actions [data-save-draft-button] { margin-inline-start:auto; }
  .ta2-draft-banner { align-items:flex-start; flex-wrap:wrap; }
}
@media (max-width: 420px) {
  .ta2-shell { width:calc(100% - 16px); }.ta2-panel { padding:18px 14px; border-radius:15px; }.ta2-panel>header { margin-bottom:18px; }
  .ta2-suitability>div { grid-template-columns:1fr; }.ta2-trust span:nth-child(2) { display:none; }
  .ta2-actions .btn { padding-inline:10px; }.ta2-actions .btn i { display:none; }
}

/* Smart workflow UI final polish */
.public-share-actions {
    align-items: center;
    display: inline-flex;
    position: relative;
    max-width: 100%;
}

.public-share-actions .btn {
    border-radius: 8px;
    white-space: nowrap;
}

.public-share-menu {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    display: grid;
    gap: 2px;
    min-width: 190px;
    padding: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
}

.public-share-menu a,
.public-share-menu button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #111827;
    display: flex;
    gap: 8px;
    line-height: 1.2;
    padding: 9px 10px;
    text-align: start;
    text-decoration: none;
    width: 100%;
}

.public-share-menu a:hover,
.public-share-menu button:hover {
    background: #f8fafc;
}

.application-section {
    --application-accent: #0ea5e9;
    --application-soft: #eff6ff;
    background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--application-soft) 56%, #fff));
    border: 1px solid color-mix(in srgb, var(--application-accent) 28%, rgba(15, 23, 42, .1));
    border-left: 5px solid var(--application-accent);
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .06);
}

.application-section-title > i {
    background: color-mix(in srgb, var(--application-accent) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--application-accent) 30%, rgba(15, 23, 42, .08));
    color: var(--application-accent);
}

.application-accent-sky { --application-accent: #0284c7; --application-soft: #e0f2fe; }
.application-accent-emerald { --application-accent: #059669; --application-soft: #dcfce7; }
.application-accent-amber { --application-accent: #d97706; --application-soft: #fef3c7; }
.application-accent-violet { --application-accent: #7c3aed; --application-soft: #ede9fe; }
.application-accent-teal { --application-accent: #0f766e; --application-soft: #ccfbf1; }
.application-accent-rose { --application-accent: #e11d48; --application-soft: #ffe4e6; }
.application-accent-indigo { --application-accent: #4f46e5; --application-soft: #e0e7ff; }

.teacher-application-followup {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0;
}

.resource-category-card.is-selected {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-color: rgba(20, 184, 166, .52);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}

.resource-category-card summary {
    grid-template-columns: 44px minmax(0, 1fr) auto 18px;
}

.resource-category-card summary em {
    background: #ecfeff;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    color: #0f766e;
    font-size: .72rem;
    font-style: normal;
    font-weight: 850;
    padding: .22rem .5rem;
}

.resource-track-list a {
    border-radius: 8px;
    color: #334155;
    font-weight: 750;
    padding: .45rem .65rem;
    text-decoration: none;
}

.resource-track-list a.is-selected {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.resource-category-quran_islamic { --resource-main: #16a34a; --resource-soft: #fef3c7; }
.resource-category-arabic_languages { --resource-main: #7c3aed; --resource-soft: #dbeafe; }
.resource-category-school_support { --resource-main: #ea580c; --resource-soft: #fef9c3; }
.resource-category-coding_ai { --resource-main: #2563eb; --resource-soft: #ede9fe; }
.resource-category-public_samples { --resource-main: #db2777; --resource-soft: #ccfbf1; }
.resource-category-school_curriculum { --resource-main: #0f766e; --resource-soft: #dbeafe; }

.resource-category-card[class*="resource-category-"] summary span {
    background: color-mix(in srgb, var(--resource-soft, #dcfce7) 72%, #fff);
    color: var(--resource-main, #166534);
}

.subject-tone-blueyellow { --subject-main: #2563eb; --subject-text: #1d4ed8; --subject-extra: #facc15; }
.subject-tone-teallime { --subject-main: #0d9488; --subject-text: #0f766e; --subject-extra: #84cc16; }
.subject-tone-electric { --subject-main: #4f46e5; --subject-text: #3730a3; --subject-extra: #06b6d4; }

.subject-catalog-card.is-selected {
    border-color: color-mix(in srgb, var(--subject-main, #2563eb) 55%, var(--line));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--subject-main, #2563eb) 16%, transparent), 0 18px 42px rgba(15, 23, 42, .11);
    transform: translateY(-2px);
}

.subject-tone-blueyellow .subject-catalog-icon,
.subject-tone-teallime .subject-catalog-icon,
.subject-tone-electric .subject-catalog-icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--subject-main) 15%, #fff), color-mix(in srgb, var(--subject-extra) 22%, #fff));
}

.learning-moment-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.learning-moment-filter-row a {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 999px;
    color: #334155;
    font-weight: 800;
    padding: .45rem .72rem;
    text-decoration: none;
}

.learning-moment-card {
    display: flex;
    flex-direction: column;
    min-height: 430px;
}

.learning-moment-media {
    aspect-ratio: 16 / 9;
    background: #0f172a;
    border-radius: 8px;
    overflow: hidden;
}

.learning-moment-youtube {
    align-items: center;
    background:
        linear-gradient(rgba(15, 23, 42, .12), rgba(15, 23, 42, .5)),
        var(--moment-thumb, linear-gradient(135deg, #ecfeff, #e0e7ff));
    background-position: center;
    background-size: cover;
    color: #fff;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 180px;
    text-decoration: none;
}

.learning-moment-youtube.detail {
    min-height: 320px;
}

.learning-moment-embed {
    aspect-ratio: 16 / 9;
    background: #0f172a;
    border: 0;
    border-radius: 8px;
    display: block;
    min-height: 190px;
    width: 100%;
}

.learning-moment-embed.detail {
    min-height: 360px;
}

.learning-moment-youtube span {
    align-items: center;
    backdrop-filter: blur(4px);
    background: rgba(15, 23, 42, .58);
    border-radius: 999px;
    display: inline-flex;
    font-weight: 850;
    gap: 8px;
    padding: .6rem .9rem;
}

.learning-moment-thumb-preview {
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    height: 54px;
    object-fit: cover;
    width: 96px;
}

.sample-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.sample-card-body h2 a {
    color: inherit;
    text-decoration: none;
}

.sample-card-body h2 a:hover {
    color: #0f766e;
}

.teaching-sample-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.summer-countdown-card {
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .1);
    margin: 16px 0;
    max-width: 520px;
    padding: 14px;
}

.summer-countdown-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 8px;
}

.summer-countdown-grid span {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    color: #475569;
    display: grid;
    font-size: .75rem;
    font-weight: 750;
    min-height: 64px;
    place-items: center;
}

.summer-countdown-grid b {
    color: #0f172a;
    display: block;
    font-size: 1.4rem;
    line-height: 1;
}

.summer-offer-ended {
    align-items: center;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    color: #9a3412;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
    padding: 10px;
}

.testimonial-theme-1 { background: #f0fdf4; border-color: #bbf7d0; }
.testimonial-theme-2 { background: #eff6ff; border-color: #bfdbfe; }
.testimonial-theme-3 { background: #fff7ed; border-color: #fed7aa; }
.testimonial-theme-4 { background: #fdf2f8; border-color: #fbcfe8; }

.certificate-preview {
    background: linear-gradient(135deg, #fff7ed, #f8fafc);
    border: 1px solid rgba(146, 64, 14, .18);
    border-radius: 8px;
    padding: 14px;
}

.certificate-frame {
    aspect-ratio: 1.414 / 1;
    background:
        radial-gradient(circle at 12% 15%, rgba(234, 179, 8, .16), transparent 18%),
        linear-gradient(135deg, #fffdf7, #fff7ed 45%, #ffffff);
    border: 10px double #991b1b;
    border-radius: 8px;
    color: #431407;
    min-height: 420px;
    padding: 14px;
}

.certificate-inner-border {
    align-items: center;
    border: 2px solid #d97706;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    padding: clamp(16px, 3vw, 28px);
    text-align: center;
}

.certificate-preview-top,
.certificate-footer-line,
.certificate-signature-grid {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    width: 100%;
}

.certificate-logo-area {
    border: 1px solid #d97706;
    border-radius: 999px;
    font-weight: 900;
    padding: .45rem .9rem;
}

.certificate-logo-slot {
    align-items: center;
    background: #fff;
    border: 1px solid #d97706;
    border-radius: 8px;
    display: inline-flex;
    height: 58px;
    justify-content: center;
    padding: 6px;
    width: 58px;
}

.certificate-logo-slot img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.certificate-type-pill {
    background: #991b1b;
    border-radius: 999px;
    color: #fff;
    font-weight: 850;
    padding: .42rem .75rem;
}

.certificate-preview-title h2 {
    color: #991b1b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3.4rem);
    letter-spacing: 0;
    margin: 8px 0 4px;
}

.certificate-frame h3 {
    border-bottom: 2px solid #d97706;
    color: #0f172a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    margin: 0;
    padding: 0 32px 6px;
}

.certificate-wording {
    max-width: 720px;
}

.certificate-course-line strong {
    display: block;
    font-size: 1.1rem;
}

.certificate-signature-grid span {
    border-top: 1px solid #92400e;
    flex: 1 1 0;
    font-weight: 800;
    padding-top: 8px;
}

.certificate-signature-slot {
    min-height: 42px;
}

.certificate-qr-box {
    align-items: center;
    aspect-ratio: 1;
    border: 2px solid #0f172a;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    width: 44px;
}

.certificate-qr-mini {
    align-items: center;
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid #92400e;
    border-radius: 6px;
    color: #431407;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.15rem;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.certificate-visual-code {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    color: #7f1d1d;
    display: inline-flex;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: 0;
    padding: .28rem .45rem;
}

.certificate-list-code {
    font-size: .82rem;
}

.certificate-template-formal {
    box-shadow: inset 0 0 0 6px rgba(217, 119, 6, .12);
}

.teacher-score-signal-grid,
.teacher-excellence-award-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.teacher-score-signal-card,
.teacher-excellence-chip,
.my-session-readiness-card,
.learning-hub-tool-card,
.my-session-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.teacher-score-signal-card {
    min-height: 112px;
    padding: 14px;
}

.teacher-score-signal-card span,
.teacher-score-empty span,
.learning-hub-tool-card span,
.my-session-readiness-card span {
    color: #64748b;
    display: block;
    font-size: .86rem;
    margin-top: 4px;
}

.signal-tone-1 { background: #f0fdf4; }
.signal-tone-2 { background: #eff6ff; }
.signal-tone-3 { background: #fff7ed; }
.signal-tone-4 { background: #fdf2f8; }
.signal-tone-5 { background: #ecfeff; }

.teacher-score-empty {
    display: grid;
    gap: 8px;
    justify-items: center;
}

.teacher-score-empty i {
    color: #0f766e;
    font-size: 2rem;
}

.teacher-excellence-chip {
    align-items: center;
    display: inline-flex;
    font-weight: 850;
    gap: 8px;
    padding: 12px 14px;
}

.excellence-tone-1 { background: #fff7ed; color: #9a3412; }
.excellence-tone-2 { background: #f0fdf4; color: #166534; }
.excellence-tone-3 { background: #eff6ff; color: #1d4ed8; }
.excellence-tone-4 { background: #fdf2f8; color: #9d174d; }

.learning-hub-tool-card {
    color: #0f172a;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 14px;
    text-decoration: none;
}

.learning-hub-tool-card i {
    color: #0f766e;
    font-size: 1.4rem;
}

.learning-hub-moodle-card.is-muted {
    background: #f8fafc;
    border-style: dashed;
    box-shadow: none;
    opacity: .86;
}

.learning-hub-moodle-card.is-muted .btn-primary {
    background: #64748b;
    border-color: #64748b;
}

.my-session-readiness-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 14px;
}

.my-session-readiness-card i {
    color: #2563eb;
    font-size: 1.35rem;
}

.my-sessions-group-list {
    display: grid;
    gap: 16px;
}

.my-session-card {
    background:
        linear-gradient(90deg, var(--session-soft, #f8fafc), #fff 42%),
        #fff;
    border-color: var(--session-border, rgba(15, 23, 42, .09));
    border-left: 6px solid var(--session-accent, var(--brand));
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 14px;
}

.my-session-action-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    height: 100%;
    padding: 12px;
}

.my-session-subject-pill {
    align-items: center;
    background: var(--session-soft, #eef2ff);
    border: 1px solid var(--session-border, #c7d2fe);
    border-radius: 999px;
    color: var(--session-accent, var(--brand));
    display: inline-flex;
    font-size: .76rem;
    font-weight: 850;
    gap: 6px;
    padding: 4px 8px;
}

.my-session-card h3 {
    font-size: 1.05rem;
    margin: 0;
}

.my-session-meta-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.my-session-meta-grid span {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    color: #64748b;
    font-size: .8rem;
    padding: 8px;
}

.my-session-meta-grid strong {
    color: #0f172a;
    display: block;
    font-size: .9rem;
}

[data-my-session-table-row] td:first-child {
    border-left: 4px solid var(--session-accent, transparent);
}

@media (max-width: 767.98px) {
    .public-share-actions,
    .teacher-application-followup,
    .summer-offer-ended {
        align-items: stretch;
        flex-direction: column;
    }
    .public-share-actions .btn,
    .public-share-actions a,
    .teacher-application-followup .btn {
        justify-content: center;
        width: 100%;
    }
    .application-check-grid,
    .application-check-grid.wide,
    .summer-countdown-grid,
    .my-session-meta-grid {
        grid-template-columns: 1fr;
    }
    .resource-category-card summary {
        grid-template-columns: 44px minmax(0, 1fr) 18px;
    }
    .resource-category-card summary em {
        grid-column: 2;
        justify-self: flex-start;
    }
    .certificate-frame {
        min-height: 520px;
    }
    .certificate-preview-top,
    .certificate-footer-line,
    .certificate-signature-grid {
        align-items: stretch;
        flex-direction: column;
    }
}

.public-support-widget {
    bottom: 1.1rem;
    position: fixed;
    right: 1.1rem;
    z-index: 1060;
}
.public-support-toggle {
    align-items: center;
    background: #15803d;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .24);
    color: #fff;
    display: inline-flex;
    font-weight: 700;
    gap: .45rem;
    min-height: 44px;
    padding: .65rem .95rem;
}
.public-support-panel {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 12px;
    bottom: 3.75rem;
    box-shadow: 0 24px 54px rgba(15, 23, 42, .2);
    min-width: 240px;
    padding: .75rem;
    position: absolute;
    right: 0;
}
.public-support-panel-head,
.public-support-panel a {
    align-items: center;
    display: flex;
    gap: .55rem;
}
.public-support-panel-head {
    justify-content: space-between;
    margin-bottom: .45rem;
}
.public-support-panel-head button {
    background: transparent;
    border: 0;
    color: #475569;
    font-size: 1.3rem;
    line-height: 1;
}
.public-support-panel a {
    border-radius: 8px;
    color: #0f172a;
    font-weight: 600;
    padding: .55rem .45rem;
    text-decoration: none;
}
.public-support-panel a:hover {
    background: #f1f5f9;
}
.copy-toast {
    background: #0f172a;
    border-radius: 999px;
    bottom: 1rem;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .24);
    color: #fff;
    font-weight: 700;
    left: 50%;
    opacity: 0;
    padding: .65rem 1rem;
    pointer-events: none;
    position: fixed;
    transform: translate(-50%, 16px);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 1070;
}
.copy-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.summer-campaign-offer-foundation,
.summer-public-footer .container {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}
.summer-campaign-offer-foundation {
    background: #ecfeff;
    border: 1px solid rgba(8, 145, 178, .2);
    border-radius: 18px;
    padding: clamp(1rem, 3vw, 2rem);
}
.summer-campaign-offer-foundation h2 {
    color: #164e63;
    margin-bottom: .35rem;
}
.summer-campaign-offer-foundation p {
    color: #155e75;
    margin: 0;
    max-width: 58rem;
}
.summer-offer-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.summer-offer-chip-row span {
    background: #fff;
    border: 1px solid rgba(8, 145, 178, .18);
    border-radius: 999px;
    color: #0e7490;
    font-weight: 700;
    padding: .45rem .75rem;
}
.summer-public-footer {
    background: #0f172a;
    color: #fff;
    margin-top: 2rem;
    padding: 1rem 0;
}
.summer-public-footer a {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.summer-public-footer a:hover {
    color: #bae6fd;
}
.teaching-sample-actions {
    align-items: center;
}
.subject-catalog-card .btn {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .public-support-widget {
        bottom: .85rem;
        right: .85rem;
    }
    .public-support-panel {
        max-width: calc(100vw - 1.7rem);
        min-width: min(240px, calc(100vw - 1.7rem));
    }
    .public-support-toggle span {
        display: none;
    }
    .summer-public-footer .container {
        align-items: flex-start;
        flex-direction: column;
    }
}

.teacher-application-page,
.public-resources-page,
.resource-detail-page {
    background: linear-gradient(135deg, rgba(17, 145, 145, .12), rgba(76, 140, 255, .08)), var(--app-bg, #f8fafc);
}

.summer-boost-page {
    background: #f8fafc;
    color: #172033;
}

.teacher-application-page .panel,
.public-resources-page .panel,
.resource-detail-page .panel,
.summer-boost-page .panel {
    border: 1px solid rgba(15, 23, 42, .09);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}

.summer-campaign-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 5vw, 58px) 0 clamp(18px, 3vw, 34px);
    background:
        radial-gradient(circle at 10% 20%, rgba(20, 184, 166, .16), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #e0f2fe 44%, #fef3c7 100%);
}

.summer-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 46px;
    background:
        linear-gradient(135deg, transparent 28px, #f8fafc 0) left bottom / 56px 56px repeat-x,
        #f8fafc;
    opacity: .95;
}

.summer-boost-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 430px);
    gap: clamp(22px, 5vw, 56px);
    align-items: center;
    min-height: clamp(420px, 68vh, 620px);
    z-index: 1;
}

.summer-hero-copy {
    max-width: 650px;
}

.summer-hero-copy h1 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    font-weight: 850;
    line-height: .98;
}

.summer-hero-lead {
    max-width: 540px;
    margin: 0 0 22px;
    color: #334155;
    font-size: clamp(1.1rem, 2vw, 1.42rem);
    line-height: 1.45;
}

.summer-hero-actions,
.summer-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.summer-hero-links {
    margin-top: 14px;
    color: #64748b;
    font-weight: 700;
}

.summer-hero-links a {
    color: #0f766e;
    text-decoration: none;
}

.summer-hero-visual {
    position: relative;
    min-height: 340px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.summer-boost-image {
    width: min(100%, 390px);
    max-height: 310px;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(15, 23, 42, .18));
    animation: seasonalFloat 7s ease-in-out infinite;
}

.summer-float {
    position: absolute;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(15, 23, 42, .08);
    color: #0f766e;
    box-shadow: 0 14px 26px rgba(15, 23, 42, .12);
    animation: gentleFloat 6s ease-in-out infinite;
}

.summer-float-book { left: 4%; top: 14%; }
.summer-float-star { right: 4%; top: 22%; color: #a16207; animation-delay: .8s; }
.summer-float-drop { right: 14%; bottom: 15%; color: #0369a1; animation-delay: 1.4s; }

.summer-sparkle {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 18px 14px 0 rgba(20, 184, 166, .72), -16px 22px 0 rgba(14, 165, 233, .55);
    animation: sparklePulse 4.8s ease-in-out infinite;
}

.summer-sparkle-one { left: 16%; bottom: 24%; }
.summer-sparkle-two { right: 20%; top: 8%; animation-delay: 1.1s; }

.summer-section-heading,
.summer-plan-layout,
.summer-campaign-control {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.summer-section-heading h2,
.summer-plan-layout h2,
.summer-campaign-control h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.45rem, 3vw, 2.2rem);
    font-weight: 800;
}

.summer-offering-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.summer-offering-card,
.resource-card,
.session-live-card {
    position: relative;
    overflow: hidden;
}

.summer-offering-card {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .07);
}

.summer-offering-card h3 {
    margin: 0;
    color: #172033;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
}

.summer-offering-card p {
    margin: 0;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.42;
    flex: 1;
}

.summer-boost-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #075985;
    background: #e0f2fe;
}

.summer-offering-card:nth-child(4n+1) .summer-boost-icon { background: #dcfce7; color: #166534; }
.summer-offering-card:nth-child(4n+2) .summer-boost-icon { background: #fef3c7; color: #92400e; }
.summer-offering-card:nth-child(4n+3) .summer-boost-icon { background: #fce7f3; color: #9d174d; }

.summer-plan-band {
    padding: clamp(28px, 5vw, 52px) 0;
    background: #0f766e;
    color: #ecfeff;
}

.summer-plan-layout p {
    max-width: 540px;
    margin: 8px 0 0;
    color: rgba(236, 254, 255, .86);
}

.summer-plan-layout h2 {
    color: #ffffff;
}

.summer-bundle-list,
.summer-reuse-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.summer-bundle-chip,
.summer-reuse-grid span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    font-weight: 700;
}

.summer-request-card {
    min-width: min(100%, 250px);
    display: grid;
    gap: 7px;
    padding: 16px;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
}

.summer-request-card span,
.summer-request-card .small {
    color: #64748b;
}

.summer-campaign-control {
    padding: clamp(18px, 3vw, 28px);
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
}

.summer-campaign-control p {
    max-width: 620px;
    margin: 8px 0 0;
    color: #64748b;
}

.summer-campaign-control .summer-reuse-grid span {
    color: #0f766e;
    background: #ecfeff;
    border-color: rgba(15, 118, 110, .16);
}

.credential-mask {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    overflow-wrap: anywhere;
}

.credential-chip {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

input.credential-mask,
.api-key-mask,
.masked-secret {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

input.credential-mask {
    width: 100%;
}

.meeting-attendee-picker {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
    gap: 12px;
}

.attendee-selected-summary {
    align-items: center;
    background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding: 8px 10px;
}

[data-meeting-attendee-picker].is-collapsed .meeting-attendee-picker {
    display: none;
}

.meeting-attendee-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: var(--surface);
    min-width: 0;
}

.meeting-attendee-panel .form-control,
.meeting-attendee-panel .form-select {
    min-width: min(100%, 160px);
}

.selected-attendee-list {
    min-height: 132px;
    max-height: 230px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.selected-attendee-chip {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
    color: var(--text);
    padding: 7px 9px;
    text-align: left;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .meeting-attendee-picker {
        grid-template-columns: 1fr;
    }
}

.sticky-action-bar {
    align-items: center;
    background: color-mix(in srgb, var(--surface) 92%, white 8%);
    border: 1px solid var(--line);
    border-radius: 8px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 12px;
    padding: 8px 10px;
    position: sticky;
    z-index: 20;
}

@media (max-width: 767.98px) {
    .sticky-action-bar {
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        flex-direction: column;
        align-items: stretch;
    }
}

@keyframes seasonalFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes gentleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(3deg); }
}

@keyframes sparklePulse {
    0%, 100% { opacity: .56; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.08); }
}

.session-live-card {
    min-height: 150px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(37, 99, 235, .16);
    background: linear-gradient(135deg, #eff6ff, #ffffff);
}

.session-live-card-teacher {
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
    border-color: rgba(22, 163, 74, .18);
}

.session-countdown-label {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 12px 0;
}

.session-live-card.is-join-open,
.session-live-card.is-live-now {
    border-color: rgba(37, 99, 235, .42);
}

.certificate-preview {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
}

.certificate-frame {
    aspect-ratio: 1.414 / 1;
    min-height: 360px;
    border: 10px double #0f766e;
    background: linear-gradient(135deg, #ffffff, #f0fdfa);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 32px;
}

.scroll-top-button {
    position: fixed;
    right: 18px;
    bottom: 18px;
    border: 0;
    border-radius: 999px;
    padding: 10px 14px;
    background: #0f766e;
    color: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
}

@media (max-width: 768px) {
    .summer-boost-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .summer-hero-copy h1 {
        font-size: 2.45rem;
    }
    .summer-hero-actions .btn {
        width: 100%;
    }
    .summer-hero-visual {
        min-height: 260px;
    }
    .summer-boost-image {
        width: min(86%, 300px);
    }
    .summer-float {
        width: 46px;
        height: 46px;
    }
    .summer-float-star {
        right: 8%;
    }
    .summer-float-drop {
        display: none;
    }
    .summer-offering-grid {
        grid-template-columns: 1fr;
    }
    .summer-section-heading,
    .summer-plan-layout,
    .summer-campaign-control {
        align-items: stretch;
    }
    .certificate-frame {
        min-height: 280px;
        padding: 18px;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .summer-offering-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .summer-boost-image,
    .summer-float,
    .summer-sparkle {
        animation: none;
    }
}

[data-theme="dark"] .summer-boost-page,
body.theme-dark.summer-boost-page,
[data-theme="dark"] .summer-campaign-hero,
body.theme-dark .summer-campaign-hero {
    background: #0f172a;
    color: #e5e7eb;
}

[data-theme="dark"] .summer-campaign-hero,
body.theme-dark .summer-campaign-hero {
    background:
        radial-gradient(circle at 10% 20%, rgba(45, 212, 191, .14), transparent 28%),
        linear-gradient(135deg, #0f172a 0%, #123044 55%, #312e17 100%);
}

[data-theme="dark"] .summer-wave,
body.theme-dark .summer-wave {
    background:
        linear-gradient(135deg, transparent 28px, #0f172a 0) left bottom / 56px 56px repeat-x,
        #0f172a;
}

[data-theme="dark"] .summer-hero-copy h1,
[data-theme="dark"] .summer-section-heading h2,
[data-theme="dark"] .summer-campaign-control h2,
body.theme-dark .summer-hero-copy h1,
body.theme-dark .summer-section-heading h2,
body.theme-dark .summer-campaign-control h2 {
    color: #f8fafc;
}

[data-theme="dark"] .summer-hero-lead,
body.theme-dark .summer-hero-lead,
[data-theme="dark"] .summer-offering-card p,
body.theme-dark .summer-offering-card p,
[data-theme="dark"] .summer-campaign-control p,
body.theme-dark .summer-campaign-control p {
    color: #cbd5e1;
}

[data-theme="dark"] .summer-offering-card,
[data-theme="dark"] .summer-campaign-control,
body.theme-dark .summer-offering-card,
body.theme-dark .summer-campaign-control {
    background: #111827;
    border-color: rgba(148, 163, 184, .25);
}

[data-theme="dark"] .summer-offering-card h3,
body.theme-dark .summer-offering-card h3 {
    color: #f8fafc;
}

.public-marketing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.public-brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #102030;
    font-weight: 800;
    text-decoration: none;
}

.public-brand-mark::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(135deg, #0f766e, #2563eb);
}

.public-brand-mark-logo::before {
    display: none;
}

.public-brand-mark-logo img {
    border-radius: 8px;
    height: 34px;
    width: 34px;
}

.public-marketing-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.public-marketing-actions > a {
    color: #334155;
    font-weight: 700;
    text-decoration: none;
    padding: 6px 8px;
}

.public-marketing-actions .auth-language-switcher {
    margin: 0;
}

.summer-redesign-page {
    background: #f8fafc;
    color: #102030;
}

.learning-programs-page {
    background:
        linear-gradient(180deg, #ffffff 0, #f8fafc 42%, #eefdf8 100%);
    min-height: 100vh;
}

.learning-programs-intro {
    padding: clamp(20px, 4vw, 42px) 12px 14px;
    text-align: center;
}

.learning-programs-intro h1 {
    color: #0f172a;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.08;
    margin: 0 0 8px;
}

.learning-programs-intro p {
    color: #475569;
    font-size: 1rem;
    margin: 0 auto;
    max-width: 720px;
}

.learning-programs-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}

.learning-programs-cards {
    padding-bottom: clamp(26px, 5vw, 56px);
    padding-top: 12px;
}

.learning-program-card-grid .summer-program-card {
    min-height: 0;
}

.learning-programs-plan {
    align-items: center;
    background: #0f766e;
    border-radius: 8px;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 28px;
    padding: clamp(18px, 4vw, 28px);
}

.learning-programs-plan h2,
.learning-programs-plan p {
    margin: 0;
}

.learning-programs-plan p {
    color: rgba(255,255,255,.82);
    margin-top: 4px;
}

.summer-marketing-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(12px, 2vw, 20px) 0 clamp(16px, 3vw, 30px);
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(236,253,245,.86)),
        linear-gradient(90deg, #ecfeff, #fef3c7);
}

.summer-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 0;
}

.summer-marketing-hero-compact .summer-hero-grid {
    min-height: 0;
}

.summer-badge-row,
.summer-link-row,
.summer-chip-row,
.resources-cta-row,
.teacher-application-badges,
.teaching-samples-hero-actions,
.summer-plan-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.summer-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 8px;
    background: #fff;
    color: #0f766e;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.summer-badge.is-hot {
    color: #7c2d12;
    border-color: rgba(234, 88, 12, .24);
    background: #fff7ed;
}

.summer-hero-copy h1,
.teacher-application-hero h1,
.resources-hero h1,
.teaching-samples-hero h1 {
    margin: 10px 0 6px;
    color: #0f172a;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 850;
    line-height: 1.06;
}

.summer-hero-copy .summer-hero-lead,
.teacher-application-hero p,
.resources-hero p,
.teaching-samples-hero p {
    max-width: 780px;
    color: #475569;
    font-size: clamp(.98rem, 1.4vw, 1.12rem);
    line-height: 1.45;
}

.summer-link-row {
    margin-top: 14px;
}

.summer-link-row a {
    color: #0f766e;
    font-weight: 800;
    text-decoration: none;
}

.summer-section,
.resources-section,
.teaching-samples-section {
    padding-top: clamp(28px, 5vw, 58px);
    padding-bottom: clamp(28px, 5vw, 58px);
}

.summer-program-grid,
.summer-duration-grid,
.summer-support-grid,
.summer-reason-grid,
.resources-card-grid,
.teaching-samples-grid {
    display: grid;
    gap: 16px;
}

.summer-program-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 18px;
}

.summer-program-card,
.summer-duration-card,
.summer-support-card,
.summer-reason-grid article,
.resource-category-card,
.resource-card,
.teaching-sample-card,
.application-section,
.teacher-application-review-card,
.teacher-review-readiness article {
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
}

.summer-program-card {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
}

.summer-program-card h3,
.summer-duration-card h3,
.summer-support-card h3,
.resource-card h3,
.teaching-sample-card h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 850;
}

.summer-program-card p,
.summer-duration-card p,
.summer-support-card p,
.resource-card p,
.teaching-sample-card p {
    color: #64748b;
    line-height: 1.5;
}

.summer-program-subjects {
    font-weight: 800;
    color: #334155 !important;
}

.summer-program-card a {
    margin-top: auto;
    color: #0f766e;
    font-weight: 800;
    text-decoration: none;
}

.summer-program-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #0f172a;
}

.summer-program-crown { background: linear-gradient(180deg, #fff7ed, #ffffff); border-color: #fdba74; }
.summer-program-noor { background: linear-gradient(180deg, #ecfeff, #ffffff); border-color: #67e8f9; }
.summer-program-identity { background: linear-gradient(180deg, #fdf2f8, #ffffff); border-color: #f9a8d4; }
.summer-program-revelation { background: linear-gradient(180deg, #f0fdf4, #ffffff); border-color: #86efac; }
.summer-program-crown .summer-program-icon { background: #fef3c7; color: #92400e; }
.summer-program-noor .summer-program-icon { background: #cffafe; color: #0e7490; }
.summer-program-identity .summer-program-icon { background: #fce7f3; color: #be185d; }
.summer-program-revelation .summer-program-icon { background: #dcfce7; color: #166534; }

.summer-chip-row span,
.resource-filter-chips span,
.resource-track-list a,
.resource-card-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
}

.summer-soft-band {
    background: #eef6ff;
}

.summer-duration-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
}

.summer-duration-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 180px;
    padding: 18px;
}

.summer-duration-number {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 8px;
    background: #0f766e;
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
}

.summer-support-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
}

.summer-support-card {
    min-height: 190px;
    padding: 18px;
}

.summer-support-card > i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: #e0f2fe;
    color: #0369a1;
}

.summer-plan-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.summer-plan-layout h2 {
    color: #fff;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    font-weight: 850;
}

.summer-plan-layout p {
    max-width: 700px;
    color: rgba(255,255,255,.82);
}

.summer-reason-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 18px;
}

.summer-reason-grid article {
    min-height: 120px;
    padding: 16px;
    display: grid;
    gap: 10px;
}

.summer-reason-grid i {
    color: #2563eb;
    font-size: 1.5rem;
}

.summer-reason-grid span {
    color: #0f172a;
    font-weight: 850;
}

.summer-plan-band {
    background: linear-gradient(135deg, #0f766e, #1d4ed8);
}

.summer-plan-actions .btn-outline-light {
    border-color: rgba(255,255,255,.72);
}

.summer-faq-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.summer-faq-list details {
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: #fff;
}

.summer-faq-list summary {
    cursor: pointer;
    color: #0f172a;
    font-weight: 850;
}

.summer-faq-list p {
    margin: 10px 0 0;
    color: #64748b;
}

.summer-mobile-cta {
    display: none;
}

.summer-cta-button {
    white-space: normal;
}

.summer-cta-break::before {
    content: " — ";
}

.teacher-application-redesign,
.public-resources-redesign,
.teaching-samples-page {
    background: #f8fafc;
}

.teacher-application-hero,
.resources-hero,
.teaching-samples-hero {
    padding: clamp(24px, 5vw, 64px) 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(239,246,255,.86)),
        linear-gradient(90deg, #ecfeff, #fff7ed);
}

.teacher-application-hero-grid,
.resources-hero-grid,
.teaching-sample-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
    gap: clamp(20px, 4vw, 42px);
    align-items: center;
}

.teacher-application-steps {
    display: grid;
    gap: 10px;
}

.teacher-application-steps > div {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
    font-weight: 850;
}

.teacher-application-steps i,
.teacher-application-badges i {
    color: #0f766e;
}

.teacher-application-badges span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-weight: 800;
}

.teacher-application-form {
    display: grid;
    gap: 16px;
}

.application-section {
    padding: clamp(16px, 3vw, 24px);
}

.application-section.is-soft-hidden {
    display: none;
}

.application-section-title {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.application-section-title > i {
    flex: 0 0 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ecfeff;
    color: #0f766e;
}

.application-section-title h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.28rem;
    font-weight: 850;
}

.application-section-title p {
    margin: 3px 0 0;
    color: #64748b;
}

.application-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.application-check-grid.wide {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.application-check-grid label,
.availability-day {
    min-height: 42px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: #f8fafc;
}

.smart-application-list {
    display: grid;
    gap: 10px;
}

.smart-application-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(140px, .8fr) 42px;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: #f8fafc;
}

.smart-application-row [data-language-custom-wrap] {
    min-width: 0;
}

.smart-application-row:has([data-language-custom-wrap]:not(.d-none)) {
    grid-template-columns: minmax(160px, 1fr) minmax(150px, .9fr) minmax(120px, .7fr) 42px;
}

.smart-application-row[data-subject-level-row] {
    grid-template-columns: minmax(170px, 1fr) minmax(135px, .7fr) minmax(170px, 1fr) minmax(190px, 1.1fr) 42px;
}

.subject-range-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.smart-application-row [data-subject-scope-summary] {
    align-self: center;
}

.availability-smart-row {
    grid-template-columns: minmax(220px, 1.3fr) minmax(110px, .5fr) minmax(110px, .5fr) minmax(170px, .9fr) minmax(160px, .9fr) 42px;
}

.btn-icon-only {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    padding: 0;
}

.smart-row-summary {
    margin-top: 8px;
    color: #64748b;
    font-size: .9rem;
}

.learner-chip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.learner-chip {
    min-height: 106px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: #f8fafc;
}

.learner-chip .form-check {
    margin-bottom: 8px;
    font-weight: 850;
}

.learner-gender-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #475569;
    font-size: .9rem;
}

.learner-gender-options label,
.availability-day-pills label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.learner-suitability-picker > summary,
.parent-pause-request-details > summary {
    cursor: pointer;
    list-style: none;
}

.learner-suitability-picker > summary::-webkit-details-marker,
.parent-pause-request-details > summary::-webkit-details-marker {
    display: none;
}

.teaching-sample-dynamic-list {
    display: grid;
    gap: 8px;
}

.teaching-sample-dynamic-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.availability-day-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.availability-day-pills .form-label {
    flex: 0 0 100%;
    margin-bottom: 0;
}

.availability-day-pills label {
    min-height: 32px;
    padding: 5px 8px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    font-weight: 700;
}

.recording-tool {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px dashed rgba(15, 23, 42, .18);
    border-radius: 8px;
    background: #f8fafc;
}

.recording-tool span {
    color: #64748b;
    font-size: .92rem;
}

.availability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.teacher-submit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.teacher-submit-row span {
    color: #64748b;
    font-size: .92rem;
}

.resources-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
}

.resource-filter-panel {
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}

.resource-filter-panel label {
    display: grid;
    gap: 5px;
    color: #334155;
    font-weight: 800;
}

.resources-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.resource-category-card {
    overflow: hidden;
}

.resource-category-card summary {
    display: grid;
    grid-template-columns: 44px 1fr 18px;
    align-items: center;
    gap: 10px;
    min-height: 78px;
    padding: 14px;
    cursor: pointer;
    list-style: none;
}

.resource-category-card summary::-webkit-details-marker {
    display: none;
}

.resource-category-card summary span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #dcfce7;
    color: #166534;
}

.resource-category-card:nth-child(2) summary span { background: #dbeafe; color: #1d4ed8; }
.resource-category-card:nth-child(3) summary span { background: #fef3c7; color: #92400e; }
.resource-category-card:nth-child(4) summary span { background: #ede9fe; color: #6d28d9; }
.resource-category-card:nth-child(5) summary span { background: #fce7f3; color: #9d174d; }
.resource-category-card:nth-child(6) summary span { background: #ccfbf1; color: #0f766e; }

.resource-category-body {
    padding: 0 14px 14px;
}

.resource-track-list,
.resource-filter-chips,
.resource-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.resource-track-list a {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
}

.resources-section-heading,
.teacher-review-header,
.teacher-review-panel-heading {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.resources-section-heading h2,
.teacher-review-header h1,
.teacher-review-panel-heading h2 {
    margin: 0;
    color: #0f172a;
    font-weight: 850;
}

.resources-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.resource-card {
    min-height: 210px;
    padding: 16px;
}

.resources-empty-state,
.teaching-samples-empty {
    grid-column: 1 / -1;
    padding: 32px;
    border-radius: 8px;
    border: 1px dashed rgba(15, 118, 110, .32);
    background: #f0fdfa;
    color: #0f766e;
    font-weight: 850;
    text-align: center;
}

.teaching-samples-hero {
    text-align: center;
}

.teaching-samples-hero p {
    margin-left: auto;
    margin-right: auto;
}

.teaching-samples-hero-actions {
    justify-content: center;
}

.teaching-samples-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.teaching-sample-card {
    overflow: hidden;
}

.sample-card-player,
.teaching-sample-player {
    background: #0f172a;
}

.sample-card-player {
    aspect-ratio: 16 / 9;
}

.sample-card-player video,
.sample-card-player audio,
.teaching-sample-player video,
.teaching-sample-player audio {
    width: 100%;
    height: 100%;
}

.sample-player-placeholder {
    height: 100%;
    min-height: 220px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 20px;
    color: #e2e8f0;
    text-align: center;
}

.sample-player-placeholder i {
    font-size: 3rem;
    color: #38bdf8;
}

.sample-card-body {
    padding: 16px;
}

.sample-card-label,
.sample-view-count {
    display: inline-flex;
    margin-bottom: 8px;
    color: #0f766e;
    font-size: .82rem;
    font-weight: 850;
}

.resources-empty-state[data-public-resources-compact-empty] {
    padding: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
}

.teaching-sample-meta,
.teaching-sample-safe-note {
    color: #64748b;
}

.teaching-sample-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.teaching-sample-detail {
    padding-top: clamp(28px, 5vw, 60px);
    padding-bottom: clamp(28px, 5vw, 60px);
}

.teaching-sample-feature {
    padding: clamp(16px, 3vw, 24px);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
}

.teaching-sample-feature h1 {
    color: #0f172a;
    font-weight: 850;
}

.teaching-sample-player {
    min-height: 280px;
    border-radius: 8px;
    overflow: hidden;
}

.teacher-review-page {
    display: grid;
    gap: 16px;
}

.teacher-review-header p,
.teacher-review-panel-heading p {
    max-width: 760px;
    margin: 4px 0 0;
    color: #64748b;
}

.teacher-review-readiness {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.teacher-review-readiness article {
    min-height: 118px;
    padding: 14px;
}

.teacher-review-readiness span,
.teacher-review-details span {
    display: block;
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
}

.teacher-review-readiness strong,
.teacher-review-details strong {
    color: #0f172a;
    overflow-wrap: anywhere;
}

.teacher-review-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.teacher-review-filters a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    border: 1px solid rgba(15, 23, 42, .08);
    font-weight: 800;
    text-decoration: none;
}

.teacher-review-filters a.active {
    background: #0f766e;
    color: #fff;
}

.teacher-review-bulk {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(200px, 1fr) auto;
    gap: 8px;
    margin-bottom: 14px;
}

.teacher-application-card-list {
    display: grid;
    gap: 12px;
}

.teacher-application-review-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
}

.teacher-review-main {
    min-width: 0;
}

.teacher-review-applicant,
.teacher-review-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.teacher-review-applicant h3 {
    margin: 8px 0 4px;
    color: #0f172a;
    font-size: 1.18rem;
    font-weight: 850;
}

.teacher-review-applicant p,
.teacher-review-date,
.teacher-review-footnote {
    color: #64748b;
}

.teacher-status-chip {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #334155;
    font-size: .78rem;
    font-weight: 850;
}

.teacher-status-chip.status-pending_review { background: #fff7ed; color: #9a3412; }
.teacher-status-chip.status-approved,
.teacher-status-chip.status-approved_staff { background: #dcfce7; color: #166534; }
.teacher-status-chip.status-more_info_requested { background: #dbeafe; color: #1d4ed8; }
.teacher-status-chip.status-rejected { background: #fee2e2; color: #991b1b; }

.teacher-review-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.teacher-review-details > div {
    min-height: 70px;
    padding: 10px;
    border-radius: 8px;
    background: #f8fafc;
}

.teacher-review-actions {
    justify-content: flex-start;
}

.teacher-review-actions form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.teacher-review-action-note {
    width: min(220px, 100%);
}

.teacher-review-smart-summary {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: #fff;
}

.teacher-review-smart-summary summary {
    cursor: pointer;
    color: #0f766e;
    font-weight: 850;
}

.teacher-review-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.teacher-review-mini-grid > div {
    min-height: 64px;
    padding: 10px;
    border-radius: 8px;
    background: #f8fafc;
}

.teacher-review-mini-grid span,
.teacher-review-details span {
    display: block;
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
}

.teacher-review-admin-tools,
.teacher-review-interview-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.teacher-review-admin-tools form,
.teacher-review-interview-tools form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.teacher-review-sample-share {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: #f8fafc;
}

.teacher-review-sample-share summary {
    cursor: pointer;
    color: #0f766e;
    font-weight: 850;
}

.teacher-review-footnote {
    margin-top: 10px;
    font-size: .86rem;
}

@media (max-width: 992px) {
    .summer-hero-grid,
    .teacher-application-hero-grid,
    .resources-hero-grid,
    .teaching-sample-feature {
        grid-template-columns: 1fr;
    }
    .summer-program-grid,
    .resources-category-grid,
    .resources-card-grid,
    .teaching-samples-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .summer-duration-grid,
    .summer-support-grid,
    .summer-reason-grid,
    .teacher-review-readiness,
    .teacher-review-details,
    .teacher-review-mini-grid,
    .availability-grid,
    .learner-chip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .smart-application-row,
    .smart-application-row:has([data-language-custom-wrap]:not(.d-none)),
    .smart-application-row[data-subject-level-row],
    .availability-smart-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px;
    }
    .smart-application-row [data-subject-scope-summary] {
        grid-column: 1 / -1;
    }
    .availability-smart-row .availability-day-pills {
        grid-column: 1 / -1;
    }
    .application-check-grid.wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    html,
    body.public-page {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    .public-page main,
    .public-page .container,
    .public-marketing-nav.container,
    .summer-hero-grid.container,
    .teacher-application-hero-grid.container,
    .resources-hero-grid.container,
    .teaching-samples-hero .container,
    .summer-section.container,
    .resources-section.container,
    .teaching-samples-section.container,
    .teaching-sample-detail.container,
    .teacher-application-redesign .container {
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
        margin-left: 0;
        margin-right: 0;
    }
    .public-marketing-nav,
    .public-marketing-actions {
        align-items: stretch;
    }
    .public-marketing-nav {
        flex-direction: column;
    }
    .public-marketing-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        justify-content: center;
    }
    .public-marketing-actions > a,
    .public-marketing-actions .auth-language-switcher {
        min-width: 0;
        max-width: 100%;
        flex-basis: 100%;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .public-marketing-actions .auth-language-switcher {
        grid-column: 1 / -1;
        justify-content: center;
    }
    .summer-hero-copy,
    .teacher-application-hero-grid > div,
    .resources-hero-grid > div,
    .teaching-samples-hero .container {
        width: calc(100vw - 48px);
        min-width: 0;
        max-width: calc(100vw - 48px);
    }
    .summer-hero-copy h1,
    .teacher-application-hero h1,
    .resources-hero h1,
    .teaching-samples-hero h1 {
        width: 100%;
        max-width: min(100%, 16ch);
        font-size: clamp(1.45rem, 7.4vw, 1.9rem);
        line-height: 1.08;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }
    .summer-hero-copy h1 {
        max-width: min(100%, 13ch);
    }
    .teaching-samples-hero h1 {
        max-width: min(100%, 12ch);
        margin-left: auto;
        margin-right: auto;
    }
    .summer-hero-copy .summer-hero-lead,
    .teacher-application-hero p,
    .resources-hero p,
    .teaching-samples-hero p {
        max-width: min(100%, 32ch);
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .teaching-samples-hero p {
        margin-left: auto;
        margin-right: auto;
    }
    .summer-hero-actions,
    .resources-cta-row,
    .summer-badge-row,
    .teacher-application-badges,
    .teaching-samples-hero-actions {
        width: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .summer-badge,
    .teacher-application-badges span {
        width: 100%;
        justify-content: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .summer-hero-actions .btn,
    .resources-cta-row .btn,
    .teaching-samples-hero-actions .btn,
    .teacher-submit-row .btn {
        width: 100%;
        max-width: calc(100vw - 48px);
        font-size: .94rem;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .summer-cta-break {
        display: block;
    }
    .summer-cta-break::before {
        content: "";
    }
    .resources-cta-row {
        grid-template-columns: 1fr;
    }
    .resources-cta-row .btn:nth-child(3) {
        grid-column: auto;
    }
    .resources-cta-row .btn,
    .teaching-samples-hero-actions .btn {
        width: 100%;
    }
    .summer-hero-grid {
        min-height: 0;
    }
    .summer-program-grid,
    .summer-duration-grid,
    .summer-support-grid,
    .summer-reason-grid,
    .resources-category-grid,
    .resources-card-grid,
    .teaching-samples-grid,
    .teacher-review-readiness,
    .teacher-review-details,
    .teacher-review-mini-grid,
    .availability-grid,
    .learner-chip-grid,
    .application-check-grid,
    .application-check-grid.wide {
        grid-template-columns: 1fr;
    }
    .smart-application-row,
    .smart-application-row:has([data-language-custom-wrap]:not(.d-none)),
    .smart-application-row[data-subject-level-row],
    .availability-smart-row {
        grid-template-columns: 1fr;
    }

    .teaching-sample-dynamic-row,
    .subject-range-fields {
        grid-template-columns: 1fr;
    }
    .btn-icon-only {
        width: 100%;
    }
    .summer-duration-card {
        grid-template-columns: 70px minmax(0, 1fr);
    }
    .resource-filter-panel,
    .resource-category-card,
    .resource-card,
    .teaching-sample-card,
    .teaching-sample-feature,
    .resources-empty-state,
    .teaching-samples-empty,
    .application-section {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    .summer-marketing-hero,
    .teacher-application-hero,
    .resources-hero,
    .teaching-samples-hero {
        padding-top: 18px;
        padding-bottom: 24px;
    }
    .summer-hero-grid,
    .teacher-application-hero-grid,
    .resources-hero-grid {
        gap: 16px;
    }
    .teacher-application-steps {
        gap: 8px;
    }
    .teacher-application-steps > div,
    .application-section-title,
    .resource-category-card summary {
        min-width: 0;
    }
    .teaching-samples-empty,
    .resources-empty-state {
        width: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        overflow-wrap: anywhere;
    }
    .teaching-samples-empty a,
    .resources-empty-state a {
        display: block;
        margin-top: 6px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .resource-filter-panel,
    .resource-category-card,
    .application-section {
        width: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
    }
    .resource-track-list a,
    .resource-filter-chips span,
    .summer-chip-row span,
    .resource-card-badges span {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .teacher-review-bulk {
        grid-template-columns: 1fr;
    }
    .teacher-application-review-card {
        grid-template-columns: 1fr;
    }
    .teacher-review-select {
        order: -1;
    }
    .summer-mobile-cta {
        position: sticky;
        bottom: 0;
        z-index: 20;
        display: block;
        padding: 10px;
        background: rgba(248, 250, 252, .96);
        border-top: 1px solid rgba(15, 23, 42, .08);
    }
    .summer-mobile-cta .btn {
        width: 100%;
    }
    .summer-redesign-page {
        padding-bottom: 8px;
    }
}

[data-theme="dark"] .public-brand-mark,
body.theme-dark .public-brand-mark,
[data-theme="dark"] .summer-hero-copy h1,
[data-theme="dark"] .teacher-application-hero h1,
[data-theme="dark"] .resources-hero h1,
[data-theme="dark"] .teaching-samples-hero h1,
body.theme-dark .summer-hero-copy h1,
body.theme-dark .teacher-application-hero h1,
body.theme-dark .resources-hero h1,
body.theme-dark .teaching-samples-hero h1 {
    color: #f8fafc;
}

[data-theme="dark"] .summer-redesign-page,
[data-theme="dark"] .teacher-application-redesign,
[data-theme="dark"] .public-resources-redesign,
[data-theme="dark"] .teaching-samples-page,
body.theme-dark.summer-redesign-page,
body.theme-dark.teacher-application-redesign,
body.theme-dark.public-resources-redesign,
body.theme-dark.teaching-samples-page {
    background: #0f172a;
    color: #e2e8f0;
}

[data-theme="dark"] .summer-marketing-hero,
[data-theme="dark"] .teacher-application-hero,
[data-theme="dark"] .resources-hero,
[data-theme="dark"] .teaching-samples-hero,
body.theme-dark .summer-marketing-hero,
body.theme-dark .teacher-application-hero,
body.theme-dark .resources-hero,
body.theme-dark .teaching-samples-hero {
    background: linear-gradient(135deg, #0f172a, #123044);
}

[data-theme="dark"] .summer-program-card,
[data-theme="dark"] .summer-duration-card,
[data-theme="dark"] .summer-support-card,
[data-theme="dark"] .summer-reason-grid article,
[data-theme="dark"] .application-section,
[data-theme="dark"] .resource-filter-panel,
[data-theme="dark"] .resource-category-card,
[data-theme="dark"] .resource-card,
[data-theme="dark"] .teaching-sample-card,
[data-theme="dark"] .teaching-sample-feature,
[data-theme="dark"] .teacher-application-review-card,
[data-theme="dark"] .teacher-review-readiness article,
body.theme-dark .summer-program-card,
body.theme-dark .summer-duration-card,
body.theme-dark .summer-support-card,
body.theme-dark .summer-reason-grid article,
body.theme-dark .application-section,
body.theme-dark .resource-filter-panel,
body.theme-dark .resource-category-card,
body.theme-dark .resource-card,
body.theme-dark .teaching-sample-card,
body.theme-dark .teaching-sample-feature,
body.theme-dark .teacher-application-review-card,
body.theme-dark .teacher-review-readiness article {
    background: #111827;
    border-color: rgba(148, 163, 184, .25);
    color: #e5e7eb;
}

[data-theme="dark"] .session-live-card,
body.theme-dark .session-live-card,
[data-theme="dark"] .certificate-preview,
body.theme-dark .certificate-preview {
    background: #111827;
    border-color: rgba(148, 163, 184, .25);
    color: #e5e7eb;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.communication-recipient-preview {
    background: linear-gradient(135deg, rgba(20, 184, 166, .1), rgba(59, 130, 246, .08));
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 8px;
    padding: .75rem;
}

.communication-composer .form-label {
    font-weight: 650;
    margin-bottom: .25rem;
}

.communication-composer-compact {
    align-items: end;
}

.communication-composer-compact .form-text {
    margin-top: .25rem;
}

.communication-composer-compact textarea {
    min-height: 6.5rem;
}

.communication-recipient-summary {
    background: rgba(248, 250, 252, .92);
    border: 1px solid var(--line);
    border-left: 3px solid rgba(20, 184, 166, .55);
    border-radius: 8px;
    color: var(--ink);
    font-size: .9rem;
    line-height: 1.35;
    padding: .55rem .7rem;
    overflow-wrap: anywhere;
}

.communication-details {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(248, 250, 252, .68);
    overflow: hidden;
}

.communication-details summary {
    cursor: pointer;
    color: var(--brand);
    font-weight: 700;
    font-size: .9rem;
    padding: .55rem .7rem;
    list-style-position: inside;
}

.communication-details[open] summary {
    border-bottom: 1px solid var(--line);
    background: rgba(20, 83, 45, .06);
}

.communication-details-body {
    padding: .7rem;
}

.communication-step-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--brand);
    background: rgba(20, 83, 45, .08);
    border-left: 3px solid rgba(20, 83, 45, .45);
    border-radius: 6px;
    padding: .35rem .55rem;
}

.communication-context-card,
.communication-thread-context {
    background: rgba(248, 250, 252, .86);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .75rem;
}

.communication-preview-panel[hidden] {
    display: none !important;
}

.communication-format-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .4rem;
}

.communication-format-toolbar[hidden] {
    display: none !important;
}

.communication-format-toolbar .btn {
    min-width: 2.25rem;
}

.communication-format-preview {
    background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%);
    border: 1px solid #99f6e4;
    border-radius: 10px;
    padding: .55rem .7rem;
    overflow-wrap: anywhere;
}

.communication-format-preview blockquote {
    margin: .35rem 0;
    padding-left: .55rem;
    border-left: 3px solid rgba(20, 184, 166, .45);
    color: var(--muted);
}

.preview-list-item {
    display: inline-block;
    margin-left: .4rem;
}

.communication-thread-list {
    display: grid;
    gap: .75rem;
}

.communication-thread-card {
    display: block;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .8rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.communication-thread-card:nth-child(3n+1) {
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
}

.communication-thread-card:nth-child(3n+2) {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.communication-thread-card:nth-child(3n) {
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
}

.communication-filter-bar {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: .65rem;
}

.communication-thread-table td {
    vertical-align: middle;
}

.communication-thread-card:hover,
.communication-thread-card:focus {
    border-color: rgba(20, 83, 45, .35);
    box-shadow: 0 .5rem 1.3rem rgba(15, 23, 42, .08);
    color: inherit;
}

.communication-thread-card.is-active {
    border-color: rgba(20, 83, 45, .55);
    border-left-width: 4px;
    background: rgba(240, 253, 244, .72);
}

.communication-last-preview {
    color: var(--muted);
    border-left: 3px solid rgba(20, 184, 166, .3);
    padding-left: .5rem;
}

.communication-thread {
    line-height: 1.55;
}

.communication-message-list {
    display: grid;
    gap: .75rem;
    line-height: 1.55;
}

.communication-message-card {
    max-width: min(760px, 100%);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .75rem;
    background: var(--card);
}

.communication-message-card.is-own {
    justify-self: end;
    background: rgba(20, 184, 166, .08);
}

.communication-message-body p {
    margin: 0 0 .45rem;
}

.communication-message-body p:last-child,
.communication-message-body ul:last-child,
.communication-message-body ol:last-child,
.communication-message-body blockquote:last-child {
    margin-bottom: 0;
}

.communication-message-list,
.communication-message-body {
    overflow-wrap: anywhere;
}

.communication-message-quote {
    margin: .4rem 0;
    padding: .45rem .65rem;
    border-left: 3px solid rgba(20, 184, 166, .45);
    background: rgba(248, 250, 252, .86);
}

.monthly-quality-snapshot {
    padding: 0;
}

.monthly-quality-snapshot > .monthly-quality-summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    list-style-position: inside;
}

.monthly-quality-snapshot[open] > .monthly-quality-summary {
    border-bottom: 1px solid var(--line);
}

.monthly-quality-snapshot > .row {
    padding: 0 1rem 1rem;
}

.lesson-report-head {
    background: linear-gradient(135deg, rgba(20, 83, 45, .08), rgba(20, 184, 166, .08));
    border: 1px solid rgba(20, 83, 45, .14);
    border-radius: 8px;
    padding: .85rem;
}

.report-advanced-fields {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(248, 250, 252, .7);
    padding: .65rem .8rem;
}

.report-advanced-fields summary {
    cursor: pointer;
    color: var(--brand);
    font-weight: 700;
}

.schedule-week-range {
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.25;
}

.schedule-title-line {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.schedule-timezone-line {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    margin-top: 3px;
}

.communication-message-break {
    height: .35rem;
}

.learning-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .85rem;
}

.learning-file-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: .9rem;
    min-width: 0;
}

.communication-font-small {
    font-size: .92rem;
}

.communication-font-large {
    font-size: 1.08rem;
}

.learning-report-font-large {
    font-size: 1.05rem;
}

@media (max-width: 575.98px) {
    .communication-composer-compact {
        align-items: stretch;
    }

    .communication-format-toolbar {
        overflow-x: visible;
        flex-wrap: wrap;
        padding-bottom: .15rem;
    }

    .communication-format-toolbar .btn {
        flex: 0 0 auto;
    }
}

.communication-message-highlight {
    animation: communicationHighlight 2.8s ease-out 1;
    border-color: rgba(20, 184, 166, .8) !important;
    box-shadow: 0 0 0 .2rem rgba(20, 184, 166, .14);
}

@keyframes communicationHighlight {
    0% { background: rgba(20, 184, 166, .22); }
    100% { background: transparent; }
}

@media (max-width: 575.98px) {
    .communication-recipient-preview .badge {
        white-space: normal;
        text-align: start;
    }

    .communication-thread-card,
    .communication-message-card,
    .communication-context-card,
    .communication-thread-context {
        padding: .65rem;
    }

    .communication-format-toolbar {
        flex-wrap: wrap;
        overflow-x: visible;
        padding-bottom: .25rem;
    }
}

body {
    background: var(--surface);
    color: var(--ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0;
}

body.theme-dark,
body.theme-system {
    color-scheme: light;
}

body.theme-dark {
    --ink: #e5e7eb;
    --muted: #94a3b8;
    --line: #253044;
    --surface: #0b1120;
    --card: #111827;
    --sidebar: #020617;
    background: var(--surface);
}

body.theme-dark .table {
    --bs-table-bg: transparent;
}

body.theme-dark .modal-content,
body.theme-dark .dropdown-menu,
body.theme-dark .accordion-item {
    background: var(--card);
    border-color: var(--line);
    color: var(--ink);
}

body.theme-dark .form-control,
body.theme-dark .form-select {
    background-color: rgba(15, 23, 42, .72);
    border-color: var(--line);
    color: var(--ink);
}

body.theme-dark .text-muted {
    color: var(--muted) !important;
}

@media (prefers-color-scheme: dark) {
    body.theme-system .table {
        --bs-table-bg: transparent;
    }

    body.theme-system .modal-content,
    body.theme-system .dropdown-menu,
    body.theme-system .accordion-item {
        background: var(--card);
        border-color: var(--line);
        color: var(--ink);
    }

    body.theme-system .form-control,
    body.theme-system .form-select {
        background-color: rgba(15, 23, 42, .72);
        border-color: var(--line);
        color: var(--ink);
    }

    body.theme-system .text-muted {
        color: var(--muted) !important;
    }
}

@media (prefers-color-scheme: dark) {
    body.theme-system {
        --ink: #e5e7eb;
        --muted: #94a3b8;
        --line: #253044;
        --surface: #0b1120;
        --card: #111827;
        --sidebar: #020617;
        color-scheme: dark;
    }
}

.app-shell { min-height: 100vh; }

.sidebar {
    background: var(--sidebar);
    border-right: 1px solid var(--sidebar-border);
    color: var(--sidebar-active-text);
    height: 100vh;
    left: 0;
    overflow-y: auto;
    padding: 18px 14px;
    position: fixed;
    top: 0;
    width: 270px;
    z-index: 1040;
}

.brand {
    align-items: center;
    color: var(--sidebar-active-text);
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    min-width: 0;
    padding: 8px 10px;
    text-decoration: none;
}

.brand span:last-child,
.brand-title {
    min-width: 0;
}

.brand strong,
.brand small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-title {
    display: grid;
    gap: 1px;
    line-height: 1.05;
    max-width: 150px;
}

.brand-title strong {
    font-size: 14px;
    letter-spacing: 0;
}

.brand-mark {
    align-items: center;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    border-radius: 8px;
    display: inline-flex;
    font-weight: 800;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.brand-logo,
.login-logo {
    background: #fff;
    border-radius: 8px;
    object-fit: contain;
}

.brand-logo {
    height: 42px;
    width: 42px;
}

.login-logo {
    height: 64px;
    width: 64px;
}

.brand small {
    color: var(--sidebar-muted);
    display: block;
    font-size: 12px;
}

.sidebar-search-wrap {
    margin: 10px 8px 6px;
}

.sidebar-mode-toggle {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 8px;
    display: grid;
    gap: 3px;
    grid-template-columns: 1fr 1fr;
    margin: 10px 8px 8px;
    padding: 4px;
    width: calc(100% - 16px);
}

.sidebar-mode-toggle button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 800;
    min-height: 32px;
    padding: 5px 8px;
    text-align: center;
}

.sidebar-mode-toggle button.is-active {
    background: var(--sidebar-active-bg);
    border-color: rgba(255, 255, 255, .28);
    color: var(--sidebar-active-text);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset;
}

.sidebar[data-sidebar-mode="menu"] .sidebar-full-nav,
.sidebar[data-sidebar-mode="quick"] .sidebar-full-nav,
.sidebar[data-sidebar-mode="full"] .sidebar-quick-links {
    display: none;
}

.sidebar-quick-links {
    margin: 4px 6px 10px;
}

.sidebar-menu-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.sidebar-menu-groups a {
    border: 1px solid var(--sidebar-border);
    border-radius: 999px;
    color: var(--sidebar-muted);
    font-size: 11px;
    line-height: 1;
    padding: 6px 8px;
    text-decoration: none;
}

.sidebar-menu-groups a:hover,
.sidebar-menu-groups a.is-active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}

.sidebar-search {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: var(--sidebar-text);
}

.sidebar-search::placeholder {
    color: var(--sidebar-muted);
}

.sidebar-search-empty {
    color: var(--sidebar-muted) !important;
    padding: 6px 2px 0;
}

.sidebar-search-results {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.sidebar-search-result {
    align-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    color: var(--sidebar-text);
    display: grid;
    gap: 8px;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 8px;
    text-decoration: none;
}

.sidebar-search-result:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-active-text);
}

.sidebar-search-result > i {
    align-items: center;
    background: var(--sidebar-icon-bg);
    border-radius: 8px;
    color: var(--sidebar-icon-color);
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.sidebar-search-result span {
    min-width: 0;
}

.sidebar-search-result strong,
.sidebar-search-result small {
    display: block;
    overflow-wrap: anywhere;
}

.sidebar-search-result small {
    color: var(--sidebar-muted);
    font-size: .74rem;
    line-height: 1.25;
}

.sidebar-search-result em {
    background: rgba(255,255,255,.12);
    border-radius: 999px;
    color: var(--sidebar-active-text);
    font-size: .68rem;
    font-style: normal;
    font-weight: 800;
    grid-column: 2;
    justify-self: start;
    padding: 2px 7px;
}

.sidebar-group-label,
.sidebar-group summary {
    color: var(--sidebar-section);
    font-size: var(--sidebar-section-font-size);
    font-weight: 800;
    letter-spacing: 0;
    margin: 16px 10px 7px;
    text-transform: uppercase;
}

.sidebar-group {
    margin-bottom: 4px;
}

.sidebar-group summary {
    align-items: center;
    border-left: 3px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 6px 8px;
}

.sidebar-group summary::-webkit-details-marker {
    display: none;
}

.sidebar-group summary i {
    font-size: 12px;
    transition: transform .18s ease;
}

.sidebar-group[open] summary i {
    transform: rotate(180deg);
}

.sidebar-group.is-active > summary {
    background: var(--sidebar-hover-bg);
    border-left-color: var(--brand);
    color: var(--sidebar-active-text);
}

.sidebar-subsection {
    border-left: 2px solid transparent;
    margin: 6px 0 8px 8px;
    padding-left: 8px;
}

.sidebar-subsection[open] > .sidebar-subsection-title i {
    transform: rotate(180deg);
}

.sidebar-subsection summary::-webkit-details-marker {
    display: none;
}

.sidebar-subsection.is-active {
    border-left-color: var(--brand);
}

.sidebar-subsection-title {
    align-items: center;
    border-radius: 7px;
    color: var(--sidebar-section);
    cursor: pointer;
    display: flex;
    font-size: 11px;
    font-weight: 800;
    justify-content: space-between;
    letter-spacing: 0;
    margin: 6px 8px 5px 0;
    padding: 5px 8px;
    text-transform: uppercase;
}

.sidebar-subsection-title i {
    font-size: 11px;
    transition: transform .18s ease;
}

.sidebar-subsection.is-active .sidebar-subsection-title {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-active-text);
}

html[dir="rtl"] .sidebar-group summary {
    border-left: 0;
    border-right: 3px solid transparent;
}

html[dir="rtl"] .sidebar-group.is-active > summary {
    border-right-color: var(--brand);
}

html[dir="rtl"] .sidebar-subsection {
    border-left: 0;
    border-right: 2px solid transparent;
    margin-left: 0;
    margin-right: 8px;
    padding-left: 0;
    padding-right: 8px;
}

html[dir="rtl"] .sidebar-subsection.is-active {
    border-right-color: var(--brand);
}

.sidebar .nav-link {
    align-items: center;
    border-radius: 8px;
    color: var(--sidebar-text);
    display: flex;
    gap: 10px;
    margin-bottom: 3px;
    min-width: 0;
    padding: 9px 10px;
    position: relative;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.sidebar .nav-link,
.sidebar-group summary {
    font-size: var(--sidebar-font-size);
}

.sidebar .nav-link i {
    align-items: center;
    background: var(--sidebar-icon-bg);
    border-radius: 7px;
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    color: var(--sidebar-icon-color);
    width: 28px;
}

.sidebar .nav-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar .nav-link:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-active-text);
    transform: translateX(2px);
}

html[dir="rtl"] .sidebar .nav-link:hover {
    transform: translateX(-2px);
}

.sidebar .nav-link.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    box-shadow: inset 3px 0 0 var(--brand);
}

html[dir="rtl"] .sidebar .nav-link.active {
    box-shadow: inset -3px 0 0 var(--brand);
}

body.app-is-navigating::before {
    animation: app-loading-slide 1s ease-in-out infinite;
    background: linear-gradient(90deg, var(--brand), #0ea5e9, #22c55e);
    content: "";
    height: 3px;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 3000;
}

body.app-is-navigating::after {
    background: rgba(255, 255, 255, .46);
    content: "";
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 2999;
}

button.is-loading {
    opacity: .72;
    pointer-events: none;
}

@keyframes app-loading-slide {
    0% { transform: translateX(-70%); }
    50% { transform: translateX(0); }
    100% { transform: translateX(70%); }
}

.public-library-page {
    background: var(--surface);
    min-height: 100vh;
}

.public-testimonials-page {
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, .12), transparent 32rem),
        radial-gradient(circle at right 18%, rgba(245, 158, 11, .12), transparent 28rem),
        linear-gradient(180deg, #fbf7ef 0%, #eef7f4 52%, #f8fafc 100%);
    color: var(--ink);
    min-height: 100vh;
}

.public-testimonials-shell {
    margin: 0 auto;
    max-width: 1180px;
    padding: 18px;
}

.public-testimonials-nav,
.public-testimonials-hero,
.public-testimonial-card,
.public-testimonials-empty {
    border-radius: 8px;
}

.public-testimonials-nav {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 32px;
}

.public-testimonials-brand {
    align-items: center;
    color: var(--ink);
    display: inline-flex;
    font-weight: 800;
    gap: 10px;
    text-decoration: none;
}

.public-testimonials-brand img {
    border-radius: 8px;
    object-fit: cover;
}

.public-testimonials-hero {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .9) 0%, rgba(240, 253, 250, .82) 52%, rgba(255, 247, 237, .78) 100%);
    border: 1px solid rgba(20, 83, 45, .14);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .1);
    margin-bottom: 20px;
    padding: 20px;
}

.public-testimonials-intro {
    max-width: 760px;
}

.public-testimonials-intro h1 {
    font-size: clamp(2rem, 5vw, 4.3rem);
    letter-spacing: 0;
    line-height: 1.04;
    margin: 10px 0;
}

.public-testimonials-intro p {
    color: #475569;
    font-size: 1.08rem;
    margin: 0;
}

.public-testimonials-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.public-testimonials-summary > div {
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 8px;
    min-width: 150px;
    padding: 12px 14px;
}

.public-testimonials-summary strong {
    color: #0f766e;
    display: block;
    font-size: 1.45rem;
    line-height: 1.1;
}

.public-testimonials-summary small {
    color: #64748b;
    display: block;
    font-weight: 700;
    margin-top: 4px;
}

.public-testimonials-summary-stars {
    color: #f59e0b;
    display: block;
    font-size: .95rem;
    letter-spacing: 0;
    margin-top: 2px;
}

.public-testimonial-grid {
    align-items: stretch;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-testimonial-card {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(15, 23, 42, .1);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
    display: flex;
    flex-direction: column;
    min-height: 250px;
    padding: 16px;
    position: relative;
}

.public-testimonial-quote {
    align-items: center;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-radius: 8px;
    color: #0e7490;
    display: inline-flex;
    font-size: 1.35rem;
    height: 36px;
    justify-content: center;
    margin-bottom: 12px;
    width: 36px;
}

.public-testimonial-stars {
    color: #f59e0b;
    font-size: 1.45rem;
    letter-spacing: 0;
    margin-bottom: 10px;
}

.public-testimonial-stars span {
    color: #cbd5e1;
}

.public-testimonial-copy {
    color: #1f2937;
    flex: 1 1 auto;
    font-size: 1rem;
    line-height: 1.62;
}

.public-testimonial-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.public-testimonial-copy details {
    margin-top: -4px;
}

.public-testimonial-copy summary {
    color: var(--brand-2);
    cursor: pointer;
    font-weight: 700;
}

.public-testimonial-translations {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0;
}

.public-testimonial-subject,
.public-testimonial-name,
.public-testimonial-meta {
    font-size: .88rem;
}

.public-testimonial-subject {
    color: #0f766e;
    font-weight: 700;
}

.public-testimonial-name {
    color: #334155;
    font-weight: 700;
}

.public-testimonial-meta {
    border-top: 1px solid rgba(15, 23, 42, .08);
    color: #64748b;
    margin-top: 10px;
    padding-top: 10px;
}

.public-testimonials-empty {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(15, 23, 42, .09);
    margin: 32px auto;
    max-width: 620px;
    padding: 44px 24px;
    text-align: center;
}

.public-testimonials-empty i {
    color: var(--brand-2);
    font-size: 2.8rem;
}

.public-testimonials-admin-preview {
    background: rgba(255, 255, 255, .82);
    border: 1px dashed rgba(15, 23, 42, .18);
    border-radius: 8px;
    margin-top: 22px;
    padding: 18px;
}

.public-testimonial-grid.is-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-subjects-page {
    background: linear-gradient(180deg, #f8fafc 0%, #eef7f4 100%);
    min-height: 100vh;
}

.public-subjects-hero {
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
    padding: 18px;
}

.subject-catalog-card {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--subject-main, #0f766e) 9%, var(--card)) 0%, var(--card) 74%);
    border-color: color-mix(in srgb, var(--subject-main, #0f766e) 26%, var(--line));
    display: flex;
    flex-direction: column;
    min-height: 292px;
}

.subject-catalog-card p {
    flex: 1 1 auto;
}

.subject-catalog-topline {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.subject-catalog-icon {
    align-items: center;
    background: color-mix(in srgb, var(--subject-main, var(--brand-2)) 14%, var(--card));
    border: 1px solid color-mix(in srgb, var(--subject-main, var(--brand-2)) 30%, var(--line));
    border-radius: 8px;
    color: var(--subject-text, var(--brand-2));
    display: inline-flex;
    font-weight: 850;
    height: 44px;
    justify-content: center;
    min-width: 44px;
    padding: 0 8px;
    width: 44px;
}

.subject-catalog-icon i {
    font-size: 1.25rem;
}

.subject-catalog-badge {
    background: color-mix(in srgb, var(--subject-main, #0f766e) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--subject-main, #0f766e) 32%, var(--line));
    color: var(--subject-text, #134e4a);
}

.subject-catalog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.subject-tone-emerald { --subject-main: #10b981; --subject-text: #065f46; }
.subject-tone-amber { --subject-main: #f59e0b; --subject-text: #92400e; }
.subject-tone-teal { --subject-main: #14b8a6; --subject-text: #0f766e; }
.subject-tone-blue { --subject-main: #3b82f6; --subject-text: #1d4ed8; }
.subject-tone-sky { --subject-main: #0ea5e9; --subject-text: #0369a1; }
.subject-tone-violet { --subject-main: #8b5cf6; --subject-text: #6d28d9; }
.subject-tone-cyan { --subject-main: #06b6d4; --subject-text: #0e7490; }
.subject-tone-indigo { --subject-main: #6366f1; --subject-text: #4338ca; }
.subject-tone-rose { --subject-main: #f43f5e; --subject-text: #be123c; }
.subject-tone-green { --subject-main: #22c55e; --subject-text: #15803d; }
.subject-tone-slate { --subject-main: #64748b; --subject-text: #334155; }
.subject-tone-purple { --subject-main: #a855f7; --subject-text: #7e22ce; }
.subject-tone-orange { --subject-main: #f97316; --subject-text: #c2410c; }
.subject-tone-pink { --subject-main: #ec4899; --subject-text: #be185d; }

.google-link-health-readiness {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.google-link-health-status-chip {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    color: #9a3412;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.2;
    padding: .38rem .62rem;
}

.public-feedback-page {
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, .14), transparent 32rem),
        linear-gradient(180deg, #f8fafc 0%, #eef7f4 100%);
    min-height: 100vh;
}

.public-feedback-shell {
    display: grid;
    min-height: 100vh;
    padding: 18px;
    place-items: center;
}

.public-feedback-card {
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
    max-width: 760px;
    padding: 26px;
    width: 100%;
}

.public-feedback-brand {
    align-items: center;
    display: inline-flex;
    font-weight: 800;
    gap: 10px;
    margin-bottom: 18px;
}

.public-feedback-brand img {
    border-radius: 8px;
    object-fit: cover;
}

.public-feedback-stars {
    direction: rtl;
    display: inline-flex;
    gap: 4px;
}

.public-feedback-stars input {
    position: absolute;
    opacity: 0;
}

.public-feedback-stars label {
    color: #cbd5e1;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
}

.public-feedback-stars input:checked ~ label,
.public-feedback-stars label:hover,
.public-feedback-stars label:hover ~ label {
    color: #f59e0b;
}

.public-feedback-thanks {
    padding: 30px 10px;
    text-align: center;
}

.public-feedback-thanks i {
    color: var(--brand-2);
    font-size: 3rem;
}

.feedback-manager-bulkbar {
    background: rgba(248, 250, 252, .94);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    position: sticky;
    top: 84px;
    z-index: 5;
}

.feedback-manager-checkbox {
    border-color: #0f766e;
    height: 1.35rem;
    width: 1.35rem;
}

[data-testimonial-manager-row].is-selected {
    background: rgba(20, 184, 166, .1);
}

[data-admin-error-logs-page] + .panel,
[data-safe-error-log-table] {
    border-left: 4px solid #0f766e;
}

@media (max-width: 991.98px) {
    .public-testimonial-grid,
    .public-testimonial-grid.is-preview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .public-testimonials-shell {
        padding: 12px;
    }

    .public-testimonials-nav {
        margin-bottom: 18px;
    }

    .public-testimonials-intro h1 {
        font-size: 2.3rem;
    }

    .public-testimonial-grid,
    .public-testimonial-grid.is-preview {
        grid-template-columns: 1fr;
    }

    .public-testimonial-card,
    .subject-catalog-card {
        min-height: 0;
    }
}

.help-doc-article {
    line-height: 1.65;
}

.help-doc-article h2,
.help-doc-article h3,
.help-doc-article h4 {
    margin-top: 1.2rem;
}

.help-doc-code {
    background: #0f172a;
    border-radius: 8px;
    color: #e2e8f0;
    overflow: auto;
    padding: 12px;
}

body.theme-dark .public-library-page,
body.theme-dark .public-subjects-page,
body.theme-dark .public-subjects-hero,
body.theme-dark .public-feedback-page,
body.theme-dark .public-feedback-card,
body.theme-dark .feedback-manager-bulkbar,
body.theme-dark .library-category-card,
body.theme-dark .library-resource-card,
body.theme-dark .subject-catalog-card,
body.theme-dark .library-resource-row,
body.theme-dark .schedule-collection-card,
body.theme-dark .schedule-collection-section,
body.theme-dark .schedule-collection-queue-card,
body.theme-dark .schedule-collection-stat,
body.theme-dark .schedule-collection-status,
body.theme-dark .schedule-review-step,
body.theme-dark .schedule-review-summary-item,
body.theme-dark .schedule-review-option,
body.theme-dark .schedule-review-decision {
    background: #111827;
    border-color: #334155;
    color: #e5e7eb;
}

body.theme-dark .library-category-card {
    background: linear-gradient(180deg, rgba(30, 41, 59, .96), #111827);
}

body.theme-dark .library-badge,
body.theme-dark .badge.text-bg-light,
body.theme-dark .btn-light {
    background-color: #1f2937 !important;
    border-color: #475569 !important;
    color: #e5e7eb !important;
}

body.theme-dark .schedule-collection-hero {
    background: linear-gradient(135deg, #0f172a 0%, #132235 52%, #172033 100%);
}

body.theme-dark .schedule-collection-tab,
body.theme-dark .schedule-collection-teacher-chip,
body.theme-dark .schedule-collection-more,
body.theme-dark .schedule-collection-more summary {
    background: #111827;
    border-color: #334155;
    color: #e5e7eb;
}

body.theme-dark .public-testimonials-page {
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, .18), transparent 34rem),
        radial-gradient(circle at right 18%, rgba(245, 158, 11, .12), transparent 28rem),
        linear-gradient(180deg, #020617 0%, #0f172a 100%);
}

body.theme-dark .public-testimonials-hero,
body.theme-dark .public-testimonial-card,
body.theme-dark .public-testimonials-empty,
body.theme-dark .public-testimonials-admin-preview {
    background: rgba(17, 24, 39, .92);
    border-color: #334155;
}

body.theme-dark .public-testimonials-summary > div,
body.theme-dark .public-testimonial-quote,
body.theme-dark .google-link-health-status-chip {
    background: #1f2937;
    border-color: #475569;
    color: #e5e7eb;
}

body.theme-dark .public-testimonials-intro p,
body.theme-dark .public-testimonials-summary small,
body.theme-dark .public-testimonial-copy,
body.theme-dark .public-testimonial-name,
body.theme-dark .public-testimonial-meta {
    color: #cbd5e1;
}

body.theme-dark .subject-catalog-badge,
body.theme-dark .subject-catalog-icon {
    background: #1f2937;
    border-color: #475569;
    color: #e5e7eb;
}

body.theme-dark [data-testimonial-manager-row].is-selected {
    background: rgba(20, 184, 166, .16);
}

@media (prefers-color-scheme: dark) {
    .public-testimonials-page {
        --ink: #e5e7eb;
        --muted: #94a3b8;
        --line: #253044;
        --surface: #0b1120;
        --card: #111827;
        background:
            radial-gradient(circle at top left, rgba(20, 184, 166, .18), transparent 34rem),
            radial-gradient(circle at right 18%, rgba(245, 158, 11, .12), transparent 28rem),
            linear-gradient(180deg, #020617 0%, #0f172a 100%);
    }

    .public-testimonials-hero,
    .public-testimonial-card,
    .public-testimonials-empty,
    .public-testimonials-admin-preview {
        background: rgba(17, 24, 39, .92);
        border-color: #334155;
    }

    .public-testimonials-intro p,
    .public-testimonials-summary small,
    .public-testimonial-copy,
    .public-testimonial-name,
    .public-testimonial-meta {
        color: #cbd5e1;
    }

    .public-testimonials-summary > div,
    .public-testimonial-quote,
    .google-link-health-status-chip {
        background: #1f2937;
        border-color: #475569;
        color: #e5e7eb;
    }
}

.maintenance-page {
    background: linear-gradient(180deg, #f8fafc, #e2f3ee);
    color: #0f172a;
    min-height: 100vh;
}

.maintenance-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.maintenance-card {
    background: #fff;
    border: 1px solid #dbe7e3;
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .12);
    max-width: 560px;
    padding: 32px;
    text-align: center;
}

.library-category-card,
.library-resource-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100%;
    padding: 16px;
    text-decoration: none;
}

.library-category-card {
    background: linear-gradient(180deg, var(--lib-soft), var(--card));
    border-color: color-mix(in srgb, var(--lib-main) 30%, var(--line));
}

.library-category-card:hover {
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    color: var(--lib-text);
    transform: translateY(-1px);
}

.library-icon {
    align-items: center;
    background: var(--lib-main);
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.library-icon-text {
    font-size: .82rem;
    font-weight: 850;
    letter-spacing: 0;
}

.library-badge {
    background: var(--lib-soft);
    border: 1px solid color-mix(in srgb, var(--lib-main) 35%, var(--line));
    color: var(--lib-text);
}

.library-filter {
    position: sticky;
    top: 8px;
    z-index: 3;
}

.library-category-detail {
    border-left: 4px solid var(--brand);
}

.library-subcategory-chips,
.library-mini-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.library-mini-switcher a {
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
    text-decoration: none;
}

.library-mini-switcher a.is-active {
    background: color-mix(in srgb, var(--brand) 12%, var(--card));
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    color: var(--brand-2);
}

.library-resource-list {
    display: grid;
    gap: 10px;
}

.library-resource-row {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--lib-main);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    padding: 12px;
}

.main { margin-left: 270px; min-height: 100vh; }

html[dir="rtl"] .sidebar {
    left: auto;
    border-left: 1px solid rgba(255,255,255,.08);
    border-right: 0;
    right: 0;
}

html[dir="rtl"] .main {
    margin-left: 0;
    margin-right: 270px;
}

.topbar {
    align-items: center;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    min-height: 76px;
    padding: 16px 28px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar-title {
    min-width: 0;
}

.topbar-title h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-mobile-menu {
    display: none;
}

.topbar-mobile-menu summary {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    list-style: none;
    padding: 7px 10px;
}

.topbar-mobile-menu summary::-webkit-details-marker {
    display: none;
}

.topbar-mobile-menu-body {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .14);
    display: grid;
    gap: 10px;
    max-height: min(76vh, 640px);
    min-width: min(92vw, 390px);
    overflow: auto;
    padding: 12px;
    position: absolute;
    right: 14px;
    top: calc(100% - 8px);
    z-index: 120;
}

html[dir="rtl"] .topbar-mobile-menu-body {
    left: 14px;
    right: auto;
}

.topbar-theme-select {
    min-width: 96px;
}

/* Header desktop dropdowns */
.portal-dropdown-menu {
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
}

.topbar-notification-dropdown {
    min-width: min(92vw, 380px);
}

.topbar-notification-list {
    display: grid;
    gap: 6px;
    max-height: 360px;
    overflow: auto;
    padding-right: 2px;
    scrollbar-width: thin;
}

.topbar-notification-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: 7px;
    grid-template-columns: 8px minmax(0, 1fr);
    padding: 8px;
    text-decoration: none;
}

.topbar-notification-item.is-unread {
    background: color-mix(in srgb, #0ea5e9 8%, var(--card));
    border-color: color-mix(in srgb, #0ea5e9 28%, var(--line));
}

.topbar-notification-dot {
    background: #94a3b8;
    border-radius: 999px;
    height: 8px;
    margin-top: 5px;
    width: 8px;
}

.topbar-notification-item.is-unread .topbar-notification-dot {
    background: #0ea5e9;
}

.topbar-notification-item strong,
.topbar-notification-item em,
.topbar-notification-item small {
    display: block;
    min-width: 0;
}

.topbar-notification-item strong {
    font-size: .88rem;
    line-height: 1.2;
}

.topbar-notification-item em {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--muted);
    display: -webkit-box;
    font-size: .78rem;
    font-style: normal;
    line-height: 1.25;
    overflow: hidden;
}

.topbar-notification-item small {
    color: var(--muted);
    font-size: .72rem;
    margin-top: 2px;
}

.topbar-notification-empty {
    align-items: center;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 14px;
    text-align: center;
}

.notification-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.notification-filter-tabs a {
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: #334155;
    font-size: .84rem;
    font-weight: 800;
    padding: 7px 10px;
    text-decoration: none;
}

.notification-filter-tabs a.is-active,
.notification-filter-tabs a:hover {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.notification-card-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.notification-overview-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.notification-overview-grid > div {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    min-height: 96px;
    padding: 12px;
}

.notification-overview-grid span,
.notification-overview-grid em {
    color: #64748b;
    display: block;
    font-size: .8rem;
    font-style: normal;
    font-weight: 800;
}

.notification-overview-grid strong {
    color: #0f172a;
    display: block;
    font-size: 1.4rem;
    font-weight: 950;
    line-height: 1.1;
    margin: 4px 0;
}

.notification-center-card {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 190px;
    padding: 14px;
}

.notification-center-card.is-unread {
    border-left: 4px solid #0f766e;
}

.notification-center-card.is-read {
    opacity: .78;
}

.notification-card-head,
.notification-card-actions {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.notification-category {
    align-items: center;
    color: #0f766e;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 900;
    gap: 6px;
    text-transform: uppercase;
}

.notification-center-card h3 {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
    margin: 8px 0 4px;
}

.notification-meta {
    color: #64748b;
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.notification-center-card p {
    color: #334155;
    font-size: .9rem;
    line-height: 1.45;
    margin: 0 0 12px;
}

.notification-card-actions {
    margin-top: auto;
}

.learning-material-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.learning-material-tabs a,
.learning-material-tabs span {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: #334155;
    font-weight: 850;
    padding: 8px 12px;
    text-decoration: none;
}

.learning-material-tabs a.is-active,
.learning-material-tabs a:hover {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.learning-material-tabs .is-disabled {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.learning-material-guidance,
.learning-material-disabled-panel {
    background: linear-gradient(135deg, #ecfdf5, #ffffff);
    border: 1px solid #bbf7d0;
    border-radius: 14px;
}

.learning-material-guidance {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    padding: 12px 14px;
}

.learning-material-guidance i {
    color: #0f766e;
    font-size: 1.2rem;
}

.learning-material-guidance strong,
.learning-material-guidance span {
    display: block;
}

.learning-material-guidance strong {
    color: #0f172a;
    font-weight: 900;
}

.learning-material-guidance span {
    color: #64748b;
    font-size: .88rem;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .notification-overview-grid {
        grid-template-columns: 1fr;
    }
    .notification-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .notification-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile tools panel */
.mobile-tools {
    display: none;
}

.mobile-tools-toggle {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 7px;
    min-height: 38px;
    padding: 7px 11px;
}

.mobile-tools-backdrop {
    background: rgba(15, 23, 42, .22);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1140;
}

.mobile-tools-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
    display: grid;
    gap: 6px;
    max-height: min(64vh, 500px);
    overflow: auto;
    padding: 8px;
    position: fixed;
    right: 12px;
    top: 62px;
    width: min(340px, calc(100vw - 24px));
    z-index: 1150;
}

html[dir="rtl"] .mobile-tools-panel {
    left: 12px;
    right: auto;
}

.mobile-tools-head {
    align-items: center;
    background: color-mix(in srgb, var(--brand) 4%, var(--card));
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px 9px;
}

.mobile-tools-user strong,
.mobile-tools-user small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-tools-user small {
    color: var(--muted);
    font-size: .72rem;
}

.mobile-tools-head-actions {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.mobile-tools-close {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.mobile-tools-menu {
    display: grid;
    gap: 6px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.mobile-tools-menu-group {
    background: color-mix(in srgb, var(--brand) 2%, var(--card));
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    padding: 6px;
}

.mobile-tools-account-menu {
    background: transparent;
    border: 0;
    display: grid;
    gap: 4px;
    padding: 0;
}

.mobile-tools-group-toggle {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    display: grid;
    font: inherit;
    font-size: .9rem;
    font-weight: 800;
    gap: 8px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    min-height: 40px;
    padding: 6px 8px;
    position: relative;
    text-align: start;
    width: 100%;
}

.mobile-tools-account-toggle {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    min-height: 42px;
}

.mobile-tools-account-toggle span,
.mobile-tools-account-toggle small {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-tools-account-toggle span {
    align-self: end;
    line-height: 1.05;
}

.mobile-tools-account-toggle small {
    align-self: start;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
}

.mobile-tools-account-toggle > i:first-child {
    grid-row: 1 / span 2;
}

.mobile-tools-account-toggle > i:last-child {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.mobile-tools-group-toggle > i:first-child {
    align-items: center;
    background: color-mix(in srgb, var(--brand) 10%, var(--card));
    border-radius: 7px;
    color: var(--brand);
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.mobile-tools-group-toggle > i:last-child {
    color: var(--muted);
    font-size: .9rem;
    transition: transform .18s ease;
}

.mobile-tools-group-toggle[aria-expanded="true"] > i:last-child {
    transform: rotate(180deg);
}

.mobile-tools-group-toggle em {
    background: #dc2626;
    border-radius: 999px;
    color: #fff;
    font-size: .68rem;
    font-style: normal;
    line-height: 1;
    padding: 3px 5px;
    position: absolute;
    right: 34px;
}

.mobile-tools-group-content {
    display: grid;
    gap: 4px;
    padding-top: 2px;
}

.mobile-tools-row,
.mobile-tools-row-form {
    min-width: 0;
}

.mobile-tools-row {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    display: grid;
    font: inherit;
    font-size: .88rem;
    gap: 8px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    min-height: 38px;
    padding: 6px 8px;
    position: relative;
    text-align: start;
    text-decoration: none;
    width: 100%;
}

.mobile-tools-row > i:first-child {
    align-items: center;
    background: color-mix(in srgb, var(--brand) 10%, var(--card));
    border-radius: 7px;
    color: var(--brand);
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.mobile-tools-row > i:last-child {
    color: var(--muted);
    font-size: .9rem;
}

.mobile-tools-row span {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.mobile-tools-row strong,
.mobile-tools-row small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-tools-row strong {
    font-size: .86rem;
    font-weight: 800;
}

.mobile-tools-row small {
    color: var(--muted);
    font-size: .7rem;
}

.mobile-tools-row em {
    background: #dc2626;
    border-radius: 999px;
    color: #fff;
    font-size: .68rem;
    font-style: normal;
    line-height: 1;
    padding: 3px 5px;
    position: absolute;
    right: 32px;
}

.mobile-tools-row-control {
    cursor: default;
    grid-template-columns: 30px minmax(0, 1fr) minmax(98px, 126px);
}

.mobile-tools-row-control .form-select {
    min-width: 0;
}

.mobile-tools-presence-options {
    display: grid;
    gap: 6px;
}

.mobile-tools-presence-options button {
    grid-template-columns: 36px minmax(0, 1fr);
}

.mobile-tools-presence-options button.active {
    background: #ecfdf5;
    border-color: #99f6e4;
    color: #047857;
}

.mobile-tools-role-preview-form {
    display: grid;
    gap: 4px;
}

.mobile-tools-account-menu[hidden],
.mobile-tools-group-content[hidden] {
    display: none !important;
}

.mobile-tools-notifications .topbar-notification-list,
.mobile-tools-menu-group[data-mobile-tools-notifications] .topbar-notification-list {
    display: grid;
    gap: 4px;
    max-height: 200px;
    overflow: auto;
}

.mobile-tools-menu-group[data-mobile-tools-notifications] .topbar-notification-item,
.mobile-tools-menu-group[data-mobile-tools-notifications] .topbar-notification-empty {
    border-radius: 7px;
    gap: 3px;
    min-height: 48px;
    padding: 5px 8px;
}

.mobile-tools-menu-group[data-mobile-tools-notifications] .topbar-notification-item strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-tools-menu-group[data-mobile-tools-notifications] .topbar-notification-item em {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

@media (max-width: 380px) {
    .mobile-tools-row,
    .mobile-tools-row-control {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .mobile-tools-row-control .form-select {
        grid-column: 2;
        width: 100%;
    }
}

.topbar-tools-section {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand) 3%, var(--card));
    padding: 10px;
}

.topbar-tools-user {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 9%, var(--card)), var(--card));
}

.topbar-tools-user-head {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 38px minmax(0, 1fr);
    margin-bottom: 10px;
}

.topbar-tools-avatar {
    align-items: center;
    background: #ecfeff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    color: var(--brand);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.topbar-tools-user-head strong,
.topbar-tools-user-head small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-tools-user-head small {
    color: var(--muted);
    font-size: .78rem;
}

.topbar-tools-action-grid {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr 1fr;
}

.topbar-tools-action-grid a,
.topbar-tools-action-grid button,
.topbar-tools-link {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    display: inline-flex;
    gap: 7px;
    justify-content: center;
    min-height: 38px;
    padding: 7px 9px;
    text-decoration: none;
    width: 100%;
}

.topbar-tools-action-grid button {
    font: inherit;
}

.topbar-tools-section-title {
    align-items: center;
    display: flex;
    font-weight: 800;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.topbar-tools-section-title span {
    align-items: center;
    display: inline-flex;
    gap: 7px;
}

.content { padding: 28px; }

body.schedule-focus-mode .sidebar,
body.schedule-focus-mode .topbar,
body.schedule-focus-mode .mobile-main-nav,
body.schedule-focus-mode .sidebar-toggle,
body.schedule-focus-mode .main > .alert {
    display: none !important;
}

body.schedule-focus-mode .main,
html[dir="rtl"] body.schedule-focus-mode .main {
    margin-left: 0;
    margin-right: 0;
}

body.schedule-focus-mode .content {
    padding: 8px;
}

.app-notification {
    align-items: flex-start;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    line-height: 1.35;
    padding-right: 42px;
}

.app-notification > .bi {
    font-size: 1.1rem;
    margin-top: 2px;
}

.app-notification strong {
    display: block;
    margin-bottom: 2px;
}

.sidebar-toggle {
    left: 12px;
    position: fixed;
    top: 12px;
    z-index: 1050;
}

.sidebar-close {
    align-items: center;
    background: rgba(255, 255, 255, .09);
    border: 1px solid var(--sidebar-border);
    border-radius: 8px;
    color: var(--sidebar-active-text);
    display: none;
    height: 36px;
    justify-content: center;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 36px;
}

html[dir="rtl"] .sidebar-close {
    left: 14px;
    right: auto;
}

.panel,
.stat-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .04);
}

.panel { padding: 20px; }

/* UI/UX safe polish Phase 1 */
.ui-polish-phase1 {
    scroll-margin-top: 76px;
}

.ux-page-header {
    align-items: flex-start;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
}

.ux-page-header > div:first-child {
    min-width: 0;
}

.ux-page-header h1 {
    letter-spacing: 0;
}

.ux-page-actions,
.ux-action-cluster,
.ux-table-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ux-page-actions,
.ux-table-actions {
    justify-content: flex-end;
}

.ux-action-cluster {
    justify-content: flex-start;
}

.ux-action-cluster .btn,
.ux-page-actions .btn,
.ux-table-actions .btn {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    justify-content: center;
}

.ux-compact-panel {
    padding: 16px;
}

.ux-section-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.ux-section-header h2,
.ux-section-header .h5,
.ux-section-header .h6 {
    letter-spacing: 0;
}

.ux-helper-text {
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.45;
}

.ux-filter-bar,
.ux-bulk-action-bar {
    background: color-mix(in srgb, var(--surface) 72%, var(--card));
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 8px;
    padding: 12px;
}

.ux-filter-bar .form-label,
.ux-bulk-action-bar .form-label {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
    margin-bottom: .22rem;
}

.ux-alert-panel {
    border-left: 4px solid var(--brand-2);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .04);
}

.ux-empty-state {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 18px;
    text-align: center;
}

.ux-interactive-card {
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ux-interactive-card:hover,
.ux-interactive-card:focus-within {
    border-color: color-mix(in srgb, var(--brand-2) 34%, var(--line));
    box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.ux-status-stack,
.ux-chip-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ux-chip,
.ux-status-stack .badge,
.ux-chip-row .badge {
    border-radius: 999px;
    font-weight: 750;
    letter-spacing: 0;
}

.ux-mobile-table {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.ux-mobile-table .table {
    margin-bottom: 0;
    min-width: 760px;
}

.ux-mobile-table th {
    color: var(--muted);
    font-size: .78rem;
    white-space: nowrap;
}

.ux-mobile-table td {
    vertical-align: top;
}

.ux-density-table > :not(caption) > * > * {
    padding-bottom: .48rem;
    padding-top: .48rem;
}

.ux-sticky-mobile-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ux-compact-pagination .pagination {
    gap: 4px;
    justify-content: flex-end;
}

.ux-compact-pagination .page-link {
    border-radius: 7px;
}

body.theme-dark .ux-filter-bar,
body.theme-dark .ux-bulk-action-bar,
body.theme-dark .ux-mobile-table {
    border-color: var(--line);
}

@media (prefers-color-scheme: dark) {
    body.theme-system .ux-filter-bar,
    body.theme-system .ux-bulk-action-bar,
    body.theme-system .ux-mobile-table {
        border-color: var(--line);
    }
}

@media (max-width: 767.98px) {
    .content {
        padding: 16px 14px calc(92px + env(safe-area-inset-bottom, 0px));
    }

    .ux-page-header {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 14px;
    }

    .ux-page-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .ux-page-actions .btn,
    .ux-action-cluster .btn,
    .ux-bulk-action-bar .btn,
    .ux-filter-bar .btn {
        min-height: 40px;
    }

    .ux-page-actions .btn {
        flex: 1 1 148px;
    }

    .ux-compact-panel {
        padding: 14px;
    }

    .ux-filter-bar,
    .ux-bulk-action-bar {
        padding: 10px;
    }

    .ux-mobile-table {
        margin-inline: -2px;
    }

    .ux-mobile-table .table {
        min-width: 720px;
    }

    .ux-table-actions {
        justify-content: flex-start;
    }

    .ux-sticky-mobile-actions {
        background: var(--card);
        border-top: 1px solid var(--line);
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        margin-inline: -10px;
        padding: 10px;
        position: sticky;
        z-index: 20;
    }

    .ux-sticky-mobile-actions .btn,
    .ux-sticky-mobile-actions button {
        flex: 1 1 160px;
        min-height: 42px;
    }
}

.settings-jump {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    max-width: 100%;
    overflow: visible;
}

.settings-nav-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.settings-nav-group + .settings-nav-group {
    margin-top: 0;
}

.settings-nav-group summary {
    align-items: center;
    background: color-mix(in srgb, var(--brand) 7%, var(--card));
    cursor: pointer;
    display: flex;
    font-size: 12px;
    font-weight: 800;
    justify-content: space-between;
    list-style: none;
    padding: 9px 10px;
    text-transform: uppercase;
}

.settings-nav-group summary::-webkit-details-marker {
    display: none;
}

.settings-nav-group-links {
    display: grid;
    gap: 6px;
    padding: 8px;
}

.settings-jump a {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 11px;
    text-decoration: none;
}

.settings-jump a:hover {
    border-color: rgba(20, 184, 166, .55);
    color: var(--brand-2);
}

.settings-shell {
    align-items: start;
    display: block;
    gap: 18px;
}

.settings-nav-panel {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 45;
}

.settings-content {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

.sidebar-theme-preview {
    background: #0f172a;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #e2e8f0;
    display: grid;
    gap: 8px;
    max-width: 360px;
    padding: 14px;
}

.sidebar-theme-preview-row {
    align-items: center;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    padding: 8px 10px;
}

.sidebar-theme-preview-row.active {
    background: #334155;
    color: #fff;
}

.sidebar-theme-preview-row.muted {
    color: #cbd5e1;
}

.settings-panel-section[hidden] {
    display: none !important;
}

.role-choice-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.role-choice {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 8px;
    min-height: 42px;
    padding: 9px 11px;
}

.role-choice.is-primary {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
    box-shadow: inset 3px 0 0 var(--brand);
}

.stat-card {
    min-height: 128px;
    padding: 18px;
}

.dashboard-hero {
    align-items: center;
    background: linear-gradient(135deg, #ffffff, #ecfeff);
    border: 1px solid rgba(20, 184, 166, .18);
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .05);
    display: flex;
    gap: 16px;
    padding: 18px;
}

.dashboard-hero img {
    background: #fff;
    border-radius: 8px;
    height: 58px;
    object-fit: contain;
    width: 58px;
}

.dashboard-hero h2 {
    font-size: 24px;
    font-weight: 850;
    margin: 0;
}

.dashboard-hero p {
    color: var(--muted);
    margin: 4px 0 0;
}

.dashboard-hero-kicker {
    color: #0f766e;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.stat-card .icon {
    align-items: center;
    background: #ecfdf5;
    border-radius: 8px;
    color: var(--brand);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.stat-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0;
}

body.font-comfortable { font-size: 1.03rem; }
body.font-large { font-size: 1.08rem; }
body.font-extra-large { font-size: 1.14rem; }
body.font-large .btn,
body.font-extra-large .btn,
body.font-large .form-control,
body.font-extra-large .form-control,
body.font-large .form-select,
body.font-extra-large .form-select {
    min-height: 42px;
}

.operations-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.operations-card {
    align-items: flex-start;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .04);
    color: var(--ink);
    display: grid;
    gap: 12px;
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 122px;
    padding: 16px;
    text-decoration: none;
}

.operations-card:hover {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
    color: var(--ink);
}

.operations-card-icon {
    align-items: center;
    background: color-mix(in srgb, var(--brand) 10%, var(--card));
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: 8px;
    color: var(--brand);
    display: inline-flex;
    font-size: 1.2rem;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.operations-card-title,
.operations-card-status {
    overflow-wrap: anywhere;
}

.operations-card-title {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.25;
}

.operations-card-count {
    font-size: 1.7rem;
    font-weight: 850;
    line-height: 1.1;
}

.operations-card-footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.smart-select {
    position: relative;
}

.smart-select-control {
    align-items: center;
    display: flex;
    gap: 6px;
}

.smart-select-input {
    min-width: 0;
}

.smart-select-results {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
    display: none;
    left: 0;
    max-height: min(340px, 60vh);
    overflow: auto;
    padding: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1080;
}

.smart-select.is-open .smart-select-results {
    display: block;
}

.smart-select-group {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    padding: 7px 9px 3px;
    text-transform: uppercase;
}

.smart-select-option {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 9px;
    text-align: start;
    width: 100%;
}

.smart-select-option:hover,
.smart-select-option.is-active {
    background: color-mix(in srgb, var(--brand) 9%, var(--card));
}

.smart-select-meta {
    color: var(--muted);
    font-size: .75rem;
}

.smart-select-native {
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none;
    position: absolute !important;
    width: 1px !important;
}

.table thead th {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.table-soft-rows tbody tr:nth-child(even) > *,
.panel .table tbody tr:nth-child(even) > * {
    background-color: rgba(15, 23, 42, .025);
}

.table-soft-rows tbody tr:hover > *,
.panel .table tbody tr:hover > * {
    background-color: rgba(20, 184, 166, .055);
}

.form-label { color: #374151; font-weight: 600; }
.required::after { color: #dc2626; content: " *"; }

.schedule-panel {
    background:
        linear-gradient(135deg, rgba(20, 184, 166, .08), rgba(59, 130, 246, .05)),
        #fff;
    padding-top: 14px;
}

.schedule-toolbar {
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
}

.schedule-eyebrow {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.schedule-week-summary {
    min-width: 0;
}

.schedule-title-line h2,
.schedule-timezone-line,
.dashboard-hero-today {
    overflow-wrap: anywhere;
}

.schedule-board {
    display: grid;
    gap: 10px;
    grid-template-columns: 58px minmax(1120px, 1fr);
    max-height: calc(100vh - 230px);
    overflow: auto;
    padding-bottom: 4px;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

body.schedule-focus-mode .schedule-board {
    max-height: calc(100vh - 58px);
}

.schedule-time-rail {
    background: #fff;
    color: #64748b;
    flex: 0 0 58px;
    font-size: 11px;
    font-weight: 700;
    left: 0;
    position: sticky;
    z-index: 5;
}

.schedule-time-spacer {
    height: 68px;
}

.schedule-time-grid {
    position: relative;
}

.schedule-time-grid::before {
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(100, 116, 139, .18) 0,
            rgba(100, 116, 139, .18) 1px,
            transparent 1px,
            transparent var(--schedule-hour-height)
        );
    content: "";
    inset: 0;
    position: absolute;
}

.schedule-time-label {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    white-space: nowrap;
}

.schedule-week-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(7, minmax(155px, 1fr));
}

.schedule-day {
    --day-tint: rgba(248, 250, 252, .95);
    background: var(--day-tint);
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .06);
    min-width: 155px;
    overflow: visible;
}

.schedule-day-sat { --day-tint: #fff7ed; }
.schedule-day-sun { --day-tint: #fefce8; }
.schedule-day-mon { --day-tint: #f0fdf4; }
.schedule-day-tue { --day-tint: #eff6ff; }
.schedule-day-wed { --day-tint: #f5f3ff; }
.schedule-day-thu { --day-tint: #fdf2f8; }
.schedule-day-fri { --day-tint: #f0fdfa; }

.schedule-day.is-today {
    box-shadow: 0 18px 34px rgba(15, 23, 42, .12);
    outline: 3px solid var(--day-color);
    outline-offset: 2px;
    transform: translateY(-1px);
}

.schedule-day-header {
    align-items: center;
    background: var(--day-color);
    border: 0;
    color: #fff;
    display: flex;
    justify-content: space-between;
    min-height: 68px;
    padding: 12px;
    text-align: left;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 30;
}

.schedule-day-header strong {
    display: block;
    font-size: 18px;
    line-height: 1.1;
}

.schedule-day-header small {
    display: block;
    font-size: 12px;
    font-weight: 700;
    opacity: .9;
}

.schedule-day-count {
    align-items: center;
    background: rgba(255,255,255,.24);
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    min-width: 30px;
    padding: 0 8px;
}

.schedule-day-grid {
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(100, 116, 139, .22) 0,
            rgba(100, 116, 139, .22) 1px,
            transparent 1px,
            transparent var(--schedule-hour-height)
        ),
        repeating-linear-gradient(
            to bottom,
            rgba(100, 116, 139, .08) 0,
            rgba(100, 116, 139, .08) 1px,
            transparent 1px,
            transparent var(--schedule-quarter-height)
        );
    cursor: pointer;
    position: relative;
}

.schedule-mobile-hint {
    align-items: center;
    background: rgba(20, 184, 166, .10);
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 8px;
    color: #0f766e;
    display: none;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 9px 10px;
}

.schedule-mobile-hint span {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.schedule-mobile-hint .btn {
    color: inherit;
    font-size: 12px;
    font-weight: 800;
    padding: 0;
    text-decoration: none;
}

.schedule-viewer-card {
    background: rgba(248, 250, 252, .74);
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 10px;
    padding: 8px 10px;
}

.schedule-viewer-card > summary {
    list-style: none;
}

.schedule-viewer-card > summary::-webkit-details-marker {
    display: none;
}

.schedule-viewer-summary,
.schedule-control-bar,
.schedule-action-strip,
.schedule-week-nav,
.schedule-date-jump-form {
    align-items: center;
    display: flex;
    gap: 10px;
}

.schedule-header-panel {
    background: rgba(255, 255, 255, .88);
    border-color: rgba(148, 163, 184, .22);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
    padding: 12px;
}

.schedule-header-panel.is-focus-mode {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    margin-bottom: 6px !important;
    padding: 0;
}

body.schedule-focus-mode .schedule-header-panel .schedule-control-bar {
    margin-bottom: 0 !important;
}

body.schedule-focus-mode .schedule-panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

body.schedule-focus-mode .schedule-toolbar,
body.schedule-focus-mode .schedule-mobile-hint {
    display: none !important;
}

.schedule-viewer-summary {
    cursor: pointer;
    justify-content: space-between;
}

.schedule-viewing-line {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

.schedule-viewing-line strong {
    color: #0f172a;
    font-size: 13px;
}

.schedule-viewer-trigger {
    flex: 0 0 auto;
    padding-inline: 9px;
}

.schedule-viewer-form {
    border-top: 1px solid rgba(59, 130, 246, .16);
    margin-top: 8px;
    padding-top: 10px;
}

.schedule-control-bar {
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}

.schedule-week-nav {
    background: rgba(248, 250, 252, .78);
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 9px;
    flex-wrap: nowrap;
    padding: 4px;
}

.schedule-nav-btn {
    min-width: 112px;
    padding-inline: 12px;
}

.schedule-nav-icon {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-width: 34px;
    padding-inline: 8px;
    width: 34px;
}

.schedule-date-jump-form {
    flex: 0 1 auto;
}

.schedule-date-jump {
    min-width: 144px;
}

.schedule-action-strip {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: flex-end;
}

.schedule-control-bar .btn,
.schedule-date-jump {
    min-height: 32px;
}

.schedule-tools-menu {
    min-width: 220px;
}

.schedule-view-menu {
    min-width: min(340px, calc(100vw - 24px));
    z-index: 1060;
}

.schedule-view-badge {
    align-items: center;
    display: inline-flex;
    min-height: 32px;
}

.schedule-tools-menu .dropdown-item {
    align-items: center;
    display: flex;
    gap: 8px;
}

.schedule-mobile-mini-toolbar {
    display: none;
}

.profile-heading {
    align-items: center;
    display: flex;
    gap: 14px;
}

.profile-avatar {
    align-items: center;
    background: linear-gradient(135deg, #3b82f6, #14b8a6);
    border-radius: 18px;
    color: #fff;
    display: inline-flex;
    font-size: 28px;
    font-weight: 900;
    height: 64px;
    justify-content: center;
    width: 64px;
}

.profile-avatar img {
    border-radius: inherit;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.profile-summary-grid,
.finance-summary-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.profile-summary-item,
.finance-summary-item {
    background: color-mix(in srgb, var(--brand) 6%, var(--card));
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
}

.profile-summary-item span,
.finance-summary-item span {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.profile-summary-item strong,
.finance-summary-item strong {
    color: var(--ink);
    font-size: 15px;
}

.finance-home-entry-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.finance-home-entry {
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .06);
    color: #0f172a;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 124px;
    padding: 14px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.finance-home-entry:hover,
.finance-home-entry:focus {
    border-color: #bfdbfe;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
    transform: translateY(-1px);
}

.finance-home-entry-icon {
    align-items: center;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 14px;
    display: inline-flex;
    font-size: 1.15rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.finance-home-entry-copy strong,
.finance-home-entry-copy em {
    display: block;
}

.finance-home-entry-copy strong {
    font-weight: 900;
    line-height: 1.2;
}

.finance-home-entry-copy em {
    color: #64748b;
    font-size: .84rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 4px;
}

.finance-home-entry-copy b {
    align-items: center;
    color: #2563eb;
    display: inline-flex;
    font-size: .84rem;
    gap: 6px;
    margin-top: 8px;
}

.finance-home-entry-count {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(148, 163, 184, .26);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 900;
    line-height: 1;
    padding: 6px 8px;
}

.finance-home-entry-schedule { background: linear-gradient(135deg, #eff6ff, #ffffff); border-color: #bfdbfe; }
.finance-home-entry-finance { background: linear-gradient(135deg, #fef9c3, #ffffff); border-color: #fde68a; }
.finance-home-entry-payroll { background: linear-gradient(135deg, #f5f3ff, #ffffff); border-color: #ddd6fe; }
.finance-home-entry-rates { background: linear-gradient(135deg, #ecfdf5, #ffffff); border-color: #bbf7d0; }
.finance-home-entry-reports { background: linear-gradient(135deg, #e0f2fe, #ffffff); border-color: #bae6fd; }

.payment-method-card {
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: 10px;
    padding: 12px;
}

.payment-method-card.is-preferred {
    border-left-color: #22c55e;
    background: rgba(34, 197, 94, .06);
}

.programs-prices-page {
    --program-line: rgba(15, 23, 42, .10);
    --program-soft: #f8fafc;
}

.programs-prices-hero,
.program-general-section,
.program-calculator-card,
.program-audience-card,
.program-offer-card,
.program-subject-card {
    border: 1px solid var(--program-line);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.programs-prices-hero {
    background: linear-gradient(135deg, #f0fdfa, #ffffff 56%, #fff7ed);
    padding: 18px;
}

.program-section-heading {
    align-items: flex-end;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.program-section-kicker {
    color: #0f766e;
    display: block;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.program-offer-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    padding: 18px;
    position: relative;
}

.program-offer-card::after,
.program-subject-card::after {
    border-radius: 999px;
    content: "";
    height: 110px;
    opacity: .32;
    position: absolute;
    right: -38px;
    top: -42px;
    width: 110px;
}

.program-offer-card-aqua { background: linear-gradient(135deg, #ecfeff, #ffffff 62%, #eff6ff); }
.program-offer-card-mint { background: linear-gradient(135deg, #ecfdf5, #ffffff 62%, #f0fdfa); }
.program-offer-card-aqua::after { background: #67e8f9; }
.program-offer-card-mint::after { background: #86efac; }

.program-offer-icon,
.program-subject-icon,
.program-audience-card > i {
    align-items: center;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    color: #0f766e;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    margin-bottom: 12px;
    width: 42px;
}

.program-price-pill {
    align-items: center;
    background: #0f766e;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 800;
    padding: 5px 10px;
    white-space: nowrap;
}

.program-offer-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.program-offer-facts span {
    align-items: center;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    display: inline-flex;
    font-size: .82rem;
    gap: 6px;
    padding: 6px 9px;
}

.program-general-section {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    padding: 18px;
}

.program-subject-card {
    overflow: hidden;
    padding: 16px;
    position: relative;
}

.program-subject-card-sage { background: linear-gradient(135deg, #f0fdf4, #ffffff); }
.program-subject-card-sky { background: linear-gradient(135deg, #eff6ff, #ffffff); }
.program-subject-card-gold { background: linear-gradient(135deg, #fffbeb, #ffffff); }
.program-subject-card-sage::after { background: #bbf7d0; }
.program-subject-card-sky::after { background: #bfdbfe; }
.program-subject-card-gold::after { background: #fde68a; }

.program-calculator-card {
    background: linear-gradient(135deg, #ffffff, #f0fdfa);
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr) minmax(220px, .7fr);
    padding: 16px;
}

.program-calculator-form {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.program-calculator-action {
    align-self: end;
}

.program-calculator-result {
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    padding: 14px;
}

.program-calculator-result strong {
    color: #0f766e;
    display: block;
    font-size: 1.45rem;
    line-height: 1.2;
}

.program-audience-card {
    background: #ffffff;
    padding: 16px;
}

.program-audience-card:nth-child(1),
.program-audience-grid .col-md-4:nth-child(1) .program-audience-card {
    background: linear-gradient(135deg, #f8fafc, #ecfeff);
}

.program-audience-grid .col-md-4:nth-child(2) .program-audience-card {
    background: linear-gradient(135deg, #f8fafc, #f0fdf4);
}

.program-audience-grid .col-md-4:nth-child(3) .program-audience-card {
    background: linear-gradient(135deg, #f8fafc, #fff7ed);
}

.registration-more-grid {
    align-items: stretch;
}

.registration-mode-choice-actions {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
    max-width: 100%;
    width: 100%;
}

.registration-mode-choice-actions .registration-mode-tab {
    align-items: center;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid #d7e5e4;
    border-radius: 12px;
    color: #334155;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    justify-content: stretch;
    min-height: 82px;
    min-width: 0;
    padding: 12px 13px;
    text-align: start;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

.registration-mode-choice-actions .registration-mode-tab:hover {
    background: #ecfdf5;
    border-color: #5eead4;
    color: #0f766e;
    box-shadow: 0 14px 34px rgba(15, 118, 110, .13);
    transform: translateY(-2px);
}

.registration-mode-choice-actions .registration-mode-tab:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(20, 184, 166, .25);
    outline: 2px solid #0f766e;
    outline-offset: 2px;
}

.registration-mode-choice-actions .bi {
    flex: 0 0 auto;
    font-size: 1.35rem;
}

.registration-mode-choice-card {
    min-height: 0;
    padding: 6px 2px 2px;
}

.registration-mode-choice-head {
    text-align: center;
}

.registration-choice-kicker {
    color: #0f766e;
    display: block;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.registration-role-card-icon {
    align-items: center;
    background: #ccfbf1;
    border-radius: 11px;
    color: #0f766e;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.registration-role-card strong,
.registration-role-card small {
    display: block;
}

.registration-role-card strong {
    color: #0f172a;
    font-size: 1rem;
    margin-bottom: 2px;
}

.registration-role-card small {
    color: #64748b;
    font-size: .78rem;
    line-height: 1.25;
}

.registration-role-card-info {
    align-items: center;
    color: #64748b;
    display: inline-flex;
    justify-content: center;
    min-height: 32px;
    min-width: 32px;
}

.registration-role-card-info:focus-visible {
    border-radius: 50%;
    box-shadow: 0 0 0 .2rem rgba(20, 184, 166, .2);
    outline: 1px solid #0f766e;
}

.registration-success-summary {
    background: linear-gradient(145deg, #f8fffe, #f8fafc);
    border: 1px solid #cfe8e5;
    border-radius: 14px;
    padding: 18px;
}

.registration-success-copy {
    background: #fff;
    font-size: .875rem;
}

.registration-choice-page {
    justify-content: center;
}

.registration-choice-page .registration-choice-card {
    flex: 0 0 auto;
    min-height: 0;
}

.fixed-classroom-tablist {
    flex-wrap: nowrap !important;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 7px;
    scroll-padding-inline: 8px;
    scrollbar-width: thin;
}

.fixed-classroom-tablist .nav-link {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.fixed-classroom-tablist .nav-link:focus-visible {
    outline: 2px solid var(--brand, #0f766e);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .fixed-classroom-tablist {
        padding-bottom: 10px;
        scroll-snap-type: inline proximity;
    }
}

.registration-paired-row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.registration-paired-row .form-label {
    align-items: flex-end;
    display: flex;
    min-height: 2.35rem;
}

.registration-paired-row .invalid-feedback,
.registration-paired-row .form-text {
    min-height: 1.25rem;
}

@media (max-width: 575.98px) {
    .registration-mode-choice-actions {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr;
        margin-inline: 0;
        overflow: visible;
        padding: 0;
    }

    .registration-mode-choice-actions .registration-mode-tab {
        min-height: 104px;
        padding: 15px;
        white-space: normal;
    }

    .registration-paired-row .form-label,
    .registration-paired-row .invalid-feedback,
    .registration-paired-row .form-text {
        min-height: 0;
    }
}

.registration-students-card {
    background: rgba(248, 250, 252, .86);
    border: 1px solid rgba(20, 184, 166, .18);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    overflow: hidden;
    width: 100%;
}

.registration-students-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 12px 14px;
}

.registration-students-summary::-webkit-details-marker {
    display: none;
}

.registration-students-summary span {
    align-items: center;
    color: #0f172a;
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
}

.registration-students-summary > .bi {
    color: #64748b;
    transition: transform .15s ease;
}

.registration-students-card[open] .registration-students-summary > .bi {
    transform: rotate(180deg);
}

.registration-student-list {
    display: grid;
    gap: 10px;
    padding: 0 14px 10px;
}

.registration-student-row {
    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    padding: 12px;
}

.registration-student-row-header {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-width: 0;
}

.registration-student-row-header span {
    color: #475569;
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.registration-student-field-row {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.registration-student-remove {
    min-height: 38px;
    padding: .25rem .55rem;
}

.registration-add-student-button {
    margin: 0 14px 14px;
}

.registration-student-language-list {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

.registration-student-language-row .form-text {
    margin-top: 6px;
}

@media (max-width: 575.98px) {
    .registration-student-field-row {
        grid-template-columns: 1fr;
    }

    .registration-student-row-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .registration-student-remove {
        align-self: flex-start;
    }
}

.registration-more-pair {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

.registration-more-field,
.registration-balanced-field {
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 12px;
}

.registration-more-field .form-label,
.registration-balanced-field .form-label {
    margin-bottom: 6px;
}

.registration-balanced-field .form-text {
    min-height: 0;
}

@media (max-width: 991.98px) {
    .program-calculator-card {
        grid-template-columns: 1fr;
    }
    .program-calculator-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .programs-prices-hero,
    .program-general-section,
    .program-calculator-card,
    .program-audience-card,
    .program-offer-card,
    .program-subject-card {
        padding: 14px;
    }
    .program-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .program-calculator-form,
    .registration-more-pair {
        grid-template-columns: 1fr;
    }
    .registration-balanced-field {
        min-height: 0;
    }
    .registration-balanced-field .form-text {
        min-height: 0;
    }
}

.user-status-inline {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    white-space: nowrap;
}

.status-dot {
    border: 2px solid transparent;
    border-radius: 999px;
    display: inline-block;
    height: 11px;
    width: 11px;
}

.status-dot-online,
.status-dot-available {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .14);
}

.status-dot-offline {
    background: #94a3b8;
}

.status-dot-busy {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .14);
}

.status-dot-invisible {
    background: transparent;
    border-color: #94a3b8;
}

.status-dot-away {
    background: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .14);
}

.reset-password-mini {
    min-width: 240px;
}

.schedule-day-sun .schedule-day-header {
    color: #422006;
}

.schedule-day-sun .schedule-day-count {
    background: rgba(66, 32, 6, .12);
    border-color: rgba(66, 32, 6, .18);
}

.schedule-day-grid:hover {
    background-color: rgba(255,255,255,.32);
}

.schedule-event {
    background: linear-gradient(90deg, var(--category-soft, rgba(255,255,255,.92)), rgba(255,255,255,.94));
    border: 1px solid var(--category-border, rgba(148, 163, 184, .32));
    border-radius: 8px;
    box-shadow: 0 7px 16px rgba(15, 23, 42, .10);
    color: #0f172a;
    box-sizing: border-box;
    height: auto;
    left: var(--event-left, 8px);
    overflow: hidden;
    position: absolute;
    right: auto;
    transition: transform .16s ease, box-shadow .16s ease;
    width: var(--event-width, calc(100% - 16px));
}

.schedule-event:hover {
    box-shadow: 0 14px 26px rgba(15, 23, 42, .16);
    cursor: pointer;
    transform: translateY(-1px);
    z-index: 3;
}

.schedule-event-accent {
    background: var(--category-color, var(--brand));
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: 5px;
}

.schedule-event-body {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    justify-content: center;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 7px 9px 8px 14px;
    text-align: center;
}

.schedule-event-topline {
    align-items: center;
    display: flex;
    gap: 6px;
    justify-content: space-between;
    min-width: 0;
}

.schedule-event-time {
    color: #475569;
    font-size: 9px;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-event-title {
    align-items: center;
    display: flex;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    justify-content: center;
}

.schedule-event-title .bi {
    color: var(--category-color, var(--brand));
    flex: 0 0 auto;
    font-size: 10px;
}

.schedule-event-title span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-event-chip {
    align-items: center;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 10px;
    font-weight: 800;
    gap: 5px;
    line-height: 1;
    max-width: 100%;
    padding: 4px 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-event.is-small .schedule-event-chip {
    display: none;
}

.schedule-event.density-micro .schedule-event-body {
    gap: 0;
    justify-content: center;
    padding: 2px 5px 2px 11px;
}

.schedule-event.density-micro .schedule-event-title {
    font-size: 10px;
}

.schedule-event.density-micro .schedule-event-brief,
.schedule-event.density-micro .schedule-event-topline,
.schedule-event.density-micro .schedule-event-chip,
.schedule-event.density-compact .schedule-event-topline,
.schedule-event.density-compact .schedule-event-chip {
    display: none;
}

.schedule-event.density-compact .schedule-event-body {
    padding-bottom: 4px;
    padding-top: 4px;
}

.schedule-event-type-label {
    color: #475569;
    font-size: 10px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-date-jump {
    width: 142px;
}

.event-field-hidden {
    display: none !important;
}

.schedule-mode-hidden {
    display: none !important;
}

.schedule-kind-hidden {
    display: none !important;
}

.schedule-kind-private [data-schedule-kind-field~="macca"],
.schedule-kind-macca [data-schedule-kind-field~="private"] {
    display: none !important;
}

.schedule-mode-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.schedule-mode-option {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    min-height: 42px;
    padding: 8px 12px;
}

.schedule-mode-option.is-active {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
    box-shadow: inset 3px 0 0 var(--brand);
}

.schedule-more-details,
.schedule-repeat-fields {
    background: color-mix(in srgb, var(--brand) 4%, var(--card));
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
}

.schedule-more-details summary {
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.schedule-more-details summary::-webkit-details-marker {
    display: none;
}

.schedule-repeat-toggle {
    border-top: 1px solid var(--line);
    margin-top: 2px;
    padding-top: 10px;
}

.schedule-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.schedule-filter-chip {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    min-height: 34px;
    padding: 6px 12px;
    text-decoration: none;
}

.schedule-filter-chip.is-active {
    background: color-mix(in srgb, var(--brand) 12%, var(--card));
    border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
    color: var(--brand-2);
}

.schedule-mobile-filter-panel,
.my-sessions-mobile-filter {
    background: color-mix(in srgb, var(--brand) 3%, var(--card));
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
}

.schedule-mobile-filter-panel summary,
.my-sessions-mobile-filter summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: 800;
    gap: 8px;
    list-style: none;
}

.schedule-mobile-filter-panel summary::-webkit-details-marker,
.my-sessions-mobile-filter summary::-webkit-details-marker {
    display: none;
}

.my-sessions-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.my-sessions-active-filters span {
    background: color-mix(in srgb, var(--brand) 8%, var(--card));
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--brand-2);
    font-size: .78rem;
    font-weight: 800;
    padding: 5px 8px;
}

.meeting-state-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    height: 100%;
    padding: 12px;
}

.meeting-state-meta {
    color: var(--muted);
    display: grid;
    font-size: .84rem;
    gap: 2px;
}

.meeting-state-grid {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meeting-state-grid span {
    background: color-mix(in srgb, var(--brand) 5%, var(--card));
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font-size: .78rem;
    font-weight: 800;
    min-width: 0;
    padding: 6px 8px;
}

.my-meetings-mobile-cards {
    display: grid;
    gap: 10px;
}

.schedule-event-type-busy,
.schedule-event-type-personal {
    opacity: .92;
}

.schedule-event-type-availability .schedule-event-accent {
    background: #14b8a6;
}

.schedule-event-type-trial .schedule-event-accent,
.schedule-event-type-appointment .schedule-event-accent {
    background: #3b82f6;
}

.schedule-event-type-exam .schedule-event-accent,
.schedule-event-type-assessment .schedule-event-accent {
    background: #8b5cf6;
}

.schedule-event-type-holiday .schedule-event-accent,
.schedule-event-type-leave .schedule-event-accent,
.schedule-event-type-break .schedule-event-accent {
    background: #f59e0b;
}

.schedule-event.is-tiny .schedule-event-time,
.schedule-event.is-tiny .schedule-event-chip {
    display: none;
}

.schedule-event.is-tiny .schedule-event-body {
    padding-bottom: 3px;
    padding-top: 3px;
}

.schedule-event .badge {
    border-radius: 999px;
    font-size: 0;
    height: 8px;
    overflow: hidden;
    padding: 0;
    width: 8px;
}

.schedule-event-brief {
    align-items: center;
    color: #475569;
    display: flex;
    font-size: 11px;
    font-weight: 700;
    gap: 5px;
    justify-content: center;
    line-height: 1.18;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.schedule-event-brief span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-event-meta {
    display: grid;
    gap: 3px;
    margin-top: 7px;
}

.schedule-event-meta span {
    align-items: center;
    color: #334155;
    display: flex;
    font-size: 12px;
    gap: 5px;
    min-width: 0;
}

.schedule-event-meta i,
.schedule-event-status i {
    color: #64748b;
}

.schedule-event-status {
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    font-weight: 700;
    gap: 4px 8px;
    margin-top: 7px;
}

.schedule-actions,
.schedule-token-form {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.schedule-event > .schedule-event-body > .schedule-token-form,
.schedule-event > .schedule-event-body > .schedule-actions {
    display: none;
}

.schedule-event-detail-btn {
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(148, 163, 184, .34);
    border-radius: 999px;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    float: right;
    margin-top: 3px;
    padding: 2px 7px;
}

.schedule-event .schedule-token-form,
.schedule-event .schedule-actions {
    display: none;
}

.schedule-event-detail-btn .bi {
    line-height: 1;
}

body.theme-dark .schedule-event,
body.theme-dark .schedule-event-detail-btn {
    background: rgba(15, 23, 42, .94);
    color: #e5e7eb;
}

body.theme-dark .schedule-event-time,
body.theme-dark .schedule-event-brief,
body.theme-dark .schedule-event-status,
body.theme-dark .schedule-event-meta span {
    color: #cbd5e1;
}

body.theme-dark .schedule-day-grid:hover {
    background-color: rgba(15, 23, 42, .2);
}

.schedule-token-form {
    flex-wrap: nowrap;
}

.schedule-token-form input {
    min-width: 0;
}

.schedule-token-input {
    width: 88px;
}

.schedule-detail-modal {
    border: 0;
    border-radius: 8px;
}

.schedule-detail-session {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .26);
    border-left: 6px solid var(--category-color, var(--brand));
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
    margin-bottom: 12px;
    padding: 14px;
}

.schedule-detail-session-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.schedule-detail-session h3 {
    font-size: 18px;
    font-weight: 800;
    margin: 2px 0 0;
}

.schedule-modal-actions {
    align-items: center;
    border-top: 1px solid rgba(148, 163, 184, .22);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
}

.teacher-workbench-actions,
.student-report-submit-bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.student-report-submit-bar {
    justify-content: flex-end;
}

.student-report-card,
.student-report-history,
.student-report-history .table {
    max-width: 100%;
}

.report-center-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.report-center-tab {
    align-items: center;
    border: 1px solid rgba(148, 163, 184, .32);
    border-radius: 8px;
    color: inherit;
    display: inline-flex;
    gap: 8px;
    min-height: 38px;
    padding: 7px 10px;
    text-decoration: none;
}

.report-center-tab.active {
    background: rgba(13, 110, 253, .08);
    border-color: rgba(13, 110, 253, .38);
    color: #0b5ed7;
    font-weight: 600;
}

.student-report-card {
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 8px;
    padding: 14px;
}

.student-report-form-panel {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-color: rgba(56, 189, 248, .22);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .06);
}

.report-form-section-title {
    align-items: center;
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    border-radius: 8px;
    color: #0f766e;
    display: flex;
    font-size: 14px;
    font-weight: 800;
    gap: 8px;
    padding: 9px 11px;
}

.report-textarea {
    line-height: 1.55;
    min-height: 104px;
    resize: vertical;
}

.learning-report-card,
.learning-report-detail {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .98)),
        radial-gradient(circle at top right, rgba(14, 165, 233, .14), transparent 34%),
        radial-gradient(circle at bottom left, rgba(34, 197, 94, .12), transparent 30%);
    border: 1px solid rgba(148, 163, 184, .22);
    border-left: 5px solid #14b8a6;
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .07);
    padding: 16px;
}

.learning-report-card {
    position: relative;
}

.learning-report-spotlight {
    background: linear-gradient(135deg, #eff6ff 0%, #ecfdf5 50%, #fff7ed 100%);
    border: 1px solid rgba(59, 130, 246, .20);
    border-radius: 8px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .06);
    padding: 16px;
}

.learning-report-card::before {
    background: linear-gradient(90deg, #38bdf8, #22c55e, #f59e0b, #a78bfa);
    border-radius: 8px 8px 0 0;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.learning-report-card-head {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.learning-report-card-head h2,
.learning-report-card-head h3 {
    font-size: 20px;
    font-weight: 850;
    letter-spacing: 0;
    margin: 0 0 4px;
}

.learning-report-brand {
    color: #0f766e;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.learning-report-detail-head {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.learning-report-detail-head h2,
.learning-report-detail-head h3 {
    font-size: 22px;
    margin: 0 0 6px;
}

.report-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.report-chip-row > span,
.learning-report-chip {
    align-items: center;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 999px;
    color: #334155;
    display: inline-flex;
    font-size: 13px;
    gap: 6px;
    padding: 5px 9px;
}

.learning-report-chip span {
    color: #64748b;
}

.learning-report-chip strong {
    color: #0f172a;
    font-weight: 750;
}

.learning-report-grid,
.learning-report-sections {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.learning-report-section,
.learning-report-sections section {
    background: #fbfdff;
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 8px;
    padding: 12px;
}

.learning-report-section-head {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.learning-report-section-head > span {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.learning-report-section-head h3 {
    font-size: 14px;
    font-weight: 850;
    margin: 0;
}

.learning-report-sections h3,
.learning-report-sections h4 {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 8px;
}

.learning-report-section.tone-amber,
.learning-report-sections section.tone-amber {
    background: #fffbeb;
    border-color: #fde68a;
}

.learning-report-section.tone-amber .learning-report-section-head > span {
    background: #fef3c7;
    color: #b45309;
}

.learning-report-section.tone-rose {
    background: #fff1f2;
    border-color: #fecdd3;
}

.learning-report-section.tone-rose .learning-report-section-head > span {
    background: #ffe4e6;
    color: #be123c;
}

.learning-report-section.tone-green {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.learning-report-section.tone-green .learning-report-section-head > span {
    background: #dcfce7;
    color: #15803d;
}

.learning-report-section.tone-pink {
    background: #fdf2f8;
    border-color: #fbcfe8;
}

.learning-report-section.tone-pink .learning-report-section-head > span {
    background: #fce7f3;
    color: #be185d;
}

.learning-report-section.tone-purple {
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.learning-report-section.tone-purple .learning-report-section-head > span {
    background: #ede9fe;
    color: #6d28d9;
}

.learning-report-section.tone-teal,
.report-encouragement {
    background: #f0fdfa;
    border-color: #99f6e4;
    color: #134e4a;
}

.learning-report-section.tone-teal .learning-report-section-head > span {
    background: #ccfbf1;
    color: #0f766e;
}

.learning-report-performance {
    align-items: center;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 8px;
    display: inline-grid;
    gap: 1px;
    justify-items: start;
    min-width: 126px;
    padding: 8px 10px;
}

.learning-report-performance strong {
    font-size: 16px;
    line-height: 1.1;
}

.learning-report-performance span {
    font-size: 12px;
}

.learning-report-stars {
    color: #cbd5e1;
    font-size: 12px;
    letter-spacing: 0;
}

.learning-report-stars .is-filled {
    color: #f59e0b;
}

.learning-report-performance.tone-green {
    background: #f0fdf4;
    color: #166534;
}

.learning-report-performance.tone-blue {
    background: #eff6ff;
    color: #1d4ed8;
}

.learning-report-performance.tone-amber {
    background: #fffbeb;
    color: #92400e;
}

.learning-report-performance.tone-rose {
    background: #fff1f2;
    color: #be123c;
}

.learning-report-performance.tone-slate {
    background: #f8fafc;
    color: #475569;
}

.student-report-history .table .learning-report-performance {
    min-width: 96px;
    padding: 5px 7px;
}

.student-report-history .table .learning-report-stars,
.student-report-history .table .learning-report-performance span {
    display: none;
}

.session-feedback-card {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    max-width: 34rem;
    padding: .6rem;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: .75rem;
    background:
        linear-gradient(135deg, rgba(219, 234, 254, .92), rgba(240, 253, 250, .86));
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.session-feedback-card > .fw-semibold {
    flex: 1 0 100%;
    color: #1e3a8a;
}

.session-feedback-card .form-control {
    min-width: min(16rem, 100%);
}

.session-feedback-card .btn {
    border-radius: 999px;
    min-height: 34px;
}

.homework-status-card {
    background: linear-gradient(135deg, rgba(254, 249, 195, .76), rgba(220, 252, 231, .7));
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 8px;
    padding: 12px;
}

.homework-status-card .btn {
    min-height: 36px;
}

.homework-note-input {
    max-width: min(100%, 18rem);
}

.report-review-card {
    border-left: 4px solid rgba(37, 99, 235, .32);
}

.report-safe-text {
    color: #334155;
    line-height: 1.6;
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
    white-space: normal;
}

.report-expandable summary {
    cursor: pointer;
    list-style: none;
}

.report-expandable summary::-webkit-details-marker {
    display: none;
}

.report-expandable summary span {
    color: #0b5ed7;
    font-weight: 700;
    white-space: nowrap;
}

.report-encouragement {
    border: 1px solid #99f6e4;
    border-radius: 8px;
    padding: 12px;
}

.report-card-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-report-card .small,
.student-report-history .small,
.panel .small {
    overflow-wrap: anywhere;
}

.student-report-history td,
.student-report-history th {
    vertical-align: top;
}

.invoice-details summary {
    list-style: none;
}

.invoice-details summary::-webkit-details-marker {
    display: none;
}

.invoice-detail-list {
    display: grid;
    gap: 6px;
    min-width: 240px;
}

.invoice-detail-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
}

.invoice-detail-item span {
    color: var(--muted);
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.invoice-detail-item strong {
    color: #0f766e;
}

.timezone-card em {
    display: block;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    opacity: .82;
}

.dashboard-announcement-center {
    --announce-border: rgba(15, 23, 42, .1);
}

.dashboard-announcement-panel,
.dashboard-announcement-minibar {
    border: 1px solid var(--announce-border);
    border-radius: 8px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 48%, #eef6ff 100%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.dashboard-announcement-minibar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .75rem;
    color: #0f172a;
}

.dashboard-announcement-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .85rem .45rem;
}

.dashboard-announcement-head h2 {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: 1rem;
}

.dashboard-announcement-head span {
    color: #64748b;
    font-size: .82rem;
}

.dashboard-announcement-actions,
.dashboard-announcement-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

.dashboard-announcement-list {
    display: grid;
    gap: .55rem;
    padding: .35rem .85rem .85rem;
}

.dashboard-announcement-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, .28);
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    background: rgba(255, 255, 255, .88);
    padding: .58rem .65rem;
    cursor: pointer;
}

.dashboard-announcement-card:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .28);
    outline-offset: 2px;
}

.dashboard-announcement-card.is-expanded {
    align-items: flex-start;
}

.dashboard-announcement-card.tone-important {
    border-left-color: #ef4444;
    background: linear-gradient(90deg, rgba(254, 226, 226, .68), rgba(255, 255, 255, .92));
}

.dashboard-announcement-card.tone-holiday {
    border-left-color: #16a34a;
    background: linear-gradient(90deg, rgba(220, 252, 231, .72), rgba(255, 255, 255, .92));
}

.dashboard-announcement-card.tone-reminder {
    border-left-color: #f59e0b;
}

.dashboard-announcement-card.tone-academic {
    border-left-color: #2563eb;
}

.dashboard-announcement-card.tone-system {
    border-left-color: #7c3aed;
}

.dashboard-announcement-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #0f172a;
    color: #fff;
}

.dashboard-announcement-copy {
    min-width: 0;
}

.dashboard-announcement-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}

.dashboard-announcement-title strong {
    font-size: .94rem;
}

.dashboard-announcement-title span {
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: .72rem;
    line-height: 1;
    padding: .22rem .45rem;
}

.dashboard-announcement-copy p {
    margin: .15rem 0 0;
    color: #475569;
    font-size: .82rem;
}

.dashboard-announcement-full {
    border-top: 1px dashed rgba(148, 163, 184, .65);
    color: #334155;
    font-size: .88rem;
    margin-top: .55rem;
    padding-top: .55rem;
}

.dashboard-workflow-guide-hint {
    align-items: center;
    background: linear-gradient(135deg, #ede9fe, #e0f2fe);
    border: 1px solid rgba(99, 102, 241, .22);
    border-radius: 999px;
    color: #312e81;
    display: inline-flex;
    gap: .75rem;
    padding: .45rem .55rem .45rem .8rem;
}

.dashboard-workflow-guide-hint span {
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .dashboard-announcement-head {
        flex-direction: column;
    }
    .dashboard-announcement-card {
        grid-template-columns: 34px minmax(0, 1fr);
    }
    .dashboard-announcement-card-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

.schedule-detail-time {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.schedule-detail-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
}

.schedule-detail-grid div,
.schedule-detail-notes {
    background: #f8fafc;
    border-radius: 8px;
    color: #0f172a;
    font-size: 13px;
    padding: 9px 10px;
}

.schedule-detail-grid span,
.schedule-detail-notes span {
    color: #64748b;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.schedule-detail-notes {
    margin-top: 10px;
}

.schedule-detail-empty {
    align-items: center;
    color: #64748b;
    display: grid;
    gap: 8px;
    justify-items: center;
    min-height: 180px;
    text-align: center;
}

.schedule-detail-empty i {
    color: #14b8a6;
    font-size: 36px;
}

.payroll-hero {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(34, 197, 94, .10), rgba(59, 130, 246, .08)),
        #fff;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.payroll-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.payroll-preview-guide {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.payroll-preview-guide > div {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .05);
    display: grid;
    gap: 5px;
    min-height: 112px;
    padding: 13px;
}

.payroll-preview-guide i {
    color: #0f766e;
    font-size: 1.15rem;
}

.payroll-preview-guide strong {
    color: #0f172a;
    font-weight: 900;
}

.payroll-preview-guide span {
    color: #64748b;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.35;
}

.payroll-preview-actions {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
}

.payroll-preview-actions span {
    color: #64748b;
    font-size: .84rem;
    font-weight: 700;
}

.payroll-workflow-strip {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.payroll-workflow-strip span {
    align-items: center;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #475569;
    display: inline-flex;
    font-size: .84rem;
    font-weight: 800;
    gap: 8px;
    min-height: 38px;
    padding: 7px 10px;
}

.payroll-workflow-strip b {
    align-items: center;
    background: #0f766e;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .75rem;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.payroll-entry-panel {
    padding: 0;
}

.payroll-table-wrap {
    max-height: 72vh;
}

.payroll-table {
    margin-bottom: 0;
    min-width: 1180px;
}

.payroll-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 2;
}

.payroll-table td,
.payroll-table th {
    padding: 10px;
    vertical-align: top;
}

.payroll-staff-cell {
    min-width: 230px;
}

.payroll-number {
    max-width: 120px;
}

.payroll-adjust-grid {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(92px, 1fr));
}

.payroll-table .form-control-sm,
.payroll-table .form-select-sm {
    min-height: 32px;
}

.transfer-mini-form {
    background: rgba(20, 184, 166, .06);
    border: 1px solid rgba(20, 184, 166, .16);
    border-radius: 8px;
    padding: 8px;
}

.payroll-session-row td {
    background: #f8fafc;
    border-top: 0;
}

.payroll-session-list {
    display: grid;
    gap: 8px;
}

.payroll-session-list > div {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .26);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    padding: 9px 10px;
}

.payroll-session-list span {
    color: #64748b;
    font-size: 12px;
}

.dashboard-onboarding {
    background: linear-gradient(135deg, rgba(20, 184, 166, .12), rgba(59, 130, 246, .08)), #fff;
}

.dashboard-clock-grid,
.dashboard-saved-clock-grid {
    align-items: stretch;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.dashboard-clock-card-grid {
    margin-top: -2px;
}

.dashboard-clock-grid[data-clock-count="1"],
.dashboard-saved-clock-grid[data-zone-count="1"] {
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-clock-grid[data-clock-count="2"],
.dashboard-clock-grid[data-clock-count="4"],
.dashboard-saved-clock-grid[data-zone-count="2"],
.dashboard-saved-clock-grid[data-zone-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-clock-grid[data-clock-count="3"],
.dashboard-saved-clock-grid[data-zone-count="3"],
.dashboard-saved-clock-grid[data-zone-count="5"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-clock-grid[data-clock-count="5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.today-time-card,
.timezone-card {
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,255,.84));
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    min-height: 128px;
    padding: 14px 16px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .06);
}

.today-time-card {
    background: linear-gradient(135deg, rgba(240,253,250,.98), rgba(239,246,255,.96));
    border-color: rgba(20, 184, 166, .38);
    position: relative;
}

.today-time-label {
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.active-timezone-badge {
    background: #fff;
    border: 1px solid rgba(20, 184, 166, .32);
    color: #0f766e;
}

.today-time-card::before {
    background: linear-gradient(180deg, #14b8a6, #3b82f6);
    border-radius: 8px 0 0 8px;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 5px;
}

.today-time-card strong,
.today-time-card span {
    display: block;
}

.today-time-card .today-hijri {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(20,184,166,.18);
    border-radius: 999px;
    display: inline-block;
    font-size: 13px;
    padding: 3px 8px;
}

.today-time-card strong {
    font-size: 18px;
}

.today-time-card span {
    color: var(--muted);
    font-size: 13px;
    margin-top: 2px;
}

.today-time-clock {
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    margin-top: 18px;
}

.today-time-zone {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    margin-top: 8px;
}

.dashboard-clock-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
    min-height: 134px;
    padding: 12px 14px;
    position: relative;
}

.dashboard-clock-card.is-active-timezone {
    background: linear-gradient(135deg, rgba(236, 253, 245, .98), rgba(240, 249, 255, .94));
    border-color: rgba(13, 148, 136, .72);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, .16), 0 14px 30px rgba(20, 184, 166, .13);
}

.dashboard-clock-card.is-active-timezone::before {
    background: linear-gradient(90deg, #0f766e, #38bdf8);
    border-radius: 8px 8px 0 0;
    content: "";
    height: 4px;
    inset-inline: 0;
    position: absolute;
    top: 0;
}

.dashboard-clock-card-head {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
}

.dashboard-clock-card-head strong {
    font-size: 13px;
    line-height: 1.25;
    margin: 0;
}

.dashboard-clock-badge {
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(20, 184, 166, .24);
    border-radius: 999px;
    color: #0f766e;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
}

.dashboard-clock-card .dashboard-clock-time {
    font-size: clamp(24px, 2.2vw, 31px);
    line-height: 1.05;
    margin-top: 2px;
}

.dashboard-clock-dates {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 24px;
}

.dashboard-clock-dates .timezone-card-date {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-date-chip {
    background: rgba(255, 255, 255, .66);
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 999px;
    color: #475569;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    padding: 3px 7px;
}

.dashboard-hijri-date {
    color: #0f766e;
}

.dashboard-clock-action {
    flex: 0 0 auto;
}

.dashboard-clock-action .btn {
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    padding: 4px 8px;
    white-space: nowrap;
}

.duration-preset-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.my-times-purpose-panel,
.schedule-data-purpose-panel {
    align-items: flex-start;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    display: flex;
    gap: 12px;
    padding: 12px 14px;
}

.my-times-purpose-panel-availability {
    background: linear-gradient(135deg, #ecfdf5, #ffffff);
    border-color: #bbf7d0;
}

.schedule-data-purpose-panel {
    background: linear-gradient(135deg, #fff7ed, #ffffff);
    border-color: #fed7aa;
}

.my-times-purpose-panel i,
.schedule-data-purpose-panel i {
    color: #2563eb;
    font-size: 1.25rem;
}

.schedule-data-purpose-panel i {
    color: #c2410c;
}

.my-times-purpose-panel strong,
.my-times-purpose-panel span,
.schedule-data-purpose-panel strong,
.schedule-data-purpose-panel span {
    display: block;
}

.my-times-purpose-panel strong,
.schedule-data-purpose-panel strong {
    color: #0f172a;
    font-weight: 900;
}

.my-times-purpose-panel span,
.schedule-data-purpose-panel span {
    color: #64748b;
    font-size: .88rem;
    font-weight: 700;
}

.my-times-bulk-bar,
.schedule-collection-bulk-bar {
    align-items: center;
    background: rgba(255,255,255,.96);
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px;
}

.my-times-bulk-bar span,
.schedule-collection-bulk-bar span {
    color: #64748b;
    display: block;
    font-size: .84rem;
    font-weight: 700;
}

.schedule-curriculum-selector {
    position: relative;
}

.schedule-curriculum-help {
    color: #475569;
    font-size: .86rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.schedule-curriculum-field {
    align-items: center;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #0f172a;
    display: flex;
    font-weight: 850;
    justify-content: space-between;
    min-height: 42px;
    padding: 9px 12px;
    text-align: start;
    width: 100%;
}

.schedule-curriculum-field:focus,
.schedule-curriculum-field:hover {
    border-color: #60a5fa;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12);
}

.schedule-curriculum-panel {
    background: #f8fafc;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .18);
    left: 0;
    max-height: 420px;
    overflow-y: auto;
    padding: 12px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: 100%;
    z-index: 1070;
}

.schedule-curriculum-help span {
    display: block;
    margin-top: 2px;
}

.schedule-curriculum-accordion {
    display: grid;
    gap: 8px;
}

.schedule-curriculum-group {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.schedule-curriculum-group.is-open {
    border-color: #93c5fd;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
}

.schedule-curriculum-category {
    align-items: center;
    background: linear-gradient(135deg, #ffffff, #eff6ff);
    border: 0;
    color: #0f172a;
    display: flex;
    font-weight: 900;
    justify-content: space-between;
    min-height: 44px;
    padding: 10px 12px;
    text-align: start;
    width: 100%;
}

.schedule-curriculum-category i {
    color: #2563eb;
    transition: transform .15s ease;
}

.schedule-curriculum-group.is-open .schedule-curriculum-category i {
    transform: rotate(180deg);
}

.schedule-curriculum-subjects {
    border-top: 1px solid #e2e8f0;
    display: grid;
    gap: 0;
    padding: 6px;
}

.schedule-curriculum-subject {
    background: #fff;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #0f172a;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.2;
    min-height: 42px;
    padding: 10px 12px;
    text-align: start;
    width: 100%;
}

.schedule-curriculum-subject:last-child {
    border-bottom: 0;
}

.schedule-curriculum-subject:hover,
.schedule-curriculum-subject:focus {
    background: #eff6ff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .12);
}

.schedule-curriculum-subject.is-selected {
    background: #0f766e;
    color: #fff;
}

.schedule-curriculum-level-wrap {
    position: relative;
}

.schedule-curriculum-level-menu {
    background: #fff;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .18);
    left: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    position: absolute;
    right: 0;
    top: 68px;
    width: 100%;
    z-index: 1060;
}

.schedule-curriculum-level-option {
    background: #fff;
    border: 0;
    border-radius: 6px;
    color: #0f172a;
    display: block;
    font-size: .88rem;
    font-weight: 800;
    min-height: 38px;
    padding: 9px 10px;
    text-align: start;
    width: 100%;
}

.schedule-curriculum-level-option:hover,
.schedule-curriculum-level-option:focus {
    background: #eff6ff;
    color: #1d4ed8;
}

.schedule-collection-weekday-picks {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.schedule-collection-weekday-picks label {
    cursor: pointer;
    margin: 0;
}

.schedule-collection-weekday-picks input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.schedule-collection-weekday-picks span {
    align-items: center;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #0f172a;
    display: flex;
    font-size: .78rem;
    font-weight: 850;
    justify-content: center;
    min-height: 36px;
    padding: 6px 4px;
}

.schedule-collection-weekday-picks input:checked + span {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.schedule-collection-weekday-picks input:focus + span {
    box-shadow: 0 0 0 .18rem rgba(13, 110, 253, .16);
}

@media (max-width: 767.98px) {
    .schedule-curriculum-panel {
        max-height: 70vh;
    }
    .schedule-curriculum-level-menu {
        max-height: 320px;
        top: 68px;
    }
    .schedule-curriculum-subject,
    .schedule-curriculum-level-option {
        min-height: 44px;
    }
    .schedule-collection-weekday-picks {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.schedule-my-times-table tr.is-selected,
.schedule-collection-queue-card.is-selected,
.schedule-collection-table-wrap tr.is-selected {
    outline: 2px solid rgba(37, 99, 235, .28);
    background: #f8fbff;
}

.duration-preset {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #334155;
    font-size: .82rem;
    font-weight: 850;
    min-height: 34px;
    min-width: 46px;
    padding: 5px 10px;
}

.duration-preset.is-active,
.duration-preset:hover,
.duration-preset:focus {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.duration-custom {
    align-items: center;
    display: inline-flex;
    gap: 5px;
}

.duration-custom span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 800;
}

.duration-custom input {
    width: 92px;
}

.schedule-repeat-day-grid {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.notification-summary-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.notification-summary-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #0f172a;
    display: flex;
    justify-content: space-between;
    min-height: 54px;
    padding: 10px 12px;
    text-decoration: none;
}

.notification-summary-card.is-active,
.notification-summary-card:hover,
.notification-summary-card:focus {
    background: #eef2ff;
    border-color: #c7d2fe;
}

.notification-summary-card span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 850;
}

.notification-summary-card strong {
    font-size: 1rem;
    font-weight: 950;
}

.dashboard-utc-offset {
    align-self: flex-start;
    background: rgba(15, 23, 42, .05);
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 999px;
    color: #64748b;
    display: inline-flex;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.1;
    margin-top: auto;
    padding: 3px 7px;
}

.timezone-card-neutral {
    background: linear-gradient(135deg, #fff, #f8fafc);
    border-color: rgba(59, 130, 246, .18);
}

.timezone-card-theme-1 {
    background: linear-gradient(135deg, rgba(219,234,254,.96), rgba(255,255,255,.9));
    border-color: rgba(59,130,246,.32);
}

.timezone-card-theme-2 {
    background: linear-gradient(135deg, rgba(237,233,254,.96), rgba(255,255,255,.9));
    border-color: rgba(139,92,246,.32);
}

.timezone-card-theme-3 {
    background: linear-gradient(135deg, rgba(204,251,241,.96), rgba(255,255,255,.9));
    border-color: rgba(20,184,166,.32);
}

.timezone-card-theme-4 {
    background: linear-gradient(135deg, rgba(255,237,213,.96), rgba(255,255,255,.9));
    border-color: rgba(249,115,22,.32);
}

.timezone-card-theme-5 {
    background: linear-gradient(135deg, rgba(252,231,243,.96), rgba(255,255,255,.9));
    border-color: rgba(236,72,153,.32);
}

.timezone-card-theme-6 {
    background: linear-gradient(135deg, rgba(224,231,255,.96), rgba(255,255,255,.9));
    border-color: rgba(99,102,241,.32);
}

.timezone-card .small {
    color: var(--muted);
    font-weight: 700;
}

.timezone-card strong,
.timezone-card span {
    display: block;
}

.timezone-card strong {
    font-size: 14px;
    margin-top: 8px;
    overflow-wrap: anywhere;
}

.portal-hero-card {
    align-items: center;
    background: linear-gradient(135deg, rgba(20, 184, 166, .12), rgba(59, 130, 246, .1)), var(--card);
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .07);
    display: flex;
    justify-content: space-between;
    padding: 18px 20px;
}

.timezone-card .timezone-card-time {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    margin-top: 6px;
}

.timezone-card .timezone-card-date {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    margin-top: 0;
}

.timezone-card em {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.dashboard-task {
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 10px;
    padding: 10px 0;
}

.dashboard-task:last-child {
    border-bottom: 0;
}

.communication-thread-list {
    display: grid;
    gap: 10px;
}

.communication-thread-card {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .28);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
    padding: 14px;
}

.communication-thread-card.is-active {
    border-color: rgba(37, 99, 235, .45);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .10);
}

.communication-participants {
    align-items: center;
    color: #334155;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .88rem;
}

.communication-role-badge {
    border-radius: 999px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 5px 7px;
}

.communication-role-student { background: #dcfce7; color: #166534; }
.communication-role-parent { background: #dbeafe; color: #1d4ed8; }
.communication-role-teacher { background: #ccfbf1; color: #0f766e; }
.communication-role-supervisor { background: #ede9fe; color: #6d28d9; }
.communication-role-admin { background: #f1f5f9; color: #334155; }
.communication-role-user { background: #f8fafc; color: #475569; }

[data-learning-hub-course-grid] > [class*="col-"] {
    display: flex;
}

[data-learning-hub-course-card] .panel {
    border: 1px solid rgba(148, 163, 184, .28);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

[data-learning-hub-course-card] .panel .d-flex.flex-wrap {
    margin-top: auto;
}

.settings-jump.my-settings-tabs a.active {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.dashboard-task i {
    color: #0f766e;
    font-size: 18px;
    margin-top: 2px;
}

.dashboard-task strong,
.dashboard-task span {
    display: block;
}

.dashboard-task span {
    color: #64748b;
    font-size: 12px;
}

.prayer-time-pill {
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 76px;
    overflow: hidden;
    padding: 10px 11px;
    position: relative;
}

.prayer-time-pill.is-next {
    border-color: rgba(14, 116, 144, .46);
    box-shadow: 0 12px 28px rgba(14, 116, 144, .12);
    transform: translateY(-1px);
}

.prayer-time-pill strong,
.prayer-time-pill span {
    display: block;
}

.prayer-time-pill strong {
    color: #475569;
    font-size: 12px;
    line-height: 1.15;
}

.prayer-time-pill span {
    color: var(--ink);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
    margin-top: auto;
}

.prayer-next-badge {
    align-items: center;
    background: #0e7490;
    border-radius: 999px;
    color: #fff;
    display: none;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    padding: 4px 7px;
    position: absolute;
    right: 8px;
    text-transform: uppercase;
    top: 8px;
}

.prayer-time-pill.is-next .prayer-next-badge {
    display: inline-flex;
}

.prayer-tone-1 {
    background: linear-gradient(135deg, #ecfeff, #f8fafc);
}

.prayer-tone-2 {
    background: linear-gradient(135deg, #fff7ed, #f8fafc);
}

.prayer-tone-3 {
    background: linear-gradient(135deg, #f0fdf4, #f8fafc);
}

.prayer-tone-4 {
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
}

.prayer-tone-5 {
    background: linear-gradient(135deg, #fdf2f8, #f8fafc);
}

.prayer-tone-6 {
    background: linear-gradient(135deg, #f5f3ff, #f8fafc);
}

.mini-timezone-card {
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 8px;
    padding: 8px 10px;
}

.mini-timezone-card.is-main {
    background: #ecfeff;
    border-color: #67e8f9;
}

.mini-timezone-card strong,
.mini-timezone-card span {
    display: block;
}

.mini-timezone-card strong {
    color: #334155;
    font-size: 11px;
}

.mini-timezone-card span {
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
}

.dashboard-time-converter {
    overflow: hidden;
}

.dashboard-world-clock-list,
.dashboard-converter-results,
.dashboard-timezone-selects {
    display: grid;
    gap: 8px;
}

.dashboard-world-clock-list {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.dashboard-world-clock-list[data-zone-count="1"] {
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-world-clock-list[data-zone-count="3"],
.dashboard-world-clock-list[data-zone-count="5"] {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.dashboard-clock-editor {
    border-top: 1px solid var(--line);
    padding-top: 8px;
}

.dashboard-clock-editor > summary {
    align-items: center;
    color: #0f766e;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    gap: 6px;
    list-style: none;
}

.dashboard-clock-editor > summary::-webkit-details-marker {
    display: none;
}

.dashboard-clock-editor > summary::after {
    content: "+";
    font-weight: 900;
}

.dashboard-clock-editor[open] > summary::after {
    content: "-";
}

.dashboard-timezone-selects,
.dashboard-converter-results {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.dashboard-time-converter .mini-timezone-card,
.dashboard-timezone-select-row,
.dashboard-converter-results > div {
    min-width: 0;
}

.dashboard-time-converter .mini-timezone-card {
    position: relative;
}

.dashboard-time-converter .mini-timezone-card strong,
.dashboard-time-converter .mini-timezone-card span,
.dashboard-converter-results strong,
.dashboard-converter-results span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-timezone-remove {
    font-size: 12px;
    min-height: 30px;
    padding: 2px 0 0;
    text-decoration: none;
}

@media (max-width: 1199.98px) {
    .dashboard-clock-grid[data-clock-count],
    .dashboard-saved-clock-grid[data-zone-count] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-clock-grid[data-clock-count="1"],
    .dashboard-saved-clock-grid[data-zone-count="1"] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .dashboard-clock-family-mobile-hidden,
    .dashboard-prayer-family-mobile-hidden {
        display: none;
    }

    .dashboard-clock-grid,
    .dashboard-clock-grid[data-clock-count],
    .dashboard-saved-clock-grid,
    .dashboard-saved-clock-grid[data-zone-count],
    .dashboard-world-clock-list,
    .dashboard-world-clock-list[data-zone-count] {
        grid-template-columns: 1fr;
    }

    .today-time-clock {
        font-size: 30px;
    }

    .dashboard-clock-card {
        min-height: 126px;
    }

    .dashboard-clock-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-clock-action,
    .dashboard-clock-action .btn {
        width: 100%;
    }
}

.dashboard-converter-box {
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.dashboard-converter-results > div {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    grid-template-columns: minmax(0, 1fr);
    padding: 8px 10px;
}

.dashboard-converter-results strong,
.dashboard-converter-results span {
    display: block;
}

.dashboard-converter-results span {
    color: var(--muted);
    font-size: 12px;
}

.dashboard-time-converter[data-timezone-message]::after {
    color: #b45309;
    content: attr(data-timezone-message);
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-top: 8px;
}

@media (max-width: 575.98px) {
    .dashboard-world-clock-list {
        grid-template-columns: 1fr;
    }
}

.category-palette-preview {
    border-radius: 8px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
}

.availability-card {
    background: #fff;
    border: 1px solid rgba(20, 184, 166, .25);
    border-left: 5px solid #14b8a6;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
    min-height: 150px;
    padding: 16px;
}

.availability-card.is-busy {
    border-left-color: #f97316;
}

@media (max-width: 1199.98px) {
    .schedule-board {
        grid-template-columns: 52px minmax(980px, 1fr);
    }

    .schedule-week-grid {
        grid-template-columns: repeat(7, minmax(140px, 1fr));
    }

    .schedule-event-title {
        font-size: 13px;
    }
}

@media (max-width: 767.98px) {
    .schedule-toolbar {
        align-items: start;
        display: grid;
        gap: 6px;
        grid-template-columns: minmax(0, 1fr) auto;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    .schedule-board {
        grid-template-columns: 46px minmax(840px, 1fr);
        margin-left: -4px;
        margin-right: -4px;
        padding-left: 4px;
        padding-right: 4px;
        scroll-snap-type: x proximity;
    }

    .schedule-time-rail {
        font-size: 10px;
    }

    .schedule-time-spacer {
        height: 54px;
    }

    .schedule-day {
        scroll-snap-align: start;
    }

    .schedule-day-header {
        min-height: 54px;
        padding: 9px;
    }

    .schedule-day-header strong {
        font-size: 15px;
    }

    .schedule-day-header small {
        font-size: 11px;
    }

    .schedule-mobile-hint {
        display: inline-flex;
    }

    .schedule-detail-session-head,
    .schedule-detail-grid {
        display: block;
    }

    .schedule-detail-grid div {
        margin-top: 8px;
    }

    .schedule-detail-session-head .schedule-event-chip {
        margin-top: 10px;
    }

    .payroll-hero {
        align-items: flex-start;
        display: block;
    }

    .payroll-hero-actions {
        justify-content: flex-start;
        margin-top: 14px;
    }

    .payroll-session-list > div {
        display: block;
    }

    .payroll-session-list span {
        display: block;
        margin-top: 4px;
    }
}

.login-page {
    align-items: center;
    background: linear-gradient(135deg, #0f172a, #14532d);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 100vw;
    overflow-x: hidden;
    padding: 24px;
    width: 100%;
}

body.login-page {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.login-page .floating-widgets {
    display: none;
}

.login-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .34);
    margin: auto;
    max-width: 480px;
    min-width: 0;
    padding: 32px;
    flex: 0 1 480px;
    width: 100%;
}

.login-card *,
.login-card *::before,
.login-card *::after {
    box-sizing: border-box;
}

.login-card form,
.login-card .d-grid {
    width: 100%;
}

.login-card .mb-2 {
    margin-bottom: .5rem;
}

.login-card .mb-3 {
    margin-bottom: 1rem;
}

.login-card .mb-4 {
    margin-bottom: 1.5rem;
}

.login-card .mt-2 {
    margin-top: .5rem;
}

.login-card .mt-3 {
    margin-top: 1rem;
}

.login-card .w-100 {
    width: 100% !important;
}

.login-card .d-none,
.login-card .auth-honeypot {
    display: none !important;
}

.login-card .form-label {
    color: #0f172a;
    display: inline-block;
    font-size: .94rem;
    font-weight: 700;
    margin-bottom: .38rem;
}

.login-card .form-text {
    color: #64748b;
    font-size: .84rem;
    line-height: 1.35;
    margin-top: .35rem;
}

.login-card .form-control,
.login-card .form-select {
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #0f172a;
    display: block;
    font-size: 16px;
    line-height: 1.45;
    max-width: 100%;
    min-height: 46px;
    padding: .68rem .82rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    width: 100%;
}

.login-card .form-control:focus,
.login-card .form-select:focus {
    background-color: #fff;
    border-color: #0f766e;
    box-shadow: 0 0 0 .2rem rgba(15, 118, 110, .18);
    outline: 0;
}

.login-card .form-control::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.login-card .auth-password-field {
    align-items: stretch;
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.login-card .auth-password-field .form-control {
    border-end-end-radius: 0;
    border-start-end-radius: 0;
    flex: 1 1 auto;
    min-width: 0;
    width: 1%;
}

.login-card .auth-password-toggle {
    border-end-start-radius: 0;
    border-start-start-radius: 0;
    flex: 0 0 46px;
    margin-inline-start: -1px;
    max-width: 46px;
    min-width: 46px;
    padding-left: 0;
    padding-right: 0;
    width: 46px !important;
}

.login-card .auth-phone-code {
    flex: 0 0 102px;
    max-width: 102px;
    min-width: 102px;
    width: 102px !important;
}

.login-card .auth-phone-input-group {
    align-items: stretch;
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.login-card .auth-phone-input-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
    width: 1%;
}

.auth-result-screen {
    padding: .35rem 0 .1rem;
}

.auth-status-pill {
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    color: #115e59;
    display: inline-flex;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.2;
    padding: .55rem .85rem;
}

.login-card .form-select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #64748b 50%),
        linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
    padding-right: 2.4rem;
}

[dir="rtl"] .login-card .form-select {
    background-position:
        18px calc(50% - 2px),
        12px calc(50% - 2px);
    padding-left: 2.4rem;
    padding-right: .82rem;
}

.login-card .btn,
.login-card button {
    -webkit-appearance: none;
    appearance: none;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 700;
    gap: .45rem;
    justify-content: center;
    line-height: 1.35;
    max-width: 100%;
    min-height: 46px;
    padding: .68rem 1rem;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
    vertical-align: middle;
}

.login-card .btn:focus-visible,
.login-card button:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(15, 118, 110, .24);
    outline: 0;
}

.login-card .btn-success {
    background: #15803d;
    border: 1px solid #15803d;
    color: #fff;
}

.login-card .btn-success:hover,
.login-card .btn-success:focus {
    background: #166534;
    border-color: #166534;
    color: #fff;
}

.login-card .btn-outline-primary,
.login-card .btn-outline-secondary {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #0f766e;
}

.login-card .btn-outline-secondary {
    color: #334155;
}

.login-card .btn-outline-primary:hover,
.login-card .btn-outline-primary:focus,
.login-card .btn-outline-secondary:hover,
.login-card .btn-outline-secondary:focus {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.login-card .btn-link {
    background: transparent;
    border: 0;
    color: #0f766e;
    min-height: 40px;
    padding-left: .4rem;
    padding-right: .4rem;
}

.login-card .btn-link:hover,
.login-card .btn-link:focus {
    color: #14532d;
    text-decoration: underline;
}

.login-card .form-check {
    align-items: start;
    display: grid;
    grid-template-columns: 1.05rem minmax(0, 1fr);
    column-gap: .55rem;
    row-gap: .15rem;
    margin-bottom: .85rem;
    min-width: 0;
    padding-left: 0;
}

.login-card .form-check-input {
    -webkit-appearance: auto;
    appearance: auto;
    border: 1px solid #94a3b8;
    grid-column: 1;
    height: 1.05rem;
    justify-self: center;
    margin: .18rem 0 0;
    width: 1.05rem;
}

.login-card .form-check-label {
    color: #1f2937;
    grid-column: 2;
    line-height: 1.4;
    min-width: 0;
}

.login-card .form-check .form-text {
    grid-column: 2;
    margin: 0;
    max-width: 100%;
}

.auth-secondary-actions {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: 1.15rem;
    width: 100%;
}

.auth-secondary-actions .btn {
    min-width: 0;
    width: 100%;
}

.auth-action-forgot {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: .12rem;
    width: auto !important;
}

.login-card .auth-action-forgot.btn-link {
    min-height: 38px;
    padding-bottom: .3rem;
    padding-top: .3rem;
}

.auth-card-footer {
    align-items: center;
    border-top: 1px solid rgba(148, 163, 184, .22);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
    margin-top: 14px;
    padding-top: 12px;
}

.payment-confirmations-table {
    font-size: .86rem;
}

.payment-confirmations-table > :not(caption) > * > * {
    padding-bottom: .42rem;
    padding-top: .42rem;
    vertical-align: top;
}

.payment-confirmation-status-cell {
    min-width: 132px;
}

.payment-status-stack {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.payment-confirmations-table .btn-sm {
    margin-bottom: 3px;
    white-space: nowrap;
}

.auth-footer-language {
    align-items: center;
    display: flex;
    min-width: 0;
}

.auth-footer-language .auth-language-switcher {
    justify-content: flex-start;
    width: 100%;
}

.auth-footer-teach-link {
    align-items: center;
    align-self: stretch;
    border-left: 1px solid rgba(148, 163, 184, .24);
    color: #0f766e;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 800;
    justify-content: center;
    min-height: 34px;
    padding: 4px 0 4px 12px;
    text-decoration: none;
    white-space: nowrap;
}

.auth-footer-teach-link:hover,
.auth-footer-teach-link:focus {
    color: #0f5132;
    text-decoration: underline;
}

[dir="rtl"] .auth-footer-teach-link {
    border-left: 0;
    border-right: 1px solid rgba(148, 163, 184, .24);
    padding-left: 0;
    padding-right: 12px;
}

.login-card .captcha-widget,
.login-card .cf-turnstile,
.login-card .g-recaptcha {
    box-sizing: border-box;
    max-width: 100%;
}

.login-card .captcha-widget {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: .45rem;
    margin-bottom: 1rem;
    overflow: hidden;
    padding: .65rem;
}

.login-card .cf-turnstile,
.login-card .g-recaptcha {
    min-height: 65px;
    overflow-x: auto;
    overflow-y: hidden;
}

.login-card .captcha-widget .form-text {
    color: #64748b;
    font-size: .78rem;
    margin: 0;
}

.btn-google {
    align-items: center;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 8px;
    color: #3c4043;
    display: inline-flex;
    font-weight: 600;
    gap: 10px;
    justify-content: center;
    min-height: 46px;
    max-width: 100%;
    width: 100%;
}

.btn-google:hover,
.btn-google:focus {
    background: #f8fafd;
    border-color: #d2d5da;
    color: #202124;
}

.google-g-mark {
    align-items: center;
    display: inline-flex;
    flex: 0 0 18px;
    height: 18px;
    justify-content: center;
    width: 18px;
}

.google-g-mark svg {
    display: block;
    height: 18px;
    width: 18px;
}

.portal-item-card {
    background: linear-gradient(135deg, #fff, rgba(240,253,250,.75));
    border-top: 4px solid #14b8a6;
    min-height: 190px;
}

.portal-item-note {
    border-top-color: #8b5cf6;
}

.portal-item-link {
    border-top-color: #3b82f6;
}

.portal-item-contact {
    border-top-color: #22c55e;
}

.portal-item-todo {
    border-top-color: #f97316;
}

.portal-tool-hero {
    background: linear-gradient(135deg, rgba(20, 184, 166, .10), rgba(59, 130, 246, .08)), var(--card);
}

.portal-tool-icon {
    align-items: center;
    background: rgba(20, 184, 166, .14);
    border-radius: 8px;
    color: #0f766e;
    display: inline-flex;
    font-size: 26px;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.portal-item-card h3 {
    color: #0f172a;
}

.portal-item-card a {
    overflow-wrap: anywhere;
}

.portal-item-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 38px;
    overflow: hidden;
}

.todo-due-stack {
    background: rgba(15,23,42,.04);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
    padding: 6px 8px;
}

.todo-due-stack strong {
    font-size: 12px;
}

.todo-due-stack span {
    color: var(--muted);
    font-size: 12px;
}

.portal-compact-table td,
.portal-compact-table th {
    vertical-align: middle;
}

.portal-directory-list {
    display: grid;
    gap: 8px;
}

.portal-directory-row {
    align-items: center;
    background: rgba(248, 250, 252, .84);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 12px;
}

.portal-directory-row span {
    color: var(--muted);
    display: block;
    font-size: 12px;
    max-width: 680px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.formatted-content a,
.portal-item-excerpt a {
    word-break: break-word;
}

.formatted-content h3,
.formatted-content h4,
.portal-item-excerpt h3,
.portal-item-excerpt h4 {
    font-size: 1rem;
    margin: .4rem 0;
}

.dashboard-filter {
    background: rgba(15, 23, 42, .03);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
}

.availability-week-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    overflow-x: auto;
}

.availability-week-day {
    background: rgba(240, 253, 250, .7);
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 160px;
    padding: 10px;
}

.availability-week-day h3 {
    font-size: 13px;
    font-weight: 800;
    margin: 0 0 8px;
}

.availability-mini {
    background: #fff;
    border-left: 4px solid #14b8a6;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
    display: grid;
    gap: 2px;
    margin-bottom: 8px;
    padding: 8px;
}

.availability-mini.is-busy {
    border-left-color: #f97316;
}

.availability-mini span {
    color: var(--muted);
    font-size: 12px;
}

.help-start-card {
    background: linear-gradient(135deg, rgba(14, 165, 233, .12), rgba(168, 85, 247, .12));
}

.portal-mini-link {
    align-items: center;
    background: color-mix(in srgb, var(--brand) 7%, var(--card));
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    display: flex;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    text-decoration: none;
}

.portal-mini-link:hover {
    border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
    color: var(--brand);
}

.formatted-content > :last-child {
    margin-bottom: 0;
}

.policy-card .policy-body {
    max-height: 260px;
    overflow: auto;
}

.policy-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.policy-toc a {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 999px;
    color: #0f766e;
    display: inline-flex;
    font-size: .86rem;
    font-weight: 800;
    gap: 6px;
    padding: 8px 11px;
    text-decoration: none;
}

.policy-toc a:hover,
.policy-toc a:focus {
    background: #ecfeff;
    color: #0f766e;
}

.academy-policy-card {
    scroll-margin-top: 92px;
}

.policy-featured-card {
    background:
        linear-gradient(135deg, rgba(240, 253, 250, .92), rgba(255, 255, 255, .98) 42%, rgba(239, 246, 255, .62)),
        #fff;
    border: 1px solid rgba(20, 184, 166, .24);
    border-left: 5px solid #0f766e;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
}

.policy-featured-card .policy-card-head {
    border-bottom: 1px solid rgba(148, 163, 184, .22);
    margin-bottom: 10px !important;
    padding-bottom: 10px;
}

.policy-card-head {
    flex-wrap: wrap;
}

.policy-card-tools {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.policy-language-switcher label {
    align-items: center;
    display: flex;
    gap: 6px;
}

.policy-language-switcher span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    white-space: nowrap;
}

.policy-language-switcher select {
    min-width: 118px;
}

.policy-language-note {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    padding: 8px 10px;
}

.policy-ref {
    align-items: center;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    border-radius: 999px;
    color: #0369a1;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 900;
    margin-inline-end: 6px;
    padding: 2px 7px;
    vertical-align: middle;
}

.policy-section-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.policy-section-chips span {
    background: #f1f5f9;
    border-radius: 999px;
    color: #334155;
    font-size: .78rem;
    font-weight: 900;
    padding: 5px 8px;
}

.academy-policy-card .policy-body {
    border-top: 1px solid rgba(148, 163, 184, .2);
    line-height: 1.55;
    margin-top: 10px;
    max-height: 420px;
    padding-top: 8px;
}

.academy-policy-card .policy-body p {
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(226, 232, 240, .72);
    border-radius: 8px;
    margin-bottom: 7px;
    padding: 8px 9px;
}

.academy-policy-card .policy-body h3 {
    align-items: center;
    background: #f0fdfa;
    border-left: 4px solid #0f766e;
    border-radius: 8px;
    color: #0f766e;
    display: flex;
    font-size: .96rem;
    margin: 12px 0 7px;
    padding: 7px 9px;
}

.academy-policy-card .policy-body h4 {
    color: #334155;
    font-size: .9rem;
    font-weight: 800;
    margin-top: 10px;
}

.policy-role-badge {
    align-items: center;
    background: #eef2ff;
    border-radius: 999px;
    color: #3730a3;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 900;
    gap: 5px;
    margin-inline-end: 5px;
    padding: 5px 8px;
}

.policy-ack-box {
    align-items: center;
    background: rgba(240, 253, 244, .86);
    border: 1px solid rgba(187, 247, 208, .9);
    border-radius: 8px;
    color: #166534;
    display: flex;
    gap: 8px;
    padding: 9px 10px;
}

html[dir="rtl"] .academy-policy-card .policy-body h3 {
    border-left: 0;
    border-right: 4px solid #0f766e;
}

html[dir="rtl"] .policy-featured-card {
    border-left: 1px solid var(--line);
    border-right: 5px solid #0f766e;
}

@media (max-width: 767.98px) {
    .policy-toc {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .policy-toc a {
        flex: 0 0 auto;
    }

    .academy-policy-card .policy-body {
        max-height: none;
    }

    .policy-featured-card {
        border-left-width: 4px;
        box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
    }

    .academy-policy-card {
        padding: 12px;
    }

    .academy-policy-card .policy-body p {
        padding: 7px 8px;
    }

    .policy-card-tools {
        align-items: stretch;
        width: 100%;
    }

    .policy-language-switcher label {
        justify-content: space-between;
    }
}

.getting-started-widget {
    background: linear-gradient(135deg, rgba(253, 186, 116, .16), rgba(94, 234, 212, .12));
}

@media (max-width: 991.98px) {
    .sidebar {
        box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
        padding-top: max(18px, env(safe-area-inset-top, 0px));
        transform: translateX(-100%);
        transition: transform .2s ease;
        z-index: 1060;
    }
    .sidebar .brand {
        padding-right: 48px;
    }
    html[dir="rtl"] .sidebar .brand {
        padding-left: 48px;
        padding-right: 10px;
    }
    .sidebar-close {
        display: inline-flex;
    }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    html[dir="rtl"] .sidebar { transform: translateX(100%); }
    html[dir="rtl"] .sidebar.open { transform: translateX(0); }
    html[dir="rtl"] .main { margin-right: 0; }
    .topbar { padding-left: 64px; }
    .content { padding: 18px 18px 78px; }
    .settings-shell { display: block; }
    .settings-nav-panel { position: static; }
    .settings-jump .settings-nav-group { display: none; }
    .settings-mobile-select { display: block; }
    .schedule-viewer-card {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Settings navigation final recovery: vertical accordion only. */
.settings-shell.settings-mode-vertical {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(250px, 304px) minmax(0, 1fr);
    max-width: 100%;
    overflow-x: clip;
}

.settings-shell.settings-mode-vertical.settings-menu-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);
}

.settings-mode-vertical .settings-nav-panel {
    align-self: start;
    border-radius: 8px;
    max-height: calc(100vh - 20px);
    overflow: hidden;
    top: 10px;
}

.settings-mode-vertical .settings-nav-toolbar {
    align-items: stretch;
    flex-direction: column;
}

.settings-mode-vertical .settings-current {
    margin: 0;
}

.settings-mode-vertical .settings-nav-tools {
    align-items: stretch;
    flex-direction: column;
}

.settings-mode-vertical .settings-nav-tools .form-control {
    min-width: 0;
    width: 100%;
}

.settings-mode-vertical .settings-horizontal-nav {
    display: none !important;
}

.settings-mode-vertical .settings-side-nav {
    display: grid !important;
    gap: 8px;
}

.settings-mode-vertical .settings-jump {
    max-height: calc(100vh - 154px);
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 2px;
}

.settings-mode-vertical .settings-nav-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    min-width: 0;
    overflow: hidden;
}

.settings-mode-vertical .settings-nav-group summary {
    align-items: center;
    background: color-mix(in srgb, var(--brand) 5%, var(--card));
    color: var(--ink);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 800;
    justify-content: space-between;
    list-style: none;
    padding: 10px 11px;
    text-transform: none;
}

.settings-mode-vertical .settings-nav-group summary > span {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    min-width: 0;
}

.settings-mode-vertical .settings-nav-group summary i:first-child {
    color: var(--brand-2);
    flex: 0 0 auto;
    font-size: 1rem;
}

.settings-mode-vertical .settings-nav-group[open] summary,
.settings-mode-vertical .settings-nav-group.is-active summary {
    background: color-mix(in srgb, var(--brand) 12%, var(--card));
    border-bottom: 1px solid var(--line);
}

.settings-mode-vertical .settings-nav-chevron {
    transition: transform .16s ease;
}

.settings-mode-vertical .settings-nav-group[open] .settings-nav-chevron {
    transform: rotate(180deg);
}

.settings-mode-vertical .settings-nav-group-links {
    display: grid;
    gap: 5px;
    padding: 8px;
}

.settings-mode-vertical .settings-side-nav a {
    border-radius: 7px;
    display: flex;
    font-size: 13px;
    padding: 8px 10px;
    width: 100%;
}

.settings-mode-vertical .settings-side-nav a.is-active {
    background: color-mix(in srgb, var(--brand) 14%, var(--card));
    border-color: color-mix(in srgb, var(--brand) 50%, var(--line));
    color: var(--brand-2);
}

.settings-mode-vertical .settings-nav-collapsed .settings-current,
.settings-mode-vertical .settings-nav-collapsed [data-settings-search],
.settings-mode-vertical .settings-nav-collapsed .settings-nav-label,
.settings-mode-vertical .settings-nav-collapsed .settings-nav-chevron,
.settings-mode-vertical .settings-nav-collapsed .settings-nav-group-links,
.settings-mode-vertical .settings-nav-collapsed .settings-mobile-select {
    display: none !important;
}

.settings-mode-vertical .settings-nav-collapsed .settings-nav-tools {
    align-items: center;
}

.settings-mode-vertical .settings-nav-collapsed [data-settings-nav-toggle] {
    padding-inline: 0;
    width: 42px;
}

.settings-mode-vertical .settings-nav-collapsed [data-settings-nav-toggle] span {
    display: none;
}

.settings-mode-vertical .settings-nav-collapsed .settings-jump {
    display: block !important;
    max-height: calc(100vh - 74px);
}

.settings-mode-vertical .settings-nav-collapsed .settings-nav-group {
    border-color: transparent;
}

.settings-mode-vertical .settings-nav-collapsed .settings-nav-group summary {
    border-radius: 8px;
    justify-content: center;
    padding: 11px 0;
}

.settings-mode-vertical .settings-nav-collapsed .settings-nav-group[open] summary {
    border-bottom: 0;
}

.settings-mode-vertical .settings-content {
    min-width: 0;
    overflow-x: clip;
}

html[dir="rtl"] .settings-mode-vertical .settings-jump {
    padding-left: 2px;
    padding-right: 0;
}

@media (max-width: 991.98px) {
    .settings-shell.settings-mode-vertical,
    .settings-shell.settings-mode-vertical.settings-menu-collapsed {
        display: block;
    }

    .settings-mode-vertical .settings-nav-panel {
        border-radius: 8px;
        margin: 0 0 14px;
        max-height: none;
        position: sticky;
        top: 0;
    }

    .settings-mode-vertical .settings-jump {
        display: none;
    }

    .settings-mode-vertical .settings-mobile-select {
        display: block !important;
    }

    .settings-mode-vertical .settings-nav-collapsed .settings-mobile-select {
        display: none !important;
    }
}

.public-slot-card {
    border-radius: 8px;
    min-height: 74px;
}

.empty-state {
    background: color-mix(in srgb, var(--brand) 6%, var(--card));
    border: 1px dashed color-mix(in srgb, var(--brand) 35%, var(--line));
    border-radius: 8px;
    padding: 14px;
}

.empty-state strong {
    color: var(--ink);
    display: block;
}

.compact-public-empty {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 760px;
    padding: 16px;
    text-align: start;
}

.compact-public-empty p {
    color: var(--muted);
    margin: 4px 0 0;
}

.users-mobile-card,
.responsive-card-list {
    display: none;
}

@media (max-width: 575.98px) {
    .login-page {
        align-items: flex-start;
        overflow-x: hidden;
        padding: 20px 12px 96px;
    }

    .login-card {
        flex-basis: auto;
        margin-left: auto;
        margin-right: auto;
        max-width: 360px;
        padding: 22px;
        width: 100%;
    }

    .login-card * {
        min-width: 0;
    }

    .login-card .form-control,
    .login-card .form-select,
    .login-card .btn {
        box-sizing: border-box;
        max-width: 100%;
        width: 100%;
    }

    .login-card .auth-phone-input-group {
        flex-wrap: nowrap;
    }

    .login-card .auth-phone-input-group .auth-phone-code {
        flex: 0 0 94px;
        max-width: 94px;
        min-width: 94px;
        width: 94px !important;
    }

    .login-card .auth-phone-input-group .form-control {
        flex: 1 1 auto;
        min-width: 0;
        width: 1% !important;
    }

    .auth-secondary-actions {
        grid-template-columns: 1fr;
        gap: .65rem;
    }

    .auth-action-forgot {
        width: 100% !important;
    }

    .login-card p,
    .login-card h1 {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .btn,
    .btn-group {
        white-space: normal;
    }

    .floating-widget-btn span {
        display: none;
    }

    .floating-widget-btn {
        justify-content: center;
        min-height: 46px;
        min-width: 46px;
        padding: 10px 12px;
    }

    .role-choice-grid,
    .profile-summary-grid,
    .finance-summary-grid {
        grid-template-columns: 1fr;
    }

    .portal-tool-filter .btn,
    .settings-smart-form .btn,
    .smart-user-form .btn {
        width: 100%;
    }

    .app-notification {
        align-items: flex-start;
    }
}

.student-report-workspace {
    background: linear-gradient(135deg, #f8fbff 0%, #f6fff9 100%);
    border-color: #d8e8ff;
}

.lesson-outcome-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.lesson-outcome-option {
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    display: flex;
    gap: .55rem;
    padding: .75rem;
}

.lesson-outcome-option small {
    color: #64748b;
    display: block;
    line-height: 1.25;
}

.lesson-outcome-option:has(input:checked) {
    background: #ecfeff;
    border-color: #22d3ee;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, .12);
}

.absence-report-panel,
.communication-learning-files-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: .85rem;
}

.communication-learning-files-card {
    background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%);
}

.communication-learning-files-shortcut {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    color: #334155;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .6rem .75rem;
}

.communication-linked-materials {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: .65rem .75rem;
}

@media (max-width: 767.98px) {
    .lesson-outcome-grid {
        grid-template-columns: 1fr;
    }
}

@supports (padding: max(0px)) {
    .login-page {
        padding-top: max(24px, env(safe-area-inset-top));
        padding-right: max(24px, env(safe-area-inset-right));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
        padding-left: max(24px, env(safe-area-inset-left));
    }

    @media (max-width: 575.98px) {
        .login-page {
            padding-top: max(20px, env(safe-area-inset-top));
            padding-right: max(12px, env(safe-area-inset-right));
            padding-bottom: max(96px, env(safe-area-inset-bottom));
            padding-left: max(12px, env(safe-area-inset-left));
        }
    }
}

/* Final product polish: keep navigation and dense work surfaces usable on phones. */
.settings-jump {
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: 10px;
    flex-direction: column;
    max-height: calc(100vh - 24px);
    overflow: auto;
    padding: 8px;
}

.settings-jump a.is-active,
.settings-jump a:focus {
    background: color-mix(in srgb, var(--brand) 12%, var(--card));
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    color: var(--brand-2);
    outline: none;
}

.settings-current {
    background: color-mix(in srgb, var(--brand) 6%, var(--card));
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .45rem .6rem;
}

.settings-mobile-select {
    display: none;
}

body.sidebar-compact .sidebar {
    width: 84px;
    overflow-x: hidden;
}

body.sidebar-compact .sidebar .brand span,
body.sidebar-compact .sidebar-group summary span,
body.sidebar-compact .sidebar .nav-link span {
    display: none;
}

body.sidebar-compact .sidebar .nav-link {
    justify-content: center;
    padding-inline: 10px;
}

body.sidebar-compact .sidebar .brand {
    justify-content: center;
    min-width: 0;
    padding-inline: 10px;
}

body.sidebar-compact .sidebar .brand-logo,
body.sidebar-compact .sidebar .brand-mark {
    flex: 0 0 auto;
}

body.sidebar-compact .sidebar-mode-toggle {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: 8px;
    padding: 3px;
}

body.sidebar-compact .sidebar-mode-toggle button {
    font-size: 11px;
    line-height: 1.1;
    min-height: 28px;
    min-width: 0;
    padding-inline: 2px;
}

body.sidebar-compact .sidebar-search-wrap,
body.sidebar-compact .sidebar-full-nav {
    display: none !important;
}

body.sidebar-compact .sidebar-quick-links {
    display: grid !important;
    gap: 6px;
}

body.sidebar-compact .sidebar .nav-link i {
    margin: 0;
}

body.sidebar-compact .main {
    margin-left: 84px;
    max-width: calc(100vw - 84px);
    overflow-x: clip;
}

html[dir="rtl"] body.sidebar-compact .main {
    margin-left: 0;
    margin-right: 84px;
}

body.sidebar-hidden .sidebar {
    transform: translateX(-100%);
}

html[dir="rtl"] body.sidebar-hidden .sidebar {
    transform: translateX(100%);
}

@media (max-width: 991.98px) {
    body.sidebar-hidden .sidebar.open,
    html[dir="rtl"] body.sidebar-hidden .sidebar.open {
        transform: translateX(0);
    }
}

body.sidebar-hidden .main {
    margin-left: 0;
}

html[dir="rtl"] body.sidebar-hidden .main {
    margin-right: 0;
}

.mobile-main-nav {
    align-items: center;
    background: var(--card);
    border-top: 1px solid var(--line);
    bottom: 0;
    box-sizing: border-box;
    box-shadow: 0 -12px 26px rgba(15, 23, 42, .08);
    display: flex;
    left: 0;
    margin: 0;
    max-width: 100vw;
    overflow-x: clip;
    padding: 0 max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    position: fixed;
    right: 0;
    width: 100%;
    z-index: 1040;
}

.mobile-main-nav a,
.mobile-main-nav button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--muted);
    display: grid;
    flex: 1 1 0;
    font-size: 11px;
    gap: 2px;
    justify-items: center;
    min-height: 56px;
    min-inline-size: 0;
    min-width: 0;
    padding: 6px 4px;
    place-content: center;
    text-align: center;
    text-decoration: none;
}

.mobile-main-nav a.active,
.mobile-main-nav button:focus {
    color: var(--brand);
}

.mobile-main-nav span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    white-space: nowrap;
}

.mobile-main-nav i {
    font-size: 18px;
}

.access-permission-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.access-permission-group summary {
    align-items: center;
    background: color-mix(in srgb, var(--brand) 6%, var(--card));
    cursor: pointer;
    display: flex;
    font-weight: 800;
    justify-content: space-between;
    list-style: none;
    padding: 10px 12px;
}

.access-permission-group summary::-webkit-details-marker {
    display: none;
}

.access-permission-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    padding: 12px;
}

.access-permission-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
}

.access-permission-item.is-sensitive {
    background: #fffbeb;
    border-color: #fde68a;
}

body.permissions-show-all .access-permission-group {
    border: 0;
    margin-bottom: 0;
}

body.permissions-show-all .access-permission-group summary {
    display: none;
}

.access-preview-list {
    display: grid;
    gap: 8px;
    max-height: 520px;
    overflow: auto;
}

.access-preview-row {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 2px;
    padding: 8px;
}

.access-preview-row span,
.access-preview-row small {
    color: var(--muted);
}

[id^="settings-"],
[id^="my-"] {
    scroll-margin-top: 86px;
}

.settings-jump + .panel {
    position: relative;
    z-index: 1;
}

.receipt-print {
    max-width: 860px;
    margin-inline: auto;
}

@media print {
    .no-print,
    .sidebar,
    .topbar {
        display: none !important;
    }
    .main {
        margin: 0 !important;
        padding: 0 !important;
    }
    .receipt-print {
        border: 0 !important;
        box-shadow: none !important;
        max-width: none;
    }
}

.schedule-stat-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.schedule-stat-card,
.schedule-stat-note {
    background: color-mix(in srgb, var(--brand) 7%, var(--card));
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    min-height: 76px;
    padding: 12px;
    text-decoration: none;
}

.schedule-stat-card {
    display: grid;
    gap: 4px;
    grid-template-columns: auto 1fr;
}

.schedule-stat-card i {
    color: var(--brand);
    font-size: 18px;
    grid-row: span 2;
}

.schedule-stat-card span,
.schedule-stat-note span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.schedule-stat-card strong,
.schedule-stat-note strong {
    display: block;
    font-size: 18px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Money Operations compact summary cards (finance_daily_hub).
   Self-contained layout so multi-currency amounts never wrap per character. */
.finance-summary-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: color-mix(in srgb, var(--brand) 6%, var(--card));
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    min-height: 84px;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.finance-summary-card:hover {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    transform: translateY(-1px);
}

.finance-summary-card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.finance-summary-card-icon i {
    font-size: 18px;
    color: var(--brand);
    line-height: 1;
}

.finance-summary-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.finance-summary-card-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted);
}

.finance-summary-card-value {
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: normal;
    word-break: keep-all;
}

@media (max-width: 575.98px) {
    .finance-summary-card {
        min-height: 72px;
        padding: 10px 12px;
    }
    .finance-summary-card-value {
        font-size: 16px;
    }
}

/* Compact people-list email cells: truncate long addresses, click to copy. */
.cell-truncate-email {
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    cursor: pointer;
    border-bottom: 1px dotted var(--line);
}

.cell-truncate-email:hover {
    color: var(--brand);
}

.schedule-event {
    min-height: 0;
}

.schedule-event-title,
.schedule-event-time,
.schedule-event-chip {
    min-width: 0;
}

.schedule-board {
    scrollbar-width: thin;
}

.schedule-day-grid {
    background-size: auto auto;
}

.modal-dialog-scrollable .modal-body {
    overflow-x: hidden;
}

.panel .table,
.table-responsive .table {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    body {
        overflow-x: hidden;
    }

    .topbar {
        align-items: center;
        flex-direction: row;
        gap: 8px;
        min-height: 58px;
        padding-bottom: 8px;
        padding-top: 8px;
        position: sticky;
    }

    .topbar-title .small {
        display: none;
    }

    .topbar-title h1 {
        font-size: 1rem;
        max-width: calc(100vw - 148px);
    }

    .mobile-tools {
        display: block;
        margin-inline-start: auto;
        position: relative;
    }

    .topbar-actions {
        display: none !important;
    }

    .settings-jump {
        display: grid;
        grid-template-columns: 1fr;
        margin-left: -4px;
        margin-right: -4px;
        max-height: none;
        overflow-x: hidden;
        top: 0;
        white-space: normal;
    }

    .settings-nav-group {
        min-width: 220px;
    }

    .settings-nav-group[open] {
        min-width: 220px;
    }

    .settings-shell {
        display: block;
    }

    .settings-nav-panel {
        background: color-mix(in srgb, var(--bg) 94%, transparent);
        position: sticky;
        top: 0;
        z-index: 60;
    }

    .settings-jump a {
        display: block;
    }

    [id^="settings-"],
    [id^="my-"] {
        scroll-margin-top: 74px;
    }

    .dashboard-hero,
    .profile-heading {
        align-items: flex-start;
    }

    .portal-mini-link {
        align-items: flex-start;
    }

    body.mobile-mode-mobile-compact .panel,
    body.mobile-mode-mobile-compact .stat-card {
        padding: 11px;
    }

    body.mobile-mode-mobile-large-touch .btn,
    body.mobile-mode-mobile-large-touch .form-control,
    body.mobile-mode-mobile-large-touch .form-select,
    body.mobile-mode-mobile-large-touch .smart-select-option {
        min-height: 46px;
    }

    body.mobile-mode-mobile-large-touch .table {
        font-size: .98rem;
    }
}

@media (max-width: 767.98px) {
    .content {
        padding: 10px 12px calc(86px + env(safe-area-inset-bottom, 0px));
    }

    body.schedule-focus-mode .content {
        padding: 6px;
    }

    .panel,
    .stat-card {
        padding: 14px;
    }

    .dashboard-hero {
        padding: 14px;
    }

    .dashboard-hero h2 {
        font-size: 20px;
    }

    .dashboard-compact-shortcuts {
        margin-bottom: 10px !important;
        padding: 7px;
    }

    .dashboard-compact-shortcuts-head {
        font-size: 11px;
        margin-bottom: 5px;
    }

    .dashboard-compact-shortcuts-grid {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .dashboard-compact-shortcuts-grid::-webkit-scrollbar {
        display: none;
    }

    .dashboard-compact-shortcut {
        flex: 0 0 auto;
        font-size: 12px;
        min-height: 34px;
        padding: 6px 8px;
    }

    .mobile-quick-actions .mobile-quick-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-quick-action {
        gap: 7px;
        min-height: 38px;
        padding: 7px 8px;
    }

    .mobile-quick-action i {
        height: 26px;
        min-width: 26px;
    }

    .schedule-board {
        border: 1px solid var(--line);
        border-radius: 8px;
        grid-template-columns: 42px minmax(826px, 1fr);
        margin-left: 0;
        margin-right: 0;
        max-height: calc(100vh - 150px);
        max-width: 100%;
        scroll-padding-inline-start: 42px;
    }

    body.schedule-focus-mode .schedule-board {
        max-height: calc(100vh - 116px);
    }

    .schedule-time-rail {
        box-shadow: 8px 0 12px rgba(15, 23, 42, .06);
        left: 0;
        z-index: 8;
    }

    html[dir="rtl"] .schedule-time-rail {
        left: auto;
        right: 0;
    }

    .schedule-week-grid {
        gap: 6px;
        grid-template-columns: repeat(7, minmax(118px, 1fr));
    }

    .schedule-day {
        min-width: 118px;
        scroll-snap-align: start;
    }

    .schedule-day-header {
        position: sticky;
        top: 0;
    }

    .schedule-event {
        border-radius: 7px;
        box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
    }

    .schedule-event-body {
        gap: 2px;
        padding: 5px 6px 6px 10px;
    }

    .schedule-event-title {
        font-size: 11px;
    }

    .schedule-event-time {
        font-size: 8px;
    }

    .schedule-stat-grid {
        display: flex;
        gap: 8px;
        margin-inline: -4px;
        overflow-x: auto;
        padding: 0 4px 2px;
        scrollbar-width: thin;
    }

    .schedule-stat-card {
        flex: 0 0 138px;
    }

    .schedule-header-panel {
        margin-bottom: 10px !important;
        padding: 8px;
    }

    .schedule-viewer-card,
    .schedule-panel .schedule-toolbar {
        margin-bottom: 10px;
    }

    .schedule-control-bar {
        align-items: stretch;
        display: grid;
        gap: 7px;
        grid-template-columns: 1fr;
    }

    .schedule-week-nav {
        display: grid;
        flex: 1 1 100%;
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 6px;
        width: 100%;
    }

    .schedule-date-jump-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
    }

    .schedule-date-jump-form {
        grid-column: 2;
        grid-row: 1;
    }

    .schedule-week-nav .schedule-nav-btn:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    .schedule-week-nav .schedule-nav-btn:last-child {
        grid-column: 3;
        grid-row: 1;
    }

    .schedule-nav-btn {
        min-width: 0;
    }

    .schedule-date-jump {
        min-width: 0;
        width: 100%;
    }

    .schedule-action-strip {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
        width: 100%;
    }

    .schedule-action-strip::-webkit-scrollbar {
        display: none;
    }

    .schedule-action-strip > .btn,
    .schedule-action-strip > form .btn,
    .schedule-action-strip > .dropdown > .btn {
        font-size: .82rem;
        min-width: 40px;
        padding-inline: 8px;
        white-space: nowrap;
        width: auto;
    }

    .schedule-today-btn .schedule-btn-text {
        display: none;
    }

    .schedule-action-strip > form,
    .schedule-action-strip > .dropdown {
        flex: 0 0 auto;
    }

    .schedule-mobile-mini-toolbar {
        display: none;
    }

    .schedule-viewer-summary {
        align-items: flex-start;
        gap: 8px;
    }

    .schedule-viewer-trigger {
        white-space: nowrap;
    }

    .schedule-toolbar h2 {
        font-size: 1rem;
    }

    .schedule-title-line {
        align-items: center;
        gap: 6px;
    }

    .schedule-week-range {
        font-size: 12px;
    }

    .schedule-timezone-line {
        font-size: 11px;
    }

    .schedule-stat-card,
    .schedule-stat-note {
        min-height: 68px;
        padding: 10px;
    }

    .payroll-table-wrap,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }

    .payroll-table {
        min-width: 980px;
    }

    .portal-tool-hero .d-flex,
    .schedule-detail-session-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .portal-compact-table {
        min-width: 720px;
    }

    .modal-dialog {
        margin: .5rem;
    }

    .modal-content {
        max-height: calc(100vh - 1rem);
    }
}

@media (max-width: 420px) {
    .schedule-stat-grid {
        grid-template-columns: 1fr;
    }

    .topbar .badge {
        max-width: 100%;
        white-space: normal;
    }

    .btn,
    .form-control,
    .form-select {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .schedule-modal-actions,
    .teacher-workbench-actions,
    .student-report-submit-bar {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .schedule-modal-actions .btn,
    .schedule-modal-actions form,
    .schedule-modal-actions form .btn,
    .teacher-workbench-actions .btn,
    .teacher-workbench-actions form,
    .teacher-workbench-actions form .btn,
    .student-report-submit-bar .btn {
        width: 100%;
    }

    .student-report-submit-bar {
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid rgba(148, 163, 184, .24);
        bottom: 0;
        margin-left: -12px;
        margin-right: -12px;
        padding: 10px 12px;
        position: sticky;
        z-index: 20;
    }

    .report-center-tab {
        justify-content: space-between;
        width: 100%;
    }

    .report-card-grid,
    .learning-report-grid {
        grid-template-columns: 1fr;
    }

    .learning-report-card-head,
    .learning-report-detail-head {
        flex-direction: column;
    }

    .learning-report-sections {
        grid-template-columns: 1fr;
    }

    .learning-report-card,
    .learning-report-detail,
    .learning-report-spotlight {
        padding: 13px;
    }

    .learning-report-performance {
        width: 100%;
    }

    .student-report-history .table,
    .student-report-history thead,
    .student-report-history tbody,
    .student-report-history tr,
    .student-report-history th,
    .student-report-history td {
        display: block;
        width: 100%;
    }

    .student-report-history thead {
        display: none;
    }

    .student-report-history tr {
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 10px;
    }

    .student-report-history td {
        border: 0;
        padding: 4px 0;
    }
}

.floating-widgets {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    z-index: 1035;
}

.floating-widgets-bottom_right {
    bottom: 22px;
    right: 22px;
}

.floating-widgets-bottom_left {
    align-items: flex-start;
    bottom: 22px;
    left: 22px;
}

.floating-widgets-top_right {
    right: 22px;
    top: 22px;
}

.floating-widgets-top_left {
    align-items: flex-start;
    left: 22px;
    top: 22px;
}

.floating-widget-btn {
    align-items: center;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .2);
    color: #fff;
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    min-height: 46px;
    padding: 10px 16px;
    text-decoration: none;
}

.floating-widget-btn.icon-only,
.floating-widget-btn.messages.icon-only {
    border-radius: 999px;
    height: 46px;
    justify-content: center;
    min-height: 46px;
    padding: 0;
    width: 46px;
}

.chat-size-small .floating-widget-btn.icon-only,
.chat-size-small .floating-widget-btn.messages.icon-only {
    height: 40px;
    min-height: 40px;
    width: 40px;
}

.chat-size-small .floating-widget-btn {
    min-height: 42px;
    padding: 8px 13px;
}

.chat-size-small .messages-mini-panel {
    bottom: 50px;
    width: min(360px, calc(100vw - 24px));
}

.floating-widget-btn.messages.icon-only > span:not(.floating-widget-badge):not(.visually-hidden) {
    inline-size: 0;
    opacity: 0;
    overflow: hidden;
}

.floating-mode-icon_only .floating-widget-btn,
.floating-mode-compact .floating-widget-btn {
    border-radius: 999px;
    height: 44px;
    justify-content: center;
    min-height: 44px;
    padding: 0;
    width: 44px;
}

.floating-mode-icon_only .floating-widget-btn span,
.floating-mode-compact .floating-widget-btn span,
.floating-mode-icon_with_label_on_hover .floating-widget-btn span {
    inline-size: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
}

.floating-mode-icon_with_label_on_hover .floating-widget-btn:hover span,
.floating-mode-icon_with_label_on_hover .floating-widget-btn:focus-visible span,
.floating-mode-expanded .floating-widget-btn span {
    inline-size: auto;
    opacity: 1;
}

.floating-mode-icon_with_label_on_hover .floating-widget-btn:hover,
.floating-mode-icon_with_label_on_hover .floating-widget-btn:focus-visible {
    padding-inline: 14px;
}

.floating-widget-minimize,
.floating-widget-tab {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
    color: var(--ink);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.floating-widget-tab {
    display: none;
}

.floating-widgets.is-minimized > :not(.floating-widget-tab) {
    display: none !important;
}

.floating-widgets.is-minimized .floating-widget-tab {
    display: inline-flex;
}

.floating-attention-dot .floating-widget-tab::after {
    background: #22c55e;
    border-radius: 50%;
    content: "";
    height: 7px;
    position: absolute;
    right: 2px;
    top: 2px;
    width: 7px;
}

.floating-attention-subtle_pulse .floating-widget-tab {
    animation: floatingSubtlePulse 2.8s ease-in-out infinite;
}

@keyframes floatingSubtlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.floating-widget-btn.whatsapp {
    background: #16a34a;
}

.floating-widget-btn.telegram {
    background: #0284c7;
}

.floating-widget-btn.ai {
    background: #2563eb;
}

.floating-widget-btn.back-to-top {
    background: #334155;
    opacity: .95;
}

.floating-widget-btn.help {
    background: #475569;
}

.floating-widget-btn.messages {
    background: #0f766e;
    position: relative;
}

.messages-mini-widget {
    position: relative;
}

.messages-mini-panel {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(148, 163, 184, .34);
    border-radius: 14px;
    bottom: 58px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .24);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    height: min(74vh, 560px);
    max-height: min(74vh, 560px);
    overflow: hidden;
    position: absolute;
    right: 0;
    width: min(390px, calc(100vw - 28px));
}

.floating-widgets-bottom_left .messages-mini-panel,
.floating-widgets-top_left .messages-mini-panel {
    left: 0;
    right: auto;
}

.messages-mini-header {
    align-items: center;
    border-bottom: 1px solid rgba(226, 232, 240, .9);
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 13px 10px;
}

.messages-mini-title {
    align-items: center;
    display: flex;
    gap: 10px;
}

.messages-mini-title-icon {
    align-items: center;
    background: linear-gradient(135deg, #ccfbf1, #dbeafe);
    border-radius: 10px;
    color: #0f766e;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.messages-mini-header span {
    color: var(--muted);
    display: block;
    font-size: .78rem;
    font-weight: 600;
}

.messages-mini-header-actions {
    display: inline-flex;
    gap: 6px;
}

.messages-mini-header-actions button {
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #475569;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.messages-mini-header-actions button:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.messages-mini-tabs {
    background: #eef2f7;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    display: grid;
    flex: 0 0 auto;
    gap: 4px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 10px;
    padding: 4px;
}

.messages-mini-tabs button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #64748b;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 700;
    gap: 5px;
    justify-content: center;
    padding: 7px 8px;
}

.messages-mini-tabs button.active {
    background: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .1);
    color: #0f766e;
}

.messages-mini-pane {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
}

.messages-mini-primary {
    background: transparent;
    padding-bottom: 8px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.messages-mini-compose-btn,
.messages-mini-quick-compose {
    align-items: center;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    border-radius: 10px;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
    color: #fff;
    display: flex;
    font-weight: 900;
    gap: 8px;
    justify-content: center;
    padding: 10px 12px;
    text-decoration: none;
}

.messages-mini-quick-compose {
    align-items: stretch;
    background: #fff;
    border: 1px solid rgba(20, 184, 166, .25);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
    color: #0f172a;
    display: block;
    padding: 0;
}

.messages-mini-quick-compose > summary {
    align-items: center;
    color: #0f766e;
    cursor: pointer;
    display: flex;
    font-weight: 900;
    gap: 8px;
    justify-content: center;
    list-style: none;
    padding: 10px 12px;
}

.messages-mini-quick-compose > summary::-webkit-details-marker {
    display: none;
}

.messages-mini-compose-form {
    border-top: 1px solid #e2e8f0;
    display: grid;
    gap: 7px;
    padding: 9px;
}

.messages-mini-compose-form .form-label {
    color: #475569;
    font-size: .76rem;
    font-weight: 800;
    margin-bottom: 0;
}

.messages-mini-compose-form textarea {
    min-height: 72px;
    resize: vertical;
}

.messages-mini-status {
    border-radius: 8px;
    font-weight: 800;
    padding: 2px 0;
}

.messages-mini-status a {
    margin-inline-start: 6px;
}

.messages-mini-compose-btn:hover {
    color: #fff;
    filter: brightness(1.04);
}

.messages-mini-section-title-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.messages-mini-section-title-row form {
    margin: 0;
}

.messages-mini-section-title-row button {
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #0f766e;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.messages-mini-section-title {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    margin: 4px 0 8px;
    text-transform: uppercase;
}

.messages-mini-thread {
    align-items: center;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 10px;
    color: inherit;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 10px 11px;
    text-decoration: none;
}

.messages-mini-thread:hover {
    background: #f8fafc;
    border-color: #bfdbfe;
}

.messages-mini-thread strong,
.messages-mini-thread span {
    display: block;
}

.messages-mini-thread em {
    background: #e0f2fe;
    border-radius: 999px;
    color: #075985;
    flex: 0 0 auto;
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
    padding: 3px 8px;
}

.messages-mini-thread span,
.messages-mini-empty,
.messages-mini-faq p {
    color: var(--muted);
    font-size: .86rem;
}

.messages-mini-faq {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 8px;
    padding: 8px 10px;
}

.messages-mini-faq summary {
    cursor: pointer;
    font-weight: 700;
}

.messages-mini-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.messages-mini-actions .btn {
    flex: 1 1 auto;
}

.messages-mini-tab-count {
    background: #dc2626;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: .72rem;
    justify-content: center;
    margin-inline-start: 4px;
    min-width: 18px;
    padding: 0 5px;
}

.messages-mini-categories {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 10px;
    overflow: hidden;
}

.messages-mini-categories > summary {
    cursor: pointer;
    font-weight: 800;
    list-style: none;
    padding: 9px 10px;
}

.messages-mini-categories > summary::-webkit-details-marker {
    display: none;
}

.messages-mini-category-list {
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 9px 10px;
}

.messages-mini-category-list a {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: .82rem;
    font-weight: 700;
    padding: 5px 9px;
    text-decoration: none;
}

.messages-mini-whatsapp-link {
    align-items: center;
    background: #fff;
    border: 1px solid #86efac;
    border-left: 4px solid #14b8a6;
    border-radius: 10px;
    color: #166534;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 8px 9px;
    text-decoration: none;
}

.messages-mini-whatsapp-link.support-tone-general {
    border-color: #86efac;
    color: #166534;
}

.messages-mini-whatsapp-link.support-tone-academic {
    border-color: #c4b5fd;
    border-left-color: #7c3aed;
    color: #5b21b6;
}

.messages-mini-whatsapp-link.support-tone-academic span {
    background: #6d28d9;
}

.messages-mini-whatsapp-link.support-tone-financial {
    border-color: #fcd34d;
    border-left-color: #d97706;
    color: #92400e;
}

.messages-mini-whatsapp-link.support-tone-financial span {
    background: #d97706;
}

.messages-mini-whatsapp-link span {
    background: #16a34a;
    border-radius: 999px;
    color: #fff;
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 800;
    padding: 5px 9px;
}

.messages-mini-whatsapp-link strong small {
    color: #4b5563;
    display: block;
    font-size: .78rem;
    font-weight: 600;
    margin-top: 2px;
}

.quick-support-panel {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
    padding: 14px;
}

.quick-support-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.quick-support-head h2 {
    align-items: center;
    display: flex;
    font-size: 1rem;
    gap: 8px;
    margin: 0;
}

.quick-support-head p,
.quick-support-head span {
    color: #64748b;
    font-size: .84rem;
    margin: 2px 0 0;
}

.quick-support-head span {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    color: #3730a3;
    font-weight: 800;
    padding: 4px 9px;
}

.quick-support-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quick-support-card {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #14b8a6;
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    min-height: 104px;
    padding: 10px;
}

.quick-support-card.support-tone-academic {
    border-left-color: #7c3aed;
}

.quick-support-card.support-tone-financial {
    border-left-color: #d97706;
}

.quick-support-number {
    align-items: center;
    background: #ccfbf1;
    border-radius: 999px;
    color: #0f766e;
    display: inline-flex;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.quick-support-card.support-tone-academic .quick-support-number {
    background: #ede9fe;
    color: #6d28d9;
}

.quick-support-card.support-tone-financial .quick-support-number {
    background: #fef3c7;
    color: #b45309;
}

.quick-support-card strong,
.quick-support-card p,
.quick-support-card small {
    display: block;
}

.quick-support-card p {
    color: #64748b;
    font-size: .82rem;
    margin: 1px 0;
}

@media (max-width: 991.98px) {
    .quick-support-grid {
        grid-template-columns: 1fr;
    }
    .quick-support-head {
        flex-direction: column;
    }
}

.account-security-quick {
    align-items: center;
    background: linear-gradient(135deg, #eef2ff, #f8fafc);
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 14px;
}

.account-security-quick strong,
.account-security-quick span {
    display: block;
}

.account-security-quick span {
    color: #64748b;
    font-size: .84rem;
}

.account-security-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.my-settings-tabs {
    flex-wrap: nowrap !important;
}

.my-settings-tabs a {
    align-items: center;
    display: inline-flex !important;
    gap: 6px;
}

.my-settings-hero {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.my-settings-security-panel {
    border-top: 4px solid #2563eb;
}

@media (max-width: 767.98px) {
    .account-security-quick,
    .my-settings-hero {
        align-items: stretch;
        flex-direction: column;
    }
    .content > .settings-jump[data-settings-nav] {
        flex-wrap: nowrap !important;
        top: 58px;
    }
    .quick-support-card {
        grid-template-columns: 30px minmax(0, 1fr);
    }
    .quick-support-card .btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.faq-accordion {
    display: grid;
    gap: 14px;
}

.faq-accordion-compact {
    gap: 10px;
}

.faq-category {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.faq-category-header {
    align-items: center;
    display: flex;
    font-weight: 800;
    justify-content: space-between;
    padding: 10px 12px;
}

.faq-category-header small {
    background: rgba(255,255,255,.72);
    border-radius: 999px;
    padding: 2px 8px;
}

.faq-category-body {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.faq-card {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 10px;
}

.faq-card summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: 750;
    gap: 8px;
    justify-content: space-between;
    list-style: none;
    padding: 10px 12px;
}

.faq-card summary::-webkit-details-marker {
    display: none;
}

.faq-card summary i {
    color: var(--muted);
    transition: transform .16s ease;
}

.faq-card[open] summary i {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 10px 10px;
}

.faq-answer-body {
    background: rgba(255,255,255,.78);
    border-radius: 9px;
    color: var(--ink);
    font-size: .94rem;
    line-height: 1.55;
    padding: 10px 12px;
}

.faq-meta {
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .8rem;
    gap: 10px;
    margin-top: 8px;
}

.faq-empty {
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: 10px;
    color: var(--muted);
    padding: 12px;
}

.faq-tone-blue { background: #eff6ff; border-color: #bfdbfe; }
.faq-tone-blue .faq-category-header { background: #dbeafe; color: #1e3a8a; }
.faq-tone-purple { background: #f5f3ff; border-color: #ddd6fe; }
.faq-tone-purple .faq-category-header { background: #ede9fe; color: #5b21b6; }
.faq-tone-green { background: #ecfdf5; border-color: #bbf7d0; }
.faq-tone-green .faq-category-header { background: #dcfce7; color: #166534; }
.faq-tone-amber { background: #fffbeb; border-color: #fde68a; }
.faq-tone-amber .faq-category-header { background: #fef3c7; color: #92400e; }
.faq-tone-teal { background: #f0fdfa; border-color: #99f6e4; }
.faq-tone-teal .faq-category-header { background: #ccfbf1; color: #115e59; }
.faq-tone-indigo { background: #eef2ff; border-color: #c7d2fe; }
.faq-tone-indigo .faq-category-header { background: #e0e7ff; color: #3730a3; }
.faq-tone-pink { background: #fdf2f8; border-color: #fbcfe8; }
.faq-tone-pink .faq-category-header { background: #fce7f3; color: #9d174d; }
.faq-tone-slate { background: #f8fafc; border-color: #cbd5e1; }
.faq-tone-slate .faq-category-header { background: #e2e8f0; color: #334155; }
.faq-tone-blue .faq-answer-body { background: #f8fbff; }
.faq-tone-purple .faq-answer-body { background: #fbfaff; }
.faq-tone-green .faq-answer-body { background: #f7fefb; }
.faq-tone-amber .faq-answer-body { background: #fffdf4; }
.faq-tone-teal .faq-answer-body { background: #f6fffd; }
.faq-tone-indigo .faq-answer-body { background: #f8f9ff; }
.faq-tone-pink .faq-answer-body { background: #fff8fc; }
.faq-tone-slate .faq-answer-body { background: #ffffff; }

.floating-widget-badge {
    align-items: center;
    background: #dc2626;
    border: 2px solid #fff;
    border-radius: 999px;
    display: inline-flex;
    font-size: 11px;
    height: 20px;
    justify-content: center;
    line-height: 1;
    min-width: 20px;
    padding: 0 5px;
    position: absolute;
    right: -5px;
    top: -5px;
}

.floating-contact-center {
    position: relative;
}

.floating-contact-center > summary {
    align-items: center;
    background: #0f766e;
    border-radius: 999px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .2);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    list-style: none;
    min-height: 46px;
    padding: 10px 16px;
}

.floating-contact-center > summary::-webkit-details-marker {
    display: none;
}

.floating-contact-panel {
    align-items: flex-end;
    display: grid;
    gap: 8px;
    margin-bottom: 8px;
    position: absolute;
    right: 0;
    bottom: 100%;
    min-width: 220px;
}

.floating-widgets-bottom_left .floating-contact-panel {
    align-items: flex-start;
    left: 0;
    right: auto;
}

.floating-widget-menu-wrap {
    position: relative;
}

.floating-widget-menu-wrap summary {
    cursor: pointer;
    list-style: none;
}

.floating-widget-menu-wrap summary::-webkit-details-marker {
    display: none;
}

.floating-widget-menu {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    bottom: calc(100% + 8px);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .18);
    display: grid;
    gap: 4px;
    min-width: 220px;
    padding: 8px;
    position: absolute;
    right: 0;
}

.floating-widgets-bottom_left .floating-widget-menu,
.floating-widgets-top_left .floating-widget-menu {
    left: 0;
    right: auto;
}

.floating-widgets-top_left .floating-widget-menu,
.floating-widgets-top_right .floating-widget-menu {
    bottom: auto;
    top: calc(100% + 8px);
}

.floating-widget-menu a {
    border-radius: 6px;
    color: var(--ink);
    font-weight: 700;
    padding: 8px 10px;
    text-decoration: none;
}

.floating-widget-menu a:hover {
    background: color-mix(in srgb, var(--brand) 9%, var(--card));
}

.local-faq-chat {
    position: relative;
}

.local-faq-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    bottom: calc(100% + 10px);
    box-shadow: 0 20px 48px rgba(15, 23, 42, .22);
    color: var(--ink);
    display: grid;
    gap: 10px;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    height: min(68vh, 520px);
    max-height: min(68vh, 520px);
    min-width: 320px;
    overflow: hidden;
    padding: 12px;
    position: absolute;
    right: 0;
    width: min(380px, calc(100vw - 28px));
}

.floating-widgets-bottom_left .local-faq-panel,
.floating-widgets-top_left .local-faq-panel {
    left: 0;
    right: auto;
}

.floating-widgets-top_left .local-faq-panel,
.floating-widgets-top_right .local-faq-panel {
    bottom: auto;
    top: calc(100% + 10px);
}

.local-faq-header {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.local-faq-header span {
    color: var(--muted);
    display: block;
    font-size: .82rem;
    font-weight: 600;
}

.local-faq-body {
    display: grid;
    gap: 8px;
    max-height: none;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.local-faq-message {
    border-radius: 8px;
    font-size: .9rem;
    line-height: 1.35;
    padding: 8px 10px;
}

.local-faq-message.bot {
    background: color-mix(in srgb, var(--brand) 8%, var(--card));
}

.local-faq-message.user {
    background: #2563eb;
    color: #fff;
    justify-self: end;
    max-width: 88%;
}

.local-faq-message.suggestion {
    background: transparent;
    border: 1px dashed var(--line);
    color: var(--muted);
    font-size: .82rem;
}

.local-faq-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.local-faq-suggestions button {
    background: color-mix(in srgb, var(--brand) 8%, var(--card));
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: .82rem;
    font-weight: 700;
    padding: 6px 10px;
}

.local-faq-form {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

@media (min-width: 992px) {
    [data-floating-desktop="0"] {
        display: none;
    }
}

@media (max-width: 991.98px) {
    [data-floating-mobile="0"] {
        display: none;
    }

    .floating-widgets-bottom_right,
    .floating-widgets-bottom_left {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    .floating-widgets {
        max-width: calc(100vw - 20px);
    }

    .floating-widgets.is-minimized {
        gap: 0;
    }

    .floating-widgets.is-minimized .floating-widget-tab {
        height: 42px;
        width: 42px;
    }

    .floating-widget-btn {
        height: 42px;
        min-height: 44px;
        padding: 0;
        width: 42px;
    }

    .floating-widget-btn span {
        display: none;
    }

    .local-faq-panel {
        height: min(68vh, calc(100vh - 124px));
        max-height: min(68vh, calc(100vh - 124px));
        min-width: 0;
        width: min(340px, calc(100vw - 24px));
    }

    .messages-mini-panel {
        border-radius: 14px 14px 0 0;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        height: min(70vh, calc(100vh - 132px));
        left: 12px;
        max-height: min(75vh, calc(100vh - 132px));
        max-width: none;
        min-height: min(420px, calc(100vh - 132px));
        position: fixed;
        right: 12px;
        width: calc(100vw - 24px);
        z-index: 1045;
    }

    .messages-mini-header,
    .messages-mini-tabs {
        flex: 0 0 auto;
    }

    .messages-mini-pane {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
        overscroll-behavior: contain;
        overflow-y: auto;
        padding-bottom: 12px;
    }

    .messages-mini-tabs button {
        font-size: .82rem;
        min-height: 38px;
        min-width: 0;
        padding: 7px 6px;
        white-space: nowrap;
    }

    .messages-mini-whatsapp-link {
        align-items: stretch;
        flex-direction: column;
    }

    .messages-mini-whatsapp-link span {
        text-align: center;
    }
}

/* Settings recovery: one sticky nav, no nested horizontal overflow. */
.settings-shell {
    display: block;
}

.settings-nav-panel {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 18px;
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: 60;
}

.settings-nav-toolbar {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.settings-nav-tools {
    align-items: center;
    display: flex;
    gap: 8px;
}

.settings-nav-tools .form-control {
    min-width: min(320px, 46vw);
}

.settings-jump {
    background: transparent;
    border: 0;
    border-radius: 0;
    display: block;
    max-height: 34vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

.settings-horizontal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-horizontal-nav a,
.settings-side-nav a {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    padding: 8px 12px;
    text-decoration: none;
}

.settings-horizontal-nav a.is-active,
.settings-horizontal-nav a:focus,
.settings-side-nav a.is-active,
.settings-side-nav a:focus {
    background: color-mix(in srgb, var(--brand) 13%, var(--card));
    border-color: color-mix(in srgb, var(--brand) 48%, var(--line));
    color: var(--brand-2);
    outline: none;
}

.settings-side-nav {
    display: none;
}

.settings-mode-side_accordion {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}

.settings-mode-side_accordion .settings-nav-panel {
    max-height: calc(100vh - 22px);
}

.settings-mode-side_accordion .settings-horizontal-nav {
    display: none;
}

.settings-mode-side_accordion .settings-side-nav {
    display: grid;
    gap: 8px;
}

.settings-mode-side_accordion .settings-nav-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    min-width: 0;
    overflow: hidden;
}

.settings-mode-side_accordion .settings-nav-group summary {
    align-items: center;
    background: color-mix(in srgb, var(--brand) 7%, var(--card));
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 800;
    justify-content: space-between;
    list-style: none;
    padding: 10px 12px;
    text-transform: none;
}

.settings-mode-side_accordion .settings-nav-group-links {
    display: grid;
    gap: 6px;
    padding: 8px;
}

.settings-mode-side_accordion .settings-nav-group-links a {
    border-radius: 8px;
    display: flex;
}

.settings-nav-collapsed .settings-jump,
.settings-nav-collapsed .settings-mobile-select {
    display: none;
}

.settings-status-icon {
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    margin-inline-end: 4px;
    width: 28px;
}

.settings-status-icon.status-good { color: #15803d; }
.settings-status-icon.status-muted { color: #64748b; }
.settings-status-icon.status-warning { color: #b45309; }
.settings-status-icon.status-danger { color: #b91c1c; }
.settings-status-icon.status-info { color: #0369a1; }

.settings-group-toc {
    background: color-mix(in srgb, var(--brand) 5%, var(--card));
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
}

.settings-group-toc a {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    padding: 8px 12px;
    text-decoration: none;
}

.settings-group-toc a:focus,
.settings-group-toc a:hover {
    background: color-mix(in srgb, var(--brand) 12%, var(--card));
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    color: var(--brand-2);
}

.settings-group-divider {
    align-items: flex-start;
    background: color-mix(in srgb, var(--brand) 5%, var(--card));
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 10px;
    padding: 16px;
}

.settings-link-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(15, 23, 42, .035);
    padding: 16px;
}

.settings-card-save {
    align-items: center;
    background: color-mix(in srgb, var(--brand) 4%, var(--card));
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 4px;
    padding: 10px;
}

.settings-card-save-final {
    background: var(--card);
    margin-top: 16px;
}

.settings-inline-note {
    scroll-margin-top: 18px;
}

.user-status-inline span:last-child {
    font-size: 13px;
}

@media (max-width: 991.98px) {
    .settings-mode-side_accordion {
        display: block;
    }

    .settings-nav-panel {
        border-radius: 0;
        margin-left: -18px;
        margin-right: -18px;
        top: 0;
    }

    .settings-nav-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-nav-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-nav-tools .form-control {
        min-width: 0;
        width: 100%;
    }

    .settings-horizontal-nav,
    .settings-side-nav,
    .settings-mode-side_accordion .settings-side-nav {
        display: none;
    }

    .settings-mobile-select {
        display: block;
    }

    .settings-jump {
        max-height: none;
    }
}

/* Final Settings-only override: keep this after legacy Settings rules. */
.settings-shell.settings-mode-vertical {
    align-items: start !important;
    display: grid !important;
    gap: 18px !important;
    grid-template-columns: minmax(250px, 304px) minmax(0, 1fr) !important;
    overflow-x: clip !important;
}

.settings-shell.settings-mode-vertical.settings-menu-collapsed {
    grid-template-columns: 76px minmax(0, 1fr) !important;
}

.settings-mode-vertical .settings-nav-panel {
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 0 18px !important;
    max-height: calc(100vh - 24px) !important;
    overflow: hidden !important;
    position: sticky !important;
    top: 10px !important;
}

.settings-mode-vertical .settings-nav-toolbar {
    flex: 0 0 auto !important;
}

.settings-mode-vertical .settings-horizontal-nav {
    display: none !important;
}

.settings-mode-vertical .settings-side-nav {
    display: grid !important;
    gap: 8px !important;
}

.settings-mode-vertical .settings-jump {
    display: block !important;
    flex: 1 1 auto !important;
    max-height: calc(100vh - 168px) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 42px !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable both-edges !important;
}

.settings-mode-vertical .settings-jump::after {
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--surface) 96%, transparent));
    bottom: 0;
    content: "";
    display: block;
    height: 24px;
    left: 0;
    pointer-events: none;
    position: sticky;
    right: 0;
}

.settings-mode-vertical .settings-side-nav a {
    border-radius: 7px !important;
    display: flex !important;
    width: 100% !important;
}

.settings-content [id^="settings-"] {
    scroll-margin-top: 18px;
}

.settings-content .settings-section-focused {
    background: color-mix(in srgb, var(--brand) 7%, transparent);
    border-radius: 8px;
    outline: 2px solid color-mix(in srgb, var(--brand) 24%, transparent);
    outline-offset: 6px;
    transition: background .18s ease, outline-color .18s ease;
}

.settings-content .settings-section-focused h2,
.settings-content .settings-section-focused h3,
.settings-content .settings-section-focused h4 {
    color: var(--brand-2);
}

.content > .settings-jump[data-settings-nav] {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 10px;
    position: sticky;
    scrollbar-width: thin;
    top: 74px;
    z-index: 65;
}

.content > .settings-jump[data-settings-nav] a {
    border-radius: 999px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.content > .settings-jump[data-settings-nav] a.is-active,
.content > .settings-jump[data-settings-nav] a:focus {
    background: color-mix(in srgb, var(--brand) 13%, var(--card));
    border-color: color-mix(in srgb, var(--brand) 48%, var(--line));
    color: var(--brand-2);
    outline: none;
}

.content > .settings-jump[data-settings-nav] ~ [id^="my-"] {
    scroll-margin-top: 150px;
}

.settings-mode-vertical .settings-nav-collapsed .settings-current,
.settings-mode-vertical .settings-nav-collapsed [data-settings-search],
.settings-mode-vertical .settings-nav-collapsed .settings-nav-label,
.settings-mode-vertical .settings-nav-collapsed .settings-nav-chevron,
.settings-mode-vertical .settings-nav-collapsed .settings-nav-group-links,
.settings-mode-vertical .settings-nav-collapsed .settings-mobile-select {
    display: none !important;
}

.settings-mode-vertical .settings-nav-collapsed .settings-jump {
    display: block !important;
    max-height: calc(100vh - 94px) !important;
    padding-bottom: 42px !important;
}

.settings-mode-vertical .settings-nav-collapsed .settings-nav-group {
    border-color: transparent !important;
}

.settings-mode-vertical .settings-nav-collapsed .settings-nav-group summary {
    justify-content: center !important;
    padding: 11px 0 !important;
}

.mobile-quick-actions .mobile-quick-action-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.mobile-quick-action {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    display: flex;
    gap: 10px;
    min-height: 52px;
    padding: 10px 12px;
    text-decoration: none;
}

.mobile-quick-action:hover,
.mobile-quick-action:focus {
    background: var(--surface-muted);
    color: var(--text);
}

.mobile-quick-action i {
    align-items: center;
    background: rgba(20, 184, 166, .12);
    border-radius: 8px;
    color: #0f766e;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    min-width: 32px;
}

.dashboard-compact-shortcuts,
.dashboard-workflow-guide-hint {
    background: color-mix(in srgb, var(--card) 92%, transparent);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
}

.dashboard-workflow-guide-hint {
    align-items: center;
    display: flex;
    font-size: .86rem;
    gap: 8px;
    justify-content: space-between;
}

.dashboard-workflow-guide-hint a {
    align-items: center;
    color: var(--ink);
    display: inline-flex;
    gap: 6px;
    text-decoration: none;
}

.dashboard-next-actions {
    background: color-mix(in srgb, var(--card) 94%, transparent);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
}

.dashboard-next-actions-head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dashboard-next-actions-head div {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dashboard-next-actions-head span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-next-actions-head strong {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.2;
}

.dashboard-next-actions-head a,
.dashboard-workflow-link {
    align-items: center;
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 999px;
    color: #0f766e;
    display: inline-flex;
    gap: 5px;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    padding: 6px 9px;
    text-decoration: none;
}

.dashboard-workflow-link:hover,
.dashboard-workflow-link:focus {
    background: #ecfeff;
    color: #0f766e;
}

.dashboard-next-actions-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.dashboard-next-action {
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 8px;
    color: #0f172a;
    display: flex;
    gap: 9px;
    min-height: 62px;
    min-width: 0;
    padding: 9px;
    text-decoration: none;
}

.dashboard-next-action:hover,
.dashboard-next-action:focus {
    background: #f8fafc;
    color: #0f172a;
}

.dashboard-next-action > i {
    align-items: center;
    background: #ecfeff;
    border-radius: 8px;
    color: #0f766e;
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
}

.dashboard-next-action span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dashboard-next-action strong {
    font-size: 13px;
    line-height: 1.2;
}

.dashboard-next-action em {
    color: var(--muted);
    display: -webkit-box;
    font-size: 12px;
    font-style: normal;
    line-height: 1.25;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dashboard-next-action-finance > i { background: #fef3c7; color: #92400e; }
.dashboard-next-action-report > i { background: #eff6ff; color: #1d4ed8; }
.dashboard-next-action-users > i { background: #fce7f3; color: #be185d; }
.dashboard-next-action-hub > i { background: #eef2ff; color: #4338ca; }
.dashboard-next-action-live > i { background: #dcfce7; color: #166534; }
.dashboard-next-action-messages > i { background: #f0f9ff; color: #0369a1; }
.dashboard-next-action-schedule > i { background: #ede9fe; color: #6d28d9; }
.dashboard-next-action-availability > i { background: #ecfdf5; color: #047857; }
.dashboard-next-action-scope > i { background: #ccfbf1; color: #0f766e; }
.dashboard-next-action-tasks > i { background: #f1f5f9; color: #475569; }

/* Role dashboard stabilization: one calm card language across dashboard tools. */
.dashboard-hero {
    align-items: center;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    gap: 14px;
    min-height: 86px;
    padding: 14px 16px;
}

.dashboard-hero img {
    height: 48px;
    width: 48px;
}

.dashboard-hero h2 {
    font-size: 1.15rem;
    line-height: 1.2;
    margin: 0;
}

.dashboard-next-actions,
.dashboard-compact-shortcuts,
.panel,
.stat-card,
.mobile-quick-actions,
.communication-thread-card,
.schedule-collection-card,
.schedule-collection-queue-card {
    border-radius: 8px;
}

.dashboard-next-actions,
.dashboard-compact-shortcuts,
.dashboard-customize {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .28);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

.dashboard-next-actions {
    padding: 14px;
}

.dashboard-next-actions-grid,
.dashboard-compact-shortcuts-grid,
.mobile-quick-action-grid {
    align-items: stretch;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.dashboard-next-action,
.dashboard-compact-shortcut,
.mobile-quick-action,
.portal-mini-link,
.stat-card {
    min-height: 72px;
}

.dashboard-next-action {
    border-color: rgba(148, 163, 184, .28);
    padding: 12px;
}

.dashboard-next-action > i,
.mobile-quick-action i {
    border-radius: 8px;
    flex: 0 0 36px;
    font-size: 1rem;
    height: 36px;
    min-width: 36px;
}

.dashboard-customize {
    padding: 8px 12px;
}

.dashboard-customize > summary {
    align-items: center;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    font-size: .86rem;
    font-weight: 800;
    gap: 7px;
    list-style: none;
}

.dashboard-customize > summary::-webkit-details-marker {
    display: none;
}

.dashboard-task {
    border-bottom: 1px solid rgba(148, 163, 184, .16);
    padding: 8px 0;
}

.dashboard-task:last-child {
    border-bottom: 0;
}

.dashboard-compact-shortcuts-head {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: 12px;
    font-weight: 800;
    justify-content: space-between;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.dashboard-compact-shortcuts.is-workflow-hidden .dashboard-compact-shortcuts-head {
    display: none;
}

.dashboard-compact-shortcuts-grid {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
}

.dashboard-compact-shortcut {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 8px;
    color: #0f172a;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 7px;
    min-height: 38px;
    min-width: 0;
    padding: 7px 9px;
    text-decoration: none;
}

.dashboard-compact-shortcut:hover,
.dashboard-compact-shortcut:focus {
    background: #f8fafc;
    color: #0f172a;
}

.dashboard-compact-shortcut i {
    color: #0f766e;
    flex: 0 0 auto;
}

.dashboard-compact-shortcut span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finance-section-nav {
    position: sticky;
    top: 76px;
    z-index: 12;
}

.finance-section-nav .d-flex {
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.finance-section-link {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    display: inline-flex;
    flex: 0 0 auto;
    gap: 7px;
    padding: 8px 12px;
    text-decoration: none;
    white-space: nowrap;
}

.finance-section-link:hover,
.finance-section-link:focus {
    background: var(--surface-muted);
    color: var(--text);
}

.finance-section-link.active {
    background: rgba(20, 184, 166, .12);
    border-color: rgba(20, 184, 166, .42);
    color: #0f766e;
    font-weight: 700;
}

[data-finance-section].finance-section-active {
    scroll-margin-top: 138px;
}

.pwa-install-card,
.timezone-suggestion {
    border-radius: 0;
    position: relative;
    z-index: 20;
}

.pwa-install-card.alert {
    padding: .45rem .75rem;
    font-size: .875rem;
    line-height: 1.35;
}

.pwa-install-card .btn-sm {
    padding: .2rem .55rem;
    line-height: 1.3;
}

.parent-child-manage-panel {
    border-left: 4px solid #3b82f6;
}

.parent-child-manage-panel .schedule-eyebrow {
    color: #2563eb;
}

.parent-child-more-actions {
    position: relative;
}

.parent-child-more-actions > div,
.parent-family-advanced-id form {
    min-width: 240px;
}

.payment-time-display {
    min-width: 150px;
    line-height: 1.25;
}

.payment-time-display strong {
    display: block;
    color: #111827;
}

[data-payment-time-display-control] {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #f8fafc;
}

[data-feature-control-friendly-table] th,
[data-feature-control-friendly-table] td {
    vertical-align: middle;
}

[data-feature-row-actions] .btn {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .pwa-install-card.alert {
        align-items: center;
        gap: .4rem !important;
        padding: .4rem .6rem;
    }

    .pwa-install-card > span:first-child {
        flex: 1 1 180px;
    }
}

@supports (padding: max(0px)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-main-nav {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
}

@media (display-mode: standalone) {
    html,
    body {
        overscroll-behavior-y: contain;
    }
}

@media (max-width: 991.98px) {
    .settings-shell.settings-mode-vertical,
    .settings-shell.settings-mode-vertical.settings-menu-collapsed {
        display: block !important;
    }

    .settings-mode-vertical .settings-nav-panel {
        max-height: none !important;
        overflow: visible !important;
        top: 0 !important;
    }

    .settings-mode-vertical .settings-jump {
        display: none !important;
    }

    .settings-mode-vertical .settings-mobile-select {
        display: block !important;
    }

    .mobile-quick-actions .mobile-quick-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .finance-section-nav {
        top: 0;
    }

    .finance-section-link {
        padding: 7px 10px;
    }

    .content > .settings-jump[data-settings-nav] {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
        flex-wrap: nowrap;
        margin-left: -18px;
        margin-right: -18px;
        padding-inline: 18px;
        top: 58px;
    }

    [id^="my-"] {
        scroll-margin-top: 132px;
    }
}

.workflow-guide-page {
    display: grid;
    gap: 18px;
}

.workflow-hero {
    align-items: center;
    background: linear-gradient(135deg, #f0f9ff 0%, #ecfdf5 52%, #fff7ed 100%);
    display: flex;
    justify-content: space-between;
}

.workflow-hero h1 {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    margin: 0 0 8px;
}

.workflow-hero p {
    color: #475569;
    max-width: 760px;
}

.workflow-hero-actions,
.workflow-actions,
.workflow-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.workflow-feature-grid,
.role-quick-card-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.workflow-nav-grid,
.workflow-info-strip {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.workflow-nav-card,
.workflow-info-card {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 126px;
    padding: 14px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.workflow-nav-card:hover,
.workflow-info-card:hover {
    box-shadow: 0 14px 32px rgba(15, 23, 42, .09);
    transform: translateY(-1px);
}

.workflow-nav-card i,
.workflow-info-card i {
    align-items: center;
    background: #dbeafe;
    border-radius: 8px;
    color: #1d4ed8;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.workflow-nav-card:nth-child(2n) i { background: #dcfce7; color: #166534; }
.workflow-nav-card:nth-child(3n) i { background: #fef3c7; color: #92400e; }
.workflow-nav-card:nth-child(4n) i { background: #fce7f3; color: #be185d; }

.workflow-nav-card span,
.workflow-info-card span {
    color: #64748b;
    font-size: .86rem;
}

.workflow-nav-card em,
.workflow-info-card a {
    color: #2563eb;
    font-size: .82rem;
    font-style: normal;
    font-weight: 800;
    margin-top: auto;
    text-decoration: none;
}

.workflow-info-card {
    min-height: 112px;
}

#admin-workflow,
#teacher-workflow,
#student-workflow,
#parent-workflow,
#supervisor-workflow,
#finance-workflow,
#schedule-power,
#learning-hub,
#live-classroom,
#messages-help {
    scroll-margin-top: 96px;
}

.workflow-feature-card,
.role-quick-card {
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 110px;
    padding: 14px;
    text-decoration: none;
}

.workflow-feature-card i,
.role-quick-card i {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.workflow-feature-card i {
    background: #e0f2fe;
    color: #0369a1;
}

.workflow-feature-card span,
.workflow-role-card p,
.workflow-issues {
    color: #64748b;
    font-size: .92rem;
}

.workflow-schedule-copy {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #334155;
    padding: 12px 14px;
}

.workflow-role-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.workflow-role-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 5px solid #0ea5e9;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    padding: 18px;
}

.workflow-role-head {
    display: flex;
    gap: 12px;
}

.workflow-role-icon {
    align-items: center;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.workflow-role-card h2 {
    font-size: 1.2rem;
    margin: 0 0 6px;
}

.workflow-section-label {
    color: #334155;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: 0;
    margin-top: 14px;
    text-transform: uppercase;
}

.workflow-first {
    background: #f8fafc;
    border-radius: 8px;
    color: #334155;
    margin-top: 6px;
    padding: 10px;
}

.workflow-steps {
    display: grid;
    gap: 6px;
    margin: 8px 0 0;
    padding-left: 20px;
}

html[dir="rtl"] .workflow-steps {
    padding-left: 0;
    padding-right: 20px;
}

.workflow-chip-row span {
    background: #f1f5f9;
    border-radius: 999px;
    color: #334155;
    font-size: .84rem;
    padding: 6px 10px;
}

.workflow-issues {
    margin-bottom: 0;
    padding-left: 18px;
}

html[dir="rtl"] .workflow-issues {
    padding-left: 0;
    padding-right: 18px;
}

.workflow-tone-teal { border-top-color: #0f766e; }
.workflow-tone-blue { border-top-color: #2563eb; }
.workflow-tone-rose { border-top-color: #e11d48; }
.workflow-tone-amber { border-top-color: #d97706; }
.workflow-tone-violet { border-top-color: #7c3aed; }
.workflow-tone-slate { border-top-color: #475569; }
.workflow-tone-teal .workflow-role-icon { background: #0f766e; }
.workflow-tone-blue .workflow-role-icon { background: #2563eb; }
.workflow-tone-rose .workflow-role-icon { background: #e11d48; }
.workflow-tone-amber .workflow-role-icon { background: #d97706; }
.workflow-tone-violet .workflow-role-icon { background: #7c3aed; }
.workflow-tone-slate .workflow-role-icon { background: #475569; }

.role-quick-card {
    min-height: 88px;
}

.role-quick-card:hover {
    border-color: #94a3b8;
    color: #0f172a;
    transform: translateY(-1px);
}

.role-quick-card-schedule i { background: #dcfce7; color: #166534; }
.role-quick-card-report i { background: #fee2e2; color: #991b1b; }
.role-quick-card-hub i { background: #dbeafe; color: #1d4ed8; }
.role-quick-card-live i { background: #fae8ff; color: #86198f; }
.role-quick-card-messages i { background: #fef3c7; color: #92400e; }
.role-quick-card-scope i { background: #ccfbf1; color: #0f766e; }
.role-quick-card-guide i { background: #ede9fe; color: #6d28d9; }
.role-quick-card-users i { background: #fce7f3; color: #be185d; }
.role-quick-card-tasks i { background: #ffedd5; color: #c2410c; }
.role-quick-card-snapshot i { background: #e0f2fe; color: #0369a1; }

@media (max-width: 767.98px) {
    .dashboard-next-actions {
        padding: 8px;
    }

    .dashboard-next-actions-head {
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 7px;
    }

    .dashboard-next-actions-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-next-action {
        min-height: 56px;
        padding: 8px;
    }

    .workflow-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .workflow-hero-actions .btn,
    .workflow-actions .btn {
        width: 100%;
    }

    .workflow-role-grid {
        grid-template-columns: 1fr;
    }
}

/* My Settings final layout: override legacy Settings accordion styles on this page. */
.settings-mode-vertical .my-settings-tabs,
.content > .my-settings-tabs[data-settings-nav] {
    align-items: center !important;
    background: rgba(248, 250, 252, .92) !important;
    backdrop-filter: blur(12px);
    border: 1px solid #dbe4ee !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 7px !important;
    position: sticky !important;
    scrollbar-width: thin;
    top: 74px !important;
    z-index: 75 !important;
}

.settings-mode-vertical .my-settings-tabs::after {
    display: none !important;
}

.settings-mode-vertical .my-settings-tabs a,
.content > .my-settings-tabs[data-settings-nav] a {
    align-items: center !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    color: #475569 !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: .86rem !important;
    font-weight: 800 !important;
    gap: 6px !important;
    line-height: 1 !important;
    padding: 8px 11px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    width: auto !important;
}

.settings-mode-vertical .my-settings-tabs a.is-active,
.settings-mode-vertical .my-settings-tabs a.active,
.content > .my-settings-tabs[data-settings-nav] a.is-active,
.content > .my-settings-tabs[data-settings-nav] a.active,
.settings-mode-vertical .my-settings-tabs a:focus {
    background: #fff !important;
    border-color: #bfdbfe !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .13) !important;
    color: #1d4ed8 !important;
}

.my-settings-loading-strip {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    color: #1d4ed8;
    display: flex;
    font-size: .88rem;
    font-weight: 900;
    gap: 8px;
    margin: -4px 0 12px;
    padding: 10px 12px;
}

body.my-settings-is-loading .content {
    background: linear-gradient(180deg, rgba(248, 250, 252, .98), rgba(255, 255, 255, .98));
}

body.my-settings-is-loading .content > .panel:not(.d-none) {
    opacity: .72;
    transition: opacity .12s ease;
}

.my-settings-hero {
    align-items: flex-start;
}

.my-settings-hero p {
    max-width: 760px;
}

.help-top-grid > [class*="col-"] > .panel {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid #dbe4ee;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
    min-height: 190px;
}

.quick-support-card-compact .icon {
    background: #dcfce7;
    color: #0f766e;
}

.quick-support-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-support-chip {
    align-items: center;
    border: 1px solid #86efac;
    border-radius: 999px;
    color: #166534;
    display: inline-flex;
    font-size: .84rem;
    font-weight: 900;
    gap: 6px;
    padding: 7px 10px;
    text-decoration: none;
}

.quick-support-chip.support-tone-academic {
    border-color: #c4b5fd;
    color: #5b21b6;
}

.quick-support-chip.support-tone-financial {
    border-color: #fcd34d;
    color: #92400e;
}

.quick-support-chip:hover {
    background: #f8fafc;
}

.workflow-nav-card {
    min-height: 104px;
    padding: 12px;
}

.workflow-nav-card span {
    line-height: 1.3;
}

.parent-child-onboarding .parent-child-step {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    padding: 14px;
}

.parent-child-step-title {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.parent-child-step-title span {
    align-items: center;
    background: #0f766e;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 800;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.parent-child-submit {
    min-height: 48px;
}

.parent-child-tabs {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.parent-child-tabs .nav-item,
.parent-child-tabs .nav-link {
    min-width: 0;
    width: 100%;
}

.parent-child-tabs .nav-link {
    border: 1px solid #dbe4ee;
    border-radius: 999px;
    color: #334155;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 8px 10px;
    white-space: nowrap;
}

.parent-child-tabs .nav-link.active {
    background: #0f766e;
    border-color: #0f766e;
    box-shadow: 0 8px 20px rgba(15, 118, 110, .20);
    color: #fff;
}

.parent-child-tabs .tab-label-short {
    display: none !important;
}

.parent-child-tabs .tab-label-full {
    display: inline !important;
}

.parent-family-mobile-cards {
    display: grid;
    gap: 10px;
}

.parent-family-learner-card {
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: 10px;
    padding: 12px;
}

.parent-family-card-actions {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.parent-family-card-actions a {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 999px;
    color: #0f766e;
    font-size: .78rem;
    font-weight: 700;
    min-width: 0;
    padding: 7px 6px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .schedule-advanced-filter-form {
        display: none !important;
    }
    .schedule-primary-filter-chips {
        display: grid;
        gap: 6px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .schedule-primary-filter-chips .schedule-filter-chip {
        justify-content: center;
        min-width: 0;
        padding: 7px 8px;
        white-space: nowrap;
    }
    [data-schedule-missing-links-filter] {
        display: none !important;
    }
    .schedule-mobile-hint {
        align-items: center;
        background: color-mix(in srgb, var(--brand) 5%, var(--card));
        border: 1px solid var(--line);
        border-radius: 8px;
        display: flex;
        font-size: .82rem;
        justify-content: space-between;
        margin-bottom: 8px;
        padding: 6px 8px;
    }
    .schedule-mobile-hint .btn {
        color: var(--muted);
        font-size: 1rem;
        line-height: 1;
        padding: 0 4px;
        text-decoration: none;
    }
    .my-sessions-filter-shell {
        padding: 12px;
    }
    .my-session-card .btn[data-session-card-join-button],
    [data-my-session-table-row] .btn[data-session-card-join-button] {
        min-height: 36px;
    }
    [data-my-meetings-page],
    [data-my-sessions-page] {
        margin-bottom: 8px;
    }
    .meeting-state-grid {
        grid-template-columns: 1fr 1fr;
    }
    .schedule-board,
    .my-sessions-group-list,
    [data-my-sessions-table-view],
    [data-my-meetings-past],
    [data-my-meetings-upcoming],
    [data-parent-family-learners],
    [data-parent-child-tabs],
    [data-schedule-collection-shell],
    [data-schedule-collection-table],
    [data-schedule-collection-mobile-cards] {
        margin-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
    .settings-mode-vertical .my-settings-tabs,
    .content > .my-settings-tabs[data-settings-nav] {
        border-radius: 14px !important;
        flex-wrap: nowrap !important;
        top: 58px !important;
    }
    .settings-mode-vertical .my-settings-tabs a,
    .content > .my-settings-tabs[data-settings-nav] a {
        font-size: .82rem !important;
        padding: 8px 10px !important;
    }
    .help-top-grid > [class*="col-"] > .panel {
        min-height: 0;
    }
    .parent-child-onboarding .parent-child-step {
        padding: 12px;
    }
    .parent-child-onboarding {
        margin-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
    .parent-child-tabs {
        gap: 6px;
    }
    .parent-child-tabs .nav-link {
        font-size: .82rem;
        padding: 8px 6px;
    }
    .parent-child-tabs .tab-label-full {
        display: none !important;
    }
    .parent-child-tabs .tab-label-short {
        display: inline !important;
    }
    .parent-family-card-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Dashboard rebuild 2026-06-04: one clean role-first card system. */
.dashboard-welcome-strip {
    align-items: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #eef2ff 52%, #f0f9ff 100%);
    border: 1px solid #dbeafe;
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
    display: grid;
    gap: 14px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 16px 18px;
}

.dashboard-welcome-mark {
    align-items: center;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 16px;
    display: inline-flex;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.dashboard-welcome-mark img {
    border-radius: 12px;
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.dashboard-welcome-copy span,
.dashboard-section-title span,
.dashboard-summary-card span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-welcome-copy h2,
.dashboard-section-title h2 {
    color: #0f172a;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 900;
    letter-spacing: 0;
    margin: 2px 0 4px;
}

.dashboard-welcome-copy p {
    color: #475569;
    font-weight: 650;
    margin: 0;
}

.dashboard-welcome-meta {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-welcome-meta span,
.dashboard-welcome-meta strong {
    background: rgba(255, 255, 255, .82);
    border: 1px solid #e0e7ff;
    border-radius: 999px;
    color: #334155;
    font-size: .82rem;
    font-weight: 850;
    padding: 6px 10px;
}

.dashboard-welcome-clocks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    max-width: 360px;
}

.dashboard-clock-chip {
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
    display: grid;
    min-width: 112px;
    padding: 7px 9px;
}

.dashboard-clock-chip em {
    color: #64748b;
    font-size: .72rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.2;
}

.dashboard-clock-chip strong {
    color: #0f172a;
    font-size: .94rem;
    font-weight: 900;
    line-height: 1.2;
}

.dashboard-section {
    display: block;
}

.dashboard-section-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.dashboard-section-title.compact {
    margin-bottom: 10px;
}

.dashboard-section-card {
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    padding: 16px;
}

.role-dashboard-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.role-dashboard-grid[data-card-count="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.role-dashboard-grid[data-card-count="8"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.role-action-card {
    border: 1px solid transparent;
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .07);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 154px;
    padding: 14px;
}

.role-action-card-schedule { background: #eef2ff; border-color: #c7d2fe; }
.role-action-card-learning { background: #ecfdf5; border-color: #bbf7d0; }
.role-action-card-availability { background: #f0fdf4; border-color: #d9f99d; }
.role-action-card-reports { background: #f5f3ff; border-color: #ddd6fe; }
.role-action-card-live { background: #ccfbf1; border-color: #99f6e4; }
.role-action-card-messages { background: #e0f2fe; border-color: #bae6fd; }
.role-action-card-finance { background: #fef9c3; border-color: #fde68a; }
.role-action-card-users { background: #fce7f3; border-color: #fbcfe8; }
.role-action-card-settings { background: #f8fafc; border-color: #cbd5e1; }

.role-action-body {
    display: flex;
    gap: 12px;
}

.role-action-icon {
    align-items: center;
    background: rgba(255, 255, 255, .78);
    border-radius: 16px;
    color: #1d4ed8;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.2rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.role-action-card-learning .role-action-icon,
.role-action-card-availability .role-action-icon { color: #047857; }
.role-action-card-reports .role-action-icon { color: #6d28d9; }
.role-action-card-live .role-action-icon { color: #0f766e; }
.role-action-card-messages .role-action-icon { color: #0369a1; }
.role-action-card-finance .role-action-icon { color: #92400e; }
.role-action-card-users .role-action-icon { color: #be185d; }
.role-action-card-settings .role-action-icon { color: #475569; }

.role-action-card h3 {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
    margin: 0 0 6px;
}

.role-action-card p {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #475569;
    display: -webkit-box;
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
}

.role-action-badge {
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 999px;
    color: #0f172a;
    font-size: .75rem;
    font-weight: 900;
    line-height: 1;
    padding: 5px 8px;
}

.role-action-chips,
.dashboard-family-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.role-action-chips span,
.dashboard-family-status-chips span {
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(148, 163, 184, .32);
    border-radius: 999px;
    color: #0f172a;
    font-size: .76rem;
    font-weight: 900;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    padding: 6px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-family-status-chips a,
.role-action-secondary-link {
    color: #0369a1;
    font-size: .78rem;
    font-weight: 900;
    text-decoration: none;
}

.role-action-footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.role-action-footer a {
    align-items: center;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 999px;
    color: #0f172a;
    display: inline-flex;
    font-size: .86rem;
    font-weight: 900;
    gap: 8px;
    padding: 8px 11px;
    text-decoration: none;
}

.role-action-footer a:hover,
.role-action-footer a:focus {
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

.role-action-footer .role-action-secondary-link {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #0369a1;
    padding-left: 0;
    padding-right: 0;
}

.dashboard-role-state-card-compact .dashboard-section-title {
    margin-bottom: 0;
}

.dashboard-role-state-card-compact p {
    color: #64748b;
    font-size: .86rem;
    font-weight: 750;
    margin: 0;
}

.dashboard-customize-subtle {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.dashboard-customize-subtle a {
    color: #64748b;
    font-size: .82rem;
    font-weight: 850;
    text-decoration: none;
}

.dashboard-summary-grid,
.dashboard-mini-stat-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-summary-card,
.dashboard-mini-stat {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    display: grid;
    gap: 4px;
    min-height: 112px;
    padding: 13px;
    text-decoration: none;
}

.dashboard-summary-card {
    align-content: start;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.dashboard-summary-card:hover,
.dashboard-summary-card:focus {
    border-color: #bfdbfe;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.dashboard-summary-card-schedule { background: linear-gradient(135deg, #eff6ff, #ffffff); border-color: #bfdbfe; }
.dashboard-summary-card-learning { background: linear-gradient(135deg, #ecfdf5, #ffffff); border-color: #bbf7d0; }
.dashboard-summary-card-reports { background: linear-gradient(135deg, #f5f3ff, #ffffff); border-color: #ddd6fe; }
.dashboard-summary-card-live { background: linear-gradient(135deg, #ccfbf1, #ffffff); border-color: #99f6e4; }
.dashboard-summary-card-messages { background: linear-gradient(135deg, #e0f2fe, #ffffff); border-color: #bae6fd; }
.dashboard-summary-card-finance { background: linear-gradient(135deg, #fef9c3, #ffffff); border-color: #fde68a; }
.dashboard-summary-card-users { background: linear-gradient(135deg, #fce7f3, #ffffff); border-color: #fbcfe8; }

.dashboard-summary-card i,
.dashboard-mini-stat i {
    color: #2563eb;
    font-size: 1.1rem;
}

.dashboard-summary-card strong,
.dashboard-mini-stat strong {
    color: #0f172a;
    font-size: .98rem;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.dashboard-summary-card em {
    color: #64748b;
    font-size: .82rem;
    font-style: normal;
    font-weight: 700;
}

.dashboard-session-strip {
    border-top: 1px solid #e2e8f0;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
    padding-top: 12px;
}

.dashboard-session-strip div {
    background: #f8fafc;
    border-radius: 14px;
    min-width: 0;
    padding: 10px;
}

.dashboard-session-strip strong,
.dashboard-session-strip span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-session-strip strong {
    color: #0f172a;
    font-weight: 900;
}

.dashboard-session-strip span {
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
}

.dashboard-support-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}

.helpful-tools-grid,
.dashboard-tool-list {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.helpful-tool-card,
.dashboard-tool-link {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    color: #0f172a;
    display: flex;
    gap: 10px;
    min-height: 86px;
    padding: 12px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

button.helpful-tool-card,
button.dashboard-tool-link {
    text-align: left;
    width: 100%;
}

.helpful-tools-grid[data-tool-count="4"],
.helpful-tools-grid[data-tool-count="8"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.helpful-tools-grid[data-tool-count="3"],
.helpful-tools-grid[data-tool-count="6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.helpful-tools-grid[data-tool-count="5"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.helpful-tools-grid[data-tool-count="5"] .helpful-tool-card {
    grid-column: span 2;
}

.helpful-tools-grid[data-tool-count="5"] .helpful-tool-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.helpful-tools-grid[data-tool-count="5"] .helpful-tool-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.dashboard-tool-link:hover,
.dashboard-tool-link:focus {
    border-color: #bfdbfe;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.helpful-tool-card i,
.dashboard-tool-link i {
    align-items: center;
    background: #eff6ff;
    border-radius: 14px;
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 auto;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.helpful-tool-card-schedule,
.dashboard-tool-link-schedule { background: #eff6ff; border-color: #bfdbfe; }
.helpful-tool-card-learning,
.dashboard-tool-link-learning { background: #ecfdf5; border-color: #bbf7d0; }
.helpful-tool-card-availability,
.dashboard-tool-link-availability { background: #f0fdf4; border-color: #d9f99d; }
.helpful-tool-card-reports,
.dashboard-tool-link-reports { background: #f5f3ff; border-color: #ddd6fe; }
.helpful-tool-card-live,
.dashboard-tool-link-live { background: #ccfbf1; border-color: #99f6e4; }
.helpful-tool-card-messages,
.dashboard-tool-link-messages { background: #e0f2fe; border-color: #bae6fd; }
.helpful-tool-card-finance,
.dashboard-tool-link-finance { background: #fef9c3; border-color: #fde68a; }
.helpful-tool-card-users,
.dashboard-tool-link-users { background: #fce7f3; border-color: #fbcfe8; }
.helpful-tool-card-settings,
.dashboard-tool-link-settings { background: #f8fafc; border-color: #cbd5e1; }

.helpful-tool-card strong,
.helpful-tool-card em,
.dashboard-tool-link strong,
.dashboard-tool-link em {
    display: block;
}

.dashboard-tool-link strong {
    font-size: .9rem;
    font-weight: 900;
}

.dashboard-tool-link em {
    color: #64748b;
    font-size: .8rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.35;
}

.dashboard-tool-link small {
    color: #64748b;
    display: block;
    font-size: .76rem;
    font-weight: 800;
    margin-top: 4px;
}

.helpful-tool-action {
    color: #0f766e;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 900;
    margin-top: 6px;
}

.settings-profile-card,
.settings-install-card {
    align-items: stretch;
    background: #f8fafc;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    display: grid;
    gap: 16px;
    padding: 16px;
}

.settings-profile-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.settings-profile-summary div {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
}

.settings-profile-summary dt {
    color: #64748b;
    font-size: .76rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.settings-profile-summary dd {
    color: #0f172a;
    font-weight: 900;
    margin: 0;
    overflow-wrap: anywhere;
}

.settings-install-card {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
}

.settings-install-card strong {
    color: #0f172a;
    display: block;
    font-size: 1rem;
    margin-bottom: 4px;
}

.settings-install-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.pwa-install-modal[hidden] {
    display: none;
}

.pwa-install-modal {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 18px;
    position: fixed;
    z-index: 3000;
}

.pwa-install-modal-backdrop {
    background: rgba(15, 23, 42, .5);
    inset: 0;
    position: absolute;
}

.pwa-install-dialog {
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    max-width: 520px;
    padding: 20px;
    position: relative;
    width: min(100%, 520px);
}

.pwa-install-dialog h2 {
    font-size: 1.2rem;
    font-weight: 900;
    margin: 0 32px 10px 0;
}

.pwa-install-dialog li {
    margin-bottom: 8px;
}

.pwa-install-modal-close {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #0f172a;
    display: inline-flex;
    font-size: 1.4rem;
    height: 32px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 32px;
}

.dashboard-prayer-results {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, minmax(92px, 1fr));
}

.dashboard-prayer-prompt {
    align-items: center;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .28);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-height: 76px;
}

.dashboard-prayer-prompt i {
    color: #0f766e;
    font-size: 1.25rem;
}

.dashboard-prayer-prompt span {
    color: #0f172a;
    font-weight: 900;
    margin-right: auto;
}

.auth-brand-header {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.auth-brand-main {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.auth-brand-title {
    min-width: 0;
}

.auth-brand-main h1,
.auth-brand-main h2 {
    margin-bottom: 0;
}

.auth-portal-name {
    color: #0f172a;
    font-size: 1.14rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.12;
    white-space: nowrap;
}

.auth-page-title {
    border-top: 1px solid rgba(148, 163, 184, .22);
    color: #0f172a;
    display: block;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.18;
    margin-top: 0;
    padding-top: 12px;
    width: 100%;
}

.auth-page-title-row {
    width: 100%;
}

.dashboard-mini-stat {
    min-height: 88px;
}

.dashboard-mini-stat span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.google-workspace-status-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.google-workspace-status-card {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 8px;
    min-width: 0;
    overflow: hidden;
    padding: 12px 14px;
    word-break: normal;
}

.google-workspace-status-card strong,
.google-workspace-status-card .fw-semibold {
    display: block;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: normal;
}

.live-link-bulk-actions {
    align-items: center;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(180px, 240px) minmax(220px, 1fr) auto auto;
    padding: 10px;
}

.live-link-row-action {
    position: relative;
}

.live-link-row-action > summary {
    list-style: none;
}

.live-link-row-action > summary::-webkit-details-marker {
    display: none;
}

.dashboard-setup-card {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.dashboard-setup-card h2 {
    font-size: 1rem;
    font-weight: 900;
    margin: 0 0 4px;
}

.dashboard-setup-card p {
    color: #64748b;
    margin: 0;
}

.dashboard-inline-form {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: min(430px, 100%);
}

.dashboard-inline-form .form-select {
    min-width: 230px;
}

.supervisor-team-status {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(240px, 1.4fr) repeat(4, minmax(140px, 1fr));
}

.supervisor-team-dual-list {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.supervisor-team-list {
    display: flex;
    flex-direction: column;
    min-height: 480px;
}

.supervisor-team-list-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.supervisor-team-list-head span {
    color: #64748b;
    display: block;
    font-size: .84rem;
}

.supervisor-team-scroll {
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 8px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    max-height: 520px;
    min-height: 320px;
    overflow: auto;
    padding: 8px;
}

.supervisor-team-row {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    margin: 0;
    padding: 9px 10px;
}

label.supervisor-team-row {
    cursor: pointer;
}

.supervisor-team-row span {
    min-width: 0;
}

.supervisor-team-row strong,
.supervisor-team-row small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.supervisor-team-row small {
    color: #64748b;
    font-size: .78rem;
}

.supervisor-team-row em {
    color: #64748b;
    font-size: .76rem;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.auth-language-switcher {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 0;
    z-index: 20;
}

[dir="rtl"] .auth-language-switcher {
    justify-content: center;
}

.auth-language-label {
    color: #64748b;
    font-size: .76rem;
    font-weight: 800;
}

.auth-language-switcher .form-select {
    background-color: rgba(255, 255, 255, .94);
    border-color: #cbd5e1;
    border-radius: 999px;
    box-shadow: none;
    color: #0f172a;
    font-size: .76rem;
    font-weight: 800;
    min-height: 34px;
    min-width: 70px;
    padding-bottom: 4px;
    padding-top: 4px;
    text-transform: uppercase;
}

.student-report-template-panel,
.student-report-official-footer {
    background: #f8fafc;
    border: 1px solid #dbe7e4;
    border-radius: 8px;
    padding: 10px 12px;
}

.student-report-official-footer {
    color: #64748b;
    font-size: .82rem;
    margin-top: 12px;
}

.student-report-official-footer a {
    color: #0f766e;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 1199.98px) {
    .role-dashboard-grid,
    .role-dashboard-grid[data-card-count="4"],
    .role-dashboard-grid[data-card-count="8"],
    .dashboard-summary-grid,
    .dashboard-mini-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-support-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-tool-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-prayer-results {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .supervisor-team-status,
    .supervisor-team-dual-list {
        grid-template-columns: 1fr;
    }
    .helpful-tools-grid,
    .helpful-tools-grid[data-tool-count],
    .helpful-tools-grid[data-tool-count="5"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .helpful-tools-grid[data-tool-count="5"] .helpful-tool-card,
    .helpful-tools-grid[data-tool-count="5"] .helpful-tool-card:nth-child(4),
    .helpful-tools-grid[data-tool-count="5"] .helpful-tool-card:nth-child(5) {
        grid-column: auto;
    }
    .payroll-preview-guide {
        grid-template-columns: 1fr;
    }
    .payroll-workflow-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .settings-profile-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .settings-install-card {
        grid-template-columns: 1fr;
    }
    .settings-install-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .dashboard-welcome-strip,
    .dashboard-setup-card {
        align-items: stretch;
        grid-template-columns: 1fr;
    }
    .live-link-bulk-actions {
        grid-template-columns: 1fr;
    }
    .dashboard-welcome-strip {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 13px 14px;
    }
    .dashboard-welcome-copy p {
        font-size: .9rem;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dashboard-welcome-meta {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .dashboard-welcome-clocks {
        justify-content: flex-start;
        max-width: none;
        width: 100%;
    }
    .dashboard-clock-chip {
        min-width: 0;
        flex: 1 1 132px;
    }
    .role-dashboard-grid,
    .role-dashboard-grid[data-card-count="4"],
    .role-dashboard-grid[data-card-count="8"],
    .dashboard-summary-grid,
    .dashboard-mini-stat-grid,
    .dashboard-session-strip,
    .dashboard-tool-list,
    .helpful-tools-grid,
    .helpful-tools-grid[data-tool-count] {
        grid-template-columns: 1fr;
    }
    .dashboard-prayer-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .auth-brand-header {
        align-items: flex-start;
    }
    .settings-profile-summary {
        grid-template-columns: 1fr;
    }
    .settings-install-actions .btn {
        width: 100%;
    }
    .role-action-card {
        border-radius: 16px;
        min-height: 146px;
        padding: 13px;
    }
    .role-action-body {
        gap: 10px;
    }
    .role-action-footer a {
        min-height: 38px;
    }
    .dashboard-role-state-card-compact {
        padding: 12px 14px;
    }
    .dashboard-role-state-card-compact h2 {
        font-size: 1rem;
        margin-bottom: 2px;
    }
    .dashboard-role-state-card-compact p {
        font-size: .82rem;
    }
    .dashboard-family-status-chips {
        margin-top: 7px;
    }
    .dashboard-section[data-family-mobile-card-first] {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
    .dashboard-section[data-family-mobile-card-first] .dashboard-section-title {
        margin-bottom: 8px;
    }
    .dashboard-customize-subtle {
        justify-content: flex-start;
    }
    .dashboard-section-title {
        align-items: flex-start;
        flex-direction: column;
    }
    .supervisor-team-list-head,
    .supervisor-team-row {
        align-items: stretch;
    }
    .supervisor-team-list-head {
        flex-direction: column;
    }
    .supervisor-team-row {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .supervisor-team-row em,
    .supervisor-team-row .btn {
        grid-column: 2;
        justify-self: flex-start;
    }
    .dashboard-inline-form {
        align-items: stretch;
        flex-direction: column;
    }
    .dashboard-inline-form .form-select {
        min-width: 0;
    }
    .my-times-bulk-bar,
    .schedule-collection-bulk-bar {
        align-items: stretch;
        flex-direction: column;
    }
    .payroll-workflow-strip {
        grid-template-columns: 1fr;
    }
}

/* Final cascade guards for smart workflow UI. */
.resource-category-card summary {
    grid-template-columns: 44px minmax(0, 1fr) auto 18px;
}

.certificate-preview {
    background: linear-gradient(135deg, #fff7ed, #f8fafc);
    border: 1px solid rgba(146, 64, 14, .18);
    border-radius: 8px;
    padding: 14px;
}

.certificate-frame {
    aspect-ratio: 1.414 / 1;
    background:
        radial-gradient(circle at 12% 15%, rgba(234, 179, 8, .16), transparent 18%),
        linear-gradient(135deg, #fffdf7, #fff7ed 45%, #ffffff);
    border: 10px double #991b1b;
    border-radius: 8px;
    color: #431407;
    min-height: 420px;
    padding: 14px;
}

@media (max-width: 767.98px) {
    .resource-category-card summary {
        grid-template-columns: 44px minmax(0, 1fr) 18px;
    }
    .certificate-frame {
        min-height: 520px;
    }
}

.dashboard-role-state-card,
.parent-child-linking,
.parent-child-onboarding .parent-child-step {
    border-color: rgba(15, 23, 42, .10);
}

.dashboard-role-state-card {
    background: linear-gradient(135deg, #f8fafc, #fff7ed);
}

.dashboard-role-state-card .text-muted,
.parent-child-linking .text-muted {
    color: #475569 !important;
}

.theme-dark .dashboard-role-state-card,
.theme-dark .parent-child-linking,
.theme-dark .parent-child-onboarding .parent-child-step {
    background: #111827;
    border-color: rgba(148, 163, 184, .28);
    color: #e5e7eb;
}

.theme-dark .dashboard-role-state-card .text-muted,
.theme-dark .parent-child-linking .text-muted,
.theme-dark .parent-child-onboarding .text-muted {
    color: #cbd5e1 !important;
}

.theme-dark .mobile-main-nav {
    background: rgba(15, 23, 42, .98);
    border-color: rgba(148, 163, 184, .30);
}

@supports (-webkit-touch-callout: none) {
    .mobile-main-nav {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
}

.public-course-offer-body {
    background:
        linear-gradient(135deg, rgba(255, 247, 237, .92) 0%, rgba(248, 250, 252, .95) 48%, rgba(236, 254, 255, .92) 100%),
        radial-gradient(circle at 16% 10%, rgba(250, 204, 21, .12), transparent 30%);
    color: #0f172a;
    min-height: 100vh;
}

.program-offer-public-wrap {
    --offer-space-xs: 4px;
    --offer-space-sm: 8px;
    --offer-space-md: 12px;
    --offer-space-lg: 16px;
    --offer-page-max: 1280px;
    --offer-page-gutter: 28px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--offer-space-sm);
    margin: 0 auto;
    max-width: var(--offer-page-max);
    min-height: calc(100svh - 18px);
    padding: var(--offer-space-sm) 0 10px;
    width: min(calc(100vw - var(--offer-page-gutter)), var(--offer-page-max));
}

.program-offer-standalone-wrap {
    justify-content: flex-start;
    max-width: var(--offer-page-max);
}

.program-offer-portal-wrap {
    --offer-page-max: 1220px;
    justify-content: flex-start;
    max-width: var(--offer-page-max);
    min-height: min(760px, calc(100svh - 112px));
    padding-top: calc(var(--offer-space-sm) - 2px);
    padding-bottom: 8px;
    width: min(100%, var(--offer-page-max));
}

.program-offer-hero-card,
.program-offer-join-card {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
    overflow: hidden;
}

.program-offer-hero-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,255,255,.9) 48%, rgba(236,253,245,.9)),
        radial-gradient(circle at 0 0, rgba(20, 184, 166, .13), transparent 34%),
        radial-gradient(circle at 100% 0, rgba(250, 204, 21, .10), transparent 30%);
    display: grid;
    gap: var(--offer-space-md);
    grid-template-columns: minmax(0, 65fr) minmax(340px, 35fr);
    min-height: 332px;
    padding: var(--offer-space-md);
}

.program-offer-brand-lockup {
    align-items: center;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    color: #0f172a;
    display: inline-flex;
    font-weight: 700;
    gap: var(--offer-space-sm);
    margin-bottom: var(--offer-space-xs);
    padding: var(--offer-space-xs) var(--offer-space-sm);
}

.program-offer-brand-lockup img {
    height: 32px;
    object-fit: contain;
    width: 32px;
}

.program-offer-hero-card-gold {
    background:
        linear-gradient(135deg, #fff7ed, #ffffff 58%, #ecfeff),
        radial-gradient(circle at 0 0, rgba(250, 204, 21, .16), transparent 32%);
}

.program-offer-hero-copy h1 {
    font-size: 2.24rem;
    letter-spacing: 0;
    line-height: 1.08;
    margin: 0 0 var(--offer-space-xs);
    max-width: 760px;
}

.program-offer-hero-copy p {
    color: #475569;
    font-size: .97rem;
    margin-bottom: var(--offer-space-sm);
    max-width: 720px;
}

.program-offer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--offer-space-sm);
    margin-bottom: var(--offer-space-sm);
}

.program-offer-badges span {
    align-items: center;
    background: rgba(248, 250, 252, .86);
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 999px;
    color: #164e63;
    display: inline-flex;
    font-size: .88rem;
    font-weight: 700;
    gap: var(--offer-space-xs);
    padding: calc(var(--offer-space-xs) + 2px) var(--offer-space-sm);
}

.program-offer-badges span:first-child {
    background: rgba(248, 250, 252, .68);
    border-color: rgba(148, 163, 184, .24);
    color: #64748b;
    font-size: .82rem;
    font-weight: 650;
}

.program-offer-primary-cta {
    border-radius: 8px;
    font-size: 1rem;
    min-height: 44px;
    padding: .5rem .95rem;
}

.program-offer-hero-bottom {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--offer-space-sm);
}

.program-offer-card-visual {
    align-self: stretch;
    background:
        radial-gradient(circle at 12% 16%, rgba(20, 184, 166, .22), transparent 30%),
        radial-gradient(circle at 85% 0%, rgba(250, 204, 21, .22), transparent 34%),
        linear-gradient(145deg, #ecfeff, #fff7ed 76%);
    border: 1px solid rgba(14, 116, 144, .18);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: var(--offer-space-xs);
    height: 100%;
    justify-content: space-between;
    min-height: 0;
    padding: var(--offer-space-md);
    position: relative;
    width: 100%;
}

.program-offer-card-topline,
.program-offer-card-visual span {
    color: #0f766e;
    font-weight: 700;
}

.program-offer-card-title {
    color: #0f172a;
    font-size: 1.34rem;
    line-height: 1.12;
}

.program-offer-card-note {
    align-self: end;
    color: #475569;
    font-size: .88rem;
    font-weight: 700;
}

.program-offer-price-countdown-row {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: var(--offer-space-sm);
    margin-top: var(--offer-space-xs);
}

.program-offer-summary-price {
    align-self: stretch;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 8px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .08);
    display: inline-grid;
    justify-self: start;
    margin-top: 0;
    min-width: 124px;
    padding: var(--offer-space-sm) var(--offer-space-sm);
}

.program-offer-summary-price span {
    color: #0f766e;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.program-offer-summary-price strong {
    color: #0f172a;
    font-size: 2.18rem;
    font-weight: 900;
    line-height: 1;
    margin-top: 3px;
}

.program-offer-card-countdown {
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(15, 118, 110, .14);
    border-radius: 8px;
    color: #0f766e;
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    justify-content: center;
    min-width: 148px;
    padding: var(--offer-space-sm);
}

.program-offer-card-countdown span {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.program-offer-card-countdown strong {
    color: #0f766e;
    font-size: .88rem;
    line-height: 1.1;
}

.program-offer-join-card {
    padding: 22px;
}

.program-offer-entry-option {
    align-items: center;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 8px;
    color: #0f172a;
    display: flex;
    font-weight: 800;
    gap: 12px;
    min-height: 58px;
    padding: 12px 14px;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.program-offer-entry-option:hover {
    border-color: rgba(20, 184, 166, .55);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
    color: #0f172a;
    transform: translateY(-1px);
}

.program-offer-entry-option i {
    align-items: center;
    background: #ccfbf1;
    border-radius: 999px;
    color: #0f766e;
    display: inline-flex;
    height: 38px;
    flex: 0 0 38px;
    justify-content: center;
    width: 38px;
}

.program-offer-join-rows {
    display: grid;
    gap: 9px;
}

.program-offer-modal-actions {
    display: grid;
    gap: var(--offer-space-sm);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.program-offer-audience-choice {
    background: linear-gradient(135deg, rgba(236, 254, 255, .78), rgba(255, 247, 237, .86));
    border: 1px solid rgba(20, 184, 166, .18);
    border-radius: 8px;
    padding: var(--offer-space-sm);
}

.program-offer-modal-choice {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: 46px;
    width: 100%;
}

.program-offer-action-row {
    width: 100%;
}

.program-offer-action-row span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.program-offer-action-row .program-offer-action-arrow {
    background: transparent;
    color: #64748b;
    flex: 0 0 auto;
    height: auto;
    width: auto;
}

.program-offer-readiness-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.program-offer-readiness-grid > div {
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 8px;
    padding: 14px;
}

.program-offer-readiness-grid span {
    color: #64748b;
    display: block;
    font-size: .85rem;
}

.program-offer-readiness-grid strong {
    display: block;
    margin-top: 4px;
}

.program-offer-countdown,
.program-offer-price-panel,
.program-offer-share-card,
.program-offer-payment-card,
.program-offer-coupon-card,
.program-offer-crosslink-card,
.program-offer-contact-card,
.program-offer-info-tile,
.program-offer-status-card,
.program-offer-join-modal {
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

.program-offer-countdown,
.program-offer-price-panel {
    display: inline-flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0;
    min-width: 236px;
    padding: .72rem .9rem;
}

.program-offer-countdown span,
.program-offer-price-panel span,
.program-offer-payment-method span {
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.program-offer-countdown strong,
.program-offer-price-panel strong {
    color: #0f766e;
    font-size: 1.06rem;
}

.program-offer-price-panel small {
    color: #475569;
}

.program-offer-share-card,
.program-offer-contact-card {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--offer-space-sm);
    justify-content: space-between;
    padding: var(--offer-space-sm) var(--offer-space-md);
}

.program-offer-share-card {
    margin-top: var(--offer-space-sm) !important;
    margin-bottom: 0 !important;
}

.program-offer-payment-card,
.program-offer-coupon-card,
.program-offer-crosslink-card {
    padding: 1rem;
}

.program-offer-payment-method {
    background: #f8fafc;
    border: 1px solid rgba(15, 118, 110, .16);
    border-radius: 8px;
    padding: 1rem;
}

.program-offer-payment-method strong {
    color: #0f172a;
    display: block;
    margin-top: .2rem;
}

.program-offer-info-tiles {
    align-items: stretch;
    display: grid;
    gap: var(--offer-space-sm);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.program-offer-info-tile {
    align-items: flex-start;
    color: #0f172a;
    display: grid;
    gap: 4px;
    height: 100%;
    min-height: 78px;
    padding: var(--offer-space-sm);
    text-decoration: none;
}

.program-offer-info-tile i {
    align-items: center;
    background: #ecfeff;
    border-radius: 999px;
    color: #0f766e;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.program-offer-info-tile span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.program-offer-info-tile strong {
    font-size: .86rem;
    line-height: 1.22;
}

.program-offer-info-link:hover {
    border-color: rgba(20, 184, 166, .45);
    color: #0f172a;
    transform: translateY(-1px);
}

.program-offer-join-modal {
    overflow: hidden;
}

.program-offer-modal-dialog {
    max-width: 540px;
}

.program-offer-join-modal .modal-body {
    padding-top: 10px;
}

.program-offer-status-card {
    padding: 14px 16px;
}

.program-offer-status-card strong,
.program-offer-status-card span {
    display: block;
}

.program-offer-status-card strong {
    color: #0f172a;
}

.program-offer-status-card span {
    color: #475569;
    font-size: .94rem;
    margin-top: 2px;
}

@media (max-width: 767.98px) {
    .auth-portal-name {
        font-size: 1.04rem;
    }
    .program-offer-public-wrap {
        padding: 9px 9px 13px;
        min-height: 0;
        width: 100%;
    }
    .program-offer-hero-card {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 13px;
    }
    .program-offer-hero-copy h1 {
        font-size: 1.78rem;
    }
    .program-offer-card-visual {
        min-height: 0;
    }
    .program-offer-summary-price strong {
        font-size: 2.1rem;
    }
    .program-offer-readiness-grid {
        grid-template-columns: 1fr;
    }
    .program-offer-info-tiles {
        grid-template-columns: 1fr;
    }
    .program-offer-modal-actions {
        grid-template-columns: 1fr;
    }
    .program-offer-action-row span {
        white-space: normal;
    }
    .program-offer-share-card,
    .program-offer-contact-card {
        align-items: stretch;
    }
    .program-offer-share-card .btn,
    .program-offer-contact-card .btn {
        width: 100%;
    }
    .registration-student-field-row,
    .registration-student-row {
        grid-template-columns: 1fr;
    }
    .registration-student-row-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

.registration-preferred-language-rows {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.registration-preferred-language-row {
    align-items: center;
    display: flex;
    gap: .45rem;
    width: 100%;
}

.registration-preferred-language-row .form-select {
    flex: 1 1 auto;
    min-width: 0;
}

.registration-language-icon-button {
    align-items: center;
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
    width: 34px;
}

.users-collapsible-section {
    display: block;
}

.users-section-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    list-style: none;
}

.users-section-summary::-webkit-details-marker {
    display: none;
}

.users-collapsible-body {
    margin-top: 1rem;
}

.user-edit-focus-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .35rem 0 .75rem;
}

.user-edit-focus-tabs a,
.user-edit-focus-tabs summary,
.user-edit-focus-tabs span {
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    display: inline-flex;
    font-size: .82rem;
    line-height: 1.1;
    padding: .35rem .55rem;
    text-decoration: none;
}

.user-edit-focus-tabs details {
    position: relative;
}

.user-edit-focus-tabs details[open] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem;
}

@media (max-width: 480px) {
    .registration-language-icon-button {
        flex-basis: 32px;
        height: 32px;
        width: 32px;
    }
}

.family-courses-page details > summary {
    cursor: pointer;
    list-style: none;
}

.family-courses-page details > summary::-webkit-details-marker {
    display: none;
}

.family-course-row {
    background: linear-gradient(135deg, #f8fafc, #eef6ff);
    border: 1px solid rgba(15, 23, 42, .09);
    border-left: 4px solid #0f766e;
    border-radius: 8px;
    display: grid;
    gap: .35rem;
    margin-top: .65rem;
    padding: .75rem;
}

.family-course-row:nth-of-type(3n) {
    background: linear-gradient(135deg, #fff7ed, #f0fdfa);
    border-left-color: #d97706;
}

.family-course-row:nth-of-type(3n + 1) {
    background: linear-gradient(135deg, #f0fdfa, #eff6ff);
    border-left-color: #2563eb;
}

.family-courses-soon-panel,
.family-course-section,
[data-family-course-payment-cart],
[data-family-course-my-courses] {
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 8px;
    padding: 1rem;
}

.family-courses-soon-panel {
    background: linear-gradient(135deg, #eff6ff, #ecfdf5);
    max-width: 680px;
}

[data-family-course-payment-cart] {
    background: linear-gradient(135deg, #fff8db, #fff7ed);
}

[data-family-course-my-courses] {
    background: linear-gradient(135deg, #eef7ff, #ecfdf5);
}

.family-course-section-add {
    background: linear-gradient(135deg, #eef6ff, #f5f3ff);
}

[data-family-course-short-programs] {
    background: linear-gradient(135deg, #ecfeff, #fff7ed);
}

.family-course-enrollment-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    align-items: start;
}

.family-course-steps {
    display: grid;
    gap: .85rem;
}

.family-course-step {
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    padding: .95rem;
}

.family-course-step-head {
    align-items: center;
    display: flex;
    gap: .7rem;
    margin-bottom: .8rem;
}

.family-course-step-index {
    align-items: center;
    background: #0f766e;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 30px;
    font-weight: 700;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.family-course-subject-level-row {
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .75fr);
}

.family-subject-picker {
    position: relative;
}

.family-subject-trigger {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(37, 99, 235, .22);
    border-radius: 8px;
    color: #0f172a;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    min-height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    text-align: left;
    width: 100%;
}

.family-subject-trigger-label {
    color: #334155;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.family-subject-trigger-chevron,
.family-subject-section-chevron {
    color: #2563eb;
    flex: 0 0 auto;
    font-size: .85rem;
}

.family-subject-trigger small,
.family-subject-option small {
    display: none;
}

.family-subject-section-toggle {
    align-items: center;
    background: #f8fafc;
    border: 0;
    border-radius: 6px;
    color: #334155;
    display: flex;
    font-weight: 600;
    gap: .45rem;
    margin-bottom: .25rem;
    padding: .45rem .55rem;
    text-align: left;
    width: 100%;
}

.family-subject-theme-emerald .family-subject-section-toggle { background: #ecfdf5; color: #065f46; }
.family-subject-theme-emerald .family-subject-section-icon { color: #059669; }
.family-subject-theme-sky .family-subject-section-toggle { background: #eff6ff; color: #1e3a8a; }
.family-subject-theme-sky .family-subject-section-icon { color: #2563eb; }
.family-subject-theme-amber .family-subject-section-toggle { background: #fffbeb; color: #92400e; }
.family-subject-theme-amber .family-subject-section-icon { color: #d97706; }
.family-subject-theme-violet .family-subject-section-toggle { background: #f5f3ff; color: #5b21b6; }
.family-subject-theme-violet .family-subject-section-icon { color: #7c3aed; }

.family-subject-option {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #334155;
    font-weight: 500;
    padding: .4rem .55rem;
    text-align: left;
}

.family-course-section-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    list-style: none;
}

.family-course-section-summary::-webkit-details-marker { display: none; }

.family-course-section-toggle-hint {
    color: #64748b;
    font-size: .85rem;
    font-weight: 500;
}

.family-course-section-card {
    background: linear-gradient(135deg, rgba(238, 247, 255, .95), rgba(236, 253, 245, .92));
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.family-course-section-card[open],
.family-course-section-details[open] > .family-course-section-summary {
    border-color: rgba(14, 116, 144, .28);
}

.family-course-section-toggle {
    min-width: 72px;
}

.family-course-status-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-left: 4px solid #0f766e;
    border-radius: 10px;
    padding: .85rem 1rem;
}

.family-course-status-assessment {
    border-left-color: #0284c7;
}

.family-review-modal .family-review-edit-btn {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .18);
    min-height: 44px;
}

.family-review-modal .family-review-agree-btn {
    min-height: 44px;
}

.family-review-modal-footer {
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, .08);
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.family-review-modal-body {
    padding-bottom: 1rem;
}

.family-review-toggle-btn.is-reviewed {
    border-color: rgba(16, 185, 129, .45);
}

.family-post-review-actions .btn {
    min-height: 44px;
}

.family-short-program-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1rem;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.family-short-program-card:hover,
.family-short-program-card:focus-within {
    border-color: rgba(14, 116, 144, .35);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.family-short-tone-juniors { background: linear-gradient(180deg, #ecfeff, #fff); }
.family-short-tone-salah { background: linear-gradient(180deg, #eef2ff, #fff); }
.family-short-tone-teens { background: linear-gradient(180deg, #fff7ed, #fff); }

.family-short-program-card-head {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.family-short-program-form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.family-short-program-submit {
    margin-top: auto;
}

.subject-catalog-card-interactive {
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.subject-catalog-card-interactive:hover,
.subject-catalog-card-interactive:focus-within {
    border-color: rgba(14, 116, 144, .35);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.sidebar-current-location {
    background: rgba(14, 116, 144, .055);
    border: 1px solid rgba(14, 116, 144, .12);
    border-radius: 7px;
    color: #0f766e;
    font-size: .74rem;
    line-height: 1.25;
    margin: .5rem 0;
    padding: .35rem .5rem;
}

.finance-operations-link {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    display: flex;
    gap: .55rem;
    min-height: 44px;
    padding: .65rem .75rem;
}

.finance-operations-link i {
    color: var(--brand-2);
    font-size: 1rem;
}

.finance-operations-link:hover,
.finance-operations-link:focus {
    border-color: color-mix(in srgb, var(--brand-2) 35%, var(--line));
    color: var(--text);
}

.finance-operations-group {
    min-width: 0;
}

.finance-operations-group-title {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    margin-bottom: .45rem;
    text-transform: uppercase;
}

.finance-operations-link span {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.finance-operations-link strong {
    color: inherit;
    font-size: .9rem;
    line-height: 1.2;
}

.finance-operations-link small {
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.25;
}

.payroll-row-review-details summary,
[data-link-queue-admin-details] summary {
    cursor: pointer;
}

@media (max-width: 991.98px) {
    .sidebar-current-location {
        font-size: .7rem;
        margin: .35rem 0;
        padding: .3rem .45rem;
    }
}

@media (max-width: 575.98px) {
    .sidebar-current-location {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .family-review-modal-dialog {
        margin-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }

    .family-course-enrollment-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.family-full-month-estimate {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    padding: .75rem;
}

.family-review-card,
.family-plan-summary {
    max-width: 360px;
}

.family-admin-details summary {
    cursor: pointer;
    font-size: .85rem;
}

.family-submit-actions .btn,
.family-submit-actions-mobile .btn {
    min-height: 44px;
}

.family-subject-menu {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
    left: 0;
    max-height: 360px;
    overflow: auto;
    padding: .45rem;
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 20;
}

.family-subject-section-toggle {
    align-items: center;
    background: #f8fafc;
    border: 0;
    border-radius: 6px;
    color: #0f172a;
    display: flex;
    font-weight: 700;
    gap: .45rem;
    margin-bottom: .25rem;
    padding: .5rem;
    text-align: left;
    width: 100%;
}

.family-subject-options {
    display: grid;
    gap: .25rem;
    margin-bottom: .35rem;
}

.family-subject-option {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: .45rem .55rem;
    text-align: left;
}

.family-subject-option:hover,
.family-subject-option.is-selected {
    background: #eff6ff;
    border-color: rgba(37, 99, 235, .22);
}

.family-weekday-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .7rem;
}

.family-course-custom-duration.is-hidden {
    display: none;
}

.family-plan-summary {
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
    padding: 1rem;
    position: sticky;
    top: 1rem;
}

.family-plan-summary-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .7rem;
}

.family-plan-lines {
    display: grid;
    gap: .55rem;
    margin: 0;
}

.family-plan-lines div {
    align-items: start;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    display: grid;
    gap: .5rem;
    grid-template-columns: minmax(90px, .6fr) minmax(0, 1fr);
    padding-bottom: .45rem;
}

.family-plan-lines dt {
    color: #64748b;
    font-size: .8rem;
    font-weight: 700;
}

.family-plan-lines dd {
    margin: 0;
    text-align: right;
}

.family-plan-source {
    background: #f8fafc;
    border-radius: 6px;
    margin-top: .8rem;
    padding: .55rem;
}

@media (max-width: 900px) {
    .family-course-enrollment-grid,
    .family-course-subject-level-row {
        grid-template-columns: 1fr;
    }

    .family-plan-summary {
        position: static;
    }
}

.payment-adjust-form {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 8px;
    padding: .85rem;
}

.payment-adjust-form .form-control,
.payment-adjust-form .form-select {
    min-width: 0;
}

/* ============================================================
   Teacher Application — Mobbin-informed visual polish (additive)
   Display only. No backend field names, data-* hooks, routes,
   validation, or workflow are changed by these rules.
   ============================================================ */

/* Hero "Apply -> Academy review -> Interview or approval" mini flow */
.ta-hero-flow {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 6px;
    margin: 16px 0 0;
    padding: 0;
}
.ta-hero-flow li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: #0f172a;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 999px;
    padding: 6px 14px 6px 6px;
}
.ta-hero-flow li:not(:last-child)::after {
    content: "\2192"; /* arrow */
    margin-left: 6px;
    color: #94a3b8;
    font-weight: 700;
}
.ta-hero-flow-step {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0f766e;
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
}

/* Friendly document upload cards (Airwallex / PayPal style references) */
.application-section-documents .ta-upload-card {
    height: 100%;
    border: 1px dashed rgba(15, 23, 42, .22);
    border-radius: 12px;
    padding: 14px 16px;
    background: #fcfdff;
    transition: border-color .15s ease, background .15s ease;
}
.application-section-documents .ta-upload-card:hover,
.application-section-documents .ta-upload-card:focus-within {
    border-color: var(--application-accent, #0f766e);
    background: #fff;
}
.application-section-documents .ta-upload-card .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #0f172a;
}
.application-section-documents .ta-upload-card .form-label i {
    color: var(--application-accent, #0f766e);
}
.ta-upload-hint {
    margin-top: 6px;
    color: #64748b;
}

/* Privacy reassurance note in Documents */
.ta-privacy-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ta-privacy-note i {
    color: #0f766e;
    font-size: 1.05rem;
    line-height: 1.4;
}

/* Slightly calmer submit row spacing + clearer button hierarchy on mobile */
@media (max-width: 575.98px) {
    .ta-hero-flow li {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
    .ta-hero-flow li:not(:last-child)::after {
        display: none;
    }
    .teacher-submit-row .btn {
        width: 100%;
    }
    .application-section-documents .ta-upload-card {
        padding: 12px 13px;
    }
}

/* Admin list pagination — compact square page buttons */
.admin-list-pagination-controls .admin-list-pagination-page,
.admin-list-pagination-controls .admin-list-pagination-nav {
    min-width: 2rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}
.admin-list-pagination-controls .admin-list-pagination-page.is-active {
    font-weight: 600;
}

/* Classroom links — collapsed sections by default */
.classroom-links-emergency-panel {
    border-color: rgba(217, 119, 6, .28);
    box-shadow: none;
}

.classroom-links-emergency-panel > details > summary {
    border-bottom: 1px solid rgba(217, 119, 6, .16);
    padding-bottom: .35rem;
}

.classroom-links-collapsible > summary {
    cursor: pointer;
    list-style: none;
}
.classroom-links-collapsible > summary::-webkit-details-marker {
    display: none;
}
.classroom-links-collapsible > summary::before {
    content: '▸';
    display: inline-block;
    margin-inline-end: 0.35rem;
    transition: transform 0.15s ease;
}
.classroom-links-collapsible[open] > summary::before {
    transform: rotate(90deg);
}

/* G4 browser UAT UX cleanup */
.g4-ux-cleanup {
    min-width: 0;
}

.ux-info-icon {
    color: #2563eb;
    cursor: help;
    font-size: 0.92em;
    margin-inline-start: 0.25rem;
}

.ux-status-chip {
    border-radius: 0.25rem;
    font-weight: 600;
    white-space: nowrap;
}

.ux-status-chip.is-ok {
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #86efac;
}

.ux-status-chip.is-info {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border: 1px solid #93c5fd;
}

.ux-status-chip.is-review {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fcd34d;
}

.ux-status-chip.is-danger {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5;
}

.ux-status-chip.is-muted {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1;
}

.ux-status-chip.is-advanced {
    background: #ecfeff !important;
    color: #155e75 !important;
    border: 1px solid #67e8f9;
}

.ux-shortcut-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.ux-admin-details {
    border-radius: 0.375rem;
}

.ux-admin-details > summary {
    cursor: pointer;
}

.ux-cleanup-actions,
.ux-payment-intake-grid {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .ux-payment-intake-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* G4.2 Portal Materials admin preview */
.portal-materials-page {
    --pm-border: rgba(15, 23, 42, .1);
}

.portal-materials-toolbar {
    display: grid;
    gap: .75rem;
}

.portal-materials-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
}

.portal-materials-search > i {
    color: #64748b;
    font-size: 1rem;
}

.portal-materials-chips {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .1rem;
}

.portal-materials-chips .btn {
    white-space: nowrap;
}

.portal-materials-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}

.portal-materials-mini-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    border: 1px solid var(--pm-border);
    border-radius: 8px;
    background: #fff;
    padding: .95rem;
}

.portal-materials-mini-icon,
.portal-materials-row-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    background: #f1edff;
    color: #5b21b6;
    flex: 0 0 auto;
}

.portal-materials-mini-icon.is-green { background: #dcfce7; color: #15803d; }
.portal-materials-mini-icon.is-orange { background: #ffedd5; color: #c2410c; }

.portal-materials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.portal-material-card {
    overflow: hidden;
    border: 1px solid var(--pm-border);
    border-radius: 8px;
    background: #fff;
    min-width: 0;
}

.portal-material-card-art {
    display: grid;
    place-items: center;
    min-height: 112px;
}

.portal-material-card-art i {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    font-size: 2rem;
    background: rgba(255, 255, 255, .68);
}

.portal-material-card-body {
    padding: .95rem;
}

.portal-material-card.is-green .portal-material-card-art { background: #dcfce7; color: #15803d; }
.portal-material-card.is-purple .portal-material-card-art { background: #ede9fe; color: #6d28d9; }
.portal-material-card.is-blue .portal-material-card-art { background: #dbeafe; color: #1d4ed8; }
.portal-material-card.is-orange .portal-material-card-art { background: #ffedd5; color: #c2410c; }
.portal-material-card.is-rose .portal-material-card-art { background: #ffe4e6; color: #be123c; }
.portal-material-card.is-teal .portal-material-card-art { background: #ccfbf1; color: #0f766e; }

@media (max-width: 991.98px) {
    .portal-materials-overview,
    .portal-materials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .portal-materials-search {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .portal-materials-search .btn {
        grid-column: 1 / -1;
    }
    .portal-materials-overview,
    .portal-materials-grid {
        grid-template-columns: 1fr;
    }
    .portal-material-card {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
    }
    .portal-material-card-art {
        min-height: auto;
    }
    .portal-material-card-art i {
        width: 48px;
        height: 48px;
        font-size: 1.45rem;
    }
}