*{box-sizing:border-box}
:root{
  --bg:#f1eee7;
  --card:#fffdf8;
  --ink:#1f2933;
  --muted:#59636f;
  --line:#c8beb0;
  --line2:#8d7f72;
  --accent:#6d3f5f;
  --accent2:#2f7d5c;
  --chip:#eee7df;
  --warn:#b91c1c;
  --warnbg:#fff1f2;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 700px at 10% 0%, #e8dfd3 0%, transparent 60%),
    radial-gradient(900px 700px at 90% 10%, #d8eadf 0%, transparent 55%),
    linear-gradient(180deg, var(--bg), #f7f3eb);
}

.app{max-width:1280px;margin:auto;padding:14px}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;margin-bottom:12px;
  background:#fff;
  border:2px solid var(--line);
  border-radius:16px;
  box-shadow:0 10px 18px rgba(11,18,32,.06);
}

.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;font-weight:900;font-size:18px;
}
.brand-text h1{margin:0;font-size:16px;letter-spacing:.2px}
.brand-text p{margin:1px 0 0;color:var(--muted);font-size:12px}

.topbar-actions{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.ctl{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}
.ctl select{
  font-size:13px;
  border:2px solid var(--line);
  border-radius:12px;
  padding:7px 10px;
  background:#fff;
  outline:none;
}
.ctl select:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(109,63,95,.16)}

.layout{display:grid;grid-template-columns: 1fr 1fr;gap:12px}

.card{
  background:var(--card);
  border:2px solid var(--line);
  border-radius:16px;
  box-shadow:0 12px 22px rgba(11,18,32,.06);
  padding:12px;
}

.card-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  padding-bottom:8px;margin-bottom:8px;
  border-bottom:1px dashed rgba(107,124,147,.55);
}
.card-head h2{margin:0;font-size:14px}
.hint{color:var(--muted);font-size:12px}
.summary{
  font-size:12px;color:var(--ink);
  padding:4px 8px;border:2px solid var(--line);
  border-radius:12px;background:#efe8de;
  min-height:18px;
}

.msg{
  display:none;
  margin:0 0 10px 0;
  padding:4px 8px;
  border-radius:12px;
  border:2px solid rgba(185,28,28,.35);
  background:var(--warnbg);
  color:var(--warn);
  font-size:12px;
  font-weight:800;
}

/* MATRIX */
.matrix-wrap{border:2px solid var(--line2);border-radius:14px;overflow:hidden;background:#fff}
.matrix-head{
  display:grid;
  grid-template-columns: 0.65fr 1fr 1fr 1fr 2.35fr;
  background:linear-gradient(135deg, rgba(109,63,95,.12), rgba(47,125,92,.12));
  border-bottom:2px solid var(--line2);
}
.matrix-head > div{
  padding:8px 8px;
  font-size:12px;
  font-weight:900;
  border-right:1px solid rgba(107,124,147,.55);
  text-align:center;
}
.matrix-head > div:last-child{border-right:none}
.grid{display:flex;flex-direction:column}

/* Each row is its own band */
.mrow{
  display:grid;
  grid-template-columns: 0.65fr 1fr 1fr 1fr 2.35fr;
  border-bottom:1px solid rgba(107,124,147,.55);
}
.mrow:last-child{border-bottom:none}
.mrow:nth-child(odd){background:#fffdf8}
.mrow:nth-child(even){background:#f7f2ea}

.cell{
  padding:6px;
  border-right:1px solid rgba(107,124,147,.35);
}
.mrow .cell:last-child{border-right:none}

.cell select{
  width:100%;
  border:1.8px solid var(--line);
  border-radius:8px;
  padding:6px 8px;
  background:#fff;
  outline:none;
  font-size:12px;
}

/* two selects side-by-side, compact */
.pair{display:grid;grid-template-columns: 1.2fr .8fr;gap:6px}
.pair select:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(47,125,92,.12)}

/* TICKETS: fit 4 tables per row on desktop */
.tickets{
  margin-top:10px;
  display:grid;
  /*
    Zoomable + responsive tiles.
    - The slider updates --ticketZoom on #tickets.
    - Bigger zoom => wider tiles => fewer columns.
  */
  --ticketZoom: 1;
  --ticketMinBase: 170px;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--ticketMinBase) * var(--ticketZoom)), 1fr));
  gap: calc(8px * clamp(0.9, var(--ticketZoom), 1.35));
}

/* Generated Tickets zoom controller */
.ticketZoomCtl{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.ticketZoomLabel{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.ticketZoom{
  width:140px;
  max-width:32vw;
}
.ticketZoomVal{
  font-size:12px;
  font-weight:900;
  min-width:46px;
  text-align:right;
  color:var(--text);
}

@media (max-width: 520px){
  .ticketZoom{ width:120px; }
}

/* Keep tickets comfortably sized on very narrow screens */
@media (max-width: 380px){
  .tickets{ --ticketMinBase: 155px; }
}


/* small 2-col table */
.ticket{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  border:2px solid var(--line2);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

.ticket thead th{
  border:1px solid var(--line2);
  padding: calc(5px * clamp(0.85, var(--ticketZoom), 1.35));
  font-size: clamp(9px, calc(10.5px * var(--ticketZoom)), 16px);
  text-align:left;
  background:linear-gradient(135deg, rgba(29,78,216,.14), rgba(15,118,110,.12));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ticket thead th:last-child{
  text-align:center;
  font-weight:1000;
}

.ticket td{
  border:1px solid var(--line2);
  padding: calc(5px * clamp(0.85, var(--ticketZoom), 1.35));
  font-size: clamp(9px, calc(10.5px * var(--ticketZoom)), 16px);
}

.ticket td.pick{
  text-align:center;
  font-weight:1000;
  color:var(--accent);
  width: clamp(40px, calc(44px * var(--ticketZoom)), 70px);
}

.ticket td.pick.requiredPick{
  border:2px solid var(--warn);
  border-radius:8px;
}

.ticket td:first-child{
  width:auto;
}
.ticketColorDot{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:999px;
  margin-right:8px;
  vertical-align:middle;
  border:1px solid rgba(15,23,42,.18);
  box-shadow:0 0 0 2px rgba(255,255,255,.72);
}

.buttons{display:flex;gap:8px;margin-top:12px}
button{
  flex:1;
  border:2px solid var(--line2);
  border-radius:14px;
  padding:10px 10px;
  background:#fff;
  color:var(--ink);
  font-weight:900;
  cursor:pointer;
}
button:hover{background:rgba(29,78,216,.06)}
button:active{transform:translateY(1px)}

@media(max-width:980px){
  .layout{grid-template-columns:1fr}
}
@media(max-width:560px){
  .matrix-head, .mrow{grid-template-columns: repeat(5, 1fr);}
  .rowtag{grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));}
}


/* === Compact square selects + remove arrows === */
.cell select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:none !important;
  border-radius:4px !important;
  padding:4px 6px !important;
  font-size:12px !important;
}

/* Also apply to top controls */
.ctl select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:none !important;
  border-radius:4px !important;
  padding:4px 6px !important;
}

/* Reduce rounding on matrix container */
.matrix-wrap{ border-radius:6px !important; }
.mrow{ }
.cell{ border-radius:0 !important; }



/* === Keyboard typing game input === */
.pair input.game{
  width:100%;
  border:1.8px solid var(--line);
  background:#fff;
  border-radius:6px;
  padding:4px 6px;
  font-size:12px;
  outline:none;
}

/* remove number spinners (arrows) */
.pair input.game::-webkit-outer-spin-button,
.pair input.game::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.pair input.game{ -moz-appearance: textfield; }

.pair input.game:focus{
  border-color:var(--accent2);
  box-shadow:0 0 0 3px rgba(47,125,92,.12);
}


/* === Ticket color refresh: professional sage + warm stone === */
.ticket{
  background:#f7fdf7; /* very light green */
  border-color:#86c9a8 !important;
}

.ticket thead th{
  background:linear-gradient(135deg, #e9f9ee, #fff6da) !important; /* green -> blue */
  color:#064e3b;
}

.ticket td{
  background:#fbfffb; /* subtle green */
}

.ticket tbody tr:nth-child(even) td{
  background:#f4eee5; /* very light blue stripe */
}

.ticket td.pick{
  color:#166534; /* deeper green for pick */
}

/* Slightly soften grid lines inside tickets */
.ticket td,
.ticket thead th{
  border-color:#9fd7bd !important;
}


/* === Neon Game Field States === */

/* default placeholder = neon red */
.pair input.game::placeholder{
  color:#ff0033;
  font-weight:900;
}

/* Firefox */
.pair input.game::-moz-placeholder{
  color:#ff0033;
  font-weight:900;
}

/* when game has value -> neon green */
.pair input.game.filled{
  color:#00ff66;
  font-weight:900;
}

/* caret also green when filled */
.pair input.game.filled{
  caret-color:#00ff66;
}


/* === Valid = Dark Blue, Invalid = Flash Red === */

/* placeholder stays neon red */
.pair input.game::placeholder{ color:#ff0033; font-weight:900; }
.pair input.game::-moz-placeholder{ color:#ff0033; font-weight:900; }

/* valid filled value -> plum */
.pair input.game.filled{
  color:#5b3150;           /* dark blue */
  font-weight:900;
  caret-color:#5b3150;
}

/* invalid flash */
@keyframes flashRed {
  0%   { background:#ffe4e6; }
  50%  { background:#fecaca; }
  100% { background:#ffffff; }
}

.pair input.game.invalid{
  animation: flashRed .6s ease;
  border-color:#b91c1c !important;
}


/* Back to top button */
.toTop{
  position:fixed;
  right:14px;
  bottom:14px;
  width:42px;
  height:42px;
  border-radius:8px;
  border:2px solid var(--line2);
  background:#ffffff;
  color:var(--ink);
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(11,18,32,.12);
  display:none; /* shown on scroll */
}
.toTop:hover{ background:rgba(29,78,216,.08); }


/* Remove dropdown arrows + make corners less rounded */
.cell select, .ctl select, select.game{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:none !important;
  border-radius:4px !important;
  padding:4px 6px !important;
}

/* Dropdown number styling */
select.game, .cell select{
  color:#0b1220;
  font-weight:900;
}
select.game option{
  color:#0b1220;
  font-weight:900;
}
select.game option:disabled{
  color:#d5c9bb;
  font-weight:700;
}

/* Alternating column colors in input matrix (A/B/A/B/A) */
.mhead div:nth-child(2),
.mhead div:nth-child(4),
.mhead div:nth-child(6),
.mrow .cell:nth-child(2),
.mrow .cell:nth-child(4),
.mrow .cell:nth-child(6){
  background:#f1e8dd;
}
.mhead div:nth-child(3),
.mhead div:nth-child(5),
.mrow .cell:nth-child(3),
.mrow .cell:nth-child(5){
  background:#edf7ef;
}

/* === Pick Summary table (below input matrix) === */
.pickSummaryWrap{
  margin-top:10px;
  border:2px solid #6b7c93;
  background:#fff;
  border-radius:6px;
  overflow:hidden;
}
.pickSummaryHead{
  font-weight:900;
  padding:6px;
  background:#eee3d6;
  border-bottom:1px solid #6b7c93;
}
.pickSummary{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}
.pickSummary th, .pickSummary td{
  border:1px solid #d5c9bb;
  padding:6px;
  font-size:12px;
}
.pickSummary th{
  background:#efe8de;
  text-align:left;
}
.pickSummary tbody tr:nth-child(even) td{
  background:#f7f3eb;
}
.pickChips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pickChip{
  display:inline-block;
  padding:2px 8px;
  border:2px solid #6b7c93;
  border-radius:6px;
  background:#f4eee5;
  font-weight:900;
  font-size:12px;
  line-height:1.2;
  cursor:pointer;
  user-select:none;
}
.pickChip:hover{
  background:#e6d2bd;
}

#msg{display:none !important;}


/* Small red 'Game Number' label in generated tickets */
.gameLabel{
  font-size:10px;
  font-weight:700;
  color:#dc2626; /* red */
}


/* Muted header row for generated tickets */
.ticket thead th{
  background:#e9dfd2 !important; /* light blue */
}


/* Winner logo in original header (slightly bigger) */
.winnerLogo{
  width:40px;
  height:40px;
  object-fit:contain;
  margin-right:6px;
}

/* Odds boxed section */
.oddsWrap{
  margin-top: 12px;
  border: 1px solid #6b7c93;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.65);
}
.oddsHead{
  padding: 8px 10px;
  font-weight: 700;
  border-bottom: 1px solid #6b7c93;
  background: rgba(220,235,255,0.7);
}
.oddsTable{
  width: 100%;
  border-collapse: collapse;
}
.oddsTable td{
  height: 34px;
  border: 1px solid rgba(0,0,0,0.65);
}

.oddsSelect{
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 4px;
  font-size: 14px;
}
.oddsSelect:focus{
  outline: none;
}

/* Pick Summary + Odds side-by-side (together equal Input Matrix width) */
.psOddsRow{
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.psOddsRow > .pickSummaryWrap,
.psOddsRow > .oddsWrap{
  flex: 1;
  min-width: 0;
  margin-top: 0; /* row handles spacing */
}

/* Responsive: stack on narrow screens */
@media (max-width: 780px){
  .psOddsRow{
    flex-direction: column;
  }
}

/* Force 50/50 split inside the row */
.psOddsRow > .pickSummaryWrap,
.psOddsRow > .oddsWrap{
  flex: 0 0 calc(50% - 6px);
}



/* Neon return display in generated tickets */


/* Crisp return display in generated tickets */
.ticket tfoot .returnTotal{
  text-align: center !important;
  font-size: 16px;
  letter-spacing: 0.3px;
  color: #ff2b2b;
  font-weight: 800;
}

/* Google100.net logo colors (no layout changes) */
.googleLogo{margin:0;font-size:26px;font-weight:800;letter-spacing:-0.5px}
.gBlue{color:#4285F4}
.gRed{color:#DB4437}
.gBlue{color:#F4B400}
.gGreen{color:#0F9D58}
.dot{color:#555}


.pair{
  grid-template-columns: 5fr 1fr;
  gap:2px;
}
.pair select.game{
  width:100%;
}
.pair select.picksel{
  width:100%;
}



.pair select.game,
.pair select.picksel{
  width:100%;
  border-radius:0 !important;
}



.pair select.game,
.pair select.picksel{
  width:100%;
  border-radius:0 !important;
  padding-left:4px;
  padding-right:4px;
}



.pair{
  grid-template-columns: 1fr 1fr; /* both get equal max width */
  gap:0;
}

.pair select.game,
.pair select.picksel{
  width:100%;
  border-radius:0 !important;
  padding:2px 4px;
}



.pair select.game,
.pair select.picksel{
  width:100%;
  border-radius:1%;
  padding:2px 4px;
}



.cell{
  padding:0 !important;
}

.pair select.game,
.pair select.picksel{
  width:100%;
  border-radius:1%;
  padding:2px 4px;
}

/* Final tweak: Game wider, Pick smaller, 1px per side gap (clean look) */
.pair{
  grid-template-columns: 4fr 1.5fr;
  gap:2px !important; /* ~1px on each side */
}

.cell{
  padding:0 !important;
}

.pair select.game,
.pair select.picksel{
  width:100%;
  border-radius:1%;
  padding:2px 4px;
}


.matrix .row:nth-child(even){
  background: #efe7dc;
}



/* Use full width for Input Matrix (remove side padding completely) */
.matrix-wrap{
  padding-left:0 !important;
  padding-right:0 !important;
}

.matrix{
  margin-left:0 !important;
  margin-right:0 !important;
}


.matrix .row:nth-child(even){
  background: #eadfd2; /* slightly darker companion */
}


.matrix .row:nth-child(even){
  background: #e8ded1; /* gentle contrast */
}

/* Higher-contrast alternating colors for Input Matrix rows */
.matrix .row:nth-child(odd){
  background: #f3ece1; /* lighter */
}
.matrix .row:nth-child(even){
  background: #e2d4c4; /* noticeably darker */
}

/* Input Matrix pick selector: slightly smaller, not bold */
.pair select.picksel{
  font-size: 12px;
  font-weight: 400;
}


.oddsDone select{
  color:#0b7a2a !important; /* dark green */
  font-weight:900;
}
.oddsIdle select{
  color:#000;
}


.oddsNeed select{
  color:#ff1e1e !important; /* neon red */ /* very dark gray (almost black) */
  font-weight:900;
}

.totalCombosLabel{
  color:#1a7dff; /* neon-ish blue */
  font-weight:800;
}
.totalCombosNum{
  color:#ff1e1e; /* red number */
  font-weight:900;
  font-size:16px;
}

/* Keep top controls in one row */
.topbar-actions{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:nowrap;
}

/* Total combos control */
.totalCtl{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:4px;
  white-space:nowrap;
}
.totalCombosLabel{
  color:#1a7dff; /* sharp neon blue */
  font-weight:800;
}
.totalCombosNumWrap{
  line-height:1;
}
.totalCombosNum{
  color:#ff1e1e; /* red */
  font-weight:900;
  font-size:16px;
}


.oddsNeed select{
  color:#ff1e1e !important; /* neon red */ /* very dark gray */
  font-weight:900;
}
.oddsDone select{
  color:#0b7a2a !important; /* dark green */ /* sharp neon green */
  font-weight:900;
}

/* Topbar controls polish: uniform boxed controls */
.topbar-actions{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:nowrap;
}

.ctl{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:700;
  color:#111;
  white-space:nowrap;
}

/* Make selects look like consistent input boxes */
.ctl select{
  border:1px solid rgba(0,0,0,0.25);
  border-radius:8px;
  padding:6px 10px;
  background:#fff;
  font-weight:700;
}

/* Total combos box to match selects */
.totalCtl .totalCombosNumWrap{
  border:1px solid rgba(0,0,0,0.25);
  border-radius:8px;
  padding:6px 10px;
  background:#fff;
  min-width:52px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.totalCombosLabel{
  margin:0;
}

/* Align label text sizes */
.ctl, .totalCtl .totalCombosLabel{
  font-size:12px;
}

/* Total combos styling */
.totalCombosLabel{
  color:#1a7dff;
  font-weight:800;
}
.totalCombosNum{
  color:#ff1e1e;
  font-weight:900;
  font-size:16px;
  line-height:1;
}

/* Odds indicators: light gray (disabled), dark gray (needs input), dark green (changed) */
.oddsIdle select{
  color:#cfcfcf !important;
  font-weight:600;
}
.oddsNeed select{
  color:#ff1e1e !important; /* neon red */
  font-weight:900;
}
.oddsDone select{
  color:#0b7a2a !important; /* dark green */
  font-weight:900;
}
.oddsIdle select:disabled{
  background:#fff;
  cursor:not-allowed;
}

/* Mobile: use more of the screen width (reduce outer app padding) */
@media (max-width: 600px){
  .app{
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* Mobile: reduce inner padding inside Input Matrix to gain width (no design change) */
@media (max-width: 600px){
  .matrix .cell{
    padding:2px !important;
  }
  .pair select.game,
  .pair select.picksel{
    padding-left:4px !important;
    padding-right:4px !important;
  }
}

/* Mobile: ultra-compact inner spacing for tables (use full width) */
@media (max-width: 600px){
  .matrix-wrap{
    padding:0 !important;
  }
  .card{
    padding-left:4px !important;
    padding-right:4px !important;
  }
  .matrix{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .matrix .row{
    margin:0 !important;
  }
  .matrix .cell{
    padding:1px !important;
  }
}


/* --- Two-column wrapper to keep original left/right cards while allowing a new section above Input Matrix --- */
.colLeft, .colRight{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* --- Buttons section styles (compact, same width as Input Matrix card) --- */
.buttonsCard{ padding:12px; }

.buttonsRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
}

.buttonsLeft{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.buttonsRight{
  display:flex;
  gap:14px;
  margin-left:auto;
}

.dotWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:var(--muted);
  min-width:34px;
}

.dot{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid currentColor;
  background:transparent;
  padding:0;
}

.dotLabel{
  line-height:1;
}

/* Color borders via currentColor */
.d1{ color:#ff0000; }
.d2{ color:#ff6a00; }
.d3{ color:#ffee00; }
.d4{ color:#00ff2a; }
.d5{ color:#00c3ff; }
.d6{ color:#2b4cff; }
.d7{ color:#b000ff; }
.d8{ color:#00ffd5; }
.d9{ color:#ff005d; }
.d10{ color:#9dff00; }

.off{ color:#ff2a2a; }
.on{ color:#00ff55; }


/* === VERY CLEAR CIRCLE LIGHTS (no flat, no tricks) === */
.buttonsRight .dot{
  width:20px;
  height:20px;
  border-radius:50%;
  border:3px solid currentColor;
  background:transparent;
  display:inline-block;
  cursor:pointer;
}

/* OFF = red outline */
.dotWrap.off .dot{
  color:#ff0000;
}

/* ON = green outline */
.dotWrap.on .dot{
  color:#00ff55;
}

/* Active = filled circle (obvious circle) */
.dotWrap.isActive .dot{
  background:currentColor;
}


/* === FORCE 100% PERFECT CIRCLES (hard override) === */
.buttonsRight .dot,
.buttonsRight .dotWrap .dot{
  -webkit-appearance:none !important;
  appearance:none !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  box-sizing:border-box !important;
  width:22px !important;
  height:22px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius:9999px !important;
  border:3px solid currentColor !important;
  background:transparent !important;
  line-height:0 !important;
  flex:0 0 auto !important;
}

.buttonsRight .dotWrap.isActive .dot{
  background:currentColor !important;
}


/* === Color dots: clickable only when ON === */
.colorDot:disabled{
  opacity:0.25;
  cursor:not-allowed;
}

.dotWrap.isSelected .colorDot{
  background: currentColor;
}






/* === per-cell color fills stay as assigned === */
#grid .cell.hasFill{
  background: var(--pickedFill) !important;
}


/* === Strong cell fill with chosen color (per-cell) === */
#grid .cell.hasFill{
  background: var(--pickedFill) !important;
  border-radius:12px;
}

/* Let the color show through (avoid "gray" look) */
#grid .cell.hasFill .pair{
  background: transparent !important;
}

#grid .cell.hasFill select{
  background: transparent !important;
  border-color: var(--pickedFill) !important;
}


/* === Bigger, easier-to-click color buttons === */
.buttonsLeft .dot{
  width:26px !important;
  height:26px !important;
  border-width:3px !important;
}

.dotWrap{
  min-width:48px;
  cursor:pointer;
}

.dotLabel{
  font-size:12px;
  cursor:pointer;
}


/* === NEW: 5 visible pill color buttons (same design language) === */
.colorBtn{
  width:48px;
  height:26px;
  border-radius:999px;
  border:2px solid currentColor;
  background:#fff;
  cursor:pointer;
}
.colorBtn:hover{
  background: currentColor;
  opacity:0.25;
}

/* light but visible colors */
.d1{ color:#ff4d4d; }
.d2{ color:#ff9f43; }
.d3{ color:#ffd93d; }
.d4{ color:#2ecc71; }
.d5{ color:#54a0ff; }

/* layout: same row */
.buttonsRow{
  display:flex;
  align-items:center;
  gap:18px;
}
.buttonsLeft{
  display:flex;
  gap:12px;
}
.buttonsRight{
  display:flex;
  gap:12px;
  margin-left:auto;
}


/* === Light FILLED color buttons (same layout, clearer visibility) === */
.colorBtn{
  width:48px;
  height:26px;
  border-radius:999px;
  border:1.5px solid rgba(0,0,0,0.25);
  cursor:pointer;
  opacity:0.95;
}

.colorBtn:hover{
  opacity:1;
}

/* very light filled colors */
.d1{ background:#fde2e2; } /* light rose */
.d2{ background:#ffe8cc; } /* light peach */
.d3{ background:#fff3bf; } /* light cream blue */
.d4{ background:#e6fcf5; } /* light mint */
.d5{ background:#eee3d6; } /* light sky blue */


/* === Google100.net wiggly dot === */
.wiggleDot{
  display:inline-block;
  width:10px;
  height:10px;
  margin:0 2px;
  background:#4285F4;
  border-radius:50%;
  position:relative;
  top:-4px;
  animation: wiggle 1.6s infinite ease-in-out;
}

/* playful wobble */
@keyframes wiggle{
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-2px) rotate(8deg); }
  50%  { transform: translateY(1px) rotate(-6deg); }
  75%  { transform: translateY(-1px) rotate(4deg); }
  100% { transform: translateY(0) rotate(0deg); }
}


/* ======================================================
   OLD MONEY TERMINAL – FULL COLOR PALETTE
   ====================================================== */

/* App background */
body{
  background:#f6f4ef;
  color:#1f2933;
}

/* Cards */
.card{
  background:#ffffff;
  border-color:#9aa4b2;
}

/* Headers */
.card-head{
  border-bottom:1px dashed #9aa4b2;
}
.card-head h2{
  color:#1f2933;
}

/* Text */
h1, h2, h3, h4{
  color:#1f2933;
}
.muted, .hint, .ctl{
  color:#6b7280;
}

/* Controls */
select, button{
  background:#ffffff;
  color:#1f2933;
  border-color:#9aa4b2;
}

/* Input Matrix */
.matrix-wrap{
  border-color:#9aa4b2;
  background:#ffffff;
}
.mrow:nth-child(odd){
  background:#faf9f6;
}
.mrow:nth-child(even){
  background:#f1efe9;
}
.cell{
  border-color:#9aa4b2;
}

/* Tickets */
.ticket{
  background:#ffffff;
  border-color:#9aa4b2;
}
.ticket thead th{
  background:#e9e6df !important;
  color:#1f2933;
}
.ticket td{
  background:#ffffff;
  color:#1f2933;
}
.ticket tbody tr:nth-child(even) td{
  background:#f4f2ec;
}

/* Totals / important numbers */
.totalCombosLabel{
  color:#14532d;
}
.totalCombosNum{
  color:#7f1d1d;
}

/* Odds */
.oddsWrap{
  border-color:#9aa4b2;
}
.oddsHead{
  background:#e9e6df;
  color:#1f2933;
}

/* Pick chips */
.pickChip{
  background:#f4f2ec;
  border-color:#9aa4b2;
  color:#1f2933;
}
.pickChip:hover{
  background:#e9e6df;
}

/* Color buttons – soften to match palette */
.colorBtn.d1{ background:#f3d6d6; }
.colorBtn.d2{ background:#f4dfc9; }
.colorBtn.d3{ background:#f5edc7; }
.colorBtn.d4{ background:#dfe8df; }
.colorBtn.d5{ background:#dde4ee; }

/* Filled cells */
#grid .cell.hasFill{
  filter:saturate(0.75);
}


/* === Generated Tickets: distinct header row color === */
.ticket thead th{
  background:#e6efe9 !important; /* light sage / mint */
  color:#1f2933;
  font-weight:900;
}


/* === Generated ticket action buttons: allow extra buttons without squeezing === */
.colRight .buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.colRight .buttons button{
  flex:1 1 calc(33% - 8px);
  min-width:90px;
}

/* === Tofes modal viewer === */
.tofesModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  z-index:9999;
}
.tofesModal.isOpen{ display:flex; }

.tofesPanel{
  width:min(920px, 96vw);
  height:min(92vh, 980px);
  background:#ffffff;
  border:2px solid rgba(0,0,0,0.25);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,0.25);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.tofesTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,0.18);
  background:rgba(0,0,0,0.03);
}
.tofesTitle{ font-weight:900; }
.tofesClose{
  width:auto;
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:8px;
}

.tofesBody{
  flex:1;
  overflow:auto;
  background:rgba(0,0,0,0.02);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:10px;
}

.tofesCanvas{
  width:100%;
  max-width:860px;
  height:auto;
  border:1px solid rgba(0,0,0,0.15);
  border-radius:8px;
  background:#fff;
}

.tofesBottom{
  border-top:1px solid rgba(0,0,0,0.18);
  background:rgba(0,0,0,0.03);
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;

  /* If the bottom area (controls + magnifier) gets taller than the available
     modal height, allow *this* section to scroll so action buttons aren't trapped. */
  flex:0 1 auto;
  min-height:0;
  max-height:45vh;
  overflow:auto;
}

.tofesMsg{
  font-size:12px;
  font-weight:800;
  color:#7f1d1d;
  min-height:16px;
}

.tofesControls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}

/* Keep the lock badge and calibration buttons visible on narrow screens */
.tofesLock{
  display:block;
  width:100%;
  padding:4px 8px;
  border-radius:14px;
  border:2px solid rgba(0,0,0,0.18);
  background:rgba(0,0,0,0.02);
  font-weight:900;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.15;
}

.tofesControls button{
  flex:0 0 auto;
  width:auto;
  padding:8px 12px;
  border-radius:12px;
}
.tofesCounter{
  font-weight:900;
}


/* === Tofes viewer: zoom control + save button === */
.tofesControls{
  flex-wrap:wrap;
}
.tofesZoomCtl{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid rgba(0,0,0,0.18);
  border-radius:12px;
  background:rgba(255,255,255,0.7);
}
.tofesZoomLabel{ font-weight:900; font-size:12px; }
#tofesZoom{ width:160px; }
.tofesZoomVal{ font-weight:900; font-size:12px; min-width:48px; text-align:right; }

.tofesBody{
  /* make zoom feel anchored from top-left */
  justify-content:flex-start;
}
.tofesCanvas{
  transform-origin: top left;
}


/* === Tofes viewer: pan buttons + pro calibration === */
.tofesPanCtl{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid rgba(0,0,0,0.18);
  border-radius:12px;
  background:rgba(255,255,255,0.7);
}
.tofesPanCtl button{
  width:auto;
  padding:6px 10px;
  border-radius:8px;
}
#tofesCalPro, #tofesResetCal{
  width:auto;
  padding:8px 12px;
  border-radius:12px;
}


/* === Calibration magnifier === */
.tofesMagWrap{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,0.18);
  border-radius:14px;
  background:rgba(255,255,255,0.75);
}
.tofesMagTitle{ font-weight:900; font-size:12px; }
.tofesMag{ border:1px solid rgba(0,0,0,0.2); border-radius:8px; background:#fff; }
.tofesMagHint{ font-size:11px; font-weight:800; color:#6b7280; }

.tofesBody.calibrating{
  cursor: crosshair;
}


/* === Fix canvas sizing: let JS control width/height so it doesn't collapse === */
.tofesCanvas{
  display:block;
  height:auto; /* JS sets explicit height */
}


/* === Fix layout: keep full form visible; magnifier as overlay (doesn't steal height) === */
.tofesPanel{ min-height:0; }
.tofesBody{
  position:relative;
  min-height:0;
}
.tofesMagOverlay{
  position:absolute;
  right:12px;
  bottom:12px;
  width:min(320px, 92vw);
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,0.18);
  border-radius:14px;
  background:rgba(255,255,255,0.92);
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
  pointer-events:none; /* lets you click the form under it */
}
.tofesMagOverlay .tofesMag{ pointer-events:none; }
.tofesMagOverlay .tofesMagTitle,
.tofesMagOverlay .tofesMagHint{ pointer-events:none; }


/* === Draggable magnifier overlay === */
.tofesMagOverlay{
  pointer-events:auto; /* needed so we can drag it */
  user-select:none;
  touch-action:none;
}
.tofesMagOverlay .tofesMag,
.tofesMagOverlay .tofesMagHint{
  pointer-events:none; /* clicks go through to the form */
}
.tofesMagHandle{
  cursor: grab;
  pointer-events:auto;
}
.tofesMagOverlay.dragging .tofesMagHandle{ cursor: grabbing; }

/* default starting position */
.tofesMagOverlay{
  left:auto;
  top:auto;
}


/* === Sticky magnifier: stays on screen while the form scrolls === */
.tofesPanel{ position:relative; }
.tofesMagOverlay{
  position:absolute !important;
  right:12px;
  top:62px; /* under the title bar */
  bottom:auto;
  left:auto;
  z-index:5;
}

/* Body can scroll independently */
.tofesBody{
  overflow:auto;
}

.tofesBody{ flex:1; min-height:0; overflow:auto; }

/* --- Calibration UX upgrades (saved + indicator + undo) --- */
.tofesBody.calibrating #tofesCanvas{ cursor: crosshair; }

.tofesLock{
  display:block;
  width:100%;
  padding:4px 8px;
  border-radius:14px;
  border:2px solid rgba(0,0,0,0.18);
  background:rgba(0,0,0,0.02);
  font-weight:900;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.15;
}
.tofesLock::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:#94a3b8;
  box-shadow:0 0 0 2px rgba(15,23,42,.12) inset;
}
.tofesLock[data-tone="green"]::before{
  background:#16a34a;
  box-shadow:0 0 10px rgba(22,163,74,.55);
}
.tofesLock[data-tone="orange"]::before{
  background:#2563eb;
  box-shadow:0 0 10px rgba(245,158,11,.55);
}
.tofesLock[data-tone="gray"]::before{
  background:#94a3b8;
  box-shadow:none;
}

/* Make calibration buttons stand out a bit */
#tofesUndoCal{ border-color: rgba(185,28,28,.35); }
#tofesUndoCal:hover{ background: rgba(185,28,28,.08); }
#tofesTune12{ border-color: rgba(15,118,110,.35); }
#tofesTune12:hover{ background: rgba(15,118,110,.08); }

/* Quick-fix controls (edit one calibration spot) */
.tofesMiniRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}
.tofesMiniSelect{
  flex:1 1 180px;
  min-width:160px;
  padding:10px 12px;
  border-radius:12px;
  border:2px solid rgba(0,0,0,0.18);
  background:rgba(255,255,255,0.95);
  font-weight:800;
}


/* === Marks-only printing offsets === */
.tofesPrintOffsets{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border:1px dashed rgba(0,0,0,0.25);
  border-radius:14px;
}
.tofesPrintOffsets label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:800;
}
.tofesPrintOffsets input{
  width:90px;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.25);
}


/* Magnifier: allow dragging the handle while keeping the overlay click-through */
.tofesMagHandle, .tofesMagTitle{
  pointer-events:auto;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
.tofesMagOverlay.dragging .tofesMagHandle,
.tofesMagOverlay.dragging .tofesMagTitle{
  cursor:grabbing;
}


/* --- Main Table (1X2 picks) --- */
.mainTableCard .card-head{ align-items:flex-start; }

/* Controls: tighter + aligned */
.mainTableControls{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.inlineCtl{ min-width: 170px; }
.smallMsg{ margin:0; padding:6px 10px; font-size:12px; border-radius:12px; }
.smallMsg.warn{ border-color: var(--warn); background: var(--warnbg); color: var(--warn); }

.mainTableWrap{ overflow:auto; border-radius:16px; }

/* Professional compact table:
   - zebra by LINE (A/B)
   - thick divider between LINES (not between slots)
   - subtle gridlines + clearer column dividers
*/
.mainTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background: var(--card);
  font-size:12.5px;
  line-height:1.15;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 10px 18px rgba(11,18,32,.06);
}

/* Header */
.mainTable thead th{
  position:sticky;
  top:0;
  z-index:1;
}
.mainTable th{
  background: linear-gradient(180deg,#f7f3eb,#f1f5f9);
  color:#0f172a;
  font-weight:800;
  border-bottom:1px solid var(--line);
  padding:6px 6px;
  text-align:center;
}
.mainTable th.subtleHead{ color:#94a3b8; font-weight:700; }

/* Cells */
.mainTable td{
  padding:4px 6px;
  text-align:center;
  vertical-align:middle;
  border-bottom:1px solid #e5eaf2;
}
.mainTable tr:last-child td{ border-bottom:0; }

/* Column dividers (cleaner than full borders everywhere) */
.mainTable td + td,
.mainTable th + th{
  border-left:1px solid #e5eaf2;
}

/* Line number column */
.mainTable .lineCol{
  width: 38px;
  font-weight:900;
  color:#0f172a;
  letter-spacing:.2px;
}


.sectionHeaderRow td{
  padding:10px 12px;
  background:linear-gradient(180deg,#e0f2fe,#f7f3eb);
  border-top:2px solid #93c5fd;
  border-bottom:1px solid #d5c9bb;
}
.sectionHeaderBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.3px;
  color:#0f172a;
  background:#ffffff;
  border:1px solid #bfdbfe;
  box-shadow:0 4px 10px rgba(59,130,246,.10);
}
.rowLabelWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.rowLabel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:#e9dfd2;
  color:#1d4ed8;
  font-weight:900;
}
.sectionMini{
  font-size:10px;
  font-weight:800;
  color:#64748b;
  letter-spacing:.4px;
}

/* Game column */
.mainTable .gameCol{ text-align:left; min-width: 120px; }
.mainTable .colorCol{ width: 190px; min-width: 190px; text-align:center; }
.gameCellWrap{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Slot tag (A/B) */
.slotTag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color:#0f172a;
  background:#e2e8f0;
  border:1px solid #d5c9bb;
}

/* Selects: compact and consistent */
.mainTable select{
  width:100%;
  padding:3px 8px;
  border:1px solid #d5c9bb;
  border-radius:10px;
  font-weight:800;
  background:#fff;
  height:28px;
}
.mainTable select:focus-visible{
  outline:2px solid rgba(29,78,216,.35);
  outline-offset:2px;
  border-color:#93c5fd;
}
.colorPickerWrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.mainColorSwatch{
  width:20px;
  height:20px;
  border-radius:999px;
  border:1px solid #94a3b8;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
  flex:0 0 20px;
}
.mainTable select.mainColorSelect{
  min-width:150px;
  width:150px;
  padding:3px 8px;
  border:1px solid #d5c9bb;
  border-radius:10px;
  font-weight:700;
  background:#fff;
  height:28px;
}

/* Picks: tighter pills */
.pickToggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  position:relative;
}

/* Hide native checkbox – the square you see is the pill itself */
.pickToggle input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  pointer-events:none;
}

.pickPill{
  width:24px;
  height:24px;
  border-radius:6px;
  border:1px solid #94a3b8;
  background:#f7f3eb;
  color:#0f172a;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.06);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.pickToggle:hover .pickPill{
  transform: translateY(-0.5px);
}

/* Neon “lit” state */
.pickToggle:active .pickPill{
  transform: translateY(0.5px);
}

.pickToggle input:focus-visible + .pickPill{
  outline:2px solid rgba(29,78,216,0.55);
  outline-offset:2px;
}

.pickToggle input:checked + .pickPill{
  border-color:#22c55e;
  background:#bbf7d0; /* filled light green */
  color:#064e3b;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.35), 0 0 14px rgba(34,197,94,0.55);
}

/* Zebra striping by line (A/B) — subtle, “app” vibes */
.mainTable tr.lineA td{ background:#ffffff; }
.mainTable tr.lineB td{ background:#f7f3eb; }

/* Hover: gentle focus without nuking contrast */
.mainTable tr.lineA:hover td,
.mainTable tr.lineB:hover td{
  background:#eef2ff;
}

/* Divider between lines (only on the first slot row) */
.mainTable tr.lineStart td{
  border-top:2px solid #d5c9bb;
}
.mainTable tr.lineStart td:first-child{
  border-top-left-radius:12px;
}
.mainTable tr.lineStart td:last-child{
  border-top-right-radius:12px;
}

/* Reduce visual noise between slots inside the same line */
.mainTable tr:not(.lineStart) td{
  border-top:0;
}
.mainTable tr:not(.lineEnd) td{
  /* keep bottom rule; lineEnd gives a little breathing room */
}

/* Slightly separate each LINE section with extra spacing illusion */
.mainTable tr.lineEnd td{
  box-shadow: inset 0 -6px 0 rgba(15,23,42,.02);
}

/* --- /Main Table --- */
/* --- /Main Table --- */


/* Generated tickets header - light orange */
.tickets table thead th,
.ticketTable thead th,
.tickets .ticketHeader {
  background-color: #ffe4b3 !important; /* light orange */
  color: #333;
}




/* Modern ON/OFF toggle buttons */
.mainTableToggle {
  display: flex;
  gap: 10px;
  align-items: center;
}


.mainModeControl{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  border-radius:16px;
  background:linear-gradient(180deg,#f7f3eb,#eef2ff);
  border:1px solid #d5c9bb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 18px rgba(15,23,42,.06);
}

.mainModeText{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

.mainModeTitle{
  font-size:12px;
  font-weight:800;
  color:#0f172a;
  letter-spacing:.02em;
}

.mainModeHint{
  font-size:11px;
  color:#475569;
  font-weight:700;
}

.lightSwitch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid #d5c9bb;
  background:linear-gradient(180deg,#ffffff,#e2e8f0);
  color:#0f172a;
  border-radius:999px;
  padding:6px 10px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(15,23,42,.12);
  transition:transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.lightSwitch:hover{ transform:translateY(-1px); }
.lightSwitch:active{ transform:translateY(0); }

.lightSwitchBulb{
  font-size:15px;
  line-height:1;
  filter: grayscale(.15);
}

.lightSwitchTrack{
  width:44px;
  height:24px;
  border-radius:999px;
  background:#d5c9bb;
  position:relative;
  box-shadow: inset 0 1px 3px rgba(15,23,42,.2);
  transition:background 150ms ease, box-shadow 150ms ease;
}

.lightSwitchKnob{
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(15,23,42,.28);
  transition:left 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.lightSwitch.is-on{
  border-color:#ef4444;
  background:linear-gradient(180deg,#fff1f2,#ffe4e6);
  box-shadow:0 6px 18px rgba(239,68,68,.22);
}

.lightSwitch.is-on .lightSwitchBulb{
  filter:none;
  text-shadow:0 0 8px rgba(255,180,0,.6);
}

.lightSwitch.is-on .lightSwitchTrack{
  background:linear-gradient(180deg,#fb7185,#dc2626);
  box-shadow: inset 0 1px 3px rgba(127,29,29,.28), 0 0 10px rgba(239,68,68,.35);
}

.lightSwitch.is-on .lightSwitchKnob{
  left:23px;
  background:#fff5f5;
  box-shadow:0 1px 4px rgba(127,29,29,.28), 0 0 10px rgba(255,255,255,.6);
}

/* Base button */
.toggleBtn {
  min-width: 64px;
  padding: 6px 14px;
  border-radius: 999px; /* pill shape */
  border: 2px solid;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* ON button */
.toggleOn {
  border-color: #2ecc71;
  color: #2ecc71;
}

.toggleOn.active {
  background: linear-gradient(180deg, #2ecc71, #27ae60);
  color: #fff;
  box-shadow: 0 2px 6px rgba(46,204,113,0.45);
  transform: translateY(1px);
}

/* OFF button */
.toggleOff {
  border-color: #e74c3c;
  color: #e74c3c;
}

.toggleOff.active {
  background: linear-gradient(180deg, #e74c3c, #c0392b);
  color: #fff;
  box-shadow: 0 2px 6px rgba(231,76,60,0.45);
  transform: translateY(1px);
}

/* Hover effects */
.toggleBtn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.toggleBtn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}



/* Required picks (when ON-mode was used) */
.pickPill.reqPick {
  border: 2px solid #e74c3c !important; /* red border */
  box-sizing: border-box;
}

/* =====================================================
   Red locked picks should stay red even after the switch is turned OFF.
   The switch changes ONLY how the NEXT clicks behave.
   Existing red picks remain red and locked per game.
   ===================================================== */

@keyframes neonPulseRed {
  0%, 100% {
    box-shadow:
      0 0 2px rgba(255, 30, 30, 0.60),
      0 0 8px rgba(255, 30, 30, 0.55),
      0 0 18px rgba(255, 30, 30, 0.35);
    filter: brightness(1.05);
  }
  50% {
    box-shadow:
      0 0 3px rgba(255, 30, 30, 0.75),
      0 0 12px rgba(255, 30, 30, 0.65),
      0 0 28px rgba(255, 30, 30, 0.45);
    filter: brightness(1.15);
  }
}

.pickPill.reqPick {
  border-color: #ff1e1e !important;
  background: rgba(255, 30, 30, 0.10);
  color: #ff1e1e;
  animation: neonPulseRed 1.6s ease-in-out infinite;
}

/* Make the glow a bit stronger on hover/tap */
.pickToggle:hover .pickPill.reqPick,
.pickToggle:active .pickPill.reqPick {
  box-shadow:
    0 0 4px rgba(255, 30, 30, 0.85),
    0 0 16px rgba(255, 30, 30, 0.70),
    0 0 34px rgba(255, 30, 30, 0.50);
}








/* OFF state: rocker looks "up" */
.lightSwitch:not(.is-on) .rocker-face{
  transform: rotateX(10deg) translateY(-1px);
}

/* ON state: rocker looks "pressed down" + subtle green glow */
.lightSwitch.is-on .rocker{
  border-color: rgba(46, 204, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.16), 0 2px 4px rgba(0,0,0,0.12);
}
.lightSwitch.is-on .rocker-face{
  background: linear-gradient(to bottom, rgba(46, 204, 113, 0.18), rgba(255,255,255,0.55));
  transform: rotateX(-10deg) translateY(1px);
}
.lightSwitch.is-on .rocker-icon{
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(46, 204, 113, 0.40));
}




/* --- Realistic wall light switch (VERTICAL / wide orientation) --- */
.lightSwitch{
  margin-left: 12px;
  width: 52px;      /* wider */
  height: 28px;     /* shorter height */
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
}

.lightSwitch .switchPlate{
  width: 52px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(to right, #f8f8f8, #e0e0e0);
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.8),
    inset -1px 0 0 rgba(0,0,0,0.08),
    0 2px 4px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightSwitch .switchToggle{
  width: 26px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(to right, #ffffff, #d8d8d8);
  border: 1px solid rgba(0,0,0,0.3);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.9),
    inset -1px 0 0 rgba(0,0,0,0.15);
  transform: translateX(-8px);
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

/* ON state: switch pressed right */
.lightSwitch.is-on .switchToggle{
  transform: translateX(8px);
  background: linear-gradient(to right, #eaffea, #b8f0b8);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.9),
    inset -1px 0 0 rgba(0,128,0,0.25),
    0 0 6px rgba(46,204,113,0.5);
}

.lightSwitch.is-on .switchPlate{
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.8),
    inset -1px 0 0 rgba(0,128,0,0.2),
    0 0 6px rgba(46,204,113,0.4);
}.compactCtl{
  margin-left: 6px;
  gap: 4px;
}

.compactCtl .ctlLabel{
  font-size: 11px;
  opacity: 0.7;
}

.compactSelect{
  width: 44px;      /* very thin */
  padding: 2px 4px;
  font-size: 12px;
}


/* Right-side controls in same row */
.rightControls{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Ensure parent row uses flex so rightControls stays on same line */
.topbar-actions,
.controlsRow,
.mainControls{
  display: flex;
  align-items: center;
}

/* ===== Calibration / Magnifier panel cleanup ===== */
.tofesMagOverlay{
  position: fixed;
  right: 14px;
  top: 74px;
  width: 360px;
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 92px);
  overflow: auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  z-index: 9999;
}

.tofesMagTitle{
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  cursor: grab;
  user-select: none;
}

.tofesControls{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 14px 12px;
}

.tofesNavRow{
  display:flex;
  align-items:center;
  gap:8px;
}
.tofesNavRow .tofesCounter{
  flex:1;
  text-align:center;
  font-weight:600;
  opacity:.9;
}
.tofesBtnSmall{
  padding: 8px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

.tofesGroup{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  overflow: hidden;
}
.tofesGroup > summary{
  list-style: none;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 700;
  background: rgba(255,255,255,.06);
  user-select: none;
}
.tofesGroup > summary::-webkit-details-marker{ display:none; }
.tofesGroupBody{
  padding: 10px 12px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tofesRow{
  display:flex;
  align-items:center;
  gap:10px;
}
.tofesLabel{
  width: 64px;
  font-weight: 600;
  opacity: .9;
}
.tofesZoomRow{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
}
.tofesZoomRow input[type="range"]{ flex: 1; }

.tofesBtnStack{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tofesBtnRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}
.tofesBtnRow button{ width:100%; }

.tofesBtnGrid2{
  flex:1;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}
.tofesBtnIcon{
  padding: 10px 0;
  border-radius: 10px;
}

.tofesMiniRow{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap: wrap;
}
.tofesMiniSelect{
  flex:1;
  min-width: 160px;
  padding: 8px 10px;
  border-radius: 10px;
}
.tofesMiniLab{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight: 600;
  opacity: .9;
}
.tofesMiniLab input{
  width: 80px;
  padding: 6px 8px;
  border-radius: 10px;
}

@media (max-width: 860px){
  .tofesMagOverlay{
    top: auto;
    bottom: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: 48vh;
  }
}

.tofesMagHint{
  pointer-events:none;
  opacity:.75;
}


/* --- Main Table multi-slot (Line + Slot tags) --- */
#mainTable .lineCol{
  width: 38px;
  text-align:center;
  font-weight:700;
  color:var(--muted);
}
#mainTable .gameCellWrap{
  display:flex;
  align-items:center;
  gap:8px;
}
#mainTable .slotTag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.35);
  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;
  color:var(--muted);
}

/* Empty state for tickets */
.ticketsEmpty{
  padding: 12px 10px;
  border: 1px dashed rgba(255,255,255,0.25);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.85;
}


/* Locked game numbers: make disabled options clearly "not available" */
select.game option:disabled{
  color: #7d7d7d;
  background: #e9e9e9;
}

/* Visual feedback when user tries to pick a locked number */
select.blockedPulse{
  animation: blockedPulse 0.55s ease;
}
@keyframes blockedPulse{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-2px); }
  40%{ transform: translateX(2px); }
  60%{ transform: translateX(-2px); }
  80%{ transform: translateX(2px); }
  100%{ transform: translateX(0); }
}

/* Toast */
#toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(18,18,20,0.92);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  letter-spacing: 0.2px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  transition: opacity 140ms ease, transform 140ms ease;
}
#toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}


/* Strong visual for locked game numbers in dropdowns */
select.mainGameSel option:disabled,
select.mainGameSel option.lockedOpt{
  color: #b5b5b5 !important;
  background: #f3f3f3;
}

select.mainGameSel:disabled{
  opacity: 0.6;
}


/* Odds calculator */
.oddsCard .oddsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}

.oddsCtl{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}

.oddsCtl select{
  height:34px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#f7f3eb;
  color:var(--ink);
  padding:0 10px;
  font-size:13px;
  outline:none;
}

.oddsCtl select:focus{
  border-color:rgba(29,78,216,.55);
  box-shadow:0 0 0 3px rgba(29,78,216,.15);
}

.oddsResults{
  display:flex;
  gap:14px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed rgba(182,194,209,.9);
}

.oddsResultItem{
  flex:1;
  background:linear-gradient(180deg, #ffffff, #f7f2ea);
  border:1px solid rgba(182,194,209,.75);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.oddsResultLabel{
  font-size:12px;
  color:var(--muted);
}

.oddsResultValue{
  font-size:16px;
  letter-spacing:.2px;
}

@media (max-width: 980px){
  .oddsCard .oddsGrid{ grid-template-columns: 1fr; }
  .oddsResults{ flex-direction:column; }
}




/* v28 Odds Calculator: vertical rows that match Games to pick */
.oddsCard .oddsLayout{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap:12px;
  margin-top:10px;
}

.oddsList{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.oddsRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(182,194,209,.75);
  background:linear-gradient(180deg, #ffffff, #f7f2ea);
}

.oddsRowIdx{
  width:22px;
  height:22px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:12px;
  color:rgba(15,23,42,.75);
  background:#eef2f7;
  border:1px solid rgba(182,194,209,.9);
  flex:0 0 auto;
}

.oddsRowLabel{
  font-size:12px;
  color:var(--muted);
  flex:1 1 auto;
}

.oddsRow select{
  height:32px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#f7f3eb;
  color:var(--ink);
  padding:0 10px;
  font-size:13px;
  outline:none;
  min-width:120px;
}

.oddsRow select:focus{
  border-color:rgba(29,78,216,.55);
  box-shadow:0 0 0 3px rgba(29,78,216,.15);
}

.oddsSummary{
  border-radius:18px;
  border:1px solid rgba(182,194,209,.75);
  background:linear-gradient(180deg, #ffffff, #f6f8fb);
  padding:10px 12px;
  height: fit-content;
}

.oddsSummaryRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 6px;
  border-bottom:1px dashed rgba(182,194,209,.9);
}

.oddsSummaryRow:last-child{
  border-bottom:none;
}

.oddsKey{
  font-size:12px;
  color:var(--muted);
}

.oddsVal{
  font-weight:800;
  letter-spacing:.2px;
  font-variant-numeric: tabular-nums;
}

.totalReturnRow .oddsVal{
  font-size:16px;
}


/* Main Table: % slider column */
.mainTable th.pctCol,
.mainTable td.pctCol{
  width: 320px;
  min-width: 300px;
}
.pctWrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.pctWrap .mainPctRange{
  flex: 1 1 auto;
  width: 240px;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--pctColor,#d5c9bb) 0%, var(--pctColor,#d5c9bb) var(--pctFill,0%), #d6d6d6 var(--pctFill,0%), #d6d6d6 100%);
  outline: none;
  border: 1px solid rgba(0,0,0,0.08);
}
.mainPctRange::-webkit-slider-runnable-track{
  height: 10px;
  border-radius: 999px;
  background: transparent;
}
.mainPctRange::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pctColor,#94a3b8);
  border: 2px solid #ffffff;
  box-shadow: 0 0 var(--pctGlow,0px) var(--pctColor,#94a3b8);
  margin-top: -4px; /* centers thumb on track */
}
.mainPctRange::-moz-range-track{
  height: 10px;
  border-radius: 999px;
  background: transparent;
}
.mainPctRange::-moz-range-progress{
  height: 10px;
  border-radius: 999px;
  background: var(--pctColor,#94a3b8);
}
.mainPctRange::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pctColor,#94a3b8);
  border: 2px solid #ffffff;
  box-shadow: 0 0 var(--pctGlow,0px) var(--pctColor,#94a3b8);
}
.pctWrap .pctVal{
  font-weight:700;
  min-width: 48px;
  text-align:right;
}

/* --- Game Appearance Stats --- */
.statsCard{margin-top:12px}
.statsHint{font-size:12px;color:var(--muted)}
.statsTableWrap{overflow:auto;border-radius:14px;border:2px solid var(--line);background:linear-gradient(180deg,#ffffff,#fffdf8)}
.statsTable{width:100%;border-collapse:separate;border-spacing:0;min-width:520px}
.statsTable thead th{
  position:sticky;top:0;z-index:1;
  background:linear-gradient(180deg,#f2f6ff,#ffffff);
  color:var(--muted);
  font-weight:800;
  font-size:12px;
  border-bottom:2px solid var(--line);
  padding:10px 10px;
  text-align:left;
}
.statsTable tbody td{
  padding:10px 10px;
  border-bottom:1px solid rgba(182,194,209,.7);
  font-size:13px;
}
.statsTable tbody tr:nth-child(2n) td{background:rgba(231,240,255,.25)}
.statsTable tbody tr:hover td{background:rgba(223,247,243,.45)}
.statsTable .rankCol{width:44px}
.statsTable .gameNumCol{width:90px;font-weight:900}
.statsTable .countCol{width:110px;font-weight:800}
.statsTable .pctOfTicketsCol{width:110px;font-weight:800}
.statsTable .barCol{min-width:220px}
.statsEmpty{
  padding:12px 14px;
  color:var(--muted);
  font-size:12px;
}
.statBar{
  height:12px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.12);
  background:rgba(11,18,32,.06);
  overflow:hidden;
}
.statBar > i{
  display:block;height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#22c55e,#2563eb,#f97316,#ef4444,#b91c1c);
  box-shadow:0 6px 12px rgba(185,28,28,.18);
}
.badgeChip{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.12);
  background:rgba(231,240,255,.7);
  font-size:12px;
  font-weight:800;
  color:var(--ink);
}

.sectionHeaderBadgeWide{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sectionCountCtl{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
}
.sectionCountCtl select{
  min-width:72px;
}
.emptySectionRow td{
  padding:12px 14px;
  color:#64748b;
  font-size:13px;
  background:#f7f3eb;
}


.homeSectionControls{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.homeTable .pickCol,
.homeTable .gameCol,
.homeTable .lineCol{
  text-align:center;
}


.ticketModalDialog{
    width:min(100%, 100vw - 24px);
    border-radius:22px;
  }

  .ticketModalHead{
    padding:16px 16px 12px;
  }

  .ticketModalBody{
    padding:0 16px 10px;
  }

  .ticketModalFoot{
    grid-template-columns:1fr;
    padding:12px 16px 16px;
  }

  #ticketPrevBtn,
  #ticketNextBtn{
    justify-self:stretch;
    width:100%;
  }

  .ticketModalCounter{
    order:-1;
    justify-self:center;
  }
}


.ticketModalDialog{
    width:100vw;
    max-height:92vh;
    border-radius:24px 24px 0 0;
  }

  .ticketModalHead{
    padding:16px 16px 8px;
  }

  .ticketModalTitle{
    font-size:20px;
  }

  .ticketModalBody{
    padding:8px 16px 14px;
  }

  .ticketModalFoot{
    grid-template-columns:1fr;
    padding:0 16px 16px;
  }

  #ticketPrevBtn,
  #ticketNextBtn{
    justify-self:stretch;
    width:100%;
  }

  .ticketModalCounter{
    justify-self:center;
  }
}


.ticketModalDialog{
    width:min(100vw - 24px, 100%);
    max-height:92vh;
    border-radius:26px;
  }

  .ticketModalHead{
    padding:18px 16px 8px;
  }

  .ticketModalTitle{
    font-size:20px;
  }

  .ticketModalBody{
    padding:8px 16px 12px;
  }

  .ticketModalFoot{
    grid-template-columns:1fr;
    padding:12px 16px 16px;
  }

  #ticketPrevBtn,
  #ticketNextBtn{
    justify-self:stretch;
    width:100%;
  }

  .ticketModalCounter{
    justify-self:center;
  }
}



.ticketModal[hidden],
.ticketModal.hidden,
.ticketModal[aria-hidden="true"]{
  display:none !important;
}

.ticketModal{
  position:fixed;
  inset:0;
  z-index:99999;
  pointer-events:none;
}

.ticketModalBackdrop{
  display:none;
}

.ticketModalDialog{
  position:fixed;
  right:24px;
  top:24px;
  width:min(520px, calc(100vw - 48px));
  max-height:min(78vh, 760px);
  overflow:auto;
  background:#fffdf9;
  color:#1f2937;
  border:1px solid rgba(120,113,108,.18);
  border-radius:24px;
  box-shadow:0 22px 50px rgba(0,0,0,.22);
  z-index:1;
  display:flex;
  flex-direction:column;
  pointer-events:auto;
}

.ticketModalHead{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 18px 8px;
  flex:0 0 auto;
}

.ticketModalTitle{
  font-size:20px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:#111827;
}

.ticketModalBody{
  flex:1 1 auto;
  overflow:auto;
  padding:8px 16px 12px;
}

.ticketModalBody .ticketTable,
.ticketModalBody table{
  width:100%;
  background:#ffffff;
  border:1px solid rgba(120,113,108,.14);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(28,25,23,.08);
}

.ticketModalBody .ticketsEmpty{
  background:#ffffff;
  color:#57534e;
  border:1px dashed #d6d3d1;
  border-radius:18px;
  padding:22px;
  text-align:center;
}

.ticketModalFoot{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:center;
  padding:10px 16px 16px;
  background:#fffdf9;
  border-top:1px solid rgba(120,113,108,.10);
}

.ticketNavBtn{
  min-width:110px;
  height:44px;
  border:none;
  border-radius:14px;
  background:#111827;
  color:#ffffff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.ticketNavBtn:hover{
  background:#1f2937;
}

.ticketNavBtn:disabled{
  opacity:.35;
  cursor:not-allowed;
}

#ticketPrevBtn{
  justify-self:start;
}

#ticketNextBtn{
  justify-self:end;
}

.ticketModalCounter{
  min-width:100px;
  text-align:center;
  font-weight:800;
  color:#111827;
  background:#ffffff;
  border:1px solid rgba(120,113,108,.14);
  border-radius:999px;
  padding:10px 14px;
}

@media (max-width: 720px){
  .ticketModalDialog{
    right:12px;
    left:12px;
    top:auto;
    bottom:12px;
    width:auto;
    max-height:70vh;
    border-radius:22px;
  }

  .ticketModalFoot{
    grid-template-columns:1fr;
  }

  #ticketPrevBtn,
  #ticketNextBtn{
    justify-self:stretch;
    width:100%;
  }

  .ticketModalCounter{
    justify-self:center;
  }
}


.ticketCloseBtn{
  margin-left:auto;
  font-size:20px;
  background:none;
  border:none;
  cursor:pointer;
  padding:4px 10px;
}
.ticketModalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
}


/* ===== Mobile responsiveness upgrade ===== */
html{
  -webkit-text-size-adjust:100%;
}
body{
  overflow-x:hidden;
}
img, canvas{
  max-width:100%;
  height:auto;
}
button,
select,
input,
summary,
.ticketNavBtn,
.ticketCloseBtn,
.toTop{
  touch-action:manipulation;
}
.mainTableWrap,
.tickets,
.ticketModalBody,
.tofesBody,
.tofesControls{
  -webkit-overflow-scrolling:touch;
}
.mainTableWrap{
  overflow-x:auto;
  overflow-y:visible;
}
.mainTable,
.homeTable{
  min-width:540px;
}
.toTop{
  right:max(14px, env(safe-area-inset-right));
  bottom:max(14px, calc(env(safe-area-inset-bottom) + 8px));
}

@media (max-width: 900px){
  .app{
    padding:10px;
  }
  .topbar{
    align-items:stretch;
    flex-direction:column;
    padding:12px;
  }
  .brand{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    text-align:center;
  }
  .topbar-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    align-items:stretch;
  }
  .ctl,
  .totalCtl,
  .viewTicketsBtn{
    width:100%;
  }
  .ctl select,
  button{
    min-height:46px;
    font-size:16px;
  }
  .card{
    padding:10px;
  }
  .card-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .ticketZoomCtl{
    width:100%;
    justify-content:space-between;
    margin-left:0;
  }
  .ticketZoom{
    flex:1;
    max-width:none;
  }
  .buttons{
    position:sticky;
    bottom:max(8px, env(safe-area-inset-bottom));
    z-index:10;
    padding-top:8px;
    background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.9) 32%, rgba(255,255,255,1));
  }
}

@media (max-width: 640px){
  .app{
    padding:8px;
  }
  .topbar{
    border-radius:14px;
    margin-bottom:10px;
  }
  .topbar-actions{
    grid-template-columns:1fr;
  }
  .googleLogo{
    font-size:22px;
    text-align:center;
    line-height:1.15;
    word-break:break-word;
  }
  .layout{
    gap:10px;
  }
  .card{
    border-radius:14px;
  }
  .hint{
    font-size:11px;
  }
  .mainTableWrap,
  .homeSection .mainTableWrap{
    margin:0 -2px;
    border-radius:12px;
  }
  .mainTable,
  .homeTable{
    min-width:500px;
    font-size:12px;
  }
  .mainTable th,
  .mainTable td,
  .homeTable th,
  .homeTable td{
    padding:8px 6px;
  }
  .mainTable select,
  .homeTable select,
  .pair input.game,
  .pair select,
  .ctl select{
    min-height:44px;
    font-size:16px !important;
  }
  .tickets{
    --ticketMinBase: 100%;
    grid-template-columns:1fr;
    gap:10px;
  }
  .ticket{
    border-radius:12px;
  }
  .ticket td,
  .ticket thead th{
    font-size:14px;
  }
  .ticketModalDialog{
    left:0;
    right:0;
    bottom:0;
    top:auto;
    width:100vw;
    max-height:88vh;
    border-radius:18px 18px 0 0;
    padding-bottom:max(0px, env(safe-area-inset-bottom));
  }
  .ticketModalBody{
    padding:8px 12px 10px;
  }
  .ticketModalFoot{
    padding:8px 12px 14px;
  }
  .ticketNavBtn,
  .ticketCloseBtn,
  #tofesSave,
  .tofesBtnSmall,
  .tofesBtnIcon{
    min-height:44px;
  }
  .tofesPanel{
    width:100vw;
    height:100dvh;
    max-width:none;
    max-height:none;
    border-radius:0;
    padding-bottom:max(8px, env(safe-area-inset-bottom));
  }
  .tofesBody{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:8px;
  }
  .tofesCanvas{
    width:100%;
    height:auto;
    touch-action:none;
  }
  .tofesMagOverlay{
    right:8px;
    bottom:max(8px, env(safe-area-inset-bottom));
    left:auto;
    max-width:min(72vw, 280px);
  }
  .tofesControls{
    width:100%;
  }
  .tofesBtnRow,
  .tofesMiniRow,
  .tofesZoomRow,
  .tofesNavRow{
    flex-wrap:wrap;
  }
}

@media (max-width: 420px){
  .winnerLogo{
    width:34px;
    height:34px;
  }
  .googleLogo{
    font-size:19px;
  }
  .rowLabel{
    width:22px;
    height:22px;
  }
  .ticket td,
  .ticket thead th{
    font-size:13px;
  }
}


/* Mobile frame wrapper */
.mobile-frame {
  width:98%;
  max-width:420px;
  margin:20px auto;
  border-radius:28px;
  border:10px solid #111;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
  overflow:hidden;
  background:#fff;
}

.mobile-screen {
  width:100%;
  min-height:100vh;
  background:#f5f5f5;
}

/* make app content fit inside frame */
.mobile-screen .container,
.mobile-screen body > * {
  padding:10px;
}


/* Header mobile-fit fix: prevent horizontal overflow inside phone frame */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.mobile-frame,
.mobile-screen,
.app,
.topbar,
.topbar-actions,
.brand,
.brand-text,
.googleLogo,
.ctl,
.totalCtl,
.viewTicketsBtn {
  min-width: 0;
}

.mobile-screen {
  overflow-x: hidden;
}

.topbar {
  width: 100%;
}

.brand {
  flex-wrap: wrap;
}

.brand-text {
  flex: 1 1 auto;
  min-width: 0;
}

.googleLogo {
  max-width: 100%;
  line-height: 1.1;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.topbar-actions {
  width: 100%;
}

.topbar-actions > * {
  min-width: 0;
}

.ctl,
.totalCtl,
.viewTicketsBtn {
  width: 100%;
}

.ctl select {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 640px){
  .topbar {
    padding: 10px;
  }

  .brand {
    justify-content: center;
    gap: 8px;
  }

  .brand-text {
    width: 100%;
  }

  .googleLogo {
    font-size: 18px;
  }

  .topbar-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 420px){
  .topbar {
    padding: 8px;
  }

  .googleLogo {
    font-size: 16px;
  }

  .ctl,
  .totalCtl {
    font-size: 11px;
  }
}

/* === Final mobile-first fit pass === */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body {
  min-height: 100dvh;
  padding: 0;
}

.mobile-frame {
  width: min(420px, 98vw);
  max-width: 98vw;
  box-sizing: border-box;
}

.mobile-screen,
.app,
.layout,
.colLeft,
.colRight,
.card,
.card-head,
.topbar,
.topbar-actions,
.brand,
.brand-text,
.mainTableWrap,
.homeSectionControls,
.mainTableControls,
.buttons,
.ticketZoomCtl {
  min-width: 0;
  max-width: 100%;
}

.card-head,
.hint,
.googleLogo,
.ctl,
.ctlLabel,
.totalCombosNumWrap,
.ticketZoomLabel,
.ticketZoomVal,
.sectionHeaderBadge {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mainTableWrap {
  overflow-x: hidden;
}

@media (max-width: 480px) {
  .mobile-frame {
    width: 98vw;
    margin: 8px auto;
    border-width: 6px;
    border-radius: 22px;
  }

  .mobile-screen {
    min-height: auto;
  }

  .app {
    width: 100%;
    max-width: 100%;
    padding: 8px;
  }

  .topbar,
  .card {
    border-radius: 12px;
  }

  .topbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 8px;
  }

  .brand {
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .winnerLogo {
    width: 30px;
    height: 30px;
    margin-right: 0;
    flex: 0 0 auto;
  }

  .brand-text {
    flex: 1 1 auto;
    width: auto;
    text-align: center;
  }

  .googleLogo {
    font-size: clamp(14px, 5.2vw, 20px) !important;
    line-height: 1.05;
    letter-spacing: -0.3px;
    white-space: normal;
  }

  .topbar-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }

  .topbar-actions > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  .ctl,
  .totalCtl,
  .viewTicketsBtn {
    width: 100% !important;
  }

  .ctl {
    gap: 4px;
    font-size: 10px;
  }

  .ctl select,
  .viewTicketsBtn,
  button {
    width: 100%;
    min-height: 42px;
    font-size: 14px !important;
  }

  .layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .card {
    padding: 10px 8px;
  }

  .card-head {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .card-head h2 {
    font-size: 14px;
  }

  .hint {
    font-size: 10px;
    line-height: 1.35;
  }

  .ticketZoomCtl {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
    gap: 8px;
  }

  .ticketZoom {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }

  .mainTable,
  .homeTable {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
    font-size: 11px;
  }

  .mainTable th,
  .mainTable td,
  .homeTable th,
  .homeTable td {
    padding: 6px 3px !important;
    font-size: 11px !important;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mainTable .lineCol,
  .homeTable .lineCol {
    width: 28px !important;
    min-width: 28px !important;
  }

  .mainTable .gameCol,
  .homeTable .gameCol {
    width: auto !important;
    min-width: 0 !important;
  }

  .mainTable .pickCol,
  .homeTable .pickCol {
    width: 16.5% !important;
    min-width: 0 !important;
  }

  .mainTable select,
  .homeTable select,
  .pair input.game,
  .pair select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 36px;
    padding: 4px 2px !important;
    font-size: 13px !important;
  }

  .pair {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 2px;
    width: 100%;
  }

  .buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .tickets {
    --ticketMinBase: 100%;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ticket,
  .ticketModalDialog,
  .tofesPanel,
  .tofesBody,
  .tofesControls {
    max-width: 100%;
  }
}

@media (max-width: 360px) {
  .topbar-actions {
    grid-template-columns: 1fr;
  }

  .googleLogo {
    font-size: 14px !important;
  }

  .mainTable th,
  .mainTable td,
  .homeTable th,
  .homeTable td {
    padding: 5px 2px !important;
    font-size: 10px !important;
  }

  .pair {
    grid-template-columns: minmax(0, 1fr) 40px !important;
  }
}

/* === Mobile frame: force every main section to stack full width === */
.mobile-frame .layout{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.mobile-frame .colLeft,
.mobile-frame .colRight{
  display:flex;
  flex-direction:column;
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
  gap:12px;
}

.mobile-frame .colLeft > *,
.mobile-frame .colRight > *,
.mobile-frame .layout > *{
  width:100% !important;
  max-width:100% !important;
}

.mobile-frame .card,
.mobile-frame .homeSectionCard,
.mobile-frame .mainTableCard{
  width:100% !important;
  max-width:100% !important;
}

.mobile-frame .topbar-actions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  align-items:stretch;
}

.mobile-frame .viewTicketsBtn,
.mobile-frame .ctl,
.mobile-frame .totalCtl,
.mobile-frame .ctl select,
.mobile-frame .buttons button{
  width:100% !important;
}

.mobile-frame .card-head{
  flex-direction:column;
  align-items:stretch;
}

.mobile-frame .ticketZoomCtl{
  width:100%;
  margin-left:0;
}

.mobile-frame .mainTableWrap,
.mobile-frame .homeSectionCard .mainTableWrap{
  overflow-x:hidden !important;
}

@media (max-width: 560px){
  .mobile-frame .topbar-actions{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 380px){
  .mobile-frame .topbar-actions{
    grid-template-columns:1fr;
  }
}

/* === Ultra-mobile full-width table fit pass === */
.mobile-frame{
  width:100vw !important;
  max-width:100vw !important;
  margin:0 !important;
  border-width:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.mobile-screen{
  min-height:100dvh;
}

@media (max-width: 700px){
  html, body {
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
    background:#f5f5f5;
  }

  body{
    padding:0 !important;
    margin:0 !important;
  }

  .app{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:8px 6px 12px !important;
  }

  .layout,
  .colLeft,
  .colRight,
  .card,
  .homeSectionCard,
  .mainTableCard,
  .mainTableWrap,
  .homeSectionCard .mainTableWrap,
  .mainTableControls,
  .homeSectionControls{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .card{
    padding:10px 6px !important;
  }

  .mainTable,
  .homeTable{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }

  .mainTableWrap,
  .homeSectionCard .mainTableWrap{
    overflow:hidden !important;
  }

  .mainTable .lineCol,
  .homeTable .lineCol{
    width:12% !important;
    min-width:32px !important;
    max-width:40px !important;
  }

  .mainTable .gameCol,
  .homeTable .gameCol{
    width:34% !important;
    min-width:0 !important;
  }

  .mainTable .pickCol,
  .homeTable .pickCol{
    width:18% !important;
    min-width:0 !important;
  }

  .gameCellWrap{
    width:100% !important;
    min-width:0 !important;
  }

  .mainTable th,
  .mainTable td,
  .homeTable th,
  .homeTable td{
    padding:6px 2px !important;
    font-size:11px !important;
    vertical-align:middle !important;
  }

  .mainTable select.mainGameSel,
  .homeTable select.homeGameSel{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:4px 18px 4px 4px !important;
    font-size:12px !important;
    line-height:1.1 !important;
    height:34px !important;
    border-radius:8px !important;
  }

  .pickToggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    margin:0 !important;
  }

  .pickPill{
    width:100% !important;
    min-width:0 !important;
    padding:6px 0 !important;
    font-size:12px !important;
    line-height:1 !important;
    border-radius:8px !important;
  }

  .sectionHeaderBadge,
  .sectionHeaderBadgeWide{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }

  .sectionCountCtl{
    margin-left:auto !important;
  }

  .sectionCountCtl select{
    min-width:64px !important;
  }
}

@media (max-width: 420px){
  .app{
    padding:6px 4px 10px !important;
  }

  .topbar,
  .card{
    border-radius:14px !important;
  }

  .mainTable .lineCol,
  .homeTable .lineCol{
    width:11% !important;
    min-width:28px !important;
    max-width:34px !important;
  }

  .mainTable .gameCol,
  .homeTable .gameCol{
    width:35% !important;
  }

  .mainTable .pickCol,
  .homeTable .pickCol{
    width:18% !important;
  }

  .mainTable th,
  .mainTable td,
  .homeTable th,
  .homeTable td{
    padding:5px 1px !important;
    font-size:10px !important;
  }

  .mainTable select.mainGameSel,
  .homeTable select.homeGameSel{
    padding:3px 14px 3px 3px !important;
    font-size:11px !important;
    height:32px !important;
  }

  .pickPill{
    padding:5px 0 !important;
    font-size:11px !important;
  }
}


.tofesMagTitleBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.tofesMagTitleBar .tofesMagTitle{
  margin-bottom:0;
  flex:1 1 auto;
}
.tofesMagToggleBtn{
  flex:0 0 auto;
  white-space:nowrap;
}
.tofesShowMagBtn{
  position:sticky;
  top:8px;
  right:8px;
  z-index:5;
  margin-left:auto;
  display:block;
  margin-bottom:8px;
}
.tofesShowMagBtn.hidden{
  display:none;
}
.tofesMagOverlay.hidden{
  display:none;
}


.tofesAppJsonControls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  width:100%;
}
.tofesMiniInput{
  width:100%;
  min-width:0;
  border:1px solid rgba(148,163,184,.6);
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
  color:var(--ink);
}
.tofesMiniInput:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(109,63,95,.16);
}
@media (max-width: 640px){
  .tofesAppJsonControls{
    grid-template-columns:1fr;
  }
}


/* ===== Main table redesign ===== */
.mainTableCard{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

.mainTableCard .card-head{
  padding:14px 14px 12px;
  margin:-12px -12px 12px;
  background:linear-gradient(135deg,#eff6ff 0%,#f7f3eb 55%,#eefdf7 100%);
  border-radius:14px 14px 0 0;
  border-bottom:1px solid #dbe5f0;
}

.mainTableControls{
  display:flex;
  align-items:flex-end;
  gap:12px;
  margin-bottom:12px;
  padding:10px 12px;
  border:1px solid #d9e4f0;
  border-radius:14px;
  background:linear-gradient(180deg,#f8fbff,#ffffff);
}

.mainTableCard .mainTableWrap{
  padding:10px;
  border:1px solid #dbe5f0;
  border-radius:18px;
  background:linear-gradient(180deg,#f8fbff,#ffffff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}

.mainTable thead th{
  top:10px;
}

.mainTable .lineCol{
  width:84px;
  min-width:84px;
}

.sectionHeaderRow td{
  padding:14px 12px 10px;
  background:transparent;
  border:0;
}

.sectionHeaderBadgeWide{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid #cfe0ff;
  background:linear-gradient(135deg,#e9dfd2 0%,#eff6ff 65%,#ffffff 100%);
  box-shadow:0 10px 24px rgba(59,130,246,.10);
}

.sectionHeaderBadgeWide > span{
  font-size:14px;
  font-weight:900;
  letter-spacing:.2px;
}

.sectionCountCtl{
  padding:6px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.8);
  border:1px solid #d7e4f4;
}

.mainDataRow td{
  position:relative;
  padding-top:10px;
  padding-bottom:10px;
}

.mainDataRow td:first-child{
  border-left:4px solid transparent;
}

.mainDataRow.sectionTone0 td:first-child{ border-left-color:#2563eb; }
.mainDataRow.sectionTone1 td:first-child{ border-left-color:#7c3aed; }
.mainDataRow.sectionTone2 td:first-child{ border-left-color:#0f766e; }
.mainDataRow.sectionTone3 td:first-child{ border-left-color:#ea580c; }

.mainDataRow.lineA td{ background:#ffffff; }
.mainDataRow.lineB td{ background:#f8fbff; }
.mainDataRow:hover td{ background:#f1e8dd; }

.rowIdentity{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.rowSectionPill,
.rowLetterPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  padding:5px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.3px;
}

.rowSectionPill{
  color:#1d4ed8;
  background:#e9dfd2;
  border:1px solid #93c5fd;
}

.rowLetterPill{
  color:#0f172a;
  background:#f7f3eb;
  border:1px solid #d5c9bb;
}

.gameCellWrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.gameCellMeta{
  font-size:10px;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:#64748b;
}

.mainGameSel{
  width:100%;
}

.mainTable .pickCol{
  min-width:72px;
}

.mainTable .pickToggle{
  justify-content:center;
}

.mainTable .mainPickCell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.mainTable .mainOddsSel{
  width:100%;
  min-width:0;
  min-height:30px;
  padding:4px 6px;
  border:1.8px solid var(--line);
  border-radius:10px;
  background:#fff;
  font-size:12px;
  font-weight:700;
  text-align:center;
}


.mainTable .mainOddsSel.mainOddsMissing{
  background:#fee2e2;
  border-color:#ef4444;
  color:#991b1b;
}

.mainTable .mainOddsSel.mainOddsFilled{
  background:#e9dfd2;
  border-color:#60a5fa;
  color:#1e3a8a;
}
.mainTable .mainOddsSel:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(109,63,95,.12);
  outline:none;
}

.mainTable .pickPill{
  min-width:44px;
  padding:8px 10px;
  border-radius:12px;
  font-size:14px;
  font-weight:900;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}

.emptySectionRow td{
  padding:18px 14px;
  border:1px dashed #d5c9bb;
  border-radius:14px;
  background:#f8fbff;
}

@media (max-width: 760px){
  .mainTableCard .mainTableWrap{
    padding:6px;
  }
  .mainTable .lineCol{
    width:74px;
    min-width:74px;
  }
  .rowSectionPill,
  .rowLetterPill{
    min-width:38px;
    padding:4px 6px;
    font-size:10px;
  }
  .gameCellMeta{
    font-size:9px;
  }
  .mainTable .pickCol{
    min-width:64px;
  }
}


/* ===== Compact Main Table cleanup ===== */
.mainTableCard .card-head{
  padding:12px 14px 10px;
  margin:-12px -12px 10px;
}
.mainTableControls{
  padding:8px 10px;
  margin-bottom:10px;
}
.mainTableCard .mainTableWrap{
  padding:8px;
}
.sectionHeaderRow td,
.compactSectionHeaderRow td{
  padding:8px 8px 6px;
}
.compactSectionHeaderBadge{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  box-shadow:none;
  background:linear-gradient(135deg,#eef4ff 0%,#f8fbff 100%);
}
.sectionHeaderTitle{
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
}
.compactSectionCountCtl{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border-radius:10px;
}
.compactSectionCountCtl > span{
  font-size:11px;
  font-weight:800;
  color:#475569;
  white-space:nowrap;
}
.compactSectionCountCtl select{
  min-width:56px;
}
.mainDataRow td{
  padding-top:7px;
  padding-bottom:7px;
}
.mainTable .lineCol{
  width:54px;
  min-width:54px;
}
.compactRowIdentity,
.rowIdentity.compactRowIdentity{
  min-height:auto;
}
.rowIdentity{
  gap:0;
}
.rowSectionPill{
  display:none !important;
}
.rowLetterPill{
  min-width:30px;
  padding:4px 0;
  border-radius:9px;
  font-size:12px;
}
.compactGameCellWrap,
.gameCellWrap.compactGameCellWrap{
  gap:4px;
}
.gameCellTopline{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:16px;
}
.inlineSectionTag{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:999px;
  background:#e0ecff;
  border:1px solid #bfd6ff;
  color:#1d4ed8;
  font-size:10px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}
.inlineGameLabel{
  font-size:10px;
  font-weight:800;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.25px;
  line-height:1;
  white-space:nowrap;
}
.gameCellMeta{
  display:none !important;
}
.mainTable .gameCol{
  min-width:140px;
}
.mainTable select.mainGameSel{
  min-height:34px;
  padding:6px 10px;
  font-size:13px;
}
.mainTable .pickCol{
  min-width:88px;
}
.mainTable .pickPill{
  min-width:36px;
  padding:6px 8px;
  border-radius:10px;
  font-size:13px;
}
.emptySectionRow td{
  padding:12px 10px;
}
@media (max-width: 760px){
  .compactSectionHeaderBadge{
    gap:8px;
    padding:7px 8px;
  }
  .compactSectionCountCtl > span{
    display:none;
  }
  .mainTable .lineCol{
    width:46px;
    min-width:46px;
  }
  .rowLetterPill{
    min-width:26px;
    font-size:11px;
  }
  .inlineSectionTag,
  .inlineGameLabel{
    font-size:9px;
  }
  .mainTable .pickCol{
    min-width:78px;
  }
}



/* All Possibilities */
.allPossCard{
  margin-top:16px;
}
.allPossControls{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.allPossStats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.allPossStat{
  min-width:180px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.04);
}
.allPossStatLabel{
  display:block;
  font-size:12px;
  opacity:.8;
  margin-bottom:4px;
}
.allPossStatValue{
  display:block;
  font-size:22px;
  font-weight:700;
}
.allPossLegend{
  font-size:12px;
  opacity:.8;
  margin:8px 0 10px;
}
.allPossOutput{
  margin:0;
  min-height:260px;
  max-height:520px;
  overflow:auto;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  white-space:pre-wrap;
  word-break:break-word;
  font:600 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}


/* All Possibilities Section */
.allPossCard{
  margin-top:18px;
}
.allPossControls{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.allPossMeta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.allPossMetaBox{
  min-width:190px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}
.allPossMetaLabel{
  font-size:12px;
  opacity:.8;
  margin-bottom:4px;
}
.allPossMetaValue{
  font-size:24px;
  font-weight:800;
  line-height:1.1;
}
.allPossNote{
  font-size:12px;
  opacity:.82;
  margin:4px 0 10px;
}
.allPossTickets{
  margin-top:10px;
  --ticketZoom: 1;
  --ticketMinBase: 170px;
  max-height:760px;
  overflow:auto;
  align-content:start;
}
.allPossTickets .ticket{
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.allPossTickets .oldPossTicket{
  border:2px solid rgba(124,58,237,.35);
  background:linear-gradient(180deg, rgba(245,243,255,.95), rgba(237,233,254,.85));
}
.allPossTickets .oldPossTicket thead th{
  text-align:center;
  background:linear-gradient(135deg, rgba(124,58,237,.22), rgba(168,85,247,.18));
  color:#581c87;
  border-color:rgba(124,58,237,.28);
}
.allPossTickets .oldPossTicket td{
  border-color:rgba(124,58,237,.20);
  background:rgba(255,255,255,.88);
}
.allPossTickets .oldPossTicket .oldPossPick{
  color:#6d28d9;
  font-weight:1000;
  text-align:center;
  letter-spacing:1.1px;
  font-size:clamp(12px, calc(13px * var(--ticketZoom)), 20px);
}
.allPossTickets .ticketsEmpty{
  grid-column:1 / -1;
  padding:18px;
  text-align:center;
  border:1px dashed rgba(255,255,255,.16);
  border-radius:14px;
  color:var(--muted);
  background:rgba(255,255,255,.03);
}


/* ===== Stronger visual borders for each Main Table section ===== */
.mainTableBody,
#mainTableBody{
  position:relative;
}

.sectionHeaderRow td,
.compactSectionHeaderRow td{
  padding-top:16px;
}

.sectionHeaderRow + .mainDataRow td{
  border-top:2px solid rgba(148,163,184,.32);
}

.mainDataRow.sectionBlockStart td{
  border-top:2px solid rgba(59,130,246,.22);
}

.mainDataRow.sectionBlockStart td:first-child,
.mainDataRow.sectionBlockEnd td:first-child{
  border-left-width:6px;
}

.mainDataRow.sectionBlockStart td,
.mainDataRow.sectionBlockEnd td,
.mainDataRow.sectionBlockStart + .mainDataRow td,
.mainDataRow.sectionBlockEnd ~ .sectionHeaderRow td{
  position:relative;
}

.mainDataRow[data-section="0"] td{ --section-border:#2563eb; --section-soft:#e9dfd2; }
.mainDataRow[data-section="1"] td{ --section-border:#7c3aed; --section-soft:#ede9fe; }
.mainDataRow[data-section="2"] td{ --section-border:#0f766e; --section-soft:#ccfbf1; }
.mainDataRow[data-section="3"] td{ --section-border:#ea580c; --section-soft:#ffedd5; }
.mainDataRow[data-section="4"] td{ --section-border:#2563eb; --section-soft:#e9dfd2; }
.mainDataRow[data-section="5"] td{ --section-border:#7c3aed; --section-soft:#ede9fe; }
.mainDataRow[data-section="6"] td{ --section-border:#0f766e; --section-soft:#ccfbf1; }
.mainDataRow[data-section="7"] td{ --section-border:#ea580c; --section-soft:#ffedd5; }
.mainDataRow[data-section="8"] td{ --section-border:#2563eb; --section-soft:#e9dfd2; }
.mainDataRow[data-section="9"] td{ --section-border:#7c3aed; --section-soft:#ede9fe; }

.mainDataRow td{
  border-top:1px solid rgba(226,232,240,.95);
  border-bottom:1px solid rgba(226,232,240,.95);
}

.mainDataRow td:first-child{
  border-left:2px solid var(--section-border, rgba(148,163,184,.7));
  border-top-left-radius:14px;
  border-bottom-left-radius:14px;
}

.mainDataRow td:last-child{
  border-right:2px solid var(--section-border, rgba(148,163,184,.7));
  border-top-right-radius:14px;
  border-bottom-right-radius:14px;
}

.mainDataRow.sectionBlockStart td{
  border-top:2px solid var(--section-border, rgba(148,163,184,.7));
}

.mainDataRow.sectionBlockEnd td{
  border-bottom:2px solid var(--section-border, rgba(148,163,184,.7));
}

.mainDataRow:not(.sectionBlockEnd) td{
  border-bottom-color:rgba(203,213,225,.9);
}

.mainDataRow:hover td{
  background:linear-gradient(180deg,#f8fbff 0%, #f1e8dd 100%);
}

.sectionHeaderBadgeWide{
  border-width:2px;
}

.sectionEmptyState td{
  border:2px dashed #d5c9bb;
  background:linear-gradient(180deg,#f8fbff,#ffffff);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85);
}

@media (max-width: 760px){
  .sectionHeaderRow td,
  .compactSectionHeaderRow td{
    padding-top:14px;
  }

  .mainDataRow td:first-child,
  .mainDataRow td:last-child{
    border-radius:12px;
  }
}


.allPossTickets{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  align-content:flex-start;
  gap:6px;
}
.allPossTickets .oldPossTicket.oldPossTicketStacked{
  width:72px;
  min-width:72px;
  max-width:72px;
  margin:0;
  flex:0 0 72px;
}
.allPossTickets .oldPossTicket.oldPossTicketStacked thead th,
.allPossTickets .oldPossTicket.oldPossTicketStacked td{
  text-align:center;
}
.allPossTickets .oldPossTicket.oldPossTicketStacked thead th{
  padding:6px 4px;
  font-size:11px;
  line-height:1.15;
}
.allPossTickets .oldPossTicket.oldPossTicketStacked td{
  padding:6px 4px;
  font-size:15px;
  font-weight:900;
  letter-spacing:.2px;
}


.tofesHintText{ font-size:11px; color:#475569; line-height:1.35; }
.tofesMiniLab{ display:flex; align-items:center; gap:6px; font-size:11px; color:#334155; }
.tofesMiniLab input, .tofesMiniLab select{
  min-width:72px;
  padding:6px 8px;
  border:1px solid rgba(0,0,0,0.18);
  border-radius:10px;
  background:#fff;
}


.allPossToggleBtn{
  border:2px solid var(--line2);
  border-radius:12px;
  padding:8px 12px;
  background:#fff;
  color:var(--ink);
  font-weight:800;
  cursor:pointer;
}
.allPossToggleBtn:hover{
  background:rgba(29,78,216,.06);
}
.allPossToggleBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.allPossTickets[hidden]{
  display:none !important;
}


/* Compact 3-column generated tickets */
.ticket{
  font-variant-numeric: tabular-nums;
}

.ticket th,
.ticket td{
  white-space: nowrap;
}

.ticket th:nth-child(1),
.ticket td.gameCell{
  width: 38%;
}

.ticket th:nth-child(2),
.ticket td.pick{
  width: 22%;
  text-align: center;
}

.ticket th:nth-child(3),
.ticket td.oddsCell{
  width: 40%;
  text-align: center;
}

.ticket td.oddsCell,
.ticket th.oddsHeadCell{
  color: #0a8f2a;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(57,255,20,.45), 0 0 10px rgba(57,255,20,.22);
}

.ticket tfoot .returnTotal{
  text-align: center;
  font-weight: 800;
}

.odds-green { color: #0a8f2a; font-weight: 500; }


.scrollButtons{
  position:fixed;
  right:max(14px, calc(env(safe-area-inset-right) + 8px));
  bottom:max(14px, calc(env(safe-area-inset-bottom) + 8px));
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:9999;
}

.toTop,
.toBottom{
  width:52px;
  height:52px;
  border-radius:999px;
  border:2px solid var(--line2);
  background:#fff;
  color:var(--accent);
  font-size:22px;
  font-weight:900;
  box-shadow:0 10px 20px rgba(11,18,32,.16);
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}

.toTop:hover,
.toBottom:hover{
  background:rgba(29,78,216,.08);
}

.ticket tfoot .returnTotal:empty{
  display:none;
}

@media (max-width: 640px){
  .scrollButtons{
    right:max(10px, env(safe-area-inset-right));
    bottom:max(10px, env(safe-area-inset-bottom));
    gap:8px;
  }

  .toTop,
  .toBottom{
    width:46px;
    height:46px;
    font-size:20px;
  }
}

/* Winner Profit */
.winnerNameTools{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin-bottom:10px;
}
.winnerNameTools input{
  min-width:0;
  border:2px solid var(--line);
  border-radius:12px;
  padding:9px 10px;
  font:inherit;
  font-size:13px;
  background:#fff;
}
.winnerNameTools button,
.winnerNameChip button{
  border:0;
  border-radius:12px;
  background:#111827;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.winnerNameTools button{
  padding:9px 12px;
}
.winnerNameList{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  min-height:30px;
  margin-bottom:10px;
}
.winnerNameChip,
.winnerEmptyChip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid #d5c9bb;
  border-radius:999px;
  padding:5px 7px 5px 10px;
  background:#fff;
  font-size:12px;
  font-weight:800;
}
.winnerNameChip button{
  width:21px;
  height:21px;
  padding:0;
  line-height:1;
  background:#b91c1c;
}
.winnerEmptyChip{
  color:var(--muted);
  font-weight:700;
}
.ticketWrap{
  min-width:0;
}
.ticketWinnerBar{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  margin-bottom:5px;
  padding:7px;
  border:2px solid var(--line2);
  border-radius:12px;
  background:#fff7ed;
}
.ticketWinnerBar label{
  font-size:11px;
  font-weight:900;
  color:#7c2d12;
}
.ticketWinnerSelect{
  width:100%;
  border:1.8px solid #fdba74;
  border-radius:9px;
  padding:6px 8px;
  font:inherit;
  font-size:12px;
  background:#fff;
}
@media (max-width:520px){
  .winnerNameTools{ grid-template-columns:1fr; }
}


/* Clickable winning picks */
.ticket td.pick.clickablePick{
  cursor:pointer;
  user-select:none;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ticket td.pick.clickablePick:hover{
  box-shadow:inset 0 0 0 2px rgba(34,197,94,.45);
}
.ticket td.pick.pickWon{
  background:#39ff14 !important;
  color:#052e16 !important;
  border-color:#16a34a !important;
  box-shadow:0 0 12px rgba(57,255,20,.95), inset 0 0 0 2px rgba(255,255,255,.65);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.ticketWrap.ticketFullyWon{
  border-radius:14px;
  box-shadow:0 0 0 3px #39ff14, 0 0 24px rgba(57,255,20,.85);
}
.ticketWrap.ticketFullyWon .ticketWinnerBar{
  background:#ecfdf5;
  border-color:#22c55e;
}
.ticketWrap.ticketFullyWon .ticketWinnerBar label::after{
  content:" • winning ticket";
  color:#047857;
}


.bettingWeekSummary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:18px}.summaryCard{background:#111827;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px;color:#fff;display:flex;flex-direction:column;gap:8px}.summaryCard span{font-size:12px;opacity:.8;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.summaryCard strong{font-size:24px;font-weight:900}.summaryProfit{background:linear-gradient(135deg,#052e16,#14532d)}

/* Result Table: copied from Main Table, but one final result per game */
.resultGameCard{ margin-top:18px; }
.resultGameTable .resultGameNumberBox{ min-height:58px; justify-content:center; }
.resultGameNumber{
  width:100%;
  min-height:38px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.55);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#0f172a;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.04);
}
.resultPickBtn{
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid #94a3b8;
  background:#f7f3eb;
  color:#0f172a;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.resultPickBtn:hover{ transform: translateY(-1px); }
.resultPickBtn.selected{
  border-color:#7c3aed;
  background:#a855f7;
  color:#fff;
  box-shadow:0 0 0 1px rgba(124,58,237,0.35), 0 0 18px rgba(168,85,247,0.68);
}

/* Organized vertical app flow */
.layout{display:flex !important;flex-direction:column !important;gap:14px !important;}
.colLeft,.colRight{display:contents !important;}
#mainTableSection{order:1;}
#correctGamesSection{order:2;}
.colRight > .card:first-child{order:3;}
#allPossibilitiesSection{order:4;}
#resultGameSection{order:5;}
#playerModeSection{order:6;}
#generatedTicketsTwoSection{order:7;}
.correctGamesMount{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.correctGamesMount .ctl{margin:0;}
.playerModeRow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.playerModeSwitch{width:120px;height:46px;border-radius:999px;border:2px solid #334155;background:#111827;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:4px 14px 4px 5px;font-weight:900;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.playerModeKnob{width:34px;height:34px;border-radius:50%;background:#94a3b8;box-shadow:0 3px 8px rgba(0,0,0,.25);transition:transform .16s ease, background .16s ease, box-shadow .16s ease;}
.playerModeSwitch.on{background:#581c87;border-color:#a855f7;box-shadow:0 0 18px rgba(168,85,247,.45)}
.playerModeSwitch.on .playerModeKnob{transform:translateX(68px);background:#d8b4fe;box-shadow:0 0 18px rgba(216,180,254,.9)}
.playerModeSwitch.on strong{transform:translateX(-38px)}
.playerModeHelp{font-weight:800;color:#475569;}
.ticket .pick.resultMatchPurple{background:#a855f7!important;color:#fff!important;border-color:#7c3aed!important;box-shadow:0 0 18px rgba(168,85,247,.8), inset 0 0 0 2px rgba(255,255,255,.35)!important;border-radius:10px;}
.generatedTicketsTwoCard{border-color:#a855f7;box-shadow:0 12px 28px rgba(168,85,247,.18)}

/* Spending / Investor Profit */
.investorProfitCard{margin:14px 0;border:2px solid rgba(168,85,247,.55);box-shadow:0 0 22px rgba(168,85,247,.18)}
.investorTopGrid{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:10px;margin:12px 0}
.investorStat{border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:10px 12px;background:rgba(15,23,42,.72);display:grid;gap:5px;color:#e5e7eb}
.investorStat span{font-size:12px;font-weight:800;color:#a7f3d0;text-transform:uppercase;letter-spacing:.04em}
.investorStat strong{font-size:20px;font-weight:950;color:#fff}
.investorInputStat input{width:100%;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:#020617;color:#fff;padding:8px;font-weight:900}
.investorProfitStat strong{color:#4ade80}
.investorModeRow,.investorEntryRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.investorSwitch{width:86px;height:38px;border:0;border-radius:999px;background:#334155;color:#fff;font-weight:950;display:flex;align-items:center;gap:8px;padding:4px 10px;cursor:pointer}
.investorSwitchKnob{width:28px;height:28px;border-radius:999px;background:#94a3b8;display:inline-block;transition:.18s}
.investorSwitch.on{background:#7c3aed}.investorSwitch.on .investorSwitchKnob{background:#fff;transform:translateX(28px)}
.investorEntryRow input,.investorEntryRow select{border:1px solid rgba(255,255,255,.18);border-radius:10px;background:#020617;color:#fff;padding:10px;font-weight:850;min-width:150px}.investorPercentSelect{min-width:130px}.investorEntryRow input[readonly]{background:rgba(15,23,42,.92);color:#a7f3d0}
.investorEntryRow button{border:0;border-radius:10px;padding:10px 12px;background:#7c3aed;color:#fff;font-weight:950;cursor:pointer}.investorViewToggle{background:#0f766e!important}
#investorLockBtn.locked{background:#16a34a}#investorNewRoundBtn{background:#475569}.investorEntryRow.locked input,.investorEntryRow.locked #investorAddBtn{opacity:.55;pointer-events:none}
.investorTableWrap{overflow:auto;margin-top:10px}.investorTable{width:100%;border-collapse:separate;border-spacing:0 7px}.investorTable th{font-size:12px;color:#c4b5fd;text-align:left;padding:6px 8px}.investorTable td{padding:9px 8px;background:rgba(15,23,42,.78);color:#fff;font-weight:850}.investorTable tr td:first-child{border-radius:10px 0 0 10px}.investorTable tr td:last-child{border-radius:0 10px 10px 0}.investorRemoveBtn{border:0;border-radius:8px;background:#dc2626;color:#fff;font-weight:900;padding:7px 9px;cursor:pointer}
@media(max-width:900px){.investorTopGrid{grid-template-columns:repeat(2,minmax(120px,1fr))}}

/* Generated Tickets 2 result/profit update */
.ticketsTwoSummary{
  margin: 12px 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(74,222,128,.55);
  border-radius: 14px;
  background: rgba(16,185,129,.10);
  color: #dcfce7;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(74,222,128,.16);
}
.resultMatchNeon{
  background: #39ff14 !important;
  color: #041006 !important;
  box-shadow: 0 0 10px #39ff14, 0 0 18px rgba(57,255,20,.75) !important;
  border-color: #b7ffb0 !important;
  font-weight: 1000 !important;
}
.winningReturnTotal{
  color: #000 !important;
  font-weight: 1000 !important;
  text-shadow: none !important;
  background: transparent !important;
}
.winningTicketTwo{
  border-color: rgba(0,0,0,.25) !important;
  box-shadow: none !important;
}
.investorEditName,.investorEditPercent{width:100%;min-width:90px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#020617;color:#fff;padding:7px 8px;font-weight:850}.investorEditName:focus,.investorEditPercent:focus{outline:2px solid rgba(168,85,247,.55);outline-offset:1px}

/* =========================================================
   MOBILE DEVICE FINAL FIX
   Makes the full app usable on phones/tablets without breaking desktop.
   ========================================================= */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
}
body{
  width:100%;
  min-width:0;
  overflow-x:hidden;
  touch-action:manipulation;
}
button,
select,
input,
textarea{
  font-size:16px; /* prevents iPhone auto zoom */
  max-width:100%;
}
button,
[role="button"],
.pick,
.choice,
.resultPickBtn,
.investorSwitch,
.playerModeSwitch{
  min-height:44px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(29,78,216,.18);
}
img,canvas,svg,video{max-width:100%;height:auto;}
.app{width:100%;max-width:1280px;overflow:hidden;}
.card,.topbar,.matrix-wrap,.mainTableWrap,.investorTableWrap,.tickets,.tickets2,.ticketWrap{max-width:100%;min-width:0;}
.mainTableWrap,
.investorTableWrap,
.statsTableWrap,
.ticketModalBody{
  -webkit-overflow-scrolling:touch;
  overflow-x:auto;
  overscroll-behavior-x:contain;
}
.ticketModalDialog{
  width:min(96vw,1100px);
  max-height:92dvh;
}
.ticketModalBody{max-height:calc(92dvh - 72px);}

@media (max-width:900px){
  .app{padding:10px;}
  .topbar{
    align-items:stretch;
    flex-direction:column;
    gap:10px;
    border-radius:14px;
  }
  .brand{align-items:flex-start;}
  .brand-text h1{font-size:18px;line-height:1.1;}
  .brand-text p{font-size:13px;line-height:1.25;}
  .topbar-actions,
  .mainTableControls,
  .sectionPickControls,
  .correctGamesMount,
  .playerModeRow,
  .investorModeRow,
  .investorEntryRow{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
    align-items:stretch;
  }
  .ctl,.mainTableControls .ctl{width:100%;}
  .ctl select,.ctl input,.ctl button,
  .mainTableControls select,
  .mainTableControls button,
  .sectionPickControls select,
  .sectionPickControls button,
  .investorEntryRow input,
  .investorEntryRow select,
  .investorEntryRow button{
    width:100%;
  }
  .card{padding:10px;border-radius:14px;}
  .card-head{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }
  .card-head h2{font-size:17px;}
  .hint{font-size:13px;line-height:1.35;}
  .summary{width:100%;font-size:13px;}
  .layout{display:flex !important;flex-direction:column !important;gap:12px !important;}
  .colLeft,.colRight{display:contents !important;}

  .matrix-head,.mrow{
    grid-template-columns:46px minmax(54px,1fr) minmax(54px,1fr) minmax(54px,1fr) minmax(150px,1.8fr);
  }
  .matrix-head > div,.mcell{padding:7px 5px;font-size:12px;}

  .investorTopGrid{grid-template-columns:1fr 1fr !important;gap:8px;}
  .investorStat{padding:9px;}
  .investorStat strong{font-size:18px;word-break:break-word;}
  .investorTable{min-width:760px;}

  .mainTable{min-width:720px;}
  .resultGameTable{min-width:520px;}
  .statsTable{min-width:520px;}

  .tickets,
  .tickets2,
  #tickets,
  #tickets2,
  #generatedTickets,
  #generatedTickets2,
  #generatedTicketsTwoBody{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    width:100%;
  }
  .ticketWrap,.ticket{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  .ticket table,
  .ticketTable,
  .ticketWrap table{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed;
  }
  .ticket th,.ticket td,
  .ticketTable th,.ticketTable td{
    padding:7px 5px !important;
    font-size:12px !important;
    word-break:break-word;
  }
}

@media (max-width:560px){
  .app{padding:8px;}
  .logo{width:34px;height:34px;border-radius:10px;}
  .topbar-actions,
  .mainTableControls,
  .sectionPickControls,
  .correctGamesMount,
  .playerModeRow,
  .investorModeRow,
  .investorEntryRow{
    grid-template-columns:1fr !important;
  }
  .card{padding:9px;border-radius:13px;}
  .card-head h2{font-size:16px;}
  .hint{font-size:12px;}

  .matrix-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .matrix-head,.mrow{
    min-width:520px;
  }

  .mainTable th,.mainTable td{font-size:12px;padding:6px 5px;}
  .mainTable select{font-size:16px;min-height:42px;padding:8px 6px;}
  .resultPickBtn{width:44px;height:44px;}

  .investorTopGrid{grid-template-columns:1fr !important;}
  .investorSwitch,.playerModeSwitch{width:100%;justify-content:center;}
  .playerModeSwitch.on .playerModeKnob{transform:none;}
  .playerModeSwitch.on strong{transform:none;}

  .ticketModalOverlay{padding:8px;}
  .ticketModalDialog{width:100vw;max-width:100vw;max-height:100dvh;border-radius:0;}
  .ticketModalBody{max-height:calc(100dvh - 64px);padding:8px;}
  .ticketModalHeader{position:sticky;top:0;z-index:2;}

  .bettingWeekSummary{grid-template-columns:1fr !important;}
  .summaryCard strong{font-size:20px;}
}

@media (max-width:380px){
  .app{padding:6px;}
  .card{padding:8px;}
  .brand-text h1{font-size:16px;}
  .ticket th,.ticket td,.ticketTable th,.ticketTable td{font-size:11px !important;padding:6px 3px !important;}
}


/* === 2026 Mobile device polish: clean phone border + universal fit === */
:root{
  --mobile-shell:#0f172a;
  --mobile-shell-highlight:#334155;
  --mobile-screen:#f7f3eb;
}

html{
  width:100%;
  min-height:100%;
  overflow-x:hidden !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(59,130,246,.20), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(16,185,129,.18), transparent 34%),
    #e5e7eb;
}

body{
  width:100%;
  min-height:100dvh;
  overflow-x:hidden !important;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
}

.mobile-frame{
  width:min(430px, 100vw) !important;
  max-width:100vw !important;
  min-height:100dvh;
  margin:0 auto !important;
  border:clamp(6px, 2.2vw, 12px) solid var(--mobile-shell) !important;
  border-radius:clamp(22px, 6vw, 34px) !important;
  background:linear-gradient(180deg, var(--mobile-shell-highlight), var(--mobile-shell)) !important;
  box-shadow:0 18px 50px rgba(15,23,42,.30) !important;
  overflow:hidden !important;
}

.mobile-screen{
  width:100% !important;
  min-height:calc(100dvh - clamp(12px, 4.4vw, 24px));
  background:var(--mobile-screen) !important;
  border-radius:calc(clamp(22px, 6vw, 34px) - clamp(6px, 2.2vw, 12px)) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}

.app{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:clamp(8px, 2.6vw, 14px) !important;
  overflow:visible !important;
}

.topbar,
.card,
.matrix-wrap,
.ticketWrap,
.ticket,
.summaryCard,
.investorStat{
  max-width:100% !important;
  min-width:0 !important;
}

.topbar{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:10px !important;
  padding:10px !important;
}

.brand{
  width:100% !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
}

.winnerLogo{
  width:clamp(30px, 9vw, 42px) !important;
  height:auto !important;
  flex:0 0 auto !important;
}

.brand-text{
  min-width:0 !important;
  text-align:center !important;
}

.googleLogo{
  font-size:clamp(15px, 5vw, 22px) !important;
  line-height:1.05 !important;
  letter-spacing:-.35px !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}

.topbar-actions,
.mainTableControls,
.sectionPickControls,
.correctGamesMount,
.playerModeRow,
.investorModeRow,
.investorEntryRow,
.buttons{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:8px !important;
  width:100% !important;
  align-items:stretch !important;
}

.ctl,
.totalCtl,
.viewTicketsBtn,
.topbar-actions > *,
.mainTableControls > *,
.sectionPickControls > *,
.buttons > *{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

button,
.ctl select,
.ctl input,
.mainTableControls select,
.sectionPickControls select,
.investorEntryRow input,
.investorEntryRow select{
  min-height:42px !important;
  width:100% !important;
  max-width:100% !important;
  font-size:16px !important;
}

.layout,
.mobile-frame .layout{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  width:100% !important;
}

.colLeft,
.colRight,
.mobile-frame .colLeft,
.mobile-frame .colRight{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  width:100% !important;
  max-width:100% !important;
}

.card{
  padding:clamp(8px, 2.4vw, 12px) !important;
  border-radius:16px !important;
}

.card-head{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:6px !important;
}

.card-head h2,
.hint,
.summary,
.sectionHeaderBadge,
.sectionHeaderBadgeWide{
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

.mainTableWrap,
.homeSectionCard .mainTableWrap,
.investorTableWrap,
.statsTableWrap,
.matrix-wrap,
.ticketModalBody{
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
}

.mainTable,
.homeTable,
.matrix-head,
.mrow{
  width:100% !important;
}

.mainTable,
.homeTable{
  table-layout:fixed !important;
  min-width:0 !important;
}

.mainTable th,
.mainTable td,
.homeTable th,
.homeTable td{
  padding:6px 2px !important;
  font-size:clamp(10px, 3vw, 13px) !important;
  line-height:1.15 !important;
  vertical-align:middle !important;
}

.mainTable .lineCol,
.homeTable .lineCol{width:12% !important;}
.mainTable .gameCol,
.homeTable .gameCol{width:34% !important;}
.mainTable .pickCol,
.homeTable .pickCol{width:18% !important;}

.mainTable select,
.homeTable select,
.pair input.game,
.pair select{
  min-width:0 !important;
  max-width:100% !important;
  padding:5px 16px 5px 4px !important;
  font-size:clamp(11px, 3.4vw, 14px) !important;
}

.pair{
  grid-template-columns:minmax(0,1fr) minmax(38px, 46px) !important;
  gap:3px !important;
}

.pickPill,
.resultPickBtn{
  min-width:0 !important;
  width:100% !important;
  font-size:clamp(11px, 3.2vw, 13px) !important;
}

.tickets,
.tickets2,
#tickets,
#tickets2,
#generatedTickets,
#generatedTickets2,
#generatedTicketsTwoBody{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  width:100% !important;
}

.ticketWrap,
.ticket,
.ticket table,
.ticketTable,
.ticketWrap table{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  table-layout:fixed !important;
}

.ticket th,
.ticket td,
.ticketTable th,
.ticketTable td{
  padding:6px 3px !important;
  font-size:clamp(10px, 3vw, 12px) !important;
  overflow-wrap:anywhere !important;
}

.ticketModalOverlay{
  padding:8px !important;
}

.ticketModalDialog{
  width:min(100%, 430px) !important;
  max-width:100% !important;
  max-height:calc(100dvh - 16px) !important;
  border-radius:18px !important;
}

@media (max-width: 380px){
  .topbar-actions,
  .mainTableControls,
  .sectionPickControls,
  .correctGamesMount,
  .playerModeRow,
  .investorModeRow,
  .investorEntryRow,
  .buttons{
    grid-template-columns:1fr !important;
  }
  .mainTable th,
  .mainTable td,
  .homeTable th,
  .homeTable td{
    padding:5px 1px !important;
  }
}

@media (min-width: 700px){
  body{padding:16px !important;}
  .mobile-frame{
    min-height:calc(100dvh - 32px) !important;
    border-width:12px !important;
  }
  .mobile-screen{
    min-height:calc(100dvh - 56px) !important;
  }
}

/* === 2026 Professional adaptive shell: phone / laptop / desktop === */
:root{
  --pro-bg:#eef4fb;
  --pro-surface:#ffffff;
  --pro-surface-2:#f7f3eb;
  --pro-ink:#0f172a;
  --pro-muted:#475569;
  --pro-line:#d6dee9;
  --pro-line-strong:#94a3b8;
  --pro-blue:#2563eb;
  --pro-teal:#0f766e;
  --pro-radius:22px;
  --app-pad:clamp(10px, 1.4vw, 24px);
}

html,
body{
  max-width:100%;
  overflow-x:hidden !important;
  color:var(--pro-ink);
  background:
    radial-gradient(1100px 720px at 5% 0%, rgba(37,99,235,.16), transparent 58%),
    radial-gradient(980px 680px at 95% 4%, rgba(20,184,166,.14), transparent 58%),
    linear-gradient(180deg,#f7fbff 0%, var(--pro-bg) 100%) !important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

body{
  padding:clamp(8px, 1.5vw, 24px) !important;
  min-height:100dvh;
}

.mobile-frame{
  width:min(100%, 1680px) !important;
  max-width:1680px !important;
  min-height:calc(100dvh - clamp(16px, 3vw, 48px)) !important;
  margin:0 auto !important;
  border:1px solid rgba(148,163,184,.55) !important;
  border-radius:clamp(18px, 2vw, 32px) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.88)) !important;
  box-shadow:0 24px 70px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.95) !important;
  overflow:hidden !important;
}

.mobile-screen{
  width:100% !important;
  min-height:inherit !important;
  border-radius:inherit !important;
  background:transparent !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

.app{
  width:100% !important;
  max-width:100% !important;
  padding:var(--app-pad) !important;
  margin:0 !important;
  overflow:hidden !important;
}

.app *,
.app *::before,
.app *::after{
  box-sizing:border-box !important;
  min-width:0;
}

.topbar,
.card,
.homeSectionCard,
.summaryCard,
.investorStat,
.matrix-wrap,
.ticket,
.ticketWrap{
  max-width:100% !important;
  border-color:var(--pro-line) !important;
  box-shadow:0 14px 36px rgba(15,23,42,.07) !important;
}

.topbar{
  display:grid !important;
  grid-template-columns:minmax(220px, .85fr) minmax(0, 1.8fr) !important;
  gap:clamp(12px, 1.3vw, 22px) !important;
  align-items:center !important;
  padding:clamp(12px, 1.2vw, 20px) !important;
  margin-bottom:clamp(12px, 1.2vw, 20px) !important;
  border-radius:var(--pro-radius) !important;
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(10px);
}

.brand{
  justify-content:flex-start !important;
  gap:12px !important;
  width:auto !important;
}

.winnerLogo{
  width:clamp(36px, 3.1vw, 56px) !important;
  height:auto !important;
  object-fit:contain !important;
}

.brand-text,
.googleLogo{
  text-align:left !important;
}

.googleLogo{
  font-size:clamp(20px, 2.1vw, 34px) !important;
  line-height:1 !important;
  letter-spacing:-.06em !important;
  white-space:nowrap !important;
}

.topbar-actions{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)) !important;
  gap:10px !important;
  width:100% !important;
  align-items:end !important;
}

.ctl,
.totalCtl,
.topbar-actions > *{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

.ctl{
  color:var(--pro-muted) !important;
  font-weight:800 !important;
  letter-spacing:.01em;
}

button,
.ctl select,
.ctl input,
.mainTableControls select,
.sectionPickControls select,
.investorEntryRow input,
.investorEntryRow select,
select,
input{
  max-width:100% !important;
  min-height:42px !important;
  border-radius:14px !important;
  border:1px solid var(--pro-line) !important;
  font:700 clamp(13px, .9vw, 15px)/1.2 Inter, ui-sans-serif, system-ui, sans-serif !important;
}

button,
.viewTicketsBtn{
  cursor:pointer;
  background:linear-gradient(135deg, var(--pro-blue), #1d4ed8) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 8px 20px rgba(37,99,235,.20) !important;
}

.layout{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  gap:clamp(12px, 1.2vw, 20px) !important;
  width:100% !important;
}

.colLeft,
.colRight{
  display:flex !important;
  flex-direction:column !important;
  gap:clamp(12px, 1.2vw, 20px) !important;
  width:100% !important;
  max-width:100% !important;
}

.card,
.homeSectionCard{
  padding:clamp(12px, 1.1vw, 20px) !important;
  border-radius:var(--pro-radius) !important;
  background:rgba(255,255,255,.94) !important;
  overflow:hidden !important;
}

.card-head{
  display:flex !important;
  flex-wrap:wrap !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}

.card-head h2{
  font-size:clamp(16px, 1.15vw, 22px) !important;
  font-weight:900 !important;
  letter-spacing:-.025em;
}

.hint,
.summary,
.sectionHeaderBadge,
.sectionHeaderBadgeWide{
  max-width:100% !important;
  overflow-wrap:anywhere !important;
}

.mainTableWrap,
.homeSectionCard .mainTableWrap,
.investorTableWrap,
.statsTableWrap,
.matrix-wrap,
.ticketModalBody,
.tableShell{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
  border-radius:18px !important;
}

.mainTable,
.homeTable,
.statsTable{
  width:100% !important;
  min-width:720px !important;
  table-layout:fixed !important;
}

.mainTable th,
.mainTable td,
.homeTable th,
.homeTable td,
.statsTable th,
.statsTable td{
  font-size:clamp(12px, .85vw, 15px) !important;
  line-height:1.25 !important;
  padding:clamp(7px, .7vw, 11px) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.matrix-head,
.mrow{
  grid-template-columns:.55fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(150px,2fr) !important;
  width:100% !important;
}

.cell select,
.pair input.game,
.pair select{
  width:100% !important;
  min-width:0 !important;
}

.tickets,
.tickets2,
#tickets,
#tickets2,
#generatedTickets,
#generatedTickets2,
#generatedTicketsTwoBody{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  gap:clamp(10px, 1vw, 18px) !important;
  width:100% !important;
  max-width:100% !important;
}

.ticketWrap,
.ticket,
.ticket table,
.ticketTable,
.ticketWrap table{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  table-layout:fixed !important;
}

.ticket th,
.ticket td,
.ticketTable th,
.ticketTable td{
  font-size:clamp(12px, .82vw, 14px) !important;
  padding:clamp(6px, .55vw, 10px) !important;
  overflow-wrap:anywhere !important;
}

.ticketModalDialog{
  width:min(1080px, calc(100vw - 28px)) !important;
  max-width:100% !important;
  max-height:calc(100dvh - 28px) !important;
  overflow:hidden !important;
  border-radius:24px !important;
}

.ticketModalOverlay{
  padding:14px !important;
}

/* Large desktop: use more of the screen, bigger cards, more ticket columns */
@media (min-width: 1440px){
  :root{ --app-pad:28px; }
  .mobile-frame{ max-width:1760px !important; }
  .layout{ grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr) !important; }
  .tickets,
  .tickets2,
  #tickets,
  #tickets2,
  #generatedTickets,
  #generatedTickets2,
  #generatedTicketsTwoBody{
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)) !important;
  }
}

/* Laptop/tablet: keep two columns when possible, controls wrap neatly */
@media (min-width: 901px) and (max-width: 1199px){
  .topbar{ grid-template-columns:1fr !important; }
  .brand{ justify-content:center !important; }
  .brand-text,.googleLogo{ text-align:center !important; }
  .layout{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important; }
  .mainTable,
  .homeTable,
  .statsTable{ min-width:640px !important; }
}

/* Small tablet and phone: stacked layout, full-width controls, no content outside the frame */
@media (max-width: 900px){
  body{ padding:0 !important; }
  .mobile-frame{
    width:100% !important;
    max-width:100% !important;
    min-height:100dvh !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  .mobile-screen{ border-radius:0 !important; }
  .topbar{
    grid-template-columns:1fr !important;
    border-radius:0 0 22px 22px !important;
    position:relative;
  }
  .brand{ justify-content:center !important; }
  .brand-text,.googleLogo{ text-align:center !important; }
  .googleLogo{ white-space:normal !important; font-size:clamp(20px, 7vw, 30px) !important; }
  .topbar-actions,
  .mainTableControls,
  .sectionPickControls,
  .correctGamesMount,
  .playerModeRow,
  .investorModeRow,
  .investorEntryRow,
  .buttons{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
    width:100% !important;
  }
  .layout{
    grid-template-columns:1fr !important;
    display:grid !important;
  }
  .card-head{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .mainTable,
  .homeTable,
  .statsTable{ min-width:620px !important; }
  .tickets,
  .tickets2,
  #tickets,
  #tickets2,
  #generatedTickets,
  #generatedTickets2,
  #generatedTicketsTwoBody{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 520px){
  :root{ --app-pad:10px; }
  .topbar-actions,
  .mainTableControls,
  .sectionPickControls,
  .correctGamesMount,
  .playerModeRow,
  .investorModeRow,
  .investorEntryRow,
  .buttons{
    grid-template-columns:1fr !important;
  }
  button,
  .ctl select,
  .ctl input,
  select,
  input{
    min-height:46px !important;
    font-size:16px !important;
  }
  .card,
  .homeSectionCard{ border-radius:18px !important; padding:10px !important; }
  .mainTable,
  .homeTable,
  .statsTable{ min-width:560px !important; }
  .matrix-head,
  .mrow{
    grid-template-columns:42px minmax(72px,1fr) minmax(72px,1fr) minmax(72px,1fr) minmax(125px,1.4fr) !important;
    min-width:520px !important;
  }
}

/* =========================================================
   NO HORIZONTAL SCROLL RESPONSIVE FIX
   Keeps the Section/Game/1/2/X table fully inside the app
   on phones, laptops, and large screens.
   ========================================================= */
html,
body{
  max-width:100%;
  overflow-x:hidden !important;
}
*,
*::before,
*::after{
  box-sizing:border-box;
}
.app,
.mobile-frame,
.card,
.mainTableCard,
.mainTableWrap,
.homeSectionCard,
.homeSectionControls{
  max-width:100% !important;
  min-width:0 !important;
}
.mainTableWrap,
.mobile-frame .homeSectionCard .mainTableWrap{
  width:100% !important;
  overflow-x:hidden !important;
  overflow-y:visible;
}
.mainTable{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  table-layout:fixed !important;
}
.mainTable th,
.mainTable td{
  min-width:0 !important;
  max-width:none !important;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mainTable .lineCol{
  width:12% !important;
  min-width:0 !important;
}
.mainTable .gameCol{
  width:40% !important;
  min-width:0 !important;
}
.mainTable .pickCol,
.mainTable .colorCol{
  width:16% !important;
  min-width:0 !important;
}
.mainTable select,
.mainTable select.mainGameSel,
.mainTable .mainOddsSel{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}
.gameCellWrap,
.compactGameCellWrap,
.gameCellTopline,
.mainTable .mainPickCell{
  min-width:0 !important;
  max-width:100% !important;
}
.inlineSectionTag,
.inlineGameLabel{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width: 640px){
  .app,
  .mobile-frame{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    border-radius:18px !important;
  }
  .card,
  .mainTableCard{
    padding-left:6px !important;
    padding-right:6px !important;
  }
  .mainTableCard .mainTableWrap{
    padding:4px !important;
  }
  .mainTable{
    font-size:11px !important;
  }
  .mainTable th,
  .mainTable td{
    padding-left:3px !important;
    padding-right:3px !important;
  }
  .mainTable .lineCol{
    width:10% !important;
  }
  .mainTable .gameCol{
    width:39% !important;
  }
  .mainTable .pickCol,
  .mainTable .colorCol{
    width:17% !important;
  }
  .rowLetterPill{
    min-width:20px !important;
    padding:3px 0 !important;
    font-size:10px !important;
  }
  .inlineSectionTag{
    padding:2px 5px !important;
    font-size:8px !important;
  }
  .inlineGameLabel{
    font-size:8px !important;
    letter-spacing:0 !important;
  }
  .gameCellTopline{
    gap:4px !important;
  }
  .mainTable select.mainGameSel{
    height:30px !important;
    min-height:30px !important;
    padding:4px 6px !important;
    font-size:12px !important;
  }
  .mainTable .pickPill{
    min-width:28px !important;
    padding:5px 4px !important;
    font-size:12px !important;
  }
  .mainTable .mainOddsSel{
    height:30px !important;
    min-height:30px !important;
    padding:4px 2px !important;
    font-size:12px !important;
  }
}

@media (max-width: 390px){
  .mainTable{
    font-size:10px !important;
  }
  .mainTable .lineCol{ width:9% !important; }
  .mainTable .gameCol{ width:37% !important; }
  .mainTable .pickCol,
  .mainTable .colorCol{ width:18% !important; }
  .inlineGameLabel{ display:none !important; }
  .mainTable .mainOddsSel,
  .mainTable select.mainGameSel{
    font-size:11px !important;
  }
}

/* === FIX: Result Table must fit screen and result buttons must clearly show selected green === */
.resultTableWrap{
  overflow-x:hidden !important;
  width:100% !important;
  max-width:100% !important;
}
.resultGameTable{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  table-layout:fixed !important;
}
.resultGameTable .lineCol{width:11% !important; min-width:0 !important;}
.resultGameTable .gameCol{width:35% !important; min-width:0 !important;}
.resultGameTable .pickCol{width:18% !important; min-width:0 !important; padding-left:3px !important; padding-right:3px !important;}
.resultGameTable th,
.resultGameTable td{box-sizing:border-box !important; overflow:hidden !important;}
.resultPickBtn{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:42px !important;
  min-height:42px !important;
  border-radius:12px !important;
  pointer-events:auto !important;
  position:relative !important;
  z-index:5 !important;
}
.resultPickBtn.selected,
.resultPickBtn.resultSelectedGreen{
  border-color:#065f46 !important;
  background:linear-gradient(180deg,#10b981,#047857) !important;
  color:#ffffff !important;
  box-shadow:0 0 0 2px rgba(6,95,70,.25), 0 0 16px rgba(16,185,129,.65) !important;
}
@media (max-width:520px){
  .resultGameTable .lineCol{width:10% !important;}
  .resultGameTable .gameCol{width:34% !important;}
  .resultGameTable .pickCol{width:18.66% !important;}
  .resultPickBtn{height:40px !important; min-height:40px !important; font-size:13px !important; padding:0 !important;}
  .resultGameNumber{font-size:13px !important; min-height:36px !important;}
}

/* === Professional responsive dropdown panels === */
.proDropdown{
  width:100%;
  box-sizing:border-box;
  margin:12px 0;
  border:1px solid rgba(37,99,235,.22);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow:0 14px 34px rgba(15,23,42,.10);
  overflow:hidden;
}
.proDropdown > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 18px;
  color:#0f172a;
  font-weight:950;
  letter-spacing:.01em;
  user-select:none;
  border-bottom:1px solid transparent;
}
.proDropdown > summary::-webkit-details-marker{display:none;}
.proDropdown > summary span{font-size:16px;}
.proDropdown > summary strong{font-size:12px;color:#64748b;font-weight:850;}
.proDropdown > summary::after{
  content:"⌄";
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  border:1px solid #bfdbfe;
  transition:transform .18s ease, background .18s ease;
}
.proDropdown[open] > summary{border-bottom-color:rgba(148,163,184,.22);}
.proDropdown[open] > summary::after{transform:rotate(180deg);background:#e9dfd2;}
.topControlsDropdown{padding:0;margin-top:14px;}
.topControlsDropdown .topbar-actions{
  padding:14px;
  width:100%;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:12px;
  align-items:stretch;
}
.topControlsDropdown .ctl,
.topControlsDropdown .totalCtl{
  width:100%;
  min-width:0!important;
  box-sizing:border-box;
}
.investorDropdown .investorProfitCard{
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
.investorDropdown .card-head{padding-top:2px;}
.investorDropdown .card-head h2{display:none;}
.investorDropdown .card-head .hint{font-size:13px;line-height:1.45;color:#475569;}
.investorTopGrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;}
.investorTableWrap{max-width:100%;overflow-x:auto;}

/* Reserve space so fixed up/down arrows never cover the bottom content */
.app,
.mobile-screen{
  padding-bottom:128px!important;
}
.scrollButtons{
  bottom:max(72px, calc(env(safe-area-inset-bottom) + 72px))!important;
}
.toTop,
.toBottom{
  box-shadow:0 14px 28px rgba(15,23,42,.18);
  backdrop-filter:blur(8px);
}
@media(max-width:640px){
  .proDropdown{border-radius:16px;margin:10px 0;}
  .proDropdown > summary{padding:13px 14px;}
  .proDropdown > summary strong{display:none;}
  .topControlsDropdown .topbar-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;}
  .topControlsDropdown .viewTicketsBtn{grid-column:1/-1;}
  .investorTopGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px;}
  .investorStat{padding:9px 10px;}
  .investorStat strong{font-size:17px;}
  .investorEntryRow input,.investorEntryRow select,.investorEntryRow button{width:100%;min-width:0;}
  .app,.mobile-screen{padding-bottom:150px!important;}
  .scrollButtons{right:10px!important;bottom:max(78px, calc(env(safe-area-inset-bottom) + 78px))!important;}
}
@media(min-width:1200px){
  .topControlsDropdown .topbar-actions{grid-template-columns:120px repeat(3,minmax(150px,1fr));}
}

/* ======================================================
   ROYAL GOLD / ANCIENT PROFESSIONAL THEME
   Final visual redesign
   ====================================================== */
:root{
  --bg:#090705;
  --card:#17120b;
  --card2:#21180d;
  --ink:#f8edd2;
  --muted:#c9b27a;
  --line:#6b5424;
  --line2:#b7892d;
  --accent:#d4af37;
  --accent2:#8a5a16;
  --chip:#2a2011;
  --warn:#ff6b5e;
  --warnbg:#2b1210;
  --green:#0f6b3f;
  --green2:#1fa463;
}

html,body{max-width:100%;overflow-x:hidden;}
body{
  color:var(--ink) !important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(212,175,55,.18), transparent 62%),
    radial-gradient(900px 520px at 90% 10%, rgba(128,82,18,.18), transparent 58%),
    linear-gradient(180deg, #050403 0%, #100b06 48%, #070504 100%) !important;
}

.app{
  width:min(100%, 1420px);
  margin:0 auto;
  padding:clamp(8px,1.8vw,22px) !important;
}

.mobile-frame,.mobile-screen{max-width:100%;overflow-x:hidden;}
.mobile-frame{
  background:linear-gradient(145deg, rgba(212,175,55,.28), rgba(24,16,7,.95));
  border:1px solid rgba(212,175,55,.38);
  box-shadow:0 22px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
}
.mobile-screen{
  background:rgba(5,4,3,.35);
}

.topbar,.card,.buttonsCard,.tofesPanel{
  background:linear-gradient(180deg, rgba(35,25,13,.96), rgba(18,13,8,.98)) !important;
  border:1px solid rgba(212,175,55,.45) !important;
  border-radius:22px !important;
  box-shadow:0 18px 42px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06) !important;
  color:var(--ink) !important;
}
.topbar{
  position:relative;
  overflow:hidden;
  padding:14px !important;
}
.topbar:before,.card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.08), transparent);
}
.card{position:relative;overflow:hidden;padding:clamp(8px,1.3vw,16px) !important;}

.brand-text p,.hint,.ctl,.dotLabel,.tofesMagHint{color:var(--muted) !important;}
.googleLogo,.brand-text h1,.card-head h2,h1,h2,h3,h4{
  color:var(--ink) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.65);
}
.winnerLogo,.logo{filter:drop-shadow(0 8px 14px rgba(0,0,0,.4));}

.card-head{
  border-bottom:1px solid rgba(212,175,55,.28) !important;
  align-items:center !important;
}
.summary,.totalCtl .totalCombosNumWrap{
  background:linear-gradient(180deg, #2a2011, #151007) !important;
  border:1px solid rgba(212,175,55,.45) !important;
  color:#ffe7a3 !important;
  border-radius:14px !important;
}
.totalCombosLabel{color:#d4af37 !important;}
.totalCombosNum{color:#fff0bd !important;}

select,input,button,.ctl select,.cell select,.pair input.game,.oddsSelect{
  background:linear-gradient(180deg, #251b0e, #120d07) !important;
  border:1px solid rgba(212,175,55,.45) !important;
  color:var(--ink) !important;
  border-radius:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
select:focus,input:focus{
  outline:none !important;
  border-color:#ffd66b !important;
  box-shadow:0 0 0 3px rgba(212,175,55,.18) !important;
}
button{
  background:linear-gradient(180deg, #d7b24a, #8a5a16) !important;
  color:#140d05 !important;
  font-weight:1000 !important;
  letter-spacing:.4px;
  border-color:#f0c75e !important;
  text-transform:uppercase;
}
button:hover{filter:brightness(1.08);}
button:active{transform:translateY(1px) scale(.995);}

.matrix-wrap,.pickSummaryWrap,.oddsWrap{
  background:#120d07 !important;
  border:1px solid rgba(212,175,55,.45) !important;
  border-radius:18px !important;
  overflow:hidden;
}
.matrix-head{
  background:linear-gradient(180deg, #3a2a12, #1b1309) !important;
  border-bottom:1px solid rgba(212,175,55,.45) !important;
}
.matrix-head > div,.cell,.pickSummary th,.pickSummary td,.oddsTable td{
  border-color:rgba(212,175,55,.22) !important;
}
.matrix-head > div{
  color:#ffde7a !important;
  letter-spacing:.35px;
}
.mrow:nth-child(odd),.matrix .row:nth-child(odd){background:rgba(33,24,13,.96) !important;}
.mrow:nth-child(even),.matrix .row:nth-child(even){background:rgba(21,16,9,.98) !important;}
.mrow .cell:nth-child(n),.mhead div:nth-child(n){background:transparent !important;}
#grid .cell.hasFill{
  border-radius:14px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 0 18px rgba(212,175,55,.08);
}

.pickSummary,.oddsTable{background:#120d07 !important;color:var(--ink) !important;}
.pickSummaryHead,.oddsHead,.ticket thead th,.tofesTop,.tofesBottom{
  background:linear-gradient(180deg, #3a2a12, #1b1309) !important;
  color:#ffde7a !important;
  border-color:rgba(212,175,55,.3) !important;
}
.pickSummary tbody tr:nth-child(even) td{background:rgba(255,255,255,.025) !important;}
.pickChip{
  background:linear-gradient(180deg, #2b2112, #171008) !important;
  border:1px solid rgba(212,175,55,.55) !important;
  color:#ffe7a3 !important;
  border-radius:999px !important;
}
.pickChip:hover{background:#3a2a12 !important;}

.ticket{
  background:linear-gradient(180deg, #17120b, #100b06) !important;
  border:1px solid rgba(212,175,55,.48) !important;
  border-radius:16px !important;
  overflow:hidden;
  box-shadow:0 12px 26px rgba(0,0,0,.28) !important;
}
.ticket td,.ticket thead th{
  border-color:rgba(212,175,55,.24) !important;
  color:var(--ink) !important;
}
.ticket td{background:rgba(23,18,11,.95) !important;}
.ticket tbody tr:nth-child(even) td{background:rgba(44,33,17,.72) !important;}
.ticket td.pick{color:#ffd66b !important;}
.ticket tfoot .returnTotal{color:#4ade80 !important;text-shadow:0 0 12px rgba(74,222,128,.2);}
.gameLabel{color:#ffde7a !important;}

.colorBtn{
  border:1px solid rgba(255,231,163,.35) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.2);
}
.d1{background:#7f1d1d !important;color:#7f1d1d !important;}
.d2{background:#9a3412 !important;color:#9a3412 !important;}
.d3{background:#ca8a04 !important;color:#ca8a04 !important;}
.d4{background:#166534 !important;color:#166534 !important;}
.d5{background:#1e3a8a !important;color:#1e3a8a !important;}
.dotWrap.off .dot{color:#8b2d2d !important;}
.dotWrap.on .dot{color:#d4af37 !important;}

.oddsIdle select{color:#8f7a4d !important;}
.oddsNeed select{color:#ff6b5e !important;}
.oddsDone select{color:#4ade80 !important;}
.msg{background:#2b1210 !important;border-color:#7f1d1d !important;color:#ffb4aa !important;}

.toTop{
  right:18px !important;
  bottom:calc(22px + env(safe-area-inset-bottom)) !important;
  background:linear-gradient(180deg, #d7b24a, #8a5a16) !important;
  color:#120d07 !important;
  border:1px solid #f0c75e !important;
  border-radius:999px !important;
  z-index:9998;
}
body{padding-bottom:72px;}

@media (max-width: 700px){
  .topbar{flex-direction:column;align-items:stretch !important;}
  .topbar-actions{width:100%;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px !important;}
  .ctl,.totalCtl{min-width:0;}
  .ctl select{width:100%;}
  .matrix-head,.mrow{grid-template-columns:.72fr 1fr 1fr 1fr 1.45fr !important;}
  .matrix-head > div{font-size:10px !important;padding:6px 2px !important;}
  .cell{padding:1px !important;min-width:0;}
  .pair{grid-template-columns:1fr .72fr !important;gap:1px !important;}
  .pair select.game,.pair select.picksel,.cell select{font-size:11px !important;padding:5px 2px !important;min-width:0;}
  .buttonsRow,.buttonsLeft,.buttonsRight{gap:8px !important;flex-wrap:wrap;}
  .colorBtn{width:42px !important;height:24px !important;}
  .tickets{--ticketMinBase:145px;gap:8px !important;}
  .ticket thead th,.ticket td{font-size:10px !important;padding:5px 3px !important;}
}
@media (min-width: 1200px){
  .layout{grid-template-columns:1.05fr .95fr;gap:18px;}
  .card{padding:18px !important;}
}

/* =========================================================
   Refined Professional Style Update
   Keeps the Spending / Investor Profit color feeling and
   removes the heavy black/blue look from game entry + 1/X/2.
   ========================================================= */
:root{
  --refined-bg:#0f172a;
  --refined-card:#111827;
  --refined-panel:#1e293b;
  --refined-purple:#7c3aed;
  --refined-purple-soft:#a78bfa;
  --refined-green:#4ade80;
  --refined-mint:#a7f3d0;
  --refined-line:rgba(255,255,255,.16);
  --refined-text:#f7f3eb;
  --refined-muted:#d5c9bb;
}

/* Make app feel consistent with the Investor Profit cards */
body{
  background:
    radial-gradient(circle at top left, rgba(124,58,237,.22), transparent 34%),
    radial-gradient(circle at bottom right, rgba(20,184,166,.16), transparent 34%),
    linear-gradient(135deg,#020617 0%,#0f172a 48%,#111827 100%) !important;
}

.app,.container,.shell,.pageWrap{
  max-width:100%;
  overflow-x:hidden !important;
}

.card,.mainTableCard,.buttonsCard,.matrix-wrap,.pickSummaryWrap,.oddsWrap,.tickets,.tickets2,.ticketWrap{
  border-color:var(--refined-line) !important;
  background:linear-gradient(180deg, rgba(17,24,39,.96), rgba(15,23,42,.94)) !important;
  color:var(--refined-text) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.card h1,.card h2,.card h3,.card-head h2,.section-title,
.mainTableCard h2,.buttonsCard h2{
  color:#fff !important;
  letter-spacing:.01em;
}

.hint,.muted,.smallMsg,.statsHint{color:var(--refined-muted) !important;}

/* Game enter / main table: no harsh black-blue blocks */
.mainTableWrap{
  overflow-x:hidden !important;
  border:1px solid var(--refined-line) !important;
  background:rgba(15,23,42,.68) !important;
  border-radius:18px !important;
}

.mainTable{
  width:100% !important;
  table-layout:fixed !important;
  background:rgba(15,23,42,.72) !important;
  color:var(--refined-text) !important;
  border-color:var(--refined-line) !important;
  box-shadow:none !important;
}

.mainTable thead th,
.mainTable th{
  background:linear-gradient(180deg, rgba(124,58,237,.24), rgba(15,23,42,.94)) !important;
  color:#e9d5ff !important;
  border-color:rgba(255,255,255,.12) !important;
}

.mainTable td{
  background:rgba(30,41,59,.72) !important;
  color:#f7f3eb !important;
  border-color:rgba(255,255,255,.10) !important;
  padding:5px 4px !important;
}

.mainTable tr.lineA td{background:rgba(30,41,59,.70) !important;}
.mainTable tr.lineB td{background:rgba(15,23,42,.76) !important;}
.mainTable tr:hover td{background:rgba(124,58,237,.18) !important;}
.mainTable tr.lineStart td{border-top-color:rgba(167,139,250,.38) !important;}
.mainTable .lineCol{color:#a7f3d0 !important;}
.mainTable .gameCol{min-width:0 !important; width:auto !important;}
.mainTable .colorCol{min-width:0 !important; width:auto !important;}

.gameCellWrap{gap:5px !important; min-width:0 !important;}
.slotTag{
  background:rgba(167,139,250,.16) !important;
  border-color:rgba(167,139,250,.35) !important;
  color:#ddd6fe !important;
}

.mainTable select,
.mainTable select.mainColorSelect,
.pair select.game,
.pair select.picksel,
select.game,
.cell select,
.ctl select{
  max-width:100% !important;
  min-width:0 !important;
  background:rgba(2,6,23,.72) !important;
  color:#f7f3eb !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.mainTable select:focus-visible,
.pair select.game:focus-visible,
.pair select.picksel:focus-visible{
  outline:2px solid rgba(167,139,250,.55) !important;
  border-color:rgba(167,139,250,.72) !important;
}

/* 2 / X / 1 pills: premium purple/mint style, not black/blue */
.pickToggle{min-width:0 !important;}
.pickPill{
  width:clamp(26px, 7vw, 36px) !important;
  height:clamp(26px, 7vw, 36px) !important;
  border-radius:12px !important;
  background:linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.96)) !important;
  color:#e9d5ff !important;
  border:1px solid rgba(167,139,250,.36) !important;
  box-shadow:0 6px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
  font-size:clamp(11px, 3vw, 14px) !important;
}
.pickToggle:hover .pickPill{
  background:linear-gradient(180deg, rgba(76,29,149,.50), rgba(30,41,59,.98)) !important;
  border-color:rgba(196,181,253,.62) !important;
}
.pickToggle input:checked + .pickPill{
  background:linear-gradient(135deg, #14532d, #16a34a) !important;
  color:#ecfdf5 !important;
  border-color:rgba(167,243,208,.85) !important;
  box-shadow:0 0 0 1px rgba(74,222,128,.42), 0 0 18px rgba(74,222,128,.42), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.pickPill.reqPick{
  background:linear-gradient(135deg, rgba(127,29,29,.92), rgba(239,68,68,.72)) !important;
  color:#fff !important;
  border-color:rgba(252,165,165,.88) !important;
}

/* Pick summary and odds stay readable */
.pickSummary,.oddsTable,.statsTable{
  min-width:0 !important;
  width:100% !important;
  table-layout:fixed !important;
  background:rgba(15,23,42,.70) !important;
  color:#f7f3eb !important;
}
.pickSummary th,.pickSummary td,.oddsTable td,.statsTable th,.statsTable td{
  border-color:rgba(255,255,255,.10) !important;
  color:#f7f3eb !important;
}
.pickSummaryHead,.oddsHead{
  color:#a7f3d0 !important;
  background:linear-gradient(90deg, rgba(124,58,237,.22), rgba(20,184,166,.14)) !important;
  border-color:rgba(255,255,255,.14) !important;
}
.pickChip{
  background:rgba(124,58,237,.18) !important;
  border-color:rgba(167,139,250,.34) !important;
  color:#f5f3ff !important;
}

/* Tickets */
.ticket,.ticketTable,.tickets table{
  width:100% !important;
  table-layout:fixed !important;
  background:rgba(15,23,42,.76) !important;
  color:#f7f3eb !important;
}
.tickets table thead th,.ticketTable thead th,.tickets .ticketHeader,.ticket thead th{
  background:linear-gradient(180deg, rgba(124,58,237,.28), rgba(15,23,42,.94)) !important;
  color:#e9d5ff !important;
}
.ticket td,.ticketTable td{
  color:#f7f3eb !important;
  border-color:rgba(255,255,255,.10) !important;
  overflow-wrap:anywhere !important;
}
.ticket td.pick{color:#86efac !important;}

/* Mobile: force no side scrolling */
@media(max-width:700px){
  html,body{overflow-x:hidden !important; width:100% !important;}
  .mainTable{font-size:11px !important;}
  .mainTable th,.mainTable td{padding:4px 2px !important;}
  .mainTable .lineCol{width:28px !important;}
  .mainTable select{height:30px !important; padding:2px 4px !important; font-size:11px !important;}
  .slotTag{display:none !important;}
  .pickPill{width:24px !important;height:24px !important;border-radius:9px !important;font-size:11px !important;}
  .colorPickerWrap{gap:3px !important;}
  .mainColorSwatch{width:14px !important;height:14px !important;flex-basis:14px !important;}
}

/* =========================================================
   LIGHT CRISP PROFESSIONAL REDESIGN
   Removes dark/blue theme, cleans extra helper text, and keeps
   the whole app responsive inside the screen.
   ========================================================= */
:root{
  --lc-bg:#f4f8ff;
  --lc-bg2:#eef7f6;
  --lc-card:#ffffff;
  --lc-card2:#f8fbff;
  --lc-line:#dbe7f3;
  --lc-text:#0f172a;
  --lc-muted:#64748b;
  --lc-blue:#2563eb;
  --lc-cyan:#06b6d4;
  --lc-teal:#14b8a6;
  --lc-violet:#7c3aed;
  --lc-green:#16a34a;
  --lc-green-dark:#047857;
  --lc-red:#ef4444;
  --lc-shadow:0 18px 45px rgba(15,23,42,.10);
}

*{box-sizing:border-box;}
html,body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  color:var(--lc-text) !important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
body{
  background:
    radial-gradient(circle at 8% 0%, rgba(37,99,235,.13), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(20,184,166,.15), transparent 32%),
    linear-gradient(135deg, var(--lc-bg) 0%, #ffffff 48%, var(--lc-bg2) 100%) !important;
  padding-bottom:96px !important;
}

.app,.container,.shell,.pageWrap,.layout,.card,.mainTableWrap,.tickets,.ticketWrap{
  max-width:100% !important;
  overflow-x:hidden !important;
}

.card,.mainTableCard,.buttonsCard,.matrix-wrap,.pickSummaryWrap,.oddsWrap,.ticketWrap,.spendingCard,.investorCard,.correctGamesCard,.allPossCard,.resultGameCard{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  color:var(--lc-text) !important;
  border:1px solid var(--lc-line) !important;
  border-radius:22px !important;
  box-shadow:var(--lc-shadow) !important;
}

.card h1,.card h2,.card h3,.card-head h2,.section-title,.mainTableCard h2,.buttonsCard h2{
  color:var(--lc-text) !important;
  font-weight:800 !important;
  letter-spacing:-.025em !important;
}

/* Remove extra explanatory text/notes for a cleaner app */
.hint,.allPossNote,.statsHint,.smallMsg,.note,.notes,.helperText,.helper,.description{
  display:none !important;
}

/* Professional dropdown/controls */
button,.btn,.allPossToggleBtn,.collapseToggle,.dropdownToggle{
  border-radius:14px !important;
  border:1px solid rgba(37,99,235,.18) !important;
  background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:0 10px 22px rgba(37,99,235,.18) !important;
}
button:hover,.btn:hover,.allPossToggleBtn:hover{
  filter:brightness(1.04);
  transform:translateY(-1px);
}

.ctl,.totalCtl,.inlineCtl,.allPossMetaBox{
  background:#ffffff !important;
  color:var(--lc-text) !important;
  border:1px solid var(--lc-line) !important;
  border-radius:16px !important;
  box-shadow:0 8px 20px rgba(15,23,42,.06) !important;
}
select,input,textarea,.mainTable select,.pair select.game,.pair select.picksel,.cell select,.ctl select{
  background:#ffffff !important;
  color:var(--lc-text) !important;
  border:1px solid #cbd8e6 !important;
  border-radius:13px !important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.05) !important;
}
select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(6,182,212,.22) !important;
  border-color:var(--lc-cyan) !important;
}

/* Main game table: light, clean, no dark/blue */
.mainTableWrap{
  background:#ffffff !important;
  border:1px solid var(--lc-line) !important;
  border-radius:20px !important;
  box-shadow:0 12px 28px rgba(15,23,42,.07) !important;
}
.mainTable,.resultGameTable,.pickSummary,.oddsTable,.statsTable,.ticket,.ticketTable,.tickets table{
  width:100% !important;
  min-width:0 !important;
  table-layout:fixed !important;
  background:#ffffff !important;
  color:var(--lc-text) !important;
  border-color:var(--lc-line) !important;
}
.mainTable thead th,.mainTable th,.pickSummary th,.oddsTable th,.statsTable th,.ticket thead th,.ticketTable thead th,.tickets table thead th{
  background:linear-gradient(135deg,#eaf3ff,#e9fffb) !important;
  color:#17406f !important;
  border-color:var(--lc-line) !important;
  font-weight:850 !important;
}
.mainTable td,.pickSummary td,.oddsTable td,.statsTable td,.ticket td,.ticketTable td{
  background:#ffffff !important;
  color:var(--lc-text) !important;
  border-color:#e6eef7 !important;
  overflow-wrap:anywhere !important;
}
.mainTable tr.lineA td{background:#ffffff !important;}
.mainTable tr.lineB td{background:#f7fbff !important;}
.mainTable tr:hover td{background:#eef8ff !important;}
.mainTable tr.lineStart td{border-top-color:#b8d9ff !important;}
.mainTable .lineCol{color:#2563eb !important;font-weight:800 !important;}
.slotTag{
  background:#eaf3ff !important;
  border-color:#bdd7ff !important;
  color:#2563eb !important;
}

/* 2 / X / 1 buttons: crisp light theme */
.pickToggle{min-width:0 !important;}
.pickPill{
  width:clamp(27px,6.8vw,38px) !important;
  height:clamp(27px,6.8vw,38px) !important;
  border-radius:13px !important;
  background:linear-gradient(180deg,#ffffff,#eef7ff) !important;
  color:#17406f !important;
  border:1px solid #bdd7ff !important;
  box-shadow:0 8px 16px rgba(37,99,235,.10), inset 0 1px 0 rgba(255,255,255,.9) !important;
  font-weight:900 !important;
  font-size:clamp(11px,2.7vw,14px) !important;
}
.pickToggle:hover .pickPill{
  background:linear-gradient(180deg,#e0f7ff,#ffffff) !important;
  border-color:#67e8f9 !important;
}
.pickToggle input:checked + .pickPill,
.resultGameTable .pickToggle input:checked + .pickPill{
  background:linear-gradient(135deg,#10b981,#059669) !important;
  color:#ffffff !important;
  border-color:#047857 !important;
  box-shadow:0 0 0 3px rgba(16,185,129,.16),0 12px 24px rgba(5,150,105,.20) !important;
}
.pickPill.reqPick{
  background:linear-gradient(135deg,#fb7185,#ef4444) !important;
  color:#ffffff !important;
  border-color:#fecaca !important;
}

/* Summary/top cards use crisp colors */
.spendingCard,.investorCard,.summaryCard,.topSummary,.profitSummary{
  background:linear-gradient(135deg,#ffffff 0%,#eef8ff 55%,#effffb 100%) !important;
  border-color:#cfe2f6 !important;
}
.summaryValue,.allPossMetaValue,.totalValue,.profitValue{
  color:#0f766e !important;
  font-weight:900 !important;
}
.positive,.win,.winner,.ticket td.pick{color:var(--lc-green-dark) !important;font-weight:850 !important;}
.negative,.loss{color:var(--lc-red) !important;}

/* Tickets/cards */
.tickets{gap:12px !important;}
.ticket,.ticketTable,.tickets table{
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
}
.ticketHeader,.tickets .ticketHeader{
  background:linear-gradient(135deg,#dff7ff,#eafff7) !important;
  color:#17406f !important;
}

/* Floating arrows should not cover bottom content */
.scrollArrow,.scrollBtn,.floatingArrow,.backToTop,.goTop,.goBottom,[class*="arrow" i][class*="float" i]{
  bottom:22px !important;
  right:18px !important;
  opacity:.86 !important;
  box-shadow:0 12px 26px rgba(15,23,42,.16) !important;
}

@media(max-width:700px){
  body{padding:8px 8px 112px !important;}
  .card{border-radius:18px !important;padding:12px !important;}
  .mainTable th,.mainTable td{padding:4px 2px !important;font-size:11px !important;}
  .mainTable .lineCol{width:28px !important;}
  .slotTag{display:none !important;}
  .pickPill{width:24px !important;height:24px !important;border-radius:9px !important;font-size:11px !important;}
  .mainTable select{height:30px !important;padding:2px 4px !important;font-size:11px !important;}
  .colorPickerWrap{gap:3px !important;}
  .mainColorSwatch{width:14px !important;height:14px !important;flex-basis:14px !important;}
}

@media(min-width:1100px){
  .card{padding:20px !important;}
  .layout{gap:20px !important;}
}

/* ======================================================
   SOFT PROFESSIONAL COLOR THEME - NO GOLD / NOT TOO WHITE
   ====================================================== */
:root{
  --bg:#eaf1f8;
  --card:#f7fbff;
  --card2:#eef7fb;
  --ink:#182235;
  --muted:#607086;
  --line:#adc0d4;
  --line2:#86a2bd;
  --accent:#2563eb;
  --accent2:#0891b2;
  --accent3:#7c3aed;
  --chip:#e3f2ff;
  --warn:#dc2626;
  --warnbg:#fff1f2;
}

html, body{ max-width:100%; overflow-x:hidden; }
body{
  color:var(--ink) !important;
  background:
    radial-gradient(900px 620px at 8% 0%, rgba(125,211,252,.42), transparent 62%),
    radial-gradient(900px 620px at 92% 8%, rgba(196,181,253,.34), transparent 60%),
    radial-gradient(700px 520px at 50% 100%, rgba(153,246,228,.30), transparent 58%),
    linear-gradient(180deg, #e8f1fb 0%, #eef7fb 48%, #e9f0fb 100%) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

.app{
  width:min(1280px, 100%);
  padding:clamp(8px, 1.5vw, 18px) !important;
}

.topbar,
.card,
.tofesPanel{
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(243,249,255,.86)) !important;
  border:1px solid rgba(116,143,170,.55) !important;
  box-shadow:0 18px 42px rgba(35, 67, 105, .13) !important;
  backdrop-filter: blur(10px);
}

.topbar{ border-radius:22px !important; }
.card{ border-radius:22px !important; padding:clamp(10px,1.4vw,16px) !important; }
.card-head{
  border-bottom:1px solid rgba(134,162,189,.45) !important;
  align-items:center !important;
}
.card-head h2, h1, h2, h3{
  color:#172033 !important;
  letter-spacing:.1px;
}
.brand-text p,.hint,.ctl,.dotWrap{ color:var(--muted) !important; }

.logo{
  background:linear-gradient(135deg, #2563eb, #06b6d4 55%, #8b5cf6) !important;
  box-shadow:0 10px 22px rgba(37,99,235,.25);
}

/* Remove extra note/help text from view even if generated dynamically */
.hint,
.playerModeHelp,
.note,
.notes,
.helpText,
small.help,
.description{
  display:none !important;
}

/* Controls */
select,
input,
button,
.ctl select,
.totalCtl .totalCombosNumWrap{
  background:#f8fbff !important;
  color:#182235 !important;
  border:1px solid rgba(108,132,158,.55) !important;
  border-radius:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
select:focus,
input:focus{
  border-color:#2563eb !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.14) !important;
}
button{
  background:linear-gradient(180deg, #f7fbff, #e8f3ff) !important;
  color:#1d3557 !important;
  font-weight:900 !important;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
button:hover{
  background:linear-gradient(180deg, #eef7ff, #dcefff) !important;
  box-shadow:0 10px 24px rgba(37,99,235,.14);
}

/* Matrix: softer colorful, no blue */
.matrix-wrap,
.pickSummaryWrap,
.oddsWrap{
  background:rgba(247,251,255,.90) !important;
  border:1px solid rgba(98,125,154,.60) !important;
  border-radius:18px !important;
  overflow:hidden !important;
}
.matrix-head,
.pickSummaryHead,
.oddsHead{
  background:linear-gradient(135deg, #e9dfd2 0%, #cffafe 52%, #ede9fe 100%) !important;
  color:#172033 !important;
  border-color:rgba(98,125,154,.45) !important;
}
.matrix-head > div{
  border-color:rgba(98,125,154,.35) !important;
}
.mrow:nth-child(odd),
.matrix .row:nth-child(odd){ background:#f4f9ff !important; }
.mrow:nth-child(even),
.matrix .row:nth-child(even){ background:#eaf4fb !important; }
.mrow .cell,
.cell{
  border-color:rgba(98,125,154,.30) !important;
}
.mhead div:nth-child(2),
.mhead div:nth-child(4),
.mhead div:nth-child(6),
.mrow .cell:nth-child(2),
.mrow .cell:nth-child(4),
.mrow .cell:nth-child(6){ background:#edf7ff !important; }
.mhead div:nth-child(3),
.mhead div:nth-child(5),
.mrow .cell:nth-child(3),
.mrow .cell:nth-child(5){ background:#eefbf8 !important; }

/* Game pick controls */
.pair select.game,
.pair select.picksel,
.pair input.game,
.oddsSelect{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(99,123,150,.48) !important;
}
.pair input.game.filled{ color:#1d4ed8 !important; }
.pair input.game::placeholder{ color:#e11d48 !important; }

/* Tickets */
.ticket{
  background:#f8fbff !important;
  border:1px solid rgba(98,125,154,.60) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 10px 24px rgba(35,67,105,.10);
}
.ticket thead th{
  background:linear-gradient(135deg, #e9dfd2 0%, #cffafe 55%, #e0e7ff 100%) !important;
  color:#172033 !important;
  border-color:rgba(98,125,154,.35) !important;
}
.ticket td{
  background:#fffdf8 !important;
  color:#182235 !important;
  border-color:rgba(98,125,154,.30) !important;
}
.ticket tbody tr:nth-child(even) td{ background:#eef7ff !important; }
.ticket td.pick{ color:#2563eb !important; }
.ticket tfoot .returnTotal{ color:#0f766e !important; }
.gameLabel{ color:#475569 !important; }

/* Summary/chips */
.summary,
.pickChip{
  background:#eaf6ff !important;
  border-color:rgba(98,125,154,.50) !important;
  color:#18324f !important;
}
.pickChip:hover{ background:#dff1ff !important; }
.totalCombosLabel{ color:#2563eb !important; }
.totalCombosNum{ color:#0f766e !important; }

/* Color buttons: remove blue/blue and use matched soft palette */
.colorBtn,
.dot{
  border-color:rgba(67,85,107,.32) !important;
}
.colorBtn.d1,.d1{ background:#ffdce5 !important; color:#e11d48 !important; }
.colorBtn.d2,.d2{ background:#e0f2fe !important; color:#0284c7 !important; }
.colorBtn.d3,.d3{ background:#ede9fe !important; color:#7c3aed !important; }
.colorBtn.d4,.d4{ background:#ccfbf1 !important; color:#0f766e !important; }
.colorBtn.d5,.d5{ background:#e9dfd2 !important; color:#2563eb !important; }
.colorBtn:hover{ opacity:1 !important; filter:brightness(.98); }
#grid .cell.hasFill{ filter:saturate(.9) brightness(1.03) !important; }

/* Result buttons / selected states */
.resultPick,
.resultBtn,
button.resultPick{
  border-radius:12px !important;
}
.selected,
.active,
.isSelected{
  box-shadow:0 0 0 3px rgba(37,99,235,.16) !important;
}
.green,
.match,
.correct,
.win,
.winner,
.result-green{
  background:#dcfce7 !important;
  color:#166534 !important;
  border-color:#22c55e !important;
}

/* Floating arrow should not cover bottom content */
body{ padding-bottom:90px !important; }
.toTop{
  right:18px !important;
  bottom:22px !important;
  background:linear-gradient(180deg,#f8fbff,#e4f2ff) !important;
  border-color:rgba(82,112,148,.45) !important;
  color:#1d4ed8 !important;
  box-shadow:0 12px 28px rgba(35,67,105,.18) !important;
}

@media(max-width: 700px){
  .topbar{ align-items:flex-start !important; }
  .topbar-actions{ flex-wrap:wrap !important; width:100%; gap:8px !important; }
  .ctl, .totalCtl{ flex:1 1 130px; }
  .layout{ grid-template-columns:1fr !important; }
  .card{ border-radius:18px !important; }
  .matrix-head > div{ font-size:10px !important; padding:7px 3px !important; }
  .ticket td,.ticket thead th{ font-size:clamp(9px,2.6vw,12px) !important; padding:5px 3px !important; }
}

/* =========================================================
   PROFESSIONAL RESET THEME - clean, readable, no blue, no clutter
   ========================================================= */
:root{
  --bg-1:#eef4ff;
  --bg-2:#f0fbf8;
  --bg-3:#f7f3eb;
  --surface:#ffffff;
  --surface-2:#f7fbff;
  --ink:#102033;
  --muted:#64748b;
  --line:#d8e2ee;
  --accent:#2563eb;
  --accent-2:#0f766e;
  --accent-3:#7c3aed;
  --danger:#e11d48;
  --success:#16a34a;
  --shadow:0 18px 50px rgba(15, 34, 58, .12);
  --soft-shadow:0 8px 24px rgba(15, 34, 58, .08);
  --radius:22px;
}

*{ box-sizing:border-box !important; }
html,body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.12), transparent 34rem),
    radial-gradient(circle at top right, rgba(15,118,110,.12), transparent 30rem),
    linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 48%, var(--bg-3) 100%) !important;
  color:var(--ink) !important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  letter-spacing:-.01em;
}

body{ padding:18px 14px 110px !important; }
.mobile-frame,
.mobile-screen,
.app{
  width:min(100%, 1440px) !important;
  max-width:100% !important;
  margin-inline:auto !important;
  border:0 !important;
  border-radius:28px !important;
  background:rgba(255,255,255,.58) !important;
  box-shadow:var(--shadow) !important;
  overflow:hidden !important;
}
.mobile-screen{ padding:0 !important; }
.app{ padding:18px !important; }

/* Clean header */
.topbar{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding:16px !important;
  margin:0 0 16px !important;
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,251,255,.92)) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--soft-shadow) !important;
}
.brand{ min-width:0 !important; }
.winnerLogo{ width:44px !important; height:44px !important; border-radius:14px !important; }
.googleLogo,
.brand h1{
  font-size:clamp(22px, 3.2vw, 38px) !important;
  line-height:1 !important;
  margin:0 !important;
  color:var(--ink) !important;
  text-shadow:none !important;
}
.gBlue,.gRed,.gBlue,.gGreen{ color:var(--accent) !important; }
.wiggleDot{ background:var(--accent-2) !important; }

/* Hide unnecessary instructional clutter */
.mainModeHint,
.tofesMagHint,
.tofesHintText,
.smallMsg:empty,
.msg:empty,
.precisionStatus:empty,
.ticketZoomLabel{
  display:none !important;
}

/* Dropdown panels */
details.proDropdown,
.proDropdown{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:20px !important;
  box-shadow:var(--soft-shadow) !important;
  overflow:hidden !important;
}
.proDropdown summary{
  padding:14px 16px !important;
  background:linear-gradient(135deg,#f8fbff,#eef7ff) !important;
  color:var(--ink) !important;
  font-weight:900 !important;
  cursor:pointer !important;
  list-style:none !important;
  border-bottom:1px solid var(--line) !important;
}
.proDropdown summary strong{ color:var(--muted) !important; font-size:12px !important; font-weight:700 !important; }
.topbar-actions{
  padding:14px !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}

/* Layout: balanced desktop, single column mobile */
.layout{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(320px, 420px) !important;
  gap:16px !important;
  width:100% !important;
  max-width:100% !important;
  align-items:start !important;
}
.colLeft,.colRight{ min-width:0 !important; max-width:100% !important; }

.card,
section.card{
  background:rgba(255,255,255,.94) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--soft-shadow) !important;
  padding:16px !important;
  margin:0 0 16px !important;
  overflow:hidden !important;
  color:var(--ink) !important;
}
.card-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:0 0 12px !important;
  margin:0 0 12px !important;
  border-bottom:1px solid var(--line) !important;
  background:transparent !important;
}
.card-head h2,
.card h2{
  color:var(--ink) !important;
  font-size:clamp(16px, 2vw, 22px) !important;
  font-weight:950 !important;
  margin:0 !important;
  letter-spacing:-.02em !important;
}

/* Inputs and controls */
.ctl,
.inlineCtl,
.totalCtl,
label.ctl{
  min-width:0 !important;
  border:1px solid var(--line) !important;
  background:var(--surface-2) !important;
  color:var(--muted) !important;
  border-radius:16px !important;
  padding:10px 12px !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:800 !important;
}
select,input{
  background:#fff !important;
  color:var(--ink) !important;
  border:1px solid #cbd8e6 !important;
  border-radius:14px !important;
  padding:10px 12px !important;
  font-weight:850 !important;
  outline:none !important;
  box-shadow:none !important;
}
select:focus,input:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.14) !important;
}
button,
.ctl.viewTicketsBtn,
.allPossToggleBtn,
#fillForms,
#clear{
  background:linear-gradient(135deg, #2563eb, #0f766e) !important;
  color:white !important;
  border:0 !important;
  border-radius:15px !important;
  padding:11px 14px !important;
  font-weight:950 !important;
  box-shadow:0 12px 28px rgba(37,99,235,.18) !important;
  text-transform:none !important;
}
button:hover{ transform:translateY(-1px); filter:brightness(1.02); }
#clear{ background:linear-gradient(135deg,#64748b,#334155) !important; }

/* Tables: fit inside screen */
.mainTableWrap,
.resultTableWrap{
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  background:#fff !important;
}
table,
.mainTable,
.resultGameTable{
  width:100% !important;
  max-width:100% !important;
  table-layout:fixed !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  overflow:hidden !important;
}
.mainTable th,
.mainTable td,
.resultGameTable th,
.resultGameTable td{
  padding:10px 6px !important;
  text-align:center !important;
  color:var(--ink) !important;
  border-bottom:1px solid #e8eef6 !important;
  border-right:1px solid #e8eef6 !important;
  font-size:clamp(11px, 1.8vw, 14px) !important;
  min-width:0 !important;
  word-break:break-word !important;
}
.mainTable thead th,
.resultGameTable thead th{
  background:linear-gradient(135deg,#edf4ff,#eafbf7) !important;
  color:#334155 !important;
  font-weight:950 !important;
}
.mainTable tr:nth-child(even) td,
.resultGameTable tr:nth-child(even) td{ background:#f8fbff !important; }
.lineCol{ width:13% !important; }
.gameCol{ width:27% !important; }
.pickCol{ width:20% !important; }

/* Pick cells and result buttons */
.pickCell,
.resultPick,
.resultBtn,
.mainTable button,
.resultGameTable button,
button.resultPick{
  width:100% !important;
  min-width:0 !important;
  min-height:38px !important;
  padding:8px 4px !important;
  border-radius:12px !important;
  background:#eef4ff !important;
  color:#1e3a8a !important;
  border:1px solid #c7d8f2 !important;
  box-shadow:none !important;
  font-weight:950 !important;
}
.pickCell:hover,
.resultPick:hover,
.resultBtn:hover,
.mainTable button:hover,
.resultGameTable button:hover{ background:#e0edff !important; }
.selected,
.active,
.isSelected,
.pickCell.selected,
.resultPick.selected,
.resultBtn.selected,
.mainTable .selected,
.resultGameTable .selected{
  background:#dcfce7 !important;
  color:#14532d !important;
  border-color:#22c55e !important;
  box-shadow:inset 0 0 0 2px rgba(34,197,94,.16) !important;
}
.redLock,
.locked,
.isLocked{
  background:#ffe4e6 !important;
  color:#be123c !important;
  border-color:#fb7185 !important;
}

/* Tickets clean look */
.tickets,
.generatedTicketsTwo,
.allPossTickets{
  width:100% !important;
  max-width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  gap:12px !important;
  overflow:hidden !important;
}
.ticket{
  width:100% !important;
  max-width:100% !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  box-shadow:0 10px 26px rgba(15,34,58,.08) !important;
  overflow:hidden !important;
}
.ticket table{ table-layout:fixed !important; width:100% !important; }
.ticket th,
.ticket td{
  padding:8px 5px !important;
  font-size:clamp(10px, 1.8vw, 13px) !important;
  border-color:#e8eef6 !important;
  color:var(--ink) !important;
  background:#fff !important;
}
.ticket thead th{ background:#edf4ff !important; color:#334155 !important; }
.ticket tbody tr:nth-child(even) td{ background:#f8fbff !important; }
.ticket td.pick{ color:var(--accent) !important; font-weight:950 !important; }
.ticket .green,
.ticket .match,
.ticket .correct,
.ticket .win{ background:#dcfce7 !important; color:#166534 !important; }

/* Replace old color chips with calm readable colors */
.colorBtn.d1,.d1{ background:#e0f2fe !important; color:#0369a1 !important; }
.colorBtn.d2,.d2{ background:#ede9fe !important; color:#6d28d9 !important; }
.colorBtn.d3,.d3{ background:#ccfbf1 !important; color:#0f766e !important; }
.colorBtn.d4,.d4{ background:#e9dfd2 !important; color:#1d4ed8 !important; }
.colorBtn.d5,.d5{ background:#ffe4e6 !important; color:#be123c !important; }

/* Remove all blue/blue feeling from old theme */
[style*="#2563eb"],
.precisionActive,
#precisionColTop.precisionActive,
#precisionColMiddle.precisionActive,
#precisionColBottom.precisionActive,
#precisionRowLeft.precisionActive,
#precisionRowCenter.precisionActive,
#precisionRowRight.precisionActive,
#precisionFixAim.precisionActive{
  background:var(--accent) !important;
  color:#fff !important;
}

/* Better summary boxes */
.summary,
.pickChip,
.allPossMetaBox,
.totalCtl{
  background:linear-gradient(135deg,#edf4ff,#eafbf7) !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
  border-radius:16px !important;
}
.totalCombosLabel,
.allPossMetaLabel{ color:var(--muted) !important; }
.totalCombosNum,
.allPossMetaValue{ color:var(--accent-2) !important; font-weight:950 !important; }

/* Floating arrow: tucked away, not blocking content */
.toTop,
.scrollTop,
.backToTop,
button.toTop{
  right:16px !important;
  bottom:16px !important;
  width:46px !important;
  height:46px !important;
  border-radius:999px !important;
  background:#ffffff !important;
  color:var(--accent) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 12px 30px rgba(15,34,58,.16) !important;
  opacity:.92 !important;
}

@media (max-width: 980px){
  body{ padding:10px 8px 110px !important; }
  .app{ padding:12px !important; border-radius:22px !important; }
  .topbar{ flex-direction:column !important; padding:12px !important; }
  .layout{ grid-template-columns:1fr !important; gap:12px !important; }
  .topControlsDropdown{ width:100% !important; }
  .topbar-actions{ width:100% !important; display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .ctl,.inlineCtl,.totalCtl,label.ctl{ width:100% !important; }
}

@media (max-width: 560px){
  .mobile-frame,.mobile-screen,.app{ border-radius:18px !important; }
  .card,section.card{ padding:12px !important; border-radius:18px !important; }
  .card-head{ align-items:flex-start !important; flex-direction:column !important; }
  .topbar-actions{ grid-template-columns:1fr !important; }
  .mainTable th,.mainTable td,.resultGameTable th,.resultGameTable td{ padding:8px 3px !important; }
  .lineCol{ width:12% !important; }
  .gameCol{ width:28% !important; }
  .pickCol{ width:20% !important; }
  .pickCell,.resultPick,.resultBtn,.mainTable button,.resultGameTable button{ min-height:34px !important; font-size:12px !important; }
  .tickets,.generatedTicketsTwo,.allPossTickets{ grid-template-columns:1fr !important; }
}

/* FINAL FIX: table header labels must not look like clickable 2/X/1 prediction buttons */
.matrix .head,
.matrix .mhead,
.mhead,
.main-table thead,
thead tr {
  background: #eef4fb !important;
}

.matrix .head > div,
.matrix .mhead > div,
.mhead > div,
thead th,
.table-header-cell {
  background: #eef4fb !important;
  color: #526174 !important;
  border: 1px solid #d8e3ef !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.matrix .head .pick,
.matrix .mhead .pick,
.mhead .pick,
thead th.pick,
thead th:nth-child(3),
thead th:nth-child(4),
thead th:nth-child(5) {
  background: #f5f8fc !important;
  color: #64748b !important;
  border-color: #dbe5f0 !important;
  cursor: default !important;
  transform: none !important;
}

.matrix .head button,
.matrix .mhead button,
.mhead button,
thead th button {
  pointer-events: none !important;
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* REAL FINAL HEADER FIX: Main Table header labels are labels, not pick buttons */
.mainTable thead,
.mainTable thead tr{
  background:#f7f3eb !important;
}
.mainTable thead th{
  background:#f7f3eb !important;
  color:#64748b !important;
  border:0 !important;
  border-bottom:1px solid #dbe7f3 !important;
  box-shadow:none !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1 !important;
  padding:10px 8px !important;
  height:34px !important;
  min-height:0 !important;
  border-radius:0 !important;
  cursor:default !important;
  pointer-events:none !important;
}
.mainTable thead th.pickCol,
.mainTable thead th.subtleHead{
  background:#fffdf8 !important;
  color:#94a3b8 !important;
  font-size:10px !important;
  font-weight:750 !important;
  letter-spacing:.12em !important;
}
.mainTable thead th.lineCol,
.mainTable thead th.gameCol{
  color:#475569 !important;
}
.mainTable tbody .pickCell,
.mainTable tbody button.pickCell,
.mainTable tbody .pickBtn{
  pointer-events:auto !important;
}


/* =========================================================
   FINAL FIX: Clear neon ON/OFF pick states for 2 / X / 1
   Green = regular selected pick. Red = locked/required selected pick.
   This overrides older styles so the states are unmistakable.
   ========================================================= */
@keyframes mobileWinNeonGreen {
  0%,100% { box-shadow: 0 0 0 2px rgba(34,197,94,.25), 0 0 12px rgba(34,197,94,.55), 0 0 26px rgba(34,197,94,.35), inset 0 1px 0 rgba(255,255,255,.45); filter: brightness(1.04); }
  50% { box-shadow: 0 0 0 3px rgba(34,197,94,.34), 0 0 18px rgba(34,197,94,.78), 0 0 38px rgba(34,197,94,.48), inset 0 1px 0 rgba(255,255,255,.55); filter: brightness(1.13); }
}
@keyframes mobileWinNeonRed {
  0%,100% { box-shadow: 0 0 0 2px rgba(239,68,68,.24), 0 0 12px rgba(239,68,68,.58), 0 0 26px rgba(239,68,68,.36), inset 0 1px 0 rgba(255,255,255,.36); filter: brightness(1.04); }
  50% { box-shadow: 0 0 0 3px rgba(239,68,68,.34), 0 0 18px rgba(239,68,68,.82), 0 0 38px rgba(239,68,68,.52), inset 0 1px 0 rgba(255,255,255,.48); filter: brightness(1.14); }
}
.mainTable tbody .pickPill.neonGreenPick,
.mainTable tbody .pickToggle input:checked + .pickPill.neonGreenPick,
.mainTable tbody .pickToggle input:checked + .pickPill:not(.reqPick):not(.neonRedPick){
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 52%, #047857 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(187,247,208,.95) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25), 0 0 8px rgba(220,252,231,.65) !important;
  animation: mobileWinNeonGreen 1.25s ease-in-out infinite !important;
}
.mainTable tbody .pickPill.neonRedPick,
.mainTable tbody .pickPill.reqPick,
.mainTable tbody .pickToggle input:checked + .pickPill.reqPick,
.mainTable tbody .pickToggle input:checked + .pickPill.neonRedPick{
  background: linear-gradient(135deg, #fb7185 0%, #ef4444 50%, #b91c1c 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(254,202,202,.96) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.28), 0 0 8px rgba(254,226,226,.65) !important;
  animation: mobileWinNeonRed 1.25s ease-in-out infinite !important;
}
.mainTable tbody .pickPill:not(.neonGreenPick):not(.neonRedPick):not(.reqPick){
  animation: none !important;
}

/* =========================================================
   FINAL READABILITY + PROFESSIONAL UI RESET
   Bigger text, stronger contrast, calmer colors.
   ========================================================= */
:root{
  --pro-bg:#eef4fb;
  --pro-card:#ffffff;
  --pro-ink:#102033;
  --pro-muted:#516173;
  --pro-line:#c9d6e6;
  --pro-line-strong:#9fb1c7;
  --pro-blue:#2563eb;
  --pro-teal:#0f766e;
  --pro-green:#16a34a;
  --pro-red:#dc2626;
  --pro-soft-blue:#e8f1ff;
  --pro-soft-teal:#e8f7f4;
}

html{ font-size:16px; -webkit-text-size-adjust:100%; }
body{
  color:var(--pro-ink) !important;
  background:
    radial-gradient(900px 520px at 5% -10%, #e9dfd2 0%, transparent 64%),
    radial-gradient(800px 520px at 100% 0%, #d9f7f0 0%, transparent 60%),
    linear-gradient(180deg,#eef4fb 0%,#f7f9fc 100%) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.app{ max-width:1360px; padding:18px !important; }
.card{
  background:var(--pro-card) !important;
  border:1.5px solid var(--pro-line) !important;
  border-radius:20px !important;
  box-shadow:0 14px 34px rgba(16,32,51,.08) !important;
}
.card-head h2{ font-size:1.15rem !important; font-weight:900 !important; color:var(--pro-ink) !important; }
.hint,.muted,.ctl,.brand-text p{ color:var(--pro-muted) !important; font-size:.9rem !important; }
.brand-text h1{ font-size:1.35rem !important; font-weight:950 !important; }
.googleLogo{ font-size:2rem !important; }

button, select, input{ font-size:1rem !important; color:var(--pro-ink) !important; }
button{
  min-height:44px;
  border-radius:14px !important;
  border:1.5px solid var(--pro-line-strong) !important;
  font-weight:900 !important;
  background:#ffffff !important;
}
button:hover{ background:var(--pro-soft-blue) !important; }

/* Main controls need to be easy to read */
.mainTableControls,
.topbar,
.buttonsCard,
.pickSummaryWrap,
.oddsWrap{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  border:1.5px solid var(--pro-line) !important;
  border-radius:18px !important;
}
.ctl select,
.mainTable select,
.oddsSelect,
input{
  min-height:40px !important;
  border:1.5px solid var(--pro-line-strong) !important;
  border-radius:12px !important;
  background:#ffffff !important;
  font-weight:800 !important;
  padding:8px 10px !important;
}

/* Table readability */
.mainTable{
  font-size:1rem !important;
  line-height:1.3 !important;
  border:1.5px solid var(--pro-line) !important;
  border-radius:18px !important;
  box-shadow:none !important;
}
.mainTable th,
.mainTable td{
  font-size:.98rem !important;
  padding:10px 8px !important;
  border-color:#dbe4ef !important;
}
.mainTable thead th{
  background:linear-gradient(180deg,#f3f7fc,#eaf0f7) !important;
  color:#44546a !important;
  font-size:.86rem !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
.mainTable th.subtleHead{
  background:#edf3fa !important;
  color:#7b8ca3 !important;
  font-size:.82rem !important;
  font-weight:800 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.mainTable .lineCol{ width:64px !important; min-width:64px !important; }
.mainTable .gameCol{ min-width:180px !important; }
.mainTable .pickCol{ min-width:96px !important; }
.mainDataRow.lineA td{ background:#ffffff !important; }
.mainDataRow.lineB td{ background:#f4f8fd !important; }
.mainDataRow:hover td{ background:#ecf5ff !important; }

/* Clear pick buttons: larger text, readable, professional */
.mainTable .pickPill,
.pickPill{
  min-width:48px !important;
  min-height:42px !important;
  padding:9px 12px !important;
  border-radius:14px !important;
  font-size:1.05rem !important;
  font-weight:950 !important;
  letter-spacing:.02em !important;
}
.mainTable .mainOddsSel{
  min-height:38px !important;
  font-size:.95rem !important;
  font-weight:850 !important;
}
.rowLetterPill,
.inlineSectionTag,
.inlineGameLabel{
  font-size:.78rem !important;
  font-weight:900 !important;
}
.rowLetterPill{ min-width:34px !important; padding:6px 0 !important; }

/* Neon states for selected picks */
.pickPill.isOn,
.pickPill.on,
.pickPill.green,
.pickToggle.isOn .pickPill,
.pickToggle.on .pickPill{
  background:#dcfce7 !important;
  border-color:var(--pro-green) !important;
  color:#14532d !important;
  box-shadow:0 0 0 3px rgba(34,197,94,.16), 0 0 18px rgba(34,197,94,.38) !important;
}
.pickPill.isOff,
.pickPill.off,
.pickPill.red,
.pickToggle.isOff .pickPill,
.pickToggle.off .pickPill{
  background:#fee2e2 !important;
  border-color:var(--pro-red) !important;
  color:#7f1d1d !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.14), 0 0 18px rgba(239,68,68,.34) !important;
}

/* Generated tickets: bigger and simpler */
.ticket{
  border:1.5px solid var(--pro-line) !important;
  border-radius:16px !important;
  background:#ffffff !important;
  box-shadow:0 8px 20px rgba(16,32,51,.07) !important;
}
.ticket thead th{
  background:#eef5ff !important;
  color:#36475d !important;
  font-size:.95rem !important;
  font-weight:900 !important;
}
.ticket td{
  font-size:.98rem !important;
  padding:8px !important;
  color:var(--pro-ink) !important;
}
.ticket td.pick{ font-size:1.08rem !important; color:var(--pro-blue) !important; }
.ticket tfoot .returnTotal{ font-size:1.15rem !important; }

/* Color/action buttons easier to see */
.colorBtn{ height:34px !important; width:58px !important; border-radius:999px !important; }
.buttonsRight .dot,
.buttonsRight .dotWrap .dot{ width:26px !important; height:26px !important; }
.dotLabel{ font-size:.85rem !important; font-weight:800 !important; }

/* Mobile: keep readable but fit on screen */
@media (max-width: 760px){
  .app{ padding:8px !important; }
  .card{ border-radius:16px !important; padding:10px !important; }
  .mainTableCard .mainTableWrap{ padding:4px !important; overflow-x:hidden !important; }
  .mainTable{ table-layout:fixed !important; font-size:.88rem !important; width:100% !important; }
  .mainTable th,
  .mainTable td{ font-size:.84rem !important; padding:7px 3px !important; }
  .mainTable thead th{ font-size:.68rem !important; letter-spacing:.04em !important; }
  .mainTable th.subtleHead{ font-size:.66rem !important; color:#8b9bb0 !important; }
  .mainTable .lineCol{ width:38px !important; min-width:38px !important; }
  .mainTable .gameCol{ width:30% !important; min-width:0 !important; }
  .mainTable .pickCol{ width:18% !important; min-width:0 !important; }
  .mainTable select.mainGameSel{ min-height:36px !important; font-size:.82rem !important; padding:5px 4px !important; }
  .mainTable .mainOddsSel{ min-height:34px !important; font-size:.78rem !important; padding:4px 2px !important; }
  .mainTable .pickPill,.pickPill{ min-width:34px !important; min-height:36px !important; font-size:.94rem !important; padding:7px 6px !important; }
  .inlineSectionTag,.inlineGameLabel{ font-size:.62rem !important; }
  .rowLetterPill{ min-width:26px !important; font-size:.74rem !important; }
  .googleLogo{ font-size:1.55rem !important; }
  .brand-text h1{ font-size:1.05rem !important; }
  .ticket td,.ticket thead th{ font-size:.86rem !important; }
}

/* =========================================================
   ASTRA PRO REDESIGN — clean, sellable, readable, responsive
   ========================================================= */
:root{
  --astra-bg:#edf3f9;
  --astra-bg2:#f7fbff;
  --astra-panel:#ffffff;
  --astra-panel2:#f8fbff;
  --astra-ink:#101828;
  --astra-muted:#667085;
  --astra-line:#d5deea;
  --astra-line2:#b9c7d8;
  --astra-blue:#2563eb;
  --astra-cyan:#0891b2;
  --astra-violet:#6d5dfc;
  --astra-green:#16a34a;
  --astra-red:#ef4444;
  --astra-shadow:0 18px 45px rgba(31,52,84,.12);
  --astra-soft-shadow:0 8px 22px rgba(31,52,84,.08);
}

html,body{overflow-x:hidden!important;}
body{
  color:var(--astra-ink)!important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif!important;
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(37,99,235,.20), transparent 60%),
    radial-gradient(820px 480px at 92% 0%, rgba(8,145,178,.18), transparent 58%),
    linear-gradient(180deg, var(--astra-bg), var(--astra-bg2))!important;
}

.mobile-frame{
  width:min(100%, 1500px)!important;
  max-width:1500px!important;
  margin:0 auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.mobile-screen{background:transparent!important;border-radius:0!important;overflow:visible!important;}
.app{width:100%!important;max-width:1500px!important;margin:0 auto!important;padding:clamp(12px,1.7vw,28px)!important;}

.topbar,
.card,
.homeSectionCard,
.mainTableCard,
.proDropdown,
.matrix-wrap,
.ticketModalDialog{
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(181,198,219,.82)!important;
  border-radius:24px!important;
  box-shadow:var(--astra-shadow)!important;
  backdrop-filter:blur(14px);
}
.topbar{
  display:grid!important;
  grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr)!important;
  align-items:center!important;
  gap:18px!important;
  padding:18px!important;
  margin-bottom:18px!important;
}
.brand{gap:14px!important;}
.winnerLogo{width:54px!important;height:54px!important;object-fit:contain!important;border-radius:16px!important;background:#fff!important;box-shadow:var(--astra-soft-shadow)!important;}
.googleLogo,.brand-text h1{
  color:var(--astra-ink)!important;
  font-size:clamp(1.65rem,2vw,2.35rem)!important;
  font-weight:950!important;
  letter-spacing:-.055em!important;
  text-shadow:none!important;
}
.googleLogo span{color:inherit!important;}
.wiggleDot{display:none!important;}

.proDropdown{padding:0!important;overflow:hidden!important;}
.proDropdown summary{
  min-height:56px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:14px 18px!important;
  color:var(--astra-ink)!important;
  background:linear-gradient(135deg,#f8fbff,#f1e8dd)!important;
  border-bottom:1px solid var(--astra-line)!important;
  font-size:1.05rem!important;
  font-weight:900!important;
  cursor:pointer!important;
}
.proDropdown summary strong{color:var(--astra-muted)!important;font-size:.84rem!important;font-weight:750!important;}
.topbar-actions,
.mainTableControls,
.buttons,
.sectionPickControls,
.correctGamesMount{
  padding:16px!important;
  gap:12px!important;
}
.ctl{font-size:.9rem!important;font-weight:800!important;color:var(--astra-muted)!important;gap:7px!important;}
select,input,button,.ctl select,.ctl input{
  min-height:44px!important;
  border-radius:14px!important;
  border:1px solid var(--astra-line2)!important;
  background:#fff!important;
  color:var(--astra-ink)!important;
  font-size:1rem!important;
  font-weight:780!important;
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset!important;
}
button,.btn,.ctl button,.viewTicketsBtn{
  background:linear-gradient(135deg,var(--astra-blue),var(--astra-cyan))!important;
  color:white!important;
  border:0!important;
  box-shadow:0 10px 22px rgba(37,99,235,.22)!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
}
button:hover,.btn:hover{filter:brightness(1.04)!important;transform:translateY(-1px)!important;}

.layout{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr)!important;gap:18px!important;align-items:start!important;}
.card,.homeSectionCard,.mainTableCard{padding:18px!important;}
.card-head{
  border:0!important;
  padding:0 0 14px 0!important;
  margin-bottom:14px!important;
  align-items:center!important;
}
.card-head h2{
  color:var(--astra-ink)!important;
  font-size:clamp(1.2rem,1.35vw,1.65rem)!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
}
.hint,.summary,.msg,.smallMsg{font-size:.95rem!important;line-height:1.35!important;color:var(--astra-muted)!important;}
.summary{background:#f1e8dd!important;border:1px solid #cfe0f5!important;color:#1d4ed8!important;font-weight:900!important;}

/* Main entry matrix — clearer and calmer */
.matrix-wrap{overflow:hidden!important;border-radius:22px!important;background:#fff!important;}
.matrix-head,.mrow{
  grid-template-columns:.5fr minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(160px,1.8fr)!important;
}
.matrix-head{
  background:#edf5ff!important;
  border-bottom:1px solid var(--astra-line)!important;
}
.matrix-head>div{
  color:#5f7188!important;
  font-size:.82rem!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  background:transparent!important;
  border-right:1px solid #d9e5f2!important;
}
.mrow:nth-child(odd){background:#fff!important;}
.mrow:nth-child(even){background:#f8fbff!important;}
.cell{padding:10px!important;border-right:1px solid #e1e9f3!important;}
.cell select,.pair select,.pair input.game{height:46px!important;font-size:1rem!important;}

/* Main table: header must NOT look like buttons */
.mainTableWrap{width:100%!important;max-width:100%!important;overflow-x:hidden!important;border-radius:22px!important;padding:0!important;background:#fff!important;border:1px solid var(--astra-line)!important;box-shadow:var(--astra-soft-shadow)!important;}
.mainTable{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  table-layout:fixed!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  font-size:1rem!important;
}
.mainTable thead th,.mainTable th{
  background:#eef4fb!important;
  color:#738297!important;
  font-size:.78rem!important;
  font-weight:900!important;
  letter-spacing:.105em!important;
  text-transform:uppercase!important;
  padding:13px 8px!important;
  border-bottom:1px solid var(--astra-line)!important;
  box-shadow:none!important;
}
.mainTable th.subtleHead,
.mainTable thead th.pickCol,
.mainTable thead th:nth-child(3),
.mainTable thead th:nth-child(4),
.mainTable thead th:nth-child(5){
  background:#f5f8fc!important;
  color:#96a3b5!important;
  font-size:.72rem!important;
  font-weight:850!important;
  border-radius:0!important;
  text-shadow:none!important;
}
.mainTable td{
  padding:10px 8px!important;
  font-size:1rem!important;
  border-bottom:1px solid #e8eef6!important;
  color:var(--astra-ink)!important;
}
.mainTable tr.lineA td,.mainDataRow.lineA td{background:#fff!important;}
.mainTable tr.lineB td,.mainDataRow.lineB td{background:#f8fbff!important;}
.mainTable tr:hover td,.mainDataRow:hover td{background:#eef7ff!important;}
.mainTable .lineCol{width:9%!important;min-width:0!important;color:#44546a!important;font-weight:950!important;}
.mainTable .gameCol{width:37%!important;min-width:0!important;}
.mainTable .pickCol,.mainTable .colorCol{width:18%!important;min-width:0!important;}
.rowLetterPill,.rowSectionPill,.inlineSectionTag{
  background:#edf5ff!important;
  color:#2563eb!important;
  border:1px solid #cdddf2!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
.inlineGameLabel,.gameCellMeta,.sectionMini{color:var(--astra-muted)!important;}

/* Real clickable picks — strong, different from headers */
.pickToggle{width:100%!important;}
.pickPill,.mainTable .pickPill{
  width:min(64px,100%)!important;
  min-width:44px!important;
  min-height:48px!important;
  border-radius:16px!important;
  border:1.5px solid #c3cfdd!important;
  background:#ffffff!important;
  color:#1f2937!important;
  font-size:1.16rem!important;
  font-weight:950!important;
  box-shadow:0 6px 14px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.pickToggle input:checked + .pickPill,
.pickPill.isOn,.pickPill.on,.pickPill.green,.pickToggle.isOn .pickPill,.pickToggle.on .pickPill{
  background:linear-gradient(180deg,#dcfce7,#bbf7d0)!important;
  color:#064e3b!important;
  border-color:#16a34a!important;
  box-shadow:0 0 0 4px rgba(22,163,74,.16),0 0 22px rgba(22,163,74,.42),0 8px 16px rgba(15,23,42,.08)!important;
}
.pickPill.isOff,.pickPill.off,.pickPill.red,.pickToggle.isOff .pickPill,.pickToggle.off .pickPill,.pickPill.reqPick{
  background:linear-gradient(180deg,#fee2e2,#fecaca)!important;
  color:#7f1d1d!important;
  border-color:#ef4444!important;
  box-shadow:0 0 0 4px rgba(239,68,68,.14),0 0 22px rgba(239,68,68,.36),0 8px 16px rgba(15,23,42,.08)!important;
}
.mainTable .mainOddsSel{min-height:42px!important;border-radius:14px!important;font-size:.95rem!important;background:#f8fbff!important;}

/* Tables and tickets */
.ticket,.ticketWrap,.ticketTable,.statsTable,.homeTable,.investorTable{
  background:#fff!important;
  border:1px solid var(--astra-line)!important;
  border-radius:18px!important;
  box-shadow:var(--astra-soft-shadow)!important;
  overflow:hidden!important;
}
.ticket thead th,.ticketTable th,.statsTable th,.homeTable th,.investorTable th{
  background:#eef4fb!important;
  color:#66758a!important;
  font-size:.86rem!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}
.ticket td,.ticketTable td,.statsTable td,.homeTable td,.investorTable td{
  font-size:1rem!important;
  color:var(--astra-ink)!important;
  padding:10px!important;
}
.ticket td.pick,.ticketTable td.pick{color:#155e75!important;font-weight:950!important;font-size:1.1rem!important;}
.tickets,.tickets2,#tickets,#tickets2,#generatedTickets,#generatedTickets2,#generatedTicketsTwoBody{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))!important;
  gap:16px!important;
}

/* Remove noisy helper text / notes */
.note,.notes,.help,.helper,.helpText,.instructions,.instructionText,.tinyHint,.extraNote,
[class*="note"],[class*="Note"],[class*="hint"]:not(.summary){
  opacity:.0!important;
  max-height:0!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
}

/* Result buttons */
.resultPickBtn{
  border-radius:15px!important;
  font-size:1.1rem!important;
  font-weight:950!important;
  background:#fff!important;
  color:#1f2937!important;
  border:1.5px solid #c3cfdd!important;
}
.resultPickBtn.selected,.resultPickBtn.resultSelectedGreen{
  background:linear-gradient(180deg,#dcfce7,#bbf7d0)!important;
  color:#064e3b!important;
  border-color:#16a34a!important;
  box-shadow:0 0 0 4px rgba(22,163,74,.16),0 0 20px rgba(22,163,74,.42)!important;
}

@media (min-width:1600px){.app,.mobile-frame{max-width:1680px!important}.layout{grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr)!important;}}
@media (max-width:980px){
  .topbar{grid-template-columns:1fr!important;border-radius:0 0 24px 24px!important;}
  .layout{grid-template-columns:1fr!important;}
  .card,.homeSectionCard,.mainTableCard{padding:14px!important;}
}
@media (max-width:640px){
  .app{padding:8px!important;}
  .topbar{padding:14px!important;margin:0 0 12px!important;}
  .winnerLogo{width:44px!important;height:44px!important;}
  .googleLogo,.brand-text h1{font-size:1.45rem!important;}
  .card,.homeSectionCard,.mainTableCard{border-radius:20px!important;padding:10px!important;}
  .mainTable thead th,.mainTable th{font-size:.62rem!important;letter-spacing:.055em!important;padding:9px 3px!important;}
  .mainTable th.subtleHead,.mainTable thead th.pickCol,.mainTable thead th:nth-child(3),.mainTable thead th:nth-child(4),.mainTable thead th:nth-child(5){font-size:.58rem!important;color:#9aa7b8!important;}
  .mainTable td{font-size:.82rem!important;padding:7px 3px!important;}
  .mainTable .lineCol{width:10%!important;}
  .mainTable .gameCol{width:36%!important;}
  .mainTable .pickCol,.mainTable .colorCol{width:18%!important;}
  .pickPill,.mainTable .pickPill{min-width:32px!important;min-height:40px!important;font-size:1rem!important;border-radius:13px!important;padding:6px 4px!important;}
  .mainTable select.mainGameSel,.mainTable .mainOddsSel{min-height:38px!important;font-size:.78rem!important;padding:4px!important;}
  .inlineSectionTag,.inlineGameLabel{font-size:.58rem!important;}
  .rowLetterPill{min-width:24px!important;font-size:.72rem!important;padding:4px 2px!important;}
  .matrix-head,.mrow{grid-template-columns:36px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(92px,1.3fr)!important;min-width:0!important;}
  .matrix-head>div{font-size:.62rem!important;padding:8px 3px!important;}
  .cell{padding:5px 3px!important;}
  .cell select,.pair select,.pair input.game{min-height:38px!important;height:38px!important;font-size:.78rem!important;padding:4px!important;}
  .ticket td,.ticketTable td{font-size:.88rem!important;padding:8px!important;}
}

/* =========================================================
   NEON CRISP PRO THEME - no blur/glow, clear sellable UI
   ========================================================= */
:root{
  --nc-bg-0:#07111f;
  --nc-bg-1:#0b1728;
  --nc-panel:#101d31;
  --nc-panel-2:#13233a;
  --nc-card:#f8fbff;
  --nc-card-2:#f1e8dd;
  --nc-text:#eaf4ff;
  --nc-ink:#102033;
  --nc-muted:#6e7f95;
  --nc-line:#c9d8ea;
  --nc-cyan:#00d5ff;
  --nc-blue:#3b82f6;
  --nc-violet:#8b5cf6;
  --nc-mint:#21d19f;
  --nc-red:#ff4d6d;
  --nc-yellow:#fbbf24;
  --nc-radius:22px;
}
html,body{
  background:
    radial-gradient(circle at 12% 0%, rgba(0,213,255,.16), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(139,92,246,.16), transparent 30%),
    linear-gradient(145deg,#07111f 0%,#0b1728 48%,#0d1b2f 100%) !important;
  color:var(--nc-text)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
  font-size:16px!important;
}
*{box-sizing:border-box!important;}
.app,.mobile-frame,.page,.container,.wrapper{
  width:min(100%,1680px)!important;
  max-width:1680px!important;
  margin:0 auto!important;
  overflow-x:hidden!important;
}
.app{
  padding:clamp(12px,2vw,28px)!important;
}
.topbar,.appHeader,.header,.mainHeader{
  background:linear-gradient(135deg,#101d31 0%,#13233a 100%)!important;
  border:1px solid rgba(0,213,255,.28)!important;
  border-radius:28px!important;
  box-shadow:0 18px 45px rgba(0,0,0,.24)!important;
  color:var(--nc-text)!important;
}
.googleLogo,.brand-text h1,h1,.appTitle{
  color:#f8fbff!important;
  font-weight:950!important;
  letter-spacing:-.04em!important;
  font-size:clamp(1.8rem,4vw,3.2rem)!important;
}
.brand-text p,.subtitle,.muted,.sectionMini{
  color:#a9bdd6!important;
  font-size:clamp(.95rem,1.3vw,1.08rem)!important;
}
.card,.panel,.section,.homeSectionCard,.mainTableCard,.summaryCard,.investorCard,.spendingCard,details{
  background:linear-gradient(180deg,#f8fbff 0%,#edf6ff 100%)!important;
  color:var(--nc-ink)!important;
  border:1px solid var(--nc-line)!important;
  border-radius:var(--nc-radius)!important;
  box-shadow:0 14px 36px rgba(3,10,24,.18)!important;
  overflow:hidden!important;
}
.card h2,.panel h2,.section h2,.homeSectionCard h2,.mainTableCard h2,summary,.sectionTitle{
  color:#0d2036!important;
  font-size:clamp(1.16rem,1.8vw,1.55rem)!important;
  font-weight:950!important;
  letter-spacing:-.025em!important;
}
summary,.accordionHeader,.dropdownHeader{
  background:linear-gradient(90deg,#e7faff 0%,#eef2ff 100%)!important;
  color:#0e2a47!important;
  border-bottom:1px solid #d4e2f2!important;
  padding:16px 18px!important;
  cursor:pointer!important;
}
button,.btn,.primaryBtn,.actionBtn,input,select,textarea{
  font-family:inherit!important;
  font-size:1rem!important;
}
button,.btn,.primaryBtn,.actionBtn{
  border-radius:16px!important;
  font-weight:900!important;
  border:1px solid #93c5fd!important;
  background:linear-gradient(180deg,#e0f7ff 0%,#c7e9ff 100%)!important;
  color:#082f49!important;
  box-shadow:0 8px 18px rgba(15,23,42,.10)!important;
}
button:hover,.btn:hover,.primaryBtn:hover,.actionBtn:hover{filter:saturate(1.08)!important;transform:translateY(-1px)!important;}
input,select,textarea{
  background:#ffffff!important;
  color:#102033!important;
  border:1.5px solid #b8cce3!important;
  border-radius:14px!important;
  min-height:44px!important;
  font-weight:750!important;
}
input:focus,select:focus,textarea:focus{
  outline:3px solid rgba(0,213,255,.25)!important;
  border-color:#00a9d6!important;
}

/* Main game table: readable and contained */
.tableWrap,.mainTableWrap,.tableScroll,.responsiveTable{
  overflow-x:hidden!important;
  width:100%!important;
  max-width:100%!important;
}
.mainTable,table{
  width:100%!important;
  max-width:100%!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
.mainTable thead th,.mainTable th,table thead th{
  background:#dfeaf7!important;
  color:#64748b!important;
  border-bottom:1px solid #c8d7ea!important;
  font-size:clamp(.72rem,1vw,.9rem)!important;
  font-weight:850!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  padding:12px 6px!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
.mainTable thead th:nth-child(3),.mainTable thead th:nth-child(4),.mainTable thead th:nth-child(5),.mainTable thead th.pickCol{
  background:#edf4fb!important;
  color:#91a2b6!important;
  font-size:clamp(.66rem,.9vw,.78rem)!important;
  border:0!important;
  box-shadow:none!important;
  border-bottom:1px solid #c8d7ea!important;
}
.mainTable td,table td{
  color:#102033!important;
  background:#ffffff!important;
  font-size:clamp(.92rem,1.2vw,1.06rem)!important;
  font-weight:720!important;
  padding:10px 6px!important;
  border-bottom:1px solid #e1eaf5!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.mainTable tr:nth-child(even) td{background:#f4f9ff!important;}
.mainTable tr:hover td{background:#eaf8ff!important;}
.mainTable .lineCol{width:10%!important;}
.mainTable .gameCol{width:36%!important;}
.mainTable .pickCol,.mainTable .colorCol{width:18%!important;}

/* Crisp neon buttons: sharp color, no glow/blur */
.pickPill,.mainTable .pickPill,.resultPickBtn{
  width:100%!important;
  min-width:34px!important;
  min-height:46px!important;
  border-radius:14px!important;
  border:2px solid #9db2ca!important;
  background:#f8fbff!important;
  color:#0f2742!important;
  font-size:clamp(1.05rem,2.2vw,1.22rem)!important;
  font-weight:950!important;
  box-shadow:inset 0 -2px 0 rgba(15,23,42,.08)!important;
  text-shadow:none!important;
}
.pickToggle input:checked + .pickPill,
.pickPill.isOn,.pickPill.on,.pickPill.green,.pickToggle.isOn .pickPill,.pickToggle.on .pickPill,
.resultPickBtn.selected,.resultPickBtn.resultSelectedGreen{
  background:linear-gradient(180deg,#2fffc5 0%,#16c99b 100%)!important;
  color:#022c22!important;
  border-color:#009f7c!important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.16)!important;
}
.pickPill.isOff,.pickPill.off,.pickPill.red,.pickToggle.isOff .pickPill,.pickToggle.off .pickPill,.pickPill.reqPick{
  background:linear-gradient(180deg,#ff6b85 0%,#ef3358 100%)!important;
  color:#fff!important;
  border-color:#c7193d!important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)!important;
}

/* Ticket/result surfaces */
.ticket,.ticketWrap,.ticketTable,.statsTable,.homeTable,.investorTable{
  background:#f8fbff!important;
  color:#102033!important;
  border:1px solid #c8d7ea!important;
  border-radius:20px!important;
  box-shadow:0 12px 28px rgba(3,10,24,.14)!important;
}
.ticket thead th,.ticketTable th,.statsTable th,.homeTable th,.investorTable th{
  background:#e6f1ff!important;
  color:#64748b!important;
}
.ticket td,.ticketTable td,.statsTable td,.homeTable td,.investorTable td{
  color:#102033!important;
  font-size:clamp(.95rem,1.2vw,1.06rem)!important;
}
.badge,.pill,.chip,.rowLetterPill,.rowSectionPill,.inlineSectionTag{
  background:#e0f7ff!important;
  color:#075985!important;
  border:1px solid #8edaf0!important;
  border-radius:999px!important;
  box-shadow:none!important;
  font-weight:900!important;
}

/* Remove noisy notes */
.note,.notes,.help,.helper,.helpText,.instructions,.instructionText,.tinyHint,.extraNote,
[class*="note"],[class*="Note"],[class*="hint"]:not(.summary){display:none!important;}

@media(max-width:700px){
  body{font-size:15px!important;}
  .app{padding:8px!important;}
  .topbar,.appHeader,.header,.mainHeader{border-radius:20px!important;padding:14px!important;}
  .card,.panel,.section,.homeSectionCard,.mainTableCard,.summaryCard{border-radius:18px!important;padding:10px!important;}
  .mainTable thead th,.mainTable th{font-size:.62rem!important;padding:9px 3px!important;letter-spacing:.045em!important;}
  .mainTable thead th:nth-child(3),.mainTable thead th:nth-child(4),.mainTable thead th:nth-child(5){font-size:.56rem!important;color:#9aabba!important;}
  .mainTable td{font-size:.82rem!important;padding:7px 3px!important;}
  .pickPill,.mainTable .pickPill,.resultPickBtn{min-height:40px!important;font-size:1rem!important;border-radius:12px!important;padding:5px 2px!important;}
  input,select,textarea{min-height:38px!important;font-size:.82rem!important;padding:5px!important;}
}


/* ==========================================================
   GOOGLE100.NET CRISP NEON UI RESET - NO BLACK, NO GOLD, NO BLUR
   ========================================================== */
:root{
  --neo-bg-1:#062a3f;
  --neo-bg-2:#073b52;
  --neo-surface:#0b4b63;
  --neo-surface-2:#0e5f74;
  --neo-card:#ecfeff;
  --neo-card-2:#dff7ff;
  --neo-line:#53e7ff;
  --neo-cyan:#19e6ff;
  --neo-blue:#38bdf8;
  --neo-teal:#2fffc5;
  --neo-lime:#9cff5a;
  --neo-pink:#ff4fd8;
  --neo-red:#ff4d6d;
  --neo-purple:#a78bfa;
  --neo-ink:#073044;
  --neo-muted:#4d7184;
}
*{box-sizing:border-box!important;}
html,body{max-width:100%!important;overflow-x:hidden!important;}
body{
  margin:0!important;
  background:linear-gradient(135deg,#073b52 0%,#065f70 48%,#0f766e 100%)!important;
  color:var(--neo-ink)!important;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif!important;
  font-size:17px!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
}
.mobile-frame,.mobile-screen,.app{
  background:linear-gradient(145deg,#e6ffff 0%,#dff7ff 45%,#edf6ff 100%)!important;
  color:var(--neo-ink)!important;
  border-color:var(--neo-line)!important;
  box-shadow:none!important;
  overflow-x:hidden!important;
}
.app{max-width:1500px!important;margin:0 auto!important;border:2px solid rgba(83,231,255,.85)!important;border-radius:28px!important;}
.topbar,.appHeader,.header,.mainHeader{
  background:linear-gradient(135deg,#0e7490 0%,#0891b2 45%,#14b8a6 100%)!important;
  border:2px solid var(--neo-cyan)!important;
  border-radius:24px!important;
  color:#ecfeff!important;
  box-shadow:none!important;
}
.googleLogo,.brand h1,.brand-title{
  color:#ecfeff!important;
  font-size:clamp(1.75rem,4vw,3.25rem)!important;
  font-weight:1000!important;
  letter-spacing:.015em!important;
  text-shadow:none!important;
}
.gBlue{color:#7dd3fc!important}.gRed{color:#ff4fd8!important}.gGreen{color:#9cff5a!important}.gCyan{color:#22d3ee!important}
.card,.panel,.section,.summaryCard,.homeSectionCard,.mainTableCard,.resultGameCard,.generatedTicketsTwoCard,.correctGamesCard,.allPossCard,.playerModeCard{
  background:linear-gradient(180deg,#f0fdff 0%,#e1f7ff 100%)!important;
  border:2px solid rgba(34,211,238,.9)!important;
  border-radius:24px!important;
  color:var(--neo-ink)!important;
  box-shadow:none!important;
}
.card-head,h2,h3,.sectionTitle,.card-title{
  color:#075985!important;
  font-weight:1000!important;
  letter-spacing:.01em!important;
  text-shadow:none!important;
}
.card-head{
  border-bottom:2px solid rgba(34,211,238,.45)!important;
  padding-bottom:10px!important;
  margin-bottom:14px!important;
}
.proDropdown,details,.dropdownPanel{
  background:linear-gradient(180deg,#dbfbff,#effdff)!important;
  border:2px solid var(--neo-cyan)!important;
  border-radius:22px!important;
  color:var(--neo-ink)!important;
  box-shadow:none!important;
}
summary,.proDropdown summary{
  background:linear-gradient(90deg,#22d3ee,#2dd4bf)!important;
  color:#053044!important;
  border-radius:18px!important;
  font-weight:1000!important;
  text-shadow:none!important;
}
button,.btn,.ctl button,#fillForms,#clear,.allPossToggleBtn,.viewTicketsBtn{
  background:linear-gradient(180deg,#22d3ee 0%,#0891b2 100%)!important;
  color:#ecfeff!important;
  border:2px solid #67e8f9!important;
  border-radius:16px!important;
  font-weight:1000!important;
  font-size:clamp(.95rem,1.35vw,1.12rem)!important;
  min-height:44px!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
button:hover,.btn:hover{filter:saturate(1.12) brightness(1.02)!important;}
input,select,textarea,.ctl,.inlineCtl{
  background:#effdff!important;
  color:#073044!important;
  border:2px solid #7dd3fc!important;
  border-radius:16px!important;
  font-weight:900!important;
  font-size:clamp(.95rem,1.25vw,1.08rem)!important;
  box-shadow:none!important;
}
label,.ctlLabel,.totalCombosLabel,.mainModeTitle{color:#075985!important;font-weight:1000!important;}
.mainTableWrap,.tableWrap,.resultTableWrap{
  width:100%!important;max-width:100%!important;overflow-x:hidden!important;
  border:2px solid rgba(34,211,238,.85)!important;
  border-radius:22px!important;
  background:#e6fbff!important;
}
.mainTable,.resultGameTable,table{
  width:100%!important;max-width:100%!important;table-layout:fixed!important;border-collapse:separate!important;border-spacing:0!important;
  background:#effdff!important;color:#073044!important;
}
.mainTable thead th,.mainTable th,.resultGameTable thead th{
  background:linear-gradient(180deg,#b7f5ff 0%,#dffbff 100%)!important;
  color:#4b7182!important;
  border-bottom:2px solid #67e8f9!important;
  font-size:clamp(.78rem,1.05vw,.94rem)!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  padding:12px 5px!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
.mainTable thead th.pickCol,.resultGameTable thead th.pickCol,.mainTable thead th.subtleHead{
  background:#d9faff!important;
  color:#6b8797!important;
  border:1px solid #a5f3fc!important;
  border-radius:0!important;
  font-size:clamp(.68rem,.9vw,.82rem)!important;
  opacity:.78!important;
}
.mainTable td,.resultGameTable td,td{
  background:#f5feff!important;
  color:#073044!important;
  border-bottom:1px solid #baf4ff!important;
  padding:10px 5px!important;
  font-size:clamp(.92rem,1.15vw,1.05rem)!important;
  font-weight:850!important;
  overflow:hidden!important;text-overflow:ellipsis!important;
}
.mainTable tr:nth-child(even) td{background:#e8fbff!important;}
.mainTable .lineCol{width:10%!important}.mainTable .gameCol{width:36%!important}.mainTable .pickCol,.mainTable .colorCol{width:18%!important}
.pickPill,.mainTable .pickPill,.resultPickBtn,.pickBtn{
  width:100%!important;min-width:0!important;min-height:48px!important;
  background:linear-gradient(180deg,#e0fbff,#c8f7ff)!important;
  color:#075985!important;
  border:2px solid #67e8f9!important;
  border-radius:16px!important;
  font-size:clamp(1.05rem,2.2vw,1.3rem)!important;
  font-weight:1000!important;
  box-shadow:none!important;text-shadow:none!important;
}
.pickToggle input:checked + .pickPill,.pickPill.isOn,.pickPill.on,.pickPill.green,.pickToggle.isOn .pickPill,.pickToggle.on .pickPill,.resultPickBtn.selected,.resultPickBtn.resultSelectedGreen{
  background:linear-gradient(180deg,#9cff5a 0%,#2fffc5 100%)!important;
  color:#064e3b!important;border-color:#14b8a6!important;box-shadow:none!important;
}
.pickPill.isOff,.pickPill.off,.pickPill.red,.pickToggle.isOff .pickPill,.pickToggle.off .pickPill,.pickPill.reqPick,.resultPickBtn.resultSelectedRed{
  background:linear-gradient(180deg,#ff7aa2 0%,#ff4d6d 100%)!important;
  color:#fff!important;border-color:#fb7185!important;box-shadow:none!important;
}
.ticket,.ticketWrap,.ticketTable,.statsTable,.homeTable,.investorTable,.tickets>*,.generatedTicketsTwo>*{
  background:linear-gradient(180deg,#f0fdff,#e3f8ff)!important;
  border:2px solid #67e8f9!important;border-radius:22px!important;color:#073044!important;box-shadow:none!important;
}
.ticket thead th,.ticketTable th,.statsTable th,.homeTable th,.investorTable th{
  background:#ccfbf1!important;color:#0f766e!important;border-color:#5eead4!important;
}
.badge,.pill,.chip,.rowLetterPill,.rowSectionPill,.inlineSectionTag{
  background:#ccfbf1!important;color:#0f766e!important;border:2px solid #5eead4!important;border-radius:999px!important;box-shadow:none!important;font-weight:1000!important;
}
.note,.notes,.help,.helper,.helpText,.instructions,.instructionText,.tinyHint,.extraNote,.tofesHintText,.mainModeHint,
[class*="note"],[class*="Note"],[class*="hint"],[class*="Hint"]{display:none!important;}
@media(max-width:700px){
 body{font-size:16px!important}.app{padding:8px!important;border-radius:22px!important}.topbar{padding:12px!important}
 .googleLogo,.brand h1{font-size:clamp(1.55rem,8vw,2.25rem)!important}
 .card,.panel,.section{padding:10px!important;border-radius:18px!important}
 .mainTable thead th{font-size:.64rem!important;padding:9px 2px!important;letter-spacing:.055em!important}
 .mainTable thead th.pickCol{font-size:.58rem!important;opacity:.72!important}
 .mainTable td{font-size:.82rem!important;padding:7px 2px!important}
 .pickPill,.resultPickBtn,.pickBtn{min-height:42px!important;font-size:1.05rem!important;border-radius:12px!important;padding:4px 1px!important}
 input,select,textarea,button{min-height:40px!important;font-size:.9rem!important}
}

/* =========================================================
   CLEAN BALANCED PROFESSIONAL THEME - FINAL OVERRIDE
   No neon, no gold, no black, no harsh light-blue.
   Balanced readable colors + clear non-solid pick states.
   ========================================================= */
:root{
  --app-bg: #e9eee8;
  --app-bg-2: #dfe8e1;
  --surface: #fbfaf6;
  --surface-2: #f2f0ea;
  --surface-3: #e8ece6;
  --ink: #24312d;
  --muted: #65736e;
  --soft-line: #c9d2cc;
  --primary: #315c53;
  --primary-2: #244a43;
  --primary-soft: #dcebe5;
  --accent: #705c9f;
  --accent-soft: #e7e1f4;
  --good: #2f7d58;
  --good-soft: #dff1e8;
  --bad: #a34848;
  --bad-soft: #f2dedc;
  --warn-soft: #f3ead7;
  --shadow-soft: 0 16px 38px rgba(48, 61, 56, .13);
}

html, body{
  background:
    radial-gradient(circle at top left, rgba(112,92,159,.14), transparent 32%),
    radial-gradient(circle at top right, rgba(49,92,83,.18), transparent 34%),
    linear-gradient(145deg, var(--app-bg), var(--app-bg-2)) !important;
  color: var(--ink) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 15px !important;
}

.mobile-frame,
.mobile-screen,
.app{
  background: transparent !important;
  color: var(--ink) !important;
}

.app{
  max-width: 1360px !important;
  margin-inline: auto !important;
  padding: clamp(12px, 2vw, 26px) !important;
}

.topbar,
.card,
.proDropdown,
.investorProfitCard,
.mainTableCard,
.ticketCard,
.homeCard,
.resultCard,
section.card{
  background: rgba(251,250,246,.96) !important;
  border: 1px solid var(--soft-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-soft) !important;
  color: var(--ink) !important;
}

.topbar{
  padding: clamp(12px, 2vw, 20px) !important;
  gap: 14px !important;
}

.card{
  padding: clamp(12px, 1.7vw, 20px) !important;
}

.card-head,
.cardHead,
.sectionHeader{
  border-bottom: 1px solid var(--soft-line) !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
}

h1, h2, h3,
.card h2,
.card-head h2{
  color: var(--ink) !important;
  letter-spacing: -.02em !important;
  line-height: 1.12 !important;
}

.googleLogo{
  font-size: clamp(24px, 3.2vw, 42px) !important;
  font-weight: 900 !important;
  letter-spacing: -.055em !important;
  color: var(--primary) !important;
  text-shadow: none !important;
}
.googleLogo span{
  color: inherit !important;
  text-shadow: none !important;
}
.googleLogo .gCyan,
.googleLogo .gBlue,
.googleLogo .gRed,
.googleLogo .gGreen{
  color: var(--primary) !important;
}
.winnerLogo{
  filter: saturate(.92) contrast(1.02) !important;
}

/* Dropdowns: clean and compact */
.proDropdown{
  overflow: hidden !important;
}
.proDropdown > summary{
  background: linear-gradient(180deg, #f8f6ef, #ebe9df) !important;
  color: var(--ink) !important;
  border: 0 !important;
  padding: 14px 16px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}
.proDropdown > summary span{
  font-size: clamp(16px, 1.7vw, 20px) !important;
  color: var(--ink) !important;
}
.proDropdown > summary strong,
.investorModeRow > span,
.mainModeHint,
.smallMsg:empty{
  display:none !important;
}

/* Controls */
button,
.ctl,
select,
input,
.investorSwitch,
.investorEntryRow button,
.viewTicketsBtn{
  font-family: inherit !important;
}
button,
.viewTicketsBtn,
.investorEntryRow button,
#investorAddBtn,
#investorLockBtn,
#investorNewRoundBtn,
#investorViewToggle{
  background: linear-gradient(180deg, var(--primary), var(--primary-2)) !important;
  color: #fffdf8 !important;
  border: 1px solid rgba(36,74,67,.8) !important;
  border-radius: 14px !important;
  font-weight: 850 !important;
  letter-spacing: .01em !important;
  box-shadow: 0 8px 18px rgba(49,92,83,.18) !important;
  text-shadow: none !important;
}
button:hover{
  filter: brightness(1.04) !important;
  transform: translateY(-1px);
}
button:active{
  transform: translateY(0) !important;
}

.ctl,
.inlineCtl,
.investorStat{
  background: var(--surface-2) !important;
  border: 1px solid var(--soft-line) !important;
  border-radius: 16px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
select,
input,
textarea{
  background: #fffdf9 !important;
  color: var(--ink) !important;
  border: 1px solid var(--soft-line) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}
select:focus-visible,
input:focus-visible,
button:focus-visible{
  outline: 3px solid rgba(112,92,159,.22) !important;
  outline-offset: 2px !important;
}

/* Top stats */
.investorTopGrid{
  gap: 10px !important;
}
.investorStat{
  padding: 12px !important;
}
.investorStat span{
  color: var(--muted) !important;
  font-size: clamp(10px, 1.1vw, 12px) !important;
  line-height: 1.1 !important;
}
.investorStat strong,
.totalCombosNum{
  color: var(--primary) !important;
  font-size: clamp(17px, 2vw, 26px) !important;
  line-height: 1.1 !important;
}
.investorProfitStat{
  background: var(--primary-soft) !important;
  border-color: rgba(49,92,83,.35) !important;
}

/* Main table: contained, readable, not busy */
.mainTableWrap,
.investorTableWrap,
.resultGameTableWrap,
.ticketTableWrap{
  overflow-x: hidden !important;
  border-radius: 18px !important;
  border: 1px solid var(--soft-line) !important;
  background: var(--surface) !important;
}
.mainTable,
.investorTable,
.resultGameTable,
.ticketTable{
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.mainTable th,
.resultGameTable th,
.investorTable th,
.ticketTable th{
  background: #e4e9e3 !important;
  color: #53615c !important;
  font-size: clamp(10px, 1.05vw, 12px) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 9px 4px !important;
  border-color: var(--soft-line) !important;
  box-shadow: none !important;
}
.mainTable th.pickCol,
.mainTable th.subtleHead,
.resultGameTable th.pickCol{
  background: #edf0ea !important;
  color: #7a8781 !important;
  font-size: clamp(10px, 1vw, 12px) !important;
  font-weight: 750 !important;
  border-radius: 0 !important;
  text-shadow: none !important;
}
.mainTable td,
.resultGameTable td,
.investorTable td,
.ticketTable td{
  color: var(--ink) !important;
  border-color: #d8dfd9 !important;
  padding: clamp(5px, .75vw, 9px) 4px !important;
  font-size: clamp(12px, 1.15vw, 14px) !important;
}
.mainTable tr.lineA td,
.mainTable tr.lineB td{
  background: #fffdf8 !important;
}
.mainTable tr:nth-child(even) td,
.resultGameTable tr:nth-child(even) td,
.investorTable tr:nth-child(even) td{
  background: #f4f3ed !important;
}
.mainTable tr:hover td,
.resultGameTable tr:hover td{
  background: #ecefe8 !important;
}
.sectionHeaderRow td{
  background: #e1e8e2 !important;
  border-top: 1px solid var(--soft-line) !important;
  border-bottom: 1px solid var(--soft-line) !important;
  padding: 8px !important;
}
.sectionHeaderBadge,
.rowLabel,
.slotTag{
  background: #f7f5ef !important;
  color: var(--primary) !important;
  border: 1px solid var(--soft-line) !important;
  box-shadow: none !important;
}

/* Pick buttons: clear selected state by border and soft fill, not ugly solid fills */
.pickPill,
.resultPickBtn,
.pickChip,
.ticket td.pick{
  border-radius: 12px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.pickPill{
  width: clamp(30px, 4.8vw, 44px) !important;
  height: clamp(30px, 4.8vw, 44px) !important;
  background: #f8f6ef !important;
  color: #34413d !important;
  border: 2px solid #b8c3bc !important;
  font-size: clamp(14px, 1.8vw, 18px) !important;
  font-weight: 900 !important;
}
.pickToggle input:checked + .pickPill,
.pickPill.picked,
.pickPill.selected{
  background: var(--good-soft) !important;
  color: #1f5f43 !important;
  border-color: #24724f !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55) !important;
}
.pickPill.reqPick,
.pickToggle input:checked + .pickPill.reqPick{
  background: var(--bad-soft) !important;
  color: #8f3333 !important;
  border: 2px solid #a34848 !important;
  animation: none !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.56) !important;
  filter: none !important;
}
.pickToggle:hover .pickPill,
.pickToggle:hover .pickPill.reqPick,
.pickToggle:active .pickPill.reqPick{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.62), 0 3px 8px rgba(48,61,56,.10) !important;
}

/* Result buttons follow same clean style */
.resultPickBtn{
  background: #f8f6ef !important;
  color: var(--ink) !important;
  border: 2px solid #b8c3bc !important;
  min-width: 34px !important;
  min-height: 34px !important;
  font-size: clamp(13px, 1.5vw, 16px) !important;
}
.resultPickBtn.selected,
.resultPickBtn.active{
  background: var(--good-soft) !important;
  color: #1f5f43 !important;
  border-color: #24724f !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.56) !important;
}

/* Remove remaining bright / gold / neon / black-looking overrides */
*[style*="gold"],
*[style*="#000"],
*[style*="black"]{
  text-shadow:none !important;
}
.ticket td.pick.pickWon,
.ticket td.pick.resultMatchPurple{
  background: var(--good-soft) !important;
  color: #1f5f43 !important;
  border-color: #24724f !important;
  box-shadow: none !important;
}

/* Keep text hierarchy: not everything same size */
.card h2{ font-size: clamp(18px, 2vw, 26px) !important; }
.card h3{ font-size: clamp(15px, 1.45vw, 20px) !important; }
.smallMsg,
.helpText,
.note,
.notes,
.hint,
.description{
  font-size: clamp(11px, 1vw, 12px) !important;
  color: var(--muted) !important;
}

/* Hide unnecessary note/helper blocks that clutter the app */
.note,
.notes,
.helpText,
.printNote,
.calibrationNote,
.ticketHint,
.tofesHint,
.precisionNote,
#precisionHelp,
#precisionChecklist,
#mainTableMsg:empty{
  display: none !important;
}

/* Mobile fit: no side-scroll, tighter text where needed */
@media (max-width: 700px){
  .app{ padding: 10px !important; }
  .topbar{ border-radius: 18px !important; }
  .mainTable th,
  .mainTable td,
  .resultGameTable th,
  .resultGameTable td{ padding-left: 2px !important; padding-right: 2px !important; }
  .mainTable .lineCol{ width: 10% !important; }
  .mainTable .gameCol{ width: 30% !important; min-width: 0 !important; }
  .mainTable .pickCol{ width: 20% !important; }
  .gameCellWrap{ gap: 4px !important; }
  .slotTag{ display:none !important; }
  .mainTable select{ font-size: 12px !important; padding: 2px 4px !important; }
  .pickPill{ width: 32px !important; height: 32px !important; font-size: 15px !important; }
}


/* === FINAL PROFESSIONAL COLOR PASS: no light-blue accents === */
:root{
  --bg:#f1eee7;
  --card:#fffdf8;
  --ink:#1f2933;
  --muted:#59636f;
  --line:#c8beb0;
  --line2:#8d7f72;
  --accent:#6d3f5f;
  --accent2:#2f7d5c;
  --danger:#b6494a;
  --success:#2f7d5c;
  --surface:#f7f2ea;
  --surface2:#eee5da;
}

body{
  background:
    radial-gradient(900px 700px at 15% 0%, rgba(109,63,95,.12) 0%, transparent 56%),
    radial-gradient(900px 700px at 90% 8%, rgba(47,125,92,.12) 0%, transparent 55%),
    linear-gradient(180deg, #f1eee7, #f7f3eb) !important;
}

.topbar,.card,.matrix-wrap,.pickSummaryWrap{
  background:var(--card) !important;
  border-color:var(--line) !important;
  box-shadow:0 14px 32px rgba(63,47,37,.08) !important;
}

.logo,
button.primary,
.primary,
.btn-primary{
  background:linear-gradient(135deg, var(--accent), #83516f) !important;
  color:#fffdf8 !important;
  border-color:transparent !important;
}

button,.btn,select,input{
  border-color:var(--line) !important;
}

button:focus,select:focus,input:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(109,63,95,.15) !important;
}

.matrix-head,
.ticket thead th,
.pickSummaryHead,
.pickSummary th{
  background:#e9dfd2 !important;
  color:#43372e !important;
  border-color:#c8beb0 !important;
}

.matrix-head > div{
  color:#5e534a !important;
  font-size:11px !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
}

.mrow:nth-child(odd),
.matrix .row:nth-child(odd),
.ticket tbody tr:nth-child(odd) td{
  background:#fffdf8 !important;
}
.mrow:nth-child(even),
.matrix .row:nth-child(even),
.ticket tbody tr:nth-child(even) td{
  background:#f3ece1 !important;
}

.mhead div:nth-child(2),
.mhead div:nth-child(4),
.mhead div:nth-child(6),
.mrow .cell:nth-child(2),
.mrow .cell:nth-child(4),
.mrow .cell:nth-child(6){
  background:#f4eee5 !important;
}
.mhead div:nth-child(3),
.mhead div:nth-child(5),
.mrow .cell:nth-child(3),
.mrow .cell:nth-child(5){
  background:#edf5ec !important;
}

/* Pick buttons: clear selected state without ugly full solid fill */
.pickChip,
.pickbtn,
.resultPick,
button[data-pick],
.pick-option{
  background:#fffdf8 !important;
  color:#28333d !important;
  border:2px solid #b8aa9a !important;
  border-radius:12px !important;
  font-weight:800 !important;
}
.pickChip.selected,
.pickbtn.selected,
.resultPick.selected,
button[data-pick].selected,
.pick-option.selected,
.pickChip.active,
.pickbtn.active,
.resultPick.active,
button[data-pick].active,
.pick-option.active{
  background:#f1e8dd !important;
  color:#4e2d45 !important;
  border-color:#6d3f5f !important;
  box-shadow:inset 0 0 0 1px rgba(109,63,95,.25) !important;
}
.pickChip.is-on,
.pickbtn.is-on,
.resultPick.is-on,
button[data-pick].is-on,
.pick-option.is-on{
  background:#edf5ec !important;
  color:#1f5f45 !important;
  border-color:#2f7d5c !important;
}
.pickChip.is-off,
.pickbtn.is-off,
.resultPick.is-off,
button[data-pick].is-off,
.pick-option.is-off{
  background:#f9ece8 !important;
  color:#8d3434 !important;
  border-color:#b6494a !important;
}

.summary,
.pill,.badge,.chip{
  background:#eee5da !important;
  color:#43372e !important;
  border-color:#c8beb0 !important;
}

/* Remove old bright/light-blue leftovers by overriding common classes */
.gBlue{color:#6d3f5f !important;}
[style*="blue"], [class*="blue"], [class*="Blue"]{
  border-color:var(--line) !important;
}

.hint,.brand-text p,.ctl{color:var(--muted) !important;}

/* === ABSOLUTE FINAL: remove remaining blue accents, use premium plum/sage/clay === */
:root{
  --pro-blue:#6d3f5f !important;
  --astra-ink:#1f2933 !important;
  --astra-muted:#59636f !important;
}
.wiggleDot{background:#6d3f5f !important;}
.gBlue,.rowLabel,.rowSectionPill,.totalCombosLabel,.ticket td.pick,.toTop,.pair input.game.filled{color:#6d3f5f !important;}
.rowLabel,.rowSectionPill{background:#f1e8dd !important;border-color:#c8beb0 !important;}
button,.viewTicketsBtn{background:linear-gradient(135deg,#6d3f5f,#8a5c77) !important;box-shadow:0 8px 20px rgba(109,63,95,.18) !important;color:#fffdf8 !important;}
.proDropdown > summary::after{background:#f1e8dd !important;color:#6d3f5f !important;border-color:#c8beb0 !important;}
.ticket{background:#fffdf8 !important;border-color:#c8beb0 !important;box-shadow:0 10px 24px rgba(63,47,37,.10) !important;}
.ticket thead th{background:#e9dfd2 !important;color:#43372e !important;border-color:#c8beb0 !important;}
.ticket tbody tr:nth-child(even) td{background:#f3ece1 !important;}
.ticket td{background:#fffdf8 !important;border-color:#d5c9bb !important;}
.summary,.pickChip{background:#f1e8dd !important;border-color:#c8beb0 !important;color:#43372e !important;}
.pickChip:hover{background:#e9dfd2 !important;}
.colorBtn.d1,.d1{background:#f8dfe3 !important;color:#9f3142 !important;}
.colorBtn.d2,.d2{background:#efe1d2 !important;color:#8c4b32 !important;}
.colorBtn.d3,.d3{background:#e7deed !important;color:#6d3f5f !important;}
.colorBtn.d4,.d4{background:#deeee4 !important;color:#2f7d5c !important;}
.colorBtn.d5,.d5{background:#eee5da !important;color:#43372e !important;}
.selected,.active,.isSelected{box-shadow:0 0 0 3px rgba(109,63,95,.18) !important;}
.toTop{background:linear-gradient(180deg,#fffdf8,#e9dfd2) !important;border-color:#c8beb0 !important;}
.summary{border:1px solid #c8beb0!important;color:#43372e!important;}
/* Pick controls: selection is border-led, not ugly full fill */
.pickChip.selected,.pickChip.active,.pickChip.isSelected,
.picksel.selected,.picksel.active,
button.selected,button.active,button.isSelected{
  background:#f4eee5 !important;
  color:#4e2d45 !important;
  border-color:#6d3f5f !important;
  box-shadow:inset 0 0 0 1px rgba(109,63,95,.30), 0 2px 8px rgba(63,47,37,.08) !important;
}

/* =========================================================
   FINAL THEME: image-inspired red/yellow/green/orange palette
   Google100.net logo keeps Google logo colors
   ========================================================= */
:root{--bg:#fff7df!important;--card:#fffdf4!important;--ink:#18212f!important;--muted:#5f6b74!important;--line:#ffd36a!important;--line2:#f28c18!important;--accent:#e50914!important;--accent2:#41a317!important;--accent3:#ffe600!important;--accent4:#ff8a00!important;--chip:#fff1b8!important;--warn:#d71920!important;--warnbg:#fff1ec!important;}
html,body{min-height:100%;}body{color:var(--ink)!important;background:radial-gradient(900px 520px at 8% 0%,rgba(255,230,0,.26),transparent 62%),radial-gradient(820px 520px at 92% 6%,rgba(65,163,23,.20),transparent 58%),radial-gradient(760px 500px at 52% 100%,rgba(255,138,0,.20),transparent 60%),linear-gradient(180deg,#fff9e8 0%,#fff3cf 55%,#fff8ec 100%)!important;}.mobile-frame,.mobile-screen{background:transparent!important;border:0!important;box-shadow:none!important}.app{max-width:1280px!important;padding:16px!important}.topbar,.card,.proDropdown,.matrix-wrap,.pickSummaryWrap,.filterPanel,.ticketCard,.resultCard{background:linear-gradient(180deg,rgba(255,253,244,.98),rgba(255,247,223,.96))!important;border:2px solid rgba(242,140,24,.42)!important;box-shadow:0 12px 30px rgba(125,72,0,.12)!important}.topbar{border-radius:22px!important;position:relative!important;overflow:hidden!important}.topbar:before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,#e50914 0 28%,#ffe600 28% 55%,#41a317 55% 78%,#ff8a00 78% 100%)}.brand{position:relative;z-index:1}.winnerLogo{border-radius:16px!important;background:#fff!important;border:2px solid rgba(255,211,106,.8)!important;padding:4px!important}.googleLogo,.brand-text h1{font-weight:900!important;letter-spacing:-.03em!important;text-shadow:none!important}.googleLogo span{color:inherit!important;text-shadow:none!important}.googleLogo span:nth-child(1){color:#4285F4!important}.googleLogo span:nth-child(2){color:#EA4335!important}.googleLogo span:nth-child(3){color:#FBBC05!important}.googleLogo span:nth-child(4){color:#4285F4!important}.googleLogo span:nth-child(5){color:#34A853!important}.googleLogo span:nth-child(6){color:#EA4335!important}.googleLogo span:nth-child(7){color:#4285F4!important}.googleLogo span:nth-child(8){color:#EA4335!important}.googleLogo span:nth-child(9){color:#FBBC05!important}.googleLogo span:nth-child(10){color:#5f6368!important}.googleLogo span:nth-child(11){color:#4285F4!important}.googleLogo span:nth-child(12){color:#34A853!important}.googleLogo span:nth-child(13){color:#EA4335!important}.card-head,.pickSummaryHead{background:linear-gradient(90deg,rgba(229,9,20,.10),rgba(255,230,0,.18),rgba(65,163,23,.10))!important;border:1px solid rgba(242,140,24,.35)!important;border-radius:14px!important;padding:10px 12px!important;margin-bottom:10px!important}.card-head h2,.pickSummaryHead,.sectionTitle{color:#b5161b!important;font-weight:900!important}.summary,.stat,.totalBox,.moneyBox{background:linear-gradient(135deg,rgba(255,230,0,.22),rgba(255,138,0,.13))!important;border:2px solid rgba(255,138,0,.46)!important;color:#283618!important}button,.ctl button,.viewTicketsBtn,.fillBtn,.printBtn,.actionBtn{background:linear-gradient(135deg,#e50914,#ff8a00)!important;color:#fff!important;border:0!important;border-radius:14px!important;font-weight:900!important;box-shadow:0 8px 18px rgba(229,9,20,.18)!important}button:hover,.ctl button:hover,.viewTicketsBtn:hover,.fillBtn:hover,.printBtn:hover,.actionBtn:hover{filter:saturate(1.08) brightness(1.02)!important;transform:translateY(-1px)}select,input{background:#fffdf6!important;color:#18212f!important;border:2px solid rgba(242,140,24,.42)!important;border-radius:12px!important}select:focus,input:focus{border-color:#41a317!important;box-shadow:0 0 0 4px rgba(65,163,23,.14)!important;outline:none!important}.matrix-wrap{overflow:hidden!important;border-radius:18px!important}.matrix-head{background:linear-gradient(90deg,rgba(255,230,0,.32),rgba(255,138,0,.18),rgba(65,163,23,.18))!important;border-bottom:2px solid rgba(242,140,24,.52)!important}.matrix-head>div{color:#6b3e00!important;font-size:clamp(11px,1.5vw,13px)!important;letter-spacing:.05em!important;text-transform:uppercase!important;background:transparent!important}.mrow:nth-child(odd){background:rgba(255,253,244,.94)!important}.mrow:nth-child(even){background:rgba(255,246,214,.78)!important}.cell{border-color:rgba(242,140,24,.28)!important}.pair select,.pickBtn,.choiceBtn,.resultPick,.ticket td.pick{background:#fffaf0!important;color:#7a1515!important;border:2px solid rgba(229,9,20,.36)!important;font-weight:900!important}.pair select:focus,.pickBtn.active,.choiceBtn.active,.resultPick.active,.selectedPick{background:linear-gradient(180deg,#fffdf2,#fff2bd)!important;color:#183d0b!important;border:3px solid #41a317!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.8),0 6px 14px rgba(65,163,23,.18)!important}.locked,.off,.disabledPick,.pickBtn.off,.choiceBtn.off{background:#fff4ef!important;color:#a11218!important;border-color:#e50914!important}.ticket{background:#fffdf4!important;border:2px solid rgba(242,140,24,.48)!important;border-radius:16px!important}.ticket thead th{background:linear-gradient(90deg,rgba(229,9,20,.12),rgba(255,230,0,.18))!important;color:#6b3e00!important;border-color:rgba(242,140,24,.36)!important}.ticket tbody tr:nth-child(odd) td{background:#fffdf4!important}.ticket tbody tr:nth-child(even) td{background:#fff5d6!important}.ticket td,.ticket th{border-color:rgba(242,140,24,.34)!important}.ticket td.pick{color:#b5161b!important}.ticket td.pick.requiredPick,.ticket td.pick.win,.green,.isGreen{background:linear-gradient(180deg,#f3ffe9,#dcffd1)!important;border-color:#41a317!important;color:#1e5b0a!important}.loss,.red,.isRed{background:#fff0ee!important;border-color:#e50914!important;color:#b5161b!important}.proDropdown summary{background:linear-gradient(90deg,rgba(229,9,20,.10),rgba(255,230,0,.18),rgba(65,163,23,.10))!important;color:#442600!important;border-radius:14px!important;border:1px solid rgba(242,140,24,.38)!important}.toTop{background:linear-gradient(135deg,#41a317,#ff8a00)!important;color:white!important;border:0!important}.msg,.hint,.note,.helper,.helpText,.smallNote{display:none!important}@media(max-width:720px){.app{padding:10px!important}.topbar,.card{border-radius:16px!important}.matrix-head>div{font-size:10px!important;padding:7px 4px!important}.cell{padding:4px!important}}

/* =========================================================
   IMAGE PALETTE FINAL THEME - PLAIN COLORS ONLY
   Colors taken from the provided image: red, yellow, orange,
   green, cream/white, and deep olive. No light blue. No gradients.
   ========================================================= */
:root{
  --bg:#f7efd2 !important;
  --card:#fff8df !important;
  --ink:#3a170f !important;
  --muted:#6f4a20 !important;
  --line:#d88a00 !important;
  --line2:#e10600 !important;
  --accent:#e10600 !important;
  --accent2:#3f970f !important;
  --chip:#ffe45c !important;
  --warn:#e10600 !important;
  --warnbg:#fff0d0 !important;
}

html,body{
  background:#f7efd2 !important;
  color:#3a170f !important;
}

body, .app, .mobile-frame, .mobile-screen{
  background:#f7efd2 !important;
}

/* remove every old gradient look */
.topbar,.card,.matrix-head,.ticket thead th,.logo,
.proDropdown summary,.summary,.pickSummaryHead,.pickSummary th,
.investorProfitCard,.topControlsDropdown,.investorDropdown,
.sectionTitle,.mainTitle,.ticketsHeader,.resultHeader,
button,.viewTicketsBtn,.fillBtn,.clearBtn,.generateBtn,
.ticket,.mrow,.cell,.pickChip,.badgeChip,.totalCombosNumWrap{
  background-image:none !important;
  box-shadow:none !important;
}

.topbar{
  background:#fff8df !important;
  border:3px solid #e10600 !important;
}

.card,.proDropdown,.matrix-wrap,.pickSummaryWrap{
  background:#fff8df !important;
  border:2px solid #d88a00 !important;
  border-radius:14px !important;
}

.proDropdown summary,
.card-head,
.matrix-head,
.pickSummaryHead{
  background:#ffe45c !important;
  color:#3a170f !important;
  border-color:#d88a00 !important;
}

.card-head h2,
.proDropdown summary span,
.proDropdown summary strong,
.brand-text h1,
.googleLogo{
  color:#3a170f;
}

/* table title row must look like header, not clickable picks */
.matrix-head > div,
.mhead > div,
thead th,
.pickSummary th{
  background:#ffe45c !important;
  color:#6f4a20 !important;
  border-color:#d88a00 !important;
  font-weight:900 !important;
}

/* row/cell palette from the image */
.mrow:nth-child(odd),
.mrow:nth-child(odd) .cell{
  background:#fff8df !important;
}
.mrow:nth-child(even),
.mrow:nth-child(even) .cell{
  background:#fff0b8 !important;
}

.mrow .cell:nth-child(1), .mhead div:nth-child(1){ background:#ffe45c !important; }
.mrow .cell:nth-child(2), .mhead div:nth-child(2){ background:#fff8df !important; }
.mrow .cell:nth-child(3), .mhead div:nth-child(3){ background:#fff0b8 !important; }
.mrow .cell:nth-child(4), .mhead div:nth-child(4){ background:#fff8df !important; }
.mrow .cell:nth-child(5), .mhead div:nth-child(5){ background:#fff0b8 !important; }
.mrow .cell:nth-child(6), .mhead div:nth-child(6){ background:#fff8df !important; }

.cell, .mrow, .matrix-head > div,
.ticket td, .ticket th, .pickSummary td, .pickSummary th{
  border-color:#d88a00 !important;
}

input,select,.cell select,.ctl select,.pair input.game,select.game{
  background:#fff8df !important;
  color:#3a170f !important;
  border:2px solid #d88a00 !important;
  border-radius:8px !important;
  font-weight:850 !important;
}
input:focus,select:focus,.pair input.game:focus,.cell select:focus,.ctl select:focus{
  border-color:#e10600 !important;
  outline:3px solid #ffe45c !important;
  box-shadow:none !important;
}

/* 2 / X / 1 pick buttons and chips: no light blue */
button,.pickChip,.badgeChip,
.choice,.pick,.pickBtn,[class*="pick"], [class*="choice"]{
  border-color:#d88a00 !important;
}

button,.viewTicketsBtn,.fillBtn,.generateBtn,.clearBtn{
  background:#3f970f !important;
  color:#fff8df !important;
  border:2px solid #2f720b !important;
  border-radius:10px !important;
  font-weight:900 !important;
}
button:hover{ background:#2f720b !important; }

/* selected/enabled = clear green border with soft inside */
.selected,.active,.on,.checked,
button.selected,button.active,
.pickChip.selected,.pickChip.active,
.cell.selected,.cell.active,
[class*="selected"], [class*="active"]{
  background:#c6c8c9 !important;
  color:#245c08 !important;
  border-color:#3f970f !important;
  box-shadow:none !important;
}

/* off/locked/error = red border with soft inside */
.off,.locked,.disabled,.invalid,.wrong,
button.off,button.locked,
[class*="locked"], [class*="disabled"], [class*="invalid"], [class*="wrong"]{
  background:#ffd6bc !important;
  color:#e10600 !important;
  border-color:#e10600 !important;
  box-shadow:none !important;
}

/* tickets */
.ticket{
  background:#fff8df !important;
  border:2px solid #d88a00 !important;
}
.ticket thead th{
  background:#ffe45c !important;
  color:#3a170f !important;
}
.ticket td{
  background:#fff8df !important;
  color:#3a170f !important;
}
.ticket tbody tr:nth-child(even) td{
  background:#fff0b8 !important;
}
.ticket td.pick,
.ticket td.pick *{
  color:#e10600 !important;
  font-weight:1000 !important;
}
.ticket td.pick.requiredPick{
  border-color:#3f970f !important;
  background:#e9ffc6 !important;
}

.pickSummaryWrap,.pickSummary{ background:#fff8df !important; }
.pickSummary td{ background:#fff8df !important; }
.pickSummary tbody tr:nth-child(even) td{ background:#fff0b8 !important; }
.pickChip{
  background:#ffe45c !important;
  color:#3a170f !important;
  border:2px solid #d88a00 !important;
}
.pickChip:hover{ background:#ffb000 !important; color:#3a170f !important; }

.summary,.totalCombosNumWrap,.badgeChip{
  background:#ffe45c !important;
  color:#3a170f !important;
  border:2px solid #d88a00 !important;
}

.msg{ background:#ffd6bc !important; color:#e10600 !important; border-color:#e10600 !important; }

/* any old blue/cyan labels switched to the supplied image colors */
.gameLabel,.ticketZoomVal,.ticketZoomLabel,.hint,.ctl,.ctlLabel{
  color:#6f4a20 !important;
}

/* keep Google100.net with Google-like logo colors only */
.googleLogo .gBlue{ color:#4285F4 !important; }
.googleLogo .gRed{ color:#DB4437 !important; }
.googleLogo .gGreen{ color:#0F9D58 !important; }
.googleLogo .gYellow{ color:#F4B400 !important; }
.googleLogo .gCyan{ color:#555555 !important; }

/* override old decorative rainbow/neon digits except Google logo */
body :not(.googleLogo):not(.googleLogo *) .d1,
body :not(.googleLogo):not(.googleLogo *) .d5,
body :not(.googleLogo):not(.googleLogo *) .d6,
body :not(.googleLogo):not(.googleLogo *) .d7,
body :not(.googleLogo):not(.googleLogo *) .d8,
body :not(.googleLogo):not(.googleLogo *) .d9,
body :not(.googleLogo):not(.googleLogo *) .d10{
  color:#e10600 !important;
}
body :not(.googleLogo):not(.googleLogo *) .d2{ color:#ff8a00 !important; }
body :not(.googleLogo):not(.googleLogo *) .d3{ color:#ffd400 !important; }
body :not(.googleLogo):not(.googleLogo *) .d4{ color:#3f970f !important; }

.toTop{
  background:#e10600 !important;
  color:#fff8df !important;
  border-color:#d88a00 !important;
}
.toTop:hover{ background:#b90000 !important; }

/* remove all visible light-blue backgrounds/borders left from previous themes */
*[style*="#e0f2fe"], *[style*="#dbeafe"], *[style*="#bfdbfe"], *[style*="#93c5fd"], *[style*="#60a5fa"], *[style*="#3b82f6"], *[style*="#2563eb"]{
  background:#ffe45c !important;
  color:#3a170f !important;
  border-color:#d88a00 !important;
}

@media(max-width:560px){
  .matrix-head > div,.mhead > div{ font-size:11px !important; }
  .cell select,.pair input.game{ font-size:12px !important; }
}

/* === User update: move key controls into Quick Controls === */
.topControlsDropdown .topQuickBtn{
  min-height:48px;
  display:flex!important;
  align-items:center;
  justify-content:center;
}
#correctGamesSection:has(#correctGamesMount:empty){
  display:none!important;
}

/* ===== Custom update: distinct soft color for every Main Table section ===== */
#mainTableBody .sectionHeaderRow[data-section="0"] td,
#mainTableBody .mainDataRow[data-section="0"] td{ --section-border:#3b82f6; --section-soft:#eaf3ff; --section-soft2:#f7fbff; --section-text:#1d4ed8; }
#mainTableBody .sectionHeaderRow[data-section="1"] td,
#mainTableBody .mainDataRow[data-section="1"] td{ --section-border:#22c55e; --section-soft:#eafbea; --section-soft2:#f7fff7; --section-text:#15803d; }
#mainTableBody .sectionHeaderRow[data-section="2"] td,
#mainTableBody .mainDataRow[data-section="2"] td{ --section-border:#f59e0b; --section-soft:#fff6df; --section-soft2:#fffdf4; --section-text:#b45309; }
#mainTableBody .sectionHeaderRow[data-section="3"] td,
#mainTableBody .mainDataRow[data-section="3"] td{ --section-border:#8b5cf6; --section-soft:#f1edff; --section-soft2:#fbf9ff; --section-text:#6d28d9; }
#mainTableBody .sectionHeaderRow[data-section="4"] td,
#mainTableBody .mainDataRow[data-section="4"] td{ --section-border:#ec4899; --section-soft:#fff0f7; --section-soft2:#fffbfd; --section-text:#be185d; }
#mainTableBody .sectionHeaderRow[data-section="5"] td,
#mainTableBody .mainDataRow[data-section="5"] td{ --section-border:#06b6d4; --section-soft:#e6fbff; --section-soft2:#f7feff; --section-text:#0e7490; }
#mainTableBody .sectionHeaderRow[data-section="6"] td,
#mainTableBody .mainDataRow[data-section="6"] td{ --section-border:#84cc16; --section-soft:#f2fbe5; --section-soft2:#fbfff5; --section-text:#4d7c0f; }
#mainTableBody .sectionHeaderRow[data-section="7"] td,
#mainTableBody .mainDataRow[data-section="7"] td{ --section-border:#f97316; --section-soft:#fff1e8; --section-soft2:#fffaf6; --section-text:#c2410c; }
#mainTableBody .sectionHeaderRow[data-section="8"] td,
#mainTableBody .mainDataRow[data-section="8"] td{ --section-border:#14b8a6; --section-soft:#e7fbf8; --section-soft2:#f7fffd; --section-text:#0f766e; }
#mainTableBody .sectionHeaderRow[data-section="9"] td,
#mainTableBody .mainDataRow[data-section="9"] td{ --section-border:#64748b; --section-soft:#f1f5f9; --section-soft2:#fbfdff; --section-text:#334155; }

#mainTableBody .sectionHeaderRow[data-section] .compactSectionHeaderBadge,
#mainTableBody .sectionHeaderRow[data-section] .sectionHeaderBadgeWide{
  border-color:var(--section-border);
  background:linear-gradient(135deg,var(--section-soft) 0%,var(--section-soft2) 100%);
}
#mainTableBody .sectionHeaderRow[data-section] .sectionHeaderTitle{
  color:var(--section-text);
}
#mainTableBody .mainDataRow[data-section] td{
  background:linear-gradient(180deg,var(--section-soft2) 0%,var(--section-soft) 100%) !important;
  border-top-color:color-mix(in srgb, var(--section-border) 30%, transparent);
  border-bottom-color:color-mix(in srgb, var(--section-border) 30%, transparent);
}
#mainTableBody .mainDataRow[data-section] td:first-child{
  border-left-color:var(--section-border) !important;
}
#mainTableBody .mainDataRow[data-section] td:last-child{
  border-right-color:var(--section-border) !important;
}
#mainTableBody .mainDataRow[data-section] .rowLetterPill,
#mainTableBody .mainDataRow[data-section] .inlineSectionTag,
#mainTableBody .mainDataRow[data-section] .pickPill{
  border-color:var(--section-border);
  color:var(--section-text);
  background:color-mix(in srgb, var(--section-soft) 70%, white);
}

/* =========================================================
   2026 Mobile Refresh by ChatGPT
   Modern glass frame + stronger phone responsiveness
   ========================================================= */
:root{
  --refresh-bg:#111827;
  --refresh-panel:rgba(255,255,255,.88);
  --refresh-panel-solid:#fffaf0;
  --refresh-border:rgba(255,255,255,.42);
  --refresh-shadow:0 24px 70px rgba(15,23,42,.22);
  --refresh-red:#e10600;
  --refresh-gold:#ffd84d;
  --refresh-green:#098f58;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  min-height:100svh;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,216,77,.35), transparent 34%),
    radial-gradient(circle at 85% 8%, rgba(225,6,0,.22), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(9,143,88,.22), transparent 34%),
    linear-gradient(145deg,#1f1209 0%,#4f160f 42%,#111827 100%) !important;
}

.mobile-frame{
  width:min(100%, 1480px) !important;
  margin:0 auto !important;
  padding:clamp(8px,2vw,20px) !important;
  border-radius:clamp(18px,3vw,36px) !important;
  background:linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.06)) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:var(--refresh-shadow) !important;
}
.mobile-screen{
  width:100% !important;
  min-height:calc(100svh - 20px) !important;
  overflow:hidden !important;
  border-radius:clamp(16px,2.4vw,30px) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,250,240,.96)),
    var(--mobile-screen,#f7f3eb) !important;
  border:1px solid rgba(255,255,255,.52) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65) !important;
}
.app{
  width:100% !important;
  max-width:100% !important;
  padding:clamp(10px,2vw,20px) !important;
}

.topbar,
.card,
.proDropdown,
.investorDropdown{
  background:var(--refresh-panel) !important;
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(122,68,24,.18) !important;
  box-shadow:0 12px 34px rgba(17,24,39,.10) !important;
}
.topbar{
  position:sticky !important;
  top:max(8px,var(--safe-top)) !important;
  z-index:50 !important;
  border-radius:24px !important;
  align-items:stretch !important;
}
.brand{
  min-width:0 !important;
}
.winnerLogo{
  max-width:clamp(50px,13vw,82px) !important;
  height:auto !important;
  flex:0 0 auto !important;
}
.googleLogo{
  font-size:clamp(20px,5.6vw,42px) !important;
  line-height:1 !important;
  white-space:nowrap !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.proDropdown summary{
  min-height:48px !important;
  border-radius:18px !important;
  touch-action:manipulation;
}
.topbar-actions,
.investorTopGrid,
.investorEntryRow,
.mainTableControls,
.allPossControls,
.playerModeRow{
  max-width:100% !important;
}
button,
select,
input{
  min-height:44px;
  font-size:16px !important;
  touch-action:manipulation;
}
button,
.ctl select,
.investorEntryRow input,
.investorEntryRow select,
#investorTotalWon{
  border-radius:14px !important;
}
button:active{ transform:translateY(1px); }

.layout,
.mobile-frame .layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:clamp(10px,1.6vw,18px) !important;
  width:100% !important;
  max-width:100% !important;
}
.colLeft,.colRight,.layout > *{
  min-width:0 !important;
  max-width:100% !important;
}
.card-head{
  gap:10px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
}
.card-head h2{
  font-size:clamp(17px,4vw,24px) !important;
}

.mainTableWrap,
.investorTableWrap,
.matrix-wrap,
.tofesBody{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.mainTableWrap::after,
.investorTableWrap::after{
  content:"Swipe sideways if needed";
  display:block;
  padding:6px 4px 0;
  font-size:11px;
  color:#7a5540;
  text-align:center;
}
.mainTable,
.resultGameTable,
.investorTable{
  max-width:100% !important;
}
.mainTable th,
.mainTable td,
.investorTable th,
.investorTable td{
  white-space:normal !important;
  word-break:break-word !important;
}
.tickets,
.allPossTickets,
.generatedTicketsTwo{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)) !important;
  gap:10px !important;
}
.ticket{
  border-radius:16px !important;
  overflow:hidden !important;
}
.ticketZoomCtl{
  width:100% !important;
  justify-content:space-between !important;
  margin-left:0 !important;
}
.ticketZoom{
  width:min(54vw,230px) !important;
  max-width:100% !important;
}
.scrollButtons{
  right:max(10px,env(safe-area-inset-right,0px)) !important;
  bottom:max(10px,var(--safe-bottom)) !important;
  z-index:200 !important;
}
.scrollButtons button{
  width:48px !important;
  height:48px !important;
  border-radius:999px !important;
  box-shadow:0 12px 24px rgba(17,24,39,.24) !important;
}

@media (max-width: 900px){
  .mobile-frame{
    min-height:100svh !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:transparent !important;
  }
  .mobile-screen{
    min-height:100svh !important;
    border-radius:0 !important;
    border:0 !important;
  }
  .layout,
  .mobile-frame .layout{
    display:flex !important;
    flex-direction:column !important;
  }
  .topbar{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    margin-bottom:10px !important;
  }
  .brand{
    justify-content:center !important;
    text-align:center !important;
  }
  .topControlsDropdown,
  .investorDropdown{
    width:100% !important;
  }
  .topbar-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    align-items:stretch !important;
  }
  .topbar-actions .ctl,
  .topbar-actions button,
  .topbar-actions select,
  .topbar-actions .totalCtl{
    width:100% !important;
    min-width:0 !important;
  }
  .investorTopGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .investorEntryRow{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .investorEntryRow input,
  .investorEntryRow select,
  .investorEntryRow button{
    width:100% !important;
  }
}

@media (max-width: 560px){
  .app{ padding:10px !important; }
  .topbar,
  .card,
  .proDropdown,
  .investorDropdown{
    border-radius:18px !important;
  }
  .topbar-actions,
  .investorTopGrid,
  .investorEntryRow{
    grid-template-columns:1fr !important;
  }
  .ctl,
  .totalCtl{
    font-size:12px !important;
  }
  .card{ padding:10px !important; }
  .card-head{
    padding-bottom:8px !important;
    margin-bottom:8px !important;
  }
  .mainTable{
    min-width:0 !important;
    width:100% !important;
    table-layout:fixed !important;
  }
  .mainTable .lineCol{ width:17% !important; }
  .mainTable .gameCol{ width:23% !important; }
  .mainTable .pickCol{ width:20% !important; }
  .mainTable th,
  .mainTable td{
    padding:6px 4px !important;
    font-size:12px !important;
  }
  .mainTable button,
  .mainTable select,
  .mainTable input{
    min-height:38px !important;
    font-size:14px !important;
  }
  .tickets,
  .allPossTickets,
  .generatedTicketsTwo{
    grid-template-columns:1fr !important;
  }
  .ticket th,
  .ticket td{
    font-size:12px !important;
  }
  .tofesPanel{
    width:100vw !important;
    height:100svh !important;
    max-width:100vw !important;
    max-height:100svh !important;
    border-radius:0 !important;
  }
  .tofesMagOverlay{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    left:8px !important;
    right:8px !important;
  }
}

@media (max-width: 380px){
  .googleLogo{ font-size:20px !important; }
  .winnerLogo{ max-width:48px !important; }
  .app{ padding:8px !important; }
  .card{ padding:8px !important; }
  .mainTable th,
  .mainTable td{ font-size:11px !important; padding:5px 3px !important; }
}


/* === FIX: make Fill/Form canvas keep the exact native form ratio on phones === */
.tofesBody{
  align-items:flex-start !important;
  justify-content:center !important;
}
.tofesCanvas{
  display:block !important;
  width:min(100%, 860px) !important;
  height:auto !important;
  aspect-ratio:1360 / 2048 !important;
  max-height:none !important;
  object-fit:contain !important;
  transform:none !important;
  transform-origin:top center !important;
}
@media (max-width:560px){
  .tofesBody{
    padding:6px !important;
    overflow:auto !important;
    touch-action:pan-x pan-y pinch-zoom !important;
  }
  .tofesCanvas{
    width:calc(100vw - 12px) !important;
    min-width:calc(100vw - 12px) !important;
    height:auto !important;
    aspect-ratio:1360 / 2048 !important;
  }
}


/* Voice/microphone system hidden for this version */
[id*="voice" i], [class*="voice" i],
[id*="mic" i], [class*="mic" i],
[id*="speech" i], [class*="speech" i],
button[aria-label*="voice" i],
button[aria-label*="microphone" i]{
  display:none !important;
}


/* Google100.net professional light redesign layer - original builder preserved */
:root{
  --g100-page:#f7fbff;
  --g100-surface:#ffffff;
  --g100-soft:#eef8ff;
  --g100-line:#d7e8f5;
  --g100-line-2:#b9d8ee;
  --g100-blue:#2f8be6;
  --g100-teal:#18b6aa;
  --g100-gold:#f0ad36;
  --g100-ink:#2f5578;
  --g100-muted:#6f8196;
  --g100-green:#22c55e;
  --g100-red:#ef4444;
  --g100-shadow:0 18px 44px rgba(77,129,171,.18);
}
html,body{
  background:
    radial-gradient(950px 560px at 7% 0%, #dff2ff 0%, rgba(223,242,255,0) 64%),
    radial-gradient(800px 520px at 94% 3%, #e2fff6 0%, rgba(226,255,246,0) 58%),
    radial-gradient(760px 430px at 48% 0%, #fff2cc 0%, rgba(255,242,204,0) 54%),
    linear-gradient(180deg,#ffffff,var(--g100-page)) !important;
  color:var(--g100-ink) !important;
}
.mobile-frame,.mobile-screen,.app{
  background:transparent !important;
  color:var(--g100-ink) !important;
  box-shadow:none !important;
}
.topbar,.card,.proDropdown,.modal-card,.ticket,.ticketCard,.control-panel,.panel{
  background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(242,250,255,.94)) !important;
  border:1px solid var(--g100-line) !important;
  border-radius:26px !important;
  box-shadow:var(--g100-shadow) !important;
  color:var(--g100-ink) !important;
}
.topbar{
  padding:18px !important;
  margin:12px !important;
}
.brand{
  gap:14px !important;
}
.winnerLogo{
  width:82px !important;
  height:82px !important;
  object-fit:contain !important;
  background:linear-gradient(145deg,#ffffff,#e5f5ff 55%,#fff2cd) !important;
  border:1px solid var(--g100-line-2) !important;
  border-radius:24px !important;
  padding:8px !important;
  box-shadow:0 16px 34px rgba(47,139,230,.18) !important;
}
.googleLogo,h1,h2,h3,.card-head h2{
  color:var(--g100-ink) !important;
  text-shadow:none !important;
}
.googleLogo{
  font-size:clamp(28px,5vw,52px) !important;
  letter-spacing:-.04em !important;
}
.card-head{
  background:linear-gradient(135deg,#ffffff,#eef8ff) !important;
  border-bottom:1px solid var(--g100-line) !important;
  color:var(--g100-ink) !important;
}
button,.ctl,.primaryBtn,.viewTicketsBtn,.topQuickBtn,.allPossToggleBtn,#clear,#fillForms{
  border:1px solid var(--g100-line-2) !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,#ffffff,#eaf7ff) !important;
  color:#2f6e9f !important;
  font-weight:900 !important;
  box-shadow:0 10px 22px rgba(47,139,230,.12) !important;
}
button:hover,.ctl:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(47,139,230,.18) !important;
}
select,input{
  border:1px solid var(--g100-line-2) !important;
  border-radius:14px !important;
  background:#ffffff !important;
  color:var(--g100-ink) !important;
  font-weight:800 !important;
}
.mainTableWrap,.resultTableWrap,.ticketsWrap,.statsWrap{
  background:#ffffff !important;
  border:1px solid var(--g100-line) !important;
  border-radius:22px !important;
  box-shadow:0 12px 28px rgba(90,120,170,.12) !important;
}
.mainTable,.resultTable,table{
  background:#ffffff !important;
  color:var(--g100-ink) !important;
}
th{
  background:linear-gradient(135deg,#eef8ff,#fff8e8) !important;
  color:#376184 !important;
  border-color:var(--g100-line) !important;
}
td{
  border-color:var(--g100-line) !important;
}
.mainSectionHeader,.sectionHeader,.sectionTitle{
  background:linear-gradient(135deg,#f7fcff,#eef8ff) !important;
  color:var(--g100-ink) !important;
  border-color:var(--g100-line) !important;
}
.pickBtn,.pick button,.mainPickBtn,.pickChoice,.mainPick{
  border-radius:14px !important;
  border:1px solid var(--g100-line-2) !important;
  background:#ffffff !important;
  color:#376184 !important;
  font-weight:950 !important;
}
.pickBtn.active,.mainPickBtn.active,.pickChoice.active,.mainPick.active,
.pickBtn.selected,.mainPickBtn.selected,.pickChoice.selected,.mainPick.selected{
  background:linear-gradient(135deg,#e2ffe8,#b9ffd0 58%,#f7fff9) !important;
  border-color:#34c26f !important;
  color:#0f7a3f !important;
  box-shadow:0 10px 22px rgba(48,186,98,.20), inset 0 0 0 2px rgba(255,255,255,.75) !important;
}
.required,.master,.red,.danger,.locked,
.pickBtn.required,.mainPickBtn.required,.pickChoice.required,.mainPick.required{
  background:linear-gradient(135deg,#ffd7d7,#ffb3b3 60%,#fff0f0) !important;
  border-color:#ea5c5c !important;
  color:#a51d1d !important;
}
.lightSwitch{
  background:linear-gradient(135deg,#ffffff,#eef8ff) !important;
  border:1px solid var(--g100-line-2) !important;
  color:var(--g100-ink) !important;
}
.lightSwitchTrack{
  background:linear-gradient(135deg,#dcffea,#bfffd5) !important;
  border:1px solid #38c878 !important;
}
.lightSwitch[aria-pressed="true"] .lightSwitchTrack,
.lightSwitch.on .lightSwitchTrack{
  background:linear-gradient(135deg,#ffe2e2,#ffc4c4) !important;
  border-color:#ef6d6d !important;
}
.mainModeTitle{
  color:var(--g100-ink) !important;
}
.mainModeHint,.smallMsg,.msg{
  color:var(--g100-muted) !important;
}
details > summary{
  background:linear-gradient(135deg,#ffffff,#eef8ff) !important;
  color:var(--g100-ink) !important;
  border-radius:20px !important;
}
*{
  scrollbar-color:#b9d8ee #f7fbff;
}


/* ==========================================================
   Google100.net Premium Command Center UI
   Full app redesign layer. Original app logic remains intact.
   ========================================================== */
:root{
  --g-bg:#edf3f8;
  --g-bg-2:#f7fafc;
  --g-card:#ffffff;
  --g-card-2:#f5f8fb;
  --g-panel:#e8f0f7;
  --g-ink:#253f56;
  --g-text:#315570;
  --g-muted:#70879a;
  --g-line:#cbdbe8;
  --g-line-2:#a9c3d7;
  --g-blue:#2e79bd;
  --g-blue-2:#dcebf7;
  --g-slate:#4c6478;
  --g-gold:#dfb24f;
  --g-gold-2:#fff1cc;
  --g-red:#d85c5c;
  --g-red-2:#ffe2e2;
  --g-shadow:0 18px 46px rgba(52,82,108,.17);
  --g-shadow-soft:0 9px 24px rgba(52,82,108,.12);
}
html,body{
  margin:0 !important;
  min-height:100% !important;
  background:
    radial-gradient(900px 540px at 10% -4%, #dcebf7 0%, rgba(220,235,247,0) 64%),
    radial-gradient(760px 520px at 92% -2%, #fff1cc 0%, rgba(255,241,204,0) 58%),
    linear-gradient(180deg,#f9fbfd 0%, var(--g-bg) 100%) !important;
  color:var(--g-ink) !important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}
.mobile-frame,.mobile-screen,.app{
  width:100% !important;
  max-width:1320px !important;
  min-height:auto !important;
  height:auto !important;
  margin:0 auto !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  color:var(--g-ink) !important;
}
.app{
  padding:18px !important;
}

/* Header */
.topbar{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
  align-items:stretch !important;
  overflow:visible !important;
  padding:20px !important;
  margin:0 0 16px !important;
  border:1px solid var(--g-line) !important;
  border-radius:30px !important;
  background:linear-gradient(135deg,#ffffff 0%,#f1f6fb 58%,#fff1cc 100%) !important;
  box-shadow:var(--g-shadow) !important;
  color:var(--g-ink) !important;
}
.brand{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  min-width:0 !important;
  overflow:visible !important;
}
.winnerLogo{
  width:78px !important;
  height:78px !important;
  flex:0 0 78px !important;
  object-fit:contain !important;
  padding:8px !important;
  border-radius:23px !important;
  border:1px solid var(--g-line-2) !important;
  background:linear-gradient(145deg,#ffffff,#e7f0f8) !important;
  box-shadow:var(--g-shadow-soft) !important;
}
.brand-text{
  min-width:0 !important;
  overflow:visible !important;
}
.googleLogo{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:visible !important;
  margin:0 !important;
  padding:4px 8px 8px 0 !important;
  line-height:1.16 !important;
  font-size:clamp(26px,4.8vw,48px) !important;
  letter-spacing:-.025em !important;
  transform:none !important;
  text-shadow:none !important;
}

/* Quick controls live inside header, clean and compact */
.topControlsDropdown{
  width:100% !important;
  margin:0 !important;
  border:1px solid var(--g-line) !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
.topControlsDropdown > summary{
  border:0 !important;
  border-bottom:1px solid var(--g-line) !important;
  border-radius:0 !important;
  background:linear-gradient(135deg,#f8fbfd,#eaf2f9) !important;
  color:var(--g-ink) !important;
  padding:13px 16px !important;
}
.topbar-actions{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr)) !important;
  gap:10px !important;
  padding:14px !important;
}

/* Premium home */
.g100-premium-home{
  display:none;
}
.g100-premium-home.g100-screen-active{
  display:block;
}
.g100-hero-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:14px;
  padding:24px;
  border:1px solid var(--g-line);
  border-radius:30px;
  background:linear-gradient(135deg,#ffffff,#edf4fa 58%,#fff1cc);
  box-shadow:var(--g-shadow);
}
.g100-kicker{
  margin:0 0 8px;
  color:#596f82;
  font-size:12px;
  letter-spacing:.16em;
  font-weight:950;
  text-transform:uppercase;
}
.g100-hero-panel h2,
.g100-studio-card h2{
  margin:0;
  color:var(--g-ink) !important;
  font-size:clamp(30px,5vw,54px);
  letter-spacing:-.045em;
  line-height:1;
}
.g100-hero-panel p,
.g100-studio-card p{
  max-width:720px;
  margin:10px 0 0;
  color:var(--g-muted);
  font-weight:750;
  line-height:1.45;
}
.g100-hero-actions,
.g100-studio-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.g100-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;
}
.g100-dashboard-card{
  min-height:160px;
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  text-align:left;
  padding:20px !important;
  border:1px solid var(--g-line) !important;
  border-radius:28px !important;
  background:linear-gradient(135deg,#ffffff,#f5f8fb) !important;
  box-shadow:var(--g-shadow-soft) !important;
  color:var(--g-ink) !important;
}
.g100-dashboard-card:hover{
  background:linear-gradient(135deg,#ffffff,#edf5fb 65%,#fff1cc) !important;
}
.g100-card-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,#dcebf7,#ffffff);
  border:1px solid var(--g-line-2);
  color:#2e79bd;
  font-size:21px;
  font-weight:950;
}
.g100-dashboard-card strong{
  margin-top:10px;
  font-size:19px;
  font-weight:950;
}
.g100-dashboard-card small{
  margin-top:6px;
  color:var(--g-muted);
  font-weight:780;
  line-height:1.35;
}

/* Navigation — part of page, never floating on top of content */
.g100-app-nav{
  position:static !important;
  z-index:auto !important;
  display:grid;
  grid-template-columns:repeat(6,minmax(120px,1fr));
  gap:10px;
  margin:0 0 16px;
  padding:10px;
  border:1px solid var(--g-line);
  border-radius:28px;
  background:rgba(255,255,255,.84);
  box-shadow:var(--g-shadow-soft);
}
.g100-nav-btn{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  padding:14px !important;
  border-radius:20px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:var(--g-text) !important;
  box-shadow:none !important;
  text-align:left;
}
.g100-nav-btn strong{
  font-size:15px;
  font-weight:950;
}
.g100-nav-btn span{
  color:var(--g-muted);
  font-size:11px;
  font-weight:800;
}
.g100-nav-btn:hover{
  background:linear-gradient(135deg,#ffffff,#eaf2f9) !important;
  border-color:var(--g-line) !important;
  color:#2e79bd !important;
  transform:none !important;
}
.g100-nav-btn.active{
  background:linear-gradient(135deg,#dcebf7,#ffffff 66%,#fff1cc) !important;
  border-color:#9bbdd7 !important;
  color:#2e79bd !important;
  box-shadow:0 10px 24px rgba(46,121,189,.15) !important;
}

/* Screen routing */
[data-g100-screen]{
  display:none !important;
}
[data-g100-screen].g100-screen-active{
  display:block !important;
}
body[data-g100-screen="home"] .layout{
  display:none !important;
}
body[data-g100-screen="forms"] .layout{
  display:none !important;
}
body[data-g100-screen="builder"] .layout,
body[data-g100-screen="tickets"] .layout,
body[data-g100-screen="results"] .layout,
body[data-g100-screen="money"] .layout{
  display:block !important;
}
.g100-forms-studio{
  display:none;
}
.g100-forms-studio.g100-screen-active{
  display:block !important;
}
.g100-studio-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  padding:24px;
  border:1px solid var(--g-line);
  border-radius:30px;
  background:linear-gradient(135deg,#ffffff,#edf4fa 58%,#fff1cc);
  box-shadow:var(--g-shadow);
}
.g100-tool-feature-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;
}
.g100-tool-feature-grid article{
  padding:18px;
  border:1px solid var(--g-line);
  border-radius:24px;
  background:linear-gradient(135deg,#ffffff,#f5f8fb);
  box-shadow:var(--g-shadow-soft);
}
.g100-tool-feature-grid strong{
  display:block;
  color:var(--g-ink);
  font-size:18px;
  margin-bottom:6px;
}
.g100-tool-feature-grid span{
  color:var(--g-muted);
  font-weight:780;
}

/* Main layout */
.layout{
  display:grid !important;
  grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr) !important;
  gap:16px !important;
  align-items:start !important;
}
.colLeft,.colRight{
  min-width:0 !important;
}

/* Cards and panels */
.card,
.proDropdown,
.ticketModalDialog,
.tofesPanel,
.tofesMagOverlay{
  border:1px solid var(--g-line) !important;
  border-radius:28px !important;
  background:linear-gradient(135deg,#ffffff,#f5f8fb) !important;
  color:var(--g-ink) !important;
  box-shadow:var(--g-shadow) !important;
  overflow:hidden !important;
}
.card-head,
.tofesTop,
.tofesMagTitleBar{
  border-bottom:1px solid var(--g-line) !important;
  background:linear-gradient(135deg,#f9fbfd,#e9f1f8) !important;
  color:var(--g-ink) !important;
}
.card-head h2,
h1,h2,h3,
.mainModeTitle,
.tofesTitle,
.tofesMagTitle{
  color:var(--g-ink) !important;
  text-shadow:none !important;
}
details > summary{
  border:1px solid var(--g-line) !important;
  border-radius:20px !important;
  background:linear-gradient(135deg,#f9fbfd,#e9f1f8) !important;
  color:var(--g-ink) !important;
}

/* Universal controls */
button,
.ctl,
.topQuickBtn,
.viewTicketsBtn,
.allPossToggleBtn,
#clear,
#fillForms,
.tofesBtnSmall,
.tofesBtnIcon,
#tofesSave,
.precisionButtons button,
.precisionArrowGrid button,
#precisionArrowReset,
#precisionGlobalReset{
  border:1px solid var(--g-line-2) !important;
  border-radius:15px !important;
  background:linear-gradient(135deg,#ffffff,#e8f1f8) !important;
  color:#2a6798 !important;
  font-weight:950 !important;
  box-shadow:0 8px 18px rgba(52,82,108,.11) !important;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
button:hover,
.ctl:hover,
.topQuickBtn:hover,
.viewTicketsBtn:hover,
.allPossToggleBtn:hover,
.tofesBtnSmall:hover,
.tofesBtnIcon:hover,
.precisionButtons button:hover,
.precisionArrowGrid button:hover{
  background:linear-gradient(135deg,#ffffff,#edf4fa 62%,#fff1cc) !important;
  color:#2a6798 !important;
  border-color:#95b8d2 !important;
  transform:translateY(-1px) !important;
  box-shadow:0 12px 26px rgba(52,82,108,.16) !important;
}
button:active{
  transform:translateY(0) !important;
}
select,input{
  border:1px solid var(--g-line-2) !important;
  border-radius:13px !important;
  background:#ffffff !important;
  color:var(--g-ink) !important;
  font-weight:850 !important;
}
input[type="range"]{
  accent-color:var(--g-blue);
}

/* Tables, builder, picks */
.mainTableWrap,
.resultTableWrap,
.investorTableWrap{
  border:1px solid var(--g-line) !important;
  border-radius:22px !important;
  background:#ffffff !important;
  box-shadow:var(--g-shadow-soft) !important;
  overflow:auto !important;
}
table,
.mainTable,
.investorTable{
  background:#ffffff !important;
  color:var(--g-ink) !important;
}
th{
  background:linear-gradient(135deg,#e8f1f8,#fff1cc) !important;
  color:#2c536f !important;
  border-color:var(--g-line) !important;
  font-weight:950 !important;
}
td{
  border-color:var(--g-line) !important;
}
.mainTable button,
.pickBtn,
.mainPickBtn,
.mainPick,
.pickChoice{
  min-width:42px !important;
  min-height:38px !important;
  border-radius:13px !important;
  border:1px solid var(--g-line-2) !important;
  background:#ffffff !important;
  color:#2c536f !important;
  font-weight:950 !important;
}
.pickBtn.active,
.mainPickBtn.active,
.mainPick.active,
.pickChoice.active,
.pickBtn.selected,
.mainPickBtn.selected,
.mainPick.selected,
.pickChoice.selected{
  background:linear-gradient(135deg,#dcebf7,#ffffff) !important;
  border-color:#74a9d1 !important;
  color:#2a6798 !important;
  box-shadow:0 8px 18px rgba(46,121,189,.16) !important;
}
.required,
.master,
.red,
.danger,
.locked,
.pickBtn.required,
.mainPickBtn.required,
.pickChoice.required,
.mainPick.required{
  background:linear-gradient(135deg,#ffe2e2,#ffffff) !important;
  border-color:#dc8585 !important;
  color:#a73939 !important;
}
.mainModeControl{
  border:1px solid var(--g-line) !important;
  border-radius:22px !important;
  background:#ffffff !important;
  padding:10px !important;
}

/* Switches: blue/red, no green */
.lightSwitch,
.playerModeSwitch{
  border:1px solid var(--g-line-2) !important;
  border-radius:999px !important;
  background:#ffffff !important;
  color:var(--g-ink) !important;
}
.lightSwitchTrack{
  background:linear-gradient(135deg,#dcebf7,#ffffff) !important;
  border:1px solid #74a9d1 !important;
}
.lightSwitch[aria-pressed="true"] .lightSwitchTrack,
.lightSwitch.on .lightSwitchTrack{
  background:linear-gradient(135deg,#ffe2e2,#ffffff) !important;
  border-color:#dc8585 !important;
}

/* Tickets */
.tickets{
  gap:14px !important;
}
.ticket,
.ticketCard{
  border:1px solid var(--g-line) !important;
  border-radius:22px !important;
  background:linear-gradient(135deg,#ffffff,#f7fafc) !important;
  color:var(--g-ink) !important;
  box-shadow:var(--g-shadow-soft) !important;
}
.ticketZoomCtl{
  border:1px solid var(--g-line) !important;
  border-radius:18px !important;
  background:#ffffff !important;
  padding:8px 10px !important;
}

/* Money */
.investorDropdown{
  margin:0 0 16px !important;
}
.investorStat{
  border:1px solid var(--g-line) !important;
  border-radius:18px !important;
  background:linear-gradient(135deg,#ffffff,#f7fafc) !important;
  box-shadow:var(--g-shadow-soft) !important;
}

/* Forms workspace */
.tofesModal{
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(220,235,247,.76), transparent 62%),
    radial-gradient(740px 480px at 92% 0%, rgba(255,241,204,.70), transparent 58%),
    rgba(237,243,248,.96) !important;
  z-index:999999 !important;
}
.tofesModal:not(.g100-open-form-workspace)[aria-hidden="true"]{
  display:none !important;
}
.tofesModal.g100-open-form-workspace{
  display:flex !important;
  opacity:1 !important;
  pointer-events:auto !important;
  visibility:visible !important;
}
.tofesPanel{
  width:min(1200px,96vw) !important;
  max-height:92vh !important;
}
.tofesBody{
  background:linear-gradient(135deg,#f9fbfd,#edf3f8) !important;
}
.tofesCanvas{
  border:1px solid var(--g-line-2) !important;
  border-radius:22px !important;
  box-shadow:var(--g-shadow) !important;
}
.tofesMag,
.precisionLens{
  border:3px solid #74a9d1 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.84) !important;
  box-shadow:0 18px 42px rgba(46,121,189,.24), inset 0 0 0 6px rgba(255,255,255,.58) !important;
}
.tofesMagOverlay,
.tofesControls{
  border:1px solid var(--g-line) !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:var(--g-shadow) !important;
}
.tofesGroup{
  border:1px solid var(--g-line) !important;
  border-radius:18px !important;
  background:#ffffff !important;
  overflow:hidden !important;
  margin:10px 0 !important;
}
.tofesGroup summary{
  background:linear-gradient(135deg,#f9fbfd,#e9f1f8) !important;
  color:var(--g-ink) !important;
  font-weight:950 !important;
}
.tofesCounter{
  border:1px solid var(--g-line) !important;
  border-radius:16px !important;
  background:#ffffff !important;
  color:var(--g-ink) !important;
}
.g100-form-home-btn{
  margin-right:8px !important;
}

/* Calibration tools */
#precisionCalibrationGroup{
  border:1px solid var(--g-line-2) !important;
  border-radius:22px !important;
  background:linear-gradient(135deg,#ffffff,#f5f8fb) !important;
  box-shadow:var(--g-shadow-soft) !important;
  padding:14px !important;
}
.precisionBox{
  border:1px solid var(--g-line) !important;
  border-radius:18px !important;
  background:#ffffff !important;
  box-shadow:0 8px 18px rgba(52,82,108,.09) !important;
}
.precisionTitle,
.precisionLabel{
  color:var(--g-ink) !important;
}
.precisionStatus{
  color:#2a6798 !important;
}
.precisionLens span{
  background:#ffffff !important;
  color:#2a6798 !important;
  border:1px solid var(--g-line-2) !important;
}
.precisionLens::before,
.precisionLens::after{
  background:#2e79bd !important;
}
#precisionColTop.precisionActive,
#precisionColMiddle.precisionActive,
#precisionColBottom.precisionActive,
#precisionRowLeft.precisionActive,
#precisionRowCenter.precisionActive,
#precisionRowRight.precisionActive,
#precisionFixAim.precisionActive{
  background:linear-gradient(135deg,#fff1cc,#e8f1f8) !important;
  color:var(--g-ink) !important;
  border:1px solid var(--g-line-2) !important;
}

/* Responsive */
@media(max-width:980px){
  .layout{
    grid-template-columns:1fr !important;
  }
  .g100-app-nav{
    grid-template-columns:repeat(3,1fr);
  }
}
@media(max-width:640px){
  .app{
    padding:10px !important;
  }
  .topbar{
    padding:14px !important;
    border-radius:24px !important;
  }
  .brand{
    gap:10px !important;
  }
  .winnerLogo{
    width:60px !important;
    height:60px !important;
    flex-basis:60px !important;
  }
  .googleLogo{
    font-size:clamp(20px,7vw,31px) !important;
    white-space:nowrap !important;
  }
  .g100-app-nav{
    grid-template-columns:repeat(2,1fr);
  }
  .g100-hero-panel,
  .g100-studio-card{
    padding:18px;
    border-radius:24px;
  }
}


/* ==========================================================
   Google100 premium refinement: reduce repetition + better studio
   ========================================================== */

/* Cleaner home: one message, one menu */
.g100-clean-home{
  min-height:180px;
  align-items:center;
}
.g100-clean-home p{
  max-width:760px;
  font-size:15px;
}
.g100-dashboard-grid,
.g100-hero-actions{
  display:none !important;
}

/* Menu is the single app navigation, not another dashboard */
.g100-app-nav{
  margin-top:0 !important;
  grid-template-columns:repeat(6,minmax(110px,1fr)) !important;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(242,247,251,.92)) !important;
  border-radius:26px !important;
}
.g100-nav-btn{
  min-height:72px;
  justify-content:center;
}
.g100-nav-btn strong{
  font-size:16px !important;
}
.g100-nav-btn span{
  font-size:12px !important;
}
.g100-nav-btn.active{
  background:linear-gradient(135deg,#eef5fb,#ffffff 62%,#fff4d7) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), 0 10px 22px rgba(46,121,189,.12) !important;
}
.g100-nav-btn:hover{
  background:linear-gradient(135deg,#ffffff,#eef5fb) !important;
}

/* Reduce notes / visual noise */
.g100-tool-feature-grid,
.g100-dashboard-card small,
.g100-hero-panel p + p{
  display:none !important;
}
.topControlsDropdown > summary strong,
.investorDropdown > summary strong{
  display:none !important;
}
.topControlsDropdown,
.investorDropdown{
  box-shadow:0 8px 22px rgba(52,82,108,.08) !important;
}

/* Better forms studio entry */
.g100-forms-clean{
  min-height:230px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(236,244,250,.96) 62%,rgba(255,244,215,.95)),
    radial-gradient(420px 260px at 90% 12%, rgba(46,121,189,.12), transparent 60%) !important;
}
.g100-forms-clean h2{
  max-width:780px;
}
.g100-forms-clean p{
  max-width:620px;
  font-size:15px;
}
.g100-studio-actions button{
  min-width:220px;
  min-height:52px;
}

/* Make form workspace feel like a premium studio */
.tofesModal.g100-open-form-workspace{
  padding:18px !important;
  align-items:center !important;
  justify-content:center !important;
}
.tofesPanel{
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  border-radius:30px !important;
  overflow:hidden !important;
  background:linear-gradient(135deg,#ffffff,#f4f8fb) !important;
}
.tofesTop{
  min-height:62px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 16px !important;
  background:linear-gradient(135deg,#ffffff,#eaf2f9 70%,#fff4d7) !important;
}
.tofesTitle{
  font-size:18px !important;
  letter-spacing:-.01em !important;
}
.tofesClose{
  margin-left:auto !important;
}
.tofesBody{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 330px !important;
  gap:14px !important;
  padding:14px !important;
  overflow:auto !important;
}
.tofesCanvas{
  width:100% !important;
  max-height:calc(92vh - 120px) !important;
  object-fit:contain !important;
  background:#ffffff !important;
}
.tofesMagOverlay{
  position:relative !important;
  inset:auto !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  max-height:calc(92vh - 120px) !important;
  overflow:auto !important;
  order:2 !important;
  border-radius:24px !important;
  box-shadow:0 12px 28px rgba(52,82,108,.13) !important;
}
.tofesMagTitleBar{
  position:sticky !important;
  top:0 !important;
  z-index:2 !important;
  min-height:48px !important;
}
.tofesControls{
  box-shadow:none !important;
  border:0 !important;
  background:transparent !important;
  padding:10px !important;
}
.tofesGroup{
  margin:8px 0 !important;
  border-radius:16px !important;
}
.tofesGroup summary{
  padding:11px 12px !important;
  font-size:13px !important;
}
.tofesGroupBody{
  padding:10px !important;
}
.tofesBtnGrid2,
.tofesBtnGrid3,
.precisionArrowGrid{
  gap:7px !important;
}
.tofesBtnSmall,
.tofesBtnIcon,
#tofesSave{
  min-height:38px !important;
  border-radius:13px !important;
}
.tofesMag{
  width:190px !important;
  height:190px !important;
  border-width:3px !important;
}

/* Calibration: grouped, cleaner, less scary */
#precisionCalibrationGroup{
  padding:12px !important;
  border-radius:22px !important;
}
.precisionBox{
  margin:8px 0 !important;
  padding:11px !important;
  border-radius:16px !important;
}
.precisionTitle{
  font-size:13px !important;
  margin-bottom:8px !important;
}
.precisionRow{
  gap:8px !important;
}
.precisionButtons{
  gap:7px !important;
}
.precisionButtons button,
.precisionArrowGrid button{
  min-height:38px !important;
  padding:9px 11px !important;
  font-size:12px !important;
}

/* Main app cards: more refined, less heavy */
.card,
.proDropdown{
  box-shadow:0 12px 30px rgba(52,82,108,.13) !important;
}
.card-head{
  padding-block:13px !important;
}
.card-head h2{
  font-size:20px !important;
}

/* Tickets look more premium */
.ticket,
.ticketCard{
  border-radius:20px !important;
  background:
    linear-gradient(135deg,#ffffff,#f7fafc),
    radial-gradient(240px 140px at 100% 0%, rgba(223,178,79,.16), transparent 60%) !important;
}
.ticketZoomCtl{
  background:linear-gradient(135deg,#ffffff,#f7fafc) !important;
}

/* Mobile studio */
@media(max-width:980px){
  .tofesBody{
    grid-template-columns:1fr !important;
  }
  .tofesMagOverlay{
    max-height:none !important;
  }
  .g100-app-nav{
    grid-template-columns:repeat(3,1fr) !important;
  }
}
@media(max-width:620px){
  .g100-app-nav{
    grid-template-columns:repeat(2,1fr) !important;
  }
  .g100-nav-btn{
    min-height:62px;
  }
  .g100-clean-home{
    min-height:140px;
  }
}


/* ==========================================================
   FORM VIEWER FIX — full form view on desktop and mobile
   ========================================================== */

/* Forms page button remains clean */
.g100-forms-clean{
  min-height:170px !important;
}

/* Opened form workspace should behave like the original full viewer,
   not a narrow split panel. */
.tofesModal.g100-open-form-workspace{
  position:fixed !important;
  inset:0 !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  padding:10px !important;
  overflow:hidden !important;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(220,235,247,.78), transparent 62%),
    radial-gradient(740px 480px at 92% 0%, rgba(255,241,204,.72), transparent 58%),
    rgba(237,243,248,.98) !important;
}

.tofesPanel{
  width:min(1500px,100%) !important;
  height:calc(100vh - 20px) !important;
  max-height:calc(100vh - 20px) !important;
  display:flex !important;
  flex-direction:column !important;
  border-radius:26px !important;
  overflow:hidden !important;
  background:linear-gradient(135deg,#ffffff,#f5f8fb) !important;
}

.tofesTop{
  flex:0 0 auto !important;
  min-height:58px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 14px !important;
  border-bottom:1px solid var(--g-line, #cbdbe8) !important;
  background:linear-gradient(135deg,#ffffff,#eaf2f9 70%,#fff4d7) !important;
}

.tofesBody{
  flex:1 1 auto !important;
  min-height:0 !important;
  display:block !important;
  position:relative !important;
  overflow:auto !important;
  padding:12px !important;
  background:linear-gradient(135deg,#f9fbfd,#edf3f8) !important;
}

/* Show the whole canvas/form. Do not crop it into a side layout. */
.tofesCanvas{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  max-height:none !important;
  object-fit:contain !important;
  margin:0 auto !important;
  border-radius:22px !important;
  background:#ffffff !important;
  box-shadow:0 14px 34px rgba(52,82,108,.15) !important;
}

/* Return controls/magnifier to floating tool panel so the form stays full-width. */
.tofesMagOverlay{
  position:absolute !important;
  right:16px !important;
  top:74px !important;
  bottom:16px !important;
  width:clamp(280px,28vw,390px) !important;
  max-width:calc(100vw - 32px) !important;
  height:auto !important;
  max-height:none !important;
  overflow:auto !important;
  z-index:5 !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(14px) !important;
  box-shadow:0 16px 42px rgba(52,82,108,.18) !important;
}

.tofesControls{
  padding:10px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.tofesMag{
  width:220px !important;
  height:220px !important;
  max-width:76vw !important;
  max-height:76vw !important;
}

/* Keep all tool groups visible and usable */
.tofesGroup,
#precisionCalibrationGroup{
  display:block !important;
  visibility:visible !important;
}
.tofesGroup summary{
  cursor:pointer !important;
}
.tofesBtnSmall,
.tofesBtnIcon,
#tofesSave,
.precisionButtons button,
.precisionArrowGrid button{
  min-height:40px !important;
}

/* Better-looking but not over-complicated controls */
.tofesNavRow,
.tofesZoomRow,
.tofesRow{
  gap:8px !important;
}
.tofesCounter{
  min-height:40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:14px !important;
  background:#ffffff !important;
}

/* Mobile: form full-width first, tools underneath so nothing covers the form */
@media(max-width:760px){
  .tofesModal.g100-open-form-workspace{
    padding:0 !important;
  }
  .tofesPanel{
    width:100vw !important;
    height:100vh !important;
    max-height:100vh !important;
    border-radius:0 !important;
  }
  .tofesTop{
    min-height:54px !important;
    padding:8px 10px !important;
  }
  .tofesTitle{
    font-size:16px !important;
  }
  .tofesBody{
    padding:8px !important;
    overflow:auto !important;
  }
  .tofesCanvas{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    border-radius:16px !important;
  }
  .tofesMagOverlay{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    max-height:none !important;
    margin-top:10px !important;
    border-radius:18px !important;
    box-shadow:0 10px 24px rgba(52,82,108,.14) !important;
  }
  .tofesMagTitleBar{
    position:sticky !important;
    top:0 !important;
  }
  .tofesControls{
    padding:8px !important;
  }
  .tofesBtnGrid2,
  .tofesBtnGrid3,
  .precisionArrowGrid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .tofesBtnSmall,
  .tofesBtnIcon,
  #tofesSave,
  .precisionButtons button,
  .precisionArrowGrid button{
    min-height:38px !important;
    padding:8px 9px !important;
    font-size:12px !important;
  }
}

/* Main app refinements outside the form */
.g100-app-nav{
  margin-bottom:18px !important;
}
.card,
.proDropdown{
  border-radius:26px !important;
}
.mainTableWrap,
.resultTableWrap,
.investorTableWrap{
  border-radius:22px !important;
}


/* ==========================================================
   MAGNIFIER / TOOLS DRAWER FIX
   Form stays full-width. Tools do not split the mobile screen.
   ========================================================== */

.g100-tools-drawer-toggle{
  margin-left:auto !important;
  min-width:92px !important;
  min-height:40px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#ffffff,#e8f1f8) !important;
  color:#2a6798 !important;
  border:1px solid var(--g-line-2, #a9c3d7) !important;
  font-weight:950 !important;
}

/* Desktop/tablet: tools float over the form, not beside it */
.tofesMagOverlay{
  position:absolute !important;
  right:16px !important;
  top:76px !important;
  bottom:auto !important;
  width:min(360px, calc(100vw - 32px)) !important;
  max-height:calc(100vh - 112px) !important;
  overflow:auto !important;
  z-index:20 !important;
  transform:translateX(calc(100% + 28px)) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:transform .22s ease, opacity .22s ease !important;
}

body.g100-tools-drawer-open .tofesMagOverlay{
  transform:translateX(0) !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* The form/canvas always uses the full viewer width */
.tofesBody{
  display:block !important;
  grid-template-columns:none !important;
}
.tofesCanvas{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
}

/* Mobile: tools become a bottom drawer overlay, not half the page */
@media(max-width:760px){
  .tofesBody{
    display:block !important;
    padding:8px !important;
    overflow:auto !important;
  }

  .tofesCanvas{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    border-radius:16px !important;
  }

  .tofesMagOverlay{
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    max-height:min(58vh, 520px) !important;
    margin:0 !important;
    border-radius:22px !important;
    transform:translateY(calc(100% + 18px)) !important;
    opacity:0 !important;
    pointer-events:none !important;
    z-index:1000001 !important;
  }

  body.g100-tools-drawer-open .tofesMagOverlay{
    transform:translateY(0) !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .tofesMagTitleBar{
    position:sticky !important;
    top:0 !important;
    z-index:2 !important;
  }

  .tofesMag{
    width:170px !important;
    height:170px !important;
    max-width:58vw !important;
    max-height:58vw !important;
  }

  .tofesControls{
    max-height:calc(58vh - 48px) !important;
    overflow:auto !important;
  }

  .g100-tools-drawer-toggle{
    margin-left:auto !important;
    min-width:78px !important;
    min-height:36px !important;
    padding:8px 11px !important;
    font-size:12px !important;
  }
}

/* Make the old hide/show buttons less confusing because the new Tools button controls the drawer */
#tofesHideMagBtn,
#tofesShowMagBtn{
  display:none !important;
}


/* ==========================================================
   FLOATING MAGNIFIER LENS FIX
   The actual magnifier follows the pointer over the form.
   Tool drawer stays separate and does not steal form space.
   ========================================================== */

#tofesMag{
  position:fixed !important;
  z-index:1000003 !important;
  width:210px !important;
  height:210px !important;
  left:16px;
  top:84px;
  pointer-events:none !important;
  opacity:0 !important;
  transform:scale(.96) !important;
  transition:opacity .12s ease, transform .12s ease !important;
  border:3px solid #74a9d1 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 18px 42px rgba(46,121,189,.30), inset 0 0 0 6px rgba(255,255,255,.65) !important;
}

#tofesMag.g100-floating-lens-active{
  opacity:1 !important;
  transform:scale(1) !important;
}

/* The drawer is for controls only. It should not reserve space for the lens. */
.tofesMagOverlay #tofesMag{
  position:fixed !important;
}

/* Keep the drawer compact so the form is usable. */
.tofesMagOverlay{
  padding-top:0 !important;
}

/* On small screens, make the floating lens smaller and offset away from finger. */
@media(max-width:760px){
  #tofesMag{
    width:150px !important;
    height:150px !important;
    border-width:2px !important;
  }

  .tofesControls{
    max-height:calc(58vh - 48px) !important;
  }
}

@media(max-width:420px){
  #tofesMag{
    width:128px !important;
    height:128px !important;
  }
}


/* ==========================================================
   CLEANUP: no duplicate Forms page, no Show Possibilities
   ========================================================== */
#g100FormsStudio,
.g100-forms-studio,
#g100OpenTofes,
#allPossToggleBtn,
.allPossToggleBtn{
  display:none !important;
}

.g100-app-nav .g100-nav-btn[data-g100-open-forms]{
  cursor:pointer;
}

/* Keep quick controls from behaving like navigation; make FILL/CLEAR look like builder actions. */
#fillForms,
#clear{
  background:linear-gradient(135deg,#ffffff,#e8f1f8) !important;
  color:#2a6798 !important;
}

/* ==========================================================
   MAGNIFIER POSITION FIX
   Keep lens close to pointer and inside viewport.
   ========================================================== */
#tofesMag{
  position:fixed !important;
  z-index:1000004 !important;
  pointer-events:none !important;
  opacity:0 !important;
  transform:translate3d(0,0,0) scale(.96) !important;
  transition:opacity .08s ease, transform .08s ease !important;
  max-width:none !important;
  max-height:none !important;
}
#tofesMag.g100-floating-lens-active{
  opacity:1 !important;
  transform:translate3d(0,0,0) scale(1) !important;
}
@media(max-width:760px){
  #tofesMag{
    width:132px !important;
    height:132px !important;
  }
}
@media(max-width:420px){
  #tofesMag{
    width:118px !important;
    height:118px !important;
  }
}


/* Final cleanup: no Forms menu, compact random test, closer magnifier */
.g100-app-nav{
  grid-template-columns:repeat(5,minmax(110px,1fr)) !important;
}
.g100-nav-btn[data-g100-open-forms],
#g100FormsStudio,
.g100-forms-studio,
#g100OpenTofes{
  display:none !important;
}
#randomFillBtn{
  background:linear-gradient(135deg,#fff7df,#e8f1f8) !important;
  border-color:#d7b866 !important;
  color:#7a5a14 !important;
}
#tofesMag{
  width:172px !important;
  height:172px !important;
}
@media(max-width:760px){
  .g100-app-nav{
    grid-template-columns:repeat(2,1fr) !important;
  }
  #tofesMag{
    width:120px !important;
    height:120px !important;
  }
}
@media(max-width:420px){
  #tofesMag{
    width:104px !important;
    height:104px !important;
  }
}


/* ==========================================================
   MAGNIFIER ALWAYS VISIBLE + DRAGGABLE TOOLS
   ========================================================== */

/* Lens is visible immediately when form workspace opens. */
.tofesModal.g100-open-form-workspace #tofesMag,
#tofesMag.g100-lens-always-on{
  position:fixed !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;
  z-index:1000005 !important;
  width:165px !important;
  height:165px !important;
  left:14px;
  top:72px;
  transform:none !important;
  border:3px solid #74a9d1 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 18px 42px rgba(46,121,189,.30), inset 0 0 0 6px rgba(255,255,255,.65) !important;
}

/* Tools panel floats above form and can be dragged by its title bar. */
.tofesMagOverlay{
  position:fixed !important;
  right:14px !important;
  top:74px !important;
  bottom:auto !important;
  left:auto;
  width:min(360px, calc(100vw - 28px)) !important;
  max-height:calc(100vh - 92px) !important;
  overflow:auto !important;
  z-index:1000004 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
}

.tofesMagTitleBar,
.tofesMagHandle{
  cursor:grab !important;
  user-select:none !important;
}

.tofesMagOverlay.g100-tools-dragging .tofesMagTitleBar,
.tofesMagOverlay.g100-tools-dragging .tofesMagHandle{
  cursor:grabbing !important;
}

/* Keep the drawer script from hiding tools. */
body.g100-tools-drawer-open .tofesMagOverlay,
.tofesModal.g100-open-form-workspace .tofesMagOverlay{
  transform:none !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* The form stays full width behind the floating tools. */
.tofesBody{
  display:block !important;
  grid-template-columns:none !important;
}

.tofesCanvas{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
}

/* Mobile: lens visible at top, tools draggable and not split with form. */
@media(max-width:760px){
  .tofesModal.g100-open-form-workspace #tofesMag,
  #tofesMag.g100-lens-always-on{
    width:118px !important;
    height:118px !important;
    top:62px;
    left:10px;
    border-width:2px !important;
  }

  .tofesMagOverlay{
    width:min(320px, calc(100vw - 16px)) !important;
    right:8px !important;
    top:188px !important;
    max-height:calc(100vh - 198px) !important;
    border-radius:20px !important;
  }
}

@media(max-width:420px){
  .tofesModal.g100-open-form-workspace #tofesMag,
  #tofesMag.g100-lens-always-on{
    width:104px !important;
    height:104px !important;
  }
}


/* Edge clamp fix: lens never disappears at the right/left side */
#tofesMag,
.tofesModal.g100-open-form-workspace #tofesMag,
#tofesMag.g100-lens-always-on{
  position:fixed !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;
  z-index:1000005 !important;
  width:150px !important;
  height:150px !important;
  max-width:none !important;
  max-height:none !important;
  transform:none !important;
  border-radius:999px !important;
  box-sizing:border-box !important;
}

@media(max-width:760px){
  #tofesMag,
  .tofesModal.g100-open-form-workspace #tofesMag,
  #tofesMag.g100-lens-always-on{
    width:112px !important;
    height:112px !important;
  }
}

@media(max-width:420px){
  #tofesMag,
  .tofesModal.g100-open-form-workspace #tofesMag,
  #tofesMag.g100-lens-always-on{
    width:98px !important;
    height:98px !important;
  }
}


/* FINAL overlay fix: magnifier/tools are body-level overlays, never clipped */
#tofesMag.g100-lens-always-on,
.tofesModal.g100-open-form-workspace ~ #tofesMag,
#tofesMag{
  position:fixed !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;
  z-index:2147483646 !important;
  transform:none !important;
  max-width:none !important;
  max-height:none !important;
  border:3px solid #2e79bd !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 18px 46px rgba(46,121,189,.32), inset 0 0 0 5px rgba(255,255,255,.7) !important;
  box-sizing:border-box !important;
}

.tofesMagOverlay{
  position:fixed !important;
  right:12px !important;
  top:78px !important;
  left:auto;
  bottom:auto;
  width:min(360px, calc(100vw - 24px)) !important;
  max-height:calc(100vh - 92px) !important;
  overflow:auto !important;
  z-index:2147483645 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
}

.tofesMagTitleBar{
  cursor:grab !important;
  user-select:none !important;
  touch-action:none !important;
}

.tofesMagOverlay.g100-tools-dragging .tofesMagTitleBar{
  cursor:grabbing !important;
}

.g100-drag-hint{
  margin-left:auto;
  font-size:11px;
  font-weight:950;
  color:#2e79bd;
  border:1px solid #a9c3d7;
  border-radius:999px;
  padding:4px 8px;
  background:#fff;
}

@media(max-width:760px){
  .tofesMagOverlay{
    width:min(310px, calc(100vw - 16px)) !important;
    top:190px !important;
    right:8px !important;
    max-height:calc(100vh - 202px) !important;
  }
}


/* Hide magnifier/tools everywhere except opened form workspace */
body:not(.dummy) > #tofesMag:not(.g100-lens-always-on),
#tofesMag:not(.g100-lens-always-on),
body:not(.dummy) > .tofesMagOverlay:not(.g100-tools-visible),
.tofesMagOverlay:not(.g100-tools-visible){
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#tofesMag.g100-lens-always-on{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}

.tofesMagOverlay.g100-tools-visible{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}


/* Tools panel: draggable + hide/show, default left side */
.tofesMagOverlay.g100-tools-visible{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  position:fixed !important;
  left:12px !important;
  right:auto !important;
  top:86px !important;
  bottom:auto !important;
  width:min(350px, calc(100vw - 24px)) !important;
  max-height:calc(100vh - 100px) !important;
  overflow:auto !important;
  z-index:2147483645 !important;
  transform:none !important;
}

.tofesMagOverlay.g100-tools-manual-position{
  left:var(--manual-left, auto);
}

.tofesMagTitleBar{
  cursor:move !important;
  user-select:none !important;
  touch-action:none !important;
  gap:8px !important;
}

.tofesMagOverlay.g100-tools-dragging .tofesMagTitleBar{
  cursor:grabbing !important;
}

.g100-tools-hide-btn{
  margin-left:auto !important;
  min-height:32px !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:950 !important;
  background:linear-gradient(135deg,#ffffff,#e8f1f8) !important;
  color:#2a6798 !important;
  border:1px solid #a9c3d7 !important;
}

.tofesMagOverlay.g100-tools-collapsed{
  width:auto !important;
  max-height:50px !important;
  overflow:hidden !important;
}

.tofesMagOverlay.g100-tools-collapsed .tofesBottom,
.tofesMagOverlay.g100-tools-collapsed .tofesControls,
.tofesMagOverlay.g100-tools-collapsed .tofesMsg{
  display:none !important;
}

#tofesHideMagBtn,
#tofesShowMagBtn{
  display:none !important;
}

@media(max-width:760px){
  .tofesMagOverlay.g100-tools-visible{
    left:8px !important;
    top:182px !important;
    width:min(310px, calc(100vw - 16px)) !important;
    max-height:calc(100vh - 194px) !important;
  }

  .tofesMagOverlay.g100-tools-manual-position{
    left:inherit !important;
  }
}


/* ==========================================================
   PLAIN PROFESSIONAL COLOR THEME
   No gradients. One calm app background. Softer eye-friendly colors.
   ========================================================== */

:root{
  --plain-bg:#e9eef3;
  --plain-surface:#f7f9fb;
  --plain-card:#ffffff;
  --plain-card-soft:#f2f5f8;
  --plain-line:#c7d2dc;
  --plain-line-strong:#9fb1c0;
  --plain-ink:#263847;
  --plain-text:#334b5f;
  --plain-muted:#6d7f8d;
  --plain-blue:#3f6f9f;
  --plain-blue-soft:#e3ebf3;
  --plain-gold:#b68a35;
  --plain-red:#b85a5a;
  --plain-shadow:0 10px 26px rgba(44,62,80,.13);
  --plain-shadow-soft:0 6px 16px rgba(44,62,80,.10);
}

/* Whole app background: one color only */
html,
body,
.mobile-frame,
.mobile-screen,
.app{
  background:#e9eef3 !important;
  background-image:none !important;
  color:var(--plain-ink) !important;
}

/* Remove gradients everywhere in the app */
*,
*::before,
*::after{
  background-image:none !important;
  text-shadow:none !important;
}

/* Main shell */
.app{
  box-shadow:none !important;
  border:0 !important;
}

/* Header / logo area */
.topbar{
  background:#f7f9fb !important;
  border:1px solid var(--plain-line) !important;
  box-shadow:var(--plain-shadow) !important;
}

.winnerLogo{
  background:#ffffff !important;
  border:1px solid var(--plain-line) !important;
  box-shadow:var(--plain-shadow-soft) !important;
}

.googleLogo{
  background:transparent !important;
  color:var(--plain-ink) !important;
}

/* Preserve Google colored letters but no gradient */
.googleLogo span{
  background:transparent !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
}

/* Navigation */
.g100-app-nav{
  background:#f7f9fb !important;
  border:1px solid var(--plain-line) !important;
  box-shadow:var(--plain-shadow-soft) !important;
}

.g100-nav-btn{
  background:#f7f9fb !important;
  border:1px solid transparent !important;
  color:var(--plain-text) !important;
  box-shadow:none !important;
}

.g100-nav-btn:hover{
  background:#edf2f6 !important;
  border-color:var(--plain-line) !important;
  color:var(--plain-blue) !important;
}

.g100-nav-btn.active{
  background:#e3ebf3 !important;
  border-color:var(--plain-line-strong) !important;
  color:var(--plain-blue) !important;
  box-shadow:var(--plain-shadow-soft) !important;
}

.g100-nav-btn span,
.g100-dashboard-card small,
.g100-hero-panel p,
.g100-studio-card p{
  color:var(--plain-muted) !important;
}

/* Home / studio panels */
.g100-hero-panel,
.g100-studio-card,
.g100-tool-feature-grid article,
.g100-dashboard-card{
  background:#f7f9fb !important;
  border:1px solid var(--plain-line) !important;
  color:var(--plain-ink) !important;
  box-shadow:var(--plain-shadow) !important;
}

.g100-kicker{
  color:var(--plain-blue) !important;
}

.g100-hero-panel h2,
.g100-studio-card h2{
  color:var(--plain-ink) !important;
}

/* Cards, dropdowns, modals */
.card,
.proDropdown,
.ticketModalDialog,
.tofesPanel,
.tofesMagOverlay,
.investorProfitCard{
  background:#ffffff !important;
  border:1px solid var(--plain-line) !important;
  color:var(--plain-ink) !important;
  box-shadow:var(--plain-shadow) !important;
}

.card-head,
.tofesTop,
.tofesMagTitleBar,
details > summary,
.topControlsDropdown > summary{
  background:#f2f5f8 !important;
  border-color:var(--plain-line) !important;
  color:var(--plain-ink) !important;
}

.card-head h2,
h1,h2,h3,
.mainModeTitle,
.tofesTitle,
.tofesMagTitle{
  color:var(--plain-ink) !important;
}

/* Top controls */
.topControlsDropdown,
.investorDropdown{
  background:#ffffff !important;
  border:1px solid var(--plain-line) !important;
  box-shadow:var(--plain-shadow-soft) !important;
}

.topbar-actions{
  background:#ffffff !important;
}

/* Buttons */
button,
.ctl,
.topQuickBtn,
.viewTicketsBtn,
.allPossToggleBtn,
#clear,
#fillForms,
#randomFillBtn,
.tofesBtnSmall,
.tofesBtnIcon,
#tofesSave,
.precisionButtons button,
.precisionArrowGrid button,
#precisionArrowReset,
#precisionGlobalReset,
.g100-tools-hide-btn{
  background:#f7f9fb !important;
  border:1px solid var(--plain-line-strong) !important;
  color:var(--plain-blue) !important;
  box-shadow:var(--plain-shadow-soft) !important;
}

button:hover,
.ctl:hover,
.topQuickBtn:hover,
.viewTicketsBtn:hover,
.allPossToggleBtn:hover,
.tofesBtnSmall:hover,
.tofesBtnIcon:hover,
.precisionButtons button:hover,
.precisionArrowGrid button:hover,
.g100-tools-hide-btn:hover{
  background:#edf2f6 !important;
  color:var(--plain-blue) !important;
  border-color:#8fa4b5 !important;
  box-shadow:var(--plain-shadow-soft) !important;
}

button:active{
  background:#dfe7ee !important;
}

#randomFillBtn{
  background:#f3eadb !important;
  border-color:#c6a765 !important;
  color:#72551d !important;
}

/* Inputs */
select,
input,
textarea{
  background:#ffffff !important;
  border:1px solid var(--plain-line-strong) !important;
  color:var(--plain-ink) !important;
}

input[type="range"]{
  accent-color:var(--plain-blue);
}

/* Tables */
.mainTableWrap,
.resultTableWrap,
.investorTableWrap{
  background:#ffffff !important;
  border:1px solid var(--plain-line) !important;
  box-shadow:var(--plain-shadow-soft) !important;
}

table,
.mainTable,
.investorTable{
  background:#ffffff !important;
  color:var(--plain-ink) !important;
}

th{
  background:#e3ebf3 !important;
  color:var(--plain-text) !important;
  border-color:var(--plain-line) !important;
}

td{
  background:#ffffff !important;
  border-color:var(--plain-line) !important;
}

/* Section rows and labels */
.sectionHeaderRow,
.sectionHeaderBadge,
.inlineSectionTag,
.rowLetterPill{
  background:#edf2f6 !important;
  color:var(--plain-text) !important;
  border-color:var(--plain-line) !important;
}

/* Pick buttons */
.mainTable button,
.pickBtn,
.mainPickBtn,
.mainPick,
.pickChoice,
.pickPill{
  background:#ffffff !important;
  border:1px solid var(--plain-line-strong) !important;
  color:var(--plain-text) !important;
  box-shadow:none !important;
}

.pickBtn.active,
.mainPickBtn.active,
.mainPick.active,
.pickChoice.active,
.pickBtn.selected,
.mainPickBtn.selected,
.mainPick.selected,
.pickChoice.selected,
.neonGreenPick{
  background:#e3ebf3 !important;
  border-color:#7796af !important;
  color:var(--plain-blue) !important;
  box-shadow:none !important;
}

.required,
.master,
.red,
.danger,
.locked,
.reqPick,
.neonRedPick,
.pickBtn.required,
.mainPickBtn.required,
.pickChoice.required,
.mainPick.required{
  background:#f3dddd !important;
  border-color:#c98787 !important;
  color:#8f3f3f !important;
  box-shadow:none !important;
}

/* Switches */
.lightSwitch,
.playerModeSwitch{
  background:#f7f9fb !important;
  border:1px solid var(--plain-line-strong) !important;
  color:var(--plain-ink) !important;
}

.lightSwitchTrack{
  background:#dfe7ee !important;
  border:1px solid var(--plain-line-strong) !important;
}

.lightSwitch[aria-pressed="true"] .lightSwitchTrack,
.lightSwitch.on .lightSwitchTrack{
  background:#f3dddd !important;
  border-color:#c98787 !important;
}

/* Tickets */
.ticket,
.ticketCard{
  background:#ffffff !important;
  border:1px solid var(--plain-line) !important;
  color:var(--plain-ink) !important;
  box-shadow:var(--plain-shadow-soft) !important;
}

.ticketZoomCtl{
  background:#f7f9fb !important;
  border:1px solid var(--plain-line) !important;
}

/* Money */
.investorStat{
  background:#f7f9fb !important;
  border:1px solid var(--plain-line) !important;
  box-shadow:var(--plain-shadow-soft) !important;
}

/* Forms / tools */
.tofesModal{
  background:#e9eef3 !important;
  background-image:none !important;
}

.tofesBody{
  background:#edf2f6 !important;
}

.tofesCanvas{
  background:#ffffff !important;
  border:1px solid var(--plain-line-strong) !important;
  box-shadow:var(--plain-shadow) !important;
}

.tofesMag,
#tofesMag,
#tofesMag.g100-lens-always-on{
  background:#ffffff !important;
  border:3px solid var(--plain-blue) !important;
  box-shadow:0 14px 34px rgba(44,62,80,.22) !important;
}

.tofesMagOverlay.g100-tools-visible,
.tofesControls,
.tofesGroup,
#precisionCalibrationGroup,
.precisionBox{
  background:#ffffff !important;
  border:1px solid var(--plain-line) !important;
  box-shadow:var(--plain-shadow-soft) !important;
}

.tofesGroup summary{
  background:#f2f5f8 !important;
  color:var(--plain-ink) !important;
}

.tofesCounter{
  background:#f7f9fb !important;
  border:1px solid var(--plain-line) !important;
  color:var(--plain-ink) !important;
}

/* Calibration active states */
#precisionColTop.precisionActive,
#precisionColMiddle.precisionActive,
#precisionColBottom.precisionActive,
#precisionRowLeft.precisionActive,
#precisionRowCenter.precisionActive,
#precisionRowRight.precisionActive,
#precisionFixAim.precisionActive{
  background:#e3ebf3 !important;
  border:1px solid var(--plain-line-strong) !important;
  color:var(--plain-blue) !important;
}

/* Remove any leftover decorative radial backgrounds */
[style*="gradient"]{
  background-image:none !important;
}


/* ==========================================================
   NEUTRAL SLATE THEME
   Removes the green cast completely.
   ========================================================== */

:root{
  --plain-bg:#dfe5eb;
  --plain-surface:#eef2f5;
  --plain-card:#ffffff;
  --plain-card-soft:#f3f6f8;
  --plain-line:#c2ccd5;
  --plain-line-strong:#98a9b7;
  --plain-ink:#243443;
  --plain-text:#324758;
  --plain-muted:#6c7c88;
  --plain-blue:#486b88;
  --plain-blue-soft:#dde6ee;
  --plain-shadow:0 10px 24px rgba(32,48,64,.12);
  --plain-shadow-soft:0 6px 16px rgba(32,48,64,.08);
}

/* Entire app background */
html,
body,
.mobile-frame,
.mobile-screen,
.app,
.tofesModal{
  background:#dfe5eb !important;
  background-image:none !important;
}

/* Panels/cards */
.card,
.proDropdown,
.ticket,
.ticketCard,
.ticketModalDialog,
.g100-hero-panel,
.g100-studio-card,
.g100-app-nav,
.tofesPanel,
.tofesMagOverlay,
.topbar{
  background:#f3f6f8 !important;
  border-color:#c2ccd5 !important;
  box-shadow:var(--plain-shadow) !important;
}

/* Strong white working areas */
.mainTableWrap,
.resultTableWrap,
.investorTableWrap,
.tofesCanvas,
table,
.mainTable,
.investorTable{
  background:#ffffff !important;
}

/* Header strips */
.card-head,
.tofesTop,
.tofesMagTitleBar,
.topControlsDropdown > summary,
details > summary,
th{
  background:#e7edf2 !important;
  color:#324758 !important;
  border-color:#c2ccd5 !important;
}

/* Buttons */
button,
.ctl,
.topQuickBtn,
.tofesBtnSmall,
.tofesBtnIcon,
.precisionButtons button,
.precisionArrowGrid button,
.g100-tools-hide-btn{
  background:#eef2f5 !important;
  border-color:#a5b3bf !important;
  color:#405d75 !important;
}

button:hover,
.ctl:hover{
  background:#e3e9ee !important;
  border-color:#8ea1b0 !important;
  color:#324758 !important;
}

button:active{
  background:#d8e0e7 !important;
}

/* Navigation active */
.g100-nav-btn.active{
  background:#dde6ee !important;
  border-color:#98a9b7 !important;
}

/* Tools panel */
.tofesMagOverlay.g100-tools-visible,
.tofesControls,
.tofesGroup,
#precisionCalibrationGroup,
.precisionBox{
  background:#f7f9fb !important;
}

/* Magnifier */
#tofesMag,
#tofesMag.g100-lens-always-on{
  border-color:#486b88 !important;
  background:#ffffff !important;
  box-shadow:0 14px 34px rgba(32,48,64,.22) !important;
}


/* ==========================================================
   ABSOLUTE NO GREEN THEME
   Neutral gray-blue only.
   ========================================================== */

html,
body,
.app,
.mobile-frame,
.mobile-screen,
.tofesModal{
  background:#d6dce2 !important;
  background-image:none !important;
}

/* All major containers */
.topbar,
.g100-app-nav,
.card,
.proDropdown,
.ticket,
.ticketCard,
.ticketModalDialog,
.g100-hero-panel,
.g100-studio-card,
.tofesPanel,
.tofesMagOverlay,
.topControlsDropdown,
.investorDropdown,
.tofesControls,
.tofesGroup,
#precisionCalibrationGroup,
.precisionBox{
  background:#f1f4f7 !important;
  background-image:none !important;
  border-color:#bcc7d1 !important;
  color:#263847 !important;
}

/* White work surfaces */
.mainTableWrap,
.resultTableWrap,
.investorTableWrap,
.mainTable,
.resultTable,
.investorTable,
.tofesCanvas,
table{
  background:#ffffff !important;
}

/* Headers */
.card-head,
.tofesTop,
.tofesMagTitleBar,
details > summary,
.topControlsDropdown > summary,
th{
  background:#e3e9ef !important;
  color:#324758 !important;
  border-color:#bcc7d1 !important;
}

/* Buttons */
button,
.ctl,
.topQuickBtn,
.tofesBtnSmall,
.tofesBtnIcon,
.precisionButtons button,
.precisionArrowGrid button,
.g100-tools-hide-btn{
  background:#edf2f6 !important;
  border:1px solid #a4b2be !important;
  color:#40576d !important;
}

button:hover,
.ctl:hover{
  background:#e2e8ee !important;
  border-color:#8ea0af !important;
}

button:active{
  background:#d7e0e8 !important;
}

/* Active nav */
.g100-nav-btn.active{
  background:#dde5ec !important;
  border-color:#95a7b6 !important;
}

/* Magnifier */
#tofesMag,
#tofesMag.g100-lens-always-on{
  background:#ffffff !important;
  border-color:#4a667f !important;
  box-shadow:0 12px 28px rgba(30,45,60,.22) !important;
}

/* Remove any gradient/radial leftovers everywhere */
*{
  background-image:none !important;
}


/* Tools hide/show behavior: hidden means completely gone except top button */
#tofesMag:not(.g100-lens-always-on),
.tofesMagOverlay:not(.g100-tools-visible){
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.g100-tools-top-toggle{
  margin-left:auto !important;
  display:none;
  align-items:center !important;
  justify-content:center !important;
  min-height:36px !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  background:#edf2f6 !important;
  border:1px solid #a4b2be !important;
  color:#40576d !important;
  font-weight:950 !important;
  font-size:12px !important;
}

.g100-tools-hide-btn{
  margin-left:auto !important;
  min-height:30px !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  background:#edf2f6 !important;
  border:1px solid #a4b2be !important;
  color:#40576d !important;
  font-weight:950 !important;
}


/* Reliable Tools show/hide override */
#tofesMag:not(.g100-lens-always-on),
.tofesMagOverlay:not(.g100-tools-visible){
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#tofesMag.g100-lens-always-on{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}

.tofesMagOverlay.g100-tools-visible{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}


/* Final reliable master Tools button */
.g100-master-tools-toggle{
  display:none !important;
  position:fixed !important;
  top:12px !important;
  right:72px !important;
  z-index:2147483647 !important;
  min-height:38px !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  background:#edf2f6 !important;
  border:1px solid #a4b2be !important;
  color:#40576d !important;
  font-weight:950 !important;
  font-size:13px !important;
  box-shadow:0 6px 16px rgba(32,48,64,.18) !important;
}

.g100-master-tools-toggle.g100-master-tools-toggle-visible{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#tofesMag:not(.g100-lens-always-on),
.tofesMagOverlay:not(.g100-tools-visible){
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#tofesMag.g100-lens-always-on{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}

.tofesMagOverlay.g100-tools-visible{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

#g100PanelHideTools{
  margin-left:auto !important;
  min-height:30px !important;
  padding:5px 10px !important;
  border-radius:999px !important;
}


/* Small floating Tools toggle: icon only, does not cover top buttons */
.g100-master-tools-toggle{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  padding:0 !important;
  border-radius:999px !important;
  top:14px !important;
  right:14px !important;
  font-size:16px !important;
  line-height:1 !important;
  box-shadow:0 4px 12px rgba(32,48,64,.18) !important;
  z-index:2147483647 !important;
}

@media(max-width:760px){
  .g100-master-tools-toggle{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    top:10px !important;
    right:10px !important;
    font-size:14px !important;
  }
}


/* Replace useless Tools icon with one working Show/Hide Tools toggle */
#g100ToolsDrawerToggle,
.g100-tools-drawer-toggle{
  display:none !important;
}

.g100-master-tools-toggle{
  width:auto !important;
  height:34px !important;
  min-width:96px !important;
  min-height:34px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  top:12px !important;
  right:12px !important;
  font-size:12px !important;
  font-weight:950 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  background:#edf2f6 !important;
  border:1px solid #a4b2be !important;
  color:#40576d !important;
  box-shadow:0 4px 12px rgba(32,48,64,.18) !important;
  z-index:2147483647 !important;
}

@media(max-width:760px){
  .g100-master-tools-toggle{
    width:auto !important;
    height:32px !important;
    min-width:88px !important;
    min-height:32px !important;
    top:8px !important;
    right:8px !important;
    padding:0 10px !important;
    font-size:11px !important;
  }
}

/* User update: Total combos moved from Quick Controls to Main Table controls beside ON/OFF switch */
.mainTableControls .mainTableTotalCombos{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 0 8px !important;
  padding:8px 10px !important;
  min-height:42px !important;
  width:auto !important;
  flex:0 0 auto !important;
  border-radius:14px !important;
}
.mainTableControls .mainTableTotalCombos .totalCombosLabel{
  margin:0 !important;
  white-space:nowrap !important;
  line-height:1 !important;
}
.mainTableControls .mainTableTotalCombos .totalCombosNumWrap{
  min-width:52px !important;
  margin:0 !important;
  padding:4px 8px !important;
  text-align:center !important;
}
@media (max-width: 520px){
  .mainTableControls .mainTableTotalCombos{
    margin-left:0 !important;
  }
}


/* Generated Tickets: show the full list vertically and label each ticket by number */
#tickets{
  max-height:none !important;
  overflow:visible !important;
  align-content:start !important;
}
#tickets .ticketNumberLabel{
  display:inline-block;
  font-size:12px !important;
  line-height:1.05;
  font-weight:900 !important;
  color:#dc2626 !important;
  letter-spacing:.01em;
}
#tickets .ticketWrap{
  break-inside:avoid;
}

/* User update: Correct games moved from Quick Controls to Main Table controls beside Total combos */
.mainTableControls .mainTableCorrectGames{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 0 8px !important;
  padding:8px 10px !important;
  min-height:42px !important;
  width:auto !important;
  flex:0 0 auto !important;
  border-radius:14px !important;
}
.mainTableControls .mainTableCorrectGames .ctlLabel{
  margin:0 !important;
  white-space:nowrap !important;
  line-height:1 !important;
}
.mainTableControls .mainTableCorrectGames select{
  min-width:58px !important;
  height:34px !important;
}
@media (max-width: 520px){
  .mainTableControls .mainTableCorrectGames{
    margin-left:0 !important;
  }
}


/* User update: Winner Ticket Studio color mix + app footer */
.g100-hero-panel .winnerStudioTitle,
.winnerStudioTitle{
  display:inline-block !important;
  margin:0 !important;
  font-weight:1000 !important;
  letter-spacing:-0.035em !important;
  text-transform:none !important;
  background:linear-gradient(90deg,
    #e50914 0%,
    #ff8a00 22%,
    #ffe600 43%,
    #41a317 64%,
    #e50914 84%,
    #ff8a00 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  text-shadow:0 2px 10px rgba(229,9,20,.10) !important;
}

.g100-clean-home .g100-kicker + .winnerStudioTitle + p,
.g100-hero-panel.g100-clean-home p{
  display:none !important;
}

.g100-app-footer{
  margin:18px auto 6px !important;
  padding:14px 16px !important;
  text-align:center !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
  color:#6b3e00 !important;
  background:linear-gradient(90deg,rgba(229,9,20,.08),rgba(255,230,0,.18),rgba(65,163,23,.10),rgba(255,138,0,.12)) !important;
  border:2px solid rgba(242,140,24,.38) !important;
  border-radius:16px !important;
  box-shadow:0 8px 18px rgba(125,72,0,.10) !important;
}


/* === Improved calibration & magnifier button readability === */
.tofesControls button,
.calibrationBtn,
.magnifierBtn,
.zoomBtn,
button[title*="Calibration"],
button[title*="Magnifier"]{
  background:#f3f4f6 !important;
  color:#111827 !important;
  border:2px solid #d1d5db !important;
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
  font-weight:800 !important;
}

.tofesControls button:hover,
.calibrationBtn:hover,
.magnifierBtn:hover,
.zoomBtn:hover{
  background:#ffffff !important;
  color:#000000 !important;
  border-color:#9ca3af !important;
}

.tofesLock{
  background:#f9fafb !important;
  color:#111827 !important;
  border-color:#cbd5e1 !important;
}