*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ── DARK TOKENS (default) ── */
    :root {
      --bg:      #080705;
      --bg2:     #0f0d09;
      --bg3:     #161209;
      --card:    #1a1610;
      --card2:   #1f1b12;
      --border:  #2a2218;
      --border2: #332a1a;
      --gold:    #c8c8c8;
      --gold2:   #a07828;
      --gold-dim:#c8c8c822;
      --text:    #ede0c4;
      --muted:   #6b5f43;
      --muted2:  #3a3224;
      --green:   #3d8b5e;
      --green-bg:#0f2018;
      --red:     #9b3a3a;
      --red-bg:  #1e0f0f;
      --blue:    #2d6a9f;
      --blue-bg: #0a1824;
      --orange:  #9b6b2a;
      --safe-top:  env(safe-area-inset-top,  0px);
      --safe-bot:  env(safe-area-inset-bottom, 0px);
      --font-brand: 'Cormorant Garamond', Georgia, serif;
      --font-ui:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    /* ── LIGHT TOKENS ── */
    .light-theme {
      --bg:      #faf8f3;
      --bg2:     #f4f0e6;
      --bg3:     #ede8da;
      --card:    #ffffff;
      --card2:   #f9f6ef;
      --border:  #e2d9c4;
      --border2: #d4c9ae;
      --gold:    #9a7020;
      --gold2:   #7a5510;
      --gold-dim:#9a702018;
      --text:    #1a1408;
      --muted:   #8a7a5a;
      --muted2:  #c8bea4;
      --green:   #2d7a4a;
      --green-bg:#eaf4ee;
      --red:     #8b2a2a;
      --red-bg:  #fdf0f0;
      --blue:    #1a5c8f;
      --blue-bg: #eef4fb;
      --orange:  #8a5c1a;
    }

    html, body {
      height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-ui);
      overflow: hidden;
    }
    #root { display: flex; flex-direction: column; height: 100%; }
    .screen { display: none; flex: 1; flex-direction: column; overflow: hidden; }
    .screen.active { display: flex; }

    /* ── LOGIN ── */
    #screen-login {
      justify-content: center; align-items: center;
      background: #080705; position: relative; overflow: hidden;
      padding: 0;
    }
    .login-bg-streak {
      position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(115deg,
        transparent 0%, transparent 22%,
        rgba(200,200,200,0.07) 32%, rgba(200,200,200,0.14) 37%,
        rgba(200,200,200,0.07) 42%, transparent 52%, transparent 100%);
    }
    .login-bg-streak2 {
      background: linear-gradient(115deg,
        transparent 0%, transparent 58%,
        rgba(200,200,200,0.04) 66%, rgba(200,200,200,0.09) 71%,
        rgba(200,200,200,0.04) 76%, transparent 84%, transparent 100%);
    }
    .login-inner {
      position: relative; z-index: 1;
      width: 100%; max-width: 360px;
      padding: 48px 32px 52px;
      display: flex; flex-direction: column; align-items: center; gap: 0;
    }
    .login-logo-box {
      width: 110px; height: 110px; margin-bottom: 28px;
      border-radius: 24px;
      border: 1px solid rgba(200,200,200,0.25);
      background: linear-gradient(180deg, rgba(22,18,9,0.9) 0%, rgba(10,9,5,0.95) 100%);
      box-shadow: 0 0 0 1px rgba(200,200,200,0.08), 0 20px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(200,200,200,0.12);
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .login-logo-glow {
      position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
      width: 120px; height: 60px; border-radius: 50%;
      background: radial-gradient(ellipse, rgba(200,200,200,0.22) 0%, transparent 70%);
      pointer-events: none;
    }
    .login-logo-monogram {
      display: flex; align-items: center; justify-content: center;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 3.4rem; font-weight: 700;
      color: #c8c8c8;
      letter-spacing: 1px;
      position: relative; z-index: 1;
      text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 20px rgba(200,200,200,0.3);
    }
    .login-brand { text-align: center; margin-bottom: 36px; width: 100%; }
    .login-title {
      font-family: var(--font-brand);
      font-size: 2.2rem; font-weight: 700;
      letter-spacing: 7px; color: var(--gold); line-height: 1;
    }
    .login-divider {
      display: flex; align-items: center; gap: 10px;
      margin: 12px 0 8px;
    }
    .login-divider-line { flex: 1; height: 1px; background: rgba(200,200,200,0.2); }
    .login-divider-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold2); }
    .login-sub {
      font-size: 0.58rem; color: var(--muted);
      letter-spacing: 3.5px; font-weight: 500; text-transform: uppercase;
    }
    .login-form { width: 100%; display: flex; flex-direction: column; gap: 10px; }
    .login-footer { margin-top: 36px; text-align: center; }
    .login-footer-label {
      font-size: 0.55rem; color: rgba(107,95,67,0.6);
      letter-spacing: 2px; text-transform: uppercase;
    }
    .login-footer-url {
      font-family: var(--font-brand); font-size: 0.82rem;
      color: rgba(107,95,67,0.45); margin-top: 4px; letter-spacing: 2px;
    }
    .login-err { color: #c0504a; font-size: 0.8rem; text-align: center; min-height: 18px; }
    .inp {
      width: 100%; padding: 15px 16px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(200,200,200,0.18);
      border-radius: 14px; color: var(--text); font-size: 0.98rem;
      font-family: var(--font-ui); outline: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
      transition: border-color 0.15s;
    }
    .inp:focus { border-color: var(--gold); }
    .btn-gold {
      width: 100%; padding: 15px;
      background: linear-gradient(135deg, #f1d36d 0%, #c8c8c8 55%, #a07828 100%);
      border: none; border-radius: 12px;
      color: #080808; font-size: 0.84rem; font-weight: 800;
      font-family: var(--font-ui); cursor: pointer;
      box-shadow: 0 14px 24px rgba(200,200,200,0.2);
      transition: opacity 0.15s;
    }
    .btn-gold:active { opacity: 0.82; }
    .btn-gold:disabled { opacity: 0.45; box-shadow: none; background: rgba(200,200,200,0.3); }

    /* ── TOP BAR ── */
    .topbar {
      padding: calc(var(--safe-top) + 10px) 16px 12px;
      background: var(--bg2); border-bottom: 1px solid var(--border);
      flex-shrink: 0; display: flex; align-items: center;
      justify-content: space-between; gap: 10px;
    }
    .topbar-left { flex: 1; min-width: 0; }
    .topbar-title {
      font-family: var(--font-brand);
      font-size: 1.25rem; font-weight: 700;
      letter-spacing: 4px; color: var(--gold); line-height: 1;
    }
    .topbar-sub {
      font-size: 0.58rem; color: var(--muted);
      letter-spacing: 3px; margin-top: 4px;
    }
    .topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--gold2); display: flex; align-items: center;
      justify-content: center; font-size: 0.72rem; font-weight: 700;
      color: #080808; flex-shrink: 0; border: 1.5px solid var(--gold);
      cursor: pointer;
    }
    .icon-btn {
      width: 32px; height: 32px; border-radius: 50%;
      border: 1px solid var(--border2); background: var(--card);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--muted); font-size: 0.9rem;
      position: relative; -webkit-tap-highlight-color: transparent;
    }
    .notif-dot-badge {
      display: none; position: absolute; top: 4px; right: 4px;
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--red); border: 1.5px solid var(--bg2);
    }
    .theme-btn {
      width: 32px; height: 32px; border-radius: 50%;
      border: 1px solid var(--border2); background: var(--card);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: 0.95rem;
      -webkit-tap-highlight-color: transparent;
    }

    /* ── SCROLL ── */
    .scroll {
      flex: 1; overflow-y: auto;
      -webkit-overflow-scrolling: touch; padding: 14px;
    }

    /* ── BOTTOM NAV ── */
    .bottomnav {
      display: flex; background: var(--bg2);
      border-top: 1px solid var(--border);
      padding-bottom: var(--safe-bot); flex-shrink: 0;
    }
    .nav-btn {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 10px 4px; gap: 3px; border: none;
      background: transparent; cursor: pointer; color: var(--muted);
      -webkit-tap-highlight-color: transparent; transition: color 0.15s;
      font-family: var(--font-ui);
    }
    .nav-btn.active { color: var(--gold); }
    .nav-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .nav-btn span { font-size: 0.56rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
    .nav-badge {
      position: absolute; top: 6px; right: 6px;
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--red); border: 1.5px solid var(--bg2);
    }

    /* ── DATE NAV ── */
    .date-strip {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 14px; background: var(--bg2);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .date-arrow {
      width: 28px; height: 28px; border: none;
      background: var(--card); border-radius: 8px;
      border: 1px solid var(--border2);
      color: var(--gold); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .date-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .date-label { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; }
    .today-chip {
      padding: 3px 10px;
      background: var(--gold-dim); border: 1px solid var(--gold2);
      border-radius: 99px; color: var(--gold);
      font-size: 0.58rem; font-weight: 700;
      font-family: var(--font-ui);
      cursor: pointer; white-space: nowrap; letter-spacing: 1px;
      -webkit-tap-highlight-color: transparent;
    }

    /* ── BARBER FILTER PILLS ── */
    .filter-row {
      display: flex; gap: 6px; padding: 7px 14px;
      background: var(--bg); border-bottom: 1px solid var(--border);
      flex-shrink: 0; overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .filter-row::-webkit-scrollbar { display: none; }
    .filter-pill {
      padding: 4px 12px; border-radius: 99px;
      border: 1px solid var(--border2);
      background: transparent; color: var(--muted);
      font-size: 0.68rem; font-weight: 600; font-family: var(--font-ui);
      cursor: pointer; white-space: nowrap; flex-shrink: 0;
      -webkit-tap-highlight-color: transparent; transition: all 0.15s;
      letter-spacing: 0.5px;
    }
    .filter-pill.active {
      background: var(--gold-dim);
      border-color: var(--gold2); color: var(--gold);
    }

    /* ── BOOKING CARD (list fallback) ── */
    .booking-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 14px; padding: 13px 14px 13px 18px;
      margin-bottom: 9px; cursor: pointer;
      display: flex; align-items: center; gap: 12px;
      position: relative; overflow: hidden;
      -webkit-tap-highlight-color: transparent; transition: background 0.1s;
    }
    .booking-card:active { background: var(--card2); }
    .bc-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 0; }
    .bc-time { min-width: 42px; text-align: center; flex-shrink: 0; }
    .bc-time-main { font-size: 0.85rem; font-weight: 700; color: var(--text); }
    .bc-info { flex: 1; min-width: 0; }
    .bc-name { font-size: 0.9rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bc-svc { font-size: 0.68rem; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bc-barber { font-size: 0.62rem; color: var(--muted); margin-top: 2px; }
    .bc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
    .bc-price { font-size: 0.88rem; font-weight: 700; color: var(--gold); }
    .status-pill {
      padding: 2px 8px; border-radius: 99px;
      font-size: 0.55rem; font-weight: 700;
      letter-spacing: 0.5px; text-transform: uppercase;
      font-family: var(--font-ui);
    }
    .s-confirmed  { background: rgba(200,200,200,0.12); color: var(--gold); }
    .s-pending    { background: rgba(155,107,42,0.14); color: var(--orange); }
    .s-checked_out{ background: rgba(61,139,94,0.14);  color: var(--green); }
    .s-cancelled  { background: rgba(155,58,58,0.12);  color: var(--red); }
    .s-blocked    { background: rgba(100,90,70,0.12);  color: var(--muted); }
    .s-no_show    { background: rgba(100,60,130,0.12); color: #9c6dc0; }
    .empty-state  { text-align: center; padding: 60px 20px; color: var(--muted); }
    .empty-icon   { font-size: 2.8rem; margin-bottom: 12px; }
    .empty-text   { font-size: 0.85rem; line-height: 1.5; }

    /* ── CALENDAR GRID ── */
    .cal-outer { overflow: auto; -webkit-overflow-scrolling: touch; height: 100%; position: relative; }
    .cal-outer::-webkit-scrollbar { display: none; }
    .cal-sticky-head {
      position: sticky; top: 0; z-index: 5;
      display: flex; background: var(--bg2);
      border-bottom: 2px solid var(--border2);
    }
    .cal-corner {
      width: 46px; flex-shrink: 0;
      position: sticky; left: 0; z-index: 6;
      background: var(--bg2); border-right: 1px solid var(--border);
    }
    .cal-barber-hd {
      flex: 1; min-width: 0;
      padding: 9px 6px; text-align: center;
      font-size: 0.58rem; font-weight: 700;
      letter-spacing: 2px; text-transform: uppercase;
      font-family: var(--font-ui);
      border-right: 1px solid var(--border);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cal-apts-badge {
      display: block; font-size: 0.5rem; font-weight: 600;
      opacity: 0.55; letter-spacing: 0.4px; margin-top: 2px;
      text-transform: none; color: var(--muted);
    }
    .cal-body-wrap { display: flex; position: relative; }
    .cal-time-col {
      width: 46px; flex-shrink: 0;
      position: sticky; left: 0; z-index: 3;
      background: var(--bg2); border-right: 1px solid var(--border);
    }
    .cal-time-lbl {
      height: 54px; display: flex; align-items: flex-start;
      justify-content: flex-end; padding: 3px 6px 0 0;
      font-size: 0.52rem; color: var(--muted);
      border-bottom: 1px solid var(--border);
      font-family: var(--font-ui);
    }
    .cal-time-lbl.half {
      border-bottom: 1px solid rgba(255,255,255,0.04);
      color: transparent;
    }
    .light-theme .cal-time-lbl.half {
      border-bottom: 1px solid rgba(0,0,0,0.04);
    }
    .cal-cols { flex: 1; display: flex; position: relative; }
    .cal-col  { flex: 1; min-width: 0; border-right: 1px solid var(--border); position: relative; }
    .cal-row  { height: 54px; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .light-theme .cal-row { border-bottom: 1px solid rgba(0,0,0,0.05); }
    .cal-row.on-hour { border-bottom: 1px solid var(--border); }

    .cal-event {
      position: absolute; border-radius: 8px;
      padding: 5px 7px; cursor: pointer; overflow: hidden;
      -webkit-tap-highlight-color: transparent; z-index: 1;
      transition: opacity 0.12s; box-sizing: border-box;
      border-left: 3px solid transparent;
    }
    .cal-event:active { opacity: 0.72; }
    .cal-event-name {
      font-size: 0.67rem; font-weight: 700;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      line-height: 1.3; font-family: var(--font-ui);
    }
    .cal-event-sub {
      font-size: 0.56rem; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
      margin-top: 1px; opacity: 0.7;
    }

    /* ── LIGHT MODE GRID OVERRIDES ── */
    .light-theme .cal-sticky-head { background: #f0eee9; border-bottom-color: #d0c8b8; }
    .light-theme .cal-corner      { background: #f0eee9; border-right-color: #d0c8b8; }
    .light-theme .cal-time-col    { background: #f0eee9; border-right-color: #d0c8b8; }
    .light-theme .cal-time-lbl    { color: #888; border-bottom-color: #e0d8c8; }
    .light-theme .cal-col         { border-right-color: #e0d8c8; }
    .light-theme .cal-row.on-hour { border-bottom-color: #d0c8b8; }
    /* Force readable text — overrides inline JS colors */
    .light-theme .cal-barber-hd   { color: #3a3530 !important; }
    .light-theme .cal-apts-badge  { color: #7a7060 !important; }
    .light-theme .cal-event-name  { color: #1a1610 !important; }
    .light-theme .cal-event-sub   { color: #4a4238 !important; opacity: 1; }
    /* Event cards: stronger background + border in light */
    .light-theme .cal-event       { border-left-width: 4px; filter: saturate(1.1) brightness(0.72); }
    .cal-now-line {
      position: absolute; left: 0; right: 0; height: 1.5px;
      pointer-events: none; z-index: 4; background: var(--red);
    }
    .cal-now-dot {
      position: absolute; left: -4px; top: -4px;
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--red);
    }

    /* ── REVENUE STRIP ── */
    .revenue-strip {
      background: var(--bg2); border-top: 1px solid var(--border);
      display: flex; flex-shrink: 0; padding: 10px 0;
    }
    .rev-item {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; border-right: 1px solid var(--border);
    }
    .rev-item:last-child { border-right: none; }
    .rev-lbl {
      font-size: 0.55rem; color: var(--muted);
      letter-spacing: 1.5px; text-transform: uppercase;
      font-family: var(--font-ui); font-weight: 600; margin-bottom: 3px;
    }
    .rev-val {
      font-family: var(--font-brand);
      font-size: 1.15rem; font-weight: 700; color: var(--gold);
    }
    .rev-val.green  { color: var(--green); }
    .rev-val.normal { color: var(--text); font-size: 1rem; }

    /* ── SOURCE STRIP ── */
    .source-strip {
      display: flex; gap: 7px; padding: 8px 12px 10px;
      overflow-x: auto; scrollbar-width: none;
      background: var(--bg); border-top: 1px solid var(--border);
      flex-shrink: 0;
    }
    .source-strip::-webkit-scrollbar { display: none; }
    .src-chip {
      flex-shrink: 0; display: flex; align-items: center; gap: 5px;
      font-family: var(--font-ui); font-size: 0.68rem; font-weight: 500;
      padding: 4px 9px 4px 7px; border-radius: 20px; border: 1px solid;
      white-space: nowrap; letter-spacing: 0.2px;
    }
    .src-chip strong { font-weight: 700; margin-left: 2px; }
    .src-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .light-theme .src-chip { filter: brightness(0.82) saturate(1.1); }

    /* ── SHEETS ── */
    .sheet-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.72);
      z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.25s;
    }
    .sheet-overlay.open { opacity: 1; pointer-events: all; }
    .sheet {
      position: fixed; bottom: 0; left: 0; right: 0;
      background: var(--bg2); border-radius: 22px 22px 0 0;
      z-index: 101; transform: translateY(100%);
      transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
      padding-bottom: calc(var(--safe-bot) + 4px);
      max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
    }
    .sheet.open { transform: translateY(0); }
    .sheet-handle {
      width: 38px; height: 4px; background: var(--border2);
      border-radius: 99px; margin: 12px auto 0; flex-shrink: 0;
    }
    .sheet-header {
      padding: 14px 20px 12px; border-bottom: 1px solid var(--border);
      flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
    }
    .sheet-title {
      font-family: var(--font-brand);
      font-size: 1.1rem; font-weight: 700; color: var(--gold); letter-spacing: 1px;
    }
    .sheet-close {
      width: 28px; height: 28px; border-radius: 50%;
      border: 1px solid var(--border); background: var(--card);
      color: var(--muted); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.75rem; flex-shrink: 0;
    }
    .sheet-body {
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      padding: 16px 20px; flex: 1;
    }
    .sheet-actions {
      padding: 12px 20px; border-top: 1px solid var(--border);
      display: flex; gap: 10px; flex-shrink: 0;
    }
    .btn-ghost {
      flex: 1; padding: 14px; background: transparent;
      border: 1px solid var(--border); border-radius: 12px;
      color: var(--text); font-size: 0.88rem; font-weight: 600;
      font-family: var(--font-ui); cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-ghost:active { background: var(--card); }
    .btn-red {
      flex: 1; padding: 14px; background: transparent;
      border: 1px solid var(--red); border-radius: 12px;
      color: var(--red); font-size: 0.88rem; font-weight: 600;
      font-family: var(--font-ui); cursor: pointer;
    }

    /* ── CHECKOUT PROGRESS ── */
    .co-progress {
      position: absolute; bottom: 0; left: 0; height: 3px;
      background: linear-gradient(90deg, var(--gold2), var(--gold), #ffe580);
      border-radius: 0; width: 0;
      transition: width 0.9s cubic-bezier(0.4,0,0.2,1); z-index: 10;
    }

    /* ── SALES / REPORTS ── */
    .rep-periods { display:flex;gap:8px;padding:14px 16px 4px;flex-wrap:wrap; }
    .rep-pill { padding:7px 16px;border-radius:99px;border:1.5px solid var(--border);background:var(--card);color:var(--muted);font-size:0.75rem;font-weight:600;font-family:var(--font-ui);cursor:pointer;transition:all 0.15s; }
    .rep-pill.active { background:var(--gold);border-color:var(--gold);color:#080808; }
    .rep-loading { padding:40px 16px;text-align:center;color:var(--muted);font-size:0.82rem; }
    .rep-stats { display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:14px 16px 4px; }
    .rep-stat { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 10px;text-align:center; }
    .rep-stat-val { font-family:var(--font-brand);font-size:1.35rem;font-weight:700;color:var(--gold);line-height:1; }
    .rep-stat-lbl { font-size:0.58rem;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-top:5px; }
    .rep-section { padding:14px 16px 0; }
    .rep-section-title { font-size:0.6rem;color:var(--muted);letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:10px; }
    .rep-chart { display:flex;align-items:flex-end;gap:4px;height:100px;padding:0 2px; }
    .rep-bar-col { flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%; }
    .rep-bar-track { flex:1;width:100%;display:flex;align-items:flex-end; }
    .rep-bar { width:100%;border-radius:4px 4px 0 0;min-height:3px;position:relative; }
    .rep-bar-day { font-size:0.55rem;color:var(--muted);text-align:center;white-space:nowrap; }
    .rep-bar-amt { font-size:0.52rem;color:var(--text);text-align:center;white-space:nowrap;min-height:12px; }
    .rep-row { display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border2); }
    .rep-row:last-child { border-bottom:none; }
    .rep-row-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
    .rep-row-name { flex:1;font-size:0.82rem;color:var(--text);font-weight:500; }
    .rep-row-bar-track { width:80px;height:4px;background:var(--border2);border-radius:99px;overflow:hidden;flex-shrink:0; }
    .rep-row-bar-fill { height:100%;border-radius:99px; }
    .rep-row-amt { font-size:0.78rem;color:var(--gold);font-weight:700;font-family:var(--font-brand);min-width:40px;text-align:right; }
    .rep-row-cnt { font-size:0.62rem;color:var(--muted);min-width:24px;text-align:right; }

    /* ── CHECKOUT SUCCESS ── */
    .co-success {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; padding: 48px 24px 56px; gap: 12px;
      animation: coSuccessIn 0.38s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    @keyframes coSuccessIn { from{opacity:0;transform:scale(0.82)} to{opacity:1;transform:scale(1)} }
    .co-success-ring {
      width: 80px; height: 80px; border-radius: 50%;
      border: 2.5px solid var(--gold);
      display: flex; align-items: center; justify-content: center; position: relative;
      animation: ringPop 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
    }
    @keyframes ringPop { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }
    .co-success-ring svg {
      width: 38px; height: 38px; stroke: var(--gold); fill: none;
      stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
      stroke-dasharray: 50; stroke-dashoffset: 50;
      animation: drawCheck 0.4s ease 0.35s forwards;
    }
    @keyframes drawCheck { to{stroke-dashoffset:0} }
    .co-success-amt {
      font-family: var(--font-brand);
      font-size: 2.6rem; font-weight: 700; color: var(--text); letter-spacing: -1px; margin-top: 8px;
    }
    .co-success-meta { font-size: 0.78rem; color: var(--muted); letter-spacing: 1px; font-weight: 600; }
    .co-success-pts {
      font-size: 0.72rem; color: var(--gold); font-weight: 700;
      padding: 4px 14px;
      background: var(--gold-dim); border: 1px solid var(--gold2);
      border-radius: 99px;
    }

    /* ── BOOKING DETAIL HERO ── */
    .bk-hero { padding:14px 18px 13px; border-bottom:1px solid var(--border); position:relative; flex-shrink:0; }
    .bk-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:1.5px; background:linear-gradient(90deg,transparent,var(--gold2),transparent); opacity:0.5; }
    .bk-hero-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px; }
    .bk-hero-name { font-family:var(--font-brand); font-size:1.3rem; font-weight:700; color:var(--text); line-height:1.1; }
    .bk-hero-svc { font-size:0.68rem; color:var(--muted); margin-top:3px; }
    .bk-hero-chips { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
    .bk-status-chip { display:inline-flex; align-items:center; padding:3px 8px; border-radius:99px; font-size:0.54rem; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; }
    .bk-time-chip { font-size:0.68rem; font-weight:600; color:var(--muted); }
    .bk-barber-chip { font-size:0.68rem; font-weight:700; padding:2px 8px; border-radius:99px; border:1px solid; }

    /* ── BOOKING QUICK ACTIONS ── */
    .bk-qa { display:flex; gap:7px; padding:11px 18px; border-bottom:1px solid var(--border); background:var(--bg); flex-shrink:0; }
    .bk-qa-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 4px; border-radius:11px; border:1px solid var(--border2); background:var(--card); cursor:pointer; -webkit-tap-highlight-color:transparent; text-decoration:none; }
    .bk-qa-btn:active { opacity:0.75; }
    .bk-qa-icon { font-size:1.05rem; }
    .bk-qa-lbl { font-size:0.55rem; font-weight:700; letter-spacing:0.3px; text-align:center; color:var(--muted); }

    /* ── BOOKING STATS ── */
    .bk-stats { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
    .bk-stat { flex:1; display:flex; flex-direction:column; align-items:center; padding:10px 4px; border-right:1px solid var(--border); }
    .bk-stat:last-child { border-right:none; }
    .bk-stat-val { font-family:var(--font-brand); font-size:1.15rem; font-weight:700; color:var(--gold); }
    .bk-stat-lbl { font-size:0.5rem; color:var(--muted); letter-spacing:1.2px; text-transform:uppercase; font-weight:600; margin-top:2px; text-align:center; }

    /* ── BOOKING SECTIONS ── */
    .bk-sec { padding:11px 18px; border-bottom:1px solid var(--border); }
    .bk-sec:last-child { border-bottom:none; }
    .bk-sec-t { font-size:0.53rem; color:var(--muted); letter-spacing:2.5px; text-transform:uppercase; font-weight:700; margin-bottom:9px; }
    .bk-dr { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); }
    .bk-dr:last-child { border-bottom:none; }
    .bk-dl { font-size:0.58rem; color:var(--muted); letter-spacing:1px; text-transform:uppercase; font-weight:600; }
    .bk-dv { font-size:0.78rem; font-weight:600; color:var(--text); }
    .bk-dv.g  { color:var(--gold); }
    .bk-dv.gr { color:var(--green); }
    .bk-dv.or { color:var(--orange); }
    .bk-note { padding:9px 11px; background:var(--card2); border-radius:9px; font-size:0.7rem; color:var(--muted); line-height:1.5; border-left:2px solid var(--gold2); font-style:italic; }
    .bk-pay { background:var(--card); border:1px solid var(--border2); border-radius:11px; padding:11px 13px; position:relative; overflow:hidden; }
    .bk-pay::before { content:''; position:absolute; top:0; left:0; right:0; height:1.5px; background:linear-gradient(90deg,transparent,var(--gold2),transparent); opacity:0.45; }
    .bk-pr { display:flex; justify-content:space-between; font-size:0.72rem; color:var(--muted); margin-bottom:5px; }
    .bk-pr .gr { color:var(--green); }
    .bk-pr.tot { font-family:var(--font-brand); font-size:1.05rem; font-weight:700; color:var(--gold); padding-top:7px; border-top:1px solid var(--border); margin-top:3px; margin-bottom:0; }
    .bk-hrow { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border); }
    .bk-hrow:last-child { border-bottom:none; }
    .bk-hd { font-size:0.6rem; color:var(--muted); min-width:46px; }
    .bk-hs { font-size:0.72rem; font-weight:600; color:var(--text); flex:1; }
    .bk-hb { font-size:0.6rem; color:var(--muted); }
    .bk-ha { font-size:0.72rem; font-weight:700; color:var(--gold); }

    /* ── DETAIL ROWS ── */
    .detail-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 11px 0; border-bottom: 1px solid var(--border);
    }
    .detail-row:last-child { border-bottom: none; }
    .detail-label {
      font-size: 0.62rem; color: var(--muted);
      letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
    }
    .detail-val { font-size: 0.85rem; font-weight: 600; color: var(--text); text-align: right; max-width: 60%; }

    /* ── CHECKOUT HEADER ── */
    .co-hdr {
      padding: 14px 20px 13px; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0; position: relative;
    }
    .co-hdr::after {
      content: ''; position: absolute; bottom: 0; left: 20%; right: 20%; height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold2), transparent); opacity: 0.35;
    }
    .co-hdr-title {
      font-family: var(--font-brand); font-size: 1.2rem; font-weight: 700;
      color: var(--gold); letter-spacing: 2px;
    }
    .co-hdr-close {
      width: 28px; height: 28px; border-radius: 50%;
      border: 1px solid var(--border2); background: var(--card);
      color: var(--muted); display: flex; align-items: center;
      justify-content: center; font-size: 0.72rem; cursor: pointer;
    }

    /* ── CHECKOUT CLIENT STRIP ── */
    .co-client-strip {
      padding: 11px 20px; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 12px;
      flex-shrink: 0; background: var(--bg);
    }
    .co-client-strip:empty { display: none; }
    .co-av {
      width: 38px; height: 38px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.82rem; font-weight: 700; color: #080808;
      border: 1.5px solid var(--gold); flex-shrink: 0;
    }
    .co-client-name { font-size: 0.88rem; font-weight: 600; color: var(--text); }
    .co-client-meta { font-size: 0.62rem; color: var(--muted); margin-top: 2px; }
    .co-pts-badge {
      font-size: 0.65rem; font-weight: 700; color: var(--gold);
      background: var(--gold-dim); border: 1px solid var(--gold2);
      padding: 2px 8px; border-radius: 99px; white-space: nowrap; flex-shrink: 0;
    }

    /* ── CHECKOUT BODY ── */
    .co-section { margin-bottom: 18px; }
    .section-lbl {
      font-size: 0.55rem; color: var(--muted);
      letter-spacing: 2.5px; text-transform: uppercase;
      font-weight: 700; margin-bottom: 10px; font-family: var(--font-ui);
    }
    .co-total-card {
      background: var(--card); border: 1px solid var(--border2);
      border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
      position: relative; overflow: hidden;
    }
    .co-total-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
      background: linear-gradient(90deg, transparent, var(--gold2), transparent); opacity: 0.45;
    }
    .co-row {
      display: flex; justify-content: space-between;
      font-size: 0.78rem; color: var(--muted); margin-bottom: 7px;
    }
    .co-row.final {
      font-family: var(--font-brand); font-size: 1.35rem; font-weight: 700;
      color: var(--gold); margin-bottom: 0; padding-top: 10px;
      border-top: 1px solid var(--border); margin-top: 4px;
    }
    .method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .method-btn {
      padding: 11px 8px; background: var(--card);
      border: 1.5px solid var(--border); border-radius: 12px;
      color: var(--muted); font-size: 0.7rem; font-weight: 600;
      font-family: var(--font-ui); cursor: pointer;
      display: flex; flex-direction: column; align-items: center;
      gap: 5px; transition: all 0.15s; -webkit-tap-highlight-color: transparent;
    }
    .method-btn.active { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); }
    .method-icon { font-size: 1.25rem; }
    .tip-row { display: flex; gap: 6px; }
    .tip-btn {
      flex: 1; padding: 9px 4px; background: var(--card);
      border: 1.5px solid var(--border); border-radius: 10px;
      color: var(--muted); font-size: 0.78rem; font-weight: 600;
      font-family: var(--font-ui); cursor: pointer; text-align: center;
      -webkit-tap-highlight-color: transparent; transition: all 0.15s;
    }
    .tip-btn.active { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); }
    .custom-tip {
      width: 100%; padding: 11px 14px; background: var(--card);
      border: 1.5px solid var(--border); border-radius: 10px;
      color: var(--text); font-size: 0.95rem; margin-top: 8px;
      outline: none; font-family: var(--font-ui);
    }
    .custom-tip:focus { border-color: var(--gold); }
    .co-confirm-btn {
      width: 100%; padding: 15px; background: var(--gold);
      border: none; border-radius: 12px;
      color: #080705; font-size: 0.85rem; font-weight: 700;
      letter-spacing: 1.5px; cursor: pointer; margin-top: 4px;
      font-family: var(--font-ui); -webkit-tap-highlight-color: transparent;
    }
    .co-confirm-btn:active { opacity: 0.85; }

    /* ── CLIENTS ── */
    .search-wrap {
      display: flex; align-items: center; gap: 10px;
      background: var(--card); border: 1.5px solid var(--border);
      border-radius: 12px; padding: 11px 14px; margin-bottom: 14px;
    }
    .search-wrap input {
      flex: 1; background: transparent; border: none;
      color: var(--text); font-size: 0.9rem; outline: none;
      font-family: var(--font-ui);
    }
    .search-wrap input::placeholder { color: var(--muted); }
    .client-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 14px; padding: 13px 14px; margin-bottom: 9px;
      cursor: pointer; display: flex; align-items: center; gap: 12px;
      -webkit-tap-highlight-color: transparent; transition: background 0.1s;
    }
    .client-card:active { background: var(--card2); }
    .client-av {
      width: 42px; height: 42px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; font-weight: 700; color: #080808; flex-shrink: 0;
    }
    .client-name { font-size: 0.9rem; font-weight: 700; color: var(--text); }
    .client-meta { font-size: 0.68rem; color: var(--muted); margin-top: 2px; }
    .pts-badge { font-size: 0.7rem; font-weight: 700; color: var(--gold); flex-shrink: 0; }

    /* ── FORM ── */
    .form-group { margin-bottom: 14px; }
    .form-lbl {
      font-size: 0.6rem; color: var(--muted);
      letter-spacing: 1.5px; text-transform: uppercase;
      font-weight: 700; margin-bottom: 7px; display: block;
      font-family: var(--font-ui);
    }
    .sel {
      width: 100%; padding: 13px 14px;
      background: var(--card); border: 1.5px solid var(--border);
      border-radius: 12px; color: var(--text); font-size: 0.9rem;
      outline: none; appearance: none; -webkit-appearance: none;
      font-family: var(--font-ui);
    }
    .sel:focus { border-color: var(--gold); }
    .textarea {
      width: 100%; padding: 12px 14px;
      background: var(--card); border: 1.5px solid var(--border);
      border-radius: 12px; color: var(--text); font-size: 0.9rem;
      outline: none; resize: none; min-height: 80px; font-family: var(--font-ui);
    }
    .textarea:focus { border-color: var(--gold); }

    /* ── NEW TYPE BUTTONS ── */
    .type-row {
      display: flex; gap: 8px; padding: 12px 14px;
      border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .type-btn {
      flex: 1; padding: 11px 6px; border-radius: 11px;
      border: 1.5px solid var(--border); background: var(--card);
      color: var(--muted); font-size: 0.72rem; font-weight: 700;
      font-family: var(--font-ui); cursor: pointer;
      -webkit-tap-highlight-color: transparent; transition: all 0.15s;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
    }
    .type-btn.active { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); }
    .type-btn-icon { font-size: 1.3rem; }

    /* ── MODE BANNER ── */
    .mode-banner {
      display: flex; align-items: center; gap: 9px;
      padding: 9px 16px; flex-shrink: 0;
      font-size: 0.75rem; font-weight: 600; font-family: var(--font-ui);
      border-bottom: 1px solid var(--border); letter-spacing: 0.2px;
    }
    .mode-banner:empty { display: none; }
    .mode-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .mode-banner.today { background: rgba(61,139,94,0.07); color: var(--green); }
    .mode-banner.today .mode-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(61,139,94,0.2); }
    .mode-banner.future { background: var(--gold-dim); color: var(--gold); }
    .mode-banner.future .mode-dot { background: var(--gold); box-shadow: 0 0 0 3px rgba(200,200,200,0.18); }

    /* ── DATE PILLS ── */
    .date-pills { display: flex; gap: 6px; flex-wrap: wrap; }
    .dp {
      padding: 7px 13px; border-radius: 99px;
      border: 1.5px solid var(--border); background: var(--card);
      color: var(--muted); font-size: 0.73rem; font-weight: 600;
      font-family: var(--font-ui); cursor: pointer;
      -webkit-tap-highlight-color: transparent; transition: all 0.15s;
      white-space: nowrap;
    }
    .dp.on { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); }
    .dp:active { opacity: 0.7; }

    /* ── BARBER AVATAR ROW ── */
    .barber-row { display: flex; gap: 10px; flex-wrap: wrap; }
    .barber-av {
      display: flex; flex-direction: column; align-items: center;
      gap: 5px; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .barber-circle {
      width: 46px; height: 46px; border-radius: 50%;
      border: 2px solid var(--border2);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.78rem; font-weight: 700; color: #080808;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .barber-av.active .barber-circle {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(200,200,200,0.18);
    }
    .barber-av-name {
      font-size: 0.6rem; color: var(--muted);
      font-weight: 600; font-family: var(--font-ui);
    }
    .barber-av.active .barber-av-name { color: var(--gold); }

    /* ── DURATION PILLS ── */
    .dur-row { display: flex; gap: 6px; }
    .dur-btn {
      flex: 1; padding: 9px 4px; background: var(--card);
      border: 1px solid var(--border2); border-radius: 10px;
      font-size: 0.75rem; font-weight: 600; color: var(--muted);
      text-align: center; cursor: pointer; font-family: var(--font-ui);
      -webkit-tap-highlight-color: transparent; transition: all 0.15s;
    }
    .dur-btn.active { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); }

    /* ── SLOT PICKER ── */
    .slot-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
    .slot-btn {
      padding: 9px 12px; border-radius: 9px; font-size: 0.8rem;
      font-weight: 600; font-family: var(--font-ui);
      border: 1.5px solid var(--border); background: var(--card);
      color: var(--text); cursor: pointer;
      -webkit-tap-highlight-color: transparent; transition: all 0.12s;
      letter-spacing: 0.3px;
    }
    .slot-btn:active { opacity: 0.7; }
    .slot-btn.sel  { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); }
    .slot-btn.busy { background: transparent; border-color: var(--border); color: var(--muted); cursor: not-allowed; opacity: 0.35; text-decoration: line-through; }
    .slot-btn.past { opacity: 0.28; cursor: not-allowed; }
    .closed-msg {
      padding: 14px; background: rgba(155,58,58,0.08);
      border: 1px solid rgba(155,58,58,0.2);
      border-radius: 10px; color: var(--red);
      font-size: 0.82rem; font-weight: 600;
    }

    /* ── MISC ── */
    .loader { display: flex; align-items: center; justify-content: center; padding: 48px; }
    .spinner {
      width: 26px; height: 26px;
      border: 2px solid var(--border2);
      border-top-color: var(--gold);
      border-radius: 50%; animation: spin 0.75s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .divider { height: 1px; background: var(--border); margin: 4px 0; }
    .chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5px; }
    .chip-gold   { background: var(--gold-dim); color: var(--gold); }
    .chip-purple { background: rgba(156,109,192,0.12); color: #b07fd8; }
    .chip-green  { background: rgba(61,139,94,0.12); color: var(--green); }

    /* ── TOAST ── */
    .toast {
      position: fixed;
      bottom: calc(68px + var(--safe-bot) + 14px);
      left: 50%; transform: translateX(-50%) translateY(16px);
      background: var(--card2); border: 1px solid var(--border);
      border-radius: 10px; padding: 10px 20px;
      font-size: 0.82rem; color: var(--text); opacity: 0;
      transition: all 0.25s; z-index: 300;
      white-space: nowrap; pointer-events: none;
      font-family: var(--font-ui);
    }
    .toast.show  { opacity: 1; transform: translateX(-50%) translateY(0); }
    .toast.success { border-color: var(--green); color: var(--green); }
    .toast.error   { border-color: var(--red);   color: var(--red);   }

    /* ── CHECKOUT SUCCESS ── */
    .co-succ { display:flex;flex-direction:column;align-items:center;padding:32px 20px 24px;text-align:center; }
    .co-succ-icon { position:relative;width:90px;height:90px;margin-bottom:24px; }
    .co-succ-glow { position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,rgba(200,200,200,0.18) 0%,transparent 70%);animation:coSuccGlow 1.8s ease-in-out infinite; }
    @keyframes coSuccGlow { 0%,100%{transform:scale(0.9);opacity:0.6;} 50%{transform:scale(1.1);opacity:1;} }
    .co-succ-ring { width:90px;height:90px;border-radius:50%;background:rgba(200,200,200,0.08);border:1.5px solid rgba(200,200,200,0.3);display:flex;align-items:center;justify-content:center;animation:coSuccPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
    @keyframes coSuccPop { from{transform:scale(0);opacity:0;} to{transform:scale(1);opacity:1;} }
    .co-succ-check { width:50px;height:50px; }
    .co-succ-tick { stroke-dasharray:30;stroke-dashoffset:30;animation:coSuccTick 0.4s ease 0.35s forwards; }
    @keyframes coSuccTick { to{stroke-dashoffset:0;} }
    .co-succ-amt { font-family:var(--font-brand);font-size:3rem;font-weight:700;color:var(--gold);line-height:1;margin-bottom:5px;animation:coSuccUp 0.4s ease 0.2s both; }
    .co-succ-label { font-size:0.62rem;color:var(--muted);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:22px;animation:coSuccUp 0.4s ease 0.3s both; }
    @keyframes coSuccUp { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
    .co-succ-card { width:100%;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:14px;animation:coSuccUp 0.4s ease 0.4s both; }
    .co-succ-card::before { content:'';display:block;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold2),transparent);margin:-14px -16px 12px;border-radius:14px 14px 0 0; }
    .co-succ-name { font-family:var(--font-brand);font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:8px; }
    .co-succ-row { display:flex;justify-content:space-between;font-size:0.75rem;color:var(--muted);padding:3px 0; }
    .co-succ-row + .co-succ-row { border-top:1px solid var(--border);margin-top:4px;padding-top:7px; }
    .co-succ-pts { font-size:0.82rem;color:var(--gold);font-weight:600;background:var(--gold-dim);padding:9px 20px;border-radius:99px;border:1px solid rgba(200,200,200,0.2);animation:coSuccUp 0.4s ease 0.5s both; }

    /* ── FILTER PILLS ── */
    .fp { display:flex;gap:6px;padding:0 0 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; }
    .fp::-webkit-scrollbar { display:none; }
    .fp-pill { flex-shrink:0;padding:5px 13px;border-radius:99px;border:1px solid var(--border2);background:transparent;color:var(--muted);font-size:0.68rem;font-weight:600;cursor:pointer;letter-spacing:0.3px;font-family:var(--font-ui); }
    .fp-pill.active { background:var(--gold-dim);border-color:var(--gold2);color:var(--gold); }

    /* ── STATS STRIP (clients screen) ── */
    .sstat-strip { display:flex;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:12px; }
    .sstat { flex:1;display:flex;flex-direction:column;align-items:center;padding:9px 4px;border-right:1px solid var(--border);background:var(--card); }
    .sstat:last-child { border-right:none; }
    .sstat-val { font-family:var(--font-brand);font-size:1.05rem;font-weight:700;color:var(--gold);line-height:1; }
    .sstat-lbl { font-size:0.48rem;color:var(--muted);letter-spacing:1.2px;text-transform:uppercase;font-weight:600;margin-top:2px; }

    /* ── CLIENT LIST ROWS ── */
    .client-row { display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.1s;-webkit-tap-highlight-color:transparent;margin:0 -14px; }
    .client-row:active { background:var(--card2); }
    .client-row:last-child { border-bottom:none; }
    .c-av { width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.82rem;font-weight:700;color:#080808;flex-shrink:0;position:relative; }
    .c-av .member-ring { position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--purple);opacity:0.7; }
    .c-info { flex:1;min-width:0; }
    .c-name { font-size:0.86rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px; }
    .c-meta { font-size:0.62rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .c-right { display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0; }
    .c-pts { font-size:0.65rem;font-weight:700;color:var(--gold); }
    .c-visits { font-size:0.58rem;color:var(--muted); }
    .member-badge { font-size:0.5rem;font-weight:700;color:var(--purple);background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.25);padding:1px 5px;border-radius:99px;letter-spacing:0.5px; }

    /* ── CLIENT SHEET ── */
    #cl-sheet .sheet-header { display:none; }
    #cl-sheet .sheet-body { padding:0; }
    .c-hero { padding:16px 18px 14px;border-bottom:1px solid var(--border);position:relative;flex-shrink:0; }
    .c-hero::before { content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold2),transparent);opacity:0.5; }
    .c-hero-top { display:flex;align-items:center;gap:13px;margin-bottom:12px; }
    .c-hero-av { width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:#080808;flex-shrink:0;border:2px solid var(--gold2);position:relative; }
    .c-hero-av .member-ring { position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--purple);opacity:0.6; }
    .c-hero-name { font-family:var(--font-brand);font-size:1.25rem;font-weight:700;color:var(--text);line-height:1.1; }
    .c-hero-sub { font-size:0.65rem;color:var(--muted);margin-top:3px; }
    .c-hero-badges { display:flex;gap:6px;flex-wrap:wrap; }
    .badge { display:inline-flex;align-items:center;padding:3px 8px;border-radius:99px;font-size:0.54rem;font-weight:700;letter-spacing:0.5px; }

    /* ── QUICK ACTIONS ── */
    .qa-row { display:flex;gap:7px;padding:11px 18px;border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0; }
    .qa { flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px;border-radius:11px;border:1px solid var(--border2);background:var(--card);cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent; }
    .qa:active { opacity:0.7; }
    .qa-icon { font-size:1.1rem;line-height:1; }
    .qa-lbl { font-size:0.54rem;font-weight:700;letter-spacing:0.3px;font-family:var(--font-ui);color:var(--muted);text-align:center; }

    /* ── CLIENT STATS GRID ── */
    .c-stats { display:flex;border-bottom:1px solid var(--border);flex-shrink:0; }
    .cs { flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 4px;border-right:1px solid var(--border);background:var(--card2); }
    .cs:last-child { border-right:none; }
    .cs-val { font-family:var(--font-brand);font-size:1.15rem;font-weight:700;color:var(--gold);line-height:1; }
    .cs-lbl { font-size:0.48rem;color:var(--muted);letter-spacing:1.2px;text-transform:uppercase;font-weight:600;margin-top:2px;text-align:center; }

    /* ── LOYALTY BAR ── */
    .loyalty-wrap { display:flex;flex-direction:column;gap:6px; }
    .loyalty-track { height:4px;background:var(--border2);border-radius:99px;overflow:hidden; }
    .loyalty-fill { height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width 0.5s ease; }
    .loyalty-meta { display:flex;justify-content:space-between;font-size:0.6rem;color:var(--muted); }

    /* ── DETAIL SECTIONS ── */
    .sec { padding:10px 18px;border-bottom:1px solid var(--border); }
    .sec:last-child { border-bottom:none; }
    .sec-t { font-size:0.52rem;color:var(--muted);letter-spacing:2.5px;text-transform:uppercase;font-weight:700;margin-bottom:8px; }
    .dr { display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border); }
    .dr:last-child { border-bottom:none; }
    .dl { font-size:0.58rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase;font-weight:600; }
    .dv { font-size:0.78rem;font-weight:600;color:var(--text); }
    .dv.g { color:var(--gold); }
    .dv.gr { color:var(--green); }
    .note { padding:9px 11px;background:var(--card2);border-radius:9px;font-size:0.7rem;color:var(--muted);line-height:1.5;border-left:2px solid var(--gold2);font-style:italic; }

    /* ── VISIT HISTORY ROWS ── */
    .vrow { display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border); }
    .vrow:last-child { border-bottom:none; }
    .vdate { font-size:0.6rem;color:var(--muted);min-width:44px;flex-shrink:0; }
    .vsvc { font-size:0.72rem;font-weight:600;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .vbarber { font-size:0.6rem;color:var(--muted);flex-shrink:0; }
    .vamt { font-size:0.72rem;font-weight:700;color:var(--gold);flex-shrink:0; }

    /* ── SPLASH ── */
    #splash {
      position: fixed; inset: 0; z-index: 9999;
      background: #080705;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 0; pointer-events: none;
    }
    #splash::before {
      content: ''; position: absolute;
      width: 320px; height: 320px; border-radius: 50%;
      background: radial-gradient(circle, rgba(200,200,200,0.06) 0%, transparent 70%);
      animation: splashGlow 2.4s ease-in-out infinite;
    }
    @keyframes splashGlow {
      0%,100% { transform: scale(0.9); opacity: 0.6; }
      50%      { transform: scale(1.1); opacity: 1; }
    }
    .splash-logo {
      width: 96px; height: 96px; border-radius: 24px;
      background: #1a1610; border: 1px solid #2a2218;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden; z-index: 1;
      animation: splashLogoIn 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
    }
    @keyframes splashLogoIn {
      from { opacity: 0; transform: scale(0.6); }
      to   { opacity: 1; transform: scale(1); }
    }
    .splash-logo::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, transparent 30%, rgba(200,200,200,0.12) 50%, transparent 70%);
      animation: splashShimmer 2.2s ease-in-out 0.8s infinite;
    }
    @keyframes splashShimmer {
      0%   { transform: translateX(-100%) translateY(-100%); }
      100% { transform: translateX(100%)  translateY(100%); }
    }
    .splash-logo::after {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
      background: linear-gradient(90deg, transparent, #c8c8c8, transparent);
      animation: splashLineIn 0.5s ease 0.7s both;
    }
    @keyframes splashLineIn { from { opacity: 0; } to { opacity: 1; } }
    .splash-monogram {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.8rem; font-weight: 700;
      color: #c8c8c8; letter-spacing: 2px;
      position: relative; z-index: 1;
    }
    .splash-brand {
      margin-top: 28px; text-align: center; z-index: 1;
      animation: splashBrandIn 0.6s ease 0.75s both;
    }
    @keyframes splashBrandIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .splash-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.9rem; font-weight: 700;
      color: #c8c8c8; letter-spacing: 6px; line-height: 1;
    }
    .splash-divider {
      display: flex; align-items: center; gap: 10px;
      margin: 10px 0 7px;
    }
    .splash-line { flex: 1; height: 1px; background: #332a1a; }
    .splash-dot  { width: 4px; height: 4px; border-radius: 50%; background: #a07828; }
    .splash-sub  { font-size: 0.6rem; color: #6b5f43; letter-spacing: 3.5px; font-weight: 500; }
    .splash-loader {
      position: absolute; bottom: 52px; width: 120px; z-index: 1;
      animation: splashLoaderIn 0.4s ease 1.1s both;
    }
    @keyframes splashLoaderIn { from { opacity: 0; } to { opacity: 1; } }
    .loader-track { height: 1.5px; background: #2a2218; border-radius: 99px; overflow: hidden; }
    .loader-fill  {
      height: 100%; width: 0;
      background: linear-gradient(90deg, #a07828, #c8c8c8, #ffe580);
      border-radius: 99px;
      animation: splashLoadFill 1.6s cubic-bezier(0.4,0,0.2,1) 1.2s forwards;
    }
    @keyframes splashLoadFill {
      0%   { width: 0; }
      60%  { width: 75%; }
      85%  { width: 90%; }
      100% { width: 100%; }
    }
    .loader-label { font-size: 0.52rem; color: #4a4030; letter-spacing: 2px; text-align: center; margin-top: 8px; }
    #splash.exit {
      animation: splashExit 0.55s cubic-bezier(0.4,0,1,1) forwards;
      pointer-events: none;
    }
    @keyframes splashExit {
      0%   { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(1.06); }
    }