:root{--bg:#eef0f6;--surface:#f7f8fc;--card:#ffffff;--border:rgba(120,128,160,0.14);--accent:#6c63ff;--accent2:#00c49a;--danger:#e8455a;--text:#1e2035;--muted:#8890aa;--warning:#f59e0b;--bs:#a855f7;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;}
.sidebar{width:220px;background:#f4f5fa;border-right:1px solid rgba(108,99,255,0.07);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:50;}
.sb-logo{padding:20px 18px;border-bottom:1px solid var(--border);}
.sb-logo .logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.2rem;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.sb-logo .sub{font-size:0.68rem;color:var(--muted);margin-top:2px;}
.sb-nav{flex:1;padding:14px 10px;overflow-y:auto;}
.sn{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;cursor:pointer;font-size:0.82rem;color:var(--muted);transition:all 0.2s;margin-bottom:3px;}
.sn:hover{background:var(--card);color:var(--text);}
.sn.active{background:rgba(108,99,255,0.1);color:var(--accent);font-weight:600;}
.sb-bottom{padding:14px 10px;border-top:1px solid var(--border);}
.user-box{padding:10px 12px;margin-bottom:8px;background:var(--card);border-radius:9px;border:1px solid var(--border);}
.ub-label{font-size:0.68rem;color:var(--muted);}
.ub-name{font-size:0.8rem;font-weight:600;color:var(--accent2);margin-top:2px;}
.ub-email{font-size:0.7rem;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bk-link{display:block;text-align:center;background:linear-gradient(135deg,var(--accent),#9b8fff);color:white;padding:10px;border-radius:9px;font-size:0.78rem;font-weight:600;text-decoration:none;margin-bottom:8px;}
.bk-link:hover{opacity:0.9;}
.signout-btn{width:100%;padding:9px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:0.76rem;cursor:pointer;transition:all 0.2s;}
.signout-btn:hover{border-color:var(--danger);color:var(--danger);}
.main{margin-left:220px;flex:1;display:flex;flex-direction:column;min-height:100vh;}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--border);background:var(--card);position:sticky;top:0;z-index:40;box-shadow:0 1px 0 rgba(120,128,160,0.1);}
.topbar h1{font-family:'Syne',sans-serif;font-size:1.2rem;font-weight:700;}
.tb-right{display:flex;align-items:center;gap:10px;}
.today-badge{background:rgba(0,212,170,0.12);border:1px solid rgba(0,212,170,0.25);color:var(--accent2);padding:5px 12px;border-radius:20px;font-size:0.74rem;}
.refresh-btn{background:var(--card);border:1px solid var(--border);color:var(--muted);padding:7px 13px;border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:0.76rem;display:inline-flex;align-items:center;gap:6px;}
.refresh-btn:hover{border-color:var(--accent);color:var(--accent);}
.content{padding:22px 24px;flex:1;width:100%;box-sizing:border-box;min-width:0;}
.pg{display:none;width:100%;box-sizing:border-box;}
.pg.active{display:block;animation:fadeIn 0.25s ease;width:100%;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
/* STATS */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat{background:var(--card);border:1px solid rgba(120,128,160,0.1);border-radius:13px;padding:18px;position:relative;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.04);}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.s-today::before{background:linear-gradient(90deg,var(--accent),#9b8fff);}
.s-up::before{background:linear-gradient(90deg,var(--warning),#ff9800);}
.s-total::before{background:linear-gradient(90deg,var(--accent2),#00a878);}
.s-bs::before{background:linear-gradient(90deg,var(--bs),#7c3aed);}
.stat-icon{font-size:1.5rem;margin-bottom:10px;}
.stat-num{font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;line-height:1;margin-bottom:4px;}
.stat-label{font-size:0.74rem;color:var(--muted);}
.stat-sub{font-size:0.68rem;color:var(--muted);margin-top:4px;}
/* TABLE */
.sec-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;}
.sec-hdr h2{font-family:'Syne',sans-serif;font-size:0.95rem;font-weight:700;}
.cnt{font-size:0.74rem;color:var(--muted);background:var(--surface);padding:3px 9px;border-radius:20px;border:1px solid var(--border);}
.card-wrap{background:var(--card);border:1px solid rgba(120,128,160,0.1);border-radius:13px;overflow:hidden;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,0.04);}
table{width:100%;border-collapse:collapse;}
thead th{text-align:left;font-size:0.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;padding:10px 12px;border-bottom:1px solid var(--border);font-weight:500;}
tbody td{padding:11px 12px;border-bottom:1px solid rgba(42,42,58,0.5);font-size:0.79rem;vertical-align:middle;}
tbody tr:hover td{background:rgba(108,99,255,0.04);}
tbody tr:last-child td{border-bottom:none;}
.bn{font-weight:500;margin-bottom:1px;}
.bc{font-size:0.7rem;color:var(--muted);}
/* BADGES */
.badge{padding:3px 8px;border-radius:20px;font-size:0.66rem;font-weight:500;display:inline-block;}
.b-pending{background:rgba(108,99,255,0.12);color:var(--accent);border:1px solid rgba(108,99,255,0.22);}
.b-awaiting{background:rgba(245,158,11,0.12);color:var(--warning);border:1px solid rgba(245,158,11,0.24);}
.b-paid{background:rgba(0,196,154,0.12);color:var(--accent2);border:1px solid rgba(0,196,154,0.24);}
.b-ok{background:rgba(0,212,170,0.12);color:var(--accent2);border:1px solid rgba(0,212,170,0.24);}
.b-reassign{background:rgba(168,85,247,0.12);color:#a855f7;border:1px solid rgba(168,85,247,0.24);}
.b-x{background:rgba(255,77,109,0.1);color:#ff8fa0;border:1px solid rgba(255,77,109,0.24);}
.b-done{background:rgba(122,122,154,0.12);color:var(--muted);border:1px solid rgba(122,122,154,0.2);}
.b-bs{background:rgba(168,85,247,0.12);color:#c084fc;border:1px solid rgba(168,85,247,0.24);}
.b-ip{background:rgba(255,180,0,0.1);color:#ffd060;border:1px solid rgba(255,180,0,0.24);}
/* BUTTONS */
.acts{display:flex;gap:5px;flex-wrap:wrap;}
.ab{padding:5px 9px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:0.68rem;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.2s;}
.ab:hover{border-color:var(--accent);color:var(--accent);}
.ab.red:hover{border-color:var(--danger);color:var(--danger);}
.ab.orange{border-color:rgba(255,179,71,0.4);color:var(--warning);}
.ab.green{background:rgba(16,185,129,0.12);color:#10b981;border:1px solid rgba(16,185,129,0.28);}
.ab.green:hover{background:rgba(16,185,129,0.18);border-color:#10b981;color:#10b981;}
.ab.bs-j{border-color:rgba(168,85,247,0.4);color:#c084fc;}
/* TIMELINE */
.tl{display:flex;flex-direction:column;}
.tl-item{display:flex;gap:14px;padding:13px 16px;border-bottom:1px solid rgba(42,42,58,0.5);align-items:flex-start;}
.tl-item:last-child{border-bottom:none;}
.tl-item:hover{background:rgba(108,99,255,0.04);}
.tl-time{text-align:right;flex-shrink:0;width:52px;font-family:'Syne',sans-serif;font-size:0.86rem;font-weight:700;}
.tl-dc{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:20px;}
.tl-dot{width:12px;height:12px;border-radius:50%;background:var(--accent);margin-top:3px;}
.tl-dot.past{background:var(--muted);}
.tl-dot.soon{background:var(--warning);animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.tl-line{width:2px;flex:1;background:rgba(42,42,58,0.8);min-height:20px;margin-top:4px;}
.tl-b{flex:1;}
.tl-name{font-weight:500;font-size:0.84rem;margin-bottom:2px;}
.tl-svc{font-size:0.73rem;color:var(--muted);}
.tl-bgs{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap;align-items:center;}
.empty{text-align:center;padding:36px 20px;color:var(--muted);}
/* MODALS */
.mo{position:fixed;inset:0;background:rgba(0,0,0,0.75);display:none;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(5px);}
.mo.show{display:flex;}
.mbox{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;max-width:440px;width:92%;animation:fadeIn 0.2s ease;max-height:90vh;overflow-y:auto;}
.mbox.wide{max-width:480px;}
.mbox h3{font-family:'Syne',sans-serif;font-size:1rem;margin-bottom:10px;}
.mr{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(42,42,58,0.5);font-size:0.8rem;}
.mr:last-of-type{border-bottom:none;}
.mr span:first-child{color:var(--muted);}
.macts{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
.mb2{flex:1;padding:9px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:0.82rem;cursor:pointer;min-width:70px;border:none;}
.mb2-sec{border:1px solid var(--border) !important;background:transparent;color:var(--text);}
.mb2-red{background:var(--danger);color:white;}
.mb2-ok{background:var(--accent2);color:#0a0a0f;font-weight:600;}
.mb2-bs{background:linear-gradient(135deg,var(--bs),#7c3aed);color:white;}
.mb2-orange{background:var(--warning);color:#0a0a0f;font-weight:600;}
.code-box{background:rgba(168,85,247,0.08);border:1px solid rgba(168,85,247,0.25);border-radius:9px;padding:13px;text-align:center;margin:12px 0;}
.code-big{font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:800;color:var(--bs);letter-spacing:0.12em;}
.code-sub{font-size:0.7rem;color:var(--muted);margin-top:3px;}
/* RESCHEDULE */
.rs-info{background:rgba(255,179,71,0.08);border:1px solid rgba(255,179,71,0.2);border-radius:9px;padding:12px;margin-bottom:14px;font-size:0.82rem;line-height:1.6;}
.rs-date-input{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:0.85rem;outline:none;margin-bottom:10px;}
.rs-date-input:focus{border-color:var(--warning);}
.rs-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px;max-height:180px;overflow-y:auto;}
.rs-slot{padding:8px 4px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:0.73rem;cursor:pointer;text-align:center;transition:all 0.2s;}
.rs-slot:hover{border-color:var(--accent);background:rgba(108,99,255,0.06);color:var(--accent);}
.rs-slot.picked{background:var(--accent);border-color:var(--accent);color:#ffffff;font-weight:700;}
.rs-slot.taken{opacity:0.3;cursor:not-allowed;pointer-events:none;}
.rs-ph{color:var(--muted);font-size:0.78rem;padding:8px 0;grid-column:span 3;text-align:center;}
.email-prev{background:rgba(255,179,71,0.05);border:1px solid rgba(255,179,71,0.15);border-radius:9px;padding:13px;font-size:0.76rem;line-height:1.8;color:var(--muted);}
.email-prev strong{color:var(--text);}
/* SETTINGS */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);width:100%;}
@media(max-width:700px){.settings-grid{grid-template-columns:1fr;}}
.settings-card{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:22px;}
.settings-card h3{font-family:'Syne',sans-serif;font-size:0.9rem;font-weight:700;margin-bottom:16px;color:var(--accent2);}
.analytics-sec-title{font-size:0.9rem;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.analytics-sec-sub{font-size:0.76rem;color:var(--muted);margin-bottom:16px;}
.staff-stats-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.staff-stats-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:rgba(108,99,255,0.09);border:1px solid rgba(108,99,255,0.15);color:var(--accent);font-size:0.74rem;font-weight:700;white-space:nowrap;}
.staff-stats-chip i{width:14px;height:14px;}
.staff-stats-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px;}
.staff-summary-card{background:var(--card);border:1px solid rgba(120,128,160,0.12);border-radius:16px;padding:16px 16px 15px;box-shadow:0 1px 4px rgba(0,0,0,0.04);display:flex;flex-direction:column;gap:8px;min-height:128px;}
.staff-summary-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.staff-summary-icon{width:38px;height:38px;border-radius:12px;background:rgba(108,99,255,0.08);color:var(--accent);display:flex;align-items:center;justify-content:center;}
.staff-summary-icon i{width:18px;height:18px;}
.staff-summary-pill{padding:4px 9px;border-radius:999px;background:var(--surface);border:1px solid rgba(120,128,160,0.12);font-size:0.66rem;color:var(--muted);font-weight:700;}
.staff-summary-label{font-size:0.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;}
.staff-summary-value{font-family:'Manrope',sans-serif;font-size:1.75rem;font-weight:800;line-height:1;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;}
.staff-summary-sub{font-size:0.75rem;color:var(--muted);line-height:1.45;}
.staff-summary-trend{font-weight:700;}
.staff-summary-trend.up{color:#10b981;}
.staff-summary-trend.down{color:#ef4444;}
.staff-summary-trend.flat{color:var(--muted);}
.staff-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px;}
.staff-stats-grid-main{grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr);}
.staff-stats-panel{background:var(--card);border:1px solid rgba(120,128,160,0.12);border-radius:16px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,0.04);min-width:0;}
.staff-stats-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.staff-stats-title{font-family:'Manrope',sans-serif;font-size:0.98rem;font-weight:800;letter-spacing:-0.02em;}
.staff-stats-copy{font-size:0.74rem;color:var(--muted);margin-top:4px;line-height:1.45;}
.staff-stats-legend,.staff-outcome-legend{display:flex;gap:14px;font-size:0.72rem;color:var(--muted);font-weight:700;flex-wrap:wrap;}
.staff-stats-legend span,.staff-outcome-legend span{display:inline-flex;align-items:center;gap:6px;}
.staff-stats-dot{width:10px;height:10px;border-radius:999px;display:inline-block;flex-shrink:0;}
.staff-stats-dot.dot-this{background:var(--accent);}
.staff-stats-dot.dot-last{background:#d7ddef;}
.staff-stats-dot.dot-completed{background:#10b981;}
.staff-stats-dot.dot-cancelled{background:#ef4444;}
.staff-stats-dot.dot-noshow{background:#f59e0b;}
.staff-stats-dot.dot-open{background:#cbd5e1;}
.staff-stats-chart{display:flex;flex-direction:column;gap:14px;min-height:220px;}
.staff-volume-row{padding:14px;border:1px solid rgba(120,128,160,0.12);border-radius:14px;background:linear-gradient(180deg,#ffffff 0%,#fbfbfe 100%);}
.staff-volume-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.staff-volume-person{display:flex;align-items:center;gap:10px;min-width:0;}
.staff-volume-avatar{width:38px;height:38px;border-radius:12px;background:rgba(108,99,255,0.1);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.82rem;flex-shrink:0;}
.staff-volume-meta{min-width:0;}
.staff-volume-name{font-size:0.86rem;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.staff-volume-sub{font-size:0.72rem;color:var(--muted);margin-top:3px;}
.staff-volume-change{font-size:0.72rem;font-weight:800;border-radius:999px;padding:4px 9px;background:var(--surface);}
.staff-volume-change.up{color:#10b981;background:rgba(16,185,129,0.1);}
.staff-volume-change.down{color:#ef4444;background:rgba(239,68,68,0.1);}
.staff-volume-change.flat{color:var(--muted);background:rgba(148,163,184,0.12);}
.staff-volume-bars{display:flex;flex-direction:column;gap:8px;}
.staff-volume-bar-row{display:grid;grid-template-columns:24px minmax(0,1fr) 34px;align-items:center;gap:8px;}
.staff-volume-bar-label{font-size:0.68rem;color:var(--muted);font-weight:800;text-align:center;}
.staff-volume-track{position:relative;height:10px;border-radius:999px;background:var(--surface);overflow:hidden;}
.staff-volume-fill{height:100%;border-radius:999px;display:block;min-width:6px;transition:width 0.55s cubic-bezier(0.22,1,0.36,1);}
.staff-volume-fill.this{background:linear-gradient(90deg,#7b73ff 0%,var(--accent) 100%);}
.staff-volume-fill.last{background:#d7ddef;}
.staff-volume-bar-value{font-size:0.72rem;font-weight:800;color:var(--text);text-align:right;font-variant-numeric:tabular-nums;}
.staff-trend-chart{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;min-height:260px;padding:6px 4px 0;overflow-x:auto;}
.staff-trend-group{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1 1 0;min-width:76px;}
.staff-trend-bars{display:flex;align-items:flex-end;gap:8px;height:180px;}
.staff-trend-bar-wrap{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%;}
.staff-trend-value{font-size:0.68rem;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;}
.staff-trend-bar{width:18px;min-height:6px;border-radius:10px 10px 4px 4px;transition:height 0.55s cubic-bezier(0.22,1,0.36,1);}
.staff-trend-bar.this{background:linear-gradient(180deg,#7b73ff 0%,var(--accent) 100%);}
.staff-trend-bar.last{background:#d7ddef;}
.staff-trend-label{font-size:0.72rem;color:var(--muted);font-weight:700;}
.staff-outcome-list{display:flex;flex-direction:column;gap:14px;}
.staff-outcome-row{display:flex;flex-direction:column;gap:9px;padding:14px;border:1px solid rgba(120,128,160,0.12);border-radius:14px;background:linear-gradient(180deg,#ffffff 0%,#fbfbfe 100%);}
.staff-outcome-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.staff-outcome-name{font-size:0.84rem;font-weight:700;}
.staff-outcome-rate{font-size:0.72rem;font-weight:800;color:var(--accent);}
.staff-outcome-track{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--surface);}
.staff-outcome-segment{height:100%;display:block;min-width:0;}
.staff-outcome-segment.completed{background:#10b981;}
.staff-outcome-segment.cancelled{background:#ef4444;}
.staff-outcome-segment.no-show{background:#f59e0b;}
.staff-outcome-segment.open{background:#cbd5e1;}
.staff-outcome-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:0.72rem;color:var(--muted);}
.staff-leaderboard{display:flex;flex-direction:column;gap:12px;}
.staff-leader{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid rgba(120,128,160,0.12);border-radius:14px;background:linear-gradient(180deg,#ffffff 0%,#fbfbfe 100%);}
.staff-leader-rank{width:36px;height:36px;border-radius:12px;background:var(--surface);border:1px solid rgba(120,128,160,0.12);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--text);}
.staff-leader-rank.top{background:rgba(108,99,255,0.1);color:var(--accent);border-color:rgba(108,99,255,0.15);}
.staff-leader-main{min-width:0;}
.staff-leader-name{font-size:0.84rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.staff-leader-sub{font-size:0.72rem;color:var(--muted);margin-top:3px;}
.staff-leader-metric{font-family:'Manrope',sans-serif;font-size:1.1rem;font-weight:800;line-height:1;letter-spacing:-0.02em;color:var(--accent);font-variant-numeric:tabular-nums;}
.staff-leader-label{font-size:0.66rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;text-align:right;margin-top:3px;}
.staff-stats-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.staff-stats-card{background:var(--card);border:1px solid rgba(120,128,160,0.12);border-radius:16px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,0.03);display:flex;flex-direction:column;gap:14px;min-width:0;}
.staff-stats-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.staff-stats-card-person{display:flex;align-items:center;gap:10px;min-width:0;}
.staff-stats-card-avatar{width:42px;height:42px;border-radius:14px;background:rgba(108,99,255,0.1);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.84rem;flex-shrink:0;}
.staff-stats-card-name{font-family:'Manrope',sans-serif;font-size:0.9rem;font-weight:700;line-height:1.2;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.staff-stats-card-total{font-size:0.72rem;color:var(--muted);font-weight:600;margin-top:3px;}
.staff-stats-card-month{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
.staff-stats-card-month-value{font-family:'Manrope',sans-serif;font-size:1.4rem;font-weight:800;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;}
.staff-stats-card-month-label{font-size:0.64rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;}
.staff-stats-card-progress-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:0.72rem;}
.staff-stats-card-progress-label{color:var(--muted);font-weight:700;}
.staff-stats-card-progress-value{font-weight:800;color:var(--text);}
.staff-stats-card-progress{height:10px;border-radius:999px;background:var(--surface);overflow:hidden;}
.staff-stats-card-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#7b73ff 0%,var(--accent) 100%);}
.staff-stats-card-tags{display:flex;flex-wrap:wrap;gap:8px;}
.staff-stat-tag{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;font-size:0.7rem;font-weight:700;background:var(--surface);border:1px solid rgba(120,128,160,0.12);}
.staff-stat-tag.completed{color:#10b981;}
.staff-stat-tag.cancelled{color:#ef4444;}
.staff-stat-tag.no-show{color:#f59e0b;}
.staff-stat-tag.last{color:#98a1bc;}
.staff-stats-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:0.72rem;}
.staff-stats-card-foot-note{color:var(--muted);}
.staff-stats-card-foot-trend{font-weight:800;}
.staff-stats-card-foot-trend.up{color:#10b981;}
.staff-stats-card-foot-trend.down{color:#ef4444;}
.staff-stats-card-foot-trend.flat{color:var(--muted);}
.staff-stats-empty{color:var(--muted);font-size:0.82rem;padding:18px 8px;}
@media(max-width:1180px){
  .staff-stats-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
  .staff-stats-grid,.staff-stats-grid-main,.staff-stats-cards{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .staff-stats-summary{grid-template-columns:1fr;}
  .staff-stats-panel,.staff-summary-card,.staff-stats-card{padding:16px;}
  .staff-volume-row,.staff-outcome-row,.staff-leader{padding:12px;}
  .staff-trend-chart{gap:10px;min-height:220px;}
  .staff-trend-group{min-width:64px;}
  .staff-trend-bars{height:150px;gap:6px;}
  .staff-trend-bar{width:16px;}
}
.subnav{display:none;padding-left:12px;}
.subnav.open{display:block;}
.sn.sub{font-size:0.8rem;padding:7px 12px 7px 20px;color:var(--muted);}
.sn.sub:hover,.sn.sub.active{color:var(--accent);background:rgba(108,99,255,0.06);}
.sub-arrow{font-size:0.7rem;margin-left:auto;transition:transform 0.2s;display:inline-block;}
.sub-arrow.open{transform:rotate(90deg);}
.has-sub{display:flex;align-items:center;}
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:#444;border-radius:24px;transition:0.3s;}
.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:white;border-radius:50%;transition:0.3s;}
input:checked + .toggle-slider{background:var(--accent);}
input:checked + .toggle-slider:before{transform:translateX(20px);}
.avail-shell{max-width:860px;margin:0 auto;}
.avail-day-row{border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:12px;background:var(--card);transition:all 0.2s;}
.avail-day-row.off{background:var(--surface);}
.avail-row-header{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
.avail-day-name{font-weight:700;font-size:0.92rem;min-width:48px;}
.avail-summary{font-size:0.76rem;color:var(--muted);flex:1;line-height:1.5;}
.avail-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.avail-field label{font-size:0.7rem;color:var(--muted);font-weight:600;display:block;margin-bottom:4px;}
.avail-field input{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:9px 10px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:0.85rem;box-sizing:border-box;}
.avail-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;}
.avail-chip{border:1px solid var(--border);background:var(--surface);color:var(--muted);padding:10px 8px;border-radius:10px;text-align:center;cursor:pointer;transition:all 0.2s;font-size:0.74rem;line-height:1.35;user-select:none;}
.avail-chip:hover{border-color:var(--accent);color:var(--text);}
.avail-chip.on{background:rgba(0,212,170,0.12);border-color:rgba(0,212,170,0.4);color:var(--accent2);font-weight:700;}
.avail-chip.off{opacity:0.65;}
.avail-chip-time{display:block;font-weight:700;color:inherit;}
.avail-chip-state{display:block;font-size:0.66rem;margin-top:4px;color:inherit;}
.avail-help{font-size:0.74rem;color:var(--muted);margin-bottom:14px;line-height:1.5;}
@media(max-width:900px){.avail-blocks{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:700px){.avail-shell{max-width:100%;}.avail-fields{grid-template-columns:1fr;}.avail-blocks{grid-template-columns:repeat(2,minmax(0,1fr));}}
.settings-tab{display:none;width:100%;}.settings-tab.active{display:block;width:100%;}
.sf{margin-bottom:13px;}
.sf label{display:block;font-size:0.7rem;color:var(--muted);margin-bottom:5px;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;}
.sf input,.sf select,.sf textarea{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:0.85rem;outline:none;transition:border-color 0.2s;}
.sf textarea{min-height:92px;resize:vertical;line-height:1.45;}
.sf input:focus,.sf select:focus,.sf textarea:focus{border-color:var(--accent);}
.sf input[readonly]{opacity:0.5;cursor:not-allowed;}
.s-btn{padding:10px 20px;border-radius:9px;border:none;font-family:'DM Sans',sans-serif;font-size:0.84rem;font-weight:600;cursor:pointer;transition:all 0.2s;}
.s-btn-primary{background:var(--accent);color:white;}
.s-btn-primary:hover{opacity:0.9;}
.s-btn-warning{background:transparent;border:1px solid var(--warning);color:var(--warning);}
.s-btn-danger{background:transparent;border:1px solid var(--danger);color:var(--danger);}
.s-msg{padding:9px 13px;border-radius:8px;font-size:0.8rem;margin-top:10px;display:none;}
.s-msg.show{display:block;}
.s-msg.ok{background:rgba(0,212,170,0.1);border:1px solid rgba(0,212,170,0.3);color:var(--accent2);}
.s-msg.err{background:rgba(255,77,109,0.1);border:1px solid rgba(255,77,109,0.3);color:#ff8fa0;}
.danger-zone{background:rgba(255,77,109,0.05);border:1px solid rgba(255,77,109,0.2);border-radius:13px;padding:22px;margin-top:20px;}
.danger-zone h3{font-family:'Syne',sans-serif;font-size:0.9rem;font-weight:700;margin-bottom:6px;color:var(--danger);}
/* CALL ROOM */
#cr{position:fixed;inset:0;background:var(--bg);z-index:500;display:none;flex-direction:column;}
#cr.show{display:flex;}
.cr-nav{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid var(--border);background:rgba(10,10,15,0.98);}
.cr-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1rem;color:var(--bs);}
.cr-body{flex:1;display:grid;grid-template-columns:1fr 260px;overflow:hidden;}
.cr-vid{background:#000;position:relative;}
#cr-remote{width:100%;height:100%;object-fit:cover;}
#cr-local{position:absolute;bottom:12px;right:12px;width:130px;border-radius:8px;border:2px solid var(--border);transform:scaleX(-1);}
#jitsi-frame{position:absolute;inset:0;width:100%;height:100%;}
.cr-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#0d0d14;}
.cr-side{background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
.cr-tabs{display:flex;border-bottom:1px solid var(--border);}
.cr-tab{flex:1;padding:10px 4px;border:none;background:transparent;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:0.72rem;cursor:pointer;border-bottom:2px solid transparent;}
.cr-tab.active{color:var(--text);border-bottom-color:var(--bs);}
.cr-sc{flex:1;overflow-y:auto;padding:11px;}
.att{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--card);border-radius:8px;margin-bottom:6px;}
.att-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--bs),#7c3aed);display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;color:white;flex-shrink:0;}
.tr-s{display:flex;align-items:center;gap:6px;font-size:0.7rem;margin-bottom:9px;padding:5px 8px;background:var(--card);border-radius:7px;}
.tr-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);}
.tr-dot.on{background:var(--accent2);animation:pulse 1.5s infinite;}
.tr-box{font-size:0.72rem;line-height:1.7;color:var(--muted);}
.cr-ctrls{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 16px;border-top:1px solid var(--border);background:var(--surface);flex-wrap:wrap;}
.cc-w{display:flex;flex-direction:column;align-items:center;}
.cc{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.cc:hover{border-color:var(--bs);}
.cc.off{background:rgba(255,77,109,0.15);border-color:var(--danger);color:var(--danger);}
.cc.rec-on{background:var(--danger);color:white;}
.cc.tr-on{background:rgba(0,212,170,0.15);border-color:var(--accent2);}
.cc-l{font-size:0.58rem;color:var(--muted);margin-top:3px;}
.cc-end{background:var(--danger);color:white;border:none;padding:10px 20px;border-radius:20px;font-family:'DM Sans',sans-serif;font-size:0.8rem;font-weight:600;cursor:pointer;}
#rec-bar{display:none;}
#rec-bar.show{display:flex;}
/* SEND LINK */
.send-link-card{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:22px;margin-bottom:20px;}
.send-link-card h2{font-family:'Syne',sans-serif;font-size:0.95rem;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.send-link-card p{font-size:0.78rem;color:var(--muted);margin-bottom:16px;line-height:1.5;}
.sl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:700px){.sl-grid{grid-template-columns:1fr;}}
.sl-box{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:16px;}
.sl-box h4{font-size:0.82rem;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.sl-field{margin-bottom:10px;}
.sl-field label{display:block;font-size:0.68rem;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.04em;font-weight:500;}
.sl-field input{width:100%;background:var(--card);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:0.84rem;outline:none;transition:border-color 0.2s;}
.sl-field input:focus{border-color:var(--accent);}
.sl-phone-row{display:flex;gap:7px;}
.sl-phone-row select{background:var(--card);border:1px solid var(--border);color:var(--text);padding:9px 8px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:0.78rem;outline:none;width:100px;flex-shrink:0;}
.sl-phone-row input{flex:1;background:var(--card);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:0.84rem;outline:none;}
.sl-btn{width:100%;padding:11px;border-radius:9px;border:none;font-family:'DM Sans',sans-serif;font-size:0.84rem;font-weight:600;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;}
.sl-btn-sms{background:linear-gradient(135deg,#25d366,#128c7e);color:white;}
.sl-btn-sms:hover{opacity:0.9;}
.sl-btn-email{background:linear-gradient(135deg,var(--accent),#9b8fff);color:white;}
.sl-btn-email:hover{opacity:0.9;}
.sl-msg{font-size:0.74rem;padding:7px 11px;border-radius:7px;margin-top:8px;display:none;}
.sl-msg.show{display:block;}
.sl-msg.ok{background:rgba(0,212,170,0.1);border:1px solid rgba(0,212,170,0.3);color:var(--accent2);}
.sl-msg.err{background:rgba(255,77,109,0.1);border:1px solid rgba(255,77,109,0.3);color:#ff8fa0;}
/* SEARCH */
.search-wrap{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.search-input{flex:1;background:var(--card);border:1px solid var(--border);color:var(--text);padding:9px 14px 9px 36px;border-radius:9px;font-family:'DM Sans',sans-serif;font-size:0.84rem;outline:none;transition:border-color 0.2s;min-width:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%237a7a9a' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center;}
.search-input:focus{border-color:var(--accent);}
.search-filter{background:var(--card);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:9px;font-family:'DM Sans',sans-serif;font-size:0.82rem;outline:none;cursor:pointer;}
.search-clear{background:transparent;border:1px solid var(--border);color:var(--muted);padding:9px 14px;border-radius:9px;font-family:'DM Sans',sans-serif;font-size:0.82rem;cursor:pointer;transition:all 0.2s;white-space:nowrap;}
.search-clear:hover{border-color:var(--danger);color:var(--danger);}
.search-results{font-size:0.74rem;color:var(--muted);padding:2px 0;}
.new-tag{background:#059669;color:white;font-size:0.6rem;font-weight:700;padding:2px 6px;border-radius:4px;vertical-align:middle;margin-left:5px;letter-spacing:0.04em;}
.row-new{background:rgba(5,150,105,0.05);border-left:3px solid #059669;}
.row-new td:first-child{border-left:none;}
#new-badge{background:#ff4d6d;color:white;font-size:0.65rem;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:6px;display:none;align-items:center;justify-content:center;}
.toast{position:fixed;bottom:20px;right:20px;background:var(--accent2);color:#0a0a0f;padding:10px 15px;border-radius:9px;font-size:0.78rem;font-weight:500;transform:translateY(80px);opacity:0;transition:all 0.3s;z-index:999;max-width:280px;}
.toast.show{transform:translateY(0);opacity:1;}
@keyframes pulse-dot {
  0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
  50% { transform: scale(1.2); opacity: 0.8; box-shadow: 0 0 0 6px rgba(16,185,129,0); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* Accordion cards */
.acc-card{border:1px solid var(--border);border-radius:13px;overflow:hidden;background:var(--card);}
.acc-header{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;user-select:none;transition:background 0.15s;}
.acc-header:hover{background:rgba(108,99,255,0.04);}
.acc-icon{font-size:1.1rem;flex-shrink:0;}
.acc-title{font-family:'Syne',sans-serif;font-weight:700;font-size:0.88rem;color:var(--text);}
.acc-summary{font-size:0.72rem;color:var(--muted);margin-top:1px;}
.acc-chevron{margin-left:auto;font-size:0.7rem;color:var(--muted);transition:transform 0.25s;flex-shrink:0;}
.acc-chevron.open{transform:rotate(90deg);}
.acc-body{max-height:0;overflow:hidden;transition:max-height 0.35s ease,opacity 0.25s ease;opacity:0;}
.acc-body.open{max-height:1200px;opacity:1;}
.acc-inner{padding:0 18px 18px;}
.svc-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;font-size:0.78rem;font-weight:500;cursor:default;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);}
.svc-chip.on{border-color:var(--accent);background:rgba(108,99,255,0.09);color:var(--accent);font-weight:700;}
.svc-chip .badge{font-size:0.55rem;background:var(--accent2);color:white;padding:1px 5px;border-radius:4px;font-weight:700;}
@media(min-width:1600px){#avail-days-list{grid-template-columns:repeat(4,1fr)!important;}}
@media(max-width:900px){#avail-days-list{grid-template-columns:repeat(2,1fr)!important;}}
@media(max-width:600px){#avail-days-list{grid-template-columns:1fr!important;}}

/* -- AVAILABILITY BOARD -- */
#pg-availability { font-size: 1rem; }
#avail-days-list { display: block !important; }

.avail-board {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

.avail-board-header {
  display: grid;
  grid-template-columns: 60px 160px 1fr 1fr 1fr 120px;
  align-items: center;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(108,99,255,0.06), rgba(168,85,247,0.03));
  border-bottom: 2px solid var(--border);
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
}

.avail-board-row {
  display: grid;
  grid-template-columns: 60px 160px 1fr 1fr 1fr 120px;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s, transform 0.1s;
  min-height: 68px;
  position: relative;
}
.avail-board-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.2s;
}
.avail-board-row:not(.row-off):hover::before { background: var(--accent); }
.avail-board-row:last-child { border-bottom: none; }
.avail-board-row:not(.row-off):hover { background: rgba(108,99,255,0.04); }
.avail-board-row.row-off { opacity: 0.45; }

.ab-col-toggle { display: flex; align-items: center; }
.ab-col-day { display: flex; align-items: center; padding-right: 16px; }
.ab-col-time { display: flex; align-items: center; padding-right: 12px; }
.ab-col-breaks { display: flex; flex-direction: column; justify-content: center; padding-right: 12px; }
.ab-col-hours { display: flex; align-items: center; justify-content: flex-end; }

.ab-time-input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.95rem;
  font-family: 'DM Sans', sans-serif;
  width: 100%;
  max-width: 140px;
  transition: border-color 0.2s;
}
.ab-time-input:focus { border-color: var(--accent); outline: none; }

.ab-breaks-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ab-break-summary {
  font-size: 0.82rem;
  color: var(--muted);
  border-bottom: 1px dashed var(--border);
  padding-bottom: 1px;
  transition: color 0.15s;
}
.ab-break-summary:hover { color: var(--accent); border-color: var(--accent); }
.ab-add-break {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  transition: all 0.15s;
}
.ab-add-break:hover { border-color: var(--accent); color: var(--accent); }

/* Break editor rows inside board */
.ab-break-editor .break-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* Advanced section slide animation */
#adv-section {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, margin-top 0.3s ease;
  margin-top: 0;
}
#adv-section.adv-open {
  max-height: 3000px;
  opacity: 1;
  margin-top: 14px;
}

/* Advanced accordion section */
#adv-toggle-bar {
  padding: 16px 22px;
  font-size: 0.95rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--surface), rgba(108,99,255,0.04));
  transition: all 0.2s;
}
#adv-toggle-bar:hover {
  background: linear-gradient(135deg, rgba(108,99,255,0.06), rgba(168,85,247,0.06));
}
#adv-chevron { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.acc-header { padding: 16px 20px; }
.acc-title { font-size: 0.95rem !important; }
.acc-summary { font-size: 0.8rem !important; }
.acc-inner { padding: 0 20px 20px !important; }
.acc-icon { font-size: 1.2rem !important; }

/* Responsive board */
@media(max-width:1100px) {
  .avail-board-header,
  .avail-board-row { grid-template-columns: 50px 130px 1fr 1fr 1fr 90px; padding: 12px 14px; }
}
@media(max-width:800px) {
  .avail-board-header { display: none; }
  .avail-board-row {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
    padding: 14px;
  }
  .ab-col-day { grid-column: 2; }
  .ab-col-time, .ab-col-breaks, .ab-col-hours {
    grid-column: 1 / -1;
    padding: 0;
  }
}

.ab.purple { background: rgba(168,85,247,0.12); color: #a855f7; border: 1px solid rgba(168,85,247,0.3); }
.ab.purple:hover { background: rgba(168,85,247,0.2); }

/* -- Billing sub-tabs -- */
.billing-tab-btn {
  background: transparent;
  border: none;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
  white-space: nowrap;
}
.billing-tab-btn.active {
  background: var(--card);
  color: var(--accent);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.billing-tab-btn:hover:not(.active) { color: var(--text); background: rgba(0,0,0,0.04); }

/* Billing grid */


/* Plan table rows */
.plan-row td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.plan-row td:not(:first-child) { text-align: center; font-weight: 600; }

/* ----------------------------------
   BILLING + BOOKING SETUP - REDESIGN
   ---------------------------------- */

/* -- Billing tab bar -- */
.bill-tabs-bar {
  display: flex;
  gap: 4px;
  margin-bottom: clamp(16px, 2vw, 28px);
  background: var(--surface);
  border-radius: 12px;
  padding: 5px;
  width: fit-content;
  border: 1px solid var(--border);
}
.billing-tab-btn {
  background: transparent;
  border: none;
  padding: clamp(8px,0.8vw,11px) clamp(14px,1.4vw,22px);
  border-radius: 8px;
  font-size: clamp(0.82rem, 0.9vw, 0.95rem);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
  white-space: nowrap;
}
.billing-tab-btn.active {
  background: var(--card);
  color: var(--accent);
  font-weight: 700;
  box-shadow: 0 1px 6px rgba(0,0,0,0.1);
}
.billing-tab-btn:hover:not(.active) { background: rgba(0,0,0,0.04); color: var(--text); }

/* -- Bill content wrapper -- */
.bill-content { width: 100%; }

/* -- Generic bill card -- */
.bill-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(20px, 2vw, 32px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  width: 100%;
  box-sizing: border-box;
}
.bill-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(16px, 1.6vw, 24px);
  flex-wrap: wrap;
}
.bill-card-header h3 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 2px;
}
.bill-sub { font-size: clamp(0.72rem, 0.8vw, 0.82rem); color: var(--muted); margin: 0; line-height: 1.5; }

/* -- Plan grid -- */
.bill-plan-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1.3fr);
  gap: clamp(14px, 1.6vw, 24px);
  align-items: stretch;
  width: 100%;
}
@media(max-width: 900px) { .bill-plan-grid { grid-template-columns: 1fr; } }

/* -- Plan card -- */
.plan-hero {
  background: linear-gradient(135deg, rgba(108,99,255,0.1), rgba(168,85,247,0.06));
  border: 1px solid rgba(108,99,255,0.2);
  border-radius: 14px;
  padding: clamp(16px, 1.6vw, 24px);
  margin-bottom: clamp(14px, 1.4vw, 20px);
}
.plan-name { font-family: 'Manrope', sans-serif; font-size: clamp(1.2rem, 1.8vw, 1.7rem); font-weight: 800; color: var(--text); margin-bottom: 6px; }
.plan-desc { font-size: clamp(0.8rem, 0.9vw, 0.9rem); color: var(--muted); }
.plan-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 0.8vw, 12px);
  margin-bottom: clamp(14px, 1.4vw, 20px);
}
.plan-stat { background: var(--surface); border-radius: 10px; padding: clamp(10px,1vw,16px) 8px; text-align: center; }
.plan-stat span { display: block; font-size: clamp(1.2rem, 1.8vw, 2rem); font-weight: 800; color: var(--accent); }
.plan-stat.purple span { color: #8b5cf6; }
.plan-stat.cyan span   { color: #06b6d4; }
.plan-stat.green span  { color: #10b981; }
.plan-stat small { display: block; font-size: clamp(0.62rem, 0.7vw, 0.72rem); color: var(--muted); margin-top: 3px; }
.btn-upgrade {
  width: 100%;
  background: var(--accent);
  color: white;
  border: none;
  padding: clamp(12px,1.2vw,16px);
  border-radius: 11px;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.88rem, 0.95vw, 1rem);
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
  transition: opacity 0.15s;
}
.btn-upgrade:hover { opacity: 0.9; }
.bill-fine { font-size: clamp(0.68rem, 0.74vw, 0.76rem); color: var(--muted); text-align: center; margin-bottom: 8px; }
.plan-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.plan-flag-yes {
  background: rgba(16,185,129,0.14);
  color: #059669;
  border: 1px solid rgba(16,185,129,0.24);
}
.plan-flag-no {
  background: rgba(148,163,184,0.14);
  color: #64748b;
  border: 1px solid rgba(148,163,184,0.3);
}
.btn-cancel-plan { background: transparent; border: none; color: var(--muted); font-size: 0.76rem; cursor: pointer; text-decoration: underline; font-family: 'DM Sans', sans-serif; }
.badge-active { background: var(--accent); color: white; font-size: 0.65rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; white-space: nowrap; }
.badge-business { background: linear-gradient(135deg, #10b981, #059669); color: white; font-size: 0.65rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; white-space: nowrap; }

/* -- Plan table -- */
.compare-card { overflow-x: auto; }
.plan-table { width: 100%; border-collapse: collapse; }
.plan-table thead th { padding: clamp(10px,1vw,14px) clamp(8px,0.8vw,12px); border-bottom: 2px solid var(--border); font-size: clamp(0.78rem, 0.88vw, 0.95rem); }
.plan-table thead th:first-child { text-align: left; color: var(--muted); font-size: 0.75rem; }
.plan-table tbody td { padding: clamp(10px,1vw,14px) clamp(8px,0.8vw,12px); border-bottom: 1px solid var(--border); font-size: clamp(0.82rem, 0.9vw, 0.95rem); text-align: center; font-weight: 500; }
.plan-table tbody td:first-child { text-align: left; font-weight: 400; color: var(--text); }
.plan-table tr.last-row td { border-bottom: none; }
.plan-col-name { display: block; font-weight: 700; font-size: clamp(0.82rem, 0.9vw, 0.95rem); }
.plan-col-price { display: block; font-weight: 800; font-size: clamp(1rem, 1.2vw, 1.3rem); }
.plan-col-price.accent { color: var(--accent); }
.plan-col-price.purple { color: #8b5cf6; }
.plan-col-price.green  { color: #10b981; }

/* -- Invoice grid -- */
.bill-inv-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.4fr) minmax(280px, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  align-items: stretch;
  width: 100%;
}
@media(max-width: 900px) { .bill-inv-grid { grid-template-columns: 1fr; } }

/* -- Invoice card -- */
.inv-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.inv-card .bill-card-header { padding: clamp(16px,1.6vw,24px); border-bottom: 1px solid var(--border); background: linear-gradient(135deg, rgba(108,99,255,0.03), rgba(168,85,247,0.01)); margin-bottom: 0; }
.inv-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(40px,5vw,80px) 24px; text-align: center; flex: 1; }
.inv-empty-icon { font-size: clamp(2.5rem, 4vw, 4rem); margin-bottom: 14px; opacity: 0.5; display: inline-flex; align-items: center; justify-content: center; }
.inv-empty-icon i[data-lucide], .inv-empty-icon i svg { width: clamp(2.2rem, 3.2vw, 3.2rem); height: clamp(2.2rem, 3.2vw, 3.2rem); stroke-width: 1.6; }
.inv-empty-title { font-weight: 700; font-size: clamp(0.9rem, 1vw, 1.05rem); color: var(--text); margin-bottom: 6px; }
.inv-empty-sub { font-size: clamp(0.76rem, 0.82vw, 0.85rem); color: var(--muted); max-width: 280px; line-height: 1.5; }
.next-charge-badge { background: rgba(108,99,255,0.08); border: 1px solid rgba(108,99,255,0.15); border-radius: 10px; padding: 10px 16px; text-align: right; }
.next-label { font-size: 0.68rem; color: var(--muted); }
.next-date { font-weight: 800; font-size: 1rem; color: var(--text); }

/* -- Invoice rows -- */
.inv-row { display: flex; align-items: center; justify-content: space-between; padding: clamp(12px,1.2vw,16px) clamp(16px,1.6vw,24px); border-bottom: 1px solid var(--border); gap: 12px; }
.inv-row:last-child { border-bottom: none; }
.inv-row-left .inv-date { font-weight: 600; font-size: 0.88rem; }
.inv-row-left .inv-desc { font-size: 0.74rem; color: var(--muted); margin-top: 2px; }
.inv-row-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.inv-amount { font-weight: 700; font-size: 0.92rem; }
.inv-badge { font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.inv-badge.paid { background: rgba(16,185,129,0.12); color: #10b981; }
.inv-badge.open { background: rgba(245,158,11,0.12); color: #f59e0b; }
.inv-link { font-size: 0.78rem; color: var(--accent); text-decoration: none; font-weight: 600; }
.inv-link:hover { text-decoration: underline; }

/* -- Payment card -- */
.pay-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px,1vw,14px);
  margin-bottom: clamp(14px,1.4vw,20px);
}
@media(max-width:600px) { .pay-steps { grid-template-columns: 1fr; } }
.pay-step { background: var(--surface); border-radius: 12px; padding: clamp(14px,1.4vw,20px) 12px; text-align: center; }
.pay-step-icon { margin-bottom: 10px; display: inline-flex; align-items: center; justify-content: center; color: #4f46e5; }
.pay-step-icon i[data-lucide], .pay-step-icon i svg { width: clamp(1.3rem, 1.9vw, 1.75rem); height: clamp(1.3rem, 1.9vw, 1.75rem); stroke-width: 1.8; }
.pay-step-title { font-weight: 700; font-size: clamp(0.8rem, 0.9vw, 0.92rem); color: var(--text); margin-bottom: 4px; }
.pay-step-sub { font-size: clamp(0.7rem, 0.76vw, 0.78rem); color: var(--muted); }
.pay-trust { font-size: clamp(0.7rem, 0.76vw, 0.78rem); color: var(--muted); text-align: center; margin-bottom: clamp(12px,1.2vw,18px); padding: 10px 14px; background: var(--surface); border-radius: 8px; }
.btn-pay-setup { width: 100%; background: linear-gradient(135deg, #10b981, #059669); color: white; border: none; padding: clamp(13px,1.3vw,17px); border-radius: 11px; font-family: 'DM Sans', sans-serif; font-size: clamp(0.88rem, 0.95vw, 1rem); font-weight: 700; cursor: pointer; transition: opacity 0.15s; }
.btn-pay-setup:hover { opacity: 0.9; }
.pay-active-badge { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2); border-radius: 14px; padding: clamp(14px,1.4vw,20px); display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pay-active-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #059669; }
.pay-active-icon i[data-lucide], .pay-active-icon i svg { width: clamp(1.7rem, 2.4vw, 2.1rem); height: clamp(1.7rem, 2.4vw, 2.1rem); stroke-width: 1.9; }
.pay-active-title { font-weight: 800; font-size: 1rem; color: #10b981; margin-bottom: 4px; }
.pay-active-sub { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.btn-update-bank { background: var(--surface); border: 1px solid var(--border); color: var(--muted); padding: 10px 18px; border-radius: 9px; font-family: 'DM Sans', sans-serif; font-size: 0.85rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pay-locked { text-align: center; padding: clamp(24px, 3vw, 48px) 16px; }
.pay-locked-icon { margin-bottom: 12px; display: inline-flex; align-items: center; justify-content: center; color: #64748b; }
.pay-locked-icon i[data-lucide], .pay-locked-icon i svg { width: clamp(2.1rem, 3.2vw, 3rem); height: clamp(2.1rem, 3.2vw, 3rem); stroke-width: 1.7; }
.pay-locked-title { font-weight: 800; font-size: clamp(0.95rem, 1.1vw, 1.1rem); margin-bottom: 6px; }
.pay-locked-sub { font-size: clamp(0.76rem, 0.82vw, 0.85rem); color: var(--muted); margin-bottom: 18px; line-height: 1.5; }
.btn-upgrade-pay { background: var(--accent); color: white; border: none; padding: clamp(11px,1.1vw,14px) clamp(20px,2vw,28px); border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: clamp(0.85rem, 0.92vw, 0.95rem); font-weight: 700; cursor: pointer; }

/* --------------
   BOOKING SETUP
   -------------- */
.bsetup-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(280px, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  align-items: stretch;
  width: 100%;
}
@media(max-width: 900px) { .bsetup-grid { grid-template-columns: 1fr; } }
.bsetup-left { display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 18px); }
.bsetup-rules-card { padding: 0; overflow: hidden; }
.bsetup-rules-card .bill-card-header { padding: clamp(16px,1.6vw,24px); border-bottom: 1px solid var(--border); margin-bottom: 0; }

/* Rule rows */
.rule-row { display: flex; align-items: center; gap: 14px; padding: clamp(14px,1.4vw,20px) clamp(16px,1.6vw,24px); border-bottom: 1px solid var(--border); transition: background 0.15s; }
.rule-row:hover { background: rgba(108,99,255,0.02); }
.rule-icon { font-size: clamp(1.2rem, 1.4vw, 1.5rem); flex-shrink: 0; width: 36px; text-align: center; }
.rule-body { flex: 1; min-width: 0; }
.rule-title { font-weight: 700; font-size: clamp(0.85rem, 0.95vw, 0.98rem); color: var(--text); margin-bottom: 3px; }
.rule-desc { font-size: clamp(0.72rem, 0.78vw, 0.8rem); color: var(--muted); line-height: 1.4; }
.bsetup-msg { font-size: 0.82rem; color: var(--accent); text-align: center; min-height: 18px; padding: 8px clamp(16px,1.6vw,24px); }

/* Booking link */
.bsetup-link-card { }
.bsetup-link-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }


/* Flow preview */
.bsetup-preview-card { }
.flow-preview-wrap { display: flex; flex-direction: column; gap: 0; }
.flow-step { display: flex; align-items: flex-start; gap: clamp(12px,1.2vw,16px); }
.flow-step-line { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.flow-step-dot { width: clamp(36px,3.6vw,44px); height: clamp(36px,3.6vw,44px); border-radius: 50%; background: rgba(108,99,255,0.1); border: 2px solid rgba(108,99,255,0.2); display: flex; align-items: center; justify-content: center; font-size: clamp(1rem,1.2vw,1.3rem); }
.flow-step-connector { width: 2px; height: clamp(18px,2vw,28px); background: rgba(108,99,255,0.12); margin: 3px 0; }
.flow-step-content { padding-top: 6px; padding-bottom: clamp(14px,1.4vw,20px); }
.flow-step-title { font-weight: 700; font-size: clamp(0.84rem, 0.94vw, 0.98rem); color: var(--text); margin-bottom: 3px; }
.flow-step-desc { font-size: clamp(0.72rem, 0.78vw, 0.8rem); color: var(--muted); line-height: 1.4; }
.flow-summary { margin-top: 4px; padding: clamp(10px,1vw,14px) clamp(14px,1.4vw,18px); background: rgba(108,99,255,0.06); border-radius: 10px; font-size: clamp(0.74rem, 0.8vw, 0.82rem); color: var(--accent); font-weight: 600; }


/* ----------------------------------
   SETTINGS POLISH - CLEANER TYPOGRAPHY + BOOKING PREVIEW
   ---------------------------------- */

#stab-billing .bill-card-header h3,
#stab-booking-setup .bill-card-header h3,
#stab-billing .plan-name,
#stab-booking-setup .rule-title,
#stab-booking-setup .flow-step-title,
#stab-billing .plan-col-name,
#stab-billing .plan-col-price {
  font-family: 'DM Sans', sans-serif;
  letter-spacing: -0.02em;
}

#stab-billing .bill-card-header h3,
#stab-booking-setup .bill-card-header h3 {
  font-size: clamp(1rem, 0.7vw + 0.82rem, 1.16rem);
  font-weight: 800;
}

#stab-billing .bill-sub,
#stab-booking-setup .bill-sub,
#stab-booking-setup .rule-desc,
#stab-booking-setup .flow-step-desc,
#stab-billing .plan-table td,
#stab-billing .plan-table th,
#stab-billing .pay-step-sub,
#stab-billing .pay-trust,
#stab-billing .inv-row-left .inv-desc,
#stab-billing .inv-link {
  font-size: clamp(0.74rem, 0.18vw + 0.7rem, 0.82rem);
}

#stab-billing .plan-name {
  font-size: clamp(1.35rem, 0.9vw + 1rem, 1.85rem);
  margin-bottom: 4px;
}

#stab-billing .plan-desc,
#stab-billing .bill-fine,
#stab-billing .btn-cancel-plan {
  font-size: clamp(0.74rem, 0.14vw + 0.7rem, 0.82rem);
}

#stab-booking-setup .bsetup-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.04fr) minmax(380px, 1fr);
  gap: clamp(18px, 1.8vw, 24px);
  align-items: start;
}

#stab-booking-setup .bsetup-left {
  gap: clamp(18px, 1.6vw, 22px);
}

#stab-booking-setup .bsetup-rules-card,
#stab-booking-setup .bsetup-link-card,
#stab-booking-setup .bsetup-preview-card {
  border-radius: 22px;
  box-shadow: 0 6px 20px rgba(31, 35, 53, 0.05);
}

#stab-booking-setup .bsetup-rules-card {
  padding: 0;
  overflow: hidden;
}

#stab-booking-setup .bsetup-rules-card .bill-card-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

#stab-booking-setup .rule-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

#stab-booking-setup .rule-row.rule-row-last {
  border-bottom: none;
}

#stab-booking-setup .rule-row:hover {
  background: rgba(108,99,255,0.018);
}

#stab-booking-setup .rule-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(108,99,255,0.08);
  font-size: 0.95rem;
  flex-shrink: 0;
}

#stab-booking-setup .rule-title {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

#stab-booking-setup .rule-desc {
  line-height: 1.5;
  color: #7e88a6;
}

#stab-booking-setup .toggle-switch {
  width: 46px;
  height: 26px;
}

#stab-booking-setup .toggle-slider:before {
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
}

#stab-booking-setup input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

#stab-booking-setup .bsetup-msg {
  padding: 10px 24px 16px;
  text-align: left;
  min-height: 24px;
}

#stab-booking-setup .bsetup-link-card {
  padding: 22px 24px 20px;
}

#stab-booking-setup .bsetup-link-card .bill-card-header {
  margin-bottom: 14px;
}

#stab-booking-setup .bsetup-link-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#stab-booking-setup .bsetup-link-display {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(108,99,255,0.04), rgba(0,196,154,0.035));
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.5;
  word-break: break-all;
}

#stab-booking-setup .bsetup-link-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#stab-booking-setup .btn-link-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

#stab-booking-setup .btn-link-action:hover {
  transform: translateY(-1px);
}

#stab-booking-setup .btn-link-copy {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

#stab-booking-setup .btn-link-open {
  background: var(--surface);
  color: var(--text);
}

#stab-booking-setup .btn-link-open:hover {
  border-color: rgba(108,99,255,0.28);
  color: var(--accent);
}

#stab-booking-setup .bsetup-link-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

#stab-booking-setup .meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(108,99,255,0.07);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
}

#stab-booking-setup .bsetup-preview-card {
  padding: 22px 24px 20px;
}

#stab-booking-setup .flow-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#stab-booking-setup .flow-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.96fr);
  gap: 20px;
  align-items: start;
}

#stab-booking-setup .flow-journey {
  display: flex;
  flex-direction: column;
}

#stab-booking-setup .flow-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

#stab-booking-setup .flow-step-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

#stab-booking-setup .flow-step-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(108,99,255,0.09);
  border: 1px solid rgba(108,99,255,0.18);
  display: grid;
  place-items: center;
  font-size: 1rem;
}

#stab-booking-setup .flow-step-connector {
  width: 2px;
  height: 24px;
  background: rgba(108,99,255,0.12);
  margin: 4px 0;
}

#stab-booking-setup .flow-step-content {
  padding-top: 5px;
  padding-bottom: 14px;
}

#stab-booking-setup .flow-step-title {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 4px;
}

#stab-booking-setup .flow-step-desc {
  color: #7e88a6;
  line-height: 1.45;
}

#stab-booking-setup .mock-booking-card {
  background: linear-gradient(180deg, rgba(108,99,255,0.06), rgba(255,255,255,0.98));
  border: 1px solid rgba(108,99,255,0.14);
  border-radius: 18px;
  padding: 18px;
}

#stab-booking-setup .mock-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

#stab-booking-setup .mock-eyebrow {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 700;
}

#stab-booking-setup .mock-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

#stab-booking-setup .mock-badge {
  padding: 7px 10px;
  border-radius: 999px;
  background: white;
  border: 1px solid rgba(108,99,255,0.16);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

#stab-booking-setup .mock-section {
  margin-bottom: 14px;
}

#stab-booking-setup .mock-section.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#stab-booking-setup .mock-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#stab-booking-setup .mock-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#stab-booking-setup .mock-service {
  padding: 12px 12px 11px;
  border-radius: 14px;
  background: white;
  border: 1px solid var(--border);
}

#stab-booking-setup .mock-service.active {
  border-color: rgba(108,99,255,0.32);
  box-shadow: inset 0 0 0 1px rgba(108,99,255,0.1);
}

#stab-booking-setup .mock-service span,
#stab-booking-setup .mock-input,
#stab-booking-setup .mock-select {
  display: block;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text);
}

#stab-booking-setup .mock-service small {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 4px;
}

#stab-booking-setup .mock-input,
#stab-booking-setup .mock-select {
  padding: 11px 12px;
  border-radius: 12px;
  background: white;
  border: 1px solid var(--border);
}

#stab-booking-setup .mock-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#stab-booking-setup .mock-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#stab-booking-setup .mock-time {
  border: 1px solid var(--border);
  background: white;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: default;
}

#stab-booking-setup .mock-time.active {
  background: rgba(108,99,255,0.1);
  border-color: rgba(108,99,255,0.26);
  color: var(--accent);
}

#stab-booking-setup .mock-confirm {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--accent), #8c84ff);
  color: white;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 800;
}

#stab-booking-setup .flow-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#stab-booking-setup .flow-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(108,99,255,0.08);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
}

#stab-booking-setup .flow-chip.muted {
  background: var(--surface);
  color: var(--muted);
}

@media (max-width: 1220px) {
  #stab-booking-setup .bsetup-grid {
    grid-template-columns: 1fr;
  }

  #stab-booking-setup .flow-preview-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  #stab-booking-setup .rule-row {
    align-items: flex-start;
    padding: 16px 18px;
  }

  #stab-booking-setup .bsetup-rules-card .bill-card-header,
  #stab-booking-setup .bsetup-link-card,
  #stab-booking-setup .bsetup-preview-card {
    padding-left: 18px;
    padding-right: 18px;
  }

  #stab-booking-setup .mock-service-grid,
  #stab-booking-setup .mock-section.split,
  #stab-booking-setup .mock-times {
    grid-template-columns: 1fr;
  }

  #stab-booking-setup .bsetup-link-actions {
    flex-direction: column;
  }

  #stab-booking-setup .btn-link-action {
    width: 100%;
  }
}

/* ================================
   SETTINGS VISUAL UNIFICATION
================================ */
#pg-settings {
  position: relative;
  isolation: isolate;
}

#pg-settings::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% -8%, rgba(108,99,255,0.14), transparent 42%),
    radial-gradient(circle at 86% -2%, rgba(0,196,154,0.1), transparent 34%);
  z-index: 0;
}

#pg-settings .settings-tab {
  position: relative;
  z-index: 1;
}

#pg-settings .settings-shell {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
}

#pg-settings .settings-shell-head {
  border: 1px solid rgba(108,99,255,0.16);
  background: linear-gradient(135deg, rgba(108,99,255,0.08), rgba(0,196,154,0.05));
  border-radius: 18px;
  padding: clamp(16px, 1.8vw, 24px);
  box-shadow: 0 8px 26px rgba(35, 37, 55, 0.06);
}

#pg-settings .settings-shell-head h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.36rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
  color: var(--text);
}

#pg-settings .settings-shell-head p {
  margin: 0;
  color: #69728f;
  line-height: 1.55;
  font-size: clamp(0.76rem, 0.16vw + 0.73rem, 0.88rem);
  max-width: 66ch;
}

