:root{
    /* Reverted to the navy/gold/teal combination specifically requested —
       matching the reference card screenshot exactly: navy avatar/button,
       gold star/accents, rose credential badge, teal specialty tags. */
    --navy:#16233F; --navy-light:#22345A; --brass:#B8873B; --brass-light:#D9AE6B;
    --paper:#F6F1E7; --paper-dark:#EDE4D0; --ink:#1C1B18; --ink-soft:#5B5648;
    --stamp-red:#9B3B3B; --teal:#2F6B66; --line:#D8CCB4; --card:#FFFFFF; --radius:16px;
    --teal-dark:#2F6B66; --hero-bg:#16233F; --success:#2F6B66;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{background:var(--card);color:var(--ink);font-family:'Inter',-apple-system,sans-serif;-webkit-font-smoothing:antialiased;padding-bottom:110px;}
  .app-footer{text-align:center;padding:18px 16px;font-size:11px;color:var(--ink-soft);border-top:1px solid var(--line);}
  h1,h2,h3,.display{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-0.02em;}
  .mono{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
  a{color:inherit;} button{font-family:inherit;cursor:pointer;}
  :focus-visible{outline:2px solid var(--brass);outline-offset:2px;}
  input,textarea,select{font-family:inherit;}

  .topbar{background:var(--paper);color:var(--ink);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);}
  .brand{display:flex;align-items:baseline;gap:8px;}
  .brand .mark{font-family:'Inter',sans-serif;font-weight:800;font-size:20px;color:var(--ink);}
  .brand .sub{font-size:11px;color:var(--ink-soft);letter-spacing:.02em;display:none;}
  .topbar-actions{display:flex;gap:22px;font-size:14px;color:var(--ink-soft);align-items:center;}
  /* FIX: previously this whole container was display:none by default
     (only becoming flex at 768px+), which is exactly why the bell —
     when it lived inside here — never showed on mobile at all. Now
     the container itself is always flex, and instead each child that
     SHOULD stay mobile-hidden (the nav links, the account button —
     both already duplicated by the bottom-nav on mobile) controls its
     own visibility individually. The bell has neither .nav-link nor
     .topbar-account, so it's naturally exempt from this rule and
     stays visible on mobile, while still sitting in its correct
     desktop position (after Bookings) since it's still a DOM child of
     .topbar-actions here. */
  .topbar-actions > .nav-link, .topbar-actions > .topbar-account{display:none;}
  .topbar-actions button{background:none;border:none;color:inherit;font-size:14px;padding:6px 2px;}
  .topbar-actions button.active{color:var(--ink);font-weight:700;border-bottom:2px solid var(--ink);}
  .topbar-account{background:var(--navy);color:#fff;border:none;padding:8px 18px;border-radius:999px;font-size:12.5px;font-weight:700;}
  .topbar-bell{position:relative;background:none;border:none;cursor:pointer;padding:8px;color:var(--ink);}
  /* .nav-badge's default right:22% was tuned for the WIDE bottom-nav
     buttons (flex:1 across a full-width bar) — on this small, compact
     button, 22% of its own tiny width lands in the wrong spot
     entirely. This override restores the badge to sit correctly at
     the icon's actual corner, matching what the old inline style
     already did before this class existed. */
  .topbar-bell .nav-badge{top:2px;right:2px;}

  .hero{background:var(--hero-bg);padding:36px 18px 30px;position:relative;overflow:hidden;}
  .route-line{display:none;}
  .hero-inner{position:relative;z-index:1;max-width:900px;margin:0 auto;}
  .eyebrow-pill{display:inline-flex;align-items:center;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--brass-light);background:var(--teal-dark);border:1px solid rgba(217,174,107,0.35);padding:7px 16px;border-radius:999px;margin:0 0 18px;}
  .hero h1{font-size:30px;line-height:1.12;margin:0 0 12px;max-width:520px;color:#fff;font-weight:800;}
  .hero p.lede{color:rgba(255,255,255,0.65);font-size:15px;margin:0 0 22px;max-width:480px;}
  .search-box{background:var(--card);border:1px solid var(--line);border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,0.25);max-width:560px;padding:4px 4px 4px 18px;transition:border-radius .2s;}
  .search-box-row{display:flex;align-items:center;width:100%;}
  .search-box.smart-mode{border-radius:20px;padding:16px;}
  .search-box-smart{width:100%;}
  .search-box-smart textarea{width:100%;min-height:90px;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:16px;font-family:inherit;margin-bottom:4px;resize:vertical;box-sizing:border-box;}
  .smart-match-hint{font-size:12.5px;color:var(--ink-soft);margin:0 0 8px;}
  #smartMatchWordCount{font-size:11.5px;color:var(--ink-soft);text-align:right;margin-bottom:10px;}
  .hero-mode-toggle{display:flex;gap:8px;margin-bottom:14px;max-width:560px;}
  .hero-toggle-btn{flex:1;text-align:center;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.3);color:#fff;padding:9px 14px;border-radius:999px;font-size:13px;font-weight:600;transition:background .15s,color .15s;}
  .hero-toggle-btn.active{background:#fff;color:var(--navy);border-color:#fff;}
  .search-box svg{flex:none;color:var(--ink-soft);}
  .search-box input{border:none;outline:none;flex:1;min-width:0;padding:12px 8px;font-size:16px;background:transparent;color:var(--ink);}
  .search-box button{background:var(--navy);color:#fff;border:none;border-radius:999px;padding:11px 16px;font-size:13px;font-weight:600;white-space:nowrap;}

  .filters{max-width:900px;margin:0 auto;padding:16px 18px 6px;}
  .filter-group{margin-bottom:12px;}
  .filter-label{font-family:'Inter',sans-serif;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin:0 0 8px;display:block;}
  .chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
  .chip-row::-webkit-scrollbar{display:none;}
  .chip{flex:none;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:500;white-space:nowrap;transition:background .15s,color .15s,border-color .15s;}
  .chip.active{background:var(--navy);border-color:var(--navy);color:#fff;}
  .chip.active.teal-active{background:var(--teal);border-color:var(--teal);}

  .toolbar{max-width:900px;margin:0 auto;padding:12px 18px 4px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink-soft);}
  .toolbar select{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:6px 10px;font-size:12.5px;color:var(--ink);}

  .results{max-width:900px;margin:0 auto;padding:8px 18px 30px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;}
  .results-divider{grid-column:1/-1;font-size:16px;font-weight:700;color:var(--stamp-red);text-align:center;padding:18px 0 6px;border-top:2px solid var(--line);margin-top:10px;}
  .results-divider-sub{grid-column:1/-1;font-size:12.5px;color:var(--ink-soft);text-align:center;padding:0 0 10px;font-weight:400;}
  .pagination-wrap{grid-column:1/-1;display:flex;justify-content:center;gap:6px;padding:16px 0;flex-wrap:wrap;}
  .page-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 13px;border-radius:8px;font-size:13px;font-weight:600;}
  .page-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}
  .page-ellipsis{padding:8px 4px;color:var(--ink-soft);}
  
  .empty-state{text-align:center;padding:50px 20px;color:var(--ink-soft);grid-column:1/-1;}
  .empty-state .display{font-size:19px;color:var(--ink);margin-bottom:6px;}

  .pro-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;position:relative;display:flex;flex-direction:column;gap:10px;text-align:left;width:100%;box-shadow:0 1px 3px rgba(0,0,0,0.03);}
  .pro-top{display:flex;gap:12px;align-items:flex-start;}
  .avatar{width:52px;height:52px;border-radius:10px;background:var(--navy);color:var(--brass-light);font-family:'Inter',sans-serif;font-weight:600;font-size:18px;display:flex;align-items:center;justify-content:center;flex:none;position:relative;}
  .avatar-wrap{position:relative;flex:none;}
  .verified-badge{position:absolute;bottom:-3px;right:-3px;width:18px;height:18px;background:#0A66C2;border-radius:50%;border:2px solid var(--paper);display:flex;align-items:center;justify-content:center;}
  .verified-badge svg{display:block;}
  .sheet-avatar-wrap .verified-badge{width:22px;height:22px;bottom:-4px;right:-4px;border-width:2.5px;}
  .pro-name-row{flex:1;min-width:0;}
  .pro-name{font-family:'Inter',sans-serif;font-weight:600;font-size:17px;margin:0 0 2px;}
  .pro-cred{display:inline-flex;align-items:center;gap:5px;font-family:'Inter',sans-serif;font-weight:600;font-size:11px;color:var(--stamp-red);background:rgba(155,59,59,0.08);border:1px solid rgba(155,59,59,0.25);padding:2px 8px;border-radius:5px;}
  .pro-loc{font-size:12.5px;color:var(--ink-soft);margin-top:4px;}
  .save-btn{flex:none;background:none;border:none;color:var(--line);padding:11px;}
  .save-btn.saved{color:var(--stamp-red);}
  .stamps-row{display:flex;gap:6px;flex-wrap:wrap;}
  .stamp{font-family:'Inter',sans-serif;font-size:10.5px;border:1px solid var(--line);color:var(--ink-soft);padding:3px 8px;border-radius:6px;background:var(--paper-dark);white-space:nowrap;}
  .spec-row{display:flex;gap:6px;flex-wrap:wrap;}
  .spec-tag{font-size:11.5px;background:rgba(47,107,102,0.09);color:var(--teal);padding:4px 9px;border-radius:999px;font-weight:500;white-space:nowrap;}
  .pill-cred{font-size:11.5px;background:rgba(155,59,59,0.08);color:var(--stamp-red);padding:4px 9px;border-radius:999px;font-weight:600;display:inline-flex;align-items:center;}
  .pill-loc{font-family:'Inter',sans-serif;font-size:10.5px;border:1px solid var(--line);color:var(--ink-soft);padding:3px 8px;border-radius:6px;background:var(--paper-dark);display:inline-flex;align-items:center;gap:3px;white-space:nowrap;}
  .pill-consult{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700;border:1px solid rgba(184,135,59,0.4);color:var(--brass);background:rgba(184,135,59,0.14);padding:3px 8px;border-radius:6px;white-space:nowrap;}
  .more-tag{font-size:11.5px;color:var(--ink-soft);padding:4px 9px;font-weight:500;white-space:nowrap;}
  .cred-loc-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
  .pro-meta{display:flex;align-items:center;justify-content:space-between;border-top:1px dotted var(--line);padding-top:10px;margin-top:2px;}
  .rating{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;}
  .rating svg{color:var(--brass);}
  .rating span.count{color:var(--ink-soft);font-weight:400;}
  .view-btn{background:var(--navy);color:#fff;border:none;padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:600;}

  .overlay{position:fixed;inset:0;background:rgba(22,20,16,0.5);z-index:100;display:none;align-items:flex-end;justify-content:center;}
  .overlay.open{display:flex;}
  .sheet{background:var(--paper);width:100%;max-width:620px;max-height:88vh;overflow-y:auto;border-radius:20px 20px 0 0;padding:20px 20px 30px;position:relative;animation:slideUp .22s ease-out;}
  @keyframes slideUp{from{transform:translateY(30px);opacity:0;}to{transform:translateY(0);opacity:1;}}
  .sheet-close{position:absolute;top:14px;right:14px;background:var(--paper-dark);border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ink);}
  .sheet-head{display:flex;gap:14px;align-items:flex-start;margin:6px 0 16px;padding-right:36px;}
  .sheet-avatar{width:64px;height:64px;border-radius:12px;background:var(--navy);color:var(--brass-light);font-family:'Inter',sans-serif;font-weight:600;font-size:22px;display:flex;align-items:center;justify-content:center;flex:none;}
  .sheet-name{font-family:'Inter',sans-serif;font-size:21px;font-weight:600;margin:0 0 4px;}
  .sheet-section{margin-bottom:18px;}
  .sheet-section h3{font-family:'Inter',sans-serif;text-transform:uppercase;font-size:11px;letter-spacing:.1em;color:var(--ink-soft);margin:0 0 8px;font-weight:600;}
  .sheet-bio{font-size:14px;line-height:1.6;color:var(--ink);}
  .fee-box{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:16px;}
  .fee-box .amt{font-family:'Inter',sans-serif;font-weight:600;font-size:18px;}
  .book-btn{width:100%;background:var(--teal);color:#fff;border:none;padding:14px;border-radius:999px;font-size:14.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;}
  .book-btn:disabled{opacity:.5;cursor:not-allowed;}
  .book-confirm{background:var(--teal);color:#fff;padding:12px 14px;border-radius:10px;font-size:13.5px;text-align:center;display:none;}
  .book-confirm.show{display:block;}
  .book-note{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px;font-size:13.5px;margin-bottom:10px;resize:vertical;min-height:56px;}

  .bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--navy);display:flex;z-index:50;border-top:3px solid var(--brass);padding-bottom:env(safe-area-inset-bottom);}
  .bottom-nav button{flex:1;background:none;border:none;color:#9AA5BC;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;position:relative;}
  .bottom-nav button.active{color:var(--brass-light);}
  .nav-badge{position:absolute;top:2px;right:22%;background:var(--stamp-red);color:#fff;font-size:9px;font-weight:700;border-radius:999px;min-width:15px;height:15px;display:flex;align-items:center;justify-content:center;padding:0 3px;}

  .tab-panel{display:none;max-width:900px;margin:0 auto;padding:28px 20px 40px;}
  .tab-panel.active{display:block;}
  .stub-empty{text-align:center;padding:40px 20px;color:var(--ink-soft);}
  .stub-empty .display{font-size:18px;color:var(--ink);margin-bottom:6px;}

  /* ---- Account / auth forms ---- */
  .role-toggle{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:18px;}
  .role-toggle button{flex:1;background:var(--card);border:none;padding:11px;min-height:44px;font-size:13px;font-weight:600;color:var(--ink-soft);}
  .role-toggle button.active{background:var(--navy);color:#fff;}
  .auth-form{max-width:420px;}
  .auth-card-inner{max-width:420px;}
  .auth-mode-switch{display:flex;gap:4px;margin:-10px 0 4px -6px;font-size:13px;}
  .auth-mode-switch button{background:none;border:none;padding:0 6px;min-width:44px;min-height:44px;color:var(--ink-soft);text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-skip-ink:none;}
  .auth-mode-switch button.active{color:var(--ink);text-decoration-color:var(--brass);font-weight:600;}
  .field{margin-bottom:12px;}
  .field label{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:5px;font-weight:500;}
  .field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:16px;background:var(--card);color:var(--ink);}
  .field textarea{resize:vertical;min-height:80px;}
  .pw-field-wrap{position:relative;}
  .pw-field-wrap input{padding-right:48px;}
  .pw-toggle-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;border:none;padding:13px;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .pw-toggle-btn:hover{color:var(--ink);}
  .field-error{color:var(--stamp-red);font-size:12.5px;margin-top:6px;min-height:1em;}
  .input-invalid{border-color:var(--stamp-red) !important;background:rgba(155,59,59,0.04);}
  .input-valid{border-color:var(--teal) !important;}
  .pw-checklist{list-style:none;padding:0;margin:8px 0 0;font-size:12px;}
  .pw-checklist li{padding:2px 0 2px 20px;position:relative;}
  .pw-checklist li.rule-unmet{color:#d9534f;}
  .pw-checklist li.rule-unmet::before{content:'✗';position:absolute;left:0;font-weight:700;color:#d9534f;}
  .pw-checklist li.rule-met{color:#5cb85c;}
  .pw-checklist li.rule-met::before{content:'✓';position:absolute;left:0;font-weight:700;color:#5cb85c;}
  .primary-btn{background:var(--navy);color:#fff;border:none;padding:13px 20px;border-radius:999px;font-size:14px;font-weight:600;width:100%;}
  .secondary-btn{background:var(--card);border:1px solid var(--line);color:var(--ink);padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;}
  /* Tap targets on the password screens (login, forgot, reset, change): at least 44 px tall - Apple's guideline,
     WCAG 2.5.5. Scoped by form / id on purpose, so buttons on other screens keep their current height. */
  .auth-form .primary-btn,#passwordForm .primary-btn,#forgotPasswordLink,#backToLogin{min-height:44px;}
  .account-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:18px;}
  .section-title{font-family:'Inter',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin:0 0 14px;}
  .profile-layout{display:flex;flex-direction:column;gap:16px;}
  .profile-nav{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
  .profile-nav::-webkit-scrollbar{display:none;}
  .profile-nav button{flex:none;text-align:left;background:var(--card);border:1px solid var(--line);padding:9px 14px;border-radius:999px;font-size:13px;color:var(--ink-soft);font-weight:500;white-space:nowrap;}
  .profile-nav button.active{background:var(--navy);border-color:var(--navy);color:#fff;}
  .profile-nav .logout-btn{margin-left:auto;color:var(--stamp-red);border-color:rgba(155,59,59,0.3);}
  .profile-content{flex:1;min-width:0;}
  @media (min-width:768px){
    .profile-layout{flex-direction:row;align-items:flex-start;}
    .profile-nav{flex-direction:column;width:220px;flex:none;overflow-x:visible;}
    .profile-nav button{border-radius:8px;width:100%;}
    .profile-nav .logout-btn{margin-left:0;margin-top:16px;}
  }
  .verify-banner{background:rgba(184,135,59,0.1);border:1px solid rgba(184,135,59,0.3);color:var(--ink-soft);font-size:13px;padding:10px 14px;border-radius:12px;margin-bottom:16px;}
  .chip-input-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
  .chip-remove{background:var(--paper-dark);border:1px solid var(--line);color:var(--ink);font-size:11.5px;padding:4px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;}
  .chip-remove button{background:none;border:none;color:var(--stamp-red);padding:0;font-weight:700;}
  .booking-row{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;}
  .status-pill{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:999px;}
  .status-pending{background:rgba(184,135,59,0.15);color:var(--brass);}
  .status-confirmed{background:rgba(47,107,102,0.15);color:var(--success);}
  .status-declined{background:rgba(155,59,59,0.12);color:var(--stamp-red);}
  .toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:11px 20px;border-radius:999px;font-size:13px;z-index:200;display:none;}
  .toast.show{display:block;}

  /* Phone: default styles above this point (single column, bottom tab bar). */

  /* Small tablet portrait and up (e.g. a compact tablet held upright). */
  @media (min-width:640px){ .results{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} .hero h1{font-size:34px;} }

  /* iPad portrait and up: switch from the mobile bottom-tab-bar pattern to
     a proper top-nav + sidebar layout — this is the width where a phone-
     style bottom bar starts wasting space that a compact top nav wouldn't. */
  @media (min-width:768px){
    body{padding-bottom:0;} .bottom-nav{display:none;} .topbar-actions > .nav-link, .topbar-actions > .topbar-account{display:inline-block;} .brand .sub{display:block;}
    .overlay{align-items:center;} .sheet{border-radius:16px;max-height:80vh;margin:20px;}
    .filters,.toolbar,.results,.tab-panel{padding-left:24px;padding-right:24px;}
  }

  /* Restores the 3-per-row card layout at the same width it used to
     trigger at — kept separate from the 768px breakpoint above (which is
     specifically about switching navigation style for iPad, not column count). */
  @media (min-width:860px){
    .results{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}
  }

  /* iPad landscape / small laptop and up: more horizontal room for a more
     generous hero and content padding. */
  @media (min-width:1024px){
    .hero{padding:44px 32px 30px;}
    .filters,.toolbar,.results,.tab-panel{padding-left:32px;padding-right:32px;}
  }

  /* ---- Custom booking date/time picker ----
     Replaces the native <input type="datetime-local">, confirmed
     directly not rendering usably on some mobile browsers — native
     date/time input rendering is entirely up to the OS/browser and
     outside this app's control. This is fully custom-built markup
     instead, so it renders identically everywhere. */
  .booking-datetime-picker{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px;background:var(--card);}
  .booking-cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .booking-cal-title{font-family:'Inter',sans-serif;font-weight:700;font-size:14px;color:var(--ink);}
  .booking-cal-nav{background:var(--paper-dark);border:none;width:28px;height:28px;border-radius:50%;font-size:16px;line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center;}
  .booking-cal-nav:disabled{opacity:.35;cursor:not-allowed;}
  .booking-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:10.5px;color:var(--ink-soft);font-weight:600;margin-bottom:4px;}
  .booking-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
  .booking-cal-cell{aspect-ratio:1;border:none;background:none;border-radius:8px;font-size:13px;color:var(--ink);display:flex;align-items:center;justify-content:center;}
  .booking-cal-cell:not(:disabled):not(.booking-cal-empty):hover{background:var(--paper-dark);}
  .booking-cal-cell.selected{background:var(--navy);color:#fff;font-weight:700;}
  .booking-cal-cell:disabled{color:var(--line);cursor:not-allowed;}
  .booking-cal-empty{cursor:default;}
  .booking-time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px;}
  .booking-time-slot{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 4px;border-radius:8px;font-size:12px;font-weight:500;}
  .booking-time-slot:not(:disabled):hover{border-color:var(--teal);}
  .booking-time-slot.selected{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700;}
  .booking-time-slot:disabled{color:var(--line);border-color:var(--line);background:var(--paper-dark);cursor:not-allowed;}
  @media (min-width:480px){
    .booking-time-grid{grid-template-columns:repeat(4,1fr);}
  }

  /* ---- Professional availability management (time-block model) ----
     Matches the confirmed Calendly/Acuity pattern directly: type a
     start/end time range rather than tapping through individual slot
     cells, and choose Weekly vs. Date-specific as a structural mode
     rather than a post-edit scope dialog. */
  .avail-mode-toggle{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:14px;}
  .avail-mode-btn{background:none;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--ink-soft);}
  .avail-mode-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;}
  .avail-day-block{border-bottom:1px solid var(--line);padding:14px 0;}
  .avail-day-block:last-of-type{border-bottom:none;}
  .avail-day-name{font-family:'Inter',sans-serif;font-weight:700;font-size:14px;margin:0 0 8px;}
  .avail-unavailable-label{font-size:13px;color:var(--ink-soft);margin:0 0 8px;}
  .avail-block-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
  .avail-time-select{border:1px solid var(--line);border-radius:8px;padding:7px 8px;font-size:13px;color:var(--ink);background:var(--card);flex:1;min-width:0;}
  .avail-block-dash{color:var(--ink-soft);flex:none;}
  .avail-remove-block{background:none;border:none;color:var(--ink-soft);font-size:18px;line-height:1;flex:none;width:24px;height:24px;}
  .avail-remove-block:hover{color:var(--stamp-red);}
  .avail-add-block-link{background:none;border:none;color:var(--teal);font-size:12.5px;font-weight:600;padding:0;}