/* TABATA 跟练 · 智能电视版
   Design baseline: 1920x1080. 1rem = 1vw (= 1.7778vh on 16:9 screens). */
:root{
  --bg:#080C12;
  --panel:#121A25;
  --panel-2:#1A2432;
  --line:rgba(255,255,255,.09);
  --text:#F4F8FC;
  --muted:#8FA0B5;
  --dim:#5E6E82;
  --prep:#48C6F5;
  --work:#FF6A42;
  --lime:#C9F24D;
  --shadow:0 1.2rem 3rem rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:min(1vw,1.7778vh);-webkit-text-size-adjust:none}
body{
  width:100rem;height:56.25rem;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;user-select:none;cursor:default;
}
body::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60rem 40rem at 12% -10%,rgba(72,198,245,.10),transparent 70%),
             radial-gradient(55rem 40rem at 100% 110%,rgba(255,106,66,.09),transparent 70%);
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;outline:none}
.view{position:absolute;inset:0;display:none;flex-direction:column}
.view.active{display:flex}
.hidden{display:none!important}

/* ---------------- shared ---------------- */
.badge{
  display:inline-flex;align-items:center;height:1.85rem;padding:0 .85rem;border-radius:.95rem;
  border:1px solid var(--line);background:rgba(255,255,255,.035);
  font-size:.72rem;letter-spacing:.02em;color:var(--muted);white-space:nowrap;
}
.badge-lime{color:var(--lime);border-color:rgba(201,242,77,.35);background:rgba(201,242,77,.08)}
.btn{
  min-width:12rem;height:3.1rem;padding:0 1.6rem;border-radius:.7rem;
  border:1px solid var(--line);background:var(--panel-2);
  font-size:.92rem;font-weight:600;color:var(--text);
  transition:transform .16s,background .16s,box-shadow .16s;
}
.btn:hover,.btn.focus{background:#26374B;transform:translateY(-.1rem)}
.btn.focus{box-shadow:0 0 0 .18rem rgba(201,242,77,.55)}
.btn-primary{background:var(--lime);color:#111A0A;border-color:transparent;font-weight:800}
.btn-primary:hover,.btn-primary.focus{background:#D8FF6B}
/* Keep the toast clear of the training footer (dots / timeline / hints).
   Measured at 1920x1080: footer dots start ~779px, timeline ~824px.
   bottom:11rem puts the toast above the footer in every view. */
.toast{
  position:absolute;left:50%;bottom:11rem;transform:translate(-50%,1rem);
  padding:.7rem 1.5rem;border-radius:.6rem;background:rgba(8,14,22,.97);
  border:1px solid rgba(201,242,77,.38);box-shadow:0 .5rem 1.8rem rgba(0,0,0,.55);
  font-size:.85rem;font-weight:700;color:var(--text);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:50;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------------- home ---------------- */
.topbar{
  height:5.4rem;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 3rem;border-bottom:1px solid var(--line);background:rgba(10,15,22,.6);
}
.brand{display:flex;align-items:center;gap:1rem}
.brand-mark{
  width:2.7rem;height:2.7rem;border-radius:.75rem;background:var(--lime);color:#0C1505;
  display:grid;place-items:center;font-size:1.55rem;font-weight:900;font-style:italic;
  box-shadow:0 .3rem 1.4rem rgba(201,242,77,.28);
}
.brand-text h1{font-size:1.28rem;font-weight:800;letter-spacing:.02em;line-height:1.25}
.brand-text p{font-size:.68rem;color:var(--muted);margin-top:.12rem;letter-spacing:.08em}
.topbar-badges{display:flex;gap:.6rem}

.home-body{flex:1;display:flex;flex-direction:column;padding:1.7rem 3rem 1.8rem;gap:1.5rem;min-height:0}
.hero{flex:none;display:flex;align-items:center;justify-content:space-between;gap:3rem}
.hero-copy{min-width:0}
.hero-kicker{font-size:.65rem;letter-spacing:.28em;color:var(--lime);font-weight:700;margin-bottom:.45rem}
.hero h2{font-size:2.05rem;font-weight:800;line-height:1.2;letter-spacing:.01em}
.hero h2 em{font-style:normal;color:var(--lime)}
.hero p{font-size:.82rem;color:var(--muted);margin-top:.55rem;line-height:1.6;max-width:66rem}
.btn-start-all{
  flex:none;display:flex;align-items:center;gap:1.1rem;height:5.5rem;padding:0 2rem 0 1.5rem;
  border-radius:1rem;background:var(--lime);color:#101A08;border:2px solid transparent;
  box-shadow:0 .6rem 2rem rgba(201,242,77,.22);text-align:left;
  transition:transform .16s,box-shadow .16s;
}
.btn-start-all:hover,.btn-start-all.focus{
  transform:translateY(-.2rem);box-shadow:0 0 0 .22rem rgba(201,242,77,.45),0 .9rem 2.4rem rgba(201,242,77,.3);
}
.bsa-icon{
  width:2.9rem;height:2.9rem;flex:none;border-radius:50%;background:#101A08;color:var(--lime);
  display:grid;place-items:center;font-size:1.15rem;padding-left:.15rem;
}
.bsa-copy{display:flex;flex-direction:column;gap:.22rem}
.bsa-copy b{font-size:1.35rem;font-weight:900;letter-spacing:.02em;white-space:nowrap}
.bsa-copy small{font-size:.7rem;font-weight:700;opacity:.72;letter-spacing:.04em;white-space:nowrap}

.group-cards{flex:1;display:flex;gap:1.4rem;min-height:0}
.gcard{
  flex:1;min-width:0;display:flex;flex-direction:column;position:relative;
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:1.15rem;padding:1.35rem 1.5rem;
  box-shadow:var(--shadow);transition:transform .18s,border-color .18s,box-shadow .18s;
}
.gcard.focus{transform:translateY(-.35rem);border-color:var(--lime);box-shadow:0 0 0 .16rem rgba(201,242,77,.4),0 1.4rem 3rem rgba(0,0,0,.5)}
.gcard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.gcard-no{font-size:.62rem;letter-spacing:.2em;color:var(--dim);font-weight:700}
.gcard h3{font-size:1.18rem;font-weight:800;margin-top:.25rem}
.gcard-desc{font-size:.7rem;color:var(--muted);margin-top:.28rem}
.gcard-tag{
  flex:none;padding:.32rem .7rem;border-radius:.5rem;font-size:.65rem;font-weight:700;
  background:rgba(72,198,245,.12);color:var(--prep);border:1px solid rgba(72,198,245,.28);
}
.gcard[data-g="1"] .gcard-tag{background:rgba(255,106,66,.12);color:var(--work);border-color:rgba(255,106,66,.3)}

.gcard-mid{flex:1;display:flex;gap:1.1rem;margin-top:1.1rem;min-height:0}
.posters{width:15.5rem;flex:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.35rem;border-radius:.65rem;overflow:hidden;background:#0D141D}
.posters img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.move-list{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;gap:.3rem .7rem;align-content:start}
.move-list span{font-size:.71rem;color:#B9C8D8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.16rem 0}
.move-list i{font-style:normal;color:var(--dim);font-size:.62rem;margin-right:.35rem;font-variant-numeric:tabular-nums}

.gcard-foot{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);
}
.gcard-meta{display:flex;gap:1.1rem;font-size:.68rem;color:var(--muted)}
.gcard-meta b{color:var(--text);font-weight:700}
.gcard-start{
  display:flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 1.1rem;border-radius:.55rem;
  background:rgba(201,242,77,.13);border:1px solid rgba(201,242,77,.4);
  color:var(--lime);font-size:.78rem;font-weight:800;
}

.home-bottom{flex:none;display:flex;gap:1rem;height:7.6rem}
.rounds,.settings,.cloudbar{
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:.85rem;padding:.65rem 1rem;min-width:0;
}
.rounds{width:27rem;flex:none;display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.settings{width:30rem;flex:none;display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.cloudbar{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.42rem;overflow:hidden}
.panel-title,.keyhelp-title{
  font-size:.63rem;letter-spacing:.15em;color:var(--dim);font-weight:700;white-space:nowrap;
}
.panel-title small{font-size:.6rem;color:var(--lime);letter-spacing:.02em;margin-left:.5rem}
.round-rows{display:flex;gap:.55rem;flex-wrap:wrap;max-height:5.4rem;overflow:hidden}
.round-ctl{
  flex:1 1 11rem;min-width:10rem;display:flex;align-items:center;gap:.3rem;height:2.35rem;padding:0 .5rem;
  border-radius:.55rem;border:1px solid var(--line);background:rgba(255,255,255,.045);
  transition:border-color .15s,background .15s,box-shadow .15s;cursor:pointer;
}
.round-ctl.focus{border-color:var(--lime);background:rgba(201,242,77,.09);box-shadow:0 0 0 .13rem rgba(201,242,77,.28)}
.rr-label{font-size:.66rem;color:#C3D1E0;white-space:nowrap}
.rr-minus,.rr-plus{
  flex:none;width:1.5rem;height:1.5rem;border-radius:.4rem;display:grid;place-items:center;
  background:rgba(255,255,255,.09);color:var(--text);font-size:.95rem;font-weight:800;line-height:1;
}
.round-ctl.focus .rr-minus,.round-ctl.focus .rr-plus{background:rgba(201,242,77,.2);color:var(--lime)}
.rr-num{font-size:1.12rem;font-weight:900;color:var(--lime);min-width:1rem;text-align:center;font-variant-numeric:tabular-nums}
.rr-unit{font-size:.6rem;color:var(--dim);margin-left:auto}
.settings-row{display:flex;gap:.35rem;flex-wrap:wrap}
.toggle{
  display:flex;align-items:center;gap:.3rem;height:2.3rem;padding:0 .5rem;border-radius:.5rem;
  border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:.64rem;white-space:nowrap;
  transition:border-color .15s,background .15s;
}
.offset-ctl .tg-state{color:var(--prep);font-variant-numeric:tabular-nums}
.toggle.focus{border-color:var(--lime);box-shadow:0 0 0 .13rem rgba(201,242,77,.3)}
.toggle .tg-dot{width:.62rem;height:.62rem;border-radius:50%;background:var(--lime);box-shadow:0 0 .5rem rgba(201,242,77,.7)}
.toggle.off .tg-dot{background:var(--dim);box-shadow:none}
.toggle .tg-state{color:var(--lime);font-weight:700}
.toggle.off .tg-state{color:var(--dim)}
.keyhelp-rows{display:flex;gap:1.5rem;font-size:.7rem;color:var(--muted);flex-wrap:wrap}
.keyhelp-rows b{display:inline-block;color:var(--text);background:rgba(255,255,255,.08);border-radius:.3rem;padding:.08rem .45rem;margin-right:.3rem;font-size:.66rem}

/* ---------------- train ---------------- */
.train-topbar{
  height:4.2rem;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 3rem;border-bottom:1px solid var(--line);background:rgba(10,15,22,.72);
}
.tt-left{display:flex;align-items:center;gap:.85rem;font-size:.88rem}
.tt-group{font-weight:800}
.tt-sep{color:var(--dim)}
.tt-move{color:var(--muted)}
.tt-right{display:flex;gap:.55rem}
.tt-chip{
  padding:.3rem .8rem;border-radius:.5rem;border:1px solid var(--line);
  background:rgba(255,255,255,.04);font-size:.67rem;color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* Left = oversized countdown (the visual anchor). Right = full, uncut demo. */
.train-main{flex:1;display:flex;gap:1.7rem;padding:1.2rem 3rem .7rem;min-height:0}
.video-stage{
  flex:1;min-width:0;position:relative;border-radius:1.1rem;overflow:hidden;
  background:#F8F8F6;border:1px solid var(--line);box-shadow:var(--shadow);
}
/* Portrait / square demo clips are shown fully (contain). A seamless studio
   white gradient fills the side bars; using a plain gradient (rather than a
   blurred poster) avoids any visible seam and costs nothing on TV browsers. */
.video-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(78% 92% at 50% 44%,#FFFFFF 0%,#FCFCFB 52%,#EFEFED 100%);
}
#demoVideo{
  position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
  display:block;background:transparent;
}
.video-fade{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(6,11,18,.42) 0%,transparent 22%,transparent 72%,rgba(6,11,18,.46) 100%);
}
.preview-banner{
  position:absolute;top:1.3rem;left:1.4rem;display:flex;align-items:center;gap:.7rem;
  padding:.65rem 1.15rem .65rem .8rem;border-radius:.65rem;
  background:rgba(9,15,23,.86);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);box-shadow:0 .5rem 1.6rem rgba(0,0,0,.35);
  transition:opacity .3s,transform .3s;z-index:3;
}
.preview-banner.off{opacity:0;transform:translateY(-.6rem);pointer-events:none}
.pb-icon{
  width:1.6rem;height:1.6rem;border-radius:.42rem;background:var(--prep);color:#07121A;
  display:grid;place-items:center;font-size:.7rem;
}
.pb-text{font-size:.75rem;font-weight:700;color:var(--prep);letter-spacing:.03em}
.pb-name{font-size:.9rem;font-weight:800;padding-left:.7rem;border-left:1px solid rgba(255,255,255,.18)}
.video-corner{
  position:absolute;bottom:1.2rem;left:1.4rem;z-index:3;font-size:.7rem;color:rgba(255,255,255,.82);
  letter-spacing:.12em;text-shadow:0 .1rem .4rem rgba(0,0,0,.6);
}

.side{
  width:40rem;flex:none;order:-1;display:flex;flex-direction:column;align-items:center;
  padding:1rem 1.6rem .8rem;border-radius:1.2rem;border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(28,39,54,.95),rgba(11,17,26,.96));
  box-shadow:var(--shadow);
}
.side-head{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem;flex:none}
.side-group{font-size:.86rem;font-weight:800;color:var(--lime);letter-spacing:.08em}
.phase-pill{
  flex:none;padding:.36rem 1.15rem;border-radius:1rem;font-size:.78rem;font-weight:800;letter-spacing:.12em;
  background:rgba(72,198,245,.15);color:var(--prep);border:1px solid rgba(72,198,245,.35);
  transition:background .25s,color .25s,border-color .25s;
}
.phase-pill.work{background:rgba(255,106,66,.16);color:var(--work);border-color:rgba(255,106,66,.42)}
.move-title{font-size:2rem;font-weight:800;margin-top:.55rem;text-align:center;line-height:1.2;flex:none}
.move-index{font-size:.74rem;color:var(--dim);margin-top:.18rem;letter-spacing:.14em;font-variant-numeric:tabular-nums;flex:none}

.timer-box{position:relative;width:25rem;height:25rem;margin:.35rem 0 .2rem;flex:none}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.075);stroke-width:5}
.ring-fg{
  fill:none;stroke:var(--prep);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:552.9;stroke-dashoffset:0;
  transition:stroke .3s;
}
.ring-fg.work{stroke:var(--work)}
.timer-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.timer-caption{font-size:.72rem;letter-spacing:.22em;color:var(--muted);font-weight:700;margin-bottom:.1rem}
.timer-num{
  font-size:12rem;font-weight:900;line-height:.95;font-variant-numeric:tabular-nums;letter-spacing:-.055em;
}
.timer-num.prep{color:var(--prep);text-shadow:0 .3rem 3rem rgba(72,198,245,.35)}
.timer-num.work{color:var(--work);text-shadow:0 .3rem 3rem rgba(255,106,66,.4)}
.timer-num.pulse{animation:pulse .9s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.09);opacity:.82}}
.timer-unit{font-size:.9rem;color:var(--muted);margin-top:.65rem;letter-spacing:.12em}
.cue-text{font-size:.82rem;color:#C3D1E0;text-align:center;line-height:1.5;min-height:1.2rem;flex:none}
.next-line{font-size:.72rem;color:var(--dim);margin-top:.35rem;min-height:1rem;flex:none}

.beats{display:flex;gap:.55rem;margin-top:auto;margin-bottom:.35rem}
.beats i{width:.62rem;height:.62rem;border-radius:50%;background:rgba(255,255,255,.13);transition:background .1s,transform .1s}
.beats i.on{background:var(--lime);transform:scale(1.45);box-shadow:0 0 .7rem rgba(201,242,77,.7)}

.train-footer{flex:none;height:9.6rem;padding:.7rem 3rem 1.2rem;border-top:1px solid var(--line);background:rgba(10,15,22,.5)}
.dots{display:flex;gap:.55rem;align-items:center;height:1.9rem}
.dots .dot{
  flex:1;height:.42rem;border-radius:.3rem;background:rgba(255,255,255,.1);position:relative;overflow:hidden;
}
.dots .dot.split{margin-left:.9rem}
.dots.dense{gap:.18rem}
.dots.dense .dot.split{margin-left:.5rem}
.dots .dot.idle{opacity:.3}
.dots .dot.done{background:rgba(201,242,77,.55)}
.dots .dot.cur{background:rgba(255,255,255,.16)}
.dots .dot.cur::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);
  background:var(--prep);transition:width .1s linear;
}
.dots .dot.cur.work::after{background:var(--work)}