#pg-settings .settings-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.6;
}

#pg-settings .sf label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

#pg-settings .sf input,
#pg-settings .sf select {
  min-height: 46px;
  border-radius: 12px;
  border-color: rgba(122, 130, 163, 0.24);
  background: linear-gradient(180deg, #ffffff, #f9faff);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#pg-settings .sf input:focus,
#pg-settings .sf select:focus {
  border-color: rgba(108,99,255,0.48);
  box-shadow: 0 0 0 3px rgba(108,99,255,0.12);
}

#pg-settings .sf input[readonly] {
  opacity: 1;
  color: #7e86a4;
  background: linear-gradient(180deg, #f6f8fc, #f0f3fb);
}

#pg-settings .s-btn {
  min-height: 44px;
  border-radius: 12px;
  padding: 0 18px;
  font-weight: 700;
}

#pg-settings .s-btn-primary {
  background: linear-gradient(135deg, var(--accent), #8178ff);
  box-shadow: 0 10px 18px rgba(108,99,255,0.24);
}

#pg-settings .s-btn-primary:hover {
  opacity: 1;
  transform: translateY(-1px);
}

#stab-profile .profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: start;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

#stab-profile .profile-card {
  border-radius: 20px;
  border: 1px solid rgba(122,130,163,0.22);
  box-shadow: 0 8px 20px rgba(31, 35, 53, 0.05);
  display: flex;
  flex-direction: column;
}

