:root{
  --bg:#b9a98a; --bg2:#8f7f5f;
  --brown:#3d3526; --brown-2:#544a35;
  --paper:#ececec; --cell:#e2e2e2; --lbl:#c9bfa8;
  --num:#1f3a63; --amt:#a3141c; --ink:#171717;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font:14px/1.3 Roboto,"Segoe UI",Arial,sans-serif; color:var(--ink);
  min-height:100vh;
  background:radial-gradient(ellipse at 30% 0%,#cdbf9f 0%,var(--bg) 45%,var(--bg2) 100%) fixed;
}
.top{
  position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:8px 16px;
  align-items:center; justify-content:space-between;
  background:var(--brown); padding:0 14px; box-shadow:0 2px 6px rgba(0,0,0,.35);
}
#tabs{display:flex}
#tabs button{
  appearance:none; border:0; background:none; color:#d9cfb6; font:inherit; font-weight:600;
  padding:14px 18px; cursor:pointer; border-bottom:3px solid transparent;
}
#tabs button[aria-selected="true"]{color:#fff; border-bottom-color:#e2b400}
#tabs button:hover{color:#fff}
#tabs button.tab-results{margin-left:6px; border-left:1px solid #6b5d3f; padding-left:18px}
#tabs button.tab-results[aria-selected="true"]{border-bottom-color:#7fae7f}
.status{display:flex; align-items:center; gap:12px; color:#d9cfb6; font-size:13px; padding:6px 0}
.status button{
  font:inherit; font-weight:600; border:1px solid #e2b400; background:transparent; color:#f0d36a;
  padding:6px 12px; border-radius:3px; cursor:pointer;
}
.status button:hover:not(:disabled){background:#e2b400; color:#2a2413}
.status button:disabled{opacity:.55; cursor:progress}
button:focus-visible{outline:2px solid #fff; outline-offset:2px}

.bar[hidden]{display:none}
.bar{display:flex; align-items:center; gap:10px; padding:12px 14px 0; max-width:1500px; margin:0 auto}
.bar label{font-weight:600; color:#2d2617}
.bar select{
  font:inherit; font-weight:600; min-width:230px; max-width:100%; padding:8px 10px;
  background:var(--brown); color:#fff; border:1px solid #6b5d3f; border-radius:3px; cursor:pointer;
}
.bar select:focus-visible{outline:2px solid #e2b400; outline-offset:2px}
#count{color:#2d2617; font-size:13px}
.notice{margin:12px 14px 0; padding:10px 14px; background:#f3dcdc; border-left:4px solid var(--amt); color:#5b0d12}

#board{padding:14px; max-width:1500px; margin:0 auto}
#board.cols{column-width:310px; column-gap:12px}

.res-regions{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.res-regions button{
  font:inherit; font-weight:600; border:1px solid var(--brown-2); background:#e4dcc8; color:var(--brown);
  padding:7px 14px; border-radius:16px; cursor:pointer;
}
.res-regions button[aria-selected="true"]{background:var(--brown); color:#fff; border-color:var(--brown)}
.calendar{
  background:var(--paper); border:1px solid rgba(0,0,0,.25); border-radius:8px;
  box-shadow:0 1px 4px rgba(0,0,0,.3); padding:16px; max-width:380px; margin:0 0 16px;
}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.cal-label{font-weight:700; color:var(--brown); font-size:15px; letter-spacing:.02em}
.cal-nav{
  appearance:none; border:1px solid var(--brown-2); background:#fff; color:var(--brown);
  width:30px; height:30px; border-radius:50%; font-size:17px; line-height:1; cursor:pointer;
}
.cal-nav:hover{background:var(--brown); color:#fff}
.cal-nav:focus-visible{outline:2px solid #e2b400; outline-offset:2px}
.cal-dow{
  display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-bottom:6px;
  font-size:10.5px; font-weight:700; color:#9a8c68; text-transform:uppercase; letter-spacing:.05em;
}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal-cell{
  position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  border-radius:7px; font:inherit; font-size:13px; color:#b3a684; background:transparent;
  border:1px solid transparent; padding:0;
}
.cal-cell.pad{visibility:hidden}
.cal-cell.has{
  cursor:pointer; background:#efe4c3; color:var(--brown); font-weight:700; border-color:#d9c78f;
}
.cal-cell.has:hover{background:#e2b400; color:#2a2413}
.cal-cell.has:focus-visible{outline:2px solid var(--brown); outline-offset:1px}
.cal-cell.sel{background:var(--brown) !important; color:#fff !important; border-color:var(--brown)}
.cal-cell.today:not(.sel){box-shadow:inset 0 0 0 2px #9a8c68}
.cal-badge{
  position:absolute; bottom:2px; right:2px; min-width:15px; height:15px; padding:0 3px;
  display:flex; align-items:center; justify-content:center; border-radius:8px;
  background:var(--amt); color:#fff; font-size:9px; font-weight:700; line-height:1;
}
.cal-cell.sel .cal-badge{background:#fff; color:var(--amt)}
.cal-empty{margin:10px 2px 0; font-size:12.5px; color:#8a7c5c; text-align:center}
@media (max-width:520px){ .calendar{max-width:100%} }
.card{
  break-inside:avoid; margin:0 0 12px; background:var(--paper);
  border:1px solid rgba(0,0,0,.25); box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.card-head{display:flex; align-items:center; gap:10px; padding:7px 10px; color:#fff; min-height:46px}
.card-head.dark-text{color:#1c1a10}
.card-head .logo{width:46px; height:46px; padding:2px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.card-head .logo img{max-width:100%; max-height:100%; object-fit:contain}
.card-head .t{flex:1; text-align:center; font-weight:700; font-size:15px}
.card-head .t small{display:block; font-weight:400; font-size:12px; opacity:.9}
.card-head .sp{width:46px; flex:none}

table{width:100%; border-collapse:separate; border-spacing:3px; table-layout:fixed}
td{padding:4px 2px; text-align:center; background:var(--cell); font-variant-numeric:tabular-nums;
   overflow-wrap:anywhere}
tr.head td{background:var(--brown); color:#fff; font-weight:600; font-size:13px}
td.lbl{background:var(--lbl); font-weight:500}
td.n{color:var(--num); font-weight:600; font-size:15px; letter-spacing:.3px}
td.amt{color:var(--amt); font-weight:600}
td.plus{background:var(--amt); color:#fff; font-weight:700}
td.empty{background:var(--cell)}
tr.big td.n{color:var(--ink); font-size:24px; font-weight:700; padding:6px 2px}
table + table{margin-top:2px}
.warn{background:#fff3cd; color:#5c4400; font-size:12px; padding:5px 8px; border-top:1px solid #d9b94a}

.empty-board{padding:40px 0; text-align:center; color:#2d2617}

@media (max-width:520px){
  #board{column-width:100%; padding:8px}
  #tabs button{padding:12px 10px}
}
@media (prefers-reduced-motion:no-preference){
  .card{transition:box-shadow .15s}
  .card:hover{box-shadow:0 3px 10px rgba(0,0,0,.35)}
}

/* --- Ad slot: deliberately placed AFTER #board, never mixed in with result cards --- */
.adslot{max-width:1500px; margin:4px auto 20px; padding:0 14px}
.ad-caption{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#7a6d4f; text-align:center; margin:0 0 8px; padding-top:14px; border-top:1px dashed #8a7c5c;
}
.ad-item{display:flex; justify-content:center; margin:0 auto 12px}
.ad-item.fixed{max-width:100%}
.ad-frame{
  width:100%; border:0; border-radius:6px; background:#e9e2cd;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.ad-item.fixed .ad-frame{width:100%}

/* ================================================================ Admin (web/admin.html) */
body.admin{background:#e9e2cd}
.adm-top{
  background:var(--brown); color:#fff; padding:14px 20px; display:flex; align-items:center;
  justify-content:space-between; box-shadow:0 2px 6px rgba(0,0,0,.3); flex-wrap:wrap; gap:8px;
}
.adm-top h1{font-size:17px; margin:0}
.adm-top a{color:#f0d36a; text-decoration:none; font-weight:600; font-size:13px}
.adm-top a:hover{text-decoration:underline}
.adm-wrap{max-width:980px; margin:0 auto; padding:20px 16px 60px}
.adm-panel{background:#fff; border:1px solid rgba(0,0,0,.15); border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.15); padding:18px 20px; margin-bottom:20px}
.adm-panel h2{margin:0 0 4px; font-size:15px; color:var(--brown)}
.adm-hint{color:#6b6045; font-size:12.5px; margin:0 0 14px}
.adm-list-item{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid #eee}
.adm-list-item:first-of-type{border-top:0}
.adm-list-main{flex:1; min-width:0}
.adm-list-name{font-weight:700; color:#222; margin:0 0 3px}
.adm-chip{display:inline-block; background:#f0e9d3; color:#5c5030; font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; margin:0 4px 4px 0}
.adm-chip.off{background:#f3d9d9; color:#7a1f1f}
.adm-list-actions{display:flex; gap:6px; flex:none}
.adm-btn{font:inherit; font-weight:600; font-size:12.5px; padding:6px 12px; border-radius:4px; border:1px solid #999; background:#fff; color:#333; cursor:pointer}
.adm-btn:hover{background:#f2f2f2}
.adm-btn.primary{background:var(--brown); border-color:var(--brown); color:#fff}
.adm-btn.primary:hover{background:#4a4030}
.adm-btn.danger{border-color:#a3141c; color:#a3141c}
.adm-btn.danger:hover{background:#a3141c; color:#fff}
.adm-btn.small{padding:4px 9px; font-size:11.5px}
.adm-empty{color:#7a6d4f; font-size:13px; padding:6px 0}

.adm-field{margin-bottom:14px}
.adm-field label{display:block; font-weight:600; font-size:12.5px; color:#3d3526; margin-bottom:5px}
.adm-field input[type=text], .adm-field input[type=number], .adm-field textarea, .adm-field select{
  width:100%; font:inherit; font-size:13.5px; padding:8px 10px; border:1px solid #bdb397; border-radius:4px; box-sizing:border-box;
}
.adm-field textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12.5px; min-height:140px; resize:vertical}
.adm-row{display:flex; gap:14px; flex-wrap:wrap}
.adm-row > *{flex:1; min-width:160px}
.adm-checks{display:flex; flex-wrap:wrap; gap:10px 18px}
.adm-check{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500}
.adm-check input{width:auto}
.adm-samples{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.adm-note{font-size:12px; color:#6b6045; margin-top:4px}
.adm-guarantee{
  background:#eef6ec; border:1px solid #bfdcb5; color:#2d5522; border-radius:6px;
  padding:10px 12px; font-size:12.5px; margin-bottom:16px;
}
.adm-size-presets{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.adm-preview-box{border:1px dashed #bdb397; border-radius:6px; padding:12px; background:#faf7ee; display:flex; justify-content:center}
.adm-preview-box iframe{border:0; border-radius:4px; background:#fff}
.adm-msg{font-size:13px; font-weight:600; padding:8px 12px; border-radius:4px; margin-bottom:14px}
.adm-msg.ok{background:#e4f3e0; color:#2d5522}
.adm-msg.err{background:#fbe2e2; color:#8a1414}

/* ================================================================ DB tab (5x5 grids by region) */
#tabs button.tab-db[aria-selected="true"]{border-bottom-color:#7fa8d8}
.db-region{margin:0 0 26px}
.db-region h2{
  margin:0 0 10px; padding:8px 14px; font-size:15px; letter-spacing:.03em; color:#fff;
  background:var(--brown); border-radius:4px; border-left:5px solid #e2b400;
}
/* One table per row, always stacked top to bottom - room to add columns without reflowing the page. */
/* --- Prediction tab (3D POWER) --- */
#tabs button.tab-prediction{margin-left:6px; border-left:1px solid #6b5d3f; padding-left:18px}
#tabs button.tab-prediction[aria-selected="true"]{border-bottom-color:#d8842a}
.pred-title{
  margin:0 0 14px; padding:12px 16px; font-size:20px; letter-spacing:.14em; text-align:center;
  color:#fff; background:var(--brown); border-radius:6px; border-left:5px solid var(--amt);
}
.pred-3d{
  font-variant-numeric:tabular-nums; font-weight:800; font-size:20px; letter-spacing:.08em; color:var(--amt);
}
.pred-sub{text-align:center; margin:-6px 0 16px; font-size:13px; color:#6b5d3f}
.pred-back{display:block; margin:0 auto 12px; font:inherit; font-weight:600; border:1px solid var(--brown-2); background:#e4dcc8; color:var(--brown); padding:5px 16px; border-radius:16px; cursor:pointer}
.pred-back:hover{background:var(--brown); color:#fff}
.fnp-title{font-size:12px; font-weight:800; letter-spacing:.12em; color:#fff; background:var(--brown); padding:6px 10px; border-radius:4px; margin:16px 0 8px; text-align:center}
.fnp-lo{font-weight:700; color:var(--num)}
.fnp-hi{font-weight:700; color:var(--amt)}
.db-nav{display:flex; align-items:center; gap:12px; margin:0 0 14px; flex-wrap:wrap}
.db-nav h2{margin:0; font-size:16px; color:var(--brown)}
.db-nav button{
  font:inherit; font-weight:600; border:1px solid var(--brown-2); background:#e4dcc8; color:var(--brown);
  padding:5px 13px; border-radius:16px; cursor:pointer;
}
.db-nav button:hover{background:var(--brown); color:#fff}
.db-cards{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.db-cards .card{margin:0; width:max(330px, calc(var(--cols, 5) * 66px)); max-width:100%; overflow-x:auto}
.dbgrid{min-width:calc(var(--cols, 5) * 62px)}
.dbgrid tr.head td{white-space:nowrap; font-size:12px}
.dbgrid td.n.big{font-size:16px; font-weight:700; color:var(--ink); padding:7px 2px}
.dbgrid td.n.der{background:#efe4c3; color:var(--brown); font-size:16px; font-weight:700; padding:7px 2px}
.dbgrid td.n.g1{background:#dde7f4; color:#26456b; font-weight:600}   /* HMR-labelled group, cols 6-10 */
.dbgrid td.n.g2{background:#e3ecd9; color:#3a5522; font-weight:600}   /* Bayesian-labelled group, cols 11-15 */
.dbgrid td.empty{background:#ececec}
.dbgrid td{font-size:11.5px; overflow-wrap:anywhere; word-break:break-all; line-height:1.25}
.dbnote{padding:6px 10px 9px; font-size:11.5px; color:#5c5030; text-align:center; overflow-wrap:anywhere}