/* Bookmaker Portal — Betting Tools UI. Theme-safe: tokens on :root, dark-mode
   override, inherits text colour, no horizontal scroll, mobile-first. */
:root{
  --bkpt-accent:#1e9e5a;
  --bkpt-accent-2:#0f7a43;
  --bkpt-line:rgba(128,128,128,.28);
  --bkpt-card:rgba(128,128,128,.06);
  --bkpt-field-bg:rgba(255,255,255,.65);
  --bkpt-field-border:rgba(128,128,128,.45);
  --bkpt-muted:rgba(120,120,120,.95);
  --bkpt-hi:rgba(30,158,90,.12);
  --bkpt-danger:#d1495b;
  --bkpt-radius:.6rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --bkpt-line:rgba(255,255,255,.16);
    --bkpt-card:rgba(255,255,255,.05);
    --bkpt-field-bg:rgba(255,255,255,.06);
    --bkpt-field-border:rgba(255,255,255,.28);
    --bkpt-muted:rgba(190,190,190,.9);
    --bkpt-hi:rgba(30,158,90,.22);
  }
}

.bkp-tool{
  box-sizing:border-box;
  max-width:100%;
  margin:1.25rem 0;
  padding:1rem 1.1rem 1.1rem;
  border:1px solid var(--bkpt-line);
  border-radius:var(--bkpt-radius);
  background:var(--bkpt-card);
  color:inherit;
  font-size:1rem;
  line-height:1.4;
}
.bkp-tool *{box-sizing:border-box}
.bkp-tool-loading{min-height:2rem}
.bkp-tool-noscript{
  margin:1rem 0;padding:.8rem 1rem;border:1px dashed var(--bkpt-line);
  border-radius:var(--bkpt-radius);font-size:.9rem;opacity:.85;
}

/* Layout grid — collapses to one column on phones. */
.bkp-grid{display:grid;gap:.75rem;margin-bottom:.9rem}
.bkp-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bkp-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:560px){
  .bkp-grid-2,.bkp-grid-3{grid-template-columns:1fr}
}

/* Fields */
.bkp-field{min-width:0;display:flex;flex-direction:column;gap:.3rem}
.bkp-field label{font-size:.8rem;font-weight:600;opacity:.85}
.bkp-tool input,
.bkp-tool select{
  width:100%;
  max-width:100%;
  padding:.6rem .7rem;
  font-size:1rem; /* >=16px avoids iOS zoom */
  font-family:inherit;
  color:inherit;
  background:var(--bkpt-field-bg);
  border:1px solid var(--bkpt-field-border);
  border-radius:.45rem;
  -webkit-appearance:none;appearance:none;
}
.bkp-tool input[type="text"]{font-variant-numeric:tabular-nums}
.bkp-tool input:focus,
.bkp-tool select:focus{border-color:var(--bkpt-accent);outline:none}
.bkp-tool input:focus-visible,
.bkp-tool select:focus-visible,
.bkp-tool button:focus-visible{
  outline:2px solid var(--bkpt-accent);
  outline-offset:2px;
}

/* Buttons */
.bkp-btn{
  font:inherit;font-weight:600;cursor:pointer;color:inherit;
  background:transparent;border:1px solid var(--bkpt-field-border);
  border-radius:.45rem;padding:.5rem .8rem;line-height:1;
}
.bkp-btn:hover{border-color:var(--bkpt-accent)}
.bkp-btn-add{color:var(--bkpt-accent-2);border-color:var(--bkpt-accent)}
.bkp-btn-rm{
  flex:0 0 auto;width:2.2rem;height:2.2rem;padding:0;
  font-size:1.2rem;line-height:1;color:var(--bkpt-danger);
}

/* Accumulator rows */
.bkp-acca-rows{display:flex;flex-direction:column;gap:.6rem;margin-bottom:.6rem}
.bkp-acca-row{display:flex;align-items:flex-end;gap:.5rem}
.bkp-acca-row .bkp-field{flex:1 1 auto;min-width:0}
.bkp-acca-actions{margin:.2rem 0 .9rem}

/* Inline hint (validation / status) */
.bkp-hint{
  min-height:1.1em;margin:.2rem 0 .6rem;
  font-size:.82rem;color:var(--bkpt-danger);
}
.bkp-hint:empty{margin:0;min-height:0}

/* Output rows */
.bkp-out{display:flex;flex-direction:column;gap:.1rem;margin-top:.4rem}
.bkp-out-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.5rem .65rem;border-radius:.4rem;
  border-bottom:1px solid var(--bkpt-line);
}
.bkp-out-row:last-child{border-bottom:0}
.bkp-out-l{font-size:.9rem;opacity:.85}
.bkp-out-v{
  font-weight:700;font-size:1.05rem;
  font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap;
}
.bkp-out-row--hi{background:var(--bkpt-hi);border-bottom:0}
.bkp-out-row--hi .bkp-out-v{color:var(--bkpt-accent-2)}
@media (prefers-color-scheme:dark){
  .bkp-out-row--hi .bkp-out-v{color:var(--bkpt-accent)}
}

/* Footer microcopy */
.bkp-foot{
  margin:.9rem 0 0;padding-top:.7rem;
  border-top:1px solid var(--bkpt-line);
  font-size:.72rem;color:var(--bkpt-muted);
}