/* パターン A「カード型」: 面（半透明カード）で区切る。角丸・発光。dataviz_themeChange に近い見せ方 */

/* セクション見出し（番号バッジ） */
.sec-h{display:flex;align-items:center;gap:8px;margin:20px 0 8px}
.sec-h .n{width:24px;height:24px;flex:0 0 24px;border-radius:6px;background:var(--acc);color:var(--ink);box-shadow:0 0 12px rgba(var(--acc-rgb),.65);font:900 12px/24px var(--en);text-align:center}
.sec-h .t{font:700 15px/1.2 var(--jp)}
.sec-h .e{margin-left:auto;font:600 9.5px/1 var(--en);letter-spacing:.2em;color:var(--soft);white-space:nowrap}
.sec-h .e.busy{animation:blink .7s steps(2) infinite}

/* 開催日トグル */
.dates{display:flex;gap:8px}
.dt{box-sizing:border-box;width:118px;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(6px);
  color:var(--muted);font:700 15px/1 var(--jp);display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:.15s}
.dt small{font:600 11px/1 var(--num);letter-spacing:.06em}
.dt:hover{border-color:rgba(255,255,255,.4);color:#fff}
.dt.is-on{border-color:var(--acc);color:#fff;background:linear-gradient(180deg, rgba(var(--acc-rgb),.38), rgba(var(--acc-rgb),.12)),var(--panel);box-shadow:0 0 16px rgba(var(--acc-rgb),.45)}

/* 開催場タイル */
.venues{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.vn{position:relative;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(6px);border-radius:14px;padding:12px 8px 10px;text-align:center;
  cursor:pointer;color:#fff;transition:transform .18s, box-shadow .18s, border-color .18s;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.vn .k{font:900 22px/1 var(--jp);letter-spacing:.04em}
.vn .e{font:600 9px/1 var(--en);letter-spacing:.22em;color:var(--soft);margin-top:5px}
.vn .m{font:500 11px/1 var(--jp);color:var(--muted);margin-top:9px;white-space:nowrap}
.vn:hover{border-color:rgba(255,255,255,.45)}
.vn.is-on{border-color:var(--acc);background:linear-gradient(180deg, rgba(var(--acc-rgb),.34), rgba(var(--acc-rgb),.10)),var(--panel);
  box-shadow:0 0 0 1px rgba(var(--acc-rgb),.55), 0 0 24px rgba(var(--acc-rgb),.5);transform:translateY(-2px)}
.vn.is-on .m{color:#fff}
.vn.is-on::after{content:'';position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:var(--acc);transform:translateX(-50%) rotate(45deg);box-shadow:0 0 10px var(--acc)}

/* レース行（カード） */
.races{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.rc{position:relative;display:grid;grid-template-columns:50px 1fr 14px;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(6px);border-radius:14px;cursor:pointer;color:#fff;text-decoration:none;
  transition:transform .15s, box-shadow .15s, border-color .15s;animation:fadeUp .35s both;animation-delay:calc(var(--i, 0) * 35ms)}
.rc:hover,.rc:active{border-color:rgba(var(--acc-rgb),.75);box-shadow:0 0 18px rgba(var(--acc-rgb),.35)}
.rc.picked{animation:pick .35s ease both}
@keyframes pick{0%{transform:scale(1)}40%{transform:scale(.985);box-shadow:0 0 0 2px var(--acc), 0 0 28px rgba(var(--acc-rgb),.8)}100%{transform:scale(1);box-shadow:0 0 0 1px var(--acc), 0 0 20px rgba(var(--acc-rgb),.6)}}
.rc .no{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--line);min-height:54px}
.rc .no b{font:700 19px/1 var(--en)}
.rc .no small{font:600 8.5px/1 var(--en);letter-spacing:.16em;color:var(--soft);margin-top:4px}
.rc .main{min-width:0}
.rc .row1{display:flex;align-items:center;gap:8px;min-width:0}
.rc .tm{flex:0 0 auto;font:700 13px/1 var(--num);letter-spacing:.04em;color:var(--soft)}
.rc .nm{flex:1 1 auto;min-width:0;font:700 15px/1.3 var(--jp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc .row2{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.rc .row3{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:7px;border-top:1px dashed rgba(255,255,255,.14);min-width:0}
.ai-tag{flex:0 0 auto;font:700 9px/1 var(--en);letter-spacing:.18em;color:var(--soft)}
.ai-pick{flex:1 1 auto;min-width:0;font:700 12.5px/1.2 var(--jp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-pick b{color:var(--acc);text-shadow:0 0 8px rgba(var(--acc-rgb),.75);margin-right:3px}
.ai-pick span{color:var(--muted);font-weight:500;margin-left:4px}
.conf{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.conf .bar{width:60px;height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.conf .bar i{display:block;height:100%;background:linear-gradient(90deg, var(--deep), var(--acc), #fff);box-shadow:0 0 8px rgba(var(--acc-rgb),.85)}
.conf b{font:700 12.5px/1 var(--num);width:34px;text-align:right}
.rc .chev{color:var(--soft);font:700 18px/1 var(--en);opacity:.7;text-align:center}
@media (max-width:420px){ .conf .bar{width:44px} .ai-pick{font-size:12px} .ai-pick span{display:none} }
.rc.next{border-color:rgba(var(--acc-rgb),.7);animation:fadeUp .35s both, breathe 2.6s ease-in-out .4s infinite;animation-delay:calc(var(--i, 0) * 35ms), .4s}
@keyframes breathe{0%,100%{box-shadow:0 0 0 1px rgba(var(--acc-rgb),.45), 0 0 14px rgba(var(--acc-rgb),.3)}50%{box-shadow:0 0 0 1px rgba(var(--acc-rgb),.9), 0 0 28px rgba(var(--acc-rgb),.6)}}
.rc .nx{position:absolute;top:-8px;right:12px;font:900 8.5px/1 var(--en);letter-spacing:.2em;padding:4px 7px;background:var(--acc);color:var(--ink);border-radius:4px;box-shadow:0 0 12px rgba(var(--acc-rgb),.85)}
.rc.fin{opacity:.5}
.scanline{height:2px;margin:6px 0 -2px;border-radius:2px;background:linear-gradient(90deg, transparent, var(--acc), #fff, var(--acc), transparent);box-shadow:0 0 12px var(--acc);opacity:0}
.scanline.on{animation:scanx .75s ease-out}
@keyframes scanx{0%{opacity:0;transform:scaleX(.1)}30%{opacity:1}100%{opacity:0;transform:scaleX(1)}}

/* ===== 出馬表ページ ===== */
.hero{position:relative;border:1px solid rgba(255,255,255,.4);background:var(--panel);backdrop-filter:blur(6px);border-radius:16px;padding:16px 14px 14px;margin-top:14px}
.hero::before,.hero::after{content:'';position:absolute;top:14px;bottom:14px;width:10px;border:1px solid var(--acc);box-shadow:0 0 8px rgba(var(--acc-rgb),.6)}
.hero::before{left:-6px;border-right:0;border-radius:4px 0 0 4px}.hero::after{right:-6px;border-left:0;border-radius:0 4px 4px 0}
.hero-top{display:flex;align-items:center;gap:14px}
.big-no{width:62px;height:62px;flex:0 0 62px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;font:900 20px/1 var(--en);
  box-shadow:0 0 18px rgba(var(--acc-rgb),.6), inset 0 0 12px rgba(var(--acc-rgb),.4)}
.big-no small{font:700 8px/1 var(--en);letter-spacing:.2em;display:block;text-align:center;margin-top:3px;color:var(--soft)}
.hero .vl{font:700 10.5px/1 var(--en);letter-spacing:.22em;color:var(--soft)}
.hero .rn{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:900 22px/1.2 var(--jp);text-shadow:0 0 12px rgba(var(--acc-rgb),.6);margin-top:5px}
.hero .tm{font:700 13px/1 var(--num);letter-spacing:.06em;margin-top:6px}
.hero .tm b{color:var(--acc);text-shadow:0 0 8px rgba(var(--acc-rgb),.7)}
.hero .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.hero .chip{font-size:12px;padding:5px 9px}

.ai{position:relative;overflow:hidden;border:1px solid rgba(var(--acc-rgb),.55);border-radius:16px;padding:14px;margin-top:10px;
  background:linear-gradient(180deg, rgba(var(--acc-rgb),.16), rgba(var(--acc-rgb),.03)),var(--panel);backdrop-filter:blur(6px);box-shadow:0 0 24px rgba(var(--acc-rgb),.18)}
.ai.scanning::after{content:'';position:absolute;left:0;right:0;height:70px;top:-70px;background:linear-gradient(180deg, transparent, rgba(var(--acc-rgb),.22), transparent);animation:sweep 1.1s linear infinite;pointer-events:none}
@keyframes sweep{to{top:100%}}
.ai-h{display:flex;align-items:center;gap:8px}
.ai-h .t{font:700 14px/1 var(--jp)}
.ai-h .e{font:700 9.5px/1 var(--en);letter-spacing:.24em;color:var(--soft)}
.ai-h .st{margin-left:auto;font:700 9.5px/1 var(--en);letter-spacing:.2em;color:var(--soft)}
.ai-h .st.busy{animation:blink .7s steps(2) infinite}
.prog{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:12px}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg, var(--deep), var(--acc), #fff);box-shadow:0 0 10px var(--acc);transition:width .3s ease}
.scan-log{font:600 12px/1.5 var(--num);letter-spacing:.06em;color:var(--soft);margin-top:8px;min-height:18px}
.scan-log::before{content:'> ';color:var(--acc)}
.result{display:none}
.ai.done .scan-ui{display:none}
.ai.done .result{display:block;animation:fadeUp .4s both}
.conf-row{display:flex;align-items:center;gap:12px;margin-top:12px}
.conf-num{font:900 36px/1 var(--num);text-shadow:0 0 14px rgba(var(--acc-rgb),.8)}
.conf-num small{font:700 12px/1 var(--en);margin-left:2px}
.conf-lbl{display:flex;flex-direction:column;gap:5px;flex:1 1 auto;min-width:0}
.conf-lbl span{font:700 11px/1 var(--jp);color:rgba(255,255,255,.85)}
.conf-lbl .bar{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.conf-lbl .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg, var(--deep), var(--acc), #fff);box-shadow:0 0 8px rgba(var(--acc-rgb),.85);transition:width .8s ease .1s}
.picks{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.pk{display:grid;grid-template-columns:26px 30px 1fr auto;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.pk .mk{font:900 18px/1 var(--jp);text-align:center}
.pk.m0{border-color:rgba(var(--acc-rgb),.75);box-shadow:0 0 14px rgba(var(--acc-rgb),.35);background:rgba(var(--acc-rgb),.14)}
.pk.m0 .mk{color:var(--acc);text-shadow:0 0 10px rgba(var(--acc-rgb),.85)}
.pk .nm{min-width:0;font:700 14px/1.25 var(--jp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk .nm small{display:block;font:500 11px/1.3 var(--jp);color:var(--muted);margin-top:2px}
.pk .sc{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.pk .sc b{font:700 15px/1 var(--num)}
.pk .sc i{display:block;width:56px;height:4px;border-radius:2px;background:rgba(255,255,255,.12);position:relative}
.pk .sc i::after{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--acc);box-shadow:0 0 6px var(--acc);border-radius:2px}
.pk .num{font:700 15px/1 var(--num);text-align:center;height:26px;line-height:24px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.06)}
.bets{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.2)}
.bets h4{margin:0 0 8px;font:700 13px/1 var(--jp);display:flex;align-items:center;gap:8px}
.bets h4 .e{font:600 9.5px/1 var(--en);letter-spacing:.2em;color:var(--soft)}
.bet-g{display:grid;grid-template-columns:56px 1fr;gap:8px;align-items:start;padding:5px 0}
.bet-g .ty{font:700 12px/1 var(--jp);padding:6px 0;text-align:center;border-radius:6px;background:rgba(255,255,255,.08);border:1px solid var(--line)}
.bet-g .ln{display:flex;flex-wrap:wrap;gap:6px}
.bet{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:8px;border:1px solid rgba(var(--acc-rgb),.5);background:rgba(var(--acc-rgb),.12);font:700 13px/1 var(--num);height:28px}
.bet b{min-width:16px;text-align:center}
.bet em{font-style:normal;color:var(--soft)}
.bets .note{margin:10px 0 0;font:500 11px/1.6 var(--jp);color:var(--muted)}

.tblwrap{margin-top:10px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);backdrop-filter:blur(6px)}
.tbl-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl-h .t{font:700 14px/1 var(--jp)}
.tbl-h .t small{font:600 9.5px/1 var(--en);letter-spacing:.2em;color:var(--soft);margin-left:8px}
.sw{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sw button{box-sizing:border-box;width:64px;height:28px;border:0;background:transparent;color:var(--muted);font:700 11.5px/1 var(--jp);cursor:pointer}
.sw button.is-on{background:var(--acc);color:var(--ink);box-shadow:0 0 12px rgba(var(--acc-rgb),.6)}
.tbl-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font:700 9px/1 var(--en);letter-spacing:.14em;color:var(--soft);text-align:left;padding:9px 5px;border-bottom:1px solid rgba(255,255,255,.28);white-space:nowrap}
td{padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:middle;white-space:nowrap}
th:first-child,td:first-child{padding-left:10px}
th:last-child,td:last-child{padding-right:10px}
tbody tr:last-child td{border-bottom:0}
td.c,th.c{text-align:center}
td.r,th.r{text-align:right}
td.no{font:700 15px/1 var(--num)}
td.hn{white-space:normal;min-width:0}
td.hn .h{font-weight:700;display:flex;align-items:center;gap:5px}
td.hn .h .mk{font:900 13px/1 var(--jp);color:var(--acc);text-shadow:0 0 8px rgba(var(--acc-rgb),.8)}
td.hn .h .mk.sub{color:rgba(255,255,255,.8);text-shadow:none}
td.hn .s{font:500 11px/1.3 var(--jp);color:var(--muted);margin-top:2px}
td.od{font:700 14px/1 var(--num)}
td.pp{font:700 12px/1 var(--num);color:var(--soft)}
td.ai{font:700 14px/1 var(--num)}
td.ai i{display:block;width:44px;height:3px;margin:4px 0 0 auto;border-radius:2px;background:rgba(255,255,255,.12);position:relative}
td.ai i::after{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--acc);box-shadow:0 0 6px var(--acc);border-radius:2px}
tr.top1 td{background:rgba(var(--acc-rgb),.16)}
tr.top1 td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
tr.top2 td,tr.top3 td{background:rgba(var(--acc-rgb),.07)}
tr.fav td.od{color:#ffd54a}

.nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.nb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:58px;padding:0 10px;border-radius:12px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(6px);color:#fff;text-decoration:none;min-width:0}
.nb small{font:600 9px/1 var(--en);letter-spacing:.2em;color:var(--soft)}
.nb b{font:700 13px/1.2 var(--jp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nb:hover{border-color:var(--acc);box-shadow:0 0 14px rgba(var(--acc-rgb),.4)}
.nb.dis{opacity:.35;pointer-events:none}
.back{display:flex;align-items:center;justify-content:center;height:46px;margin-top:10px;border-radius:12px;border:1px solid var(--acc);background:var(--acc);color:var(--ink);text-decoration:none;font:700 14px/1 var(--jp);box-shadow:0 0 16px rgba(var(--acc-rgb),.4);transition:.15s}
.back:hover{background:#fff;color:var(--acc)}