:root{
  --bg:#f4f6fb;
  --panel:#ffffff;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --brand:#1f6feb;
  --brand2:#1256c7;
  --green:#16a34a;
  --danger:#dc2626;
  --shadow:0 14px 40px rgba(15,23,42,.10);
  --radius:18px;
  --radius-sm:14px;
  --focus:0 0 0 4px rgba(31,111,235,.22);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}

/*
  Mobile-first visual polish:
  - Soft image-like background via an embedded SVG (no external assets required)
  - Keeps content readable with low opacity and fixed positioning
*/
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 35%, #f4f6fb 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.16;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20900'%3E%3Cdefs%3E%3CradialGradient%20id='g1'%20cx='30%25'%20cy='20%25'%20r='75%25'%3E%3Cstop%20offset='0%25'%20stop-color='%231f6feb'/%3E%3Cstop%20offset='55%25'%20stop-color='%2316a34a'/%3E%3Cstop%20offset='100%25'%20stop-color='%23ffffff'/%3E%3C/radialGradient%3E%3ClinearGradient%20id='g2'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0%25'%20stop-color='%2393c5fd'/%3E%3Cstop%20offset='100%25'%20stop-color='%23bbf7d0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='1440'%20height='900'%20fill='url(%23g1)'/%3E%3Cpath%20d='M0%20620%20C220%20580%20420%20540%20640%20570%20C860%20600%201040%20700%201260%20690%20C1340%20682%201400%20655%201440%20635%20L1440%20900%20L0%20900%20Z'%20fill='url(%23g2)'%20fill-opacity='.75'/%3E%3Cpath%20d='M0%20690%20C240%20750%20440%20790%20680%20760%20C920%20730%201080%20640%201260%20650%20C1340%20658%201400%20695%201440%20715%20L1440%20900%20L0%20900%20Z'%20fill='%23ffffff'%20fill-opacity='.55'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
a{color:inherit}

.container{max-width:1100px;margin:0 auto;padding:18px 16px 40px}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;
  background:rgba(255,255,255,.70);
  border:1px solid var(--line);
  border-radius:22px;
  backdrop-filter: blur(10px);
  box-shadow:0 10px 26px rgba(15,23,42,.07);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.2px}
.logoMark{
  width:34px;height:34px;border-radius:12px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%),
              linear-gradient(135deg, rgba(31,111,235,.95), rgba(22,163,74,.92));
  box-shadow:0 10px 22px rgba(15,23,42,.14);
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);
  background:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}
.pill b{color:var(--ink)}
.hr{height:1px;background:var(--line);margin:12px 0}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:16px}

.btn{
  appearance:none;border:0;
  border-radius:14px;
  padding:11px 14px;
  font-weight:900;
  cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
  box-shadow:0 12px 22px rgba(31,111,235,.20);
}
.btn:hover{filter:brightness(1.03)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.danger{background:linear-gradient(135deg,#ef4444,var(--danger));box-shadow:0 12px 22px rgba(220,38,38,.16)}
.btn.small{padding:8px 10px;border-radius:12px;font-weight:850;font-size:13px}

input,select,textarea{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 12px;font-size:16px;background:#fff;outline:none}
input:focus,select:focus,textarea:focus{box-shadow:var(--focus);border-color:rgba(31,111,235,.55)}
label{display:block;font-size:12px;color:var(--muted);margin:6px 0}

.tablewrap{border:1px solid var(--line);border-radius:16px;overflow:auto;background:#fff}
table{width:100%;border-collapse:separate;border-spacing:0}

thead th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#64748b;background:#f8fafc;border-bottom:1px solid var(--line);padding:12px 14px}

tbody td{padding:12px 14px;border-bottom:1px solid #f1f5f9;vertical-align:top}

tbody tr:hover{background:#fbfdff}

.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:900}
.badge.green{border-color:#bbf7d0;background:#dcfce7;color:#166534}
.badge.gray{border-color:var(--line);background:#f8fafc;color:var(--muted)}

@media(max-width:900px){
  .container{padding:14px 12px 34px}
  .topbar{border-radius:18px}
}

/* iPhone / small mobile: prevent header buttons from wrapping.
   We reduce sizing and allow horizontal scroll in the action row. */
@media (max-width: 520px){
  .topbar{gap:10px;padding:8px 10px}
  .topbar .actions{
    display:flex;
    gap:8px;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  .topbar .actions::-webkit-scrollbar{display:none}
  .topbar .actions .btn{
    padding:8px 10px;
    border-radius:12px;
    font-size:13px;
    box-shadow:0 10px 18px rgba(15,23,42,.10);
    white-space:nowrap;
    flex:0 0 auto;
  }
}

/* === Scorer Page Button Size Enhancement === */
.score-btn,
.scoring-button,
button.score,
button.plus,
button.minus {
    min-width: 56px;
    min-height: 56px;
    font-size: 1.15rem;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 12px;
}

.score-controls {
    gap: 12px;
}

@media (max-width: 768px) {
    .score-btn,
    .scoring-button,
    button.score,
    button.plus,
    button.minus {
        min-width: 64px;
        min-height: 64px;
        font-size: 1.25rem;
    }
}