/* ============================================================
   DAI ACADEMY — demo class player (light / professional)
   Styled close to real Excel: white sheet, grey chrome,
   navy text, gold reserved for the active step and accents.
   ============================================================ */

.player{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);
}

/* ---------- topic picker ---------- */
.topics{
  display:flex;gap:7px;flex-wrap:wrap;padding:14px 16px;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.topics button{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--line-2);color:var(--body);
  border-radius:999px;padding:8px 14px;font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;transition:.2s;
}
.topics button:hover{border-color:var(--navy);color:var(--ink)}
.topics button.on{
  background:var(--navy);color:#fff;border-color:var(--navy);
  box-shadow:0 5px 14px rgba(10,26,61,.22);
}
.topics .ico{font-size:14px;line-height:1}

/* ---------- stage ---------- */
.stage{display:grid;grid-template-columns:206px 1fr;background:#fff}

/* instructor panel */
.tutor{
  padding:24px 18px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  background:var(--paper-2);
}
.tutor svg{width:98px;height:98px;flex:none}
.tutor .who{color:var(--ink);font-weight:800;font-size:14px}
.tutor .role{color:var(--muted);font-size:11.5px;line-height:1.45}

/* speaking indicator */
.eq{display:flex;gap:3px;align-items:flex-end;height:16px;opacity:.25;transition:opacity .25s}
.player.speaking .eq{opacity:1}
.eq i{width:3px;height:5px;background:var(--gold-dk);border-radius:2px;display:block}
.player.speaking .eq i{animation:eqb .9s ease-in-out infinite}
.player.speaking .eq i:nth-child(2){animation-delay:.15s}
.player.speaking .eq i:nth-child(3){animation-delay:.3s}
.player.speaking .eq i:nth-child(4){animation-delay:.45s}
@keyframes eqb{0%,100%{height:4px}50%{height:16px}}

/* ---------- mock Excel ---------- */
.xl{padding:16px;min-width:0;font-size:12px}

.xl-ribbon{
  display:flex;align-items:center;gap:3px;margin-bottom:12px;
  border-bottom:1px solid var(--line);padding-bottom:10px;flex-wrap:wrap;
}
.xl-ribbon .tab{
  padding:5px 11px;border-radius:6px;color:var(--muted);font-weight:700;font-size:11.5px;
  border:1px solid transparent;transition:.25s;
}
.xl-ribbon .tab.on{background:var(--paper-3);border-color:var(--line-2);color:var(--navy)}
.xl-ribbon .pvt{
  margin-left:auto;padding:6px 12px;border-radius:7px;font-weight:800;font-size:11.5px;
  background:var(--paper-3);border:1px solid var(--line-2);color:var(--muted);transition:.25s;
}
.xl-ribbon .pvt.on{
  background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk));
  background-color:var(--gold);color:var(--navy);
  border-color:transparent;box-shadow:var(--glow);
}

.xl-grids{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;align-items:start}
.xl-grids.single{grid-template-columns:1fr}
.xl-pane{min-width:0}
.xl-side{min-width:0}
.xl-pane h4{
  margin:0 0 7px;color:var(--muted);font-size:10px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;
}

