/* ============ SwingForm Genesis brand ============ */
  .sfg-app{
    --sfg-royal:#002366;      /* Royal Blue — command / headers / active */
    --sfg-sovereign:#2451A0;  /* Sovereign Blue — bright accent */
    --sfg-navy:#0F2340;       /* Midnight Navy — panels */
    --sfg-navy-2:#16305A;     /* raised navy surface */
    --sfg-onyx:#0A1830;       /* deepest backdrop */
    --sfg-gold:#C9A84C;       /* Benchmark Gold */
    --sfg-gold-soft:#E2C06A;  /* Strike Gold */
    --sfg-platinum:#F4F2EE;   /* Platinum — primary text */
    --sfg-platinum-dim:#AEB6C6;
    --sfg-ink:#081326;        /* input / shot base */
    --sfg-line:rgba(201,168,76,.28);
    --sfg-line-soft:rgba(244,242,238,.10);
    --sfg-good:#4FC98A;
    --sfg-bad:#E2603F;
    /* legacy aliases still referenced below */
    --sfg-blue:#002366;
    --sfg-blue-2:#2451A0;
    --sfg-paper:#0F2340;
    --sfg-panel:#0F2340;
    --sfg-panel-2:#16305A;
    --sfg-text:#F4F2EE;
    --sfg-text-dim:#AEB6C6;
    --sfg-r:14px;
    font-family:'Cormorant Garamond',Georgia,serif !important;
    color:#F4F2EE !important;
    background:#0A1830 !important;      /* solid Midnight-Onyx backdrop */
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    max-width:900px;margin:0 auto;padding:18px 14px 80px !important;
    border-radius:16px;
    font-size:110%;                     /* +10% global type scale */
    -webkit-text-size-adjust:100%;
  }
  /* Ensure the app and its header fill the width inside LMS/dashboard columns */
  .sfg-app.sfg-app.sfg-app .sfg-head{width:100% !important;box-sizing:border-box !important;display:block !important}
  /* Hard containment: nothing inside may widen the page on mobile; wide grids scroll internally */
  .sfg-app.sfg-app.sfg-app{overflow-x:hidden !important}
  .sfg-app.sfg-app.sfg-app .sfg-scroll{overflow-x:auto !important;max-width:100% !important}
  .sfg-app.sfg-app.sfg-app *{max-width:100%}
  .sfg-app.sfg-app.sfg-app table.sfg-grid,
  .sfg-app.sfg-app.sfg-app table.drill-grid{max-width:none}
  /* Headings & labels use Cinzel; condensed labels use Barlow Condensed */
  .sfg-app.sfg-app .sfg-title,
  .sfg-app.sfg-app .sfg-badge,
  .sfg-app.sfg-app .sfg-phase-head h2,
  .sfg-app.sfg-app .kpi .v,
  .sfg-app.sfg-app .grad-band .st{font-family:'Cinzel',Georgia,serif !important}
  .sfg-app.sfg-app .sfg-kicker,
  .sfg-app.sfg-app .sfg-tab,
  .sfg-app.sfg-app .sfg-sec h3,
  .sfg-app.sfg-app .sfg-field label,
  .sfg-app.sfg-app .kpi .l,
  .sfg-app.sfg-app .prog-table th,
  .sfg-app.sfg-app .sfg-grid thead th,
  .sfg-app.sfg-app .sfg-btn{font-family:'Barlow Condensed',sans-serif !important}
  /* ===== Theme guard: force palette regardless of host cascade ===== */
  .sfg-app.sfg-app.sfg-app{color:#F4F2EE !important;-webkit-text-fill-color:#F4F2EE !important}
  .sfg-app.sfg-app .sfg-title,
  .sfg-app.sfg-app .sfg-tab,
  .sfg-app.sfg-app .drill-label,
  .sfg-app.sfg-app .sfg-btn.ghost,
  .sfg-app.sfg-app .prog-table td,
  .sfg-app.sfg-app .sfg-grid tbody td.club,
  .sfg-app.sfg-app .grad-band .st{color:#F4F2EE !important;-webkit-text-fill-color:#F4F2EE !important}
  /* dim/secondary text */
  .sfg-app.sfg-app .sfg-sub,
  .sfg-app.sfg-app .sfg-note,
  .sfg-app.sfg-app .sfg-field label,
  .sfg-app.sfg-app .drill-clubs,
  .sfg-app.sfg-app .drill-title .cnt,
  .sfg-app.sfg-app .sfg-save-hint,
  .sfg-app.sfg-app .sfg-foot,
  .sfg-app.sfg-app .kpi .l,
  .sfg-app.sfg-app .prog-table th,
  .sfg-app.sfg-app .grad-band .msg,
  .sfg-app.sfg-app .sfg-tab .num,
  .sfg-app.sfg-app .prog-none,
  .sfg-app.sfg-app .sfg-grid thead th{color:#AEB6C6 !important;-webkit-text-fill-color:#AEB6C6 !important}
  /* gold accents */
  .sfg-app.sfg-app .sfg-kicker,
  .sfg-app.sfg-app .sfg-sec h3,
  .sfg-app.sfg-app .kpi .v,
  .sfg-app.sfg-app .prog-pct,
  .sfg-app.sfg-app .sfg-grid tfoot td.total{color:#C9A84C !important;-webkit-text-fill-color:#C9A84C !important}
  /* KPI "big" numbers are platinum */
  .sfg-app.sfg-app .kpi.big .v{color:#F4F2EE !important;-webkit-text-fill-color:#F4F2EE !important}
  /* badge: royal-blue text on gold */
  .sfg-app.sfg-app .sfg-badge{color:#002366 !important;-webkit-text-fill-color:#002366 !important}
  /* active tab + primary button text */
  .sfg-app.sfg-app .sfg-tab.active{color:#F4F2EE !important;-webkit-text-fill-color:#F4F2EE !important}
  .sfg-app.sfg-app .sfg-btn.primary{color:#002366 !important;-webkit-text-fill-color:#002366 !important}
  /* shot states */
  .sfg-app.sfg-app .shot{color:#AEB6C6 !important;-webkit-text-fill-color:#AEB6C6 !important}
  .sfg-app.sfg-app .shot.hit{color:#4FC98A !important;-webkit-text-fill-color:#4FC98A !important}
  .sfg-app.sfg-app .shot.miss{color:#F0937A !important;-webkit-text-fill-color:#F0937A !important}
  /* Inputs & selects */
  .sfg-app.sfg-app input,
  .sfg-app.sfg-app select,
  .sfg-app.sfg-app .club-sel{
    color:#F4F2EE !important;-webkit-text-fill-color:#F4F2EE !important;
    background-color:#081326 !important;
  }
  .sfg-app.sfg-app .club-sel.swapped{color:#E2C06A !important;-webkit-text-fill-color:#E2C06A !important;background-color:#16305A !important}
  .sfg-app.sfg-app option{color:#0F2340 !important;-webkit-text-fill-color:#0F2340 !important;background:#F4F2EE !important}
  .sfg-app *{box-sizing:border-box}
  .sfg-app button{font-family:inherit}
  /* surface backgrounds hardcoded */
  .sfg-app.sfg-app .sfg-panel-card{background:#0F2340 !important}
  .sfg-app.sfg-app .sfg-tab{background:#0F2340 !important}
  .sfg-app.sfg-app .sfg-tab.active{background:#2451A0 !important}
  .sfg-app.sfg-app .sfg-field input{background:#0F2340 !important}
  .sfg-app.sfg-app .sfg-grid thead th,
  .sfg-app.sfg-app .sfg-grid tbody td.club,
  .sfg-app.sfg-app .sfg-grid tfoot td{background:#16305A !important}
  .sfg-app.sfg-app .drill-block{background:#0F2340 !important}
  .sfg-app.sfg-app .drill-title{background:#16305A !important}
  .sfg-app.sfg-app .kpi{background:#16305A !important}
  .sfg-app.sfg-app .shot{background:#081326 !important}
  .sfg-app.sfg-app .shot.hit{background:#0E3320 !important}
  .sfg-app.sfg-app .shot.miss{background:#331410 !important}
  .sfg-app.sfg-app .shot.unscored{background:rgba(226,192,106,.09) !important;border-color:rgba(226,192,106,.6) !important}
  .sfg-app.sfg-app .shot.unscored{color:rgba(226,192,106,.75) !important;-webkit-text-fill-color:rgba(226,192,106,.75) !important}
  .sfg-app.sfg-app .sfg-btn.primary{background:#C9A84C !important}

  /* header */
  .sfg-head{
    text-align:center;padding:30px 16px 24px;margin-top:14px;
    background:
      radial-gradient(120% 140% at 50% -20%, rgba(201,168,76,.14), transparent 60%),
      linear-gradient(180deg,var(--sfg-royal),#001A4D 55%,#0F2340);
    border:1px solid var(--sfg-line);border-radius:var(--sfg-r);
    position:relative;overflow:hidden;
  }
  .sfg-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
    background:linear-gradient(90deg,transparent,var(--sfg-gold),transparent)}
  .sfg-kicker{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--sfg-gold);font-weight:700}
  .sfg-title{font-size:clamp(22px,5vw,30px);font-weight:800;margin:8px 0 4px;letter-spacing:.01em}
  .sfg-sub{font-size:13px;color:var(--sfg-text-dim);max-width:520px;margin:0 auto}

  /* player bar */
  .sfg-player{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:16px 0 8px;
}

@media(max-width:700px){
  .sfg-player{
    grid-template-columns:1fr;
  }
}
  .sfg-field label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sfg-text-dim);margin:0 0 5px 2px;font-weight:700}
  .sfg-field input{
    width:100%;background:var(--sfg-panel);border:1px solid var(--sfg-line-soft);
    color:var(--sfg-text);border-radius:10px;padding:12px 13px;font-size:15px;outline:none;transition:border-color .15s
  }
  .sfg-field input:focus{border-color:var(--sfg-gold)}

  /* phase tabs */
  .sfg-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0 4px}
  .sfg-tab{
    flex:1 1 auto;min-width:88px;text-align:center;cursor:pointer;user-select:none;
    background:var(--sfg-panel);border:1px solid var(--sfg-line-soft);color:var(--sfg-text-dim);
    padding:11px 8px;border-radius:11px;font-size:12.5px;font-weight:700;letter-spacing:.02em;
    transition:.15s;position:relative
  }
  .sfg-tab .num{display:block;font-size:9px;letter-spacing:.16em;opacity:.7;margin-bottom:2px}
  .sfg-tab:hover{color:var(--sfg-text);border-color:var(--sfg-line)}
  .sfg-tab.active{background:linear-gradient(180deg,var(--sfg-blue-2),var(--sfg-blue));color:#fff;border-color:var(--sfg-gold)}
  .sfg-tab.done::after{content:"✓";position:absolute;top:6px;right:9px;font-size:11px;color:var(--sfg-good);font-weight:800}

  /* panels */
  .sfg-panel-card{
    background:linear-gradient(180deg,var(--sfg-panel),var(--sfg-paper));
    border:1px solid var(--sfg-line);border-radius:var(--sfg-r);
    padding:18px 16px;margin-top:12px
  }
  .sfg-phase-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
  .sfg-phase-head h2{font-size:17px;margin:0;font-weight:800}
  .sfg-badge{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:var(--sfg-blue);background:var(--sfg-gold);padding:4px 9px;border-radius:99px}
  .sfg-note{font-size:12.5px;color:var(--sfg-text-dim);margin:6px 0 14px;line-height:1.5}

  /* section subhead */
  .sfg-sec{margin:20px 0 10px;display:flex;align-items:center;gap:10px}
  .sfg-sec h3{font-size:13px;margin:0;letter-spacing:.06em;text-transform:uppercase;color:var(--sfg-gold-soft);font-weight:800;white-space:nowrap}
  .sfg-sec .line{flex:1;height:1px;background:var(--sfg-line)}
  .drill-method{font-size:12.5px;line-height:1.55;color:var(--sfg-text-dim);
    background:rgba(201,168,76,.07);border:1px solid var(--sfg-line);
    border-left:3px solid var(--sfg-gold);border-radius:9px;padding:11px 14px;margin:0 0 14px}
  .drill-method strong{color:var(--sfg-gold-soft);font-weight:800}

  /* ===== scoring grid (Baseline & F&G) ===== */
  .sfg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;max-width:100%}
  table.sfg-grid{border-collapse:separate;border-spacing:0;width:100%;min-width:520px;font-size:13px}
  .sfg-grid th,.sfg-grid td{padding:0;text-align:center}
  .sfg-grid thead th{
    font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--sfg-text-dim);
    font-weight:800;padding:9px 4px;background:var(--sfg-panel-2);position:sticky;top:0
  }
  .sfg-grid thead th.club-h{text-align:left;padding-left:12px;min-width:120px;
    position:sticky;left:0;z-index:4;background:var(--sfg-panel-2)}
  .sfg-grid tbody td.club{
    text-align:left;padding:10px 12px;font-weight:700;font-size:13px;white-space:nowrap;
    background:var(--sfg-panel-2);border-bottom:1px solid var(--sfg-line-soft);
    position:sticky;left:0;z-index:3;box-shadow:2px 0 4px rgba(0,0,0,.25)
  }
  .sfg-grid thead th.club-h{box-shadow:2px 0 4px rgba(0,0,0,.25)}
  .sfg-grid tbody td.club small{display:block;font-weight:600;font-size:10px;color:var(--sfg-text-dim);letter-spacing:.04em}
  /* club swap selector */
  .club-sel{
    appearance:none;-webkit-appearance:none;
    background:var(--sfg-ink) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='6'%3E%3Cpath%20d='M0%200l5%206%205-6z'%20fill='%23C9A84C'/%3E%3C/svg%3E") no-repeat right 9px center;
    border:1px solid var(--sfg-line-soft);color:var(--sfg-text);
    border-radius:8px;padding:8px 26px 8px 10px;font-size:13px;font-weight:700;font-family:inherit;
    width:100%;max-width:160px;cursor:pointer;outline:none;transition:border-color .15s
  }
  .club-sel:focus{border-color:var(--sfg-gold)}
  .club-sel.swapped{border-color:var(--sfg-gold);color:var(--sfg-gold-soft);background-color:rgba(201,168,76,.08)}
  .drill-clubs .club-sel{max-width:120px;padding:6px 24px 6px 9px;font-size:12px;margin:0 3px 4px 0;display:inline-block;width:auto}
  .sfg-grid tbody td.cell{border-bottom:1px solid var(--sfg-line-soft);border-left:1px solid var(--sfg-line-soft)}
  .sfg-grid tbody td.res{border-bottom:1px solid var(--sfg-line-soft);border-left:1px solid var(--sfg-line);
    font-weight:800;font-size:14px;background:rgba(0,35,102,.35)}
  .sfg-grid tbody td.res .pct{font-size:11px;color:var(--sfg-text-dim);font-weight:700}

  /* shot toggle */
  .shot{
    width:38px;height:38px;margin:4px auto;border-radius:9px;cursor:pointer;user-select:none;
    display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;
    border:1.5px solid var(--sfg-line-soft);background:var(--sfg-ink);color:var(--sfg-text-dim);
    transition:transform .06s, background .12s, border-color .12s
  }
  .shot:active{transform:scale(.9)}
  /* not-yet-scored: amber dashed highlight so it stands out from a scored miss */
  .shot.unscored{border:1.5px dashed rgba(226,192,106,.6);background:rgba(226,192,106,.08)}
  .shot.unscored::before{content:"•";color:rgba(226,192,106,.7);font-size:14px}
  .shot.hit{background:linear-gradient(180deg,#123a1f,#0d2c18);border-color:var(--sfg-good);color:var(--sfg-good)}
  .shot.miss{background:linear-gradient(180deg,#3a1712,#2b110d);border-color:var(--sfg-bad);color:#f0937a}

  .sfg-grid tfoot td{padding:11px 6px;font-weight:800;font-size:12.5px;background:var(--sfg-panel-2);border-top:1px solid var(--sfg-line)}
  .sfg-grid tfoot td.club{text-align:left;padding-left:12px;color:var(--sfg-gold-soft);text-transform:uppercase;letter-spacing:.05em;font-size:11px}
  .sfg-grid tfoot td.total{color:var(--sfg-gold);font-size:15px}

  /* ===== drill checklist ===== */
  .drill-block{margin-bottom:16px;background:var(--sfg-panel);border:1px solid var(--sfg-line-soft);border-radius:12px;overflow:hidden}
  .drill-title{padding:11px 14px;font-weight:800;font-size:13px;background:var(--sfg-panel-2);
    display:flex;justify-content:space-between;align-items:center;cursor:pointer}
  .drill-title .cnt{font-size:11px;color:var(--sfg-text-dim);font-weight:700}
  .drill-clubs{font-size:11px;color:var(--sfg-text-dim);padding:8px 14px 2px;letter-spacing:.03em}
  .drill-list{padding:6px 8px 12px}
  .drill-row{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:9px}
  .drill-row:hover{background:rgba(255,255,255,.03)}
  .drill-check{width:24px;height:24px;flex:0 0 24px;border-radius:7px;border:1.5px solid var(--sfg-line-soft);
    background:var(--sfg-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:transparent;transition:.12s}
  .drill-check.on{background:var(--sfg-gold);border-color:var(--sfg-gold);color:var(--sfg-blue)}
  .drill-label{font-size:13.5px;font-weight:600;cursor:pointer;flex:1}
  .drill-label.on{color:var(--sfg-text-dim);text-decoration:line-through;text-decoration-color:var(--sfg-line)}

  /* ===== drill GRID (clubs on X, drills on Y, one checkbox per cell) ===== */
  .drill-grid-wrap{padding:6px 10px 12px}
  table.drill-grid{border-collapse:separate;border-spacing:0;width:100%;min-width:520px;font-size:12.5px}
  .drill-grid th,.drill-grid td{padding:0;text-align:center}
  .drill-grid thead th{
    font-size:10px;letter-spacing:.03em;font-weight:800;color:var(--sfg-text-dim);
    padding:8px 3px;background:var(--sfg-panel-2);position:sticky;top:0;vertical-align:bottom;
    min-width:52px;line-height:1.15
  }
  .drill-grid thead th.drill-h{text-align:left;padding-left:12px;min-width:150px;position:sticky;left:0;z-index:3}
  .drill-grid thead th small{display:block;font-weight:600;font-size:8.5px;color:var(--sfg-gold-soft);letter-spacing:.02em;margin-top:2px}
  .drill-grid tbody td.drill-name{
    text-align:left;padding:10px 12px;font-weight:700;font-size:12.5px;line-height:1.25;
    background:var(--sfg-panel-2);border-bottom:1px solid var(--sfg-line-soft);
    position:sticky;left:0;z-index:2;min-width:150px
  }
  .drill-grid tbody td.gcell{
    border-bottom:1px solid var(--sfg-line-soft);border-left:1px solid var(--sfg-line-soft);
    background:var(--sfg-navy)
  }
  .drill-grid tbody td.rowdone{color:var(--sfg-good);font-weight:800;font-size:12px;
    border-bottom:1px solid var(--sfg-line-soft);border-left:1px solid var(--sfg-line);background:rgba(0,35,102,.30)}
  .dchk{
    width:30px;height:30px;margin:5px auto;border-radius:8px;cursor:pointer;user-select:none;
    display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;
    border:1.5px dashed rgba(226,96,63,.55);background:rgba(226,96,63,.07);
    color:rgba(226,96,63,.6);
    transition:transform .06s, border-color .12s, color .12s, box-shadow .12s, background .12s
  }
  .dchk::before{content:"•";font-size:13px;line-height:1}
  .dchk:active{transform:scale(.88)}
  .dchk.on{
    background:var(--sfg-ink);
    border:1.5px solid var(--sfg-gold);
    color:var(--sfg-gold);
    box-shadow:inset 0 0 0 1px var(--sfg-gold), 0 0 0 1px rgba(201,168,76,.25)
  }
  .dchk.on::before{content:""}
  .drill-grid tfoot td{padding:9px 4px;font-weight:800;font-size:11px;background:var(--sfg-panel-2);
    border-top:1px solid var(--sfg-line);color:var(--sfg-gold-soft)}
  .drill-grid tfoot td.drill-name{text-transform:uppercase;letter-spacing:.05em;color:var(--sfg-gold-soft)}

  /* session completion banner */
  .sess-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    margin:2px 14px 12px;padding:9px 12px;border-radius:9px;font-size:12px;font-weight:700;
    border:1px solid var(--sfg-line-soft)}
  .sess-status.incomplete{background:rgba(226,96,63,.10);border-color:rgba(226,96,63,.4);color:#f0937a}
  .sess-status.complete{background:rgba(79,201,138,.10);border-color:rgba(79,201,138,.45);color:var(--sfg-good)}
  .sess-status .dot{font-size:14px}

  /* session date field inside cards */
  .sfg-datebar{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 14px}
  input[type="date"]{color-scheme:dark}

  /* time row */
  .sfg-time{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
  .sfg-time .sfg-field input{padding:10px 12px}

  /* ===== results / dashboard ===== */
  .kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 4px}
  @media(max-width:560px){.kpi-row{grid-template-columns:1fr 1fr}}
  .kpi{background:linear-gradient(180deg,var(--sfg-panel-2),var(--sfg-panel));border:1px solid var(--sfg-line);
    border-radius:12px;padding:15px 12px;text-align:center}
  .kpi .v{font-size:26px;font-weight:800;color:var(--sfg-gold);line-height:1}
  .kpi .l{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sfg-text-dim);margin-top:7px;font-weight:700}
  .kpi.big .v{color:#fff}
  .kpi .delta{font-size:12px;font-weight:800;margin-top:5px}
  .kpi .delta.up{color:var(--sfg-good)}.kpi .delta.down{color:var(--sfg-bad)}

  .prog-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:13px}
  .prog-table th,.prog-table td{padding:11px 10px;text-align:center;border-bottom:1px solid var(--sfg-line-soft)}
  .prog-table th{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--sfg-text-dim);font-weight:800}
  .prog-table td:first-child,.prog-table th:first-child{text-align:left;font-weight:700}
  .prog-table td .bar{height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:5px}
  .prog-table td .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sfg-gold),var(--sfg-gold-soft))}
  .prog-pct{font-weight:800;color:var(--sfg-gold)}
  .prog-none{color:var(--sfg-text-dim)}

  .grad-band{margin-top:16px;border-radius:12px;padding:16px;border:1px solid var(--sfg-line);text-align:center;
    background:linear-gradient(180deg,var(--sfg-panel-2),var(--sfg-panel))}
  .grad-band.pass{border-color:var(--sfg-good);background:linear-gradient(180deg,rgba(62,201,138,.12),var(--sfg-panel))}
  .grad-band .st{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
  .grad-band.pass .st{color:var(--sfg-good)}
  .grad-band .msg{font-size:12.5px;color:var(--sfg-text-dim);margin-top:6px}

  /* buttons */
  .sfg-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
  .sfg-btn{flex:1 1 160px;text-align:center;cursor:pointer;border:none;border-radius:12px;
    padding:15px 16px;font-size:14px;font-weight:800;letter-spacing:.02em;transition:.15s;text-decoration:none;display:inline-block}
  .sfg-btn.primary{background:linear-gradient(180deg,var(--sfg-gold-soft),var(--sfg-gold));color:var(--sfg-blue)}
  .sfg-btn.primary:hover{filter:brightness(1.06)}
  .sfg-btn.ghost{background:transparent;border:1.5px solid var(--sfg-line);color:var(--sfg-text)}
  .sfg-btn.ghost:hover{border-color:var(--sfg-gold)}
  .sfg-btn.danger{flex:0 0 auto;background:transparent;border:1.5px solid rgba(226,96,63,.4);color:#f0937a;font-size:13px;padding:13px 16px}

  .sfg-foot{text-align:center;font-size:11px;color:var(--sfg-text-dim);margin-top:26px;letter-spacing:.04em}
  .sfg-save-hint{font-size:11px;color:var(--sfg-text-dim);text-align:center;margin-top:10px;opacity:.8}
  .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
    background:var(--sfg-blue);border:1px solid var(--sfg-gold);color:#fff;padding:12px 20px;border-radius:99px;
    font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;z-index:99}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .hidden{display:none!important}

  /* ============ MOBILE: fit the drill grid full-width, no side-scroll ============ */
  @media (max-width:560px){
    /* maximise usable width: tighter app padding */
    .sfg-app.sfg-app.sfg-app{padding-left:8px !important;padding-right:8px !important}

    /* drill grid fills the screen; all 8 clubs fit, nothing scrolls sideways */
    .sfg-app.sfg-app.sfg-app .drill-grid-wrap{padding:6px 4px 12px}
    .sfg-app.sfg-app.sfg-app .drill-grid-wrap .sfg-scroll{overflow-x:visible !important}
    .sfg-app.sfg-app.sfg-app table.drill-grid{min-width:0 !important;width:100% !important;table-layout:fixed;font-size:10px}

    /* shrink the drill-name (Y-axis) column so club columns get the room */
    .sfg-app.sfg-app.sfg-app .drill-grid thead th.drill-h,
    .sfg-app.sfg-app.sfg-app .drill-grid tbody td.drill-name,
    .sfg-app.sfg-app.sfg-app .drill-grid tfoot td.drill-name{
      min-width:0 !important;width:74px;max-width:74px;padding:8px 5px !important;
      font-size:10px;line-height:1.2;white-space:normal;word-break:break-word
    }
    /* club header columns + cells shrink to fit */
    .sfg-app.sfg-app.sfg-app .drill-grid thead th{min-width:0 !important;padding:6px 1px !important;font-size:8.5px}
    .sfg-app.sfg-app.sfg-app .drill-grid tbody td.gcell,
    .sfg-app.sfg-app.sfg-app .drill-grid tbody td.rowdone{padding:0 !important}
    .sfg-app.sfg-app.sfg-app .drill-grid tfoot td{padding:6px 1px !important;font-size:8.5px}

    /* smaller checkboxes so 8 across fit comfortably */
    .sfg-app.sfg-app.sfg-app .dchk{width:24px;height:24px;margin:3px auto;font-size:12px;border-radius:6px}
    .sfg-app.sfg-app.sfg-app .dchk::before{font-size:10px}

    /* the club swap <select> in the header shrinks too */
    .sfg-app.sfg-app.sfg-app .drill-grid thead th .club-sel{
      max-width:100%;padding:4px 14px 4px 4px !important;font-size:9px;background-position:right 3px center
    }
    /* hide the tiny "Done" column label text to save width (numbers still show) */
    .sfg-app.sfg-app.sfg-app .drill-grid .rowdone{font-size:9px}
  }