*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg-primary:#141414;--bg-secondary:#1A1A1A;--bg-tertiary:#222222;--bg-card:#1C1C1C;
  --text-primary:#F2F0EB;--text-secondary:#8C8478;--text-tertiary:#5C564E;
  --accent:#5A9E8F;--accent-blue:#7BB8AC;--accent-orange:#D4845A;--accent-red:#C4553A;
  --accent-venmo:#3d95ce;
  --accent-gold:#D4A03C;
  --border:rgba(255,255,255,0.07);--radius:14px;--radius-sm:10px;
  --font-body:'DM Sans',sans-serif;--font-mono:'Space Mono',monospace;
  --nav-height:72px;--header-height:56px;
}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
input,select,textarea,button{font-family:inherit;font-size:inherit;border:none;outline:none;background:none;color:inherit}
button{cursor:pointer}
a{color:var(--accent-blue);text-decoration:none}

/* LOADING */
#loadingScreen{position:fixed;inset:0;background:var(--bg-primary);z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .4s}
#loadingScreen.hidden{opacity:0;pointer-events:none}
.loading-logo{font-family:var(--font-mono);font-size:32px;font-weight:700;letter-spacing:-1px;margin-bottom:16px}
.loading-logo span{color:var(--accent)}
.loading-spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* APP SHELL */
#app{display:flex;flex-direction:column;height:100%;overflow:hidden}
.header{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;background:var(--bg-primary);border-bottom:1px solid var(--border);flex-shrink:0;z-index:100}
.header-logo{font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:-0.5px;cursor:pointer}
.header-logo span{color:var(--accent)}
.header-right{display:flex;align-items:center;gap:12px}
.header-sync{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-tertiary)}
.sync-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sync-dot.offline{background:var(--accent-red)}
.header-avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#000;cursor:pointer}
.main{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom)}
.main.has-nav{padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom))}
.main::-webkit-scrollbar{width:0}

/* BOTTOM NAV */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-height);
  background:var(--bg-secondary);border-top:1px solid var(--border);
  display:none;align-items:center;justify-content:space-around;z-index:100;
  padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav.visible{display:flex}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 12px;color:var(--text-tertiary);font-size:10px;font-weight:500;
  transition:color .2s;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav-item.active{color:var(--accent)}
.nav-item svg{width:22px;height:22px}

/* SCREENS */
.screen{display:none;padding:24px 20px 32px;min-height:100%;animation:fadeIn .25s ease}
.screen.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* TYPOGRAPHY */
.section-title{font-size:22px;font-weight:700;margin-bottom:16px;letter-spacing:-0.3px}
.section-subtitle{font-size:14px;color:var(--text-secondary);margin-bottom:20px;line-height:1.5}
.label{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:8px}

/* CARDS */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:12px}
.card-row{display:flex;align-items:center;justify-content:space-between}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.stat-value{font-family:var(--font-mono);font-size:26px;font-weight:700;letter-spacing:-1px}
.stat-label{font-size:12px;color:var(--text-secondary);margin-top:4px}
.stat-value.green{color:var(--accent)}
.stat-value.blue{color:var(--accent-blue)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;
  transition:all .2s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent}
.btn-primary{background:var(--accent);color:#000}
.btn-primary:active{transform:scale(0.97);filter:brightness(0.9)}
.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border)}
.btn-secondary:active{background:var(--bg-card)}
.btn-danger{background:rgba(255,71,87,0.12);color:var(--accent-red);border:1px solid rgba(255,71,87,0.2)}
.btn-small{padding:10px 16px;font-size:13px;border-radius:8px}
.btn-block{width:100%}
.btn-disabled{opacity:0.4;pointer-events:none}
.btn-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;background:var(--bg-tertiary);border:1px solid var(--border);transition:all .2s;font-size:16px}
.btn-icon:active{transform:scale(0.93)}

/* ACTION GRID */
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.action-btn{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 12px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);font-size:12px;font-weight:500;color:var(--text-secondary);transition:all .2s;cursor:pointer}
.action-btn:active{transform:scale(0.96);border-color:var(--accent)}
.action-btn svg{width:24px;height:24px;color:var(--accent)}