table.sheet{width:100%;border-collapse:collapse;font-size:11.5px;table-layout:fixed;background:#fff}
table.sheet th,table.sheet td{
  border:1px solid #DCE4F0;padding:5px 7px;text-align:left;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
table.sheet th{background:var(--paper-3);color:var(--navy);font-weight:700;font-size:10.5px}
table.sheet td.xl-num{text-align:right;font-variant-numeric:tabular-nums}
table.sheet tr.total td{background:rgba(240,180,41,.16);color:var(--ink);font-weight:800}
table.sheet td.total{background:rgba(240,180,41,.16);color:var(--ink);font-weight:800}

/* selected source range */
.xl-pane.selected table.sheet{outline:2px solid var(--gold-dk);outline-offset:2px}

/* Pivot cells flash as they are added.
   Only the background is animated — a `transform` on a table cell
   blockifies it and collapses the table layout. */
table.sheet td.pop,table.sheet th.pop{animation:pop .55s ease}
@keyframes pop{from{background:rgba(240,180,41,.55)}to{background:rgba(240,180,41,0)}}

.xl-empty{
  border:1px dashed var(--line-2);border-radius:9px;padding:24px 12px;
  text-align:center;color:var(--faint);font-size:11.5px;line-height:1.6;
}
.xl-filterbar{margin-bottom:6px;color:var(--muted);font-size:10.5px}
.xl-filterbar b{color:var(--gold-ink)}

/* ---------- sheet-layout extras ---------- */
.xl-fx{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:8px;padding:7px 11px;
}
.xl-fx .fxi{
  color:var(--gold-ink);font-style:italic;font-weight:800;font-size:12px;
  border-right:1px solid var(--line-2);padding-right:10px;flex:none;
}
.xl-fx code{
  color:var(--ink);font-size:11.5px;font-family:Consolas,"Courier New",monospace;
  overflow-x:auto;white-space:nowrap;
}

/* cell states */
table.sheet td.cell-good{background:#E4F6EA;color:#186A3B;font-weight:700}
table.sheet td.cell-bad{background:#FDE9E9;color:#9B2226;font-weight:700}

/* in-cell data bar */
table.sheet td.databar{position:relative;text-align:right}
table.sheet td.databar .db{
  position:absolute;left:0;top:2px;bottom:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(240,180,41,.62),rgba(240,180,41,.28));
}
table.sheet td.databar i{position:relative;font-style:normal}

/* in-cell dropdown */
table.sheet td.has-dd{position:relative;overflow:visible;background:rgba(240,180,41,.14)}
.dd-arrow{
  position:absolute;right:3px;top:50%;transform:translateY(-50%);
  background:var(--gold-dk);color:var(--navy);border-radius:3px;
  width:15px;height:15px;display:grid;place-items:center;font-size:9px;font-weight:900;
}
.dd{
  position:absolute;left:0;top:calc(100% + 2px);z-index:5;min-width:110px;
  background:#fff;border:1px solid var(--line-2);border-radius:6px;
  box-shadow:var(--shadow-lg);padding:3px;display:grid;gap:1px;
  animation:drop .35s cubic-bezier(.2,.8,.3,1) both;
}
.dd-item{padding:5px 8px;border-radius:4px;color:var(--body);font-size:11px;white-space:nowrap}
.dd-item.on{background:rgba(240,180,41,.22);color:var(--ink);font-weight:700}

/* mock Excel dialog */
.xl-dialog{
  background:#fff;border:1px solid var(--line-2);border-radius:8px;
  overflow:hidden;box-shadow:var(--shadow-lg);animation:drop .4s cubic-bezier(.2,.8,.3,1) both;
}
.dlg-bar{
  background:var(--navy);padding:8px 11px;font-size:11.5px;font-weight:800;color:#fff;
  display:flex;justify-content:space-between;align-items:center;
}
.dlg-bar span{color:#9FB2D0;font-weight:400}
.dlg-tabs{display:flex;gap:3px;padding:8px 9px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--paper-2)}
.dlg-tabs span{
  padding:5px 10px;border-radius:5px 5px 0 0;font-size:10.5px;font-weight:700;
  color:var(--muted);background:#fff;border:1px solid var(--line);border-bottom:0;
}
.dlg-tabs span.on{background:rgba(240,180,41,.20);color:var(--gold-ink);border-color:transparent}
.dlg-note{margin:9px 11px 0;color:var(--muted);font-size:10.5px}
.dlg-body{padding:11px;display:grid;gap:8px}
.dlg-row{display:flex;align-items:center;gap:8px;font-size:11.5px}
.dlg-row.muted{opacity:.45}
.dlg-row .lab{color:var(--body);min-width:82px}
.dlg-row .ctl{
  flex:1;background:#fff;border:1px solid var(--line-2);border-radius:5px;
  padding:5px 8px;color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dlg-row .ctl.select{border-color:var(--gold-dk);color:var(--gold-ink)}
.dlg-row .mark{
  width:13px;height:13px;flex:none;border:1px solid var(--gold-dk);
  background:var(--gold-dk);display:grid;place-items:center;border-radius:3px;
}
.dlg-row.radio .mark{border-radius:50%}
.dlg-row .mark:after{content:"✓";font-size:9px;color:#fff;font-weight:900;line-height:1}
.dlg-row.radio .mark:after{content:"●";font-size:7px}
.dlg-row.off .mark{background:#fff;border-color:var(--line-2)}
.dlg-row.off .mark:after{content:""}
.dlg-row .sub{color:var(--faint);font-size:10px}
.dlg-btns{display:flex;gap:7px;justify-content:flex-end;padding:0 11px 11px}
.dlg-btns span{
  padding:5px 14px;border-radius:5px;font-size:11px;font-weight:800;
  background:#fff;color:var(--body);border:1px solid var(--line-2);
}
.dlg-btns span.primary{background:var(--navy);color:#fff;border-color:var(--navy)}

/* mini chart */
.mini-chart{width:100%;max-width:520px;height:auto;display:block;margin:0 auto}
.mini-chart .ct{fill:var(--ink);font-size:13px;font-weight:700}
.mini-chart .cg{stroke:rgba(15,32,67,.10)}
.mini-chart .cl{fill:var(--muted);font-size:10px}
.mini-chart .cv{fill:var(--gold-ink);font-size:9.5px;font-weight:700}
.c-legend{display:flex;gap:14px;justify-content:center;margin-top:6px;flex-wrap:wrap}
.c-legend span{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:11px}
.c-legend i{width:10px;height:10px;border-radius:2px;display:block}

/* notes / key points panel */
.xl-notes{background:var(--paper-2);border:1px solid var(--line);border-radius:9px;padding:14px}
.xl-notes h5{
  margin:0 0 9px;color:var(--gold-ink);font-size:10px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;
}
.xl-notes ul{margin:0;padding-left:16px;color:var(--body);font-size:11.5px}
.xl-notes li{margin:6px 0;line-height:1.5}

/* ---------- field panel (pivot layout) ---------- */
.xl-fields{
  margin-top:14px;border-top:1px solid var(--line);padding-top:12px;
  display:grid;grid-template-columns:150px 1fr;gap:14px;
}
.chips{display:flex;flex-direction:column;gap:5px}
.chip{
  display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;
  background:#fff;border:1px solid var(--line-2);color:var(--body);font-size:11.5px;transition:.25s;
}
.chip .box{
  width:12px;height:12px;border-radius:3px;border:1px solid var(--line-2);
  flex:none;display:grid;place-items:center;font-size:9px;color:#fff;
}
.chip.used{border-color:var(--gold-dk);color:var(--ink);font-weight:700}
.chip.used .box{background:var(--gold-dk);border-color:var(--gold-dk)}
.chip.used .box:after{content:"✓";font-weight:900}

.zones{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.zone{
  background:var(--paper-2);border:1px dashed var(--line-2);border-radius:8px;
  padding:7px 9px;min-height:56px;transition:.25s;
}
.zone.active{border-color:var(--gold-dk);border-style:solid;background:rgba(240,180,41,.10)}
.zone b{display:block;color:var(--muted);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;margin-bottom:5px}
.zone .tag{
  display:inline-block;padding:3px 9px;border-radius:5px;font-size:11px;font-weight:700;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk));
  background-color:var(--gold);color:var(--navy);
  margin:2px 3px 0 0;animation:drop .45s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes drop{from{opacity:0;transform:translateY(-14px) scale(.9)}to{opacity:1;transform:none}}

/* ---------- caption ---------- */
.caption{
  background:var(--paper-2);border-top:1px solid var(--line);
  padding:16px 20px;min-height:78px;display:flex;align-items:center;
}
.caption p{margin:0;color:var(--ink);font-size:14.5px;line-height:1.6}
.caption .ls-step{
  color:var(--gold-ink);font-weight:800;font-size:11px;letter-spacing:1.4px;
  text-transform:uppercase;display:block;margin-bottom:4px;
}

/* ---------- controls ---------- */
.controls{
  display:flex;align-items:center;gap:12px;padding:12px 20px;
  background:#fff;border-top:1px solid var(--line);flex-wrap:wrap;
}
.ctrl{
  border:1px solid var(--line-2);background:#fff;color:var(--ink);
  border-radius:8px;padding:8px 13px;font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;transition:.2s;white-space:nowrap;
}
.ctrl:hover{border-color:var(--navy);background:var(--paper-3)}
.ctrl:disabled{opacity:.5;cursor:not-allowed}
.ctrl.main{
  background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk));
  background-color:var(--gold);color:var(--navy);
  border-color:transparent;min-width:96px;box-shadow:var(--glow);
}
.ctrl.main:hover{box-shadow:0 12px 26px rgba(240,180,41,.40)}
.track{flex:1;min-width:120px;height:6px;border-radius:3px;background:var(--paper-3);overflow:hidden}
.track .bar{
  height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold));
  transition:width .25s linear;
}
.tcount{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- language picker ---------- */
.lang{display:flex;align-items:center;gap:7px;white-space:nowrap}
.lang label{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.lang select{
  background:#fff;color:var(--ink);border:1px solid var(--line-2);
  border-radius:8px;padding:8px 10px;font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;transition:.2s;
}
.lang select:hover{border-color:var(--navy)}
.lang select:focus{outline:none;border-color:var(--gold-dk);box-shadow:0 0 0 3px rgba(240,180,41,.22)}

/* shown when the chosen language has no voice on this device */
.voice-hint{
  margin:0;padding:11px 20px;background:rgba(240,180,41,.14);
  border-top:1px solid rgba(240,180,41,.45);color:var(--gold-ink);
  font-size:12.5px;line-height:1.5;font-weight:600;
}
.voice-hint[hidden]{display:none}

/* Devanagari needs a little more line height to breathe */
.player[data-lang="hi"] .caption p{line-height:1.75}
.player[data-lang="hi"] .chapters button{line-height:1.55}

/* ---------- chapter list ---------- */
.chapters{
  list-style:none;margin:0;padding:12px 14px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:6px;
  background:var(--paper-2);border-top:1px solid var(--line);
}
.chapters li{margin:0}
.chapters button{
  width:100%;text-align:left;border:1px solid transparent;background:none;
  color:var(--muted);font:inherit;font-size:12px;padding:8px 10px;border-radius:7px;
  cursor:pointer;transition:.2s;display:flex;gap:8px;align-items:baseline;
}
.chapters button:hover{background:#fff;color:var(--ink)}
.chapters button.on{background:#fff;border-color:var(--gold-dk);color:var(--ink);font-weight:700}
.chapters button i{font-style:normal;font-weight:800;font-size:10.5px;opacity:.7;flex:none}

.lesson-note{margin-top:14px;color:var(--muted);font-size:12.5px;text-align:center}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .stage{grid-template-columns:1fr}
  .tutor{
    flex-direction:row;text-align:left;border-right:0;
    border-bottom:1px solid var(--line);gap:14px;padding:14px 16px;
  }
  .tutor svg{width:54px;height:54px}
  .tutor .txt{flex:1}
  .xl-grids{grid-template-columns:1fr}
  .xl-fields{grid-template-columns:1fr}
}
@media(max-width:560px){
  .zones{grid-template-columns:1fr}
  .chapters{grid-template-columns:1fr}
  .caption p{font-size:13.5px}
}

@media(prefers-reduced-motion:reduce){
  .eq i,table.sheet td.pop,table.sheet th.pop,.zone .tag,.dd,.xl-dialog{animation:none!important}
  .track .bar{transition:none}
}