/* Keiba White Design theme extracted from keiba_fan_dashboard.html */
:root {
  --bg:       #f5f4f0;
  --bg2:      #eeecea;
  --white:    #ffffff;
  --card:     #ffffff;
  --card2:    #faf9f7;
  --border:   #ddd9d0;
  --border2:  #c8c0b0;
  --text:     #1a1612;
  --text2:    #4a4030;
  --text3:    #8a7a60;
  --text4:    #b0a088;
  --accent:   #8b1a1a;   /* 競馬レッド */
  --accent2:  #b52020;
  --accent3:  #d44030;
  --gold:     #c09020;
  --gold2:    #e0b030;
  --gold3:    #f5d060;
  --green:    #1a6040;
  --green2:   #2a8050;
  --blue:     #1a3a6a;
  --blue2:    #2a50a0;
  --shadow:   0 2px 8px rgba(0,0,0,.08);
  --shadow2:  0 4px 16px rgba(0,0,0,.12);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:'Noto Sans JP',sans-serif;min-height:100vh;}

/* ── HEADER ── */
header{
  background:linear-gradient(135deg, #6b0f0f 0%, #8b1a1a 40%, #a02020 70%, #7a1515 100%);
  padding:24px 52px 20px;position:relative;overflow:hidden;
  box-shadow:0 3px 12px rgba(0,0,0,.25);
}
header::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 20 L50 20 L38 29 L43 44 L30 35 L17 44 L22 29 L10 20 L25 20Z' fill='none' stroke='rgba(255,255,255,.04)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events:none;
}
header::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold2),var(--gold3),var(--gold2),transparent);
}
.hd-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;}
.hd-left{}
.hd-row{display:flex;align-items:baseline;gap:14px;margin-bottom:3px;}
.hd-jp{font-family:'Noto Serif JP',serif;font-size:22px;font-weight:900;color:#fff;letter-spacing:.1em;text-shadow:0 1px 4px rgba(0,0,0,.3);}
.hd-en{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.35em;color:rgba(255,255,255,.6);}
.hd-sub{font-size:11px;color:rgba(255,255,255,.5);margin-top:3px;letter-spacing:.08em;}
.hd-badge{display:inline-block;margin-top:8px;padding:3px 12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:2px;font-size:10px;color:rgba(255,255,255,.8);letter-spacing:.15em;}
#save-btn{
  display:none;align-items:center;gap:7px;padding:9px 18px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);
  color:#fff;font-family:'Noto Sans JP',sans-serif;font-size:12px;
  letter-spacing:.08em;cursor:pointer;transition:all .2s;white-space:nowrap;
  border-radius:3px;
}
#save-btn:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.6);}

