/* Tabellab lab UI (lab.css) – grid + "Tabellab Coach" panel.
   Relies on the design tokens from style.css (:root) and falls back to the
   same values when used standalone (lab-demo.html). */

.tl-lab {
  --tl-bg: var(--bg, #fbfaf7);
  --tl-surface: var(--surface, #ffffff);
  --tl-ink: var(--ink, #24303a);
  --tl-muted: var(--muted, #6b7780);
  --tl-line: var(--line, #e7e3dc);
  --tl-line-soft: #efece6;
  --tl-mint: var(--mint, #cdeee0);
  --tl-mint-ink: var(--mint-ink, #1f7a57);
  --tl-sky: var(--sky, #d6e9fb);
  --tl-sky-ink: var(--sky-ink, #2563a6);
  --tl-lav: var(--lav, #e6e0fa);
  --tl-lav-ink: var(--lav-ink, #5b4bb4);
  --tl-peach: var(--peach, #fde3d3);
  --tl-peach-ink: var(--peach-ink, #b5532a);
  --tl-butter: var(--butter, #fff4c7);
  --tl-butter-line: #f1df94;
  --tl-rose: var(--rose, #fbdde3);
  --tl-rose-ink: #b23a55;
  --tl-radius: var(--radius, 14px);
  --tl-shadow: var(--shadow, 0 1px 2px rgba(36, 48, 58, .06), 0 6px 24px rgba(36, 48, 58, .06));
  --tl-font: var(--font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --tl-mono: var(--mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --tl-row-h: 30px;
  --tl-rh-w: 46px;
  /* tall enough for the sheet, short enough that Check/Hint stay above the fold under the lesson header (1440×900) */
  --tl-h: clamp(520px, calc(100vh - 260px), 880px);

  font-family: var(--tl-font);
  color: var(--tl-ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
.tl-lab *, .tl-lab *::before, .tl-lab *::after { box-sizing: border-box; }
.tl-lab svg { width: 1.15em; height: 1.15em; flex: none; }
.tl-lab button { font: inherit; color: inherit; }
.tl-lab :focus-visible { outline: 2px solid var(--tl-sky-ink); outline-offset: 2px; }

/* ---------------------------------------------------------------- layout */
.tl-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 392px);
  gap: 18px;
  height: var(--tl-h);
}
.tl-pane {
  background: var(--tl-surface);
  border: 1px solid var(--tl-line);
  border-radius: var(--tl-radius);
  box-shadow: var(--tl-shadow);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.tl-tabs { display: none; }

/* ---------------------------------------------------------------- formula bar */
.tl-fbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--tl-line);
  background: linear-gradient(#fff, #fdfcfa);
}
.tl-namebox {
  width: 84px; flex: none;
  height: 34px; padding: 0 10px;
  border: 1px solid var(--tl-line); border-radius: 9px;
  font: 600 13px/1 var(--tl-mono); color: var(--tl-ink); text-align: center;
  background: var(--tl-bg);
}
.tl-namebox:focus { outline: none; border-color: var(--tl-sky-ink); box-shadow: 0 0 0 3px var(--tl-sky); background: #fff; }
.tl-fx { color: var(--tl-muted); font: italic 600 14px/1 Georgia, "Times New Roman", serif; padding: 0 2px; user-select: none; }
.tl-fx sub { font-size: 9px; font-style: normal; }
.tl-formula {
  flex: 1; min-width: 0; height: 34px; padding: 0 12px;
  border: 1px solid var(--tl-line); border-radius: 9px;
  font: 13.5px/1 var(--tl-mono); color: var(--tl-ink); background: #fff;
}
.tl-formula:focus { outline: none; border-color: var(--tl-sky-ink); box-shadow: 0 0 0 3px var(--tl-sky); }
.tl-formula.is-ro { background: var(--tl-bg); color: var(--tl-muted); }
.tl-tools { display: flex; gap: 2px; }
.tl-icon-btn {
  width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--tl-muted);
  display: inline-grid; place-items: center; cursor: pointer;
}
.tl-icon-btn:hover:not(:disabled) { background: var(--tl-bg); color: var(--tl-ink); }
.tl-icon-btn:disabled { opacity: .35; cursor: default; }

/* ---------------------------------------------------------------- grid */
.tl-scroll {
  position: relative; flex: 1; min-height: 0; overflow: auto;
  background: #fff; outline: none;
  overscroll-behavior: contain;
}
.tl-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--tl-sky); }
.tl-grid {
  border-collapse: separate; border-spacing: 0;
  table-layout: fixed;
  font-size: 13px; font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none;
}
.tl-grid th {
  position: sticky; z-index: 3;
  background: #f7f6f2; color: var(--tl-muted);
  font-weight: 600; font-size: 11.5px; letter-spacing: .02em;
  border-right: 1px solid var(--tl-line-soft); border-bottom: 1px solid var(--tl-line);
  height: 26px; padding: 0; text-align: center; cursor: default;
}
.tl-grid thead th { top: 0; }
.tl-grid .tl-rh { left: 0; z-index: 2; height: var(--tl-row-h); border-right: 1px solid var(--tl-line); border-bottom: 1px solid var(--tl-line-soft); }
.tl-grid .tl-corner { left: 0; z-index: 4; background: #f1efea; cursor: pointer; }
.tl-grid th.is-hl { background: var(--tl-sky); color: var(--tl-sky-ink); }

.tl-c {
  height: var(--tl-row-h); padding: 0 8px;
  border-right: 1px solid var(--tl-line-soft); border-bottom: 1px solid var(--tl-line-soft);
  white-space: nowrap; overflow: hidden; text-overflow: clip;
  vertical-align: middle; cursor: cell; position: relative;
  background: transparent;
}
.tl-c .tl-v { display: block; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tl-c.is-ovf { overflow: visible; z-index: 1; }
.tl-c.is-ovf .tl-v { overflow: visible; }
.tl-c.is-num { text-align: right; }
.tl-c.is-bool { text-align: center; }
.tl-c.is-err { color: var(--tl-rose-ink); text-align: center; font-weight: 600; }
.tl-c.is-ro { color: var(--tl-ink); }
.tl-c.is-ro.is-formula { color: #1d2a33; }

/* editable cells – butter yellow */
.tl-c.is-edit { background: var(--tl-butter); box-shadow: inset 0 0 0 1px var(--tl-butter-line); }
.tl-c.is-edit:hover { background: #fff0b0; }

/* content styles */
/* Frozen column A on wide sheets (see lab.js freezeA). Low specificity bg so cell styles (head/input/ok/bad) still win. */
.tl-fz { background-color: #fff; }
.tl-grid.tl-freeze .tl-c.tl-fz { position: sticky; z-index: 2; box-shadow: 1px 0 0 var(--tl-line); }
.tl-grid.tl-freeze thead th.tl-fz { z-index: 4; box-shadow: 1px 0 0 var(--tl-line); }
.tl-c.tl-s-head { background: var(--tl-sky); color: #1f3b57; font-weight: 650; border-bottom-color: #c3dcf4; }
.tl-c.tl-s-head.is-edit { background: var(--tl-butter); }
.tl-c.tl-s-total { font-weight: 700; border-top: 2px solid #9fb0bd; }
.tl-c.tl-s-note { color: var(--tl-muted); font-size: 12px; }
.tl-c.tl-s-muted { color: var(--tl-muted); }
.tl-c.tl-s-bold { font-weight: 650; }
.tl-c.tl-s-sub { padding-left: 22px; }
.tl-c.tl-s-center { text-align: center; }
.tl-c.tl-s-right { text-align: right; }
.tl-c.tl-s-key { background: var(--tl-lav); color: #2f2466; font-weight: 600; }
.tl-c.tl-s-good { color: var(--tl-mint-ink); }
.tl-c.tl-s-bad { color: var(--tl-rose-ink); }
.tl-c.tl-s-wrap { white-space: normal; line-height: 1.25; }
.tl-c.tl-s-wrap .tl-v { white-space: normal; }

/* task target, grading marks */
.tl-c.is-target { box-shadow: inset 0 0 0 2px #b9aef0, inset 0 0 0 3px #fff8d6; }
.tl-c.is-ok { background: var(--tl-mint) !important; box-shadow: inset 0 0 0 1.5px #86cfae; color: #12503a; }
.tl-c.is-bad { background: var(--tl-rose) !important; box-shadow: inset 0 0 0 1.5px #eba5b5; }

/* selection */
.tl-c.is-sel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(37, 99, 166, .08);
}
.tl-c.is-sel-t::after { border-top: 2px solid var(--tl-sky-ink); }
.tl-c.is-sel-b::after { border-bottom: 2px solid var(--tl-sky-ink); }
.tl-c.is-sel-l::after { border-left: 2px solid var(--tl-sky-ink); }
.tl-c.is-sel-r::after { border-right: 2px solid var(--tl-sky-ink); }
.tl-c.is-active::after { background: transparent; border: 2px solid var(--tl-sky-ink); }
.tl-c.is-active { z-index: 2; }
.tl-lab.is-copied .tl-c.is-sel::after { border-style: dashed; animation: tl-ants .6s linear; }
@keyframes tl-ants { 50% { border-color: var(--tl-lav-ink); } }

/* fill handle (bottom-right of the selection): drag to copy down/right */
.tl-fillh {
  position: absolute; display: none; z-index: 4; width: 8px; height: 8px;
  background: var(--tl-sky-ink); border: 1.5px solid #fff; border-radius: 1px; cursor: crosshair;
}
.tl-fillh.is-on { display: block; }
.tl-lab.is-editing .tl-fillh { display: none; }
.tl-lab.is-filling .tl-c.is-sel::after { border-style: dashed; }
.tl-lab.is-filling .tl-scroll, .tl-lab.is-filling .tl-c { cursor: crosshair; }
@media (pointer: coarse) { .tl-fillh { display: none !important; } }

/* references highlighted while typing a formula */
.tl-c.is-ref::before { content: ""; position: absolute; inset: 1px; pointer-events: none; border: 1.5px dashed; border-radius: 2px; }
.tl-c.is-ref-1::before { border-color: #5b4bb4; background: rgba(91, 75, 180, .07); }
.tl-c.is-ref-2::before { border-color: #1f7a57; background: rgba(31, 122, 87, .07); }
.tl-c.is-ref-3::before { border-color: #b5532a; background: rgba(181, 83, 42, .07); }
.tl-c.is-ref-4::before { border-color: #2563a6; background: rgba(37, 99, 166, .07); }

/* in-cell editor */
.tl-editor {
  position: absolute; display: none; z-index: 5;
  margin: 0; padding: 0 7px; border: 2px solid var(--tl-sky-ink); border-radius: 2px;
  font: 13px/1 var(--tl-font); font-variant-numeric: tabular-nums;
  color: var(--tl-ink); background: #fff;
  box-shadow: 0 6px 18px rgba(37, 99, 166, .18);
  outline: none;
}
.tl-editor.is-on { display: block; }
/* idle: invisible input on the active cell that receives typing / IME / paste */
.tl-editor.is-idle { display: block; opacity: 0; pointer-events: none; caret-color: transparent; box-shadow: none; z-index: 0; }
.tl-preview {
  position: absolute; display: none; z-index: 6;
  padding: 5px 9px; border-radius: 8px;
  background: var(--tl-ink); color: #fff; font: 12px/1.3 var(--tl-mono);
  box-shadow: 0 6px 18px rgba(36, 48, 58, .2); pointer-events: none; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis;
}
.tl-preview span { opacity: .6; font-family: var(--tl-font); margin-right: 4px; }
.tl-preview.is-on { display: block; }
.tl-preview.is-err { background: #8f2f45; }

/* status bar */
.tl-status {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; border-top: 1px solid var(--tl-line);
  font-size: 12px; color: var(--tl-muted); background: #fdfcfa; min-height: 36px;
}
.tl-status__legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.tl-swatch:first-child { margin-left: 0; }
.tl-swatch--input { background: var(--tl-butter); box-shadow: inset 0 0 0 1px var(--tl-butter-line); }
.tl-swatch--given { background: #fff; box-shadow: inset 0 0 0 1px var(--tl-line); }
.tl-demo-badge { margin-left: 10px; padding: 2px 8px; border-radius: 99px; background: var(--tl-lav); color: var(--tl-lav-ink); font-weight: 600; }
.tl-status__stats { display: flex; gap: 14px; white-space: nowrap; }
.tl-status__stats b { color: var(--tl-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.tl-taskbar { display: none; }
.tl-toast {
  position: absolute; left: 50%; bottom: 52px; transform: translate(-50%, 8px);
  max-width: calc(100% - 32px); padding: 9px 14px; border-radius: 10px;
  background: var(--tl-ink); color: #fff; font-size: 13px; box-shadow: var(--tl-shadow);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 10;
}
.tl-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- coach */
.tl-coach__head {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--tl-line);
  background: linear-gradient(135deg, #f6f3ff 0%, #f1f8ff 55%, #f5fbf7 100%);
}
.tl-avatar {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(140deg, #8b7cf0, #5aa5e6 60%, #5fc79c); color: #fff;
  box-shadow: 0 4px 14px rgba(91, 75, 180, .28);
}
.tl-avatar svg { width: 22px; height: 22px; }
.tl-coach__who { display: flex; flex-direction: column; line-height: 1.2; }
.tl-coach__who strong { font-size: 15px; letter-spacing: -.01em; }
.tl-coach__who span { color: var(--tl-muted); font-size: 12.5px; }
.tl-progress__wrap { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.tl-progress { flex: 1; height: 7px; border-radius: 99px; background: rgba(36, 48, 58, .08); overflow: hidden; }
.tl-progress__fill { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #7fd3ad, #1f9a6c); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.tl-progress__text { font-size: 12px; font-weight: 600; color: var(--tl-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.tl-accounts { border-bottom: 1px solid var(--tl-line); background: #fdfcfa; }
.tl-accounts summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 13px; user-select: none;
}
.tl-accounts summary::-webkit-details-marker { display: none; }
.tl-accounts summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.6px solid var(--tl-muted); border-bottom: 1.6px solid var(--tl-muted); transform: rotate(45deg); transition: transform .2s; }
.tl-accounts[open] summary::after { transform: rotate(-135deg); }
.tl-accounts summary em { font-style: normal; font-size: 11.5px; color: var(--tl-lav-ink); background: var(--tl-lav); border-radius: 99px; padding: 1px 8px; }
.tl-accounts__list { list-style: none; margin: 0; padding: 0 10px 10px; max-height: 210px; overflow: auto; display: grid; gap: 2px; }
.tl-acct {
  width: 100%; display: flex; gap: 10px; align-items: baseline; text-align: left;
  border: 0; background: transparent; padding: 5px 8px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.tl-acct:hover { background: var(--tl-lav); }
.tl-acct b { font: 600 12.5px/1.3 var(--tl-mono); color: var(--tl-lav-ink); min-width: 42px; }

.tl-chat {
  flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px 18px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--tl-bg);
}
.tl-chat > * { flex-shrink: 0; }
.tl-msg {
  max-width: 94%; padding: 10px 13px; border-radius: 14px 14px 14px 5px;
  background: var(--tl-surface); border: 1px solid var(--tl-line);
  box-shadow: 0 1px 2px rgba(36, 48, 58, .04);
  font-size: 13.8px; line-height: 1.5;
  animation: tl-in .28s cubic-bezier(.2, .8, .2, 1) both;
  overflow-wrap: anywhere;
}
.tl-msg p { margin: 0; }
.tl-msg p + p { margin-top: 6px; }
.tl-msg code, .tl-task code { font: 12.5px/1.4 var(--tl-mono); background: #f2f0ec; padding: 1px 5px; border-radius: 5px; }
.tl-msg strong { font-weight: 650; }
@keyframes tl-in { from { opacity: 0; transform: translateY(6px); } }
.tl-msg--goal { border-color: #d9d1fa; background: #faf8ff; }
.tl-msg--tip { background: #f6fbff; border-color: #d3e5f7; }
.tl-msg--me {
  align-self: flex-end; border-radius: 14px 14px 5px 14px;
  background: var(--tl-sky); border-color: #c5dcf3; color: #1f3b57; font-weight: 550; font-size: 13px; padding: 7px 12px;
}
.tl-typing { display: inline-flex; gap: 4px; align-items: center; width: auto; padding: 12px 14px; }
.tl-typing span { width: 6px; height: 6px; border-radius: 50%; background: #b7bfc5; animation: tl-dot 1s infinite ease-in-out; }
.tl-typing span:nth-child(2) { animation-delay: .15s; } .tl-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes tl-dot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.tl-theory summary { cursor: pointer; display: flex; gap: 8px; align-items: center; font-weight: 600; list-style: none; }
.tl-theory summary::-webkit-details-marker { display: none; }
.tl-theory[open] summary { margin-bottom: 6px; }
.tl-theory p + p { margin-top: 8px; }

/* task card */
.tl-task {
  width: 100%; max-width: 100%; border-radius: 14px; padding: 12px 14px 12px;
  border: 1px solid #d9d1fa; background: #fff; cursor: pointer;
  box-shadow: 0 1px 2px rgba(36, 48, 58, .04), 0 4px 14px rgba(91, 75, 180, .06);
  transition: border-color .2s, box-shadow .2s;
}
.tl-task.is-active { border-color: #a79bf0; box-shadow: 0 0 0 3px rgba(167, 155, 240, .2), 0 4px 14px rgba(91, 75, 180, .08); }
.tl-task.is-compact .tl-task__text { color: var(--tl-muted); }
.tl-task__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tl-task__num { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tl-lav-ink); }
.tl-task__text { margin: 0; }
.tl-task__go {
  margin-top: 9px; display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: var(--tl-lav); color: var(--tl-lav-ink); font-weight: 600; font-size: 12.5px;
  padding: 5px 10px; border-radius: 99px; cursor: pointer;
}
.tl-task__go:hover { background: #dcd3fa; }
.tl-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 99px;
}
.tl-chip svg { width: 13px; height: 13px; }
.tl-chip--open { background: #f2f0ec; color: var(--tl-muted); }
.tl-chip--ok { background: var(--tl-mint); color: var(--tl-mint-ink); }
.tl-chip--bad { background: var(--tl-rose); color: var(--tl-rose-ink); }

/* feedback */
.tl-fb { display: flex; gap: 10px; align-items: flex-start; }
.tl-fb__icon { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; margin-top: -1px; }
.tl-fb__icon svg { width: 15px; height: 15px; }
.tl-msg--ok { background: #effaf5; border-color: #bfe6d3; }
.tl-msg--ok .tl-fb__icon { background: var(--tl-mint-ink); color: #fff; }
.tl-msg--bad { background: #fff5f7; border-color: #f3cdd6; }
.tl-msg--bad .tl-fb__icon { background: #d9587a; color: #fff; }
.tl-msg--hint { background: #fffbea; border-color: #f1e3a6; }
.tl-msg--hint .tl-fb__icon { background: #e9b949; color: #fff; }

.tl-msg--solution { border-color: #d9d1fa; background: #fbfaff; width: 94%; }
.tl-sol__label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--tl-lav-ink); margin-bottom: 8px; }
.tl-sol__code { display: block; font: 13px/1.5 var(--tl-mono); background: #fff; border: 1px solid #e3ddfa; border-radius: 9px; padding: 8px 10px; margin-bottom: 8px; white-space: pre-wrap; word-break: break-all; }
.tl-sol__label--sub { margin-top: 6px; opacity: .8; font-size: 10.5px; }
.tl-sol__ref { margin-top: 10px; font-size: 12.5px; color: var(--tl-muted); }
.tl-sol__ref summary { cursor: pointer; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tl-lav-ink); opacity: .8; }
.tl-sol__ref p { margin: 6px 0; }
.tl-sol__ref .tl-sol__code { font-size: 12px; }
.tl-sol__journal { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 8px; background: #fff; border-radius: 9px; overflow: hidden; }
.tl-sol__journal th, .tl-sol__journal td { padding: 5px 8px; border-bottom: 1px solid #eee9fb; text-align: left; }
.tl-sol__journal th { background: #f4f1fe; color: var(--tl-lav-ink); font-weight: 650; }
.tl-sol__journal td:last-child, .tl-sol__journal th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* celebration */
.tl-msg--done {
  position: relative; overflow: hidden; width: 100%; max-width: 100%; text-align: center; padding: 22px 16px 18px;
  background: linear-gradient(160deg, #effaf5, #f3f0ff 70%); border-color: #bfe6d3; border-radius: 16px;
}
.tl-done__badge {
  width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, #5fc79c, #1f9a6c); color: #fff; box-shadow: 0 8px 22px rgba(31, 122, 87, .3);
  animation: tl-pop .5s cubic-bezier(.2, 1.4, .4, 1) both .1s;
}
.tl-done__badge svg { width: 28px; height: 28px; }
.tl-msg--done p { margin-bottom: 12px; }
@keyframes tl-pop { from { transform: scale(.4); opacity: 0; } }
.tl-confetti { position: absolute; inset: 0; pointer-events: none; }
.tl-confetti i { position: absolute; top: -10px; width: 7px; height: 11px; border-radius: 2px; opacity: 0; animation: tl-fall 2.4s ease-in forwards; }
.tl-confetti i:nth-child(4n+1) { background: #8b7cf0; } .tl-confetti i:nth-child(4n+2) { background: #5fc79c; }
.tl-confetti i:nth-child(4n+3) { background: #f4b183; } .tl-confetti i:nth-child(4n) { background: #6fb1ea; }
.tl-confetti i:nth-child(1) { left: 6%; animation-delay: .05s; } .tl-confetti i:nth-child(2) { left: 14%; animation-delay: .3s; }
.tl-confetti i:nth-child(3) { left: 22%; animation-delay: .15s; } .tl-confetti i:nth-child(4) { left: 31%; animation-delay: .45s; }
.tl-confetti i:nth-child(5) { left: 39%; animation-delay: .1s; } .tl-confetti i:nth-child(6) { left: 47%; animation-delay: .35s; }
.tl-confetti i:nth-child(7) { left: 55%; animation-delay: .2s; } .tl-confetti i:nth-child(8) { left: 63%; animation-delay: .5s; }
.tl-confetti i:nth-child(9) { left: 71%; animation-delay: .05s; } .tl-confetti i:nth-child(10) { left: 79%; animation-delay: .4s; }
.tl-confetti i:nth-child(11) { left: 87%; animation-delay: .25s; } .tl-confetti i:nth-child(12) { left: 94%; animation-delay: .12s; }
.tl-confetti i:nth-child(13) { left: 50%; animation-delay: .6s; }
@keyframes tl-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(190px) rotate(320deg); } }

/* action footer */
.tl-actions {
  border-top: 1px solid var(--tl-line); padding: 10px 14px 12px; background: #fff;
  display: flex; flex-direction: column; gap: 8px;
}
.tl-actions__label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tl-muted); font-weight: 600; }
.tl-actions__label em { font-style: normal; font: 600 11.5px/1 var(--tl-mono); color: var(--tl-lav-ink); background: var(--tl-lav); padding: 3px 7px; border-radius: 6px; }
.tl-actions__btns { display: grid; grid-template-columns: 1.25fr 1fr 1.35fr; gap: 8px; }
.tl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 14px; border-radius: 11px; border: 1px solid transparent;
  font-weight: 650; font-size: 13.5px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
}
.tl-btn:active:not(:disabled) { transform: translateY(1px); }
.tl-btn:disabled { opacity: .45; cursor: not-allowed; }
.tl-btn--primary { background: var(--tl-ink); color: #fff !important; box-shadow: 0 2px 8px rgba(36, 48, 58, .18); }
.tl-btn--primary:hover:not(:disabled) { background: #1a242c; }
.tl-btn--ghost { background: #fff; border-color: var(--tl-line); color: var(--tl-ink); }
.tl-btn--ghost:hover:not(:disabled) { background: var(--tl-bg); border-color: #d9d4cb; }
.tl-btn--soft { background: var(--tl-lav); color: var(--tl-lav-ink); }
.tl-btn--soft:hover:not(:disabled) { background: #dcd3fa; }
.tl-btn--sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 9px; }
.tl-btn.is-busy svg { animation: tl-spin .8s linear infinite; }
@keyframes tl-spin { to { transform: rotate(360deg); } }
.tl-msg--done .tl-btn { margin-top: 2px; }
.tl-error { padding: 18px; border-radius: var(--tl-radius); background: var(--tl-rose); color: var(--tl-rose-ink); }

/* ---------------------------------------------------------------- mobile: tabs */
@media (max-width: 819.98px) {
  .tl-lab { --tl-h: calc(100dvh - 120px); --tl-row-h: 34px; }
  .tl-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 10px;
    background: #f1efea; border-radius: 12px;
  }
  .tl-tab {
    position: relative; height: 38px; border: 0; border-radius: 9px; background: transparent;
    font-weight: 650; color: var(--tl-muted); cursor: pointer;
  }
  .tl-tab[aria-selected="true"] { background: #fff; color: var(--tl-ink); box-shadow: 0 1px 3px rgba(36, 48, 58, .1); }
  .tl-tab__dot { position: absolute; top: 9px; margin-left: 6px; width: 8px; height: 8px; border-radius: 50%; background: #d9587a; }
  .tl-main { display: block; height: var(--tl-h); min-height: 460px; }
  .tl-pane { height: 100%; }
  .tl-lab[data-view="sheet"] .tl-pane--coach, .tl-lab[data-view="coach"] .tl-pane--sheet { display: none; }
  .tl-fbar { padding: 8px; gap: 6px; }
  .tl-namebox { width: 62px; }
  .tl-tools .tl-icon-btn:last-child { display: none; }
  .tl-status { display: none; }
  .tl-taskbar {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--tl-line); background: #fff;
  }
  .tl-taskbar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; }
  .tl-taskbar__text b { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tl-lav-ink); }
  .tl-taskbar__text span { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tl-ink); }
  .tl-actions__btns { grid-template-columns: 1fr 1fr; }
  .tl-actions__btns .tl-btn--primary { grid-column: 1 / -1; }
  .tl-c { padding: 0 7px; }
  .tl-toast { bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-lab *, .tl-lab *::before, .tl-lab *::after { animation: none !important; transition: none !important; }
}
@media print {
  .tl-pane--coach, .tl-tabs, .tl-fbar, .tl-status, .tl-taskbar { display: none !important; }
  .tl-main { display: block; height: auto; }
  .tl-scroll { overflow: visible; }
}