/* ─── RESET ─────────────────────────────────────────────────────── */
#cn-app*,#cn-app*::before,#cn-app*::after{box-sizing:border-box;margin:0;padding:0;}
#cn-app{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;}
#cn-app button,#cn-app input,#cn-app select{font-family:inherit;font-size:inherit;}
#cn-app button{cursor:pointer;}

/* ─── TOKENS ─────────────────────────────────────────────────────── */
#cn-app{
  --g1:#163D24; --g2:#1E5430; --g3:#2A7A45;
  --ga:#E8F2EC; --gb:#BFD9CB; --gc:#F2F7F4;
  --surface:#FFFFFF; --border:#DDE8E1; --bg:#F2F6F3;
  --text:#0F1A0F; --muted:#617A6C; --dim:#9BBAA8;
  --danger:#C0392B; --danger-bg:#FFF0EF;
  --r1:8px; --r2:12px; --r3:16px; --rf:999px;
  --sh:0 2px 8px rgba(22,61,36,.10),0 1px 3px rgba(22,61,36,.06);
  --sh2:0 4px 20px rgba(22,61,36,.14),0 2px 6px rgba(22,61,36,.08);
}

/* ─── SHELL ──────────────────────────────────────────────────────── */
.cn-app-shell{background:var(--bg);min-height:100vh;display:flex;flex-direction:column;}
.cn-body{flex:1;display:flex;flex-direction:column;}