#stab-profile .profile-primary-card {
  grid-column: span 1;
}

#stab-profile #settings-password-card {
  grid-column: span 1;
}

#stab-profile .profile-link-card {
  grid-column: 1 / -1;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

#stab-profile .profile-link-box {
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid rgba(108,99,255,0.2);
  background: linear-gradient(135deg, rgba(108,99,255,0.07), rgba(0,196,154,0.06));
  color: #313c64;
  font-size: 0.82rem;
  word-break: break-all;
  margin-bottom: 12px;
}

#stab-profile .profile-slug {
  margin-top: 10px;
  font-size: 0.74rem;
  color: var(--muted);
}

#stab-profile .profile-slug strong {
  color: var(--text);
}

#stab-profile .danger-zone-panel {
  margin-top: clamp(4px, 0.6vw, 10px);
  border: 1px solid rgba(255,77,109,0.3);
  border-radius: 16px;
  padding: clamp(16px, 1.8vw, 24px);
  background: linear-gradient(135deg, rgba(255,77,109,0.06), rgba(255,77,109,0.02));
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

#stab-profile .danger-zone-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

#stab-profile .danger-zone-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: #ff4d6d;
  margin-bottom: 4px;
}

#stab-profile .danger-zone-copy {
  font-size: 0.82rem;
  color: #7f4d57;
  line-height: 1.55;
  max-width: 62ch;
}

