/* ───────────── ATLAS ───────────── */
.atlas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); gap: 18px; align-items: start; }
.atlas-stage-card { position: sticky; top: calc(var(--topbar-h) + 14px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.atlas-stage-card:fullscreen { border-radius: 0; height: 100vh; }
.atlas-stage-card:fullscreen .atlas-stage { flex: 1; height: auto; }
.atlas-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.atlas-toolbar .seg button { padding: 6px 10px; }
.atlas-stage { position: relative; height: min(72vh, 820px); min-height: 460px; background: var(--stage); }
.atlas-viewer { position: absolute; inset: 0; }
.atlas-viewer .viewer { border-radius: 0; }
.atlas-rail { position: absolute; right: 12px; top: 12px; z-index: 5; display: grid; gap: 6px; }
.rail-btn { display: grid; justify-items: center; gap: 2px; width: 56px; padding: 7px 2px 6px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); color: var(--ink-2); font-size: 10px; font-weight: 700; box-shadow: var(--shadow-sm); transition: color .2s, background .2s, border-color .2s; }
.rail-btn .i { width: 17px; height: 17px; }
.rail-btn:hover { color: var(--brand); border-color: var(--brand-3); }
.rail-btn.on { background: var(--brand); color: #fff; border-color: transparent; }
.atlas-legend { position: absolute; left: 12px; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; max-width: calc(100% - 90px); padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 12px; color: var(--ink-2); }
.atlas-legend b { color: var(--ink); width: 100%; font-size: 12.5px; }
.atlas-legend span { display: inline-flex; align-items: center; gap: 4px; }
.heat-scale i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin: 0 2px 0 6px; }
.atlas-hint { position: absolute; left: 12px; top: 12px; z-index: 4; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 90px); font-size: 11px; color: var(--ink-3); background: color-mix(in srgb, var(--surface) 75%, transparent); padding: 5px 9px; border-radius: 9px; }
.atlas-hint .i { width: 14px; height: 14px; }
.atlas-jump { display: none; }
@media (max-width: 1100px) {
  .atlas-hint { display: none; }
  .atlas-jump:not([hidden]) { position: absolute; left: 10px; top: 10px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 84px); padding: 9px 14px; border: 0; border-radius: 999px; background: var(--side-bg); color: #fff; font-weight: 700; font-size: 13px; box-shadow: var(--shadow-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .atlas-jump .i { width: 16px; height: 16px; flex: none; color: #ffb18d; }
  .atlas-jump span { overflow: hidden; text-overflow: ellipsis; }
}
.atlas-controls { display: grid; grid-template-columns: minmax(150px, .9fr) minmax(230px, 1.2fr) minmax(250px, 1.4fr); gap: 14px; padding: 12px 14px; border-top: 1px solid var(--line); }
.ctrl { display: grid; gap: 6px; align-content: start; font-size: 12px; min-width: 0; }
.ctrl > label > span, .ctrl-title { display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--ink-2); }
.ctrl > label { display: grid; gap: 6px; }
.ctrl > label > span b { margin-left: auto; font-weight: 700; color: var(--brand); white-space: nowrap; font-size: 11.5px; }
.ctrl .seg { flex-wrap: nowrap; }
.ctrl .i { width: 15px; height: 15px; color: var(--brand); }
.ctrl .seg.sm button { padding: 5px 8px; font-size: 11.5px; }
.ctrl .btn.sm { min-height: 28px; padding: 0 9px; font-size: 11.5px; }
.ctrl .btn em { font-style: normal; color: var(--brand); }
.ghost-row { display: grid; gap: 2px; }
.region-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; }
.region-chips .chip { cursor: pointer; border: 1px solid var(--line); background: var(--surface-2); }
.atlas-panel { padding: 0; max-height: calc(100vh - var(--topbar-h) - 28px); overflow-y: auto; position: sticky; top: calc(var(--topbar-h) + 14px); scrollbar-width: thin; }
.atlas-panel-inner { padding: 20px; display: grid; gap: 16px; }
.panel-intro { display: grid; gap: 6px; }
.panel-intro .link { margin-bottom: 4px; }
.explore-meter { display: grid; gap: 6px; margin-top: 6px; }
.mode-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mode-card { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: left; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.mode-card .i { grid-row: span 2; color: var(--brand); width: 20px; height: 20px; }
.mode-card small { color: var(--ink-3); font-size: 11px; }
.mode-card:hover { border-color: var(--brand-3); }
.mode-card.on { background: var(--brand-soft); border-color: var(--brand-2); }
.panel-block { display: grid; gap: 10px; }
.panel-block h3 { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.panel-block h3 .i { width: 15px; height: 15px; color: var(--brand); }
.group-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.group-tile { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, transform .2s, box-shadow .2s; overflow: hidden; }
.group-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gc); }
.group-tile:hover { border-color: var(--gc); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.group-tile span { display: grid; min-width: 0; }
.group-tile b { font-size: 13.5px; }
.group-tile small { color: var(--ink-3); font-size: 11px; }
.group-tile .thumb.mini { width: 46px; height: 46px; }
.focus-ic { position: absolute; right: 8px; top: 8px; width: 14px; height: 14px; color: var(--brand); }
.cam-chip { padding: 0 4px 0 10px; gap: 2px; }
.cam-chip button { border: 0; background: none; font-weight: 700; color: inherit; padding: 4px 0; }
.cam-chip .x { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.cam-chip .x:hover { background: var(--bad-soft); color: var(--bad); }
.cam-chip .x .i { width: 12px; height: 12px; }
.group-hero, .struct-hero { display: grid; gap: 8px; }
.group-hero h2, .struct-hero h2 { display: flex; align-items: center; gap: 10px; font-size: 26px; }
.group-hero h2 .gdot { width: 14px; height: 14px; }
.names { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.latin { font-style: italic; color: var(--brand); font-weight: 600; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; }
.g-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.g-metrics div { padding: 9px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.g-metrics small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.g-metrics b { font-size: 13.5px; }
.unit-list { display: grid; gap: 8px; }
.unit-row { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.unit-row.on { border-color: var(--brand-3); box-shadow: var(--shadow-sm); }
.unit-head { display: flex; align-items: center; gap: 10px; padding: 11px 13px; }
.unit-head:hover { background: var(--surface-2); }
.unit-name { flex: 1; display: grid; min-width: 0; }
.unit-name small { color: var(--ink-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-count { font-size: 11px; font-weight: 800; color: var(--ink-3); background: var(--surface-3); border-radius: 99px; padding: 2px 8px; }
.unit-body { display: grid; gap: 12px; padding: 4px 13px 13px; border-top: 1px dashed var(--line); }
.struct-list { display: grid; gap: 4px; }
.struct-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; }
.struct-item small { color: var(--ink-3); flex: none; }
.struct-item:hover { background: var(--brand-soft); color: var(--brand-ink); }
.struct-item.seen span::before { content: '✓ '; color: var(--ok); }
.kvs.compact .kv { padding: 6px 0; grid-template-columns: 90px 1fr; font-size: 12.5px; }
.facts .kv dd .link { margin-left: 6px; font-size: 12px; }
.struct-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.struct-tools .btn.on { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-3); }
.mini-title { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.mini-ex-list { display: grid; gap: 6px; }
.mini-ex { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, background .2s; }
.mini-ex:hover { border-color: var(--brand-3); background: var(--surface-2); }
.mini-ex span { flex: 1; display: grid; min-width: 0; }
.mini-ex b { font-size: 13px; }
.mini-ex small { color: var(--ink-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-ex > .i { color: var(--ink-3); width: 15px; }
.mini-ex .thumb.mini { width: 48px; height: 48px; }
.action-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.action-item { display: grid; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 700; }
.action-item small { color: var(--ink-3); font-weight: 600; font-size: 11px; }
.action-item:hover { border-color: var(--brand-3); }
.action-item.on { background: var(--brand); color: #fff; border-color: transparent; }
.action-item.on small { color: #ffd8cc; }
.action-detail { display: grid; gap: 10px; }
.role-list { display: grid; gap: 8px; font-size: 12.5px; }
.antag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); font-weight: 700; font-size: 13px; }
.antag .i { width: 14px; height: 14px; color: var(--brand); }
.antag small { width: 100%; font-weight: 500; color: var(--ink-3); }
.antag a:hover { color: var(--brand); }
.filter-chips .chip { border: 1px solid var(--line); }
.atlas-panel .tabs { flex-wrap: wrap; gap: 0 2px; }
.atlas-panel .tabs a { padding: 9px 10px; font-size: 12.5px; }
.prose { display: grid; gap: 8px; color: var(--ink-2); }
.prose h4 { font-size: 13px; color: var(--ink); margin-top: 6px; }
.prose p { line-height: 1.65; }
.tick-list, .x-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tick-list li, .x-list li { position: relative; padding-left: 24px; font-size: 13px; color: var(--ink-2); }
.tick-list li::before { content: '✓'; position: absolute; left: 4px; color: var(--ok); font-weight: 800; }
.x-list li::before { content: '×'; position: absolute; left: 5px; color: var(--bad); font-weight: 800; font-size: 16px; line-height: 1.1; }
.mine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mine-card { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.mine-card small { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mine-card b { font: 800 18px/1.1 var(--font-head); }
.mine-card em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.mini-bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-items: end; height: 90px; }
.mini-bars div { display: grid; align-items: end; justify-items: center; height: 100%; gap: 3px; }
.mini-bars i { width: 100%; min-height: 3px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--brand-2), var(--brand)); }
.mini-bars small { font-size: 9.5px; color: var(--ink-3); height: 12px; }
.nearby summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.nearby summary .i { color: var(--brand); width: 16px; }
.nearby[open] summary { margin-bottom: 8px; }
.note-box span { display: flex; align-items: center; gap: 6px; }
.note-box .i { width: 15px; height: 15px; color: var(--brand); }
.attach-list { display: grid; gap: 6px; }
.attach-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.attach-item:hover { background: var(--brand-soft); }
@media (max-width: 1100px) {
  .atlas { grid-template-columns: 1fr; }
  .atlas-stage-card, .atlas-panel { position: static; max-height: none; }
  .atlas-stage { height: 64vh; min-height: 380px; }
}
@media (max-width: 720px) {
  .atlas-controls { grid-template-columns: 1fr; }
  .atlas-hint { display: none; }
  .atlas-rail { right: 8px; top: 8px; gap: 4px; }
  .rail-btn { width: 46px; font-size: 9px; }
  .g-metrics { grid-template-columns: repeat(2, 1fr); }
  .group-tiles, .action-list, .mode-cards { grid-template-columns: 1fr; }
  .atlas-toolbar { padding: 10px; }
}

/* ───────────── HOME ───────────── */
.home-head h1 { font-size: clamp(30px, 3.2vw, 46px); }
.home-head .page-head-copy { max-width: 760px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.qa { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .09); color: #fff; font-weight: 700; font-size: 12.5px; backdrop-filter: blur(6px); transition: background .2s, transform .15s; }
.qa:hover { background: rgba(255, 255, 255, .18); transform: translateY(-1px); }
.qa .i { width: 16px; height: 16px; color: #ffc2a8; }
.home-badges { display: grid; gap: 10px; }
.hb { display: grid; justify-items: center; min-width: 120px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); text-align: center; }
.hb b { font: 800 30px/1 var(--font-head); color: #fff; }
.hb small { color: #ffd6c6; font-size: 11px; font-weight: 700; margin-top: 4px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.home-main, .home-side { display: grid; gap: 18px; min-width: 0; }
.today-card { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; align-items: center; position: relative; overflow: hidden; }
.today-card h2 { display: flex; align-items: center; gap: 10px; font-size: 26px; margin: 4px 0 6px; }
.today-copy { display: grid; gap: 10px; }
.today-list { margin: 4px 0 6px; padding: 0; list-style: none; counter-reset: t; display: grid; gap: 4px; }
.today-list li { counter-increment: t; display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.today-list li::before { content: counter(t, decimal-leading-zero); color: var(--brand); font-weight: 800; margin-right: 8px; font-size: 11px; }
.today-list li a { flex: 1; font-weight: 700; }
.today-list li a:hover { color: var(--brand); }
.today-list li span { color: var(--ink-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.today-art { background: var(--stage); border-radius: 16px; aspect-ratio: 1; display: grid; place-items: center; }
.today-art .thumb { width: 100%; height: 100%; object-fit: contain; }
.rest-art .i { width: 70px; height: 70px; color: var(--brand-3); }
.today-card.live { background: linear-gradient(135deg, var(--ok-soft), var(--surface)); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); grid-template-columns: 1fr; }
.today-card.live .bar > i { background: var(--ok); }
.checkin-card .row { gap: 16px; }
.checkin-summary { display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.checkin-summary span { display: flex; align-items: center; gap: 7px; }
.checkin-summary .i { width: 15px; height: 15px; color: var(--brand); }
.checkin-form { display: grid; gap: 12px; }
.checkin-form .field > span { display: flex; justify-content: space-between; }
.scale5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.scale5 label { cursor: pointer; }
.scale5 input { position: absolute; opacity: 0; pointer-events: none; }
.scale5 span { display: grid; place-items: center; height: 34px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 800; color: var(--ink-3); transition: all .15s; }
.scale5 input:checked + span { background: var(--brand); color: #fff; border-color: transparent; box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 30%, transparent); }
.scale5 input:focus-visible + span { outline: 3px solid var(--focus); }
.week-row { gap: 18px; margin-bottom: 10px; }
.week-nums { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.week-nums div { padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.week-nums small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.week-nums b { font: 800 17px/1.2 var(--font-head); }
.rec-grid { display: grid; gap: 7px; }
.rec-item { display: grid; grid-template-columns: 116px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 4px 6px; border-radius: 10px; }
.rec-item:hover { background: var(--surface-2); }
.rec-name { grid-row: span 2; display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12.5px; }
.rec-bar { height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.rec-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.rec-item.almost .rec-bar i { background: var(--warn); }
.rec-item.recovering .rec-bar i { background: var(--bad); }
.rec-item.fresh .rec-bar i { background: #9dc7b1; }
.rec-item small { color: var(--ink-3); font-size: 10.5px; }
.nutri-rings { display: flex; gap: 18px; justify-content: space-around; margin-bottom: 12px; }
.water { display: grid; gap: 8px; }
.water small { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-2); }
.water small .i { width: 15px; height: 15px; color: var(--info); }
.glasses { display: flex; flex-wrap: wrap; gap: 5px; }
.glasses i { width: 16px; height: 22px; border-radius: 3px 3px 6px 6px; border: 1.5px solid color-mix(in srgb, var(--info) 45%, var(--line)); background: var(--surface); }
.glasses i.on { background: linear-gradient(180deg, color-mix(in srgb, var(--info) 45%, #fff), var(--info)); border-color: var(--info); }
.pr-list { display: grid; gap: 6px; }
.pr-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.pr-item > .i { color: var(--gold); fill: var(--gold); width: 17px; }
.pr-item span { flex: 1; display: grid; min-width: 0; }
.pr-item small { color: var(--ink-3); }
.pr-item em { font-style: normal; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.last-session { margin-top: 12px; display: grid; gap: 4px; }
.last-session a { display: grid; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); }
.last-session a:hover { border-color: var(--brand-3); }
.last-session small { color: var(--ink-3); }
.tip-card { display: grid; gap: 14px; background: linear-gradient(145deg, var(--brand-soft), var(--surface)); }
.tip-row { display: flex; gap: 12px; }
.tip-row > .i { width: 22px; height: 22px; color: var(--brand); flex: none; margin-top: 2px; }
.tip-row p { color: var(--ink-2); font-size: 13.5px; }
@media (max-width: 1200px) { .home-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .today-card { grid-template-columns: 1fr; } .today-art { max-width: 200px; } .home-badges { display: none; } }

/* ───────────── LIBRARY ───────────── */
.lib-filters { display: grid; gap: 12px; padding: 14px; margin-bottom: 14px; }
.lib-row { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(130px, 1fr)); gap: 8px; }
.lib-row.wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lib-row .seg button { padding: 6px 10px; font-size: 12px; }
.sort { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--ink-3); }
.sort .input { width: auto; }
.results-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 2px 12px; color: var(--ink-2); font-size: 13px; }
.results-line .link { margin-left: 8px; font-size: 12px; }
.compare-tray { position: sticky; bottom: 16px; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: 16px; background: var(--side-bg); color: #fff; box-shadow: var(--shadow-lg); flex-wrap: wrap; }
.compare-tray span { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.compare-tray .i { color: #ffb193; }
.compare-tray .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .3); }
.ex-card { content-visibility: auto; contain-intrinsic-size: 330px; }
.compare-table { display: grid; gap: 0; overflow-x: auto; }
.ct-row { display: grid; grid-template-columns: 130px repeat(var(--n), minmax(200px, 1fr)); border-bottom: 1px solid var(--line); }
.ct-row:last-child { border-bottom: 0; }
.ct-head .ct-cell { display: grid; justify-items: center; gap: 6px; text-align: center; }
.ct-media { display: block; width: 140px; aspect-ratio: 1; background: var(--stage); border-radius: 14px; overflow: hidden; }
.ct-media .thumb { width: 100%; height: 100%; object-fit: contain; }
.ct-label { padding: 10px 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ct-cell { padding: 10px; font-size: 13px; color: var(--ink-2); }
.custom-ex { display: grid; gap: 12px; }
.unit-pick { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface-2); }
.up-list { display: grid; gap: 10px; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
.up-group { display: grid; gap: 5px; }
.up-group small { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.chip-check { position: relative; display: inline-flex; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { padding: 5px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); transition: background .15s, color .15s, border-color .15s; }
.chip-check:hover span { border-color: var(--brand-3); }
.chip-check input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip-check input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.up-count { font-style: normal; color: var(--brand); font-weight: 700; }
.danger-text { color: var(--bad) !important; margin-right: auto; }
@media (max-width: 1000px) { .lib-row { grid-template-columns: 1fr 1fr; } .lib-row .search-box { grid-column: 1 / -1; } .lib-filters { position: static; } .sort { margin-left: 0; } }

/* ───────────── EXERCISE ───────────── */
.ex-page { display: grid; gap: 16px; }
.back { width: max-content; }
.ex-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; align-items: stretch; }
.ex-stage-card { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--stage); min-height: 580px; display: flex; flex-direction: column; }
.ex-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.ex-stage-head .seg button { padding: 7px 12px; }
.ex-anim { flex: 1; display: flex; min-height: 520px; }
.ex-anim .anim { flex: 1; border-radius: 0; }
.ex-stage { position: relative; flex: 1; min-height: 520px; }
.ex-viewer { position: absolute; inset: 0; }
.ex-stage-tools { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 4; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ex-stage-tools .seg, .ex-stage-tools .btn { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); }
.ex-legend { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: flex; gap: 12px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 90%, transparent); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.ex-info { display: grid; gap: 16px; align-content: start; }
.ex-title { display: grid; gap: 12px; }
.ex-title h1 { font-size: clamp(28px, 3vw, 42px); }
.ex-meta { gap: 14px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.ex-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ex-meta .i { width: 15px; height: 15px; color: var(--brand); }
.ex-meta .lvl { margin: 0; }
.role-cols { display: grid; gap: 12px; }
.role-col { display: grid; gap: 7px; }
.role-col > b { display: flex; align-items: center; gap: 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ex-lower { align-items: start; }
.stack { display: grid; gap: 18px; min-width: 0; }
.steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.steps li span { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font: 800 15px/1 var(--font-head); }
.steps li p { padding-top: 6px; color: var(--ink-2); line-height: 1.6; }
.rec-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.rec-tiles div { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.rec-tiles small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.rec-tiles b { font: 800 19px/1.2 var(--font-head); }
.rec-tiles em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.hist-details summary { cursor: pointer; font-weight: 700; margin: 12px 0 8px; color: var(--ink-2); }
.alt-row { display: flex; gap: 6px; align-items: center; }
.alt-row .mini-ex { flex: 1; }
@media (max-width: 1100px) { .ex-layout { grid-template-columns: 1fr; } .ex-stage-card { min-height: 480px; } .ex-stage, .ex-anim { min-height: 420px; } }

/* ───────────── PLAN ───────────── */
.day-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 8px; scrollbar-width: thin; }
.day-tab { display: flex; align-items: center; gap: 10px; min-width: 180px; padding: 11px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-align: left; box-shadow: var(--shadow-sm); position: relative; transition: border-color .2s, transform .15s; }
.day-tab:hover { border-color: var(--brand-3); transform: translateY(-1px); }
.day-tab > i { width: 12px; height: 34px; border-radius: 6px; flex: none; }
.day-tab span { display: grid; min-width: 0; }
.day-tab b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-tab small { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.day-tab em { position: absolute; top: -7px; right: 10px; font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: var(--ok); color: #fff; }
.day-tab.on { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent), var(--shadow-sm); }
.day-tab.add { border-style: dashed; color: var(--brand); min-width: 150px; }
.day-tab.add .i { width: 20px; height: 20px; }
.day-tab.drop-target { border-color: var(--ok); }
.plan-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.plan-side { display: grid; gap: 18px; align-self: start; }
.day-panel { display: grid; gap: 14px; }
.day-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.day-title { display: flex; align-items: center; gap: 10px; }
.day-title > i { width: 14px; height: 14px; border-radius: 5px; }
.day-title h2 { font-size: 24px; }
.day-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.weekday-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.wd { min-width: 44px; height: 34px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 800; font-size: 12px; color: var(--ink-3); }
.wd.on { background: var(--brand); border-color: transparent; color: #fff; }
.color-chips { display: flex; gap: 6px; }
.cc { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2); }
.cc.on { box-shadow: 0 0 0 2px var(--ink); }
.day-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); }
.day-stats span { display: inline-flex; align-items: center; gap: 6px; }
.day-stats .i { width: 15px; height: 15px; color: var(--brand); }
.plan-list { display: grid; gap: 8px; }
.plan-item { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: 'h t m a' 'h t f f' 'h n n n'; gap: 8px 12px; align-items: center; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, box-shadow .2s, opacity .2s; }
.plan-item:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.plan-item.dragging { opacity: .45; }
.plan-item.drop-target { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.plan-item.ss { border-left: 4px solid var(--gold); }
.plan-item.ss-cont { margin-top: -6px; border-top-left-radius: 6px; border-top-right-radius: 6px; }
.plan-item.ss::after { content: 'SÜPERSET'; position: absolute; right: 12px; top: -8px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; padding: 1px 6px; border-radius: 6px; background: var(--gold); color: #3b2500; }
.plan-item.ss-cont::after { display: none; }
.pi-handle { grid-area: h; display: grid; justify-items: center; gap: 2px; color: var(--ink-3); cursor: grab; font-size: 11px; font-weight: 800; }
.pi-handle .i { width: 16px; height: 16px; }
.pi-thumb { grid-area: t; }
.pi-thumb .thumb.mini { width: 58px; height: 58px; }
.pi-main { grid-area: m; display: grid; gap: 5px; min-width: 0; }
.pi-name { font-weight: 800; font-size: 14.5px; }
.pi-name:hover { color: var(--brand); }
.pi-main small { font-size: 11.5px; }
.pi-fields { grid-area: f; display: grid; grid-template-columns: 70px 1fr 110px 70px; gap: 8px; }
.pi-fields label { display: grid; gap: 3px; }
.pi-fields span { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pi-actions { grid-area: a; display: flex; gap: 4px; align-self: start; }
.pi-note { grid-area: n; }
.plan-item.missing { display: flex; justify-content: space-between; color: var(--ink-3); }
.week-grid { display: grid; gap: 5px; }
.wg-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; min-height: 40px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); text-align: left; font-size: 12px; }
.wg-cell b { flex: none; width: 34px; font-size: 11px; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.wg-cell span { max-width: 100%; padding: 3px 8px; border-radius: 7px; background: color-mix(in srgb, var(--c) 18%, var(--surface)); color: var(--ink); font-weight: 700; font-size: 11.5px; line-height: 1.3; border-left: 3px solid var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-cell small { color: var(--ink-3); font-size: 11px; }
.wg-cell.today b { color: var(--brand); }
.wg-cell.today { border-color: var(--brand); }
.wg-cell:hover { border-color: var(--brand-3); }
.balance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 8px; }
.balance div { padding: 9px 10px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.balance small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.balance b { font: 800 18px/1.2 var(--font-head); }
.map-card { padding-bottom: 14px; }
.plan-map { position: relative; height: 380px; border-radius: 16px; overflow: hidden; background: var(--stage); }
.plan-viewer { position: absolute; inset: 0; }
.plan-map-legend { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; font-weight: 700; padding: 6px 9px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 90%, transparent); }
.plan-map-views { position: absolute; right: 10px; top: 10px; z-index: 3; display: grid; gap: 4px; }
.plan-map-views .icon-btn { font-weight: 800; font-size: 12px; }
.print-plan { display: none; }
@media (max-width: 1200px) { .plan-layout { grid-template-columns: 1fr; } .plan-side { position: static; } }
@media (max-width: 720px) {
  .plan-item { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 't m' 'f f' 'a a' 'n n'; }
  .pi-handle { display: none; }
  .pi-fields { grid-template-columns: repeat(2, 1fr); }
  .pi-actions { justify-content: flex-end; }
}

/* ───────────── SESSION ───────────── */
.start-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 18px; }
.start-card { display: grid; gap: 6px; justify-items: start; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; position: relative; overflow: hidden; transition: transform .15s, border-color .2s; }
.start-card:hover { transform: translateY(-2px); border-color: var(--brand-3); }
.start-card > i { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.start-card b { font: 800 17px/1.2 var(--font-head); }
.start-card small { color: var(--ink-3); }
.start-card .btn { margin-top: 6px; pointer-events: none; }
.start-card.free > .i { width: 26px; height: 26px; color: var(--brand); }
.sess { display: grid; gap: 16px; padding-bottom: 90px; }
.sess-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: center; }
.sess-title h1 { font-size: clamp(24px, 2.6vw, 34px); }
.linklike { border: 0; background: none; padding: 0; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 8px; text-align: left; }
.linklike .i { width: 18px; height: 18px; color: var(--ink-3); }
.sess-kpis { display: flex; gap: 10px; }
.sess-kpis div { min-width: 96px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); text-align: center; }
.sess-kpis small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.sess-kpis b { font: 800 22px/1.2 var(--font-head); font-variant-numeric: tabular-nums; }
.sess-kpis em { font-style: normal; font-size: 13px; color: var(--ink-3); }
.sess-progress, .sess-actions { grid-column: 1 / -1; }
.sess-progress .bar > i { background: linear-gradient(90deg, var(--ok), #58d68d); }
.sess-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.sess-cards { display: grid; gap: 14px; }
.sess-side { position: sticky; top: calc(var(--topbar-h) + 14px); display: grid; gap: 14px; }
.toggles { display: grid; gap: 10px; }
.sess-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); padding: 14px; display: grid; gap: 10px; transition: border-color .3s, background .3s; }
.sess-card.complete { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: linear-gradient(180deg, var(--ok-soft), var(--surface) 40%); }
.sess-card.ss { border-bottom: 4px solid var(--gold); }
.sc-head { display: flex; gap: 12px; align-items: flex-start; }
.sc-thumb .thumb.mini { width: 64px; height: 64px; }
.sc-title { flex: 1; min-width: 0; display: grid; gap: 4px; }
.sc-title h2 { font-size: 19px; }
.sc-meta { gap: 10px; font-size: 12px; color: var(--ink-3); }
.sc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.sc-meta .i { width: 13px; height: 13px; }
.sc-menu { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 262px; }
.sc-sug, .sc-note { font-size: 12.5px; padding: 8px 12px; }
.sets { display: grid; gap: 6px; }
.set-row { position: relative; display: grid; grid-template-columns: 38px 64px minmax(100px, 1fr) minmax(100px, 1fr) 60px 48px; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 12px; transition: background .2s; }
.set-head { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: 0; padding-bottom: 0; }
.set-row.done { background: var(--ok-soft); }
.set-row.type-W .set-type { background: var(--warn-soft); color: var(--warn); }
.set-row.type-D .set-type { background: var(--info-soft); color: var(--info); }
.set-row.type-F .set-type { background: var(--bad-soft); color: var(--bad); }
.set-type { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--surface-3); font-weight: 800; color: var(--ink-2); }
.prev { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.stepper { display: grid; grid-template-columns: 30px 1fr 30px; border: 1px solid var(--line-2); border-radius: 11px; overflow: hidden; background: var(--surface); height: 40px; }
.stepper button { border: 0; background: var(--surface-3); color: var(--ink-2); font-weight: 800; font-size: 16px; }
.stepper button:hover { background: var(--brand-soft); color: var(--brand); }
.stepper input { width: 100%; min-width: 0; border: 0; text-align: center; font-weight: 800; font-size: 15px; background: transparent; outline: none; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rir { padding-left: 6px; padding-right: 2px; }
.set-check { width: 44px; height: 40px; border-radius: 12px; border: 2px solid var(--line-2); background: var(--surface); color: transparent; display: grid; place-items: center; transition: all .15s; }
.set-check .i { width: 22px; height: 22px; }
.set-check:hover { border-color: var(--ok); color: var(--ok); }
.set-check.on { background: var(--ok); border-color: var(--ok); color: #fff; transform: scale(1.03); }
.e1rm { position: absolute; right: 64px; top: -6px; font-size: 10px; color: var(--ink-3); background: var(--surface); padding: 0 4px; border-radius: 4px; }
.sc-foot { align-items: center; }
.sc-foot .chips { margin-left: auto; }
.rest-bar { position: fixed; left: calc(50% + var(--sidebar-w) / 2); transform: translateX(-50%); bottom: 18px; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 20px; background: var(--side-bg); color: #fff; box-shadow: var(--shadow-lg); min-width: min(560px, calc(100vw - var(--sidebar-w) - 40px)); }
.rest-ring { position: relative; width: 48px; height: 48px; flex: none; }
.rest-ring svg { width: 48px; height: 48px; }
.rr-bg { fill: none; stroke: rgba(255, 255, 255, .15); stroke-width: 4; }
.rr-fg { fill: none; stroke: #ffb18d; stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .25s linear; }
.rest-ring .i { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; color: #ffb18d; }
.rest-copy { display: grid; min-width: 110px; }
.rest-copy small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #ffcbb7; font-weight: 800; }
.rest-copy b { font: 800 22px/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
.rest-btns { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.rest-btns .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .25); background: transparent; }
.rest-btns .btn.dark { background: #fff; color: var(--side-bg); }
.rest-bar.running { background: linear-gradient(120deg, #3b1722, #6a2230); }
.rest-bar.ready { background: linear-gradient(120deg, #1f7a52, #2f9e6e); animation: readyPulse 1.2s ease-in-out 3; }
@keyframes readyPulse { 50% { transform: translateX(-50%) scale(1.03); } }
.finish-form, .summary { display: grid; gap: 14px; }
.finish-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.finish-kpis div { padding: 10px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.finish-kpis small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.finish-kpis b { font: 800 18px/1.2 var(--font-head); }
.stars { display: flex; gap: 6px; }
.stars input { position: absolute; opacity: 0; }
.stars span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); cursor: pointer; color: var(--line-2); }
.stars span .i { width: 22px; height: 22px; }
.stars label:has(input:checked) span, .stars label:has(~ label input:checked) span { color: var(--gold); border-color: var(--gold); }
.stars label:has(input:checked) span .i, .stars label:has(~ label input:checked) span .i { fill: var(--gold); }
.summary-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.plates-dlg { display: grid; gap: 14px; }
.plate-visual { display: flex; align-items: center; gap: 3px; min-height: 120px; padding: 10px; border-radius: 14px; background: var(--surface-2); overflow-x: auto; }
.bar-sleeve { width: 60px; height: 14px; border-radius: 4px; background: linear-gradient(180deg, #d9d9d9, #9a9a9a); flex: none; }
.plate { display: grid; place-items: center; width: 22px; height: var(--h); border-radius: 5px; color: #fff; font-size: 10px; font-weight: 800; writing-mode: vertical-rl; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
@media (max-width: 1100px) { .sess-body { grid-template-columns: 1fr; } .sess-side { position: static; } }
@media (max-width: 900px) { .rest-bar { left: 50%; transform: translateX(-50%); bottom: 92px; min-width: calc(100vw - 24px); } @keyframes readyPulse { 50% { transform: translateX(-50%) scale(1.03); } } }
@media (max-width: 720px) {
  .sess-head { grid-template-columns: 1fr; }
  .sess-kpis { justify-content: space-between; } .sess-kpis div { min-width: 0; flex: 1; }
  .set-row { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .set-row .prev, .set-row .rir, .set-head span:nth-child(2), .set-head span:nth-child(5) { display: none; }
  .sc-head { flex-wrap: wrap; }
  .sc-title { flex: 1 1 calc(100% - 80px); }
  .sc-title h2 { font-size: 18px; }
  .sc-menu { order: 3; width: 100%; max-width: none; justify-content: flex-start; padding-top: 2px; }
  .sc-thumb .thumb.mini { width: 54px; height: 54px; }
  .rest-bar { gap: 8px; padding: 6px 8px 6px 6px; }
  .rest-copy { min-width: 0; }
  .rest-copy b { font-size: 20px; }
  .rest-btns { flex-wrap: nowrap; gap: 4px; }
  .rest-btns .btn { padding-inline: 9px; }
  .e1rm { display: none; }
  .finish-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ───────────── PROGRESS ───────────── */
.std-list { display: grid; gap: 12px; }
.std-row { display: grid; gap: 6px; }
.std-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.std-bar i { height: 8px; border-radius: 4px; background: var(--surface-3); position: relative; }
.std-bar i.on { background: linear-gradient(90deg, var(--brand-2), var(--brand)); }
.std-bar.big i { height: 12px; }
.std-bar.big i small { position: absolute; top: 16px; left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--ink-3); font-style: normal; line-height: 1.3; }
.std-bar.big { margin-bottom: 40px; }
.log-list { display: grid; gap: 8px; }
.log-month { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 2px; }
.log-item { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-align: left; box-shadow: var(--shadow-sm); transition: border-color .2s, transform .15s; }
.log-item:hover { border-color: var(--brand-3); transform: translateY(-1px); }
.log-date { display: grid; justify-items: center; padding: 6px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); }
.log-date b { font: 800 22px/1 var(--font-head); }
.log-date small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.log-main { display: grid; gap: 5px; min-width: 0; }
.log-main > small { color: var(--ink-3); }
.log-side { display: grid; justify-items: end; gap: 4px; }
.log-side small { color: var(--ink-3); font-size: 11px; }
.stars-mini { font-style: normal; color: var(--gold); letter-spacing: 1px; }
.sess-detail { display: grid; gap: 12px; }
.sd-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 14px; background: var(--surface-2); }
.sd-item h4 { margin-bottom: 6px; }
.sd-item h4 a:hover { color: var(--brand); }
.sd-sets { display: flex; flex-wrap: wrap; gap: 5px; }
.cardio-form, .goal-form { display: grid; gap: 12px; }
.cardio-list { display: grid; gap: 6px; }
.cardio-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--surface-2); }
.cardio-item .grow { display: grid; }
.cardio-item small { color: var(--ink-3); }
.ci-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--info-soft); color: var(--info); flex: none; }
.donut-row { gap: 18px; align-items: center; flex-wrap: wrap; }
.legend { display: grid; gap: 6px; font-size: 12.5px; }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.goal-list { display: grid; gap: 12px; }
.goal { display: grid; gap: 8px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); }
.goal.done { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); background: var(--ok-soft); }
.goal .big-num small { font: 600 13px var(--font); color: var(--ink-3); letter-spacing: 0; }

/* ───────────── BODY ───────────── */
.measure-card { align-self: start; position: sticky; top: calc(var(--topbar-h) + 14px); max-height: calc(100vh - var(--topbar-h) - 28px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@media (max-width: 1200px) { .measure-card { position: static; max-height: none; overflow: visible; } }
.measure-form { display: grid; gap: 12px; }
.measure-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.measure-grid .field > span { font-size: 11.5px; }
.measure-grid small { color: var(--ink-3); font-weight: 600; }
.howto summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-2); font-size: 13px; }
.howto summary .i { width: 15px; height: 15px; color: var(--info); }
.howto[open] summary { margin-bottom: 8px; }
.photo-day { margin-bottom: 16px; }
.photo-day h4 { margin-bottom: 8px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; }
.photo { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.photo.sel { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
.photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; cursor: zoom-in; }
.photo figcaption { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 8px; }
.photo figcaption small { color: var(--ink-3); margin-right: auto; white-space: nowrap; font-size: 11.5px; }
.photo figcaption .icon-btn { flex: none; }
.photo-form { display: grid; gap: 12px; }
.drop { display: grid; justify-items: center; gap: 6px; padding: 26px 16px; border: 2px dashed var(--line-2); border-radius: 16px; background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.drop:hover, .drop.over { border-color: var(--brand-2); background: var(--brand-soft); }
.drop .i { width: 30px; height: 30px; color: var(--brand); }
.drop small { color: var(--ink-3); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-full { margin: 0; display: grid; gap: 8px; justify-items: center; }
.photo-full img { max-height: 70vh; border-radius: 14px; }
.compare-slider { position: relative; width: 100%; max-width: 720px; margin: 0 auto; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #000; }
.compare-slider > img, .cs-before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-slider input { position: absolute; inset: auto 0 14px; width: 80%; margin: 0 auto; z-index: 3; }
.compare-slider::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .5); transform: translateX(-50%); pointer-events: none; }
.cs-tag { position: absolute; top: 12px; z-index: 3; padding: 4px 9px; border-radius: 8px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 700; }
.cs-tag.l { left: 12px; } .cs-tag.r { right: 12px; }
.sore-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(200px, 1fr); gap: 14px; }
.sore-stage { position: relative; height: 480px; border-radius: 16px; overflow: hidden; background: var(--stage); }
.sore-viewer { position: absolute; inset: 0; }
.sore-legend { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 9px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 90%, transparent); font-size: 11px; font-weight: 700; }
.sore-legend span { display: inline-flex; align-items: center; gap: 4px; }
.sore-legend i { width: 11px; height: 11px; border-radius: 3px; }
.sore-list { display: grid; gap: 5px; align-content: start; max-height: 480px; overflow-y: auto; }
.sore-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 700; text-align: left; }
.sore-item span { flex: 1; }
.sore-item em { font-style: normal; font-size: 11px; color: var(--ink-3); }
.sore-item.lv1 { background: #fdeee6; } .sore-item.lv2 { background: #fbd9cf; } .sore-item.lv3 { background: #f6b8b8; }
:root[data-theme="dark"] .sore-item.lv1 { background: #3a2520; } :root[data-theme="dark"] .sore-item.lv2 { background: #4a2420; } :root[data-theme="dark"] .sore-item.lv3 { background: #5a1c22; }
.sym-list { display: grid; gap: 8px; }
.sym-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); font-size: 13px; }

/* ───────────── NUTRITION ───────────── */
.nutri-day { display: grid; gap: 16px; }
.day-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.day-nav > div { display: grid; justify-items: center; text-align: center; }
.day-nav b { font: 800 18px/1.2 var(--font-head); }
.day-nav small { color: var(--ink-3); }
.nutri-summary { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.macros { display: grid; gap: 10px; }
.macro { display: grid; gap: 5px; font-size: 12.5px; }
.macro span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.water.big { padding: 12px; border-radius: 14px; background: var(--info-soft); }
.water.big b { display: flex; align-items: center; gap: 6px; }
.water.big b .i { color: var(--info); width: 17px; }
.water.big > .row { flex-wrap: wrap; row-gap: 8px; }
.water.big > .row > b { white-space: nowrap; }
.meal { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
.meal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meal-head h4 { font-size: 15px; }
.meal-head .btn { margin-left: auto; }
.meal-list { display: grid; gap: 5px; }
.meal-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); }
.meal-item .grow { display: grid; }
.meal-item small { color: var(--ink-3); font-size: 11.5px; }
.target-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.target-grid div { padding: 9px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.target-grid small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.target-grid b { font: 800 16px/1.3 var(--font-head); font-variant-numeric: tabular-nums; }
.target-grid.big b { font-size: 20px; }
.food-table { max-height: 420px; overflow-y: auto; margin-top: 10px; }
.food-table th { position: sticky; top: 0; z-index: 1; }
.food-picker { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, 1fr); gap: 16px; }
.food-list { display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; margin-top: 8px; }
.food-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; font-size: 13px; }
.food-row small { color: var(--ink-3); white-space: nowrap; }
.food-row:hover, .food-row.on { border-color: var(--brand-3); background: var(--brand-soft); }
.recent { margin-top: 8px; }
.food-detail { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: var(--surface-2); position: sticky; top: 0; }
.calc-form { display: grid; gap: 12px; }
@media (max-width: 720px) { .nutri-summary { grid-template-columns: 1fr; justify-items: center; } .food-picker { grid-template-columns: 1fr; } .sore-layout { grid-template-columns: 1fr; } .measure-card { position: static; max-height: none; overflow: visible; } }

/* ───────────── TOOLS ───────────── */
.tools-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.tool-nav { padding: 12px; position: sticky; top: calc(var(--topbar-h) + 14px); display: grid; gap: 10px; }
.tn-group { display: grid; gap: 2px; }
.tn-group small { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 4px 10px; }
.tn-group a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tn-group a .i { width: 16px; height: 16px; color: var(--ink-3); }
.tn-group a:hover { background: var(--surface-2); }
.tn-group a.on { background: var(--brand-soft); color: var(--brand-ink); }
.tn-group a.on .i { color: var(--brand); }
.tool-card { min-height: 420px; }
.tool-card h2 { font-size: 22px; }
.tool-form { display: grid; gap: 12px; }
.tool-out { display: grid; gap: 14px; margin-top: 16px; }
.big-result { display: grid; gap: 2px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, var(--brand-soft), var(--surface)); border: 1px solid var(--line); }
.big-result small { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.big-result b { font: 800 clamp(28px, 3.2vw, 40px)/1.1 var(--font-head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.big-result em { font-style: normal; color: var(--ink-3); font-size: 13px; }
.rpe-table td, .rpe-table th { text-align: center; }
.plate-visual.big { min-height: 160px; justify-content: center; }
.warm-list { display: grid; gap: 6px; }
.warm-row { display: grid; grid-template-columns: 36px 110px 80px 1fr; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); }
.warm-row span { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--warn-soft); color: var(--warn); font-weight: 800; font-size: 12px; }
.warm-row.work span { background: var(--brand); color: #fff; }
.warm-row.work span .i { width: 15px; height: 15px; }
.warm-row b { font: 800 17px var(--font-head); }
.warm-row em { font-style: normal; color: var(--ink-2); font-weight: 700; }
.warm-row small { color: var(--ink-3); }
.zones { display: grid; gap: 6px; }
.zone { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: 13px; }
.zone.z1 { background: #e3eefa; color: #2a5d96; } .zone.z2 { background: #e2f4eb; color: #1f7a52; } .zone.z3 { background: #fcf0da; color: #9a6410; } .zone.z4 { background: #fde2d6; color: #b3481f; } .zone.z5 { background: #fbe0e0; color: #a82b2b; }
.interval { display: grid; gap: 16px; }
.iv-display { display: grid; justify-items: center; gap: 4px; padding: 26px; border-radius: 22px; background: var(--side-bg); color: #fff; text-align: center; transition: background .3s; }
.iv-display small { font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffcbb7; }
.iv-display b { font: 800 clamp(64px, 9vw, 110px)/1 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.iv-display em { font-style: normal; color: #f2d0c8; }
.interval.work .iv-display { background: linear-gradient(135deg, #b8323d, #e3664f); }
.interval.rest .iv-display { background: linear-gradient(135deg, #1f7a52, #2f9e6e); }
.interval.prep .iv-display { background: linear-gradient(135deg, #7a5a12, #c98016); }
.interval.done .iv-display { background: linear-gradient(135deg, #3576bd, #6aa6e8); }
.interval:not(.idle):not(.done) .iv-form { opacity: .5; pointer-events: none; }
.stopwatch { display: grid; gap: 16px; justify-items: center; }
.stopwatch > b { font: 800 clamp(56px, 8vw, 96px)/1 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.laps { width: 100%; max-width: 420px; display: grid; gap: 4px; }
.laps div { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.laps small { color: var(--ink-3); }
.tempo { display: grid; gap: 14px; }
.tempo-display { display: grid; justify-items: center; padding: 30px; border-radius: 20px; background: var(--surface-2); min-height: 150px; align-content: center; }
.tempo-display b { font: 800 56px/1 var(--font-head); color: var(--brand); }
.tempo-display small { color: var(--ink-3); }
@media (max-width: 900px) {
  .tools-layout { grid-template-columns: 1fr; gap: 12px; }
  .tool-nav { position: static; display: flex; gap: 6px; padding: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .tool-nav::-webkit-scrollbar { display: none; }
  .tn-group { display: flex; gap: 6px; }
  .tn-group small { display: none; }
  .tn-group a { white-space: nowrap; background: var(--surface-2); scroll-snap-align: center; }
  .tool-card { min-height: 0; }
}

/* ───────────── LEARN ───────────── */
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.article-card { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .15s, border-color .2s; }
.article-card:hover { transform: translateY(-3px); border-color: var(--brand-3); }
.ac-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.article-card .chip { justify-self: start; }
.article-card p { color: var(--ink-3); font-size: 13px; }
.article-card small { display: flex; align-items: center; gap: 5px; color: var(--ink-3); }
.article-card small .i { width: 13px; height: 13px; }
.article { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; padding: clamp(20px, 3vw, 40px); }
.article h1 { font-size: clamp(28px, 3vw, 40px); }
.article .lead { font-size: 17px; color: var(--ink-2); }
.article section { display: grid; gap: 10px; }
.article h2 { font-size: 20px; margin-top: 10px; }
.article p { line-height: 1.75; color: var(--ink-2); font-size: 15px; }
.art-head { display: flex; align-items: center; gap: 10px; }
.art-head .muted { display: inline-flex; gap: 5px; align-items: center; }
.art-head .i { width: 14px; height: 14px; }
.refs { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); }
.refs b { display: flex; align-items: center; gap: 6px; }
.refs ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 5px; font-size: 13px; }
.refs a { color: var(--brand); }
.refs a .i { width: 12px; height: 12px; display: inline; vertical-align: -1px; }
.art-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.gloss-filter { gap: 10px; margin-bottom: 14px; }
.gloss-list { display: grid; gap: 6px; }
.gl-letter { font: 800 20px var(--font-head); color: var(--brand); margin: 12px 0 2px; }
.gl-item { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.gl-item p { grid-column: 1 / -1; color: var(--ink-2); font-size: 13.5px; }
.supp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.supp { display: grid; gap: 10px; align-content: start; }
.supp p { color: var(--ink-2); font-size: 13.5px; }
.supp-dose { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; font-weight: 700; }
.supp-dose .i { color: var(--brand); width: 16px; }
.pose-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pose { display: grid; gap: 10px; align-content: start; position: relative; }
.pose-no { position: absolute; right: 16px; top: 12px; font: 800 30px var(--font-head); color: var(--brand-soft-2); }
.pose p { color: var(--ink-2); font-size: 13px; }
.src-list { display: grid; gap: 8px; padding-left: 20px; margin: 0; font-size: 13px; }
.src-list a { color: var(--brand); }
.src-list .i { width: 12px; height: 12px; display: inline; vertical-align: -1px; }
.prose h4 { margin-top: 10px; }
.prose ul { margin: 0; }

/* ───────────── PLAY ───────────── */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.game-card { position: relative; display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; transition: transform .15s, border-color .2s; overflow: hidden; }
.game-card:hover { transform: translateY(-3px); border-color: var(--brand-3); }
.game-card::after { content: ''; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--brand-soft); z-index: 0; }
.game-card > * { position: relative; z-index: 1; }
.gc-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.gc-ic .i { width: 24px; height: 24px; }
.game-card p { color: var(--ink-3); font-size: 13px; }
.game-card .row small { color: var(--ink-3); }
.game-card .btn { pointer-events: none; }
.game-card > em { position: absolute; right: 14px; top: 14px; font-style: normal; }
.q-hist { padding: 6px 0; border-bottom: 1px solid var(--line); gap: 10px; }
.quiz { display: grid; gap: 16px; }
.quiz.with3d { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); align-items: start; }
.quiz-stage { position: relative; padding: 0; height: min(70vh, 640px); overflow: hidden; }
.quiz-viewer { position: absolute; inset: 0; }
.quiz-hint { position: absolute; left: 12px; top: 12px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 700; font-size: 12.5px; }
.quiz-hint .i { width: 15px; height: 15px; }
.quiz-card { display: grid; gap: 14px; }
.quiz-top { display: flex; gap: 6px; flex-wrap: wrap; }
.quiz-progress { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.quiz-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .3s; }
.quiz-prompt { font-size: 20px; line-height: 1.35; }
.q-desc { display: block; font: 500 14px/1.6 var(--font); color: var(--ink-2); padding: 12px 14px; border-radius: 12px; background: var(--surface-2); margin-bottom: 10px; letter-spacing: 0; }
.quiz-options { display: grid; gap: 8px; }
.q-opt { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface); text-align: left; font-weight: 700; font-size: 14.5px; transition: all .15s; }
.q-opt:hover:not(:disabled) { border-color: var(--brand-2); background: var(--brand-soft); transform: translateX(3px); }
.q-opt.correct { border-color: var(--ok); background: var(--ok-soft); color: color-mix(in srgb, var(--ok) 70%, var(--ink)); }
.q-opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.q-opt.dim { opacity: .5; }
.q-feedback { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; }
.q-feedback.ok { background: var(--ok-soft); } .q-feedback.ok .i { color: var(--ok); }
.q-feedback.bad { background: var(--bad-soft); } .q-feedback.bad .i { color: var(--bad); }
.quiz-result { display: grid; gap: 16px; max-width: 720px; margin: 0 auto; }
.qr-score { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 12px; }
.qr-score .i { width: 54px; height: 54px; color: var(--gold); }
.qr-score b { font: 800 56px/1 var(--font-head); }
.qr-score small { color: var(--ink-2); font-size: 15px; }
.flash-wrap { display: grid; gap: 16px; justify-items: center; max-width: 720px; margin: 0 auto; }
.flash-stats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.flash { width: 100%; min-height: 330px; border: 0; padding: 0; background: none; perspective: 1400px; cursor: pointer; }
.flash-inner { position: relative; width: 100%; min-height: 330px; transition: transform .6s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; }
.flash.flipped .flash-inner { transform: rotateY(180deg); }
.flash-front, .flash-back { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 26px; border-radius: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: center; box-shadow: var(--shadow); }
.flash-front { background: var(--hero); color: #fff; }
.flash-front small { color: #ffcab4; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.flash-front b { font: italic 700 clamp(24px, 3vw, 34px)/1.25 Georgia, serif; }
.flash-front em { font-style: normal; color: #f4d0ca; font-size: 13px; }
.flash-back { background: var(--surface); border: 1px solid var(--line); transform: rotateY(180deg); text-align: left; place-content: stretch; justify-items: stretch; }
.flash-back > b { font: 800 24px var(--font-head); text-align: center; }
.lv-card { display: grid; gap: 12px; }
.lv-big { display: flex; gap: 18px; align-items: center; }
.lv-big > div { flex: 1; }
.level-badge.big { width: 76px; height: 76px; border-radius: 22px; font-size: 32px; display: grid; place-items: center; background: linear-gradient(135deg, #ffcf6e, #ff8a5c); color: #4a1621; font-family: var(--font-head); font-weight: 800; }
.xp-bar.big { height: 12px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 8px; }
.xp-bar.big i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8a5c, #ffcf6e); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ach { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 16px 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); opacity: .55; filter: grayscale(.8); transition: transform .15s; }
.ach.on { opacity: 1; filter: none; box-shadow: var(--shadow-sm); }
.ach.on:hover { transform: translateY(-2px); }
.ach-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-3); margin-bottom: 4px; }
.ach.on .ach-ic { background: linear-gradient(135deg, #ffcf6e, #ff8a5c); color: #4a1621; }
.ach.on.tier3 .ach-ic { background: linear-gradient(135deg, #c9323f, #ff8a5c); color: #fff; }
.ach.on.tier2 .ach-ic { background: linear-gradient(135deg, #ffb18d, #ffe1c7); }
.ach-ic .i { width: 26px; height: 26px; }
.ach small { color: var(--ink-3); font-size: 11.5px; }
.ach em { font-style: normal; font-size: 10.5px; color: var(--ok); font-weight: 800; }
@media (max-width: 1000px) { .quiz.with3d { grid-template-columns: 1fr; } .quiz-stage { height: 52vh; } }

/* ───────────── SETTINGS ───────────── */
.settings-form { display: grid; gap: 14px; }
.settings-list { display: grid; gap: 2px; }
.set-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.set-item:last-child { border-bottom: 0; }
.set-item > span:first-child { display: grid; }
.set-item small { color: var(--ink-3); font-size: 12px; }
.switch-row { cursor: pointer; }
.data-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.data-actions > div { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.data-actions b { display: flex; align-items: center; gap: 7px; }
.data-actions b .i { color: var(--brand); }
.danger-zone { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)) !important; background: var(--bad-soft) !important; }
.danger-zone b .i { color: var(--bad) !important; }
.file-btn { cursor: pointer; justify-self: start; }
.about p { color: var(--ink-2); }

/* ───────────── PROGRAMS ───────────── */
.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.prog-card { display: grid; grid-template-rows: auto 1fr; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .15s, border-color .2s; }
.prog-card:hover { transform: translateY(-3px); border-color: var(--brand-3); }
.prog-media { position: relative; display: block; background: var(--stage); aspect-ratio: 16 / 8; }
.prog-media .thumb { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.prog-days { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 99px; background: var(--brand); color: #fff; font-weight: 800; font-size: 12px; }
.prog-body { display: grid; gap: 10px; align-content: start; padding: 16px; }
.prog-body h3 { font-size: 18px; }
.prog-body h3 a:hover { color: var(--brand); }
.prog-body p { color: var(--ink-3); font-size: 13px; }
.prog-day-list { display: grid; gap: 4px; }
.prog-day-list span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.prog-day-list i { width: 8px; height: 8px; border-radius: 3px; }
.prog-day-list small { color: var(--ink-3); font-weight: 600; }
.prog-detail { display: grid; gap: 16px; }
.pd-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.pd-head p { max-width: 720px; color: var(--ink-2); margin-top: 8px; }
.pd-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.pd-day { display: grid; gap: 10px; align-content: start; }
.pd-day-head { display: flex; align-items: center; gap: 10px; }
.pd-day-head > i { width: 10px; height: 40px; border-radius: 5px; flex: none; }
.pd-day-head > div { flex: 1; min-width: 0; }
.pd-day-head small { color: var(--ink-3); }
.pd-day-head .thumb.mini { width: 60px; height: 60px; }
.pd-list { margin: 0; padding: 0; list-style: none; counter-reset: pd; display: grid; gap: 4px; }
.pd-list li { counter-increment: pd; display: flex; gap: 8px; justify-content: space-between; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.pd-list li::before { content: counter(pd); color: var(--brand); font-weight: 800; font-size: 11px; min-width: 14px; }
.pd-list li a { flex: 1; font-weight: 700; }
.pd-list li a:hover { color: var(--brand); }
.pd-list li span { color: var(--ink-3); font-weight: 700; white-space: nowrap; }
.wizard { display: grid; gap: 16px; }
.wz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.wz-grid .field.wide { grid-column: 1 / -1; }
.wz-grid .field > span { font-size: 13px; }
.wz-grid .chip { cursor: pointer; border: 1px solid var(--line); }
#wzResult:empty { display: none; }
.wz-custom { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.wz-custom h3 { margin: 0 0 4px; font-size: 17px; }
.wz-custom-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.wz-custom-day { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.wz-custom-day.enabled { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: var(--surface); }
.wz-custom-day-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.wz-custom-day .chips { gap: 6px; }
.wz-custom-day .chip { font-size: 12px; }
#wzError:empty { display: none; }
#wzError { color: var(--danger, #b72e3b); }
.program-review .card-head { align-items: flex-start; }
.program-review .card-head p { margin-top: 4px; }
.review-status { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-weight: 800; }
.review-status.ok { color: var(--success, #22805a); }
.review-status.warn { color: var(--warning, #a45d16); }
.review-status .i { width: 18px; height: 18px; }
.review-list { display: grid; gap: 8px; padding-left: 20px; margin: 0 0 12px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }

/* ───────────── ROUTINES (Mobilite) ───────────── */
.rt-suggest { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 14%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--c) 35%, var(--line)); }
.rt-suggest h2 { font-size: 22px; margin: 2px 0 4px; }
.rt-suggest .kicker2 { display: inline-flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--c) 80%, var(--ink)); }
.rt-suggest .kicker2 .i { width: 13px; height: 13px; }
.rt-s-media .thumb.mini { width: 96px; height: 96px; border-radius: 16px; }
.rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.rt-card { display: grid; grid-template-rows: auto 1fr; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .15s, border-color .2s; }
.rt-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 55%, var(--line)); }
.rt-media { position: relative; display: block; aspect-ratio: 16 / 8; background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), var(--stage); }
.rt-media .thumb { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.rt-time { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: var(--c); color: #fff; font-weight: 800; font-size: 12px; }
.rt-time .i { width: 13px; height: 13px; }
.rt-body { display: grid; gap: 10px; align-content: start; padding: 16px; }
.rt-title { display: flex; align-items: center; gap: 10px; }
.rt-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: color-mix(in srgb, var(--c) 85%, var(--ink)); }
.rt-ic .i { width: 18px; height: 18px; }
.rt-title h3 { font-size: 18px; }
.rt-title h3 a:hover { color: var(--brand); }
.rt-body p { color: var(--ink-3); font-size: 13px; }
.rt-hero { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 12px; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 12%, var(--surface)), var(--surface) 65%); }
.rt-hero-media { background: var(--stage); border-radius: 18px; aspect-ratio: 1; display: grid; place-items: center; }
.rt-hero-media .thumb { width: 100%; height: 100%; object-fit: contain; }
.rt-hero-body { display: grid; gap: 12px; align-content: start; }
.rt-hero-body h1 { font-size: clamp(26px, 3vw, 36px); }
.rt-hero-body > p { color: var(--ink-2); max-width: 640px; }
.rt-hero-body > .btn { justify-self: start; }
.rt-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink-2); }
.rt-facts span { display: inline-flex; align-items: center; gap: 6px; }
.rt-facts .i { width: 16px; height: 16px; color: color-mix(in srgb, var(--c) 85%, var(--ink)); }
.rt-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.rt-settings .field { display: flex; align-items: center; gap: 8px; }
.rt-settings .field .input { width: auto; }
.rt-moves { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rt-moves li { display: grid; grid-template-columns: 26px 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.rt-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); font-weight: 800; font-size: 12px; }
.rt-moves b { display: block; }
.rt-moves p { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.rt-moves em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rt-moves em small { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 700; }
.rt-hist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.rt-hist li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.rt-hist small { color: var(--ink-3); }
@media (max-width: 760px) {
  .rt-suggest { grid-template-columns: 72px minmax(0, 1fr); }
  .rt-suggest > .btn { grid-column: 1 / -1; }
  .rt-s-media .thumb.mini { width: 72px; height: 72px; }
  .rt-hero { grid-template-columns: 1fr; }
  .rt-hero-media { width: min(240px, 100%); justify-self: center; }
  .rt-moves li { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .rt-num { display: none; }
  .rt-moves .thumb.mini { width: 44px; height: 44px; }
}

/* Routine player (full-screen dark modal) */
.rt-layer .modal { background: #1a0b10; border-color: #3a1a22; color: #fff; }
.rt-layer .modal-head { border-color: rgba(255, 255, 255, .08); }
.rt-layer .modal-head h2 { color: #fff; }
.rt-layer .modal-head h2 .i { color: #ffb18d; }
.rt-layer .modal-head .icon-btn { background: transparent; border-color: rgba(255, 255, 255, .18); color: #fff; }
.rt-layer .modal-body { padding: 0; }
.rt-player { --c: #e0523f; position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: min(620px, 74vh); background: radial-gradient(circle at 22% 32%, color-mix(in srgb, var(--c) 32%, transparent), transparent 55%), linear-gradient(140deg, #1f0c12, #3a1520 60%, #1a0b10); }
.rt-figure { display: grid; place-items: center; padding: 26px; }
.rt-figure .thumb { width: 100%; max-width: 400px; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 26px; background: radial-gradient(ellipse at 50% 42%, rgba(255, 244, 239, .96), rgba(250, 228, 220, .88) 65%, rgba(240, 210, 200, .8)); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.rt-main { display: grid; align-content: center; justify-items: center; text-align: center; gap: 10px; padding: 28px 28px 46px; }
.rt-phase { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #ffcbb7; padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.rt-player.prep .rt-phase { background: #e7ad45; color: #2a1219; }
.rt-player.paused .rt-phase { background: #fff; color: #2a1219; }
.rt-main h2 { font-size: clamp(24px, 3vw, 34px); color: #fff; }
.rt-side { display: inline-flex; padding: 4px 12px; border-radius: 99px; background: var(--c); color: #fff; font-weight: 800; font-size: 13px; }
.rt-cue { color: #f4d0ca; max-width: 470px; font-size: 15px; line-height: 1.55; }
.rt-clock { position: relative; width: 196px; height: 196px; margin: 6px 0; }
.rt-ring { width: 100%; height: 100%; }
.rt-ring .rr-bg { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 12; }
.rt-ring .rr-fg { fill: none; stroke: var(--c); stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray .2s linear; }
.rt-ring.prep .rr-fg { stroke: #e7ad45; }
.rt-clock b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 62px/1 var(--font-head); font-variant-numeric: tabular-nums; color: #fff; }
.rt-player.paused .rt-clock b { animation: rtBlink 1.2s ease-in-out infinite; }
@keyframes rtBlink { 50% { opacity: .35; } }
.rt-ctrl { display: flex; align-items: center; gap: 12px; }
.rt-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; font-weight: 800; transition: background .15s, transform .15s; }
.rt-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
.rt-btn:active:not(:disabled) { transform: scale(.95); }
.rt-btn:disabled { opacity: .35; cursor: default; }
.rt-btn .i { width: 22px; height: 22px; }
.rt-btn.big { width: 72px; height: 72px; background: #fff; color: #2a1219; border-color: transparent; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.rt-btn.big .i { width: 30px; height: 30px; }
.rt-next { color: #cfa9a6; font-size: 13px; }
.rt-next b { color: #fff; }
.rt-progress { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 3px; padding: 0 18px 16px; }
.rt-progress i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.rt-progress i.on { background: var(--c); }
.rt-progress i.cur { background: #fff; }
.rt-player.done { grid-template-columns: 1fr; place-items: center; }
.rt-done { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 40px 24px; }
.rt-done > .i { width: 84px; height: 84px; color: #4cc28b; }
.rt-done h2 { font-size: 32px; color: #fff; }
.rt-done p { color: #f4d0ca; }
.btn.ghost-light { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); color: #fff; }
@media (max-width: 760px) {
  .rt-player { grid-template-columns: 1fr; min-height: 0; }
  .rt-figure { padding: 14px 14px 0; }
  .rt-figure .thumb { max-width: 170px; border-radius: 20px; }
  .rt-main { padding: 10px 16px 36px; gap: 8px; }
  .rt-clock { width: 146px; height: 146px; margin: 2px 0; }
  .rt-clock b { font-size: 44px; }
  .rt-cue { font-size: 14px; }
}
.rt-done-note { font-size: 13px; color: #cfa9a6 !important; margin-top: -4px; }

/* ───────────── QUICK WORKOUT (Hızlı antrenman) ───────────── */
.quick { display: grid; gap: 16px; }
.q-controls { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.q-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; }
.q-row > span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.q-row .seg { justify-self: start; }
.q-focus { display: flex; flex-wrap: wrap; gap: 6px; }
.q-focus .chip { cursor: pointer; padding: 6px 11px; font-size: 12.5px; border: 1px solid var(--line); }
.q-focus .chip:not(.on):hover { border-color: var(--brand-3); color: var(--brand); }
.q-focus .chip .i { width: 14px; height: 14px; }
.q-summary { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.q-map { background: var(--stage); border-radius: 16px; aspect-ratio: 1; display: grid; place-items: center; }
.q-map .thumb { width: 100%; height: 100%; object-fit: contain; }
.q-sum-copy { display: grid; gap: 6px; min-width: 0; }
.q-sum-copy h3 { font-size: 20px; }
.q-why { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.q-why li { display: flex; gap: 7px; align-items: flex-start; }
.q-why .i { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--brand); }
.q-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.q-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.q-list .thumb.mini { width: 48px; height: 48px; }
.q-name { display: grid; min-width: 0; }
.q-name a { font-weight: 800; }
.q-name a:hover { color: var(--brand); }
.q-name small { color: var(--ink-3); font-size: 12px; }
.q-dose { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-items: center; gap: 2px 6px; }
.q-dose b { min-width: 74px; text-align: center; font-variant-numeric: tabular-nums; }
.q-dose small { grid-column: 1 / -1; font-size: 11px; color: var(--ink-3); }
.q-acts { display: flex; gap: 4px; }
@media (max-width: 640px) {
  .q-row { grid-template-columns: 1fr; gap: 6px; }
  .q-summary { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .q-list li { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px 10px; }
  .q-list .thumb.mini { width: 40px; height: 40px; }
  .q-dose { grid-column: 2 / 3; justify-self: start; grid-template-columns: auto auto auto auto; }
  .q-dose small { grid-column: auto; }
  .q-acts { grid-column: 3; grid-row: 1 / 3; flex-direction: column; }
  .q-foot .btn { flex: 1 1 auto; }
}
.start-card.quick { background: linear-gradient(135deg, var(--brand-soft), var(--surface) 75%); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }

/* ───────────── COACH (Koç notları) ───────────── */
.insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.insight-grid.wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.insight { display: flex; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); min-width: 0; }
.ins-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.ins-ic .i { width: 18px; height: 18px; }
.insight.bad { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.insight.warn { border-color: color-mix(in srgb, var(--warn) 32%, var(--line)); }
.insight.bad .ins-ic { background: var(--bad-soft); color: var(--bad); }
.insight.warn .ins-ic { background: var(--warn-soft); color: var(--warn); }
.insight.info .ins-ic { background: var(--info-soft); color: var(--info); }
.insight.good .ins-ic { background: var(--ok-soft); color: var(--ok); }
.ins-body { display: grid; gap: 5px; align-content: start; min-width: 0; }
.ins-top { display: flex; gap: 8px; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.insight.bad .ins-tone { color: var(--bad); }
.insight.warn .ins-tone { color: var(--warn); }
.insight.info .ins-tone { color: var(--info); }
.insight.good .ins-tone { color: var(--ok); }
.ins-cat { color: var(--ink-3); }
.ins-body h4 { font: 800 15px/1.3 var(--font-head); }
.ins-body p { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.ins-body .btn { justify-self: start; margin-top: 4px; }
.ins-body .btn .i { width: 14px; height: 14px; }
.coach-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.coach-summary h2 { font-size: 24px; margin: 2px 0 4px; }
.coach-summary p { max-width: 640px; font-size: 13px; }
.coach-badge { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 30%, transparent); }
.coach-badge .i { width: 30px; height: 30px; }
.coach-cat { display: flex; align-items: center; gap: 9px; }
.coach-cat .i { color: var(--brand); }
@media (max-width: 760px) { .coach-summary { grid-template-columns: auto minmax(0, 1fr); } .coach-summary .chips { grid-column: 1 / -1; } .insight-grid.wide { grid-template-columns: 1fr; } }
.insight-list { display: grid; gap: 8px; }
.insight-list .insight { padding: 12px 14px; align-items: center; }
.insight-list .ins-body { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 3px; }
.insight-list .ins-top, .insight-list h4, .insight-list p { grid-column: 1; }
.insight-list .ins-body .btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; white-space: nowrap; }
@media (max-width: 640px) { .insight-list .ins-body { grid-template-columns: 1fr; } .insight-list .ins-body .btn { grid-column: 1; grid-row: auto; justify-self: start; } }
.rt-stage { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; border-radius: 26px; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, rgba(255, 244, 239, .96), rgba(250, 228, 220, .88) 65%, rgba(240, 210, 200, .8)); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.rt-stage .anim-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt-move-play { position: relative; padding: 0; border: 0; background: none; border-radius: 10px; cursor: pointer; }
.rt-move-play .anim-badge { right: -4px; bottom: -4px; width: 22px; height: 22px; }
@media (max-width: 760px) { .rt-stage { max-width: 190px; border-radius: 20px; } }
.quiz-anim { padding: 0; overflow: hidden; display: flex; }
.quiz-anim .anim { flex: 1; min-height: 380px; border-radius: inherit; }