/* FORMS */
.input-group{margin-bottom:16px}
.input-group label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:0.6px;margin-bottom:8px}
.input{width:100%;padding:14px 16px;background:var(--bg-tertiary);border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:15px;color:var(--text-primary);transition:border-color .2s}
.input:focus{border-color:var(--accent)}
.input::placeholder{color:var(--text-tertiary)}
select.input{-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
textarea.input{min-height:80px;resize:vertical;line-height:1.5}
input[type="time"].input{color-scheme:dark}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;
  display:none;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
.modal{width:100%;max-width:480px;max-height:85vh;overflow-y:auto;
  background:var(--bg-secondary);border-radius:20px 20px 0 0;padding:24px 20px 32px;
  animation:slideUp .3s cubic-bezier(.16,1,.3,1)}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-handle{width:36px;height:4px;background:var(--text-tertiary);border-radius:2px;margin:0 auto 20px}
.modal-title{font-size:18px;font-weight:700;margin-bottom:20px}

/* TOAST */
.toast-container{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:999;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;width:90%;max-width:400px}
.toast{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;
  padding:14px 18px;font-size:14px;font-weight:500;text-align:center;
  opacity:0;transform:translateY(-10px);transition:all .3s cubic-bezier(.16,1,.3,1)}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{border-color:rgba(90,158,143,0.3);color:var(--accent)}
.toast.error{border-color:rgba(255,71,87,0.3);color:var(--accent-red)}

/* AUTH SCREENS */
.auth-container{max-width:380px;margin:0 auto;padding:60px 20px;text-align:center}
.auth-title{font-size:20px;font-weight:700;margin-bottom:24px}
.auth-container .input-group{text-align:left}
.auth-links{margin-top:20px;display:flex;justify-content:center;gap:20px;font-size:13px}
.auth-links a{color:var(--text-secondary)}
.auth-links a:hover{color:var(--accent)}

/* LANDING */
.landing-container{max-width:480px;margin:0 auto;text-align:center;padding:60px 20px}
.landing-tagline{font-size:18px;color:var(--text-secondary);margin-bottom:40px;line-height:1.6}
.landing-features{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.feature-card{padding:20px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}
.feature-icon{margin-bottom:10px;color:var(--accent);display:flex;justify-content:center}
.feature-title{font-size:13px;font-weight:600;margin-bottom:4px}
.feature-desc{font-size:11px;color:var(--text-tertiary)}

/* ONBOARDING */
.onboarding{display:flex;flex-direction:column;align-items:center;min-height:100%;padding:40px 20px;text-align:center}
.onboarding-logo{font-family:var(--font-mono);font-size:32px;font-weight:700;margin-bottom:8px}
.onboarding-logo span{color:var(--accent)}
.onboarding-sub{font-size:14px;color:var(--text-secondary);margin-bottom:32px;line-height:1.5}
.onboarding-steps{display:flex;gap:8px;margin-bottom:32px}
.ob-step-dot{width:48px;height:4px;border-radius:2px;background:var(--bg-tertiary);transition:background .3s}
.ob-step-dot.active{background:var(--accent)}
.ob-step-dot.done{background:var(--accent);opacity:0.5}
.ob-form{width:100%;max-width:380px;text-align:left}
.ob-heading{text-align:center;margin-bottom:24px}
.ob-title{font-size:18px;font-weight:700;margin-bottom:4px}
.ob-subtitle{font-size:13px;color:var(--text-secondary)}
.pay-check{width:24px;height:24px;border:2px solid var(--border);border-radius:6px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}

/* BOOKING CLIENT FLOW */
.client-flow{max-width:480px;margin:0 auto}
.trainer-header{text-align:center;padding:20px 0 28px}
.trainer-avatar{width:72px;height:72px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#000;margin:0 auto 16px}
.trainer-name{font-size:24px;font-weight:700;margin-bottom:4px}
.trainer-credentials{font-size:14px;color:var(--text-secondary);margin-bottom:4px}
.trainer-bio{font-size:13px;color:var(--text-tertiary);margin-bottom:8px;line-height:1.5}
.trainer-location{font-size:13px;color:var(--text-tertiary)}

.service-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;margin-bottom:10px;cursor:pointer;transition:all .2s}
.service-card:active{transform:scale(0.98)}
.service-card.selected{border-color:var(--accent);background:rgba(90,158,143,0.04)}
.svc-name{font-size:16px;font-weight:600}
.svc-meta{font-size:13px;color:var(--text-secondary);margin-top:4px}
.svc-price{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--accent-gold)}
.svc-desc{font-size:13px;color:var(--text-tertiary);margin-top:8px;line-height:1.4}

.date-scroll{display:flex;gap:8px;overflow-x:auto;padding:4px 0 16px;-webkit-overflow-scrolling:touch}
.date-scroll::-webkit-scrollbar{display:none}
.date-card{min-width:72px;padding:14px 10px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);text-align:center;cursor:pointer;transition:all .2s;flex-shrink:0}
.date-card:active{transform:scale(0.95)}
.date-card.selected{border-color:var(--accent);background:rgba(90,158,143,0.06)}
.date-card.unavailable{opacity:0.35;pointer-events:none}
.date-card .dc-day{font-size:11px;color:var(--text-secondary);font-weight:500;text-transform:uppercase}
.date-card .dc-date{font-size:22px;font-weight:700;margin:4px 0}
.date-card .dc-slots{font-size:11px;color:var(--accent);font-weight:600}
.date-card .dc-slots.none{color:var(--text-tertiary)}