#stab-profile .danger-zone-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

#stab-billing .bill-tabs-bar {
  border-radius: 14px;
  border: 1px solid rgba(108,99,255,0.18);
  background: rgba(255,255,255,0.76);
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 18px rgba(30,34,58,0.06);
}

#stab-billing .billing-tab-btn.active {
  box-shadow: 0 8px 14px rgba(108,99,255,0.18);
}

#stab-billing .bill-card {
  border-radius: 22px;
  border-color: rgba(122,130,163,0.22);
  box-shadow: 0 8px 24px rgba(31, 35, 53, 0.06);
}

#stab-billing .plan-card {
  background: linear-gradient(180deg, #ffffff, #fbfbff);
}

#stab-billing .plan-cancel-row {
  text-align: center;
  padding-top: 2px;
}

#stab-billing .inv-row {
  transition: background 0.16s ease;
}

#stab-billing .inv-row:hover {
  background: rgba(108,99,255,0.04);
}

#stab-billing .inv-row-right {
  justify-content: flex-end;
  flex-wrap: wrap;
}

#stab-billing .inv-link.subtle {
  color: var(--muted);
}

#stab-billing .inv-state {
  text-align: center;
  padding: 20px 16px;
  color: var(--muted);
  font-size: 0.82rem;
}

#stab-billing .pay-card {
  background: linear-gradient(180deg, #ffffff, #fcfffd);
}