.timeline{margin-top:.85rem}
.tl-track{
  position:relative;height:1.9rem;border-radius:.42rem;overflow:hidden;display:flex;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.tl-rest{width:33.333%;display:grid;place-items:center;font-size:.66rem;color:rgba(255,255,255,.55);background:rgba(72,198,245,.09)}
.tl-work{flex:1;display:grid;place-items:center;font-size:.66rem;color:rgba(255,255,255,.55);background:rgba(255,106,66,.09)}
.tl-rest,.tl-work{position:relative;z-index:1}
.tl-cursor{
  position:absolute;left:0;top:-.15rem;bottom:-.15rem;width:.22rem;background:var(--lime);
  box-shadow:0 0 .7rem rgba(201,242,77,.9);z-index:3;transition:left .1s linear;
}
.tl-mark{
  position:absolute;top:50%;transform:translate(-50%,-50%);font-size:.52rem;font-weight:800;
  letter-spacing:.08em;color:#0A1018;background:var(--lime);padding:.08rem .32rem;border-radius:.22rem;z-index:4;
}
.tl-mark-go{left:33.333%}
.tl-mark-break{left:99%}
.train-hint{display:flex;gap:1.8rem;margin-top:.75rem;font-size:.65rem;color:var(--dim)}
.train-hint b{color:var(--muted);background:rgba(255,255,255,.06);padding:.05rem .4rem;border-radius:.25rem;margin-right:.25rem}

.pause-overlay{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(5,9,14,.84);backdrop-filter:blur(10px);z-index:20;
}
.pause-overlay.show{display:flex}
.pause-card{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:1.2rem;padding:2.6rem 3.4rem;box-shadow:var(--shadow)}
.pause-icon{font-size:2.2rem;color:var(--lime);letter-spacing:.15em}
.pause-card h2{font-size:1.8rem;font-weight:800;margin:.6rem 0}
.pause-card p{font-size:.8rem;color:var(--muted)}
.pause-btns{display:flex;gap:.8rem;justify-content:center;margin-top:1.8rem}

/* ---------------- group rest (silent 30s) ---------------- */
.rest-view{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(60rem 40rem at 50% 42%,rgba(72,198,245,.10),transparent 70%);
}
.rest-kicker{font-size:.72rem;letter-spacing:.32em;color:var(--prep);font-weight:800}
.rest-title{font-size:2.5rem;font-weight:900;margin-top:.7rem;letter-spacing:.02em}
.rest-timer{position:relative;width:25rem;height:25rem;margin:1.1rem 0 .4rem}
.rest-ring{stroke:var(--lime);stroke-width:7;stroke-linecap:round;stroke-dasharray:552.9;stroke-dashoffset:0}
.rest-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rest-num{
  font-size:11rem;font-weight:900;line-height:.95;color:var(--lime);
  font-variant-numeric:tabular-nums;letter-spacing:-.05em;
  text-shadow:0 .3rem 3rem rgba(201,242,77,.32);
}
.rest-num.pulse{animation:pulse .9s ease-in-out infinite}
.rest-unit{font-size:.9rem;color:var(--muted);margin-top:.5rem;letter-spacing:.14em}
.rest-next{font-size:1.15rem;font-weight:800;margin-top:.5rem;color:var(--text)}
.rest-sub{font-size:.8rem;color:var(--muted);margin-top:.5rem}
.rest-track{
  width:38rem;height:.5rem;border-radius:.3rem;background:rgba(255,255,255,.09);
  overflow:hidden;margin-top:1.3rem;border:1px solid var(--line);
}
.rest-fill{height:100%;width:0;background:var(--lime);transition:width .2s linear}
.rest-view .result-btns{margin-top:1.6rem}
.rest-hint{font-size:.68rem;color:var(--dim);margin-top:1rem;letter-spacing:.04em}

/* ---------------- results ---------------- */
.center-view{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.result-kicker{font-size:.7rem;letter-spacing:.3em;color:var(--prep);font-weight:800}
.result-big{font-size:3.4rem;font-weight:900;letter-spacing:.02em;margin-top:.7rem}
.result-lime{color:var(--lime)}
.result-sub{font-size:1rem;color:var(--muted);margin-top:.7rem}
.result-strip{display:flex;gap:.5rem;margin-top:2rem}
.result-strip img{width:9rem;height:5.1rem;object-fit:cover;border-radius:.5rem;opacity:.85;border:1px solid var(--line)}
.result-note{font-size:.85rem;color:var(--muted);margin-top:1.6rem}
.result-btns{display:flex;gap:.9rem;margin-top:1.8rem}
.finish-stats{display:flex;gap:3.5rem;margin-top:2.2rem}
.finish-stats div{display:flex;flex-direction:column;gap:.3rem}
.finish-stats span{font-size:2.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.finish-stats small{font-size:.7rem;color:var(--dim);letter-spacing:.1em}

/* ---------------- home: cloud status bar ---------------- */
.badge-btn{cursor:pointer;transition:border-color .15s,background .15s}
.badge-btn:hover,.badge-btn.focus{border-color:var(--lime);background:rgba(201,242,77,.12);color:var(--lime)}
.badge-btn.focus{box-shadow:0 0 0 .13rem rgba(201,242,77,.4)}
.cloudbar-title{font-size:.63rem;letter-spacing:.15em;color:var(--dim);font-weight:700}
.cloudbar-title span{margin-left:.7rem;color:var(--lime);letter-spacing:0}
.cloudbar-btns{display:flex;gap:.5rem}
.mini-btn{
  height:2rem;padding:0 .85rem;border-radius:.5rem;border:1px solid var(--line);
  background:rgba(255,255,255,.055);font-size:.68rem;font-weight:700;color:var(--text);
  white-space:nowrap;transition:border-color .15s,background .15s;
}
.mini-btn:hover,.mini-btn.focus{border-color:var(--lime);background:rgba(201,242,77,.12);color:var(--lime)}
.mini-btn.focus{box-shadow:0 0 0 .12rem rgba(201,242,77,.35)}
.cloudbar .keyhelp-rows{gap:.9rem;font-size:.62rem}

/* ---------------- library view ---------------- */
.lib-topbar{
  height:4.7rem;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 3rem;border-bottom:1px solid var(--line);background:rgba(10,15,22,.65);
}
.lib-title{display:flex;align-items:center;gap:1.2rem}
.back-btn{font-size:.8rem;font-weight:700;color:var(--muted);padding:.45rem .9rem;
  border:1px solid var(--line);border-radius:.5rem}
.back-btn:hover,.back-btn.focus{border-color:var(--lime);color:var(--lime)}
.lib-title h2{font-size:1.4rem;font-weight:800}
.lib-sub{font-size:.72rem;color:var(--dim)}
.lib-status{display:flex;align-items:center;gap:.6rem;font-size:.75rem;color:var(--muted)}
.cloud-dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--dim)}
.cloud-dot.on{background:var(--lime);box-shadow:0 0 .6rem rgba(201,242,77,.75)}
.cloud-dot.off{background:var(--work)}
.cloud-dot.sync{background:var(--prep)}

.lib-filters{
  flex:none;display:flex;align-items:center;gap:.8rem;padding:1.1rem 3rem;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);flex-wrap:wrap;
}
.chips{display:flex;gap:.4rem}
.chip{
  height:2.15rem;padding:0 1.05rem;border-radius:1.1rem;border:1px solid var(--line);
  background:rgba(255,255,255,.045);font-size:.75rem;font-weight:700;color:var(--muted);
}
.chip.on{background:rgba(201,242,77,.16);border-color:var(--lime);color:var(--lime)}
.chip.focus{border-color:var(--lime);box-shadow:0 0 0 .12rem rgba(201,242,77,.35)}
.lib-filters select,.lib-filters input[type=search],.cfg-row input{
  height:2.15rem;padding:0 .8rem;border-radius:.5rem;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);font-size:.74rem;outline:none;
}
.lib-filters select{min-width:13rem}
.lib-filters input[type=search]{min-width:19rem}
.lib-filters select:focus,.lib-filters input:focus,.cfg-row input:focus{border-color:var(--prep)}
.lib-actions{display:flex;gap:.5rem}
.lib-count{margin-left:auto;font-size:.7rem;color:var(--dim);white-space:nowrap}

