@charset "UTF-8";
/*
 * 自由潛水呼吸訓練器（trainer.php）
 *
 * 視覺方向：沿用舊站訓練器的沉浸感（深海玻璃卡、呼吸光球、柔和光暈），
 * 配色改成 ANPING 品牌：近黑深海底 ＋ 品牌紅 #e50012 當行動色；
 * 藍綠只出現在呼吸光球與進度條這類「呼吸引導」的光感上，不做大面積綠色。
 * 訓練區塊不論網站深淺色主題都固定深色，網站頁首頁尾照常跟主題。
 */

.tr-stage,
.tr-dock,
.tr-modal,
.tr-toast {
  --t-bg:      #0b0d10;   /* 與全站頁首同一個近黑 */
  --t-bg-2:    #14171c;
  --t-glass-1: rgb(255 255 255 / .045);
  --t-glass-2: rgb(255 255 255 / .08);
  --t-glass-3: rgb(255 255 255 / .12);
  --t-glass-hi:rgb(255 255 255 / .18);
  --t-line:    rgb(255 255 255 / .12);
  --t-line-2:  rgb(255 255 255 / .24);
  --t-ink:     #f3f7fb;
  --t-ink-2:   #d3dde7;
  --t-mute:    #9aacbd;   /* 對 #0a1220 約 7.6:1 */
  --t-red:     #e50012;
  --t-red-2:   #b8000e;
  --t-red-hi:  #ff2d3d;
  --t-red-ink: #ff6b76;   /* 紅字放深底 5.6:1 */
  --t-cyan:    #5dd3ff;
  --t-aqua:    #7df2d2;
  --t-amber:   #ffb86b;
  --t-amber-ink:#ffd49e;
  --t-blur:    blur(16px) saturate(140%);
  --t-ease:    cubic-bezier(.2, .8, .2, 1);
  color: var(--t-ink);
}