.time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px}
.time-slot{padding:14px 8px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-sm);text-align:center;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.time-slot:active{transform:scale(0.95)}
.time-slot.selected{border-color:var(--accent);background:rgba(90,158,143,0.06);color:var(--accent)}
.time-slot.booked{opacity:0.3;pointer-events:none;text-decoration:line-through}

.confirmation{text-align:center;padding:40px 0}
.confirm-check{width:72px;height:72px;border-radius:50%;background:rgba(90,158,143,0.12);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.confirm-check svg{width:36px;height:36px;color:var(--accent)}

/* CLIENTS */
.client-item{display:flex;align-items:center;gap:14px;padding:16px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px}
.client-avatar{width:44px;height:44px;border-radius:50%;background:var(--bg-tertiary);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--accent-blue);flex-shrink:0}
.client-info{flex:1;min-width:0}
.client-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-meta{font-size:12px;color:var(--text-secondary);margin-top:2px}
.client-spent{font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--accent-gold)}

/* SETTINGS */
.settings-section{margin-bottom:28px}
.settings-row{display:flex;align-items:center;justify-content:space-between;
  padding:16px;background:var(--bg-card);border:1px solid var(--border);margin-bottom:-1px}
.settings-row:first-child{border-radius:var(--radius) var(--radius) 0 0}
.settings-row:last-child{border-radius:0 0 var(--radius) var(--radius);margin-bottom:0}
.settings-row:only-child{border-radius:var(--radius)}
.settings-row .sr-label{font-size:14px;font-weight:500}
.settings-row .sr-value{font-size:13px;color:var(--text-secondary)}
.settings-row .sr-status{display:flex;align-items:center;gap:6px;font-size:13px}
.status-dot{width:8px;height:8px;border-radius:50%}
.status-dot.green{background:var(--accent)}
.status-dot.red{background:var(--accent-red)}
.status-dot.blue{background:var(--accent-venmo)}

.service-row{display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:var(--bg-card);border:1px solid var(--border);margin-bottom:-1px;cursor:pointer;transition:background .15s}
.service-row:first-child{border-radius:var(--radius) var(--radius) 0 0}
.service-row:last-child{border-radius:0 0 var(--radius) var(--radius);margin-bottom:0}
.service-row:only-child{border-radius:var(--radius)}
.service-row:active{background:var(--bg-tertiary)}
.service-row .sr-info{flex:1;min-width:0}
.service-row .sr-name{font-size:14px;font-weight:600}
.service-row .sr-detail{font-size:12px;color:var(--text-secondary);margin-top:2px}
.service-row .sr-price{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--accent-gold)}
.service-row .sr-remove{width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--text-tertiary);font-size:18px;border-radius:8px;transition:all .15s;flex-shrink:0}
.service-row .sr-remove:hover{color:var(--accent-red);background:rgba(255,71,87,0.1)}

/* WEEKLY TEMPLATE GRID */
.template-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px}
.template-day{padding:12px 4px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-sm);text-align:center;cursor:pointer;transition:all .2s}
.template-day:active{transform:scale(0.95)}
.template-day.active{border-color:rgba(90,158,143,0.3);background:rgba(90,158,143,0.04)}
.template-day .td-name{font-size:12px;font-weight:700;margin-bottom:4px}
.template-day .td-hours{font-size:9px;color:var(--text-tertiary);line-height:1.3}
.template-day.active .td-hours{color:var(--accent)}

