.online-layout{display:grid;grid-template-columns:minmax(260px,315px) minmax(0,1fr);gap:18px;align-items:start}.online-list-panel{position:sticky;top:18px;padding:16px;max-height:calc(100vh - 120px);overflow:auto}.online-search{display:grid;gap:8px;font-size:.75rem;font-weight:700;color:var(--muted)}.online-search input{width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit}.online-class-list{display:grid;gap:8px;margin-top:16px}.online-list-item{display:grid;gap:6px;width:100%;padding:14px;text-align:left;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);cursor:pointer}.online-list-item:hover,.online-list-item.active{border-color:#bc9a6b;background:#faf5ea}.online-list-item span,.online-list-item small{font-size:.7rem;color:var(--muted)}.online-list-item strong{font-size:.85rem}.online-detail{display:grid;gap:16px;min-width:0}.online-empty{padding:30px;color:var(--muted)}.online-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:26px;background:linear-gradient(115deg,#2f2925,#5c4837);color:#fff}.online-hero h2{font:500 1.7rem Georgia,serif;margin:8px 0}.online-hero p{color:#ede1d2}.online-hero .eyebrow{color:#e3bb83}.online-hero-actions,.online-export,.bbs-video-controls{display:flex;flex-wrap:wrap;align-items:center;gap:9px}.online-hero-actions button{white-space:nowrap}.online-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.online-panels>.panel{min-width:0;padding:19px}.online-panels .panel-heading{margin-bottom:12px}.online-recordings{grid-column:1/-1}.online-upload{display:inline-flex;margin:14px 0 0;padding:11px 14px;border:1px solid #c6ac84;border-radius:9px;background:#faf6ed;color:#5a432c;font-weight:700;font-size:.75rem;cursor:pointer}.online-upload:hover{background:#f1e6d4}.online-file-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.online-file-row strong,.online-file-row small{display:block;overflow-wrap:anywhere}.online-file-row strong{font-size:.78rem}.online-file-row small,.online-empty-note{font-size:.7rem;color:var(--muted);line-height:1.5}.online-file-row>div:last-child{display:flex;gap:7px}.online-panels table{font-size:.72rem}.online-panels th,.online-panels td{padding:9px 10px}.online-export{margin-top:15px}@media(max-width:1080px){.online-layout{grid-template-columns:1fr}.online-list-panel{position:static;max-height:none}.online-class-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}@media(max-width:740px){.online-panels{grid-template-columns:1fr}.online-recordings{grid-column:auto}.online-hero{align-items:flex-start;flex-direction:column}.online-file-row{align-items:flex-start;flex-direction:column}}
.online-page-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.online-invite-panel{padding:22px}.online-invite-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end;margin-top:18px}.online-invite-form label{display:grid;gap:7px;min-width:0;font-size:.78rem;font-weight:700}.online-invite-form input,#onlineInviteLink input{width:100%;min-height:42px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font:inherit}.online-invite-actions{display:flex;flex-wrap:wrap;gap:9px;grid-column:1/-1}#onlineInviteLink{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}#onlineInviteLink p{width:100%;margin:0;font-size:.78rem;color:var(--muted)}#onlineInviteLink input{flex:1 1 280px;min-width:0}#onlineInviteList{margin-top:12px}.online-staff-picker{padding:16px;margin-top:16px;background:#fbf8f4;border:1px solid #dfd4c8;border-radius:12px}.online-staff-picker h4{margin:4px 0}.online-staff-picker p{font-size:.77rem;color:var(--muted)}.online-staff-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.online-staff-grid fieldset{min-width:0;max-height:190px;overflow:auto;border:1px solid #e1d6ca;border-radius:10px;background:#fff;padding:10px 12px}.online-staff-grid legend{font-weight:700;font-size:.77rem;padding:0 5px}.online-staff-grid fieldset>div{display:grid;gap:7px}.online-staff-grid label{display:flex;align-items:center;gap:8px;font-size:.78rem;cursor:pointer}.online-staff-grid input{accent-color:#71513c}@media(max-width:740px){.online-invite-form,.online-staff-grid{grid-template-columns:1fr}.online-page-actions{justify-content:flex-start}.online-invite-panel{padding:16px}}