/* ------------------------------------------------------------------ 舞台 */
.tr-stage {
  /* 不設 overflow：overflow:hidden 會讓右欄 sticky 失效，也會被 scrollIntoView 橫向捲動 */
  position: relative; isolation: isolate;
  background:
    radial-gradient(1200px 520px at 85% -8%, rgb(229 0 18 / .16), transparent 60%),
    radial-gradient(900px 600px at 10% 30%, rgb(93 211 255 / .08), transparent 60%),
    linear-gradient(180deg, #101218 0%, var(--t-bg) 40%, #08090c 100%);
  padding-block: var(--space-4) var(--space-16);
}
/* 水體紋理＋漂浮光點（舊版 body::before/after） */
.tr-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 50% 12%, rgb(255 255 255 / .06), transparent 30%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .012) 0 1px, transparent 1px 3px);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
}
.tr-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background:
    radial-gradient(2px 2px at 14% 22%, rgb(255 255 255 / .45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 32% 68%, rgb(159 230 255 / .4) 50%, transparent 51%),
    radial-gradient(2px 2px at 68% 14%, rgb(255 255 255 / .35) 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 88%, rgb(125 242 210 / .45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 48% 44%, rgb(255 255 255 / .3) 50%, transparent 51%),
    radial-gradient(2px 2px at 92% 56%, rgb(159 230 255 / .35) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 72%, rgb(255 255 255 / .4) 50%, transparent 51%);
  background-repeat: no-repeat;
  animation: trFloat 22s ease-in-out infinite;
}
/* 用 background-position 飄動，不用 transform，才不會撐出可捲動範圍 */
@keyframes trFloat { 0%, 100% { background-position: 0 0; } 50% { background-position: 8px -22px; } }

.trainer-page [hidden], .tr-dock [hidden] { display: none !important; }
.tr-stage a { color: var(--t-ink-2); }
.tr-stage a:hover { color: #fff; }
.tr-stage :focus-visible, .tr-dock :focus-visible, .tr-modal :focus-visible {
  outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgb(229 0 18 / .55);
}
.tr-stage .breadcrumb, .tr-stage .breadcrumb span { color: var(--t-mute); }
.tr-stage .breadcrumb [aria-current] { color: var(--t-ink); }
.tr-stage .page-head h1 { color: #fff; }
.tr-stage .page-head .eyebrow { color: var(--t-red-ink); }
.tr-stage .page-head .eyebrow::before { background: var(--t-red); }
.tr-stage .section__lead { color: var(--t-ink-2); }
.tr-stage .banner { background: var(--t-bg-2); box-shadow: 0 24px 60px rgb(0 0 0 / .45); border: 1px solid var(--t-line); }
.tr-stage .alertbox { background: rgb(255 184 107 / .1); border-color: rgb(255 184 107 / .4); color: var(--t-amber-ink); }

/* ---------------------------------------------------------- 語言與常亮 */
.tr-head-tools { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.tr-lang {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--t-glass-1); border: 1px solid var(--t-line);
  -webkit-backdrop-filter: var(--t-blur); backdrop-filter: var(--t-blur);
}
.tr-lang__btn {
  min-height: 40px; padding: 8px 14px; border: 0; border-radius: 999px; background: transparent;
  color: var(--t-mute); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background-color .22s var(--t-ease), color .22s var(--t-ease), box-shadow .22s var(--t-ease), transform .22s var(--t-ease);
}
.tr-lang__btn:hover { color: #fff; }
.tr-lang__btn.is-active {
  background: linear-gradient(140deg, var(--t-red-hi) 0%, var(--t-red) 55%, var(--t-red-2) 100%); color: #fff;
  box-shadow: 0 8px 22px rgb(229 0 18 / .35), inset 0 1px 0 rgb(255 255 255 / .35);
}
.tr-wake {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--t-line); background: var(--t-glass-1); color: var(--t-mute);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  -webkit-backdrop-filter: var(--t-blur); backdrop-filter: var(--t-blur);
}
.tr-wake.is-on { color: var(--t-aqua); border-color: rgb(125 242 210 / .35); background: rgb(125 242 210 / .08); }
body.training-active .tr-wake.is-on { animation: trWakePulse 2.6s ease-in-out infinite; }
body.training-active .tr-wake:not(.is-on) { color: #ffd5d8; border-color: rgb(255 107 118 / .55); background: rgb(229 0 18 / .16); animation: trWakeBlink 1.4s ease-in-out infinite; }
@keyframes trWakePulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(125 242 210 / 0); } 50% { box-shadow: 0 0 0 5px rgb(125 242 210 / .18); } }
@keyframes trWakeBlink { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* ------------------------------------------------------------ 快速數據 */
.tr-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.tr-metric {
  display: block; text-align: left; min-width: 0;
  padding: 14px 16px; border-radius: 20px; border: 1px solid var(--t-line);
  background: linear-gradient(180deg, var(--t-glass-2), var(--t-glass-1)); color: var(--t-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
  -webkit-backdrop-filter: var(--t-blur); backdrop-filter: var(--t-blur);
  transition: transform .22s var(--t-ease), background-color .22s var(--t-ease), border-color .22s var(--t-ease), box-shadow .22s var(--t-ease);
}
.tr-metric small { display: block; color: var(--t-mute); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tr-metric b { display: block; margin-top: 6px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tr-metric--btn { font: inherit; cursor: pointer; }
.tr-metric--btn em { display: block; margin-top: 6px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--t-red-ink); }
.tr-metric--btn:hover { transform: translateY(-2px); border-color: rgb(229 0 18 / .45); box-shadow: 0 14px 30px rgb(0 0 0 / .35), 0 0 0 1px rgb(229 0 18 / .2); }
.tr-metric--btn:active { transform: scale(.98); }

/* ---------------------------------------------------------------- 版面 */
.tr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: var(--space-5); align-items: start; }
.tr-stack { display: grid; gap: var(--space-4); min-width: 0; }
.tr-side { position: sticky; top: calc(var(--header-h) + 16px); min-width: 0; }

.tr-card {
  position: relative; min-width: 0;
  padding: 18px 20px; border-radius: 24px; border: 1px solid var(--t-line);
  background: linear-gradient(180deg, var(--t-glass-2), var(--t-glass-1));
  box-shadow: 0 18px 50px rgb(0 0 0 / .32), inset 0 1px 0 rgb(255 255 255 / .06);
  -webkit-backdrop-filter: var(--t-blur); backdrop-filter: var(--t-blur);
}
.tr-card__h { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-4); font-size: 17px; font-weight: 800; color: #fff; }
.tr-step {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(140deg, var(--t-red-hi), var(--t-red) 60%, var(--t-red-2)); color: #fff;
  font-size: 13px; font-weight: 800; box-shadow: 0 6px 16px rgb(229 0 18 / .35);
}
.tr-sub { margin: var(--space-3) 0 var(--space-2); font-size: 13px; color: var(--t-mute); }
.tr-sub--label { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--t-ink-2); }
.tr-note { margin: var(--space-3) 0 0; font-size: 12.5px; line-height: 1.6; color: var(--t-mute); }
.tr-note--center { text-align: center; }

.tr-locknote {
  display: none; margin: 0; padding: 10px 14px; border-radius: 14px; font-size: 13px; font-weight: 600;
  color: var(--t-amber-ink); background: rgb(255 184 107 / .1); border: 1px solid rgb(255 184 107 / .3);
}
body.training-active .tr-locknote { display: block; }
body.training-active .config-lockable { opacity: .5; filter: saturate(.6); }
body.training-active .config-lockable input,
body.training-active .config-lockable button,
body.training-active .config-lockable details,
body.training-active .config-lockable label { pointer-events: none; }

/* ---------------------------------------------------------------- 模式 */
.tr-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.tr-mode {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; min-height: 76px;
  padding: 12px 14px; border-radius: 18px; border: 1px solid var(--t-line); cursor: pointer;
  background: linear-gradient(180deg, var(--t-glass-2), var(--t-glass-1));
  transition: transform .22s var(--t-ease), background-color .22s var(--t-ease), border-color .22s var(--t-ease), box-shadow .22s var(--t-ease);
}
.tr-mode::after { content: ""; position: absolute; width: 90px; height: 90px; right: -30px; bottom: -34px; border-radius: 50%; background: rgb(255 255 255 / .04); pointer-events: none; transition: background-color .24s; }
.tr-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tr-mode:hover { transform: translateY(-2px); background: var(--t-glass-3); border-color: var(--t-line-2); }
.tr-mode:active { transform: scale(.98); }
.tr-mode.is-active { transform: translateY(-2px); border-color: rgb(255 45 61 / .55); background: linear-gradient(180deg, rgb(229 0 18 / .16), rgb(229 0 18 / .04)); box-shadow: 0 16px 36px rgb(229 0 18 / .18), inset 0 1px 0 rgb(255 255 255 / .08); }
.tr-mode.is-active::after { background: rgb(229 0 18 / .14); }
.tr-mode:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.tr-mode__ico { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 22px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .18); }
.tr-mode--co2 .tr-mode__ico { background: linear-gradient(135deg, rgb(255 126 139 / .3), rgb(255 184 107 / .16)); }
.tr-mode--o2 .tr-mode__ico { background: linear-gradient(135deg, rgb(93 211 255 / .3), rgb(125 242 210 / .14)); }
.tr-mode__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tr-mode__txt strong { font-size: 16px; font-weight: 800; color: #fff; }
.tr-mode__txt small { font-size: 12px; font-weight: 600; color: var(--t-mute); }
.tr-mode--co2 small { color: #ffc0c6; }
.tr-mode--o2 small { color: #a9e3f3; }

/* ---------------------------------------------------------------- 欄位 */
.tr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.tr-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tr-field { min-width: 0; }
.tr-field label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--t-ink-2); }
.tr-field output { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.tr-field--big { padding: 14px 16px; border-radius: 20px; border: 1px solid var(--t-line); background: rgb(0 0 0 / .28); box-shadow: inset 0 1px 0 rgb(255 255 255 / .05); }
.tr-bignum {
  display: block; width: 100%; margin: 0 0 12px; padding: 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent;
  color: #fff; font: inherit; font-size: 34px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.tr-bignum::-webkit-outer-spin-button, .tr-bignum::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tr-bignum:focus { border-bottom-color: var(--t-red-hi); outline: none; }
.tr-stage .input { background: rgb(0 0 0 / .3); color: #fff; border-color: var(--t-line-2); border-radius: 12px; font-size: 16px; }

/* iOS 風格滑桿：已拖過的一段是品牌紅 */
.tr-range {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: 10px 0; border-radius: 999px; outline: none;
  background: linear-gradient(90deg, var(--t-red-hi) 0, var(--t-red) var(--fill, 50%), rgb(255 255 255 / .14) var(--fill, 50%), rgb(255 255 255 / .14) 100%);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .35);
}
.tr-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #fff, #f2f6fa 65%, #d9e2ea); border: 1px solid rgb(0 0 0 / .12);
  box-shadow: 0 6px 18px rgb(0 0 0 / .45), inset 0 1px 0 #fff;
}
.tr-range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; background: radial-gradient(circle at 35% 30%, #fff, #d9e2ea); box-shadow: 0 6px 18px rgb(0 0 0 / .45); }
.tr-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgb(229 0 18 / .6), 0 6px 18px rgb(0 0 0 / .45); }

.tr-chips { gap: var(--space-2); }
.tr-stage .tr-chips .chip {
  min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--t-line); cursor: pointer;
  background: var(--t-glass-1); color: var(--t-ink); font: inherit; font-size: 14px; font-weight: 700;
  transition: transform .2s var(--t-ease), background-color .2s var(--t-ease), box-shadow .2s var(--t-ease);
}
.tr-stage .tr-chips .chip:hover { background: var(--t-glass-3); transform: translateY(-1px); }
.tr-stage .tr-chips .chip:active { transform: scale(.96); }
.tr-stage .tr-chips .chip.is-on { background: linear-gradient(140deg, var(--t-red-hi), var(--t-red) 55%, var(--t-red-2)); border-color: transparent; color: #fff; box-shadow: 0 10px 24px rgb(229 0 18 / .3), inset 0 1px 0 rgb(255 255 255 / .3); }

/* 折疊區 */
.tr-details { border: 1px solid var(--t-line); border-radius: 18px; background: var(--t-glass-1); }
.tr-details > summary {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 52px; padding: 12px 44px 12px 16px; list-style: none; cursor: pointer; font-weight: 700; color: var(--t-ink); border-radius: 18px;
}
.tr-details > summary::-webkit-details-marker { display: none; }
.tr-details > summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--t-mute); border-bottom: 2px solid var(--t-mute); transform: rotate(45deg); transition: transform .22s var(--t-ease); }
.tr-details[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.tr-details > summary:hover { background: rgb(255 255 255 / .04); }
.tr-details__body { padding: 0 16px 16px; }
.tr-card > .tr-details + .tr-details, .tr-card > .tr-fields + .tr-details { margin-top: var(--space-3); }

.tr-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.tr-mini__f label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--t-mute); }
.tr-mini__f .input { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

/* 開關（iOS 樣式） */
.tr-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
.tr-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 54px;
  padding: 10px 14px; border-radius: 16px; border: 1px solid var(--t-line); background: var(--t-glass-1);
  font-size: 14px; font-weight: 700; color: var(--t-ink); cursor: pointer; transition: background-color .2s;
}
.tr-toggle:hover { background: var(--t-glass-2); }
.tr-toggle span { order: 1; }
.tr-toggle input {
  order: 2; -webkit-appearance: none; appearance: none; flex: 0 0 auto; position: relative; width: 48px; height: 28px; margin: 0;
  border-radius: 999px; background: rgb(255 255 255 / .18); cursor: pointer; transition: background-color .22s var(--t-ease);
}
.tr-toggle input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .35); transition: transform .22s var(--t-ease); }
.tr-toggle input:checked { background: linear-gradient(140deg, var(--t-red-hi), var(--t-red)); }
.tr-toggle input:checked::before { transform: translateX(20px); }