/* AVAILABILITY GRID */
.week-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.week-label{font-size:15px;font-weight:600}
.avail-grid{display:grid;grid-template-columns:48px repeat(7,1fr);gap:2px;margin-bottom:24px}
.avail-header{font-size:11px;font-weight:600;text-align:center;padding:8px 2px;color:var(--text-secondary);position:sticky;top:0;background:var(--bg-primary);z-index:10}
.avail-time{font-size:10px;color:var(--text-tertiary);display:flex;align-items:center;justify-content:flex-end;padding-right:6px}
.avail-cell{aspect-ratio:1;border-radius:4px;background:var(--bg-card);border:1px solid var(--border);
  cursor:pointer;transition:all .15s;min-height:28px}
.avail-cell:active{transform:scale(0.9)}
.avail-cell.selected{background:rgba(90,158,143,0.25);border-color:rgba(90,158,143,0.4)}
.avail-cell.booked{background:rgba(77,166,255,0.2);border-color:rgba(77,166,255,0.3);cursor:default}
.avail-cell.gcal-busy{background:rgba(255,165,0,0.2);border-color:rgba(255,165,0,0.4);cursor:default;background-image:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(255,165,0,0.25) 3px,rgba(255,165,0,0.25) 6px)}
.avail-cell.past{opacity:0.15;pointer-events:none}

/* SCHEDULE */
.schedule-item{display:flex;gap:14px;padding:16px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;cursor:pointer;transition:all .15s}
.schedule-item:active{transform:scale(0.98)}
.schedule-time{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent);min-width:64px}
.schedule-date-sub{font-size:10px;color:var(--text-tertiary);font-family:var(--font-body);font-weight:400}
.schedule-info .si-name{font-size:15px;font-weight:600}
.schedule-info .si-service{font-size:13px;color:var(--text-secondary);margin-top:2px}
.schedule-info .si-amount{font-family:var(--font-mono);font-size:13px;color:var(--accent-orange);margin-top:4px}
.schedule-status{margin-left:auto;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;align-self:center;white-space:nowrap}
.schedule-status.paid{background:rgba(90,158,143,0.12);color:var(--accent)}
.schedule-status.pending{background:rgba(255,159,67,0.12);color:var(--accent-orange)}

/* BOOKING DETAIL MODAL */
.bd-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
.bd-label{font-size:13px;color:var(--text-secondary)}
.bd-value{font-size:14px;font-weight:500;text-align:right}
.bd-amount{font-family:var(--font-mono);font-weight:700;color:var(--accent-gold)}
.bd-status{font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px}
.bd-status.confirmed{background:rgba(77,166,255,0.12);color:var(--accent-blue)}
.bd-status.completed{background:rgba(90,158,143,0.12);color:var(--accent)}
.bd-status.cancelled{background:rgba(255,71,87,0.12);color:var(--accent-red)}
.bd-actions{display:flex;flex-direction:column;gap:8px;margin-top:20px}

.greeting{margin-bottom:20px}
.greeting h1{font-size:26px;font-weight:700;letter-spacing:-0.5px}
.step-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-top:8px}
.step-back{width:36px;height:36px;border-radius:10px;background:var(--bg-tertiary);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .15s;font-size:16px}
.step-back:active{transform:scale(0.9)}
.step-title{font-size:18px;font-weight:700}

.empty-state{text-align:center;padding:48px 20px;color:var(--text-tertiary)}
.empty-state svg{width:48px;height:48px;margin-bottom:16px;opacity:0.4}
.empty-state p{font-size:14px;line-height:1.6}

.copy-link-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;
  background:rgba(90,158,143,0.06);border:1px solid rgba(90,158,143,0.15);
  border-radius:var(--radius);margin-bottom:20px;cursor:pointer;transition:all .2s}
.copy-link-bar:active{transform:scale(0.98)}
.copy-link-bar .link-text{flex:1;font-size:12px;font-family:var(--font-mono);color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copy-badge{font-size:11px;font-weight:600;color:var(--accent);
  padding:4px 12px;background:rgba(90,158,143,0.12);border-radius:6px;flex-shrink:0}

.powered-by{text-align:center;padding:24px 0 8px;font-size:11px;color:var(--text-tertiary)}
.powered-by a{color:var(--accent);font-weight:600}

/* SHARE */
.share-url{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--bg-tertiary);
  border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:16px;overflow:hidden}
