/* SC4: inherited Mini/Public primitives, four scoped compositions only. */
.sc4-root { box-sizing:border-box; overflow-wrap:anywhere; container-type:inline-size; }
.sc4-root *, .sc4-root *::before, .sc4-root *::after { box-sizing:border-box; }
.sc4-root h1 { font-size:24px; line-height:1.35; margin:0; }
.sc4-root h2 { font-size:18px; margin:0 0 12px; }
.sc4-root h3 { font-size:15px; margin:0 0 8px; }
.sc4-root p { line-height:1.7; }
.sc4-root .sc4-btn { font:inherit; color:inherit; background:transparent; border:1px solid currentColor; border-radius:10px; padding:10px 14px; display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; cursor:pointer; min-height:44px; max-width:100%; }
.sc4-root .sc4-btn:disabled { opacity:.58; cursor:not-allowed; }
.sc4-root .sc4-btn:focus-visible { outline:3px solid var(--c-primary-500,#7664ed); outline-offset:3px; }
.sc4-root .sc4-actions { display:flex; flex-wrap:wrap; gap:10px; }
.sc4-root.sc4-system { padding:72px 16px 32px; color:var(--c-text); }
.sc4-root .sc4-outcome { max-width:600px; margin:auto; background:var(--c-surface); border:1px solid var(--c-line); border-radius:16px; padding:40px 32px; text-align:center; }
.sc4-root .sc4-outcome > p { color:var(--c-mute); }
.sc4-root .sc4-outcome .sc4-actions { justify-content:center; }
.sc4-root .sc4-directory { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:32px; text-align:left; }
.sc4-root .sc4-directory h2 { font-size:14px; }
.sc4-root .sc4-directory .sc4-btn { border:0; justify-content:flex-start; width:100%; padding:8px 0; }
.sc4-root.sc4-room { background:linear-gradient(160deg,#1a1c2e,#15161f); color:#fff; min-height:100%; padding-bottom:env(safe-area-inset-bottom); }
.sc4-root .sc4-head { display:flex; align-items:center; gap:12px; padding:calc(8px + env(safe-area-inset-top)) 16px 12px; }
.sc4-root .sc4-head > div { flex:1; min-width:0; text-align:center; }
.sc4-root .sc4-head h1 { font-size:16px; }
.sc4-root .sc4-head p { font-size:12px; color:rgba(255,255,255,.6); margin:4px 0 0; }
.sc4-root .sc4-head .sc4-btn { border:0; background:rgba(255,255,255,.12); padding:8px; }
.sc4-root .sc4-qualification { font-size:12px; color:rgba(255,255,255,.68); margin:8px 16px 16px; }
.sc4-root .sc4-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; padding:0 16px 16px; }
.sc4-root .sc4-layout > * { min-width:0; }
.sc4-root .sc4-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:14px; margin:12px 0; }
.sc4-root .sc4-card p { font-size:13px; color:rgba(255,255,255,.6); }
.sc4-root .sc4-card dl { display:grid; grid-template-columns:90px minmax(0,1fr); gap:10px; font-size:13px; }
.sc4-root .sc4-card dd { margin:0; }
.sc4-root .sc4-preview { min-height:200px; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:14px; background:#15161f; text-align:center; padding:16px; }
.sc4-root .sc4-preview p { font-size:12px; color:rgba(255,255,255,.6); }
.sc4-root meter { width:100%; }
.sc4-root .sc4-stage { position:relative; overflow:hidden; background:#15161f; border-radius:14px; }
.sc4-root .sc4-tutor-stage { aspect-ratio:4/3; width:min(100%,calc(var(--sc4-stage-limit,60dvh) * 4 / 3)); max-height:var(--sc4-stage-limit,60dvh); margin:0 auto; border-radius:var(--r-lg); }
.sc4-root .sc4-student-stage { flex:1 1 auto; min-height:154px; height:auto; border-radius:0; }
.sc4-root.sc4-student-room.sc4-live-room { display:flex; flex-direction:column; min-height:var(--sc4-room-height,100dvh); }
.sc4-root.sc4-student-room .sc4-layout { flex:1; padding:0; }
.sc4-root.sc4-student-room .sc4-layout > main { display:flex; flex-direction:column; }
.sc4-root.sc4-student-room .sc4-layout > aside { padding:0 16px; }
.sc4-root.sc4-tutor-room .sc4-card { border-radius:var(--r-lg); }
.sc4-root .sc4-stage-title { text-align:center; margin-top:10px; color:rgba(255,255,255,.9); font-size:14px; }
.sc4-root .sc4-neutral { min-height:200px; padding:24px; text-align:center; }
.sc4-root .sc4-dock-content { margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); }
.sc4-root .sc4-stage-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; }
.sc4-root .sc4-tutor-stage .sc4-stage-img { opacity:.85; }
.sc4-root .sc4-video-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(26,28,46,.4),transparent 30%,transparent 70%,rgba(26,28,46,.6)); }
.sc4-root .sc4-pip { position:absolute; top:14px; right:14px; width:96px; height:128px; border-radius:var(--r-md); overflow:hidden; border:2px solid rgba(255,255,255,.25); }
.sc4-root .sc4-tutor-stage .sc4-pip { top:auto; bottom:10px; right:10px; width:88px; height:118px; border-color:rgba(255,255,255,.3); }
.sc4-root .sc4-pip-img { width:100%; height:100%; object-fit:cover; }
.sc4-root .sc4-tags { position:absolute; left:14px; top:14px; display:flex; gap:6px; flex-wrap:wrap; max-width:calc(100% - 130px); }
.sc4-root .sc4-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; background:rgba(255,255,255,.07); border-radius:99px; font-size:12px; }
.sc4-root .sc4-tags .sc4-pill, .sc4-root .sc4-participant { background:rgba(0,0,0,.5); }
.sc4-root .sc4-student-stage .sc4-pill { padding:5px 10px; gap:5px; }
.sc4-root .sc4-live-dot { width:6px; height:6px; background:#ef4d6a; border-radius:50%; flex-shrink:0; }
.sc4-root .sc4-network-pill svg { color:#16b896; }
.sc4-root .sc4-tutor-stage .sc4-tags { top:10px; left:10px; }
.sc4-root .sc4-tutor-stage .sc4-tags .sc4-pill { background:#ef4d6a; padding:3px 8px; }
.sc4-root .sc4-participant { position:absolute; bottom:14px; left:14px; display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:99px; font-size:12px; max-width:calc(100% - 28px); }
.sc4-root .sc4-avatar { width:24px; height:24px; object-fit:cover; border-radius:50%; }
.sc4-root .sc4-online { width:8px; height:8px; border-radius:50%; background:#5ee0b8; }
.sc4-root .sc4-toolbar { display:flex; justify-content:space-around; gap:6px; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); background:rgba(26,28,46,.8); }
.sc4-root .sc4-tool { flex-direction:column; font-size:12px; }
.sc4-root .sc4-toolbar .sc4-tool { border:0; padding:0; font-size:10px; gap:5px; }
.sc4-root .sc4-toolbar .sc4-tool svg { box-sizing:content-box; padding:14px; border-radius:50%; background:rgba(255,255,255,.14); }
.sc4-root .sc4-toolbar .sc4-leave-tool svg { background:var(--c-danger,#ef4d6a); }
.sc4-root .sc4-toolbar .sc4-tool:disabled { opacity:1; color:rgba(255,255,255,.9); }
.sc4-root .sc4-tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.sc4-root .sc4-tool-grid .sc4-tool { border-radius:var(--r-md); padding:14px 6px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); }
.sc4-root .sc4-between, .sc4-root .sc4-netmeta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
.sc4-root .sc4-netbar { height:6px; background:rgba(255,255,255,.15); border-radius:3px; margin:8px 0 12px; overflow:hidden; }
.sc4-root .sc4-netbar span { display:block; width:82%; height:100%; background:#16b896; }
.sc4-root .sc4-netmeta { font-size:12px; color:rgba(255,255,255,.6); margin-bottom:12px; }
.sc4-root .sc4-report { border-color:rgba(255,154,171,.3); }
.sc4-root .sc4-bar { display:flex; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:#15161f; border-top:1px solid rgba(255,255,255,.08); position:relative; flex-shrink:0; }
.sc4-root .sc4-bar .sc4-btn { flex:1; background:rgba(255,255,255,.12); border:0; }
.sc4-root .sc4-bar .sc4-btn:last-child { background:rgba(239,77,106,.18); color:#ff9aab; }
.sc4-root.sc4-dialog { container-type:normal; }
.sc4-root.sc4-dialog .sc4-btn { margin:4px; }
@container (max-width:768px) { .sc4-root .sc4-directory { grid-template-columns:repeat(2,minmax(0,1fr)); } .sc4-root .sc4-layout { grid-template-columns:minmax(0,1fr); } .sc4-root .sc4-outcome { padding:28px 20px; } .sc4-root .sc4-dock-content { display:none; } }
@container (max-width:480px) { .sc4-root .sc4-directory { grid-template-columns:minmax(0,1fr); } .sc4-root .sc4-head { gap:8px; } .sc4-root .sc4-head .sc4-btn span { font-size:11px; } }
@media (orientation:landscape) and (max-height:500px) { .sc4-root .sc4-student-stage { min-height:154px; } }