.classes-page { padding-top:40px; padding-bottom:80px; }
.classes-page [hidden] { display:none !important; }
.class-heading,.class-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.class-heading { margin-bottom:28px; }
.class-heading p,.class-muted { color:var(--text-light); }
.classes-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-bottom:32px; }
.class-card { padding:24px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card); margin-bottom:24px; }
.class-card h2 { font-size:1.5rem; margin-bottom:12px; }
.class-card p { margin-bottom:12px; white-space:pre-line; overflow-wrap:anywhere; }
.class-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.classes-page fieldset { padding:20px; margin:24px 0; border:1px solid var(--border); border-radius:var(--radius); min-width:0; }
.classes-page legend { padding:0 8px; font-weight:600; }
.classes-page input:not([type=checkbox]),.classes-page select,.classes-page textarea { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--bg-card); font:inherit; }
.class-picker { max-height:280px; overflow:auto; margin-top:12px; }
.class-check { display:flex; gap:10px; align-items:flex-start; padding:9px 0; cursor:pointer; }
.class-check input { width:auto; flex:none; margin-top:5px; }
.class-selected { margin:12px 0 0; padding-left:24px; }
.class-selected li { padding:8px 0; }
.class-selected button { margin-left:8px; }
.class-lessons { padding-left:24px; }
.class-lessons li { padding:10px 0; }
.class-badge { color:var(--text-light); font-size:.85rem; }
.class-table-wrap { overflow:auto; }
.class-answer { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:600px) { .class-form-grid { grid-template-columns:1fr; } .class-card { padding:18px; } .classes-page fieldset { padding:12px; } }
#classDetail,#classEditor { scroll-margin-top:100px; }
.class-card summary { overflow-wrap:anywhere; padding:8px 0; cursor:pointer; }

.classes-welcome { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:48px 64px; padding:24px 0 0; }
.classes-welcome-main { align-self:center; }
.classes-eyebrow { color:var(--text-light); font-size:.78rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; margin-bottom:20px; }
.classes-welcome h1 { font-size:clamp(2rem,4vw,3.25rem); line-height:1.16; letter-spacing:-.025em; margin-bottom:24px; }
.classes-intro { font-size:1.08rem; line-height:1.8; color:var(--text-light); max-width:480px; margin-bottom:24px; }
.classes-catalog-link { display:inline-flex; gap:14px; align-items:center; font-weight:600; padding:8px 0; text-decoration:underline; text-underline-offset:5px; }
.classes-signin { padding:32px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card); box-shadow:var(--shadow-sm); }
.classes-signin-icon { color:var(--accent); margin-bottom:20px; }
.classes-signin h2 { font-size:1.55rem; margin-bottom:12px; }
.classes-signin p { color:var(--text-light); line-height:1.7; }
.classes-signin .classes-signin-button { display:inline-flex; align-items:center; justify-content:center; gap:24px; width:auto; min-height:48px; margin-top:24px; padding:12px 22px; font-size:.95rem; }
.classes-invite-note { border-top:1px solid var(--border); margin-top:28px; padding-top:24px; }
.classes-invite-note h3 { font-size:.92rem; margin-bottom:8px; }
.classes-invite-note p { font-size:.88rem; margin:0; }
.classes-benefits { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; border-top:1px solid var(--border); padding-top:28px; margin:0; }
.classes-benefits dt { font-weight:600; color:var(--primary); margin-bottom:10px; }
.classes-benefits dt span { font-size:.75rem; color:var(--text-light); margin-right:12px; }
.classes-benefits dd { margin:0; color:var(--text-light); font-size:.92rem; line-height:1.7; }
@media(max-width:800px) { .classes-welcome { grid-template-columns:1fr; gap:32px; padding-top:0; } .classes-intro { max-width:600px; } .classes-signin { max-width:none; } }
@media(max-width:600px) { .classes-signin { padding:24px; } .classes-benefits { grid-template-columns:1fr; gap:24px; } .classes-welcome h1 { font-size:2.15rem; } .classes-welcome .classes-eyebrow { margin-bottom:16px; } }