.share-url code{flex:1;font-family:var(--font-mono);font-size:12px;color:var(--accent-blue);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share-actions{display:flex;gap:8px}
.qr-box{width:180px;height:180px;background:#fff;border-radius:12px;margin:16px auto;
  display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden}
.qr-box img,.qr-box canvas{width:100%!important;height:100%!important}

/* PAYMENT */
.pay-methods{display:flex;gap:8px;margin-bottom:20px}
.pay-method{flex:1;padding:16px 8px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-sm);text-align:center;font-size:13px;font-weight:600;
  cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}
.pay-method.selected{border-color:var(--accent);background:rgba(90,158,143,0.06);color:var(--accent)}
.pay-method-label{letter-spacing:0.2px}

/* RESPONSIVE */
@media (max-width:380px){
  .template-grid{grid-template-columns:repeat(4,1fr)}
  .landing-features{grid-template-columns:1fr}
}
@media (min-width:768px){
  .main{max-width:640px;margin:0 auto}
  .avail-cell{min-height:36px}
}

/* ─── Credit Pack Badge ─── */
.credit-badge {
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: auto;
}

/* SETUP CHECKLIST */
.checklist{margin-bottom:24px}
.checklist-item{display:flex;align-items:center;gap:14px;padding:16px;
  background:var(--bg-card);border:1px solid var(--border);margin-bottom:-1px;cursor:pointer;transition:background .15s}
.checklist-item:first-child{border-radius:var(--radius) var(--radius) 0 0}
.checklist-item:last-child{border-radius:0 0 var(--radius) var(--radius);margin-bottom:0}
.checklist-item:active{background:var(--bg-tertiary)}
.checklist-check{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.checklist-check.done{border-color:var(--accent);background:var(--accent);color:#000;font-size:12px;font-weight:700}
.checklist-info{flex:1;min-width:0}
.checklist-label{font-size:14px;font-weight:600}
.checklist-desc{font-size:12px;color:var(--text-secondary);margin-top:2px}
.checklist-item.completed .checklist-label{color:var(--text-secondary);text-decoration:line-through}

/* ─── PARTNER CHECKOUT (/pay/:id) ─── */
#screen-partner-checkout{padding:0;min-height:100vh;
  --partner-bg:#141414;--partner-accent:#5A9E8F;--partner-text:#F2F0EB;
  background:var(--partner-bg);color:var(--partner-text)}
#screen-partner-checkout.active{display:flex;flex-direction:column}
.partner-loading{display:flex;align-items:center;justify-content:center;flex:1;min-height:60vh}
.partner-error{padding:48px 24px;text-align:center}
.partner-error h2{font-size:22px;font-weight:700;margin-bottom:10px}
.partner-error p{color:rgba(255,255,255,0.6);margin-bottom:20px;font-size:14px}
.partner-error a{color:var(--partner-accent)}
.partner-checkout{display:flex;flex-direction:column;align-items:center;
  max-width:440px;margin:0 auto;padding:40px 20px 24px;width:100%;flex:1}
.partner-logo-wrap{margin-bottom:28px;display:flex;justify-content:center;width:100%}
.partner-logo{max-height:60px;max-width:220px;object-fit:contain}
.partner-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;padding:22px;width:100%;margin-bottom:20px}
.partner-trainer-row{display:flex;align-items:center;gap:14px;padding-bottom:18px;
  margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,0.08)}