.lib-grid{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  display:grid;grid-template-columns:repeat(6,1fr);gap:.9rem;
  align-content:start;padding:1.3rem 3rem;
}
.lib-grid::-webkit-scrollbar{width:.45rem}
.lib-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:.3rem}
.lib-card{
  border:1px solid var(--line);border-radius:.8rem;overflow:hidden;
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  transition:border-color .15s,transform .15s;position:relative;
}
.lib-card.focus{border-color:var(--lime);transform:translateY(-.2rem);box-shadow:0 0 0 .14rem rgba(201,242,77,.35)}
.lib-card.off{opacity:.55}
.lib-poster{height:8.2rem;background:#0D141D;position:relative;overflow:hidden}
.lib-poster img{width:100%;height:100%;object-fit:cover;display:block}
.lib-poster .no-img{display:grid;place-items:center;height:100%;font-size:.65rem;color:var(--dim)}
.lib-tag{
  position:absolute;top:.4rem;left:.4rem;padding:.16rem .55rem;border-radius:.3rem;
  font-size:.58rem;font-weight:800;background:rgba(8,14,22,.88);border:1px solid var(--line);
}
.lib-tag.cloud{color:var(--lime);border-color:rgba(201,242,77,.45)}
.lib-tag.local{color:var(--prep);border-color:rgba(72,198,245,.45)}
.lib-body{padding:.55rem .65rem .65rem}
.lib-name{
  width:100%;height:1.7rem;padding:0 .4rem;border-radius:.35rem;
  border:1px solid transparent;background:transparent;color:var(--text);
  font-size:.8rem;font-weight:800;outline:none;
}
.lib-name.editable:hover{border-color:var(--line);background:rgba(255,255,255,.04)}
.lib-name:focus{border-color:var(--prep);background:rgba(72,198,245,.08)}
.lib-name:read-only{color:var(--text)}
.lib-meta{display:flex;justify-content:space-between;align-items:center;gap:.4rem;margin-top:.3rem}
.lib-group{font-size:.6rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-enable{
  flex:none;font-size:.6rem;font-weight:700;padding:.2rem .5rem;border-radius:.3rem;
  border:1px solid var(--line);color:var(--dim);
}
.lib-enable.on{color:var(--lime);border-color:rgba(201,242,77,.4);background:rgba(201,242,77,.1)}
.lib-cue{
  width:100%;height:1.45rem;margin-top:.3rem;padding:0 .4rem;border-radius:.3rem;
  border:1px solid transparent;background:transparent;color:var(--muted);font-size:.62rem;outline:none;
}
.lib-cue:focus{border-color:var(--prep);background:rgba(72,198,245,.07);color:var(--text)}
.lib-empty{grid-column:1/-1;text-align:center;padding:4rem;color:var(--dim);font-size:.85rem}

.lib-footer{flex:none;border-top:1px solid var(--line);background:rgba(10,15,22,.6);padding:.9rem 3rem 1rem}
.cfg-row{display:flex;align-items:flex-end;gap:.8rem}
.cfg-row label{display:flex;flex-direction:column;gap:.35rem;font-size:.65rem;color:var(--dim)}
.cfg-row input{width:42rem;height:2.15rem}
.cfg-hint{font-size:.65rem;color:var(--dim);margin-left:auto}
.lib-hint{font-size:.65rem;color:var(--dim);margin-top:.7rem;letter-spacing:.02em}