/* /Components/Admin/AdminConsultantsPage.razor.rz.scp.css */
/* AdminConsultantsPage.razor.css */
.ac-page[b-mu9ee2sald] { color: var(--text-main); max-width: 1000px; margin: 0 auto; }
.page-header[b-mu9ee2sald] { margin-bottom: 18px; }
.page-title[b-mu9ee2sald] { font-size: 18px; font-weight: 700; }
.page-sub[b-mu9ee2sald] { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.ac-alert[b-mu9ee2sald] { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: #f87171; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }
.ac-loading[b-mu9ee2sald], .ac-empty[b-mu9ee2sald] { text-align: center; color: var(--text-dim); padding: 44px 0; font-size: 14px; }

.btn[b-mu9ee2sald] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-mu9ee2sald] { opacity: .6; cursor: not-allowed; }
.btn-success[b-mu9ee2sald] { background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.3); color: #4ade80; }
.btn-success:hover[b-mu9ee2sald] { background: rgba(74,222,128,.22); }
.btn-danger[b-mu9ee2sald] { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25); color: #f87171; }
.btn-danger:hover[b-mu9ee2sald] { background: rgba(248,113,113,.2); }
.btn-ghost[b-mu9ee2sald] { background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--text-dim); text-decoration: none; }
.btn-ghost:hover[b-mu9ee2sald] { background: var(--accent-glow-soft); color: var(--text-main); }
.btn-sm[b-mu9ee2sald] { padding: 6px 12px; font-size: 12px; }
.badge[b-mu9ee2sald] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-mu9ee2sald] { background: rgba(74,222,128,.11); color: #4ade80; border: 1px solid rgba(74,222,128,.22); }

.tabs[b-mu9ee2sald] { display: flex; gap: 4px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 18px; width: fit-content; flex-wrap: wrap; }
.tab[b-mu9ee2sald] { padding: 7px 14px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; color: var(--text-faint); cursor: pointer; }
.tab.active[b-mu9ee2sald] { background: var(--glass-bg); color: var(--text-main); box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* pending consultant card */
.cons-card[b-mu9ee2sald] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 12px; display: flex; gap: 14px; }
.cc-av[b-mu9ee2sald] { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; color: var(--accent-text-on-fill); flex-shrink: 0; }
.cc-body[b-mu9ee2sald] { flex: 1; min-width: 0; }
.cc-name[b-mu9ee2sald] { font-size: 15px; font-weight: 700; }
.cc-title[b-mu9ee2sald] { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.cc-meta[b-mu9ee2sald] { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--text-faint); margin-top: 8px; }
.cc-bio[b-mu9ee2sald] { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-top: 8px; }
.cc-cert[b-mu9ee2sald] { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
.cc-actions[b-mu9ee2sald] { display: flex; align-items: flex-start; flex-shrink: 0; }

/* session payment card */
.sess-card[b-mu9ee2sald] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 14px; }
.sc-main[b-mu9ee2sald] { flex: 1; }
.sc-title[b-mu9ee2sald] { font-size: 13.5px; font-weight: 700; }
.sc-meta[b-mu9ee2sald] { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--text-faint); margin-top: 5px; }
.sc-right[b-mu9ee2sald] { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.sc-fee[b-mu9ee2sald] { font-size: 16px; font-weight: 800; color: #4ade80; }

.sc-detail-grid[b-mu9ee2sald] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin-top: 10px; }
.sc-d[b-mu9ee2sald] { display: flex; flex-direction: column; gap: 1px; }
.sc-d span[b-mu9ee2sald] { font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint); }
.sc-d strong[b-mu9ee2sald] { font-size: 12px; color: var(--text-main); font-weight: 600; }
.sc-linkrow[b-mu9ee2sald] { margin-top: 10px; display: flex; gap: 8px; align-items: stretch; }
.sc-link-input[b-mu9ee2sald] { flex: 1; padding: 8px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: #4fa8ff; font-family: ui-monospace, monospace; font-size: 11.5px; outline: none; }
.sc-link-input:focus[b-mu9ee2sald] { border-color: rgba(79,168,255,.55); }
.sc-link-input[b-mu9ee2sald]::placeholder { color: var(--text-faint); font-family: inherit; }

/* all consultants grid */
.all-grid[b-mu9ee2sald] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.all-card[b-mu9ee2sald] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 14px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: border-color .15s; }
.all-card:hover[b-mu9ee2sald] { border-color: rgba(79,168,255,.4); }
.all-card.open[b-mu9ee2sald] { border-color: rgba(79,168,255,.5); }
.al-top[b-mu9ee2sald] { display: flex; gap: 12px; align-items: flex-start; }
.al-av[b-mu9ee2sald] { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--accent-text-on-fill); flex-shrink: 0; }
.al-body[b-mu9ee2sald] { flex: 1; }
.al-name[b-mu9ee2sald] { font-size: 13.5px; font-weight: 700; }
.al-title[b-mu9ee2sald] { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.al-meta[b-mu9ee2sald] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.al-stars[b-mu9ee2sald] { font-size: 11px; color: #fbbf24; }
.al-sessions[b-mu9ee2sald] { font-size: 10.5px; color: var(--text-faint); }
.al-toggle[b-mu9ee2sald] { font-size: 10px; color: var(--text-faint); flex-shrink: 0; }

/* expanded consultant detail */
.al-detail[b-mu9ee2sald] { border-top: 1px solid var(--glass-border); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.al-d-grid[b-mu9ee2sald] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.al-d[b-mu9ee2sald] { display: flex; flex-direction: column; gap: 1px; }
.al-d span[b-mu9ee2sald] { font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint); }
.al-d strong[b-mu9ee2sald] { font-size: 12px; color: var(--text-main); font-weight: 600; }
.al-chips[b-mu9ee2sald] { display: flex; flex-wrap: wrap; gap: 6px; }
.al-chip[b-mu9ee2sald] { font-size: 10.5px; padding: 2px 9px; border-radius: 20px; background: var(--accent-glow-soft); border: 1px solid rgba(79,168,255,.22); color: var(--text-dim); }
.al-d-label[b-mu9ee2sald] { font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint); }
.al-d-text[b-mu9ee2sald] { font-size: 12px; color: var(--text-main); line-height: 1.55; }
.al-d-foot[b-mu9ee2sald] { margin-top: 2px; }

@media (max-width: 720px) {
    .cons-card[b-mu9ee2sald], .sess-card[b-mu9ee2sald] { flex-direction: column; }
}
/* /Components/Admin/AdminEducationalClipsPage.razor.rz.scp.css */
.ac-page[b-p6nn00lcdt] { animation: fadeIn-b-p6nn00lcdt .25s ease; }
@keyframes fadeIn-b-p6nn00lcdt { from { opacity: 0; } to { opacity: 1; } }

.ac-header[b-p6nn00lcdt] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ac-title[b-p6nn00lcdt] { font-size: 18px; font-weight: 700; color: var(--text-main); }
.ac-sub[b-p6nn00lcdt] { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.ac-btn[b-p6nn00lcdt] {
    padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700;
    cursor: pointer; border: 1px solid var(--glass-border); background: var(--glass-bg-soft);
    color: var(--text-dim); transition: .15s;
}
.ac-btn:hover[b-p6nn00lcdt] { color: var(--text-main); border-color: var(--accent-glow); }
.ac-btn.primary[b-p6nn00lcdt] { background: var(--accent-gradient); color: var(--accent-text-on-fill); border: none; }
.ac-btn:disabled[b-p6nn00lcdt] { opacity: .6; cursor: default; }

.ac-flash[b-p6nn00lcdt] { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.ac-flash.ok[b-p6nn00lcdt] { background: rgba(74,222,128,.12); color: #4ade80; border: 1px solid rgba(74,222,128,.3); }
.ac-flash.err[b-p6nn00lcdt] { background: rgba(248,113,113,.12); color: #f87171; border: 1px solid rgba(248,113,113,.3); }

.ac-layout[b-p6nn00lcdt] { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }
@media (max-width: 980px) { .ac-layout[b-p6nn00lcdt] { grid-template-columns: 1fr; } }

/* list */
.ac-list[b-p6nn00lcdt] { display: flex; flex-direction: column; gap: 10px; }
.ac-empty[b-p6nn00lcdt] { text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 13px;
    background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); }

.ac-row[b-p6nn00lcdt] {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md);
    transition: .15s;
}
.ac-row.active[b-p6nn00lcdt] { border-color: var(--accent-glow); box-shadow: 0 0 16px var(--accent-glow-soft); }
.ac-row-thumb[b-p6nn00lcdt] { width: 72px; height: 48px; border-radius: var(--radius-sm); overflow: hidden; background: #000; flex-shrink: 0; }
.ac-row-thumb img[b-p6nn00lcdt] { width: 100%; height: 100%; object-fit: cover; }
.ac-row-thumb-ph[b-p6nn00lcdt] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--accent-glow-soft); }
.ac-row-main[b-p6nn00lcdt] { flex: 1; min-width: 0; }
.ac-row-title[b-p6nn00lcdt] { font-size: 14px; font-weight: 700; color: var(--text-main); }
.ac-row-meta[b-p6nn00lcdt] { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
.ac-row-actions[b-p6nn00lcdt] { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.ac-toggle[b-p6nn00lcdt] {
    padding: 5px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; cursor: pointer;
    border: 1px solid rgba(100,120,150,.3); background: rgba(100,120,150,.12); color: var(--text-faint);
}
.ac-toggle.on[b-p6nn00lcdt] { border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.14); color: #4ade80; }
.ac-mini[b-p6nn00lcdt] {
    width: 30px; height: 30px; border-radius: var(--radius-sm); cursor: pointer;
    border: 1px solid var(--glass-border); background: var(--glass-bg-soft); color: var(--text-dim); font-size: 13px;
}
.ac-mini:hover[b-p6nn00lcdt] { color: var(--text-main); }
.ac-mini.danger:hover[b-p6nn00lcdt] { color: #f87171; border-color: rgba(248,113,113,.4); }

/* form */
.ac-form[b-p6nn00lcdt] {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); padding: 18px; display: flex; flex-direction: column; gap: 6px;
}
.ac-form-title[b-p6nn00lcdt] { font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
.ac-lbl[b-p6nn00lcdt] { font-size: 11.5px; font-weight: 600; color: var(--text-faint); margin-top: 8px; }
.ac-inp[b-p6nn00lcdt] {
    width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; box-sizing: border-box;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-main); outline: none;
    font-family: inherit;
}
.ac-inp:focus[b-p6nn00lcdt] { border-color: var(--accent-glow); }
.ac-area[b-p6nn00lcdt] { min-height: 64px; resize: vertical; }
.ac-two[b-p6nn00lcdt] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ac-listed-field[b-p6nn00lcdt] { display: flex; flex-direction: column; }
.ac-switch[b-p6nn00lcdt] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-main); margin-top: 6px; cursor: pointer; }
.ac-switch input[b-p6nn00lcdt] { width: 16px; height: 16px; accent-color: #4ade80; }

.ac-upload[b-p6nn00lcdt] {
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12.5px; color: var(--text-dim);
    background: var(--glass-bg-soft); border: 1.5px dashed var(--glass-border); transition: .15s; margin-top: 4px;
}
.ac-upload:hover[b-p6nn00lcdt] { border-color: var(--accent-glow); color: var(--text-main); }
.ac-uploading[b-p6nn00lcdt] { font-size: 12px; color: #fbbf24; margin-top: 4px; }
.ac-vid-preview[b-p6nn00lcdt] { width: 100%; max-height: 180px; border-radius: var(--radius-sm); margin-top: 8px; background: #000; }
.ac-thumb-preview[b-p6nn00lcdt] { max-width: 160px; border-radius: var(--radius-sm); margin-top: 8px; border: 1px solid var(--glass-border); }

.ac-err[b-p6nn00lcdt] { font-size: 12.5px; color: #f87171; margin-top: 8px; }
.ac-form-actions[b-p6nn00lcdt] { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
/* /Components/Admin/AdminMarketplacePage.razor.rz.scp.css */
/* ============================================================
   AdminMarketplacePage.razor.css — CSS Isolation (scoped)
   Mirrors marketplace-v2.html "Admin Review". Surfaces/text from theme.css;
   status & category colours stay literal (brand-semantic).
   ============================================================ */

.adm-mk-page[b-oekn2r1h72] {
    color: var(--text-main);
    max-width: 1000px;
    margin: 0 auto;
}

/* buttons */
.btn[b-oekn2r1h72] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-oekn2r1h72] { opacity: .6; cursor: not-allowed; }
.btn-success[b-oekn2r1h72] { background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.3); color: #4ade80; }
.btn-success:hover[b-oekn2r1h72] { background: rgba(74,222,128,.22); }
.btn-danger[b-oekn2r1h72] { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25); color: #f87171; }
.btn-danger:hover[b-oekn2r1h72] { background: rgba(248,113,113,.2); }
.btn-ghost[b-oekn2r1h72] { background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-sm[b-oekn2r1h72] { padding: 6px 12px; font-size: 12px; }
.btn-xs[b-oekn2r1h72] { padding: 4px 9px; font-size: 11px; }

.page-header[b-oekn2r1h72] { margin-bottom: 18px; }
.page-title[b-oekn2r1h72] { font-size: 18px; font-weight: 700; }
.page-sub[b-oekn2r1h72] { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.adm-alert[b-oekn2r1h72] { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: #f87171; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }
.adm-loading[b-oekn2r1h72], .adm-empty[b-oekn2r1h72] { text-align: center; color: var(--text-dim); padding: 50px 0; font-size: 14px; }

/* stat cards */
.stat-grid[b-oekn2r1h72] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.stat-card[b-oekn2r1h72] { padding: 14px 16px; border-radius: var(--radius-md); background: var(--glass-bg); border: 1px solid var(--glass-border); }
.stat-icon[b-oekn2r1h72] { font-size: 18px; margin-bottom: 5px; }
.stat-val[b-oekn2r1h72] { font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
.stat-lbl[b-oekn2r1h72] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.s-green[b-oekn2r1h72]  { border-top: 2px solid rgba(74,222,128,.4); }  .s-green  .stat-val[b-oekn2r1h72] { color: #4ade80; }
.s-red[b-oekn2r1h72]    { border-top: 2px solid rgba(248,113,113,.4); } .s-red    .stat-val[b-oekn2r1h72] { color: #f87171; }
.s-yellow[b-oekn2r1h72] { border-top: 2px solid rgba(251,191,36,.4); }  .s-yellow .stat-val[b-oekn2r1h72] { color: #fbbf24; }
.s-blue[b-oekn2r1h72]   { border-top: 2px solid rgba(79,168,255,.4); }  .s-blue   .stat-val[b-oekn2r1h72] { color: #4fa8ff; }

/* tabs */
.tabs[b-oekn2r1h72] { display: flex; gap: 4px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 18px; width: fit-content; }
.tab[b-oekn2r1h72] { padding: 7px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text-faint); cursor: pointer; }
.tab.active[b-oekn2r1h72] { background: var(--glass-bg); color: var(--text-main); box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* badges */
.bdg[b-oekn2r1h72] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.bdg-new[b-oekn2r1h72]  { background: rgba(74,222,128,.2);  color: #4ade80; border: 1px solid rgba(74,222,128,.4); }
.bdg-used[b-oekn2r1h72] { background: rgba(251,191,36,.2);  color: #fbbf24; border: 1px solid rgba(251,191,36,.4); }
.bdg-free[b-oekn2r1h72] { background: rgba(34,211,238,.2);  color: #22d3ee; border: 1px solid rgba(34,211,238,.4); }
.bdg-job[b-oekn2r1h72]  { background: rgba(129,140,248,.2); color: #818cf8; border: 1px solid rgba(129,140,248,.4); }
.bdg-work[b-oekn2r1h72] { background: rgba(167,139,250,.2); color: #a78bfa; border: 1px solid rgba(167,139,250,.4); }
.bdg-camp[b-oekn2r1h72] { background: rgba(251,146,60,.2);  color: #fb923c; border: 1px solid rgba(251,146,60,.4); }

.card-new[b-oekn2r1h72]  { --card-accent: #4ade80; } .card-used[b-oekn2r1h72] { --card-accent: #fbbf24; }
.card-free[b-oekn2r1h72] { --card-accent: #22d3ee; } .card-job[b-oekn2r1h72]  { --card-accent: #818cf8; }
.card-work[b-oekn2r1h72] { --card-accent: #a78bfa; } .card-camp[b-oekn2r1h72] { --card-accent: #fb923c; }

/* pending card */
.pend-card[b-oekn2r1h72] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); display: flex; gap: 14px; padding: 14px; margin-bottom: 12px; position: relative; overflow: hidden; }
.pend-card[b-oekn2r1h72]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--card-accent, var(--accent-gradient)); }
.pc-img[b-oekn2r1h72] { width: 110px; height: 110px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--glass-bg-soft); display: flex; align-items: center; justify-content: center; }
.pc-img img[b-oekn2r1h72] { width: 100%; height: 100%; object-fit: cover; }
.pc-noimg[b-oekn2r1h72] { font-size: 40px; opacity: .4; }
.pc-main[b-oekn2r1h72] { flex: 1; min-width: 0; }
.pc-top[b-oekn2r1h72] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pc-date[b-oekn2r1h72] { font-size: 11px; color: var(--text-faint); }
.pc-title[b-oekn2r1h72] { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.pc-desc[b-oekn2r1h72] { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-meta[b-oekn2r1h72] { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--text-faint); margin-bottom: 10px; }
.pc-grid[b-oekn2r1h72] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc-box[b-oekn2r1h72] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 8px 10px; }
.pc-box-title[b-oekn2r1h72] { font-size: 10px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.pc-box-line[b-oekn2r1h72] { font-size: 11.5px; color: var(--text-dim); padding: 1px 0; }
.pc-box-line strong[b-oekn2r1h72] { color: var(--text-main); }
.pc-actions[b-oekn2r1h72] { display: flex; flex-direction: column; gap: 6px; justify-content: center; flex-shrink: 0; }

/* approved row */
.appr-row[b-oekn2r1h72] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 8px; position: relative; overflow: hidden; }
.appr-row[b-oekn2r1h72]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--card-accent, var(--accent-gradient)); }
.appr-img[b-oekn2r1h72] { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--glass-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 24px; opacity: .9; }
.appr-img img[b-oekn2r1h72] { width: 100%; height: 100%; object-fit: cover; }
.appr-body[b-oekn2r1h72] { flex: 1; min-width: 0; }
.appr-title[b-oekn2r1h72] { font-size: 13.5px; font-weight: 700; }
.appr-meta[b-oekn2r1h72] { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-faint); margin-top: 4px; align-items: center; }
.appr-right[b-oekn2r1h72] { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.appr-fee[b-oekn2r1h72] { font-size: 14px; font-weight: 800; color: #4fa8ff; }

/* modals */
.modal-overlay[b-oekn2r1h72] { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-close[b-oekn2r1h72] { width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 13px; }

.reject-modal[b-oekn2r1h72] { background: var(--glass-bg); backdrop-filter: blur(24px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); width: 460px; max-width: 100%; display: flex; flex-direction: column; }
.rj-head[b-oekn2r1h72] { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--glass-border); }
.rj-title[b-oekn2r1h72] { font-size: 14px; font-weight: 700; }
.rj-body[b-oekn2r1h72] { padding: 16px 18px; }
.rj-ad[b-oekn2r1h72] { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.form-label[b-oekn2r1h72] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; display: block; margin-bottom: 5px; }
.form-textarea[b-oekn2r1h72] { width: 100%; padding: 9px 12px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; resize: vertical; min-height: 70px; line-height: 1.5; }
.form-textarea:focus[b-oekn2r1h72] { border-color: rgba(79,168,255,.55); }
.rj-note[b-oekn2r1h72] { font-size: 11px; color: #fbbf24; margin-top: 8px; }
.rj-footer[b-oekn2r1h72] { padding: 12px 18px; border-top: 1px solid var(--glass-border); display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 720px) {
    .stat-grid[b-oekn2r1h72] { grid-template-columns: repeat(2, 1fr); }
    .pc-grid[b-oekn2r1h72] { grid-template-columns: 1fr; }
    .pend-card[b-oekn2r1h72] { flex-direction: column; }
    .pc-actions[b-oekn2r1h72] { flex-direction: row; }
}
/* /Components/Admin/AdminScenarioBuilderPage.razor.rz.scp.css */
.sb-page[b-y1m299o3qa] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
}

/* ── header ── */
.sb-header[b-y1m299o3qa] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-title[b-y1m299o3qa] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
}

.sb-sub[b-y1m299o3qa] {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-dim);
    max-width: 620px;
    line-height: 1.5;
}

.sb-head-actions[b-y1m299o3qa] {
    display: flex;
    gap: 8px;
}

.sb-btn[b-y1m299o3qa] {
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all .18s ease;
}

.sb-btn:hover[b-y1m299o3qa] {
    color: var(--text-main);
    border-color: var(--c-accent-border);
}

.sb-btn.primary[b-y1m299o3qa] {
    color: var(--accent-text-on-fill);
    background: var(--accent-gradient);
    border-color: transparent;
    box-shadow: 0 0 16px var(--accent-glow-soft);
}

.sb-btn.primary:hover[b-y1m299o3qa] {
    color: var(--accent-text-on-fill);
    filter: brightness(1.08);
}

/* ── saved panel ── */
.sb-panel[b-y1m299o3qa] {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg-soft);
    padding: 16px;
}

.sb-panel-head[b-y1m299o3qa] {
    margin-bottom: 12px;
}

.sb-panel-title[b-y1m299o3qa] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

/* ── flash ── */
.sb-flash[b-y1m299o3qa] {
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid var(--c-success-border);
    background: var(--c-success-soft);
    color: var(--c-success);
}

.sb-flash.err[b-y1m299o3qa] {
    border-color: var(--c-error-border);
    background: var(--c-error-soft);
    color: var(--c-error);
}

/* ── saved list ── */
.sb-empty[b-y1m299o3qa] {
    padding: 48px 20px;
    text-align: center;
    font-size: 13.5px;
    color: var(--text-dim);
    background: var(--glass-bg-soft);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-lg);
}

.sb-grid[b-y1m299o3qa] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.sb-card[b-y1m299o3qa] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    transition: border-color .18s ease, transform .18s ease;
}

.sb-card:hover[b-y1m299o3qa] {
    border-color: var(--c-accent-border);
    transform: translateY(-2px);
}

.sb-card-top[b-y1m299o3qa] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sb-av[b-y1m299o3qa] {
    font-size: 26px;
    line-height: 1;
}

.sb-card-main[b-y1m299o3qa] {
    flex: 1;
    min-width: 0;
}

.sb-card-title[b-y1m299o3qa] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-card-meta[b-y1m299o3qa] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-faint);
}

.sb-price[b-y1m299o3qa] {
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.sb-price.free[b-y1m299o3qa] { color: var(--c-success); }
.sb-price.paid[b-y1m299o3qa] { color: var(--c-warn); }

.sb-card-desc[b-y1m299o3qa] {
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sb-tags[b-y1m299o3qa] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sb-tag[b-y1m299o3qa] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--c-accent);
    background: var(--c-accent-soft);
    border: 1px solid var(--c-accent-border);
}

.sb-card-foot[b-y1m299o3qa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--glass-border);
}

.sb-date[b-y1m299o3qa] {
    font-size: 10.5px;
    color: var(--text-faint);
}

.sb-card-btns[b-y1m299o3qa] {
    display: flex;
    gap: 6px;
}

.sb-mini[b-y1m299o3qa] {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all .15s ease;
}

.sb-mini:hover[b-y1m299o3qa] {
    color: var(--text-main);
    border-color: var(--c-accent-border);
}

.sb-mini.danger:hover[b-y1m299o3qa] {
    color: var(--c-error);
    border-color: var(--c-error-border);
    background: var(--c-error-soft);
}
/* /Components/Admin/DashboardHome.razor.rz.scp.css */
/* ============================================================
   DashboardHome.razor.css — System Admin → Dashboard
   CSS Isolation; content-only (no sidebar/topbar — those come
   from SharedLayout). All colours via theme.css var(--…).
   Mirrors admin-dashboard-content.html.
   ============================================================ */

/* ── page header ── */
.page-header[b-y1coc97m8i] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.page-title[b-y1coc97m8i] { font-size: 18px; font-weight: 700; }
.page-sub[b-y1coc97m8i]   { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

/* ── states ── */
.dash-loading[b-y1coc97m8i] { font-size: 13px; color: var(--text-dim); padding: 30px 0; text-align: center; }
.dash-alert[b-y1coc97m8i] { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); color: #f87171; font-size: 13px; }
.panel-empty[b-y1coc97m8i] { font-size: 12px; color: var(--text-faint); text-align: center; padding: 18px 0; }

/* ── badges ── */
.badge[b-y1coc97m8i] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.b-green[b-y1coc97m8i]  { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-red[b-y1coc97m8i]    { background: rgba(248,113,113,0.11); color: #f87171; border: 1px solid rgba(248,113,113,0.22); }
.b-yellow[b-y1coc97m8i] { background: rgba(251,191,36,0.11); color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.b-gray[b-y1coc97m8i]   { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }

/* ── stat cards ── */
.stats-grid[b-y1coc97m8i] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.stat-card[b-y1coc97m8i] { padding: 16px 18px; border-radius: var(--radius-md); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); }
.stat-icon[b-y1coc97m8i] { font-size: 22px; margin-bottom: 8px; display: block; }
.stat-val[b-y1coc97m8i] { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.stat-lbl[b-y1coc97m8i] { font-size: 11px; color: var(--text-dim); margin-top: 3px; font-weight: 500; }
.stat-meta[b-y1coc97m8i] { font-size: 10.5px; color: var(--text-faint); margin-top: 6px; }
.stat-up[b-y1coc97m8i]   { color: #4ade80; font-weight: 600; }
.stat-warn[b-y1coc97m8i] { color: #fbbf24; font-weight: 600; }
.stat-blue[b-y1coc97m8i]   { border-top: 2px solid rgba(79,168,255,0.4); }
.stat-green[b-y1coc97m8i]  { border-top: 2px solid rgba(74,222,128,0.4); }
.stat-purple[b-y1coc97m8i] { border-top: 2px solid rgba(167,139,250,0.4); }
.stat-amber[b-y1coc97m8i]  { border-top: 2px solid rgba(251,191,36,0.4); }

/* ── panel ── */
.two-col[b-y1coc97m8i] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.panel[b-y1coc97m8i] { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; }
.panel-head[b-y1coc97m8i] { padding: 13px 16px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; }
.panel-title[b-y1coc97m8i] { font-size: 12.5px; font-weight: 700; }
.panel-link[b-y1coc97m8i] { font-size: 11px; color: var(--accent-glow); cursor: pointer; opacity: .8; }
.panel-body[b-y1coc97m8i] { padding: 14px 16px; }

/* ── school rows ── */
.school-row[b-y1coc97m8i] { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(100,170,255,0.07); }
.school-row:last-child[b-y1coc97m8i] { border-bottom: none; }
.school-logo[b-y1coc97m8i] { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--accent-text-on-fill); flex-shrink: 0; }
.school-logo.logo-muted[b-y1coc97m8i] { background: rgba(100,120,150,0.3); }
.school-name[b-y1coc97m8i] { font-size: 12.5px; font-weight: 600; }
.school-city[b-y1coc97m8i] { font-size: 10.5px; color: var(--text-dim); }

/* ── expiry alerts ── */
.expiry-row[b-y1coc97m8i] { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); margin-bottom: 6px; }
.expiry-row:last-child[b-y1coc97m8i] { margin-bottom: 0; }
.expiry-warn[b-y1coc97m8i] { background: rgba(251,191,36,0.07); border: 1px solid rgba(251,191,36,0.18); }
.expiry-expired[b-y1coc97m8i] { background: rgba(248,113,113,0.07); border: 1px solid rgba(248,113,113,0.18); }
.expiry-name[b-y1coc97m8i] { font-size: 12px; font-weight: 600; }
.expiry-date-warn[b-y1coc97m8i] { font-size: 11px; color: #fbbf24; }
.expiry-date-exp[b-y1coc97m8i]  { font-size: 11px; color: #f87171; }
.btn-xs[b-y1coc97m8i] { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-sm); font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; border: none; }
.btn-warn[b-y1coc97m8i] { background: rgba(251,191,36,0.15); border: 1px solid rgba(251,191,36,0.3); color: #fbbf24; }

/* ── revenue mini bar chart ── */
.revenue-block[b-y1coc97m8i] { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--glass-border); }
.revenue-label[b-y1coc97m8i] { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.chart-wrap[b-y1coc97m8i] { display: flex; align-items: flex-end; gap: 5px; height: 56px; margin-top: 10px; }
.chart-col[b-y1coc97m8i] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.chart-bar[b-y1coc97m8i] { width: 100%; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #4ade80, rgba(74,222,128,0.4)); }
.chart-lbl[b-y1coc97m8i] { font-size: 9px; color: var(--text-faint); }
.chart-summary[b-y1coc97m8i] { font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.chart-up[b-y1coc97m8i] { color: #4ade80; font-weight: 600; }

/* ── recent activity ── */
.activity-row[b-y1coc97m8i] { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(100,170,255,0.07); }
.activity-row:last-child[b-y1coc97m8i] { border-bottom: none; }
.act-dot[b-y1coc97m8i] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.act-blue[b-y1coc97m8i]   { background: #4fa8ff; }
.act-green[b-y1coc97m8i]  { background: #4ade80; }
.act-amber[b-y1coc97m8i]  { background: #fbbf24; }
.act-purple[b-y1coc97m8i] { background: #a78bfa; }
.act-text[b-y1coc97m8i] { font-size: 12px; flex: 1; line-height: 1.5; }
.act-dim[b-y1coc97m8i]  { color: var(--text-dim); }
.act-time[b-y1coc97m8i] { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }

/* ── responsive ── */
@media (max-width: 980px) {
    .stats-grid[b-y1coc97m8i] { grid-template-columns: repeat(2, 1fr); }
    .two-col[b-y1coc97m8i] { grid-template-columns: 1fr; }
}
/* /Components/Admin/LoginSlidesPage.razor.rz.scp.css */
/* ============================================================
   LoginSlidesPage.razor.css — System Admin → Login Slides
   CSS Isolation; content only. Colours via theme.css var(--…).
   Mirrors admin-login-slides.html.
   ============================================================ */

.ls-page[b-72020t13or] { color: var(--text-main); }

/* ── header ── */
.page-header[b-72020t13or] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-title[b-72020t13or] { font-size: 18px; font-weight: 700; }
.page-sub[b-72020t13or]   { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.ls-alert[b-72020t13or] { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); color: #f87171; font-size: 13px; }
.ls-loading[b-72020t13or] { font-size: 13px; color: var(--text-dim); padding: 30px 0; text-align: center; }

/* ── buttons ── */
.btn[b-72020t13or] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-72020t13or] { opacity: .5; cursor: not-allowed; }
.btn-sm[b-72020t13or] { padding: 6px 12px; font-size: 12px; }
.btn-xs[b-72020t13or] { padding: 4px 9px; font-size: 11px; }
.btn-primary[b-72020t13or] { background: var(--accent-gradient); color: var(--accent-text-on-fill); box-shadow: 0 0 14px var(--accent-glow-soft); }
.btn-primary:not(:disabled):hover[b-72020t13or] { transform: translateY(-1px); }
.btn-ghost[b-72020t13or] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-72020t13or] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.btn-danger[b-72020t13or] { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25); color: #f87171; }

/* ── badges ── */
.badge[b-72020t13or] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-72020t13or] { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-gray[b-72020t13or]  { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }

/* ── stats ── */
.stats-bar[b-72020t13or] { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.stat-pill[b-72020t13or] { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.stat-pill span[b-72020t13or] { color: var(--accent-glow); font-weight: 700; }

/* ── two-col layout ── */
.two-col[b-72020t13or] { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }

/* ── slides list ── */
.slides-list[b-72020t13or] { display: flex; flex-direction: column; gap: 10px; }
.slide-card[b-72020t13or] { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; display: flex; transition: .2s; }
.slide-card:hover[b-72020t13or] { border-color: var(--accent-glow); }
.slide-card.inactive[b-72020t13or] { opacity: .5; }

.drag-handle[b-72020t13or] { width: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 16px; flex-shrink: 0; border-right: 1px solid var(--glass-border); }

.slide-thumb[b-72020t13or] { width: 100px; height: 80px; object-fit: cover; flex-shrink: 0; background: var(--glass-bg-soft); }
.slide-thumb-placeholder[b-72020t13or] { width: 100px; height: 80px; flex-shrink: 0; background: var(--glass-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--text-faint); }

.slide-info[b-72020t13or] { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.slide-order[b-72020t13or] { font-size: 10px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.slide-title[b-72020t13or] { font-size: 13.5px; font-weight: 700; }
.slide-desc[b-72020t13or] { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.slide-actions[b-72020t13or] { display: flex; align-items: center; gap: 6px; padding: 12px 14px; flex-shrink: 0; border-left: 1px solid var(--glass-border); }
.order-btns[b-72020t13or] { display: flex; flex-direction: column; gap: 3px; }
.order-btn[b-72020t13or] { width: 24px; height: 24px; border-radius: 4px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-faint); font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.order-btn:hover[b-72020t13or] { background: var(--accent-glow-soft); color: var(--accent-glow); border-color: var(--accent-glow); }
.order-btn:disabled[b-72020t13or] { opacity: .5; cursor: not-allowed; }

/* ── add/edit form ── */
.form-card[b-72020t13or] { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 18px; position: sticky; top: 0; }
.form-title[b-72020t13or] { font-size: 14px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.form-group[b-72020t13or] { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.form-label[b-72020t13or] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.req[b-72020t13or] { color: #f87171; }
.form-input[b-72020t13or], .form-textarea[b-72020t13or] { width: 100%; padding: 8px 11px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; transition: .15s; }
.form-input:focus[b-72020t13or], .form-textarea:focus[b-72020t13or] { border-color: var(--accent-glow); }
.form-textarea[b-72020t13or] { resize: vertical; min-height: 72px; line-height: 1.5; }
.active-toggle[b-72020t13or] { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }
.active-toggle input[b-72020t13or] { width: 16px; height: 16px; accent-color: var(--accent-glow); cursor: pointer; }

/* ── image upload + preview ── */
.upload-area[b-72020t13or] { display: block; border: 2px dashed var(--glass-border); border-radius: var(--radius-sm); padding: 18px; text-align: center; cursor: pointer; transition: .2s; margin-bottom: 4px; }
.upload-area:hover[b-72020t13or] { border-color: var(--accent-glow); background: var(--accent-glow-soft); }
.upload-icon[b-72020t13or] { font-size: 24px; margin-bottom: 5px; }
.upload-label[b-72020t13or] { font-size: 12px; color: var(--text-dim); }
.upload-hint[b-72020t13or] { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }
.img-preview[b-72020t13or] { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); margin-bottom: 8px; }

/* ── empty ── */
.empty-state[b-72020t13or] { text-align: center; padding: 50px 20px; color: var(--text-faint); }
.empty-state .ei[b-72020t13or] { font-size: 40px; margin-bottom: 10px; opacity: .3; }
.empty-state p[b-72020t13or] { font-size: 13px; }

/* ── responsive ── */
@media (max-width: 900px) {
    .two-col[b-72020t13or] { grid-template-columns: 1fr; }
    .form-card[b-72020t13or] { position: static; }
}
/* /Components/Admin/MenusPage.razor.rz.scp.css */
/* ============================================================
   MenusPage.razor.css — System Admin → Menu Management
   CSS Isolation; content only. Colours via theme.css var(--…).
   Mirrors admin-menus-content.html.
   ============================================================ */

.mp-page[b-68wkjh26io] { color: var(--text-main); }

/* ── header ── */
.page-header[b-68wkjh26io] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-title[b-68wkjh26io] { font-size: 18px; font-weight: 700; }
.page-sub[b-68wkjh26io]   { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.mp-alert[b-68wkjh26io] { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); color: #f87171; font-size: 13px; }
.mp-loading[b-68wkjh26io] { font-size: 13px; color: var(--text-dim); padding: 30px 0; text-align: center; }

/* ── buttons ── */
.btn[b-68wkjh26io] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-68wkjh26io] { opacity: .5; cursor: not-allowed; }
.btn-sm[b-68wkjh26io] { padding: 6px 12px; font-size: 12px; }
.btn-success[b-68wkjh26io] { background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.3); color: #4ade80; }
.btn-danger[b-68wkjh26io]  { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25); color: #f87171; }

/* ── badges ── */
.badge[b-68wkjh26io] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-68wkjh26io] { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-gray[b-68wkjh26io]  { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }

/* ── school selector ── */
.school-selector[b-68wkjh26io] { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
.ss-label[b-68wkjh26io] { font-size: 12px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.ss-select[b-68wkjh26io] { flex: 1; max-width: 320px; padding: 8px 12px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; }
.ss-select:focus[b-68wkjh26io] { border-color: var(--accent-glow); }
.ss-select option[b-68wkjh26io] { background: #0c1a30; color: var(--text-main); }
.ss-spacer[b-68wkjh26io] { flex: 1; }
.ss-actions[b-68wkjh26io] { display: flex; gap: 8px; }
.ss-count[b-68wkjh26io] { font-size: 11px; color: var(--text-faint); white-space: nowrap; }

/* ── group ── */
.menu-group[b-68wkjh26io] { margin-bottom: 6px; }
.group-header[b-68wkjh26io] { display: flex; align-items: center; gap: 8px; padding: 10px 16px 6px; font-size: 10px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .9px; }
.group-header[b-68wkjh26io]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }
.group-count[b-68wkjh26io] { font-size: 9.5px; color: var(--text-faint); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); padding: 1px 7px; border-radius: 20px; }

/* ── menu rows ── */
.menu-table[b-68wkjh26io] { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 14px; }
.menu-row[b-68wkjh26io] { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(100,170,255,0.07); transition: .15s; }
.menu-row:last-child[b-68wkjh26io] { border-bottom: none; }
.menu-row:hover[b-68wkjh26io] { background: var(--accent-glow-soft); }
.menu-row.disabled[b-68wkjh26io] { opacity: .45; }
.mr-icon[b-68wkjh26io] { font-size: 18px; width: 28px; text-align: center; flex-shrink: 0; }
.mr-info[b-68wkjh26io] { flex: 1; min-width: 0; }
.mr-title[b-68wkjh26io] { font-size: 13px; font-weight: 700; }
.mr-component[b-68wkjh26io] { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; font-family: monospace; }
.mr-badge[b-68wkjh26io] { flex-shrink: 0; }
.mr-toggle[b-68wkjh26io] { flex-shrink: 0; }

/* ── toggle switch ── */
.toggle[b-68wkjh26io] { position: relative; width: 40px; height: 22px; cursor: pointer; display: inline-block; }
.toggle input[b-68wkjh26io] { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track[b-68wkjh26io] { position: absolute; inset: 0; border-radius: 11px; background: rgba(100,120,150,0.3); border: 1px solid var(--glass-border); transition: .25s; }
.toggle input:checked + .toggle-track[b-68wkjh26io] { background: rgba(74,222,128,0.3); border-color: rgba(74,222,128,0.5); }
.toggle-thumb[b-68wkjh26io] { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-faint); transition: .25s; pointer-events: none; }
.toggle input:checked ~ .toggle-thumb[b-68wkjh26io] { left: 21px; background: #4ade80; }

/* ── empty state ── */
.empty-state[b-68wkjh26io] { text-align: center; padding: 60px 20px; color: var(--text-faint); }
.empty-state .ei[b-68wkjh26io] { font-size: 40px; margin-bottom: 10px; opacity: .3; }
.empty-state p[b-68wkjh26io] { font-size: 13px; }
/* /Components/Admin/PrivateSessionsPage.razor.rz.scp.css */
/* ============================================================
   PrivateSessionsPage.razor.css — System Admin → Private Sessions
   CSS Isolation; content only. Colours via theme.css var(--…).
   Built in the existing admin page style (tabs + table + glass).
   ============================================================ */

.aps-page[b-vbi9x0q9dv] { color: var(--text-main); }

.page-header[b-vbi9x0q9dv] { margin-bottom: 16px; }
.page-title[b-vbi9x0q9dv] { font-size: 18px; font-weight: 700; }
.page-sub[b-vbi9x0q9dv]   { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.aps-alert[b-vbi9x0q9dv] { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); color: #f87171; font-size: 13px; }

/* ── buttons ── */
.btn[b-vbi9x0q9dv] { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-vbi9x0q9dv] { opacity: .5; cursor: not-allowed; }
.btn-xs[b-vbi9x0q9dv] { padding: 4px 10px; font-size: 11px; }
.btn-success[b-vbi9x0q9dv] { background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.3); color: #4ade80; }
.btn-danger[b-vbi9x0q9dv]  { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25); color: #f87171; }
.btn-ghost[b-vbi9x0q9dv]   { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim); }

/* ── tabs ── */
.tabs[b-vbi9x0q9dv] { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tab[b-vbi9x0q9dv] {
    padding: 7px 15px; border-radius: 20px; font-size: 12px; font-weight: 600;
    cursor: pointer; border: 1px solid var(--glass-border);
    color: var(--text-faint); background: transparent; transition: .15s;
    display: inline-flex; align-items: center; gap: 6px; user-select: none;
}
.tab:hover[b-vbi9x0q9dv] { color: var(--text-main); }
.tab.active[b-vbi9x0q9dv] { background: var(--accent-glow-soft); color: var(--accent-glow); border-color: var(--accent-glow); }
.tab-cnt[b-vbi9x0q9dv] {
    background: rgba(251,191,36,0.2); color: #fbbf24; border-radius: 20px;
    font-size: 10px; font-weight: 700; padding: 1px 7px;
}

/* ── states ── */
.aps-loading[b-vbi9x0q9dv] { font-size: 13px; color: var(--text-dim); padding: 30px 0; text-align: center; }
.aps-empty[b-vbi9x0q9dv] { text-align: center; padding: 50px; color: var(--text-faint); }
.aps-empty .ei[b-vbi9x0q9dv] { font-size: 42px; margin-bottom: 8px; opacity: .3; }

/* ── table ── */
.table-wrap[b-vbi9x0q9dv] { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow-x: auto; }
.aps-table[b-vbi9x0q9dv] { width: 100%; border-collapse: collapse; min-width: 880px; }
.aps-table th[b-vbi9x0q9dv] { text-align: left; font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; padding: 9px 14px; border-bottom: 1px solid var(--glass-border); white-space: nowrap; }
.aps-table td[b-vbi9x0q9dv] { padding: 11px 14px; font-size: 12.5px; border-bottom: 1px solid rgba(100,170,255,0.07); vertical-align: top; }
.aps-table tr:last-child td[b-vbi9x0q9dv] { border-bottom: none; }
.ta-right[b-vbi9x0q9dv] { text-align: right; white-space: nowrap; }
.td-strong[b-vbi9x0q9dv] { font-size: 13px; font-weight: 600; }
.td-sub[b-vbi9x0q9dv] { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.td-when[b-vbi9x0q9dv] { color: var(--text-dim); white-space: nowrap; }
.td-room[b-vbi9x0q9dv] { font-size: 11px; color: var(--text-faint); }
.receipt-link[b-vbi9x0q9dv] { font-size: 11.5px; color: var(--accent-glow); text-decoration: none; }
.receipt-link:hover[b-vbi9x0q9dv] { text-decoration: underline; }

/* ── reject inline form ── */
.reject-row td[b-vbi9x0q9dv] { background: rgba(248,113,113,0.04); }
.reject-box[b-vbi9x0q9dv] { display: flex; flex-direction: column; gap: 8px; }
.reject-text[b-vbi9x0q9dv] {
    width: 100%; min-height: 60px; resize: vertical;
    padding: 8px 10px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12.5px; outline: none;
}
.reject-text:focus[b-vbi9x0q9dv] { border-color: var(--accent-glow); }
.reject-actions[b-vbi9x0q9dv] { display: flex; gap: 8px; }

/* ── online rooms ── */
.rooms-grid[b-vbi9x0q9dv] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.room-card[b-vbi9x0q9dv] {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
}
.room-icon[b-vbi9x0q9dv] { font-size: 20px; flex-shrink: 0; }
.room-name[b-vbi9x0q9dv] { font-size: 12.5px; font-weight: 600; }

/* ── balance ── */
.balance-card[b-vbi9x0q9dv] {
    max-width: 420px; padding: 24px 26px; border-radius: var(--radius-md);
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}
.bal-label[b-vbi9x0q9dv] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.bal-amount[b-vbi9x0q9dv] { font-size: 34px; font-weight: 800; color: var(--accent-glow); margin: 8px 0 6px; letter-spacing: -.5px; }
.bal-sub[b-vbi9x0q9dv] { font-size: 12px; color: var(--text-dim); line-height: 1.6; }
/* /Components/Admin/ScenarioListPage.razor.rz.scp.css */
.scl-page[b-mo06knu64c] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
}

/* ── header ── */
.scl-header[b-mo06knu64c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.scl-title[b-mo06knu64c] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
}

.scl-sub[b-mo06knu64c] {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-dim);
    max-width: 620px;
    line-height: 1.5;
}

.scl-actions[b-mo06knu64c] {
    display: flex;
    gap: 8px;
}

.scl-btn[b-mo06knu64c] {
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all .18s ease;
}

.scl-btn:hover[b-mo06knu64c] {
    color: var(--text-main);
    border-color: var(--c-accent-border);
}

.scl-btn.primary[b-mo06knu64c] {
    color: var(--accent-text-on-fill);
    background: var(--accent-gradient);
    border-color: transparent;
    box-shadow: 0 0 16px var(--accent-glow-soft);
}

.scl-btn.primary:hover[b-mo06knu64c] {
    filter: brightness(1.08);
}

/* ── flash ── */
.scl-flash[b-mo06knu64c] {
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid var(--c-success-border);
    background: var(--c-success-soft);
    color: var(--c-success);
}

.scl-flash.err[b-mo06knu64c] {
    border-color: var(--c-error-border);
    background: var(--c-error-soft);
    color: var(--c-error);
}

/* ── list ── */
.scl-empty[b-mo06knu64c] {
    padding: 48px 20px;
    text-align: center;
    font-size: 13.5px;
    color: var(--text-dim);
    background: var(--glass-bg-soft);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-lg);
}

.scl-grid[b-mo06knu64c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.scl-card[b-mo06knu64c] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    transition: border-color .18s ease, transform .18s ease;
}

.scl-card:hover[b-mo06knu64c] {
    border-color: var(--c-accent-border);
    transform: translateY(-2px);
}

.scl-card-top[b-mo06knu64c] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scl-av[b-mo06knu64c] {
    font-size: 26px;
    line-height: 1;
}

.scl-card-main[b-mo06knu64c] {
    flex: 1;
    min-width: 0;
}

.scl-card-title[b-mo06knu64c] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scl-card-meta[b-mo06knu64c] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-faint);
}

.scl-price[b-mo06knu64c] {
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.scl-price.free[b-mo06knu64c] { color: var(--c-success); }
.scl-price.paid[b-mo06knu64c] { color: var(--c-warn); }

.scl-card-desc[b-mo06knu64c] {
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scl-tags[b-mo06knu64c] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.scl-tag[b-mo06knu64c] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--c-accent);
    background: var(--c-accent-soft);
    border: 1px solid var(--c-accent-border);
}

.scl-card-foot[b-mo06knu64c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--glass-border);
}

.scl-date[b-mo06knu64c] {
    font-size: 10.5px;
    color: var(--text-faint);
}

.scl-card-btns[b-mo06knu64c] {
    display: flex;
    gap: 6px;
}

.scl-mini[b-mo06knu64c] {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all .15s ease;
}

.scl-mini:hover[b-mo06knu64c] {
    color: var(--text-main);
    border-color: var(--c-accent-border);
}

.scl-mini.danger:hover[b-mo06knu64c] {
    color: var(--c-error);
    border-color: var(--c-error-border);
    background: var(--c-error-soft);
}
/* /Components/Admin/SchoolsPage.razor.rz.scp.css */
/* ============================================================
   SchoolsPage.razor.css — System Admin → Schools
   CSS Isolation; all theme colours from theme.css var(--…).
   Mirrors admin-schools.html.
   ============================================================ */

.sp-page[b-ivt0uyc05c] { color: var(--text-main); }

.page-header[b-ivt0uyc05c] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.page-title[b-ivt0uyc05c] { font-size: 18px; font-weight: 700; }
.page-sub[b-ivt0uyc05c]   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ── buttons ── */
.btn[b-ivt0uyc05c] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s; text-decoration: none;
}
.btn:disabled[b-ivt0uyc05c] { opacity: .5; cursor: not-allowed; }
.btn-primary[b-ivt0uyc05c] { background: var(--accent-gradient); color: var(--accent-text-on-fill); box-shadow: 0 0 16px var(--accent-glow-soft); }
.btn-primary:not(:disabled):hover[b-ivt0uyc05c] { transform: translateY(-1px); }
.btn-ghost[b-ivt0uyc05c] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-ivt0uyc05c] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.btn-danger[b-ivt0uyc05c] { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25); color: #f87171; }
.btn-success[b-ivt0uyc05c] { background: linear-gradient(135deg, #4ade80, #86efac); color: #001428; }
.btn-sm[b-ivt0uyc05c] { padding: 6px 12px; font-size: 12px; }

/* ── badges ── */
.badge[b-ivt0uyc05c] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-ivt0uyc05c] { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-red[b-ivt0uyc05c]   { background: rgba(248,113,113,0.11); color: #f87171; border: 1px solid rgba(248,113,113,0.22); }
.b-gray[b-ivt0uyc05c]  { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }

.sp-alert[b-ivt0uyc05c] { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); color: #f87171; font-size: 13px; }

/* ── add school form ── */
.add-form[b-ivt0uyc05c] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 20px; margin-bottom: 16px; display: none; }
.add-form.show[b-ivt0uyc05c] { display: block; }
.add-form-title[b-ivt0uyc05c] { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.form-grid[b-ivt0uyc05c] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-group[b-ivt0uyc05c] { display: flex; flex-direction: column; gap: 4px; }
.form-group.full[b-ivt0uyc05c] { grid-column: 1 / -1; }

/* ── filter bar ── */
.filter-bar[b-ivt0uyc05c] { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.f-search[b-ivt0uyc05c], .f-select[b-ivt0uyc05c] {
    padding: 7px 11px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
}
.f-search[b-ivt0uyc05c] { min-width: 200px; }
.f-search[b-ivt0uyc05c]::placeholder { color: var(--text-faint); }
.f-search:focus[b-ivt0uyc05c], .f-select:focus[b-ivt0uyc05c] { border-color: var(--accent-glow); }
.f-select option[b-ivt0uyc05c] { background: #0c1a30; color: var(--text-main); }

/* ── schools grid ── */
.schools-grid[b-ivt0uyc05c] { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.school-card[b-ivt0uyc05c] { padding: 15px; border-radius: var(--radius-md); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); cursor: pointer; transition: .2s; }
.school-card:hover[b-ivt0uyc05c] { border-color: rgba(79,168,255,0.35); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.school-card.inactive[b-ivt0uyc05c] { opacity: .55; }
.sc-top[b-ivt0uyc05c] { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.sc-logo[b-ivt0uyc05c] { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-gradient); color: var(--accent-text-on-fill); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; flex-shrink: 0; overflow: hidden; }
.sc-logo img[b-ivt0uyc05c] { width: 100%; height: 100%; object-fit: cover; }
.sc-name[b-ivt0uyc05c] { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.sc-city[b-ivt0uyc05c] { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.sc-stats[b-ivt0uyc05c] { display: flex; gap: 6px; padding-top: 9px; border-top: 1px solid var(--glass-border); }
.sc-stat[b-ivt0uyc05c] { flex: 1; text-align: center; }
.sc-stat-val[b-ivt0uyc05c] { font-size: 13px; font-weight: 700; }
.sc-stat-lbl[b-ivt0uyc05c] { font-size: 8.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; margin-top: 1px; }
.sc-footer[b-ivt0uyc05c] { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.sub-warn[b-ivt0uyc05c]    { font-size: 9.5px; color: #fbbf24; display: flex; align-items: center; gap: 3px; }
.sub-expired[b-ivt0uyc05c] { font-size: 10.5px; color: #f87171; font-weight: 600; }
.sub-none[b-ivt0uyc05c]    { font-size: 10.5px; color: var(--text-faint); }
.sub-ok[b-ivt0uyc05c]      { font-size: 10.5px; color: var(--text-faint); }

/* ── states ── */
.sl-loading[b-ivt0uyc05c] { font-size: 13px; color: var(--text-dim); padding: 30px 0; text-align: center; }
.sl-empty[b-ivt0uyc05c] { text-align: center; padding: 50px; color: var(--text-faint); }
.sl-empty .ei[b-ivt0uyc05c] { font-size: 42px; margin-bottom: 8px; opacity: .3; }

/* ── detail panel ── */
.overlay[b-ivt0uyc05c] { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 199; display: none; }
.overlay.show[b-ivt0uyc05c] { display: block; }
.detail-panel[b-ivt0uyc05c] { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 94vw; background: var(--glass-bg); backdrop-filter: blur(24px); border-left: 1px solid var(--glass-border); z-index: 200; transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; }
.detail-panel.open[b-ivt0uyc05c] { transform: translateX(0); }
.dp-head[b-ivt0uyc05c] { padding: 18px 20px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dp-logo[b-ivt0uyc05c] { width: 46px; height: 46px; border-radius: 10px; background: var(--accent-gradient); color: var(--accent-text-on-fill); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; flex-shrink: 0; }
.dp-title[b-ivt0uyc05c] { font-size: 15px; font-weight: 700; }
.dp-sub[b-ivt0uyc05c] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.dp-close[b-ivt0uyc05c] { margin-left: auto; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.dp-close:hover[b-ivt0uyc05c] { background: var(--accent-glow-soft); color: var(--text-main); }
.dp-tabs[b-ivt0uyc05c] { display: flex; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; padding: 0 20px; }
.dp-tab[b-ivt0uyc05c] { padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--text-faint); cursor: pointer; border-bottom: 2px solid transparent; transition: .15s; white-space: nowrap; }
.dp-tab:hover[b-ivt0uyc05c] { color: var(--text-dim); }
.dp-tab.active[b-ivt0uyc05c] { color: var(--accent-glow); border-bottom-color: var(--accent-glow); }
.dp-body[b-ivt0uyc05c] { flex: 1; overflow-y: auto; padding: 18px 20px; min-height: 0; }
.dp-body[b-ivt0uyc05c]::-webkit-scrollbar { width: 5px; }
.dp-body[b-ivt0uyc05c]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 5px; }

/* ── info section ── */
.sec-lbl[b-ivt0uyc05c] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .8px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; margin-top: 18px; }
.sec-lbl[b-ivt0uyc05c]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }
.info-grid[b-ivt0uyc05c] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-box[b-ivt0uyc05c] { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); }
.info-box.full[b-ivt0uyc05c] { grid-column: 1 / -1; }
.ib-label[b-ivt0uyc05c] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.ib-val[b-ivt0uyc05c] { font-size: 13px; font-weight: 600; color: var(--text-main); }

/* ── subscription ── */
.sub-card[b-ivt0uyc05c] { padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); margin-bottom: 10px; }
.sub-card.active-sub[b-ivt0uyc05c]  { background: rgba(74,222,128,0.06); border-color: rgba(74,222,128,0.22); }
.sub-card.warn-sub[b-ivt0uyc05c]    { background: rgba(251,191,36,0.06); border-color: rgba(251,191,36,0.22); }
.sub-card.expired-sub[b-ivt0uyc05c] { background: rgba(248,113,113,0.06); border-color: rgba(248,113,113,0.22); }
.sub-header[b-ivt0uyc05c] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sub-title[b-ivt0uyc05c] { font-size: 13px; font-weight: 700; }
.sub-expires[b-ivt0uyc05c] { font-size: 12px; color: var(--text-dim); }
.sub-expires strong[b-ivt0uyc05c] { color: var(--text-main); }
.sub-days[b-ivt0uyc05c] { font-size: 11px; margin-top: 4px; }
.sub-days.ok[b-ivt0uyc05c] { color: #4ade80; }
.sub-days.warn[b-ivt0uyc05c] { color: #fbbf24; }
.sub-days.expired[b-ivt0uyc05c] { color: #f87171; }

/* ── financial summary cards ── */
.fin-grid[b-ivt0uyc05c] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
.fin-card[b-ivt0uyc05c] { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); }
.fin-label[b-ivt0uyc05c] { font-size: 9.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.fin-val[b-ivt0uyc05c] { font-size: 13px; font-weight: 700; color: var(--text-main); }

.record-payment-form[b-ivt0uyc05c] { margin-top: 14px; padding: 14px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); }
.rp-title[b-ivt0uyc05c] { font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.form-row[b-ivt0uyc05c] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.form-label[b-ivt0uyc05c] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.form-input[b-ivt0uyc05c], .form-select[b-ivt0uyc05c] { width: 100%; padding: 7px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12.5px; outline: none; }
.form-input:focus[b-ivt0uyc05c], .form-select:focus[b-ivt0uyc05c] { border-color: var(--accent-glow); }
.form-select option[b-ivt0uyc05c] { background: #0c1a30; color: var(--text-main); }

/* ── subscription history ── */
.sub-hist-row[b-ivt0uyc05c] { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); margin-bottom: 6px; font-size: 12px; }
.sub-hist-date[b-ivt0uyc05c] { color: var(--text-dim); white-space: nowrap; min-width: 80px; }
.sub-hist-period[b-ivt0uyc05c] { flex: 1; color: var(--text-dim); font-size: 11px; }
.sub-hist-amount[b-ivt0uyc05c] { font-weight: 700; color: #4ade80; white-space: nowrap; }

/* ── danger zone ── */
.danger-zone[b-ivt0uyc05c] { margin-top: 6px; padding: 14px; border-radius: var(--radius-sm); background: rgba(248,113,113,0.05); border: 1px solid rgba(248,113,113,0.2); }
.dz-title[b-ivt0uyc05c] { font-size: 12px; font-weight: 700; color: #f87171; margin-bottom: 4px; }
.dz-desc[b-ivt0uyc05c] { font-size: 11px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.6; }

/* ── toast ── */
.sl-toast[b-ivt0uyc05c] { position: fixed; bottom: 24px; right: 24px; z-index: 999; padding: 12px 18px; border-radius: var(--radius-md); background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.35); color: #4ade80; font-size: 13px; font-weight: 600; transform: translateY(80px); opacity: 0; transition: .3s; pointer-events: none; }
.sl-toast.warn[b-ivt0uyc05c] { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.35); color: #fbbf24; }
.sl-toast.show[b-ivt0uyc05c] { transform: translateY(0); opacity: 1; }
/* /Components/Admin/SettingsPage.razor.rz.scp.css */
.placeholder-page[b-h45mmlgiu5] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-h45mmlgiu5]  { font-size: 48px; }
.ph-title[b-h45mmlgiu5] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-h45mmlgiu5]   { font-size: 14px; }
/* /Components/Admin/UsersPage.razor.rz.scp.css */
/* ============================================================
   UsersPage.razor.css — System Admin → Users (content only)
   CSS Isolation; theme colours via theme.css var(--…).
   Mirrors admin-users-content.html.
   ============================================================ */

.up-page[b-hphew10nw0] { color: var(--text-main); }

/* ── header ── */
.page-header[b-hphew10nw0] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.page-title[b-hphew10nw0] { font-size: 18px; font-weight: 700; }
.page-sub[b-hphew10nw0]   { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.up-alert[b-hphew10nw0] { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); color: #f87171; font-size: 13px; }

/* ── buttons ── */
.btn[b-hphew10nw0] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-hphew10nw0] { opacity: .45; cursor: not-allowed; }
.btn-sm[b-hphew10nw0] { padding: 6px 12px; font-size: 12px; }
.btn-xs[b-hphew10nw0] { padding: 3px 9px; font-size: 11px; }
.btn-danger[b-hphew10nw0]  { background: rgba(248,113,113,0.1);  border: 1px solid rgba(248,113,113,0.25); color: #f87171; }
.btn-warn[b-hphew10nw0]    { background: rgba(251,191,36,0.12);  border: 1px solid rgba(251,191,36,0.3);  color: #fbbf24; }
.btn-success[b-hphew10nw0] { background: rgba(74,222,128,0.12);  border: 1px solid rgba(74,222,128,0.3);  color: #4ade80; }

/* ── badges ── */
.badge[b-hphew10nw0] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.b-green[b-hphew10nw0]  { background: rgba(74,222,128,0.11);  color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-red[b-hphew10nw0]    { background: rgba(248,113,113,0.11); color: #f87171; border: 1px solid rgba(248,113,113,0.22); }
.b-blue[b-hphew10nw0]   { background: rgba(79,168,255,0.11);  color: #4fa8ff; border: 1px solid rgba(79,168,255,0.22); }
.b-purple[b-hphew10nw0] { background: rgba(167,139,250,0.11); color: #a78bfa; border: 1px solid rgba(167,139,250,0.22); }
.b-amber[b-hphew10nw0]  { background: rgba(251,191,36,0.11);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.b-gray[b-hphew10nw0]   { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }

/* ── role tabs ── */
.role-tabs[b-hphew10nw0] { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.role-tab[b-hphew10nw0] {
    padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
    cursor: pointer; border: 1px solid var(--glass-border);
    color: var(--text-faint); background: transparent; transition: .15s; user-select: none;
}
.role-tab:hover[b-hphew10nw0] { color: var(--text-main); }
.role-tab.active[b-hphew10nw0] { background: var(--accent-glow-soft); color: var(--accent-glow); border-color: var(--accent-glow); }
.role-tab .cnt[b-hphew10nw0] { margin-left: 5px; font-size: 10px; opacity: .7; }

/* ── filter bar ── */
.filter-bar[b-hphew10nw0] { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.f-search[b-hphew10nw0], .f-select[b-hphew10nw0] {
    padding: 7px 11px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
}
.f-search[b-hphew10nw0] { min-width: 220px; flex: 1; }
.f-search[b-hphew10nw0]::placeholder { color: var(--text-faint); }
.f-search:focus[b-hphew10nw0], .f-select:focus[b-hphew10nw0] { border-color: var(--accent-glow); }
.f-select option[b-hphew10nw0] { background: #0c1a30; color: var(--text-main); }

/* ── states ── */
.ul-loading[b-hphew10nw0] { font-size: 13px; color: var(--text-dim); padding: 30px 0; text-align: center; }
.ul-empty[b-hphew10nw0] { text-align: center; padding: 50px; color: var(--text-faint); }
.ul-empty .ei[b-hphew10nw0] { font-size: 42px; margin-bottom: 8px; opacity: .3; }

/* ── users table ── */
.table-wrap[b-hphew10nw0] { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; }
.users-table[b-hphew10nw0] { width: 100%; border-collapse: collapse; }
.users-table th[b-hphew10nw0] { text-align: left; font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; padding: 8px 14px; border-bottom: 1px solid var(--glass-border); }
.users-table td[b-hphew10nw0] { padding: 11px 14px; font-size: 12.5px; border-bottom: 1px solid rgba(100,170,255,0.07); vertical-align: middle; }
.users-table tr:last-child td[b-hphew10nw0] { border-bottom: none; }
.users-table tbody tr:hover td[b-hphew10nw0] { background: var(--accent-glow-soft); cursor: pointer; }
.users-table tr.inactive td[b-hphew10nw0] { opacity: .5; }

.u-cell[b-hphew10nw0] { display: flex; align-items: center; gap: 10px; }
.u-av[b-hphew10nw0] {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px;
}
.u-av.av-muted[b-hphew10nw0] { background: rgba(100,120,150,0.3); }
.u-av img[b-hphew10nw0] { width: 100%; height: 100%; object-fit: cover; }
.u-name[b-hphew10nw0] { font-size: 13px; font-weight: 600; }
.u-school[b-hphew10nw0] { font-size: 11px; color: var(--text-dim); }
.u-joined[b-hphew10nw0] { font-size: 11px; color: var(--text-faint); }

/* ── detail panel ── */
.overlay[b-hphew10nw0] { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 199; }
.detail-panel[b-hphew10nw0] {
    position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 94vw;
    background: var(--glass-bg); backdrop-filter: blur(24px);
    border-left: 1px solid var(--glass-border); z-index: 200;
    display: flex; flex-direction: column;
}
.dp-head[b-hphew10nw0] { padding: 18px 20px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dp-av[b-hphew10nw0] {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
}
.dp-name[b-hphew10nw0] { font-size: 15px; font-weight: 700; }
.dp-email[b-hphew10nw0] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.dp-close[b-hphew10nw0] { margin-left: auto; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.dp-close:hover[b-hphew10nw0] { background: var(--accent-glow-soft); color: var(--text-main); }

.dp-tabs[b-hphew10nw0] { display: flex; border-bottom: 1px solid var(--glass-border); padding: 0 20px; flex-shrink: 0; }
.dp-tab[b-hphew10nw0] { padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--text-faint); cursor: pointer; border-bottom: 2px solid transparent; transition: .15s; }
.dp-tab:hover[b-hphew10nw0] { color: var(--text-dim); }
.dp-tab.active[b-hphew10nw0] { color: var(--accent-glow); border-bottom-color: var(--accent-glow); }

.dp-body[b-hphew10nw0] { flex: 1; overflow-y: auto; padding: 18px 20px; }
.dp-body[b-hphew10nw0]::-webkit-scrollbar { width: 5px; }
.dp-body[b-hphew10nw0]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 5px; }

/* ── info boxes ── */
.sec-lbl[b-hphew10nw0] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .8px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; margin-top: 18px; }
.sec-lbl[b-hphew10nw0]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }
.info-grid[b-hphew10nw0] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-box[b-hphew10nw0] { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); }
.info-box.full[b-hphew10nw0] { grid-column: 1 / -1; }
.ib-label[b-hphew10nw0] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.ib-val[b-hphew10nw0] { font-size: 13px; font-weight: 600; }

/* ── action rows ── */
.action-group[b-hphew10nw0] { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.action-row[b-hphew10nw0] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); }
.action-label[b-hphew10nw0] { font-size: 13px; font-weight: 600; }
.action-desc[b-hphew10nw0] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* ── reset password form ── */
.reset-form[b-hphew10nw0] { padding: 14px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); margin-top: 10px; }
.form-label[b-hphew10nw0] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; display: block; }
.form-input[b-hphew10nw0] { width: 100%; padding: 7px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12.5px; outline: none; margin-bottom: 8px; }
.form-input:focus[b-hphew10nw0] { border-color: var(--accent-glow); }

/* ── danger zone ── */
.danger-zone[b-hphew10nw0] { padding: 14px; border-radius: var(--radius-sm); background: rgba(248,113,113,0.05); border: 1px solid rgba(248,113,113,0.2); margin-top: 8px; }
.dz-title[b-hphew10nw0] { font-size: 12px; font-weight: 700; color: #f87171; margin-bottom: 4px; }
.dz-desc[b-hphew10nw0] { font-size: 11px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.6; }

/* ── toast ── */
.up-toast[b-hphew10nw0] { position: fixed; bottom: 24px; right: 24px; z-index: 999; padding: 12px 18px; border-radius: var(--radius-md); background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.35); color: #4ade80; font-size: 13px; font-weight: 600; transform: translateY(80px); opacity: 0; transition: .3s; pointer-events: none; }
.up-toast.warn[b-hphew10nw0] { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.35); color: #fbbf24; }
.up-toast.show[b-hphew10nw0] { transform: translateY(0); opacity: 1; }
/* /Components/Consultant/ConsultDashboard.razor.rz.scp.css */
/* ConsultDashboard.razor.css — mirrors consultant.html Dashboard. theme.css vars. */

.cd-page[b-a8fegnovm7] { color: var(--text-main); }

.btn[b-a8fegnovm7] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-a8fegnovm7] { opacity: .6; cursor: not-allowed; }
.btn-success[b-a8fegnovm7] { background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.3); color: #4ade80; }
.btn-danger[b-a8fegnovm7] { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25); color: #f87171; }
.btn-primary[b-a8fegnovm7] { background: var(--accent-gradient); color: var(--accent-text-on-fill); }
.btn-ghost[b-a8fegnovm7] { background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-a8fegnovm7] { background: var(--accent-glow-soft); color: var(--text-main); }
.btn-xs[b-a8fegnovm7] { padding: 4px 9px; font-size: 11px; }
a.btn[b-a8fegnovm7] { text-decoration: none; }
.badge[b-a8fegnovm7] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-a8fegnovm7] { background: rgba(74,222,128,.11); color: #4ade80; border: 1px solid rgba(74,222,128,.22); }
.b-yellow[b-a8fegnovm7] { background: rgba(251,191,36,.11); color: #fbbf24; border: 1px solid rgba(251,191,36,.22); }

.dash-header[b-a8fegnovm7] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dash-title[b-a8fegnovm7] { font-size: 18px; font-weight: 700; }
.dash-sub[b-a8fegnovm7] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.cd-alert[b-a8fegnovm7] { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: #f87171; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }
.cd-accepted-banner[b-a8fegnovm7] { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.25); color: var(--text-main); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 12.5px; margin-bottom: 14px; }
.cd-loading[b-a8fegnovm7], .cd-empty[b-a8fegnovm7] { color: var(--text-faint); font-size: 12.5px; padding: 16px 0; text-align: center; }

/* stat cards */
.sum-grid[b-a8fegnovm7] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.sum-card[b-a8fegnovm7] { padding: 14px 16px; border-radius: var(--radius-md); background: var(--glass-bg); border: 1px solid var(--glass-border); }
.sum-icon[b-a8fegnovm7] { font-size: 18px; margin-bottom: 5px; }
.sum-val[b-a8fegnovm7] { font-size: 20px; font-weight: 800; }
.sum-lbl[b-a8fegnovm7] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.s-blue[b-a8fegnovm7] { border-top: 2px solid rgba(79,168,255,.4); } .s-blue .sum-val[b-a8fegnovm7] { color: #4fa8ff; }
.s-green[b-a8fegnovm7] { border-top: 2px solid rgba(74,222,128,.4); } .s-green .sum-val[b-a8fegnovm7] { color: #4ade80; }
.s-yellow[b-a8fegnovm7] { border-top: 2px solid rgba(251,191,36,.4); } .s-yellow .sum-val[b-a8fegnovm7] { color: #fbbf24; }
.s-purple[b-a8fegnovm7] { border-top: 2px solid rgba(167,139,250,.4); } .s-purple .sum-val[b-a8fegnovm7] { color: #a78bfa; }

.two-col[b-a8fegnovm7] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stack-col[b-a8fegnovm7] { display: flex; flex-direction: column; }
.panel[b-a8fegnovm7] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 14px; }
.panel-head[b-a8fegnovm7] { padding: 12px 16px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; }
.panel-title[b-a8fegnovm7] { font-size: 12.5px; font-weight: 700; }
.panel-body[b-a8fegnovm7] { padding: 14px 16px; }

/* request grid */
.req-grid[b-a8fegnovm7] { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }

/* request card */
.req-card[b-a8fegnovm7] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 14px; display: flex; flex-direction: column; }
.req-card.req-clickable[b-a8fegnovm7] { cursor: pointer; transition: border-color .15s, transform .15s; }
.req-card.req-clickable:hover[b-a8fegnovm7] { border-color: rgba(79,168,255,.4); transform: translateY(-1px); }
.req-card .req-actions[b-a8fegnovm7] { margin-top: auto; }
.req-head[b-a8fegnovm7] { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.req-av[b-a8fegnovm7] { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--accent-text-on-fill); flex-shrink: 0; }
.req-name[b-a8fegnovm7] { font-size: 13px; font-weight: 700; }
.req-meta[b-a8fegnovm7] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.req-child[b-a8fegnovm7] { background: var(--accent-glow-soft); border: 1px solid rgba(79,168,255,.15); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 10px; font-size: 11.5px; color: var(--text-dim); line-height: 1.6; }
.req-child strong[b-a8fegnovm7] { color: var(--text-main); }
.req-member[b-a8fegnovm7] { font-size: 10.5px; color: var(--text-faint); }
.req-topic[b-a8fegnovm7] { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.5; }
.req-topic strong[b-a8fegnovm7] { color: var(--text-main); }
.req-actions[b-a8fegnovm7] { display: flex; gap: 6px; }
.req-link[b-a8fegnovm7] { font-family: ui-monospace, monospace; font-size: 11px; color: #4fa8ff; word-break: break-all; }

/* schedule rows */
.sched-row[b-a8fegnovm7] { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--grid-line); }
.sched-row:last-child[b-a8fegnovm7] { border-bottom: none; }
.sched-date[b-a8fegnovm7] { text-align: center; min-width: 44px; flex-shrink: 0; }
.sched-day[b-a8fegnovm7] { font-size: 18px; font-weight: 800; line-height: 1; }
.sched-month[b-a8fegnovm7] { font-size: 9px; color: var(--text-faint); text-transform: uppercase; }
.sched-divider[b-a8fegnovm7] { width: 1px; background: var(--glass-border); align-self: stretch; flex-shrink: 0; margin: 0 4px; }
.sched-info[b-a8fegnovm7] { flex: 1; }
.sched-name[b-a8fegnovm7] { font-size: 12.5px; font-weight: 700; }
.sched-meta[b-a8fegnovm7] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.sched-link[b-a8fegnovm7] { display: inline-block; font-size: 10.5px; color: #4fa8ff; cursor: pointer; text-decoration: underline; }
.sched-actions[b-a8fegnovm7] { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.sched-share[b-a8fegnovm7] { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-family: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; background: var(--accent-gradient); color: var(--accent-text-on-fill); border: none; }
.sched-pending[b-a8fegnovm7] { font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }

/* ── accept / payment modal ── */
.modal-overlay[b-a8fegnovm7] { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[b-a8fegnovm7] { background: var(--glass-bg); backdrop-filter: blur(24px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); width: 480px; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column; }
.modal-head[b-a8fegnovm7] { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--glass-border); }
.modal-title[b-a8fegnovm7] { font-size: 14px; font-weight: 700; }
.modal-close[b-a8fegnovm7] { width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 13px; }
.modal-body[b-a8fegnovm7] { padding: 16px 18px; overflow-y: auto; }
.modal-footer[b-a8fegnovm7] { padding: 12px 18px; border-top: 1px solid var(--glass-border); display: flex; gap: 8px; justify-content: flex-end; }

.ac-readonly[b-a8fegnovm7] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; }
.ac-ro-row[b-a8fegnovm7] { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; color: var(--text-dim); }
.ac-ro-row strong[b-a8fegnovm7] { color: var(--text-main); }

.form-grid[b-a8fegnovm7] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-group[b-a8fegnovm7] { display: flex; flex-direction: column; gap: 4px; }
.form-group.full[b-a8fegnovm7] { grid-column: 1 / -1; }
.form-label[b-a8fegnovm7] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.form-input[b-a8fegnovm7], .form-select[b-a8fegnovm7] { width: 100%; padding: 8px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12.5px; outline: none; }
.form-input:focus[b-a8fegnovm7], .form-select:focus[b-a8fegnovm7] { border-color: rgba(79,168,255,.55); }
.form-select option[b-a8fegnovm7] { background: var(--glass-bg); color: var(--text-main); }

.ac-success[b-a8fegnovm7] { font-size: 13px; color: #4ade80; margin-bottom: 12px; }
.ac-link-box[b-a8fegnovm7] { display: flex; gap: 8px; }
.ac-link-input[b-a8fegnovm7] { flex: 1; padding: 8px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: #4fa8ff; font-family: ui-monospace, monospace; font-size: 11px; outline: none; }
.ac-link-hint[b-a8fegnovm7] { font-size: 11px; color: var(--text-faint); margin-top: 8px; }

@media (max-width: 860px) {
    .sum-grid[b-a8fegnovm7] { grid-template-columns: repeat(2, 1fr); }
    .two-col[b-a8fegnovm7] { grid-template-columns: 1fr; }
    .form-grid[b-a8fegnovm7] { grid-template-columns: 1fr; }
}
/* /Components/Consultant/ConsultHistory.razor.rz.scp.css */
/* ConsultHistory.razor.css */
.ch-page[b-093mixi0x5] { color: var(--text-main); }
.ch-header[b-093mixi0x5] { margin-bottom: 16px; }
.ch-title[b-093mixi0x5] { font-size: 18px; font-weight: 700; }
.ch-sub[b-093mixi0x5] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.ch-empty[b-093mixi0x5] { text-align: center; color: var(--text-faint); padding: 40px 0; font-size: 14px; }

.ch-table[b-093mixi0x5] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; }
.ch-row[b-093mixi0x5] { display: grid; grid-template-columns: 110px 130px 1fr 90px 60px 1.4fr; gap: 10px; padding: 10px 16px; font-size: 12px; align-items: center; border-bottom: 1px solid var(--grid-line); }
.ch-row:last-child[b-093mixi0x5] { border-bottom: none; }
.ch-head[b-093mixi0x5] { background: var(--glass-bg-soft); font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; }
.ch-dim[b-093mixi0x5] { color: var(--text-dim); }
.ch-strong[b-093mixi0x5] { font-weight: 600; }
.ch-fee[b-093mixi0x5] { font-weight: 700; color: #4ade80; }
.ch-summary[b-093mixi0x5] { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; }
.ch-nosum[b-093mixi0x5] { color: var(--text-faint); }

@media (max-width: 820px) {
    .ch-row[b-093mixi0x5] { grid-template-columns: 1fr 1fr; }
    .ch-head[b-093mixi0x5] { display: none; }
}
/* /Components/Consultant/ConsultProfile.razor.rz.scp.css */
/* ConsultProfile.razor.css */
.cpf-page[b-13f0jbasvq] { color: var(--text-main); max-width: 760px; }
.cpf-header[b-13f0jbasvq] { margin-bottom: 16px; }
.cpf-title[b-13f0jbasvq] { font-size: 18px; font-weight: 700; }
.cpf-sub[b-13f0jbasvq] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.cpf-empty[b-13f0jbasvq] { text-align: center; color: var(--text-faint); padding: 40px 0; }

.cpf-saved[b-13f0jbasvq] { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.25); color: #4ade80; padding: 9px 14px; border-radius: var(--radius-sm); font-size: 12.5px; margin-bottom: 12px; }
.cpf-error[b-13f0jbasvq] { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: #f87171; padding: 9px 14px; border-radius: var(--radius-sm); font-size: 12.5px; margin-bottom: 12px; }

.cpf-card[b-13f0jbasvq] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 20px; }

.btn[b-13f0jbasvq] { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-13f0jbasvq] { opacity: .6; cursor: not-allowed; }
.btn-primary[b-13f0jbasvq] { background: var(--accent-gradient); color: var(--accent-text-on-fill); }

.form-grid[b-13f0jbasvq] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group[b-13f0jbasvq] { display: flex; flex-direction: column; gap: 5px; }
.form-group.full[b-13f0jbasvq] { grid-column: 1 / -1; }
.form-label[b-13f0jbasvq] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.form-input[b-13f0jbasvq], .form-textarea[b-13f0jbasvq] { width: 100%; padding: 9px 12px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; }
.form-input:disabled[b-13f0jbasvq] { opacity: .6; }
.form-input:focus[b-13f0jbasvq], .form-textarea:focus[b-13f0jbasvq] { border-color: rgba(79,168,255,.55); }
.form-textarea[b-13f0jbasvq] { resize: vertical; min-height: 90px; line-height: 1.6; }
.form-hint[b-13f0jbasvq] { font-size: 10.5px; color: var(--text-faint); }

.cpf-actions[b-13f0jbasvq] { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.cpf-pending[b-13f0jbasvq] { font-size: 11.5px; color: #fbbf24; }

@media (max-width: 640px) { .form-grid[b-13f0jbasvq] { grid-template-columns: 1fr; } }
/* /Components/Consultant/ConsultRequests.razor.rz.scp.css */
/* ConsultRequests.razor.css */
.cr-page[b-vdhxm0qhwf] { color: var(--text-main); max-width: 760px; }
.cr-header[b-vdhxm0qhwf] { margin-bottom: 16px; }
.cr-title[b-vdhxm0qhwf] { font-size: 18px; font-weight: 700; }
.cr-sub[b-vdhxm0qhwf] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.cr-empty[b-vdhxm0qhwf] { text-align: center; color: var(--text-faint); padding: 40px 0; font-size: 14px; }

.btn[b-vdhxm0qhwf] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-vdhxm0qhwf] { opacity: .6; cursor: not-allowed; }
.btn-success[b-vdhxm0qhwf] { background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.3); color: #4ade80; }
.btn-danger[b-vdhxm0qhwf] { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25); color: #f87171; }
.btn-primary[b-vdhxm0qhwf] { background: var(--accent-gradient); color: var(--accent-text-on-fill); }
.btn-ghost[b-vdhxm0qhwf] { background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-vdhxm0qhwf] { background: var(--accent-glow-soft); color: var(--text-main); }
.btn-xs[b-vdhxm0qhwf] { padding: 4px 9px; font-size: 11px; }
.badge[b-vdhxm0qhwf] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-yellow[b-vdhxm0qhwf] { background: rgba(251,191,36,.11); color: #fbbf24; border: 1px solid rgba(251,191,36,.22); }
.b-green[b-vdhxm0qhwf] { background: rgba(74,222,128,.11); color: #4ade80; border: 1px solid rgba(74,222,128,.22); }
.b-red[b-vdhxm0qhwf] { background: rgba(248,113,113,.11); color: #f87171; border: 1px solid rgba(248,113,113,.22); }
.b-blue[b-vdhxm0qhwf] { background: rgba(79,168,255,.11); color: #4fa8ff; border: 1px solid rgba(79,168,255,.22); }

.cr-tabs[b-vdhxm0qhwf] { display: flex; gap: 4px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 16px; width: fit-content; }
.cr-tab[b-vdhxm0qhwf] { padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--text-faint); cursor: pointer; }
.cr-tab.active[b-vdhxm0qhwf] { background: var(--glass-bg); color: var(--text-main); box-shadow: 0 1px 4px rgba(0,0,0,.3); }

.req-card[b-vdhxm0qhwf] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 10px; }
.req-card.open[b-vdhxm0qhwf] { border-color: rgba(79,168,255,.4); }
.req-head[b-vdhxm0qhwf] { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; }
.req-details-tag[b-vdhxm0qhwf] { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; background: rgba(167,139,250,.12); color: #a78bfa; border: 1px solid rgba(167,139,250,.28); }
.req-head:hover .req-details-tag[b-vdhxm0qhwf] { background: rgba(167,139,250,.2); }
.req-av[b-vdhxm0qhwf] { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--accent-text-on-fill); flex-shrink: 0; }
.req-head-info[b-vdhxm0qhwf] { flex: 1; }
.req-name[b-vdhxm0qhwf] { font-size: 13.5px; font-weight: 700; }
.req-meta[b-vdhxm0qhwf] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.req-child[b-vdhxm0qhwf] { background: var(--accent-glow-soft); border: 1px solid rgba(79,168,255,.15); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 10px; font-size: 11.5px; color: var(--text-dim); }
.req-child strong[b-vdhxm0qhwf] { color: var(--text-main); }
.req-topic[b-vdhxm0qhwf] { font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; }
.req-topic strong[b-vdhxm0qhwf] { color: var(--text-main); }
.req-notes[b-vdhxm0qhwf] { font-size: 12px; color: var(--text-faint); line-height: 1.5; margin-bottom: 10px; }
.req-actions[b-vdhxm0qhwf] { display: flex; gap: 6px; margin-top: 10px; }

/* ── expanded request detail ── */
.req-detail[b-vdhxm0qhwf] { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--glass-border); display: flex; flex-direction: column; gap: 14px; }
.rd-section[b-vdhxm0qhwf] { }
.rd-title[b-vdhxm0qhwf] { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.rd-empty[b-vdhxm0qhwf] { font-size: 12px; color: var(--text-faint); padding: 4px 0; }
.rd-grid[b-vdhxm0qhwf] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rd-item[b-vdhxm0qhwf] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 7px 10px; display: flex; flex-direction: column; gap: 2px; }
.rd-item span[b-vdhxm0qhwf] { font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; }
.rd-item strong[b-vdhxm0qhwf] { font-size: 12.5px; color: var(--text-main); font-weight: 600; }
.rd-sensory[b-vdhxm0qhwf] { margin-top: 8px; font-size: 11.5px; color: var(--text-dim); background: rgba(167,139,250,.08); border: 1px solid rgba(167,139,250,.2); border-radius: var(--radius-sm); padding: 7px 10px; line-height: 1.5; }
.rd-note-label[b-vdhxm0qhwf] { font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; margin: 10px 0 4px; }
.rd-note[b-vdhxm0qhwf] { font-size: 12.5px; color: var(--text-main); line-height: 1.6; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 9px 12px; white-space: pre-wrap; }

.rd-hist[b-vdhxm0qhwf] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); margin-bottom: 6px; }
.rd-hist:last-child[b-vdhxm0qhwf] { margin-bottom: 0; }
.rd-hist-main[b-vdhxm0qhwf] { flex: 1; }
.rd-hist-topic[b-vdhxm0qhwf] { font-size: 12.5px; font-weight: 600; color: var(--text-main); }
.rd-hist-meta[b-vdhxm0qhwf] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* ── accept / payment modal ── */
.modal-overlay[b-vdhxm0qhwf] { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[b-vdhxm0qhwf] { background: var(--glass-bg); backdrop-filter: blur(24px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); width: 480px; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column; }
.modal-head[b-vdhxm0qhwf] { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--glass-border); }
.modal-title[b-vdhxm0qhwf] { font-size: 14px; font-weight: 700; }
.modal-close[b-vdhxm0qhwf] { width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 13px; }
.modal-body[b-vdhxm0qhwf] { padding: 16px 18px; overflow-y: auto; }
.modal-footer[b-vdhxm0qhwf] { padding: 12px 18px; border-top: 1px solid var(--glass-border); display: flex; gap: 8px; justify-content: flex-end; }

.ac-readonly[b-vdhxm0qhwf] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; }
.ac-ro-row[b-vdhxm0qhwf] { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; color: var(--text-dim); }
.ac-ro-row strong[b-vdhxm0qhwf] { color: var(--text-main); }
.ac-modal-alert[b-vdhxm0qhwf] { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: #f87171; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 12px; margin-bottom: 12px; }

.form-grid[b-vdhxm0qhwf] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-group[b-vdhxm0qhwf] { display: flex; flex-direction: column; gap: 4px; }
.form-group.full[b-vdhxm0qhwf] { grid-column: 1 / -1; }
.form-label[b-vdhxm0qhwf] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.form-input[b-vdhxm0qhwf], .form-select[b-vdhxm0qhwf] { width: 100%; padding: 8px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12.5px; outline: none; }
.form-input:focus[b-vdhxm0qhwf], .form-select:focus[b-vdhxm0qhwf] { border-color: rgba(79,168,255,.55); }
.form-select option[b-vdhxm0qhwf] { background: var(--glass-bg); color: var(--text-main); }

.ac-success[b-vdhxm0qhwf] { font-size: 13px; color: #4ade80; margin-bottom: 8px; }
.ac-link-box[b-vdhxm0qhwf] { display: flex; gap: 8px; margin: 8px 0; }
.ac-link-input[b-vdhxm0qhwf] { flex: 1; padding: 8px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: #4fa8ff; font-family: ui-monospace, monospace; font-size: 11px; outline: none; }
.ac-link-hint[b-vdhxm0qhwf] { font-size: 11px; color: var(--text-faint); margin-top: 4px; }

@media (max-width: 560px) { .rd-grid[b-vdhxm0qhwf] { grid-template-columns: 1fr; } .form-grid[b-vdhxm0qhwf] { grid-template-columns: 1fr; } }
/* /Components/Consultant/ConsultSchedule.razor.rz.scp.css */
/* ConsultSchedule.razor.css */
.cs-page[b-cq8oiy5atl] { color: var(--text-main); max-width: 760px; }
.cs-header[b-cq8oiy5atl] { margin-bottom: 16px; }
.cs-title[b-cq8oiy5atl] { font-size: 18px; font-weight: 700; }
.cs-sub[b-cq8oiy5atl] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.cs-empty[b-cq8oiy5atl] { text-align: center; color: var(--text-faint); padding: 40px 0; font-size: 14px; }

.badge[b-cq8oiy5atl] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-cq8oiy5atl] { background: rgba(74,222,128,.11); color: #4ade80; border: 1px solid rgba(74,222,128,.22); }
.b-yellow[b-cq8oiy5atl] { background: rgba(251,191,36,.11); color: #fbbf24; border: 1px solid rgba(251,191,36,.22); }

.cs-list[b-cq8oiy5atl] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 6px 16px; }
.cs-day-label[b-cq8oiy5atl] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; padding: 14px 0 6px; }

.sched-row[b-cq8oiy5atl] { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--grid-line); }
.sched-row:last-child[b-cq8oiy5atl] { border-bottom: none; }
.sched-time[b-cq8oiy5atl] { font-size: 14px; font-weight: 800; min-width: 48px; flex-shrink: 0; color: #4fa8ff; }
.sched-divider[b-cq8oiy5atl] { width: 1px; background: var(--glass-border); align-self: stretch; flex-shrink: 0; }
.sched-info[b-cq8oiy5atl] { flex: 1; }
.sched-name[b-cq8oiy5atl] { font-size: 12.5px; font-weight: 700; }
.sched-meta[b-cq8oiy5atl] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.sched-actions[b-cq8oiy5atl] { display: flex; align-items: center; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.sched-link[b-cq8oiy5atl] { display: inline-block; font-size: 10.5px; color: #4fa8ff; text-decoration: underline; }
.sched-share[b-cq8oiy5atl] { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-family: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; background: var(--accent-gradient); color: var(--accent-text-on-fill); border: none; }
.sched-pending[b-cq8oiy5atl] { font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-wk83glcunp] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-wk83glcunp] {
    flex: 1;
}

.sidebar[b-wk83glcunp] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-wk83glcunp] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-wk83glcunp]  a, .top-row[b-wk83glcunp]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-wk83glcunp]  a:hover, .top-row[b-wk83glcunp]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-wk83glcunp]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-wk83glcunp] {
        justify-content: space-between;
    }

    .top-row[b-wk83glcunp]  a, .top-row[b-wk83glcunp]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-wk83glcunp] {
        flex-direction: row;
    }

    .sidebar[b-wk83glcunp] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-wk83glcunp] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-wk83glcunp]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-wk83glcunp], article[b-wk83glcunp] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-wk83glcunp] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-wk83glcunp] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-71al4fl7mk] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-71al4fl7mk] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-71al4fl7mk] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-71al4fl7mk] {
    font-size: 1.1rem;
}

.bi[b-71al4fl7mk] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-71al4fl7mk] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-71al4fl7mk] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-71al4fl7mk] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-71al4fl7mk] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-71al4fl7mk] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-71al4fl7mk] {
        padding-bottom: 1rem;
    }

    .nav-item[b-71al4fl7mk]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-71al4fl7mk]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-71al4fl7mk]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-71al4fl7mk] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-71al4fl7mk] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-71al4fl7mk] {
        display: none;
    }

    .nav-scrollable[b-71al4fl7mk] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-bogelc9br3],
.components-reconnect-repeated-attempt-visible[b-bogelc9br3],
.components-reconnect-failed-visible[b-bogelc9br3],
.components-pause-visible[b-bogelc9br3],
.components-resume-failed-visible[b-bogelc9br3],
.components-rejoining-animation[b-bogelc9br3] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-bogelc9br3],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-bogelc9br3],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-bogelc9br3],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-bogelc9br3],
#components-reconnect-modal.components-reconnect-retrying[b-bogelc9br3],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-bogelc9br3],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-bogelc9br3],
#components-reconnect-modal.components-reconnect-failed[b-bogelc9br3],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-bogelc9br3] {
    display: block;
}


#components-reconnect-modal[b-bogelc9br3] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-bogelc9br3 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-bogelc9br3 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-bogelc9br3 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-bogelc9br3]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-bogelc9br3 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-bogelc9br3 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-bogelc9br3 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-bogelc9br3 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-bogelc9br3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-bogelc9br3] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-bogelc9br3] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-bogelc9br3] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-bogelc9br3] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-bogelc9br3] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-bogelc9br3] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-bogelc9br3 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-bogelc9br3] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-bogelc9br3 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SchoolSidebar.razor.rz.scp.css */
/* CSS برای SchoolSidebar — همان کلاس‌های SharedLayout.razor.css */
/* Blazor CSS Isolation این فایل را scope می‌کند */

/* ── SIDEBAR ── */
.sidebar[b-o6hc1iz7m4] {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 232px;
    background: var(--glass-bg);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.sidebar-brand[b-o6hc1iz7m4] {
    height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.brand-mark[b-o6hc1iz7m4] {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--accent-gradient);
    box-shadow: 0 0 14px var(--accent-glow-soft);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px;
    color: var(--accent-text-on-fill);
    flex-shrink: 0;
}

.brand-name[b-o6hc1iz7m4] { font-size: 13px; font-weight: 700; color: var(--text-main); }
.brand-sub[b-o6hc1iz7m4]  { font-size: 10px; color: var(--text-dim); margin-top: 1px; }

.sidebar-nav[b-o6hc1iz7m4] {
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px;
}
.sidebar-nav[b-o6hc1iz7m4]::-webkit-scrollbar { width: 3px; }
.sidebar-nav[b-o6hc1iz7m4]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; }

.nav-group-label[b-o6hc1iz7m4] {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-faint);
    text-transform: uppercase;
    padding: 12px 10px 5px;
}

.nav-item[b-o6hc1iz7m4] {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 11px;
    border-radius: 7px;
    font-size: 13px; font-weight: 500;
    color: var(--text-dim);
    cursor: pointer; transition: .15s;
    margin-bottom: 1px;
    border-left: 2px solid transparent;
    user-select: none;
}
.nav-item:hover[b-o6hc1iz7m4] {
    background: var(--accent-glow-soft);
    color: var(--text-main);
}
.nav-item.active[b-o6hc1iz7m4] {
    background: linear-gradient(90deg, rgba(120,180,255,0.16), rgba(120,180,255,0.04));
    color: var(--text-main);
    border-left-color: var(--accent-glow);
    box-shadow: 0 0 10px var(--accent-glow-soft);
}

.nav-icon[b-o6hc1iz7m4] {
    width: 16px; text-align: center;
    font-size: 14px; opacity: .75; flex-shrink: 0;
}
.nav-item.active .nav-icon[b-o6hc1iz7m4] { opacity: 1; }

.nav-skeleton[b-o6hc1iz7m4] {
    height: 36px;
    border-radius: 7px;
    background: var(--glass-bg-soft);
    margin-bottom: 4px;
    animation: shimmer-b-o6hc1iz7m4 1.4s infinite;
}
@keyframes shimmer-b-o6hc1iz7m4 {
    0%   { opacity: .5; }
    50%  { opacity: .2; }
    100% { opacity: .5; }
}

.sidebar-footer[b-o6hc1iz7m4] {
    padding: 12px;
    border-top: 1px solid var(--glass-border);
    flex-shrink: 0;
}
.user-card[b-o6hc1iz7m4] {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px;
    border-radius: 7px;
    background: var(--accent-glow-soft);
    cursor: pointer; transition: .15s;
}
.user-card:hover[b-o6hc1iz7m4] { background: rgba(120,180,255,0.13); }

.user-av[b-o6hc1iz7m4] {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px;
    color: var(--accent-text-on-fill);
}
.user-av-img[b-o6hc1iz7m4] {
    width: 32px; height: 32px; border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--glass-border);
    flex-shrink: 0;
}
.user-name[b-o6hc1iz7m4]  { font-size: 12px; font-weight: 600; color: var(--text-main); }
.user-role[b-o6hc1iz7m4]  { font-size: 10px; color: var(--text-dim); }
.user-dots[b-o6hc1iz7m4]  { margin-left: auto; color: var(--text-faint); font-size: 15px; line-height: 1; }

/* ── TOPBAR ── */
.topbar[b-o6hc1iz7m4] {
    position: fixed;
    top: 0; left: 232px; right: 0;
    height: 58px;
    background: var(--glass-bg);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; gap: 8px;
    padding: 0 20px;
    z-index: 90;
}

.topbar-actions[b-o6hc1iz7m4] { display: flex; align-items: center; gap: 6px; }

.tb-action[b-o6hc1iz7m4] {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 7px;
    font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.03);
    color: var(--text-dim);
    transition: .15s; white-space: nowrap;
}
.tb-action:hover[b-o6hc1iz7m4] {
    background: var(--accent-glow-soft);
    color: var(--text-main);
    border-color: var(--glass-border);
}
.tb-action.primary[b-o6hc1iz7m4] {
    background: linear-gradient(135deg, rgba(120,180,255,0.22), rgba(168,216,255,0.12));
    color: var(--text-main);
    border-color: var(--accent-glow-soft);
    box-shadow: 0 0 14px var(--accent-glow-soft);
}
.tb-action.primary:hover[b-o6hc1iz7m4] { box-shadow: 0 0 22px var(--accent-glow-soft); }

.topbar-div[b-o6hc1iz7m4] { width: 1px; height: 22px; background: var(--glass-border); margin: 0 4px; }
.topbar-spacer[b-o6hc1iz7m4] { flex: 1; }

.sub-badge[b-o6hc1iz7m4] {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px;
    background: rgba(120,180,255,0.10);
    border: 1px solid rgba(120,180,255,0.25);
    font-size: 11px; font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
}
.sub-badge.sub-danger[b-o6hc1iz7m4] {
    background: rgba(248,113,113,0.10);
    border-color: rgba(248,113,113,0.30);
    color: #f87171;
}
.sub-dot[b-o6hc1iz7m4] {
    width: 6px; height: 6px; border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 5px rgba(74,222,128,.6);
    flex-shrink: 0;
}
.sub-dot-red[b-o6hc1iz7m4] {
    background: #f87171;
    box-shadow: 0 0 5px rgba(248,113,113,.6);
}

.tb-icon[b-o6hc1iz7m4] {
    width: 34px; height: 34px;
    border-radius: 7px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.03);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer; transition: .15s;
    color: var(--text-dim);
    position: relative; flex-shrink: 0;
}
.tb-icon:hover[b-o6hc1iz7m4] {
    background: var(--accent-glow-soft);
    color: var(--text-main);
    border-color: var(--glass-border);
}
.notif-dot[b-o6hc1iz7m4] {
    position: absolute; top: 5px; right: 5px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-glow);
    box-shadow: 0 0 5px var(--accent-glow-soft);
}

/* logout button in the sidebar footer */
.logout-btn[b-o6hc1iz7m4] {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 8px; padding: 9px 10px;
    border-radius: var(--radius-sm);
    background: var(--c-error-soft); border: 1px solid var(--c-error-border);
    color: var(--text-error); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: background .15s ease, transform .1s ease;
    user-select: none;
}
.logout-btn:hover[b-o6hc1iz7m4] { background: var(--c-error-border); }
.logout-btn:active[b-o6hc1iz7m4] { transform: scale(.97); }
.logout-icon[b-o6hc1iz7m4] { font-size: 14px; line-height: 1; }
/* /Components/Layout/SharedLayout.razor.rz.scp.css */
/* ── Layout shell ── */
.layout-root[b-120bmdw1iz] {
    display: flex;
    min-height: 100vh;
    background: var(--bg-gradient);
    position: relative;
}

/* background grid + orbs (same pattern as Login) */
.layout-root[b-120bmdw1iz]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 550px at 78% 8%,  var(--orb-1), transparent 60%),
        radial-gradient(circle 450px at 8%  92%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}

/* ── SIDEBAR ── */
.sidebar[b-120bmdw1iz] {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 232px;
    background: var(--glass-bg);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.sidebar-brand[b-120bmdw1iz] {
    height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.brand-mark[b-120bmdw1iz] {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--accent-gradient);
    box-shadow: 0 0 14px var(--accent-glow-soft);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px;
    color: var(--accent-text-on-fill);
    flex-shrink: 0;
}

.brand-name[b-120bmdw1iz] { font-size: 13px; font-weight: 700; color: var(--text-main); }
.brand-sub[b-120bmdw1iz]  { font-size: 10px; color: var(--text-dim); margin-top: 1px; }

/* nav scroll area */
.sidebar-nav[b-120bmdw1iz] {
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px;
}
.sidebar-nav[b-120bmdw1iz]::-webkit-scrollbar { width: 3px; }
.sidebar-nav[b-120bmdw1iz]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; }

.nav-label[b-120bmdw1iz] {
    font-size: 9.5px; font-weight: 600; letter-spacing: 1px;
    color: var(--text-faint); text-transform: uppercase;
    padding: 12px 10px 5px;
}

.nav-group-label[b-120bmdw1iz] {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-faint);
    text-transform: uppercase;
    padding: 12px 10px 5px;
}

.nav-item[b-120bmdw1iz] {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 11px;
    border-radius: 7px;
    font-size: 13px; font-weight: 500;
    color: var(--text-dim);
    cursor: pointer; transition: .15s;
    margin-bottom: 1px;
    border-left: 2px solid transparent;
    user-select: none;
}
.nav-item:hover[b-120bmdw1iz] {
    background: var(--accent-glow-soft);
    color: var(--text-main);
}
.nav-item.active[b-120bmdw1iz] {
    background: linear-gradient(90deg, rgba(120,180,255,0.16), rgba(120,180,255,0.04));
    color: var(--text-main);
    border-left-color: var(--accent-glow);
    box-shadow: 0 0 10px var(--accent-glow-soft);
}

.nav-icon[b-120bmdw1iz] {
    width: 16px; text-align: center;
    font-size: 14px; opacity: .75; flex-shrink: 0;
}
.nav-item.active .nav-icon[b-120bmdw1iz] { opacity: 1; }

/* skeleton loaders while menu loads */
.nav-skeleton[b-120bmdw1iz] {
    height: 36px;
    border-radius: 7px;
    background: var(--glass-bg-soft);
    margin-bottom: 4px;
    animation: shimmer-b-120bmdw1iz 1.4s infinite;
}
@keyframes shimmer-b-120bmdw1iz {
    0%   { opacity: .5; }
    50%  { opacity: .2; }
    100% { opacity: .5; }
}

/* sidebar footer / user card */
.sidebar-footer[b-120bmdw1iz] {
    padding: 12px;
    border-top: 1px solid var(--glass-border);
    flex-shrink: 0;
}
.user-card[b-120bmdw1iz] {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px;
    border-radius: 7px;
    background: var(--accent-glow-soft);
    cursor: pointer; transition: .15s;
}
.user-card:hover[b-120bmdw1iz] { background: rgba(120,180,255,0.13); }

.user-av[b-120bmdw1iz] {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px;
    color: var(--accent-text-on-fill);
}
.user-av-img[b-120bmdw1iz] {
    width: 32px; height: 32px; border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--glass-border);
    flex-shrink: 0;
}
.user-name[b-120bmdw1iz]  { font-size: 12px; font-weight: 600; color: var(--text-main); }
.user-role[b-120bmdw1iz]  { font-size: 10px; color: var(--text-dim); }
.user-dots[b-120bmdw1iz]  { margin-left: auto; color: var(--text-faint); font-size: 15px; line-height: 1; }

/* ── TOPBAR ── */
.topbar[b-120bmdw1iz] {
    position: fixed;
    top: 0; left: 232px; right: 0;
    height: 58px;
    background: var(--glass-bg);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; gap: 8px;
    padding: 0 20px;
    z-index: 90;
}

.topbar-actions[b-120bmdw1iz] { display: flex; align-items: center; gap: 6px; }

.tb-action[b-120bmdw1iz] {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 7px;
    font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.03);
    color: var(--text-dim);
    transition: .15s; white-space: nowrap;
}
.tb-action:hover[b-120bmdw1iz] {
    background: var(--accent-glow-soft);
    color: var(--text-main);
    border-color: var(--glass-border);
}
.tb-action.primary[b-120bmdw1iz] {
    background: linear-gradient(135deg, rgba(120,180,255,0.22), rgba(168,216,255,0.12));
    color: var(--text-main);
    border-color: var(--accent-glow-soft);
    box-shadow: 0 0 14px var(--accent-glow-soft);
}
.tb-action.primary:hover[b-120bmdw1iz] { box-shadow: 0 0 22px var(--accent-glow-soft); }

.topbar-div[b-120bmdw1iz] { width: 1px; height: 22px; background: var(--glass-border); margin: 0 4px; }
.topbar-spacer[b-120bmdw1iz] { flex: 1; }

/* subscription badge */
.sub-badge[b-120bmdw1iz] {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px;
    background: rgba(120,180,255,0.10);
    border: 1px solid rgba(120,180,255,0.25);
    font-size: 11px; font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
}
.sub-badge.sub-danger[b-120bmdw1iz] {
    background: rgba(248,113,113,0.10);
    border-color: rgba(248,113,113,0.30);
    color: #f87171;
}
.sub-dot[b-120bmdw1iz] {
    width: 6px; height: 6px; border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 5px rgba(74,222,128,.6);
    flex-shrink: 0;
}
.sub-dot-red[b-120bmdw1iz] {
    background: #f87171;
    box-shadow: 0 0 5px rgba(248,113,113,.6);
}

.tb-icon[b-120bmdw1iz] {
    width: 34px; height: 34px;
    border-radius: 7px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.03);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer; transition: .15s;
    color: var(--text-dim);
    position: relative; flex-shrink: 0;
}
.tb-icon:hover[b-120bmdw1iz] {
    background: var(--accent-glow-soft);
    color: var(--text-main);
    border-color: var(--glass-border);
}
.notif-dot[b-120bmdw1iz] {
    position: absolute; top: 5px; right: 5px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-glow);
    box-shadow: 0 0 5px var(--accent-glow-soft);
}

/* ── MAIN CONTENT ── */
.main-content[b-120bmdw1iz] {
    margin-left: 232px;
    /* top accounts for the fixed 58px topbar; the rest matches the
       reference .content padding (20px 22px) */
    padding: calc(58px + 20px) 22px 22px;
    height: 100vh;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    flex: 1;
}
/* /Components/Pages/AdminDashboard.razor.rz.scp.css */
/* ============================================================
   AdminDashboard.razor.css — System Admin panel shell
   Sidebar (226px, fixed) + TopBar (58px, fixed) + scrollable
   content. CSS Isolation; all colors from theme.css var(--…).
   Mirrors TeacherLayout.razor.css.
   ============================================================ */

.a-root[b-6h5ydreh70] {
    --sidebar-w: 226px;
    --nav-h: 58px;
    height: 100vh;
    overflow: hidden;
    color: var(--text-main);
    background: var(--bg-gradient);
    position: relative;
}

/* neon-glass background (grid + orbs), fixed to the viewport */
.a-root[b-6h5ydreh70]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 550px at 78% 8%, var(--orb-1), transparent 60%),
        radial-gradient(circle 450px at 8% 92%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}

/* ── SIDEBAR ── */
.sidebar[b-6h5ydreh70] {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
    background: var(--glass-bg); backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-right: 1px solid var(--glass-border);
    display: flex; flex-direction: column; z-index: 100;
}
.sidebar-brand[b-6h5ydreh70] {
    height: var(--nav-h); display: flex; align-items: center; gap: 10px;
    padding: 0 18px; border-bottom: 1px solid var(--glass-border); flex-shrink: 0;
}
.brand-mark[b-6h5ydreh70] {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px; color: var(--accent-text-on-fill);
}
.brand-name[b-6h5ydreh70] { font-size: 13px; font-weight: 700; color: var(--text-main); }
.brand-sub[b-6h5ydreh70]  { font-size: 10px; color: var(--text-faint); }

.sidebar-nav[b-6h5ydreh70] { flex: 1; overflow-y: auto; padding: 10px 8px; min-height: 0; }
.sidebar-nav[b-6h5ydreh70]::-webkit-scrollbar { width: 3px; }
.sidebar-nav[b-6h5ydreh70]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; }

.nav-label[b-6h5ydreh70] {
    font-size: 9.5px; font-weight: 600; letter-spacing: 1px;
    color: var(--text-faint); text-transform: uppercase; padding: 12px 10px 5px;
}
.nav-item[b-6h5ydreh70] {
    display: flex; align-items: center; gap: 9px; padding: 9px 11px;
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
    color: var(--text-dim); cursor: pointer; transition: .15s; margin-bottom: 1px;
    border-left: 2px solid transparent; position: relative;
}
.nav-item:hover[b-6h5ydreh70] { background: var(--accent-glow-soft); color: var(--text-main); }
.nav-item.active[b-6h5ydreh70] {
    background: linear-gradient(90deg, var(--accent-glow-soft), transparent);
    color: var(--accent-glow); border-left-color: var(--accent-glow);
}
.nav-icon[b-6h5ydreh70] { width: 16px; text-align: center; font-size: 14px; opacity: .75; flex-shrink: 0; }
.nav-item.active .nav-icon[b-6h5ydreh70] { opacity: 1; }

.sidebar-footer[b-6h5ydreh70] { padding: 12px; border-top: 1px solid var(--glass-border); flex-shrink: 0; }
.user-card[b-6h5ydreh70] {
    display: flex; align-items: center; gap: 9px; padding: 9px 10px;
    border-radius: var(--radius-sm); background: var(--accent-glow-soft); cursor: pointer;
}
.user-av[b-6h5ydreh70] {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; color: var(--accent-text-on-fill);
}
.user-name[b-6h5ydreh70] { font-size: 12px; font-weight: 600; color: var(--text-main); }
.user-role[b-6h5ydreh70] { font-size: 10px; color: var(--text-dim); }

/* ── TOPBAR ── */
.topbar[b-6h5ydreh70] {
    position: fixed; top: 0; left: var(--sidebar-w); right: 0; height: var(--nav-h);
    background: var(--glass-bg); backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; gap: 10px; padding: 0 20px; z-index: 90;
}
.topbar-title[b-6h5ydreh70] { font-size: 14px; font-weight: 700; color: var(--text-main); }
.topbar-spacer[b-6h5ydreh70] { flex: 1; }
.tb-icon[b-6h5ydreh70] {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: var(--glass-bg-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer; color: var(--text-dim); position: relative;
}
.tb-icon:hover[b-6h5ydreh70] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.notif-dot[b-6h5ydreh70] {
    position: absolute; top: 5px; right: 5px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--accent-glow);
}

/* ── MAIN ── */
.main[b-6h5ydreh70] {
    margin-left: var(--sidebar-w); padding-top: var(--nav-h);
    height: 100%; position: relative; z-index: 1;
    display: flex; flex-direction: column;
}
.content[b-6h5ydreh70] { padding: 20px 22px; flex: 1; overflow-y: auto; min-height: 0; }
.content[b-6h5ydreh70]::-webkit-scrollbar { width: 6px; }
.content[b-6h5ydreh70]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 6px; }

/* logout button in the sidebar footer */
.logout-btn[b-6h5ydreh70] {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 8px; padding: 9px 10px;
    border-radius: var(--radius-sm);
    background: var(--c-error-soft); border: 1px solid var(--c-error-border);
    color: var(--text-error); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: background .15s ease, transform .1s ease;
    user-select: none;
}
.logout-btn:hover[b-6h5ydreh70] { background: var(--c-error-border); }
.logout-btn:active[b-6h5ydreh70] { transform: scale(.97); }
.logout-icon[b-6h5ydreh70] { font-size: 14px; line-height: 1; }
/* /Components/Pages/ConsultantDashboard.razor.rz.scp.css */
/* ============================================================
   ConsultantDashboard.razor.css — Consultant panel shell
   Sidebar (226px) + TopBar (58px) + scrollable content.
   Same recipe as TeacherLayout; all colours from theme.css.
   ============================================================ */

.c-root[b-rsw090gm2p] {
    --sidebar-w: 226px;
    --nav-h: 58px;
    height: 100vh;
    overflow: hidden;
    color: var(--text-main);
    background: var(--bg-gradient);
    position: relative;
}

.c-root[b-rsw090gm2p]::before {
    content: "";
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle 550px at 78% 8%, var(--orb-1), transparent 60%),
        radial-gradient(circle 450px at 8% 92%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}

/* ── SIDEBAR ── */
.sidebar[b-rsw090gm2p] {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
    background: var(--glass-bg); backdrop-filter: blur(22px);
    border-right: 1px solid var(--glass-border);
    display: flex; flex-direction: column; z-index: 100;
}
.sidebar-brand[b-rsw090gm2p] {
    height: var(--nav-h); display: flex; align-items: center; gap: 10px;
    padding: 0 18px; border-bottom: 1px solid var(--glass-border); flex-shrink: 0;
}
.brand-mark[b-rsw090gm2p] {
    width: 30px; height: 30px; border-radius: 8px; background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px; color: var(--accent-text-on-fill);
}
.brand-name[b-rsw090gm2p] { font-size: 13px; font-weight: 700; color: var(--text-main); }
.brand-sub[b-rsw090gm2p]  { font-size: 10px; color: var(--text-faint); }

.sidebar-nav[b-rsw090gm2p] { flex: 1; overflow-y: auto; padding: 10px 8px; min-height: 0; }
.nav-item[b-rsw090gm2p] {
    display: flex; align-items: center; gap: 9px; padding: 9px 11px;
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
    color: var(--text-dim); cursor: pointer; transition: .15s; margin-bottom: 1px;
    border-left: 2px solid transparent;
}
.nav-item:hover[b-rsw090gm2p] { background: var(--accent-glow-soft); color: var(--text-main); }
.nav-item.active[b-rsw090gm2p] {
    background: linear-gradient(90deg, var(--accent-glow-soft), transparent);
    color: var(--accent-glow); border-left-color: var(--accent-glow);
}
.nav-icon[b-rsw090gm2p] { width: 16px; text-align: center; font-size: 14px; opacity: .75; flex-shrink: 0; }
.nav-item.active .nav-icon[b-rsw090gm2p] { opacity: 1; }

.sidebar-footer[b-rsw090gm2p] { padding: 12px; border-top: 1px solid var(--glass-border); flex-shrink: 0; }
.user-card[b-rsw090gm2p] { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--radius-sm); background: var(--accent-glow-soft); }
.user-av[b-rsw090gm2p] { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--accent-text-on-fill); }
.user-name[b-rsw090gm2p] { font-size: 12px; font-weight: 600; color: var(--text-main); }
.user-role[b-rsw090gm2p] { font-size: 10px; color: var(--text-dim); }

/* ── TOPBAR ── */
.topbar[b-rsw090gm2p] {
    position: fixed; top: 0; left: var(--sidebar-w); right: 0; height: var(--nav-h);
    background: var(--glass-bg); backdrop-filter: blur(22px);
    border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; gap: 10px; padding: 0 20px; z-index: 90;
}
.topbar-title[b-rsw090gm2p] { font-size: 14px; font-weight: 700; color: var(--text-main); }
.topbar-spacer[b-rsw090gm2p] { flex: 1; }
.tb-icon[b-rsw090gm2p] { width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: var(--glass-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; color: var(--text-dim); }
.tb-icon:hover[b-rsw090gm2p] { background: var(--accent-glow-soft); color: var(--accent-glow); }

/* ── MAIN ── */
.main[b-rsw090gm2p] { margin-left: var(--sidebar-w); padding-top: var(--nav-h); height: 100%; position: relative; z-index: 1; display: flex; flex-direction: column; }
.content[b-rsw090gm2p] { padding: 20px 22px; flex: 1; overflow-y: auto; min-height: 0; }
.content[b-rsw090gm2p]::-webkit-scrollbar { width: 6px; }
.content[b-rsw090gm2p]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 6px; }

.room-notice[b-rsw090gm2p] {
    background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25);
    color: #fbbf24; padding: 10px 14px; border-radius: var(--radius-sm);
    font-size: 12.5px; margin-bottom: 14px;
}

/* logout button in the sidebar footer */
.logout-btn[b-rsw090gm2p] {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 8px; padding: 9px 10px;
    border-radius: var(--radius-sm);
    background: var(--c-error-soft); border: 1px solid var(--c-error-border);
    color: var(--text-error); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: background .15s ease, transform .1s ease;
    user-select: none;
}
.logout-btn:hover[b-rsw090gm2p] { background: var(--c-error-border); }
.logout-btn:active[b-rsw090gm2p] { transform: scale(.97); }
.logout-icon[b-rsw090gm2p] { font-size: 14px; line-height: 1; }
/* /Components/Pages/ConsultantProfilePage.razor.rz.scp.css */
/* ============================================================
   ConsultantProfilePage.razor.css — CSS Isolation (scoped)
   Mirrors consultant.html "Profile" + book form.
   ============================================================ */

.cp-root[b-epl5lixwbi] { position: relative; min-height: 100vh; color: var(--text-main); }
.cp-bg[b-epl5lixwbi] {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle 700px at 80% 5%, var(--orb-1), transparent 60%),
        radial-gradient(circle 500px at 5% 85%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}

.btn[b-epl5lixwbi] { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-epl5lixwbi] { opacity: .6; cursor: not-allowed; }
.btn-primary[b-epl5lixwbi] { background: var(--accent-gradient); color: var(--accent-text-on-fill); }
.btn-ghost[b-epl5lixwbi] { background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-sm[b-epl5lixwbi] { padding: 6px 12px; font-size: 12px; }
.badge[b-epl5lixwbi] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-epl5lixwbi]  { background: rgba(74,222,128,.11); color: #4ade80; border: 1px solid rgba(74,222,128,.22); }
.b-blue[b-epl5lixwbi]   { background: rgba(79,168,255,.11); color: #4fa8ff; border: 1px solid rgba(79,168,255,.22); }
.b-purple[b-epl5lixwbi] { background: rgba(167,139,250,.11); color: #a78bfa; border: 1px solid rgba(167,139,250,.22); }

.topnav[b-epl5lixwbi] { position: sticky; top: 0; z-index: 100; background: var(--glass-bg); backdrop-filter: blur(24px); border-bottom: 1px solid var(--glass-border); padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 16px; }
.nav-mark[b-epl5lixwbi] { width: 28px; height: 28px; border-radius: 7px; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: var(--accent-text-on-fill); }
.nav-name[b-epl5lixwbi] { font-size: 14px; font-weight: 700; }
.nav-spacer[b-epl5lixwbi] { flex: 1; }
.nav-link[b-epl5lixwbi] { font-size: 12.5px; color: var(--text-dim); cursor: pointer; padding: 6px 12px; border-radius: var(--radius-sm); }
.nav-link:hover[b-epl5lixwbi] { color: var(--text-main); background: var(--accent-glow-soft); }

.cp-loading[b-epl5lixwbi] { text-align: center; color: var(--text-dim); padding: 60px 0; }
.cp-notfound[b-epl5lixwbi] { text-align: center; padding: 80px 24px; position: relative; z-index: 1; }
.nf-icon[b-epl5lixwbi] { font-size: 44px; margin-bottom: 10px; }
.nf-title[b-epl5lixwbi] { font-size: 18px; font-weight: 700; }
.nf-sub[b-epl5lixwbi] { font-size: 13px; color: var(--text-dim); margin: 6px 0 16px; }

.profile-page[b-epl5lixwbi] { max-width: 800px; margin: 0 auto; padding: 24px; position: relative; z-index: 1; }

/* header */
.prof-header[b-epl5lixwbi] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 24px; margin-bottom: 16px; backdrop-filter: blur(var(--glass-blur)); display: flex; gap: 20px; align-items: flex-start; }
.prof-av[b-epl5lixwbi] { width: 90px; height: 90px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 30px; color: var(--accent-text-on-fill); flex-shrink: 0; overflow: hidden; }
.prof-av img[b-epl5lixwbi] { width: 100%; height: 100%; object-fit: cover; }
.prof-main[b-epl5lixwbi] { flex: 1; }
.prof-name[b-epl5lixwbi] { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.prof-title[b-epl5lixwbi] { font-size: 14px; color: var(--text-dim); margin-bottom: 10px; }
.prof-badges[b-epl5lixwbi] { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.prof-star[b-epl5lixwbi] { font-size: 12px; color: #fbbf24; }
.prof-rate[b-epl5lixwbi] { font-size: 20px; font-weight: 800; color: #4ade80; }
.prof-rate-sub[b-epl5lixwbi] { font-size: 11px; color: var(--text-faint); }
.prof-side[b-epl5lixwbi] { text-align: right; flex-shrink: 0; }
.prof-loc[b-epl5lixwbi] { font-size: 11px; color: var(--text-faint); margin-bottom: 8px; }
.prof-avail[b-epl5lixwbi] { font-size: 11px; }
.prof-avail.on[b-epl5lixwbi] { color: #4ade80; }
.prof-avail.off[b-epl5lixwbi] { color: var(--text-faint); }

/* stats */
.prof-stats[b-epl5lixwbi] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.stat-box[b-epl5lixwbi] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.stat-val[b-epl5lixwbi] { font-size: 20px; font-weight: 800; }
.stat-val.blue[b-epl5lixwbi] { color: #4fa8ff; }
.stat-val.green[b-epl5lixwbi] { color: #4ade80; }
.stat-lbl[b-epl5lixwbi] { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }

/* sections */
.prof-section[b-epl5lixwbi] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 18px; margin-bottom: 14px; }
.prof-sec-title[b-epl5lixwbi] { font-size: 12.5px; font-weight: 700; margin-bottom: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; }
.prof-about[b-epl5lixwbi] { font-size: 13px; color: var(--text-dim); line-height: 1.7; }
.prof-spec[b-epl5lixwbi] { display: flex; gap: 8px; flex-wrap: wrap; }

/* book form */
.book-form[b-epl5lixwbi] { background: var(--accent-glow-soft); border: 1px solid rgba(79,168,255,.25); border-radius: var(--radius-md); padding: 20px; margin-bottom: 14px; }
.book-title[b-epl5lixwbi] { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.book-signin[b-epl5lixwbi] { font-size: 13px; color: var(--text-dim); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.book-error[b-epl5lixwbi] { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: #f87171; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12px; margin-bottom: 12px; }
.book-done[b-epl5lixwbi] { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.25); color: var(--text-main); border-radius: var(--radius-md); padding: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

.form-grid[b-epl5lixwbi] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-group[b-epl5lixwbi] { display: flex; flex-direction: column; gap: 4px; }
.form-group.full[b-epl5lixwbi] { grid-column: 1 / -1; }
.form-label[b-epl5lixwbi] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.req[b-epl5lixwbi] { color: #f87171; }
.form-input[b-epl5lixwbi], .form-select[b-epl5lixwbi], .form-textarea[b-epl5lixwbi] { width: 100%; padding: 8px 11px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; }
.form-input:focus[b-epl5lixwbi], .form-select:focus[b-epl5lixwbi], .form-textarea:focus[b-epl5lixwbi] { border-color: rgba(79,168,255,.55); }
.form-select option[b-epl5lixwbi] { background: var(--glass-bg); color: var(--text-main); }
.form-textarea[b-epl5lixwbi] { resize: vertical; min-height: 72px; line-height: 1.5; }
.book-actions[b-epl5lixwbi] { display: flex; gap: 10px; margin-top: 14px; align-items: center; }
.book-note[b-epl5lixwbi] { font-size: 11px; color: var(--text-faint); }

@media (max-width: 640px) {
    .prof-header[b-epl5lixwbi] { flex-direction: column; }
    .prof-side[b-epl5lixwbi] { text-align: left; }
    .form-grid[b-epl5lixwbi] { grid-template-columns: 1fr; }
    .prof-stats[b-epl5lixwbi] { grid-template-columns: 1fr 1fr 1fr; }
}
/* /Components/Pages/ConsultantsPage.razor.rz.scp.css */
/* ============================================================
   ConsultantsPage.razor.css — public shell (nav + background).
   The directory grid/cards live in ConsultantsDirectory.razor.css.
   ============================================================ */

.cons-root[b-rqhxezwkue] { position: relative; min-height: 100vh; color: var(--text-main); }

.cons-bg[b-rqhxezwkue] {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle 700px at 80% 5%, var(--orb-1), transparent 60%),
        radial-gradient(circle 500px at 5% 85%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}

/* nav */
.topnav[b-rqhxezwkue] { position: sticky; top: 0; z-index: 100; background: var(--glass-bg); backdrop-filter: blur(24px); border-bottom: 1px solid var(--glass-border); padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 16px; }
.nav-mark[b-rqhxezwkue] { width: 28px; height: 28px; border-radius: 7px; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: var(--accent-text-on-fill); }
.nav-name[b-rqhxezwkue] { font-size: 14px; font-weight: 700; }
.nav-spacer[b-rqhxezwkue] { flex: 1; }
.nav-link[b-rqhxezwkue] { font-size: 12.5px; color: var(--text-dim); cursor: pointer; padding: 6px 12px; border-radius: var(--radius-sm); }
.nav-link:hover[b-rqhxezwkue] { color: var(--text-main); background: var(--accent-glow-soft); }

/* the embedded directory needs page padding when standalone */
.cons-root[b-rqhxezwkue]  .directory { padding-left: 24px; padding-right: 24px; }
/* /Components/Pages/ConsultationRoomPage.razor.rz.scp.css */
/* ============================================================
   ConsultationRoomPage.razor.css — CSS Isolation (scoped)
   Mirrors consultation-room.html. Full-height, no page scroll.
   Dark room chrome is intentional (a video call); text/surfaces use
   theme.css var(--…) where an equivalent exists.
   ============================================================ */

:global(html)[b-9akr99sryw], :global(body)[b-9akr99sryw] { height: 100%; overflow: hidden; }

.room-loading[b-9akr99sryw] { text-align: center; color: var(--text-dim); padding: 80px 0; font-size: 15px; }
.room-notfound[b-9akr99sryw] { text-align: center; padding: 90px 24px; color: var(--text-main); }
.nf-icon[b-9akr99sryw] { font-size: 46px; margin-bottom: 10px; }
.nf-title[b-9akr99sryw] { font-size: 18px; font-weight: 700; }
.nf-sub[b-9akr99sryw] { font-size: 13px; color: var(--text-dim); margin: 6px 0 16px; }

/* buttons / badges */
.btn[b-9akr99sryw] { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--radius-sm); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-9akr99sryw] { opacity: .6; cursor: not-allowed; }
.btn-primary[b-9akr99sryw] { background: var(--accent-gradient); color: var(--accent-text-on-fill); }
.btn-ghost[b-9akr99sryw] { background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-xs[b-9akr99sryw] { padding: 4px 9px; font-size: 11px; }
.badge[b-9akr99sryw] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-9akr99sryw] { background: rgba(74,222,128,.11); color: #4ade80; border: 1px solid rgba(74,222,128,.22); }

/* ── TOP BAR ── */
.topbar[b-9akr99sryw] { height: 52px; background: var(--glass-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 12px; padding: 0 16px; flex-shrink: 0; position: relative; z-index: 10; color: var(--text-main); }
.tb-logo[b-9akr99sryw] { width: 26px; height: 26px; border-radius: 7px; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; color: var(--accent-text-on-fill); flex-shrink: 0; }
.tb-title[b-9akr99sryw] { font-size: 13.5px; font-weight: 700; }
.tb-session[b-9akr99sryw] { font-size: 11px; color: var(--text-dim); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); padding: 3px 10px; border-radius: 20px; }
.tb-timer[b-9akr99sryw] { font-size: 13px; font-weight: 800; color: #4ade80; background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.25); padding: 4px 14px; border-radius: 20px; font-family: monospace; }
.tb-live[b-9akr99sryw] { font-size: 11px; font-weight: 700; color: #f87171; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); padding: 3px 10px; border-radius: 20px; animation: room-pulse-b-9akr99sryw 1.5s infinite; }
.tb-spacer[b-9akr99sryw] { flex: 1; }

/* ── MAIN LAYOUT ── */
.room[b-9akr99sryw] { display: flex; height: calc(100vh - 52px); overflow: hidden; color: var(--text-main); }

/* ── LEFT: VIDEO + CONTROLS ── */
.left-col[b-9akr99sryw] { display: flex; flex-direction: column; width: 340px; flex-shrink: 0; border-right: 1px solid var(--glass-border); }
.video-area[b-9akr99sryw] { position: relative; flex: 1; background: #02060f; overflow: hidden; display: flex; flex-direction: column; }

.video-parent-main[b-9akr99sryw] { flex: 1; background: linear-gradient(135deg, rgba(20,14,50,.95), rgba(8,8,26,.98)); display: flex; align-items: center; justify-content: center; position: relative; flex-direction: column; gap: 8px; }
.video-parent-main video[b-9akr99sryw] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vpm-placeholder[b-9akr99sryw] { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.vpm-av[b-9akr99sryw] { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, #a78bfa, #c4b5fd); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 30px; color: var(--accent-text-on-fill); }
.vpm-name[b-9akr99sryw] { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.video-label-main[b-9akr99sryw] { position: absolute; bottom: 10px; left: 12px; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.6); padding: 3px 10px; border-radius: 20px; color: var(--text-main); z-index: 2; }
.video-lang-main[b-9akr99sryw] { position: absolute; top: 10px; left: 12px; font-size: 10px; font-weight: 700; background: rgba(79,168,255,.2); border: 1px solid rgba(79,168,255,.4); padding: 2px 8px; border-radius: 20px; color: #4fa8ff; z-index: 2; }

.video-consultant-pip[b-9akr99sryw] { position: absolute; top: 10px; right: 10px; width: 90px; height: 64px; background: rgba(14,31,58,.95); border: 2px solid rgba(74,222,128,.4); border-radius: var(--radius-sm); cursor: grab; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; box-shadow: 0 4px 16px rgba(0,0,0,.5); user-select: none; z-index: 5; overflow: hidden; }
.video-consultant-pip:active[b-9akr99sryw] { cursor: grabbing; }
.video-consultant-pip video[b-9akr99sryw] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vc-placeholder[b-9akr99sryw] { display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; }
.vc-av-sm[b-9akr99sryw] { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 10px; color: var(--accent-text-on-fill); }
.vc-name-sm[b-9akr99sryw] { font-size: 8px; color: var(--text-dim); }
.vc-lang-sm[b-9akr99sryw] { position: absolute; top: 3px; right: 5px; font-size: 7px; background: rgba(74,222,128,.2); border: 1px solid rgba(74,222,128,.35); padding: 1px 4px; border-radius: 10px; color: #4ade80; z-index: 2; }
.drag-hint[b-9akr99sryw] { position: absolute; top: 3px; left: 5px; font-size: 9px; color: var(--text-faint); z-index: 2; }

.video-controls[b-9akr99sryw] { flex-shrink: 0; padding: 10px 12px; border-top: 1px solid var(--glass-border); background: var(--glass-bg); display: flex; align-items: center; justify-content: center; gap: 10px; }
.ctrl-wrap[b-9akr99sryw] { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ctrl-btn[b-9akr99sryw] { width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; font-size: 17px; display: flex; align-items: center; justify-content: center; transition: .2s; }
.ctrl-btn:hover[b-9akr99sryw] { transform: scale(1.08); }
.ctrl-lbl[b-9akr99sryw] { font-size: 8px; color: var(--text-faint); white-space: nowrap; }
.ctrl-lbl.end-lbl[b-9akr99sryw] { color: #f87171; }
.ctrl-mic[b-9akr99sryw] { background: rgba(79,168,255,.15); border: 1px solid rgba(79,168,255,.3); }
.ctrl-cam[b-9akr99sryw] { background: rgba(79,168,255,.15); border: 1px solid rgba(79,168,255,.3); }
.ctrl-share[b-9akr99sryw] { background: rgba(167,139,250,.15); border: 1px solid rgba(167,139,250,.3); }
.ctrl-trans[b-9akr99sryw] { background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.3); }
.ctrl-trans.on[b-9akr99sryw] { background: rgba(34,211,238,.25); border-color: rgba(34,211,238,.6); }
.ctrl-end[b-9akr99sryw] { background: rgba(248,113,113,.2); border: 1px solid rgba(248,113,113,.4); }
.ctrl-off[b-9akr99sryw] { opacity: .4; }
.ctrl-sep[b-9akr99sryw] { width: 1px; height: 32px; background: var(--glass-border); }

/* ── CENTER: TRANSCRIPT ── */
.transcript-section[b-9akr99sryw] { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--glass-border); }
.trans-header[b-9akr99sryw] { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; background: var(--glass-bg-soft); flex-wrap: wrap; }
.trans-title[b-9akr99sryw] { font-size: 12px; font-weight: 700; flex-shrink: 0; }
.trans-lang-pills[b-9akr99sryw] { display: flex; align-items: center; gap: 5px; }
.lang-pill[b-9akr99sryw] { padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 600; cursor: pointer; border: 1px solid var(--glass-border); background: var(--glass-bg-soft); color: var(--text-dim); }
.lang-pill.active[b-9akr99sryw] { background: rgba(34,211,238,.15); border-color: rgba(34,211,238,.4); color: #22d3ee; }
.trans-toggle[b-9akr99sryw] { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); margin-left: auto; }
.t-sw[b-9akr99sryw] { width: 32px; height: 18px; border-radius: 10px; background: rgba(100,120,150,.3); border: 1px solid var(--glass-border); position: relative; cursor: pointer; transition: .25s; flex-shrink: 0; }
.t-sw.on[b-9akr99sryw] { background: rgba(34,211,238,.3); border-color: rgba(34,211,238,.5); }
.t-dot[b-9akr99sryw] { position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); transition: .25s; }
.t-sw.on .t-dot[b-9akr99sryw] { left: 17px; background: #22d3ee; }
.t-lbl[b-9akr99sryw] { font-size: 10.5px; }

.transcript-body[b-9akr99sryw] { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.transcript-body[b-9akr99sryw]::-webkit-scrollbar { width: 4px; }
.transcript-body[b-9akr99sryw]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; }
.trans-empty[b-9akr99sryw] { color: var(--text-faint); font-size: 12px; text-align: center; padding: 30px 10px; line-height: 1.6; }

.tmsg[b-9akr99sryw] { border-radius: var(--radius-sm); overflow: hidden; position: relative; }
.tmsg-head[b-9akr99sryw] { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 10.5px; font-weight: 700; }
.tmsg.parent .tmsg-head[b-9akr99sryw] { background: rgba(79,168,255,.10); color: #4fa8ff; }
.tmsg.consultant .tmsg-head[b-9akr99sryw] { background: rgba(74,222,128,.10); color: #4ade80; }
.tmsg-body[b-9akr99sryw] { padding: 8px 12px; background: rgba(14,31,58,.5); border: 1px solid rgba(255,255,255,.05); }
.tmsg-original[b-9akr99sryw] { font-size: 13px; color: var(--text-main); line-height: 1.6; }
.tmsg-translated[b-9akr99sryw] { font-size: 12px; color: var(--text-dim); margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.06); line-height: 1.5; font-style: italic; }
.msg-save-btn[b-9akr99sryw] { position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--glass-border); background: rgba(14,31,58,.8); color: var(--text-faint); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .2s; z-index: 2; }
.msg-save-btn:hover[b-9akr99sryw] { background: rgba(251,191,36,.15); border-color: rgba(251,191,36,.4); color: #fbbf24; }
.msg-save-btn.saved[b-9akr99sryw] { background: rgba(74,222,128,.15); border-color: rgba(74,222,128,.4); color: #4ade80; }

/* ── RIGHT: AI + NOTES ── */
.right-col[b-9akr99sryw] { width: 360px; flex-shrink: 0; border-left: 1px solid var(--glass-border); display: flex; flex-direction: column; background: var(--glass-bg); overflow: hidden; }
.rtabs[b-9akr99sryw] { display: flex; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; }
.rtab[b-9akr99sryw] { flex: 1; padding: 10px 6px; font-size: 11px; font-weight: 600; color: var(--text-faint); cursor: pointer; text-align: center; border-bottom: 2px solid transparent; transition: .15s; }
.rtab.active[b-9akr99sryw] { color: #4fa8ff; border-bottom-color: #4fa8ff; }
.rtab-content[b-9akr99sryw] { display: none; flex: 1; flex-direction: column; overflow: hidden; min-height: 0; }
.rtab-content.active[b-9akr99sryw] { display: flex; }

/* AI copilot */
.ai-status[b-9akr99sryw] { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; background: var(--glass-bg-soft); }
.ai-pulse[b-9akr99sryw] { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: room-pulse-b-9akr99sryw 1.5s infinite; flex-shrink: 0; }
.ai-status-text[b-9akr99sryw] { font-size: 11.5px; font-weight: 700; }
.ai-status-sub[b-9akr99sryw] { font-size: 10px; color: var(--text-faint); margin-top: 1px; }
.ai-status-ml[b-9akr99sryw] { margin-left: auto; }

.ai-tips-area[b-9akr99sryw] { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.ai-tips-area[b-9akr99sryw]::-webkit-scrollbar { width: 4px; }
.ai-tips-area[b-9akr99sryw]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; }
.ai-tip[b-9akr99sryw] { border-radius: var(--radius-sm); padding: 9px 12px; font-size: 12px; line-height: 1.6; border: 1px solid transparent; }
.ai-tip.suggest[b-9akr99sryw] { background: rgba(79,168,255,.08); border-color: rgba(79,168,255,.2); color: var(--text-main); }
.ai-tip.warn[b-9akr99sryw] { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.2); color: #fbbf24; }
.ai-tip.insight[b-9akr99sryw] { background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.2); color: #a78bfa; }
.ai-tip-head[b-9akr99sryw] { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; opacity: .7; }
.ai-tip-icon[b-9akr99sryw] { font-size: 14px; }

.ai-actions[b-9akr99sryw] { padding: 8px 12px 18px; border-top: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.ai-rb-wrap[b-9akr99sryw] { display: flex; flex-direction: column; align-items: center; }
.ai-round-btn[b-9akr99sryw] { width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: .2s; position: relative; flex-shrink: 0; }
.ai-round-btn:hover[b-9akr99sryw] { transform: scale(1.12); }
.ai-round-btn .rb-tip[b-9akr99sryw] { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 8.5px; color: var(--text-faint); pointer-events: none; }
.rb-summary[b-9akr99sryw] { background: rgba(79,168,255,.15); border: 1px solid rgba(79,168,255,.35); color: #4fa8ff; }
.rb-exercises[b-9akr99sryw] { background: rgba(74,222,128,.15); border: 1px solid rgba(74,222,128,.35); color: #4ade80; }
.rb-settings[b-9akr99sryw] { background: rgba(167,139,250,.15); border: 1px solid rgba(167,139,250,.35); color: #a78bfa; }
.rb-history[b-9akr99sryw] { background: rgba(251,191,36,.15); border: 1px solid rgba(251,191,36,.35); color: #fbbf24; }
.rb-send[b-9akr99sryw] { background: rgba(34,211,238,.15); border: 1px solid rgba(34,211,238,.35); color: #22d3ee; }

/* notes */
.notes-area[b-9akr99sryw] { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 10px 12px; gap: 8px; }
.notes-lbl[b-9akr99sryw] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.notes-lbl-mt[b-9akr99sryw] { margin-top: 4px; }
.case-info[b-9akr99sryw] { display: flex; gap: 8px; flex-shrink: 0; }
.case-input[b-9akr99sryw] { flex: 1; padding: 7px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12px; outline: none; }
.case-input:focus[b-9akr99sryw] { border-color: rgba(79,168,255,.55); }
.case-input[b-9akr99sryw]::placeholder { color: var(--text-faint); }
.send-email[b-9akr99sryw] { width: 100%; margin-top: 4px; }

.saved-notes[b-9akr99sryw] { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.saved-notes[b-9akr99sryw]::-webkit-scrollbar { width: 4px; }
.saved-notes[b-9akr99sryw]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; }
.notes-empty[b-9akr99sryw] { font-size: 11.5px; color: var(--text-faint); padding: 14px 4px; }
.note-item[b-9akr99sryw] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 9px 12px; position: relative; }
.note-item.problem[b-9akr99sryw] { border-left: 3px solid #fbbf24; }
.note-item.action[b-9akr99sryw] { border-left: 3px solid #4ade80; }
.note-item.summary[b-9akr99sryw] { border-left: 3px solid #4fa8ff; }
.note-type[b-9akr99sryw] { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.note-item.problem .note-type[b-9akr99sryw] { color: #fbbf24; }
.note-item.action .note-type[b-9akr99sryw] { color: #4ade80; }
.note-item.summary .note-type[b-9akr99sryw] { color: #4fa8ff; }
.note-text[b-9akr99sryw] { font-size: 12px; color: var(--text-main); line-height: 1.5; }
.note-del[b-9akr99sryw] { position: absolute; top: 6px; right: 8px; font-size: 11px; color: var(--text-faint); cursor: pointer; opacity: 0; }
.note-item:hover .note-del[b-9akr99sryw] { opacity: 1; }

.note-add-area[b-9akr99sryw] { flex-shrink: 0; }
.note-textarea[b-9akr99sryw] { width: 100%; padding: 8px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12px; outline: none; resize: none; height: 64px; line-height: 1.5; }
.note-textarea:focus[b-9akr99sryw] { border-color: rgba(79,168,255,.55); }
.note-add-row[b-9akr99sryw] { display: flex; gap: 6px; margin-top: 6px; }
.note-type-sel[b-9akr99sryw] { flex: 1; padding: 6px 8px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 11px; outline: none; }
.note-type-sel option[b-9akr99sryw] { background: var(--glass-bg); color: var(--text-main); }

/* ── MODAL ── */
.modal-overlay[b-9akr99sryw] { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[b-9akr99sryw] { background: var(--glass-bg); backdrop-filter: blur(24px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); width: 560px; max-width: 100%; max-height: 85vh; display: flex; flex-direction: column; color: var(--text-main); }
.modal-head[b-9akr99sryw] { padding: 14px 18px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-title[b-9akr99sryw] { font-size: 14px; font-weight: 700; }
.modal-close[b-9akr99sryw] { width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 13px; }
.modal-body[b-9akr99sryw] { padding: 16px 18px; overflow-y: auto; flex: 1; font-size: 13px; line-height: 1.8; color: var(--text-dim); }
.modal-loading[b-9akr99sryw] { text-align: center; color: var(--text-dim); padding: 30px 0; }
.modal-hint[b-9akr99sryw] { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.6; }
.modal-text[b-9akr99sryw] { white-space: pre-wrap; color: var(--text-main); font-size: 13px; line-height: 1.7; }
.ai-prompt-text[b-9akr99sryw] { width: 100%; height: 160px; padding: 10px 12px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--text-main); font-family: inherit; font-size: 12.5px; line-height: 1.7; outline: none; resize: vertical; }
.modal-inline-actions[b-9akr99sryw] { display: flex; gap: 8px; margin-top: 10px; }
.send-opt[b-9akr99sryw] { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 12px; background: rgba(74,222,128,.06); border: 1px solid rgba(74,222,128,.2); border-radius: 8px; font-size: 12.5px; color: var(--text-main); margin-bottom: 8px; }
.send-status[b-9akr99sryw] { margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.hist-item[b-9akr99sryw] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: 8px; padding: 12px; margin-bottom: 8px; }
.hist-top[b-9akr99sryw] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.hist-title[b-9akr99sryw] { font-size: 12px; font-weight: 700; color: var(--text-main); }
.hist-body[b-9akr99sryw] { font-size: 11.5px; color: var(--text-dim); line-height: 1.6; }
.modal-footer[b-9akr99sryw] { padding: 12px 18px; border-top: 1px solid var(--glass-border); display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; }

@keyframes room-pulse-b-9akr99sryw { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

@media (max-width: 1000px) {
    .left-col[b-9akr99sryw] { width: 280px; }
    .right-col[b-9akr99sryw] { width: 300px; }
}
/* /Components/Pages/Health.razor.rz.scp.css */
[b-0231uvgm5c] .mud-card {
    background: var(--glass-bg, rgba(15, 23, 42, 0.8));
    border: 1px solid var(--glass-border, rgba(99, 179, 237, 0.2));
    color: var(--text-primary, #e2e8f0);
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ============================================================
   Login.razor.css
   This file MUST be named exactly Login.razor.css and sit next
   to Login.razor -- Blazor applies CSS Isolation automatically
   (adds a unique scope attribute to every selector here and to
   every element rendered by Login.razor). No class renaming
   needed, and nothing here can leak to or be affected by other
   pages.

   The whole login page must be wrapped in a root element with
   class="login-page" -- this replaces the old `body::before /
   body::after` trick (body is outside this component, so CSS
   isolation can't reach it). `.login-page::before/::after` with
   position:fixed still covers the full viewport.
   ============================================================ */

.login-page[b-k4a8c56i6b] {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-main);
  position: relative;
  overflow: hidden;
  background: var(--bg-gradient);
}

/* grid + glow orbs */
.login-page[b-k4a8c56i6b]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 460px at 88% 8%, var(--orb-1), transparent 70%),
    radial-gradient(circle 520px at 4% 96%, var(--orb-2), transparent 70%),
    radial-gradient(circle 260px at 60% 85%, var(--orb-3), transparent 70%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:
    auto, auto, auto,
    var(--grid-size) var(--grid-size),
    var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, rgba(0,0,0,0.9), transparent 80%);
  mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, rgba(0,0,0,0.9), transparent 80%);
  animation: login-orb-drift-b-k4a8c56i6b 24s ease-in-out infinite alternate;
}

@keyframes login-orb-drift-b-k4a8c56i6b {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: -30px 30px, 40px -30px, -20px 20px, 0 0, 0 0; }
}

/* scan line */
.login-page[b-k4a8c56i6b]::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: -2px;
  height: 2px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background: linear-gradient(90deg, transparent, var(--scanline) 50%, transparent);
  animation: login-scan-sweep-b-k4a8c56i6b 7s linear infinite;
}

@keyframes login-scan-sweep-b-k4a8c56i6b {
  0%   { top: -2px; }
  100% { top: 100%; }
}

/* MAIN CARD */
.card[b-k4a8c56i6b] {
  width: 900px;
  height: 520px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 25px var(--accent-glow-soft);
  border-radius: var(--radius-xl);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* LEFT LOGIN PANEL */
.left[b-k4a8c56i6b] {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

/* LOGO + COMPANY */
.logo-row[b-k4a8c56i6b] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.logo-icon[b-k4a8c56i6b] {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-text-on-fill);
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 0 18px var(--accent-glow);
}

.logo-text-title[b-k4a8c56i6b] {
  font-size: 15px;
  font-weight: 700;
}

.logo-text-sub[b-k4a8c56i6b] {
  font-size: 11px;
  color: var(--text-faint);
}

.left h1[b-k4a8c56i6b] {
  font-size: 26px;
  margin-bottom: 10px;
}

/* INPUTS */
.left input[b-k4a8c56i6b] {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: rgba(15, 30, 60, 0.35);
  color: var(--text-main);
  font-size: 15px;
  outline: none;
  transition: 0.25s;
}

.left input:focus[b-k4a8c56i6b] {
  border-color: #7ccaff;
  box-shadow: 0 0 12px var(--accent-glow-soft);
}

/* BUTTON */
.left button[b-k4a8c56i6b] {
  padding: 12px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--accent-gradient);
  color: var(--accent-text-on-fill);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: 0 0 18px var(--accent-glow);
  transition: 0.25s;
}

.left button:hover[b-k4a8c56i6b] {
  transform: translateY(-2px);
  box-shadow: 0 0 25px var(--accent-glow);
}

.error[b-k4a8c56i6b] {
  color: var(--text-error);
  font-size: 12px;
  margin-top: -6px;
}

/* FORGOT PASSWORD */
.forgot[b-k4a8c56i6b] {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  text-align: right;
}

.forgot:hover[b-k4a8c56i6b] {
  text-decoration: underline;
}

/* SHAKE ANIMATION */
.shake[b-k4a8c56i6b] {
  animation: login-shake-b-k4a8c56i6b 0.35s ease-in-out;
}

@keyframes login-shake-b-k4a8c56i6b {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* RIGHT SLIDER */
.right[b-k4a8c56i6b] {
  position: relative;
  overflow: hidden;
}

.right img[b-k4a8c56i6b] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.right img.show[b-k4a8c56i6b] {
  opacity: 1;
}

/* SLIDE TEXT - GLASS + GRADIENT BORDER */
.slide-text[b-k4a8c56i6b] {
  position: absolute;
  left: 40px;
  bottom: 30px;
  max-width: 420px;
  background: var(--glass-bg-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background-clip: padding-box;
  padding: 18px 22px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.85),
    0 0 22px var(--accent-glow-soft),
    0 0 12px var(--accent-glow-soft) inset;
}

.slide-text[b-k4a8c56i6b]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: var(--accent-gradient);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.slide-text.show[b-k4a8c56i6b] {
  opacity: 1;
  transform: translateY(0);
}

.slide-text h2[b-k4a8c56i6b] {
  font-size: 22px;
  margin-bottom: 6px;
  color: var(--text-main);
}

.slide-text p[b-k4a8c56i6b] {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* FOOTER */
.footer[b-k4a8c56i6b] {
  position: absolute;
  bottom: 10px;
  left: 20px;
  font-size: 11px;
  color: var(--text-faint);
}

.input[b-k4a8c56i6b] {
  margin-bottom: 25px !important;
}
.error[b-k4a8c56i6b] {
  color: var(--text-error);
  font-size: 12px;
  margin-top: 6px;
  margin-bottom: 4px;
  display: block;
}
/* /Components/Pages/Marketplace.razor.rz.scp.css */
/* ============================================================
   Marketplace.razor.css — CSS Isolation (scoped to this component)
   Mirrors marketplace-v2.html. Surface/text colours come from theme.css
   (var(--...)); the category colours (new/used/free/job/work/camp) are
   brand-semantic and stay literal so they read the same under every theme.
   ============================================================ */

.mk-root[b-0y6y9nfl38] {
    --c-all:  #4fa8ff; --c-all-bg:  rgba(79,168,255,.10);  --c-all-border:  rgba(79,168,255,.30);
    --c-new:  #4ade80; --c-new-bg:  rgba(74,222,128,.10);  --c-new-border:  rgba(74,222,128,.30);
    --c-used: #fbbf24; --c-used-bg: rgba(251,191,36,.10);  --c-used-border: rgba(251,191,36,.30);
    --c-free: #22d3ee; --c-free-bg: rgba(34,211,238,.10);  --c-free-border: rgba(34,211,238,.30);
    --c-job:  #818cf8; --c-job-bg:  rgba(129,140,248,.10); --c-job-border:  rgba(129,140,248,.30);
    --c-work: #a78bfa; --c-work-bg: rgba(167,139,250,.10); --c-work-border: rgba(167,139,250,.30);
    --c-camp: #fb923c; --c-camp-bg: rgba(251,146,60,.10);  --c-camp-border: rgba(251,146,60,.30);

    position: relative;
    min-height: 100vh;
    color: var(--text-main);
    /* full app background so guests (no dashboard shell) still get the theme */
    background: var(--bg-gradient);
}

/* neon-glass background: grid + drifting glow orbs (same pattern as Login) */
.mk-root[b-0y6y9nfl38]::before {
    content: "";
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle 460px at 88% 8%, var(--orb-1), transparent 70%),
        radial-gradient(circle 520px at 4% 96%, var(--orb-2), transparent 70%),
        radial-gradient(circle 260px at 60% 85%, var(--orb-3), transparent 70%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size:
        auto, auto, auto,
        var(--grid-size) var(--grid-size),
        var(--grid-size) var(--grid-size);
    animation: mk-orb-drift-b-0y6y9nfl38 24s ease-in-out infinite alternate;
}

@keyframes mk-orb-drift-b-0y6y9nfl38 {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: -30px 30px, 40px -30px, -20px 20px, 0 0, 0 0; }
}

/* scan line sweeping down the viewport (same as Login) */
.mk-root[b-0y6y9nfl38]::after {
    content: "";
    position: fixed;
    left: 0; right: 0; top: -2px; height: 2px;
    z-index: 1; pointer-events: none; opacity: 0.5;
    background: linear-gradient(90deg, transparent, var(--scanline) 50%, transparent);
    animation: mk-scan-sweep-b-0y6y9nfl38 7s linear infinite;
}

@keyframes mk-scan-sweep-b-0y6y9nfl38 {
    0%   { top: -2px; }
    100% { top: 100%; }
}

/* ── buttons ── */
.btn[b-0y6y9nfl38] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn-ghost[b-0y6y9nfl38] { background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-0y6y9nfl38] { background: var(--accent-glow-soft); color: var(--text-main); }
.btn-xs[b-0y6y9nfl38] { padding: 4px 9px; font-size: 11px; }

/* ── top nav ── */
.topnav[b-0y6y9nfl38] {
    position: sticky; top: 0; z-index: 100; background: var(--glass-bg);
    backdrop-filter: blur(24px); border-bottom: 1px solid var(--glass-border);
    padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 16px;
}
.nav-brand[b-0y6y9nfl38] { display: flex; align-items: center; gap: 10px; }
.nav-mark[b-0y6y9nfl38] { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--accent-text-on-fill); }
.nav-name[b-0y6y9nfl38] { font-size: 14px; font-weight: 700; }
.nav-sub[b-0y6y9nfl38] { font-size: 9.5px; color: var(--text-faint); }
.nav-spacer[b-0y6y9nfl38] { flex: 1; }
.nav-link[b-0y6y9nfl38] { font-size: 12.5px; color: var(--text-dim); cursor: pointer; padding: 6px 12px; border-radius: var(--radius-sm); }
.nav-link:hover[b-0y6y9nfl38] { color: var(--text-main); background: var(--accent-glow-soft); }

/* ── hero ── */
.hero[b-0y6y9nfl38] { padding: 36px 24px 24px; text-align: center; position: relative; z-index: 1; }
.hero-title[b-0y6y9nfl38] { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 8px; line-height: 1.2; }
.hero-title span[b-0y6y9nfl38] { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-sub[b-0y6y9nfl38] { font-size: 14px; color: var(--text-dim); }

/* ── marketplace ── */
.marketplace[b-0y6y9nfl38] { padding: 22px 24px 40px; position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; }
.mk-loading[b-0y6y9nfl38], .mk-empty[b-0y6y9nfl38] { text-align: center; color: var(--text-dim); padding: 60px 0; font-size: 15px; }

/* ── category chips ── */
.cat-chips[b-0y6y9nfl38] { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.cat-chip[b-0y6y9nfl38] { padding: 8px 18px; border-radius: 30px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 2px solid transparent; transition: .25s; display: flex; align-items: center; gap: 6px; backdrop-filter: blur(12px); }
.cat-chip.active[b-0y6y9nfl38] { box-shadow: 0 0 20px var(--chip-glow, rgba(79,168,255,.3)); }
.chip-all[b-0y6y9nfl38]  { background: var(--c-all-bg);  border-color: var(--c-all-border);  color: var(--c-all);  --chip-glow: rgba(79,168,255,.4); }
.chip-new[b-0y6y9nfl38]  { background: var(--c-new-bg);  border-color: var(--c-new-border);  color: var(--c-new);  --chip-glow: rgba(74,222,128,.4); }
.chip-used[b-0y6y9nfl38] { background: var(--c-used-bg); border-color: var(--c-used-border); color: var(--c-used); --chip-glow: rgba(251,191,36,.4); }
.chip-free[b-0y6y9nfl38] { background: var(--c-free-bg); border-color: var(--c-free-border); color: var(--c-free); --chip-glow: rgba(34,211,238,.4); }
.chip-job[b-0y6y9nfl38]  { background: var(--c-job-bg);  border-color: var(--c-job-border);  color: var(--c-job);  --chip-glow: rgba(129,140,248,.4); }
.chip-work[b-0y6y9nfl38] { background: var(--c-work-bg); border-color: var(--c-work-border); color: var(--c-work); --chip-glow: rgba(167,139,250,.4); }
.chip-camp[b-0y6y9nfl38] { background: var(--c-camp-bg); border-color: var(--c-camp-border); color: var(--c-camp); --chip-glow: rgba(251,146,60,.4); }

/* ── filter bar ── */
.filter-bar[b-0y6y9nfl38] { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.f-search[b-0y6y9nfl38] { flex: 1; min-width: 200px; padding: 9px 14px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; backdrop-filter: blur(12px); }
.f-search[b-0y6y9nfl38]::placeholder { color: var(--text-faint); }
.f-search:focus[b-0y6y9nfl38] { border-color: rgba(79,168,255,.5); }
.f-select[b-0y6y9nfl38] { padding: 9px 12px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12px; outline: none; backdrop-filter: blur(12px); }
.f-select option[b-0y6y9nfl38] { background: var(--glass-bg); color: var(--text-main); }

/* ── ads grid ── */
.ads-grid[b-0y6y9nfl38] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }

/* ── ad card ── */
.ad-card[b-0y6y9nfl38] {
    background: var(--card-bg, var(--glass-bg)); border: 1px solid var(--card-border, var(--glass-border));
    border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: .3s;
    display: flex; flex-direction: column; backdrop-filter: blur(var(--glass-blur)); position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.ad-card[b-0y6y9nfl38]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-accent, var(--accent-gradient)); opacity: .8; }
.ad-card:hover[b-0y6y9nfl38] { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.35), 0 0 24px var(--card-glow, rgba(79,168,255,.1)); }
.ad-card.boosted[b-0y6y9nfl38] { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 20px rgba(251,191,36,.12); }

.card-new[b-0y6y9nfl38]  { --card-border: var(--c-new-border);  --card-accent: linear-gradient(90deg,#4ade80,#86efac); --card-glow: rgba(74,222,128,.12); }
.card-used[b-0y6y9nfl38] { --card-border: var(--c-used-border); --card-accent: linear-gradient(90deg,#fbbf24,#fde68a); --card-glow: rgba(251,191,36,.12); }
.card-free[b-0y6y9nfl38] { --card-border: var(--c-free-border); --card-accent: linear-gradient(90deg,#22d3ee,#67e8f9); --card-glow: rgba(34,211,238,.12); }
.card-job[b-0y6y9nfl38]  { --card-border: var(--c-job-border);  --card-accent: linear-gradient(90deg,#818cf8,#a5b4fc); --card-glow: rgba(129,140,248,.12); }
.card-work[b-0y6y9nfl38] { --card-border: var(--c-work-border); --card-accent: linear-gradient(90deg,#a78bfa,#c4b5fd); --card-glow: rgba(167,139,250,.12); }
.card-camp[b-0y6y9nfl38] { --card-border: var(--c-camp-border); --card-accent: linear-gradient(90deg,#fb923c,#fdba74); --card-glow: rgba(251,146,60,.12); }

/* ad image */
.ad-img[b-0y6y9nfl38] { height: 158px; position: relative; overflow: hidden; flex-shrink: 0; background: var(--glass-bg-soft); }
.ad-img-bg[b-0y6y9nfl38] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 46px; opacity: .35; }
.ad-img img[b-0y6y9nfl38] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-cat-badge[b-0y6y9nfl38] { position: absolute; top: 10px; left: 10px; }
.ad-boost-badge[b-0y6y9nfl38] { position: absolute; top: 10px; right: 10px; }
.ad-cond[b-0y6y9nfl38] { position: absolute; bottom: 10px; right: 10px; }

/* badges */
.bdg[b-0y6y9nfl38] { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; backdrop-filter: blur(10px); }
.bdg-new[b-0y6y9nfl38]  { background: rgba(74,222,128,.2);  color: #4ade80; border: 1px solid rgba(74,222,128,.4); }
.bdg-used[b-0y6y9nfl38] { background: rgba(251,191,36,.2);  color: #fbbf24; border: 1px solid rgba(251,191,36,.4); }
.bdg-free[b-0y6y9nfl38] { background: rgba(34,211,238,.2);  color: #22d3ee; border: 1px solid rgba(34,211,238,.4); }
.bdg-job[b-0y6y9nfl38]  { background: rgba(129,140,248,.2); color: #818cf8; border: 1px solid rgba(129,140,248,.4); }
.bdg-work[b-0y6y9nfl38] { background: rgba(167,139,250,.2); color: #a78bfa; border: 1px solid rgba(167,139,250,.4); }
.bdg-camp[b-0y6y9nfl38] { background: rgba(251,146,60,.2);  color: #fb923c; border: 1px solid rgba(251,146,60,.4); }
.bdg-boost[b-0y6y9nfl38]{ background: rgba(251,191,36,.25); color: #fbbf24; border: 1px solid rgba(251,191,36,.5); }

/* ad body */
.ad-body[b-0y6y9nfl38] { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.ad-title[b-0y6y9nfl38] { font-size: 14px; font-weight: 700; line-height: 1.3; }
.ad-desc[b-0y6y9nfl38] { font-size: 12px; color: var(--text-dim); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.ad-meta[b-0y6y9nfl38] { display: flex; gap: 8px; font-size: 10.5px; color: var(--text-faint); flex-wrap: wrap; }
.ad-verified[b-0y6y9nfl38] { color: #4ade80; font-weight: 600; }

/* ad footer */
.ad-footer[b-0y6y9nfl38] { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.05); }
.ad-price[b-0y6y9nfl38] { font-size: 16px; font-weight: 800; }
.clr-new[b-0y6y9nfl38]  { color: #4ade80; } .clr-used[b-0y6y9nfl38] { color: #fbbf24; } .clr-free[b-0y6y9nfl38] { color: #22d3ee; }
.clr-job[b-0y6y9nfl38]  { color: #818cf8; } .clr-work[b-0y6y9nfl38] { color: #a78bfa; } .clr-camp[b-0y6y9nfl38] { color: #fb923c; }

/* ══ AD DETAIL MODAL ══ */
.modal-overlay[b-0y6y9nfl38] { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ad-modal[b-0y6y9nfl38] {
    background: var(--glass-bg); backdrop-filter: blur(24px); border: 1px solid var(--card-border, var(--glass-border));
    border-radius: var(--radius-md); width: 560px; max-width: 100%; max-height: 90vh; overflow-y: auto; position: relative;
    color: var(--text-main); /* modal is fixed-positioned; set its text colour explicitly */
}
.adm-head[b-0y6y9nfl38] { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.modal-close[b-0y6y9nfl38] { width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 13px; }
.adm-gallery[b-0y6y9nfl38] { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 12px; }
.adm-gallery img[b-0y6y9nfl38] { height: 180px; border-radius: var(--radius-sm); object-fit: cover; }
.adm-noimg[b-0y6y9nfl38] { height: 140px; display: flex; align-items: center; justify-content: center; font-size: 54px; opacity: .35; }
.adm-body[b-0y6y9nfl38] { padding: 4px 18px 20px; }
.adm-title[b-0y6y9nfl38] { font-size: 19px; font-weight: 800; margin-bottom: 6px; color: var(--text-main); }
.adm-price[b-0y6y9nfl38] { font-size: 22px; font-weight: 800; margin-bottom: 12px; }
.adm-desc[b-0y6y9nfl38] { font-size: 13px; color: var(--text-dim); line-height: 1.7; margin-bottom: 14px; white-space: pre-wrap; }
.adm-meta[b-0y6y9nfl38] { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--text-faint); margin-bottom: 14px; }
.adm-seller[b-0y6y9nfl38] { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); margin-bottom: 12px; }
.adm-seller-av[b-0y6y9nfl38] { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-gradient); color: var(--accent-text-on-fill); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.adm-seller-name[b-0y6y9nfl38] { font-size: 13px; font-weight: 700; color: var(--text-main); }
.adm-verified[b-0y6y9nfl38] { font-size: 10.5px; color: #4ade80; margin-left: 6px; }
.adm-seller-role[b-0y6y9nfl38] { font-size: 11px; color: var(--text-faint); }
.adm-contact[b-0y6y9nfl38] { padding: 12px; background: var(--accent-glow-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); }
.adm-contact-title[b-0y6y9nfl38] { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.adm-contact-link[b-0y6y9nfl38] { display: block; font-size: 13px; color: #4fa8ff; text-decoration: none; padding: 3px 0; }
.adm-contact-link:hover[b-0y6y9nfl38] { text-decoration: underline; }
.adm-contact-empty[b-0y6y9nfl38] { color: var(--text-faint); font-size: 12.5px; text-align: center; }

@media (max-width: 600px) {
    .cat-chips[b-0y6y9nfl38] { overflow-x: auto; flex-wrap: nowrap; }
}
/* /Components/Pages/ParentConsultationRoomPage.razor.rz.scp.css */
/* ParentConsultationRoomPage.razor.css — parent-facing consultation room.
   Mirrors parent-consultation-room.html. Only var(--...) from theme.css. */

[b-jtm6lu7t7m] html, [b-jtm6lu7t7m] body { height: 100%; overflow: hidden; }

.btn[b-jtm6lu7t7m] { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn-primary[b-jtm6lu7t7m] { background: var(--accent-gradient); color: var(--accent-text-on-fill); box-shadow: 0 0 16px var(--accent-glow-soft); }
.btn-primary:hover[b-jtm6lu7t7m] { transform: translateY(-1px); }
.btn-primary:disabled[b-jtm6lu7t7m] { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost[b-jtm6lu7t7m] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-jtm6lu7t7m] { background: var(--accent-glow-soft); color: var(--c-accent); }
.btn-xs[b-jtm6lu7t7m] { padding: 4px 9px; font-size: 11px; }

/* loading / not-found */
.room-loading[b-jtm6lu7t7m], .room-notfound[b-jtm6lu7t7m] { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-dim); padding: 20px; text-align: center; }
.nf-icon[b-jtm6lu7t7m] { font-size: 46px; opacity: .4; }
.nf-title[b-jtm6lu7t7m] { font-size: 18px; font-weight: 800; color: var(--text-main); }
.nf-sub[b-jtm6lu7t7m] { font-size: 13px; color: var(--text-faint); }

/* ── CONSENT ── */
.consent-page[b-jtm6lu7t7m] { height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.consent-card[b-jtm6lu7t7m] { background: var(--glass-bg); backdrop-filter: blur(24px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); width: 100%; max-width: 480px; padding: 32px; max-height: 94vh; overflow-y: auto; }
.consent-brand[b-jtm6lu7t7m] { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.brand-mark[b-jtm6lu7t7m] { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--accent-text-on-fill); }
.brand-name[b-jtm6lu7t7m] { font-size: 15px; font-weight: 700; color: var(--text-main); }
.consent-heading[b-jtm6lu7t7m] { font-size: 20px; font-weight: 800; margin-bottom: 6px; color: var(--text-main); }
.consent-sub[b-jtm6lu7t7m] { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin-bottom: 20px; }
.consultant-pill[b-jtm6lu7t7m] { display: inline-flex; align-items: center; gap: 8px; background: var(--c-accent-soft); border: 1px solid var(--c-accent-border); border-radius: 30px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; margin-bottom: 20px; color: var(--text-main); }
.c-av-sm[b-jtm6lu7t7m] { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 9px; color: var(--accent-text-on-fill); }
.promise-list[b-jtm6lu7t7m] { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.promise-item[b-jtm6lu7t7m] { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: var(--glass-bg-soft); }
.pi-icon[b-jtm6lu7t7m] { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.pi-text[b-jtm6lu7t7m] { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.pi-text strong[b-jtm6lu7t7m] { color: var(--text-main); }
.consent-agree[b-jtm6lu7t7m] { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 14px 16px; background: var(--c-accent-soft); border: 1px solid var(--c-accent-border); border-radius: var(--radius-sm); margin-bottom: 20px; transition: .2s; }
.consent-agree:hover[b-jtm6lu7t7m] { filter: brightness(1.1); }
.consent-agree input[b-jtm6lu7t7m] { width: 18px; height: 18px; accent-color: var(--c-accent); cursor: pointer; flex-shrink: 0; margin-top: 1px; }
.consent-agree-text[b-jtm6lu7t7m] { font-size: 13px; line-height: 1.5; color: var(--text-main); }
.consent-agree-sub[b-jtm6lu7t7m] { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.consent-join[b-jtm6lu7t7m] { width: 100%; justify-content: center; font-size: 14px; padding: 12px; }
.no-ai-link[b-jtm6lu7t7m] { text-align: center; font-size: 11.5px; color: var(--text-faint); cursor: pointer; margin-top: 8px; }
.no-ai-link:hover[b-jtm6lu7t7m] { color: var(--text-dim); }

/* ── TOPBAR ── */
.topbar[b-jtm6lu7t7m] { height: 54px; background: var(--room-panel); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 14px; padding: 0 18px; flex-shrink: 0; }
.tb-mark[b-jtm6lu7t7m] { width: 26px; height: 26px; border-radius: 7px; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; color: var(--accent-text-on-fill); }
.tb-title[b-jtm6lu7t7m] { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.tb-sep[b-jtm6lu7t7m] { width: 1px; height: 20px; background: var(--glass-border); }
.tb-consultant[b-jtm6lu7t7m] { font-size: 12px; color: var(--text-dim); }
.tb-spacer[b-jtm6lu7t7m] { flex: 1; }
.countdown-wrap[b-jtm6lu7t7m] { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.countdown-lbl[b-jtm6lu7t7m] { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; }
.countdown[b-jtm6lu7t7m] { font-family: monospace; font-size: 16px; font-weight: 800; padding: 4px 14px; border-radius: 20px; border: 1px solid; }
.cd-ok[b-jtm6lu7t7m] { color: var(--c-success); background: var(--c-success-soft); border-color: var(--c-success-border); }
.cd-warn[b-jtm6lu7t7m] { color: var(--c-warn); background: var(--c-warn-soft); border-color: var(--c-warn-border); }
.cd-end[b-jtm6lu7t7m] { color: var(--c-error); background: var(--c-error-soft); border-color: var(--c-error-border); animation: pulse-b-jtm6lu7t7m 1s infinite; }

/* ── ROOM ── */
.room[b-jtm6lu7t7m] { display: flex; height: calc(100vh - 54px); overflow: hidden; }

/* LEFT: VIDEO */
.left-col[b-jtm6lu7t7m] { width: 380px; flex-shrink: 0; border-right: 1px solid var(--glass-border); display: flex; flex-direction: column; }
.video-area[b-jtm6lu7t7m] { flex: 1; background: var(--video-bg); position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; overflow: hidden; }
#localVideo[b-jtm6lu7t7m] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--video-bg); }
.v-placeholder[b-jtm6lu7t7m] { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.v-av[b-jtm6lu7t7m] { width: 88px; height: 88px; border-radius: 50%; background: var(--c-purple-av); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 28px; color: var(--accent-text-on-fill); }
.v-name[b-jtm6lu7t7m] { font-size: 13px; color: var(--text-dim); }
.v-status[b-jtm6lu7t7m] { font-size: 11px; color: var(--c-success); }
.v-label[b-jtm6lu7t7m] { position: absolute; bottom: 12px; left: 14px; font-size: 10.5px; font-weight: 700; background: var(--room-overlay); color: var(--text-main); padding: 3px 10px; border-radius: 20px; z-index: 2; }

.pip[b-jtm6lu7t7m] { position: absolute; top: 12px; right: 12px; width: 96px; height: 68px; background: var(--glass-bg); border: 2px solid var(--c-accent-border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; cursor: grab; z-index: 5; user-select: none; box-shadow: 0 4px 16px var(--room-overlay); overflow: hidden; }
.pip:active[b-jtm6lu7t7m] { cursor: grabbing; }
.pip-drag[b-jtm6lu7t7m] { position: absolute; top: 3px; left: 6px; font-size: 10px; color: var(--text-faint); z-index: 2; }
.pip-video[b-jtm6lu7t7m] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pip-placeholder[b-jtm6lu7t7m] { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.pip-av[b-jtm6lu7t7m] { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 10px; color: var(--accent-text-on-fill); }
.pip-name[b-jtm6lu7t7m] { font-size: 8.5px; color: var(--text-dim); }

.v-controls[b-jtm6lu7t7m] { flex-shrink: 0; padding: 12px 14px; border-top: 1px solid var(--glass-border); background: var(--room-panel); display: flex; align-items: center; justify-content: center; gap: 14px; }
.ctrl-group[b-jtm6lu7t7m] { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ctrl[b-jtm6lu7t7m] { width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: .2s; }
.ctrl:hover[b-jtm6lu7t7m] { transform: scale(1.08); }
.c-mic[b-jtm6lu7t7m] { background: var(--c-accent-soft); border: 1px solid var(--c-accent-border); }
.c-cam[b-jtm6lu7t7m] { background: var(--c-accent-soft); border: 1px solid var(--c-accent-border); }
.c-end[b-jtm6lu7t7m] { background: var(--c-error-soft); border: 1px solid var(--c-error-border); }
.c-off[b-jtm6lu7t7m] { opacity: .4; }
.ctrl-lbl[b-jtm6lu7t7m] { font-size: 9px; color: var(--text-faint); }
.ctrl-lbl-end[b-jtm6lu7t7m] { color: var(--c-error); }

/* RIGHT: NOTES + RECEIVED */
.right-col[b-jtm6lu7t7m] { flex: 1; display: flex; flex-direction: column; background: var(--glass-bg-soft); min-width: 0; }
.rtabs[b-jtm6lu7t7m] { display: flex; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; }
.rtab[b-jtm6lu7t7m] { flex: 1; padding: 10px 8px; font-size: 12px; font-weight: 600; color: var(--text-faint); cursor: pointer; text-align: center; border-bottom: 2px solid transparent; transition: .15s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.rtab.active[b-jtm6lu7t7m] { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.new-dot[b-jtm6lu7t7m] { width: 8px; height: 8px; border-radius: 50%; background: var(--c-success); animation: pulse-b-jtm6lu7t7m 1.5s infinite; display: none; }
.new-dot.show[b-jtm6lu7t7m] { display: block; }
.rtab-content[b-jtm6lu7t7m] { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.rtab-content.active[b-jtm6lu7t7m] { display: flex; }

/* NOTES TAB */
.notes-wrap[b-jtm6lu7t7m] { flex: 1; display: flex; flex-direction: column; padding: 16px; gap: 10px; overflow: hidden; }
.notes-title[b-jtm6lu7t7m] { font-size: 13px; font-weight: 700; margin-bottom: 3px; color: var(--text-main); }
.notes-sub[b-jtm6lu7t7m] { font-size: 11px; color: var(--text-faint); }
.scratch-box[b-jtm6lu7t7m] { flex: 1; min-height: 0; }
.scratch[b-jtm6lu7t7m] { width: 100%; height: 100%; padding: 18px; background: var(--room-input-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 15px; line-height: 1.9; letter-spacing: .01em; outline: none; resize: none; }
.scratch[b-jtm6lu7t7m]::placeholder { color: var(--text-faint); font-size: 14px; line-height: 1.8; }
.scratch:focus[b-jtm6lu7t7m] { border-color: var(--c-accent-border); }
.notes-footer[b-jtm6lu7t7m] { flex-shrink: 0; font-size: 10.5px; color: var(--text-faint); text-align: center; padding-top: 4px; }

/* RECEIVED TAB */
.received-wrap[b-jtm6lu7t7m] { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.received-wrap[b-jtm6lu7t7m]::-webkit-scrollbar { width: 4px; }
.received-wrap[b-jtm6lu7t7m]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; }
.received-empty[b-jtm6lu7t7m] { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--text-faint); }
.empty-icon[b-jtm6lu7t7m] { font-size: 40px; opacity: .25; }
.empty-text[b-jtm6lu7t7m] { font-size: 12.5px; }
.empty-sub[b-jtm6lu7t7m] { font-size: 11px; opacity: .7; text-align: center; line-height: 1.6; }
.r-item[b-jtm6lu7t7m] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); overflow: hidden; animation: slideIn-b-jtm6lu7t7m .4s ease; }
.r-item.summary[b-jtm6lu7t7m] { border-top: 3px solid var(--c-accent-border); }
.r-item.exercises[b-jtm6lu7t7m] { border-top: 3px solid var(--c-success-border); }
.r-head[b-jtm6lu7t7m] { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--glass-border); }
.r-icon[b-jtm6lu7t7m] { font-size: 20px; }
.r-title[b-jtm6lu7t7m] { font-size: 13px; font-weight: 700; flex: 1; color: var(--text-main); }
.r-time[b-jtm6lu7t7m] { font-size: 10px; color: var(--text-faint); }
.r-body[b-jtm6lu7t7m] { padding: 12px 14px; font-size: 12.5px; color: var(--text-dim); line-height: 1.7; max-height: 130px; overflow: hidden; position: relative; white-space: pre-wrap; }
.r-body[b-jtm6lu7t7m]::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 30px; background: linear-gradient(transparent, var(--glass-bg)); pointer-events: none; }
.r-body.open[b-jtm6lu7t7m] { max-height: none; }
.r-body.open[b-jtm6lu7t7m]::after { display: none; }
.r-footer[b-jtm6lu7t7m] { padding: 10px 14px; border-top: 1px solid var(--glass-border); display: flex; gap: 6px; background: var(--glass-bg-soft); }

@keyframes pulse-b-jtm6lu7t7m { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes slideIn-b-jtm6lu7t7m { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
/* /Components/Pages/ParentDashboard.razor.rz.scp.css */
/* ============================================================
   ParentDashboard.razor.css — Parent panel shell
   Sidebar (226px, fixed) + TopBar (58px, fixed) + scrollable
   content. CSS Isolation; all colors from theme.css var(--…).
   Mirrors TeacherLayout.razor.css.
   ============================================================ */

.p-root[b-wtj1uihybs] {
    --sidebar-w: 226px;
    --nav-h: 58px;
    height: 100vh;
    overflow: hidden;
    color: var(--text-main);
    background: var(--bg-gradient);
    position: relative;
}

/* neon-glass background (grid + orbs), fixed to the viewport */
.p-root[b-wtj1uihybs]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 550px at 78% 8%, var(--orb-1), transparent 60%),
        radial-gradient(circle 450px at 8% 92%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}

/* ── SIDEBAR ── */
.sidebar[b-wtj1uihybs] {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
    background: var(--glass-bg); backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-right: 1px solid var(--glass-border);
    display: flex; flex-direction: column; z-index: 100;
}
.sidebar-brand[b-wtj1uihybs] {
    height: var(--nav-h); display: flex; align-items: center; gap: 10px;
    padding: 0 18px; border-bottom: 1px solid var(--glass-border); flex-shrink: 0;
}
.brand-mark[b-wtj1uihybs] {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px; color: var(--accent-text-on-fill);
}
.brand-name[b-wtj1uihybs] { font-size: 13px; font-weight: 700; color: var(--text-main); }
.brand-sub[b-wtj1uihybs]  { font-size: 10px; color: var(--text-faint); }

.sidebar-nav[b-wtj1uihybs] { flex: 1; overflow-y: auto; padding: 10px 8px; min-height: 0; }
.sidebar-nav[b-wtj1uihybs]::-webkit-scrollbar { width: 3px; }
.sidebar-nav[b-wtj1uihybs]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; }

.nav-item[b-wtj1uihybs] {
    display: flex; align-items: center; gap: 9px; padding: 9px 11px;
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
    color: var(--text-dim); cursor: pointer; transition: .15s; margin-bottom: 1px;
    border-left: 2px solid transparent; position: relative;
}
.nav-item:hover[b-wtj1uihybs] { background: var(--accent-glow-soft); color: var(--text-main); }
.nav-item.active[b-wtj1uihybs] {
    background: linear-gradient(90deg, var(--accent-glow-soft), transparent);
    color: var(--accent-glow); border-left-color: var(--accent-glow);
}
.nav-icon[b-wtj1uihybs] { width: 16px; text-align: center; font-size: 14px; opacity: .75; flex-shrink: 0; }
.nav-item.active .nav-icon[b-wtj1uihybs] { opacity: 1; }

.sidebar-footer[b-wtj1uihybs] { padding: 12px; border-top: 1px solid var(--glass-border); flex-shrink: 0; }
.user-card[b-wtj1uihybs] {
    display: flex; align-items: center; gap: 9px; padding: 9px 10px;
    border-radius: var(--radius-sm); background: var(--accent-glow-soft); cursor: pointer;
}
.user-av[b-wtj1uihybs] {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; color: var(--accent-text-on-fill);
}
.user-name[b-wtj1uihybs] { font-size: 12px; font-weight: 600; color: var(--text-main); }
.user-role[b-wtj1uihybs] { font-size: 10px; color: var(--text-dim); }

/* ── TOPBAR ── */
.topbar[b-wtj1uihybs] {
    position: fixed; top: 0; left: var(--sidebar-w); right: 0; height: var(--nav-h);
    background: var(--glass-bg); backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; gap: 10px; padding: 0 20px; z-index: 90;
}
.topbar-title[b-wtj1uihybs] { font-size: 14px; font-weight: 700; color: var(--text-main); }
.topbar-spacer[b-wtj1uihybs] { flex: 1; }
.tb-icon[b-wtj1uihybs] {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: var(--glass-bg-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer; color: var(--text-dim); position: relative;
}
.tb-icon:hover[b-wtj1uihybs] { background: var(--accent-glow-soft); color: var(--accent-glow); }

/* ── MAIN ── */
.main[b-wtj1uihybs] {
    margin-left: var(--sidebar-w); padding-top: var(--nav-h);
    height: 100%; position: relative; z-index: 1;
    display: flex; flex-direction: column;
}
.content[b-wtj1uihybs] { padding: 20px 22px; flex: 1; overflow-y: auto; min-height: 0; }
.content[b-wtj1uihybs]::-webkit-scrollbar { width: 6px; }
.content[b-wtj1uihybs]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 6px; }
/* /Components/Pages/Register.razor.rz.scp.css */
.register-page[b-isaz2hwb48] {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-main);
    position: relative;
    overflow: hidden;
    background: var(--bg-gradient);
}

.register-page[b-isaz2hwb48]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 460px at 88% 8%, var(--orb-1), transparent 70%),
        radial-gradient(circle 520px at 4% 96%, var(--orb-2), transparent 70%),
        radial-gradient(circle 260px at 60% 85%, var(--orb-3), transparent 70%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, rgba(0,0,0,0.9), transparent 80%);
    mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, rgba(0,0,0,0.9), transparent 80%);
    animation: reg-orb-drift-b-isaz2hwb48 24s ease-in-out infinite alternate;
}

@keyframes reg-orb-drift-b-isaz2hwb48 {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: -30px 30px, 40px -30px, -20px 20px, 0 0, 0 0; }
}

.register-page[b-isaz2hwb48]::after {
    content: "";
    position: fixed;
    left: 0; right: 0; top: -2px;
    height: 2px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    background: linear-gradient(90deg, transparent, var(--scanline) 50%, transparent);
    animation: reg-scan-b-isaz2hwb48 7s linear infinite;
}

@keyframes reg-scan-b-isaz2hwb48 {
    0%   { top: -2px; }
    100% { top: 100%; }
}

.card[b-isaz2hwb48] {
    width: 460px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: 0 0 25px var(--accent-glow-soft);
    border-radius: var(--radius-xl);
    padding: 40px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.logo-row[b-isaz2hwb48] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.logo-icon[b-isaz2hwb48] {
    width: 34px; height: 34px;
    border-radius: var(--radius-md);
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-text-on-fill);
    font-weight: 800; font-size: 18px;
    box-shadow: 0 0 18px var(--accent-glow);
}

.logo-text-title[b-isaz2hwb48] { font-size: 15px; font-weight: 700; }
.logo-text-sub[b-isaz2hwb48]   { font-size: 11px; color: var(--text-faint); }

h1[b-isaz2hwb48] { font-size: 22px; margin: 0 0 6px; }

.field input[b-isaz2hwb48],
.field select[b-isaz2hwb48] {
    width: 100%;
    padding: 11px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    background: rgba(15, 30, 60, 0.35);
    color: var(--text-main);
    font-size: 14px;
    outline: none;
    transition: 0.25s;
}

.field input:focus[b-isaz2hwb48],
.field select:focus[b-isaz2hwb48] {
    border-color: #7ccaff;
    box-shadow: 0 0 12px var(--accent-glow-soft);
}

.field select option[b-isaz2hwb48] { background: #0d1a33; }

.error[b-isaz2hwb48] {
    color: var(--text-error);
    font-size: 12px;
    margin-top: 4px;
}

button[b-isaz2hwb48] {
    padding: 12px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--accent-gradient);
    color: var(--accent-text-on-fill);
    font-size: 15px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 18px var(--accent-glow);
    transition: 0.25s;
    margin-top: 4px;
}

button:hover:not(:disabled)[b-isaz2hwb48] { transform: translateY(-2px); box-shadow: 0 0 25px var(--accent-glow); }
button:disabled[b-isaz2hwb48] { opacity: 0.6; cursor: not-allowed; }
/* /Components/Pages/SchoolDashboard.razor.rz.scp.css */
.layout-root[b-1i7ffthyy3] {
    display: flex;
    min-height: 100vh;
    background: var(--bg-gradient);
    position: relative;
}

.layout-root[b-1i7ffthyy3]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 550px at 78% 8%,  var(--orb-1), transparent 60%),
        radial-gradient(circle 450px at 8%  92%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}

.main-content[b-1i7ffthyy3] {
    margin-left: 232px;
    padding-top: 58px;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    flex: 1;
}

.dash-page[b-1i7ffthyy3] {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-gradient);
    position: relative;
    overflow: hidden;
    color: var(--text-main);
}

.dash-page[b-1i7ffthyy3]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 460px at 88% 8%, var(--orb-1), transparent 70%),
        radial-gradient(circle 520px at 4% 96%, var(--orb-2), transparent 70%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, rgba(0,0,0,0.9), transparent 80%);
    mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, rgba(0,0,0,0.9), transparent 80%);
}

.dash-card[b-1i7ffthyy3] {
    position: relative;
    z-index: 2;
    text-align: center;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: 0 0 25px var(--accent-glow-soft);
    border-radius: var(--radius-xl);
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.logo-icon[b-1i7ffthyy3] {
    width: 56px; height: 56px;
    border-radius: var(--radius-lg);
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-text-on-fill);
    font-weight: 800; font-size: 26px;
    box-shadow: 0 0 24px var(--accent-glow);
}

h1[b-1i7ffthyy3] { font-size: 26px; margin: 0; }

p[b-1i7ffthyy3] { color: var(--text-dim); font-size: 16px; margin: 0; }

button[b-1i7ffthyy3] {
    margin-top: 8px;
    padding: 10px 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-dim);
    font-size: 14px;
    cursor: pointer;
    transition: 0.25s;
}

button:hover[b-1i7ffthyy3] {
    background: var(--glass-bg);
    color: var(--text-main);
}
/* /Components/Pages/VerifyEmail.razor.rz.scp.css */
.verify-page[b-lqhycimete] {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-main);
    position: relative;
    overflow: hidden;
    background: var(--bg-gradient);
}

.verify-page[b-lqhycimete]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 460px at 88% 8%, var(--orb-1), transparent 70%),
        radial-gradient(circle 520px at 4% 96%, var(--orb-2), transparent 70%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, rgba(0,0,0,0.9), transparent 80%);
    mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, rgba(0,0,0,0.9), transparent 80%);
}

.verify-page[b-lqhycimete]::after {
    content: "";
    position: fixed;
    left: 0; right: 0; top: -2px;
    height: 2px; z-index: 1; pointer-events: none; opacity: 0.5;
    background: linear-gradient(90deg, transparent, var(--scanline) 50%, transparent);
    animation: vscan-b-lqhycimete 7s linear infinite;
}
@keyframes vscan-b-lqhycimete { 0% { top: -2px; } 100% { top: 100%; } }

.card[b-lqhycimete] {
    width: 400px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: 0 0 25px var(--accent-glow-soft);
    border-radius: var(--radius-xl);
    padding: 40px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.logo-row[b-lqhycimete] { display: flex; align-items: center; gap: 10px; }
.logo-icon[b-lqhycimete] {
    width: 34px; height: 34px; border-radius: var(--radius-md);
    background: var(--accent-gradient); display: flex; align-items: center;
    justify-content: center; color: var(--accent-text-on-fill);
    font-weight: 800; font-size: 18px; box-shadow: 0 0 18px var(--accent-glow);
}
.logo-text-title[b-lqhycimete] { font-size: 15px; font-weight: 700; }
.logo-text-sub[b-lqhycimete]   { font-size: 11px; color: var(--text-faint); }

h1[b-lqhycimete] { font-size: 22px; margin: 0; }

.hint[b-lqhycimete] { font-size: 13px; color: var(--text-dim); line-height: 1.7; margin: 0; }

.field input[b-lqhycimete] {
    width: 100%;
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    background: rgba(15, 30, 60, 0.35);
    color: var(--text-main);
    font-size: 22px;
    letter-spacing: 0.4em;
    text-align: center;
    outline: none;
    transition: 0.25s;
}

.field input:focus[b-lqhycimete] { border-color: #7ccaff; box-shadow: 0 0 12px var(--accent-glow-soft); }

.error[b-lqhycimete]   { color: var(--text-error); font-size: 13px; }
.success[b-lqhycimete] { color: #6bffb0; font-size: 13px; }

button[b-lqhycimete] {
    padding: 12px; border-radius: var(--radius-md); border: none;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    font-size: 15px; font-weight: 700; cursor: pointer;
    box-shadow: 0 0 18px var(--accent-glow); transition: 0.25s;
}
button:hover:not(:disabled)[b-lqhycimete] { transform: translateY(-2px); box-shadow: 0 0 25px var(--accent-glow); }
button:disabled[b-lqhycimete] { opacity: 0.6; cursor: not-allowed; }
/* /Components/Parent/AppearancePage.razor.rz.scp.css */
.placeholder-page[b-ysnn6bm8n8] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-ysnn6bm8n8]  { font-size: 48px; }
.ph-title[b-ysnn6bm8n8] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-ysnn6bm8n8]   { font-size: 14px; }
/* /Components/Parent/ChildSessionRunner.razor.rz.scp.css */
/* ============================================================
   ChildSessionRunner.razor.css — full-screen activity page the
   child sits in front of. Big, calm, low-clutter (autism-friendly).
   CSS Isolation; all chrome colors from theme.css var(--…) so it
   follows blue/gold/lilac. Engine + pass/fail colors are semantic
   (set inline where needed).
   ============================================================ */

.cr-page[b-aq8wycjvc4] {
    height: 100vh; overflow: hidden; position: relative;
    display: flex; flex-direction: column;
    color: var(--text-main); background: var(--bg-gradient);
    font-family: 'Segoe UI', system-ui, sans-serif; user-select: none;
}
.cr-page[b-aq8wycjvc4]::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle 600px at 82% 6%, var(--orb-1), transparent 60%),
        radial-gradient(circle 500px at 6% 94%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}

/* ── Top strip ── */
.cr-top[b-aq8wycjvc4] {
    position: relative; z-index: 2; flex-shrink: 0;
    height: 54px; display: flex; align-items: center; gap: 12px;
    padding: 0 18px;
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-border);
}
.cr-logo[b-aq8wycjvc4] { display: flex; align-items: center; gap: 10px; flex: 1; }
.cr-logo-icon[b-aq8wycjvc4] {
    width: 30px; height: 30px; border-radius: 8px; background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 13px; color: var(--accent-text-on-fill);
}
.cr-child[b-aq8wycjvc4] { font-size: 15px; font-weight: 700; color: var(--text-main); }

.cr-conn[b-aq8wycjvc4] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px;
    border: 1px solid var(--glass-border); background: var(--glass-bg-soft);
}
.cr-conn .cr-dot[b-aq8wycjvc4] { width: 7px; height: 7px; border-radius: 50%; }
.cr-on[b-aq8wycjvc4]  { color: #4ade80; } .cr-on  .cr-dot[b-aq8wycjvc4] { background: #4ade80; animation: crBlink-b-aq8wycjvc4 1.4s ease-in-out infinite; }
.cr-off[b-aq8wycjvc4] { color: #fbbf24; } .cr-off .cr-dot[b-aq8wycjvc4] { background: #fbbf24; }
@keyframes crBlink-b-aq8wycjvc4 { 0%,100%{opacity:1} 50%{opacity:.3} }

.cr-exit[b-aq8wycjvc4] {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: var(--glass-bg-soft);
    color: var(--text-dim); font-size: 16px; cursor: pointer;
}
.cr-exit:hover[b-aq8wycjvc4] { color: var(--text-error); }

/* ── Stage ── */
.cr-stage[b-aq8wycjvc4] {
    position: relative; z-index: 1; flex: 1; min-height: 0;
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
/* Keep centred stage content clear of the fixed runs panel (left:16px + 240px). */
.cr-stage-runs[b-aq8wycjvc4] { padding-left: 272px; }
@media (max-width: 720px) { .cr-stage-runs[b-aq8wycjvc4] { padding-left: 190px; } }

/* Idle */
.cr-idle[b-aq8wycjvc4] { text-align: center; }
.cr-idle-emoji[b-aq8wycjvc4] { font-size: 88px; line-height: 1; animation: crFloat-b-aq8wycjvc4 3s ease-in-out infinite; }
.cr-idle-title[b-aq8wycjvc4] { font-size: 34px; font-weight: 800; color: var(--text-main); margin-top: 12px; }
.cr-idle-sub[b-aq8wycjvc4]   { font-size: 16px; color: var(--text-dim); margin-top: 8px; }
@keyframes crFloat-b-aq8wycjvc4 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* Activity card */
.cr-activity[b-aq8wycjvc4] {
    width: 100%; max-width: 620px; text-align: center;
    padding: 34px 28px; border-radius: var(--radius-xl);
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    transition: border-color .25s, box-shadow .25s;
    animation: crPop-b-aq8wycjvc4 .3s ease;
}
.cr-activity.cr-pass[b-aq8wycjvc4] { border-color: rgba(34,197,94,.6);  box-shadow: 0 0 60px rgba(34,197,94,.25); }
.cr-activity.cr-fail[b-aq8wycjvc4] { border-color: rgba(239,68,68,.5); }
@keyframes crPop-b-aq8wycjvc4 { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }

.cr-avatar[b-aq8wycjvc4] { font-size: 72px; line-height: 1; margin-bottom: 8px; }
.cr-eng[b-aq8wycjvc4]    { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.cr-title[b-aq8wycjvc4]  { font-size: 30px; font-weight: 800; color: var(--text-main); margin: 6px 0 4px; }
.cr-prompt[b-aq8wycjvc4] {
    font-size: 22px; font-weight: 700; color: var(--text-dim);
    margin: 14px 0; padding: 12px 18px; border-radius: var(--radius-md);
    background: var(--accent-glow-soft); border: 1px solid var(--glass-border);
}
/* Instruction image + caption (filled by child-session.js from the .agd) */
.cr-visimg[b-aq8wycjvc4] {
    display: flex; align-items: center; justify-content: center;
    max-height: 260px; margin: 14px auto 0;
}
.cr-visimg:empty[b-aq8wycjvc4] { display: none; }
.cr-visimg img[b-aq8wycjvc4] {
    max-width: 100%; max-height: 260px; object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 34px rgba(0,0,0,.4);
    animation: crPop-b-aq8wycjvc4 .3s ease;
}
.cr-viscap[b-aq8wycjvc4] { font-size: 18px; font-weight: 700; color: var(--text-dim); margin-top: 8px; }
.cr-viscap:empty[b-aq8wycjvc4] { display: none; }

.cr-hint[b-aq8wycjvc4] { font-size: 15px; color: var(--text-faint); margin-top: 6px; }
.cr-heard[b-aq8wycjvc4] {
    font-size: 18px; font-weight: 700; color: var(--accent-glow);
    margin-top: 8px; font-style: italic;
    animation: crRewardIn-b-aq8wycjvc4 .2s ease;
}

.cr-timer[b-aq8wycjvc4] {
    font-size: 20px; font-weight: 800; color: #fbbf24;
    font-variant-numeric: tabular-nums; margin-top: 14px;
}
.cr-bar[b-aq8wycjvc4] {
    height: 8px; border-radius: 5px; margin-top: 10px; overflow: hidden;
    background: var(--glass-bg-soft);
}
.cr-bar-fill[b-aq8wycjvc4] {
    height: 100%; border-radius: 5px; background: var(--accent-gradient);
    transition: width 1s linear;
}

.cr-done[b-aq8wycjvc4] {
    margin-top: 22px; padding: 14px 34px; border-radius: var(--radius-lg);
    font-size: 18px; font-weight: 800; cursor: pointer;
    color: var(--accent-text-on-fill); background: var(--accent-gradient);
    border: none; box-shadow: 0 0 22px var(--accent-glow-soft);
}
.cr-done:hover[b-aq8wycjvc4] { transform: translateY(-2px); }

.cr-verdict[b-aq8wycjvc4] { font-size: 30px; font-weight: 900; margin-top: 18px; }
.cr-verdict-pass[b-aq8wycjvc4] { color: #4ade80; }
.cr-verdict-fail[b-aq8wycjvc4] { color: #fbbf24; }

/* Child camera preview */
.cr-cam[b-aq8wycjvc4] {
    position: fixed; bottom: 20px; right: 20px; z-index: 3;
    width: 200px; border-radius: var(--radius-md); overflow: hidden;
    border: 1px solid var(--glass-border); background: #000;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
    transition: width .3s ease;
}
/* Bigger while a camera activity is running, so the parent can frame the child. */
.cr-cam-active[b-aq8wycjvc4] { width: 300px; border-color: var(--accent-glow); }
/* Mirror the preview so the child sees themselves as in a mirror (matches the
   scenario builder and the mirror-based left/right recognition logic). */
.cr-cam video[b-aq8wycjvc4] { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transform: scaleX(-1); }

/* Framing guide: an oval the child should fill; turns green when well-framed. */
.cr-frame-guide[b-aq8wycjvc4] {
    position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
    width: 56%; height: 78%; border-radius: 50%;
    border: 2.5px dashed rgba(255,255,255,.55);
    box-shadow: 0 0 0 2000px rgba(0,0,0,.28);   /* dim outside the oval */
    pointer-events: none; transition: border-color .3s ease;
}
.cr-frame-guide.ok[b-aq8wycjvc4] { border-color: #4ade80; border-style: solid; }
.cr-frame-hint[b-aq8wycjvc4] {
    position: absolute; bottom: 6px; left: 0; right: 0; text-align: center;
    font-size: 11px; font-weight: 700; color: #fff; padding: 3px 6px;
    text-shadow: 0 1px 3px rgba(0,0,0,.9); pointer-events: none;
}

.cr-error[b-aq8wycjvc4] {
    position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 4;
    padding: 10px 20px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700;
    color: var(--text-error); background: var(--glass-bg);
    border: 1px solid rgba(239,68,68,.4);
}

/* ── Reward celebration overlay ── */
.cr-reward[b-aq8wycjvc4] {
    position: fixed; inset: 0; z-index: 20;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: crRewardIn-b-aq8wycjvc4 .4s ease;
}
@keyframes crRewardIn-b-aq8wycjvc4 { from{opacity:0} to{opacity:1} }
.cr-reward-emoji[b-aq8wycjvc4] {
    font-size: 140px; line-height: 1;
    animation: crRewardPop-b-aq8wycjvc4 .5s cubic-bezier(.2,1.4,.4,1);
    filter: drop-shadow(0 0 30px var(--accent-glow));
}
@keyframes crRewardPop-b-aq8wycjvc4 { from{transform:scale(.3) rotate(-15deg)} to{transform:scale(1) rotate(0)} }
.cr-reward-msg[b-aq8wycjvc4] {
    font-size: 40px; font-weight: 900; color: #fff; margin-top: 14px;
    text-shadow: 0 2px 20px var(--accent-glow);
}
.cr-reward-stars[b-aq8wycjvc4] { margin-top: 12px; font-size: 30px; letter-spacing: 4px; }


/* Teacher name under the child's name */
.cr-teacher[b-aq8wycjvc4] { font-size: 11px; color: var(--text-dim); margin-top: 1px; }

/* Median score chip — small, sits on the LEFT beside the child's name */
.cr-median[b-aq8wycjvc4] { display:flex; align-items:center; gap:3px; margin-left:12px;
             padding:2px 8px; border-radius:99px;
             background:rgba(251,191,36,.14); border:1px solid rgba(251,191,36,.4);
             color:#fbbf24; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; }

/* Activity history on the idle screen */
/* Compact panel pinned to the LEFT edge; only the rows scroll, the title stays.
   Height is capped against the viewport because .cr-page is overflow:hidden. */
.cr-runs[b-aq8wycjvc4] { position: fixed; left: 16px; top: 50%; transform: translateY(-50%);
           z-index: 3; width: 240px; max-width: 42vw;
           display: flex; flex-direction: column; max-height: min(60vh, 420px);
           background: var(--glass-bg); border: 1px solid var(--glass-border);
           backdrop-filter: blur(var(--glass-blur));
           -webkit-backdrop-filter: blur(var(--glass-blur));
           border-radius: 12px; padding: 9px 10px; text-align: left; }
.cr-runs-title[b-aq8wycjvc4] { flex-shrink: 0; font-size: 10px; font-weight: 800; color: var(--text-dim);
                 text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.cr-runs-list[b-aq8wycjvc4] { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.cr-runs-list[b-aq8wycjvc4]::-webkit-scrollbar { width: 4px; }
.cr-runs-list[b-aq8wycjvc4]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 2px; }
.cr-run-row[b-aq8wycjvc4] { display:flex; align-items:center; gap:7px; padding:5px 2px;
              border-top:1px solid var(--glass-border); }
.cr-run-row:first-of-type[b-aq8wycjvc4] { border-top:none; }
.cr-run-emoji[b-aq8wycjvc4] { font-size:14px; flex-shrink:0; }
.cr-run-title[b-aq8wycjvc4] { flex:1; min-width:0; font-size:11.5px; font-weight:600; color:var(--text-main);
                white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cr-run-stars[b-aq8wycjvc4] { font-size:9px; flex-shrink:0; letter-spacing:-1px; }
.cr-run-badge[b-aq8wycjvc4] { width:17px; height:17px; border-radius:50%; display:flex; align-items:center;
                justify-content:center; font-size:9px; font-weight:900; flex-shrink:0; }

/* Narrow screens (phone portrait): don't let the panel cover the activity card. */
@media (max-width: 720px) {
    .cr-runs[b-aq8wycjvc4] { width: 170px; left: 8px; max-height: 46vh; }
    .cr-run-title[b-aq8wycjvc4] { font-size: 10.5px; }
}
.cr-run-pass[b-aq8wycjvc4]    { color:#4ade80; background:rgba(74,222,128,.15); }
.cr-run-fail[b-aq8wycjvc4],
.cr-run-timeout[b-aq8wycjvc4] { color:#f87171; background:rgba(248,113,113,.15); }
.cr-run-error[b-aq8wycjvc4]   { color:#fbbf24; background:rgba(251,191,36,.15); }

/* ══════════════════════════════════════════════════════════════
   HOME PRACTICE — parent plays the teacher (?practiceId=…)
   ══════════════════════════════════════════════════════════════ */

.cr-practice-btn[b-aq8wycjvc4] {
    margin-top: 20px; padding: 13px 30px; border: none; cursor: pointer;
    border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 700;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    box-shadow: 0 0 22px var(--accent-glow-soft); transition: .15s;
}
.cr-practice-btn:hover[b-aq8wycjvc4] { transform: translateY(-2px); }

.cr-practice-tally[b-aq8wycjvc4] { margin-top: 14px; font-size: 12.5px; color: var(--text-dim); }
.cr-tally-pass[b-aq8wycjvc4] { color: #4ade80; font-weight: 600; }
.cr-tally-star[b-aq8wycjvc4] { color: #fbbf24; font-weight: 600; }

/* modal shell */
.cr-modal-back[b-aq8wycjvc4] {
    position: fixed; inset: 0; z-index: 200; display: flex;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(0,0,0,.62); backdrop-filter: blur(4px);
}
.cr-modal[b-aq8wycjvc4] {
    width: 100%; max-width: 460px; max-height: 82vh; overflow-y: auto;
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
    padding: 20px; color: var(--text-main);
}
.cr-modal-head[b-aq8wycjvc4] { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cr-modal-title[b-aq8wycjvc4] { flex: 1; font-size: 15px; font-weight: 700; }
.cr-modal-x[b-aq8wycjvc4] {
    background: none; border: none; cursor: pointer; font-size: 15px;
    color: var(--text-dim); padding: 4px 8px;
}
.cr-modal-empty[b-aq8wycjvc4] { padding: 22px; text-align: center; color: var(--text-faint); font-size: 13px; }

/* activity picker */
.cr-pick-list[b-aq8wycjvc4] { display: flex; flex-direction: column; gap: 8px; }
.cr-pick[b-aq8wycjvc4] {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); transition: .13s;
}
.cr-pick:hover[b-aq8wycjvc4] { border-color: var(--accent-glow); transform: translateX(2px); }
.cr-pick-ico[b-aq8wycjvc4]   { font-size: 22px; flex-shrink: 0; }
.cr-pick-main[b-aq8wycjvc4]  { flex: 1; min-width: 0; }
.cr-pick-title[b-aq8wycjvc4] { font-size: 14px; font-weight: 600; }
.cr-pick-meta[b-aq8wycjvc4]  { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.cr-pick-go[b-aq8wycjvc4]    { color: var(--text-dim); font-size: 13px; }

/* star award */
.cr-stars-pick[b-aq8wycjvc4] { display: flex; justify-content: center; gap: 6px; margin: 8px 0 16px; }
.cr-star[b-aq8wycjvc4] {
    background: none; border: none; cursor: pointer; font-size: 30px;
    filter: grayscale(1); opacity: .38; transition: .13s; padding: 2px;
}
.cr-star:hover[b-aq8wycjvc4] { transform: scale(1.14); }
.cr-star.on[b-aq8wycjvc4] { filter: none; opacity: 1; transform: scale(1.06); }

.cr-note[b-aq8wycjvc4] {
    width: 100%; min-height: 62px; resize: vertical; padding: 9px 11px;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); color: var(--text-main);
    font-family: inherit; font-size: 13px; outline: none;
}
.cr-note:focus[b-aq8wycjvc4] { border-color: var(--accent-glow); }

.cr-modal-btns[b-aq8wycjvc4] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.cr-btn-ghost[b-aq8wycjvc4], .cr-btn-go[b-aq8wycjvc4] {
    padding: 9px 20px; border-radius: var(--radius-sm); cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600; border: none;
}
.cr-btn-ghost[b-aq8wycjvc4] {
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    color: var(--text-dim);
}
.cr-btn-go[b-aq8wycjvc4] {
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    box-shadow: 0 0 14px var(--accent-glow-soft);
}

@media (max-width: 560px) {
    .cr-modal[b-aq8wycjvc4] { max-width: 100%; padding: 16px; }
    .cr-star[b-aq8wycjvc4]  { font-size: 26px; }
}

/* ── Video room (LiveKit): share toggles + teacher's video ── */
.cr-rtc[b-aq8wycjvc4] {
    width: 34px; height: 34px; border-radius: var(--radius-sm); font-size: 15px; cursor: pointer;
    border: 1px solid var(--glass-border); background: var(--glass-bg-soft); color: var(--text-dim);
}
.cr-rtc:disabled[b-aq8wycjvc4] { opacity: .4; cursor: default; }
.cr-rtc-on[b-aq8wycjvc4] { border-color: var(--accent-glow); color: var(--text-main); background: var(--accent-glow-soft); }
.cr-teachercam[b-aq8wycjvc4] {
    display: none; position: fixed; top: 66px; right: 20px; z-index: 3; width: 200px;
    aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); background: #000;
    border: 1px solid var(--glass-border); box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.cr-teachercam.on[b-aq8wycjvc4] { display: block; }
.cr-audio-btn[b-aq8wycjvc4] {
    position: fixed; top: 66px; left: 50%; transform: translateX(-50%); z-index: 5;
    padding: 8px 18px; border-radius: 20px; cursor: pointer; font-weight: 700; font-size: 13px;
    border: 1px solid var(--accent-glow); background: var(--glass-bg); color: var(--text-main);
}

.cr-vreq-text[b-aq8wycjvc4] { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin-top: 6px; }
/* /Components/Parent/ClipViewerPage.razor.rz.scp.css */
.cv-page[b-zqdhj06rtg] { animation: fadeIn-b-zqdhj06rtg .25s ease; }
@keyframes fadeIn-b-zqdhj06rtg { from { opacity: 0; } to { opacity: 1; } }

.cv-top[b-zqdhj06rtg] { margin-bottom: 16px; }
.cv-back[b-zqdhj06rtg] {
    padding: 7px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: var(--glass-bg-soft);
    color: var(--text-dim); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .15s;
}
.cv-back:hover[b-zqdhj06rtg] { color: var(--text-main); border-color: var(--accent-glow); }

.cv-empty[b-zqdhj06rtg] { text-align: center; padding: 60px 20px; color: var(--text-dim); }
.cv-empty .ei[b-zqdhj06rtg] { font-size: 44px; margin-bottom: 12px; }

/* layout: player + side panel */
.cv-grid[b-zqdhj06rtg] { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .cv-grid[b-zqdhj06rtg] { grid-template-columns: 1fr; } }

.cv-player-wrap[b-zqdhj06rtg] {
    background: #000; border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 9;
}
.cv-player[b-zqdhj06rtg] { width: 100%; height: 100%; display: block; background: #000; }

.cv-side[b-zqdhj06rtg] {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.cv-title[b-zqdhj06rtg] { font-size: 18px; font-weight: 800; color: var(--text-main); }

.cv-badges[b-zqdhj06rtg] { display: flex; gap: 6px; flex-wrap: wrap; }
.badge[b-zqdhj06rtg] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-zqdhj06rtg]  { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-blue[b-zqdhj06rtg]   { background: var(--accent-glow-soft); color: var(--text-main); border: 1px solid var(--glass-border); }
.b-yellow[b-zqdhj06rtg] { background: rgba(251,191,36,0.11); color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }

.cv-stats[b-zqdhj06rtg] { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.cv-desc[b-zqdhj06rtg] { font-size: 13px; color: var(--text-dim); line-height: 1.6; }

/* rating */
.cv-rate[b-zqdhj06rtg] {
    margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--glass-border);
    display: flex; flex-direction: column; gap: 8px;
}
.cv-rate-lbl[b-zqdhj06rtg] { font-size: 12px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.cv-rate-stars[b-zqdhj06rtg] { display: flex; gap: 4px; }
.cv-rate-stars .rstar[b-zqdhj06rtg] {
    font-size: 30px; line-height: 1; cursor: pointer; color: rgba(150,160,180,.3);
    transition: transform .1s, color .1s;
}
.cv-rate-stars .rstar:hover[b-zqdhj06rtg] { transform: scale(1.15); }
.cv-rate-stars .rstar.on[b-zqdhj06rtg] { color: #fbbf24; text-shadow: 0 0 10px rgba(251,191,36,.4); }
.cv-rate-thanks[b-zqdhj06rtg] { font-size: 12.5px; color: #4ade80; font-weight: 700; }
.cv-rate-note[b-zqdhj06rtg]   { font-size: 12px; color: var(--text-dim); }
/* /Components/Parent/DashboardHome.razor.rz.scp.css */
/* Parent dashboard home — scoped (theme.css vars only). Mirrors parent-dashboard.html. */

.pd-page[b-947wpubwkh] { color: var(--text-main); }
.pd-loading[b-947wpubwkh], .pd-empty[b-947wpubwkh] { color: var(--text-dim); font-size: 13px; padding: 8px 0; }

/* header */
.page-header[b-947wpubwkh] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-greeting[b-947wpubwkh] { font-size: 20px; font-weight: 700; color: var(--text-main); }
.page-date[b-947wpubwkh] { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

/* buttons */
.btn[b-947wpubwkh] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s;
}
.btn-primary[b-947wpubwkh] {
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    box-shadow: 0 0 14px var(--accent-glow-soft);
}
.btn-primary:hover[b-947wpubwkh] { transform: translateY(-1px); }
.btn-sm[b-947wpubwkh] { padding: 6px 12px; font-size: 12px; }
.btn-xs[b-947wpubwkh] { padding: 4px 9px; font-size: 11px; }

/* badges */
.badge[b-947wpubwkh] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-947wpubwkh]  { background: var(--accent-glow-soft); color: var(--text-main); border: 1px solid var(--glass-border); }
.b-blue[b-947wpubwkh]   { background: var(--accent-glow-soft); color: var(--accent-glow); border: 1px solid var(--glass-border); }
.b-yellow[b-947wpubwkh] { background: var(--glass-bg-soft); color: var(--text-dim); border: 1px solid var(--glass-border); }
.b-gray[b-947wpubwkh]   { background: var(--glass-bg-soft); color: var(--text-faint); border: 1px solid var(--glass-border); }

/* stat cards */
.stats-grid[b-947wpubwkh] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.stat-card[b-947wpubwkh] {
    padding: 14px 16px; border-radius: var(--radius-md);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
}
.stat-icon[b-947wpubwkh] { font-size: 20px; margin-bottom: 6px; }
.stat-val[b-947wpubwkh]  { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--text-main); }
.stat-lbl[b-947wpubwkh]  { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.s-blue[b-947wpubwkh]   { border-top: 2px solid var(--accent-glow); }
.s-green[b-947wpubwkh]  { border-top: 2px solid var(--accent-glow); }
.s-purple[b-947wpubwkh] { border-top: 2px solid var(--accent-glow); }
.s-amber[b-947wpubwkh]  { border-top: 2px solid var(--accent-glow); }

/* quick actions */
.actions-grid[b-947wpubwkh] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.action-card[b-947wpubwkh] {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); padding: 16px 12px; text-align: center;
    cursor: pointer; transition: .2s; backdrop-filter: blur(var(--glass-blur));
}
.action-card:hover[b-947wpubwkh] { border-color: var(--accent-glow); transform: translateY(-2px); background: var(--accent-glow-soft); }
.action-icon[b-947wpubwkh] { font-size: 24px; margin-bottom: 8px; }
.action-label[b-947wpubwkh] { font-size: 12px; font-weight: 600; color: var(--text-dim); }

/* layout cols */
.two-col[b-947wpubwkh] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

/* panel */
.panel[b-947wpubwkh] {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); overflow: hidden; backdrop-filter: blur(var(--glass-blur));
}
.panel-head[b-947wpubwkh] {
    padding: 13px 16px; border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: space-between;
}
.panel-title[b-947wpubwkh] { font-size: 12.5px; font-weight: 700; color: var(--text-main); }
.panel-link[b-947wpubwkh] { font-size: 11px; color: var(--accent-glow); cursor: pointer; opacity: .85; }
.panel-link:hover[b-947wpubwkh] { opacity: 1; }
.panel-body[b-947wpubwkh] { padding: 14px 16px; }

/* children cards */
.children-grid[b-947wpubwkh] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.child-card[b-947wpubwkh] {
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 14px; display: flex; gap: 12px;
    align-items: center; cursor: pointer; transition: .2s;
}
.child-card:hover[b-947wpubwkh] { border-color: var(--accent-glow); background: var(--accent-glow-soft); }
.child-av[b-947wpubwkh] {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--accent-gradient); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px; color: var(--accent-text-on-fill); flex-shrink: 0;
}
.child-name[b-947wpubwkh] { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.child-meta[b-947wpubwkh] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.child-badges[b-947wpubwkh] { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }

/* upcoming sessions */
.session-row[b-947wpubwkh] {
    display: flex; align-items: center; gap: 12px; padding: 9px 0;
    border-bottom: 1px solid var(--glass-border);
}
.session-row:last-child[b-947wpubwkh] { border-bottom: none; }
.sess-date[b-947wpubwkh] { text-align: center; min-width: 38px; flex-shrink: 0; }
.sess-day[b-947wpubwkh] { font-size: 18px; font-weight: 800; line-height: 1; color: var(--text-main); }
.sess-month[b-947wpubwkh] { font-size: 9px; color: var(--text-faint); text-transform: uppercase; }
.sess-divider[b-947wpubwkh] { width: 1px; height: 36px; background: var(--glass-border); flex-shrink: 0; }
.sess-info[b-947wpubwkh] { flex: 1; }
.sess-name[b-947wpubwkh] { font-size: 12.5px; font-weight: 700; color: var(--text-main); }
.sess-meta[b-947wpubwkh] { font-size: 11px; color: var(--text-dim); margin-top: 2px; display: flex; gap: 8px; }
.sess-right[b-947wpubwkh] { text-align: right; flex-shrink: 0; }
.sess-teacher[b-947wpubwkh] { font-size: 11px; color: var(--text-faint); margin-top: 4px; }

/* payment row */
.pay-row[b-947wpubwkh] {
    display: flex; align-items: center; gap: 10px; padding: 9px 0;
    border-bottom: 1px solid var(--glass-border);
}
.pay-row:last-child[b-947wpubwkh] { border-bottom: none; }
.pay-icon[b-947wpubwkh] { font-size: 18px; flex-shrink: 0; }
.pay-info[b-947wpubwkh] { flex: 1; }
.pay-name[b-947wpubwkh] { font-size: 12.5px; font-weight: 600; color: var(--text-main); }
.pay-date[b-947wpubwkh] { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.pay-right[b-947wpubwkh] { text-align: right; flex-shrink: 0; }
.pay-amount[b-947wpubwkh] { font-size: 14px; font-weight: 700; color: var(--text-main); }
.pay-amount.due[b-947wpubwkh]  { color: var(--text-dim); }
.pay-amount.paid[b-947wpubwkh] { color: var(--text-main); }
.pay-btn[b-947wpubwkh] { margin-top: 4px; }
/* /Components/Parent/EducationalClipsPage.razor.rz.scp.css */
.ec-page[b-2tdkhx7451] { animation: fadeIn-b-2tdkhx7451 .25s ease; }
@keyframes fadeIn-b-2tdkhx7451 { from { opacity: 0; } to { opacity: 1; } }

/* page header (matches other parent pages) */
.page-header[b-2tdkhx7451] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.page-title[b-2tdkhx7451] { font-size: 18px; font-weight: 700; color: var(--text-main); }
.page-sub[b-2tdkhx7451] { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

/* empty / loading */
.ec-empty[b-2tdkhx7451] { text-align: center; padding: 60px 20px; color: var(--text-dim); }
.ec-empty .ei[b-2tdkhx7451] { font-size: 44px; margin-bottom: 12px; }

/* badges */
.badge[b-2tdkhx7451] { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 9.5px; font-weight: 600; }
.b-green[b-2tdkhx7451] { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-blue[b-2tdkhx7451]  { background: var(--accent-glow-soft); color: var(--text-main); border: 1px solid var(--glass-border); }

/* ── filter bar: search + category selects ── */
.ec-filters[b-2tdkhx7451] {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.ec-search[b-2tdkhx7451] { position: relative; flex: 1 1 240px; min-width: 200px; max-width: 380px; }
.ec-search-ic[b-2tdkhx7451] {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: 13px; opacity: .6; pointer-events: none;
}
.ec-search input[b-2tdkhx7451] {
    width: 100%; padding: 9px 32px 9px 32px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); color: var(--text-main); font-size: 13px; outline: none;
    transition: border-color .2s;
}
.ec-search input[b-2tdkhx7451]::placeholder { color: var(--text-faint); }
.ec-search input:focus[b-2tdkhx7451] { border-color: var(--accent-glow); }
.ec-search-clr[b-2tdkhx7451] {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; border: none; border-radius: 50%; cursor: pointer;
    background: var(--accent-glow-soft); color: var(--text-dim); font-size: 11px;
    display: flex; align-items: center; justify-content: center;
}
.ec-search-clr:hover[b-2tdkhx7451] { color: var(--text-main); }
.ec-selects[b-2tdkhx7451] { display: flex; gap: 10px; flex-wrap: wrap; }
.ec-selects select[b-2tdkhx7451] {
    padding: 9px 12px; background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); color: var(--text-main); font-size: 13px;
    outline: none; cursor: pointer; transition: border-color .2s;
}
.ec-selects select:focus[b-2tdkhx7451] { border-color: var(--accent-glow); }
.ec-selects option[b-2tdkhx7451] { background: var(--bg-panel, #1a1d29); color: var(--text-main); }

/* grid — 5 cards per row, shrinking gracefully on narrow panels */
.clips-grid[b-2tdkhx7451] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1500px) { .clips-grid[b-2tdkhx7451] { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1150px) { .clips-grid[b-2tdkhx7451] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .clips-grid[b-2tdkhx7451] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .clips-grid[b-2tdkhx7451] { grid-template-columns: 1fr; } }

.clip-card[b-2tdkhx7451] {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: .2s;
    display: flex; flex-direction: column;
}
.clip-card:hover[b-2tdkhx7451] { border-color: var(--accent-glow); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }

/* thumbnail / frame */
.clip-thumb[b-2tdkhx7451] { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.clip-thumb img[b-2tdkhx7451] { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-thumb-ph[b-2tdkhx7451] {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 46px; background: var(--accent-glow-soft); color: var(--text-dim);
}
.clip-play[b-2tdkhx7451] {
    position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff;
    background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
    border: 1.5px solid rgba(255,255,255,.65); opacity: .9; transition: .2s;
}
.clip-card:hover .clip-play[b-2tdkhx7451] { transform: scale(1.1); background: var(--accent-gradient); border-color: transparent; }
.clip-price[b-2tdkhx7451] {
    position: absolute; top: 6px; right: 6px; padding: 2px 8px; border-radius: 20px;
    font-size: 9.5px; font-weight: 800;
}
.clip-price.free[b-2tdkhx7451] { background: rgba(74,222,128,.2); color: #4ade80; border: 1px solid rgba(74,222,128,.4); }
.clip-price.paid[b-2tdkhx7451] { background: rgba(251,191,36,.2); color: #fbbf24; border: 1px solid rgba(251,191,36,.4); }

/* body */
.clip-body[b-2tdkhx7451] { padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.clip-title[b-2tdkhx7451] {
    font-size: 12.5px; font-weight: 700; color: var(--text-main); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.clip-badges[b-2tdkhx7451] { display: flex; gap: 4px; flex-wrap: wrap; }
.clip-desc[b-2tdkhx7451] {
    font-size: 11px; color: var(--text-dim); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.clip-foot[b-2tdkhx7451] {
    margin-top: auto; padding-top: 6px; border-top: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: space-between;
}
.clip-stars[b-2tdkhx7451] { display: flex; align-items: center; gap: 1px; }
.clip-stars .star[b-2tdkhx7451] { font-size: 12px; color: rgba(150,160,180,.35); }
.clip-stars .star.on[b-2tdkhx7451] { color: #fbbf24; }
.clip-rate-count[b-2tdkhx7451] { font-size: 10px; color: var(--text-faint); margin-left: 3px; }
.clip-views[b-2tdkhx7451] { font-size: 10.5px; color: var(--text-dim); font-weight: 600; }
/* /Components/Parent/MessagesPage.razor.rz.scp.css */
.placeholder-page[b-qu3ib9kp82] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-qu3ib9kp82]  { font-size: 48px; }
.ph-title[b-qu3ib9kp82] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-qu3ib9kp82]   { font-size: 14px; }
/* /Components/Parent/MyChildrenPage.razor.rz.scp.css */
.mc-page[b-7z7fadwfii] { animation: fadeIn-b-7z7fadwfii .25s ease; }
@keyframes fadeIn-b-7z7fadwfii { from { opacity: 0; } to { opacity: 1; } }

/* page header */
.page-header[b-7z7fadwfii] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.page-title[b-7z7fadwfii] { font-size: 18px; font-weight: 700; color: var(--text-main); }
.page-sub[b-7z7fadwfii] { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

/* empty / loading */
.mc-empty[b-7z7fadwfii] { text-align: center; padding: 60px 20px; color: var(--text-dim); }
.mc-empty .ei[b-7z7fadwfii] { font-size: 44px; margin-bottom: 12px; }

/* badges */
.badge[b-7z7fadwfii] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-7z7fadwfii]  { background: rgba(74,222,128,0.11);  color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-blue[b-7z7fadwfii]   { background: var(--accent-glow-soft); color: var(--text-main); border: 1px solid var(--glass-border); }
.b-yellow[b-7z7fadwfii] { background: rgba(251,191,36,0.11);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.b-gray[b-7z7fadwfii]   { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }
.b-red[b-7z7fadwfii]    { background: rgba(248,113,113,0.11); color: #f87171; border: 1px solid rgba(248,113,113,0.22); }

/* children grid */
.children-grid[b-7z7fadwfii] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.child-card[b-7z7fadwfii] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: .2s; }
.child-card:hover[b-7z7fadwfii] { border-color: var(--accent-glow); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.child-card.active[b-7z7fadwfii] { border-color: var(--accent-glow); box-shadow: 0 0 20px var(--accent-glow-soft); }

.cc-top[b-7z7fadwfii] { padding: 18px 18px 14px; display: flex; align-items: flex-start; gap: 14px; }
.cc-av[b-7z7fadwfii] { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; color: var(--accent-text-on-fill); flex-shrink: 0; overflow: hidden; }
.cc-av img[b-7z7fadwfii] { width: 100%; height: 100%; object-fit: cover; }
.cc-name[b-7z7fadwfii] { font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 3px; }
.cc-meta[b-7z7fadwfii] { font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; }
.cc-badges[b-7z7fadwfii] { display: flex; gap: 5px; flex-wrap: wrap; }

.cc-attend[b-7z7fadwfii] { padding: 10px 18px; border-top: 1px solid var(--glass-border); display: flex; align-items: center; gap: 10px; }
.attend-lbl[b-7z7fadwfii] { min-width: 65px; font-size: 10.5px; color: var(--text-faint); }
.attend-bar[b-7z7fadwfii] { flex: 1; height: 5px; background: rgba(100,120,150,0.2); border-radius: 3px; overflow: hidden; }
.attend-fill[b-7z7fadwfii] { height: 100%; border-radius: 3px; transition: width .3s ease; }
.fill-green[b-7z7fadwfii] { background: linear-gradient(90deg, #4ade80, #86efac); }
.fill-blue[b-7z7fadwfii] { background: var(--accent-gradient); }
.attend-pct[b-7z7fadwfii] { font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--text-main); }

.cc-footer[b-7z7fadwfii] { padding: 10px 18px; border-top: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; }
.cc-classes[b-7z7fadwfii] { font-size: 11.5px; color: var(--text-dim); }
.cc-next[b-7z7fadwfii] { font-size: 11px; color: var(--text-faint); }

/* detail panel */
.overlay[b-7z7fadwfii] { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 199; animation: fadeIn-b-7z7fadwfii .2s ease; }
.detail-panel[b-7z7fadwfii] {
    position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 95vw;
    background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid var(--glass-border); z-index: 200;
    display: flex; flex-direction: column; animation: slideIn-b-7z7fadwfii .3s ease;
}
@keyframes slideIn-b-7z7fadwfii { from { transform: translateX(100%); } to { transform: translateX(0); } }

.dp-head[b-7z7fadwfii] { padding: 18px 20px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.dp-av[b-7z7fadwfii] { width: 50px; height: 50px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: var(--accent-text-on-fill); flex-shrink: 0; overflow: hidden; }
.dp-av img[b-7z7fadwfii] { width: 100%; height: 100%; object-fit: cover; }
.dp-name[b-7z7fadwfii] { font-size: 15px; font-weight: 700; color: var(--text-main); }
.dp-meta[b-7z7fadwfii] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.dp-close[b-7z7fadwfii] { margin-left: auto; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.dp-close:hover[b-7z7fadwfii] { background: var(--accent-glow-soft); color: var(--text-main); }

.dp-tabs[b-7z7fadwfii] { display: flex; border-bottom: 1px solid var(--glass-border); padding: 0 20px; flex-shrink: 0; }
.dp-tab[b-7z7fadwfii] { padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--text-faint); cursor: pointer; border-bottom: 2px solid transparent; transition: .15s; white-space: nowrap; }
.dp-tab.active[b-7z7fadwfii] { color: var(--text-main); border-bottom-color: var(--accent-glow); }

.dp-body[b-7z7fadwfii] { flex: 1; overflow-y: auto; padding: 18px 20px; }
.dp-body[b-7z7fadwfii]::-webkit-scrollbar { width: 5px; }
.dp-body[b-7z7fadwfii]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 5px; }

.dp-loading[b-7z7fadwfii], .dp-empty[b-7z7fadwfii] { text-align: center; padding: 30px 10px; color: var(--text-dim); font-size: 12.5px; }

/* info tab */
.sec-lbl[b-7z7fadwfii] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .8px; display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; }
.sec-lbl:first-child[b-7z7fadwfii] { margin-top: 0; }
.sec-lbl[b-7z7fadwfii]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }
.info-grid[b-7z7fadwfii] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-box[b-7z7fadwfii] { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); }
.info-box.full[b-7z7fadwfii] { grid-column: 1 / -1; }
.ib-label[b-7z7fadwfii] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.ib-val[b-7z7fadwfii] { font-size: 13px; font-weight: 600; color: var(--text-main); }
.ib-val.muted[b-7z7fadwfii] { color: var(--text-dim); font-weight: 400; line-height: 1.6; }

/* classes tab */
.class-row[b-7z7fadwfii] { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); margin-bottom: 8px; }
.cr-icon[b-7z7fadwfii] { font-size: 20px; flex-shrink: 0; }
.cr-name[b-7z7fadwfii] { font-size: 13px; font-weight: 700; color: var(--text-main); }
.cr-meta[b-7z7fadwfii] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.cr-right[b-7z7fadwfii] { margin-left: auto; text-align: right; flex-shrink: 0; }
.cr-since[b-7z7fadwfii] { font-size: 10px; color: var(--text-faint); margin-top: 4px; }

/* sessions tab */
.sess-head[b-7z7fadwfii] { font-size: 12px; color: var(--text-dim); margin-bottom: 14px; }
.sess-row[b-7z7fadwfii] { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--glass-border); }
.sess-row:last-child[b-7z7fadwfii] { border-bottom: none; }
.sess-date[b-7z7fadwfii] { font-size: 12px; font-weight: 700; min-width: 55px; flex-shrink: 0; color: var(--text-main); }
.sess-time[b-7z7fadwfii] { font-size: 10.5px; color: var(--text-dim); }
.sess-name[b-7z7fadwfii] { font-size: 12px; color: var(--text-main); }
.sess-teacher[b-7z7fadwfii] { font-size: 10.5px; color: var(--text-faint); }
/* /Components/Parent/ParentPaymentsPage.razor.rz.scp.css */
.pp-page[b-gi3n3e319s] { animation: fadeIn-b-gi3n3e319s .25s ease; }
@keyframes fadeIn-b-gi3n3e319s { from { opacity: 0; } to { opacity: 1; } }

/* header */
.page-header[b-gi3n3e319s] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-title[b-gi3n3e319s] { font-size: 18px; font-weight: 700; color: var(--text-main); }
.page-sub[b-gi3n3e319s] { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.btn[b-gi3n3e319s] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn-primary[b-gi3n3e319s] { background: var(--accent-gradient); color: var(--accent-text-on-fill); box-shadow: 0 0 14px var(--accent-glow-soft); }
.btn-ghost[b-gi3n3e319s] { background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-gi3n3e319s] { background: var(--accent-glow-soft); color: var(--text-main); }
.btn-sm[b-gi3n3e319s] { padding: 6px 12px; font-size: 12px; }
.btn-xs[b-gi3n3e319s] { padding: 4px 9px; font-size: 11px; }

.badge[b-gi3n3e319s] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-gi3n3e319s] { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }

.pp-empty[b-gi3n3e319s] { text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 13px; }

/* summary cards */
.sum-grid[b-gi3n3e319s] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.sum-card[b-gi3n3e319s] { padding: 14px 16px; border-radius: var(--radius-md); background: var(--glass-bg); border: 1px solid var(--glass-border); }
.sum-icon[b-gi3n3e319s] { font-size: 20px; margin-bottom: 6px; }
.sum-val[b-gi3n3e319s] { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--text-main); }
.sum-lbl[b-gi3n3e319s] { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.s-red[b-gi3n3e319s] { border-top: 2px solid rgba(248,113,113,0.4); }    .s-red .sum-val[b-gi3n3e319s] { color: #f87171; }
.s-green[b-gi3n3e319s] { border-top: 2px solid rgba(74,222,128,0.4); }   .s-green .sum-val[b-gi3n3e319s] { color: #4ade80; }
.s-blue[b-gi3n3e319s] { border-top: 2px solid var(--accent-glow); }      .s-blue .sum-val[b-gi3n3e319s] { color: var(--text-main); }
.s-gray[b-gi3n3e319s] { border-top: 2px solid rgba(100,120,150,0.3); }

/* sec label */
.sec-lbl[b-gi3n3e319s] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .8px; display: flex; align-items: center; gap: 8px; margin: 20px 0 12px; }
.sec-lbl[b-gi3n3e319s]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

/* child payment cards */
.child-pay-grid[b-gi3n3e319s] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.cp-card[b-gi3n3e319s] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; }
.cp-head[b-gi3n3e319s] { padding: 14px 16px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 12px; }
.cp-av[b-gi3n3e319s] { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--accent-text-on-fill); flex-shrink: 0; overflow: hidden; }
.cp-av img[b-gi3n3e319s] { width: 100%; height: 100%; object-fit: cover; }
.cp-name[b-gi3n3e319s] { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.cp-school[b-gi3n3e319s] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.cp-body[b-gi3n3e319s] { padding: 14px 16px; }
.cp-class-row[b-gi3n3e319s] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--glass-border); }
.cp-class-row:last-child[b-gi3n3e319s] { border-bottom: none; }
.cp-class-name[b-gi3n3e319s] { font-size: 12.5px; font-weight: 600; color: var(--text-main); }
.cp-class-meta[b-gi3n3e319s] { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.cp-due-col[b-gi3n3e319s] { text-align: right; flex-shrink: 0; }
.cp-due[b-gi3n3e319s] { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.cp-due.red[b-gi3n3e319s] { color: #f87171; }
.cp-due.green[b-gi3n3e319s] { color: #4ade80; }
.cp-paid-badge[b-gi3n3e319s] { display: block; text-align: center; }
.cp-foot[b-gi3n3e319s] { padding: 12px 16px; border-top: 1px solid var(--glass-border); background: var(--glass-bg-soft); display: flex; align-items: center; justify-content: space-between; }
.cp-total-lbl[b-gi3n3e319s] { font-size: 11px; color: var(--text-faint); }
.cp-total-val[b-gi3n3e319s] { font-size: 16px; font-weight: 800; }
.cp-total-val.red[b-gi3n3e319s] { color: #f87171; }
.cp-total-val.green[b-gi3n3e319s] { color: #4ade80; }

/* panel + history */
.panel[b-gi3n3e319s] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 14px; }
.filter-bar[b-gi3n3e319s] { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--glass-border); flex-wrap: wrap; }
.f-select[b-gi3n3e319s] { padding: 6px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12px; outline: none; cursor: pointer; }
.f-select option[b-gi3n3e319s] { background: #0c1a30; color: var(--text-main); }

.table-wrap[b-gi3n3e319s] { overflow-x: auto; }
table[b-gi3n3e319s] { width: 100%; border-collapse: collapse; }
th[b-gi3n3e319s] { text-align: left; font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; padding: 8px 16px; border-bottom: 1px solid var(--glass-border); white-space: nowrap; }
td[b-gi3n3e319s] { padding: 11px 16px; font-size: 12.5px; border-bottom: 1px solid var(--glass-border); vertical-align: middle; color: var(--text-main); }
tr:last-child td[b-gi3n3e319s] { border-bottom: none; }
tr:hover td[b-gi3n3e319s] { background: var(--accent-glow-soft); }
.td-strong[b-gi3n3e319s] { font-weight: 600; }
.td-dim[b-gi3n3e319s] { color: var(--text-dim); font-size: 11.5px; }
.td-amount-paid[b-gi3n3e319s] { font-weight: 700; color: #4ade80; }
.td-ref[b-gi3n3e319s] { font-family: monospace; font-size: 11px; color: var(--text-faint); }

@media (max-width: 700px) {
    .sum-grid[b-gi3n3e319s] { grid-template-columns: 1fr 1fr; }
    .child-pay-grid[b-gi3n3e319s] { grid-template-columns: 1fr; }
}
/* /Components/Parent/PracticePage.razor.rz.scp.css */
/* ============================================================
   PracticePage.razor.css — Parent → Practise with your child
   CSS Isolation; colours via theme.css var(--…) so all three
   themes (blue/gold/lilac) work.
   ============================================================ */

.pr-page[b-sf6t8qsogb] { color: var(--text-main); }

.pr-header[b-sf6t8qsogb] { margin-bottom: 22px; }
.pr-title[b-sf6t8qsogb]  { font-size: 17px; font-weight: 700; }
.pr-sub[b-sf6t8qsogb]    { font-size: 12px; color: var(--text-dim); margin-top: 4px; max-width: 560px; }

.pr-sec-label[b-sf6t8qsogb] {
    font-size: 10px; font-weight: 700; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .7px; margin-bottom: 10px;
}
.pr-mt[b-sf6t8qsogb] { margin-top: 28px; }

/* ── child cards ── */
.pr-kids[b-sf6t8qsogb] { display: flex; flex-direction: column; gap: 10px; }
.pr-kid[b-sf6t8qsogb] {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer;
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
    transition: .14s;
}
.pr-kid:hover[b-sf6t8qsogb] { border-color: var(--accent-glow); transform: translateY(-1px); }

.pr-kid-av[b-sf6t8qsogb] {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    font-weight: 700; font-size: 15px;
}
.pr-kid-main[b-sf6t8qsogb] { flex: 1; min-width: 0; }
.pr-kid-name[b-sf6t8qsogb] { font-size: 14.5px; font-weight: 700; }
.pr-kid-meta[b-sf6t8qsogb] { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }

.pr-go[b-sf6t8qsogb] {
    padding: 9px 20px; border: none; cursor: pointer; border-radius: 999px;
    font-family: inherit; font-size: 13px; font-weight: 700;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    box-shadow: 0 0 14px var(--accent-glow-soft); flex-shrink: 0; transition: .15s;
}
.pr-go:disabled[b-sf6t8qsogb] { opacity: .5; cursor: not-allowed; }

/* ── history ── */
.pr-hist[b-sf6t8qsogb] { display: flex; flex-direction: column; gap: 8px; }
.pr-hrow[b-sf6t8qsogb] {
    display: flex; align-items: center; gap: 14px; padding: 12px 15px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
}
.pr-hdate[b-sf6t8qsogb]  { min-width: 52px; flex-shrink: 0; }
.pr-hd[b-sf6t8qsogb]     { font-size: 12.5px; font-weight: 700; }
.pr-ht[b-sf6t8qsogb]     { font-size: 10.5px; color: var(--text-faint); margin-top: 1px; }
.pr-hmain[b-sf6t8qsogb]  { flex: 1; min-width: 0; }
.pr-hchild[b-sf6t8qsogb] { font-size: 13px; font-weight: 600; }
.pr-hmeta[b-sf6t8qsogb]  { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.pr-hstats[b-sf6t8qsogb] { font-size: 12px; white-space: nowrap; flex-shrink: 0; }

.pr-pass[b-sf6t8qsogb] { color: #4ade80; font-weight: 600; }
.pr-fail[b-sf6t8qsogb] { color: #f87171; font-weight: 600; }
.pr-star[b-sf6t8qsogb] { color: #fbbf24; font-weight: 600; }

/* ── states ── */
.pr-loading[b-sf6t8qsogb] { padding: 26px; text-align: center; color: var(--text-dim); font-size: 13px; }
.pr-none[b-sf6t8qsogb]    { font-size: 12px; color: var(--text-faint); padding: 4px 0; }
.pr-empty[b-sf6t8qsogb] {
    padding: 44px 20px; text-align: center;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}
.pr-empty-ico[b-sf6t8qsogb] { font-size: 32px; margin-bottom: 10px; opacity: .65; }
.pr-empty p[b-sf6t8qsogb]   { font-size: 14px; font-weight: 600; margin: 0; }

.pr-error[b-sf6t8qsogb] {
    margin-top: 12px; padding: 10px 14px; font-size: 12.5px;
    background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3);
    color: #f87171; border-radius: var(--radius-sm);
}

@media (max-width: 560px) {
    .pr-kid[b-sf6t8qsogb]    { padding: 12px; gap: 11px; }
    .pr-kid-av[b-sf6t8qsogb] { width: 38px; height: 38px; font-size: 13px; }
    .pr-go[b-sf6t8qsogb]     { padding: 8px 14px; font-size: 12px; }
    .pr-hrow[b-sf6t8qsogb]   { gap: 10px; padding: 10px 12px; }
    .pr-hstats[b-sf6t8qsogb] { font-size: 11px; }
}
/* /Components/Parent/PrivateSessionsPage.razor.rz.scp.css */
/* Parent → Private Sessions — scoped (theme.css vars only). Mirrors parent-private-sessions.html. */

.psp-page[b-i5u1gy980b] { color: var(--text-main); }

/* header */
.page-header[b-i5u1gy980b] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-title[b-i5u1gy980b] { font-size: 18px; font-weight: 700; color: var(--text-main); }
.page-sub[b-i5u1gy980b] { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

/* buttons */
.btn[b-i5u1gy980b] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    border: none; transition: .15s;
}
.btn-sm[b-i5u1gy980b] { padding: 6px 12px; font-size: 12px; }
.btn-ghost[b-i5u1gy980b] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-i5u1gy980b] { background: var(--accent-glow-soft); color: var(--accent-glow); }

/* badges */
.badge[b-i5u1gy980b] { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-i5u1gy980b]  { background: var(--accent-glow-soft); color: var(--text-main); border: 1px solid var(--glass-border); }
.b-blue[b-i5u1gy980b]   { background: var(--accent-glow-soft); color: var(--accent-glow); border: 1px solid var(--glass-border); }
.b-yellow[b-i5u1gy980b] { background: var(--glass-bg-soft); color: var(--text-dim); border: 1px solid var(--glass-border); }
.b-gray[b-i5u1gy980b]   { background: var(--glass-bg-soft); color: var(--text-faint); border: 1px solid var(--glass-border); }
.b-red[b-i5u1gy980b]    { background: var(--glass-bg-soft); color: var(--text-dim); border: 1px solid var(--glass-border); }
.live-badge[b-i5u1gy980b] { animation: psp-pulse-b-i5u1gy980b 1.5s infinite; }

/* page tabs */
.page-tabs[b-i5u1gy980b] {
    display: flex; gap: 4px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    padding: 4px; margin-bottom: 20px; width: fit-content;
}
.page-tab[b-i5u1gy980b] {
    padding: 7px 18px; border-radius: var(--radius-sm); font-size: 13px;
    font-weight: 600; color: var(--text-faint); cursor: pointer; transition: .15s;
}
.page-tab.active[b-i5u1gy980b] { background: var(--glass-bg); color: var(--text-main); box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* info banner */
.info-banner[b-i5u1gy980b] {
    background: var(--accent-glow-soft); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 18px;
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 12.5px; color: var(--text-dim); line-height: 1.6;
}
.info-banner strong[b-i5u1gy980b] { color: var(--text-main); }
.ib-icon[b-i5u1gy980b] { font-size: 18px; flex-shrink: 0; }

/* filter bar */
.filter-bar[b-i5u1gy980b] { display: flex; gap: 8px; margin-bottom: 16px; }
.f-select[b-i5u1gy980b] {
    padding: 7px 11px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
}
.f-select:focus[b-i5u1gy980b] { border-color: var(--accent-glow); }

/* session cards grid */
.sessions-grid[b-i5u1gy980b] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.session-card[b-i5u1gy980b] {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); overflow: hidden; transition: .2s;
    display: flex; flex-direction: column; backdrop-filter: blur(var(--glass-blur));
}
.session-card:hover[b-i5u1gy980b] { border-color: var(--accent-glow); transform: translateY(-2px); }
.session-card.live[b-i5u1gy980b] { border-color: var(--accent-glow); box-shadow: 0 0 20px var(--accent-glow-soft); }

/* card top: date badge */
.sc-date-block[b-i5u1gy980b] {
    padding: 14px 16px; border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: space-between;
}
.sc-date-block.live[b-i5u1gy980b] { background: var(--accent-glow-soft); }
.sc-date-left[b-i5u1gy980b] { display: flex; align-items: baseline; gap: 6px; }
.sc-day[b-i5u1gy980b] { font-size: 24px; font-weight: 800; line-height: 1; color: var(--text-main); }
.sc-day.live[b-i5u1gy980b] { color: var(--accent-glow); }
.sc-month-year[b-i5u1gy980b] { display: flex; flex-direction: column; }
.sc-month[b-i5u1gy980b] { font-size: 10px; color: var(--text-faint); text-transform: uppercase; }
.sc-year[b-i5u1gy980b] { font-size: 10px; color: var(--text-faint); }

/* card body */
.sc-info[b-i5u1gy980b] { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sc-title[b-i5u1gy980b] { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.sc-meta[b-i5u1gy980b] { display: flex; flex-direction: column; gap: 4px; }
.sc-meta-item[b-i5u1gy980b] { font-size: 11.5px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; }
.sc-note[b-i5u1gy980b] { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

/* room info */
.room-box[b-i5u1gy980b] {
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 8px 12px; margin: 0 12px 12px;
    display: flex; align-items: center; gap: 8px;
}
.room-box.live[b-i5u1gy980b] { background: var(--accent-glow-soft); border-color: var(--accent-glow); }
.room-icon[b-i5u1gy980b] { font-size: 16px; flex-shrink: 0; }
.room-text[b-i5u1gy980b] { flex: 1; overflow: hidden; }
.room-name[b-i5u1gy980b] { font-size: 11px; font-weight: 700; color: var(--accent-glow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-name.live[b-i5u1gy980b] { color: var(--text-main); }
.room-sub[b-i5u1gy980b] { font-size: 10px; color: var(--text-dim); margin-top: 1px; }

/* action button */
.sc-action[b-i5u1gy980b] { padding: 0 12px 12px; }
.sc-action .btn[b-i5u1gy980b] { width: 100%; }
.join-live[b-i5u1gy980b] { background: var(--accent-gradient); color: var(--accent-text-on-fill); font-weight: 700; }
.join-disabled[b-i5u1gy980b] { opacity: .4; cursor: not-allowed; }

/* status flow */
.status-flow[b-i5u1gy980b] {
    display: flex; align-items: center; gap: 4px; padding: 10px 16px;
    border-top: 1px solid var(--glass-border); background: var(--glass-bg-soft);
}
.sf-dot[b-i5u1gy980b] {
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; flex-shrink: 0; border: 1.5px solid var(--glass-border); color: var(--text-faint);
}
.sf-dot.done[b-i5u1gy980b] { background: var(--accent-glow-soft); border-color: var(--accent-glow); color: var(--text-main); }
.sf-dot.active[b-i5u1gy980b] { background: var(--accent-glow-soft); border-color: var(--accent-glow); color: var(--accent-glow); }
.sf-dot.pending[b-i5u1gy980b] { background: var(--glass-bg-soft); border-color: var(--glass-border); color: var(--text-dim); }
.sf-line[b-i5u1gy980b] { flex: 1; height: 1px; background: var(--glass-border); }
.sf-line.done[b-i5u1gy980b] { background: var(--accent-glow); }
.sf-label-row[b-i5u1gy980b] { display: flex; justify-content: space-between; padding: 0 16px 8px; font-size: 9px; color: var(--text-faint); }
.sf-label-row span.done[b-i5u1gy980b] { color: var(--text-main); }
.sf-label-row span.active[b-i5u1gy980b] { color: var(--accent-glow); }
.sf-label-row span.pending[b-i5u1gy980b] { color: var(--text-dim); }

/* empty state */
.empty-state[b-i5u1gy980b] { text-align: center; padding: 60px 20px; color: var(--text-faint); }
.empty-state .ei[b-i5u1gy980b] { font-size: 42px; margin-bottom: 10px; opacity: .3; }
.empty-state p[b-i5u1gy980b] { font-size: 13px; }

@keyframes psp-pulse-b-i5u1gy980b { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* primary button + alert */
.btn-primary[b-i5u1gy980b] { background: var(--accent-gradient); color: var(--accent-text-on-fill); box-shadow: 0 0 14px var(--accent-glow-soft); }
.btn-primary:hover:not(:disabled)[b-i5u1gy980b] { transform: translateY(-1px); }
.btn-primary:disabled[b-i5u1gy980b] { opacity: .5; cursor: not-allowed; }
.psp-alert[b-i5u1gy980b] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-main); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 12px; font-size: 12.5px; }

/* ── modal ── */
.modal-overlay[b-i5u1gy980b] { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[b-i5u1gy980b] {
    background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
    width: 100%; max-width: 700px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-head[b-i5u1gy980b] { padding: 16px 20px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-title[b-i5u1gy980b] { font-size: 15px; font-weight: 700; color: var(--text-main); }
.modal-close[b-i5u1gy980b] { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.modal-close:hover[b-i5u1gy980b] { color: var(--text-main); }
.modal-body[b-i5u1gy980b] { flex: 1; overflow-y: auto; padding: 20px; }
.modal-body[b-i5u1gy980b]::-webkit-scrollbar { width: 5px; }
.modal-body[b-i5u1gy980b]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 5px; }
.modal-footer[b-i5u1gy980b] { padding: 14px 20px; border-top: 1px solid var(--glass-border); display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; }

/* ── stepper ── */
.stepper[b-i5u1gy980b] { display: flex; align-items: center; margin-bottom: 24px; }
.step[b-i5u1gy980b] { display: flex; align-items: center; gap: 7px; }
.step-circle[b-i5u1gy980b] {
    width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0; border: 2px solid var(--glass-border); color: var(--text-faint); background: var(--glass-bg-soft);
}
.step.active .step-circle[b-i5u1gy980b] { background: var(--accent-gradient); color: var(--accent-text-on-fill); border-color: transparent; box-shadow: 0 0 12px var(--accent-glow-soft); }
.step.done .step-circle[b-i5u1gy980b] { background: var(--accent-glow-soft); border-color: var(--accent-glow); color: var(--accent-glow); }
.step-lbl[b-i5u1gy980b] { font-size: 11px; font-weight: 600; color: var(--text-faint); white-space: nowrap; }
.step.active .step-lbl[b-i5u1gy980b] { color: var(--text-main); }
.step.done .step-lbl[b-i5u1gy980b] { color: var(--accent-glow); }
.step-line[b-i5u1gy980b] { flex: 1; height: 1px; background: var(--glass-border); margin: 0 8px; }
.step-line.done[b-i5u1gy980b] { background: var(--accent-glow); }

.wiz-hint[b-i5u1gy980b] { font-size: 12px; color: var(--text-dim); margin-bottom: 14px; }
.wiz-form[b-i5u1gy980b] { margin-top: 14px; }

/* ── child cards ── */
.children-grid[b-i5u1gy980b] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.child-card[b-i5u1gy980b] { background: var(--glass-bg-soft); border: 2px solid var(--glass-border); border-radius: var(--radius-sm); padding: 14px; cursor: pointer; transition: .2s; display: flex; gap: 12px; align-items: center; }
.child-card:hover[b-i5u1gy980b] { border-color: var(--accent-glow); background: var(--accent-glow-soft); }
.child-card.selected[b-i5u1gy980b] { border-color: var(--accent-glow); background: var(--accent-glow-soft); box-shadow: 0 0 14px var(--accent-glow-soft); }
.c-av[b-i5u1gy980b] { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--accent-text-on-fill); flex-shrink: 0; }
.c-name[b-i5u1gy980b] { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.c-meta[b-i5u1gy980b] { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
.c-badges[b-i5u1gy980b] { display: flex; gap: 4px; margin-top: 6px; }

/* ── teacher search + cards ── */
.search-box[b-i5u1gy980b] { display: flex; gap: 8px; margin-bottom: 12px; }
.search-input[b-i5u1gy980b] { flex: 1; padding: 9px 12px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; }
.search-input:focus[b-i5u1gy980b] { border-color: var(--accent-glow); }
.filter-row[b-i5u1gy980b] { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.teachers-grid[b-i5u1gy980b] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.teacher-card[b-i5u1gy980b] { background: var(--glass-bg-soft); border: 2px solid var(--glass-border); border-radius: var(--radius-sm); padding: 12px; cursor: pointer; transition: .2s; display: flex; gap: 10px; }
.teacher-card:hover[b-i5u1gy980b] { border-color: var(--accent-glow); background: var(--accent-glow-soft); }
.teacher-card.selected[b-i5u1gy980b] { border-color: var(--accent-glow); background: var(--accent-glow-soft); }
.t-av[b-i5u1gy980b] { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--accent-text-on-fill); flex-shrink: 0; }
.t-name[b-i5u1gy980b] { font-size: 13px; font-weight: 700; color: var(--text-main); }
.t-spec[b-i5u1gy980b] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.t-meta[b-i5u1gy980b] { font-size: 10.5px; color: var(--text-faint); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.t-badges[b-i5u1gy980b] { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }

/* ── teacher mini + slots ── */
.profile-mini[b-i5u1gy980b] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.pm-av[b-i5u1gy980b] { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--accent-text-on-fill); flex-shrink: 0; }
.pm-name[b-i5u1gy980b] { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.pm-spec[b-i5u1gy980b] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.change-link[b-i5u1gy980b] { font-size: 11px; color: var(--accent-glow); cursor: pointer; margin-top: 5px; display: inline-block; }
.slots-section[b-i5u1gy980b] { margin-bottom: 4px; }
.slots-date-hdr[b-i5u1gy980b] { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; margin: 14px 0 7px; display: flex; align-items: center; gap: 8px; }
.slots-date-hdr[b-i5u1gy980b]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }
.slots-row[b-i5u1gy980b] { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-btn[b-i5u1gy980b] { padding: 8px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--glass-border); background: var(--glass-bg-soft); color: var(--text-dim); transition: .15s; }
.slot-btn:hover[b-i5u1gy980b], .slot-btn.selected[b-i5u1gy980b] { background: var(--accent-glow-soft); border-color: var(--accent-glow); color: var(--accent-glow); }
.slot-btn.booked[b-i5u1gy980b] { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.no-slots[b-i5u1gy980b] { font-size: 12px; color: var(--text-faint); text-align: center; padding: 30px; background: var(--glass-bg-soft); border-radius: var(--radius-sm); border: 1px solid var(--glass-border); }

/* ── details form ── */
.form-group[b-i5u1gy980b] { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.form-label[b-i5u1gy980b] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.req[b-i5u1gy980b] { color: var(--text-error); }
.form-select[b-i5u1gy980b], .form-textarea[b-i5u1gy980b] { width: 100%; padding: 8px 11px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; }
.form-select:focus[b-i5u1gy980b], .form-textarea:focus[b-i5u1gy980b] { border-color: var(--accent-glow); }
.form-select option[b-i5u1gy980b] { background: var(--glass-bg); color: var(--text-main); }
.form-textarea[b-i5u1gy980b] { resize: vertical; min-height: 72px; line-height: 1.5; }

/* selected summary mini */
.sel-row[b-i5u1gy980b] { display: flex; align-items: center; gap: 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 8px; font-size: 12.5px; }
.sel-icon[b-i5u1gy980b] { font-size: 18px; flex-shrink: 0; }
.sel-label[b-i5u1gy980b] { color: var(--text-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; }
.sel-val[b-i5u1gy980b] { font-weight: 600; color: var(--text-main); }

/* confirm */
.summary-box[b-i5u1gy980b] { background: var(--accent-glow-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 14px; }
.sum-row[b-i5u1gy980b] { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid var(--glass-border); }
.sum-row:last-child[b-i5u1gy980b] { border-bottom: none; }
.sum-lbl[b-i5u1gy980b] { color: var(--text-dim); }
.sum-val[b-i5u1gy980b] { font-weight: 600; color: var(--text-main); }
.warn-box[b-i5u1gy980b] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.warn-box strong[b-i5u1gy980b] { color: var(--text-main); }

/* done state */
.wiz-done[b-i5u1gy980b] { text-align: center; padding: 30px 10px; }
.wd-icon[b-i5u1gy980b] { font-size: 46px; margin-bottom: 12px; }
.wd-title[b-i5u1gy980b] { font-size: 17px; font-weight: 700; color: var(--text-main); margin-bottom: 6px; }
.wd-sub[b-i5u1gy980b] { font-size: 12.5px; color: var(--text-dim); margin-bottom: 18px; line-height: 1.6; }

/* ── Online group classes (school) ── */
.gc-box[b-i5u1gy980b] { margin: 0 0 18px; padding: 14px 16px; border-radius: var(--radius-md);
          background: var(--glass-bg); border: 1px solid var(--glass-border); }
.gc-title[b-i5u1gy980b] { font-size: 13px; font-weight: 800; color: var(--text-main); margin-bottom: 10px; }
.gc-row[b-i5u1gy980b] { display: flex; align-items: center; gap: 14px; padding: 8px 0;
          border-top: 1px solid var(--glass-border); }
.gc-row:first-of-type[b-i5u1gy980b] { border-top: none; }
.gc-when[b-i5u1gy980b] { min-width: 88px; font-size: 11.5px; font-weight: 700; color: var(--text-dim); line-height: 1.4; }
.gc-main[b-i5u1gy980b] { flex: 1; min-width: 0; }
.gc-name[b-i5u1gy980b] { font-size: 13px; font-weight: 700; color: var(--text-main); }
.gc-child[b-i5u1gy980b] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
/* /Components/Parent/ProfilePage.razor.rz.scp.css */
.pf-page[b-0zi3i8t7wg] { animation: fadeIn-b-0zi3i8t7wg .25s ease; max-width: 720px; }
@keyframes fadeIn-b-0zi3i8t7wg { from { opacity: 0; } to { opacity: 1; } }

.page-header[b-0zi3i8t7wg] { margin-bottom: 20px; }
.page-title[b-0zi3i8t7wg] { font-size: 18px; font-weight: 700; color: var(--text-main); }
.page-sub[b-0zi3i8t7wg] { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.pf-loading[b-0zi3i8t7wg] { padding: 50px 20px; text-align: center; color: var(--text-dim); font-size: 13px; }

.btn[b-0zi3i8t7wg] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-0zi3i8t7wg] { opacity: .5; cursor: not-allowed; }
.btn-primary[b-0zi3i8t7wg] { background: var(--accent-gradient); color: var(--accent-text-on-fill); box-shadow: 0 0 14px var(--accent-glow-soft); }
.btn-ghost[b-0zi3i8t7wg] { background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-0zi3i8t7wg] { background: var(--accent-glow-soft); color: var(--text-main); }
.btn-sm[b-0zi3i8t7wg] { padding: 6px 14px; font-size: 12px; }

/* identity card */
.identity-card[b-0zi3i8t7wg] { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); margin-bottom: 8px; }
.avatar-wrap[b-0zi3i8t7wg] { position: relative; flex-shrink: 0; }
.avatar-circle[b-0zi3i8t7wg] { width: 76px; height: 76px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: var(--accent-text-on-fill); cursor: pointer; overflow: hidden; }
.avatar-circle img[b-0zi3i8t7wg] { width: 100%; height: 100%; object-fit: cover; }
.avatar-edit-badge[b-0zi3i8t7wg] { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--glass-bg); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; }
.avatar-edit-badge:hover[b-0zi3i8t7wg] { background: var(--accent-glow-soft); }
.hidden-input[b-0zi3i8t7wg] { display: none; }
.identity-name[b-0zi3i8t7wg] { font-size: 17px; font-weight: 700; color: var(--text-main); }
.identity-role[b-0zi3i8t7wg] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.identity-email[b-0zi3i8t7wg] { font-size: 12px; color: var(--text-faint); margin-top: 6px; }

/* section label */
.sec-lbl[b-0zi3i8t7wg] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .8px; display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; }
.sec-lbl[b-0zi3i8t7wg]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

/* form */
.form-grid[b-0zi3i8t7wg] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-grid.full[b-0zi3i8t7wg] { grid-template-columns: 1fr; }
.field[b-0zi3i8t7wg] { display: flex; flex-direction: column; gap: 6px; }
.field label[b-0zi3i8t7wg] { font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
.field .req[b-0zi3i8t7wg] { color: #f87171; }
.field input[b-0zi3i8t7wg] { padding: 9px 12px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; transition: .15s; }
.field input:focus[b-0zi3i8t7wg] { border-color: var(--accent-glow); background: var(--accent-glow-soft); }

/* save bar */
.save-bar[b-0zi3i8t7wg] { display: flex; align-items: center; gap: 10px; padding-top: 6px; }
.save-hint[b-0zi3i8t7wg] { flex: 1; font-size: 11.5px; color: var(--text-faint); }
.save-hint.dirty[b-0zi3i8t7wg] { color: #fbbf24; }

/* password box */
.pwd-box[b-0zi3i8t7wg] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 16px 18px; }
.pwd-actions[b-0zi3i8t7wg] { display: flex; justify-content: flex-end; margin-top: 4px; }

/* toast */
.pf-toast[b-0zi3i8t7wg] { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 11px 18px; font-size: 12.5px; font-weight: 600; color: var(--text-main); box-shadow: 0 8px 28px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: .25s; z-index: 400; }
.pf-toast.show[b-0zi3i8t7wg] { opacity: 1; transform: translateX(-50%) translateY(0); }
.pf-toast.warn[b-0zi3i8t7wg] { border-color: rgba(251,191,36,0.4); }

@media (max-width: 600px) {
    .form-grid[b-0zi3i8t7wg] { grid-template-columns: 1fr; }
}
/* /Components/Parent/SessionHistoryPage.razor.rz.scp.css */
.ph-page[b-oxb20dqyy3] { animation: fadeIn-b-oxb20dqyy3 .25s ease; }
@keyframes fadeIn-b-oxb20dqyy3 { from { opacity: 0; } to { opacity: 1; } }

.page-header[b-oxb20dqyy3] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-title[b-oxb20dqyy3] { font-size: 18px; font-weight: 700; color: var(--text-main); }
.page-sub[b-oxb20dqyy3] { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.ph-empty[b-oxb20dqyy3] { text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 13px; }
.mini-empty[b-oxb20dqyy3] { text-align: center; padding: 20px 10px; color: var(--text-dim); font-size: 12px; }

.badge[b-oxb20dqyy3] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-oxb20dqyy3]  { background: rgba(74,222,128,0.11);  color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-red[b-oxb20dqyy3]    { background: rgba(248,113,113,0.11); color: #f87171; border: 1px solid rgba(248,113,113,0.22); }
.b-yellow[b-oxb20dqyy3] { background: rgba(251,191,36,0.11);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.b-gray[b-oxb20dqyy3]   { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }
.b-blue[b-oxb20dqyy3]   { background: var(--accent-glow-soft); color: var(--text-main); border: 1px solid var(--glass-border); }

/* child selector */
.child-selector[b-oxb20dqyy3] { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.child-pill[b-oxb20dqyy3] { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 30px; border: 2px solid var(--glass-border); background: var(--glass-bg-soft); cursor: pointer; transition: .2s; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.child-pill:hover[b-oxb20dqyy3] { border-color: var(--accent-glow); }
.child-pill.active[b-oxb20dqyy3] { border-color: var(--accent-glow); background: var(--accent-glow-soft); color: var(--text-main); }
.cp-av[b-oxb20dqyy3] { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--accent-text-on-fill); flex-shrink: 0; }
.av-blue[b-oxb20dqyy3] { background: var(--accent-gradient); }

/* stat cards */
.stats-grid[b-oxb20dqyy3] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.stat-card[b-oxb20dqyy3] { padding: 14px 16px; border-radius: var(--radius-md); background: var(--glass-bg); border: 1px solid var(--glass-border); }
.stat-icon[b-oxb20dqyy3] { font-size: 20px; margin-bottom: 6px; }
.stat-val[b-oxb20dqyy3] { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--text-main); }
.stat-lbl[b-oxb20dqyy3] { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.s-green[b-oxb20dqyy3] { border-top: 2px solid rgba(74,222,128,0.4); }   .s-green .stat-val[b-oxb20dqyy3] { color: #4ade80; }
.s-blue[b-oxb20dqyy3] { border-top: 2px solid var(--accent-glow); }      .s-blue .stat-val[b-oxb20dqyy3] { color: var(--text-main); }
.s-purple[b-oxb20dqyy3] { border-top: 2px solid rgba(167,139,250,0.4); } .s-purple .stat-val[b-oxb20dqyy3] { color: #a78bfa; }
.s-amber[b-oxb20dqyy3] { border-top: 2px solid rgba(251,191,36,0.4); }   .s-amber .stat-val[b-oxb20dqyy3] { color: #fbbf24; }

.two-col[b-oxb20dqyy3] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

/* panel */
.panel[b-oxb20dqyy3] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 14px; }
.panel-head[b-oxb20dqyy3] { padding: 13px 16px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; }
.panel-title[b-oxb20dqyy3] { font-size: 12.5px; font-weight: 700; color: var(--text-main); }
.panel-sub[b-oxb20dqyy3] { font-size: 11px; color: var(--text-faint); }
.panel-body[b-oxb20dqyy3] { padding: 16px; }

/* heatmap */
.chart-grid[b-oxb20dqyy3] { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 8px; }
.chart-day-label[b-oxb20dqyy3] { font-size: 9px; color: var(--text-faint); text-align: center; text-transform: uppercase; padding-bottom: 4px; }
.chart-cell[b-oxb20dqyy3] { height: 32px; border-radius: 6px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 9px; cursor: pointer; transition: .2s; position: relative; }
.chart-cell:hover[b-oxb20dqyy3] { transform: scale(1.15); z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.cc-present[b-oxb20dqyy3] { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.3); color: #4ade80; }
.cc-present:hover[b-oxb20dqyy3] { background: rgba(74,222,128,0.22); border-color: rgba(74,222,128,0.5); }
.cc-absent[b-oxb20dqyy3] { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.25); color: #f87171; }
.cc-absent:hover[b-oxb20dqyy3] { background: rgba(248,113,113,0.2); border-color: rgba(248,113,113,0.4); }
.cc-late[b-oxb20dqyy3] { background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.25); color: #fbbf24; }
.cc-late:hover[b-oxb20dqyy3] { background: rgba(251,191,36,0.2); border-color: rgba(251,191,36,0.4); }
.cc-excused[b-oxb20dqyy3] { background: var(--accent-glow-soft); border-color: var(--glass-border); color: var(--text-main); }
.cc-none[b-oxb20dqyy3] { background: var(--glass-bg-soft); border-color: var(--glass-border); opacity: .5; }
.chart-legend[b-oxb20dqyy3] { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.leg-item[b-oxb20dqyy3] { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-dim); }
.leg-dot[b-oxb20dqyy3] { width: 10px; height: 10px; border-radius: 2px; }

/* tooltip */
.sess-tooltip[b-oxb20dqyy3] { position: fixed; z-index: 999; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 10px 14px; min-width: 200px; box-shadow: 0 8px 24px rgba(0,0,0,.4); pointer-events: none; display: none; }
[b-oxb20dqyy3] .st-title { font-size: 12.5px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
[b-oxb20dqyy3] .st-row { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* monthly bar chart */
.bar-chart[b-oxb20dqyy3] { display: flex; align-items: flex-end; gap: 6px; height: 100px; margin-bottom: 8px; }
.bar-col[b-oxb20dqyy3] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; justify-content: flex-end; }
.bar-fill[b-oxb20dqyy3] { width: 100%; border-radius: 4px 4px 0 0; transition: .3s; min-height: 4px; }
.bar-lbl[b-oxb20dqyy3] { font-size: 9px; color: var(--text-faint); }
.bar-pct[b-oxb20dqyy3] { font-size: 9px; font-weight: 700; color: var(--text-dim); }
.fill-green[b-oxb20dqyy3] { background: linear-gradient(90deg, #4ade80, #86efac); }
.fill-blue[b-oxb20dqyy3] { background: var(--accent-gradient); }
.fill-amber[b-oxb20dqyy3] { background: linear-gradient(90deg, #fbbf24, #fcd34d); }
.fill-purple[b-oxb20dqyy3] { background: linear-gradient(90deg, #a78bfa, #c4b5fd); }

/* class progress */
.class-progress-row[b-oxb20dqyy3] { padding: 10px 0; border-bottom: 1px solid var(--glass-border); }
.class-progress-row:last-child[b-oxb20dqyy3] { border-bottom: none; }
.cpr-head[b-oxb20dqyy3] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cpr-name[b-oxb20dqyy3] { font-size: 12.5px; font-weight: 700; color: var(--text-main); }
.cpr-sub[b-oxb20dqyy3] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.cpr-pct[b-oxb20dqyy3] { font-size: 12px; font-weight: 700; color: var(--text-main); }
.cpr-bar[b-oxb20dqyy3] { height: 5px; background: rgba(100,120,150,0.2); border-radius: 3px; overflow: hidden; }
.cpr-fill[b-oxb20dqyy3] { height: 100%; border-radius: 3px; transition: width .3s ease; }

/* sec label */
.sec-lbl[b-oxb20dqyy3] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .8px; display: flex; align-items: center; gap: 8px; margin: 20px 0 12px; }
.sec-lbl[b-oxb20dqyy3]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

/* history table */
.filter-bar[b-oxb20dqyy3] { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--glass-border); flex-wrap: wrap; }
.f-select[b-oxb20dqyy3] { padding: 6px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12px; outline: none; cursor: pointer; }
.f-select option[b-oxb20dqyy3] { background: #0c1a30; color: var(--text-main); }

.table-wrap[b-oxb20dqyy3] { overflow-x: auto; }
table[b-oxb20dqyy3] { width: 100%; border-collapse: collapse; }
th[b-oxb20dqyy3] { text-align: left; font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; padding: 8px 16px; border-bottom: 1px solid var(--glass-border); white-space: nowrap; }
td[b-oxb20dqyy3] { padding: 10px 16px; font-size: 12.5px; border-bottom: 1px solid var(--glass-border); vertical-align: middle; color: var(--text-main); }
tr:last-child td[b-oxb20dqyy3] { border-bottom: none; }
tr:hover td[b-oxb20dqyy3] { background: var(--accent-glow-soft); }
.td-date[b-oxb20dqyy3] { font-weight: 600; white-space: nowrap; }
.td-school[b-oxb20dqyy3] { font-size: 12px; font-weight: 600; }
.td-dim[b-oxb20dqyy3] { color: var(--text-dim); font-size: 11.5px; }

@media (max-width: 800px) {
    .stats-grid[b-oxb20dqyy3] { grid-template-columns: 1fr 1fr; }
    .two-col[b-oxb20dqyy3] { grid-template-columns: 1fr; }
}
/* /Components/School/AppearancePage.razor.rz.scp.css */
.placeholder-page[b-zsksdim6es] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-zsksdim6es]  { font-size: 48px; }
.ph-title[b-zsksdim6es] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-zsksdim6es]   { font-size: 14px; }
/* /Components/School/ChildrenList.razor.rz.scp.css */
/* ============================================================
   ChildrenList.razor.css — School Admin → Children (info/classes/parents)
   CSS Isolation; all colours from theme.css var(--…).
   Mirrors children-list.html; same structure as TeachersList.razor.css.
   ============================================================ */

.cl-page[b-7ud45enpwr] { color: var(--text-main); }

.page-header[b-7ud45enpwr] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.page-title[b-7ud45enpwr] { font-size: 18px; font-weight: 700; }
.page-sub[b-7ud45enpwr]   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ── buttons ── */
.btn[b-7ud45enpwr] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s; text-decoration: none;
}
.btn:disabled[b-7ud45enpwr] { opacity: .5; cursor: not-allowed; }
.btn-primary[b-7ud45enpwr] { background: var(--accent-gradient); color: var(--accent-text-on-fill); box-shadow: 0 0 16px var(--accent-glow-soft); }
.btn-primary:not(:disabled):hover[b-7ud45enpwr] { transform: translateY(-1px); }
.btn-ghost[b-7ud45enpwr] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-7ud45enpwr] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.btn-sm[b-7ud45enpwr] { padding: 6px 12px; font-size: 12px; }

/* ── badges ── */
.badge[b-7ud45enpwr] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-blue[b-7ud45enpwr]  { background: var(--accent-glow-soft); color: var(--accent-glow); border: 1px solid var(--accent-glow-soft); }
.b-green[b-7ud45enpwr] { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-gray[b-7ud45enpwr]  { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }

/* ── filter bar ── */
.filter-bar[b-7ud45enpwr] { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.f-search[b-7ud45enpwr], .f-select[b-7ud45enpwr] {
    padding: 7px 11px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
}
.f-search[b-7ud45enpwr] { min-width: 200px; }
.f-search[b-7ud45enpwr]::placeholder { color: var(--text-faint); }
.f-search:focus[b-7ud45enpwr], .f-select:focus[b-7ud45enpwr] { border-color: var(--accent-glow); }
.f-select option[b-7ud45enpwr] { background: #0c1a30; color: var(--text-main); }

.cl-alert[b-7ud45enpwr] { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); color: #f87171; font-size: 13px; }
.cl-loading[b-7ud45enpwr] { font-size: 13px; color: var(--text-dim); padding: 24px 0; text-align: center; }
.cl-empty[b-7ud45enpwr] { text-align: center; padding: 50px; color: var(--text-faint); }
.cl-empty .ei[b-7ud45enpwr] { font-size: 42px; margin-bottom: 8px; opacity: .3; }
.tl-empty-sm[b-7ud45enpwr] { font-size: 12px; color: var(--text-faint); padding: 4px 0; }

/* ── children grid ── */
.children-grid[b-7ud45enpwr] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.child-card[b-7ud45enpwr] {
    padding: 14px; border-radius: var(--radius-md);
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border); cursor: pointer; transition: .2s;
}
.child-card:hover[b-7ud45enpwr] { border-color: rgba(79,168,255,0.35); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.child-card.sel[b-7ud45enpwr] { border-color: var(--accent-glow); box-shadow: 0 0 18px var(--accent-glow-soft); }
.cc-top[b-7ud45enpwr] { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cc-av[b-7ud45enpwr] {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.cc-av img[b-7ud45enpwr] { width: 100%; height: 100%; object-fit: cover; }
.cc-name[b-7ud45enpwr] { font-size: 13.5px; font-weight: 700; }
.cc-meta[b-7ud45enpwr] { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.cc-meta .sep[b-7ud45enpwr] { margin: 0 4px; opacity: .45; }
.cc-bottom[b-7ud45enpwr] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; padding-top: 9px; border-top: 1px solid var(--glass-border); }
.cc-since[b-7ud45enpwr] { font-size: 10px; color: var(--text-faint); }

/* ── detail panel ── */
.overlay[b-7ud45enpwr] { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 199; display: none; }
.overlay.show[b-7ud45enpwr] { display: block; }
.detail-panel[b-7ud45enpwr] {
    position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 94vw;
    background: var(--glass-bg); backdrop-filter: blur(24px);
    border-left: 1px solid var(--glass-border); z-index: 200;
    transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column;
}
.detail-panel.open[b-7ud45enpwr] { transform: translateX(0); }
.dp-head[b-7ud45enpwr] { padding: 18px 20px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dp-av[b-7ud45enpwr] {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700;
}
.dp-av img[b-7ud45enpwr] { width: 100%; height: 100%; object-fit: cover; }
.dp-title[b-7ud45enpwr] { font-size: 15px; font-weight: 700; }
.dp-sub[b-7ud45enpwr] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.dp-close[b-7ud45enpwr] { margin-left: auto; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 16px; }
.dp-close:hover[b-7ud45enpwr] { background: var(--accent-glow-soft); color: var(--text-main); }

.dp-tabs[b-7ud45enpwr] { display: flex; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; padding: 0 20px; }
.dp-tab[b-7ud45enpwr] { padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--text-faint); cursor: pointer; border-bottom: 2px solid transparent; transition: .15s; white-space: nowrap; }
.dp-tab:hover[b-7ud45enpwr] { color: var(--text-dim); }
.dp-tab.active[b-7ud45enpwr] { color: var(--accent-glow); border-bottom-color: var(--accent-glow); }

.dp-body[b-7ud45enpwr] { flex: 1; overflow-y: auto; padding: 18px 20px; min-height: 0; }
.dp-body[b-7ud45enpwr]::-webkit-scrollbar { width: 5px; }
.dp-body[b-7ud45enpwr]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 5px; }

/* ── info tab ── */
.sec-lbl[b-7ud45enpwr] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .8px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; margin-top: 18px; }
.sec-lbl[b-7ud45enpwr]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }
.info-grid[b-7ud45enpwr] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-box[b-7ud45enpwr] { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); }
.ib-label[b-7ud45enpwr] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.ib-val[b-7ud45enpwr] { font-size: 13px; font-weight: 600; color: var(--text-main); }
.notes-box[b-7ud45enpwr] { padding: 11px 13px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.glasses-chip[b-7ud45enpwr] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm); background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2); font-size: 12px; color: #4ade80; }

/* ── classes tab ── */
.class-row[b-7ud45enpwr] { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); margin-bottom: 7px; }
.class-icon[b-7ud45enpwr] { font-size: 18px; flex-shrink: 0; }
.class-name[b-7ud45enpwr] { font-size: 13px; font-weight: 600; }
.class-meta[b-7ud45enpwr] { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }

/* ── parents tab ── */
.parent-row[b-7ud45enpwr] { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); margin-bottom: 7px; }
.par-av[b-7ud45enpwr] {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.par-av img[b-7ud45enpwr] { width: 100%; height: 100%; object-fit: cover; }
.par-name[b-7ud45enpwr] { font-size: 13px; font-weight: 600; }
.par-email[b-7ud45enpwr] { font-size: 10.5px; color: var(--text-faint); margin-top: 1px; }
.par-rel[b-7ud45enpwr] { font-size: 10.5px; color: var(--text-dim); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
/* /Components/School/ClassesList.razor.rz.scp.css */
/* ── CLASSES LIST — CSS Isolation (theme.css vars only) ── */

.cl-page[b-guyappe2d0] { color: var(--text-main); }

.page-header[b-guyappe2d0] {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;padding-left: 20px;padding-top: 10px;
}
.page-title[b-guyappe2d0] { font-size: 17px; font-weight: 700; color: var(--text-main); }
.page-sub[b-guyappe2d0]   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.cl-alert[b-guyappe2d0] {
    padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px;
    background: rgba(248,113,113,0.09); border: 1px solid rgba(248,113,113,0.3);
    color: #f87171; font-size: 12px;
}
.cl-loading[b-guyappe2d0] { font-size: 13px; color: var(--text-dim); padding: 24px 0; text-align: center; }

.cl-empty[b-guyappe2d0] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 60px 20px; text-align: center;
}
.cl-empty-icon[b-guyappe2d0] { font-size: 48px; opacity: .3; }
.cl-empty-title[b-guyappe2d0] { font-size: 18px; font-weight: 600; color: var(--text-dim); }
.cl-empty-sub[b-guyappe2d0] { font-size: 13px; color: var(--text-faint); }

/* buttons */
.btn[b-guyappe2d0] {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
    border-radius: var(--radius-sm); font-family: inherit; font-size: 13px;
    font-weight: 600; cursor: pointer; border: none; transition: .15s;
}
.btn-primary[b-guyappe2d0] {
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    box-shadow: 0 0 16px var(--accent-glow-soft);
}
.btn-primary:hover[b-guyappe2d0] { transform: translateY(-1px); }
.btn-ghost[b-guyappe2d0] {
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim);
}
.btn-ghost:hover[b-guyappe2d0] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.btn-danger[b-guyappe2d0] {
    background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25); color: #f87171;
}
.btn-danger:hover[b-guyappe2d0] { background: rgba(248,113,113,0.2); }
.btn-sm[b-guyappe2d0] { padding: 5px 12px; font-size: 12px; }

/* badges */
.badge[b-guyappe2d0] { display: inline-block; padding: 2px 7px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-guyappe2d0]  { background: rgba(74,222,128,0.11);  color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-blue[b-guyappe2d0]   { background: rgba(79,168,255,0.11);  color: var(--accent-glow); border: 1px solid rgba(79,168,255,0.22); }
.b-purple[b-guyappe2d0] { background: rgba(167,139,250,0.11); color: #a78bfa; border: 1px solid rgba(167,139,250,0.22); }
.b-red[b-guyappe2d0]    { background: rgba(248,113,113,0.11); color: #f87171; border: 1px solid rgba(248,113,113,0.22); }
.b-amber[b-guyappe2d0]  { background: rgba(251,191,36,0.11);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.b-gray[b-guyappe2d0]   { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }

/* card grid */
.classes-grid[b-guyappe2d0] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;padding-left: 20px;
}
.class-card[b-guyappe2d0] {
    padding: 16px; border-radius: var(--radius-md);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    cursor: pointer; transition: .2s; position: relative;
    max-width: 250px;
}
.class-card:hover[b-guyappe2d0] {
    border-color: rgba(79,168,255,0.35); background: var(--accent-glow-soft);
    transform: translateY(-2px); box-shadow: 0 0 20px var(--accent-glow-soft);
}
.cc-top[b-guyappe2d0] { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.cc-top-text[b-guyappe2d0] { flex: 1; }
.cc-icon[b-guyappe2d0] {
    width: 42px; height: 42px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(79,168,255,0.18), rgba(125,211,252,0.08));
    border: 1px solid rgba(79,168,255,0.22);
    display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.cc-name[b-guyappe2d0] { font-size: 14px; font-weight: 700; margin-bottom: 3px; color: var(--text-main); }
.cc-type[b-guyappe2d0] { font-size: 11px; color: var(--text-dim); }
.cc-badges[b-guyappe2d0] { display: flex; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; }
.cc-info[b-guyappe2d0] { display: flex; flex-direction: column; gap: 5px; }
.cc-info-row[b-guyappe2d0] { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.cc-info-row span[b-guyappe2d0] { font-size: 13px; }
.cc-dates[b-guyappe2d0] {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--glass-border);
    display: flex; justify-content: space-between; align-items: center; font-size: 11px;
}
.cc-dates .label[b-guyappe2d0] { color: var(--text-faint); }
.cc-dates .val[b-guyappe2d0] { color: var(--text-main); font-weight: 600; }
.cc-dates .val-green[b-guyappe2d0] { color: #4ade80; text-align: center;}
.cc-arrow[b-guyappe2d0] { color: var(--text-faint); }

/* overlay + detail panel */
.cl-overlay[b-guyappe2d0] {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 199; display: none;
}
.cl-overlay.show[b-guyappe2d0] { display: block; }

.class-detail[b-guyappe2d0] {
    position: fixed; top: 50px; right: 0; bottom: 0;
    width: 420px; max-width: 92vw;
    background: rgba(10,22,48,0.97);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid var(--glass-border);
    z-index: 200; transform: translateX(100%); transition: transform .3s ease;
    display: flex; flex-direction: column; overflow: hidden;
}
.class-detail.open[b-guyappe2d0] { transform: translateX(0); }

.cd-head[b-guyappe2d0] {
    padding: 16px 20px; border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.cd-icon[b-guyappe2d0] {
    width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0;
    background: var(--accent-glow-soft); border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.cd-head-text[b-guyappe2d0] { flex: 1; min-width: 0; }
.cd-head-title[b-guyappe2d0] { font-size: 15px; font-weight: 700; color: var(--text-main); }
.cd-head-sub[b-guyappe2d0] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.cd-close[b-guyappe2d0] {
    margin-left: auto; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim);
    cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.cd-close:hover[b-guyappe2d0] { background: var(--accent-glow-soft); color: var(--text-main); }

.cd-body[b-guyappe2d0] { flex: 1; overflow-y: auto; padding: 18px 20px; }
.cd-body[b-guyappe2d0]::-webkit-scrollbar { width: 4px; }
.cd-body[b-guyappe2d0]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; }

.detail-hero[b-guyappe2d0] {
    display: flex; align-items: center; gap: 14px; padding: 14px;
    border-radius: var(--radius-md); background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); margin-bottom: 16px;
}
.detail-icon[b-guyappe2d0] {
    width: 50px; height: 50px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(79,168,255,0.2), rgba(125,211,252,0.1));
    border: 1px solid rgba(79,168,255,0.25);
    display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;
}
.detail-name[b-guyappe2d0] { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: var(--text-main); }
.detail-type[b-guyappe2d0] { font-size: 12px; color: var(--text-dim); }
.detail-hero-badges[b-guyappe2d0] { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }

.info-grid[b-guyappe2d0] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.info-box[b-guyappe2d0] {
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
}
.ib-label[b-guyappe2d0] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.ib-val[b-guyappe2d0] { font-size: 13px; font-weight: 600; color: var(--text-main); }

.period-box[b-guyappe2d0] {
    padding: 12px 14px; border-radius: var(--radius-md);
    background: rgba(79,168,255,0.06); border: 1px solid rgba(79,168,255,0.2); margin-bottom: 14px;
}
.pb-label[b-guyappe2d0] { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.period-dates[b-guyappe2d0] { display: flex; align-items: center; gap: 10px; }
.period-date[b-guyappe2d0] { text-align: center; }
.pd-label[b-guyappe2d0] { font-size: 10px; color: var(--text-faint); }
.pd-val[b-guyappe2d0] { font-size: 14px; font-weight: 700; color: var(--accent-glow); }
.period-arrow[b-guyappe2d0] { font-size: 18px; color: var(--text-faint); }
.period-sessions[b-guyappe2d0] {
    margin-top: 10px; font-size: 12px; color: var(--text-dim);
    padding-top: 8px; border-top: 1px solid var(--glass-border);
}
.period-sessions strong[b-guyappe2d0] { color: #4ade80; }

.section-lbl[b-guyappe2d0] {
    font-size: 11px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .8px;
    display: flex; align-items: center; gap: 8px; margin: 18px 0 12px;
}
.section-lbl[b-guyappe2d0]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

.schedule-list[b-guyappe2d0] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sl-row[b-guyappe2d0] {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
}
.sl-day[b-guyappe2d0] { font-size: 12px; font-weight: 600; color: var(--accent-glow); min-width: 90px; }
.sl-time[b-guyappe2d0] { font-size: 12px; color: var(--text-dim); }
.sl-empty[b-guyappe2d0] { font-size: 12px; color: var(--text-faint); padding: 6px 0; }

.sessions-preview[b-guyappe2d0] { display: flex; flex-direction: column; gap: 6px; }
.sp-row[b-guyappe2d0] {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    border-radius: var(--radius-sm); background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); font-size: 12px;
}
.sp-date[b-guyappe2d0] { color: var(--text-main); font-weight: 600; min-width: 120px; }
.sp-time[b-guyappe2d0] { color: var(--text-dim); }
.sp-status[b-guyappe2d0] { margin-left: auto; }
.sp-cancelled[b-guyappe2d0] { border-color: rgba(248,113,113,0.2); opacity: .6; }
.sp-cancelled .sp-date[b-guyappe2d0] { text-decoration: line-through; color: var(--text-faint); }

.cd-actions[b-guyappe2d0] {
    margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--glass-border);
    display: flex; gap: 8px;
}
.cd-del[b-guyappe2d0] { margin-left: auto; }

/* ── extra buttons used in the panel ── */
.btn-xs[b-guyappe2d0]   { padding: 3px 8px; font-size: 11px; }
.btn-warn[b-guyappe2d0] { background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.25); color: #fbbf24; }
.btn-warn:hover[b-guyappe2d0] { background: rgba(251,191,36,0.2); }
.btn:disabled[b-guyappe2d0] { opacity: .45; cursor: not-allowed; transform: none; }

/* ── tabs ── */
.cd-tabs[b-guyappe2d0] {
    display: flex; gap: 0; padding: 0 18px; flex-shrink: 0;
    border-bottom: 1px solid var(--glass-border);
}
.cd-tab[b-guyappe2d0] {
    padding: 10px 14px; font-size: 12px; font-weight: 600;
    color: var(--text-faint); cursor: pointer;
    border-bottom: 2px solid transparent; transition: .15s; white-space: nowrap;
}
.cd-tab:hover[b-guyappe2d0] { color: var(--text-dim); }
.cd-tab.active[b-guyappe2d0] { color: var(--accent-glow); border-bottom-color: var(--accent-glow); }

/* ── sessions tab: keep badge + button to the right ── */
.sp-main[b-guyappe2d0] { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.sp-note[b-guyappe2d0] { font-size: 11px; color: var(--text-faint); font-style: italic; }

/* ── capacity bar (children tab) ── */
.cap-section[b-guyappe2d0] {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: var(--radius-md);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    margin-bottom: 14px;
}
.cap-numbers[b-guyappe2d0] { font-size: 20px; font-weight: 700; white-space: nowrap; color: var(--text-main); }
.cap-numbers span[b-guyappe2d0] { font-size: 13px; font-weight: 400; color: var(--text-dim); }
.cap-bar-big[b-guyappe2d0] { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; }
.cap-fill-big[b-guyappe2d0] { height: 100%; border-radius: 4px; transition: .4s; }
.cap-green[b-guyappe2d0]  { background: #4ade80; }
.cap-yellow[b-guyappe2d0] { background: #fbbf24; }
.cap-red[b-guyappe2d0]    { background: #f87171; }
.cap-label[b-guyappe2d0] { font-size: 11px; font-weight: 600; white-space: nowrap; }
.cap-label.cap-green[b-guyappe2d0]  { color: #4ade80; background: none; }
.cap-label.cap-yellow[b-guyappe2d0] { color: #fbbf24; background: none; }
.cap-label.cap-red[b-guyappe2d0]    { color: #f87171; background: none; }

/* ── add child ── */
.add-child-btn[b-guyappe2d0] { width: 100%; justify-content: center; margin-bottom: 14px; }
.add-section[b-guyappe2d0] {
    background: var(--accent-glow-soft); border: 1px solid rgba(79,168,255,0.18);
    border-radius: var(--radius-md); padding: 14px; margin-bottom: 14px;
}
.add-search-wrap[b-guyappe2d0] { display: flex; gap: 8px; margin-bottom: 8px; }
.search-input[b-guyappe2d0] {
    flex: 1; padding: 8px 12px; background: var(--glass-bg);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; transition: .18s;
}
.search-input:focus[b-guyappe2d0] { border-color: var(--accent-glow); box-shadow: 0 0 0 3px var(--accent-glow-soft); }
.add-hint[b-guyappe2d0] { font-size: 11px; color: var(--text-faint); margin-bottom: 8px; }
.add-results[b-guyappe2d0] { display: flex; flex-direction: column; gap: 5px; max-height: 200px; overflow-y: auto; }
.add-empty[b-guyappe2d0] { font-size: 12px; color: var(--text-faint); text-align: center; padding: 8px 0; }
.add-result-row[b-guyappe2d0] {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: var(--radius-sm); background: var(--glass-bg);
    border: 1px solid var(--glass-border); transition: .15s;
}
.add-result-row:hover[b-guyappe2d0] { border-color: var(--accent-glow); background: var(--accent-glow-soft); }
.add-result-av[b-guyappe2d0] {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #a78bfa, #c4b5fd);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #1a0030;
}
.add-result-text[b-guyappe2d0] { flex: 1; min-width: 0; }
.add-result-name[b-guyappe2d0] { font-size: 13px; font-weight: 600; color: var(--text-main); }
.add-result-meta[b-guyappe2d0] { font-size: 11px; color: var(--text-dim); }
.add-result-btn[b-guyappe2d0] {
    padding: 3px 10px; border-radius: 20px; flex-shrink: 0;
    border: 1px solid rgba(79,168,255,0.3); background: rgba(79,168,255,0.1);
    color: var(--accent-glow); font-size: 11px; font-weight: 600; cursor: pointer; transition: .15s;
}
.add-result-btn:hover[b-guyappe2d0] { background: rgba(79,168,255,0.22); }
.hl[b-guyappe2d0] { background: rgba(79,168,255,0.25); color: var(--accent-glow); border-radius: 2px; }

/* ── child rows ── */
.child-list[b-guyappe2d0] { display: flex; flex-direction: column; gap: 6px; }
.child-row[b-guyappe2d0] {
    border-radius: var(--radius-sm); border: 1px solid var(--glass-border);
    background: var(--glass-bg-soft); overflow: hidden; transition: .15s;
}
.child-row:hover[b-guyappe2d0] { border-color: rgba(79,168,255,0.25); }
.child-row.withdrawn[b-guyappe2d0] { opacity: .55; border-style: dashed; }
.cr-main[b-guyappe2d0] { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.cr-av[b-guyappe2d0] {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--accent-text-on-fill);
}
.cr-text[b-guyappe2d0] { flex: 1; min-width: 0; }
.cr-name[b-guyappe2d0] { font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 2px; }
.cr-meta[b-guyappe2d0] { font-size: 11px; color: var(--text-dim); }
.cr-note[b-guyappe2d0] { color: var(--text-faint); font-style: italic; }
.cr-actions[b-guyappe2d0] { display: flex; gap: 5px; flex-shrink: 0; }

/* inline edit form inside a child row */
.cr-edit[b-guyappe2d0] {
    padding: 10px 12px; background: var(--accent-glow-soft);
    border-top: 1px solid rgba(79,168,255,0.15);
}
.edit-row[b-guyappe2d0] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.edit-field[b-guyappe2d0] { display: flex; flex-direction: column; gap: 4px; }
.edit-field label[b-guyappe2d0] {
    font-size: 10px; font-weight: 600; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: .4px;
}
.edit-field select[b-guyappe2d0], .edit-field textarea[b-guyappe2d0] {
    padding: 6px 10px; background: var(--glass-bg);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
}
.edit-field select option[b-guyappe2d0] { background: #0c1a30; }
.edit-field textarea[b-guyappe2d0] { resize: none; height: 52px; }
.edit-actions[b-guyappe2d0] { display: flex; gap: 6px; }

/* ── confirm box (delete class / remove child) ── */
.confirm-box[b-guyappe2d0] {
    margin: 8px 0 0; padding: 12px 14px; border-radius: var(--radius-sm);
    background: rgba(248,113,113,0.07); border: 1px solid rgba(248,113,113,0.25);
}
.confirm-msg[b-guyappe2d0] { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.55; }
.confirm-msg strong[b-guyappe2d0] { color: var(--text-main); }
.confirm-actions[b-guyappe2d0] { display: flex; gap: 6px; }

/* ── empty state ── */
.empty-state[b-guyappe2d0] { text-align: center; padding: 24px 0; color: var(--text-faint); }
.empty-state .ei[b-guyappe2d0] { font-size: 32px; margin-bottom: 6px; }
.empty-state p[b-guyappe2d0] { font-size: 13px; }

/* ── selected card ── */
.class-card.selected[b-guyappe2d0] { border-color: rgba(79,168,255,0.5); background: rgba(79,168,255,0.06); }

/* ── child schedule-conflict modal (sits above the detail panel) ── */
.conflict-overlay[b-guyappe2d0] {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 300;
}
.conflict-modal[b-guyappe2d0] {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 301; width: 440px; max-width: 92vw;
    background: rgba(10,22,48,0.98);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(251,146,60,0.4); border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    padding: 20px 22px;
}
.cm-title[b-guyappe2d0] { font-size: 15px; font-weight: 700; color: #fb923c; margin-bottom: 12px; }
.cm-body[b-guyappe2d0] { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.cm-body p[b-guyappe2d0] { margin-bottom: 10px; }
.cm-body strong[b-guyappe2d0] { color: var(--text-main); }
.cm-financial[b-guyappe2d0] {
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.3);
    color: #fbbf24; font-weight: 600;
}
.cm-note[b-guyappe2d0] { color: var(--text-faint); font-size: 12px; }
.cm-actions[b-guyappe2d0] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ── toast ── */
.cl-toast[b-guyappe2d0] {
    position: fixed; bottom: 24px; right: 24px; z-index: 999;
    padding: 12px 18px; border-radius: var(--radius-md);
    background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.35);
    color: #4ade80; font-size: 13px; font-weight: 600;
    transform: translateY(80px); opacity: 0; transition: .3s; pointer-events: none;
}
.cl-toast.show[b-guyappe2d0] { transform: translateY(0); opacity: 1; }

/* ── billing (card + Info tab) ── */
@keyframes soft-pulse-b-guyappe2d0 {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}
.no-fee-pulse[b-guyappe2d0] { animation: soft-pulse-b-guyappe2d0 2.5s ease-in-out infinite; }

.billing-row[b-guyappe2d0] {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--glass-border);
}
.billing-type[b-guyappe2d0] {
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 20px;
    letter-spacing: .4px;
}
.bt-fixed[b-guyappe2d0] {
    background: rgba(79,168,255,0.12);
    color: var(--accent-glow);
    border: 1px solid rgba(79,168,255,0.25);
}
.bt-per-session[b-guyappe2d0] {
    background: rgba(167,139,250,0.12);
    color: #a78bfa;
    border: 1px solid rgba(167,139,250,0.25);
}
.billing-amount[b-guyappe2d0] { font-size: 12px; font-weight: 700; margin-left: auto; }
.billing-amount.has-fee[b-guyappe2d0]     { color: #4ade80; }
.billing-amount.no-fee[b-guyappe2d0]      { color: #f87171; }
.billing-amount.per-session[b-guyappe2d0] { color: #a78bfa; }

.detail-billing[b-guyappe2d0] {
    padding: 12px 14px; border-radius: var(--radius-lg);
    margin-bottom: 14px;
}
.db-fixed-ok[b-guyappe2d0] {
    background: rgba(79,168,255,0.06);
    border: 1px solid rgba(79,168,255,0.2);
}
.db-fixed-zero[b-guyappe2d0] {
    background: rgba(248,113,113,0.06);
    border: 1px solid rgba(248,113,113,0.25);
}
.db-per-session[b-guyappe2d0] {
    background: rgba(167,139,250,0.06);
    border: 1px solid rgba(167,139,250,0.2);
}
.db-label[b-guyappe2d0] {
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .7px;
    margin-bottom: 6px;
}
.db-fixed-ok .db-label[b-guyappe2d0]    { color: var(--accent-glow); }
.db-fixed-zero .db-label[b-guyappe2d0]  { color: #f87171; }
.db-per-session .db-label[b-guyappe2d0] { color: #a78bfa; }
.db-amount[b-guyappe2d0] {
    font-size: 22px; font-weight: 700; margin-bottom: 3px;
}
.db-fixed-ok .db-amount[b-guyappe2d0]    { color: #4ade80; }
.db-fixed-zero .db-amount[b-guyappe2d0]  { color: #f87171; }
.db-per-session .db-amount[b-guyappe2d0] { color: #a78bfa; }
.db-sub[b-guyappe2d0] { font-size: 12px; color: var(--text-dim); }
.db-warning[b-guyappe2d0] {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: rgba(248,113,113,0.09);
    border: 1px solid rgba(248,113,113,0.3);
    font-size: 12px; color: #f87171;
}

/* fixed-fee inline form */
.fee-form[b-guyappe2d0] { margin-top: 10px; }
.fee-input-row[b-guyappe2d0] {
    display: flex; align-items: center; gap: 6px;
}
.fee-currency[b-guyappe2d0] { font-size: 18px; font-weight: 700; color: #4ade80; }
.fee-cad[b-guyappe2d0] { font-size: 12px; font-weight: 600; color: var(--text-faint); }
.fee-input[b-guyappe2d0] {
    flex: 1; max-width: 160px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    color: var(--text-main); font-size: 14px; font-weight: 600;
}
.fee-input:focus[b-guyappe2d0] {
    outline: none; border-color: var(--accent-glow);
    box-shadow: 0 0 0 2px var(--accent-glow-soft);
}
.fee-form-hint[b-guyappe2d0] { font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.fee-form-actions[b-guyappe2d0] { display: flex; gap: 8px; margin-top: 10px; }
/* /Components/School/ClassWizard.razor.rz.scp.css */
/* ── CLASS WIZARD — CSS Isolation (theme.css vars only) ── */

.cw-page[b-4g95kz3yx4] { color: var(--text-main); }

.page-header[b-4g95kz3yx4] {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;
}
.page-title[b-4g95kz3yx4] { font-size: 17px; font-weight: 700; color: var(--text-main); }
.page-sub[b-4g95kz3yx4]   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.wizard-wrap[b-4g95kz3yx4] {
    max-width: 680px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg, 16px);
    padding: 22px 24px;
    box-shadow: 0 0 30px rgba(0,0,0,0.35);
}

/* steps */
.wizard-steps[b-4g95kz3yx4] { display: flex; align-items: center; margin-bottom: 22px; }
.step-wrap[b-4g95kz3yx4] { display: flex; align-items: center; flex: 1; }
.step-wrap:last-child[b-4g95kz3yx4] { flex: 0; }
.step-btn[b-4g95kz3yx4] {
    display: flex; align-items: center; gap: 8px; padding: 8px 0;
    border: none; background: none; font-family: inherit;
    font-size: 12px; font-weight: 500; color: var(--text-faint);
}
.step-circle[b-4g95kz3yx4] {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    color: var(--text-faint); transition: .25s;
}
.step-btn.active .step-circle[b-4g95kz3yx4] {
    background: var(--accent-gradient); border-color: transparent;
    color: var(--accent-text-on-fill); box-shadow: 0 0 14px var(--accent-glow-soft);
}
.step-btn.done .step-circle[b-4g95kz3yx4] {
    background: rgba(74,222,128,0.18); border-color: rgba(74,222,128,0.4); color: #4ade80;
}
.step-btn.active[b-4g95kz3yx4] { color: var(--accent-glow); }
.step-btn.done[b-4g95kz3yx4]   { color: #4ade80; }
.step-line[b-4g95kz3yx4] { flex: 1; height: 1px; background: var(--glass-border); margin: 0 6px 12px; }
.step-line.done[b-4g95kz3yx4] { background: rgba(74,222,128,0.3); }

/* alert */
.cw-alert[b-4g95kz3yx4] {
    padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px;
    background: rgba(248,113,113,0.09); border: 1px solid rgba(248,113,113,0.3);
    color: #f87171; font-size: 12px;
}

.wiz-title[b-4g95kz3yx4] { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: var(--text-main); }
.wiz-sub[b-4g95kz3yx4]   { font-size: 12px; color: var(--text-dim); margin-bottom: 18px; }

/* fields */
.cw-fields[b-4g95kz3yx4] { display: flex; flex-direction: column; gap: 14px; }
.grid-2[b-4g95kz3yx4] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field[b-4g95kz3yx4] { display: flex; flex-direction: column; gap: 5px; }
.field label[b-4g95kz3yx4] {
    font-size: 11px; font-weight: 600; color: var(--text-dim);
    letter-spacing: .4px; text-transform: uppercase;
}
.field input[b-4g95kz3yx4], .field select[b-4g95kz3yx4] {
    padding: 8px 11px; background: rgba(14,31,58,0.5);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 13px;
    outline: none; transition: .18s; width: 100%;
}
.field input:focus[b-4g95kz3yx4], .field select:focus[b-4g95kz3yx4] {
    border-color: var(--accent-glow); box-shadow: 0 0 0 3px var(--accent-glow-soft);
}
.field select option[b-4g95kz3yx4] { background: #0c1a30; }

/* section label */
.section-lbl[b-4g95kz3yx4] {
    font-size: 11px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .8px;
    display: flex; align-items: center; gap: 8px; margin: 18px 0 12px;
}
.section-lbl[b-4g95kz3yx4]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

.period-row[b-4g95kz3yx4] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.cw-holidays[b-4g95kz3yx4] { margin-bottom: 14px; }
.hint[b-4g95kz3yx4] { font-size: 11px; color: var(--text-faint); margin-top: 4px; }

/* schedule builder */
.schedule-builder[b-4g95kz3yx4] { display: flex; flex-direction: column; gap: 8px; }
.day-row[b-4g95kz3yx4] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: var(--radius-sm);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
}
.day-check[b-4g95kz3yx4] { display: flex; align-items: center; gap: 8px; min-width: 110px; font-size: 13px; font-weight: 500; }
.day-check input[b-4g95kz3yx4] { accent-color: var(--accent-glow); width: 15px; height: 15px; }
.day-times[b-4g95kz3yx4] { display: flex; align-items: center; gap: 8px; flex: 1; }
.day-times input[b-4g95kz3yx4] {
    padding: 6px 10px; background: rgba(14,31,58,0.5);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; width: 110px;
}
.day-times input:focus[b-4g95kz3yx4] { border-color: var(--accent-glow); }
.day-times input:disabled[b-4g95kz3yx4] { opacity: .3; }
.time-sep[b-4g95kz3yx4] { font-size: 12px; color: var(--text-faint); }

/* generated sessions preview */
.sessions-preview-gen[b-4g95kz3yx4] {
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); padding: 14px; margin-top: 12px;
}
.spg-title[b-4g95kz3yx4] {
    font-size: 11px; font-weight: 600; color: var(--text-dim);
    margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;
}
.spg-select-all[b-4g95kz3yx4] { font-size: 11px; color: var(--accent-glow); cursor: pointer; font-weight: 600; }
.spg-list[b-4g95kz3yx4] { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.spg-list[b-4g95kz3yx4]::-webkit-scrollbar { width: 3px; }
.spg-list[b-4g95kz3yx4]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; }
.spg-item[b-4g95kz3yx4] {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: var(--radius-sm);
    background: rgba(14,31,58,0.4); border: 1px solid var(--glass-border);
    font-size: 12px; cursor: pointer; transition: .15s; user-select: none;
}
.spg-item:hover[b-4g95kz3yx4] { background: var(--accent-glow-soft); }
.spg-item.cancelled[b-4g95kz3yx4] { background: rgba(248,113,113,0.06); border-color: rgba(248,113,113,0.2); }
.spg-item.cancelled .spg-label[b-4g95kz3yx4],
.spg-item.cancelled .spg-time[b-4g95kz3yx4] { text-decoration: line-through; color: var(--text-faint); }
.spg-cb[b-4g95kz3yx4] { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--accent-glow); cursor: pointer; }
.spg-label[b-4g95kz3yx4] { font-weight: 600; color: var(--text-main); min-width: 150px; }
.spg-time[b-4g95kz3yx4] { color: var(--text-dim); flex: 1; }
.spg-badge-holiday[b-4g95kz3yx4] {
    font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 20px;
    background: rgba(251,191,36,0.12); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); white-space: nowrap;
}
.spg-badge-cancelled[b-4g95kz3yx4] {
    font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 20px;
    background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.25); white-space: nowrap;
}
.spg-count[b-4g95kz3yx4] {
    font-size: 12px; color: #4ade80; margin-top: 10px; font-weight: 600;
    padding-top: 8px; border-top: 1px solid var(--glass-border);
}

/* room/teacher schedule conflicts — orange, distinct from holiday(yellow)/cancelled(red) */
.spg-item.conflict[b-4g95kz3yx4] {
    background: rgba(251,146,60,0.07); border-color: rgba(251,146,60,0.35);
}
.spg-badge-conflict[b-4g95kz3yx4] {
    font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 20px;
    background: rgba(251,146,60,0.14); color: #fb923c;
    border: 1px solid rgba(251,146,60,0.35); white-space: nowrap;
}
.spg-conflict-banner[b-4g95kz3yx4] {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 0 4px; padding: 9px 12px; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 600; color: #fb923c;
    background: rgba(251,146,60,0.08); border: 1px solid rgba(251,146,60,0.3);
}
.cw-cancel-txt[b-4g95kz3yx4] { color: var(--color-danger, #f87171); }

/* confirm */
.confirm-class-hero[b-4g95kz3yx4] {
    display: flex; align-items: center; gap: 14px; padding: 14px;
    border-radius: var(--radius-md); background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); margin-bottom: 14px;
}
.cch-icon[b-4g95kz3yx4] {
    width: 46px; height: 46px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(79,168,255,0.2), rgba(125,211,252,0.1));
    border: 1px solid rgba(79,168,255,0.22);
    display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
}
.cch-name[b-4g95kz3yx4] { font-size: 15px; font-weight: 700; margin-bottom: 3px; color: var(--text-main); }
.cch-meta[b-4g95kz3yx4] { font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.cch-badge[b-4g95kz3yx4] {
    display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 20px;
    font-size: 10px; font-weight: 600; background: rgba(79,168,255,0.12);
    color: var(--accent-glow); border: 1px solid rgba(79,168,255,0.25);
}

.period-box[b-4g95kz3yx4] {
    padding: 12px 14px; border-radius: var(--radius-md);
    background: rgba(79,168,255,0.06); border: 1px solid rgba(79,168,255,0.2); margin-bottom: 14px;
}
.period-dates[b-4g95kz3yx4] { display: flex; align-items: center; gap: 10px; }
.period-date[b-4g95kz3yx4] { text-align: center; }
.pd-label[b-4g95kz3yx4] { font-size: 10px; color: var(--text-faint); }
.pd-val[b-4g95kz3yx4] { font-size: 14px; font-weight: 700; color: var(--accent-glow); }
.period-arrow[b-4g95kz3yx4] { font-size: 18px; color: var(--text-faint); }
.period-sessions[b-4g95kz3yx4] {
    margin-top: 10px; font-size: 12px; color: var(--text-dim);
    padding-top: 8px; border-top: 1px solid var(--glass-border);
}
.period-sessions strong[b-4g95kz3yx4] { color: #4ade80; }

.schedule-confirm[b-4g95kz3yx4] { display: flex; flex-direction: column; gap: 6px; }
.sc-row[b-4g95kz3yx4] {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px;
    border-radius: var(--radius-sm); background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); font-size: 13px;
}
.sc-day[b-4g95kz3yx4] { font-weight: 600; color: var(--accent-glow); min-width: 90px; }
.sc-time[b-4g95kz3yx4] { color: var(--text-dim); }
.sc-empty[b-4g95kz3yx4] { color: var(--text-faint); font-size: 12px; }

/* footer + buttons */
.wiz-foot[b-4g95kz3yx4] {
    display: flex; justify-content: space-between; margin-top: 22px;
    padding-top: 16px; border-top: 1px solid var(--glass-border);
}
.btn[b-4g95kz3yx4] {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
    border-radius: var(--radius-sm); font-family: inherit; font-size: 13px;
    font-weight: 600; cursor: pointer; border: none; transition: .15s;
}
.btn-primary[b-4g95kz3yx4] {
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    box-shadow: 0 0 16px var(--accent-glow-soft);
}
.btn-primary:hover[b-4g95kz3yx4] { transform: translateY(-1px); }
.btn-primary:disabled[b-4g95kz3yx4] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-ghost[b-4g95kz3yx4] {
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim);
}
.btn-ghost:hover[b-4g95kz3yx4] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.btn-save[b-4g95kz3yx4] {
    background: linear-gradient(135deg, #4ade80, #86efac); color: #001428;
}
.btn-save:hover[b-4g95kz3yx4] { transform: translateY(-1px); }
.btn-save:disabled[b-4g95kz3yx4] { opacity: .5; cursor: not-allowed; transform: none; }

/* done */
.cw-done[b-4g95kz3yx4] { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0; }
.done-icon[b-4g95kz3yx4] {
    width: 70px; height: 70px; border-radius: 50%;
    background: rgba(74,222,128,0.12); border: 1.5px solid #4ade80; color: #4ade80;
    font-size: 30px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 24px rgba(74,222,128,0.25);
}
.done-actions[b-4g95kz3yx4] { display: flex; gap: 12px; margin-top: 8px; }

/* ── billing radio pills (Step 1) ── */
.radio-row[b-4g95kz3yx4] { display: flex; gap: 10px; }
.radio-pill[b-4g95kz3yx4] {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    cursor: pointer; transition: .15s;
}
.radio-pill:hover[b-4g95kz3yx4] { border-color: var(--accent-glow); }
.radio-pill.on[b-4g95kz3yx4] {
    border-color: var(--accent-glow);
    background: var(--accent-glow-soft);
}
.radio-pill input[b-4g95kz3yx4] { position: absolute; opacity: 0; pointer-events: none; }
.radio-pill span[b-4g95kz3yx4]  { font-size: 13px; font-weight: 600; color: var(--text-main); }
.radio-pill small[b-4g95kz3yx4] { font-size: 11px; color: var(--text-dim); }

/* ── generated sessions: head + tools (Step 2) ── */
.spg-head[b-4g95kz3yx4] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.spg-tools[b-4g95kz3yx4] { display: flex; align-items: center; gap: 10px; }
.btn-xs[b-4g95kz3yx4] { padding: 3px 9px; font-size: 11px; }
.spg-date[b-4g95kz3yx4] { font-weight: 600; color: var(--text-main); min-width: 120px; }
.spg-item.cancelled .spg-date[b-4g95kz3yx4] { text-decoration: line-through; color: var(--text-faint); }

/* ── confirm card (Step 3) ── */
.confirm-card[b-4g95kz3yx4] {
    padding: 14px; border-radius: var(--radius-md);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    margin-bottom: 14px;
}
.cc-top[b-4g95kz3yx4] { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.cc-icon[b-4g95kz3yx4] {
    width: 46px; height: 46px; border-radius: var(--radius-sm);
    background: var(--accent-glow-soft); border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
}
.cc-top-text[b-4g95kz3yx4] { flex: 1; min-width: 0; }
.cc-name[b-4g95kz3yx4] { font-size: 15px; font-weight: 700; margin-bottom: 3px; color: var(--text-main); }
.cc-type[b-4g95kz3yx4] { font-size: 12px; color: var(--text-dim); }
.cc-info[b-4g95kz3yx4] { display: flex; flex-direction: column; gap: 5px; }
.cc-info-row[b-4g95kz3yx4] { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-dim); }

/* confirm weekly schedule list */
.schedule-list[b-4g95kz3yx4] { display: flex; flex-direction: column; gap: 6px; }
.sl-row[b-4g95kz3yx4] {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px;
    border-radius: var(--radius-sm); background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); font-size: 13px;
}
.sl-day[b-4g95kz3yx4] { font-weight: 600; color: var(--accent-glow); min-width: 90px; }
.sl-time[b-4g95kz3yx4] { color: var(--text-dim); }
.sl-empty[b-4g95kz3yx4] { color: var(--text-faint); font-size: 12px; }

/* ── wizard action bar ── */
.wiz-actions[b-4g95kz3yx4] {
    display: flex; justify-content: space-between; margin-top: 22px;
    padding-top: 16px; border-top: 1px solid var(--glass-border);
}

/* ── badges ── */
.badge[b-4g95kz3yx4] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-blue[b-4g95kz3yx4]   { background: rgba(79,168,255,0.12); color: var(--accent-glow); border: 1px solid rgba(79,168,255,0.25); }
.b-purple[b-4g95kz3yx4] { background: rgba(167,139,250,0.12); color: #a78bfa; border: 1px solid rgba(167,139,250,0.25); }
/* /Components/School/DashboardHome.razor.rz.scp.css */
/* ── Page padding ── */
.dash-content[b-sxp9y5wpuq] {
    padding: 20px 22px;
}

/* ── Page header ── */
.page-header[b-sxp9y5wpuq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.page-title[b-sxp9y5wpuq] { font-size: 17px; font-weight: 700; color: var(--text-main); }
.page-sub[b-sxp9y5wpuq]   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ── Stat cards grid ── */
.stats-grid[b-sxp9y5wpuq] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.stat-card[b-sxp9y5wpuq] {
    border-radius: 11px;
    padding: 14px 16px;
    border: 1px solid;
    position: relative;
    overflow: hidden;
    transition: .2s;
    cursor: default;
}
.stat-card:hover[b-sxp9y5wpuq] { transform: translateY(-2px); }
.stat-card[b-sxp9y5wpuq]::after {
    content: "";
    position: absolute;
    top: -20px; right: -20px;
    width: 70px; height: 70px;
    border-radius: 50%;
    filter: blur(20px);
}

.stat-blue[b-sxp9y5wpuq]   { background: rgba(120,180,255,0.08); border-color: rgba(120,180,255,0.22); box-shadow: 0 0 20px rgba(120,180,255,0.06); }
.stat-blue[b-sxp9y5wpuq]::after   { background: rgba(120,180,255,0.15); }
.stat-green[b-sxp9y5wpuq]  { background: rgba(74,222,128,0.07);  border-color: rgba(74,222,128,0.20);  box-shadow: 0 0 20px rgba(74,222,128,0.05); }
.stat-green[b-sxp9y5wpuq]::after  { background: rgba(74,222,128,0.14); }
.stat-purple[b-sxp9y5wpuq] { background: rgba(167,139,250,0.08); border-color: rgba(167,139,250,0.22); box-shadow: 0 0 20px rgba(167,139,250,0.06); }
.stat-purple[b-sxp9y5wpuq]::after { background: rgba(167,139,250,0.15); }
.stat-amber[b-sxp9y5wpuq]  { background: rgba(251,191,36,0.07);  border-color: rgba(251,191,36,0.20);  box-shadow: 0 0 20px rgba(251,191,36,0.05); }
.stat-amber[b-sxp9y5wpuq]::after  { background: rgba(251,191,36,0.14); }
.stat-cyan[b-sxp9y5wpuq]   { background: rgba(34,211,238,0.07);  border-color: rgba(34,211,238,0.20);  box-shadow: 0 0 20px rgba(34,211,238,0.05); }
.stat-cyan[b-sxp9y5wpuq]::after   { background: rgba(34,211,238,0.14); }

/* skeleton */
.stat-skeleton[b-sxp9y5wpuq] {
    background: var(--glass-bg-soft);
    border-color: var(--glass-border);
    height: 96px;
    animation: shimmer-b-sxp9y5wpuq 1.4s infinite;
}
@keyframes shimmer-b-sxp9y5wpuq { 0%,100%{opacity:.5} 50%{opacity:.2} }

.stat-icon[b-sxp9y5wpuq] { font-size: 18px; margin-bottom: 8px; display: block; }
.stat-val[b-sxp9y5wpuq]  { font-size: 24px; font-weight: 700; line-height: 1; margin-bottom: 4px; color: var(--text-main); }
.stat-lbl[b-sxp9y5wpuq]  { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; color: var(--text-dim); }
.stat-meta[b-sxp9y5wpuq] { font-size: 11px; color: var(--text-faint); margin-top: 5px; }
.up[b-sxp9y5wpuq] { color: #4ade80; }
.dn[b-sxp9y5wpuq] { color: #f87171; }

/* ── Two-column layout ── */
.two-col[b-sxp9y5wpuq] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 14px;
}
.right-col[b-sxp9y5wpuq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Card ── */
.card[b-sxp9y5wpuq] {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 11px;
    overflow: hidden;
}
.card-head[b-sxp9y5wpuq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--glass-border);
}
.card-title[b-sxp9y5wpuq] { font-size: 13px; font-weight: 600; color: var(--text-main); }
.card-body[b-sxp9y5wpuq]  { padding: 14px 16px; }
.card-link[b-sxp9y5wpuq]  { font-size: 11px; color: var(--text-dim); cursor: pointer; transition: .15s; }
.card-link:hover[b-sxp9y5wpuq] { color: var(--text-main); }

/* ── Table ── */
.tbl[b-sxp9y5wpuq] { width: 100%; border-collapse: collapse; }
.tbl th[b-sxp9y5wpuq] {
    font-size: 10.5px; font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .7px;
    padding: 7px 11px; text-align: left;
    border-bottom: 1px solid var(--glass-border);
}
.tbl td[b-sxp9y5wpuq] {
    padding: 10px 11px;
    font-size: 12.5px; color: var(--text-dim);
    border-bottom: 1px solid rgba(120,180,255,0.06);
    vertical-align: middle;
}
.tbl tr:last-child td[b-sxp9y5wpuq] { border-bottom: none; }
.tbl tr:hover td[b-sxp9y5wpuq] { background: var(--accent-glow-soft); color: var(--text-main); }

.child-row[b-sxp9y5wpuq] { display: flex; align-items: center; gap: 8px; }

.av[b-sxp9y5wpuq] {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent-gradient);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    color: var(--accent-text-on-fill);
    flex-shrink: 0;
}
.av-img[b-sxp9y5wpuq] {
    width: 26px; height: 26px; border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.badge[b-sxp9y5wpuq] { display: inline-block; padding: 2px 7px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-sxp9y5wpuq]  { background: rgba(74,222,128,0.11);  color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-blue[b-sxp9y5wpuq]   { background: rgba(120,180,255,0.11); color: var(--text-main); border: 1px solid rgba(120,180,255,0.22); }
.b-yellow[b-sxp9y5wpuq] { background: rgba(251,191,36,0.11);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.b-red[b-sxp9y5wpuq]    { background: rgba(248,113,113,0.11); color: #f87171; border: 1px solid rgba(248,113,113,0.22); }

.empty-row[b-sxp9y5wpuq]  { padding: 16px; font-size: 13px; color: var(--text-faint); text-align: center; }
.tbl-skeleton[b-sxp9y5wpuq] { height: 140px; background: var(--glass-bg-soft); animation: shimmer-b-sxp9y5wpuq 1.4s infinite; }

/* ── CSS-only bar chart ── */
.chart-tag[b-sxp9y5wpuq] { font-size: 11px; color: var(--text-faint); }
.chart-wrap[b-sxp9y5wpuq] { display: flex; flex-direction: column; gap: 6px; }
.bars[b-sxp9y5wpuq]       { display: flex; align-items: flex-end; gap: 6px; height: 96px; }

/* each day = a full-height column so the percentage label can sit on top */
.bar-col[b-sxp9y5wpuq] {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
}
.bar-pct[b-sxp9y5wpuq] {
    font-size: 9.5px; font-weight: 600;
    text-align: center;
    color: var(--text-dim);
    margin-bottom: 3px;
}
.bar[b-sxp9y5wpuq] {
    border-radius: 4px 4px 0 0;
    border: 1px solid var(--glass-border);
    border-bottom: none;
    transition: .3s; cursor: default;
    min-height: 3px;
}
.bar:hover[b-sxp9y5wpuq] { filter: brightness(1.25); }

/* > 80% green · 50–80% yellow · < 50% red */
.bar-green[b-sxp9y5wpuq]  { background: linear-gradient(to top, rgba(74,222,128,0.20),  rgba(74,222,128,0.55));  border-color: rgba(74,222,128,0.35); }
.bar-yellow[b-sxp9y5wpuq] { background: linear-gradient(to top, rgba(251,191,36,0.20),  rgba(251,191,36,0.55));  border-color: rgba(251,191,36,0.35); }
.bar-red[b-sxp9y5wpuq]    { background: linear-gradient(to top, rgba(248,113,113,0.20), rgba(248,113,113,0.55)); border-color: rgba(248,113,113,0.35); }

.bar-labels[b-sxp9y5wpuq] { display: flex; gap: 6px; }
.bar-lbl[b-sxp9y5wpuq]    { flex: 1; text-align: center; font-size: 9.5px; color: var(--text-faint); }

.chart-skeleton[b-sxp9y5wpuq] { height: 120px; border-radius: 6px; background: var(--glass-bg-soft); animation: shimmer-b-sxp9y5wpuq 1.4s infinite; }

/* ── Today's Classes ── */
.today-list[b-sxp9y5wpuq] { display: flex; flex-direction: column; gap: 7px; }
.today-item[b-sxp9y5wpuq] {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    transition: .15s;
}
.today-item:hover[b-sxp9y5wpuq] { border-color: var(--accent-glow); background: var(--accent-glow-soft); }
.today-time[b-sxp9y5wpuq] {
    font-size: 13px; font-weight: 700;
    color: var(--text-main);
    min-width: 46px;
}
.today-main[b-sxp9y5wpuq] { flex: 1; min-width: 0; }
.today-name[b-sxp9y5wpuq] { font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 2px; }
.today-meta[b-sxp9y5wpuq] {
    display: flex; gap: 6px; flex-wrap: wrap;
    font-size: 11px; color: var(--text-dim);
}

/* ── Activity feed ── */
.act-list[b-sxp9y5wpuq] { display: flex; flex-direction: column; }
.act-item[b-sxp9y5wpuq] {
    display: flex; gap: 11px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(120,180,255,0.06);
}
.act-item:last-child[b-sxp9y5wpuq] { border-bottom: none; }
.act-dot[b-sxp9y5wpuq] {
    width: 7px; height: 7px; border-radius: 50%;
    margin-top: 5px; flex-shrink: 0;
}
.act-accent[b-sxp9y5wpuq] { background: var(--accent-glow); box-shadow: 0 0 5px var(--accent-glow-soft); }
.act-green[b-sxp9y5wpuq]  { background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,.5); }
.act-amber[b-sxp9y5wpuq]  { background: #fbbf24; box-shadow: 0 0 5px rgba(251,191,36,.5); }
.act-purple[b-sxp9y5wpuq] { background: #a78bfa; box-shadow: 0 0 5px rgba(167,139,250,.5); }
.act-cyan[b-sxp9y5wpuq]   { background: #22d3ee; box-shadow: 0 0 5px rgba(34,211,238,.5); }
.act-text[b-sxp9y5wpuq]   { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }
.act-time[b-sxp9y5wpuq]   { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.act-skeleton[b-sxp9y5wpuq] { height: 40px; border-radius: 6px; background: var(--glass-bg-soft); margin-bottom: 8px; animation: shimmer-b-sxp9y5wpuq 1.4s infinite; }
/* /Components/School/EnrollmentWizard.razor.rz.scp.css */
/* ── Page wrapper — همان الگوی login-page ── */
.wizard-wrap[b-bdraczndk4] {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 48px 16px;
    color: var(--text-main);
    position: relative;
    overflow: hidden;
    background: var(--bg-gradient);
}

/* grid + glow orbs */
.wizard-wrap[b-bdraczndk4]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 460px at 88%  8%, var(--orb-1), transparent 70%),
        radial-gradient(circle 520px at  4% 96%, var(--orb-2), transparent 70%),
        radial-gradient(circle 260px at 60% 85%, var(--orb-3), transparent 70%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size:
        auto, auto, auto,
        var(--grid-size) var(--grid-size),
        var(--grid-size) var(--grid-size);
    -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, rgba(0,0,0,0.9), transparent 80%);
    mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, rgba(0,0,0,0.9), transparent 80%);
    animation: wiz-orb-drift-b-bdraczndk4 24s ease-in-out infinite alternate;
}

@keyframes wiz-orb-drift-b-bdraczndk4 {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: -30px 30px, 40px -30px, -20px 20px, 0 0, 0 0; }
}

/* scan line */
.wizard-wrap[b-bdraczndk4]::after {
    content: "";
    position: fixed;
    left: 0; right: 0;
    top: -2px;
    height: 2px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    background: linear-gradient(90deg, transparent, var(--scanline) 50%, transparent);
    animation: wiz-scan-sweep-b-bdraczndk4 7s linear infinite;
}

@keyframes wiz-scan-sweep-b-bdraczndk4 {
    0%   { top: -2px; }
    100% { top: 100%; }
}

/* ── Main card — همان glass card لاگین ── */
.wizard-card[b-bdraczndk4] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 96%;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: 0 0 25px var(--accent-glow-soft);
    border-radius: var(--radius-xl);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── Logo row (مثل لاگین) ── */
.wiz-logo-row[b-bdraczndk4] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: -8px;
}

.wiz-logo-icon[b-bdraczndk4] {
    width: 34px; height: 34px;
    border-radius: var(--radius-md);
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-text-on-fill);
    font-weight: 800; font-size: 18px;
    box-shadow: 0 0 18px var(--accent-glow);
    flex-shrink: 0;
}

.wiz-logo-title[b-bdraczndk4] { font-size: 15px; font-weight: 700; }
.wiz-logo-sub[b-bdraczndk4]   { font-size: 11px; color: var(--text-faint); }

/* ── Step indicator ── */
.wizard-steps[b-bdraczndk4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.step[b-bdraczndk4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.step-num[b-bdraczndk4] {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    color: var(--text-dim);
    background: rgba(15,30,60,0.35);
    transition: all .3s;
}

.step.active .step-num[b-bdraczndk4] {
    border-color: var(--accent-glow);
    color: var(--text-main);
    box-shadow: 0 0 12px var(--accent-glow-soft);
}

.step.done .step-num[b-bdraczndk4] {
    background: var(--accent-gradient);
    border-color: transparent;
    color: var(--accent-text-on-fill);
    box-shadow: 0 0 14px var(--accent-glow);
}

.step-lbl[b-bdraczndk4] {
    font-size: 10px;
    color: var(--text-faint);
    white-space: nowrap;
    letter-spacing: .04em;
}
.step.active .step-lbl[b-bdraczndk4] { color: var(--text-dim); }
.step.done   .step-lbl[b-bdraczndk4] { color: var(--text-dim); }

.step-line[b-bdraczndk4] {
    width: 72px; height: 1.5px;
    background: var(--glass-border);
    margin: 0 4px;
    margin-bottom: 22px;
    transition: background .3s;
}
.step-line.done[b-bdraczndk4] { background: var(--accent-glow-soft); }

/* ── Headings ── */
.wiz-title[b-bdraczndk4] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}
.wiz-sub[b-bdraczndk4] {
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 4px;
    line-height: 1.5;
}

/* ── Fields — همان استایل input لاگین ── */
.field-group[b-bdraczndk4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.field-row[b-bdraczndk4] {
    display: flex;
    gap: 14px;
}

.field-lbl[b-bdraczndk4] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: .04em;
}

.field-input[b-bdraczndk4] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    background: rgba(15,30,60,0.35);
    color: var(--text-main);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: .25s;
}

.field-input:focus[b-bdraczndk4] {
    border-color: #7ccaff;
    box-shadow: 0 0 12px var(--accent-glow-soft);
}

.field-input.err[b-bdraczndk4]  { border-color: var(--text-error); }

.field-input option[b-bdraczndk4] {
    background: #0f1e3c;
    color: var(--text-main);
}

.field-ta[b-bdraczndk4] {
    resize: vertical;
    min-height: 80px;
}

.field-divider[b-bdraczndk4] {
    height: 1px;
    background: var(--glass-border);
}

/* ── National ID search row ── */
.search-row[b-bdraczndk4] {
    display: flex;
    gap: 8px;
}
.search-row .field-input[b-bdraczndk4] { flex: 1; }

.btn-search[b-bdraczndk4] {
    padding: 12px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    background: rgba(15,30,60,0.35);
    color: var(--text-dim);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: .25s;
    font-family: inherit;
}
.btn-search:hover:not(:disabled)[b-bdraczndk4] {
    border-color: #7ccaff;
    color: var(--text-main);
    box-shadow: 0 0 12px var(--accent-glow-soft);
}
.btn-search:disabled[b-bdraczndk4] { opacity: .4; cursor: default; }

.found-badge[b-bdraczndk4] {
    margin-top: 6px;
    font-size: 12px;
    color: #4ade80;
}

/* ── Alert ── */
.wiz-alert[b-bdraczndk4] {
    padding: 10px 14px;
    background: rgba(248,113,113,.10);
    border: 1px solid rgba(248,113,113,.35);
    border-radius: var(--radius-md);
    color: var(--text-error);
    font-size: 13px;
}

/* ── Review card ── */
.review-card[b-bdraczndk4] {
    background: rgba(15,30,60,0.35);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.review-row[b-bdraczndk4] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--glass-border);
}
.review-row:last-child[b-bdraczndk4] { border-bottom: none; }

.review-lbl[b-bdraczndk4] {
    font-size: 11px; font-weight: 600;
    color: var(--text-faint);
    min-width: 120px;
    padding-top: 2px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.review-val[b-bdraczndk4] {
    font-size: 14px;
    color: var(--text-main);
    flex: 1;
    line-height: 1.5;
}

.badge-enroll[b-bdraczndk4] { color: #60a5fa; font-size: 13px; }
.badge-new[b-bdraczndk4]    { color: #a78bfa; font-size: 13px; }

/* ── Footer buttons ── */
.wizard-footer[b-bdraczndk4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

/* Primary — همان دکمه لاگین */
.btn-primary[b-bdraczndk4] {
    padding: 12px 32px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--accent-gradient);
    color: var(--accent-text-on-fill);
    font-size: 15px; font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 0 18px var(--accent-glow);
    transition: .25s;
}
.btn-primary:hover:not(:disabled)[b-bdraczndk4] {
    transform: translateY(-2px);
    box-shadow: 0 0 25px var(--accent-glow);
}
.btn-primary:disabled[b-bdraczndk4] { opacity: .5; cursor: default; transform: none; }

/* Ghost */
.btn-ghost[b-bdraczndk4] {
    padding: 12px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-dim);
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: .25s;
}
.btn-ghost:hover[b-bdraczndk4] {
    background: var(--glass-bg-soft);
    color: var(--text-main);
    border-color: #7ccaff;
}

/* ── Success state ── */
.wizard-success[b-bdraczndk4] {
    text-align: center;
    padding: 16px 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.success-icon[b-bdraczndk4] {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(74,222,128,.12);
    border: 1.5px solid #4ade80;
    color: #4ade80;
    font-size: 32px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 24px rgba(74,222,128,.25);
}

.wiz-success-footer[b-bdraczndk4] { justify-content: center; }

/* ── Avatar zone ── */
.avatar-zone[b-bdraczndk4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.avatar-circle[b-bdraczndk4] {
    width: 88px; height: 88px;
    border-radius: 50%;
    border: 2px dashed var(--glass-border);
    background: rgba(15,30,60,0.35);
    cursor: pointer;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: .25s;
    position: relative;
    flex-shrink: 0;
}
.avatar-circle:hover:not(.disabled)[b-bdraczndk4] {
    border-color: #7ccaff;
    box-shadow: 0 0 18px var(--accent-glow-soft);
}
.avatar-circle img[b-bdraczndk4] {
    width: 100%; height: 100%;
    object-fit: cover;
}
.avatar-circle .av-icon[b-bdraczndk4] { font-size: 34px; }

.avatar-circle.disabled[b-bdraczndk4] {
    pointer-events: none;
    opacity: 0.55;
    border-style: solid;
    cursor: default;
}

.avatar-hint[b-bdraczndk4] {
    font-size: 12px;
    font-weight: 600;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.avatar-sub[b-bdraczndk4] {
    font-size: 11px;
    color: var(--text-faint);
}

/* ── Found banner ── */
.found-banner[b-bdraczndk4] {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: var(--radius-lg);
    background: rgba(74,222,128,0.07);
    border: 1px solid rgba(74,222,128,0.25);
    margin-top: 8px;
}
.found-av[b-bdraczndk4] {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: var(--accent-text-on-fill);
}
.found-name[b-bdraczndk4]  { font-size: 13px; font-weight: 600; color: var(--text-main); }
.found-meta[b-bdraczndk4]  { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.found-badge[b-bdraczndk4] {
    margin-left: auto; padding: 3px 9px; border-radius: 20px;
    background: rgba(74,222,128,0.15);
    border: 1px solid rgba(74,222,128,0.3);
    font-size: 10px; font-weight: 700; color: #4ade80;
    white-space: nowrap;
}

/* ── Section label ── */
.section-label[b-bdraczndk4] {
    font-size: 11px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .8px;
    display: flex; align-items: center; gap: 8px;
    margin: 16px 0 10px;
}
.section-label[b-bdraczndk4]::after {
    content: ""; flex: 1; height: 1px; background: var(--glass-border);
}

/* ── Parents grid (step 2) ── */
.parents-grid[b-bdraczndk4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px; margin-bottom: 4px;
}
.parent-card[b-bdraczndk4] {
    padding: 14px; border-radius: var(--radius-lg);
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    display: flex; flex-direction: column;
    align-items: center; gap: 5px;
    text-align: center; position: relative;
}
.pav[b-bdraczndk4] {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; color: var(--accent-text-on-fill);
}
.pname[b-bdraczndk4]  { font-size: 13px; font-weight: 600; color: var(--text-main); }
.prel[b-bdraczndk4]   { font-size: 11px; color: var(--text-dim); }
.pphone[b-bdraczndk4] { font-size: 11px; color: var(--text-faint); }
.pprimary[b-bdraczndk4] {
    position: absolute; top: 7px; right: 7px;
    background: rgba(74,222,128,0.15);
    border: 1px solid rgba(74,222,128,0.3);
    font-size: 9px; font-weight: 700; color: #4ade80;
    padding: 2px 6px; border-radius: 20px;
}

/* ── Parent search box ── */
.parent-search-box[b-bdraczndk4] {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 14px;
}
.parent-found[b-bdraczndk4] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; border-radius: var(--radius-md);
    background: rgba(79,168,255,0.06);
    border: 1px solid rgba(79,168,255,0.2);
    margin-top: 10px; flex-wrap: wrap;
}
.pf-av[b-bdraczndk4] {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; color: var(--accent-text-on-fill);
}
.pf-info[b-bdraczndk4] { flex: 1; min-width: 0; }
.pf-name[b-bdraczndk4]  { font-size: 13px; font-weight: 600; color: var(--text-main); }
.pf-phone[b-bdraczndk4] { font-size: 11px; color: var(--text-dim); }
.btn-add-parent[b-bdraczndk4] {
    padding: 7px 14px; border-radius: var(--radius-md);
    border: 1px solid rgba(79,168,255,0.35);
    background: rgba(79,168,255,0.1);
    color: #7ccaff; font-family: inherit;
    font-size: 12px; font-weight: 600;
    cursor: pointer; transition: .15s; white-space: nowrap;
}
.btn-add-parent:hover[b-bdraczndk4] { background: rgba(79,168,255,0.2); }

/* ── Search not found ── */
.search-not-found[b-bdraczndk4] {
    margin-top: 8px; font-size: 12px; color: var(--text-dim);
    padding: 8px 12px; border-radius: var(--radius-md);
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
}

/* ── Confirm child card (step 3) ── */
.confirm-child[b-bdraczndk4] {
    display: flex; align-items: center; gap: 16px;
    padding: 16px; border-radius: var(--radius-lg);
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
}
.cav[b-bdraczndk4] {
    width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
    background: var(--glass-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; overflow: hidden;
    border: 2px solid var(--glass-border);
}
.cav img[b-bdraczndk4] { width: 100%; height: 100%; object-fit: cover; }
.cname[b-bdraczndk4] { font-size: 16px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
.cmeta[b-bdraczndk4] { font-size: 12px; color: var(--text-dim); line-height: 1.8; }
.cbadge[b-bdraczndk4] {
    display: inline-block; margin-top: 6px;
    padding: 2px 8px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
    background: rgba(79,168,255,0.12);
    color: #7ccaff;
    border: 1px solid rgba(79,168,255,0.25);
}

/* ── Confirm parents grid ── */
.parents-confirm-grid[b-bdraczndk4] { display: flex; flex-direction: column; gap: 8px; }
.pc-row[b-bdraczndk4] {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: var(--radius-md);
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
}
.pcav[b-bdraczndk4] {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; color: var(--accent-text-on-fill);
}
.pcname[b-bdraczndk4]  { font-size: 13px; font-weight: 600; color: var(--text-main); }
.pcrel[b-bdraczndk4]   { font-size: 11px; color: var(--text-dim); }
.pcphone[b-bdraczndk4] { font-size: 11px; color: var(--text-faint); margin-left: auto; }
.pc-primary[b-bdraczndk4] {
    padding: 2px 7px; border-radius: 20px;
    font-size: 9px; font-weight: 700;
    background: rgba(74,222,128,0.12);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.25);
}
/* /Components/School/FinancialDashboard.razor.rz.scp.css */
.fd-page[b-mfpz9or1qe] { animation: fadeIn-b-mfpz9or1qe .25s ease; }
@keyframes fadeIn-b-mfpz9or1qe { from { opacity: 0; } to { opacity: 1; } }

.page-header[b-mfpz9or1qe] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.page-title[b-mfpz9or1qe] { font-size: 18px; font-weight: 700; color: var(--text-main); }
.page-sub[b-mfpz9or1qe] { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.period-select[b-mfpz9or1qe] { padding: 7px 12px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12.5px; outline: none; cursor: pointer; }
.period-select option[b-mfpz9or1qe] { background: #0c1a30; color: var(--text-main); }

.fd-empty[b-mfpz9or1qe] { text-align: center; padding: 50px 20px; color: var(--text-dim); }
.mini-empty[b-mfpz9or1qe] { text-align: center; padding: 24px 10px; color: var(--text-dim); font-size: 12px; }

.badge[b-mfpz9or1qe] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-mfpz9or1qe]  { background: rgba(74,222,128,0.11);  color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-red[b-mfpz9or1qe]    { background: rgba(248,113,113,0.11); color: #f87171; border: 1px solid rgba(248,113,113,0.22); }
.b-yellow[b-mfpz9or1qe] { background: rgba(251,191,36,0.11);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }

/* stat cards */
.stats-grid[b-mfpz9or1qe] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stat-card[b-mfpz9or1qe] { padding: 14px 16px; border-radius: var(--radius-md); background: var(--glass-bg); border: 1px solid var(--glass-border); }
.stat-icon[b-mfpz9or1qe] { font-size: 20px; margin-bottom: 6px; }
.stat-val[b-mfpz9or1qe] { font-size: 21px; font-weight: 800; letter-spacing: -.5px; color: var(--text-main); }
.stat-lbl[b-mfpz9or1qe] { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.s-green[b-mfpz9or1qe] { border-top: 2px solid rgba(74,222,128,0.4); }   .s-green .stat-val[b-mfpz9or1qe] { color: #4ade80; }
.s-red[b-mfpz9or1qe] { border-top: 2px solid rgba(248,113,113,0.4); }    .s-red .stat-val[b-mfpz9or1qe] { color: #f87171; }
.s-blue[b-mfpz9or1qe] { border-top: 2px solid var(--accent-glow); }      .s-blue .stat-val[b-mfpz9or1qe] { color: var(--text-main); }
.s-purple[b-mfpz9or1qe] { border-top: 2px solid rgba(167,139,250,0.4); } .s-purple .stat-val[b-mfpz9or1qe] { color: #a78bfa; }

/* net box */
.net-box[b-mfpz9or1qe] { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: 18px; border: 1px solid var(--glass-border); }
.net-box.pos[b-mfpz9or1qe] { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.3); }
.net-box.neg[b-mfpz9or1qe] { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.3); }
.net-icon[b-mfpz9or1qe] { font-size: 26px; }
.net-title[b-mfpz9or1qe] { font-size: 14px; font-weight: 700; color: var(--text-main); }
.net-sub[b-mfpz9or1qe] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.two-col[b-mfpz9or1qe] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

.panel[b-mfpz9or1qe] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 14px; }
.panel-head[b-mfpz9or1qe] { padding: 13px 16px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; }
.panel-title[b-mfpz9or1qe] { font-size: 12.5px; font-weight: 700; color: var(--text-main); }
.panel-sub[b-mfpz9or1qe] { font-size: 11px; color: var(--text-faint); }
.panel-body[b-mfpz9or1qe] { padding: 16px; }
.panel-body.np[b-mfpz9or1qe] { padding: 0; }

/* bar chart */
.bar-chart[b-mfpz9or1qe] { display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; height: 110px; padding: 0 4px; }
.bar-group[b-mfpz9or1qe] { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.bars[b-mfpz9or1qe] { display: flex; align-items: flex-end; gap: 3px; height: 92px; }
.bar[b-mfpz9or1qe] { width: 12px; border-radius: 3px 3px 0 0; transition: height .3s ease; min-height: 2px; }
.bar-income[b-mfpz9or1qe] { background: linear-gradient(180deg, #4ade80, #86efac); }
.bar-expense[b-mfpz9or1qe] { background: linear-gradient(180deg, #f87171, #fca5a5); }
.bar-lbl[b-mfpz9or1qe] { font-size: 9.5px; color: var(--text-faint); }
.chart-legend[b-mfpz9or1qe] { display: flex; justify-content: center; gap: 16px; margin-top: 10px; }
.leg[b-mfpz9or1qe] { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); }
.dot[b-mfpz9or1qe] { width: 10px; height: 10px; border-radius: 2px; }
.d-income[b-mfpz9or1qe] { background: #4ade80; }
.d-expense[b-mfpz9or1qe] { background: #f87171; }

/* income by class */
.class-row[b-mfpz9or1qe] { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--glass-border); }
.class-row:last-child[b-mfpz9or1qe] { border-bottom: none; }
.cr-name[b-mfpz9or1qe] { font-size: 12.5px; font-weight: 600; color: var(--text-main); }
.cr-sub[b-mfpz9or1qe] { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.cr-amt[b-mfpz9or1qe] { font-size: 13px; font-weight: 700; color: #4ade80; }

.sec-lbl[b-mfpz9or1qe] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .8px; display: flex; align-items: center; gap: 8px; margin: 20px 0 12px; }
.sec-lbl[b-mfpz9or1qe]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

/* tables */
.filter-bar[b-mfpz9or1qe] { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--glass-border); }
.f-select[b-mfpz9or1qe] { padding: 6px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12px; outline: none; cursor: pointer; }
.f-select option[b-mfpz9or1qe] { background: #0c1a30; color: var(--text-main); }
table[b-mfpz9or1qe] { width: 100%; border-collapse: collapse; }
th[b-mfpz9or1qe] { text-align: left; font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; padding: 8px 16px; border-bottom: 1px solid var(--glass-border); white-space: nowrap; }
td[b-mfpz9or1qe] { padding: 10px 16px; font-size: 12.5px; border-bottom: 1px solid var(--glass-border); vertical-align: middle; color: var(--text-main); }
tr:last-child td[b-mfpz9or1qe] { border-bottom: none; }
tr:hover td[b-mfpz9or1qe] { background: var(--accent-glow-soft); }
.td-strong[b-mfpz9or1qe] { font-weight: 600; }
.td-dim[b-mfpz9or1qe] { color: var(--text-dim); font-size: 11.5px; }
.td-ref[b-mfpz9or1qe] { font-family: monospace; font-size: 11px; color: var(--text-faint); }
.td-amount-paid[b-mfpz9or1qe] { font-weight: 700; color: #4ade80; }
.td-amount-due[b-mfpz9or1qe] { font-weight: 700; color: #f87171; }

@media (max-width: 800px) {
    .stats-grid[b-mfpz9or1qe] { grid-template-columns: 1fr 1fr; }
    .two-col[b-mfpz9or1qe] { grid-template-columns: 1fr; }
}
/* /Components/School/HistoryView.razor.rz.scp.css */
/* ============================================================
   HistoryView.razor.css — Session History
   CSS Isolation (scoped). All colors come from theme.css var(--…)
   so the page follows the active blue/gold/lilac theme.

   Layout lock: the whole component fills its content area and does
   NOT scroll as a page (like messages.html). Only two regions
   scroll independently — the session table (.table-wrap) and the
   detail panel (.dp-scroll).
   ============================================================ */

/* ── page shell (locked) ── */
.hist-page[b-qjs3chj1t5] {
    color: var(--text-main);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* neon-glass background (grid + orbs + scan line) scoped to this page */
.hist-page[b-qjs3chj1t5]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 460px at 88% 8%, var(--orb-1), transparent 70%),
        radial-gradient(circle 520px at 4% 96%, var(--orb-2), transparent 70%),
        radial-gradient(circle 260px at 60% 85%, var(--orb-3), transparent 70%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size:
        auto, auto, auto,
        var(--grid-size) var(--grid-size),
        var(--grid-size) var(--grid-size);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, rgba(0,0,0,0.85), transparent 85%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, rgba(0,0,0,0.85), transparent 85%);
    animation: hist-orb-drift-b-qjs3chj1t5 26s ease-in-out infinite alternate;
}

@keyframes hist-orb-drift-b-qjs3chj1t5 {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: -30px 30px, 40px -30px, -20px 20px, 0 0, 0 0; }
}

.hist-page[b-qjs3chj1t5]::after {
    content: "";
    position: fixed;
    left: 0; right: 0; top: -2px;
    height: 2px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
    background: linear-gradient(90deg, transparent, var(--scanline) 50%, transparent);
    animation: hist-scan-sweep-b-qjs3chj1t5 9s linear infinite;
}

@keyframes hist-scan-sweep-b-qjs3chj1t5 {
    0%   { top: -2px; }
    100% { top: 100%; }
}

/* keep real content above the background layers */
.page-header[b-qjs3chj1t5],
.stat-grid[b-qjs3chj1t5],
.filter-bar[b-qjs3chj1t5],
.hist-body[b-qjs3chj1t5],
.hist-alert[b-qjs3chj1t5],
.hist-toast[b-qjs3chj1t5] { position: relative; z-index: 1; }

/* ── header ── */
.page-header[b-qjs3chj1t5] {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; flex-shrink: 0;
}
.page-title[b-qjs3chj1t5] { font-size: 20px; font-weight: 700; color: var(--text-main); }
.page-sub[b-qjs3chj1t5]   { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.hist-alert[b-qjs3chj1t5] {
    padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px;
    background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3);
    color: var(--text-error); font-size: 13px; flex-shrink: 0;
}

/* ── buttons ── */
.btn[b-qjs3chj1t5] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s; white-space: nowrap;
}
.btn-primary[b-qjs3chj1t5] { background: var(--accent-gradient); color: var(--accent-text-on-fill); box-shadow: 0 0 16px var(--accent-glow-soft); }
.btn-primary:hover[b-qjs3chj1t5] { transform: translateY(-1px); }
.btn-ghost[b-qjs3chj1t5] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-qjs3chj1t5] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.btn-ghost:disabled[b-qjs3chj1t5] { opacity: .45; cursor: default; transform: none; }
.btn-sm[b-qjs3chj1t5] { padding: 6px 12px; font-size: 12px; }
.btn-xs[b-qjs3chj1t5] { padding: 4px 9px; font-size: 11px; }

/* ── badges ── */
.badge[b-qjs3chj1t5] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.b-green[b-qjs3chj1t5]  { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-blue[b-qjs3chj1t5]   { background: rgba(79,168,255,0.11); color: var(--accent-glow); border: 1px solid rgba(79,168,255,0.22); }
.b-yellow[b-qjs3chj1t5] { background: rgba(251,191,36,0.11); color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.b-purple[b-qjs3chj1t5] { background: rgba(167,139,250,0.11); color: #a78bfa; border: 1px solid rgba(167,139,250,0.22); }
.b-red[b-qjs3chj1t5]    { background: rgba(248,113,113,0.11); color: #f87171; border: 1px solid rgba(248,113,113,0.22); }
.b-gray[b-qjs3chj1t5]   { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }

/* ── stat cards ── */
.stat-grid[b-qjs3chj1t5] {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-bottom: 16px; flex-shrink: 0;
}
.stat-card[b-qjs3chj1t5] {
    padding: 14px 16px; border-radius: var(--radius-md);
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    position: relative; overflow: hidden;
}
.stat-card[b-qjs3chj1t5]::before {
    content: ""; position: absolute; inset: 0;
    background: var(--accent-glow-soft); opacity: .08; pointer-events: none;
}
.stat-icon[b-qjs3chj1t5] { font-size: 18px; margin-bottom: 6px; }
.stat-val[b-qjs3chj1t5]  { font-size: 22px; font-weight: 800; color: var(--text-main); }
.stat-lbl[b-qjs3chj1t5]  { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.s-att   .stat-val[b-qjs3chj1t5] { color: #4ade80; }
.s-cancel .stat-val[b-qjs3chj1t5] { color: #f87171; }
.s-pending .stat-val[b-qjs3chj1t5] { color: #fbbf24; }

/* ── filter bar ── */
.filter-bar[b-qjs3chj1t5] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: var(--radius-md);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    margin-bottom: 14px; flex-shrink: 0;
}
.search-input[b-qjs3chj1t5], .filter-select[b-qjs3chj1t5], .filter-date[b-qjs3chj1t5] {
    padding: 7px 11px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12.5px; outline: none;
    transition: .15s;
}
.search-input[b-qjs3chj1t5] { flex: 1; min-width: 160px; }
.search-input[b-qjs3chj1t5]::placeholder { color: var(--text-faint); }
.search-input:focus[b-qjs3chj1t5], .filter-select:focus[b-qjs3chj1t5], .filter-date:focus[b-qjs3chj1t5] {
    border-color: var(--accent-glow); box-shadow: 0 0 10px var(--accent-glow-soft);
}
.filter-select[b-qjs3chj1t5] { cursor: pointer; }
.filter-select option[b-qjs3chj1t5] { background: #0d1a33; color: var(--text-main); }
.filter-date[b-qjs3chj1t5] { color-scheme: dark; }

/* ── body split: table | detail ── */
.hist-body[b-qjs3chj1t5] {
    flex: 1; min-height: 0;
    display: flex; gap: 14px; overflow: hidden;
}

/* TABLE region (scrolls on its own) */
.table-wrap[b-qjs3chj1t5] {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    border-radius: var(--radius-md);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    overflow: hidden;
}
.hist-loading[b-qjs3chj1t5], .hist-empty[b-qjs3chj1t5] {
    padding: 40px 0; text-align: center; font-size: 13px; color: var(--text-dim);
}

.hist-table[b-qjs3chj1t5] {
    width: 100%; border-collapse: collapse; font-size: 12.5px;
    flex: 1; display: block; overflow-y: auto; overflow-x: hidden;
}
.hist-table thead[b-qjs3chj1t5], .hist-table tbody[b-qjs3chj1t5] { display: table; width: 100%; table-layout: fixed; }
.hist-table thead[b-qjs3chj1t5] {
    position: sticky; top: 0; z-index: 2;
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}
.hist-table th[b-qjs3chj1t5] {
    text-align: left; padding: 11px 12px; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .6px; font-weight: 700;
    color: var(--text-faint); border-bottom: 1px solid var(--glass-border);
}
.hist-table td[b-qjs3chj1t5] {
    padding: 10px 12px; border-bottom: 1px solid var(--glass-border);
    color: var(--text-main); vertical-align: middle;
}
.hist-table tbody tr[b-qjs3chj1t5] { cursor: pointer; transition: .12s; }
.hist-table tbody tr:hover[b-qjs3chj1t5] { background: var(--accent-glow-soft); }
.hist-table tbody tr.row-selected[b-qjs3chj1t5] {
    background: rgba(79,168,255,0.08);
    box-shadow: inset 3px 0 0 var(--accent-glow);
}
.hist-table tbody tr.row-cancelled[b-qjs3chj1t5] { opacity: .5; }

.cell-date[b-qjs3chj1t5] { font-weight: 600; }
.cell-sub[b-qjs3chj1t5]  { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.cell-class[b-qjs3chj1t5] { display: flex; align-items: center; gap: 7px; }
.class-ico[b-qjs3chj1t5] {
    width: 24px; height: 24px; border-radius: var(--radius-sm); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
    background: linear-gradient(135deg, var(--accent-glow-soft), transparent);
    border: 1px solid var(--glass-border);
}

/* overlap avatars */
.av-stack[b-qjs3chj1t5] { display: flex; align-items: center; }
.av-chip[b-qjs3chj1t5] {
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; margin-left: -7px;
    background: var(--glass-bg); border: 1.5px solid var(--glass-border);
}
.av-chip:first-child[b-qjs3chj1t5] { margin-left: 0; }
.av-more[b-qjs3chj1t5] {
    margin-left: -7px; font-size: 10px; font-weight: 700; color: var(--text-dim);
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-glow-soft); border: 1.5px solid var(--glass-border);
}

.att-frac[b-qjs3chj1t5] { font-weight: 700; color: #4ade80; }
.att-slash[b-qjs3chj1t5] { color: var(--text-faint); font-weight: 400; }

/* ── pagination ── */
.pager[b-qjs3chj1t5] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-top: 1px solid var(--glass-border);
    flex-shrink: 0; background: var(--glass-bg-soft);
}
.pager-info[b-qjs3chj1t5] { font-size: 11.5px; color: var(--text-faint); }
.pager-btns[b-qjs3chj1t5] { display: flex; align-items: center; gap: 8px; }
.pager-cur[b-qjs3chj1t5] { font-size: 11.5px; color: var(--text-dim); }

/* ── detail panel (scrolls on its own) ── */
.detail-panel[b-qjs3chj1t5] {
    width: 360px; flex-shrink: 0;
    display: flex; flex-direction: column;
    border-radius: var(--radius-md);
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: 0 0 22px var(--accent-glow-soft);
    overflow: hidden;
}
.dp-head[b-qjs3chj1t5] {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}
.dp-title[b-qjs3chj1t5] { font-size: 15px; font-weight: 700; color: var(--text-main); }
.dp-sub[b-qjs3chj1t5]   { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }

.dp-scroll[b-qjs3chj1t5] { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; }

.dp-section[b-qjs3chj1t5] { margin-bottom: 18px; }
.dp-sec-title[b-qjs3chj1t5] {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--text-faint); margin-bottom: 10px;
}
.dp-row[b-qjs3chj1t5] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 0; font-size: 12.5px;
}
.dp-label[b-qjs3chj1t5] { color: var(--text-dim); }
.dp-val[b-qjs3chj1t5]   { color: var(--text-main); font-weight: 600; }
.dp-empty[b-qjs3chj1t5] { font-size: 12px; color: var(--text-faint); padding: 4px 0; }

.cancel-note[b-qjs3chj1t5] {
    margin-top: 8px; padding: 9px 11px; border-radius: var(--radius-sm);
    background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25);
    color: var(--text-error); font-size: 12px;
}

/* attendance rows */
.att-row[b-qjs3chj1t5] {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 0; border-bottom: 1px dashed var(--glass-border);
}
.att-row:last-child[b-qjs3chj1t5] { border-bottom: none; }
.att-av[b-qjs3chj1t5] {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--accent-text-on-fill);
    background: var(--accent-gradient);
}
.att-name[b-qjs3chj1t5] { flex: 1; font-size: 12.5px; color: var(--text-main); }

/* financial */
.fixed-note[b-qjs3chj1t5] {
    padding: 11px 13px; border-radius: var(--radius-sm);
    background: rgba(79,168,255,0.08); border: 1px solid rgba(79,168,255,0.22);
    color: var(--text-dim); font-size: 12px; line-height: 1.5;
}
.charge-row[b-qjs3chj1t5] {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0; border-bottom: 1px dashed var(--glass-border);
}
.charge-row:last-child[b-qjs3chj1t5] { border-bottom: none; }
.charge-name[b-qjs3chj1t5] { flex: 1; font-size: 12.5px; color: var(--text-main); }
.charge-amt[b-qjs3chj1t5]  { font-size: 12.5px; font-weight: 700; color: var(--text-main); }

/* summary */
.summary-box[b-qjs3chj1t5] {
    padding: 12px 14px; border-radius: var(--radius-sm);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    color: var(--text-dim); font-size: 12.5px; line-height: 1.6;
    white-space: pre-wrap;
    max-height: 90px; overflow: hidden; position: relative;
    transition: max-height .25s ease;
}
.summary-box:not(.expanded)[b-qjs3chj1t5]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px;
    background: linear-gradient(transparent, var(--glass-bg));
    pointer-events: none;
}
.summary-box.expanded[b-qjs3chj1t5] { max-height: 1000px; }

/* footer actions */
.dp-actions[b-qjs3chj1t5] {
    display: flex; gap: 8px; padding: 12px 16px;
    border-top: 1px solid var(--glass-border); flex-shrink: 0;
}
.dp-actions .btn[b-qjs3chj1t5] { flex: 1; justify-content: center; }

/* ── toast ── */
.hist-toast[b-qjs3chj1t5] {
    position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 60px);
    padding: 11px 18px; border-radius: var(--radius-md);
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border); box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    color: var(--text-main); font-size: 13px; font-weight: 600;
    opacity: 0; pointer-events: none; transition: .3s; z-index: 50;
}
.hist-toast.show[b-qjs3chj1t5] { opacity: 1; transform: translate(-50%, 0); }

/* ── responsive ── */
@media (max-width: 1100px) {
    .stat-grid[b-qjs3chj1t5] { grid-template-columns: repeat(2, 1fr); }
    .detail-panel[b-qjs3chj1t5] { width: 320px; }
}
@media (max-width: 880px) {
    .hist-body[b-qjs3chj1t5] { flex-direction: column; }
    .detail-panel[b-qjs3chj1t5] { width: 100%; max-height: 50%; }
}
/* /Components/School/MessagesPage.razor.rz.scp.css */
.placeholder-page[b-72j9ww02zd] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-72j9ww02zd]  { font-size: 48px; }
.ph-title[b-72j9ww02zd] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-72j9ww02zd]   { font-size: 14px; }
/* /Components/School/NotificationsPage.razor.rz.scp.css */
.placeholder-page[b-pbk0z7mhow] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-pbk0z7mhow]  { font-size: 48px; }
.ph-title[b-pbk0z7mhow] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-pbk0z7mhow]   { font-size: 14px; }
/* /Components/School/PaymentsList.razor.rz.scp.css */
/* ============================================================
   PaymentsList.razor.css  — CSS Isolation (scoped to this component)
   Mirrors payments.html, but every colour comes from theme.css
   (var(--...)) so all three themes (blue/gold/lilac) work.
   ============================================================ */

.pay-page[b-og280g38aq] {
    position: relative;
    z-index: 1;
    color: var(--text-main);
    max-width: 1100px;
    margin: 0 auto;
}

/* background pattern (grid + glow orbs + scan line), same recipe as Login */
.pay-page[b-og280g38aq]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 550px at 78% 8%, var(--orb-1), transparent 60%),
        radial-gradient(circle 450px at 8% 92%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 35%, rgba(0,0,0,0.9), transparent 85%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 35%, rgba(0,0,0,0.9), transparent 85%);
    animation: pay-orb-drift-b-og280g38aq 24s ease-in-out infinite alternate;
}

@keyframes pay-orb-drift-b-og280g38aq {
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: -30px 30px, 40px -30px, 0 0, 0 0; }
}

.pay-page[b-og280g38aq]::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: -2px;
    height: 2px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.4;
    background: linear-gradient(90deg, transparent, var(--scanline) 50%, transparent);
    animation: pay-scan-sweep-b-og280g38aq 7s linear infinite;
}

@keyframes pay-scan-sweep-b-og280g38aq {
    0%   { top: -2px; }
    100% { top: 100%; }
}

/* relative children sit above the fixed background layers */
.pay-page > *[b-og280g38aq] { position: relative; z-index: 2; }

/* HEADER */
.page-header[b-og280g38aq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.page-title[b-og280g38aq] { font-size: 20px; font-weight: 700; }
.page-sub[b-og280g38aq]   { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

/* TABS */
.main-tabs[b-og280g38aq] {
    display: flex;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 20px;
}
.main-tab[b-og280g38aq] {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-faint);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: .15s;
}
.main-tab:hover[b-og280g38aq]  { color: var(--text-dim); }
.main-tab.active[b-og280g38aq] { color: var(--text-dim); border-bottom-color: var(--accent-glow); }

/* ALERT / LOADING / EMPTY */
.pay-alert[b-og280g38aq] {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: rgba(248,113,113,.1);
    border: 1px solid rgba(248,113,113,.3);
    color: var(--text-error);
    font-size: 13px;
    margin-bottom: 14px;
}
.pay-loading[b-og280g38aq], .pay-empty[b-og280g38aq] {
    padding: 20px;
    text-align: center;
    color: var(--text-faint);
    font-size: 13px;
}

/* SUMMARY CARDS */
.summary-grid[b-og280g38aq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.sum-card[b-og280g38aq] {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.sum-icon[b-og280g38aq] { font-size: 18px; margin-bottom: 6px; }
.sum-val[b-og280g38aq]  { font-size: 22px; font-weight: 700; margin-bottom: 2px; }
.sum-lbl[b-og280g38aq]  { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .7px; }
.sum-card.s-total    .sum-val[b-og280g38aq] { color: var(--text-dim); }
.sum-card.s-paid     .sum-val[b-og280g38aq] { color: #4ade80; }
.sum-card.s-pending  .sum-val[b-og280g38aq] { color: #fbbf24; }
.sum-card.s-overdue  .sum-val[b-og280g38aq] { color: #f87171; }
.sum-card.s-sessions .sum-val[b-og280g38aq] { color: #a78bfa; }
.sum-card.s-sessions[b-og280g38aq] { border-color: rgba(167,139,250,.25); }

/* BUTTONS */
.btn[b-og280g38aq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: .15s;
}
.btn-primary[b-og280g38aq] {
    background: var(--accent-gradient);
    color: var(--accent-text-on-fill);
    box-shadow: 0 0 16px var(--accent-glow-soft);
}
.btn-primary:hover[b-og280g38aq] { transform: translateY(-1px); }
.btn-ghost[b-og280g38aq] {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--glass-border);
    color: var(--text-dim);
}
.btn-ghost:hover[b-og280g38aq] { background: var(--accent-glow-soft); color: var(--text-main); }
.btn-success[b-og280g38aq] {
    background: rgba(74,222,128,.12);
    border: 1px solid rgba(74,222,128,.3);
    color: #4ade80;
}
.btn-success:hover[b-og280g38aq] { background: rgba(74,222,128,.22); }
.btn-warn[b-og280g38aq] {
    background: rgba(251,191,36,.12);
    border: 1px solid rgba(251,191,36,.3);
    color: #fbbf24;
}
.btn-danger[b-og280g38aq] {
    background: rgba(248,113,113,.1);
    border: 1px solid rgba(248,113,113,.25);
    color: #f87171;
}
.btn-sm[b-og280g38aq] { padding: 6px 12px; font-size: 12px; }
.btn-xs[b-og280g38aq] { padding: 4px 9px;  font-size: 11px; }

/* BADGES */
.badge[b-og280g38aq] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 600;
}
.b-green[b-og280g38aq]  { background: rgba(74,222,128,.11);  color: #4ade80; border: 1px solid rgba(74,222,128,.22); }
.b-blue[b-og280g38aq]   { background: var(--accent-glow-soft); color: var(--text-dim); border: 1px solid var(--glass-border); }
.b-yellow[b-og280g38aq] { background: rgba(251,191,36,.11);  color: #fbbf24; border: 1px solid rgba(251,191,36,.22); }
.b-red[b-og280g38aq]    { background: rgba(248,113,113,.11); color: #f87171; border: 1px solid rgba(248,113,113,.22); }
.b-purple[b-og280g38aq] { background: rgba(167,139,250,.11); color: #a78bfa; border: 1px solid rgba(167,139,250,.22); }
.b-gray[b-og280g38aq]   { background: rgba(100,120,150,.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,.2); }

/* FILTER BAR */
.filter-bar[b-og280g38aq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.search-input[b-og280g38aq], .filter-select[b-og280g38aq] {
    padding: 8px 12px;
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: .18s;
}
.search-input[b-og280g38aq] { min-width: 200px; }
.search-input:focus[b-og280g38aq], .filter-select:focus[b-og280g38aq] { border-color: var(--accent-glow); }
.filter-select option[b-og280g38aq] { background: var(--bg-gradient); color: var(--text-main); }

/* SECTION LABEL */
.sec-lbl[b-og280g38aq] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .8px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.sec-lbl[b-og280g38aq]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

/* CHILD PAYMENT ROWS */
.payment-list[b-og280g38aq] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }

.pay-row[b-og280g38aq] {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    transition: .15s;
}
.pay-row:hover[b-og280g38aq]     { border-color: var(--accent-glow); }
.pay-row.overdue[b-og280g38aq]   { border-color: rgba(248,113,113,.3); }
.pay-row.paid[b-og280g38aq]      { opacity: .8; }

.pay-main[b-og280g38aq] { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.pay-av[b-og280g38aq] {
    width: 36px; height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-text-on-fill);
}
.pay-name[b-og280g38aq] { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.pay-meta[b-og280g38aq] { font-size: 11px; color: var(--text-dim); }
.pay-amounts[b-og280g38aq] { margin-left: auto; text-align: right; flex-shrink: 0; }
.pay-total[b-og280g38aq] { font-size: 15px; font-weight: 700; }
.pay-total.green[b-og280g38aq] { color: #4ade80; }
.pay-total.warn[b-og280g38aq]  { color: #fbbf24; }
.pay-total.red[b-og280g38aq]   { color: #f87171; }
.pay-paid-label[b-og280g38aq]  { font-size: 10px; color: var(--text-faint); margin-top: 1px; }
.pay-actions[b-og280g38aq] { display: flex; gap: 6px; flex-shrink: 0; margin-left: 12px; }

/* No-fee warning soft pulse */
@keyframes soft-pulse-b-og280g38aq { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.no-fee-pulse[b-og280g38aq] {
    color: #f87171;
    display: inline-block;
    animation: soft-pulse-b-og280g38aq 2.5s ease-in-out infinite;
}

/* inline detail */
.pay-detail[b-og280g38aq] {
    border-top: 1px solid var(--glass-border);
    background: var(--glass-bg-soft);
    padding: 12px 14px;
}

.detail-grid[b-og280g38aq] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.dg-item[b-og280g38aq] {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
}
.dg-label[b-og280g38aq] { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.dg-val[b-og280g38aq]   { font-size: 13px; font-weight: 600; color: var(--text-main); }
.dg-green[b-og280g38aq]  { color: #4ade80; }
.dg-warn[b-og280g38aq]   { color: #fbbf24; }
.dg-purple[b-og280g38aq] { color: #a78bfa; }

/* payment history */
.pay-history[b-og280g38aq] { margin-bottom: 12px; }
.ph-title[b-og280g38aq] { font-size: 11px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.ph-row[b-og280g38aq] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    background: rgba(74,222,128,.05);
    border: 1px solid rgba(74,222,128,.15);
    font-size: 12px;
    margin-bottom: 4px;
}
.ph-date[b-og280g38aq]   { color: var(--text-dim); min-width: 90px; align-self: flex-start; padding-top: 1px; }
.ph-info[b-og280g38aq]   { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-desc[b-og280g38aq]   { color: var(--text-main); }
.ph-sub[b-og280g38aq]    { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 10.5px; color: var(--text-faint); }
.ph-method[b-og280g38aq] { color: var(--text-dim); font-weight: 600; }
.ph-ref[b-og280g38aq], .ph-doc[b-og280g38aq] { color: var(--text-faint); }
.ph-amount[b-og280g38aq] { font-weight: 700; color: #4ade80; white-space: nowrap; align-self: flex-start; }
.ph-print[b-og280g38aq]  { flex-shrink: 0; padding: 4px 8px; align-self: flex-start; }
.ph-empty[b-og280g38aq]  { font-size: 12px; color: var(--text-faint); padding: 6px 0; }

/* per session charges */
.charges-list[b-og280g38aq] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.charge-row[b-og280g38aq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    font-size: 12px;
}
.charge-date[b-og280g38aq]   { color: var(--text-dim); min-width: 100px; }
.charge-class[b-og280g38aq]  { flex: 1; color: var(--text-main); }
.charge-amount[b-og280g38aq] { font-weight: 700; color: var(--text-dim); }
.charge-status[b-og280g38aq] { margin-left: 4px; }

/* add payment form */
.add-pay-form[b-og280g38aq] {
    background: var(--accent-glow-soft);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 12px;
}
.apf-title[b-og280g38aq] { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 10px; }
.apf-row[b-og280g38aq] { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: end; }
.apf-grid-4[b-og280g38aq] { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.apf-grid-2[b-og280g38aq] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.apf-grid-desc[b-og280g38aq] { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; }
.apf-actions[b-og280g38aq] { display: flex; gap: 6px; }
.apf-field[b-og280g38aq] { display: flex; flex-direction: column; gap: 4px; }
.apf-field label[b-og280g38aq] {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.apf-field input[b-og280g38aq], .apf-field select[b-og280g38aq], .apf-field textarea[b-og280g38aq] {
    padding: 7px 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: inherit;
    font-size: 12px;
    outline: none;
    transition: .18s;
}
.apf-field input:focus[b-og280g38aq], .apf-field select:focus[b-og280g38aq] { border-color: var(--accent-glow); }
.apf-field select option[b-og280g38aq] { background: var(--bg-gradient); color: var(--text-main); }

/* set fee form */
.set-fee-form[b-og280g38aq] {
    background: rgba(248,113,113,.04);
    border: 1px solid rgba(248,113,113,.2);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-bottom: 10px;
}
.sff-title[b-og280g38aq] { font-size: 12px; font-weight: 600; color: var(--text-error); margin-bottom: 10px; }
.sff-row[b-og280g38aq] { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: end; }

/* validation error highlight (set on a field when empty) */
.field-error[b-og280g38aq] {
    border-color: rgba(248,113,113,.6) !important;
    box-shadow: 0 0 0 3px rgba(248,113,113,.1) !important;
}

/* manual entry dashed button */
.manual-entry-btn[b-og280g38aq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--accent-glow-soft);
    border: 1px dashed var(--glass-border);
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    transition: .15s;
    margin-bottom: 14px;
}
.manual-entry-btn:hover[b-og280g38aq] { background: var(--accent-glow-soft); color: var(--text-main); }

/* ── TEACHER SALARY ── */
.teacher-pay-row[b-og280g38aq] {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    margin-bottom: 6px;
    transition: .15s;
}
.teacher-pay-row:hover[b-og280g38aq] { border-color: rgba(167,139,250,.3); }
.tp-main[b-og280g38aq] { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.tp-av[b-og280g38aq] {
    width: 36px; height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, #a78bfa, #c4b5fd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #1a0030;
}
.tp-name[b-og280g38aq] { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.tp-meta[b-og280g38aq] { font-size: 11px; color: var(--text-dim); }
.tp-amounts[b-og280g38aq] { margin-left: auto; text-align: right; flex-shrink: 0; }
.tp-pending[b-og280g38aq]  { font-size: 15px; font-weight: 700; color: #a78bfa; }
.tp-approved[b-og280g38aq] { font-size: 12px; color: #4ade80; margin-top: 2px; }
.tp-actions[b-og280g38aq]  { display: flex; gap: 6px; margin-left: 12px; flex-shrink: 0; }
.tp-manage[b-og280g38aq] { border-color: rgba(167,139,250,.3) !important; color: #a78bfa !important; }

/* earnings detail */
.earn-sec-lbl[b-og280g38aq] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 8px;
}
.select-all-row[b-og280g38aq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 5px 10px;
    background: rgba(255,255,255,.02);
    border-radius: var(--radius-sm);
}
.select-all-label[b-og280g38aq] { font-size: 11px; color: var(--text-dim); cursor: pointer; }
.sel-count[b-og280g38aq] { margin-left: auto; font-size: 11px; color: var(--text-faint); }
.sel-total[b-og280g38aq] { font-size: 12px; font-weight: 700; color: var(--text-faint); }
.sel-total.active[b-og280g38aq] { color: var(--text-dim); }
.earn-check[b-og280g38aq] { accent-color: var(--accent-glow); width: 13px; height: 13px; flex-shrink: 0; }
.earn-check-spacer[b-og280g38aq] { width: 13px; flex-shrink: 0; }

.earn-row[b-og280g38aq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    margin-bottom: 4px;
}
.earn-row.clickable[b-og280g38aq] { cursor: pointer; }
.earn-row.pending-row[b-og280g38aq]  { background: rgba(167,139,250,.05); border: 1px solid rgba(167,139,250,.15); }
.earn-row.approved-row[b-og280g38aq] { background: rgba(74,222,128,.05);  border: 1px solid rgba(74,222,128,.15); }
.earn-row.paid-row[b-og280g38aq]     { background: var(--glass-bg-soft);  border: 1px solid var(--glass-border); opacity: .75; }
.earn-date[b-og280g38aq]  { color: var(--text-dim); min-width: 100px; }
.earn-class[b-og280g38aq] { flex: 1; color: var(--text-main); }
.earn-amount[b-og280g38aq] { font-weight: 700; }
.earn-row.pending-row  .earn-amount[b-og280g38aq] { color: #a78bfa; }
.earn-row.approved-row .earn-amount[b-og280g38aq] { color: #4ade80; }
.earn-row.paid-row     .earn-amount[b-og280g38aq] { color: var(--text-faint); }
.earn-actions[b-og280g38aq] { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* TEACHER PAYMENT FORM */
.teacher-pay-form[b-og280g38aq] {
    border-top: 1px solid var(--glass-border);
    background: rgba(167,139,250,.03);
    padding: 14px 16px;
}
.tpf-title[b-og280g38aq] {
    font-size: 12px;
    font-weight: 600;
    color: #a78bfa;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tpf-grid[b-og280g38aq] { display: grid; gap: 10px; margin-bottom: 10px; }
.tpf-row-2[b-og280g38aq] { grid-template-columns: 1fr 1fr; }
.tpf-row-4[b-og280g38aq] { grid-template-columns: 1fr 1fr 1fr 1fr; }
.tpf-field[b-og280g38aq] { display: flex; flex-direction: column; gap: 4px; }
.tpf-field label[b-og280g38aq] {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.tpf-field .req[b-og280g38aq] { color: var(--text-error); }
.tpf-field input[b-og280g38aq], .tpf-field select[b-og280g38aq], .tpf-field textarea[b-og280g38aq] {
    padding: 7px 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: inherit;
    font-size: 12px;
    outline: none;
    transition: .18s;
}
.tpf-field input:focus[b-og280g38aq], .tpf-field select:focus[b-og280g38aq], .tpf-field textarea:focus[b-og280g38aq] {
    border-color: rgba(167,139,250,.5);
    box-shadow: 0 0 0 3px rgba(167,139,250,.08);
}
.tpf-field select option[b-og280g38aq] { background: var(--bg-gradient); color: var(--text-main); }
.tpf-field textarea[b-og280g38aq] { resize: none; height: 58px; }
.tpf-note[b-og280g38aq] { margin-bottom: 12px; }
.tpf-method-fields[b-og280g38aq] { margin-top: 0; }

.tpf-summary[b-og280g38aq] {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(167,139,250,.06);
    border: 1px solid rgba(167,139,250,.2);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.tpf-sum-item[b-og280g38aq] { text-align: center; }
.tpf-sum-val[b-og280g38aq] { font-size: 17px; font-weight: 700; }
.tpf-sum-lbl[b-og280g38aq] { font-size: 10px; color: var(--text-faint); margin-top: 1px; }
.tpf-sum-item.pending  .tpf-sum-val[b-og280g38aq] { color: #a78bfa; }
.tpf-sum-item.approved .tpf-sum-val[b-og280g38aq] { color: #fbbf24; }
.tpf-sum-item.paying   .tpf-sum-val[b-og280g38aq] { color: #4ade80; }
.tpf-divider[b-og280g38aq] { width: 1px; height: 36px; background: var(--glass-border); }
.tpf-paid-todate[b-og280g38aq] { font-size: 11px; color: var(--text-faint); }
.tpf-paid-todate strong[b-og280g38aq] { color: #4ade80; }
.tpf-actions[b-og280g38aq] { display: flex; gap: 8px; align-items: center; }
.tpf-hint[b-og280g38aq] { margin-left: auto; font-size: 11px; color: var(--text-faint); }

/* ── TOAST ── */
.pay-toast[b-og280g38aq] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    padding: 12px 18px;
    border-radius: var(--radius-md);
    background: rgba(74,222,128,.15);
    border: 1px solid rgba(74,222,128,.35);
    color: #4ade80;
    font-size: 13px;
    font-weight: 600;
    transform: translateY(80px);
    opacity: 0;
    transition: .3s;
    pointer-events: none;
}
.pay-toast.show[b-og280g38aq] { transform: translateY(0); opacity: 1; }
.pay-toast.warn[b-og280g38aq] {
    background: rgba(251,191,36,.15);
    border-color: rgba(251,191,36,.35);
    color: #fbbf24;
}

/* ════════════ PRINT DOCUMENT ════════════ */
.print-overlay[b-og280g38aq] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.55);
}
.print-doc[b-og280g38aq] {
    position: fixed;
    z-index: 1001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    color: #111;
    font-family: 'Times New Roman', serif;
    padding: 28px 32px;
    border-radius: var(--radius-md);
    width: 640px;
    max-width: 92vw;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
}

.pd-header[b-og280g38aq] { text-align: center; border-bottom: 2px solid #111; padding-bottom: 12px; margin-bottom: 16px; }
.pd-school[b-og280g38aq] { font-size: 18px; font-weight: bold; letter-spacing: .5px; }
.pd-doc-title[b-og280g38aq] { font-size: 14px; margin-top: 4px; }
.pd-doc-meta[b-og280g38aq] { display: flex; justify-content: space-between; font-size: 12px; margin-top: 8px; color: #444; flex-wrap: wrap; gap: 6px; }

.pd-section[b-og280g38aq] { margin-bottom: 14px; }
.pd-section-title[b-og280g38aq] {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .8px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
    margin-bottom: 8px;
    color: #333;
}
.pd-row[b-og280g38aq] { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; border-bottom: 1px dotted #ddd; }
.pd-row:last-child[b-og280g38aq] { border-bottom: none; }
.pd-label[b-og280g38aq] { color: #555; }
.pd-val[b-og280g38aq] { font-weight: bold; color: #111; }
.pd-range[b-og280g38aq] { font-size: 11px; color: #666; margin-bottom: 8px; }

.pd-contract[b-og280g38aq] { display: inline-block; padding: 3px 10px; border: 1px solid #333; border-radius: 3px; font-size: 12px; font-weight: bold; }

.pd-att-head[b-og280g38aq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: bold;
}
.pd-att-present[b-og280g38aq] { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.pd-att-absent[b-og280g38aq]  { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.pd-att-count[b-og280g38aq] { border-radius: 4px; padding: 3px 10px; font-size: 14px; font-weight: bold; color: #fff; }
.pd-att-count.present[b-og280g38aq] { background: #166534; }
.pd-att-count.absent[b-og280g38aq]  { background: #991b1b; }
.pd-att-dates[b-og280g38aq] {
    font-size: 11px;
    color: #555;
    padding: 6px 10px;
    border-radius: 4px;
    line-height: 1.8;
}
.pd-att-dates.present[b-og280g38aq] { background: #f8fffe; border: 1px solid #d1fae5; }
.pd-att-dates.absent[b-og280g38aq]  { background: #fffafa; border: 1px solid #fecaca; }

.pd-amount-box[b-og280g38aq] { text-align: center; padding: 12px; border: 2px solid #111; border-radius: 4px; margin: 10px 0; }
.pd-amount-main[b-og280g38aq] { font-size: 24px; font-weight: bold; }

.pd-signatures[b-og280g38aq] { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #ccc; }
.pd-sig-box[b-og280g38aq] { text-align: center; }
.pd-sig-line[b-og280g38aq] { border-bottom: 1px solid #111; height: 48px; margin-bottom: 6px; }
.pd-sig-label[b-og280g38aq] { font-size: 11px; color: #444; }
.pd-sig-name[b-og280g38aq] { font-size: 12px; font-weight: bold; margin-top: 3px; }
.pd-sig-date[b-og280g38aq] { border-bottom: 1px solid #aaa; font-size: 11px; color: #666; margin-top: 8px; padding-bottom: 4px; text-align: left; }

.pd-footer[b-og280g38aq] { text-align: center; font-size: 10px; color: #888; margin-top: 16px; padding-top: 10px; border-top: 1px solid #eee; }
.pd-buttons[b-og280g38aq] { display: flex; gap: 8px; margin-top: 16px; }

/* ledger report is table-heavy → wider sheet */
.print-doc.ledger-print[b-og280g38aq] { width: 780px; }

/* ledger tables (printed in the report) */
.pd-table[b-og280g38aq] { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.pd-table th[b-og280g38aq] {
    text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
    color: #555; border-bottom: 1.5px solid #333; padding: 5px 6px;
}
.pd-table td[b-og280g38aq] { padding: 4px 6px; border-bottom: 1px dotted #ddd; color: #111; }
.pd-table .num[b-og280g38aq] { text-align: right; white-space: nowrap; }
.pd-table .pd-empty[b-og280g38aq] { text-align: center; color: #888; font-style: italic; padding: 8px; }
.pd-table .pd-subtotal td[b-og280g38aq] {
    border-top: 1.5px solid #333; border-bottom: none;
    font-weight: bold; padding-top: 6px;
}
.pd-amount-main.net-pos[b-og280g38aq] { color: #166534; }
.pd-amount-main.net-neg[b-og280g38aq] { color: #991b1b; }

/* header action group (Export CSV + Print Payments List) */
.header-actions[b-og280g38aq] { display: flex; gap: 8px; align-items: center; }

/* ── ledger filter modal ── */
.ledger-overlay[b-og280g38aq] {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.55);
}
.ledger-modal[b-og280g38aq] {
    position: fixed; z-index: 1001; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 460px; max-width: 92vw;
    background: var(--glass-bg);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
    padding: 20px 22px;
}
.lm-title[b-og280g38aq] { font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 16px; }
.lm-field[b-og280g38aq] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.lm-field > label[b-og280g38aq] {
    font-size: 10px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .5px;
}
.lm-period[b-og280g38aq] { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }
.lm-row-2[b-og280g38aq] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lm-radios[b-og280g38aq] { display: flex; flex-direction: column; gap: 8px; }
.lm-radio[b-og280g38aq] { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-main); cursor: pointer; }
.lm-radio input[b-og280g38aq] { accent-color: var(--accent-glow); }
.ledger-modal input[type="date"][b-og280g38aq], .ledger-modal select[b-og280g38aq] {
    padding: 7px 10px; background: var(--glass-bg);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
}
.ledger-modal input[type="date"]:focus[b-og280g38aq], .ledger-modal select:focus[b-og280g38aq] { border-color: var(--accent-glow); }
.ledger-modal select option[b-og280g38aq] { background: var(--bg-gradient); color: var(--text-main); }
.lm-error[b-og280g38aq] {
    font-size: 12px; color: var(--text-error); margin-bottom: 10px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.3);
}
.lm-actions[b-og280g38aq] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* When printing, show only the print doc; hide the rest of the page chrome. */
@media print {
    .pay-page[b-og280g38aq], .pay-toast[b-og280g38aq], .print-overlay[b-og280g38aq], .no-print[b-og280g38aq] { display: none !important; }
    .print-doc[b-og280g38aq] {
        position: static;
        transform: none;
        box-shadow: none;
        width: 100%;
        max-width: 100%;
        max-height: none;
        border-radius: 0;
        margin: 0 auto;
    }
}
/* /Components/School/PaymentsPage.razor.rz.scp.css */
.placeholder-page[b-1on6gv90cs] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-1on6gv90cs]  { font-size: 48px; }
.ph-title[b-1on6gv90cs] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-1on6gv90cs]   { font-size: 14px; }
/* /Components/School/ReportsPage.razor.rz.scp.css */
.placeholder-page[b-q4silezd3c] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-q4silezd3c]  { font-size: 48px; }
.ph-title[b-q4silezd3c] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-q4silezd3c]   { font-size: 14px; }
/* /Components/School/RoomsList.razor.rz.scp.css */
/* ── ROOMS LIST — CSS Isolation (uses theme.css vars only) ── */

.rooms-page[b-8ux1i4dpim] {
    color: var(--text-main);
    padding: 20px 22px;
}

/* page header */
.page-header[b-8ux1i4dpim] {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.page-title[b-8ux1i4dpim] { font-size: 17px; font-weight: 700; color: var(--text-main); }
.page-sub[b-8ux1i4dpim]   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* buttons */
.btn[b-8ux1i4dpim] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm, 7px);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s;
}
.btn-primary[b-8ux1i4dpim] {
    background: var(--accent-gradient);
    color: var(--accent-text-on-fill);
    box-shadow: 0 0 16px var(--accent-glow-soft);
}
.btn-primary:hover[b-8ux1i4dpim] { transform: translateY(-1px); }
.btn-ghost[b-8ux1i4dpim] {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    color: var(--text-dim);
}
.btn-ghost:hover[b-8ux1i4dpim] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.btn-danger[b-8ux1i4dpim] {
    background: rgba(248,113,113,0.1);
    border: 1px solid rgba(248,113,113,0.25);
    color: #f87171;
}
.btn-danger:hover[b-8ux1i4dpim] { background: rgba(248,113,113,0.2); }
.btn-xs[b-8ux1i4dpim] { padding: 4px 10px; font-size: 11px; }
.btn:disabled[b-8ux1i4dpim] { opacity: .5; cursor: not-allowed; transform: none; }

/* alert */
.rooms-alert[b-8ux1i4dpim] {
    padding: 10px 14px; border-radius: var(--radius-sm, 7px); margin-bottom: 14px;
    background: rgba(248,113,113,0.09);
    border: 1px solid rgba(248,113,113,0.3);
    color: #f87171; font-size: 12px;
}

/* loading */
.rooms-loading[b-8ux1i4dpim] { font-size: 13px; color: var(--text-dim); padding: 24px 0; text-align: center; }

/* ── rooms grid ── */
.rooms-grid[b-8ux1i4dpim] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px; align-items: start;
}

/* room card */
.room-card[b-8ux1i4dpim] {
    position: relative;
    padding: 16px; border-radius: var(--radius-md, 11px);
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    transition: .15s; cursor: pointer;
}
.room-card:hover[b-8ux1i4dpim] {
    border-color: var(--accent-glow);
    background: var(--accent-glow-soft);
    transform: translateY(-2px);
}
.room-card.editing[b-8ux1i4dpim] {
    cursor: default;
    border-color: var(--accent-glow);
    background: var(--accent-glow-soft);
    transform: none;
    /* let an open card span the full grid width so the form has room */
    grid-column: 1 / -1;
}

.rc-main[b-8ux1i4dpim] { display: flex; align-items: center; gap: 12px; }
.room-icon[b-8ux1i4dpim] {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: var(--radius-sm, 7px);
    background: var(--accent-glow-soft);
    border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.rc-text[b-8ux1i4dpim] { flex: 1; min-width: 0; }
.room-name[b-8ux1i4dpim] { font-size: 14px; font-weight: 700; margin-bottom: 3px; color: var(--text-main); }
.room-cap[b-8ux1i4dpim]  { font-size: 12px; color: var(--text-dim); }

/* ── inline edit area inside a card ── */
.rc-edit[b-8ux1i4dpim] {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--glass-border);
    cursor: default;
}
.arc-form[b-8ux1i4dpim] { margin-top: 0; padding-top: 0; border-top: none; width: 100%; }
.form-title[b-8ux1i4dpim] { font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--accent-glow); }

.edit-row[b-8ux1i4dpim] {
    display: grid; grid-template-columns: 2fr 1fr 1fr;
    gap: 10px; margin-bottom: 12px;
}
.field[b-8ux1i4dpim] { display: flex; flex-direction: column; gap: 5px; }
.field label[b-8ux1i4dpim] {
    font-size: 10.5px; font-weight: 600; color: var(--text-dim);
    letter-spacing: .4px; text-transform: uppercase;
}
.field input[b-8ux1i4dpim], .field select[b-8ux1i4dpim] {
    padding: 8px 11px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm, 7px);
    color: var(--text-main); font-family: inherit; font-size: 13px;
    outline: none; transition: .18s;
}
.field input:focus[b-8ux1i4dpim], .field select:focus[b-8ux1i4dpim] {
    border-color: var(--accent-glow);
    box-shadow: 0 0 0 3px var(--accent-glow-soft);
}
.field select option[b-8ux1i4dpim] { background: #0c1a30; }

.edit-actions[b-8ux1i4dpim] { display: flex; gap: 6px; }
.rc-del[b-8ux1i4dpim] { margin-left: auto; }

/* ── confirm delete box ── */
.confirm-box[b-8ux1i4dpim] {
    padding: 12px 14px; border-radius: var(--radius-sm, 7px);
    background: rgba(248,113,113,0.07);
    border: 1px solid rgba(248,113,113,0.25);
}
.confirm-msg[b-8ux1i4dpim] { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.55; }
.confirm-msg strong[b-8ux1i4dpim] { color: var(--text-main); }
.confirm-actions[b-8ux1i4dpim] { display: flex; gap: 6px; }

/* ── add-room card (dashed) ── */
.add-room-card[b-8ux1i4dpim] {
    padding: 16px; border-radius: var(--radius-md, 11px);
    border: 2px dashed var(--glass-border);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; cursor: pointer; transition: .15s;
    min-height: 92px; color: var(--text-faint); font-size: 13px;
}
.add-room-card:hover[b-8ux1i4dpim] {
    border-color: var(--accent-glow); color: var(--accent-glow);
    background: var(--accent-glow-soft);
}
.add-room-card.editing[b-8ux1i4dpim] {
    cursor: default;
    border-style: solid;
    border-color: var(--accent-glow);
    background: var(--accent-glow-soft);
    align-items: stretch; justify-content: flex-start;
    grid-column: 1 / -1;
}
.arc-plus[b-8ux1i4dpim]  { font-size: 24px; }
.arc-label[b-8ux1i4dpim] { font-weight: 600; }

/* ── badges ── */
.badge[b-8ux1i4dpim] {
    display: inline-block; padding: 2px 7px; border-radius: 20px;
    font-size: 10.5px; font-weight: 600; flex-shrink: 0;
}
.b-green[b-8ux1i4dpim] { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-red[b-8ux1i4dpim]   { background: rgba(248,113,113,0.11); color: #f87171; border: 1px solid rgba(248,113,113,0.22); }
/* /Components/School/SalariesPage.razor.rz.scp.css */
/* ============================================================
   SalariesPage.razor.css — CSS Isolation (scoped to this component)
   Mirrors school-salaries-v2.html, but every surface/text colour comes
   from theme.css (var(--...)) so all themes (blue/gold/lilac/…) work.
   Status colours (green/yellow/red/blue) are intentionally literal so
   pending/approved/paid read the same under every theme.
   ============================================================ */

.sal-page[b-mrthhyjl39] {
    position: relative;
    z-index: 1;
    color: var(--text-main);
    max-width: 1100px;
    margin: 0 auto;
}

/* background pattern (grid + glow orbs), same recipe as Login/Payments */
.sal-bg[b-mrthhyjl39] {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 550px at 78% 8%, var(--orb-1), transparent 60%),
        radial-gradient(circle 450px at 8% 92%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 35%, rgba(0,0,0,0.9), transparent 85%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 35%, rgba(0,0,0,0.9), transparent 85%);
    animation: sal-orb-drift-b-mrthhyjl39 24s ease-in-out infinite alternate;
}

@keyframes sal-orb-drift-b-mrthhyjl39 {
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: -30px 30px, 40px -30px, 0 0, 0 0; }
}

/* ── buttons ── */
.btn[b-mrthhyjl39] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s;
}
.btn:disabled[b-mrthhyjl39] { opacity: .6; cursor: not-allowed; }
.btn-primary[b-mrthhyjl39] { background: var(--accent-gradient); color: var(--accent-text-on-fill); }
.btn-success[b-mrthhyjl39] { background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.3); color: #4ade80; }
.btn-success:hover[b-mrthhyjl39] { background: rgba(74,222,128,.22); }
.btn-warn[b-mrthhyjl39]    { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3); color: #fbbf24; }
.btn-warn:hover[b-mrthhyjl39] { background: rgba(251,191,36,.22); }
.btn-ghost[b-mrthhyjl39]   { background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-mrthhyjl39] { background: rgba(255,255,255,.08); }
.btn-sm[b-mrthhyjl39] { padding: 6px 12px; font-size: 12px; }
.btn-xs[b-mrthhyjl39] { padding: 4px 9px; font-size: 11px; }

/* ── badges ── */
.badge[b-mrthhyjl39] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-mrthhyjl39]  { background: rgba(74,222,128,.11);  color: #4ade80;          border: 1px solid rgba(74,222,128,.22); }
.b-yellow[b-mrthhyjl39] { background: rgba(251,191,36,.11);  color: #fbbf24;          border: 1px solid rgba(251,191,36,.22); }
.b-red[b-mrthhyjl39]    { background: rgba(248,113,113,.11); color: #f87171;          border: 1px solid rgba(248,113,113,.22); }
.b-blue[b-mrthhyjl39]   { background: rgba(79,168,255,.11);  color: #4fa8ff;          border: 1px solid rgba(79,168,255,.22); }
.b-gray[b-mrthhyjl39]   { background: rgba(100,120,150,.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,.2); }

/* ── page header ── */
.page-header[b-mrthhyjl39] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.page-title[b-mrthhyjl39]  { font-size: 18px; font-weight: 700; }
.page-sub[b-mrthhyjl39]    { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.sal-alert[b-mrthhyjl39] {
    background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3);
    color: #f87171; padding: 10px 14px; border-radius: var(--radius-sm);
    font-size: 13px; margin-bottom: 14px;
}
.sal-loading[b-mrthhyjl39], .sal-empty[b-mrthhyjl39] {
    text-align: center; color: var(--text-dim); padding: 40px 0; font-size: 14px;
}

/* ── period ── */
.period-bar[b-mrthhyjl39] {
    display: flex; gap: 4px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    padding: 4px; margin-bottom: 16px; width: fit-content;
}
.period-btn[b-mrthhyjl39] { padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--text-faint); cursor: pointer; }
.period-btn.active[b-mrthhyjl39] { background: var(--glass-bg); color: var(--text-main); box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* ── tabs ── */
.page-tabs[b-mrthhyjl39] {
    display: flex; gap: 4px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    padding: 4px; margin-bottom: 18px; width: fit-content;
}
.page-tab[b-mrthhyjl39] { padding: 7px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text-faint); cursor: pointer; }
.page-tab.active[b-mrthhyjl39] { background: var(--glass-bg); color: var(--text-main); box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* ── summary cards ── */
.sum-grid[b-mrthhyjl39] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.sum-card[b-mrthhyjl39] { padding: 14px 16px; border-radius: var(--radius-md); background: var(--glass-bg); border: 1px solid var(--glass-border); }
.sum-icon[b-mrthhyjl39] { font-size: 18px; margin-bottom: 5px; }
.sum-val[b-mrthhyjl39]  { font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
.sum-lbl[b-mrthhyjl39]  { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.s-green[b-mrthhyjl39]  { border-top: 2px solid rgba(74,222,128,.4); }  .s-green  .sum-val[b-mrthhyjl39] { color: #4ade80; }
.s-red[b-mrthhyjl39]    { border-top: 2px solid rgba(248,113,113,.4); } .s-red    .sum-val[b-mrthhyjl39] { color: #f87171; }
.s-yellow[b-mrthhyjl39] { border-top: 2px solid rgba(251,191,36,.4); }  .s-yellow .sum-val[b-mrthhyjl39] { color: #fbbf24; }
.s-blue[b-mrthhyjl39]   { border-top: 2px solid rgba(79,168,255,.4); }  .s-blue   .sum-val[b-mrthhyjl39] { color: #4fa8ff; }

/* ── teacher salary card ── */
.teacher-sal-card[b-mrthhyjl39] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 12px; }
.tsc-head[b-mrthhyjl39] { padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--glass-border); }
.tsc-av[b-mrthhyjl39] {
    width: 40px; height: 40px; border-radius: 50%; background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; color: var(--accent-text-on-fill); flex-shrink: 0;
}
.tsc-head-info[b-mrthhyjl39] { flex: 1; }
.tsc-name[b-mrthhyjl39]     { font-size: 13.5px; font-weight: 700; }
.tsc-spec[b-mrthhyjl39]     { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.tsc-contract[b-mrthhyjl39] { font-size: 10px; color: var(--text-faint); margin-top: 2px; }
.tsc-total[b-mrthhyjl39]      { margin-left: auto; text-align: right; flex-shrink: 0; }
.tsc-total-lbl[b-mrthhyjl39]  { font-size: 10px; color: var(--text-faint); }
.tsc-total-val[b-mrthhyjl39]  { font-size: 16px; font-weight: 800; color: #fbbf24; }
.tsc-total-badge[b-mrthhyjl39] { margin-top: 3px; }
.tsc-empty[b-mrthhyjl39] { padding: 16px; text-align: center; color: var(--text-faint); font-size: 12px; }

/* ── tables ── */
table[b-mrthhyjl39] { width: 100%; border-collapse: collapse; }
th[b-mrthhyjl39] {
    text-align: left; font-size: 10px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .6px; padding: 7px 16px;
    border-bottom: 1px solid var(--glass-border); background: var(--glass-bg-soft);
}
th.th-right[b-mrthhyjl39] { text-align: right; }
td[b-mrthhyjl39] { padding: 8px 16px; font-size: 12.5px; border-bottom: 1px solid var(--grid-line); vertical-align: middle; }
tr:last-child td[b-mrthhyjl39] { border-bottom: none; }
tr:hover td[b-mrthhyjl39] { background: rgba(127,168,255,.03); }
.td-dim[b-mrthhyjl39]    { color: var(--text-dim); font-size: 11.5px; }
.td-strong[b-mrthhyjl39] { font-weight: 600; }
.td-amount[b-mrthhyjl39] { font-weight: 700; }
.td-faint[b-mrthhyjl39]  { color: var(--text-faint); font-weight: 400; }
.td-right[b-mrthhyjl39]  { text-align: right; }
.td-mono[b-mrthhyjl39]   { font-family: ui-monospace, monospace; font-size: 11px; color: #4fa8ff; }
.td-empty[b-mrthhyjl39]  { text-align: center; color: var(--text-faint); padding: 18px; }
.td-paid-date[b-mrthhyjl39] { font-size: 10.5px; color: var(--text-faint); }

.tsc-foot[b-mrthhyjl39] {
    padding: 10px 16px; border-top: 1px solid var(--glass-border);
    background: var(--glass-bg-soft); display: flex; align-items: center;
    justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.tsc-foot-info[b-mrthhyjl39] { font-size: 11px; color: var(--text-dim); }
.tsc-foot-info strong[b-mrthhyjl39] { color: var(--text-main); }
.tsc-foot-actions[b-mrthhyjl39] { display: flex; gap: 6px; }

/* ── history panel ── */
.panel[b-mrthhyjl39] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 14px; }
.panel-head[b-mrthhyjl39] { padding: 12px 16px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; }
.panel-title[b-mrthhyjl39] { font-size: 12.5px; font-weight: 700; }
.filter-bar[b-mrthhyjl39] { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--glass-border); }
.f-search[b-mrthhyjl39], .f-select[b-mrthhyjl39] {
    padding: 6px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
}
.f-search[b-mrthhyjl39] { flex: 1; }
.f-search[b-mrthhyjl39]::placeholder { color: var(--text-faint); }
.f-select option[b-mrthhyjl39] { background: var(--glass-bg); color: var(--text-main); }

/* ── fixed card ── */
.fixed-card[b-mrthhyjl39] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 14px; }
.fc-av[b-mrthhyjl39] {
    width: 42px; height: 42px; border-radius: 50%; background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: var(--accent-text-on-fill); flex-shrink: 0;
}
.fc-info[b-mrthhyjl39]  { flex: 1; }
.fc-name[b-mrthhyjl39]  { font-size: 13.5px; font-weight: 700; }
.fc-meta[b-mrthhyjl39]  { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.fc-faint[b-mrthhyjl39] { color: var(--text-faint); }
.fc-right[b-mrthhyjl39] { text-align: right; min-width: 140px; }
.fc-amount[b-mrthhyjl39] { font-size: 17px; font-weight: 800; color: #fbbf24; }
.fc-badge[b-mrthhyjl39]  { margin-top: 4px; }
.fc-pay[b-mrthhyjl39]    { margin-top: 8px; }

/* ══ MODAL ══ */
.modal-overlay[b-mrthhyjl39] { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[b-mrthhyjl39] {
    background: var(--glass-bg); backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
    width: 520px; max-width: 100%; max-height: 85vh; display: flex; flex-direction: column;
}
.modal-head[b-mrthhyjl39] { padding: 14px 18px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-title[b-mrthhyjl39] { font-size: 14px; font-weight: 700; }
.modal-close[b-mrthhyjl39] {
    width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border);
    background: transparent; color: var(--text-dim); cursor: pointer; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.modal-body[b-mrthhyjl39] { padding: 16px 18px; overflow-y: auto; flex: 1; }
.modal-body[b-mrthhyjl39]::-webkit-scrollbar { width: 4px; }
.modal-body[b-mrthhyjl39]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; }
.modal-footer[b-mrthhyjl39] { padding: 12px 18px; border-top: 1px solid var(--glass-border); display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; }

/* ── pay summary box ── */
.pay-summary[b-mrthhyjl39] { background: rgba(79,168,255,.06); border: 1px solid rgba(79,168,255,.2); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; }
.ps-row[b-mrthhyjl39] { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }
.ps-lbl[b-mrthhyjl39] { color: var(--text-dim); }
.ps-val[b-mrthhyjl39] { font-weight: 600; }
.ps-mono[b-mrthhyjl39] { font-family: ui-monospace, monospace; color: #4fa8ff; }
.ps-strong[b-mrthhyjl39] { font-weight: 700; color: var(--text-main); }
.ps-total[b-mrthhyjl39] { padding-top: 8px; margin-top: 4px; border-top: 1px solid rgba(79,168,255,.2); }
.ps-big[b-mrthhyjl39] { font-size: 15px; font-weight: 800; color: #4fa8ff; }

/* ── form ── */
.form-grid[b-mrthhyjl39]  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.form-group[b-mrthhyjl39] { display: flex; flex-direction: column; gap: 4px; }
.form-group.full[b-mrthhyjl39] { grid-column: 1 / -1; }
.form-label[b-mrthhyjl39] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.form-input[b-mrthhyjl39], .form-select[b-mrthhyjl39], .form-textarea[b-mrthhyjl39] {
    width: 100%; padding: 7px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12.5px; outline: none;
}
.form-input:focus[b-mrthhyjl39], .form-select:focus[b-mrthhyjl39], .form-textarea:focus[b-mrthhyjl39] { border-color: rgba(79,168,255,.55); }
.form-input.err[b-mrthhyjl39], .form-select.err[b-mrthhyjl39] { border-color: rgba(248,113,113,.6); }
.form-select option[b-mrthhyjl39] { background: var(--glass-bg); color: var(--text-main); }
.form-textarea[b-mrthhyjl39] { resize: vertical; min-height: 52px; line-height: 1.5; }

/* ── toast ── */
.sal-toast[b-mrthhyjl39] {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--glass-bg); border: 1px solid rgba(74,222,128,.4);
    color: var(--text-main); padding: 10px 18px; border-radius: var(--radius-md);
    font-size: 13px; font-weight: 600; z-index: 400; opacity: 0; pointer-events: none;
    transition: .25s; backdrop-filter: blur(18px); box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.sal-toast.show[b-mrthhyjl39] { opacity: 1; transform: translateX(-50%) translateY(0); }
.sal-toast.warn[b-mrthhyjl39] { border-color: rgba(251,191,36,.4); }

/* ══ PAYSLIP (PRINT) ══ */
.print-overlay[b-mrthhyjl39] { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 350; }
#payslip[b-mrthhyjl39] {
    position: fixed; inset: 0; z-index: 360; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; padding: 24px 0 80px;
}
.payslip-wrap[b-mrthhyjl39] {
    font-family: 'Inter', sans-serif; background: #fff; color: #111;
    width: 210mm; max-width: 96%; min-height: 148mm; padding: 16mm 18mm;
    border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.ps-school-header[b-mrthhyjl39] { display: flex; align-items: center; gap: 16px; border-bottom: 2px solid #1a3a6b; padding-bottom: 12px; margin-bottom: 14px; }
.ps-school-logo[b-mrthhyjl39] {
    width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg,#1a3a6b,#2d6be4);
    display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 22px; flex-shrink: 0;
}
.ps-school-logo-img[b-mrthhyjl39] { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.ps-school-name[b-mrthhyjl39] { font-size: 18px; font-weight: 800; color: #1a3a6b; }
.ps-school-sub[b-mrthhyjl39]  { font-size: 11px; color: #666; margin-top: 2px; }
.ps-doc-info[b-mrthhyjl39] { margin-left: auto; text-align: right; }
.ps-doc-no[b-mrthhyjl39]   { font-size: 12px; font-weight: 700; color: #1a3a6b; }
.ps-doc-date[b-mrthhyjl39] { font-size: 11px; color: #666; margin-top: 2px; }

.ps-title[b-mrthhyjl39] { text-align: center; font-size: 16px; font-weight: 800; color: #1a3a6b; margin-bottom: 14px; letter-spacing: .5px; text-transform: uppercase; }

.ps-info-grid[b-mrthhyjl39] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.ps-info-box[b-mrthhyjl39] { background: #f5f7fa; border-radius: 6px; padding: 8px 12px; }
.ps-info-label[b-mrthhyjl39] { font-size: 9.5px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.ps-info-val[b-mrthhyjl39] { font-size: 13px; font-weight: 700; color: #111; }

.ps-table[b-mrthhyjl39] { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 12px; }
.ps-table th[b-mrthhyjl39] { background: #1a3a6b; color: #fff; padding: 7px 10px; text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.ps-table td[b-mrthhyjl39] { padding: 7px 10px; border-bottom: 1px solid #e8ecf0; }
.ps-table tr:last-child td[b-mrthhyjl39] { border-bottom: none; }
.ps-table tr:nth-child(even) td[b-mrthhyjl39] { background: #f9fafc; }
.ps-table .td-right[b-mrthhyjl39] { text-align: right; font-weight: 700; }
.ps-table .td-fixed[b-mrthhyjl39] { font-weight: 700; }
.ps-table .td-total[b-mrthhyjl39] { background: #eef2ff; font-weight: 800; color: #1a3a6b; }
.ps-table .td-total-amount[b-mrthhyjl39] { font-size: 14px; }

.ps-summary[b-mrthhyjl39] { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.ps-summary-box[b-mrthhyjl39] { background: #1a3a6b; color: #fff; border-radius: 8px; padding: 12px 20px; text-align: center; min-width: 200px; }
.ps-summary-lbl[b-mrthhyjl39] { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; opacity: .8; }
.ps-summary-val[b-mrthhyjl39] { font-size: 22px; font-weight: 800; margin-top: 4px; }

.ps-payment-info[b-mrthhyjl39] { background: #f0f7ff; border: 1px solid #c0d8f8; border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; font-size: 12px; }
.ps-payment-info-title[b-mrthhyjl39] { font-size: 10.5px; font-weight: 700; color: #1a3a6b; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.ps-payment-row[b-mrthhyjl39] { display: flex; gap: 20px; flex-wrap: wrap; }
.ps-payment-item[b-mrthhyjl39] { display: flex; flex-direction: column; gap: 2px; }
.ps-payment-item .lbl[b-mrthhyjl39] { font-size: 9.5px; color: #888; text-transform: uppercase; letter-spacing: .4px; }
.ps-payment-item .val[b-mrthhyjl39] { font-size: 12px; font-weight: 700; color: #111; }

.ps-signatures[b-mrthhyjl39] { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #ddd; }
.ps-sig-box[b-mrthhyjl39] { text-align: center; }
.ps-sig-line[b-mrthhyjl39] { border-bottom: 1px solid #333; margin-bottom: 6px; height: 32px; }
.ps-sig-name[b-mrthhyjl39] { font-size: 12px; font-weight: 700; color: #111; }
.ps-sig-title[b-mrthhyjl39] { font-size: 10px; color: #888; margin-top: 2px; }

.ps-footer[b-mrthhyjl39] { text-align: center; font-size: 9.5px; color: #aaa; margin-top: 12px; border-top: 1px solid #eee; padding-top: 8px; }

.ps-print-buttons[b-mrthhyjl39] { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 370; }

/* ── responsive ── */
@media (max-width: 720px) {
    .sum-grid[b-mrthhyjl39] { grid-template-columns: repeat(2, 1fr); }
    .form-grid[b-mrthhyjl39] { grid-template-columns: 1fr; }
    .filter-bar[b-mrthhyjl39] { flex-wrap: wrap; }
}

/* ══ PRINT ══
   #payslip is rendered as a sibling of .sal-page at the component root, so
   hiding .sal-page + overlays leaves only the payslip on the printed page
   (same recipe as PaymentsList). */
@media print {
    .sal-page[b-mrthhyjl39], .sal-toast[b-mrthhyjl39], .print-overlay[b-mrthhyjl39], .ps-print-buttons[b-mrthhyjl39], .no-print[b-mrthhyjl39] { display: none !important; }
    #payslip[b-mrthhyjl39] { position: static; padding: 0; overflow: visible; display: block; }
    .payslip-wrap[b-mrthhyjl39] { box-shadow: none; border: 1px solid #ccc; max-width: 100%; width: auto; }
}
/* /Components/School/SchedulePage.razor.rz.scp.css */
.placeholder-page[b-tz1sbum7xz] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-tz1sbum7xz]  { font-size: 48px; }
.ph-title[b-tz1sbum7xz] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-tz1sbum7xz]   { font-size: 14px; }
/* /Components/School/ScheduleView.razor.rz.scp.css */
/* ============================================================
   ScheduleView.razor.css — CSS Isolation (scoped to this component)
   Mirrors schedule-view.html. Structural colours come from theme.css
   (var(--...)) so all 3 themes work; the class-type accent colours
   (Speech/Sensory/…) stay literal because the legend pins them.
   ============================================================ */

.sched-page[b-krtivemf7t] {
    position: relative;
    z-index: 1;
    color: var(--text-main);
    max-width: 1280px;
    margin: 0 auto;
}

/* background pattern (grid + glow orbs + scan line), same recipe as Login */
.sched-page[b-krtivemf7t]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 550px at 78% 8%, var(--orb-1), transparent 60%),
        radial-gradient(circle 450px at 8% 92%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 35%, rgba(0,0,0,0.9), transparent 85%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 35%, rgba(0,0,0,0.9), transparent 85%);
    animation: sched-orb-drift-b-krtivemf7t 24s ease-in-out infinite alternate;
}

@keyframes sched-orb-drift-b-krtivemf7t {
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: -30px 30px, 40px -30px, 0 0, 0 0; }
}

.sched-page[b-krtivemf7t]::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: -2px;
    height: 2px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.4;
    background: linear-gradient(90deg, transparent, var(--scanline) 50%, transparent);
    animation: sched-scan-sweep-b-krtivemf7t 7s linear infinite;
}

@keyframes sched-scan-sweep-b-krtivemf7t {
    0%   { top: -2px; }
    100% { top: 100%; }
}

.sched-page > *[b-krtivemf7t] { position: relative; z-index: 2; }

/* HEADER */
.page-header[b-krtivemf7t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}
.page-title[b-krtivemf7t] { font-size: 20px; font-weight: 700; }
.page-sub[b-krtivemf7t]   { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

/* BUTTONS */
.btn[b-krtivemf7t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: .15s;
}
.btn-primary[b-krtivemf7t] {
    background: var(--accent-gradient);
    color: var(--accent-text-on-fill);
    box-shadow: 0 0 16px var(--accent-glow-soft);
}
.btn-primary:hover[b-krtivemf7t] { transform: translateY(-1px); }
.btn-ghost[b-krtivemf7t] {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--glass-border);
    color: var(--text-dim);
}
.btn-ghost:hover[b-krtivemf7t] { background: var(--accent-glow-soft); color: var(--text-main); }
.btn-sm[b-krtivemf7t] { padding: 6px 12px; font-size: 12px; }

/* TOOLBAR */
.toolbar[b-krtivemf7t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.view-switch[b-krtivemf7t] {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,.03);
    border-radius: var(--radius-sm);
    padding: 3px;
}
.view-btn[b-krtivemf7t] {
    padding: 6px 14px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-faint);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: .15s;
}
.view-btn.active[b-krtivemf7t] { background: var(--accent-glow-soft); color: var(--text-dim); }
.view-btn:hover:not(.active)[b-krtivemf7t] { color: var(--text-dim); }

.date-nav[b-krtivemf7t] { display: flex; align-items: center; gap: 6px; }
.nav-btn[b-krtivemf7t] {
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .15s;
}
.nav-btn:hover[b-krtivemf7t] { background: var(--accent-glow-soft); color: var(--text-main); }
.date-label[b-krtivemf7t] { font-size: 14px; font-weight: 700; min-width: 200px; text-align: center; }
.today-btn[b-krtivemf7t] {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--accent-glow-soft);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.today-btn:hover[b-krtivemf7t] { background: var(--accent-glow-soft); color: var(--text-main); }

.toolbar-spacer[b-krtivemf7t] { flex: 1; }

.filter-select[b-krtivemf7t] {
    padding: 7px 11px;
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: inherit;
    font-size: 12px;
    outline: none;
}
.filter-select option[b-krtivemf7t] { background: var(--bg-gradient); color: var(--text-main); }

/* LEGEND */
.legend[b-krtivemf7t] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 14px;
}
.legend-item[b-krtivemf7t] { display: flex; align-items: center; gap: 5px; }
.legend-dot[b-krtivemf7t] { width: 9px; height: 9px; border-radius: 3px; }
.legend-now[b-krtivemf7t] { margin-left: auto; }
.legend-now-line[b-krtivemf7t] { display: inline-block; width: 14px; height: 2px; background: #f87171; margin-right: 5px; }

/* ALERT / LOADING */
.sched-alert[b-krtivemf7t] {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: rgba(248,113,113,.1);
    border: 1px solid rgba(248,113,113,.3);
    color: var(--text-error);
    font-size: 13px;
    margin-bottom: 14px;
}
.sched-loading[b-krtivemf7t] { padding: 30px; text-align: center; color: var(--text-faint); font-size: 13px; }

/* ── DAY VIEW ── */
.day-list[b-krtivemf7t] { display: flex; flex-direction: column; gap: 8px; }
.day-sess-row[b-krtivemf7t] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-left: 4px solid;
    cursor: pointer;
    transition: .15s;
}
.day-sess-row:hover[b-krtivemf7t] { transform: translateX(3px); }
.day-sess-row.cancelled[b-krtivemf7t] { opacity: .5; }
.dsr-time[b-krtivemf7t] { min-width: 90px; }
.dsr-time .t1[b-krtivemf7t] { font-size: 13px; font-weight: 700; color: var(--text-dim); }
.dsr-time .t2[b-krtivemf7t] { font-size: 10px; color: var(--text-faint); }
.dsr-icon[b-krtivemf7t] {
    width: 34px; height: 34px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.dsr-name[b-krtivemf7t] { font-size: 13px; font-weight: 700; }
.dsr-meta[b-krtivemf7t] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.dsr-badge[b-krtivemf7t] { margin-left: auto; }

.day-empty[b-krtivemf7t] { text-align: center; padding: 50px; color: var(--text-faint); }
.day-empty .de-icon[b-krtivemf7t] { font-size: 42px; margin-bottom: 8px; opacity: .3; }

.day-add-row[b-krtivemf7t] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: var(--radius-md);
    border: 1.5px dashed var(--glass-border);
    color: var(--text-faint);
    font-size: 13px;
    cursor: pointer;
    transition: .15s;
    margin-top: 8px;
}
.day-add-row:hover[b-krtivemf7t] {
    border-color: var(--accent-glow);
    background: var(--accent-glow-soft);
    color: var(--text-main);
}
.dar-plus[b-krtivemf7t] { font-size: 16px; }

.past-day-note[b-krtivemf7t] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 10px;
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 8px;
}

/* ── WEEK VIEW ── */
.week-grid[b-krtivemf7t] {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--glass-bg-soft);
    backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
}
.week-head[b-krtivemf7t] {
    display: grid;
    grid-template-columns: 54px repeat(7, 1fr);
    border-bottom: 1px solid var(--glass-border);
}
.week-head-cell[b-krtivemf7t] {
    padding: 10px 6px;
    text-align: center;
    border-left: 1px solid var(--glass-border);
}
.week-head-cell:first-child[b-krtivemf7t] { border-left: none; }
.wh-day[b-krtivemf7t] { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; }
.wh-date[b-krtivemf7t] { font-size: 16px; font-weight: 700; margin-top: 2px; }
.week-head-cell.is-today .wh-date[b-krtivemf7t] {
    color: var(--accent-text-on-fill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--accent-gradient);
}

.week-body[b-krtivemf7t] {
    display: grid;
    grid-template-columns: 54px repeat(7, 1fr);
    position: relative;
    max-height: 640px;
    overflow-y: auto;
}
.week-body[b-krtivemf7t]::-webkit-scrollbar { width: 5px; }
.week-body[b-krtivemf7t]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 5px; }

.time-col[b-krtivemf7t] { display: flex; flex-direction: column; }
.time-slot[b-krtivemf7t] {
    height: 56px;
    border-top: 1px solid var(--grid-line);
    font-size: 10px;
    color: var(--text-faint);
    padding: 2px 4px 0 0;
    text-align: right;
    transform: translateY(-7px);
}

.day-col[b-krtivemf7t] { border-left: 1px solid var(--glass-border); position: relative; cursor: default; }
.day-col.is-today[b-krtivemf7t] { background: var(--accent-glow-soft); }
.day-col.is-past[b-krtivemf7t] {
    background: repeating-linear-gradient(
        45deg, rgba(255,255,255,0.012), rgba(255,255,255,0.012) 6px,
        transparent 6px, transparent 12px);
}
.hour-line[b-krtivemf7t] { height: 56px; border-top: 1px solid var(--grid-line); position: relative; }
.hour-line.future-slot[b-krtivemf7t] { cursor: pointer; }
.hour-line.future-slot:hover[b-krtivemf7t] { background: var(--accent-glow-soft); }

.add-slot-icon[b-krtivemf7t] {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.6);
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent-glow-soft);
    border: 1px solid var(--accent-glow);
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: .15s;
    pointer-events: none;
}
.hour-line.future-slot:hover .add-slot-icon[b-krtivemf7t] {
    display: flex;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* session block */
.sess-block[b-krtivemf7t] {
    position: absolute;
    left: 3px; right: 3px;
    border-radius: 6px;
    padding: 5px 7px;
    font-size: 10.5px;
    line-height: 1.35;
    cursor: pointer;
    overflow: hidden;
    border-left: 3px solid;
    transition: .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.sess-block:hover[b-krtivemf7t] { transform: scale(1.02); z-index: 5; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.sess-block.cancelled[b-krtivemf7t] { opacity: .45; border-left-style: dashed; text-decoration: line-through; }
.sb-time[b-krtivemf7t] { font-weight: 700; font-size: 10px; opacity: .85; }
.sb-name[b-krtivemf7t] { font-weight: 700; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-room[b-krtivemf7t] { font-size: 9.5px; opacity: .75; margin-top: 1px; }

/* class type colours (pinned literals — must match the legend) */
.ct-speech[b-krtivemf7t]       { background: rgba(79,168,255,.18);  border-color: #4fa8ff; color: #bfe2ff; }
.ct-behavioral[b-krtivemf7t]   { background: rgba(167,139,250,.18); border-color: #a78bfa; color: #ddd6ff; }
.ct-sensory[b-krtivemf7t]      { background: rgba(74,222,128,.18);  border-color: #4ade80; color: #c8f5d6; }
.ct-occupational[b-krtivemf7t] { background: rgba(251,191,36,.18);  border-color: #fbbf24; color: #fde9b3; }
.ct-online[b-krtivemf7t]       { background: rgba(244,114,182,.18); border-color: #f472b6; color: #fbcfe8; }
.ct-other[b-krtivemf7t]        { background: rgba(148,163,184,.18); border-color: #94a3b8; color: #e2e8f0; }

/* current time line */
.now-line[b-krtivemf7t] {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #f87171;
    z-index: 6;
    pointer-events: none;
}
.now-line[b-krtivemf7t]::before {
    content: "";
    position: absolute;
    left: -4px; top: -3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #f87171;
}

/* ── MONTH VIEW ── */
.month-grid[b-krtivemf7t] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--glass-bg-soft);
    backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
}
.month-head-cell[b-krtivemf7t] {
    padding: 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--glass-border);
}
.month-day-cell[b-krtivemf7t] {
    min-height: 92px;
    padding: 6px;
    border-right: 1px solid var(--grid-line);
    border-bottom: 1px solid var(--grid-line);
    position: relative;
    cursor: default;
}
.month-day-cell.other-month[b-krtivemf7t] { opacity: .3; }
.month-day-cell.is-today[b-krtivemf7t] { background: var(--accent-glow-soft); }
.month-day-cell.is-future[b-krtivemf7t] { cursor: pointer; }
.month-day-cell.is-past[b-krtivemf7t] { opacity: .55; }
.mdc-num[b-krtivemf7t] { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.month-day-cell.is-today .mdc-num[b-krtivemf7t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: var(--accent-text-on-fill);
}
.mdc-events[b-krtivemf7t] { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.mdc-event[b-krtivemf7t] {
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 3px;
    border-left: 2px solid;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.mdc-more[b-krtivemf7t] { font-size: 9px; color: var(--text-faint); padding-left: 5px; }

.mdc-add-icon[b-krtivemf7t] {
    position: absolute;
    top: 6px; right: 6px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent-glow-soft);
    border: 1px solid var(--accent-glow);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: .15s;
}
.month-day-cell.is-future:hover .mdc-add-icon[b-krtivemf7t] { display: flex; opacity: 1; }

/* badges */
.badge[b-krtivemf7t] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-krtivemf7t] { background: rgba(74,222,128,.11);  color: #4ade80; border: 1px solid rgba(74,222,128,.22); }
.b-red[b-krtivemf7t]   { background: rgba(248,113,113,.11); color: #f87171; border: 1px solid rgba(248,113,113,.22); }
.b-blue[b-krtivemf7t]  { background: var(--accent-glow-soft); color: var(--text-dim); border: 1px solid var(--glass-border); }

/* ── DETAIL PANEL ── */
.overlay[b-krtivemf7t] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 199;
    display: none;
}
.overlay.show[b-krtivemf7t] { display: block; }
.detail-panel[b-krtivemf7t] {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 400px;
    max-width: 92vw;
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    border-left: 1px solid var(--glass-border);
    z-index: 200;
    transform: translateX(100%);
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
}
.detail-panel.open[b-krtivemf7t] { transform: translateX(0); }
.dp-head[b-krtivemf7t] {
    padding: 18px 20px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 12px;
}
.dp-icon[b-krtivemf7t] {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.dp-title[b-krtivemf7t] { font-size: 15px; font-weight: 700; }
.dp-sub[b-krtivemf7t] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.dp-close[b-krtivemf7t] {
    margin-left: auto;
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 16px;
}
.dp-close:hover[b-krtivemf7t] { background: var(--accent-glow-soft); color: var(--text-main); }
.dp-body[b-krtivemf7t] { flex: 1; overflow-y: auto; padding: 18px 20px; }
.info-grid[b-krtivemf7t] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.info-box[b-krtivemf7t] {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
}
.ib-label[b-krtivemf7t] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.ib-val[b-krtivemf7t] { font-size: 13px; font-weight: 600; color: var(--text-main); }
.sec-lbl[b-krtivemf7t] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .8px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    margin-top: 16px;
}
.sec-lbl[b-krtivemf7t]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }
.child-chip-list[b-krtivemf7t] { display: flex; flex-wrap: wrap; gap: 6px; }
.child-chip[b-krtivemf7t] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 20px;
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    font-size: 11px;
}
.chip-empty[b-krtivemf7t] { font-size: 12px; color: var(--text-faint); }
.dp-actions[b-krtivemf7t] {
    padding: 14px 20px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    gap: 8px;
}
.dp-action[b-krtivemf7t] { flex: 1; justify-content: center; }
/* /Components/School/SchoolSettingsPage.razor.rz.scp.css */
.placeholder-page[b-zxa0tkngbc] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-zxa0tkngbc]  { font-size: 48px; }
.ph-title[b-zxa0tkngbc] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-zxa0tkngbc]   { font-size: 14px; }
/* /Components/School/SessionsList.razor.rz.scp.css */
/* ── page ── */
.sl-page[b-24corf7epq] { color: var(--text-main); }

.page-header[b-24corf7epq] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-title[b-24corf7epq] { font-size: 20px; font-weight: 700; color: var(--text-main); }
.page-sub[b-24corf7epq]   { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.sl-alert[b-24corf7epq] {
    padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px;
    background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3);
    color: #f87171; font-size: 13px;
}
.sl-loading[b-24corf7epq] { font-size: 13px; color: var(--text-dim); padding: 24px 0; text-align: center; }

/* ── buttons ── */
.btn[b-24corf7epq] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s;
}
.btn-primary[b-24corf7epq] { background: var(--accent-gradient); color: var(--accent-text-on-fill); box-shadow: 0 0 16px var(--accent-glow-soft); }
.btn-primary:hover[b-24corf7epq] { transform: translateY(-1px); }
.btn-primary:disabled[b-24corf7epq] { opacity: .6; cursor: default; transform: none; }
.btn-ghost[b-24corf7epq] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-24corf7epq] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.btn-sm[b-24corf7epq] { padding: 6px 12px; font-size: 12px; }
.btn-xs[b-24corf7epq] { padding: 4px 9px; font-size: 11px; }

.mark-present[b-24corf7epq] { background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.3); color: #4ade80; }
.mark-absent[b-24corf7epq]  { background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.3); color: #f87171; }
.mark-late[b-24corf7epq]    { background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); color: #fbbf24; }

/* ── badges ── */
.badge[b-24corf7epq] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-24corf7epq]  { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-blue[b-24corf7epq]   { background: rgba(79,168,255,0.11); color: var(--accent-glow); border: 1px solid rgba(79,168,255,0.22); }
.b-yellow[b-24corf7epq] { background: rgba(251,191,36,0.11); color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.b-purple[b-24corf7epq] { background: rgba(167,139,250,0.11); color: #a78bfa; border: 1px solid rgba(167,139,250,0.22); }
.b-gray[b-24corf7epq]   { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }

/* ── date bar ── */
.date-bar[b-24corf7epq] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: var(--radius-md);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    margin-bottom: 16px;
}
.date-nav[b-24corf7epq] {
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: transparent;
    color: var(--text-dim); cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center; transition: .15s;
}
.date-nav:hover[b-24corf7epq] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.date-display[b-24corf7epq] { flex: 1; text-align: center; font-size: 15px; font-weight: 700; color: var(--text-main); }
.date-sub[b-24corf7epq] { font-size: 11px; color: var(--text-dim); font-weight: 400; margin-left: 8px; }
.date-input[b-24corf7epq] {
    padding: 6px 10px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
}
.today-btn[b-24corf7epq] {
    padding: 6px 12px; border-radius: var(--radius-sm);
    border: 1px solid rgba(79,168,255,0.3); background: rgba(79,168,255,0.08);
    color: var(--accent-glow); font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.today-btn:hover[b-24corf7epq] { background: rgba(79,168,255,0.18); }

/* ── section label ── */
.sec-lbl[b-24corf7epq] {
    font-size: 11px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .8px;
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.sec-lbl[b-24corf7epq]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

/* ── sessions grid ── */
@keyframes pending-pulse-b-24corf7epq {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(251,191,36,0); }
    50%      { opacity: .7; box-shadow: 0 0 0 4px rgba(251,191,36,0.12); }
}
.sessions-grid[b-24corf7epq] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px; margin-bottom: 20px;
}
.session-card[b-24corf7epq] {
    padding: 12px 14px; border-radius: var(--radius-md);
    background: var(--glass-bg-soft); backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    cursor: pointer; transition: .2s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.session-card:hover[b-24corf7epq] {
    border-color: rgba(79,168,255,0.35); transform: translateY(-2px);
    background: var(--glass-bg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.session-card.selected[b-24corf7epq] {
    border-color: rgba(79,168,255,0.55); background: rgba(79,168,255,0.07);
    box-shadow: 0 0 20px rgba(79,168,255,0.12), inset 0 1px 0 rgba(79,168,255,0.1);
}
.session-card.completed[b-24corf7epq] { opacity: .65; }
.session-card.pending-card[b-24corf7epq] {
    animation: pending-pulse-b-24corf7epq 2.2s ease-in-out infinite;
    border-color: rgba(251,191,36,0.3);
}

.sc-top[b-24corf7epq] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sc-icon[b-24corf7epq] {
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(79,168,255,0.18), rgba(125,211,252,0.08));
    border: 1px solid rgba(79,168,255,0.22);
    display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
}
.sc-time-block[b-24corf7epq] { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.sc-time-row[b-24corf7epq] { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.sc-time-label[b-24corf7epq] { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; min-width: 28px; }
.sc-time-label.start[b-24corf7epq] { color: var(--accent-glow); }
.sc-time-label.end[b-24corf7epq]   { color: #a78bfa; }
.sc-time-val[b-24corf7epq] { font-weight: 700; font-size: 12px; }
.sc-time-val.start[b-24corf7epq] { color: var(--accent-glow); }
.sc-time-val.end[b-24corf7epq]   { color: #a78bfa; }

.sc-class-name[b-24corf7epq] { font-size: 11px; font-weight: 700; color: #fbbf24; margin-top: 2px; letter-spacing: .2px; }
.sc-teacher[b-24corf7epq] { font-size: 10px; color: var(--text-faint); margin-bottom: 8px; }

.sc-stats[b-24corf7epq] { display: flex; gap: 5px; padding-top: 8px; border-top: 1px solid rgba(100,170,255,0.1); }
.sc-stat[b-24corf7epq] { flex: 1; text-align: center; padding: 4px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.02); }
.sc-stat-val[b-24corf7epq] { font-size: 14px; font-weight: 700; }
.sc-stat-lbl[b-24corf7epq] { font-size: 9px; color: var(--text-faint); margin-top: 1px; }
.sc-stat.present .sc-stat-val[b-24corf7epq] { color: #4ade80; }
.sc-stat.absent  .sc-stat-val[b-24corf7epq] { color: #f87171; }
.sc-stat.total   .sc-stat-val[b-24corf7epq] { color: var(--text-dim); }

.sc-footer[b-24corf7epq] { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.teacher-badge[b-24corf7epq] { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-faint); text-transform: capitalize; }
.teacher-dot[b-24corf7epq] { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); }
.teacher-dot.present[b-24corf7epq] { background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,.5); }

/* ── attendance panel ── */
.att-panel[b-24corf7epq] {
    max-width: 720px;
    background: var(--glass-bg);
    border: 1px solid var(--accent-glow-soft);
    border-radius: var(--radius-md); overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px var(--glass-border);
}
.att-head[b-24corf7epq] { padding: 11px 14px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 10px; }
.att-icon[b-24corf7epq] {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(79,168,255,0.2), rgba(125,211,252,0.1));
    border: 1px solid rgba(79,168,255,0.25);
    display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.att-title[b-24corf7epq] { font-size: 14px; font-weight: 700; color: var(--text-main); }
.att-sub[b-24corf7epq] { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.att-actions[b-24corf7epq] { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* quick stats */
.quick-stats[b-24corf7epq] { display: flex; gap: 0; border-bottom: 1px solid var(--glass-border); }
.qs-item[b-24corf7epq] { flex: 1; padding: 8px 10px; text-align: center; border-right: 1px solid var(--glass-border); }
.qs-item:last-child[b-24corf7epq] { border-right: none; }
.qs-val[b-24corf7epq] { font-size: 17px; font-weight: 700; margin-bottom: 1px; }
.qs-lbl[b-24corf7epq] { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; }
.qs-present .qs-val[b-24corf7epq] { color: #4ade80; }
.qs-absent  .qs-val[b-24corf7epq] { color: #f87171; }
.qs-late    .qs-val[b-24corf7epq] { color: #fbbf24; }
.qs-excused .qs-val[b-24corf7epq] { color: #a78bfa; }
.qs-total   .qs-val[b-24corf7epq] { color: var(--text-dim); }

/* toolbar */
.att-toolbar[b-24corf7epq] { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--glass-border); flex-wrap: wrap; }
.mark-all-row[b-24corf7epq] { display: flex; gap: 6px; }
.toolbar-hint[b-24corf7epq] { font-size: 10px; color: var(--text-faint); margin-left: auto; }

/* children list */
.child-att-list[b-24corf7epq] { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.child-att-row[b-24corf7epq] {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: var(--radius-sm);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border); transition: .15s;
}
.child-att-row:hover[b-24corf7epq] { background: var(--accent-glow-soft); }
.child-att-row.is-present[b-24corf7epq] { background: rgba(74,222,128,0.05); border-color: rgba(74,222,128,0.2); }
.child-att-row.is-absent[b-24corf7epq]  { background: rgba(248,113,113,0.05); border-color: rgba(248,113,113,0.2); }
.child-att-row.is-late[b-24corf7epq]    { background: rgba(251,191,36,0.05); border-color: rgba(251,191,36,0.2); }
.child-att-row.is-excused[b-24corf7epq] { background: rgba(167,139,250,0.05); border-color: rgba(167,139,250,0.2); }

.ca-av[b-24corf7epq] {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--accent-text-on-fill);
}
.ca-text[b-24corf7epq] { flex: 1; }
.ca-name[b-24corf7epq] { font-size: 12px; font-weight: 600; color: var(--text-main); }
.ca-level[b-24corf7epq] { font-size: 10px; color: var(--text-dim); }

/* status buttons */
.status-btns[b-24corf7epq] { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.status-btn[b-24corf7epq] {
    padding: 4px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 700;
    cursor: pointer; border: 1px solid; transition: .15s; font-family: inherit; background: transparent;
}
.sb-present[b-24corf7epq] { border-color: rgba(74,222,128,0.3); color: rgba(74,222,128,0.6); }
.sb-present:hover[b-24corf7epq], .sb-present.active[b-24corf7epq] { background: rgba(74,222,128,0.15); color: #4ade80; border-color: rgba(74,222,128,0.5); box-shadow: 0 0 10px rgba(74,222,128,0.2); }
.sb-absent[b-24corf7epq] { border-color: rgba(248,113,113,0.3); color: rgba(248,113,113,0.6); }
.sb-absent:hover[b-24corf7epq], .sb-absent.active[b-24corf7epq] { background: rgba(248,113,113,0.15); color: #f87171; border-color: rgba(248,113,113,0.5); }
.sb-late[b-24corf7epq] { border-color: rgba(251,191,36,0.3); color: rgba(251,191,36,0.6); }
.sb-late:hover[b-24corf7epq], .sb-late.active[b-24corf7epq] { background: rgba(251,191,36,0.15); color: #fbbf24; border-color: rgba(251,191,36,0.5); }
.sb-excused[b-24corf7epq] { border-color: rgba(167,139,250,0.3); color: rgba(167,139,250,0.6); }
.sb-excused:hover[b-24corf7epq], .sb-excused.active[b-24corf7epq] { background: rgba(167,139,250,0.15); color: #a78bfa; border-color: rgba(167,139,250,0.5); }

.ca-note[b-24corf7epq] {
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: transparent;
    color: var(--text-faint); cursor: pointer; font-size: 13px;
    display: flex; align-items: center; justify-content: center; transition: .15s; flex-shrink: 0;
}
.ca-note:hover[b-24corf7epq] { background: var(--accent-glow-soft); color: var(--text-main); }
.ca-note.has-note[b-24corf7epq] { color: #fbbf24; border-color: rgba(251,191,36,0.3); }

.ca-note-form[b-24corf7epq] { padding: 8px 14px 8px 62px; border-top: 1px dashed rgba(79,168,255,0.15); display: none; }
.ca-note-form.show[b-24corf7epq] { display: flex; gap: 8px; align-items: center; }
.ca-note-input[b-24corf7epq] {
    flex: 1; padding: 6px 10px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
}
.ca-note-input:focus[b-24corf7epq] { border-color: var(--accent-glow); }

/* teacher attendance */
.teacher-att-section[b-24corf7epq] { padding: 10px 12px; border-top: 1px solid var(--glass-border); background: rgba(255,255,255,0.015); }
.ta-title[b-24corf7epq] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 8px; }
.ta-row[b-24corf7epq] {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px;
    border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
}
.ta-av[b-24corf7epq] {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #a78bfa, #c4b5fd);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #1a0030;
}
.ta-text[b-24corf7epq] { flex: 1; }
.ta-name[b-24corf7epq] { font-size: 13px; font-weight: 600; color: var(--text-main); }
.ta-role[b-24corf7epq] { font-size: 11px; color: var(--text-dim); }

/* billing preview */
.billing-preview[b-24corf7epq] { padding: 10px 12px; border-top: 1px solid var(--glass-border); background: rgba(79,168,255,0.03); }
.bp-title[b-24corf7epq] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 8px; }
.bp-row[b-24corf7epq] { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); padding: 4px 0; }
.bp-row .bp-name[b-24corf7epq] { flex: 1; color: var(--text-main); }
.bp-row-muted[b-24corf7epq] { opacity: .4; }
.bp-amount[b-24corf7epq] { font-weight: 700; color: var(--accent-glow); }
.bp-amount.bp-teacher[b-24corf7epq] { color: #a78bfa; }
.bp-status-auto[b-24corf7epq] { font-size: 10px; color: var(--text-faint); }
.bp-no-charge[b-24corf7epq] { font-size: 11px; color: var(--text-faint); }
.bp-note[b-24corf7epq] { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.bp-note-top[b-24corf7epq] { margin-top: 0; margin-bottom: 6px; }
.bp-divider[b-24corf7epq] { height: 1px; background: var(--glass-border); margin: 8px 0; }

/* save bar */
.save-bar[b-24corf7epq] { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--glass-border); background: var(--glass-bg-soft); }
.save-hint[b-24corf7epq] { font-size: 11px; flex: 1; }
.save-hint.hint-ok[b-24corf7epq]   { color: #4ade80; }
.save-hint.hint-warn[b-24corf7epq] { color: #fbbf24; }

/* empty */
.empty-day[b-24corf7epq] { text-align: center; padding: 50px 20px; color: var(--text-faint); }
.empty-day .ei[b-24corf7epq] { font-size: 48px; margin-bottom: 10px; opacity: .3; }

/* toast */
.sl-toast[b-24corf7epq] {
    position: fixed; bottom: 24px; right: 24px; z-index: 999;
    padding: 12px 18px; border-radius: var(--radius-md);
    background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.35);
    color: #4ade80; font-size: 13px; font-weight: 600;
    transform: translateY(80px); opacity: 0; transition: .3s; pointer-events: none;
}
.sl-toast.warn[b-24corf7epq] { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.35); color: #fbbf24; }
.sl-toast.show[b-24corf7epq] { transform: translateY(0); opacity: 1; }
/* /Components/School/TeachersList.razor.rz.scp.css */
/* ============================================================
   TeachersList.razor.css — School Admin → Teachers (rates/affiliations/docs)
   CSS Isolation; all colours from theme.css var(--…).
   Mirrors school-teachers-list.html. §30: dual teacher/parent rate.
   ============================================================ */

.tl-page[b-4t8fzny5sz] { color: var(--text-main); }

.page-header[b-4t8fzny5sz] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.page-title[b-4t8fzny5sz] { font-size: 18px; font-weight: 700; }
.page-sub[b-4t8fzny5sz]   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ── buttons ── */
.btn[b-4t8fzny5sz] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s; text-decoration: none;
}
.btn:disabled[b-4t8fzny5sz] { opacity: .5; cursor: not-allowed; }
.btn-primary[b-4t8fzny5sz] { background: var(--accent-gradient); color: var(--accent-text-on-fill); box-shadow: 0 0 16px var(--accent-glow-soft); }
.btn-primary:not(:disabled):hover[b-4t8fzny5sz] { transform: translateY(-1px); }
.btn-ghost[b-4t8fzny5sz] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-4t8fzny5sz] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.btn-danger[b-4t8fzny5sz] { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25); color: #f87171; }
.btn-success[b-4t8fzny5sz] { background: linear-gradient(135deg, #4ade80, #86efac); color: #001428; }
.btn-sm[b-4t8fzny5sz] { padding: 6px 12px; font-size: 12px; }
.btn-xs[b-4t8fzny5sz] { padding: 4px 9px; font-size: 11px; }

/* ── badges ── */
.badge[b-4t8fzny5sz] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-4t8fzny5sz]  { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-yellow[b-4t8fzny5sz] { background: rgba(251,191,36,0.11); color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.b-gray[b-4t8fzny5sz]   { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }

/* ── filter bar ── */
.filter-bar[b-4t8fzny5sz] { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.f-search[b-4t8fzny5sz], .f-select[b-4t8fzny5sz] {
    padding: 7px 11px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
}
.f-search[b-4t8fzny5sz] { min-width: 200px; }
.f-search[b-4t8fzny5sz]::placeholder { color: var(--text-faint); }
.f-search:focus[b-4t8fzny5sz], .f-select:focus[b-4t8fzny5sz] { border-color: var(--accent-glow); }
.f-select option[b-4t8fzny5sz] { background: #0c1a30; color: var(--text-main); }

.tl-alert[b-4t8fzny5sz] { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); color: #f87171; font-size: 13px; }
.tl-loading[b-4t8fzny5sz] { font-size: 13px; color: var(--text-dim); padding: 24px 0; text-align: center; }
.tl-empty[b-4t8fzny5sz] { text-align: center; padding: 50px; color: var(--text-faint); }
.tl-empty .ei[b-4t8fzny5sz] { font-size: 42px; margin-bottom: 8px; opacity: .3; }
.tl-empty-sm[b-4t8fzny5sz] { font-size: 12px; color: var(--text-faint); padding: 4px 0; }

/* ── teachers grid ── */
.teachers-grid[b-4t8fzny5sz] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.teacher-card[b-4t8fzny5sz] {
    padding: 15px; border-radius: var(--radius-md);
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border); cursor: pointer; transition: .2s;
}
.teacher-card:hover[b-4t8fzny5sz] { border-color: rgba(79,168,255,0.35); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.tc-top[b-4t8fzny5sz] { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.tc-av[b-4t8fzny5sz] {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
}
.tc-av img[b-4t8fzny5sz] { width: 100%; height: 100%; object-fit: cover; }
.tc-name[b-4t8fzny5sz] { font-size: 13.5px; font-weight: 700; }
.tc-role[b-4t8fzny5sz] { font-size: 10.5px; color: var(--text-dim); }
.tc-specs[b-4t8fzny5sz] { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.tc-spec-chip[b-4t8fzny5sz] { padding: 2px 8px; border-radius: 20px; font-size: 9.5px; font-weight: 600; background: rgba(79,168,255,0.1); color: var(--accent-glow); border: 1px solid rgba(79,168,255,0.2); }
.tc-stats[b-4t8fzny5sz] { display: flex; gap: 6px; padding-top: 9px; border-top: 1px solid var(--glass-border); }
.tc-stat[b-4t8fzny5sz] { flex: 1; text-align: center; }
.tc-stat-val[b-4t8fzny5sz] { font-size: 13px; font-weight: 700; }
.tc-stat-lbl[b-4t8fzny5sz] { font-size: 8.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; margin-top: 1px; }
.tc-footer[b-4t8fzny5sz] { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.license-warn[b-4t8fzny5sz] { display: flex; align-items: center; gap: 4px; font-size: 9.5px; color: #fbbf24; }

/* ── detail panel ── */
.overlay[b-4t8fzny5sz] { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 199; display: none; }
.overlay.show[b-4t8fzny5sz] { display: block; }
.detail-panel[b-4t8fzny5sz] {
    position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 94vw;
    background: var(--glass-bg); backdrop-filter: blur(24px);
    border-left: 1px solid var(--glass-border); z-index: 200;
    transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column;
}
.detail-panel.open[b-4t8fzny5sz] { transform: translateX(0); }
.dp-head[b-4t8fzny5sz] { padding: 18px 20px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dp-av[b-4t8fzny5sz] {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700;
}
.dp-av img[b-4t8fzny5sz] { width: 100%; height: 100%; object-fit: cover; }
.dp-title[b-4t8fzny5sz] { font-size: 15px; font-weight: 700; }
.dp-sub[b-4t8fzny5sz] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.dp-close[b-4t8fzny5sz] { margin-left: auto; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 16px; }
.dp-close:hover[b-4t8fzny5sz] { background: var(--accent-glow-soft); color: var(--text-main); }

.dp-tabs[b-4t8fzny5sz] { display: flex; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; padding: 0 20px; }
.dp-tab[b-4t8fzny5sz] { padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--text-faint); cursor: pointer; border-bottom: 2px solid transparent; transition: .15s; white-space: nowrap; }
.dp-tab:hover[b-4t8fzny5sz] { color: var(--text-dim); }
.dp-tab.active[b-4t8fzny5sz] { color: var(--accent-glow); border-bottom-color: var(--accent-glow); }

.dp-body[b-4t8fzny5sz] { flex: 1; overflow-y: auto; padding: 18px 20px; min-height: 0; }
.dp-body[b-4t8fzny5sz]::-webkit-scrollbar { width: 5px; }
.dp-body[b-4t8fzny5sz]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 5px; }

.sec-lbl[b-4t8fzny5sz] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .8px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; margin-top: 18px; }
.sec-lbl[b-4t8fzny5sz]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

.info-grid[b-4t8fzny5sz] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-box[b-4t8fzny5sz] { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); }
.ib-label[b-4t8fzny5sz] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.ib-val[b-4t8fzny5sz] { font-size: 13px; font-weight: 600; color: var(--text-main); }

/* ── rates (editable) ── */
.rates-intro[b-4t8fzny5sz] { font-size: 11px; color: var(--text-faint); margin-bottom: 12px; line-height: 1.6; }
.rate-card[b-4t8fzny5sz] { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); margin-bottom: 8px; }
.rate-card-head[b-4t8fzny5sz] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rate-spec[b-4t8fzny5sz] { font-size: 12.5px; font-weight: 700; }
.rate-effective[b-4t8fzny5sz] { font-size: 9.5px; color: var(--text-faint); }
.rate-dual-row[b-4t8fzny5sz] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rate-field-lbl[b-4t8fzny5sz] { font-size: 9.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; display: block; }
.rate-input-wrap[b-4t8fzny5sz] { display: flex; align-items: center; gap: 4px; }
.rate-currency[b-4t8fzny5sz] { font-size: 12px; color: var(--text-faint); }
.rate-input[b-4t8fzny5sz] { width: 100%; padding: 6px 9px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 13px; font-weight: 700; outline: none; transition: .18s; }
.rate-input:focus[b-4t8fzny5sz] { border-color: var(--accent-glow); box-shadow: 0 0 0 3px var(--accent-glow-soft); }
.rate-input.modified[b-4t8fzny5sz] { border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.05); }
.rate-input.parent-rate[b-4t8fzny5sz] { color: var(--accent-glow); }
.rate-input.teacher-rate[b-4t8fzny5sz] { color: #a78bfa; }
.rate-margin-row[b-4t8fzny5sz] { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--glass-border); font-size: 11px; }
.rate-margin-lbl[b-4t8fzny5sz] { color: var(--text-faint); }
.rate-margin-val[b-4t8fzny5sz] { font-weight: 700; }
.rate-margin-val.positive[b-4t8fzny5sz] { color: #4ade80; }
.rate-margin-val.zero[b-4t8fzny5sz] { color: #f87171; }
.rate-margin-warn[b-4t8fzny5sz] { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10px; color: #f87171; }
.add-rate-row[b-4t8fzny5sz] { display: flex; gap: 8px; margin-top: 10px; }
.add-rate-row select[b-4t8fzny5sz] { flex: 1; padding: 7px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12px; outline: none; }
.add-rate-row select option[b-4t8fzny5sz] { background: #0c1a30; color: var(--text-main); }

.save-bar[b-4t8fzny5sz] { display: flex; align-items: center; gap: 8px; padding-top: 12px; margin-top: 6px; border-top: 1px dashed var(--glass-border); }
.save-hint[b-4t8fzny5sz] { font-size: 10.5px; color: var(--text-faint); flex: 1; }

/* ── affiliations ── */
.affil-row[b-4t8fzny5sz] { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); margin-bottom: 8px; }
.affil-school[b-4t8fzny5sz] { font-size: 12.5px; font-weight: 600; }
.affil-since[b-4t8fzny5sz] { font-size: 10.5px; color: var(--text-faint); }
.affil-note[b-4t8fzny5sz] { font-size: 11px; color: var(--text-faint); margin-top: 10px; }

/* ── documents ── */
.doc-row[b-4t8fzny5sz] { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); margin-bottom: 6px; font-size: 12px; }
.doc-name[b-4t8fzny5sz] { flex: 1; }

/* ── negative-margin confirm modal ── */
.confirm-overlay[b-4t8fzny5sz] { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 300; display: none; align-items: center; justify-content: center; }
.confirm-overlay.show[b-4t8fzny5sz] { display: flex; }
.confirm-box[b-4t8fzny5sz] { width: 380px; max-width: 92vw; padding: 20px; border-radius: var(--radius-md); background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
.confirm-title[b-4t8fzny5sz] { font-size: 14px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.confirm-text[b-4t8fzny5sz] { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; margin-bottom: 16px; }
.confirm-text strong[b-4t8fzny5sz] { color: #f87171; }
.confirm-actions[b-4t8fzny5sz] { display: flex; gap: 8px; justify-content: flex-end; }

/* ── toast ── */
.tl-toast[b-4t8fzny5sz] {
    position: fixed; bottom: 24px; right: 24px; z-index: 999;
    padding: 12px 18px; border-radius: var(--radius-md);
    background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.35);
    color: #4ade80; font-size: 13px; font-weight: 600;
    transform: translateY(80px); opacity: 0; transition: .3s; pointer-events: none;
}
.tl-toast.warn[b-4t8fzny5sz] { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.35); color: #fbbf24; }
.tl-toast.show[b-4t8fzny5sz] { transform: translateY(0); opacity: 1; }
/* /Components/School/TeacherWizard.razor.rz.scp.css */
/* ── TEACHER WIZARD — CSS Isolation ── */

/* background: orbs + grid + scanline (همان الگوی login/enrollment) */
.tw-wrap[b-unb8b8a7kj] {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 32px 16px;
    position: relative;
    overflow-x: hidden;
    color: var(--text-main);
}

.tw-wrap[b-unb8b8a7kj]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 500px at 80% 10%, var(--orb-1), transparent 60%),
        radial-gradient(circle 400px at 5%  90%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}

.tw-wrap[b-unb8b8a7kj]::after {
    content: "";
    position: fixed;
    left: 0; right: 0; top: -2px;
    height: 2px;
    z-index: 1;
    pointer-events: none;
    opacity: .4;
    background: linear-gradient(90deg, transparent, var(--accent-glow) 50%, transparent);
    animation: tw-scan-b-unb8b8a7kj 8s linear infinite;
}

@keyframes tw-scan-b-unb8b8a7kj {
    0%   { top: -2px; }
    100% { top: 100%; }
}

/* ── Wizard card ── */
.wizard[b-unb8b8a7kj] {
    position: relative;
    z-index: 2;
    width: min(740px, 100%);
    background: var(--glass-bg);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0,0,0,0.4);
    margin-bottom: 32px;
}

/* ── Header ── */
.wiz-head[b-unb8b8a7kj] {
    padding: 22px 28px 0;
    border-bottom: 1px solid var(--glass-border);
}
.wiz-brand[b-unb8b8a7kj] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.brand-mark[b-unb8b8a7kj] {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
    color: var(--accent-text-on-fill);
    box-shadow: 0 0 14px var(--accent-glow-soft);
}
.brand-name[b-unb8b8a7kj] { font-size: 14px; font-weight: 700; color: var(--text-main); }
.brand-sub[b-unb8b8a7kj]  { font-size: 10px; color: var(--text-faint); }

/* ── Steps ── */
.steps[b-unb8b8a7kj] { display: flex; align-items: center; }
.step-wrap[b-unb8b8a7kj] { display: flex; align-items: center; flex: 1; }
.step-wrap-last[b-unb8b8a7kj] { flex: 0; }
.step-btn[b-unb8b8a7kj] {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 0 14px;
    border: none; background: none;
    font-family: inherit; font-size: 12px; font-weight: 500;
    color: var(--text-faint); cursor: default;
}
.step-circle[b-unb8b8a7kj] {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    color: var(--text-faint);
    transition: .25s;
}
.step-btn.active .step-circle[b-unb8b8a7kj] {
    background: var(--accent-gradient);
    border-color: transparent;
    color: var(--accent-text-on-fill);
    box-shadow: 0 0 14px var(--accent-glow-soft);
}
.step-btn.done .step-circle[b-unb8b8a7kj] {
    background: rgba(74,222,128,0.18);
    border-color: rgba(74,222,128,0.4);
    color: #4ade80;
}
.step-btn.active[b-unb8b8a7kj] { color: var(--accent-glow); }
.step-btn.done[b-unb8b8a7kj]   { color: #4ade80; }
.step-line[b-unb8b8a7kj] {
    flex: 1; height: 1px;
    background: var(--glass-border);
    margin: 0 6px; margin-bottom: 16px;
}
.step-line.done[b-unb8b8a7kj] { background: rgba(74,222,128,0.3); }

/* ── Body ── */
.wiz-body[b-unb8b8a7kj] { padding: 22px 28px; }
.wiz-title[b-unb8b8a7kj] { font-size: 17px; font-weight: 700; margin-bottom: 4px; color: var(--text-main); }
.wiz-sub[b-unb8b8a7kj]   { font-size: 12px; color: var(--text-dim); margin-bottom: 18px; line-height: 1.5; }

/* ── Alert ── */
.wiz-alert[b-unb8b8a7kj] {
    padding: 10px 14px; border-radius: 7px;
    background: rgba(248,113,113,0.09);
    border: 1px solid rgba(248,113,113,0.3);
    color: #f87171; font-size: 12px; margin-bottom: 14px;
}

/* ── Search ── */
.search-box[b-unb8b8a7kj] {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: 11px; padding: 14px; margin-bottom: 16px;
}
.search-row[b-unb8b8a7kj] { display: flex; gap: 8px; }
.search-input[b-unb8b8a7kj] {
    flex: 1; padding: 9px 12px;
    background: rgba(14,31,58,0.5);
    border: 1px solid var(--glass-border);
    border-radius: 7px;
    color: var(--text-main);
    font-family: inherit; font-size: 13px; outline: none; transition: .18s;
}
.search-input:focus[b-unb8b8a7kj] {
    border-color: var(--accent-glow);
    box-shadow: 0 0 0 3px var(--accent-glow-soft);
}
.btn-search[b-unb8b8a7kj] {
    padding: 9px 16px; border-radius: 7px; border: none;
    background: var(--accent-gradient);
    color: var(--accent-text-on-fill);
    font-family: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: .15s; white-space: nowrap;
}
.btn-search:hover[b-unb8b8a7kj] { box-shadow: 0 0 16px var(--accent-glow-soft); transform: translateY(-1px); }
.btn-search:disabled[b-unb8b8a7kj] { opacity: .5; cursor: not-allowed; transform: none; }

/* ── Found banner ── */
.found-banner[b-unb8b8a7kj] {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 11px;
    background: rgba(74,222,128,0.07);
    border: 1px solid rgba(74,222,128,0.25);
    margin-top: 10px;
}
.found-av[b-unb8b8a7kj] {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; color: var(--accent-text-on-fill);
}
.found-name[b-unb8b8a7kj] { font-size: 13px; font-weight: 600; color: var(--text-main); }
.found-meta[b-unb8b8a7kj] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.found-badge[b-unb8b8a7kj] {
    margin-left: auto; padding: 3px 9px; border-radius: 20px;
    background: rgba(74,222,128,0.15);
    border: 1px solid rgba(74,222,128,0.3);
    font-size: 10px; font-weight: 700; color: #4ade80; white-space: nowrap;
}

/* ── Not found ── */
.not-found-hint[b-unb8b8a7kj] {
    margin-top: 10px; font-size: 12px; color: var(--accent-glow);
    padding: 8px 12px; border-radius: 7px;
    background: var(--accent-glow-soft);
    border: 1px solid rgba(79,168,255,0.2);
}

/* ── Avatar ── */
.avatar-zone[b-unb8b8a7kj] {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; margin-bottom: 20px;
}
.avatar-circle[b-unb8b8a7kj] {
    width: 80px; height: 80px; border-radius: 50%;
    border: 2px dashed var(--glass-border);
    background: var(--glass-bg-soft);
    cursor: pointer; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: .2s; font-size: 30px; position: relative;
}
.avatar-circle:not(.disabled):hover[b-unb8b8a7kj] {
    border-color: var(--accent-glow);
    box-shadow: 0 0 16px var(--accent-glow-soft);
}
.avatar-circle.disabled[b-unb8b8a7kj] { pointer-events: none; opacity: .45; cursor: not-allowed; border-style: solid; }
.avatar-circle img[b-unb8b8a7kj] { width: 100%; height: 100%; object-fit: cover; }
.av-icon[b-unb8b8a7kj] { font-size: 30px; }
.av-input[b-unb8b8a7kj] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.avatar-hint[b-unb8b8a7kj] { font-size: 11px; color: var(--accent-glow); font-weight: 600; }
.avatar-sub[b-unb8b8a7kj]  { font-size: 10px; color: var(--text-faint); }
.avatar-hint.dim[b-unb8b8a7kj], .avatar-sub.dim[b-unb8b8a7kj] { opacity: .35; }

/* ── Form section ── */
.form-section[b-unb8b8a7kj] { opacity: .4; pointer-events: none; transition: opacity .3s ease; }
.form-section.enabled[b-unb8b8a7kj] { opacity: 1; pointer-events: all; }

.section-lbl[b-unb8b8a7kj] {
    font-size: 11px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .8px;
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.section-lbl[b-unb8b8a7kj]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

.divider[b-unb8b8a7kj] { height: 1px; background: var(--glass-border); margin: 16px 0; }

.field-row[b-unb8b8a7kj] {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 14px; margin-bottom: 14px;
}
.field-row.one[b-unb8b8a7kj]   { grid-template-columns: 1fr; }
.field-row.three[b-unb8b8a7kj] { grid-template-columns: 1fr 1fr 1fr; }
.field[b-unb8b8a7kj] { display: flex; flex-direction: column; gap: 5px; }

.field label[b-unb8b8a7kj] {
    font-size: 11px; font-weight: 600; color: var(--text-dim);
    letter-spacing: .4px; text-transform: uppercase;
}
.req[b-unb8b8a7kj] { color: var(--accent-glow); margin-left: 2px; }

.field input[b-unb8b8a7kj], .field select[b-unb8b8a7kj], .field textarea[b-unb8b8a7kj] {
    padding: 9px 12px;
    background: rgba(14,31,58,0.5);
    border: 1px solid var(--glass-border);
    border-radius: 7px;
    color: var(--text-main);
    font-family: inherit; font-size: 13px; outline: none; transition: .18s; width: 100%;
}
.field input:focus[b-unb8b8a7kj], .field select:focus[b-unb8b8a7kj], .field textarea:focus[b-unb8b8a7kj] {
    border-color: var(--accent-glow);
    box-shadow: 0 0 0 3px var(--accent-glow-soft);
}
.field input:disabled[b-unb8b8a7kj], .field select:disabled[b-unb8b8a7kj], .field textarea:disabled[b-unb8b8a7kj] { opacity: .55; }
.field textarea[b-unb8b8a7kj] { resize: vertical; min-height: 70px; }

/* ── Checkboxes ── */
.check-group[b-unb8b8a7kj] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.check-item[b-unb8b8a7kj] {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 7px;
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    font-size: 12px; cursor: pointer; transition: .15s; user-select: none;
    color: var(--text-dim);
}
.check-item:hover[b-unb8b8a7kj] { border-color: rgba(79,168,255,0.3); background: var(--accent-glow-soft); }
.check-item input[b-unb8b8a7kj] { accent-color: var(--accent-glow); cursor: pointer; }
.check-item.checked[b-unb8b8a7kj] {
    border-color: rgba(79,168,255,0.4);
    background: rgba(79,168,255,0.08);
    color: var(--accent-glow);
}
.check-item.disabled-check[b-unb8b8a7kj] { opacity: .55; pointer-events: none; }

/* ── License box ── */
.license-box[b-unb8b8a7kj] {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: 11px; padding: 14px; margin-bottom: 14px;
}
.license-title[b-unb8b8a7kj] {
    font-size: 11px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .7px; margin-bottom: 12px;
}

/* ── Documents ── */
.doc-list[b-unb8b8a7kj] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.doc-item[b-unb8b8a7kj] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 7px;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
}
.doc-icon[b-unb8b8a7kj] { font-size: 18px; flex-shrink: 0; }
.doc-name[b-unb8b8a7kj] { font-size: 13px; font-weight: 600; flex: 1; color: var(--text-main); }
.doc-req[b-unb8b8a7kj]  { font-size: 10px; color: #f87171; margin-left: 4px; }
.doc-opt[b-unb8b8a7kj]  { font-size: 10px; color: var(--text-faint); margin-left: 4px; }
.doc-status[b-unb8b8a7kj] { font-size: 11px; color: var(--text-faint); }
.doc-status.uploaded[b-unb8b8a7kj] { color: #4ade80; }

.btn-upload[b-unb8b8a7kj] {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: 7px;
    border: 1px solid rgba(79,168,255,0.35);
    background: rgba(79,168,255,0.08);
    color: var(--accent-glow);
    font-family: inherit; font-size: 11px; font-weight: 600;
    cursor: pointer; transition: .15s; position: relative; overflow: hidden;
}
.btn-upload:hover[b-unb8b8a7kj] { background: rgba(79,168,255,0.18); }
.btn-upload.done[b-unb8b8a7kj] {
    border-color: rgba(74,222,128,0.35);
    background: rgba(74,222,128,0.08);
    color: #4ade80;
}
.hidden-file[b-unb8b8a7kj] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

/* ── Rates ── */
.default-rate-row[b-unb8b8a7kj] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 7px;
    background: var(--accent-glow-soft);
    border: 1px solid rgba(79,168,255,0.2);
    margin-bottom: 12px;
}
.default-rate-row label[b-unb8b8a7kj] { font-size: 12px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.rate-input-default[b-unb8b8a7kj] {
    width: 100px; padding: 7px 10px;
    background: rgba(14,31,58,0.5); border: 1px solid var(--glass-border);
    border-radius: 7px; color: var(--text-main); font-family: inherit; font-size: 13px; outline: none;
}
.rate-input-default:focus[b-unb8b8a7kj] { border-color: var(--accent-glow); }

.btn-apply[b-unb8b8a7kj] {
    padding: 7px 14px; border-radius: 7px;
    border: 1px solid rgba(79,168,255,0.35);
    background: rgba(79,168,255,0.1);
    color: var(--accent-glow); font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: .15s; white-space: nowrap;
}
.btn-apply:hover[b-unb8b8a7kj] { background: rgba(79,168,255,0.2); }

.rates-table[b-unb8b8a7kj] { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.rates-table th[b-unb8b8a7kj] {
    font-size: 10px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .7px;
    padding: 7px 12px; text-align: left;
    border-bottom: 1px solid var(--glass-border);
}
.rates-table td[b-unb8b8a7kj] {
    padding: 8px 12px; border-bottom: 1px solid rgba(100,170,255,0.06);
    vertical-align: middle;
}
.rates-table tr:last-child td[b-unb8b8a7kj] { border-bottom: none; }
.rates-table tr:hover td[b-unb8b8a7kj] { background: var(--accent-glow-soft); }
.rates-table input[type=checkbox][b-unb8b8a7kj] { accent-color: var(--accent-glow); width: 15px; height: 15px; cursor: pointer; }

.rate-input[b-unb8b8a7kj] {
    width: 84px; padding: 6px 10px;
    background: rgba(14,31,58,0.5); border: 1px solid var(--glass-border);
    border-radius: 7px; color: var(--text-main); font-family: inherit; font-size: 13px; outline: none;
    transition: .18s;
}
.rate-input:focus[b-unb8b8a7kj] { border-color: var(--accent-glow); box-shadow: 0 0 0 3px var(--accent-glow-soft); }
.rate-input:disabled[b-unb8b8a7kj] { opacity: .35; cursor: not-allowed; }
.rate-input.modified[b-unb8b8a7kj] { border-color: rgba(79,168,255,0.5); background: rgba(79,168,255,0.06); }
.rate-input.err[b-unb8b8a7kj] { border-color: rgba(248,113,113,0.6); background: rgba(248,113,113,0.06); }
.rate-prefix[b-unb8b8a7kj] { font-size: 12px; color: var(--text-faint); margin-right: 3px; }

.rate-margin[b-unb8b8a7kj] { font-size: 13px; font-weight: 700; }
.rate-margin.positive[b-unb8b8a7kj] { color: #4ade80; }
.rate-margin.zero[b-unb8b8a7kj] { color: #f87171; }
.rate-current-sub[b-unb8b8a7kj] { font-size: 10px; color: var(--text-faint); margin-top: 3px; }

.class-name[b-unb8b8a7kj] { font-size: 13px; font-weight: 600; color: var(--text-main); }
.class-type[b-unb8b8a7kj] { font-size: 11px; color: var(--text-dim); }

.effective-row[b-unb8b8a7kj] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 7px;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    margin-top: 8px;
}
.effective-row label[b-unb8b8a7kj] { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.effective-row input[b-unb8b8a7kj] {
    padding: 6px 10px; background: rgba(14,31,58,0.5);
    border: 1px solid var(--glass-border); border-radius: 7px;
    color: var(--text-main); font-family: inherit; font-size: 13px; outline: none;
}
.eff-hint[b-unb8b8a7kj] { font-size: 11px; color: var(--text-faint); }
.loading-hint[b-unb8b8a7kj] { font-size: 13px; color: var(--text-dim); padding: 20px 0; text-align: center; }

/* ── Confirm ── */
.confirm-teacher[b-unb8b8a7kj] {
    display: flex; align-items: center; gap: 16px;
    padding: 14px; border-radius: 11px;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    margin-bottom: 16px;
}
.ct-av[b-unb8b8a7kj] {
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: var(--accent-text-on-fill);
    border: 2px solid rgba(79,168,255,0.25); overflow: hidden;
}
.ct-av img[b-unb8b8a7kj] { width: 100%; height: 100%; object-fit: cover; }
.ct-name[b-unb8b8a7kj] { font-size: 15px; font-weight: 700; margin-bottom: 3px; color: var(--text-main); }
.ct-meta[b-unb8b8a7kj] { font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.ct-meta-cell[b-unb8b8a7kj] { color: var(--text-dim); }
.spec-badges[b-unb8b8a7kj] { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.spec-badge[b-unb8b8a7kj] {
    display: inline-block; padding: 2px 8px; border-radius: 20px;
    font-size: 10px; font-weight: 600;
    background: rgba(79,168,255,0.12); color: var(--accent-glow);
    border: 1px solid rgba(79,168,255,0.25);
}

.confirm-docs[b-unb8b8a7kj] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cd-row[b-unb8b8a7kj] {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 7px;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border); font-size: 12px;
}
.cd-name[b-unb8b8a7kj] { flex: 1; color: var(--text-main); }
.cd-ok[b-unb8b8a7kj] {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
    background: rgba(74,222,128,0.12); color: #4ade80;
    border: 1px solid rgba(74,222,128,0.25);
}

.confirm-rates[b-unb8b8a7kj] { width: 100%; border-collapse: collapse; }
.confirm-rates th[b-unb8b8a7kj] {
    font-size: 10px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .7px;
    padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--glass-border);
}
.confirm-rates td[b-unb8b8a7kj] {
    padding: 8px 12px; font-size: 13px; color: var(--text-dim);
    border-bottom: 1px solid rgba(100,170,255,0.06);
}
.confirm-rates tr:last-child td[b-unb8b8a7kj] { border-bottom: none; }
.rate-val[b-unb8b8a7kj] { color: var(--accent-glow); font-weight: 700; }

/* ── Footer ── */
.wiz-foot[b-unb8b8a7kj] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 28px; border-top: 1px solid var(--glass-border);
    background: rgba(7,16,31,0.4);
}
.btn-back[b-unb8b8a7kj] {
    padding: 9px 18px; border-radius: 7px;
    border: 1px solid var(--glass-border); background: transparent;
    color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: .15s;
}
.btn-back:hover[b-unb8b8a7kj] { background: var(--accent-glow-soft); color: var(--text-main); }
.btn-back:disabled[b-unb8b8a7kj] { opacity: .35; cursor: not-allowed; }

.btn-next[b-unb8b8a7kj] {
    padding: 9px 22px; border-radius: 7px; border: none;
    background: var(--accent-gradient);
    color: var(--accent-text-on-fill);
    font-family: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: .15s;
    box-shadow: 0 0 18px var(--accent-glow-soft);
}
.btn-next:hover[b-unb8b8a7kj] { transform: translateY(-1px); box-shadow: 0 0 26px var(--accent-glow-soft); }
.btn-next:disabled[b-unb8b8a7kj] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-confirm[b-unb8b8a7kj] {
    padding: 9px 22px; border-radius: 7px; border: none;
    background: linear-gradient(135deg, #4ade80, #86efac);
    color: #001428; font-family: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: .15s;
}
.btn-confirm:hover[b-unb8b8a7kj] { transform: translateY(-1px); }
.btn-confirm:disabled[b-unb8b8a7kj] { opacity: .4; cursor: not-allowed; transform: none; }

/* ── Edit mode ── */
.edit-banner[b-unb8b8a7kj] {
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 9px 20px;
    background: rgba(251,191,36,0.10);
    border-bottom: 1px solid rgba(251,191,36,0.28);
    animation: edit-pulse-b-unb8b8a7kj 2.6s ease-in-out infinite;
}
.edit-banner-text[b-unb8b8a7kj] {
    color: #fbbf24; font-size: 12px; font-weight: 600;
    letter-spacing: .3px;
}
@keyframes edit-pulse-b-unb8b8a7kj {
    0%, 100% { background: rgba(251,191,36,0.07); }
    50%      { background: rgba(251,191,36,0.16); }
}

.btn-delete[b-unb8b8a7kj] {
    padding: 5px 10px; border-radius: 7px;
    border: 1px solid rgba(248,113,113,0.3);
    background: rgba(248,113,113,0.08);
    color: #f87171; font-family: inherit;
    font-size: 11px; font-weight: 600;
    cursor: pointer; transition: .15s; white-space: nowrap;
}
.btn-delete:hover[b-unb8b8a7kj] { background: rgba(248,113,113,0.18); }

.current-rate[b-unb8b8a7kj] {
    font-size: 11px; color: var(--text-faint);
    text-decoration: line-through;
    margin-right: 4px;
}

.updated-badge[b-unb8b8a7kj] {
    display: inline-block; margin-left: 8px;
    padding: 2px 8px; border-radius: 20px;
    font-size: 10px; font-weight: 700;
    background: rgba(74,222,128,0.15);
    border: 1px solid rgba(74,222,128,0.35);
    color: #4ade80; white-space: nowrap;
    vertical-align: middle;
}

/* ── Info note ── */
.info-note[b-unb8b8a7kj] {
    margin-top: 12px; padding: 10px 14px; border-radius: 7px;
    background: var(--accent-glow-soft);
    border: 1px solid rgba(79,168,255,0.2);
    color: var(--text-dim); font-size: 12px; line-height: 1.5;
}

/* ── Success ── */
.success-wrap[b-unb8b8a7kj] {
    text-align: center; padding: 24px 0 12px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.success-icon[b-unb8b8a7kj] {
    width: 70px; height: 70px; border-radius: 50%;
    background: rgba(74,222,128,0.12); border: 1.5px solid #4ade80;
    color: #4ade80; font-size: 30px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 24px rgba(74,222,128,0.25);
}
.success-steps[b-unb8b8a7kj] {
    display: flex; flex-direction: column; gap: 8px;
    margin: 6px 0; padding: 14px 18px;
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: 11px;
    width: min(360px, 100%);
}
.success-step[b-unb8b8a7kj] {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-dim); text-align: left;
}
.ss-check[b-unb8b8a7kj] {
    width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    background: rgba(74,222,128,0.15);
    border: 1px solid rgba(74,222,128,0.35);
    color: #4ade80;
}
.success-actions[b-unb8b8a7kj] { display: flex; gap: 12px; margin-top: 8px; }
/* /Components/Shared/ConsultantProfileView.razor.rz.scp.css */
/* ============================================================
   ConsultantProfileView.razor.css — embeddable profile + book form.
   No topnav/background (the host dashboard provides chrome).
   ============================================================ */

.cpv-root[b-c8bu2botpq] { color: var(--text-main); }
.cpv-back[b-c8bu2botpq] { font-size: 12.5px; color: var(--text-dim); cursor: pointer; display: inline-block; margin-bottom: 14px; padding: 4px 0; }
.cpv-back:hover[b-c8bu2botpq] { color: var(--text-main); }
.cpv-loading[b-c8bu2botpq] { text-align: center; color: var(--text-dim); padding: 60px 0; }
.cpv-notfound[b-c8bu2botpq] { text-align: center; padding: 60px 24px; }
.nf-icon[b-c8bu2botpq] { font-size: 44px; margin-bottom: 10px; }
.nf-title[b-c8bu2botpq] { font-size: 18px; font-weight: 700; }
.nf-sub[b-c8bu2botpq] { font-size: 13px; color: var(--text-dim); margin: 6px 0 16px; }

.btn[b-c8bu2botpq] { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-c8bu2botpq] { opacity: .6; cursor: not-allowed; }
.btn-primary[b-c8bu2botpq] { background: var(--accent-gradient); color: var(--accent-text-on-fill); }
.btn-ghost[b-c8bu2botpq] { background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-sm[b-c8bu2botpq] { padding: 6px 12px; font-size: 12px; }
.badge[b-c8bu2botpq] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-c8bu2botpq]  { background: rgba(74,222,128,.11); color: #4ade80; border: 1px solid rgba(74,222,128,.22); }
.b-blue[b-c8bu2botpq]   { background: rgba(79,168,255,.11); color: #4fa8ff; border: 1px solid rgba(79,168,255,.22); }
.b-purple[b-c8bu2botpq] { background: rgba(167,139,250,.11); color: #a78bfa; border: 1px solid rgba(167,139,250,.22); }

.profile-page[b-c8bu2botpq] { max-width: 800px; }

/* header */
.prof-header[b-c8bu2botpq] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 24px; margin-bottom: 16px; backdrop-filter: blur(var(--glass-blur)); display: flex; gap: 20px; align-items: flex-start; }
.prof-av[b-c8bu2botpq] { width: 90px; height: 90px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 30px; color: var(--accent-text-on-fill); flex-shrink: 0; overflow: hidden; }
.prof-av img[b-c8bu2botpq] { width: 100%; height: 100%; object-fit: cover; }
.prof-main[b-c8bu2botpq] { flex: 1; }
.prof-name[b-c8bu2botpq] { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.prof-title[b-c8bu2botpq] { font-size: 14px; color: var(--text-dim); margin-bottom: 10px; }
.prof-badges[b-c8bu2botpq] { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.prof-star[b-c8bu2botpq] { font-size: 12px; color: #fbbf24; }
.prof-rate[b-c8bu2botpq] { font-size: 20px; font-weight: 800; color: #4ade80; }
.prof-rate-sub[b-c8bu2botpq] { font-size: 11px; color: var(--text-faint); }
.prof-side[b-c8bu2botpq] { text-align: right; flex-shrink: 0; }
.prof-loc[b-c8bu2botpq] { font-size: 11px; color: var(--text-faint); margin-bottom: 8px; }
.prof-avail[b-c8bu2botpq] { font-size: 11px; }
.prof-avail.on[b-c8bu2botpq] { color: #4ade80; }
.prof-avail.off[b-c8bu2botpq] { color: var(--text-faint); }

/* stats */
.prof-stats[b-c8bu2botpq] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.stat-box[b-c8bu2botpq] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.stat-val[b-c8bu2botpq] { font-size: 20px; font-weight: 800; }
.stat-val.blue[b-c8bu2botpq] { color: #4fa8ff; }
.stat-val.green[b-c8bu2botpq] { color: #4ade80; }
.stat-lbl[b-c8bu2botpq] { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }

/* sections */
.prof-section[b-c8bu2botpq] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 18px; margin-bottom: 14px; }
.prof-sec-title[b-c8bu2botpq] { font-size: 12.5px; font-weight: 700; margin-bottom: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; }
.prof-about[b-c8bu2botpq] { font-size: 13px; color: var(--text-dim); line-height: 1.7; }
.prof-spec[b-c8bu2botpq] { display: flex; gap: 8px; flex-wrap: wrap; }

/* book form */
.book-form[b-c8bu2botpq] { background: var(--accent-glow-soft); border: 1px solid rgba(79,168,255,.25); border-radius: var(--radius-md); padding: 20px; margin-bottom: 14px; }
.book-title[b-c8bu2botpq] { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.book-error[b-c8bu2botpq] { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: #f87171; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12px; margin-bottom: 12px; }
.book-done[b-c8bu2botpq] { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.25); color: var(--text-main); border-radius: var(--radius-md); padding: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

.form-grid[b-c8bu2botpq] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-group[b-c8bu2botpq] { display: flex; flex-direction: column; gap: 4px; }
.form-group.full[b-c8bu2botpq] { grid-column: 1 / -1; }
.form-label[b-c8bu2botpq] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.req[b-c8bu2botpq] { color: #f87171; }
.form-select[b-c8bu2botpq], .form-textarea[b-c8bu2botpq] { width: 100%; padding: 8px 11px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; }
.form-select:focus[b-c8bu2botpq], .form-textarea:focus[b-c8bu2botpq] { border-color: rgba(79,168,255,.55); }
.form-select option[b-c8bu2botpq] { background: var(--glass-bg); color: var(--text-main); }
.form-textarea[b-c8bu2botpq] { resize: vertical; min-height: 72px; line-height: 1.5; }
.book-actions[b-c8bu2botpq] { display: flex; gap: 10px; margin-top: 14px; align-items: center; }
.book-note[b-c8bu2botpq] { font-size: 11px; color: var(--text-faint); }

@media (max-width: 640px) {
    .prof-header[b-c8bu2botpq] { flex-direction: column; }
    .prof-side[b-c8bu2botpq] { text-align: left; }
    .form-grid[b-c8bu2botpq] { grid-template-columns: 1fr; }
}
/* /Components/Shared/ConsultantsDirectory.razor.rz.scp.css */
/* ============================================================
   ConsultantsDirectory.razor.css — embeddable consultant directory.
   Surfaces/text from theme.css; status colours stay literal.
   ============================================================ */

/* buttons + badges */
.btn[b-rd2bh706xu] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn-primary[b-rd2bh706xu] { background: var(--accent-gradient); color: var(--accent-text-on-fill); }
.btn-primary:hover[b-rd2bh706xu] { transform: translateY(-1px); }
.btn-sm[b-rd2bh706xu] { padding: 6px 12px; font-size: 12px; }
.badge[b-rd2bh706xu] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-rd2bh706xu]  { background: rgba(74,222,128,.11); color: #4ade80; border: 1px solid rgba(74,222,128,.22); }
.b-blue[b-rd2bh706xu]   { background: rgba(79,168,255,.11); color: #4fa8ff; border: 1px solid rgba(79,168,255,.22); }
.b-purple[b-rd2bh706xu] { background: rgba(167,139,250,.11); color: #a78bfa; border: 1px solid rgba(167,139,250,.22); }

/* directory wrapper */
.directory[b-rd2bh706xu] { position: relative; z-index: 1; color: var(--text-main); }
.directory:not(.embedded)[b-rd2bh706xu] { padding: 0 24px 40px; max-width: 1200px; margin: 0 auto; }

/* standalone hero */
.dir-hero[b-rd2bh706xu] { text-align: center; padding: 32px 0 24px; }
.dir-title[b-rd2bh706xu] { font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.dir-title span[b-rd2bh706xu] { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.dir-sub[b-rd2bh706xu] { font-size: 14px; color: var(--text-dim); }

/* compact (embedded) header */
.dir-hero-sm[b-rd2bh706xu] { margin-bottom: 16px; }
.dir-title-sm[b-rd2bh706xu] { font-size: 18px; font-weight: 700; }
.dir-sub-sm[b-rd2bh706xu] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.cons-loading[b-rd2bh706xu], .cons-empty[b-rd2bh706xu] { text-align: center; color: var(--text-dim); padding: 50px 0; font-size: 15px; }

/* filters */
.filter-bar[b-rd2bh706xu] { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.f-search[b-rd2bh706xu] { flex: 1; min-width: 200px; padding: 9px 14px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; }
.f-search[b-rd2bh706xu]::placeholder { color: var(--text-faint); }
.f-search:focus[b-rd2bh706xu] { border-color: rgba(79,168,255,.5); }
.f-select[b-rd2bh706xu] { padding: 9px 12px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12px; outline: none; }
.f-select option[b-rd2bh706xu] { background: var(--glass-bg); color: var(--text-main); }

/* grid + cards */
.consultants-grid[b-rd2bh706xu] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.c-card[b-rd2bh706xu] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: .25s; backdrop-filter: blur(var(--glass-blur)); box-shadow: 0 4px 20px rgba(0,0,0,.2); }
.c-card:hover[b-rd2bh706xu] { border-color: rgba(79,168,255,.35); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.3); }
.c-card-top[b-rd2bh706xu] { padding: 18px 18px 14px; display: flex; gap: 14px; align-items: flex-start; }
.c-av[b-rd2bh706xu] { width: 58px; height: 58px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; color: var(--accent-text-on-fill); flex-shrink: 0; overflow: hidden; }
.c-av img[b-rd2bh706xu] { width: 100%; height: 100%; object-fit: cover; }
.c-card-head[b-rd2bh706xu] { flex: 1; }
.c-name[b-rd2bh706xu] { font-size: 15px; font-weight: 700; }
.c-title[b-rd2bh706xu] { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.c-badges[b-rd2bh706xu] { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.c-stars[b-rd2bh706xu] { font-size: 12px; color: #fbbf24; }
.c-bio[b-rd2bh706xu] { font-size: 12px; color: var(--text-dim); line-height: 1.6; padding: 0 18px 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-langs[b-rd2bh706xu] { padding: 10px 18px; border-top: 1px solid var(--glass-border); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.c-lang-lbl[b-rd2bh706xu] { font-size: 10px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; }
.c-footer[b-rd2bh706xu] { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--glass-border); }
.c-rate[b-rd2bh706xu] { font-size: 14px; font-weight: 800; color: #4ade80; }
.c-rate-sub[b-rd2bh706xu] { font-size: 10px; color: var(--text-faint); }
/* /Components/Shared/MessagesPanel.razor.rz.scp.css */
/* ============================================================
   MessagesPanel.razor.css — General Messaging (§19)
   CSS Isolation (scoped). All colors from theme.css var(--…)
   so it follows the active blue/gold/lilac theme.

   Page lock (like messages.html): the panel fills its content
   area and does NOT scroll as a whole. Only the conversation
   list (.conv-items) and the chat body (.chat-body) scroll
   independently; header/banner/footer stay fixed (flex-shrink:0).
   ============================================================ */

.msg-page[b-zslzuhin0j] {
    color: var(--text-main);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ── header ── */
.page-header[b-zslzuhin0j] { margin-bottom: 12px; flex-shrink: 0; }
.page-title[b-zslzuhin0j]  { font-size: 20px; font-weight: 700; color: var(--text-main); }
.page-sub[b-zslzuhin0j]    { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

/* ── safety banner (text only — no call button) ── */
.safety-banner[b-zslzuhin0j] {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: var(--radius-md);
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.3);
    margin-bottom: 14px; flex-shrink: 0;
}
.sb-icon[b-zslzuhin0j] { font-size: 20px; flex-shrink: 0; }
.sb-text[b-zslzuhin0j] { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; flex: 1; }
.sb-text strong[b-zslzuhin0j] { color: #fbbf24; font-weight: 600; }

/* ── main layout ── */
.msg-layout[b-zslzuhin0j] {
    display: grid; grid-template-columns: 300px 1fr;
    flex: 1; min-height: 0; border-radius: var(--radius-md); overflow: hidden;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

/* ── conversation list ── */
.conv-list[b-zslzuhin0j] {
    border-right: 1px solid var(--glass-border);
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.conv-header[b-zslzuhin0j] {
    padding: 14px 16px; border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.conv-title[b-zslzuhin0j] { font-size: 13px; font-weight: 700; color: var(--text-main); }
.conv-search[b-zslzuhin0j] { padding: 10px 12px; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; }
.conv-search input[b-zslzuhin0j] {
    width: 100%; padding: 7px 11px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
}
.conv-search input[b-zslzuhin0j]::placeholder { color: var(--text-faint); }
.conv-search input:focus[b-zslzuhin0j] { border-color: var(--accent-glow); }

.conv-items[b-zslzuhin0j] { flex: 1; overflow-y: auto; min-height: 0; }
.conv-items[b-zslzuhin0j]::-webkit-scrollbar { width: 5px; }
.conv-items[b-zslzuhin0j]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 5px; }
.conv-empty[b-zslzuhin0j] { padding: 22px 14px; text-align: center; font-size: 12px; color: var(--text-faint); }

.conv-item[b-zslzuhin0j] {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; cursor: pointer; transition: .15s;
    border-bottom: 1px solid var(--glass-border); position: relative;
}
.conv-item:hover[b-zslzuhin0j] { background: var(--accent-glow-soft); }
.conv-item.active[b-zslzuhin0j] { background: rgba(79,168,255,0.08); border-left: 2px solid var(--accent-glow); }

.conv-av[b-zslzuhin0j] {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--accent-text-on-fill);
}
.conv-info[b-zslzuhin0j] { flex: 1; min-width: 0; }
.conv-name[b-zslzuhin0j] {
    font-size: 12.5px; font-weight: 600; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-meta[b-zslzuhin0j] { text-align: right; flex-shrink: 0; }
.conv-unread[b-zslzuhin0j] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; border-radius: 20px; padding: 0 4px;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    font-size: 9.5px; font-weight: 700;
}
.conv-role-badge[b-zslzuhin0j] {
    font-size: 8.5px; font-weight: 700; padding: 1px 5px; border-radius: 10px;
    margin-top: 2px; display: inline-block;
}

/* role colors (avatars + badges) */
.role-parent[b-zslzuhin0j]  { background: rgba(167,139,250,0.15); color: #a78bfa; }
.role-teacher[b-zslzuhin0j] { background: rgba(79,168,255,0.15);  color: var(--accent-glow); }
.role-admin[b-zslzuhin0j]   { background: rgba(74,222,128,0.15);  color: #4ade80; }
.av-parent[b-zslzuhin0j]  { background: linear-gradient(135deg, #a78bfa, #c4b5fd); }
.av-teacher[b-zslzuhin0j] { background: linear-gradient(135deg, #6bb6ff, #a8d8ff); }
.av-admin[b-zslzuhin0j]   { background: linear-gradient(135deg, #6bffb0, #a8ffd8); }
.av-me[b-zslzuhin0j]      { background: var(--accent-gradient); color: var(--accent-text-on-fill); }

/* ── chat window ── */
.chat-window[b-zslzuhin0j] { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.chat-header[b-zslzuhin0j] {
    padding: 13px 18px; border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
    background: var(--glass-bg-soft); position: relative; z-index: 2;
}
.chat-av[b-zslzuhin0j] {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: var(--accent-text-on-fill);
}
.chat-name[b-zslzuhin0j] { font-size: 14px; font-weight: 700; color: var(--text-main); }
.chat-role[b-zslzuhin0j] { font-size: 11px; color: var(--text-dim); }

.chat-body[b-zslzuhin0j] {
    flex: 1; overflow-y: auto; padding: 18px;
    display: flex; flex-direction: column; gap: 10px; min-height: 0;
}
.chat-body[b-zslzuhin0j]::-webkit-scrollbar { width: 5px; }
.chat-body[b-zslzuhin0j]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 5px; }

.chat-day-divider[b-zslzuhin0j] {
    text-align: center; font-size: 10.5px; color: var(--text-faint);
    margin: 8px 0; position: relative;
}
.chat-day-divider[b-zslzuhin0j]::before, .chat-day-divider[b-zslzuhin0j]::after {
    content: ""; position: absolute; top: 50%; width: 32%; height: 1px;
    background: var(--glass-border);
}
.chat-day-divider[b-zslzuhin0j]::before { left: 0; }
.chat-day-divider[b-zslzuhin0j]::after  { right: 0; }

/* message rows + bubbles */
.msg-row[b-zslzuhin0j] { display: flex; gap: 8px; max-width: 75%; }
.msg-row.sent[b-zslzuhin0j] { align-self: flex-end; flex-direction: row-reverse; }
.msg-row.received[b-zslzuhin0j] { align-self: flex-start; }
.msg-av[b-zslzuhin0j] {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 700; color: var(--accent-text-on-fill);
    align-self: flex-end;
}
.msg-bubble[b-zslzuhin0j] {
    padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.5;
    position: relative; color: var(--text-main);
}
.msg-row.received .msg-bubble[b-zslzuhin0j] {
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    border-bottom-left-radius: 4px;
}
.msg-row.sent .msg-bubble[b-zslzuhin0j] {
    background: linear-gradient(135deg, rgba(79,168,255,0.22), rgba(125,211,252,0.14));
    border: 1px solid rgba(79,168,255,0.3); border-bottom-right-radius: 4px;
}
.msg-bubble.financial[b-zslzuhin0j] { background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.25); }
.msg-bubble.financial .msg-tag[b-zslzuhin0j] { color: #fbbf24; }
.msg-bubble.thanks[b-zslzuhin0j] { background: rgba(74,222,128,0.07); border-color: rgba(74,222,128,0.22); }
.msg-bubble.thanks .msg-tag[b-zslzuhin0j] { color: #4ade80; }
.msg-tag[b-zslzuhin0j] {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; margin-bottom: 3px; opacity: .85; display: block;
}
.msg-text[b-zslzuhin0j] { display: block; white-space: pre-wrap; word-break: break-word; }
.msg-time[b-zslzuhin0j] { font-size: 9.5px; color: var(--text-faint); margin-top: 3px; display: block; }
.msg-row.sent .msg-time[b-zslzuhin0j] { text-align: right; }

/* urgent soft-warning system bubble */
.msg-system-warning[b-zslzuhin0j] {
    align-self: center; max-width: 80%;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: var(--radius-sm);
    background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.3);
    font-size: 11.5px; color: var(--text-error); text-align: center;
}

/* quick reply chips */
.quick-chips[b-zslzuhin0j] {
    display: flex; gap: 6px; padding: 10px 18px; flex-wrap: wrap; flex-shrink: 0;
    border-top: 1px solid var(--glass-border); background: var(--glass-bg-soft);
}
.qc-chip[b-zslzuhin0j] {
    padding: 5px 12px; border-radius: 20px;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    color: var(--text-dim); font-size: 11px; cursor: pointer; transition: .15s; white-space: nowrap;
}
.qc-chip:hover[b-zslzuhin0j] { background: var(--accent-glow-soft); color: var(--accent-glow); border-color: var(--accent-glow); }
.qc-chip.financial[b-zslzuhin0j] { border-color: rgba(251,191,36,0.25); color: #fbbf24; }
.qc-chip.thanks[b-zslzuhin0j] { border-color: rgba(74,222,128,0.25); color: #4ade80; }

/* input bar */
.chat-input-bar[b-zslzuhin0j] {
    padding: 12px 16px; border-top: 1px solid var(--glass-border);
    display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0;
    background: var(--glass-bg-soft);
}
.chat-input-bar textarea[b-zslzuhin0j] {
    flex: 1; padding: 9px 13px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 13px; outline: none;
    resize: none; max-height: 90px; min-height: 38px; transition: .18s;
}
.chat-input-bar textarea:focus[b-zslzuhin0j] { border-color: var(--accent-glow); box-shadow: 0 0 0 3px var(--accent-glow-soft); }
.send-btn[b-zslzuhin0j] {
    width: 38px; height: 38px; border-radius: var(--radius-sm); border: none;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    font-size: 16px; cursor: pointer; flex-shrink: 0; transition: .15s;
    display: flex; align-items: center; justify-content: center;
}
.send-btn:hover[b-zslzuhin0j] { transform: translateY(-1px); box-shadow: 0 0 14px var(--accent-glow); }
.send-btn:disabled[b-zslzuhin0j] { opacity: .5; cursor: default; transform: none; }

/* empty state */
.empty-chat[b-zslzuhin0j] {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--text-faint); gap: 8px; font-size: 13px;
}
.empty-chat .ei[b-zslzuhin0j] { font-size: 42px; opacity: .3; }

/* ── responsive ── */
@media (max-width: 820px) {
    .msg-layout[b-zslzuhin0j] { grid-template-columns: 1fr; }
    .conv-list[b-zslzuhin0j] { display: none; }
}
.conv-school[b-zslzuhin0j] { padding: 10px 12px; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; }
.conv-school select[b-zslzuhin0j] {
    width: 100%; padding: 7px 10px;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); color: var(--text-main);
    font-family: inherit; font-size: 12.5px; outline: none; cursor: pointer;
}
.conv-school select:focus[b-zslzuhin0j] { border-color: var(--accent-glow); }
.conv-school option[b-zslzuhin0j] { background: #0c1a30; color: var(--text-main); }
/* /Components/Shared/MyAdsPage.razor.rz.scp.css */
/* ============================================================
   MyAdsPage.razor.css — CSS Isolation (scoped)
   Mirrors marketplace-v2.html "My Ads". Surfaces/text from theme.css;
   category accent colours stay literal (brand-semantic).
   ============================================================ */

.myads-page[b-niepddhneh] {
    --c-new-border: rgba(74,222,128,.30);  --c-used-border: rgba(251,191,36,.30);
    --c-free-border: rgba(34,211,238,.30); --c-job-border: rgba(129,140,248,.30);
    --c-work-border: rgba(167,139,250,.30);--c-camp-border: rgba(251,146,60,.30);
    max-width: 900px;
    margin: 0 auto;
    color: var(--text-main);
}

/* buttons */
.btn[b-niepddhneh] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-niepddhneh] { opacity: .6; cursor: not-allowed; }
.btn-primary[b-niepddhneh] { background: var(--accent-gradient); color: var(--accent-text-on-fill); }
.btn-ghost[b-niepddhneh] { background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-niepddhneh] { background: var(--accent-glow-soft); color: var(--text-main); }
.btn-danger[b-niepddhneh] { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25); color: #f87171; }
.btn-danger:hover[b-niepddhneh] { background: rgba(248,113,113,.2); }
.btn-sm[b-niepddhneh] { padding: 6px 12px; font-size: 12px; }
.btn-xs[b-niepddhneh] { padding: 4px 9px; font-size: 11px; }

.panel-header[b-niepddhneh] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.panel-title[b-niepddhneh] { font-size: 18px; font-weight: 700; }
.panel-sub[b-niepddhneh] { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.myads-alert[b-niepddhneh] { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: #f87171; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }
.myads-loading[b-niepddhneh], .myads-empty[b-niepddhneh] { text-align: center; color: var(--text-dim); padding: 50px 0; font-size: 14px; }

/* status divider */
.status-divider[b-niepddhneh] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .8px; margin: 16px 0 10px; display: flex; align-items: center; gap: 8px; }
.status-divider:first-child[b-niepddhneh] { margin-top: 0; }
.sd-line[b-niepddhneh] { flex: 1; height: 1px; background: var(--glass-border); }
.sd-count[b-niepddhneh] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: 20px; padding: 1px 9px; font-size: 10px; color: var(--text-dim); }

/* my-ad row */
.my-ad-row[b-niepddhneh] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; display: flex; margin-bottom: 10px; backdrop-filter: blur(var(--glass-blur)); box-shadow: 0 4px 16px rgba(0,0,0,.2); transition: .2s; position: relative; }
.my-ad-row[b-niepddhneh]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--card-accent, var(--accent-gradient)); }
.my-ad-row:hover[b-niepddhneh] { transform: translateX(2px); box-shadow: 0 6px 24px rgba(0,0,0,.3); }
.my-ad-row.dim[b-niepddhneh] { opacity: .55; }
.card-new[b-niepddhneh]  { --card-accent: linear-gradient(180deg,#4ade80,#86efac); }
.card-used[b-niepddhneh] { --card-accent: linear-gradient(180deg,#fbbf24,#fde68a); }
.card-free[b-niepddhneh] { --card-accent: linear-gradient(180deg,#22d3ee,#67e8f9); }
.card-job[b-niepddhneh]  { --card-accent: linear-gradient(180deg,#818cf8,#a5b4fc); }
.card-work[b-niepddhneh] { --card-accent: linear-gradient(180deg,#a78bfa,#c4b5fd); }
.card-camp[b-niepddhneh] { --card-accent: linear-gradient(180deg,#fb923c,#fdba74); }

.mar-img[b-niepddhneh] { width: 80px; height: 80px; flex-shrink: 0; background: var(--glass-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 28px; opacity: .9; border-right: 1px solid var(--glass-border); overflow: hidden; }
.mar-img img[b-niepddhneh] { width: 100%; height: 100%; object-fit: cover; }
.mar-body[b-niepddhneh] { flex: 1; padding: 12px 14px; }
.mar-title[b-niepddhneh] { font-size: 13.5px; font-weight: 700; }
.mar-meta[b-niepddhneh] { font-size: 11px; color: var(--text-dim); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mar-note[b-niepddhneh] { font-size: 11px; margin-top: 5px; }
.mar-note.pending[b-niepddhneh] { color: #fbbf24; }
.mar-note.rejected[b-niepddhneh] { color: #f87171; }
.mar-right[b-niepddhneh] { padding: 12px 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; min-width: 130px; }
.mar-price[b-niepddhneh] { font-size: 15px; font-weight: 800; }
.mar-fee[b-niepddhneh] { font-size: 10px; color: var(--text-faint); }
.mar-actions[b-niepddhneh] { display: flex; gap: 4px; }

/* badges */
.bdg[b-niepddhneh] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 9.5px; font-weight: 700; }
.bdg-new[b-niepddhneh]  { background: rgba(74,222,128,.2);  color: #4ade80; border: 1px solid rgba(74,222,128,.4); }
.bdg-used[b-niepddhneh] { background: rgba(251,191,36,.2);  color: #fbbf24; border: 1px solid rgba(251,191,36,.4); }
.bdg-free[b-niepddhneh] { background: rgba(34,211,238,.2);  color: #22d3ee; border: 1px solid rgba(34,211,238,.4); }
.bdg-job[b-niepddhneh]  { background: rgba(129,140,248,.2); color: #818cf8; border: 1px solid rgba(129,140,248,.4); }
.bdg-work[b-niepddhneh] { background: rgba(167,139,250,.2); color: #a78bfa; border: 1px solid rgba(167,139,250,.4); }
.bdg-camp[b-niepddhneh] { background: rgba(251,146,60,.2);  color: #fb923c; border: 1px solid rgba(251,146,60,.4); }

.clr-new[b-niepddhneh]  { color: #4ade80; } .clr-used[b-niepddhneh] { color: #fbbf24; } .clr-free[b-niepddhneh] { color: #22d3ee; }
.clr-job[b-niepddhneh]  { color: #818cf8; } .clr-work[b-niepddhneh] { color: #a78bfa; } .clr-camp[b-niepddhneh] { color: #fb923c; }

/* status pill */
.status-pill[b-niepddhneh] { padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 600; }
.status-pill.approved[b-niepddhneh] { background: rgba(74,222,128,.11); color: #4ade80; border: 1px solid rgba(74,222,128,.22); }
.status-pill.pending[b-niepddhneh]  { background: rgba(251,191,36,.11); color: #fbbf24; border: 1px solid rgba(251,191,36,.22); }
.status-pill.rejected[b-niepddhneh] { background: rgba(248,113,113,.11); color: #f87171; border: 1px solid rgba(248,113,113,.22); }
.status-pill.expired[b-niepddhneh]  { background: rgba(100,120,150,.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,.2); }

/* toast */
.myads-toast[b-niepddhneh] { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--glass-bg); border: 1px solid rgba(74,222,128,.4); color: var(--text-main); padding: 10px 18px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; z-index: 400; opacity: 0; pointer-events: none; transition: .25s; backdrop-filter: blur(18px); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.myads-toast.show[b-niepddhneh] { opacity: 1; transform: translateX(-50%) translateY(0); }
.myads-toast.warn[b-niepddhneh] { border-color: rgba(251,191,36,.4); }

/* modals */
.modal-overlay[b-niepddhneh] { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-close[b-niepddhneh] { width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 13px; }

.confirm-modal[b-niepddhneh] { background: var(--glass-bg); backdrop-filter: blur(24px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); width: 380px; max-width: 100%; padding: 22px; text-align: center; }
.cm-icon[b-niepddhneh] { font-size: 34px; margin-bottom: 8px; }
.cm-title[b-niepddhneh] { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.cm-text[b-niepddhneh] { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; margin-bottom: 16px; }
.cm-actions[b-niepddhneh] { display: flex; gap: 8px; justify-content: center; }

.renew-modal[b-niepddhneh] { background: var(--glass-bg); backdrop-filter: blur(24px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); width: 460px; max-width: 100%; display: flex; flex-direction: column; }
.rm-head[b-niepddhneh] { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--glass-border); }
.rm-title[b-niepddhneh] { font-size: 14px; font-weight: 700; }
.rm-body[b-niepddhneh] { padding: 16px 18px; }
.rm-summary[b-niepddhneh] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; }
.rm-row[b-niepddhneh] { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; color: var(--text-dim); }
.rm-row strong[b-niepddhneh] { color: var(--text-main); }
.rm-footer[b-niepddhneh] { padding: 12px 18px; border-top: 1px solid var(--glass-border); display: flex; gap: 8px; justify-content: flex-end; }

/* shared form bits used inside renew modal */
.form-grid[b-niepddhneh] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-group[b-niepddhneh] { display: flex; flex-direction: column; gap: 4px; }
.form-group.full[b-niepddhneh] { grid-column: 1 / -1; }
.form-label[b-niepddhneh] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.req[b-niepddhneh] { color: #f87171; }
.form-input[b-niepddhneh], .form-select[b-niepddhneh] { width: 100%; padding: 8px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12.5px; outline: none; }
.form-input:focus[b-niepddhneh], .form-select:focus[b-niepddhneh] { border-color: rgba(79,168,255,.55); }
.form-select option[b-niepddhneh] { background: var(--glass-bg); color: var(--text-main); }
/* /Components/Shared/ParentConsultationSessions.razor.rz.scp.css */
/* ParentConsultationSessions.razor.css — only var(--...) from theme.css */

.pcs-panel[b-nl5o3m6bcj] { margin-bottom: 16px; color: var(--text-main); }
.pcs-head[b-nl5o3m6bcj] { margin-bottom: 12px; }
.pcs-title[b-nl5o3m6bcj] { font-size: 14px; font-weight: 700; }
.pcs-sub[b-nl5o3m6bcj] { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }

.sessions-grid[b-nl5o3m6bcj] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.session-card[b-nl5o3m6bcj] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; }

.sc-date[b-nl5o3m6bcj] { padding: 12px 14px; border-bottom: 1px solid var(--glass-border); }
.sc-date-day[b-nl5o3m6bcj] { font-size: 12.5px; font-weight: 700; color: var(--text-main); }
.sc-date-time[b-nl5o3m6bcj] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.sc-body[b-nl5o3m6bcj] { padding: 12px 14px; }
.sc-topic[b-nl5o3m6bcj] { font-size: 13px; font-weight: 700; color: var(--text-main); }
.sc-consultant[b-nl5o3m6bcj] { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
.sc-meta[b-nl5o3m6bcj] { font-size: 11px; color: var(--text-faint); margin-top: 4px; line-height: 1.6; }

.status-flow[b-nl5o3m6bcj] { display: flex; align-items: center; gap: 3px; padding: 8px 14px; }
.sf-dot[b-nl5o3m6bcj] { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; border: 1.5px solid var(--glass-border); flex-shrink: 0; }
.sf-dot.done[b-nl5o3m6bcj] { background: var(--c-success-soft); border-color: var(--c-success-border); color: var(--c-success); }
.sf-dot.active[b-nl5o3m6bcj] { background: var(--c-accent-soft); border-color: var(--c-accent-border); color: var(--c-accent); }
.sf-dot.pending[b-nl5o3m6bcj] { background: var(--c-warn-soft); border-color: var(--c-warn-border); color: var(--c-warn); }
.sf-line[b-nl5o3m6bcj] { flex: 1; height: 1px; background: var(--glass-border); }
.sf-line.done[b-nl5o3m6bcj] { background: var(--c-success-border); }

.sc-footer[b-nl5o3m6bcj] { padding: 10px 14px; border-top: 1px solid var(--glass-border); }

.badge-green[b-nl5o3m6bcj] { background: var(--c-success-soft); color: var(--c-success); border: 1px solid var(--c-success-border); padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.badge-yellow[b-nl5o3m6bcj] { background: var(--c-warn-soft); color: var(--c-warn); border: 1px solid var(--c-warn-border); padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.badge-gray[b-nl5o3m6bcj] { background: var(--c-gray-soft); color: var(--text-faint); border: 1px solid var(--c-gray-border); padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }

.join-btn[b-nl5o3m6bcj] { background: var(--c-success-gradient); color: var(--accent-text-on-fill); font-weight: 700; border: none; padding: 7px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; width: 100%; }
.join-btn:hover[b-nl5o3m6bcj] { filter: brightness(1.05); }

@media (max-width: 860px) { .sessions-grid[b-nl5o3m6bcj] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sessions-grid[b-nl5o3m6bcj] { grid-template-columns: 1fr; } }
/* /Components/Shared/PostAdPage.razor.rz.scp.css */
/* ============================================================
   PostAdPage.razor.css — CSS Isolation (scoped)
   Mirrors marketplace-v2.html "Post Ad". Surfaces/text from theme.css;
   category accent colours stay literal (brand-semantic).
   ============================================================ */

.post-page[b-5yblluyhrz] {
    --c-new-bg: rgba(74,222,128,.10);  --c-new-border: rgba(74,222,128,.30);
    --c-used-bg: rgba(251,191,36,.10); --c-used-border: rgba(251,191,36,.30);
    --c-free-bg: rgba(34,211,238,.10); --c-free-border: rgba(34,211,238,.30);
    --c-job-bg: rgba(129,140,248,.10); --c-job-border: rgba(129,140,248,.30);
    --c-work-bg: rgba(167,139,250,.10);--c-work-border: rgba(167,139,250,.30);
    --c-camp-bg: rgba(251,146,60,.10); --c-camp-border: rgba(251,146,60,.30);

    max-width: 900px;
    margin: 0 auto;
    color: var(--text-main);
}

/* buttons */
.btn[b-5yblluyhrz] { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-5yblluyhrz] { opacity: .6; cursor: not-allowed; }
.btn-primary[b-5yblluyhrz] { background: var(--accent-gradient); color: var(--accent-text-on-fill); }
.btn-ghost[b-5yblluyhrz] { background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-5yblluyhrz] { background: var(--accent-glow-soft); color: var(--text-main); }
.btn-sm[b-5yblluyhrz] { padding: 6px 12px; font-size: 12px; }

.panel-header[b-5yblluyhrz] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.panel-title[b-5yblluyhrz] { font-size: 18px; font-weight: 700; }
.panel-sub[b-5yblluyhrz] { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.post-alert[b-5yblluyhrz] { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: #f87171; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }

.post-wrap[b-5yblluyhrz] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 22px; backdrop-filter: blur(var(--glass-blur)); box-shadow: 0 8px 32px rgba(0,0,0,.25); }
.form-section-title[b-5yblluyhrz] { font-size: 13px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; color: var(--text-dim); }
.divider[b-5yblluyhrz] { height: 1px; background: var(--glass-border); margin: 18px 0; }

.form-grid[b-5yblluyhrz] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group[b-5yblluyhrz] { display: flex; flex-direction: column; gap: 5px; }
.form-group.full[b-5yblluyhrz] { grid-column: 1 / -1; }
.form-label[b-5yblluyhrz] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.req[b-5yblluyhrz] { color: #f87171; }
.form-input[b-5yblluyhrz], .form-select[b-5yblluyhrz], .form-textarea[b-5yblluyhrz] { width: 100%; padding: 9px 12px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; backdrop-filter: blur(8px); }
.form-input:focus[b-5yblluyhrz], .form-select:focus[b-5yblluyhrz], .form-textarea:focus[b-5yblluyhrz] { border-color: rgba(79,168,255,.55); }
.form-input.err[b-5yblluyhrz], .form-select.err[b-5yblluyhrz], .form-textarea.err[b-5yblluyhrz] { border-color: rgba(248,113,113,.6); }
.form-select option[b-5yblluyhrz] { background: var(--glass-bg); color: var(--text-main); }
.form-textarea[b-5yblluyhrz] { resize: vertical; min-height: 88px; line-height: 1.6; }
.form-hint[b-5yblluyhrz] { font-size: 10.5px; color: var(--text-faint); margin-top: 6px; }

/* category selector */
.cat-selector[b-5yblluyhrz] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cat-opt[b-5yblluyhrz] { padding: 11px 14px; border-radius: var(--radius-sm); border: 2px solid var(--glass-border); background: var(--glass-bg-soft); cursor: pointer; transition: .25s; display: flex; align-items: center; gap: 10px; backdrop-filter: blur(10px); }
.cat-opt:hover[b-5yblluyhrz] { transform: translateY(-1px); }
.cat-opt-new.selected[b-5yblluyhrz]  { border-color: var(--c-new-border);  background: var(--c-new-bg); }
.cat-opt-used.selected[b-5yblluyhrz] { border-color: var(--c-used-border); background: var(--c-used-bg); }
.cat-opt-free.selected[b-5yblluyhrz] { border-color: var(--c-free-border); background: var(--c-free-bg); }
.cat-opt-job.selected[b-5yblluyhrz]  { border-color: var(--c-job-border);  background: var(--c-job-bg); }
.cat-opt-work.selected[b-5yblluyhrz] { border-color: var(--c-work-border); background: var(--c-work-bg); }
.cat-opt-camp.selected[b-5yblluyhrz] { border-color: var(--c-camp-border); background: var(--c-camp-bg); }
.opt-icon[b-5yblluyhrz] { font-size: 20px; flex-shrink: 0; }
.opt-name[b-5yblluyhrz] { font-size: 12.5px; font-weight: 700; }
.opt-fee[b-5yblluyhrz] { font-size: 10px; color: var(--text-faint); margin-top: 1px; }

/* image upload */
.img-upload-grid[b-5yblluyhrz] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.img-slot[b-5yblluyhrz] { aspect-ratio: 1; border-radius: var(--radius-sm); border: 2px dashed var(--glass-border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .2s; background: var(--glass-bg-soft); font-size: 22px; color: var(--text-faint); overflow: hidden; }
.img-slot:hover[b-5yblluyhrz] { border-color: rgba(79,168,255,.4); background: var(--accent-glow-soft); }
.img-slot img[b-5yblluyhrz] { width: 100%; height: 100%; object-fit: cover; }

/* fee box */
.fee-box[b-5yblluyhrz] { padding: 14px 16px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: space-between; backdrop-filter: blur(10px); }
.fee-box.paid[b-5yblluyhrz] { background: rgba(79,168,255,.08); border: 1px solid rgba(79,168,255,.25); }
.fee-box.free[b-5yblluyhrz] { background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.25); }
.fee-name[b-5yblluyhrz] { font-size: 12px; font-weight: 600; }
.fee-sub[b-5yblluyhrz] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.fee-val[b-5yblluyhrz] { font-size: 22px; font-weight: 800; }
.fee-val.paid[b-5yblluyhrz] { color: #4fa8ff; }
.fee-val.free-clr[b-5yblluyhrz] { color: #22d3ee; }

.pay-section[b-5yblluyhrz] { margin-top: 14px; }

.post-actions[b-5yblluyhrz] { display: flex; gap: 10px; margin-top: 18px; }

@media (max-width: 640px) {
    .form-grid[b-5yblluyhrz], .cat-selector[b-5yblluyhrz] { grid-template-columns: 1fr; }
    .img-upload-grid[b-5yblluyhrz] { grid-template-columns: repeat(3, 1fr); }
}
/* /Components/Shared/SettingsPage.razor.rz.scp.css */
/* Settings page — scoped styles (theme.css vars only, no hardcoded colors). */

.settings-page[b-hvq2s3ham7] { padding: 4px; }

/* page title */
.page-header[b-hvq2s3ham7] { margin-bottom: 20px; }
.page-title[b-hvq2s3ham7]  { font-size: 18px; font-weight: 700; color: var(--text-main); }
.page-sub[b-hvq2s3ham7]    { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

/* layout */
.settings-layout[b-hvq2s3ham7] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 18px;
    align-items: start;
}
.settings-nav[b-hvq2s3ham7] {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 8px;
    position: sticky;
    top: 16px;
    backdrop-filter: blur(var(--glass-blur));
}
.sn-item[b-hvq2s3ham7] {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 12.5px; font-weight: 500;
    color: var(--text-dim);
    cursor: pointer; transition: .15s;
    border-left: 2px solid transparent;
}
.sn-item:hover[b-hvq2s3ham7]  { background: var(--accent-glow-soft); color: var(--text-main); }
.sn-item.active[b-hvq2s3ham7] { background: var(--accent-glow-soft); color: var(--accent-glow); border-left-color: var(--accent-glow); }
.sn-icon[b-hvq2s3ham7]    { font-size: 14px; width: 18px; text-align: center; }
.sn-divider[b-hvq2s3ham7] { height: 1px; background: var(--glass-border); margin: 6px 0; }

/* content */
.settings-content[b-hvq2s3ham7] { display: flex; flex-direction: column; gap: 16px; }

/* section card */
.sec-card[b-hvq2s3ham7] {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    backdrop-filter: blur(var(--glass-blur));
}
.sec-head[b-hvq2s3ham7] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; gap: 10px;
}
.sec-head-icon[b-hvq2s3ham7]  { font-size: 18px; }
.sec-head-title[b-hvq2s3ham7] { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.sec-head-sub[b-hvq2s3ham7]   { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.sec-body[b-hvq2s3ham7]       { padding: 18px; }

/* form elements */
.form-group[b-hvq2s3ham7] { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.form-group:last-child[b-hvq2s3ham7] { margin-bottom: 0; }
.form-label[b-hvq2s3ham7] {
    font-size: 10px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .6px;
}
.form-input[b-hvq2s3ham7], .form-select[b-hvq2s3ham7] {
    width: 100%; padding: 8px 11px;
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: inherit; font-size: 13px; outline: none; transition: .15s;
}
.form-input:focus[b-hvq2s3ham7], .form-select:focus[b-hvq2s3ham7] { border-color: var(--accent-glow); }
.form-select option[b-hvq2s3ham7] { background: var(--glass-bg); color: var(--text-main); }
.form-input[type="password"][b-hvq2s3ham7] { letter-spacing: 2px; }
.form-row[b-hvq2s3ham7] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* buttons */
.btn[b-hvq2s3ham7] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s;
}
.btn:disabled[b-hvq2s3ham7] { opacity: .6; cursor: default; }
.btn-primary[b-hvq2s3ham7] {
    background: var(--accent-gradient);
    color: var(--accent-text-on-fill);
    box-shadow: 0 0 14px var(--accent-glow-soft);
}
.btn-primary:hover:not(:disabled)[b-hvq2s3ham7] { transform: translateY(-1px); }
.btn-ghost[b-hvq2s3ham7] {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    color: var(--text-dim);
}
.btn-ghost:hover:not(:disabled)[b-hvq2s3ham7] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.btn-success[b-hvq2s3ham7] {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
}
.btn-sm[b-hvq2s3ham7] { padding: 6px 12px; font-size: 12px; }
.btn-xs[b-hvq2s3ham7] { padding: 4px 9px; font-size: 11px; }

/* inline status message */
.inline-msg[b-hvq2s3ham7] { font-size: 11.5px; margin-left: 10px; margin-top: 6px; display: inline-block; }
.inline-msg.ok[b-hvq2s3ham7]   { color: var(--text-dim); }
.inline-msg.fail[b-hvq2s3ham7] { color: var(--text-main); }

/* theme selector */
.theme-options[b-hvq2s3ham7] { display: flex; gap: 10px; margin-top: 4px; }
.theme-opt[b-hvq2s3ham7] {
    padding: 10px 16px; border-radius: var(--radius-sm);
    border: 2px solid var(--glass-border);
    cursor: pointer; font-size: 12px; font-weight: 600;
    transition: .2s; display: flex; align-items: center; gap: 8px;
    color: var(--text-dim);
}
.theme-opt.active[b-hvq2s3ham7] { border-color: var(--accent-glow); background: var(--accent-glow-soft); color: var(--text-main); }
.theme-dot[b-hvq2s3ham7] { width: 14px; height: 14px; border-radius: 50%; }
.dot-blue[b-hvq2s3ham7]  { background: linear-gradient(135deg, #4fa8ff, #7dd3fc); }
.dot-gold[b-hvq2s3ham7]  { background: linear-gradient(135deg, #f59e0b, #fcd34d); }
.dot-lilac[b-hvq2s3ham7] { background: linear-gradient(135deg, #a78bfa, #c4b5fd); }
.dot-gray[b-hvq2s3ham7]  { background: linear-gradient(135deg, #9090b8, #c8c8e0); }
.theme-preview[b-hvq2s3ham7] {
    margin-top: 12px; height: 60px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--text-dim); transition: .3s;
}
.preview-blue[b-hvq2s3ham7]  { background: linear-gradient(135deg, rgba(79,168,255,0.15), var(--glass-bg)); }
.preview-gold[b-hvq2s3ham7]  { background: linear-gradient(135deg, rgba(245,158,11,0.15), var(--glass-bg)); }
.preview-lilac[b-hvq2s3ham7] { background: linear-gradient(135deg, rgba(167,139,250,0.15), var(--glass-bg)); }
.preview-gray[b-hvq2s3ham7]  { background: linear-gradient(135deg, rgba(160,160,200,0.15), var(--glass-bg)); }

/* font preview box */
.font-preview[b-hvq2s3ham7] {
    margin-top: 12px; padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-soft);
    color: var(--text-main);
}

/* api key rows */
.api-row[b-hvq2s3ham7] { display: flex; gap: 8px; align-items: flex-start; }
.api-icon[b-hvq2s3ham7] { font-size: 20px; flex-shrink: 0; width: 30px; text-align: center; }
.api-info[b-hvq2s3ham7] { flex: 1; }
.api-name[b-hvq2s3ham7] { font-size: 13px; font-weight: 700; color: var(--text-main); }
.api-hint[b-hvq2s3ham7] { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.api-input-wrap[b-hvq2s3ham7] { display: flex; gap: 6px; margin-top: 6px; }
.api-input[b-hvq2s3ham7] {
    flex: 1; padding: 7px 10px;
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: monospace; font-size: 12px; outline: none; letter-spacing: 1px;
}
.api-input:focus[b-hvq2s3ham7] { border-color: var(--accent-glow); }
.api-status[b-hvq2s3ham7] { font-size: 10px; margin-top: 4px; color: var(--text-dim); }
.api-status.ok[b-hvq2s3ham7]   { color: var(--text-main); }
.api-status.fail[b-hvq2s3ham7] { color: var(--text-faint); }
.api-divider[b-hvq2s3ham7] { height: 1px; background: var(--glass-border); margin: 14px 0; }
.api-divider:last-child[b-hvq2s3ham7] { display: none; }

/* hardware test */
.hw-grid[b-hvq2s3ham7] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hw-card[b-hvq2s3ham7] {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 14px; text-align: center;
}
.hw-icon[b-hvq2s3ham7]  { font-size: 28px; margin-bottom: 8px; }
.hw-title[b-hvq2s3ham7] { font-size: 12.5px; font-weight: 700; margin-bottom: 10px; color: var(--text-main); }
.hw-preview[b-hvq2s3ham7] {
    width: 100%; height: 80px;
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--text-faint);
    margin-bottom: 8px; overflow: hidden;
}
.hw-preview video[b-hvq2s3ham7] { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.hw-ok[b-hvq2s3ham7]  { color: var(--text-main); font-size: 11px; }
.hw-sub[b-hvq2s3ham7] { font-size: 10px; color: var(--text-faint); }

/* volume bars */
.vol-bars[b-hvq2s3ham7] { display: flex; align-items: flex-end; gap: 3px; height: 50px; justify-content: center; margin-bottom: 8px; }
.vol-bar[b-hvq2s3ham7]  { width: 8px; border-radius: 2px 2px 0 0; background: var(--accent-gradient); transition: .1s; }

/* network */
.net-grid[b-hvq2s3ham7] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.net-card[b-hvq2s3ham7] {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 14px; text-align: center;
}
.net-icon[b-hvq2s3ham7]  { font-size: 22px; margin-bottom: 6px; }
.net-label[b-hvq2s3ham7] {
    font-size: 10px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px;
}
.net-val[b-hvq2s3ham7]  { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--text-main); }
.net-unit[b-hvq2s3ham7] { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.net-val.good[b-hvq2s3ham7] { color: var(--text-main); }
.net-val.warn[b-hvq2s3ham7] { color: var(--text-dim); }
.net-val.bad[b-hvq2s3ham7]  { color: var(--text-faint); }

/* system status */
.sys-grid[b-hvq2s3ham7] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.sys-card[b-hvq2s3ham7] {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 14px;
}
.sys-label[b-hvq2s3ham7] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.sys-val[b-hvq2s3ham7]   { font-size: 18px; font-weight: 800; color: var(--text-main); }
.sys-sub[b-hvq2s3ham7]   { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.sys-dot[b-hvq2s3ham7]   { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.dot-ok[b-hvq2s3ham7]    { background: var(--accent-glow); box-shadow: 0 0 6px var(--accent-glow); }
.dot-warn[b-hvq2s3ham7]  { background: var(--text-faint); }
/* /Components/Shared/ToggleRow.razor.rz.scp.css */
/* Toggle switch row — scoped (theme.css vars only). */

.toggle-row[b-btigg9mbvk] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border);
}
.toggle-row:last-of-type[b-btigg9mbvk] { border-bottom: none; }
.tr-label[b-btigg9mbvk] { font-size: 13px; font-weight: 600; color: var(--text-main); }
.tr-desc[b-btigg9mbvk]  { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.toggle[b-btigg9mbvk] { position: relative; width: 42px; height: 24px; cursor: pointer; flex-shrink: 0; }
.toggle input[b-btigg9mbvk] { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track[b-btigg9mbvk] {
    position: absolute; inset: 0; border-radius: 12px;
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    transition: .25s;
}
.toggle input:checked + .toggle-track[b-btigg9mbvk] {
    background: var(--accent-glow-soft);
    border-color: var(--accent-glow);
}
.toggle-thumb[b-btigg9mbvk] {
    position: absolute; top: 4px; left: 4px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--text-faint); transition: .25s; pointer-events: none;
}
.toggle input:checked ~ .toggle-thumb[b-btigg9mbvk] { left: 22px; background: var(--accent-glow); }
/* /Components/Teacher/AppearancePage.razor.rz.scp.css */
.placeholder-page[b-bmv3cgjt2x] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-bmv3cgjt2x]  { font-size: 48px; }
.ph-title[b-bmv3cgjt2x] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-bmv3cgjt2x]   { font-size: 14px; }
/* /Components/Teacher/ARSessionsPage.razor.rz.scp.css */
.placeholder-page[b-0em5o4b253] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-0em5o4b253]  { font-size: 48px; }
.ph-title[b-0em5o4b253] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-0em5o4b253]   { font-size: 14px; }
/* /Components/Teacher/AttendancePage.razor.rz.scp.css */
.placeholder-page[b-szs8g9i6k6] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-szs8g9i6k6]  { font-size: 48px; }
.ph-title[b-szs8g9i6k6] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-szs8g9i6k6]   { font-size: 14px; }
/* /Components/Teacher/ComingSoonPlaceholder.razor.rz.scp.css */
.cs-page[b-9ck1n1hpwu] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
}
.cs-card[b-9ck1n1hpwu] {
    text-align: center;
    max-width: 420px;
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: 0 0 24px var(--accent-glow-soft);
}
.cs-icon[b-9ck1n1hpwu]  { font-size: 40px; margin-bottom: 14px; }
.cs-title[b-9ck1n1hpwu] { font-size: 17px; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
.cs-msg[b-9ck1n1hpwu]   { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
/* /Components/Teacher/DashboardHome.razor.rz.scp.css */
.placeholder-page[b-byq0dtwrra] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-byq0dtwrra]  { font-size: 48px; }
.ph-title[b-byq0dtwrra] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-byq0dtwrra]   { font-size: 14px; }
/* /Components/Teacher/HomePracticeView.razor.rz.scp.css */
/* ============================================================
   HomePracticeView.razor.css — Teacher → Home Practice
   CSS Isolation; colours via theme.css var(--…).
   ============================================================ */

.hp-page[b-ybl9c8c7hn] { color: var(--text-main); }

.hp-header[b-ybl9c8c7hn] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.hp-title[b-ybl9c8c7hn]  { font-size: 17px; font-weight: 700; }
.hp-sub[b-ybl9c8c7hn]    { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.hp-btn[b-ybl9c8c7hn] {
    padding: 8px 15px; border-radius: var(--radius-sm); cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    color: var(--text-dim); white-space: nowrap; transition: .15s;
}
.hp-btn:hover:not(:disabled)[b-ybl9c8c7hn] { color: var(--text-main); border-color: var(--accent-glow); }
.hp-btn:disabled[b-ybl9c8c7hn] { opacity: .5; cursor: not-allowed; }

/* stats */
.hp-stats[b-ybl9c8c7hn] { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 16px; }
.hp-stat[b-ybl9c8c7hn] {
    padding: 13px 16px; background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
}
.hp-stat-val[b-ybl9c8c7hn] { font-size: 18px; font-weight: 700; }
.hp-stat-lbl[b-ybl9c8c7hn] { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }

/* table */
.hp-table-wrap[b-ybl9c8c7hn] {
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
    overflow-x: auto;
}
.hp-table[b-ybl9c8c7hn] { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 760px; }
.hp-table thead th[b-ybl9c8c7hn] {
    text-align: left; padding: 10px 9px; font-size: 9px; font-weight: 700;
    color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px;
    border-bottom: 1px solid var(--glass-border); white-space: nowrap;
}
.hp-table td[b-ybl9c8c7hn] { padding: 10px 9px; border-bottom: 1px solid rgba(100,170,255,0.06); }
.hp-num[b-ybl9c8c7hn] { text-align: right; }
.hp-table thead th.hp-num[b-ybl9c8c7hn] { text-align: right; }
.hp-th-x[b-ybl9c8c7hn] { width: 24px; }

.hp-row[b-ybl9c8c7hn] { cursor: pointer; transition: background .12s; }
.hp-row:hover[b-ybl9c8c7hn], .hp-row.open[b-ybl9c8c7hn] { background: var(--accent-glow-soft); }
.hp-x[b-ybl9c8c7hn] { color: var(--text-faint); font-size: 11px; }

.hp-d[b-ybl9c8c7hn]      { font-weight: 600; white-space: nowrap; }
.hp-t[b-ybl9c8c7hn]      { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.hp-strong[b-ybl9c8c7hn] { font-weight: 600; }
.hp-dim[b-ybl9c8c7hn]    { color: var(--text-dim); }
.hp-mono[b-ybl9c8c7hn]   { font-variant-numeric: tabular-nums; }
.hp-na[b-ybl9c8c7hn]     { color: var(--text-faint); }
.hp-gold[b-ybl9c8c7hn]   { color: #fbbf24; font-weight: 600; }
.hp-pass[b-ybl9c8c7hn]   { color: #4ade80; font-weight: 600; }
.hp-fail[b-ybl9c8c7hn]   { color: #f87171; font-weight: 600; }

/* detail */
.hp-detail-row td[b-ybl9c8c7hn] { padding: 0; background: rgba(0,0,0,.14); border-bottom: 1px solid var(--glass-border); }
.hp-detail[b-ybl9c8c7hn] { padding: 13px 16px 15px 34px; }
.hp-none[b-ybl9c8c7hn]   { font-size: 12px; color: var(--text-faint); }

.hp-runs[b-ybl9c8c7hn] { display: flex; flex-direction: column; gap: 7px; }
.hp-run[b-ybl9c8c7hn] {
    display: flex; align-items: center; gap: 11px; padding: 9px 12px;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    border-left-width: 3px; border-radius: var(--radius-sm);
}
.hp-run.pass[b-ybl9c8c7hn] { border-left-color: #4ade80; }
.hp-run.fail[b-ybl9c8c7hn] { border-left-color: #f87171; }

.hp-run-ico[b-ybl9c8c7hn]   { font-size: 17px; flex-shrink: 0; }
.hp-run-main[b-ybl9c8c7hn]  { flex: 1; min-width: 0; }
.hp-run-title[b-ybl9c8c7hn] { font-size: 12.5px; font-weight: 600; }
.hp-run-meta[b-ybl9c8c7hn]  { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.hp-run-note[b-ybl9c8c7hn]  { font-size: 10.5px; color: var(--text-dim); margin-top: 4px; font-style: italic; }

.hp-run-chips[b-ybl9c8c7hn] { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.hp-chip[b-ybl9c8c7hn] {
    padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 600;
    background: rgba(100,120,150,.16); color: var(--text-dim); white-space: nowrap;
}

.hp-badge[b-ybl9c8c7hn] {
    padding: 3px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 700;
    white-space: nowrap; flex-shrink: 0; min-width: 74px; text-align: center;
}
.hp-badge.hp-pass[b-ybl9c8c7hn] { background: rgba(74,222,128,.12);  border: 1px solid rgba(74,222,128,.25); }
.hp-badge.hp-fail[b-ybl9c8c7hn] { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.25); }

/* states */
.hp-loading[b-ybl9c8c7hn] { padding: 24px; text-align: center; color: var(--text-dim); font-size: 13px; }
.hp-empty[b-ybl9c8c7hn] {
    padding: 44px 20px; text-align: center;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}
.hp-empty-ico[b-ybl9c8c7hn] { font-size: 32px; margin-bottom: 10px; opacity: .65; }
.hp-empty p[b-ybl9c8c7hn]   { font-size: 14px; font-weight: 600; margin: 0 0 5px; }
.hp-empty span[b-ybl9c8c7hn] { font-size: 11.5px; color: var(--text-faint); }

@media (max-width: 900px) { .hp-detail[b-ybl9c8c7hn] { padding-left: 16px; } }
/* /Components/Teacher/LiveClassHistory.razor.rz.scp.css */
/* ============================================================
   LiveClassHistory.razor.css — Held Online Classes grid
   CSS Isolation; content only. Colours via theme.css var(--…),
   so it works under all three themes (blue / gold / lilac).
   ============================================================ */

.lch-page[b-fjp7xhg07r] { color: var(--text-main); }

/* ── header ── */
.lch-header[b-fjp7xhg07r] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.lch-title[b-fjp7xhg07r]  { font-size: 17px; font-weight: 700; }
.lch-sub[b-fjp7xhg07r]    { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

/* ── buttons ── */
.lch-btn[b-fjp7xhg07r] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: var(--radius-sm); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; border: none; transition: .15s; white-space: nowrap; }
.lch-btn:disabled[b-fjp7xhg07r] { opacity: .5; cursor: not-allowed; }
.lch-btn-ghost[b-fjp7xhg07r] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim); }
.lch-btn-ghost:hover:not(:disabled)[b-fjp7xhg07r] { color: var(--text-main); border-color: var(--accent-glow); }

/* ── stat cards ── */
.lch-stats[b-fjp7xhg07r] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.lch-stat[b-fjp7xhg07r]  { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-md); }
.lch-stat-ico[b-fjp7xhg07r] { font-size: 20px; flex-shrink: 0; }
.lch-stat-val[b-fjp7xhg07r] { font-size: 18px; font-weight: 700; line-height: 1.1; }
.lch-stat-lbl[b-fjp7xhg07r] { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }

/* ── filters ── */
.lch-filters[b-fjp7xhg07r] { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.lch-field[b-fjp7xhg07r] { display: flex; flex-direction: column; gap: 4px; }
.lch-grow[b-fjp7xhg07r]  { flex: 1; min-width: 160px; }
.lch-lbl[b-fjp7xhg07r]   { font-size: 9.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.lch-input[b-fjp7xhg07r] { padding: 7px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 12.5px; outline: none; transition: .15s; }
.lch-input:focus[b-fjp7xhg07r] { border-color: var(--accent-glow); }
.lch-input option[b-fjp7xhg07r] { background: #0c1a30; color: var(--text-main); }

/* ── table ── */
.lch-table-wrap[b-fjp7xhg07r] { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow-x: auto; }
/* Compact enough that every metric column the teacher asked for is visible
   without a horizontal scroll on a normal laptop; the wrap still scrolls on
   genuinely narrow screens rather than squashing the numbers. */
.lch-table[b-fjp7xhg07r] { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 860px; table-layout: auto; }
.lch-table thead th[b-fjp7xhg07r] { text-align: left; padding: 10px 8px; font-size: 9px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--glass-border); white-space: nowrap; }
.lch-table td[b-fjp7xhg07r] { padding: 10px 8px; border-bottom: 1px solid rgba(100,170,255,0.06); vertical-align: middle; }
.lch-num[b-fjp7xhg07r] { text-align: right; }
.lch-table thead th.lch-num[b-fjp7xhg07r] { text-align: right; }
.lch-th-x[b-fjp7xhg07r] { width: 26px; }

/* clickable row */
.lch-row[b-fjp7xhg07r] { cursor: pointer; transition: background .12s; }
.lch-row:hover[b-fjp7xhg07r] { background: var(--accent-glow-soft); }
.lch-row.open[b-fjp7xhg07r] { background: var(--accent-glow-soft); }
.lch-x[b-fjp7xhg07r] { color: var(--text-faint); font-size: 11px; }

.lch-date[b-fjp7xhg07r]   { font-weight: 600; white-space: nowrap; }
.lch-time[b-fjp7xhg07r]   { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; }
.lch-strong[b-fjp7xhg07r] { font-weight: 600; }
.lch-dim[b-fjp7xhg07r]    { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.lch-mono[b-fjp7xhg07r]   { font-variant-numeric: tabular-nums; }
.lch-na[b-fjp7xhg07r]     { color: var(--text-faint); }

.lch-score[b-fjp7xhg07r]  { font-weight: 700; font-size: 13px; }
.lch-gold[b-fjp7xhg07r]   { color: #fbbf24; font-weight: 600; }
.lch-green[b-fjp7xhg07r]  { color: #4ade80; }
.lch-pass[b-fjp7xhg07r]   { color: #4ade80; font-weight: 600; }
.lch-fail[b-fjp7xhg07r]   { color: #f87171; font-weight: 600; }
.lch-unpaid[b-fjp7xhg07r] { font-size: 9.5px; color: #fbbf24; margin-top: 2px; }

/* ── 0..100 meter (attention / noise) ── */
/* flex wrapper: keeps the track from collapsing inside a right-aligned cell */
.lch-meter-wrap[b-fjp7xhg07r] { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.lch-meter[b-fjp7xhg07r]     { width: 36px; height: 5px; border-radius: 3px; background: rgba(100,120,150,0.25); overflow: hidden; flex-shrink: 0; }
.lch-meter-bar[b-fjp7xhg07r] { height: 100%; border-radius: 3px; transition: width .2s; min-width: 2px; }
.lch-meter-val[b-fjp7xhg07r] { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; }
.lch-ok[b-fjp7xhg07r]  { background: linear-gradient(90deg, #4ade80, #86efac); }
.lch-mid[b-fjp7xhg07r] { background: linear-gradient(90deg, #fbbf24, #fcd34d); }
.lch-bad[b-fjp7xhg07r] { background: linear-gradient(90deg, #f87171, #fca5a5); }

/* ── expanded detail row ── */
.lch-detail-row td[b-fjp7xhg07r] { padding: 0; border-bottom: 1px solid var(--glass-border); background: rgba(0,0,0,0.14); }
.lch-detail[b-fjp7xhg07r]      { padding: 14px 16px 16px 38px; }
.lch-detail-head[b-fjp7xhg07r] { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.lch-none[b-fjp7xhg07r]        { font-size: 12px; color: var(--text-faint); padding: 6px 0; }

.lch-runs[b-fjp7xhg07r] { display: flex; flex-direction: column; gap: 7px; }
.lch-run[b-fjp7xhg07r]  { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-left-width: 3px; }
.lch-run.pass[b-fjp7xhg07r] { border-left-color: #4ade80; }
.lch-run.fail[b-fjp7xhg07r] { border-left-color: #f87171; }

.lch-run-ico[b-fjp7xhg07r]   { font-size: 17px; flex-shrink: 0; }
.lch-run-main[b-fjp7xhg07r]  { flex: 1; min-width: 0; }
.lch-run-title[b-fjp7xhg07r] { font-size: 12.5px; font-weight: 600; }
.lch-run-meta[b-fjp7xhg07r]  { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.lch-run-note[b-fjp7xhg07r]  { font-size: 10.5px; color: var(--text-dim); margin-top: 4px; font-style: italic; }

.lch-run-metrics[b-fjp7xhg07r] { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.lch-chip[b-fjp7xhg07r] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 600; background: rgba(100,120,150,0.16); color: var(--text-dim); white-space: nowrap; }

.lch-run-badge[b-fjp7xhg07r] { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 700; white-space: nowrap; flex-shrink: 0; min-width: 78px; text-align: center; }
.lch-res-pass[b-fjp7xhg07r]    { background: rgba(74,222,128,0.12);  color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }
.lch-res-fail[b-fjp7xhg07r]    { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.25); }
.lch-res-timeout[b-fjp7xhg07r] { background: rgba(251,191,36,0.12);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
.lch-res-error[b-fjp7xhg07r]   { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.25); }

/* ── states ── */
.lch-loading[b-fjp7xhg07r]  { padding: 26px; text-align: center; color: var(--text-dim); font-size: 13px; }
.lch-empty[b-fjp7xhg07r]    { padding: 46px 20px; text-align: center; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); }
.lch-empty-ico[b-fjp7xhg07r] { font-size: 34px; margin-bottom: 10px; opacity: .65; }
.lch-empty p[b-fjp7xhg07r]   { font-size: 14px; font-weight: 600; margin: 0 0 5px; }
.lch-empty span[b-fjp7xhg07r] { font-size: 11.5px; color: var(--text-faint); }
.lch-foot[b-fjp7xhg07r]     { margin-top: 10px; font-size: 11px; color: var(--text-faint); text-align: right; }

@media (max-width: 900px) {
    .lch-detail[b-fjp7xhg07r] { padding-left: 16px; }
}
/* /Components/Teacher/LiveClassRoom.razor.rz.scp.css */
/* ============================================================
   LiveClassRoom.razor.css — Teacher live therapy room.
   CSS Isolation. Shell/chrome colors come from theme.css
   var(--…) so it follows blue/gold/lilac like every other page.
   Engine colors (YOLO/VOSK/MP) and pass/fail stay hard-coded —
   they are semantic (they mean a specific engine / result), not
   themeable chrome. Layout mirrors online_class.html.
   ============================================================ */

/* Full-screen page shell with the neon-glass background (grid+orbs) */
.lc-page[b-fz1h8ps1n9] {
    height: 100vh; overflow: hidden; position: relative;
    display: flex; flex-direction: column;
    color: var(--text-main); background: var(--bg-gradient);
    font-family: 'Segoe UI', system-ui, sans-serif; user-select: none;
}
.lc-page[b-fz1h8ps1n9]::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle 550px at 78% 8%, var(--orb-1), transparent 60%),
        radial-gradient(circle 450px at 8% 92%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}

/* ── Topbar ── */
.lc-topbar[b-fz1h8ps1n9] {
    height:52px; background:var(--glass-bg);
    backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
    border-bottom:1px solid var(--glass-border);
    display:flex; align-items:center; gap:8px; padding:0 14px;
    flex-shrink:0; z-index:60; position:relative;
}
.lc-logo[b-fz1h8ps1n9]       { display:flex; align-items:center; gap:8px; }
.lc-logo-icon[b-fz1h8ps1n9]  { width:28px; height:28px; border-radius:7px;
                  background:var(--accent-gradient);
                  display:flex; align-items:center; justify-content:center;
                  font-weight:900; font-size:11px; color:var(--accent-text-on-fill); flex-shrink:0; }
.lc-title[b-fz1h8ps1n9]      { font-size:12px; font-weight:800; color:var(--text-main); }
.lc-sub[b-fz1h8ps1n9]        { font-size:9px; color:var(--text-faint); }
.lc-sep[b-fz1h8ps1n9]        { width:1px; height:26px; background:var(--glass-border); }
.lc-timer[b-fz1h8ps1n9]      { padding:3px 10px; border-radius:7px;
                  background:var(--glass-bg-soft); border:1px solid var(--glass-border);
                  font-size:11px; font-weight:700; color:var(--text-dim);
                  min-width:52px; text-align:center; font-variant-numeric:tabular-nums; }
.lc-layout-btns[b-fz1h8ps1n9] { display:flex; gap:3px; padding:3px;
                   border-radius:7px; background:var(--glass-bg-soft);
                   border:1px solid var(--glass-border); }

/* ── Buttons ── */
.lc-btn[b-fz1h8ps1n9]        { padding:4px 12px; border-radius:7px; font-size:11px; font-weight:700;
                  cursor:pointer; border:1px solid; font-family:inherit; }
.lc-btn-indigo[b-fz1h8ps1n9] { background:var(--accent-glow-soft); border-color:var(--glass-border); color:var(--accent-glow); }
.lc-btn-amber[b-fz1h8ps1n9]  { background:rgba(251,191,36,.1);  border-color:rgba(251,191,36,.3);  color:#fbbf24; }
.lc-btn-green[b-fz1h8ps1n9]  { background:rgba(34,197,94,.12);  border-color:rgba(34,197,94,.32);  color:#4ade80; }
.lc-btn-red[b-fz1h8ps1n9]    { background:rgba(239,68,68,.12);  border-color:rgba(239,68,68,.32);  color:#f87171; }
.lc-btn-ghost[b-fz1h8ps1n9]  { background:transparent; border-color:var(--glass-border); color:var(--text-faint); }

/* ibtn */
.ibtn[b-fz1h8ps1n9]      { width:26px; height:26px; border-radius:6px; display:flex; align-items:center;
              justify-content:center; font-size:12px; cursor:pointer;
              border:1px solid transparent; transition:.15s; flex-shrink:0; color:var(--text-dim); }
.ibtn:hover[b-fz1h8ps1n9] { background:var(--accent-glow-soft); }
.ibtn-sel[b-fz1h8ps1n9]  { background:var(--accent-glow-soft); border-color:var(--accent-glow); }
.ibtn-mic[b-fz1h8ps1n9]  { background:rgba(251,146,60,.15); border-color:rgba(251,146,60,.4);
              animation:micRing-b-fz1h8ps1n9 1.8s ease-in-out infinite; }
.ibtn-vid[b-fz1h8ps1n9]  { background:rgba(34,211,238,.12); border-color:rgba(34,211,238,.45);
              animation:vidRing-b-fz1h8ps1n9 1.8s ease-in-out infinite; }
@keyframes micRing-b-fz1h8ps1n9 {
    0%   { box-shadow:0 0 0 0 rgba(251,146,60,.6); }
    70%  { box-shadow:0 0 0 6px rgba(251,146,60,0); }
    100% { box-shadow:0 0 0 0 rgba(251,146,60,0); }
}
@keyframes vidRing-b-fz1h8ps1n9 {
    0%   { box-shadow:0 0 0 0 rgba(34,211,238,.5); }
    70%  { box-shadow:0 0 0 6px rgba(34,211,238,0); }
    100% { box-shadow:0 0 0 0 rgba(34,211,238,0); }
}

/* ── Main layout ── */
.lc-main[b-fz1h8ps1n9] { flex:1; display:flex; overflow:hidden; min-height:0; position:relative; z-index:1; }

/* ── Sidebar (scenario list) ── */
.lc-sidebar[b-fz1h8ps1n9]   { width:200px; flex-shrink:0; background:var(--glass-bg);
                  backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
                  border-right:1px solid var(--glass-border);
                  display:flex; flex-direction:column; overflow:hidden; }
.lc-sb-title[b-fz1h8ps1n9]  { padding:10px 12px 7px; font-size:9.5px; font-weight:700;
                  color:var(--text-dim); text-transform:uppercase; letter-spacing:.6px;
                  flex-shrink:0; border-bottom:1px solid var(--glass-border); }
.lc-scen-list[b-fz1h8ps1n9] { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:5px; }
.lc-scen-item[b-fz1h8ps1n9] { padding:8px 10px; border-radius:8px;
                  border:1px solid var(--glass-border); background:var(--glass-bg-soft);
                  cursor:grab; transition:.15s; }
.lc-scen-item:hover[b-fz1h8ps1n9] { border-color:var(--accent-glow); background:var(--accent-glow-soft); }
.lc-scen-sel[b-fz1h8ps1n9]  { border-color:var(--accent-glow) !important; background:var(--accent-glow-soft) !important; }
.lc-scen-type[b-fz1h8ps1n9] { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px; }
.lc-scen-name[b-fz1h8ps1n9] { font-size:11.5px; font-weight:700; color:var(--text-main); line-height:1.3; }
.lc-scen-desc[b-fz1h8ps1n9] { font-size:9.5px; color:var(--text-faint); margin-top:2px; line-height:1.4;
                  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lc-scen-empty[b-fz1h8ps1n9] { font-size:10px; color:var(--text-faint); text-align:center; padding:20px 10px; line-height:1.7; }

/* ── Grid ── */
.lc-grid[b-fz1h8ps1n9]   { flex:1; padding:10px; display:grid; gap:8px; min-height:0; overflow:hidden; }
.lc-g1[b-fz1h8ps1n9] { grid-template-columns:1fr;     grid-template-rows:1fr; }
.lc-g2[b-fz1h8ps1n9] { grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
.lc-g3[b-fz1h8ps1n9] { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.lc-g4[b-fz1h8ps1n9] { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }

/* ── Child Card ── */
.lc-card[b-fz1h8ps1n9]    { background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur));
               -webkit-backdrop-filter:blur(var(--glass-blur));
               border:1px solid var(--glass-border);
               border-radius:11px; display:flex; flex-direction:column;
               overflow:hidden; min-height:0; transition:.2s border-color; }
.lc-absent[b-fz1h8ps1n9]  { opacity:.3; pointer-events:none; }
.lc-running[b-fz1h8ps1n9] { border-color:var(--accent-glow); }
.lc-droppable[b-fz1h8ps1n9] { outline:1px dashed var(--accent-glow); outline-offset:-3px; }

.lc-c-head[b-fz1h8ps1n9]  { padding:7px 9px; border-bottom:1px solid var(--glass-border);
               display:flex; align-items:center; gap:6px; flex-shrink:0; }
.lc-avatar[b-fz1h8ps1n9]  { width:28px; height:28px; border-radius:50%; display:flex; align-items:center;
               justify-content:center; font-size:10px; font-weight:800; flex-shrink:0; cursor:pointer; }
.lc-c-info[b-fz1h8ps1n9]  { flex:1; min-width:0; }
.lc-c-name[b-fz1h8ps1n9]  { font-size:12px; font-weight:700; color:var(--text-main);
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lc-c-sub[b-fz1h8ps1n9]   { font-size:9px; color:var(--text-faint); }

/* Chips */
.lc-chip[b-fz1h8ps1n9]      { display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
                  border-radius:20px; font-size:9.5px; font-weight:700; }
.lc-chip-idle[b-fz1h8ps1n9] { background:var(--glass-bg-soft); border:1px solid var(--glass-border); color:var(--text-faint); }
.lc-chip-run[b-fz1h8ps1n9]  { background:var(--accent-glow-soft); border:1px solid var(--accent-glow); color:var(--accent-glow); }
.lc-chip-pass[b-fz1h8ps1n9] { background:rgba(34,197,94,.1);   border:1px solid rgba(34,197,94,.3);   color:#4ade80; }
.lc-chip-fail[b-fz1h8ps1n9] { background:rgba(239,68,68,.08);  border:1px solid rgba(239,68,68,.25);  color:#f87171; }

/* Monitor (kept dark — it's a "screen" showing the child's camera feed) */
.lc-monitor[b-fz1h8ps1n9]   { flex:1; background:rgba(0,8,20,.6); position:relative;
                  display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.lc-mon-body[b-fz1h8ps1n9]  { flex:1; padding:10px 12px; display:flex; flex-direction:column;
                  gap:7px; min-height:0; overflow:hidden; }
.lc-mon-idle[b-fz1h8ps1n9]  { display:flex; flex-direction:column; align-items:center;
                  justify-content:center; gap:5px; flex:1;
                  color:var(--text-faint); opacity:.6; font-size:11px; text-align:center; }
.lc-scen-card[b-fz1h8ps1n9] { padding:8px 10px; border-radius:8px;
                  background:var(--accent-glow-soft); border:1px solid var(--glass-border); flex-shrink:0; }
.lc-scen-target[b-fz1h8ps1n9] { font-family:monospace; font-size:10px; margin-top:5px; word-break:break-all; }
.lc-timer-bar[b-fz1h8ps1n9]  { height:3px; background:var(--glass-bg-soft); border-radius:2px; flex-shrink:0; }
.lc-timer-fill[b-fz1h8ps1n9] { height:100%; border-radius:2px;
                   background:var(--accent-gradient); transition:width .9s linear; }
.lc-timer-badge[b-fz1h8ps1n9] { position:absolute; top:7px; right:8px;
                    font-size:10px; font-weight:700; color:#fbbf24;
                    font-variant-numeric:tabular-nums; z-index:6; }

/* Live attention + room-noise status bars */
.lc-status[b-fz1h8ps1n9] { padding:6px 8px 2px; }
.lc-status-row[b-fz1h8ps1n9] { display:flex; align-items:center; justify-content:space-between;
                   font-size:9.5px; font-weight:700; color:var(--text-dim); margin-bottom:2px; }
.lc-status-val[b-fz1h8ps1n9] { font-variant-numeric:tabular-nums; color:var(--text-main); }
.lc-status-bar[b-fz1h8ps1n9] { height:4px; background:var(--glass-bg-soft); border-radius:3px; overflow:hidden; }
.lc-status-fill[b-fz1h8ps1n9] { height:100%; border-radius:3px; transition:width .35s ease; }
/* semantic health colours (not themed — meaning is fixed) */
.lc-fill-good[b-fz1h8ps1n9] { background:linear-gradient(90deg,#22c55e,#4ade80); }
.lc-fill-warn[b-fz1h8ps1n9] { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.lc-fill-bad[b-fz1h8ps1n9]  { background:linear-gradient(90deg,#ef4444,#f87171); }

/* Drop zone (drag a scenario onto a card) */
.lc-drop-zone[b-fz1h8ps1n9] { position:absolute; inset:0; z-index:8; display:flex; align-items:center;
                  justify-content:center; font-size:11px; font-weight:700; color:var(--accent-glow);
                  background:var(--accent-glow-soft); border:2px dashed var(--accent-glow);
                  border-radius:8px; pointer-events:none; }

/* Live badges — semantic mic(orange)/video(cyan), not themed */
.lc-live-badges[b-fz1h8ps1n9] { position:absolute; bottom:7px; left:8px; display:flex; gap:5px; z-index:6; }
.live-badge[b-fz1h8ps1n9] { display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
               border-radius:20px; font-size:9.5px; font-weight:700;
               animation:softPulse-b-fz1h8ps1n9 2s ease-in-out infinite; }
.live-mic[b-fz1h8ps1n9]   { background:rgba(251,146,60,.1); border:1px solid rgba(251,146,60,.35); color:#fb923c; }
.live-vid[b-fz1h8ps1n9]   { background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.32); color:#22d3ee; }
.live-dot[b-fz1h8ps1n9]   { width:6px; height:6px; border-radius:50%;
               animation:dotBlink-b-fz1h8ps1n9 1.4s ease-in-out infinite; flex-shrink:0; }
.live-mic .live-dot[b-fz1h8ps1n9] { background:#fb923c; }
.live-vid .live-dot[b-fz1h8ps1n9] { background:#22d3ee; }
@keyframes softPulse-b-fz1h8ps1n9 { 0%,100%{opacity:1} 50%{opacity:.7} }
@keyframes dotBlink-b-fz1h8ps1n9  { 0%,100%{opacity:1} 50%{opacity:.15} }

/* Sound bars inside the live mic badge */
.sound-bars[b-fz1h8ps1n9] { display:inline-flex; align-items:center; gap:2px; height:12px; }
.sound-bars span[b-fz1h8ps1n9] { width:2.5px; border-radius:2px; background:#fb923c;
                     transform-origin:bottom; animation:barWave-b-fz1h8ps1n9 1s ease-in-out infinite; }
.sound-bars span:nth-child(1)[b-fz1h8ps1n9] { animation-delay:0s; }
.sound-bars span:nth-child(2)[b-fz1h8ps1n9] { animation-delay:.2s; }
.sound-bars span:nth-child(3)[b-fz1h8ps1n9] { animation-delay:.1s; }
@keyframes barWave-b-fz1h8ps1n9 { 0%,100%{height:4px} 50%{height:10px} }

/* Reward overlay */
.lc-reward-overlay[b-fz1h8ps1n9] { position:absolute; inset:0; display:flex; align-items:center;
                       justify-content:center; background:rgba(0,0,0,.65);
                       backdrop-filter:blur(4px); z-index:15; cursor:pointer;
                       animation:rewIn-b-fz1h8ps1n9 .3s ease; }
.lc-reward-inner[b-fz1h8ps1n9]   { text-align:center; }
.lc-reward-emoji[b-fz1h8ps1n9]   { font-size:56px; line-height:1; animation:rewIn-b-fz1h8ps1n9 .3s ease; }
.lc-reward-msg[b-fz1h8ps1n9]     { font-size:18px; font-weight:800; color:#fff; margin-top:8px; }
@keyframes rewIn-b-fz1h8ps1n9 { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }

/* Footer */
.lc-c-foot[b-fz1h8ps1n9]  { padding:6px 8px; border-top:1px solid var(--glass-border);
               display:flex; align-items:center; gap:4px; flex-shrink:0;
               background:var(--glass-bg-soft); }
.lc-score[b-fz1h8ps1n9]   { font-size:9.5px; color:var(--text-faint); flex:1; }
.lc-fbtn[b-fz1h8ps1n9]    { padding:3px 8px; border-radius:6px; font-size:10px; font-weight:700;
               cursor:pointer; border:1px solid; background:transparent; font-family:inherit; }
.lc-fbtn-indigo[b-fz1h8ps1n9] { border-color:var(--glass-border); color:var(--accent-glow); }
.lc-fbtn-amber[b-fz1h8ps1n9]  { border-color:rgba(251,191,36,.3);  color:#fbbf24; }
.lc-fbtn-green[b-fz1h8ps1n9]  { border-color:rgba(34,197,94,.3);   color:#4ade80; }
.lc-fbtn-red[b-fz1h8ps1n9]    { border-color:rgba(239,68,68,.25);  color:#f87171; }

/* ── Teacher Cam PIP ── */
.lc-cam[b-fz1h8ps1n9] { position:fixed; bottom:70px; left:210px; width:176px; background:#000;
            border-radius:10px; border:1px solid var(--glass-border); overflow:hidden;
            z-index:400; box-shadow:0 8px 32px rgba(0,0,0,.6); }
.lc-cam-head[b-fz1h8ps1n9] { height:22px; background:var(--glass-bg); display:flex; align-items:center;
                 gap:5px; padding:0 8px; cursor:move; font-size:9px; color:var(--text-dim);
                 font-weight:700; user-select:none; }
.lc-cam-x[b-fz1h8ps1n9] { cursor:pointer; color:#f87171; font-size:11px; }
.lc-cam video[b-fz1h8ps1n9] { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#000; }
.lc-cam-err[b-fz1h8ps1n9] { padding:8px; font-size:10px; color:#f87171; text-align:center; }

/* ── Profile modal extras ── */
.lc-prof-box[b-fz1h8ps1n9]   { padding:8px 10px; border-radius:8px; margin-bottom:10px;
                   background:var(--accent-glow-soft); border:1px solid var(--glass-border); }
.lc-prof-lbl[b-fz1h8ps1n9]   { font-size:9px; font-weight:700; color:var(--text-dim); margin-bottom:3px; }
.lc-prof-val[b-fz1h8ps1n9]   { font-size:12px; color:var(--accent-glow); }
.lc-prof-notes[b-fz1h8ps1n9] { font-size:11px; color:var(--text-faint); line-height:1.6;
                   background:var(--glass-bg-soft); padding:8px 10px; border-radius:7px; }

/* ── Scenario detail extras ── */
.lc-color-bar[b-fz1h8ps1n9] { height:4px; border-radius:3px; margin-bottom:14px; }
.lc-type-badge[b-fz1h8ps1n9] { width:44px; height:44px; border-radius:10px; display:flex;
                   align-items:center; justify-content:center; font-size:20px;
                   flex-shrink:0; border:1px solid; }
.lc-desc-box[b-fz1h8ps1n9]  { padding:10px 12px; border-radius:9px; margin-bottom:12px;
                  font-size:12px; color:var(--text-dim); line-height:1.6;
                  background:var(--glass-bg-soft); border:1px solid var(--glass-border); }
.lc-mono[b-fz1h8ps1n9]      { font-family:monospace; word-break:break-all; }
.lc-tags[b-fz1h8ps1n9]      { display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
.lc-tag[b-fz1h8ps1n9]       { font-size:9.5px; font-weight:700; padding:3px 8px; border-radius:20px;
                  color:var(--text-faint); background:var(--glass-bg-soft);
                  border:1px solid var(--glass-border); }

/* ── Reward Modal ── */
.lc-modal-back[b-fz1h8ps1n9] { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:200;
                   display:flex; align-items:center; justify-content:center; padding:20px; }
.lc-modal[b-fz1h8ps1n9]      { background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur));
                   -webkit-backdrop-filter:blur(var(--glass-blur));
                   border:1px solid var(--glass-border);
                   border-radius:13px; padding:18px; width:100%; max-width:400px; }
.lc-modal-head[b-fz1h8ps1n9] { display:flex; align-items:flex-start; gap:8px; margin-bottom:12px; }
.lc-modal-title[b-fz1h8ps1n9]{ font-size:14px; font-weight:800; color:var(--text-main); flex:1; }
.lc-modal-close[b-fz1h8ps1n9]{ background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:18px; }
.lc-modal-label[b-fz1h8ps1n9]{ font-size:9px; font-weight:700; color:var(--text-dim);
                   text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.lc-modal-btns[b-fz1h8ps1n9] { display:flex; gap:8px; margin-top:14px; }

.lc-rew-grid[b-fz1h8ps1n9] { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.lc-rew-btn[b-fz1h8ps1n9]  { padding:5px 10px; border-radius:7px; font-size:11px; font-weight:700;
                cursor:pointer; border:1px solid; background:transparent;
                font-family:inherit; transition:.15s; }
.lc-rew-btn:hover[b-fz1h8ps1n9] { opacity:.8; }
.lc-rew-sel[b-fz1h8ps1n9]  { opacity:1 !important; filter:brightness(1.3); }

.lc-stars[b-fz1h8ps1n9]    { display:flex; align-items:center; gap:4px; margin-bottom:14px; }
.lc-star[b-fz1h8ps1n9]     { font-size:18px; cursor:pointer; opacity:.25; transition:.15s; }
.lc-star-lit[b-fz1h8ps1n9] { opacity:1; }
.lc-star:hover[b-fz1h8ps1n9] { opacity:.75; transform:scale(1.15); }
.lc-score-val[b-fz1h8ps1n9]{ font-size:12px; font-weight:700; color:#fbbf24; margin-right:4px; }

.lc-notes[b-fz1h8ps1n9]    { width:100%; background:var(--glass-bg-soft);
                border:1px solid var(--glass-border); border-radius:7px;
                color:var(--text-main); font-size:10.5px; padding:6px 9px;
                resize:none; outline:none; font-family:inherit; line-height:1.5; }
.lc-notes:focus[b-fz1h8ps1n9] { border-color:var(--accent-glow); }

/* Info grid in scenario detail */
.lc-info-grid[b-fz1h8ps1n9] { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lc-info-cell[b-fz1h8ps1n9] { padding:8px 10px; border-radius:8px;
                  background:var(--glass-bg-soft); border:1px solid var(--glass-border); }
.lc-info-lbl[b-fz1h8ps1n9]  { font-size:9px; font-weight:700; color:var(--text-dim); margin-bottom:3px; }
.lc-info-val[b-fz1h8ps1n9]  { font-size:12px; font-weight:700; color:var(--text-main); }

/* ── Toast ── */
.lc-toast[b-fz1h8ps1n9]      { position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
                   padding:8px 18px; border-radius:9px; font-size:11.5px; font-weight:700;
                   z-index:500; pointer-events:none; white-space:nowrap;
                   background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur));
                   -webkit-backdrop-filter:blur(var(--glass-blur));
                   animation:toastIn-b-fz1h8ps1n9 .3s ease; }
.lc-toast-ok[b-fz1h8ps1n9]   { border:1px solid rgba(34,197,94,.4);  color:#4ade80; }
.lc-toast-warn[b-fz1h8ps1n9] { border:1px solid rgba(251,191,36,.4); color:#fbbf24; }
.lc-toast-err[b-fz1h8ps1n9]  { border:1px solid rgba(239,68,68,.4);  color:#f87171; }
@keyframes toastIn-b-fz1h8ps1n9 {
    from{opacity:0;transform:translateX(-50%) translateY(8px)}
    to  {opacity:1;transform:translateX(-50%) translateY(0)}
}

/* Big centre-screen pass/fail verdict for the teacher. Click to dismiss early;
   `pointer-events:auto` only on the card so the rest of the room stays usable. */
.lc-verdict[b-fz1h8ps1n9] { position:fixed; inset:0; z-index:900; display:flex; cursor:pointer;
              flex-direction:column; align-items:center; justify-content:center; gap:6px;
              background:rgba(2,6,23,.55); backdrop-filter:blur(3px);
              -webkit-backdrop-filter:blur(3px);
              animation:verdictIn-b-fz1h8ps1n9 .22s cubic-bezier(.2,.9,.3,1.3); }
.lc-verdict-icon[b-fz1h8ps1n9] { font-size:clamp(90px,17vw,190px); line-height:1; font-weight:900; }
.lc-verdict-text[b-fz1h8ps1n9] { font-size:clamp(26px,4.4vw,52px); font-weight:900; letter-spacing:3px; }
.lc-verdict-sub[b-fz1h8ps1n9]  { font-size:14px; font-weight:600; color:var(--text-dim); margin-top:2px; }

.lc-verdict-pass .lc-verdict-icon[b-fz1h8ps1n9],
.lc-verdict-pass .lc-verdict-text[b-fz1h8ps1n9] { color:#4ade80; text-shadow:0 0 34px rgba(34,197,94,.65); }
.lc-verdict-fail .lc-verdict-icon[b-fz1h8ps1n9],
.lc-verdict-fail .lc-verdict-text[b-fz1h8ps1n9] { color:#f87171; text-shadow:0 0 34px rgba(239,68,68,.6); }

@keyframes verdictIn-b-fz1h8ps1n9 {
    from { opacity:0; transform:scale(.8) }
    to   { opacity:1; transform:scale(1) }
}
@media (prefers-reduced-motion:reduce) { .lc-verdict[b-fz1h8ps1n9] { animation:none } }

/* Scrollbar */
[b-fz1h8ps1n9]::-webkit-scrollbar { width:3px; }
[b-fz1h8ps1n9]::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:2px; }

/* Results panel */
.lc-btn-slate[b-fz1h8ps1n9] { background:var(--glass-bg-soft); border-color:var(--glass-border); color:var(--text-dim); }
.lc-results-list[b-fz1h8ps1n9] { display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow-y:auto; padding:2px; }
.lc-result-row[b-fz1h8ps1n9] { display:flex; align-items:center; gap:9px; padding:8px 10px;
                   background:var(--glass-bg-soft); border:1px solid var(--glass-border); border-radius:8px; }
.lc-result-emoji[b-fz1h8ps1n9] { font-size:18px; flex-shrink:0; }
.lc-result-title[b-fz1h8ps1n9] { font-size:12.5px; font-weight:700; color:var(--text-main);
                     white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lc-result-meta[b-fz1h8ps1n9] { font-size:10px; color:var(--text-faint); margin-top:2px; }
.lc-result-stars[b-fz1h8ps1n9] { font-size:11px; flex-shrink:0; }
.lc-result-badge[b-fz1h8ps1n9] { font-size:10px; font-weight:700; padding:2px 8px; border-radius:99px; flex-shrink:0;
                     border:1px solid var(--glass-border); }
.lc-res-pass[b-fz1h8ps1n9]    { color:#4ade80; background:rgba(74,222,128,.12); border-color:rgba(74,222,128,.35); }
.lc-res-fail[b-fz1h8ps1n9]    { color:#f87171; background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.35); }
.lc-res-timeout[b-fz1h8ps1n9] { color:#fbbf24; background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.35); }
.lc-res-error[b-fz1h8ps1n9]   { color:#fbbf24; background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.35); }

/* ── Child's shared video (LiveKit) fills the monitor behind the overlays ── */
.lc-remote-video[b-fz1h8ps1n9] { display:none; position:absolute; inset:0; width:100%; height:100%;
                     object-fit:cover; z-index:0; background:#000; }
.lc-remote-video.on[b-fz1h8ps1n9] { display:block; }
.lc-mon-body[b-fz1h8ps1n9], .lc-status[b-fz1h8ps1n9] { position:relative; z-index:1; }
.lc-rtc-off[b-fz1h8ps1n9] { font-size:10px; font-weight:700; color:#fbbf24; padding:0 6px; }
/* /Components/Teacher/MessagesPage.razor.rz.scp.css */
.placeholder-page[b-frcag9rqwf] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-frcag9rqwf]  { font-size: 48px; }
.ph-title[b-frcag9rqwf] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-frcag9rqwf]   { font-size: 14px; }
/* /Components/Teacher/MyAttendance.razor.rz.scp.css */
/* ============================================================
   MyAttendance.razor.css — Teacher → My Attendance
   CSS Isolation; all colours from theme.css var(--…).
   Same visual recipe as School/SessionsList.razor.css, plus:
     • page lock — header + date bar fixed, only .ma-scroll scrolls
     • 🏫 school badge / 🔒 private-card + private-tag (teacher-attendance.html)
   ============================================================ */

.ma-page[b-yoadnzyhq3] {
    color: var(--text-main);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ── header (fixed) ── */
.page-header[b-yoadnzyhq3] { margin-bottom: 14px; flex-shrink: 0; }
.page-title[b-yoadnzyhq3] { font-size: 18px; font-weight: 700; color: var(--text-main); }
.page-sub[b-yoadnzyhq3]   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.ma-alert[b-yoadnzyhq3] {
    padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; flex-shrink: 0;
    background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3);
    color: #f87171; font-size: 13px;
}
.ma-loading[b-yoadnzyhq3] { font-size: 13px; color: var(--text-dim); padding: 24px 0; text-align: center; }

/* ── scroll region (sessions grid + panel) ── */
.ma-scroll[b-yoadnzyhq3] { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.ma-scroll[b-yoadnzyhq3]::-webkit-scrollbar { width: 6px; }
.ma-scroll[b-yoadnzyhq3]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 6px; }

/* ── buttons ── */
.btn[b-yoadnzyhq3] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s;
}
.btn:disabled[b-yoadnzyhq3] { opacity: .5; cursor: default; transform: none; }
.btn-primary[b-yoadnzyhq3] { background: var(--accent-gradient); color: var(--accent-text-on-fill); box-shadow: 0 0 16px var(--accent-glow-soft); }
.btn-primary:not(:disabled):hover[b-yoadnzyhq3] { transform: translateY(-1px); }
.btn-ghost[b-yoadnzyhq3] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-yoadnzyhq3] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.btn-sm[b-yoadnzyhq3] { padding: 6px 12px; font-size: 12px; }
.btn-xs[b-yoadnzyhq3] { padding: 4px 9px; font-size: 11px; }

.mark-present[b-yoadnzyhq3] { background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.3); color: #4ade80; }
.mark-absent[b-yoadnzyhq3]  { background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.3); color: #f87171; }

/* ── badges ── */
.badge[b-yoadnzyhq3] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-yoadnzyhq3]  { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-blue[b-yoadnzyhq3]   { background: rgba(79,168,255,0.11); color: var(--accent-glow); border: 1px solid rgba(79,168,255,0.22); }
.b-yellow[b-yoadnzyhq3] { background: rgba(251,191,36,0.11); color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.b-purple[b-yoadnzyhq3] { background: rgba(167,139,250,0.11); color: #a78bfa; border: 1px solid rgba(167,139,250,0.22); }
.b-gray[b-yoadnzyhq3]   { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }

/* ── date bar (fixed) ── */
.date-bar[b-yoadnzyhq3] {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    padding: 11px 14px; border-radius: var(--radius-md);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    margin-bottom: 16px;
}
.date-nav[b-yoadnzyhq3] {
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: transparent;
    color: var(--text-dim); cursor: pointer; font-size: 15px;
    display: flex; align-items: center; justify-content: center; transition: .15s;
}
.date-nav:hover[b-yoadnzyhq3] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.date-display[b-yoadnzyhq3] { flex: 1; text-align: center; font-size: 14px; font-weight: 700; color: var(--text-main); }
.date-sub[b-yoadnzyhq3] { font-size: 10px; color: var(--text-faint); font-weight: 400; margin-left: 6px; }
.date-input[b-yoadnzyhq3] {
    padding: 6px 10px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
}
.today-btn[b-yoadnzyhq3] {
    padding: 6px 12px; border-radius: var(--radius-sm);
    border: 1px solid rgba(79,168,255,0.3); background: rgba(79,168,255,0.08);
    color: var(--accent-glow); font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.today-btn:hover[b-yoadnzyhq3] { background: rgba(79,168,255,0.18); }

/* ── section label ── */
.sec-lbl[b-yoadnzyhq3] {
    font-size: 11px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .8px;
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.sec-lbl[b-yoadnzyhq3]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }
.sl-note[b-yoadnzyhq3] { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-faint); }

/* ── sessions grid ── */
@keyframes pending-pulse-b-yoadnzyhq3 {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(251,191,36,0); }
    50%      { opacity: .7; box-shadow: 0 0 0 4px rgba(251,191,36,0.12); }
}
.sessions-grid[b-yoadnzyhq3] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px; margin-bottom: 18px;
}
.session-card[b-yoadnzyhq3] {
    padding: 12px 14px; border-radius: var(--radius-md);
    background: var(--glass-bg-soft); backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    cursor: pointer; transition: .2s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.session-card:hover[b-yoadnzyhq3] {
    border-color: rgba(79,168,255,0.35); transform: translateY(-2px);
    background: var(--glass-bg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.session-card.selected[b-yoadnzyhq3] {
    border-color: rgba(79,168,255,0.55); background: rgba(79,168,255,0.07);
    box-shadow: 0 0 20px rgba(79,168,255,0.12), inset 0 1px 0 rgba(79,168,255,0.1);
}
.session-card.completed[b-yoadnzyhq3] { opacity: .65; }
.session-card.pending-card[b-yoadnzyhq3] {
    animation: pending-pulse-b-yoadnzyhq3 2.2s ease-in-out infinite;
    border-color: rgba(251,191,36,0.3);
}
.session-card.private-card[b-yoadnzyhq3] { border-color: rgba(167,139,250,0.3); }

.sc-top[b-yoadnzyhq3] { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sc-icon[b-yoadnzyhq3] {
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(79,168,255,0.18), rgba(125,211,252,0.08));
    border: 1px solid rgba(79,168,255,0.22);
    display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0;
}
.sc-time-block[b-yoadnzyhq3] { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sc-time-row[b-yoadnzyhq3] { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.sc-time-val[b-yoadnzyhq3] { font-weight: 700; font-size: 12px; }
.sc-time-val.start[b-yoadnzyhq3] { color: var(--accent-glow); }
.sc-time-val.end[b-yoadnzyhq3]   { color: #a78bfa; }
.sc-arrow[b-yoadnzyhq3] { color: var(--text-faint); }

/* origin badge: 🏫 school / 🔒 private (from teacher-attendance.html) */
.sc-school[b-yoadnzyhq3] {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 9px; font-weight: 600; color: var(--text-faint);
    margin-bottom: 3px; padding: 1px 6px; border-radius: 8px;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
}
.sc-private-tag[b-yoadnzyhq3] {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 9px; font-weight: 700; color: #a78bfa;
    margin-bottom: 3px; padding: 1px 6px; border-radius: 8px;
    background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.25);
}

.sc-class-name[b-yoadnzyhq3] { font-size: 11px; font-weight: 700; color: #fbbf24; margin-top: 2px; letter-spacing: .2px; }
.sc-room[b-yoadnzyhq3] { font-size: 10px; color: var(--text-faint); margin-bottom: 8px; }

.sc-stats[b-yoadnzyhq3] { display: flex; gap: 5px; padding-top: 8px; border-top: 1px solid rgba(100,170,255,0.1); }
.sc-stat[b-yoadnzyhq3] { flex: 1; text-align: center; padding: 4px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.02); }
.sc-stat-val[b-yoadnzyhq3] { font-size: 13px; font-weight: 700; }
.sc-stat-lbl[b-yoadnzyhq3] { font-size: 8.5px; color: var(--text-faint); margin-top: 1px; }
.sc-stat.present .sc-stat-val[b-yoadnzyhq3] { color: #4ade80; }
.sc-stat.absent  .sc-stat-val[b-yoadnzyhq3] { color: #f87171; }
.sc-stat.total   .sc-stat-val[b-yoadnzyhq3] { color: var(--text-dim); }

.sc-footer[b-yoadnzyhq3] { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.teacher-badge[b-yoadnzyhq3] { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-faint); text-transform: capitalize; }
.teacher-dot[b-yoadnzyhq3] { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); }
.teacher-dot.present[b-yoadnzyhq3] { background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,.5); }

/* ── attendance panel ── */
.att-panel[b-yoadnzyhq3] {
    max-width: 720px;
    background: var(--glass-bg);
    border: 1px solid var(--accent-glow-soft);
    border-radius: var(--radius-md); overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px var(--glass-border);
}
.att-head[b-yoadnzyhq3] { padding: 11px 14px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 10px; }
.att-icon[b-yoadnzyhq3] {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(79,168,255,0.2), rgba(125,211,252,0.1));
    border: 1px solid rgba(79,168,255,0.25);
    display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.att-title[b-yoadnzyhq3] { font-size: 14px; font-weight: 700; color: var(--text-main); }
.att-sub[b-yoadnzyhq3] { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.att-actions[b-yoadnzyhq3] { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* private notice banner */
.private-notice[b-yoadnzyhq3] {
    padding: 9px 14px; font-size: 11.5px; line-height: 1.5;
    color: #c4b5fd; background: rgba(167,139,250,0.07);
    border-bottom: 1px solid rgba(167,139,250,0.2);
}

/* quick stats */
.quick-stats[b-yoadnzyhq3] { display: flex; gap: 0; border-bottom: 1px solid var(--glass-border); }
.qs-item[b-yoadnzyhq3] { flex: 1; padding: 8px 10px; text-align: center; border-right: 1px solid var(--glass-border); }
.qs-item:last-child[b-yoadnzyhq3] { border-right: none; }
.qs-val[b-yoadnzyhq3] { font-size: 17px; font-weight: 700; margin-bottom: 1px; }
.qs-lbl[b-yoadnzyhq3] { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; }
.qs-present .qs-val[b-yoadnzyhq3] { color: #4ade80; }
.qs-absent  .qs-val[b-yoadnzyhq3] { color: #f87171; }
.qs-late    .qs-val[b-yoadnzyhq3] { color: #fbbf24; }
.qs-excused .qs-val[b-yoadnzyhq3] { color: #a78bfa; }
.qs-total   .qs-val[b-yoadnzyhq3] { color: var(--text-dim); }

/* toolbar */
.att-toolbar[b-yoadnzyhq3] { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--glass-border); flex-wrap: wrap; }
.mark-all-row[b-yoadnzyhq3] { display: flex; gap: 6px; }
.toolbar-hint[b-yoadnzyhq3] { font-size: 10px; color: var(--text-faint); margin-left: auto; }

/* children list */
.child-att-list[b-yoadnzyhq3] { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.child-att-row[b-yoadnzyhq3] {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: var(--radius-sm);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border); transition: .15s;
}
.child-att-row:hover[b-yoadnzyhq3] { background: var(--accent-glow-soft); }
.child-att-row.is-present[b-yoadnzyhq3] { background: rgba(74,222,128,0.05); border-color: rgba(74,222,128,0.2); }
.child-att-row.is-absent[b-yoadnzyhq3]  { background: rgba(248,113,113,0.05); border-color: rgba(248,113,113,0.2); }
.child-att-row.is-late[b-yoadnzyhq3]    { background: rgba(251,191,36,0.05); border-color: rgba(251,191,36,0.2); }
.child-att-row.is-excused[b-yoadnzyhq3] { background: rgba(167,139,250,0.05); border-color: rgba(167,139,250,0.2); }

.ca-av[b-yoadnzyhq3] {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--accent-text-on-fill);
}
.ca-text[b-yoadnzyhq3] { flex: 1; }
.ca-name[b-yoadnzyhq3] { font-size: 12.5px; font-weight: 600; color: var(--text-main); }
.ca-level[b-yoadnzyhq3] { font-size: 10.5px; color: var(--text-dim); }

/* status buttons */
.status-btns[b-yoadnzyhq3] { display: flex; gap: 5px; margin-left: auto; flex-shrink: 0; }
.status-btn[b-yoadnzyhq3] {
    padding: 5px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 700;
    cursor: pointer; border: 1px solid; transition: .15s; font-family: inherit; background: transparent;
}
.status-btn:disabled[b-yoadnzyhq3] { opacity: .4; cursor: default; }
.sb-present[b-yoadnzyhq3] { border-color: rgba(74,222,128,0.3); color: rgba(74,222,128,0.6); }
.sb-present:not(:disabled):hover[b-yoadnzyhq3], .sb-present.active[b-yoadnzyhq3] { background: rgba(74,222,128,0.15); color: #4ade80; border-color: rgba(74,222,128,0.5); box-shadow: 0 0 10px rgba(74,222,128,0.2); }
.sb-absent[b-yoadnzyhq3] { border-color: rgba(248,113,113,0.3); color: rgba(248,113,113,0.6); }
.sb-absent:not(:disabled):hover[b-yoadnzyhq3], .sb-absent.active[b-yoadnzyhq3] { background: rgba(248,113,113,0.15); color: #f87171; border-color: rgba(248,113,113,0.5); }
.sb-late[b-yoadnzyhq3] { border-color: rgba(251,191,36,0.3); color: rgba(251,191,36,0.6); }
.sb-late:not(:disabled):hover[b-yoadnzyhq3], .sb-late.active[b-yoadnzyhq3] { background: rgba(251,191,36,0.15); color: #fbbf24; border-color: rgba(251,191,36,0.5); }
.sb-excused[b-yoadnzyhq3] { border-color: rgba(167,139,250,0.3); color: rgba(167,139,250,0.6); }
.sb-excused:not(:disabled):hover[b-yoadnzyhq3], .sb-excused.active[b-yoadnzyhq3] { background: rgba(167,139,250,0.15); color: #a78bfa; border-color: rgba(167,139,250,0.5); }

.ca-note[b-yoadnzyhq3] {
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: transparent;
    color: var(--text-faint); cursor: pointer; font-size: 13px;
    display: flex; align-items: center; justify-content: center; transition: .15s; flex-shrink: 0;
}
.ca-note:not(:disabled):hover[b-yoadnzyhq3] { background: var(--accent-glow-soft); color: var(--text-main); }
.ca-note:disabled[b-yoadnzyhq3] { opacity: .4; cursor: default; }
.ca-note.has-note[b-yoadnzyhq3] { color: #fbbf24; border-color: rgba(251,191,36,0.3); }

.ca-note-form[b-yoadnzyhq3] { padding: 8px 14px 8px 62px; border-top: 1px dashed rgba(79,168,255,0.15); display: none; }
.ca-note-form.show[b-yoadnzyhq3] { display: flex; gap: 8px; align-items: center; }
.ca-note-input[b-yoadnzyhq3] {
    flex: 1; padding: 6px 10px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
}
.ca-note-input:focus[b-yoadnzyhq3] { border-color: var(--accent-glow); }

/* teacher attendance */
.teacher-att-section[b-yoadnzyhq3] { padding: 12px 14px; border-top: 1px solid var(--glass-border); background: rgba(255,255,255,0.015); }
.ta-title[b-yoadnzyhq3] { font-size: 10.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.ta-row[b-yoadnzyhq3] {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
}
.ta-av[b-yoadnzyhq3] {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #a78bfa, #c4b5fd);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #1a0030;
}
.ta-text[b-yoadnzyhq3] { flex: 1; }
.ta-name[b-yoadnzyhq3] { font-size: 12px; font-weight: 600; color: var(--text-main); }
.ta-role[b-yoadnzyhq3] { font-size: 11px; color: var(--text-dim); }

/* billing preview */
.billing-preview[b-yoadnzyhq3] { padding: 11px 14px; border-top: 1px solid var(--glass-border); background: rgba(79,168,255,0.03); }
.bp-title[b-yoadnzyhq3] { font-size: 10.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 7px; }
.bp-row[b-yoadnzyhq3] { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-dim); padding: 3px 0; }
.bp-row .bp-name[b-yoadnzyhq3] { flex: 1; color: var(--text-main); }
.bp-row-muted[b-yoadnzyhq3] { opacity: .4; }
.bp-amount[b-yoadnzyhq3] { font-weight: 700; color: var(--accent-glow); }
.bp-status-auto[b-yoadnzyhq3] { font-size: 10px; color: var(--text-faint); }
.bp-no-charge[b-yoadnzyhq3] { font-size: 11px; color: var(--text-faint); }
.bp-note[b-yoadnzyhq3] { font-size: 11px; color: var(--text-faint); margin-top: 4px; line-height: 1.5; }
.bp-note-top[b-yoadnzyhq3] { margin-top: 0; margin-bottom: 6px; }
.bp-divider[b-yoadnzyhq3] { height: 1px; background: var(--glass-border); margin: 8px 0; }

/* save bar */
.save-bar[b-yoadnzyhq3] { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-top: 1px solid var(--glass-border); background: var(--glass-bg-soft); }
.save-hint[b-yoadnzyhq3] { font-size: 11.5px; flex: 1; }
.save-hint.hint-ok[b-yoadnzyhq3]   { color: #4ade80; }
.save-hint.hint-warn[b-yoadnzyhq3] { color: #fbbf24; }

/* empty */
.empty-day[b-yoadnzyhq3] { text-align: center; padding: 50px 20px; color: var(--text-faint); }
.empty-day .ei[b-yoadnzyhq3] { font-size: 48px; margin-bottom: 10px; opacity: .3; }

/* toast */
.ma-toast[b-yoadnzyhq3] {
    position: fixed; bottom: 24px; right: 24px; z-index: 999;
    padding: 12px 18px; border-radius: var(--radius-md);
    background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.35);
    color: #4ade80; font-size: 13px; font-weight: 600;
    transform: translateY(80px); opacity: 0; transition: .3s; pointer-events: none;
}
.ma-toast.warn[b-yoadnzyhq3] { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.35); color: #fbbf24; }
.ma-toast.show[b-yoadnzyhq3] { transform: translateY(0); opacity: 1; }
/* /Components/Teacher/MyAvailability.razor.rz.scp.css */
/* ============================================================
   MyAvailability.razor.css — Teacher → My Availability (per-date model)
   CSS Isolation; all colours from theme.css var(--…).
   Page lock: header + policy/specialty fixed, only .av-scroll scrolls.
   Week/Month grid recipe shared with School/ScheduleView (re-implemented
   scoped, not imported). Mirrors teacher-availability.html.
   ============================================================ */

.av-page[b-su0mf3mk1u] {
    color: var(--text-main);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ── header (fixed) ── */
.page-header[b-su0mf3mk1u] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; flex-shrink: 0; }
.page-title[b-su0mf3mk1u] { font-size: 18px; font-weight: 700; color: var(--text-main); }
.page-sub[b-su0mf3mk1u]   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ── buttons ── */
.btn[b-su0mf3mk1u] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s;
}
.btn:disabled[b-su0mf3mk1u] { opacity: .5; cursor: not-allowed; }
.btn-primary[b-su0mf3mk1u] { background: var(--accent-gradient); color: var(--accent-text-on-fill); box-shadow: 0 0 16px var(--accent-glow-soft); }
.btn-primary:not(:disabled):hover[b-su0mf3mk1u] { transform: translateY(-1px); }
.btn-sm[b-su0mf3mk1u] { padding: 6px 12px; font-size: 12px; }

/* ── badges ── */
.badge[b-su0mf3mk1u] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-blue[b-su0mf3mk1u]   { background: rgba(79,168,255,0.11); color: var(--accent-glow); border: 1px solid rgba(79,168,255,0.22); }
.b-purple[b-su0mf3mk1u] { background: rgba(167,139,250,0.11); color: #a78bfa; border: 1px solid rgba(167,139,250,0.22); }
.b-green[b-su0mf3mk1u]  { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-yellow[b-su0mf3mk1u] { background: rgba(251,191,36,0.11); color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }

/* ── policy banner (fixed) ── */
.policy-banner[b-su0mf3mk1u] {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px; border-radius: var(--radius-md);
    background: var(--accent-glow-soft); border: 1px solid var(--glass-border);
    margin-bottom: 18px; font-size: 12px; color: var(--text-dim); line-height: 1.6; flex-shrink: 0;
}
.policy-banner strong[b-su0mf3mk1u] { color: var(--accent-glow); }

/* ── specialty context (fixed) ── */
.specialty-context[b-su0mf3mk1u] {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 14px; border-radius: var(--radius-md);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    margin-bottom: 18px; flex-shrink: 0;
}
.spec-label[b-su0mf3mk1u] { font-size: 11px; color: var(--text-dim); }
.spec-chip[b-su0mf3mk1u] {
    padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
    background: rgba(79,168,255,0.12); color: var(--accent-glow); border: 1px solid rgba(79,168,255,0.25);
}
.spec-chip.muted[b-su0mf3mk1u] { background: var(--glass-bg-soft); color: var(--text-faint); border-color: var(--glass-border); }
.spec-edit-link[b-su0mf3mk1u] { margin-left: auto; font-size: 11px; color: var(--accent-glow); cursor: pointer; text-decoration: underline; }

/* ── scroll region ── */
.av-scroll[b-su0mf3mk1u] { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.av-scroll[b-su0mf3mk1u]::-webkit-scrollbar { width: 6px; }
.av-scroll[b-su0mf3mk1u]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 6px; }
.av-loading[b-su0mf3mk1u] { font-size: 13px; color: var(--text-dim); padding: 24px 0; text-align: center; }

/* ── section label ── */
.sec-lbl[b-su0mf3mk1u] {
    font-size: 11px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .8px;
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px; margin-top: 18px;
}
.sec-lbl:first-child[b-su0mf3mk1u] { margin-top: 0; }
.sec-lbl[b-su0mf3mk1u]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

/* ── add slot form ── */
.add-slot-form[b-su0mf3mk1u] {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 10px; align-items: end;
    padding: 14px; border-radius: var(--radius-md);
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border); margin-bottom: 18px;
}
.asf-field[b-su0mf3mk1u] { display: flex; flex-direction: column; gap: 5px; }
.asf-field label[b-su0mf3mk1u] { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; }
.asf-field input[b-su0mf3mk1u], .asf-field select[b-su0mf3mk1u] {
    padding: 8px 10px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12.5px; outline: none; transition: .18s;
}
.asf-field input:focus[b-su0mf3mk1u], .asf-field select:focus[b-su0mf3mk1u] { border-color: var(--accent-glow); }
.asf-field select option[b-su0mf3mk1u] { background: #0c1a30; color: var(--text-main); }
.asf-conflict[b-su0mf3mk1u] {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: var(--radius-sm);
    background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.3);
    font-size: 11.5px; color: #f87171;
}

/* ── view toolbar ── */
.view-toolbar[b-su0mf3mk1u] { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.view-switch[b-su0mf3mk1u] { display: flex; gap: 2px; background: rgba(255,255,255,0.03); border-radius: var(--radius-sm); padding: 3px; }
.view-btn[b-su0mf3mk1u] {
    padding: 6px 14px; border-radius: 6px; border: none; background: transparent;
    color: var(--text-faint); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: .15s;
}
.view-btn.active[b-su0mf3mk1u] { background: rgba(79,168,255,0.18); color: var(--accent-glow); }
.date-nav[b-su0mf3mk1u] { display: flex; align-items: center; gap: 6px; }
.nav-btn[b-su0mf3mk1u] {
    width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border);
    background: transparent; color: var(--text-dim); cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.nav-btn:hover[b-su0mf3mk1u] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.date-label[b-su0mf3mk1u] { font-size: 13px; font-weight: 700; min-width: 150px; text-align: center; }
.today-btn[b-su0mf3mk1u] {
    padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(79,168,255,0.3);
    background: rgba(79,168,255,0.08); color: var(--accent-glow); font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.view-toolbar-spacer[b-su0mf3mk1u] { flex: 1; }
.legend-hint[b-su0mf3mk1u] { font-size: 10.5px; color: var(--text-faint); }

/* ── LIST VIEW ── */
.slots-list[b-su0mf3mk1u] { display: flex; flex-direction: column; gap: 8px; }
.slot-card[b-su0mf3mk1u] {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border-radius: var(--radius-md); background: var(--glass-bg); border: 1px solid var(--glass-border); transition: .15s;
}
.slot-card.is-booked[b-su0mf3mk1u]    { border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.03); }
.slot-card.is-confirmed[b-su0mf3mk1u] { border-color: rgba(74,222,128,0.3); background: rgba(74,222,128,0.03); }

.slot-date-block[b-su0mf3mk1u] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: var(--radius-sm); flex-shrink: 0;
    background: rgba(79,168,255,0.08); border: 1px solid rgba(79,168,255,0.2);
}
.slot-date-day[b-su0mf3mk1u] { font-size: 9px; color: var(--text-faint); text-transform: uppercase; }
.slot-date-num[b-su0mf3mk1u] { font-size: 17px; font-weight: 700; color: var(--accent-glow); line-height: 1; }
.slot-date-month[b-su0mf3mk1u] { font-size: 9px; color: var(--text-faint); }

.slot-info[b-su0mf3mk1u] { flex: 1; }
.slot-time[b-su0mf3mk1u] { font-size: 13px; font-weight: 700; color: var(--text-main); }
.slot-mode-tag[b-su0mf3mk1u] { font-size: 10px; padding: 2px 7px; border-radius: 10px; margin-left: 6px; }
.slot-mode-tag.online[b-su0mf3mk1u]   { background: rgba(167,139,250,0.12); color: #a78bfa; }
.slot-mode-tag.inperson[b-su0mf3mk1u] { background: rgba(79,168,255,0.12); color: var(--accent-glow); }
.slot-onetime-note[b-su0mf3mk1u] { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }

.slot-booking-info[b-su0mf3mk1u] { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-right: 8px; }
.slot-booking-name[b-su0mf3mk1u] { font-size: 12px; font-weight: 600; color: var(--text-main); }

.slot-remove[b-su0mf3mk1u] {
    width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border);
    background: transparent; color: var(--text-faint); cursor: pointer; font-size: 13px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.slot-remove:not(:disabled):hover[b-su0mf3mk1u] { background: rgba(248,113,113,0.1); color: #f87171; border-color: rgba(248,113,113,0.3); }
.slot-remove:disabled[b-su0mf3mk1u] { opacity: .4; cursor: not-allowed; }

.empty-slots[b-su0mf3mk1u] { text-align: center; padding: 40px; color: var(--text-faint); }
.empty-slots .ei[b-su0mf3mk1u] { font-size: 36px; margin-bottom: 8px; opacity: .3; }

/* save success pulse */
@keyframes save-pulse-b-su0mf3mk1u {
    0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.slot-card.just-added[b-su0mf3mk1u] { animation: save-pulse-b-su0mf3mk1u 0.9s ease-out 2; }

/* ── WEEK VIEW ── */
.week-grid[b-su0mf3mk1u] {
    border-radius: var(--radius-md); overflow: hidden;
    background: var(--glass-bg-soft); backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border); margin-bottom: 18px;
}
.week-head[b-su0mf3mk1u] { display: grid; grid-template-columns: 50px repeat(7, 1fr); border-bottom: 1px solid var(--glass-border); }
.week-head-cell[b-su0mf3mk1u] { padding: 8px 6px; text-align: center; border-left: 1px solid var(--glass-border); }
.week-head-cell:first-child[b-su0mf3mk1u] { border-left: none; }
.wh-day[b-su0mf3mk1u] { font-size: 10px; color: var(--text-faint); text-transform: uppercase; }
.wh-date[b-su0mf3mk1u] { font-size: 14px; font-weight: 700; margin-top: 2px; }
.week-head-cell.is-today .wh-date[b-su0mf3mk1u] {
    color: var(--accent-glow); display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; background: rgba(79,168,255,0.15);
}
.week-body[b-su0mf3mk1u] { display: grid; grid-template-columns: 50px repeat(7, 1fr); position: relative; max-height: 480px; overflow-y: auto; }
.week-body[b-su0mf3mk1u]::-webkit-scrollbar { width: 5px; }
.week-body[b-su0mf3mk1u]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 5px; }
.time-col[b-su0mf3mk1u] { display: flex; flex-direction: column; }
.time-slot-lbl[b-su0mf3mk1u] {
    height: 48px; border-top: 1px solid var(--grid-line); font-size: 9px;
    color: var(--text-faint); padding: 2px 4px 0 0; text-align: right; transform: translateY(-6px);
}
.day-col[b-su0mf3mk1u] { border-left: 1px solid var(--glass-border); position: relative; }
.hour-line[b-su0mf3mk1u] { height: 48px; border-top: 1px solid var(--grid-line); position: relative; cursor: pointer; }
.hour-line:hover[b-su0mf3mk1u] { background: rgba(79,168,255,0.06); }
.hour-line.is-past[b-su0mf3mk1u] { cursor: default; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.012), rgba(255,255,255,0.012) 6px, transparent 6px, transparent 12px); }
.hour-line.is-past:hover[b-su0mf3mk1u] { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.012), rgba(255,255,255,0.012) 6px, transparent 6px, transparent 12px); }
.add-icon[b-su0mf3mk1u] {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.6);
    width: 20px; height: 20px; border-radius: 50%; background: rgba(79,168,255,0.18);
    border: 1px solid rgba(79,168,255,0.4); color: var(--accent-glow); font-size: 13px;
    display: none; align-items: center; justify-content: center; opacity: 0; transition: .15s;
}
.hour-line:not(.is-past):hover .add-icon[b-su0mf3mk1u] { display: flex; opacity: 1; transform: translate(-50%, -50%) scale(1); }

.week-slot-block[b-su0mf3mk1u] {
    position: absolute; left: 3px; right: 3px; border-radius: 5px; padding: 3px 5px;
    font-size: 9.5px; line-height: 1.2; cursor: pointer; border-left: 3px solid;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25); overflow: hidden;
}
.week-slot-block.online[b-su0mf3mk1u]   { background: rgba(167,139,250,0.2); border-color: #a78bfa; color: #ddd6ff; }
.week-slot-block.inperson[b-su0mf3mk1u] { background: rgba(79,168,255,0.2); border-color: #4fa8ff; color: #bfe2ff; }
.week-slot-block.booked[b-su0mf3mk1u]   { opacity: .85; }
.wsb-time[b-su0mf3mk1u] { font-weight: 700; }

/* ── MONTH VIEW ── */
.month-grid[b-su0mf3mk1u] {
    display: grid; grid-template-columns: repeat(7, 1fr); border-radius: var(--radius-md); overflow: hidden;
    background: var(--glass-bg-soft); backdrop-filter: blur(14px); border: 1px solid var(--glass-border); margin-bottom: 18px;
}
.month-head-cell[b-su0mf3mk1u] {
    padding: 7px; text-align: center; font-size: 10px; font-weight: 600;
    color: var(--text-faint); text-transform: uppercase; border-bottom: 1px solid var(--glass-border);
}
.month-day-cell[b-su0mf3mk1u] {
    min-height: 78px; padding: 5px; border-right: 1px solid var(--grid-line);
    border-bottom: 1px solid var(--grid-line); position: relative; cursor: pointer;
}
.month-day-cell:hover[b-su0mf3mk1u] { background: rgba(79,168,255,0.04); }
.month-day-cell.other-month[b-su0mf3mk1u] { opacity: .3; }
.month-day-cell.is-today[b-su0mf3mk1u] { background: rgba(79,168,255,0.05); }
.month-day-cell.is-past[b-su0mf3mk1u] { cursor: default; opacity: .55; }
.month-day-cell.is-past:hover[b-su0mf3mk1u] { background: transparent; }
.mdc-num[b-su0mf3mk1u] { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.month-day-cell.is-today .mdc-num[b-su0mf3mk1u] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; background: var(--accent-gradient); color: var(--accent-text-on-fill);
}
.mdc-slots[b-su0mf3mk1u] { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.mdc-slot[b-su0mf3mk1u] {
    font-size: 8.5px; padding: 1px 5px; border-radius: 3px; border-left: 2px solid;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mdc-slot.online[b-su0mf3mk1u]   { background: rgba(167,139,250,0.15); border-color: #a78bfa; color: #a78bfa; }
.mdc-slot.inperson[b-su0mf3mk1u] { background: rgba(79,168,255,0.15); border-color: #4fa8ff; color: var(--accent-glow); }
.mdc-more[b-su0mf3mk1u] { font-size: 8px; color: var(--text-faint); }
.mdc-add-hint[b-su0mf3mk1u] { position: absolute; top: 4px; right: 4px; font-size: 9px; color: var(--text-faint); opacity: 0; transition: .15s; }
.month-day-cell:not(.is-past):hover .mdc-add-hint[b-su0mf3mk1u] { opacity: 1; }

/* ── toast ── */
.av-toast[b-su0mf3mk1u] {
    position: fixed; bottom: 24px; right: 24px; z-index: 999;
    padding: 12px 18px; border-radius: var(--radius-md);
    background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.35);
    color: #4ade80; font-size: 13px; font-weight: 600;
    transform: translateY(80px); opacity: 0; transition: .3s; pointer-events: none;
}
.av-toast.warn[b-su0mf3mk1u] { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.35); color: #fbbf24; }
.av-toast.show[b-su0mf3mk1u] { transform: translateY(0); opacity: 1; }
/* /Components/Teacher/MyClassesPage.razor.rz.scp.css */
.placeholder-page[b-w7ws1exz0q] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-w7ws1exz0q]  { font-size: 48px; }
.ph-title[b-w7ws1exz0q] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-w7ws1exz0q]   { font-size: 14px; }
/* /Components/Teacher/MyEarnings.razor.rz.scp.css */
/* ============================================================
   MyEarnings.razor.css — Teacher → My Earnings (sessions + salary payments)
   CSS Isolation; all theme colours from theme.css var(--…).
   Mirrors my-earnings.html.
   ============================================================ */

.me-page[b-q4wg5l92g8] { color: var(--text-main); }

.page-header[b-q4wg5l92g8] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-title[b-q4wg5l92g8] { font-size: 18px; font-weight: 700; }
.page-sub[b-q4wg5l92g8]   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.me-alert[b-q4wg5l92g8] { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); color: #f87171; font-size: 13px; }
.me-loading[b-q4wg5l92g8] { font-size: 13px; color: var(--text-dim); padding: 24px 0; text-align: center; }

/* ── badges ── */
.badge[b-q4wg5l92g8] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-q4wg5l92g8]  { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-blue[b-q4wg5l92g8]   { background: var(--accent-glow-soft); color: var(--accent-glow); border: 1px solid var(--accent-glow-soft); }
.b-yellow[b-q4wg5l92g8] { background: rgba(251,191,36,0.11); color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.b-gray[b-q4wg5l92g8]   { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }

/* ── summary cards ── */
.summary-cards[b-q4wg5l92g8] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.sum-card[b-q4wg5l92g8] { padding: 16px 18px; border-radius: var(--radius-md); background: var(--glass-bg); border: 1px solid var(--glass-border); display: flex; flex-direction: column; gap: 6px; }
.sum-card-icon[b-q4wg5l92g8] { font-size: 20px; margin-bottom: 2px; }
.sum-card-label[b-q4wg5l92g8] { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; color: var(--text-faint); }
.sum-card-val[b-q4wg5l92g8] { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.sum-card-sub[b-q4wg5l92g8] { font-size: 11px; color: var(--text-dim); }
.sum-pending[b-q4wg5l92g8]  { border-top: 2px solid rgba(251,191,36,0.35); }
.sum-approved[b-q4wg5l92g8] { border-top: 2px solid var(--accent-glow-soft); }
.sum-paid[b-q4wg5l92g8]     { border-top: 2px solid rgba(74,222,128,0.35); }
.sum-pending  .sum-card-val[b-q4wg5l92g8] { color: #fbbf24; }
.sum-approved .sum-card-val[b-q4wg5l92g8] { color: var(--accent-glow); }
.sum-paid     .sum-card-val[b-q4wg5l92g8] { color: #4ade80; }

/* ── filter bar ── */
.filter-bar[b-q4wg5l92g8] { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.filter-bar select[b-q4wg5l92g8] {
    padding: 7px 11px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
}
.filter-bar select:focus[b-q4wg5l92g8] { border-color: var(--accent-glow); }
.filter-bar select option[b-q4wg5l92g8] { background: #0c1a30; color: var(--text-main); }

/* ── section label ── */
.sec-lbl[b-q4wg5l92g8] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .8px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; margin-top: 22px; }
.sec-lbl[b-q4wg5l92g8]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

/* ── session earnings table ── */
.table-wrap[b-q4wg5l92g8] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; }
.earnings-table[b-q4wg5l92g8] { width: 100%; border-collapse: collapse; }
.earnings-table th[b-q4wg5l92g8] { text-align: left; font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; padding: 6px 10px; border-bottom: 1px solid var(--glass-border); }
.earnings-table td[b-q4wg5l92g8] { padding: 10px 10px; font-size: 12.5px; border-bottom: 1px solid var(--glass-border); }
.earnings-table tr:last-child td[b-q4wg5l92g8] { border-bottom: none; }
.earnings-table tr:hover td[b-q4wg5l92g8] { background: var(--accent-glow-soft); }
.earnings-table .td-date[b-q4wg5l92g8] { color: var(--text-dim); font-size: 11.5px; white-space: nowrap; }
.earnings-table .td-class[b-q4wg5l92g8] { font-weight: 600; }
.earnings-table .td-school[b-q4wg5l92g8] { color: var(--text-dim); font-size: 11.5px; }
.earnings-table .td-amount[b-q4wg5l92g8] { font-weight: 700; color: var(--text-main); text-align: right; }
.earnings-table .td-status[b-q4wg5l92g8] { text-align: right; }

/* ── empty state ── */
.empty-state[b-q4wg5l92g8] { text-align: center; padding: 40px 20px; color: var(--text-faint); }
.empty-state .ei[b-q4wg5l92g8] { font-size: 36px; margin-bottom: 8px; opacity: .3; }
.empty-state p[b-q4wg5l92g8] { font-size: 13px; }

/* ── salary payments ── */
.salary-row[b-q4wg5l92g8] { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); margin-bottom: 8px; }
.sal-icon[b-q4wg5l92g8] { font-size: 22px; flex-shrink: 0; }
.sal-info[b-q4wg5l92g8] { flex: 1; }
.sal-school[b-q4wg5l92g8] { font-size: 13px; font-weight: 700; }
.sal-period[b-q4wg5l92g8] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.sal-method[b-q4wg5l92g8] { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }
.sal-amount[b-q4wg5l92g8] { font-size: 18px; font-weight: 800; color: #4ade80; white-space: nowrap; }

/* ── pagination ── */
.pagination[b-q4wg5l92g8] { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.pg-btn[b-q4wg5l92g8] { padding: 4px 10px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim); font-size: 12px; cursor: pointer; }
.pg-btn.active[b-q4wg5l92g8] { background: var(--accent-glow-soft); color: var(--accent-glow); border-color: var(--accent-glow); }
.pg-info[b-q4wg5l92g8] { font-size: 11px; color: var(--text-faint); }
/* /Components/Teacher/MyPrivateSessions.razor.rz.scp.css */
/* ============================================================
   MyPrivateSessions.razor.css — Teacher → Private Online Sessions
   CSS Isolation; content only. Colours via theme.css var(--…).
   Mirrors teacher-private-session-wizard.html.
   ============================================================ */

.ps-page[b-j021b9zcie] { color: var(--text-main); }

/* ── header ── */
.page-header[b-j021b9zcie] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.page-title[b-j021b9zcie] { font-size: 17px; font-weight: 700; }
.page-sub[b-j021b9zcie]   { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.ps-alert[b-j021b9zcie] { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); color: #f87171; font-size: 13px; }

/* ── buttons ── */
.btn[b-j021b9zcie] { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: .15s; }
.btn:disabled[b-j021b9zcie] { opacity: .5; cursor: not-allowed; }
.btn-sm[b-j021b9zcie] { padding: 7px 13px; font-size: 12px; }
.btn-primary[b-j021b9zcie] { background: var(--accent-gradient); color: var(--accent-text-on-fill); box-shadow: 0 0 14px var(--accent-glow-soft); }
.btn-primary:not(:disabled):hover[b-j021b9zcie] { transform: translateY(-1px); }
.btn-ghost[b-j021b9zcie] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-j021b9zcie] { color: var(--text-main); }
.btn-success[b-j021b9zcie] { background: linear-gradient(135deg, #4ade80, #86efac); color: #001428; box-shadow: 0 0 14px rgba(74,222,128,0.3); }
.btn-row[b-j021b9zcie] { display: flex; gap: 8px; align-items: center; margin-top: 20px; }

/* ── badges ── */
.badge[b-j021b9zcie] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.b-blue[b-j021b9zcie]  { background: rgba(79,168,255,0.11);  color: #4fa8ff; border: 1px solid rgba(79,168,255,0.22); }
.b-green[b-j021b9zcie] { background: rgba(74,222,128,0.11);  color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-red[b-j021b9zcie]   { background: rgba(248,113,113,0.11); color: #f87171; border: 1px solid rgba(248,113,113,0.22); }
.b-amber[b-j021b9zcie] { background: rgba(251,191,36,0.11);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.b-gray[b-j021b9zcie]  { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }

/* ── stepper ── */
.stepper[b-j021b9zcie] { display: flex; align-items: center; gap: 0; margin-bottom: 28px; }
.step[b-j021b9zcie] { display: flex; align-items: center; gap: 10px; }
.step-circle[b-j021b9zcie] { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; border: 2px solid var(--glass-border); color: var(--text-faint); background: var(--glass-bg-soft); transition: .3s; }
.step.active .step-circle[b-j021b9zcie] { background: var(--accent-gradient); color: var(--accent-text-on-fill); border-color: transparent; box-shadow: 0 0 14px var(--accent-glow-soft); }
.step.done .step-circle[b-j021b9zcie] { background: rgba(74,222,128,0.15); border-color: rgba(74,222,128,0.4); color: #4ade80; }
.step-label[b-j021b9zcie] { font-size: 12px; font-weight: 600; color: var(--text-faint); }
.step.active .step-label[b-j021b9zcie] { color: var(--text-main); }
.step.done .step-label[b-j021b9zcie] { color: #4ade80; }
.step-line[b-j021b9zcie] { flex: 1; height: 2px; background: var(--glass-border); margin: 0 8px; max-width: 60px; }
.step-line.done[b-j021b9zcie] { background: rgba(74,222,128,0.4); }

/* ── cards ── */
.card[b-j021b9zcie] { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 20px; margin-bottom: 14px; }
.card-title[b-j021b9zcie] { font-size: 14px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }

/* ── form ── */
.form-grid[b-j021b9zcie] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group[b-j021b9zcie] { display: flex; flex-direction: column; gap: 5px; }
.form-group.full[b-j021b9zcie] { grid-column: 1 / -1; }
.form-label[b-j021b9zcie] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.req[b-j021b9zcie] { color: #f87171; }
.form-input[b-j021b9zcie], .form-select[b-j021b9zcie] { width: 100%; padding: 8px 11px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; transition: .15s; }
.form-input:focus[b-j021b9zcie], .form-select:focus[b-j021b9zcie] { border-color: var(--accent-glow); }
.form-select option[b-j021b9zcie] { background: #0c1a30; color: var(--text-main); }
.form-hint[b-j021b9zcie] { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.form-input[readonly][b-j021b9zcie] { color: var(--text-dim); cursor: not-allowed; }

/* ── child search ── */
.search-wrap[b-j021b9zcie] { position: relative; }
.search-results[b-j021b9zcie] { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); max-height: 200px; overflow-y: auto; }
.search-item[b-j021b9zcie] { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid rgba(100,170,255,0.07); display: flex; flex-direction: column; gap: 2px; }
.search-item:last-child[b-j021b9zcie] { border-bottom: none; }
.search-item:hover[b-j021b9zcie] { background: var(--accent-glow-soft); }
.si-name[b-j021b9zcie] { font-size: 13px; font-weight: 600; }
.si-meta[b-j021b9zcie] { font-size: 11px; color: var(--text-dim); }

/* ── child card ── */
.child-card[b-j021b9zcie] { background: var(--accent-glow-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 14px 16px; }
.child-card-top[b-j021b9zcie] { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.child-av[b-j021b9zcie] { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--accent-text-on-fill); flex-shrink: 0; }
.child-name[b-j021b9zcie] { font-size: 14px; font-weight: 700; }
.child-parent[b-j021b9zcie] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.child-fields[b-j021b9zcie] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cf-box[b-j021b9zcie] { padding: 8px 10px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); }
.cf-lbl[b-j021b9zcie] { font-size: 9px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.cf-val[b-j021b9zcie] { font-size: 12.5px; font-weight: 600; }
.child-sensory[b-j021b9zcie] { margin-top: 10px; padding: 10px 12px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); }
.sensory-lbl[b-j021b9zcie] { font-size: 9px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.sensory-txt[b-j021b9zcie] { font-size: 12px; color: var(--text-dim); line-height: 1.6; }
.child-change[b-j021b9zcie] { font-size: 11px; color: var(--accent-glow); cursor: pointer; margin-top: 6px; display: inline-block; }

/* ── fee preview ── */
.fee-preview[b-j021b9zcie] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; }
.fp-left .lbl[b-j021b9zcie] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.fp-left .desc[b-j021b9zcie] { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.fp-right .amount[b-j021b9zcie] { font-size: 24px; font-weight: 800; color: var(--accent-glow); }
.fp-right .note[b-j021b9zcie] { font-size: 10px; color: var(--text-faint); margin-top: 2px; text-align: right; }

/* ── payment summary ── */
.payment-summary[b-j021b9zcie] { background: var(--accent-glow-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 14px 16px; }
.ps-title[b-j021b9zcie] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; }
.ps-row[b-j021b9zcie] { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(100,170,255,0.07); font-size: 12.5px; }
.ps-row:last-child[b-j021b9zcie] { border-bottom: none; padding-top: 10px; margin-top: 4px; }
.ps-row.total .ps-val[b-j021b9zcie] { font-size: 18px; font-weight: 800; color: var(--accent-glow); }
.ps-lbl[b-j021b9zcie] { color: var(--text-dim); }
.ps-val[b-j021b9zcie] { font-weight: 600; }

/* ── upload ── */
.upload-area[b-j021b9zcie] { display: block; border: 2px dashed var(--glass-border); border-radius: var(--radius-sm); padding: 20px; text-align: center; cursor: pointer; transition: .2s; }
.upload-area:hover[b-j021b9zcie] { border-color: var(--accent-glow); background: var(--accent-glow-soft); }
.upload-icon[b-j021b9zcie] { font-size: 24px; margin-bottom: 6px; }
.upload-label[b-j021b9zcie] { font-size: 12px; color: var(--text-dim); }
.upload-hint[b-j021b9zcie] { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }

/* ── success ── */
.success-box[b-j021b9zcie] { background: rgba(74,222,128,0.07); border: 1px solid rgba(74,222,128,0.25); border-radius: var(--radius-md); padding: 24px; text-align: center; }
.success-icon[b-j021b9zcie] { font-size: 40px; margin-bottom: 12px; }
.success-title[b-j021b9zcie] { font-size: 16px; font-weight: 700; color: #4ade80; margin-bottom: 6px; }
.success-sub[b-j021b9zcie] { font-size: 13px; color: var(--text-dim); line-height: 1.7; }
.ref-code-big[b-j021b9zcie] { font-size: 26px; font-weight: 800; letter-spacing: 3px; font-family: monospace; color: var(--text-main); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 12px 20px; display: inline-block; margin: 14px 0; }

/* ── session list ── */
.ps-loading[b-j021b9zcie] { font-size: 13px; color: var(--text-dim); padding: 30px 0; text-align: center; }
.ps-empty[b-j021b9zcie] { text-align: center; padding: 50px; color: var(--text-faint); }
.ps-empty .ei[b-j021b9zcie] { font-size: 42px; margin-bottom: 8px; opacity: .3; }

.table-wrap[b-j021b9zcie] { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; }
.ps-table[b-j021b9zcie] { width: 100%; border-collapse: collapse; }
.ps-table th[b-j021b9zcie] { text-align: left; font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; padding: 8px 14px; border-bottom: 1px solid var(--glass-border); }
.ps-table td[b-j021b9zcie] { padding: 11px 14px; font-size: 12.5px; border-bottom: 1px solid rgba(100,170,255,0.07); vertical-align: middle; }
.ps-table tr:last-child td[b-j021b9zcie] { border-bottom: none; }
.t-child[b-j021b9zcie] { font-size: 13px; font-weight: 600; }
.t-parent[b-j021b9zcie] { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.t-when[b-j021b9zcie] { color: var(--text-dim); white-space: nowrap; }
.t-room[b-j021b9zcie] { font-size: 11px; color: var(--text-faint); }

/* ── tabs ── */
.ps-tabs[b-j021b9zcie] { display: flex; gap: 4px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 18px; width: fit-content; }
.ps-tab[b-j021b9zcie] { padding: 7px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text-faint); cursor: pointer; transition: .15s; display: flex; align-items: center; gap: 7px; }
.ps-tab.active[b-j021b9zcie] { background: var(--glass-bg); color: var(--text-main); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.ps-tab-cnt[b-j021b9zcie] { background: var(--accent-gradient); color: var(--accent-text-on-fill); font-size: 10px; font-weight: 800; border-radius: 20px; padding: 1px 7px; }

/* ── button variants ── */
.btn-danger[b-j021b9zcie] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-error); }
.btn-danger:hover[b-j021b9zcie] { background: var(--accent-glow-soft); }
.btn-xs[b-j021b9zcie] { padding: 4px 10px; font-size: 11px; }

/* ── child locked label ── */
.child-locked[b-j021b9zcie] { font-size: 11px; color: var(--text-faint); margin-top: 6px; display: inline-block; }

/* ── parent request cards ── */
.pr-grid[b-j021b9zcie] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pr-card[b-j021b9zcie] { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 14px; display: flex; flex-direction: column; gap: 10px; backdrop-filter: blur(var(--glass-blur)); }
.pr-child[b-j021b9zcie] { display: flex; gap: 10px; align-items: center; }
.pr-av[b-j021b9zcie] { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--accent-text-on-fill); flex-shrink: 0; }
.pr-name[b-j021b9zcie] { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.pr-meta[b-j021b9zcie] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.pr-sensory[b-j021b9zcie] { font-size: 11px; color: var(--text-dim); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 7px 10px; }
.pr-rows[b-j021b9zcie] { display: flex; flex-direction: column; gap: 4px; }
.pr-row[b-j021b9zcie] { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-main); }
.pr-lbl[b-j021b9zcie] { color: var(--text-faint); }
.pr-notes[b-j021b9zcie] { font-size: 11.5px; color: var(--text-dim); font-style: italic; line-height: 1.5; }
.pr-actions[b-j021b9zcie] { display: flex; gap: 6px; margin-top: 2px; }
.pr-decline[b-j021b9zcie] { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pr-decline textarea[b-j021b9zcie] { min-height: 54px; resize: vertical; }
.pr-decline-actions[b-j021b9zcie] { display: flex; gap: 6px; }
/* /Components/Teacher/MyProfile.razor.rz.scp.css */
/* ============================================================
   MyProfile.razor.css — Teacher → My Profile
   CSS Isolation; all colours from theme.css var(--…).
   Page lock: header fixed, only .mp-scroll scrolls.
   Mirrors teacher-profile.html.
   ============================================================ */

.mp-page[b-u45038peu4] {
    color: var(--text-main);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.hidden-input[b-u45038peu4] { display: none; }

/* ── header (fixed) ── */
.page-header[b-u45038peu4] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; flex-shrink: 0; }
.page-title[b-u45038peu4] { font-size: 18px; font-weight: 700; color: var(--text-main); }
.page-sub[b-u45038peu4]   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ── scroll region ── */
.mp-scroll[b-u45038peu4] { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; max-width: 760px; }
.mp-scroll[b-u45038peu4]::-webkit-scrollbar { width: 6px; }
.mp-scroll[b-u45038peu4]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 6px; }
.mp-loading[b-u45038peu4] { font-size: 13px; color: var(--text-dim); padding: 24px 0; text-align: center; }

/* ── buttons ── */
.btn[b-u45038peu4] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s;
}
.btn:disabled[b-u45038peu4] { opacity: .5; cursor: not-allowed; }
.btn-primary[b-u45038peu4] { background: var(--accent-gradient); color: var(--accent-text-on-fill); box-shadow: 0 0 16px var(--accent-glow-soft); }
.btn-primary:not(:disabled):hover[b-u45038peu4] { transform: translateY(-1px); }
.btn-ghost[b-u45038peu4] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-u45038peu4] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.btn-sm[b-u45038peu4] { padding: 6px 12px; font-size: 12px; }

/* ── badges ── */
.badge[b-u45038peu4] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-u45038peu4]  { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-yellow[b-u45038peu4] { background: rgba(251,191,36,0.11); color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }

/* ── section label ── */
.sec-lbl[b-u45038peu4] {
    font-size: 11px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .8px;
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px; margin-top: 24px;
}
.sec-lbl[b-u45038peu4]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

/* ── identity card ── */
.identity-card[b-u45038peu4] {
    display: flex; align-items: center; gap: 18px; padding: 20px;
    border-radius: var(--radius-md); background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); margin-bottom: 8px;
}
.avatar-wrap[b-u45038peu4] { position: relative; flex-shrink: 0; }
.avatar-circle[b-u45038peu4] {
    width: 84px; height: 84px; border-radius: 50%;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700; color: var(--accent-text-on-fill);
    border: 3px solid rgba(79,168,255,0.25); overflow: hidden; cursor: pointer; transition: .2s;
}
.avatar-circle:hover[b-u45038peu4] { box-shadow: 0 0 0 4px rgba(79,168,255,0.15); }
.avatar-circle img[b-u45038peu4] { width: 100%; height: 100%; object-fit: cover; }
.avatar-edit-badge[b-u45038peu4] {
    position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent-glow); color: var(--accent-text-on-fill);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; border: 2px solid var(--bg-gradient); cursor: pointer;
}
.identity-info[b-u45038peu4] { flex: 1; }
.identity-name[b-u45038peu4] { font-size: 17px; font-weight: 700; margin-bottom: 3px; color: var(--text-main); }
.identity-role[b-u45038peu4] { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.identity-schools[b-u45038peu4] { display: flex; flex-wrap: wrap; gap: 5px; }
.school-chip[b-u45038peu4] {
    padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600;
    background: rgba(79,168,255,0.1); color: var(--accent-glow); border: 1px solid rgba(79,168,255,0.22);
}

/* ── preview trigger ── */
.preview-trigger[b-u45038peu4] {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px;
    border-radius: var(--radius-md); background: var(--accent-glow-soft);
    border: 1px solid rgba(79,168,255,0.2); margin-bottom: 8px; cursor: pointer; transition: .15s;
}
.preview-trigger:hover[b-u45038peu4] { background: rgba(79,168,255,0.1); }
.preview-trigger-text[b-u45038peu4] { flex: 1; font-size: 12px; color: var(--text-dim); }
.preview-trigger-text strong[b-u45038peu4] { color: var(--accent-glow); }
.preview-view[b-u45038peu4] { color: var(--accent-glow); font-size: 12px; }

/* ── form ── */
.form-grid[b-u45038peu4] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-grid.full[b-u45038peu4] { grid-template-columns: 1fr; }
.field[b-u45038peu4] { display: flex; flex-direction: column; gap: 6px; }
.field label[b-u45038peu4] { font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: .4px; text-transform: uppercase; }
.field label .req[b-u45038peu4] { color: var(--accent-glow); }
.field input[b-u45038peu4], .field select[b-u45038peu4], .field textarea[b-u45038peu4] {
    padding: 9px 12px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; transition: .18s;
}
.field input:focus[b-u45038peu4], .field select:focus[b-u45038peu4], .field textarea:focus[b-u45038peu4] { border-color: var(--accent-glow); box-shadow: 0 0 0 3px var(--accent-glow-soft); }
.field input:disabled[b-u45038peu4] { opacity: .5; cursor: not-allowed; background: var(--glass-bg-soft); }
.field select option[b-u45038peu4] { background: #0c1a30; color: var(--text-main); }
.field textarea[b-u45038peu4] { resize: vertical; min-height: 80px; }
.field-hint[b-u45038peu4] { font-size: 10.5px; color: var(--text-faint); }

.locked-field[b-u45038peu4] { display: flex; align-items: center; gap: 8px; }
.locked-field input[b-u45038peu4] { flex: 1; }
.lock-icon[b-u45038peu4] { color: var(--text-faint); font-size: 13px; }

/* ── checkbox groups ── */
.check-group[b-u45038peu4] { display: flex; flex-wrap: wrap; gap: 8px; }
.check-item[b-u45038peu4] {
    display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-sm);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border); font-size: 12px;
    cursor: pointer; transition: .15s; user-select: none; color: var(--text-main);
}
.check-item:hover[b-u45038peu4] { border-color: rgba(79,168,255,0.3); background: var(--accent-glow-soft); }
.check-item input[b-u45038peu4] { accent-color: var(--accent-glow); cursor: pointer; }
.check-item.checked[b-u45038peu4] { border-color: rgba(79,168,255,0.4); background: rgba(79,168,255,0.08); color: var(--accent-glow); }

/* ── license box ── */
.license-box[b-u45038peu4] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 14px; }
.license-title[b-u45038peu4] { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 12px; }
.license-status[b-u45038peu4] { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 11.5px; }
.license-status.valid[b-u45038peu4]    { background: rgba(74,222,128,0.06); border: 1px solid rgba(74,222,128,0.2); color: #4ade80; }
.license-status.expiring[b-u45038peu4] { background: rgba(251,191,36,0.06); border: 1px solid rgba(251,191,36,0.2); color: #fbbf24; }

/* ── rates box (read-only) ── */
.rates-box[b-u45038peu4] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 14px; }
.rates-empty[b-u45038peu4] { font-size: 12px; color: var(--text-faint); }
.rates-table[b-u45038peu4] { width: 100%; border-collapse: collapse; margin-top: 4px; }
.rates-table th[b-u45038peu4] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--glass-border); }
.rates-table td[b-u45038peu4] { padding: 9px 8px; font-size: 12.5px; border-bottom: 1px solid rgba(100,170,255,0.06); color: var(--text-main); }
.rates-table tr:last-child td[b-u45038peu4] { border-bottom: none; }
.rate-amount[b-u45038peu4] { font-weight: 700; color: var(--accent-glow); }
.rates-note[b-u45038peu4] { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border-radius: var(--radius-sm); background: rgba(251,191,36,0.05); border: 1px solid rgba(251,191,36,0.18); font-size: 11px; color: var(--text-dim); }

/* ── school affiliations (read-only) ── */
.school-affil-row[b-u45038peu4] {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px;
    border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); margin-bottom: 8px;
}
.school-affil-icon[b-u45038peu4] { width: 34px; height: 34px; border-radius: var(--radius-sm); background: rgba(79,168,255,0.12); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.school-affil-name[b-u45038peu4] { font-size: 12.5px; font-weight: 600; color: var(--text-main); }
.school-affil-meta[b-u45038peu4] { font-size: 10.5px; color: var(--text-faint); margin-top: 1px; }
.school-affil-note[b-u45038peu4] { font-size: 10px; color: var(--text-faint); margin-top: 10px; font-style: italic; }

/* ── save bar (sticky) ── */
.save-bar[b-u45038peu4] { display: flex; align-items: center; gap: 10px; padding: 14px 0; position: sticky; bottom: 0; margin-top: 20px; background: linear-gradient(to top, var(--bg-gradient), transparent); }
.save-hint[b-u45038peu4] { font-size: 11.5px; color: var(--text-dim); flex: 1; }
.save-hint.dirty[b-u45038peu4] { color: #fbbf24; }

/* ── preview modal ── */
.preview-overlay[b-u45038peu4] {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 600;
    display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.preview-overlay.show[b-u45038peu4] { display: flex; }
.preview-modal[b-u45038peu4] {
    width: 340px; max-width: 92vw; background: var(--glass-bg);
    border: 1px solid rgba(100,170,255,0.25); border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5); overflow: hidden;
}
.preview-modal-head[b-u45038peu4] { padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: space-between; }
.preview-modal-title[b-u45038peu4] { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.preview-close[b-u45038peu4] { width: 26px; height: 26px; border-radius: 8px; border: none; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 14px; }
.preview-close:hover[b-u45038peu4] { background: rgba(255,255,255,0.06); color: var(--text-main); }

/* ── parent-facing card ── */
.parent-card[b-u45038peu4] { padding: 20px; }
.pc-avatar[b-u45038peu4] {
    width: 64px; height: 64px; border-radius: 50%; background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    font-size: 22px; font-weight: 700; color: var(--accent-text-on-fill); margin: 0 auto 12px;
}
.pc-avatar img[b-u45038peu4] { width: 100%; height: 100%; object-fit: cover; }
.pc-name[b-u45038peu4] { font-size: 15px; font-weight: 700; text-align: center; color: var(--text-main); }
.pc-role[b-u45038peu4] { font-size: 11.5px; color: var(--text-dim); text-align: center; margin-top: 2px; }
.pc-location[b-u45038peu4] { font-size: 10.5px; color: var(--text-faint); text-align: center; margin-top: 4px; }
.pc-specs[b-u45038peu4] { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 12px 0; }
.pc-spec-chip[b-u45038peu4] { padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 600; background: rgba(79,168,255,0.1); color: var(--accent-glow); border: 1px solid rgba(79,168,255,0.22); }
.pc-bio[b-u45038peu4] { font-size: 11.5px; color: var(--text-dim); line-height: 1.6; text-align: center; margin-bottom: 14px; }
.pc-rates[b-u45038peu4] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pc-rate-row[b-u45038peu4] { display: flex; justify-content: space-between; font-size: 11.5px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.03); color: var(--text-main); }
.pc-rate-amt[b-u45038peu4] { font-weight: 700; color: #4ade80; }
.pc-langs[b-u45038peu4] { display: flex; justify-content: center; gap: 5px; margin-bottom: 10px; }
.pc-lang-chip[b-u45038peu4] { padding: 2px 8px; border-radius: 20px; font-size: 9.5px; font-weight: 600; background: rgba(167,139,250,0.1); color: #a78bfa; border: 1px solid rgba(167,139,250,0.2); }
.pc-contact-block[b-u45038peu4] { display: flex; flex-direction: column; gap: 5px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); }
.pc-contact-row[b-u45038peu4] { font-size: 10.5px; color: var(--text-faint); display: flex; align-items: center; gap: 6px; }
.pc-contact-row span[b-u45038peu4] { color: var(--text-dim); }

/* ── toast ── */
.mp-toast[b-u45038peu4] {
    position: fixed; bottom: 24px; right: 24px; z-index: 999;
    padding: 12px 18px; border-radius: var(--radius-md);
    background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.35);
    color: #4ade80; font-size: 13px; font-weight: 600;
    transform: translateY(80px); opacity: 0; transition: .3s; pointer-events: none;
}
.mp-toast.warn[b-u45038peu4] { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.35); color: #fbbf24; }
.mp-toast.show[b-u45038peu4] { transform: translateY(0); opacity: 1; }
/* /Components/Teacher/MySchedule.razor.rz.scp.css */
/* ============================================================
   MySchedule.razor.css — Teacher → My Schedule (read-only)
   CSS Isolation; same visual recipe as School/ScheduleView.razor.css
   (structural colours from theme.css var(--…); class-type accents pinned
   to match the legend). Teacher version: NO add-class affordances, plus a
   lilac "private" accent and 🏫/🔒 origin badges (style from MyStudents).
   ============================================================ */

.sched-page[b-82x2g4r9c8] {
    position: relative;
    z-index: 1;
    color: var(--text-main);
    max-width: 1280px;
    margin: 0 auto;
}

/* background pattern (grid + glow orbs + scan line), same recipe as Login */
.sched-page[b-82x2g4r9c8]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 550px at 78% 8%, var(--orb-1), transparent 60%),
        radial-gradient(circle 450px at 8% 92%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 35%, rgba(0,0,0,0.9), transparent 85%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 35%, rgba(0,0,0,0.9), transparent 85%);
    animation: sched-orb-drift-b-82x2g4r9c8 24s ease-in-out infinite alternate;
}
@keyframes sched-orb-drift-b-82x2g4r9c8 {
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: -30px 30px, 40px -30px, 0 0, 0 0; }
}
.sched-page[b-82x2g4r9c8]::after {
    content: "";
    position: fixed;
    left: 0; right: 0; top: -2px;
    height: 2px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.4;
    background: linear-gradient(90deg, transparent, var(--scanline) 50%, transparent);
    animation: sched-scan-sweep-b-82x2g4r9c8 7s linear infinite;
}
@keyframes sched-scan-sweep-b-82x2g4r9c8 {
    0%   { top: -2px; }
    100% { top: 100%; }
}
.sched-page > *[b-82x2g4r9c8] { position: relative; z-index: 2; }

/* HEADER */
.page-header[b-82x2g4r9c8] {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px; flex-wrap: wrap; gap: 10px;
}
.page-title[b-82x2g4r9c8] { font-size: 20px; font-weight: 700; }
.page-sub[b-82x2g4r9c8]   { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

/* BUTTONS */
.btn[b-82x2g4r9c8] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s;
}
.btn:disabled[b-82x2g4r9c8] { opacity: .55; cursor: default; }
.btn-primary[b-82x2g4r9c8] {
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    box-shadow: 0 0 16px var(--accent-glow-soft);
}
.btn-primary:not(:disabled):hover[b-82x2g4r9c8] { transform: translateY(-1px); }
.btn-sm[b-82x2g4r9c8] { padding: 6px 12px; font-size: 12px; }

/* TOOLBAR */
.toolbar[b-82x2g4r9c8] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: var(--radius-md);
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border); margin-bottom: 16px; flex-wrap: wrap;
}
.view-switch[b-82x2g4r9c8] {
    display: flex; gap: 2px; background: rgba(255,255,255,.03);
    border-radius: var(--radius-sm); padding: 3px;
}
.view-btn[b-82x2g4r9c8] {
    padding: 6px 14px; border-radius: 6px; border: none; background: transparent;
    color: var(--text-faint); font-family: inherit; font-size: 12px;
    font-weight: 600; cursor: pointer; transition: .15s;
}
.view-btn.active[b-82x2g4r9c8] { background: var(--accent-glow-soft); color: var(--text-dim); }
.view-btn:hover:not(.active)[b-82x2g4r9c8] { color: var(--text-dim); }

.date-nav[b-82x2g4r9c8] { display: flex; align-items: center; gap: 6px; }
.nav-btn[b-82x2g4r9c8] {
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: transparent;
    color: var(--text-dim); cursor: pointer; font-size: 15px;
    display: flex; align-items: center; justify-content: center; transition: .15s;
}
.nav-btn:hover[b-82x2g4r9c8] { background: var(--accent-glow-soft); color: var(--text-main); }
.date-label[b-82x2g4r9c8] { font-size: 14px; font-weight: 700; min-width: 200px; text-align: center; }
.today-btn[b-82x2g4r9c8] {
    padding: 6px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: var(--accent-glow-soft);
    color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer;
}
.today-btn:hover[b-82x2g4r9c8] { color: var(--text-main); }

.toolbar-spacer[b-82x2g4r9c8] { flex: 1; }

.filter-select[b-82x2g4r9c8] {
    padding: 7px 11px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
}
.filter-select option[b-82x2g4r9c8] { background: var(--bg-gradient); color: var(--text-main); }

/* LEGEND */
.legend[b-82x2g4r9c8] {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    font-size: 11px; color: var(--text-dim); margin-bottom: 14px;
}
.legend-item[b-82x2g4r9c8] { display: flex; align-items: center; gap: 5px; }
.legend-dot[b-82x2g4r9c8] { width: 9px; height: 9px; border-radius: 3px; }
.legend-private[b-82x2g4r9c8] { background: #c084fc; }
.legend-now[b-82x2g4r9c8] { margin-left: auto; }
.legend-now-line[b-82x2g4r9c8] { display: inline-block; width: 14px; height: 2px; background: #f87171; margin-right: 5px; }

/* ALERT / LOADING */
.sched-alert[b-82x2g4r9c8] {
    padding: 10px 14px; border-radius: var(--radius-sm);
    background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3);
    color: var(--text-error); font-size: 13px; margin-bottom: 14px;
}
.sched-loading[b-82x2g4r9c8] { padding: 30px; text-align: center; color: var(--text-faint); font-size: 13px; }

/* ── origin badge (🏫 school / 🔒 private) — style from MyStudents .sc-school ── */
.origin-badge[b-82x2g4r9c8] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9.5px; font-weight: 600; color: var(--text-faint);
    padding: 2px 7px; border-radius: 10px;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    white-space: nowrap;
}
.origin-badge.private[b-82x2g4r9c8] {
    color: #c084fc; background: rgba(192,132,252,.10); border-color: rgba(192,132,252,.30);
}

/* ── DAY VIEW ── */
.day-list[b-82x2g4r9c8] { display: flex; flex-direction: column; gap: 8px; }
.day-sess-row[b-82x2g4r9c8] {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: var(--radius-md);
    background: var(--glass-bg); backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); border-left: 4px solid;
    cursor: pointer; transition: .15s;
}
.day-sess-row:hover[b-82x2g4r9c8] { transform: translateX(3px); }
.day-sess-row.cancelled[b-82x2g4r9c8] { opacity: .5; }
.day-sess-row.is-private[b-82x2g4r9c8] { border-style: solid; }
.dsr-time[b-82x2g4r9c8] { min-width: 64px; }
.dsr-time .t1[b-82x2g4r9c8] { font-size: 13px; font-weight: 700; color: var(--text-dim); }
.dsr-time .t2[b-82x2g4r9c8] { font-size: 10px; color: var(--text-faint); }
.dsr-icon[b-82x2g4r9c8] {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.dsr-name[b-82x2g4r9c8] { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsr-meta[b-82x2g4r9c8] { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.dsr-badge[b-82x2g4r9c8] { margin-left: auto; flex-shrink: 0; }

.day-empty[b-82x2g4r9c8] { text-align: center; padding: 50px; color: var(--text-faint); }
.day-empty .de-icon[b-82x2g4r9c8] { font-size: 42px; margin-bottom: 8px; opacity: .3; }

.past-day-note[b-82x2g4r9c8] {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    padding: 10px; font-size: 11px; color: var(--text-faint); margin-top: 8px;
}

/* ── WEEK VIEW ── */
.week-grid[b-82x2g4r9c8] {
    border-radius: var(--radius-md); overflow: hidden;
    background: var(--glass-bg-soft); backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
}
.week-head[b-82x2g4r9c8] { display: grid; grid-template-columns: 54px repeat(7, 1fr); border-bottom: 1px solid var(--glass-border); }
.week-head-cell[b-82x2g4r9c8] { padding: 10px 6px; text-align: center; border-left: 1px solid var(--glass-border); }
.week-head-cell:first-child[b-82x2g4r9c8] { border-left: none; }
.wh-day[b-82x2g4r9c8] { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; }
.wh-date[b-82x2g4r9c8] { font-size: 16px; font-weight: 700; margin-top: 2px; }
.week-head-cell.is-today .wh-date[b-82x2g4r9c8] {
    color: var(--accent-text-on-fill);
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; background: var(--accent-gradient);
}

.week-body[b-82x2g4r9c8] {
    display: grid; grid-template-columns: 54px repeat(7, 1fr);
    position: relative; max-height: 640px; overflow-y: auto;
}
.week-body[b-82x2g4r9c8]::-webkit-scrollbar { width: 5px; }
.week-body[b-82x2g4r9c8]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 5px; }

.time-col[b-82x2g4r9c8] { display: flex; flex-direction: column; }
.time-slot[b-82x2g4r9c8] {
    height: 56px; border-top: 1px solid var(--grid-line); font-size: 10px;
    color: var(--text-faint); padding: 2px 4px 0 0; text-align: right; transform: translateY(-7px);
}

.day-col[b-82x2g4r9c8] { border-left: 1px solid var(--glass-border); position: relative; cursor: default; }
.day-col.is-today[b-82x2g4r9c8] { background: var(--accent-glow-soft); }
.day-col.is-past[b-82x2g4r9c8] {
    background: repeating-linear-gradient(
        45deg, rgba(255,255,255,0.012), rgba(255,255,255,0.012) 6px,
        transparent 6px, transparent 12px);
}
.hour-line[b-82x2g4r9c8] { height: 56px; border-top: 1px solid var(--grid-line); position: relative; }

/* session block */
.sess-block[b-82x2g4r9c8] {
    position: absolute; left: 3px; right: 3px; border-radius: 6px;
    padding: 5px 7px; font-size: 10.5px; line-height: 1.35; cursor: pointer;
    overflow: hidden; border-left: 3px solid; transition: .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.sess-block:hover[b-82x2g4r9c8] { transform: scale(1.02); z-index: 5; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.sess-block.cancelled[b-82x2g4r9c8] { opacity: .45; border-left-style: dashed; text-decoration: line-through; }
.sb-time[b-82x2g4r9c8] { font-weight: 700; font-size: 10px; opacity: .85; }
.sb-name[b-82x2g4r9c8] { font-weight: 700; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-room[b-82x2g4r9c8] { font-size: 9.5px; opacity: .75; margin-top: 1px; }

/* class type colours (pinned literals — must match the legend) */
.ct-speech[b-82x2g4r9c8]       { background: rgba(79,168,255,.18);  border-color: #4fa8ff; color: #bfe2ff; }
.ct-behavioral[b-82x2g4r9c8]   { background: rgba(167,139,250,.18); border-color: #a78bfa; color: #ddd6ff; }
.ct-sensory[b-82x2g4r9c8]      { background: rgba(74,222,128,.18);  border-color: #4ade80; color: #c8f5d6; }
.ct-occupational[b-82x2g4r9c8] { background: rgba(251,191,36,.18);  border-color: #fbbf24; color: #fde9b3; }
.ct-online[b-82x2g4r9c8]       { background: rgba(244,114,182,.18); border-color: #f472b6; color: #fbcfe8; }
.ct-other[b-82x2g4r9c8]        { background: rgba(148,163,184,.18); border-color: #94a3b8; color: #e2e8f0; }
.ct-private[b-82x2g4r9c8]      { background: rgba(192,132,252,.20); border-color: #c084fc; color: #ecd9ff; }

/* private session block: subtle dashed outline so it reads as "not a school class" */
.sess-block.is-private[b-82x2g4r9c8] { border: 1px dashed #c084fc; border-left: 3px solid #c084fc; }

/* current time line */
.now-line[b-82x2g4r9c8] { position: absolute; left: 0; right: 0; height: 2px; background: #f87171; z-index: 6; pointer-events: none; }
.now-line[b-82x2g4r9c8]::before {
    content: ""; position: absolute; left: -4px; top: -3px;
    width: 8px; height: 8px; border-radius: 50%; background: #f87171;
}

/* ── MONTH VIEW ── */
.month-grid[b-82x2g4r9c8] {
    display: grid; grid-template-columns: repeat(7, 1fr);
    border-radius: var(--radius-md); overflow: hidden;
    background: var(--glass-bg-soft); backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
}
.month-head-cell[b-82x2g4r9c8] {
    padding: 8px; text-align: center; font-size: 11px; font-weight: 600;
    color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px;
    border-bottom: 1px solid var(--glass-border);
}
.month-day-cell[b-82x2g4r9c8] {
    min-height: 92px; padding: 6px;
    border-right: 1px solid var(--grid-line); border-bottom: 1px solid var(--grid-line);
    position: relative; cursor: default;
}
.month-day-cell.other-month[b-82x2g4r9c8] { opacity: .3; }
.month-day-cell.is-today[b-82x2g4r9c8] { background: var(--accent-glow-soft); }
.month-day-cell.is-past[b-82x2g4r9c8] { opacity: .55; }
.mdc-num[b-82x2g4r9c8] { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.month-day-cell.is-today .mdc-num[b-82x2g4r9c8] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
}
.mdc-events[b-82x2g4r9c8] { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.mdc-event[b-82x2g4r9c8] {
    font-size: 9px; padding: 2px 5px; border-radius: 3px; border-left: 2px solid;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.mdc-more[b-82x2g4r9c8] { font-size: 9px; color: var(--text-faint); padding-left: 5px; }

/* badges */
.badge[b-82x2g4r9c8] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-82x2g4r9c8] { background: rgba(74,222,128,.11);  color: #4ade80; border: 1px solid rgba(74,222,128,.22); }
.b-red[b-82x2g4r9c8]   { background: rgba(248,113,113,.11); color: #f87171; border: 1px solid rgba(248,113,113,.22); }

/* ── DETAIL PANEL ── */
.overlay[b-82x2g4r9c8] { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 199; display: none; }
.overlay.show[b-82x2g4r9c8] { display: block; }
.detail-panel[b-82x2g4r9c8] {
    position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw;
    background: var(--glass-bg); backdrop-filter: blur(24px);
    border-left: 1px solid var(--glass-border); z-index: 200;
    transform: translateX(100%); transition: transform .3s ease;
    display: flex; flex-direction: column;
}
.detail-panel.open[b-82x2g4r9c8] { transform: translateX(0); }
.dp-head[b-82x2g4r9c8] { padding: 18px 20px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 12px; }
.dp-icon[b-82x2g4r9c8] {
    width: 44px; height: 44px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.dp-title[b-82x2g4r9c8] { font-size: 15px; font-weight: 700; }
.dp-sub[b-82x2g4r9c8] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.dp-close[b-82x2g4r9c8] {
    margin-left: auto; width: 30px; height: 30px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: transparent;
    color: var(--text-dim); cursor: pointer; font-size: 16px;
}
.dp-close:hover[b-82x2g4r9c8] { background: var(--accent-glow-soft); color: var(--text-main); }
.dp-body[b-82x2g4r9c8] { flex: 1; overflow-y: auto; padding: 18px 20px; }
.dp-origin[b-82x2g4r9c8] { margin-bottom: 14px; }
.dp-origin .origin-badge[b-82x2g4r9c8] { font-size: 11px; padding: 4px 10px; }

.info-grid[b-82x2g4r9c8] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.info-box[b-82x2g4r9c8] { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--glass-bg-soft); border: 1px solid var(--glass-border); }
.ib-label[b-82x2g4r9c8] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.ib-val[b-82x2g4r9c8] { font-size: 13px; font-weight: 600; color: var(--text-main); }
.sec-lbl[b-82x2g4r9c8] {
    font-size: 11px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .8px;
    display: flex; align-items: center; gap: 8px; margin: 16px 0 10px;
}
.sec-lbl[b-82x2g4r9c8]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }
.child-chip-list[b-82x2g4r9c8] { display: flex; flex-wrap: wrap; gap: 6px; }
.child-chip[b-82x2g4r9c8] {
    display: flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 20px;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border); font-size: 11px;
}
.chip-empty[b-82x2g4r9c8] { font-size: 12px; color: var(--text-faint); }
.dp-actions[b-82x2g4r9c8] { padding: 14px 20px; border-top: 1px solid var(--glass-border); display: flex; gap: 8px; }
.dp-action[b-82x2g4r9c8] { flex: 1; justify-content: center; }
.dp-readonly[b-82x2g4r9c8] { flex: 1; text-align: center; font-size: 11px; color: var(--text-faint); padding: 8px; }
/* /Components/Teacher/MyStudents.razor.rz.scp.css */
/* ============================================================
   MyStudents.razor.css — Teacher → My Students
   CSS Isolation; all colors from theme.css var(--…).
   Page lock: header + filter fixed; only .grid-wrap scrolls.
   Detail is a right-side slide-over (its body scrolls on its own).
   Mirrors teacher-students.html.
   ============================================================ */

.ms-page[b-aoib5re9po] {
    color: var(--text-main);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ── header ── */
.page-header[b-aoib5re9po] {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; flex-shrink: 0;
}
.page-title[b-aoib5re9po] { font-size: 18px; font-weight: 700; color: var(--text-main); }
.page-sub[b-aoib5re9po]   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ── buttons ── */
.btn[b-aoib5re9po] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s; white-space: nowrap;
}
.btn-ghost[b-aoib5re9po] { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--text-dim); }
.btn-ghost:hover[b-aoib5re9po] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.btn-ghost:disabled[b-aoib5re9po] { opacity: .45; cursor: default; }
.btn-sm[b-aoib5re9po] { padding: 6px 12px; font-size: 12px; }
.btn-xs[b-aoib5re9po] { padding: 4px 9px; font-size: 11px; }

/* ── filter bar ── */
.filter-bar[b-aoib5re9po] {
    display: flex; gap: 8px; align-items: center; margin-bottom: 16px;
    flex-wrap: wrap; flex-shrink: 0;
}
.f-search[b-aoib5re9po], .f-select[b-aoib5re9po] {
    padding: 7px 11px; background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); font-family: inherit; font-size: 12px; outline: none;
    transition: .15s;
}
.f-search[b-aoib5re9po] { min-width: 200px; }
.f-search[b-aoib5re9po]::placeholder { color: var(--text-faint); }
.f-search:focus[b-aoib5re9po], .f-select:focus[b-aoib5re9po] { border-color: var(--accent-glow); }
.f-select[b-aoib5re9po] { cursor: pointer; }
.f-select option[b-aoib5re9po] { background: #0c1a30; color: var(--text-main); }

/* ── grid (scrolls) ── */
.grid-wrap[b-aoib5re9po] { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.grid-wrap[b-aoib5re9po]::-webkit-scrollbar { width: 6px; }
.grid-wrap[b-aoib5re9po]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 6px; }

.ms-empty[b-aoib5re9po] { text-align: center; padding: 50px; color: var(--text-faint); font-size: 13px; }
.ms-empty-sm[b-aoib5re9po] { font-size: 12px; color: var(--text-faint); padding: 4px 0; }

.students-grid[b-aoib5re9po] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.student-card[b-aoib5re9po] {
    padding: 14px; border-radius: var(--radius-md);
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border); cursor: pointer; transition: .2s;
}
.student-card:hover[b-aoib5re9po] {
    border-color: var(--accent-glow); transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.sc-school[b-aoib5re9po] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9.5px; font-weight: 600; color: var(--text-faint);
    margin-bottom: 8px; padding: 2px 7px; border-radius: 10px;
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
}
.sc-top[b-aoib5re9po] { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sc-av[b-aoib5re9po] {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
.sc-name[b-aoib5re9po] { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.sc-level[b-aoib5re9po] { font-size: 10.5px; color: var(--text-dim); }

.sc-classes[b-aoib5re9po] { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.class-chip[b-aoib5re9po] {
    padding: 2px 8px; border-radius: 20px; font-size: 9.5px; font-weight: 600;
    background: rgba(79,168,255,0.1); color: var(--accent-glow);
    border: 1px solid rgba(79,168,255,0.2);
}

.sc-parent[b-aoib5re9po] {
    display: flex; align-items: center; gap: 5px;
    font-size: 10.5px; color: var(--text-dim); margin-bottom: 10px;
    padding-bottom: 10px; border-bottom: 1px solid var(--glass-border);
}

.sc-stats[b-aoib5re9po] { display: flex; gap: 6px; }
.sc-stat[b-aoib5re9po] { flex: 1; text-align: center; padding: 6px 4px; border-radius: 6px; background: var(--glass-bg-soft); }
.sc-stat-val[b-aoib5re9po] { font-size: 14px; font-weight: 700; color: var(--text-main); }
.sc-stat-lbl[b-aoib5re9po] { font-size: 8.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; margin-top: 1px; }
.sc-stat.att .sc-stat-val[b-aoib5re9po] { color: #4ade80; }
.sc-stat.last .sc-stat-val[b-aoib5re9po] { font-size: 10.5px; color: var(--text-dim); }

.sc-footer[b-aoib5re9po] { display: flex; gap: 5px; margin-top: 10px; }

/* ── detail panel (slide-over) ── */
.overlay[b-aoib5re9po] {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 199;
    opacity: 0; pointer-events: none; transition: opacity .3s;
}
.overlay.show[b-aoib5re9po] { opacity: 1; pointer-events: auto; }

.detail-panel[b-aoib5re9po] {
    position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
    background: var(--glass-bg); backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid var(--glass-border); z-index: 200;
    transform: translateX(100%); transition: transform .3s ease;
    display: flex; flex-direction: column;
    box-shadow: -16px 0 40px rgba(0,0,0,0.4);
}
.detail-panel.open[b-aoib5re9po] { transform: translateX(0); }

.dp-head[b-aoib5re9po] {
    padding: 18px 20px; border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.dp-av[b-aoib5re9po] {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-gradient); color: var(--accent-text-on-fill);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700;
}
.dp-title[b-aoib5re9po] { font-size: 15px; font-weight: 700; color: var(--text-main); }
.dp-sub[b-aoib5re9po] { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.dp-close[b-aoib5re9po] {
    margin-left: auto; width: 30px; height: 30px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: transparent;
    color: var(--text-dim); cursor: pointer; font-size: 16px;
}
.dp-close:hover[b-aoib5re9po] { background: var(--accent-glow-soft); color: var(--text-main); }

.dp-body[b-aoib5re9po] { flex: 1; overflow-y: auto; padding: 18px 20px; min-height: 0; }
.dp-body[b-aoib5re9po]::-webkit-scrollbar { width: 5px; }
.dp-body[b-aoib5re9po]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 5px; }

.dp-actions[b-aoib5re9po] {
    padding: 14px 20px; border-top: 1px solid var(--glass-border);
    display: flex; gap: 8px; flex-shrink: 0;
}

/* section label */
.sec-lbl[b-aoib5re9po] {
    font-size: 11px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .8px;
    display: flex; align-items: center; gap: 8px; margin: 18px 0 10px;
}
.sec-lbl:first-child[b-aoib5re9po] { margin-top: 0; }
.sec-lbl[b-aoib5re9po]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

/* info grid */
.info-grid[b-aoib5re9po] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-box[b-aoib5re9po] {
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
}
.ib-label[b-aoib5re9po] { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.ib-val[b-aoib5re9po] { font-size: 13px; font-weight: 600; color: var(--text-main); }

/* note box */
.note-box[b-aoib5re9po] {
    padding: 12px 14px; border-radius: var(--radius-md);
    background: rgba(251,191,36,0.05); border: 1px solid rgba(251,191,36,0.2);
    font-size: 12.5px; color: var(--text-dim); line-height: 1.6;
}
.note-box .nb-label[b-aoib5re9po] { font-size: 10px; font-weight: 700; color: #fbbf24; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px; }

/* emergency box */
.emergency-box[b-aoib5re9po] {
    padding: 12px 14px; border-radius: var(--radius-md);
    background: rgba(248,113,113,0.05); border: 1px solid rgba(248,113,113,0.2);
    display: flex; align-items: center; gap: 10px;
}
.emergency-box .eb-icon[b-aoib5re9po] { font-size: 18px; }
.emergency-box .eb-text[b-aoib5re9po] { font-size: 12.5px; color: var(--text-dim); }
.emergency-box .eb-text strong[b-aoib5re9po] { color: var(--text-main); }

/* class rows */
.class-row[b-aoib5re9po] {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    margin-bottom: 6px; font-size: 12.5px;
}
.class-row-name[b-aoib5re9po] { flex: 1; font-weight: 600; color: var(--text-main); }
.class-row-meta[b-aoib5re9po] { font-size: 11px; color: var(--text-faint); }

/* mini attendance bars */
.att-mini-bars[b-aoib5re9po] { display: flex; gap: 3px; align-items: flex-end; height: 36px; margin-top: 8px; }
.att-mini-bar[b-aoib5re9po] {
    flex: 1; border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, rgba(74,222,128,0.5), rgba(74,222,128,0.2));
}
.att-mini-bar.absent[b-aoib5re9po] { background: linear-gradient(to top, rgba(248,113,113,0.4), rgba(248,113,113,0.15)); }
.att-mini-bar.none[b-aoib5re9po] { background: var(--glass-border); }

/* summaries */
.summary-row[b-aoib5re9po] {
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border); margin-bottom: 6px;
}
.summary-date[b-aoib5re9po] { font-size: 10.5px; color: var(--text-faint); margin-bottom: 3px; }
.summary-text[b-aoib5re9po] { font-size: 12px; color: var(--text-dim); line-height: 1.5; }

/* parent row */
.parent-row[b-aoib5re9po] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
}
.parent-av[b-aoib5re9po] {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #a78bfa, #c4b5fd); color: #1a0030;
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.parent-name[b-aoib5re9po] { font-size: 12.5px; font-weight: 600; flex: 1; color: var(--text-main); }

/* toast */
.ms-toast[b-aoib5re9po] {
    position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 60px);
    padding: 11px 18px; border-radius: var(--radius-md);
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border); box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    color: var(--text-main); font-size: 13px; font-weight: 600;
    opacity: 0; pointer-events: none; transition: .3s; z-index: 210;
}
.ms-toast.show[b-aoib5re9po] { opacity: 1; transform: translate(-50%, 0); }
/* /Components/Teacher/OnlineClassroomPage.razor.rz.scp.css */
.oc-page[b-plskp7j0u4] { padding: 24px; max-width: 900px; margin: 0 auto; }
.oc-head[b-plskp7j0u4] { margin-bottom: 18px; }
.oc-title[b-plskp7j0u4] { font-size: 20px; font-weight: 800; color: var(--text-main); }
.oc-sub[b-plskp7j0u4] { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

.oc-empty[b-plskp7j0u4] { text-align: center; padding: 48px 16px; color: var(--text-faint); font-size: 13px;
            background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); }
.oc-empty-ico[b-plskp7j0u4] { font-size: 34px; opacity: .4; margin-bottom: 8px; }

.oc-list[b-plskp7j0u4] { display: flex; flex-direction: column; gap: 10px; }
.oc-card[b-plskp7j0u4] { display: flex; align-items: center; gap: 16px; padding: 14px 16px;
           background: var(--glass-bg); border: 1px solid var(--glass-border);
           border-radius: var(--radius-md); }
.oc-live[b-plskp7j0u4] { border-color: var(--accent-glow); box-shadow: 0 0 18px var(--accent-glow-soft); }
.oc-when[b-plskp7j0u4] { min-width: 92px; }
.oc-day[b-plskp7j0u4] { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.oc-time[b-plskp7j0u4] { font-size: 15px; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; }
.oc-main[b-plskp7j0u4] { flex: 1; min-width: 0; }
.oc-name[b-plskp7j0u4] { font-size: 14px; font-weight: 700; color: var(--text-main); }
.oc-meta[b-plskp7j0u4] { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
.oc-badge[b-plskp7j0u4] { margin-left: 8px; padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 800;
            color: #4ade80; border: 1px solid rgba(74,222,128,.4); }
.oc-done[b-plskp7j0u4] { color: var(--text-dim); border-color: var(--glass-border); }
.oc-btn[b-plskp7j0u4] { padding: 8px 16px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; cursor: pointer;
          border: 1px solid var(--accent-glow); background: var(--accent-glow-soft); color: var(--text-main); }
.oc-btn:disabled[b-plskp7j0u4] { opacity: .45; cursor: default; border-color: var(--glass-border); background: var(--glass-bg-soft); }

@media (max-width: 640px) {
    .oc-card[b-plskp7j0u4] { flex-wrap: wrap; }
    .oc-btn[b-plskp7j0u4] { width: 100%; }
}
/* /Components/Teacher/ParentRequests.razor.rz.scp.css */
/* ============================================================
   ParentRequests.razor.css — Teacher → Parent Requests
   CSS Isolation; all colors from theme.css var(--…).
   Page lock: header + tabs fixed; only .list-wrap scrolls.
   Background pattern (grid + orbs + scanline) per CLAUDE.md.
   Mirrors teacher-requests.html.
   ============================================================ */

.pr-page[b-iucy0wog2j] {
    position: relative;
    color: var(--text-main);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ── background: light grid + drifting orbs + scan line ── */
.pr-page[b-iucy0wog2j]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 520px at 80% 6%, var(--orb-1), transparent 60%),
        radial-gradient(circle 440px at 6% 94%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size),
                     var(--grid-size) var(--grid-size);
}
.pr-page[b-iucy0wog2j]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0; height: 2px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--scanline), transparent);
    opacity: .5;
    animation: pr-scan-b-iucy0wog2j 7s linear infinite;
}
@keyframes pr-scan-b-iucy0wog2j {
    0%   { transform: translateY(0); opacity: 0; }
    8%   { opacity: .5; }
    92%  { opacity: .5; }
    100% { transform: translateY(78vh); opacity: 0; }
}

/* ── header ── */
.page-header[b-iucy0wog2j] { margin-bottom: 14px; flex-shrink: 0; position: relative; z-index: 1; }
.page-title[b-iucy0wog2j] { font-size: 18px; font-weight: 700; color: var(--text-main); }
.page-sub[b-iucy0wog2j]   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ── tabs ── */
.tabs[b-iucy0wog2j] {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 16px; flex-shrink: 0;
    position: relative; z-index: 1;
}
.tab[b-iucy0wog2j] {
    padding: 9px 16px; font-size: 12.5px; font-weight: 600;
    color: var(--text-faint); cursor: pointer;
    border-bottom: 2px solid transparent; white-space: nowrap;
    transition: .15s;
}
.tab.active[b-iucy0wog2j] { color: var(--accent-glow); border-bottom-color: var(--accent-glow); }
.tab:hover:not(.active)[b-iucy0wog2j] { color: var(--text-dim); }

/* ── list (scrolls) ── */
.list-wrap[b-iucy0wog2j] {
    flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px;
    position: relative; z-index: 1;
}
.list-wrap[b-iucy0wog2j]::-webkit-scrollbar { width: 6px; }
.list-wrap[b-iucy0wog2j]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 6px; }

/* ── section label (All tab) ── */
.sec-lbl[b-iucy0wog2j] {
    font-size: 11px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .8px;
    display: flex; align-items: center; gap: 8px;
    margin: 18px 0 12px;
}
.sec-lbl:first-child[b-iucy0wog2j] { margin-top: 0; }
.sec-lbl[b-iucy0wog2j]::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }
.sec-empty[b-iucy0wog2j] { font-size: 12px; color: var(--text-faint); padding: 2px 2px 8px; }

/* ── request card ── */
.req-card[b-iucy0wog2j] {
    padding: 15px 16px; border-radius: var(--radius-md);
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border); margin-bottom: 10px;
}
.req-card.confirmed[b-iucy0wog2j] { border-color: rgba(74, 222, 128, 0.30); }

.req-main[b-iucy0wog2j] { display: flex; align-items: center; gap: 12px; }
.req-av[b-iucy0wog2j] {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #a78bfa, #c4b5fd);
    color: #1a0030; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
}
.req-body[b-iucy0wog2j] { flex: 1; min-width: 0; }
.req-name[b-iucy0wog2j] { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.req-meta[b-iucy0wog2j] { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }

.req-actions[b-iucy0wog2j] {
    margin-left: auto; display: flex; gap: 6px;
    flex-shrink: 0; align-self: flex-start;
}

/* ── tags ── */
.req-tags[b-iucy0wog2j] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.req-tag[b-iucy0wog2j] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 10px;
}
.tag-type[b-iucy0wog2j]   { background: var(--accent-glow-soft); color: var(--accent-glow);
              border: 1px solid var(--accent-glow-soft); }
.tag-level1[b-iucy0wog2j] { background: rgba(74,222,128,0.12);  color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }
.tag-level2[b-iucy0wog2j] { background: rgba(251,191,36,0.12);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
.tag-level3[b-iucy0wog2j] { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.25); }

.req-mode[b-iucy0wog2j] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 10px;
}
.req-mode.online[b-iucy0wog2j]   { background: rgba(167,139,250,0.12); color: #a78bfa; border: 1px solid rgba(167,139,250,0.25); }
.req-mode.inperson[b-iucy0wog2j] { background: var(--accent-glow-soft); color: var(--accent-glow); border: 1px solid var(--accent-glow-soft); }

/* ── buttons ── */
.btn[b-iucy0wog2j] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s; white-space: nowrap;
}
.btn:disabled[b-iucy0wog2j] { opacity: .5; cursor: default; }
.btn-sm[b-iucy0wog2j] { padding: 7px 14px; font-size: 12px; }
.btn-success[b-iucy0wog2j] { background: var(--color-success); color: #001428; }
.btn-danger[b-iucy0wog2j]  { background: rgba(248,113,113,0.10); border: 1px solid rgba(248,113,113,0.25); color: #f87171; }

/* ── badges ── */
.badge[b-iucy0wog2j] {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600;
}
.b-green[b-iucy0wog2j]  { background: rgba(74,222,128,0.11);  color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-blue[b-iucy0wog2j]   { background: var(--accent-glow-soft); color: var(--accent-glow); border: 1px solid var(--accent-glow-soft); }
.b-yellow[b-iucy0wog2j] { background: rgba(251,191,36,0.11);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.b-gray[b-iucy0wog2j]   { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.20); }

.waiting-pulse[b-iucy0wog2j] {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #fbbf24; margin-right: 5px; animation: wpulse-b-iucy0wog2j 1.6s ease-in-out infinite;
}
@keyframes wpulse-b-iucy0wog2j { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ── parent notes ── */
.req-desc[b-iucy0wog2j] {
    margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    font-size: 12px; color: var(--text-dim); line-height: 1.55;
}
.rd-label[b-iucy0wog2j] {
    font-size: 9.5px; font-weight: 700; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; display: block;
}

/* ── online room picker ── */
.room-select-box[b-iucy0wog2j] {
    margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-md);
    background: var(--accent-glow-soft); border: 1px solid var(--accent-glow-soft);
}
.room-select-title[b-iucy0wog2j] { font-size: 11px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
.room-options[b-iucy0wog2j] { display: flex; gap: 8px; flex-wrap: wrap; }
.room-option[b-iucy0wog2j] {
    padding: 7px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: var(--glass-bg-soft);
    color: var(--text-dim); font-size: 12px; cursor: pointer; transition: .15s;
}
.room-option:hover[b-iucy0wog2j] { border-color: var(--accent-glow); color: var(--accent-glow); }
.room-option.unavailable[b-iucy0wog2j] {
    opacity: .35; cursor: not-allowed; text-decoration: line-through;
}

/* ── awaiting payment ── */
.req-payment-info[b-iucy0wog2j] {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px dashed rgba(251,191,36,0.25);
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.payment-stat[b-iucy0wog2j] { text-align: center; }
.payment-stat-val[b-iucy0wog2j] { font-size: 15px; font-weight: 700; color: #fbbf24; }
.payment-stat-lbl[b-iucy0wog2j] {
    font-size: 9.5px; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .5px; margin-top: 1px;
}
.ref-code-box[b-iucy0wog2j] {
    flex: 1; min-width: 180px; padding: 8px 12px; border-radius: var(--radius-sm);
    background: rgba(251,191,36,0.06); border: 1px solid rgba(251,191,36,0.25);
    display: flex; align-items: center; gap: 8px;
}
.ref-label[b-iucy0wog2j] { font-size: 11px; color: var(--text-faint); }
.ref-code-text[b-iucy0wog2j] {
    font-family: monospace; font-size: 13px; font-weight: 700;
    color: #fbbf24; letter-spacing: .5px;
}
.copy-btn[b-iucy0wog2j] {
    padding: 3px 8px; border-radius: 6px; cursor: pointer;
    border: 1px solid rgba(251,191,36,0.3); background: transparent;
    color: #fbbf24; font-size: 10px; font-family: inherit;
}
.copy-btn:hover[b-iucy0wog2j] { background: rgba(251,191,36,0.1); }
.await-note[b-iucy0wog2j] { font-size: 11px; color: var(--text-faint); margin-top: 8px; }

/* ── confirmed ── */
.confirmed-info[b-iucy0wog2j] {
    margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
    background: rgba(74,222,128,0.06); border: 1px solid rgba(74,222,128,0.20);
    font-size: 12px; color: #4ade80; display: flex; align-items: center; gap: 8px;
}

/* ── empty state ── */
.empty-state[b-iucy0wog2j] { text-align: center; padding: 50px 20px; color: var(--text-faint); font-size: 13px; }
.empty-state .ei[b-iucy0wog2j] { font-size: 42px; margin-bottom: 10px; opacity: .3; display: block; }

/* ── toast ── */
.toast[b-iucy0wog2j] {
    position: fixed; bottom: 24px; right: 24px; z-index: 999;
    padding: 12px 18px; border-radius: var(--radius-md);
    background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.35);
    color: #4ade80; font-size: 13px; font-weight: 600;
    transform: translateY(80px); opacity: 0; transition: .3s;
    pointer-events: none;
}
.toast.show[b-iucy0wog2j] { transform: translateY(0); opacity: 1; }
/* /Components/Teacher/ProfilePage.razor.rz.scp.css */
.placeholder-page[b-rbe5i5hgoo] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-rbe5i5hgoo]  { font-size: 48px; }
.ph-title[b-rbe5i5hgoo] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-rbe5i5hgoo]   { font-size: 14px; }
/* /Components/Teacher/ScenariosPage.razor.rz.scp.css */
.placeholder-page[b-23kg72r1f3] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-23kg72r1f3]  { font-size: 48px; }
.ph-title[b-23kg72r1f3] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-23kg72r1f3]   { font-size: 14px; }
/* /Components/Teacher/SchedulePage.razor.rz.scp.css */
.placeholder-page[b-skxb4z1l6c] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 12px; color: var(--text-dim);
}
.ph-icon[b-skxb4z1l6c]  { font-size: 48px; }
.ph-title[b-skxb4z1l6c] { font-size: 22px; font-weight: 700; color: var(--text-main); }
.ph-sub[b-skxb4z1l6c]   { font-size: 14px; }
/* /Components/Teacher/TeacherDashboard.razor.rz.scp.css */
/* ============================================================
   TeacherDashboard.razor.css — Dashboard section
   CSS Isolation; all colors from theme.css var(--…).
   Mirrors the Dashboard part of teacher-dashboard.html.
   ============================================================ */

.td-page[b-0lfotx4aty] { color: var(--text-main); }

/* ── stat cards ── */
.stats-grid[b-0lfotx4aty] {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-bottom: 18px;
}
.stat-card[b-0lfotx4aty] {
    border-radius: var(--radius-md); padding: 14px 16px;
    border: 1px solid; position: relative; overflow: hidden;
}
.stat-blue[b-0lfotx4aty]   { background: rgba(79,168,255,0.08);  border-color: rgba(79,168,255,0.22); }
.stat-green[b-0lfotx4aty]  { background: rgba(74,222,128,0.07);  border-color: rgba(74,222,128,0.20); }
.stat-purple[b-0lfotx4aty] { background: rgba(167,139,250,0.08); border-color: rgba(167,139,250,0.22); }
.stat-amber[b-0lfotx4aty]  { background: rgba(251,191,36,0.07);  border-color: rgba(251,191,36,0.20); }
.stat-icon-top[b-0lfotx4aty] { font-size: 18px; margin-bottom: 8px; display: block; }
.stat-val[b-0lfotx4aty] { font-size: 24px; font-weight: 700; line-height: 1; margin-bottom: 4px; color: var(--text-main); }
.stat-lbl[b-0lfotx4aty] {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .7px; color: var(--text-dim);
}

/* ── card ── */
.card[b-0lfotx4aty] {
    background: var(--glass-bg); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
    overflow: hidden; margin-bottom: 14px;
}
.card-head[b-0lfotx4aty] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; border-bottom: 1px solid var(--glass-border);
}
.card-title[b-0lfotx4aty] { font-size: 13px; font-weight: 600; color: var(--text-main); }
.card-body[b-0lfotx4aty] { padding: 14px 16px; }

.td-loading[b-0lfotx4aty], .td-empty[b-0lfotx4aty] {
    text-align: center; padding: 28px 0; font-size: 13px; color: var(--text-faint);
}

/* ── today's classes list ── */
.tc-row[b-0lfotx4aty] {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: var(--radius-sm);
    background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
    margin-bottom: 8px; cursor: pointer; transition: .15s;
}
.tc-row:last-child[b-0lfotx4aty] { margin-bottom: 0; }
.tc-row:hover[b-0lfotx4aty] { border-color: var(--accent-glow); background: var(--accent-glow-soft); }
.tc-time[b-0lfotx4aty] { font-size: 13px; font-weight: 700; color: var(--accent-glow); min-width: 50px; }
.tc-icon[b-0lfotx4aty] {
    width: 34px; height: 34px; border-radius: var(--radius-sm); flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent-glow-soft), transparent);
    border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.tc-name[b-0lfotx4aty] { font-size: 13px; font-weight: 600; color: var(--text-main); }
.tc-meta[b-0lfotx4aty] { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.tc-status[b-0lfotx4aty] { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ── badges ── */
.badge[b-0lfotx4aty] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.b-green[b-0lfotx4aty]  { background: rgba(74,222,128,0.11); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.b-blue[b-0lfotx4aty]   { background: rgba(79,168,255,0.11); color: var(--accent-glow); border: 1px solid rgba(79,168,255,0.22); }
.b-yellow[b-0lfotx4aty] { background: rgba(251,191,36,0.11); color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.b-red[b-0lfotx4aty]    { background: rgba(248,113,113,0.11); color: #f87171; border: 1px solid rgba(248,113,113,0.22); }
.b-gray[b-0lfotx4aty]   { background: rgba(100,120,150,0.15); color: var(--text-faint); border: 1px solid rgba(100,120,150,0.2); }

/* ── toast ── */
.td-toast[b-0lfotx4aty] {
    position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 60px);
    padding: 11px 18px; border-radius: var(--radius-md);
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border); box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    color: var(--text-main); font-size: 13px; font-weight: 600;
    opacity: 0; pointer-events: none; transition: .3s; z-index: 50;
}
.td-toast.show[b-0lfotx4aty] { opacity: 1; transform: translate(-50%, 0); }
/* /Components/Teacher/TeacherLayout.razor.rz.scp.css */
/* ============================================================
   TeacherLayout.razor.css — Teacher panel shell
   Sidebar (226px, fixed) + TopBar (58px, fixed) + scrollable
   content. CSS Isolation; all colors from theme.css var(--…).
   Mirrors teacher-dashboard.html.
   ============================================================ */

.t-root[b-dqrj59pqmf] {
    --sidebar-w: 226px;
    --nav-h: 58px;
    height: 100vh;
    overflow: hidden;
    color: var(--text-main);
    background: var(--bg-gradient);
    position: relative;
}

/* neon-glass background (grid + orbs), fixed to the viewport */
.t-root[b-dqrj59pqmf]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 550px at 78% 8%, var(--orb-1), transparent 60%),
        radial-gradient(circle 450px at 8% 92%, var(--orb-2), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}

/* ── SIDEBAR ── */
.sidebar[b-dqrj59pqmf] {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
    background: var(--glass-bg); backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-right: 1px solid var(--glass-border);
    display: flex; flex-direction: column; z-index: 100;
}
.sidebar-brand[b-dqrj59pqmf] {
    height: var(--nav-h); display: flex; align-items: center; gap: 10px;
    padding: 0 18px; border-bottom: 1px solid var(--glass-border); flex-shrink: 0;
}
.brand-mark[b-dqrj59pqmf] {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px; color: var(--accent-text-on-fill);
}
.brand-name[b-dqrj59pqmf] { font-size: 13px; font-weight: 700; color: var(--text-main); }
.brand-sub[b-dqrj59pqmf]  { font-size: 10px; color: var(--text-faint); }

.sidebar-nav[b-dqrj59pqmf] { flex: 1; overflow-y: auto; padding: 10px 8px; min-height: 0; }
.sidebar-nav[b-dqrj59pqmf]::-webkit-scrollbar { width: 3px; }
.sidebar-nav[b-dqrj59pqmf]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; }

.nav-label[b-dqrj59pqmf] {
    font-size: 9.5px; font-weight: 600; letter-spacing: 1px;
    color: var(--text-faint); text-transform: uppercase; padding: 12px 10px 5px;
}
.nav-item[b-dqrj59pqmf] {
    display: flex; align-items: center; gap: 9px; padding: 9px 11px;
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
    color: var(--text-dim); cursor: pointer; transition: .15s; margin-bottom: 1px;
    border-left: 2px solid transparent; position: relative;
}
.nav-item:hover[b-dqrj59pqmf] { background: var(--accent-glow-soft); color: var(--text-main); }
.nav-item.active[b-dqrj59pqmf] {
    background: linear-gradient(90deg, var(--accent-glow-soft), transparent);
    color: var(--accent-glow); border-left-color: var(--accent-glow);
}
.nav-item.featured[b-dqrj59pqmf] {
    background: linear-gradient(90deg, rgba(74,222,128,0.12), rgba(74,222,128,0.02));
    border: 1px solid rgba(74,222,128,0.25); margin: 4px 3px 10px;
    color: #4ade80;
}
.nav-item.featured:hover[b-dqrj59pqmf] { background: rgba(74,222,128,0.18); }
.nav-item.featured.active[b-dqrj59pqmf] {
    border-color: #4ade80; background: rgba(74,222,128,0.18); color: #4ade80;
}
.nav-icon[b-dqrj59pqmf] { width: 16px; text-align: center; font-size: 14px; opacity: .75; flex-shrink: 0; }
.nav-item.active .nav-icon[b-dqrj59pqmf], .nav-item.featured .nav-icon[b-dqrj59pqmf] { opacity: 1; }

.nav-skeleton[b-dqrj59pqmf] {
    height: 34px; margin: 4px 3px; border-radius: var(--radius-sm);
    background: var(--glass-bg-soft);
    animation: nav-pulse-b-dqrj59pqmf 1.4s ease-in-out infinite;
}
@keyframes nav-pulse-b-dqrj59pqmf { 0%,100% { opacity: .5; } 50% { opacity: .9; } }

.sidebar-footer[b-dqrj59pqmf] { padding: 12px; border-top: 1px solid var(--glass-border); flex-shrink: 0; }
.user-card[b-dqrj59pqmf] {
    display: flex; align-items: center; gap: 9px; padding: 9px 10px;
    border-radius: var(--radius-sm); background: var(--accent-glow-soft); cursor: pointer;
}
.user-av[b-dqrj59pqmf] {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; color: var(--accent-text-on-fill);
}
.user-name[b-dqrj59pqmf] { font-size: 12px; font-weight: 600; color: var(--text-main); }
.user-role[b-dqrj59pqmf] { font-size: 10px; color: var(--text-dim); }

/* ── TOPBAR ── */
.topbar[b-dqrj59pqmf] {
    position: fixed; top: 0; left: var(--sidebar-w); right: 0; height: var(--nav-h);
    background: var(--glass-bg); backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; gap: 10px; padding: 0 20px; z-index: 90;
}
.topbar-title[b-dqrj59pqmf] { font-size: 14px; font-weight: 700; color: var(--text-main); }
.topbar-spacer[b-dqrj59pqmf] { flex: 1; }
.tb-icon[b-dqrj59pqmf] {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: var(--glass-bg-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer; color: var(--text-dim); position: relative;
}
.tb-icon:hover[b-dqrj59pqmf] { background: var(--accent-glow-soft); color: var(--accent-glow); }
.notif-dot[b-dqrj59pqmf] {
    position: absolute; top: 5px; right: 5px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--accent-glow);
}

/* ── MAIN ── */
.main[b-dqrj59pqmf] {
    margin-left: var(--sidebar-w); padding-top: var(--nav-h);
    height: 100%; position: relative; z-index: 1;
    display: flex; flex-direction: column;
}
.content[b-dqrj59pqmf] { padding: 20px 22px; flex: 1; overflow-y: auto; min-height: 0; }
.content[b-dqrj59pqmf]::-webkit-scrollbar { width: 6px; }
.content[b-dqrj59pqmf]::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 6px; }

/* logout button in the sidebar footer */
.logout-btn[b-dqrj59pqmf] {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 8px; padding: 9px 10px;
    border-radius: var(--radius-sm);
    background: var(--c-error-soft); border: 1px solid var(--c-error-border);
    color: var(--text-error); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: background .15s ease, transform .1s ease;
    user-select: none;
}
.logout-btn:hover[b-dqrj59pqmf] { background: var(--c-error-border); }
.logout-btn:active[b-dqrj59pqmf] { transform: scale(.97); }
.logout-icon[b-dqrj59pqmf] { font-size: 14px; line-height: 1; }