.partner-avatar{width:48px;height:48px;border-radius:50%;background:var(--partner-accent);
  color:#000;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0}
.partner-trainer-meta{min-width:0}
.partner-trainer-name{font-size:16px;font-weight:700;line-height:1.2}
.partner-trainer-cred{font-size:12px;color:rgba(255,255,255,0.55);margin-top:2px}
.partner-detail-row{display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;font-size:14px}
.partner-detail-row span:first-child{color:rgba(255,255,255,0.55)}
.partner-detail-row span:last-child{font-weight:600}
.partner-price-row{display:flex;justify-content:space-between;align-items:center;
  padding-top:14px;margin-top:10px;border-top:1px solid rgba(255,255,255,0.08);font-size:16px}
.partner-price-row span:first-child{color:rgba(255,255,255,0.55)}
.partner-price{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--partner-accent)}
.partner-actions{width:100%;display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.partner-btn{width:100%;padding:16px;border-radius:12px;font-size:15px;font-weight:700;
  background:var(--partner-accent);color:#000;transition:opacity .15s,transform .1s;-webkit-tap-highlight-color:transparent}
.partner-btn:active:not(:disabled){transform:scale(.98)}
.partner-btn:disabled{opacity:.45;cursor:not-allowed;background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.6)}
.partner-btn-venmo{background:#3d95ce;color:#fff}
.partner-btn-credit{background:transparent;border:1.5px solid var(--partner-accent);color:var(--partner-accent)}
.partner-paid-note{text-align:center;color:rgba(255,255,255,0.55);font-size:13px;padding:14px 0}
.partner-footer{margin-top:auto;padding-top:24px;text-align:center;font-size:11px;
  color:rgba(255,255,255,0.35);letter-spacing:.3px}
.partner-footer a{color:rgba(255,255,255,0.6)}
.partner-confirmed{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 24px}
.partner-check{width:72px;height:72px;border-radius:50%;background:var(--partner-accent);color:#000;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.partner-check svg{width:36px;height:36px}
.partner-confirmed h2{font-size:24px;font-weight:700;margin-bottom:10px}
.partner-confirmed p{color:rgba(255,255,255,0.6);font-size:14px;max-width:280px}
@media (max-width:440px){
  .partner-checkout{padding:28px 16px 20px}
  .partner-card{padding:18px}
}

/* ─── ADMIN: PARTNERS TAB ─── */
.admin-tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid var(--border)}
.admin-tab{padding:12px 18px;font-size:13px;font-weight:600;color:var(--text-tertiary);
  cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.admin-tab:hover{color:var(--text-secondary)}
.admin-tab.active{color:var(--accent);border-bottom-color:var(--accent)}

.partner-card{background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;margin-bottom:12px}
.partner-card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.partner-card-meta{flex:1;min-width:0}
.partner-card-name{font-size:15px;font-weight:700;line-height:1.2}
.partner-card-slug{font-size:12px;color:var(--text-tertiary);font-family:var(--font-mono);margin-top:2px}
.partner-card-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px;
  padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.partner-stat-value{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--accent)}
.partner-stat-label{font-size:10px;color:var(--text-tertiary);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}

.color-swatch{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,0.12);flex-shrink:0;display:inline-block;vertical-align:middle}
.color-swatch-lg{width:36px;height:36px}
.color-swatch-sm{width:12px;height:12px;margin-right:6px}

.badge{padding:3px 10px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.badge-active{background:rgba(90,158,143,0.15);color:var(--accent)}
.badge-inactive{background:rgba(255,255,255,0.08);color:var(--text-tertiary)}

.partner-detail{padding-bottom:24px}
.back-link{display:inline-block;margin-bottom:16px;font-size:13px;color:var(--text-secondary);cursor:pointer}
.back-link:hover{color:var(--accent)}
.partner-detail-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.partner-detail-name{font-size:20px;font-weight:700;line-height:1.2}
.partner-detail-slug{font-size:12px;color:var(--text-tertiary);font-family:var(--font-mono);margin-top:2px}
.partner-detail-info{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:6px 16px}
.partner-info-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-size:13px;border-bottom:1px solid var(--border)}
.partner-info-row:last-child{border-bottom:none}
.partner-info-row span:first-child{color:var(--text-secondary)}
.partner-info-row span:last-child{font-weight:600;display:flex;align-items:center}

/* Setup Checklist */
.setup-item{display:flex;align-items:center;gap:14px;padding:16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.setup-item:last-child{border-bottom:none}
.setup-item:active{background:var(--bg-card-hover,rgba(255,255,255,.04))}
.setup-item.done{opacity:.5}
.setup-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--text-tertiary);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px}
.setup-item.done .setup-check{border-color:var(--accent);color:var(--accent)}
.setup-info .setup-label{font-size:14px;font-weight:500}
.setup-info .setup-desc{font-size:12px;color:var(--text-secondary);margin-top:2px}

/* Recurring toggle */
#recurringToggle:checked+span{background:var(--accent)}
#recurringToggle:checked~#recurringKnob{transform:translateX(20px)}
.recur-date{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.recur-date:last-child{border-bottom:none}
.recur-ok{color:var(--accent)}
.recur-conflict{color:var(--danger,#ff5252)}
.recur-summary{font-size:14px;font-weight:600;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}