/* ── LOADING ── */
#loading{display:none;position:fixed;inset:0;background:rgba(245,244,240,.92);z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:18px;}
#loading.on{display:flex;}
.spin{width:44px;height:44px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.spin-txt{font-size:12px;color:var(--text3);letter-spacing:.15em;}

/* ── UPLOAD ── */
#upload{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 115px);padding:60px 20px;}
.up-frame{width:100%;max-width:520px;position:relative;}
.uc{position:absolute;width:14px;height:14px;border-color:var(--accent);border-style:solid;}
.uc.tl{top:-1px;left:-1px;border-width:2px 0 0 2px;}
.uc.tr{top:-1px;right:-1px;border-width:2px 2px 0 0;}
.uc.bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px;}
.uc.br{bottom:-1px;right:-1px;border-width:0 2px 2px 0;}
.up-zone{padding:48px 36px;text-align:center;background:var(--white);border:2px dashed var(--border2);cursor:pointer;transition:all .3s;border-radius:4px;}
.up-zone:hover,.up-zone.over{background:#fef8f8;border-color:var(--accent);box-shadow:0 0 20px rgba(139,26,26,.08);}
.up-icon{font-size:40px;margin-bottom:13px;}
.up-title{font-family:'Noto Serif JP',serif;font-size:17px;font-weight:700;color:var(--text);margin-bottom:8px;}
.up-desc{font-size:13px;color:var(--text2);line-height:1.8;}
.up-fmts{display:flex;gap:8px;justify-content:center;margin-top:14px;}
.up-fmt{padding:3px 9px;border:1px solid var(--border);font-size:11px;color:var(--text3);font-family:monospace;background:var(--bg2);border-radius:3px;}
#file-input{display:none;}
.up-btn{display:inline-block;margin-top:18px;padding:11px 30px;background:linear-gradient(135deg,#7a1515,#a02020);color:#fff;font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:13px;letter-spacing:.15em;cursor:pointer;border:none;transition:all .25s;border-radius:3px;box-shadow:0 3px 10px rgba(139,26,26,.3);}
.up-btn:hover{background:linear-gradient(135deg,#8b1a1a,#b02525);transform:translateY(-1px);box-shadow:0 5px 14px rgba(139,26,26,.35);}
.up-hint{margin-top:16px;font-size:11px;color:var(--text4);text-align:center;}

/* ── DASHBOARD ── */
#dash{display:none;}
#dash.on{display:block;}

/* ── STATS BAR ── */
.sbar{display:flex;padding:0 52px;background:var(--white);border-bottom:2px solid var(--border);overflow-x:auto;box-shadow:var(--shadow);}
.si{display:flex;flex-direction:column;align-items:center;padding:12px 24px;border-right:1px solid var(--border);min-width:115px;transition:background .2s;}
.si:hover{background:var(--bg2);}
.si-lbl{font-size:9px;color:var(--text3);letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px;}
.si-val{font-family:'Cinzel',serif;font-size:18px;color:var(--accent);font-weight:700;}
.si-unit{font-size:9px;color:var(--text3);margin-left:2px;font-family:'Noto Sans JP',sans-serif;}
.si-sub{font-size:10px;color:var(--text3);margin-top:1px;}

/* ── TABS ── */
.tab-nav{display:flex;padding:0 52px;background:var(--white);border-bottom:2px solid var(--border);overflow-x:auto;position:sticky;top:0;z-index:100;}
.tb{padding:13px 20px;background:transparent;border:none;border-bottom:3px solid transparent;color:var(--text3);font-family:'Noto Sans JP',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap;margin-bottom:-2px;}
.tb:hover{color:var(--text2);background:var(--bg2);}
.tb.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700;}
.tb-num{font-family:'Cinzel',serif;font-size:9px;color:var(--text4);margin-right:5px;}

/* ── PANELS ── */
.panel{visibility:hidden;opacity:0;height:0;overflow:hidden;pointer-events:none;}
.panel.active{visibility:visible;opacity:1;height:auto;overflow:visible;pointer-events:auto;}
.panel-inner{padding:36px 52px;}

/* ── GRIDS ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-bottom:20px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
.fw{margin-bottom:20px;}

/* ── CARD ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:22px;transition:box-shadow .2s,border-color .2s;box-shadow:var(--shadow);}
.card:hover{box-shadow:var(--shadow2);border-color:var(--border2);}
.ctitle{font-size:10px;color:var(--text3);letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px;font-weight:700;}
.ctitle::before{content:'';display:block;width:3px;height:14px;background:var(--accent);border-radius:2px;}
.cnote{margin-top:8px;font-size:11px;color:var(--text3);line-height:1.7;}
.fan-board{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-bottom:20px;}
.fan-card{background:linear-gradient(180deg,#fff,#fffaf2);border:1px solid var(--border);border-radius:6px;padding:18px;box-shadow:var(--shadow);}
.fan-card.main{border-color:rgba(139,26,26,.25);}
.fan-eyebrow{font-size:10px;letter-spacing:.14em;color:var(--accent);font-weight:700;margin-bottom:8px;}
.fan-title{font-family:'Noto Serif JP',serif;font-size:20px;font-weight:800;color:var(--text);line-height:1.45;margin-bottom:10px;}
.fan-copy{font-size:13px;color:var(--text2);line-height:1.9;}
.fan-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;}
.fan-mini{border:1px solid var(--border);background:#fff;border-radius:6px;padding:10px 12px;}
.fan-mini-l{font-size:10px;color:var(--text3);margin-bottom:4px;}
.fan-mini-v{font-family:'Noto Serif JP',serif;font-size:18px;font-weight:800;color:var(--accent);}
.chaos-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px;}
.chaos-score{font-family:'Cinzel',serif;font-size:34px;font-weight:700;color:var(--accent);line-height:1;}
.chaos-label{font-size:12px;font-weight:700;color:var(--text2);}
.chaos-track{height:12px;background:#eee7da;border-radius:999px;overflow:hidden;margin-bottom:10px;}
.chaos-fill{height:100%;width:0;background:linear-gradient(90deg,#2a506a,#c09020,#8b1a1a);border-radius:999px;transition:width .35s;}
.fan-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
.fan-chip{font-size:11px;color:var(--text2);border:1px solid var(--border);background:#fff;border-radius:999px;padding:5px 9px;}
.fan-hints{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px;}
.hint-card{border:1px solid var(--border);background:#fff;border-radius:6px;padding:16px;box-shadow:var(--shadow);}
.hint-card.good{border-top:3px solid var(--accent);}
.hint-card.hole{border-top:3px solid var(--gold);}
.hint-card.bad{border-top:3px solid var(--blue2);}
.hint-ttl{font-family:'Noto Serif JP',serif;font-size:15px;font-weight:800;color:var(--text);margin-bottom:8px;}
.hint-card ul{margin:0;padding-left:18px;color:var(--text2);font-size:12px;line-height:1.85;}
.hint-card li::marker{color:var(--accent);}

/* ── METRIC ── */
.met{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:18px;text-align:center;transition:all .2s;position:relative;overflow:hidden;box-shadow:var(--shadow);}
.met::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transition:transform .3s;}
.met:hover::after{transform:scaleX(1);}
.met:hover{box-shadow:var(--shadow2);}
.m-icon{font-size:20px;margin-bottom:7px;}
.m-val{font-family:'Cinzel',serif;font-size:24px;color:var(--accent);font-weight:700;line-height:1;margin-bottom:4px;}
.m-lbl{font-size:11px;color:var(--text2);}

/* ── SECTION HDR ── */
.shdr{margin-bottom:28px;padding-left:14px;border-left:4px solid var(--accent);}
.stitle{font-family:'Noto Serif JP',serif;font-size:19px;font-weight:700;color:var(--text);letter-spacing:.06em;margin-bottom:3px;}
.ssub{font-size:10px;color:var(--text3);letter-spacing:.12em;}

/* ── TABLE ── */
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl thead tr{background:linear-gradient(135deg,#6b0f0f,#8b1a1a);}
.tbl th{padding:10px 13px;text-align:left;font-size:10px;color:#fff;letter-spacing:.12em;text-transform:uppercase;font-weight:600;}
.tbl th:first-child{border-radius:4px 0 0 0;}
.tbl th:last-child{border-radius:0 4px 0 0;}
.tbl td{padding:10px 13px;border-bottom:1px solid var(--border);color:var(--text);transition:background .15s;}
.tbl tr:hover td{background:var(--bg2);}
.tbl tr:last-child td{border-bottom:none;}
.tbl .r1 td{color:var(--accent);font-weight:600;background:rgba(139,26,26,.04);}
.tbl .r2 td{background:rgba(192,144,32,.03);}
.rdg{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:10px;font-weight:700;font-family:'Cinzel',serif;margin-right:5px;}
.r1 .rdg{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;}
.r2 .rdg{background:linear-gradient(135deg,#888,#aaa);color:#fff;}
.r3 .rdg{background:linear-gradient(135deg,#a06030,#c08050);color:#fff;}
.bc{display:flex;align-items:center;gap:8px;}
.bbg{flex:1;height:5px;background:var(--bg2);border-radius:3px;overflow:hidden;max-width:90px;}
.bfi{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:3px;}
.bpc{font-size:11px;color:var(--accent);font-family:'Cinzel',serif;width:42px;text-align:right;font-weight:600;}
.tag{display:inline-block;padding:2px 8px;font-size:11px;border-radius:3px;font-weight:500;}
.tag-r{background:rgba(139,26,26,.1);color:var(--accent);border:1px solid rgba(139,26,26,.2);}
.tag-g{background:rgba(26,96,64,.1);color:var(--green);border:1px solid rgba(26,96,64,.2);}
.tag-b{background:rgba(26,58,106,.1);color:var(--blue);border:1px solid rgba(26,58,106,.2);}
.tag-y{background:rgba(192,144,32,.12);color:var(--gold);border:1px solid rgba(192,144,32,.25);}
.tag-d{background:var(--bg2);color:var(--text2);border:1px solid var(--border);}

/* ── INSIGHT ── */
.ins{background:linear-gradient(135deg,rgba(139,26,26,.04),rgba(192,144,32,.04));border:1px solid rgba(139,26,26,.15);border-left:4px solid var(--accent);padding:14px 18px;margin-top:14px;font-size:13px;color:var(--text2);line-height:1.9;border-radius:0 4px 4px 0;}
.ins strong{color:var(--accent);}
.ins-ttl{font-size:10px;color:var(--accent);letter-spacing:.2em;text-transform:uppercase;margin-bottom:7px;font-weight:700;}

/* ── WINNER CARDS ── */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:8px;}
.wc{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:14px 16px;transition:all .2s;box-shadow:var(--shadow);}
.wc:hover{box-shadow:var(--shadow2);border-color:var(--accent);}
.w-yr{font-family:'Cinzel',serif;font-size:10px;color:var(--text3);letter-spacing:.2em;margin-bottom:5px;}
.w-name{font-family:'Noto Serif JP',serif;font-size:15px;font-weight:700;color:var(--text);margin-bottom:9px;}
.w-stats{display:flex;flex-wrap:wrap;gap:8px;}
.w-st{font-size:12px;color:var(--text3);}
.w-st span{color:var(--text);font-weight:600;}

/* ── WINNER TIME TABLE ── */
.time-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.time-tbl thead tr{background:linear-gradient(135deg,#1a3a6a,#2a50a0);}
.time-tbl th{padding:10px 13px;text-align:left;font-size:10px;color:#fff;letter-spacing:.12em;text-transform:uppercase;font-weight:600;}
.time-tbl td{padding:10px 13px;border-bottom:1px solid var(--border);color:var(--text);}
.time-tbl tr:hover td{background:var(--bg2);}
.time-tbl tr:last-child td{border-bottom:none;}
.time-val{font-family:'Cinzel',serif;font-weight:700;color:var(--blue2);}
.time-best{color:var(--accent);font-weight:700;}
.time-pop1{font-size:11px;}

/* ── PAYOUT TABLE ── */
.pay-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.pay-tbl thead tr{background:linear-gradient(135deg,#1a5030,#2a8050);}
.pay-tbl th{padding:10px 13px;text-align:left;font-size:10px;color:#fff;letter-spacing:.12em;text-transform:uppercase;font-weight:600;}
.pay-tbl td{padding:10px 13px;border-bottom:1px solid var(--border);color:var(--text);}
.pay-tbl tr:hover td{background:var(--bg2);}
.pay-tbl tr:last-child td{border-bottom:none;}
.pay-val{font-family:'Cinzel',serif;font-weight:700;}
.pay-low{color:var(--green);}
.pay-mid{color:var(--gold);}
.pay-high{color:var(--accent);}
.pay-mega{color:var(--accent);font-size:14px;}

/* ── CHART ── */
.chw{position:relative;width:100%;}

/* ── RESPONSIVE ── */
@media(max-width:960px){header,.sbar,.tab-nav,.panel-inner{padding-left:16px;padding-right:16px;}.g2,.g3,.g4,.fan-board,.fan-hints{grid-template-columns:1fr;}.fan-list{grid-template-columns:1fr;}}