#stab-booking-setup .bsetup-grid {
  align-items: stretch;
}

#stab-booking-setup .bsetup-left {
  display: flex;
  flex-direction: column;
}

#stab-booking-setup .bsetup-preview-card {
  height: 100%;
}

@media (max-width: 980px) {
  #stab-profile .profile-grid {
    grid-template-columns: 1fr;
  }

  #stab-profile .profile-primary-card,
  #stab-profile #settings-password-card,
  #stab-profile .profile-link-card {
    grid-column: 1 / -1;
  }

  #stab-billing .bill-tabs-bar {
    width: 100%;
    overflow-x: auto;
  }

  #pg-settings .settings-shell-head {
    border-radius: 16px;
    padding: 16px;
  }
}

@media (max-width: 640px) {
  #pg-settings::before {
    display: none;
  }

  #pg-settings .settings-shell {
    gap: 12px;
  }

  #pg-settings .settings-shell-head h2 {
    font-size: 1rem;
  }

  #pg-settings .settings-shell-head p {
    font-size: 0.78rem;
  }
}


/* Modal interaction hardening */
.qb-modal-backdrop { pointer-events: auto; }
.qb-modal-inner { position: relative; z-index: 1; pointer-events: auto; }

/* ---------------------------------------
   MODAL CLEANUP - SOFTER, FEWER LINES
   Keeps functionality intact, only visual cleanup
   --------------------------------------- */

