/* 免登入試用頁與申請試用——疊在 landing.css 上，沿用它的面板、紅色與等寬讀數 */

.demo-hero .story-meta{margin-bottom:12px}
.demo-note{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:6px 12px;
  border-radius:9999px;font-size:12.5px;color:var(--body);background:var(--white);border:1px solid var(--rule)}
.demo-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--volt);flex:none}

.demo-sec{padding:40px 0 72px}
.demo-panel{padding:24px;border-radius:var(--r-card);background:var(--white);border:1px solid var(--rule)}
.demo-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px}
.demo-main,.demo-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.demo-h{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;margin-top:6px}
.demo-h b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;
  font-family:var(--mono);font-size:12px;color:var(--accent-ink);background:var(--accent)}
.demo-dim{font-size:13px;color:var(--mute);line-height:1.7;font-style:normal}
.demo-read{font-size:14px;color:var(--body)}
.demo-read b{font-family:var(--mono);font-size:18px;color:var(--accent-3);font-variant-numeric:tabular-nums}
.demo-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:16px 18px;
  border-radius:var(--r-ctl);background:var(--panel-2);border:1px solid var(--rule)}
.demo-big>span{flex:1 0 100%;font-size:12px;font-family:var(--mono);letter-spacing:.08em;color:var(--mute)}
.demo-big>b{font-family:var(--mono);font-size:clamp(30px,5vw,44px);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.demo-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* 表單元件：按得到、拉得動（手機一隻手） */
.demo-inp{width:100%;min-height:44px;padding:9px 12px;font:inherit;font-family:var(--mono);font-size:16px;
  color:var(--ink);background:var(--bg-1);border:1px solid var(--rule);border-radius:var(--r-ctl)}
.demo-inp:focus{outline:0;border-color:var(--accent-3);box-shadow:0 0 0 3px rgba(240,160,140,.18)}
.demo-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.demo-fields label,.demo-inline{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.demo-inline{max-width:160px}
.demo-panel input[type=range]{width:100%;height:44px;accent-color:var(--accent);cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button,.video-ctl button,.kind-chip{min-height:44px;padding:8px 14px;font:inherit;font-size:14px;font-weight:600;
  color:var(--ink);background:var(--panel-2);border:1px solid var(--rule);border-radius:var(--r-ctl);cursor:pointer;
  transition:border-color .16s,background .16s}
.chips button:hover,.video-ctl button:hover,.kind-chip:hover{border-color:var(--accent)}
.chips button[aria-pressed=true],.kind-chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.demo-table{width:100%;border-collapse:collapse;font-size:14px}
.demo-table th,.demo-table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--rule)}
.demo-table thead th{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--mute)}
.demo-table td b{font-family:var(--mono);font-size:16px;font-variant-numeric:tabular-nums}
.demo-table tr.hot td{background:var(--accent-soft)}