.tr-stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px; }
.tr-stepper button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--t-line); background: var(--t-glass-2); color: #fff; font-size: 20px; cursor: pointer; transition: background-color .15s, transform .15s; }
.tr-stepper button:hover { background: var(--t-glass-hi); }
.tr-stepper button:active { transform: scale(.94); }
.tr-stepper__v { text-align: center; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tr-stepper__v small { font-size: 12px; font-weight: 600; color: var(--t-mute); }

/* 提示音與背景音的圖示按鈕 */
.tr-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.tr-pills--bgm { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tr-pill {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 68px; padding: 8px 4px;
  border-radius: 16px; border: 1px solid var(--t-line); background: var(--t-glass-1); color: var(--t-ink);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: transform .2s var(--t-ease), background-color .2s var(--t-ease), border-color .2s var(--t-ease), box-shadow .2s var(--t-ease);
}
.tr-pill__emoji { font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .3)); transition: transform .25s var(--t-ease); }
.tr-pill:hover { transform: translateY(-2px); background: var(--t-glass-3); border-color: var(--t-line-2); box-shadow: 0 12px 26px rgb(0 0 0 / .35); }
.tr-pill:hover .tr-pill__emoji { transform: scale(1.12); }
.tr-pill:active { transform: scale(.96); }
.tr-pill.is-active { border-color: rgb(255 45 61 / .6); background: linear-gradient(180deg, rgb(229 0 18 / .2), rgb(229 0 18 / .06)); box-shadow: 0 10px 24px rgb(229 0 18 / .2), inset 0 1px 0 rgb(255 255 255 / .1); color: #fff; }
.tr-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

.tr-bgmfile { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 8px 10px 8px 14px; border-radius: 14px; background: rgb(125 242 210 / .08); border: 1px solid rgb(125 242 210 / .25); font-size: 13px; }
.tr-bgmfile__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-bgmfile__clear { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--t-line); background: var(--t-glass-2); color: #fff; cursor: pointer; }
.tr-bgmfile__clear:hover { background: rgb(229 0 18 / .3); }
.tr-card .tr-field + .tr-note, .tr-bgmfile + .tr-field { margin-top: var(--space-3); }

/* ---------------------------------------------------------------- 按鈕 */
.tr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 12px 16px;
  border: 1px solid transparent; border-radius: 18px; font: inherit; font-size: 15px; font-weight: 800; line-height: 1; letter-spacing: .01em;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform .2s var(--t-ease), box-shadow .2s var(--t-ease), background-color .2s var(--t-ease), opacity .2s;
}
.tr-btn__ico { font-size: 20px; line-height: 1; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .25)); }
.tr-btn__label { white-space: nowrap; }
.tr-btn:hover:not(:disabled) { transform: translateY(-2px); }
.tr-btn:active:not(:disabled) { transform: scale(.97); }
.tr-btn:disabled { opacity: .42; cursor: not-allowed; }
.tr-btn--primary {
  color: #fff; background: linear-gradient(135deg, var(--t-red-hi) 0%, var(--t-red) 48%, var(--t-red-2) 100%);
  box-shadow: 0 14px 34px rgb(229 0 18 / .34), inset 0 1px 0 rgb(255 255 255 / .35);
}
.tr-btn--primary:hover:not(:disabled) { box-shadow: 0 20px 44px rgb(229 0 18 / .45), inset 0 1px 0 rgb(255 255 255 / .4); }
.tr-btn--dark { color: #fff; background: linear-gradient(180deg, var(--t-glass-3), var(--t-glass-2)); border-color: var(--t-line); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); }
.tr-btn--dark:hover:not(:disabled) { background: var(--t-glass-hi); box-shadow: 0 14px 30px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .12); }
.tr-btn--orange { color: #2e1406; background: linear-gradient(135deg, #ffe3b0, #ffbf5e 50%, #ff9b66); box-shadow: 0 12px 28px rgb(255 160 80 / .28), inset 0 1px 0 rgb(255 255 255 / .5); }
.tr-btn--red { color: var(--t-red-ink); background: rgb(229 0 18 / .12); border-color: rgb(255 45 61 / .55); }
.tr-btn--red:hover:not(:disabled) { color: #fff; background: rgb(229 0 18 / .32); box-shadow: 0 14px 30px rgb(229 0 18 / .25); }
.tr-btn--full { grid-column: 1 / -1; }
.tr-btn--sm { min-height: 44px; font-size: 13px; padding: 10px 14px; }
.tr-btn.is-hidden { display: none !important; }

/* ------------------------------------------------------------------ 課表 */
.tr-plan__title { margin: 0; font-weight: 800; font-size: 15px; color: #fff; }
.tr-plan__sub { margin: 4px 0 0; font-size: 13px; color: var(--t-mute); }
.tr-planlist { display: grid; gap: 8px; margin-top: var(--space-3); max-height: 360px; overflow: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .2) transparent; }
.tr-planrow { display: grid; grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--t-line); background: var(--t-glass-1); transition: background-color .2s, border-color .2s; }
.tr-planrow__n { font-size: 13px; font-weight: 800; color: var(--t-mute); }
.tr-planrow div b { display: block; font-size: 11.5px; font-weight: 700; color: var(--t-mute); }
.tr-planrow div span { display: block; margin-top: 2px; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; }
.tr-planrow.is-current { border-color: rgb(93 211 255 / .55); background: rgb(93 211 255 / .12); box-shadow: 0 0 0 1px rgb(93 211 255 / .2); }
.tr-confirm { display: none; margin-top: var(--space-3); padding: 14px; border-radius: 18px; border: 1px solid rgb(255 184 107 / .35); background: linear-gradient(180deg, rgb(255 184 107 / .12), rgb(255 184 107 / .04)); }
.tr-confirm.is-shown { display: block; animation: trRise .26s var(--t-ease) both; }
.tr-confirm__title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-weight: 800; }
.tr-confirm__tag { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; color: #2e1406; background: linear-gradient(135deg, #ffe3b0, var(--t-amber)); }
.tr-confirm p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--t-ink-2); }
@keyframes trRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tr-plan.review-ready { border-color: rgb(255 184 107 / .45); box-shadow: 0 0 0 6px rgb(255 184 107 / .06), 0 18px 50px rgb(0 0 0 / .32); }