#profile-modal .qb-modal-inner,
#billing-modal .qb-modal-inner,
#booking-modal .qb-modal-inner {
  border: 1px solid rgba(122,130,163,0.14) !important;
  border-radius: 22px !important;
  box-shadow: 0 22px 58px rgba(23, 27, 44, 0.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(252,253,255,0.96)) !important;
}

#profile-modal .qb-modal-inner > div:first-child,
#billing-modal .qb-modal-inner > div:first-child,
#booking-modal .qb-modal-inner > div:first-child {
  background: linear-gradient(180deg, #fafbff 0%, #f6f7fc 100%) !important;
  border-right: 1px solid rgba(122,130,163,0.09) !important;
}

#profile-modal .qb-modal-inner > div:first-child > div:first-child,
#billing-modal .qb-modal-inner > div:first-child > div:first-child,
#booking-modal .qb-modal-inner > div:first-child > div:first-child {
  border-bottom-color: rgba(122,130,163,0.06) !important;
}

#profile-modal .qb-modal-inner > div:last-child > div:first-child,
#billing-modal .qb-modal-inner > div:last-child > div:first-child,
#booking-modal .qb-modal-inner > div:last-child > div:first-child {
  border-bottom-color: rgba(122,130,163,0.08) !important;
  background: rgba(255,255,255,0.72);
}

#profile-modal .qb-modal-inner > div:last-child > div:first-child button,
#billing-modal .qb-modal-inner > div:last-child > div:first-child button,
#booking-modal .qb-modal-inner > div:last-child > div:first-child button {
  background: rgba(246,247,252,0.92) !important;
  border-color: rgba(122,130,163,0.14) !important;
}

#profile-modal .qb-sidebar-btn,
#billing-modal .qb-sidebar-btn,
#booking-modal .qb-sidebar-btn {
  border-radius: 12px;
}

#profile-modal .qb-sidebar-btn:hover,
#billing-modal .qb-sidebar-btn:hover,
#booking-modal .qb-sidebar-btn:hover {
  background: rgba(108,99,255,0.06);
}

#profile-modal .qb-sidebar-btn.active,
#billing-modal .qb-sidebar-btn.active,
#booking-modal .qb-sidebar-btn.active {
  background: rgba(108,99,255,0.11);
  box-shadow: none;
}

#profile-modal .sf input,
#profile-modal .sf select,
#profile-modal .sf textarea,
#billing-modal input,
#billing-modal select,
#booking-modal input,
#booking-modal select {
  border-color: rgba(122,130,163,0.14);
  background: rgba(247,248,252,0.75);
  box-shadow: none;
}

#profile-modal .sf input:focus,
#profile-modal .sf select:focus,
#profile-modal .sf textarea:focus,
#billing-modal input:focus,
#billing-modal select:focus,
#booking-modal input:focus,
#booking-modal select:focus {
  border-color: rgba(108,99,255,0.34);
  box-shadow: 0 0 0 4px rgba(108,99,255,0.08);
}

/* Profile modal cleanup */
#pm-bookinglink > div:last-child {
  border-top-color: rgba(122,130,163,0.06) !important;
}

.pm-support-subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.pm-support-subtab {
  border: 1px solid rgba(122,130,163,0.2);
  background: rgba(246,247,252,0.9);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.pm-support-subtab.active {
  border-color: rgba(108,99,255,0.28);
  background: rgba(108,99,255,0.12);
  color: var(--accent);
}

.pm-support-media-wrap {
  margin: 4px 0 6px;
  border: 1px solid rgba(122,130,163,0.15);
  border-radius: 12px;
  padding: 11px;
  background: rgba(248,249,253,0.66);
}

.pm-support-media-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.pm-support-media-title {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.pm-support-clear {
  border: 1px solid rgba(122,130,163,0.2);
  background: rgba(255,255,255,0.86);
  color: var(--muted);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.pm-support-paste-zone {
  border: 1px dashed rgba(108,99,255,0.38);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  color: var(--muted);
  font-size: 0.76rem;
  cursor: pointer;
  background: rgba(108,99,255,0.04);
}

.pm-support-paste-zone:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108,99,255,0.14);
  border-color: rgba(108,99,255,0.55);
}

.pm-support-media-empty {
  margin-top: 10px;
  font-size: 0.74rem;
  color: var(--muted);
  text-align: center;
}

.pm-support-media-list {
  margin-top: 10px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.pm-support-media-item {
  border: 1px solid rgba(122,130,163,0.14);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.pm-support-media-preview {
  background: #f5f6fb;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-support-media-preview img,
.pm-support-media-preview video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.pm-support-media-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-support-media-meta {
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.pm-support-media-name {
  font-size: 0.7rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-support-remove {
  border: 1px solid rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.08);
  color: #ef4444;
  border-radius: 6px;
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 0.72rem;
  cursor: pointer;
}

.pm-support-media-note {
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--muted);
}

@media (max-width: 700px) {
  .pm-support-subtabs {
    flex-wrap: wrap;
  }
}

/* Billing modal cleanup */
#billing-modal .bill-card {
  border-color: rgba(122,130,163,0.11) !important;
  box-shadow: 0 10px 24px rgba(31,35,53,0.05) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fcfcff 100%) !important;
}

#billing-modal .qb-tab-panel {
  padding: 20px 22px !important;
}

#billing-modal #bm-plan > div:first-child {
  padding: 16px 18px !important;
  gap: 12px !important;
}

#billing-modal .inv-empty-state {
  padding: clamp(30px, 3.2vw, 46px) 20px;
}

#billing-modal .bill-card-header {
  align-items: center;
}

#bm-plan > div:first-child,
#billing-modal .pay-trust,
#billing-modal .next-charge-badge,
#billing-modal .pay-step,
#billing-modal .pay-active-badge,
#billing-modal .pay-locked,
#billing-modal .plan-stat {
  border-color: rgba(122,130,163,0.10) !important;
  box-shadow: none !important;
}

#billing-modal .bill-card-header {
  margin-bottom: 18px;
}

#billing-modal .inv-card .bill-card-header {
  border-bottom: 1px solid rgba(122,130,163,0.06) !important;
  background: linear-gradient(180deg, rgba(108,99,255,0.025), rgba(108,99,255,0.01)) !important;
}

#billing-modal .inv-row {
  border-bottom-color: rgba(122,130,163,0.05) !important;
}

#billing-modal .plan-table thead th {
  border-bottom-color: rgba(122,130,163,0.08) !important;
}

#billing-modal .plan-table tbody td {
  border-bottom-color: rgba(122,130,163,0.05) !important;
}

/* Booking modal cleanup */
#bkm-rules > div:first-of-type {
  gap: 10px !important;
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
  border-radius: 0 !important;
}

#bkm-rules > div:first-of-type > div {
  border: 1px solid rgba(122,130,163,0.10) !important;
  border-top: 1px solid rgba(122,130,163,0.10) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fcfcff 100%) !important;
  box-shadow: 0 8px 20px rgba(31,35,53,0.04);
}

#bkm-rules > div:first-of-type > div:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f8f8ff 100%) !important;
}

#booking-modal #gcal-connect-row,
#booking-modal #noshow-settings,
#booking-modal #bkm-localisation > div > div,
#booking-modal #bkm-insights > div:first-child > div,
#booking-modal #bkm-insights > div:last-child {
  border-color: rgba(122,130,163,0.10) !important;
  box-shadow: 0 8px 20px rgba(31,35,53,0.04);
}

#booking-modal #bkm-localisation > div > div,
#booking-modal #bkm-insights > div:first-child > div,
#booking-modal #bkm-insights > div:last-child {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcff 100%) !important;
  border-radius: 16px !important;
}

#booking-modal #bkm-insights > div:first-child {
  gap: 12px !important;
}

#booking-modal #bkm-insights > div:last-child {
  border-radius: 16px !important;
}

/* Make separators feel almost invisible instead of harsh */
#profile-modal [style*="border-top:1px solid var(--border)"],
#profile-modal [style*="border-bottom:1px solid var(--border)"],
#billing-modal [style*="border-top:1px solid var(--border)"],
#billing-modal [style*="border-bottom:1px solid var(--border)"],
#booking-modal [style*="border-top:1px solid var(--border)"],
#booking-modal [style*="border-bottom:1px solid var(--border)"] {
  border-color: rgba(122,130,163,0.06) !important;
}

/* -- Lucide icon styles -- */
.sn i[data-lucide], .sn i {
  width: 15px; height: 15px;
  stroke-width: 1.75;
  flex-shrink: 0;
  display: inline-flex;
}
.sn i svg { width:15px; height:15px; }
.stat-icon i[data-lucide], .stat-icon i svg {
  width: 22px; height: 22px;
  stroke-width: 1.5;
}
.bk-link i[data-lucide], .bk-link i svg { width:13px;height:13px;vertical-align:middle;margin-right:3px; }
.signout-btn i[data-lucide], .signout-btn i svg { width:13px;height:13px;vertical-align:middle;margin-right:3px; }
.qb-sidebar-btn i[data-lucide], .qb-sidebar-btn i svg { width:15px;height:15px;stroke-width:1.75; }
/* Globally soften all borders */
.settings-card, .bill-card, .acc-card, .inv-card, .pay-card, .plan-card, .compare-card {
  border-color: rgba(120,128,160,0.12) !important;
}
.user-box { border-color: rgba(120,128,160,0.12); }
.sf input, .sf select, .sf textarea {
  border-color: rgba(120,128,160,0.18) !important;
}
table thead th { border-bottom-color: rgba(120,128,160,0.1); }
tbody td { border-bottom-color: rgba(120,128,160,0.07); }


