/* 三端布局。不改课件本体。 */
body{font-family:var(--font);background:var(--bg);color:var(--paper)}
h1,h2,h3,.brand,.la-wait b,.la-saved,.la-winner,.stat b,.card-number{font-family:var(--font)}
.btn{border-radius:var(--r-pill);color:var(--ink);background:#fff;border-color:var(--line)}
.btn.primary{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.btn.small{border-radius:var(--r-pill)}
.btn.y-end,.y-btn.y-danger{background:var(--danger);border-color:var(--danger);color:#fff}
input,select,textarea{background:#F5F7FA;color:var(--ink);border:1px solid var(--line);border-radius:var(--r)}
dialog{background:#fff;color:var(--ink);border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
dialog::backdrop{background:rgba(21,21,39,.55)}
.topbar,.sidebar,.panel,.card,.stat,.login-side{background:#fff;color:var(--ink)}
.card{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
.topbar,.sidebar{border-color:var(--line)}
.side-item.active{background:var(--brand-50);color:var(--brand-600);border-color:var(--brand)}
.mark{background:var(--brand);color:#fff;border:0;border-radius:8px;width:32px;height:32px;font:600 16px var(--font)}
.login-intro{background:linear-gradient(165deg,#2B6FD6 0%,#5096F5 42%,#151527 100%);color:#fff;border:0}
.login-intro h1,.login-intro .brand,.login-intro .lede,.login-intro .eyebrow,.login-intro .intro-foot,.login-intro .intro-foot span{color:#fff}
.login-intro h1 span{color:#fff}
.login-orbit:before,.login-orbit:after{border-color:rgba(255,255,255,.35)}
.login-orbit span{color:#fff}
.role-tabs .active{color:var(--brand-600);border-color:var(--brand)}
.toast{background:var(--ink);color:#fff;border-radius:var(--r-pill)}
.notice{background:var(--brand-50);color:var(--ink);border-left-color:var(--brand)}
#genericDialog:has(#startLessonForm){width:min(1080px,96vw)}

.y-start{display:flex;flex-direction:column;gap:16px}
.y-steps{display:flex;gap:0;list-style:none;padding:0;margin:0}
.y-steps li{flex:1;display:flex;align-items:center;gap:8px;color:var(--ink-3)}
.y-steps li:not(:last-child):after{content:"";flex:1;height:2px;background:var(--line);margin:0 12px}
.y-steps i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);font-weight:600}
.y-steps .on{color:var(--brand);font-weight:600}
.y-steps .on i{border-color:var(--brand);color:var(--brand)}
.y-grid3{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:16px}
.y-col{padding:16px}
.y-col h3{margin:0 0 8px;font-size:16px}
.y-col select{min-height:48px;font-size:16px}
.y-confirm{padding:16px 18px;display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.y-confirm label{flex:1;min-width:140px;margin:0}

.y-stage{position:fixed;inset:0;z-index:80;background:var(--bg);color:var(--ink);overflow:auto;padding:0;display:flex;flex-direction:column}
.y-top{height:60px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 16px;gap:12px;position:sticky;top:0;z-index:2}
.y-logo{display:flex;align-items:center;gap:8px;font-weight:600}
.y-logo b{width:32px;height:32px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center}
.y-crumb{color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.y-sp{flex:1}
.y-code{background:var(--bg);border-radius:var(--r-pill);padding:6px 14px;color:var(--ink-2)}
.y-code b{color:var(--brand);letter-spacing:.12em;margin-left:6px}
.y-live{display:grid;grid-template-columns:170px minmax(0,1fr) minmax(280px,380px);gap:16px;padding:16px;align-items:start}
.y-rail{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 92px);overflow:auto}
.y-thumb{min-height:44px;text-align:left;border-radius:8px;border:2px solid transparent;background:#fff;padding:8px 10px}
.y-thumb.on{border-color:var(--brand);background:var(--brand-50)}
.y-center{display:flex;flex-direction:column;gap:12px;min-width:0}
.y-stage .la-main{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:16px;min-height:180px}
.y-stage .la-controls{position:static;background:transparent;padding:0}
.y-stage .la-project{color:var(--ink)}
.y-stage .la-project h2{font-size:clamp(22px,2vw,32px);color:var(--ink)}
.y-stage .la-statement,.y-stage .la-big{font-size:clamp(18px,1.6vw,26px);color:var(--ink)}
.y-stage .la-code{color:var(--brand-600)}
.y-stage .la-qr svg{width:min(360px,100%);background:#fff}
.y-ctrl{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.y-qbar{flex:1;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;min-width:220px}
.y-qbar select{width:auto;min-height:40px;background:#F5F7FA}
.y-phase{display:flex;gap:8px;overflow:auto}
.y-phase button,.la-switch button{min-height:44px;border-radius:var(--r-pill);background:#fff}
.la-switch button.on{background:var(--brand-600);color:#fff;border-color:var(--brand-600)}
.y-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.y-stat{padding:12px 14px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow)}
.y-stat b{display:block;font-size:28px;line-height:1.2}
.y-stat span{color:var(--ink-2);font-size:12px}
.y-side{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);min-height:320px;max-height:calc(100vh - 92px);overflow:auto;padding:8px 12px 16px}
.y-tabbar,.y-more{display:none}
@media (min-width:1100px){
 .qr-dialog{width:min(1280px,96vw);background:#151527;color:#fff}
 .qr-dialog .modal-head,.qr-dialog .qr-body,.qr-dialog .muted,.qr-dialog .eyebrow{color:#C9CCE0;background:transparent}
 .qr-body{display:grid;grid-template-columns:1fr minmax(280px,520px);text-align:left;align-items:center;gap:24px}
 .qr-body svg{width:min(520px,42vw)}
 .qr-body .code{color:#fff;font-size:56px;letter-spacing:.16em}
}
.y-checkin{background:radial-gradient(ellipse at 20% 30%,#2a3f7a,var(--stage) 60%);color:#fff;border-radius:var(--r);padding:28px}
.y-checkin .la-kicker,.y-checkin p{color:#C9CCE0}
.y-checkin .la-code{color:#fff;font-size:56px}
.y-bars .la-bar{display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:center;font-size:22px}
.y-bars .la-bar i{height:28px;background:#E5E8EE;border-radius:999px}
.y-bars .la-bar em{background:linear-gradient(90deg,var(--brand),#5DE0A6);border-radius:999px}

.y-phone{min-height:100dvh;padding-bottom:96px}
.y-phone h1{font-size:22px}
.y-newq{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--warn-50);border:1px solid #FFD8A8;border-radius:var(--r);padding:0 12px;min-height:48px;margin:8px 0 12px;color:var(--warn-ink)}
.y-phone .la-card{background:#fff;border:0;box-shadow:var(--shadow);border-radius:var(--r);color:var(--ink)}
.y-phone .la-card input,.y-phone .la-card textarea,.y-phone .la-card select{background:#F5F7FA;color:var(--ink);border-color:var(--line);min-height:48px;font-size:16px}
.y-phone .la-choice{min-height:58px;border-radius:var(--r);background:#fff;font-size:16px}
.y-phone .la-choice.on{background:var(--brand-50);color:var(--brand-600);border-color:var(--brand)}
.y-phone .la-choice.on b{color:var(--brand-600)}
.y-phone .la-go{position:sticky;bottom:0;z-index:3;min-height:52px;border-radius:var(--r-pill);background:var(--brand-600);color:#fff;justify-content:center}
.y-file{position:relative;overflow:hidden;min-height:44px}
.y-file input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:16px}
.y-btn.y-plus{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;background:var(--brand-600);border-color:var(--brand-600);color:#fff;font-size:28px;line-height:1}
#liveBoard .y-btn{margin:6px 6px 0 0}
.la-cloud small{color:#2B6FD6}
.y-cloud-big{gap:18px 28px}
.y-cloud-big small{font-size:22px}
.y-sub{color:var(--ink-2);font-size:13px;text-align:center}
#liveBoard.y-student-board{position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid var(--line);margin:0 -6vw;padding:8px 16px calc(10px + env(safe-area-inset-bottom))}
#liveBoard.y-student-board h2{font-size:16px}
#liveBoard.y-student-board textarea,#liveBoard.y-student-board input{font-size:16px;min-height:44px;border-radius:999px;background:var(--bg);border:0;padding:0 14px}
#liveBoard.y-student-board button{min-height:44px}
.y-plus{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff}

.dm-layer{position:fixed;left:0;right:0;top:0;height:25vh;bottom:auto;overflow:hidden;pointer-events:none;z-index:70}
.dm-item{font-size:clamp(28px,2.3vw,44px);font-weight:600;text-shadow:0 2px 6px #000a}
.dm-pin{font-size:clamp(22px,2vw,32px)}
@media (max-width:900px){
  .dm-item{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .dm-item{position:static;left:auto;display:block;margin:4px 16px;animation:none}
}

.y-sbar{position:fixed;left:0;right:0;bottom:0;height:72px;z-index:40;background:rgba(21,21,39,.9);color:#DADCEB;display:flex;align-items:center;gap:16px;padding:0 28px;font-size:26px}
.y-sbar b{color:#fff}
.y-pill{background:rgba(255,255,255,.12);border-radius:999px;padding:6px 16px}
.y-dlane{position:fixed;left:0;right:0;top:0;height:25vh;overflow:hidden;pointer-events:none;z-index:45}
.y-ditem{position:absolute;left:100%;white-space:nowrap;font-size:44px;font-weight:600;color:#fff;text-shadow:0 2px 6px #000a;animation:y-move 12s linear forwards}
.y-ditem:nth-child(3n){color:#9DD2FF}
.y-ditem:nth-child(3n+1){color:#FFE08A}
@keyframes y-move{to{transform:translateX(calc(-100vw - 100%))}}
.y-sideqr{position:fixed;top:24px;right:24px;z-index:46;display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.96);color:var(--ink);padding:12px;border-radius:14px;font-size:18px}
.y-sideqr-img{width:220px}
.y-sideqr-img svg{width:220px;height:220px;display:block;background:#fff}
.y-sideqr b{color:var(--brand);letter-spacing:.12em;font-size:28px}
@media (prefers-reduced-motion:reduce){
  .y-ditem{position:static;display:block;margin:6px 24px;animation:none}
}

@media (max-width:900px){
  .y-grid3{grid-template-columns:1fr}
  .y-steps{display:none}
  .y-live{display:block;padding:12px}
  .y-rail,.y-side,.y-stats{display:none}
  .y-tabbar{display:flex;position:sticky;bottom:0;height:64px;background:#fff;border-top:1px solid var(--line);z-index:4}
  .y-tabbar button{flex:1;min-height:44px;border:0;background:#fff;color:var(--ink-3);font-size:12px}
  .y-stage[data-tab="remote"] .y-tabbar button[data-y-tab="remote"],
  .y-stage[data-tab="thumbs"] .y-tabbar button[data-y-tab="thumbs"],
  .y-stage[data-tab="feed"] .y-tabbar button[data-y-tab="feed"],
  .y-stage[data-tab="more"] .y-tabbar button[data-y-tab="more"]{color:var(--brand);font-weight:600}
  .y-stage[data-tab="thumbs"] .y-rail{display:flex}
  .y-stage[data-tab="thumbs"] .y-center{display:none}
  .y-stage[data-tab="feed"] .y-side{display:block;max-height:none}
  .y-stage[data-tab="feed"] .y-center{display:none}
  .y-stage[data-tab="more"] .y-center,.y-stage[data-tab="more"] .y-rail,.y-stage[data-tab="more"] .y-side{display:none}
  .y-stage[data-tab="more"] .y-more{display:grid;gap:12px;padding:16px}
  .y-top .y-logo,.y-top .y-crumb,.y-top .y-code,.y-top [data-action="show-qr"],.y-top #yktScreen{display:none}
  .y-top{height:52px}
  .y-ctrl{display:grid}
  .y-qbar{width:100%}
  .y-phone .la-choice,.y-phone button,.lb button{min-height:44px}
}
@media (max-width:900px) and (orientation:landscape){
  .y-phone{padding-bottom:72px}
  .y-top{height:48px}
}