:root{--bg:#1c1712;--surface:#27201a;--surface-2:#332a22;--line:#4a3d31;--text:#f4ede4;--muted:#b8a996;--accent:#e8913a;--accent-ink:#1c1712;--live:#6fbf73;--warn:#e5604d;--cream:#f7f1e8;--cream-ink:#2a221b;--radius:14px;--gap:12px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:Vazirmatn,Vazir,IRANSans,Tahoma,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--bg)}button,input,select{font:inherit}h1,h2{margin:0}code{word-break:break-all;font-family:ui-monospace,Consolas,monospace;font-size:.85em}.muted{color:var(--muted);margin:0}.error{color:var(--warn);margin:0;font-weight:600}.btn{border:1px solid var(--line);background:var(--surface-2);color:var(--text);cursor:pointer;border-radius:999px;min-height:40px;padding:8px 14px;transition:background .15s,border-color .15s}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}.btn--warn{border-color:var(--warn);color:var(--warn)}.btn--ghost{background:0 0}.btn--primary{background:var(--accent);color:var(--accent-ink);border:none;padding:12px 18px;font-weight:700}.join{background:radial-gradient(circle at 70% 10%, #3a2c1f, var(--bg) 60%);place-items:center;min-height:100vh;padding:16px;display:grid}.join__card{background:var(--cream);width:min(460px,100%);color:var(--cream-ink);border-radius:20px;gap:14px;padding:24px;display:grid;box-shadow:0 20px 60px #00000073}.join__card .muted{color:#6f6253}.join__card .btn{color:var(--cream-ink);background:#efe5d6;border-color:#d9c9b2}.join__card .btn--primary{background:var(--accent);color:var(--accent-ink)}.field{gap:6px;font-weight:600;display:grid}.field input,.field select{color:var(--cream-ink);background:#fff;border:1px solid #d9c9b2;border-radius:10px;padding:10px 12px}.check{align-items:center;gap:8px;display:flex}.roles{border:none;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;display:grid}.roles legend{margin-bottom:6px;font-weight:700}.role{cursor:pointer;background:#fff;border:1px solid #d9c9b2;border-radius:12px;gap:2px;padding:10px;display:grid}.role input{opacity:0;pointer-events:none;position:absolute}.role--on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}.role__name{font-weight:700}.role__hint{color:#6f6253;font-size:.8rem}.classroom,.camera-device{gap:var(--gap);flex-direction:column;max-width:1400px;min-height:100vh;margin:0 auto;padding:12px 16px 24px;display:flex}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.topbar__title{align-items:center;gap:8px;font-size:1.05rem;font-weight:800;display:flex}.topbar__title small{color:var(--muted);font-weight:400}.topbar__status{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.pill{background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:4px 10px;font-size:.85rem}.dot{border-radius:50%;width:10px;height:10px;display:inline-block}.dot--live{background:var(--live);box-shadow:0 0 0 4px #6fbf7333}.banner{background:var(--accent);color:var(--accent-ink);border-radius:var(--radius);cursor:pointer;border:none;padding:10px;font-weight:700}.stage{gap:var(--gap);grid-template-columns:minmax(0,3fr) minmax(0,1fr);display:grid}.stage--single{grid-template-columns:1fr}.stage__main{min-width:0}.stage__side{gap:var(--gap);flex-direction:column;min-width:0;display:flex}.stage__waiting{aspect-ratio:16/9;background:var(--surface);border-radius:var(--radius);color:var(--muted);text-align:center;place-items:center;padding:16px;display:grid}.tile{border-radius:var(--radius);aspect-ratio:16/9;border:1px solid var(--line);background:#000;margin:0;position:relative;overflow:hidden}.tile video{object-fit:cover;width:100%;height:100%;display:block}.tile video.mirror{transform:scaleX(-1)}.tile--large video{object-fit:contain}.tile--clickable{cursor:pointer}.tile--clickable:hover,.tile--clickable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tile__empty{width:100%;height:100%;color:var(--muted);background:var(--surface);place-items:center;font-size:2rem;font-weight:800;display:grid}.tile__label{inset-inline-start:8px;background:#1c1712c7;border-radius:999px;align-items:center;gap:6px;padding:3px 9px;font-size:.82rem;display:flex;position:absolute;bottom:8px}.tile__hint{color:var(--accent);font-size:.75rem}.tile--student{aspect-ratio:4/3}.tile--speaking{border-color:var(--live);box-shadow:0 0 0 2px var(--live)}.hand{font-size:1rem}.controls{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:10px 16px;padding:10px 12px;display:flex}.controls__group{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.controls__label{color:var(--muted);font-size:.9rem}.camera-links{width:100%;color:var(--muted)}.camera-links summary{cursor:pointer}.camera-links ul{gap:6px;margin:8px 0 0;padding:0;list-style:none;display:grid}.students{gap:8px;display:grid}.students__head{justify-content:space-between;align-items:center;gap:8px;display:flex}.students__head h2{color:var(--muted);font-size:.95rem;font-weight:600}.pager{color:var(--muted);align-items:center;gap:6px;display:flex}.students__list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;display:grid}.students--grid .students__list{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.classroom--display .students__head h2{color:var(--text);font-size:1.3rem}.classroom__body{gap:var(--gap);grid-template-columns:minmax(0,1fr) 320px;align-items:start;display:grid}.classroom__main{gap:var(--gap);flex-direction:column;min-width:0;display:flex}.dot--wait{background:var(--muted)}.pill--rec{color:#fff;background:var(--warn);border-color:var(--warn);font-weight:700}.pill--live{color:var(--live);border-color:var(--live)}.banner--warn{border:1px solid var(--warn);color:var(--warn);cursor:default;background:0 0;margin:0}.btn--tiny{min-height:28px;padding:3px 9px;font-size:.78rem}.tile__actions{top:6px;flex-wrap:wrap;gap:4px;display:flex;position:absolute;inset-inline-start:6px}.tile__actions .btn{background:#1c1712d9}select{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:10px;padding:7px 10px}.join__card select{color:var(--cream-ink);background:#fff;border-color:#d9c9b2}.qr-panel{gap:8px;width:100%;display:grid}.qr-panel__code{background:var(--surface-2);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:14px;padding:12px;display:flex}.qr-panel__code img{background:#fff;border-radius:10px;padding:6px}.qr-panel__code p{max-width:34ch;margin:0 0 6px}.qr-panel__url{color:var(--muted);max-width:42ch;margin-bottom:6px;font-size:.72rem;display:block}.chat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:8px;max-height:calc(100vh - 110px);padding:10px;display:flex;position:sticky;top:12px}.chat h2{color:var(--muted);font-size:.95rem;font-weight:600}.chat__list{flex:1;gap:6px;min-height:120px;margin:0;padding:0;list-style:none;display:grid;overflow-y:auto}.chat__msg{background:var(--surface-2);overflow-wrap:anywhere;border-radius:10px;padding:6px 9px;line-height:1.6}.chat__msg--mine{background:#3d3022}.chat__msg--teacher strong{color:var(--accent)}.chat__form{gap:6px;display:flex}.chat__form input{border:1px solid var(--line);background:var(--surface-2);min-width:0;color:var(--text);border-radius:999px;flex:1;padding:8px 12px}.prejoin__preview{aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}.prejoin__preview video{object-fit:cover;width:100%;height:100%}.prejoin__preview video.mirror{transform:scaleX(-1)}.prejoin__nocam{color:#b8a996;place-items:center;width:100%;height:100%;display:grid}.meter{background:#e7dccb;border-radius:999px;height:8px;overflow:hidden}.meter__bar{background:var(--live);height:100%;transition:width 80ms linear}.spinner{border:4px solid #e7dccb;border-top-color:var(--accent);border-radius:50%;width:34px;height:34px;margin:8px auto;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.recording{cursor:none;background:#000;padding:8px;position:fixed;inset:0;overflow:hidden}.recording .stage,.recording .stage__main,.recording .stage__side{height:100%}.recording .tile--large{aspect-ratio:auto;border:none;height:100%}.recording .stage__side .tile{aspect-ratio:auto;flex:1}.recording--error{color:#fff;padding:20px}@media (width<=1000px){.classroom__body{grid-template-columns:1fr}.chat{max-height:360px;position:static}}@media (width<=760px){.classroom,.camera-device{padding:8px 10px 20px}.stage{grid-template-columns:1fr}.stage__side{flex-direction:row}.stage__side .tile{flex:0 calc(50% - 6px)}.students__list{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}.roles{grid-template-columns:1fr}}