/* staff stats v2 */
.staff-volume-pies{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.staff-volume-pie-card{border:1px solid rgba(120,128,160,0.12);border-radius:16px;padding:15px;background:linear-gradient(180deg,#ffffff 0%,#fbfbfe 100%);box-shadow:0 1px 4px rgba(0,0,0,0.03);}
.staff-volume-pie-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.staff-volume-pie-person{display:flex;align-items:center;gap:10px;min-width:0;}
.staff-volume-pie-avatar{width:40px;height:40px;border-radius:12px;background:rgba(108,99,255,0.1);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.82rem;flex-shrink:0;}
.staff-volume-pie-name{font-size:0.86rem;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.staff-volume-pie-sub{font-size:0.72rem;color:var(--muted);margin-top:3px;}
.staff-volume-pie-badge{font-size:0.72rem;font-weight:800;border-radius:999px;padding:4px 10px;background:var(--surface);white-space:nowrap;}
.staff-volume-pie-badge.up{color:#10b981;background:rgba(16,185,129,0.1);}
.staff-volume-pie-badge.down{color:#ef4444;background:rgba(239,68,68,0.1);}
.staff-volume-pie-badge.flat{color:var(--muted);background:rgba(148,163,184,0.12);}
.staff-volume-pie-body{display:flex;align-items:center;gap:14px;}
.staff-volume-pie{--staff-pie:0%;position:relative;width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--accent) 0 var(--staff-pie), #e7ebf6 var(--staff-pie) 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.staff-volume-pie::after{content:'';position:absolute;inset:12px;border-radius:50%;background:#fff;border:1px solid rgba(120,128,160,0.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.75);}
.staff-volume-pie-center{position:relative;z-index:1;text-align:center;padding:0 8px;}
.staff-volume-pie-center strong{display:block;font-family:'Manrope',sans-serif;font-size:1.3rem;font-weight:800;line-height:1.05;color:var(--text);}
.staff-volume-pie-center span{display:block;margin-top:4px;font-size:0.66rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;}
.staff-volume-pie-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:1;min-width:0;}
.staff-volume-pie-stat{padding:10px;border-radius:12px;background:var(--surface);border:1px solid rgba(120,128,160,0.12);}
.staff-volume-pie-stat-label{font-size:0.66rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;}
.staff-volume-pie-stat-value{margin-top:5px;font-family:'Manrope',sans-serif;font-size:1.02rem;font-weight:800;line-height:1.1;color:var(--text);}
.staff-volume-pie-stat-value.accent{color:var(--accent);}
.staff-volume-pie-stat-value.muted{color:#98a1bc;}
.staff-outcome-chart{display:flex;flex-direction:column;gap:14px;}
.staff-outcome-plot{position:relative;min-height:270px;padding-top:2px;}
.staff-outcome-svg{display:block;width:100%;height:270px;}
.staff-outcome-gridline{stroke:#e7ebf6;stroke-width:1;}
.staff-outcome-axis-text{fill:#98a1bc;font-size:11px;font-weight:700;font-family:'DM Sans',sans-serif;}
.staff-outcome-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.staff-outcome-line.completed{stroke:#10b981;}
.staff-outcome-line.cancelled{stroke:#ef4444;}
.staff-outcome-line.no-show{stroke:#f59e0b;}
.staff-outcome-line.open{stroke:#cbd5e1;}
.staff-outcome-dot{stroke:#fff;stroke-width:2;}
.staff-outcome-dot.completed{fill:#10b981;}
.staff-outcome-dot.cancelled{fill:#ef4444;}
.staff-outcome-dot.no-show{fill:#f59e0b;}
.staff-outcome-dot.open{fill:#cbd5e1;}
.staff-outcome-axis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;}
.staff-outcome-axis-label{padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid rgba(120,128,160,0.12);text-align:center;}
.staff-outcome-axis-name{font-size:0.74rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.staff-outcome-axis-sub{font-size:0.68rem;color:var(--muted);margin-top:4px;}
.staff-outcome-totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.staff-outcome-total{padding:11px 12px;border-radius:12px;background:var(--surface);border:1px solid rgba(120,128,160,0.12);}
.staff-outcome-total-label{font-size:0.66rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;}
.staff-outcome-total-value{margin-top:5px;font-family:'Manrope',sans-serif;font-size:1.02rem;font-weight:800;line-height:1.1;}
.staff-outcome-total.completed .staff-outcome-total-value{color:#10b981;}
.staff-outcome-total.cancelled .staff-outcome-total-value{color:#ef4444;}
.staff-outcome-total.no-show .staff-outcome-total-value{color:#f59e0b;}
.staff-outcome-total.open .staff-outcome-total-value{color:#94a3b8;}
.staff-leaderboard-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap;}
.staff-leaderboard-toggle{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:8px 14px;border-radius:999px;font-size:0.76rem;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;display:inline-flex;align-items:center;gap:8px;transition:all 0.2s;}
.staff-leaderboard-toggle:hover{border-color:var(--accent);color:var(--accent);}
.staff-leaderboard-toggle[disabled]{opacity:0.55;cursor:not-allowed;}
.staff-leaderboard-meta{font-size:0.72rem;color:var(--muted);}
@media(max-width:900px){
  .staff-volume-pie-body{align-items:flex-start;flex-direction:column;}
  .staff-volume-pie{width:100px;height:100px;}
  .staff-volume-pie::after{inset:10px;}
}
@media(max-width:760px){
  .staff-volume-pies{grid-template-columns:1fr;}
  .staff-volume-pie-metrics{width:100%;}
  .staff-outcome-totals{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* staff stats v3 */
.staff-volume-overview{display:flex;flex-direction:column;gap:16px;}
.staff-volume-overview-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.staff-volume-total-card{border:1px solid rgba(120,128,160,0.12);border-radius:18px;padding:16px;background:linear-gradient(180deg,#ffffff 0%,#fbfbfe 100%);box-shadow:0 1px 4px rgba(0,0,0,0.03);}
.staff-volume-total-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.staff-volume-total-label{font-size:0.78rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;}
.staff-volume-total-badge{font-size:0.72rem;font-weight:800;border-radius:999px;padding:4px 10px;background:var(--surface);white-space:nowrap;}
.staff-volume-total-badge.up{color:#10b981;background:rgba(16,185,129,0.1);}
.staff-volume-total-badge.down{color:#ef4444;background:rgba(239,68,68,0.1);}
.staff-volume-total-badge.flat,.staff-volume-total-badge.neutral{color:var(--muted);background:rgba(148,163,184,0.12);}
.staff-volume-total-body{display:flex;align-items:center;gap:16px;}
.staff-volume-total-donut{--staff-pie:0%;position:relative;width:126px;height:126px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.staff-volume-total-donut.this{background:conic-gradient(var(--accent) 0 var(--staff-pie), #e7ebf6 var(--staff-pie) 100%);}
.staff-volume-total-donut.last{background:conic-gradient(#cfd7ea 0 var(--staff-pie), #edf1f8 var(--staff-pie) 100%);}
.staff-volume-total-donut::after{content:'';position:absolute;inset:12px;border-radius:50%;background:#fff;border:1px solid rgba(120,128,160,0.12);}
.staff-volume-total-center{position:relative;z-index:1;text-align:center;padding:0 8px;}
.staff-volume-total-center strong{display:block;font-family:'Manrope',sans-serif;font-size:1.4rem;font-weight:800;line-height:1.05;color:var(--text);}
.staff-volume-total-center span{display:block;margin-top:4px;font-size:0.66rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;}
.staff-volume-total-copy{min-width:0;display:flex;flex-direction:column;gap:4px;}
.staff-volume-total-value{font-family:'Manrope',sans-serif;font-size:1.8rem;font-weight:800;line-height:1;color:var(--text);}
.staff-volume-total-sub{font-size:0.75rem;color:var(--muted);max-width:180px;}
.staff-volume-overview-footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.staff-volume-overview-stat{padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid rgba(120,128,160,0.12);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.staff-volume-overview-stat-label{font-size:0.72rem;color:var(--muted);font-weight:700;}
.staff-volume-overview-stat strong{font-family:'Manrope',sans-serif;font-size:1rem;font-weight:800;color:var(--text);}
.staff-volume-overview-stat strong.up{color:#10b981;}
.staff-volume-overview-stat strong.down{color:#ef4444;}
.staff-volume-overview-stat strong.flat{color:#94a3b8;}
#staff-stats-cards{display:none !important;}
@media(max-width:900px){
  .staff-volume-overview-main,.staff-volume-overview-footer{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .staff-volume-total-body{flex-direction:column;align-items:flex-start;}
  .staff-volume-total-donut{width:108px;height:108px;}
}

/* admin.modal.css merged */
:root {--qb-modal-ease: cubic-bezier(0.22, 0.98, 0.36, 1);--qb-modal-ease-out: cubic-bezier(0.16, 1, 0.3, 1);}@keyframes tabFadeIn {from { opacity: 0; transform: translateY(10px); }to { opacity: 1; transform: translateY(0); }}@keyframes bookOpenForward {0% {opacity: 0;transform: perspective(1400px) rotateY(-13deg) translate3d(-14px,0,0) scale(.985);}55% { opacity: 1; }100% {opacity: 1;transform: perspective(1400px) rotateY(0deg) translate3d(0,0,0) scale(1);}}@keyframes bookOpenBackward {0% {opacity: 0;transform: perspective(1400px) rotateY(13deg) translate3d(14px,0,0) scale(.985);}55% { opacity: 1; }100% {opacity: 1;transform: perspective(1400px) rotateY(0deg) translate3d(0,0,0) scale(1);}}html {scrollbar-gutter: stable;}.qb-modal-backdrop {display:flex !important;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none !important;background:rgba(10,12,20,0.12) !important;transition:opacity .22s var(--qb-modal-ease),background-color .24s var(--qb-modal-ease),visibility 0s linear .22s !important;transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);will-change: opacity;}.qb-modal-backdrop.open {opacity:1;visibility:visible;pointer-events:auto !important;background:rgba(10,12,20,0.24) !important;transition:opacity .22s var(--qb-modal-ease),background-color .24s var(--qb-modal-ease),visibility 0s linear 0s !important;}.qb-modal-backdrop.qb-js-motion,.qb-modal-backdrop.qb-js-motion .qb-modal-inner,.qb-modal-backdrop.qb-js-motion .qb-modal-inner > div:first-child,.qb-modal-backdrop.qb-js-motion .qb-modal-inner > div:last-child {transition: none !important;}.qb-modal-inner {position:relative;z-index:1;pointer-events:auto;opacity:0;transform:translate3d(0,14px,0) scale(.975);transform-origin:center center;transition:transform .28s var(--qb-modal-ease-out),opacity .22s ease-out !important;will-change:transform, opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden;contain:layout paint;}.qb-modal-backdrop.open .qb-modal-inner {opacity:1;transform:translate3d(0,0,0) scale(1);}#profile-modal .qb-modal-inner,#billing-modal .qb-modal-inner,#booking-modal .qb-modal-inner {height: clamp(500px, 70vh, 580px);font-family: 'DM Sans', sans-serif;}#danger-modal .qb-modal-inner {font-family: 'DM Sans', sans-serif;}#profile-modal [style*="font-family:'Syne'"],#billing-modal [style*="font-family:'Syne'"],#booking-modal [style*="font-family:'Syne'"],#danger-modal [style*="font-family:'Syne'"] {font-family: 'Manrope', sans-serif !important;letter-spacing: -0.015em;}#pm-section-title,#bm-section-title,#bkm-section-title,#set-plan-name,#billing-modal .bill-card-header h3,#billing-modal .pay-step-title,#billing-modal .pay-active-title,#billing-modal .pay-locked-title {font-family: 'Manrope', sans-serif !important;letter-spacing: -0.02em;}.qb-inline-icon-btn {display: inline-flex;align-items: center;justify-content: center;gap: 8px;}.qb-inline-icon-btn i[data-lucide],.qb-inline-icon-btn i svg {width: 14px;height: 14px;stroke-width: 1.9;}#profile-modal .qb-modal-inner > div:last-child,#billing-modal .qb-modal-inner > div:last-child,#booking-modal .qb-modal-inner > div:last-child {min-height: 0;overflow: hidden !important;display: flex;flex-direction: column;}#profile-modal .pm-tab-scroll,#billing-modal .qb-tab-panel,#booking-modal .qb-tab-panel {flex: 1;min-height: 0;overflow-y: auto;overscroll-behavior: contain;scrollbar-gutter: stable;}.qb-modal-inner > div:first-child {opacity: 0;transform: translate3d(-10px,0,0);transition: transform .14s var(--qb-modal-ease), opacity .12s ease;}.qb-modal-backdrop.open .qb-modal-inner > div:first-child {opacity: 1;transform: translate3d(0,0,0);}.qb-modal-inner > div:last-child {opacity: 0;transform: translate3d(10px,0,0);transition: transform .14s var(--qb-modal-ease), opacity .12s ease;}.qb-modal-backdrop.open .qb-modal-inner > div:last-child {opacity: 1;transform: translate3d(0,0,0);}.qb-tab-panel {animation: tabFadeIn 0.24s ease forwards;}.has-gsap-motion .qb-tab-panel,.has-gsap-motion .pm-support-form {animation: none !important;}.qb-tab-panel.tab-book-forward {transform-origin: left center;animation: bookOpenForward .5s var(--qb-modal-ease-out) both;backface-visibility: hidden;}.qb-tab-panel.tab-book-backward {transform-origin: right center;animation: bookOpenBackward .5s var(--qb-modal-ease-out) both;backface-visibility: hidden;}.pm-support-form.form-book-forward {transform-origin: left center;animation: bookOpenForward .52s var(--qb-modal-ease-out) both;backface-visibility: hidden;}.pm-support-form.form-book-backward {transform-origin: right center;animation: bookOpenBackward .52s var(--qb-modal-ease-out) both;backface-visibility: hidden;}.qb-sidebar-btn {display:flex;align-items:center;gap:9px;width:100%;background:transparent;color:var(--text);border:none;padding:9px 12px;border-radius:11px;font-size:0.82rem;cursor:pointer;font-family:'DM Sans',sans-serif;text-align:left;transition:background 0.2s,color 0.2s, transform 0.2s;}.qb-sidebar-btn:hover { background:rgba(108,99,255,0.05); transform:translate3d(2px,0,0); }.qb-sidebar-btn.active { background:rgba(108,99,255,0.12);color:var(--accent);font-weight:600; transform:translate3d(1px,0,0); }.services-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px;}.services-title{font-size:1.02rem;font-weight:800;margin:0;}.services-copy{font-size:0.78rem;color:var(--muted);margin:5px 0 0;}.services-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;}.services-section-head h3{font-size:0.96rem;font-weight:800;margin:0;}.services-section-head p{font-size:0.76rem;color:var(--muted);margin:4px 0 0;}.services-btn{border:none;border-radius:9px;padding:8px 14px;font-size:0.8rem;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;display:inline-flex;align-items:center;gap:6px;}.services-btn-primary{background:var(--accent);color:#fff;}.services-btn-muted{background:var(--surface);color:var(--text);border:1px solid var(--border);}.services-filters{display:grid;grid-template-columns:minmax(200px,1.2fr) repeat(2,minmax(170px,1fr));gap:10px;}.services-input{width:100%;background:var(--card);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:8px;font-size:0.82rem;font-family:'DM Sans',sans-serif;}.services-status-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-size:0.68rem;font-weight:700;}.services-status-chip.active{background:rgba(16,185,129,0.12);color:#059669;}.services-status-chip.inactive{background:rgba(148,163,184,0.18);color:#64748b;}.services-vis{font-size:0.72rem;color:var(--muted);line-height:1.5;}.services-row-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}.services-row-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:5px 10px;border-radius:7px;font-size:0.74rem;font-family:'DM Sans',sans-serif;cursor:pointer;}.services-row-btn.warn{border-color:rgba(245,158,11,0.3);color:#b45309;background:rgba(245,158,11,0.08);}.services-row-btn.danger{border-color:rgba(239,68,68,0.25);color:#dc2626;background:rgba(239,68,68,0.08);}.services-crews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}.services-crew-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;box-shadow:0 2px 10px rgba(15,23,42,0.04);}.services-crew-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;}.services-crew-name{font-size:0.9rem;font-weight:800;}.services-crew-meta{font-size:0.74rem;color:var(--muted);margin-top:4px;line-height:1.5;}.services-crew-members{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px;}.services-member-chip{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:999px;font-size:0.7rem;}.services-modal-backdrop{position:fixed;inset:0;z-index:10060;background:rgba(8,11,20,0.44);display:flex;align-items:center;justify-content:center;padding:20px;}.services-modal-card{background:var(--card);border:1px solid var(--border);border-radius:14px;max-width:860px;width:100%;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,0.25);}.services-modal-card-sm{max-width:560px;}.services-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border);}.services-modal-head h3{margin:0;font-size:0.98rem;font-weight:800;}.services-modal-head p{margin:4px 0 0;font-size:0.74rem;color:var(--muted);}.services-icon-btn{background:var(--surface);border:1px solid var(--border);color:var(--muted);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:0.9rem;}.services-modal-body{padding:16px 20px;overflow:auto;}.services-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border);background:#fcfcff;}.services-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px;}.services-form-block{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;}.services-form-block h4{font-size:0.78rem;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);margin:0 0 10px;}.services-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.services-switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;font-size:0.82rem;}.services-check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:160px;overflow:auto;border:1px solid rgba(120,128,160,0.14);background:#fff;border-radius:10px;padding:10px;}.services-check-item{display:flex;align-items:center;gap:8px;font-size:0.78rem;color:var(--text);}.services-check-actions{display:flex;justify-content:flex-end;margin-bottom:8px;}.services-token{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:0.76rem;}.services-token-sub{font-size:0.7rem;color:var(--muted);}.services-token-remove{border:1px solid var(--border);background:#fff;color:var(--muted);width:20px;height:20px;line-height:18px;border-radius:999px;cursor:pointer;padding:0;}.services-empty-box{font-size:0.76rem;color:var(--muted);line-height:1.45;}.services-picker-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow:auto;padding:2px 1px;}.services-picker-item{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer;}.services-picker-item input{margin-top:2px;accent-color:var(--accent);}.services-picker-meta{display:flex;flex-direction:column;gap:3px;min-width:0;}.services-picker-meta strong{font-size:0.82rem;color:var(--text);font-weight:700;}.services-picker-meta span{font-size:0.72rem;color:var(--muted);line-height:1.4;}.avail-services-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}.avail-service-row{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface);}.avail-service-row input{margin-top:2px;accent-color:var(--accent);}.avail-service-row .svc-name{font-size:0.82rem;font-weight:700;color:var(--text);}.avail-service-row .svc-meta{font-size:0.72rem;color:var(--muted);line-height:1.45;margin-top:2px;}.avail-service-row.disabled{opacity:0.62;}.services-empty{padding:24px 14px;text-align:center;color:var(--muted);font-size:0.8rem;}@media (max-width: 760px) {#profile-modal .qb-modal-inner,#billing-modal .qb-modal-inner,#booking-modal .qb-modal-inner {height: min(88vh, 620px);}.qb-modal-inner {transform: translate3d(0,10px,0) scale(.986);}.services-filters{grid-template-columns:1fr;}.services-form-grid,.services-mini-grid,.services-check-list{grid-template-columns:1fr;}}@media (prefers-reduced-motion: reduce) {.qb-modal-backdrop,.qb-modal-inner,.qb-modal-inner > div:first-child,.qb-modal-inner > div:last-child,.qb-tab-panel,.qb-sidebar-btn,#service-modal.services-inline-drawer,#service-modal .services-inline-drawer-card {transition: none !important;animation: none !important;transform: none !important;}.qb-modal-backdrop.open {backdrop-filter: none !important;-webkit-backdrop-filter: none !important;}}

/* Stripe Connect Express status */
.pay-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.pay-head-copy{display:flex;flex-direction:column;gap:4px;}
.pay-mini-title{font-size:0.86rem;font-weight:800;color:var(--text);}
.pay-mini-sub{font-size:0.76rem;line-height:1.5;color:var(--muted);max-width:460px;}
.pay-beta-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:rgba(108,99,255,0.12);color:var(--accent);font-size:0.72rem;font-weight:700;white-space:nowrap;}
.pay-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:14px;}
.pay-status-pill{border:1px solid rgba(122,130,163,0.12);border-radius:14px;background:rgba(248,249,253,0.8);padding:12px 13px;display:flex;flex-direction:column;gap:5px;}
.pay-status-k{font-size:0.68rem;letter-spacing:0.03em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.pay-status-v{font-size:0.82rem;font-weight:700;color:var(--text);}
.pay-req-box{margin-top:14px;padding:14px;border-radius:14px;border:1px solid rgba(245,158,11,0.18);background:rgba(255,251,235,0.8);}
.pay-req-title{font-size:0.76rem;font-weight:800;color:#9a6700;margin-bottom:9px;}
.pay-req-items{display:flex;flex-wrap:wrap;gap:8px;}
.pay-req-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#fff7db;color:#92400e;font-size:0.74rem;font-weight:600;border:1px solid rgba(245,158,11,0.15);}
.pay-actions-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.pay-actions-row .btn-pay-setup,.pay-actions-row .btn-update-bank{flex:1 1 220px;justify-content:center;}


/* Services inline editor drawer — inline page drawer, not modal overlay */
:root{--qb-drawer-ease:cubic-bezier(0.22,1,0.36,1);--qb-drawer-duration:520ms;--qb-service-drawer-width:clamp(430px,38vw,560px);}

.services-layout{display:block;position:relative;min-width:0;}
.services-main-column{min-width:0;width:100%;padding-right:0;transition:padding-right var(--qb-drawer-duration) var(--qb-drawer-ease);will-change:padding-right;}
#pg-services.service-drawer-open .services-main-column{padding-right:calc(var(--qb-service-drawer-width) + clamp(16px,1.8vw,24px));}
#pg-services.service-drawer-open .services-row-actions{flex-wrap:wrap;}

#service-modal.services-inline-drawer{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:var(--qb-service-drawer-width);
  max-width:min(var(--qb-service-drawer-width),calc(100vw - 32px));
  min-width:0;
  visibility:hidden;
  pointer-events:none;
  z-index:2;
  overflow:visible;
}
#service-modal.services-inline-drawer.is-mounted{
  visibility:visible;
  pointer-events:auto;
}
#service-modal.services-inline-drawer.closing{
  pointer-events:none;
}
#service-modal .services-inline-drawer-backdrop{display:none !important;}
#service-modal .services-inline-drawer-shell{
  position:sticky;
  top:18px;
  width:100%;
  max-width:100%;
  height:min(calc(100vh - 110px),860px);
  transform:translate3d(calc(100% + 64px),0,0) scale(0.985);
  transform-origin:right center;
  will-change:transform;
  backface-visibility:hidden;
  contain:layout paint;
}
#service-modal .services-inline-drawer-card{
  position:relative;
  width:100%;
  height:100%;
  max-height:100%;
  background:var(--card);
  border:1px solid rgba(120,128,160,0.14);
  border-radius:22px;
  box-shadow:
    0 2px 6px rgba(15,23,42,0.05),
    0 18px 42px rgba(15,23,42,0.08),
    12px 28px 60px rgba(15,23,42,0.12);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
#service-modal .services-modal-head{padding:18px 20px 14px;border-bottom:1px solid rgba(120,128,160,0.1);background:linear-gradient(180deg,#ffffff,rgba(252,252,255,0.7));flex-shrink:0;}
#service-modal .services-modal-head h3{font-size:1rem;letter-spacing:-0.01em;}
#service-modal .services-modal-head p{max-width:38ch;line-height:1.5;font-size:0.76rem;}
#service-modal .services-modal-body{padding:18px 20px 20px;overflow-y:auto;flex:1;min-height:0;scrollbar-gutter:stable;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
#service-modal .services-modal-body > *{opacity:1;transform:none;transition:none;}
#service-modal .services-modal-foot{padding:14px 20px 18px;background:linear-gradient(180deg,rgba(252,252,255,0.7),#fcfcff);border-top:1px solid rgba(120,128,160,0.1);flex-shrink:0;position:sticky;bottom:0;z-index:1;}
#service-modal .services-form-block{box-shadow:inset 0 1px 0 rgba(255,255,255,0.66);}
#service-modal .services-check-list{max-height:180px;}

@media (max-width: 960px){
  #pg-services.service-drawer-open .services-main-column{padding-right:0;}
  #service-modal.services-inline-drawer{position:relative;top:auto;right:auto;bottom:auto;width:100%;max-width:100%;margin-top:16px;}
  #service-modal .services-inline-drawer-shell{
    position:relative;
    top:0;
    width:100%;
    height:auto;
    min-height:min(70vh,760px);
  }
}
@media (max-width: 540px){
  #service-modal .services-inline-drawer-card{border-radius:16px;}
}
@media (prefers-reduced-motion: reduce){
  .services-main-column{transition:none !important;}
}