/* -------------------------------------------------------------- 計時器 */
.tr-timer {
  padding: 18px 20px 20px;
  background:
    radial-gradient(circle at 50% 20%, rgb(93 211 255 / .16), transparent 42%),
    radial-gradient(circle at 50% 110%, rgb(229 0 18 / .12), transparent 50%),
    linear-gradient(180deg, rgb(18 26 36 / .92), rgb(8 9 12 / .94));
  border-color: var(--t-line-2);
  box-shadow: 0 30px 80px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .08);
}
.tr-timer.awaiting-confirm { border-color: rgb(255 184 107 / .45); box-shadow: 0 24px 70px rgb(255 184 107 / .12), 0 30px 80px rgb(0 0 0 / .5); }

.tr-orb {
  position: relative; width: min(256px, 70vw); aspect-ratio: 1 / 1; margin: 30px auto 24px; border-radius: 50%;
  background:
    radial-gradient(circle at 48% 30%, rgb(255 255 255 / .95) 0%, rgb(199 247 255 / .8) 11%, rgb(93 211 255 / .5) 28%, rgb(62 110 255 / .24) 56%, rgb(255 255 255 / .04) 74%),
    conic-gradient(from 210deg, rgb(93 211 255 / .42), rgb(125 242 210 / .3), rgb(110 140 255 / .34), rgb(93 211 255 / .42));
  box-shadow: inset 0 -38px 70px rgb(0 0 0 / .35), 0 28px 80px rgb(93 211 255 / .22), 0 0 0 1px rgb(255 255 255 / .12);
  animation: trOrbIdle 6s ease-in-out infinite;
  transition: filter .6s ease;
}
.tr-orb::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .22); }
.tr-orb::after { content: ""; position: absolute; width: 18%; height: 18%; left: 22%; top: 17%; border-radius: 50%; background: rgb(255 255 255 / .35); filter: blur(3px); }
.tr-orb__ring { position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgb(93 211 255 / .42); animation: trRing 5s ease-in-out infinite; }
.tr-orb__in { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; pointer-events: none; text-align: center; }
.tr-orb__phase {
  margin: 0; max-width: 92%; padding: 5px 14px; border-radius: 999px; font-size: clamp(14px, 3.8vw, 18px); font-weight: 800; letter-spacing: .14em; white-space: nowrap;
  color: #fff; background: rgb(3 14 28 / .42); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-shadow: 0 1px 6px rgb(0 20 40 / .7);
  transition: color .35s ease;
}
.tr-orb__time {
  margin: 0; font-family: var(--font-word); font-size: clamp(50px, 14vw, 66px); font-weight: 800; font-style: normal; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 3px 10px rgb(0 30 60 / .55);
}
/* 呼吸期：光球隨呼吸膨脹收縮（3.2 秒一個起伏） */
.tr-timer.running:not(.hold) .tr-orb { animation: trOrbBreathe 3.2s ease-in-out infinite; }
.tr-timer.running:not(.hold) .tr-orb__ring { animation-duration: 3.2s; }
.tr-timer.running:not(.hold) .tr-orb__phase { animation: trPhaseBreathe 3.2s ease-in-out infinite; color: #e4f7ff; }
/* 閉氣期：慢而穩、暖色 */
.tr-timer.hold .tr-orb {
  animation: trOrbHold 7s ease-in-out infinite;
  box-shadow: inset 0 -38px 70px rgb(0 0 0 / .38), 0 28px 90px rgb(255 160 80 / .22), 0 0 0 1px rgb(255 214 170 / .2);
}
.tr-timer.hold .tr-orb__ring { animation-duration: 7s; border-color: rgb(255 184 107 / .6); }
.tr-timer.hold .tr-orb__phase { animation: trPhaseHold 7s ease-in-out infinite; color: #ffe2bd; background: rgb(40 18 2 / .5); box-shadow: inset 0 0 0 1px rgb(255 184 107 / .35); text-shadow: 0 1px 6px rgb(40 18 0 / .7); }
.tr-timer.awaiting-confirm .tr-orb__phase { color: var(--t-amber-ink); }
.tr-timer.done .tr-orb__ring { border-color: rgb(125 242 210 / .6); animation-duration: 4s; }
/* 暫停：動畫停在當下，光球變暗，跟計時一起凍結 */
.tr-timer.paused .tr-orb, .tr-timer.paused .tr-orb__ring, .tr-timer.paused .tr-orb__phase { animation-play-state: paused; }
.tr-timer.paused .tr-orb { filter: saturate(.55) brightness(.8); }
.tr-timer.paused .tr-orb__phase { color: var(--t-ink-2); }
@keyframes trOrbIdle { 0%, 100% { transform: scale(.985); } 50% { transform: scale(1.01); } }
@keyframes trOrbBreathe { 0%, 100% { transform: scale(.95); } 50% { transform: scale(1.05); } }
@keyframes trOrbHold { 0%, 100% { transform: scale(.985); } 50% { transform: scale(1.02); } }
@keyframes trRing { 0%, 100% { transform: scale(.94); opacity: .45; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes trPhaseBreathe { 0%, 100% { transform: scale(.92); opacity: .82; letter-spacing: .1em; } 50% { transform: scale(1.08); opacity: 1; letter-spacing: .2em; } }
@keyframes trPhaseHold { 0%, 100% { transform: scale(.97); opacity: .88; letter-spacing: .14em; } 50% { transform: scale(1.04); opacity: 1; letter-spacing: .18em; } }

.tr-progress { height: 10px; margin: 6px 0 10px; border-radius: 999px; overflow: hidden; background: rgb(255 255 255 / .1); box-shadow: inset 0 1px 2px rgb(0 0 0 / .35); }
.tr-progress__bar { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--t-cyan), var(--t-aqua)); box-shadow: 0 0 12px rgb(93 211 255 / .5); transition: width .18s linear; }
.tr-timer.hold .tr-progress__bar { background: linear-gradient(90deg, #ffd49e, var(--t-amber), #ff8f6b); box-shadow: 0 0 12px rgb(255 184 107 / .45); }
.tr-round { margin: 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--t-ink-2); font-variant-numeric: tabular-nums; }
.tr-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: var(--space-4); }
.tr-wakefail { display: none; align-items: center; gap: 10px; margin-bottom: 10px; padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; font-weight: 600; color: #ffd5d8; background: rgb(229 0 18 / .18); border: 1px solid rgb(255 45 61 / .5); }
.tr-wakefail span:first-child { font-size: 22px; flex: 0 0 auto; }
body.training-active .tr-wakefail.is-shown { display: flex; }

/* ---------------------------------------------------------------- 紀錄 */
.tr-log { padding: 8px; }
.tr-log .tr-details { border: 0; background: transparent; }
.tr-log__title { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: #fff; }
.tr-log__sum { font-size: 12.5px; font-weight: 700; color: var(--t-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-stats { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.tr-stats li { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border-radius: 16px; border: 1px solid var(--t-line); background: var(--t-glass-1); text-align: center; }
.tr-stats strong { font-size: 22px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.tr-stats span { font-size: 11.5px; font-weight: 700; color: var(--t-mute); }
.tr-heat { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 5px; }
.tr-heat__cell { aspect-ratio: 1 / 1; border-radius: 5px; background: rgb(255 255 255 / .07); transition: transform .15s; }
.tr-heat__cell:hover { transform: scale(1.18); }
.tr-heat__cell[data-intensity="1"] { background: rgb(229 0 18 / .35); }
.tr-heat__cell[data-intensity="2"] { background: rgb(229 0 18 / .62); }
.tr-heat__cell[data-intensity="3"] { background: var(--t-red-hi); box-shadow: 0 0 10px rgb(229 0 18 / .45); }
.tr-loglist { display: grid; gap: 6px; }
.tr-log__empty { margin: 0; padding: 14px; border-radius: 14px; border: 1px dashed var(--t-line-2); color: var(--t-mute); font-size: 13px; text-align: center; }
.tr-entry { display: grid; grid-template-columns: 58px auto minmax(0, 1fr) 22px 34px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--t-line); background: var(--t-glass-1); transition: background-color .15s; }
.tr-entry:hover { background: var(--t-glass-2); }
.tr-entry__date b { display: block; font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.tr-entry__date small { font-size: 11.5px; color: var(--t-mute); }
.tr-entry__mode { font-size: 13px; font-weight: 800; white-space: nowrap; }
.tr-entry__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; color: var(--t-ink-2); min-width: 0; }
.tr-entry__meta small { color: var(--t-mute); }
.tr-entry__status { font-weight: 900; text-align: center; }
.tr-entry.is-done .tr-entry__status { color: var(--t-aqua); }
.tr-entry.is-aborted .tr-entry__status { color: var(--t-amber); }
.tr-entry__del { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--t-line); background: transparent; color: var(--t-mute); font-size: 18px; cursor: pointer; }
.tr-entry__del:hover { background: rgb(229 0 18 / .25); color: #fff; }
.tr-log__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.tr-log__foot .tr-note { margin: 0; }

/* ------------------------------------------------------------ 安全 ribbon */
.tr-ribbon { margin-top: var(--space-6); display: grid; gap: 10px; }
.tr-ribbon__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 18px; font-size: 14px; font-weight: 600; line-height: 1.55; color: var(--t-amber-ink); background: linear-gradient(180deg, rgb(255 184 107 / .14), rgb(255 184 107 / .05)); border: 1px solid rgb(255 184 107 / .32); }
.tr-ribbon__bar > span:first-child { font-size: 20px; }
.tr-ribbon__txt { flex: 1 1 200px; }
.tr-ribbon__link { min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgb(255 184 107 / .5); background: rgb(255 184 107 / .12); color: var(--t-amber-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .18s; }
.tr-ribbon__link:hover { background: rgb(255 184 107 / .24); }
.tr-ribbon__meta { margin: 0; text-align: center; font-size: 12px; color: var(--t-mute); }

/* ------------------------------------------------------------ 手機懸浮列 */
.tr-dock { display: none; }

/* ---------------------------------------------------------------- 提示 */
.tr-toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 120; max-width: calc(100vw - 32px);
  padding: 13px 18px; border-radius: 999px; border: 1px solid var(--t-line-2);
  background: rgb(11 13 16 / .94); color: #fff; font-size: 14px; font-weight: 700; text-align: center;
  box-shadow: 0 20px 44px rgb(0 0 0 / .45); pointer-events: none; opacity: 0;
  transform: translate(-50%, 30px); transition: opacity .28s var(--t-ease), transform .28s var(--t-ease);
  -webkit-backdrop-filter: var(--t-blur); backdrop-filter: var(--t-blur);
}
.tr-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- 視窗 */
body.tr-body-locked { overflow: hidden; }
.tr-modal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(2 5 10 / .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: trFade .25s ease both; }
.tr-modal[hidden] { display: none; }
@keyframes trFade { from { opacity: 0; } to { opacity: 1; } }
.tr-modal__panel {
  width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  padding: 22px; border-radius: 26px; border: 1px solid var(--t-line-2);
  background: linear-gradient(180deg, #16191f, #0b0d10); box-shadow: 0 40px 100px rgb(0 0 0 / .6);
  animation: trPop .3s var(--t-ease) both;
}
@supports not (height: 100dvh) { .tr-modal__panel { max-height: calc(100vh - 32px); } }
@keyframes trPop { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
.tr-modal__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: var(--space-4); }
.tr-modal__ico { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 26px; background: rgb(229 0 18 / .16); border: 1px solid rgb(255 45 61 / .4); }
.tr-modal h2 { margin: 0 0 6px; font-size: 22px; color: #fff; }
.tr-modal p { margin: 0; color: var(--t-ink-2); font-size: 14px; line-height: 1.65; }
.tr-hl { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.tr-hl li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 16px; border: 1px solid var(--t-line); background: var(--t-glass-1); }
.tr-hl li > span:first-child { font-size: 22px; line-height: 1; }
.tr-hl strong { display: block; font-size: 14px; color: #fff; }
.tr-hl small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--t-mute); line-height: 1.5; }
.tr-hl li.is-danger { border-color: rgb(255 45 61 / .5); background: rgb(229 0 18 / .12); }
.tr-hl li.is-warn { border-color: rgb(255 184 107 / .45); background: rgb(255 184 107 / .08); }
.tr-details--clauses { margin-bottom: var(--space-3); }
.tr-clauses h3 { margin: var(--space-3) 0 6px; font-size: 14px; color: #fff; }
.tr-clauses ul { margin: 0; padding-left: 1.2em; color: var(--t-ink-2); font-size: 13px; line-height: 1.7; }
.tr-modal__checks { display: grid; gap: 6px; margin: var(--space-3) 0; }
.tr-check { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--t-line); background: var(--t-glass-1); font-size: 14px; font-weight: 600; cursor: pointer; }
.tr-check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--t-red); }
.tr-check:has(input:checked) { border-color: rgb(255 45 61 / .45); background: rgb(229 0 18 / .1); }
.tr-modal .tr-btn--full { width: 100%; margin-top: var(--space-2); }
.tr-modal--sm .tr-modal__panel { width: min(440px, 100%); text-align: center; }
.tr-modal__bigico { font-size: 54px; line-height: 1; margin-bottom: 10px; animation: trPulse 2.4s ease-in-out infinite; }
@keyframes trPulse { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.08); opacity: 1; } }
.tr-checklist { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.tr-checklist li { padding: 10px 12px; border-radius: 12px; background: var(--t-glass-1); border: 1px solid var(--t-line); font-size: 13.5px; color: var(--t-ink-2); }

/* noscript 課表 */
.tr-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--t-ink); }
.tr-table th, .tr-table td { padding: 8px 12px; border-bottom: 1px solid var(--t-line); text-align: left; }

/* ---------------------------------------------------------------- 手機 */
@media (max-width: 1100px) {
  .tr-layout { grid-template-columns: minmax(0, 1fr) 360px; }
  .tr-pills--bgm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .tr-stage { padding-block: var(--space-3) var(--space-10); }
  .tr-head-tools { align-items: stretch; }
  .tr-lang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tr-wake { justify-content: center; }
  .tr-layout { grid-template-columns: minmax(0, 1fr); }
  .tr-side { position: relative; top: auto; }
  .tr-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-cta--desktop { display: none; }
  .tr-heat { grid-template-columns: repeat(15, minmax(0, 1fr)); }

  body.has-trdock { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .tr-dock {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
    padding: 12px max(14px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    background: linear-gradient(180deg, rgb(11 13 16 / .6), rgb(11 13 16 / .94) 30%, rgb(11 13 16 / .98));
    border-top: 1px solid var(--t-line);
    -webkit-backdrop-filter: var(--t-blur); backdrop-filter: var(--t-blur);
  }
  .tr-dock { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .tr-dock.training-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 還沒開始時暫停鍵按不動，手機上直接收起來，控制列維持一排 */
  .tr-dock:not(.training-controls) #mobilePauseBtn { display: none; }
  .tr-dock .tr-btn { min-height: 56px; padding-inline: 8px; }
  .tr-toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .tr-modes, .tr-fields, .tr-fields--3 { grid-template-columns: minmax(0, 1fr); }
  .tr-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tr-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-pills--bgm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-hl { grid-template-columns: minmax(0, 1fr); }
  .tr-card { padding: 16px; border-radius: 22px; }
  .tr-cta { grid-template-columns: minmax(0, 1fr); }
  .tr-entry { grid-template-columns: 52px auto minmax(0, 1fr) 34px; }
  .tr-entry__status { display: none; }
  .tr-planrow { grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr); }
  .tr-modal__panel { padding: 18px; border-radius: 22px; }
}
@media (max-width: 400px) {
  .tr-metric b { font-size: 20px; }
  .tr-dock .tr-btn__label { font-size: 13.5px; }
  .tr-dock .tr-btn__ico { font-size: 18px; }
  .tr-mode__ico { width: 40px; height: 40px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-stage::after, .tr-orb, .tr-orb__ring, .tr-orb__phase, .tr-wake, .tr-modal__bigico { animation: none !important; }
  .tr-btn, .tr-pill, .tr-mode, .tr-metric, .tr-toast { transition: none; }
}