/* 柱狀：週負荷、急慢性 */
.log-bars,.acwr-weeks{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.log-bars li,.acwr-weeks li{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;color:var(--mute)}
.log-bars b,.acwr-weeks b{font-family:var(--mono);font-size:12px;color:var(--body)}
.bar,.d-bar{position:relative;display:block;width:100%;height:120px;border-radius:var(--r-ctl);background:var(--panel-2);overflow:hidden}
.bar i,.d-bar i{position:absolute;left:0;right:0;bottom:0;background:var(--rule2);transition:height .25s}
.today .bar i{background:var(--accent)}
.today b{color:var(--accent-3)!important}

/* 週課表 */
.plan-kinds{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.kind-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.kind-chip .k-sub{font-size:11.5px;font-weight:400;font-family:var(--mono);opacity:.75}
.plan-week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.plan-day{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;font:inherit;
  color:var(--ink);background:var(--panel-2);border:1px solid var(--rule);border-radius:var(--r-ctl);cursor:pointer;
  transition:border-color .16s,transform .16s}
.plan-day:hover{border-color:var(--accent);transform:translateY(-2px)}
.plan-day .d-label{font-family:var(--mono);font-size:12px;color:var(--mute)}
.plan-day .k-name{font-size:13px;font-weight:700;min-height:2.6em;text-align:center;line-height:1.3}
.plan-day .d-bar{height:64px;width:60%}
.plan-day[data-hi="1"] .d-bar i{background:var(--accent)}
.plan-day .d-load{font-size:11px;color:var(--mute)}
.plan-day .d-load b{font-family:var(--mono);color:var(--body)}
.plan-day.flash{animation:demo-flash .5s}
@keyframes demo-flash{from{box-shadow:0 0 0 3px var(--volt)}to{box-shadow:0 0 0 0 transparent}}
.plan-team-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.plan-team{border-collapse:collapse;font-size:12.5px;min-width:420px;width:100%}
.plan-team th,.plan-team td{padding:8px 6px;border-bottom:1px solid var(--rule);text-align:center;white-space:nowrap}
.plan-team tbody th{text-align:left;font-weight:600}
.plan-team thead th{font-family:var(--mono);color:var(--mute);font-weight:600}
.plan-team .inj{margin-left:6px;padding:1px 6px;border-radius:9999px;font-size:10.5px;color:var(--accent-ink);background:var(--accent)}
.plan-team td.swap,.swap-key{background:rgba(200,255,61,.16);color:var(--ink)}
.swap-key{display:inline-block;width:12px;height:12px;border-radius:9999px;margin-right:6px;vertical-align:-1px}

/* 課後紀錄 */
.log-rpe-read{display:flex;align-items:baseline;gap:12px;font-size:16px}
.log-rpe-read b{font-family:var(--mono);font-size:36px;color:var(--accent-3)}
.log-min{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.log-min .demo-inp{width:100px}

/* 急慢性：量表 0–2.0，四段寬度 40 / 25 / 10 / 25 */
.acwr-slide{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.gauge{position:relative;display:flex;height:16px;border-radius:9999px;overflow:visible;margin:10px 0 2px}
.gauge .z{height:100%}
.z-under{flex:0 0 40%;background:#7fb2d8;border-radius:9999px 0 0 9999px}
.z-opt{flex:0 0 25%;background:#6fbf5e}
.z-elev{flex:0 0 10%;background:#e8b33a}
.z-high{flex:1;background:var(--accent);border-radius:0 9999px 9999px 0}
.needle{position:absolute;top:-6px;width:4px;height:28px;margin-left:-2px;border-radius:9999px;background:var(--ink);
  box-shadow:0 0 0 2px var(--white);transition:left .25s}
.gauge-key{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:40% 25% 10% 25%;font-size:11px;color:var(--mute)}
.gauge-key li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:4px}
.acwr-advice{padding:14px 16px;border-radius:var(--r-ctl);font-size:14px;line-height:1.75;color:var(--ink);
  background:var(--panel-2);border-left:4px solid var(--rule2)}
.acwr-advice[data-advice=UNDER]{border-left-color:#7fb2d8}
.acwr-advice[data-advice=OPTIMAL]{border-left-color:#6fbf5e}
.acwr-advice[data-advice=ELEVATED]{border-left-color:#e8b33a}
.acwr-advice[data-advice=HIGH]{border-left-color:var(--accent)}

/* 疼痛 */
.pain-scale ol{list-style:none;margin:0;padding:0 8px;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:11px;color:var(--mute)}
.pain-scale li.over{color:var(--accent-3);font-weight:700}
.pain-state{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-ctl);
  background:var(--panel-2);border-left:4px solid #6fbf5e}
.pain-state.block{border-left-color:var(--accent)}
.pain-flag{font-weight:700}
.pain-state.block .pain-flag{color:var(--accent-3)}
.pain-plan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pain-plan li{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:14px}
.pain-plan b{font-weight:700}
.pain-plan s{color:var(--mute)}
.pain-state.ok .pain-plan b{min-width:3em;color:var(--mute);font-weight:600}

/* 逐格 */
.video-stage{position:relative;aspect-ratio:16/9;border-radius:var(--r-ctl);overflow:hidden;
  background:linear-gradient(180deg,#1d2a35 0%,#141715 100%);color:#e9ece9}
.video-stage canvas,.video-still{position:absolute;inset:0;width:100%;height:100%}
.video-hud{position:absolute;left:10px;top:10px;display:flex;gap:8px;flex-wrap:wrap}
.video-hud>span{padding:4px 10px;border-radius:9999px;font-size:12px;background:rgba(0,0,0,.55);color:#fff}
.video-hud b{font-family:var(--mono);color:var(--volt)}
.video-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.video-ctl .primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);min-width:84px}
.video-speed{display:flex;align-items:center;gap:6px;font-size:13px;margin-left:auto}
.video-speed .demo-inp{width:auto}
.video-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.video-strip li{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mute)}
.video-strip img{width:100%;border-radius:var(--r-ctl);border:1px solid var(--rule)}
.video-strip li b{font-family:var(--mono);color:var(--body)}
.video-strip .video-strip-empty{grid-column:1/-1;padding:18px;border:1px dashed var(--rule);border-radius:var(--r-ctl);text-align:center}

/* 邀請 */
.demo-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:24px;
  padding:28px;border-radius:var(--r-card);border:1px solid rgba(191,64,41,.5);
  background:radial-gradient(80% 140% at 0% 0%,rgba(191,64,41,.22) 0%,transparent 60%),var(--white)}
.demo-cta>div:first-child{flex:1 1 360px}
.demo-cta h2{margin-bottom:8px}
.demo-cta p:not(.kicker){color:var(--body);line-height:1.75;max-width:52ch}
.demo-cta-act{display:flex;flex-wrap:wrap;align-items:center;gap:18px}

.demo-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.demo-step-link{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:var(--r-ctl);
  text-decoration:none;background:var(--white);border:1px solid var(--rule);transition:border-color .16s}
.demo-step-link:hover{border-color:var(--accent)}
.demo-step-link span{font-family:var(--mono);font-size:11px;color:var(--mute)}
.demo-step-link span::before{content:"← "}
.demo-step-link.next{text-align:right}
.demo-step-link.next span::before{content:""}
.demo-step-link.next span::after{content:" →"}
.demo-chips{grid-column:1/-1;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.demo-chips a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border-radius:9999px;
  text-decoration:none;font-size:13.5px;background:var(--white);border:1px solid var(--rule)}
.demo-chips a:hover,.demo-chips a[aria-current]{border-color:var(--accent)}
.demo-chips a[aria-current]{background:var(--accent);color:var(--accent-ink)}
.demo-chips b{font-family:var(--mono);font-size:11px}
.demo-chips.wide{margin:16px 0 0;flex-direction:column;align-items:flex-start}
.demo-nav>.arrow{grid-column:1/-1}

/* 申請表的蜜罐：移出畫面而不是 display:none，有些機械人會跳過隱藏欄位 */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:900px){
  .demo-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .demo-panel{padding:16px 14px}
  .demo-sec{padding:24px 0 48px}
  .plan-week{gap:4px}
  .plan-day{padding:8px 2px}
  .plan-day .k-name{font-size:11.5px}
  .plan-day .d-load{display:none}
  .demo-nav{grid-template-columns:minmax(0,1fr)}
  .demo-step-link.next{text-align:left}
  .demo-cta{padding:20px}
  .demo-cta-act .signin{flex:1 1 100%;justify-content:center}
  .video-speed{margin-left:0}
}
.gauge-key li.on{color:var(--ink);font-weight:700}