/* ─── HEADER ─────────────────────────────────────────────────────── */
.cn-hdr{background:var(--g1);height:58px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 1px 0 rgba(255,255,255,.07);}
.cn-brand{color:#fff;font-size:16px;font-weight:700;letter-spacing:-.3px;display:flex;align-items:center;gap:8px;}

/* ─── NAV ────────────────────────────────────────────────────────── */
.cn-topnav{display:flex;gap:2px;background:rgba(0,0,0,.25);border-radius:var(--rf);padding:3px;}
.cn-nav{display:flex;align-items:center;gap:6px;padding:7px 16px;border:none;border-radius:var(--rf);background:transparent;color:rgba(255,255,255,.6);font-size:13px;font-weight:500;transition:all .15s;}
.cn-ni{font-size:15px;line-height:1;}
.cn-nav:hover{background:rgba(255,255,255,.12);color:#fff;}
.cn-nav.on{background:rgba(255,255,255,.2);color:#fff;font-weight:700;}
.cn-botnav{display:none;}

/* ─── PAGES ──────────────────────────────────────────────────────── */
.cn-page{width:100%;max-width:740px;margin:0 auto;padding:28px 32px 48px;}
.cn-page.wide{max-width:1100px;padding:24px 32px 48px;}
.cn-page.center{text-align:center;}
.cn-page.book{max-width:680px;}
.cn-splash{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;gap:16px;color:var(--muted);font-size:14px;}
.cn-splash.err{color:var(--danger);}
.cn-spin{width:36px;height:36px;border:3px solid var(--gb);border-top-color:var(--g2);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ─── STEP BAR ───────────────────────────────────────────────────── */
.cn-steps{display:flex;align-items:center;gap:4px;margin-bottom:28px;}
.cn-step{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.cn-sn{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--border);color:var(--muted);flex-shrink:0;transition:background .2s;}
.cn-step.on  .cn-sn{background:var(--g1);color:#fff;}
.cn-step.done.cn-sn{background:var(--g3);color:#fff;}
.cn-step.done .cn-sn{background:var(--g3);color:#fff;}
.cn-sl{font-size:13px;color:var(--muted);white-space:nowrap;}
.cn-step.on .cn-sl{color:var(--g1);font-weight:700;}
.cn-step-line{flex:1;height:2px;background:var(--border);min-width:12px;border-radius:2px;}
.cn-step-line.done{background:var(--g3);}

/* ─── SECTION SPACING ────────────────────────────────────────────── */
.cn-section{margin-bottom:20px;}
.cn-section.no-gap{margin-bottom:0;}
.cn-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;display:block;}
.cn-hint{color:var(--dim);font-size:14px;text-align:center;padding:20px 0;}
.cn-empty{color:var(--muted);font-size:14px;text-align:center;padding:12px 0;}

/* ─── CHIPS ──────────────────────────────────────────────────────── */
.cn-chips{display:flex;gap:8px;flex-wrap:wrap;}
.cn-chip{padding:10px 18px;border-radius:var(--rf);border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:14px;font-weight:500;transition:all .15s;flex:1;text-align:center;min-width:0;}
.cn-chip:hover{border-color:var(--g3);color:var(--g2);}
.cn-chip.sel{border-color:var(--g1);background:var(--g1);color:#fff;}
.cn-chips.sm .cn-chip{padding:8px 14px;font-size:13px;}

/* ─── WEEK PICKER (shared by booking + calendar) ─────────────────── */
.cn-wk-pick,.cn-cal-shell{border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh);user-select:none;}
.cn-wk-nav{display:flex;align-items:center;justify-content:space-between;background:var(--g1);padding:10px 14px;}
.cn-wk-nav span,.cn-cal-shell .cn-wk-nav span{color:#fff;font-size:14px;font-weight:700;}
.cn-wk-arr{width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;line-height:1;padding-bottom:1px;transition:background .15s;}
.cn-wk-arr:hover{background:rgba(255,255,255,.28);}
.cn-wk-arr.off{opacity:.3;cursor:not-allowed;}
.cn-wk-days{display:flex;background:var(--g2);padding:6px 8px;gap:4px;touch-action:pan-y;}
.cn-wkd{flex:1;padding:8px 2px;text-align:center;border:none;background:transparent;border-radius:var(--r1);cursor:pointer;transition:background .15s;display:flex;flex-direction:column;align-items:center;gap:1px;}
.cn-wkd:hover:not(:disabled){background:rgba(255,255,255,.12);}
.cn-wkd.sel{background:rgba(255,255,255,.22);}
.cn-wkd.dim{opacity:.35;cursor:not-allowed;}
.cn-wkd-n{font-size:10px;color:rgba(255,255,255,.6);font-weight:600;text-transform:uppercase;}
.cn-wkd-d{font-size:16px;font-weight:700;color:rgba(255,255,255,.85);line-height:1.2;}
.cn-wkd-d.today{color:#fff;text-decoration:underline;}
.cn-wkd.sel .cn-wkd-d{color:#fff;}
.cn-wkd-m{font-size:9px;color:rgba(255,255,255,.5);}
.cn-wkd.today .cn-wkd-n{color:rgba(255,255,255,.9);}
.cn-dot  {display:block;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.7);margin-top:2px;}
.cn-dot-e{display:block;height:7px;}

/* ─── TIME GRID ──────────────────────────────────────────────────── */
.cn-tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px;}
.cn-tslot{padding:13px 4px;border-radius:var(--r1);font-size:14px;font-weight:500;text-align:center;border:1.5px solid var(--border);background:var(--surface);color:var(--text);transition:all .15s;}
.cn-tslot:hover{border-color:var(--g3);}
.cn-tslot.sel{border-color:var(--g1);border-width:2px;background:var(--ga);color:var(--g1);font-weight:700;}
.cn-tslot.off{background:#F5F5F4;color:#CCC;border-color:#EEE;text-decoration:line-through;cursor:not-allowed;}

/* ─── CTA ────────────────────────────────────────────────────────── */
.cn-cta{margin-top:24px;}

/* ─── BACK BUTTON ────────────────────────────────────────────────── */
.cn-back-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--rf);border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:14px;font-weight:500;margin-bottom:22px;box-shadow:var(--sh);transition:all .15s;}
.cn-back-btn:hover{border-color:var(--g3);color:var(--g2);box-shadow:var(--sh2);}

/* ─── CARD / FORM ────────────────────────────────────────────────── */
.cn-card{background:var(--surface);border-radius:var(--r3);border:1px solid var(--border);padding:22px;margin-bottom:18px;box-shadow:var(--sh);}
.cn-card h3{font-size:14px;font-weight:700;color:var(--g1);margin-bottom:16px;}
.cn-fg{margin-bottom:14px;}
.cn-fg label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px;}
.cn-fg input,.cn-fg select{width:100%;padding:11px 13px;font-size:15px;border-radius:var(--r1);border:1.5px solid var(--border);background:var(--surface);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s;}
.cn-fg input:focus,.cn-fg select:focus{border-color:var(--g2);box-shadow:0 0 0 3px rgba(26,84,48,.1);}
.cn-fg em{display:block;font-size:12px;color:var(--danger);font-style:normal;margin-top:3px;}
.cn-err{display:block;font-size:12px;color:var(--danger);margin-bottom:10px;}
.cn-slot-tag{background:var(--ga);border:1.5px solid var(--gb);border-radius:var(--r2);padding:11px 16px;margin-bottom:18px;font-size:14px;font-weight:500;color:var(--g1);}
.cn-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* ─── TOGGLE ─────────────────────────────────────────────────────── */
.cn-tgl{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;padding:12px 14px;border-radius:var(--r2);border:1.5px solid var(--border);background:var(--bg);cursor:pointer;text-align:left;margin-top:4px;transition:background .2s,border-color .2s;}
.cn-tgl.on{background:var(--ga);border-color:var(--gb);}
.cn-tgl strong{display:block;font-size:14px;color:var(--text);font-weight:600;}
.cn-tgl span{display:block;font-size:12px;color:var(--muted);margin-top:1px;}
.cn-pill{width:44px;height:24px;border-radius:var(--rf);background:#B8C8C0;position:relative;flex-shrink:0;transition:background .2s;}
.cn-tgl.on .cn-pill{background:var(--g2);}
.cn-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.2);}
.cn-tgl.on .cn-knob{left:23px;}
.cn-tgl-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border);gap:12px;}
.cn-tgl-row span{font-size:14px;color:var(--text);}
.cn-tgl-row .cn-tgl{padding:0;width:auto;background:none;border:none;flex-shrink:0;}
.cn-tgl-row .cn-tgl.on{background:none;border:none;}

/* ─── BUTTONS ────────────────────────────────────────────────────── */
.cn-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:var(--r2);border:none;font-size:15px;font-weight:600;cursor:pointer;transition:all .15s;width:100%;}
.cn-btn.primary{background:var(--g1);color:#fff;border-radius:var(--r3);}
.cn-btn.primary:hover{background:var(--g2);}
.cn-btn.secondary{background:var(--ga);color:var(--g1);border:1.5px solid var(--gb);border-radius:var(--r3);}
.cn-btn.secondary:hover{background:var(--gb);}
.cn-btn.block{background:var(--g1);color:#fff;}
.cn-btn.block:hover{background:var(--g2);}
.cn-btn.success{background:var(--g3);color:#fff;}
.cn-btn.danger{background:var(--danger-bg);border:1px solid #F5A0A0;color:var(--danger);width:auto;font-size:13px;padding:7px 13px;border-radius:var(--r1);}
.cn-btn.sm{font-size:12px;padding:6px 12px;}

/* ─── CONFIRMATION ───────────────────────────────────────────────── */
.cn-tick-ring{width:64px;height:64px;border-radius:50%;background:var(--ga);border:2px solid var(--gb);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:28px;color:var(--g2);}
.cn-page.center h2{font-size:24px;color:var(--g1);margin-bottom:6px;}
.cn-ref-badge{color:var(--muted);font-size:14px;margin-bottom:20px;}
.cn-ref-badge code{background:var(--ga);color:var(--g1);padding:2px 8px;border-radius:5px;letter-spacing:1px;font-size:14px;}
.cn-sr{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px;}
.cn-sr:last-child{border:none;}
.cn-sr span{color:var(--muted);}
.cn-sr strong{color:var(--text);text-align:right;max-width:55%;}
.cn-card.cn-summary{text-align:left;}
.cn-email-note{color:var(--g2);font-size:13px;background:var(--ga);border:1px solid var(--gb);border-radius:var(--r1);padding:10px 14px;margin-bottom:14px;}

/* ─── CALENDAR ───────────────────────────────────────────────────── */
.cn-cal-shell{touch-action:pan-y;}
.cn-cal-shell .cn-wk-nav{border-radius:var(--r3) var(--r3) 0 0;}
.cn-cal-shell .cn-wk-arr{background:rgba(255,255,255,.15);}
.cn-grid-hd{display:grid;grid-template-columns:44px 1fr 1fr;background:var(--ga);border-bottom:1px solid var(--gb);}
.cn-grid-hd div{padding:7px 10px;font-size:12px;font-weight:700;color:var(--g1);text-align:center;}
.cn-grid-hd div:first-child{text-align:right;padding-right:8px;color:var(--dim);}
.cn-grid-body{background:var(--surface);}
.cn-row{display:grid;grid-template-columns:44px 1fr 1fr;border-bottom:1px solid var(--border);min-height:38px;}
.cn-t{font-size:10px;color:var(--dim);text-align:right;padding:0 8px 0 0;display:flex;align-items:center;justify-content:flex-end;}
.cn-cell{border-left:1px solid var(--border);min-height:38px;background:var(--surface);}
.cn-cell.bk{padding:5px 9px;display:flex;flex-direction:column;justify-content:center;}
.cn-cell.sp2{grid-column:span 2;}
.cn-cell b   {font-size:12px;font-weight:700;display:block;}
.cn-cell small{font-size:10px;display:block;opacity:.8;margin-top:1px;}
.cn-cell em  {font-style:normal;font-size:9px;opacity:.65;}

/* booking colours */
.cn-cell.net-1-adult,.cn-cell.net-2-adult{background:#EAF5EF;border-left-color:#85C8A0;}
.cn-cell.net-1-junior,.cn-cell.net-2-junior{background:#E5EFF9;border-left-color:#80B0E8;}
.cn-cell.combined-adult{background:#FEF9E8;border-left-color:#ECC050;}
.cn-cell.combined-junior{background:#F5ECFF;border-left-color:#C090F0;}
.cn-cell.priv{background:#F4F4F2;border-left-color:#B8B8B0;}
.cn-cell.blk{background:#FFF0EE;border-left-color:#E08878;background-image:repeating-linear-gradient(-45deg,transparent,transparent 5px,rgba(220,80,60,.05) 5px,rgba(220,80,60,.05) 10px);}
.cn-cell.net-1-adult b,.cn-cell.net-2-adult b{color:#174E2A;}
.cn-cell.net-1-junior b,.cn-cell.net-2-junior b{color:#0A2850;}
.cn-cell.combined-adult b{color:#5B3800;}
.cn-cell.combined-junior b{color:#38006A;}
.cn-cell.priv b{color:#3A3A36;}
.cn-cell.blk b{color:#8B2010;}
.cn-legend{display:flex;flex-wrap:wrap;gap:12px;padding:14px 4px 0;border-top:1px solid var(--border);}
.cn-li{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.cn-ld{display:inline-block;width:12px;height:12px;border-radius:3px;flex-shrink:0;}
.cn-ld.ad{background:#EAF5EF;border:1px solid #85C8A0;}
.cn-ld.jr{background:#E5EFF9;border:1px solid #80B0E8;}
.cn-ld.co{background:#FEF9E8;border:1px solid #ECC050;}
.cn-ld.pv{background:#F4F4F2;border:1px solid #B8B8B0;}
.cn-ld.bk{background:#FFF0EE;border:1px solid #E08878;}

/* ─── ADMIN ──────────────────────────────────────────────────────── */
.cn-admin-title{font-size:22px;font-weight:700;color:var(--g1);}
.cn-admin-sub{font-size:13px;color:var(--muted);margin-bottom:18px;}
.cn-atabs{display:flex;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:4px;margin-bottom:22px;overflow-x:auto;scrollbar-width:none;}
.cn-atabs::-webkit-scrollbar{display:none;}
.cn-atab{flex:1;padding:9px 8px;border-radius:var(--r2);border:none;background:transparent;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;}
.cn-atab.on{background:var(--g1);color:#fff;font-weight:700;}
.cn-arow{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);gap:12px;}
.cn-arow:last-child{border:none;}
.cn-ai{flex:1;min-width:0;}
.cn-ai strong{display:block;font-size:14px;font-weight:600;color:var(--text);}
.cn-ai span,.cn-ai .dim{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.cn-ai .dim{color:var(--dim);}

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */

/* Tablet */
@media(max-width:900px){
  .cn-page,.cn-page.wide,.cn-page.book{padding:22px 20px 40px;}
  .cn-tgrid{grid-template-columns:repeat(3,1fr);}
}

/* Mobile ≤ 640px — bottom nav, bigger elements */
@media(max-width:640px){
  /* swap nav to bottom */
  .cn-topnav{display:none;}
  .cn-botnav{
    display:flex;position:fixed;bottom:0;left:0;right:0;
    height:66px;background:var(--surface);
    border-top:1px solid var(--border);
    box-shadow:0 -4px 20px rgba(22,61,36,.09);
    z-index:200;padding:0 8px;
  }
  .cn-botnav .cn-nav{
    flex:1;flex-direction:column;gap:3px;
    background:transparent;color:var(--muted);
    border-radius:var(--r1);padding:8px 4px;
    font-size:10px;font-weight:500;
  }
  .cn-botnav .cn-ni{font-size:22px;line-height:1;}
  .cn-botnav .cn-nav.on{color:var(--g1);background:var(--ga);}
  .cn-body{padding-bottom:66px;}

  /* header */
  .cn-hdr{height:50px;padding:0 16px;}
  .cn-brand{font-size:15px;}

  /* pages — full width, comfortable padding */
  .cn-page,.cn-page.wide,.cn-page.book{max-width:100%;padding:18px 16px 32px;}

  /* bigger base text for mobile */
  #cn-app{font-size:16px;}
  .cn-chip{padding:12px 16px;font-size:14px;}
  .cn-chip.sm{padding:10px 14px;font-size:13px;}

  /* step bar: hide labels */
  .cn-sl{display:none;}
  .cn-steps{gap:4px;margin-bottom:20px;}
  .cn-sn{width:28px;height:28px;font-size:13px;}

  /* week picker: bigger day cells */
  .cn-wkd{padding:9px 2px;}
  .cn-wkd-d{font-size:18px;}
  .cn-wkd-n{font-size:10px;}

  /* time grid */
  .cn-tgrid{grid-template-columns:repeat(3,1fr);gap:8px;}
  .cn-tslot{padding:14px 4px;font-size:14px;}

  /* card/form */
  .cn-card{padding:18px 16px;}
  .cn-fg input,.cn-fg select{padding:13px;font-size:16px;}/* prevent iOS zoom */

  /* back button */
  .cn-back-btn{width:100%;justify-content:center;margin-bottom:18px;padding:11px 18px;}

  /* calendar */
  .cn-grid-hd{grid-template-columns:32px 1fr 1fr;}
  .cn-row    {grid-template-columns:32px 1fr 1fr;min-height:34px;}
  .cn-t      {font-size:9px;padding-right:4px;}
  .cn-cell b {font-size:11px;}
  .cn-cell small{font-size:9px;}
  .cn-cell.bk{padding:4px 6px;}

  /* admin */
  .cn-2col{grid-template-columns:1fr;}
  .cn-atab{font-size:11px;padding:8px 5px;}
}

/* Small mobile ≤ 375px */
@media(max-width:375px){
  .cn-brand{font-size:13px;}
  .cn-tgrid{grid-template-columns:repeat(2,1fr);}
  .cn-grid-hd{grid-template-columns:28px 1fr 1fr;}
  .cn-row    {grid-template-columns:28px 1fr 1fr;}
  .cn-wkd-d  {font-size:16px;}
  .cn-chip{padding:10px 10px;font-size:13px;}
}

/* ─── EDIT FORMS ──────────────────────────────────────────────── */
.cn-edit-card{background:var(--ga);border:1.5px solid var(--gb);border-radius:var(--r2);padding:18px;margin:4px 0 8px;box-shadow:var(--sh);}
.cn-edit-title{font-size:13px;font-weight:700;color:var(--g1);margin-bottom:14px;text-transform:uppercase;letter-spacing:.5px;}
.cn-edit-actions{display:flex;gap:8px;margin-top:14px;}
.cn-edit-actions .cn-btn{width:auto;flex:1;}
.cn-abtns{display:flex;gap:6px;flex-shrink:0;}
.cn-btn.ghost{background:transparent;border:1.5px solid var(--border);color:var(--muted);width:auto;}
.cn-btn.ghost:hover{border-color:var(--g3);color:var(--g2);}
/* block reason continuation in calendar */
.cn-blk-cont{color:#B03020;opacity:.6;font-size:9px;}

/* ── AUTH BUTTON ──────────────────────────────────────────────── */
.cn-auth-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--rf);
  font-size: 12px; font-weight: 500; text-decoration: none;
  color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); white-space: nowrap;
  transition: all .15s; flex-shrink: 0;
}
.cn-auth-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.cn-auth-btn.admin-sign-in { color: rgba(255,255,255,.85); }

/* ── RECUR BADGE ──────────────────────────────────────────────── */
.cn-recur-badge {
  background: var(--ga); border: 1.5px solid var(--gb);
  border-radius: var(--r2); padding: 10px 14px;
  font-size: 14px; font-weight: 600; color: var(--g1);
  text-align: center; margin-bottom: 14px;
}

/* Mobile: hide auth text, show icon only */
@media(max-width:640px){
  .cn-auth-btn { font-size: 11px; padding: 5px 9px; }
}

/* ── STICKY CONTINUE CTA ──────────────────────────────────────── */
.cn-sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(22,61,36,.12);
  z-index: 150; padding: 12px 20px;
}
.cn-sticky-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; max-width: 740px; margin: 0 auto;
}
.cn-sticky-info strong { display: block; font-size: 15px; color: var(--g1); }
.cn-sticky-info span   { display: block; font-size: 12px; color: var(--muted); }
.cn-sticky-btn { width: auto; padding: 12px 24px; flex-shrink: 0; }
.cn-page.has-cta { padding-bottom: 90px; }
/* On mobile, bottom nav + sticky cta stack */
@media(max-width:640px){
  .cn-sticky-cta { bottom: 66px; }
  .cn-page.has-cta { padding-bottom: 160px; }
  .cn-sticky-btn { padding: 11px 18px; font-size: 14px; }
}

/* ── REPORTS ──────────────────────────────────────────────────── */
.cn-stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 20px; }
.cn-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); padding: 16px; text-align: center; box-shadow: var(--sh); }
.cn-stat-val { font-size: 28px; font-weight: 700; color: var(--g1); line-height: 1; }
.cn-stat-lbl { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 500; }
.cn-stat-sub { font-size: 10px; color: var(--dim); margin-top: 2px; }
.cn-rep-section { margin-bottom: 20px; }
.cn-barchart { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.cn-bar-row { display: grid; grid-template-columns: 42px 1fr 28px; gap: 6px; align-items: center; }
.cn-bar-lbl { font-size: 10px; color: var(--muted); text-align: right; }
.cn-bar-track { background: var(--ga); border-radius: 3px; height: 14px; overflow: hidden; }
.cn-bar-fill { background: var(--g2); height: 100%; border-radius: 3px; transition: width .3s; }
.cn-bar-cnt { font-size: 10px; color: var(--muted); }
@media(max-width:640px){
  .cn-stat-grid { grid-template-columns: repeat(2,1fr); }
  .cn-stat-val { font-size: 22px; }
}

/* ── NEEDS SELECTION STATE ────────────────────────────────────── */
@keyframes pulse-border {
  0%,100% { box-shadow: 0 0 0 0 rgba(22,61,36,0); }
  50%      { box-shadow: 0 0 0 4px rgba(22,61,36,0.18); }
}
.cn-chips.needs-sel .cn-chip {
  border-color: var(--g3);
  animation: pulse-border 1.8s ease-in-out infinite;
}
.cn-hint.needs-action {
  color: var(--g2);
  font-weight: 500;
}

/* ── +1 JOIN ──────────────────────────────────────────────────── */
.cn-plus1 {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 4px; padding: 2px 8px; border-radius: var(--rf);
  font-size: 10px; font-weight: 600; border: 1px solid var(--gb);
  background: var(--ga); color: var(--g2); cursor: pointer;
  transition: all .15s;
}
.cn-plus1:hover, .cn-plus1.active { background: var(--g2); color: #fff; border-color: var(--g2); }
.cn-att-count { color: var(--g2); font-size: 10px; display: block; margin-top: 2px; }
.cn-cell.joining { z-index: 10; position: relative; overflow: visible; min-height: 120px; }
.cn-join-form {
  position: absolute; left: 0; top: 100%; width: 220px;
  background: var(--surface); border: 1.5px solid var(--g2);
  border-radius: var(--r2); padding: 10px; box-shadow: var(--sh2);
  z-index: 200; margin-top: 2px;
}
.cn-join-input {
  width: 100%; padding: 7px 9px; font-size: 13px; border-radius: var(--r1);
  border: 1.5px solid var(--border); margin-bottom: 6px; font-family: inherit;
}
.cn-join-input:focus { border-color: var(--g2); outline: none; }
.cn-join-btns { display: flex; gap: 6px; margin-top: 4px; }
.cn-join-go {
  flex: 1; padding: 7px; border-radius: var(--r1); border: none;
  background: var(--g1); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cn-join-cancel {
  padding: 7px 10px; border-radius: var(--r1); border: 1px solid var(--border);
  background: transparent; color: var(--muted); font-size: 13px; cursor: pointer;
}
.cn-join-msg { font-size: 11px; color: var(--danger); display: block; margin-bottom: 4px; }
@media(max-width:640px){
  .cn-join-form { width: 180px; }
}


/* ── HELP BUTTON ──────────────────────────────────────────────── */
.cn-help-bar {
  display: flex; justify-content: center;
  margin-top: 28px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.cn-help-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--rf);
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--muted); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .15s; box-shadow: var(--sh);
}
.cn-help-btn:hover { border-color: var(--g3); color: var(--g2); box-shadow: var(--sh2); }

/* ── HELP MODAL ───────────────────────────────────────────────── */
.cn-help-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  z-index: 500; display: flex; align-items: center;
  justify-content: center; padding: 20px;
  animation: fadeIn .15s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.cn-help-panel {
  background: var(--surface); border-radius: var(--r3);
  width: 100%; max-width: 520px; max-height: 75vh;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,.25);
  animation: popIn .2s ease;
}
@keyframes popIn { from{transform:scale(.95);opacity:0} to{transform:scale(1);opacity:1} }
.cn-help-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.cn-help-head h3 { font-size: 16px; font-weight: 700; color: var(--g1); }
.cn-help-close {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: var(--gc); color: var(--muted); font-size: 15px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cn-help-close:hover { background: var(--gb); color: var(--g1); }
.cn-help-body { overflow-y: auto; padding: 18px; flex: 1; }
.cn-help-section {
  margin-bottom: 18px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.cn-help-section:last-child { border: none; margin-bottom: 0; }
.cn-help-section h4 { font-size: 13px; font-weight: 700; color: var(--g1); margin-bottom: 6px; }
.cn-help-section p  { font-size: 13px; color: var(--text); line-height: 1.6; }
.cn-help-section ol { padding-left: 16px; font-size: 13px; color: var(--text); line-height: 1.8; }
.cn-help-section ol li { margin-bottom: 2px; }
.cn-help-contact { margin-top: 4px; }
.cn-help-contact h4 { font-size: 13px; font-weight: 700; color: var(--g1); margin-bottom: 6px; }
.cn-help-contact p  { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.cn-help-email {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--r2);
  background: var(--ga); border: 1.5px solid var(--gb);
  color: var(--g1); font-weight: 600; font-size: 13px;
  text-decoration: none; transition: background .15s;
}
.cn-help-email:hover { background: var(--gb); }
@media(max-width:640px){
  .cn-help-overlay { padding: 16px; align-items: center; }
  .cn-help-panel   { max-height: 72vh; border-radius: var(--r3); }
  .cn-help-body    { padding: 14px; }
}

/* ── JOIN MODAL ───────────────────────────────────────────────── */
.cn-join-modal {
  background: var(--surface); border-radius: var(--r3);
  width: 100%; max-width: 360px;
  box-shadow: 0 12px 48px rgba(0,0,0,.25);
  animation: popIn .2s ease;
}
/* Reuse .cn-cell size fix - remove joining class styles no longer needed */
.cn-cell.joining { min-height: unset; overflow: unset; z-index: unset; position: unset; }
.cn-join-form { display: none; } /* hide any stray inline forms */

/* ── HEADER HELP ICON & RIGHT GROUP ──────────────────────────── */
.cn-hdr-right {
  display: flex; align-items: center; gap: 16px; flex-shrink: 0;
}
.cn-hdr-help {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: #fff; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; flex-shrink: 0;
  font-family: Georgia, serif; line-height: 1;
}
.cn-hdr-help:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.6); }
@media(max-width:640px){
  .cn-hdr-right { gap: 6px; }
  .cn-auth-btn  { font-size: 11px; padding: 5px 8px; }
}

/* ── AUTH ICON ────────────────────────────────────────────────── */
.cn-auth-btn.cn-auth-icon {
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
}
.cn-auth-btn.cn-auth-icon:hover {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.6);
  color: #fff;
}

/* ── BEHALF TOGGLE ────────────────────────────────────────────── */
.cn-behalf-toggle {
  display: flex; align-items: center; justify-content: center;
  margin-top: 24px; padding: 10px 16px;
  border: 1.5px dashed var(--border); border-radius: var(--r2);
  color: var(--muted); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.cn-behalf-toggle:hover { border-color: var(--g3); color: var(--g2); background: var(--ga); }

/* ── ADMIN HOURS SELECTS ──────────────────────────────────────── */
#cfg-bstart, #cfg-bend { width: 80px; min-width: 80px; }

/* ── ADMIN TAB BAR ────────────────────────────────────────────── */
.cn-atabs { flex-wrap: nowrap; }
.cn-atab  { font-size: 11px; padding: 8px 6px; flex-shrink: 1; min-width: 0; }
@media(max-width:900px){
  .cn-atab { font-size: 10px; padding: 7px 4px; }
}