html.has-token #login-screen { display: none !important; }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  * { scrollbar-width: none; -ms-overflow-style: none; }
  *::-webkit-scrollbar { display: none; }
  :root {
    /* -- Black / White Palette ---------------------- */
    --ice: #e5e7eb;
    --freeze: #f9fafb;
    --medium-purple: #d1d5db;
    --purple-pain: #111111;
    --heavy-purple: #6b7280;
    /* -- Semantic mappings ------------------------- */
    --bg: #f3f4f6;
    --surface: #ffffff;
    --surface-glass: rgba(255,255,255,0.85);
    --border: rgba(0,0,0,0.10);
    --border-dark: rgba(0,0,0,0.20);
    --text: #111111;
    --text-muted: #6b7280;
    --text-faint: #9ca3af;
    --accent: #111111;
    --accent-warm: #374151;
    --accent-gold: #374151;
    --gold-light: rgba(0,0,0,0.05);
    --gold-glow: rgba(0,0,0,0.10);
    --green: #16a34a;
    --green-bg: #f0fdf4;
    --red: #dc2626;
    --red-bg: #fef2f2;
    --yellow: #b45309;
    --yellow-bg: #fffbeb;
    --radius: 10px;
    --font: 'DM Sans', system-ui, -apple-system, sans-serif;
    --font-brand: 'DM Sans', var(--font);
    --sidebar-bg: #111111;
    --sidebar-border: rgba(255,255,255,0.10);
    /* -- Transitions ------------------------------- */
    --ease-out: cubic-bezier(0.22,1,0.36,1);
    --ease-spring: cubic-bezier(0.34,1.3,0.64,1);
  }

  /* ── Payment notification banner ─────────────────── */
  #payment-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    color: #fff;
    font-family: var(--font);
    background:
      radial-gradient(120% 180% at 0% 0%, rgba(255,255,255,0.14) 0%, transparent 42%),
      linear-gradient(100deg, #9f1239 0%, #be123c 38%, #dc2626 100%);
    box-shadow: 0 8px 30px -6px rgba(190,18,60,0.5), inset 0 -1px 0 rgba(0,0,0,0.18);
    animation: pb-slidein 0.5s cubic-bezier(0.34,1.3,0.64,1) both;
    transition: background 0.35s ease, box-shadow 0.35s ease;
  }
  #payment-banner::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
    background-size: 220% 100%;
    animation: pb-sheen 5.5s ease-in-out infinite;
  }
  @keyframes pb-sheen { 0%,100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }
  #payment-banner.pb-warn {
    background:
      radial-gradient(120% 180% at 0% 0%, rgba(255,255,255,0.16) 0%, transparent 42%),
      linear-gradient(100deg, #b45309 0%, #d97706 42%, #f59e0b 100%);
    box-shadow: 0 8px 30px -6px rgba(217,119,6,0.5), inset 0 -1px 0 rgba(0,0,0,0.16);
  }
  #payment-banner.pb-hidden { display: none; }
  .pb-inner {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 14px;
    width: 100%; max-width: 1120px; min-height: 54px; padding: 9px 0;
  }
  @keyframes pb-slidein {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .pb-icon {
    flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 2px 8px rgba(0,0,0,0.2);
  }
  .pb-icon svg { width: 19px; height: 19px; stroke: #fff; }
  .pb-text {
    flex: 1; min-width: 0;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 10px;
    line-height: 1.35;
  }
  .pb-title {
    font-weight: 800; font-size: 0.9rem; letter-spacing: 0.005em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  }
  .pb-msg { font-weight: 500; font-size: 0.82rem; opacity: 0.92; }
  .pb-cta {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 16px;
    background: #fff; color: #be123c;
    border: none; border-radius: 999px;
    font-family: var(--font); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.01em;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 6px 16px -4px rgba(0,0,0,0.35), inset 0 -2px 0 rgba(0,0,0,0.06);
    transition: transform 0.18s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.18s ease, color 0.2s ease;
  }
  #payment-banner.pb-warn .pb-cta { color: #b45309; }
  .pb-cta svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
  .pb-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(0,0,0,0.42), inset 0 -2px 0 rgba(0,0,0,0.06); }
  .pb-cta:hover svg { transform: translateX(3px); }
  .pb-cta:active { transform: translateY(0) scale(0.97); }
  .pb-dismiss {
    flex-shrink: 0;
    background: rgba(255,255,255,0.14);
    border: none; border-radius: 9px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #fff;
    transition: background 0.15s, transform 0.15s;
  }
  .pb-dismiss svg { width: 15px; height: 15px; }
  .pb-dismiss:hover { background: rgba(255,255,255,0.28); transform: rotate(90deg); }
  @media (max-width: 560px) {
    .pb-msg { display: none; }
    .pb-cta { padding: 0 13px; }
  }
  /* Push page body down when banner is visible — transition so dismiss is smooth */
  body { transition: padding-top 0.28s cubic-bezier(0.22,1,0.36,1); }
  body.has-payment-banner { padding-top: 54px; }

  /* -- Global animations ---------------------------- */
  @keyframes fadeInUp {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:translateY(0); }
  }
  @keyframes scaleIn {
    from { opacity:0; transform:scale(0.94); }
    to   { opacity:1; transform:scale(1); }
  }
  @keyframes shimmer {
    from { background-position: -200% center; }
    to   { background-position:  200% center; }
  }
  @keyframes slideInRight {
    from { opacity:0; transform:translateX(16px); }
    to   { opacity:1; transform:translateX(0); }
  }
  @keyframes slideInLeft {
    from { opacity:0; transform:translateX(-16px); }
    to   { opacity:1; transform:translateX(0); }
  }
  @keyframes floatIn {
    from { opacity:0; transform:translateY(20px) scale(0.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
  }
  @keyframes count-up {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
  }
  @keyframes springPop {
    0%   { opacity:0; transform:scale(0.6) translateY(40px); }
    55%  { opacity:1; transform:scale(1.06) translateY(-6px); }
    75%  { transform:scale(0.97) translateY(3px); }
    90%  { transform:scale(1.02) translateY(-1px); }
    100% { transform:scale(1) translateY(0); }
  }
  @keyframes incBtnPulse {
    0%   { transform:scale(1); box-shadow:0 0 0 0 rgba(220,38,38,0.5); }
    40%  { transform:scale(0.94); box-shadow:0 0 0 0 rgba(220,38,38,0.4); }
    70%  { transform:scale(1.04); box-shadow:0 0 0 10px rgba(220,38,38,0); }
    100% { transform:scale(1); box-shadow:0 0 0 0 rgba(220,38,38,0); }
  }
  .inc-btn-animate { animation: incBtnPulse 0.45s cubic-bezier(0.34,1.3,0.64,1) both; }
  .page.active.page-enter { animation: fadeInUp 0.3s var(--ease-out) both; }
  .page.active.page-enter .page-header { animation: slideInLeft 0.32s var(--ease-spring) both; animation-delay: 0.02s; }
  .page.active.page-enter .stat-card { animation: floatIn 0.36s var(--ease-spring) both; }
  .page.active.page-enter .stat-card:nth-child(1) { animation-delay: 0.04s; }
  .page.active.page-enter .stat-card:nth-child(2) { animation-delay: 0.09s; }
  .page.active.page-enter .stat-card:nth-child(3) { animation-delay: 0.14s; }
  .page.active.page-enter .stat-card:nth-child(4) { animation-delay: 0.19s; }
  .page.active.page-enter .stat-card:nth-child(5) { animation-delay: 0.24s; }
  .page.active.page-enter .stat-card:nth-child(6) { animation-delay: 0.29s; }
  body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  input, button, select, textarea { font-family: var(--font); }
  input::placeholder,
  textarea::placeholder {
    font-family: var(--font);
    font-weight: 500;
    letter-spacing: 0;
  }

  /* ── LOGIN ─────────────────────────────────────────────────── */
  @keyframes ls-fadein { from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);} }
  @keyframes modal-in { from{opacity:0;transform:translateY(20px) scale(0.96);}to{opacity:1;transform:translateY(0) scale(1);} }

  /* ── Forgot-password modal v2 ──────────────────────────────── */
  @keyframes fp-card-in {
    from { opacity:0; transform:scale(0.91) translateY(22px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
  }
  @keyframes fp-step-in {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
  }
  @keyframes fp-overlay-in {
    from { opacity:0; }
    to   { opacity:1; }
  }
  @keyframes fp-shake {
    0%,100% { transform:translateX(0) scale(1.06); }
    20%,60%  { transform:translateX(-5px) scale(1.06); }
    40%,80%  { transform:translateX(5px) scale(1.06); }
  }
  @keyframes fp-bounce-in {
    0%   { transform:scale(0.7); opacity:0; }
    60%  { transform:scale(1.08); opacity:1; }
    100% { transform:scale(1); }
  }

  #forgot-modal-card { animation:fp-card-in 0.32s cubic-bezier(0.34,1.4,0.64,1) both; }

  .fp-close-btn {
    position:absolute; top:1.1rem; right:1.1rem;
    width:32px; height:32px; border-radius:50%;
    background:rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.08);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:#9ca3af; transition:background 0.18s, color 0.18s, border-color 0.18s; z-index:2;
  }
  .fp-close-btn:hover { background:#fee2e2; color:#dc2626; border-color:#fecaca; }

  .fp-body { padding:2rem; }

  .fp-step-icon {
    width:54px; height:54px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:1.1rem; flex-shrink:0;
  }
  .fp-icon-s1 { background:#0a0a0a; }
  .fp-icon-s2 { background:#2563eb; }
  .fp-icon-s3 { background:#059669; }

  .fp-title {
    font-family:var(--font); font-size:1.2rem; font-weight:750;
    color:#0a0a0a; margin:0 0 0.45rem; letter-spacing:-0.025em;
  }
  .fp-sub {
    font-family:var(--font); font-size:0.875rem; color:#71717a;
    line-height:1.6; margin:0 0 1.4rem;
  }
  .fp-email-chip { color:#0a0a0a; font-weight:700; word-break:break-all; }

  .fp-label {
    font-family:var(--font); font-size:0.68rem; font-weight:700;
    color:#9ca3af; text-transform:uppercase; letter-spacing:0.08em;
    display:block; margin-bottom:0.35rem;
  }
  .fp-field-wrap { margin-bottom:0.75rem; }
  .fp-input {
    width:100%; padding:13px 16px; box-sizing:border-box;
    background:#f4f4f5; border:1.5px solid transparent;
    border-radius:12px; font-family:var(--font); font-size:0.9375rem;
    color:#111; outline:none;
    transition:border-color 0.2s, background 0.2s, box-shadow 0.2s;
  }
  .fp-input:focus {
    border-color:#111; background:#fff;
    box-shadow:0 0 0 4px rgba(0,0,0,0.07);
  }
  .fp-input::placeholder { color:#aaa; }

  .fp-pw-wrap { position:relative; }
  .fp-pw-wrap .fp-input { padding-right:46px; }
  .fp-eye-btn {
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; color:#bbb;
    padding:4px; display:flex; align-items:center; justify-content:center;
    transition:color 0.15s; border-radius:6px;
  }
  .fp-eye-btn:hover { color:#374151; }

  .fp-primary-btn {
    width:100%; padding:14px; border:none; border-radius:14px;
    background:#0a0a0a; color:#fff; font-family:var(--font);
    font-size:0.9375rem; font-weight:650; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:9px;
    transition:background 0.2s, transform 0.18s, box-shadow 0.2s;
    box-shadow:0 2px 16px rgba(0,0,0,0.16); margin-top:1rem;
    letter-spacing:-0.01em;
  }
  .fp-primary-btn:hover:not(:disabled) {
    background:#1a1a1a; transform:translateY(-1px);
    box-shadow:0 6px 24px rgba(0,0,0,0.22);
  }
  .fp-primary-btn:active:not(:disabled) { transform:translateY(0); box-shadow:0 2px 10px rgba(0,0,0,0.14); }
  .fp-primary-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none !important; }
  .fp-primary-btn svg { transition:transform 0.2s; }
  .fp-primary-btn:hover:not(:disabled) svg { transform:translateX(3px); }

  .fp-error {
    background:#fef2f2; border:1px solid #fecaca; border-radius:10px;
    padding:10px 14px; font-family:var(--font); font-size:0.8125rem;
    color:#dc2626; font-weight:500; margin-bottom:1rem;
    display:flex; align-items:center; gap:7px; line-height:1.4;
  }

  /* OTP input grid */
  .fp-otp-wrap {
    display:flex; gap:8px; align-items:center;
    justify-content:center; margin:1.5rem 0;
  }
  .fp-otp-sep {
    width:16px; height:2px; background:rgba(0,0,0,0.18);
    border-radius:2px; flex-shrink:0; margin:0 2px;
  }
  .fp-otp-digit {
    width:46px; height:56px; flex-shrink:0;
    border:1.5px solid rgba(0,0,0,0.12); border-radius:14px;
    background:#f4f4f5; font-family:var(--font);
    font-size:1.5rem; font-weight:800; color:#111;
    text-align:center; outline:none; caret-color:transparent;
    transition:border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s;
  }
  .fp-otp-digit:focus {
    border-color:#111; background:#fff;
    box-shadow:0 0 0 4px rgba(0,0,0,0.09);
    transform:scale(1.07);
  }
  .fp-otp-digit.fp-filled { border-color:rgba(0,0,0,0.3); background:#fff; }
  .fp-otp-digit.fp-err-digit {
    border-color:#ef4444 !important; background:#fef2f2 !important;
    animation:fp-shake 0.42s ease !important; box-shadow:0 0 0 4px rgba(239,68,68,0.12) !important;
  }
  .fp-otp-digit.fp-ok-digit {
    border-color:#10b981 !important; background:#ecfdf5 !important;
    animation:fp-bounce-in 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
    color:#059669 !important;
  }

  .fp-resend-row {
    margin-top:1rem; text-align:center; min-height:1.5rem;
    display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .fp-timer-text { font-family:var(--font); font-size:0.8rem; color:#9ca3af; }
  .fp-link-btn {
    background:none; border:none; cursor:pointer;
    font-family:var(--font); font-size:0.8125rem; color:#111;
    font-weight:600; text-decoration:underline; text-underline-offset:2px;
    padding:0; transition:color 0.15s; letter-spacing:-0.01em;
  }
  .fp-link-btn:hover { color:#555; }

  #fp-s1, #fp-s2, #fp-s3 { animation:fp-step-in 0.28s cubic-bezier(0.34,1.4,0.64,1) both; }

  html:not(.has-token), html:not(.has-token) body { overflow:hidden; height:100%; }
  #login-screen {
    height:100vh; display:flex;
    align-items:flex-start;
    position:relative; overflow:hidden;
    background:#f2f2f2;
  }

  /* Full-page bg image — behind everything */
  .login-panel-right {
    position:absolute; inset:0; z-index:0;
  }
  .login-panel-right-img {
    width:100%; height:100%;
    object-fit:cover; object-position:center center;
    display:block;
  }
  .login-panel-right-overlay { display:none; }

  /* White panel — wave on right edge sits slightly left of center (~45vw) */
  .login-panel-left {
    position:relative; z-index:2;
    width:45vw; flex-shrink:0;
    height:100vh; background:#fff;
    display:flex; flex-direction:column;
    align-items:center;
    overflow:hidden;
    padding:0 2rem;
  }

  /* Inner form wrapper — fills remaining space, vertically centers content */
  .login-form-inner {
    width:100%; max-width:360px;
    flex:1; display:flex; flex-direction:column;
    justify-content:center;
    padding-bottom:2.5rem;
    overflow-y:auto;
  }

  /* Group brand + form so they center together as one unit */
  .login-center-group {
    display:flex; flex-direction:column; align-items:center;
    width:100%; max-width:360px;
  }

  /* mobile */
  @media(max-width:768px){
    .login-above-brand { max-width:100%; }
  }

  /* Dramatic wavy SVG — sits at the white panel's right edge (~45vw).
     Positioned against #login-screen (not .login-panel-left) so the panel's
     overflow-y:auto can't clip it. The -2px gives a tiny overlap so the wave's
     white merges seamlessly with the panel's white (no hairline seam). */
  .login-wave-sep {
    position:absolute; top:0; left:calc(45vw - 2px); height:100%;
    width:120px; z-index:3; pointer-events:none;
    overflow:visible;
  }

  /* Brand / logo block — hidden, replaced by above-card brand */
  .login-brand { display:none; }
  .login-logo-row { display:none; }
  .login-logo-icon { display:none; }
  .login-logo-name { display:none; }

  /* ── ABOVE-CARD BRAND (car animation) — anchored to panel top, not absolute ── */
  .login-above-brand {
    display:flex; justify-content:center;
    position:relative;
    width:100%;
    padding-top:5vh;
    flex-shrink:0;
    animation:ls-fadein 0.55s cubic-bezier(0.16,1,0.3,1) both;
    z-index:4;
  }
  .login-brand-wrap {
    display:inline-flex; flex-direction:column; align-items:flex-start;
    position:relative; padding:6px 6px 4px 6px; border-radius:10px;
    cursor:default;
  }
  .login-brand-road {
    position:relative; display:flex; align-items:center; gap:8px;
  }
  /* Brand logo image — sits beside the "RentalGate" title */
  .login-brand-logo-img {
    height:4.2rem; width:auto; flex-shrink:0; display:block;
    object-fit:contain; position:relative; top:1px;
    animation:ls-fadein 0.55s cubic-bezier(0.16,1,0.3,1) 0.06s both;
  }
  .login-brand-road::after {
    content:''; position:absolute; bottom:-4px; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,0,0,0.2) 15%,rgba(0,0,0,0.2) 85%,transparent);
    opacity:1;
  }

  /* B&W car SVG */
  .lf-car {
    position:absolute; top:-36px; left:-18px; width:80px; height:40px;
    opacity:0; pointer-events:none; overflow:visible;
  }
  /* exhaust needs transform-box so SVG transforms work correctly */
  .lf-car .lf-exhaust {
    transform-box:fill-box; transform-origin:center center;
  }
  .lf-car .lf-wheel-f,
  .lf-car .lf-wheel-r {
    transform-box:fill-box; transform-origin:center center;
  }
  @keyframes lf-drive {
    0%   { transform:translateX(-20px); opacity:0; }
    10%  { opacity:1; }
    85%  { opacity:1; }
    100% { transform:translateX(200px); opacity:0; }
  }
  @keyframes lf-wheel {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
  }
  @keyframes lf-exhaust {
    0%   { opacity:0.85; transform:scale(1) translate(0,0); }
    50%  { opacity:0.45; transform:scaleX(1.8) scaleY(1.5) translate(-6px,-3px); }
    100% { opacity:0; transform:scaleX(3) scaleY(2.4) translate(-14px,-6px); }
  }
  @keyframes lf-letter-pop {
    0%   { transform:translateY(0); color:inherit; }
    40%  { transform:translateY(-5px); color:#111; text-shadow:0 2px 8px rgba(0,0,0,0.18); }
    70%  { transform:translateY(-2px); color:#333; }
    100% { transform:translateY(0); color:inherit; }
  }
  .login-brand-wrap.lf-driving .lf-car {
    animation:lf-drive 2s cubic-bezier(0.4,0,0.2,1) forwards;
  }
  .login-brand-wrap.lf-driving .lf-car .lf-wheel-f,
  .login-brand-wrap.lf-driving .lf-car .lf-wheel-r {
    animation:lf-wheel 0.3s linear infinite;
  }
  .login-brand-wrap.lf-driving .lf-car .lf-exhaust {
    animation:lf-exhaust 0.5s ease-out infinite;
  }
  .lf-brand-logo {
    font-family:var(--font); font-size:3.2rem; font-weight:800;
    letter-spacing:-0.04em; color:#111; display:block;
    line-height:1; user-select:none; position:relative;
  }
  .lf-brand-logo em { color:#111; font-style:normal; }
  .lf-letter { display:inline-block; }
  .login-brand-wrap.lf-driving .lf-brand-logo .lf-letter:nth-child(1){animation:lf-letter-pop 0.4s ease 0.18s both;}
  .login-brand-wrap.lf-driving .lf-brand-logo .lf-letter:nth-child(2){animation:lf-letter-pop 0.4s ease 0.30s both;}
  .login-brand-wrap.lf-driving .lf-brand-logo .lf-letter:nth-child(3){animation:lf-letter-pop 0.4s ease 0.42s both;}
  .login-brand-wrap.lf-driving .lf-brand-logo .lf-letter:nth-child(4){animation:lf-letter-pop 0.4s ease 0.54s both;}
  .login-brand-wrap.lf-driving .lf-brand-logo .lf-letter:nth-child(5){animation:lf-letter-pop 0.4s ease 0.68s both;}
  .login-brand-wrap.lf-driving .lf-brand-logo .lf-letter:nth-child(6){animation:lf-letter-pop 0.4s ease 0.80s both;}
  .login-brand-wrap.lf-driving .lf-brand-logo .lf-letter:nth-child(7){animation:lf-letter-pop 0.4s ease 0.92s both;}
  .login-brand-wrap.lf-driving .lf-brand-logo .lf-letter:nth-child(8){animation:lf-letter-pop 0.4s ease 1.04s both;}
  .lf-brand-sub {
    font-family:var(--font); font-size:0.72rem; font-weight:700;
    letter-spacing:0.22em; text-transform:uppercase; color:#bbb;
    margin-top:4px; display:block;
  }

  /* ── SIDEBAR BRAND ANIMATION (mirrors login exactly, scaled ~0.4×) ── */
  .sb-brand-wrap {
    display:inline-flex; flex-direction:column; align-items:flex-start;
    position:relative; cursor:default;
  }
  .sb-brand-road { position:relative; display:block; }
  .sb-car {
    /* Same viewBox 72×28 as login car; rendered to match 1.5rem logo */
    position:absolute; top:-17px; left:-9px; width:37px; height:15px;
    opacity:0; pointer-events:none; overflow:visible;
  }
  .sb-car .sb-exhaust { transform-box:fill-box; transform-origin:center center; }
  .sb-car .sb-wheel-f, .sb-car .sb-wheel-r { transform-box:fill-box; transform-origin:center center; }
  @keyframes sb-drive {
    0%   { transform:translateX(-8px); opacity:0; }
    10%  { opacity:1; }
    85%  { opacity:1; }
    100% { transform:translateX(82px); opacity:0; }
  }
  @keyframes sb-wheel { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
  @keyframes sb-exhaust {
    0%   { opacity:0.85; transform:scale(1) translate(0,0); }
    50%  { opacity:0.45; transform:scaleX(1.8) scaleY(1.5) translate(-6px,-3px); }
    100% { opacity:0; transform:scaleX(3) scaleY(2.4) translate(-14px,-6px); }
  }
  @keyframes sb-letter-pop {
    0%   { transform:translateY(0); }
    40%  { transform:translateY(-2px); }
    70%  { transform:translateY(-1px); }
    100% { transform:translateY(0); }
  }
  .sb-brand-wrap.sb-driving .sb-car { animation:sb-drive 2s cubic-bezier(0.4,0,0.2,1) forwards; }
  .sb-brand-wrap.sb-driving .sb-car .sb-wheel-f,
  .sb-brand-wrap.sb-driving .sb-car .sb-wheel-r { animation:sb-wheel 0.3s linear infinite; }
  .sb-brand-wrap.sb-driving .sb-car .sb-exhaust { animation:sb-exhaust 0.5s ease-out infinite; }
  .sb-brand-logo {
    font-family:var(--font); font-size:1.15rem; font-weight:700;
    letter-spacing:-0.02em; display:block; line-height:1; user-select:none;
  }
  .sb-brand-logo em { font-style:normal; }
  .sb-letter {
    display:inline-block;
    background:linear-gradient(135deg,#ffffff 0%,#d1d5db 50%,#9ca3af 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  /* Match login timing exactly — :nth-child(1..4) hits both Rent and Flow (Flow letters are nth-child 1-4 of <em>) */
  .sb-brand-wrap.sb-driving .sb-brand-logo .sb-letter:nth-child(1){animation:sb-letter-pop 0.4s ease 0.18s both;}
  .sb-brand-wrap.sb-driving .sb-brand-logo .sb-letter:nth-child(2){animation:sb-letter-pop 0.4s ease 0.30s both;}
  .sb-brand-wrap.sb-driving .sb-brand-logo .sb-letter:nth-child(3){animation:sb-letter-pop 0.4s ease 0.42s both;}
  .sb-brand-wrap.sb-driving .sb-brand-logo .sb-letter:nth-child(4){animation:sb-letter-pop 0.4s ease 0.54s both;}

  /* Headings — match admin style */
  .login-title {
    font-family:var(--font); font-size:2.1rem; font-weight:700;
    letter-spacing:0.02em; color:#111; margin-bottom:0.3rem; line-height:1.25;
    animation:ls-fadein 0.5s cubic-bezier(0.16,1,0.3,1) 0.08s both;
  }
  .login-hint {
    font-size:1rem; color:#888; margin-bottom:1.5rem; line-height:1.5;
    animation:ls-fadein 0.5s cubic-bezier(0.16,1,0.3,1) 0.12s both;
  }

  /* Tabs */
  .login-tab-bar {
    display:flex; background:#f3f4f6; border-radius:10px;
    padding:3px; margin-bottom:1.25rem; gap:2px;
    animation:ls-fadein 0.5s cubic-bezier(0.16,1,0.3,1) 0.15s both;
  }
  .login-tab-btn {
    flex:1; padding:7px 10px; border:none; background:none;
    border-radius:8px; font-family:var(--font,sans-serif);
    font-size:0.82rem; font-weight:500; cursor:pointer;
    color:#888; transition:all 0.18s;
  }
  .login-tab-btn.active {
    background:#fff; color:#111; font-weight:700;
    box-shadow:0 1px 4px rgba(0,0,0,0.1);
  }

  /* Input groups with icons */
  .login-fields { display:flex; flex-direction:column; gap:0.7rem; }
  .lin-group {
    position:relative; display:flex; align-items:center;
    animation:ls-fadein 0.5s cubic-bezier(0.16,1,0.3,1) both;
  }
  .lin-group:nth-child(1){animation-delay:0.18s;}
  .lin-group:nth-child(2){animation-delay:0.22s;}
  .lin-icon-left {
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:#bbb; pointer-events:none; flex-shrink:0; line-height:0;
  }
  .lin-icon-right {
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer;
    color:#bbb; padding:4px; transition:color 0.15s; line-height:0;
  }
  .lin-icon-right:hover { color:#555; }
  #login-screen input[type=text],
  #login-screen input[type=email],
  #login-screen input[type=password],
  #login-screen input[type=tel] {
    width:100%; padding:12px 14px 12px 42px;
    background:rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.12);
    border-radius:10px; font-family:var(--font);
    font-size:0.9375rem; color:#111; outline:none;
    transition:border-color 0.18s, background 0.18s, box-shadow 0.18s;
  }
  #login-screen input[type=text]:focus,
  #login-screen input[type=email]:focus,
  #login-screen input[type=password]:focus,
  #login-screen input[type=tel]:focus {
    border-color:rgba(0,0,0,0.35) !important;
    background:rgba(0,0,0,0.07) !important;
    box-shadow:0 0 0 3px rgba(0,0,0,0.07) !important;
  }
  #login-screen input::placeholder { color:#aaa; }
  #login-screen input:-webkit-autofill,
  #login-screen input:-webkit-autofill:hover,
  #login-screen input:-webkit-autofill:focus,
  #login-screen input:-webkit-autofill:active {
    -webkit-text-fill-color:#111 !important;
    -webkit-box-shadow:0 0 0 1000px #fff inset !important;
    box-shadow:0 0 0 1000px #fff inset !important;
    caret-color:#111 !important;
    font-family:var(--font) !important;
    font-size:0.9375rem !important;
    transition:background-color 50000s ease-in-out 0s;
  }

  /* Remember + Forgot row */
  .login-remember-row {
    display:flex; align-items:center; justify-content:space-between;
    margin:0.85rem 0 1rem;
    animation:ls-fadein 0.5s cubic-bezier(0.16,1,0.3,1) 0.26s both;
  }
  .login-remember-label {
    display:flex; align-items:center; gap:9px;
    font-size:0.8125rem; color:#666; cursor:pointer; user-select:none;
  }
  .login-forgot-btn {
    background:none; border:none; cursor:pointer;
    font-family:var(--font); font-size:0.8125rem;
    color:#666; font-weight:500;
    transition:color 0.18s;
  }
  .login-forgot-btn:hover { color:#111; text-decoration:underline; }

  /* Sign In button — admin circle-fill style */
  #login-screen .flow-sign-in-btn {
    margin-top:0.25rem; position:relative;
    display:flex; align-items:center; justify-content:center;
    width:100%; height:48px; overflow:hidden;
    border-radius:100px; border:1.5px solid rgba(0,0,0,0.25);
    background:transparent;
    font-family:var(--font); font-size:0.9375rem;
    font-weight:600; letter-spacing:0.01em; color:#111;
    cursor:pointer; transition:color 600ms ease;
    animation:ls-fadein 0.5s cubic-bezier(0.16,1,0.3,1) 0.3s both;
  }
  #login-screen .flow-sign-in-btn:hover { color:#fff; }
  #login-screen .flow-sign-in-btn:active { transform:scale(0.95); }
  #login-screen .flow-sign-in-btn:disabled { opacity:0.6; cursor:not-allowed; }
  #login-screen .flow-arr-left {
    position:absolute; width:20px; height:20px;
    top:calc(50% - 10px); left:-60px;
    opacity:1; stroke:#fff; fill:none; z-index:2;
    transition:left 700ms cubic-bezier(0.34,1.56,0.64,1);
  }
  #login-screen .flow-sign-in-btn:hover .flow-arr-left { left:22px; }
  #login-screen .flow-btn-circle {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:0; height:0; border-radius:50%;
    background:#111; z-index:1;
    transition:width 700ms cubic-bezier(0.19,1,0.22,1),
               height 700ms cubic-bezier(0.19,1,0.22,1);
    display:block;
  }
  #login-screen .flow-sign-in-btn:hover .flow-btn-circle { width:500px; height:500px; }
  #login-screen .flow-arr-right {
    position:absolute; width:20px; height:20px;
    top:calc(50% - 10px); right:22px;
    stroke:#111; fill:none; z-index:2;
    transition:right 700ms cubic-bezier(0.34,1.56,0.64,1), opacity 500ms ease, stroke 500ms ease;
  }
  #login-screen .flow-sign-in-btn:hover .flow-arr-right { right:-60px; opacity:0; stroke:#fff; }
  #login-screen .flow-btn-text { position:relative; z-index:2; }

  /* Forgot-password link (inside panes) */
  .forgot-nav-link {
    display:inline-flex; align-items:center; gap:6px;
    background:none; border:none; cursor:pointer;
    font-family:var(--font); color:#888;
    padding:4px 0; margin-top:0;
    transition:color 0.2s; position:relative;
  }
  .forgot-nav-link:hover { color:#111; }
  .forgot-nav-arrow { display:none; }
  .forgot-nav-label {
    font-size:0.8125rem; font-weight:500;
    position:relative; padding-bottom:1px;
  }
  .forgot-nav-label::after {
    content:''; position:absolute; bottom:0; left:0;
    width:0; height:1px; background:#111;
    transition:width 0.25s ease;
  }
  .forgot-nav-link:hover .forgot-nav-label::after { width:100%; }

  /* Nav links (New here / Activate) */
  .login-nav-links {
    text-align:center; margin-top:1.2rem;
    display:flex; flex-direction:column; gap:7px;
    animation:ls-fadein 0.5s cubic-bezier(0.16,1,0.3,1) 0.33s both;
  }

  /* Login footer */
  .login-footer {
    margin-top:2rem; text-align:center;
    font-size:0.72rem; color:#ccc; letter-spacing:0.02em;
    animation:ls-fadein 0.5s cubic-bezier(0.16,1,0.3,1) 0.35s both;
  }

  /* ── Login picker — wide mode ────────────────────────────── */
  #login-screen.picker-mode .login-panel-left { width:min(62vw,900px); }
  /* keep the wave glued to the panel's right edge when it widens */
  #login-screen.picker-mode .login-wave-sep { left:calc(min(62vw,900px) - 2px); }
  #login-screen.picker-mode .login-form-inner { max-width:520px; }
  #login-screen.picker-mode #login-step-picker {
    max-height:calc(100vh - 300px); overflow-y:auto; scrollbar-width:thin;
    scrollbar-color:rgba(0,0,0,0.14) transparent;
  }
  /* ── Login picker cards ─────────────────────────────────── */
  #login-cards-row { display:flex; flex-direction:column; gap:0; width:100%; }
  /* Owner card */
  .lcp-owner-card {
    display:flex; align-items:center; gap:13px;
    padding:13px 16px; background:#111; border-radius:14px;
    cursor:pointer; transition:background 0.16s, transform 0.16s, box-shadow 0.16s;
    color:#fff; border:none; width:100%; font-family:var(--font); text-align:left;
  }
  .lcp-owner-card:hover { background:#222; transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,0.2); }
  .lcp-owner-ava {
    width:42px; height:42px; border-radius:50%;
    background:rgba(255,255,255,0.15); color:#fff;
    font-size:0.95rem; font-weight:800;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .lcp-owner-name { font-weight:700; font-size:0.9rem; color:#fff; line-height:1.2; }
  .lcp-owner-meta { font-size:0.7rem; color:rgba(255,255,255,0.5); margin-top:1px; }
  .lcp-arrow { margin-left:auto; opacity:0.35; flex-shrink:0; stroke:#fff; transition:opacity 0.15s,transform 0.15s; }
  .lcp-owner-card:hover .lcp-arrow { opacity:0.9; transform:translateX(3px); }
  /* Section labels */
  .lcp-section { width:100%; }
  .lcp-section + .lcp-section { margin-top:16px; }
  .lcp-section-label {
    font-size:0.63rem; font-weight:900; text-transform:uppercase;
    letter-spacing:0.13em; color:#bbb; margin-bottom:8px; padding-left:2px;
  }
  /* Branch cards */
  .lcp-branch-card {
    background:#fff; border:1.5px solid #ebebeb; border-radius:14px;
    overflow:hidden; margin-bottom:8px;
  }
  .lcp-branch-card:last-child { margin-bottom:0; }
  .lcp-branch-header {
    display:flex; align-items:center; gap:9px;
    padding:10px 14px; border-bottom:1px solid #f0f0f0; background:#fafafa;
  }
  .lcp-branch-icon {
    width:28px; height:28px; border-radius:8px;
    background:#f3f4f6; border:1px solid #e5e5e5;
    display:flex; align-items:center; justify-content:center;
    color:#555; flex-shrink:0;
  }
  .lcp-branch-name { font-weight:700; font-size:0.84rem; color:#111; }
  .lcp-branch-users { padding:5px 8px 6px; }
  /* User rows inside branch */
  .lcp-user-row {
    display:flex; align-items:center; gap:10px;
    padding:8px 8px; border-radius:10px; cursor:pointer;
    transition:background 0.12s;
  }
  .lcp-user-row:hover { background:rgba(0,0,0,0.05); }
  .lcp-user-ava {
    width:34px; height:34px; border-radius:50%;
    background:#222; color:#fff; font-size:0.76rem; font-weight:800;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .lcp-user-name { font-weight:700; font-size:0.83rem; color:#111; line-height:1.2; }
  .lcp-user-role { font-size:0.69rem; color:#888; text-transform:capitalize; margin-top:1px; }
  .lcp-user-arrow { margin-left:auto; opacity:0; flex-shrink:0; stroke:#333; transition:opacity 0.12s, transform 0.12s; }
  .lcp-user-row:hover .lcp-user-arrow { opacity:0.4; transform:translateX(2px); }
  .lcp-no-staff { font-size:0.74rem; color:#bbb; padding:7px 8px; font-style:italic; }
  .lcp-user-row-owner .lcp-user-ava-owner { background:#111; color:#fff; }
  .lcp-user-row-owner .lcp-user-name { font-weight:700; }
  .lcp-user-row-owner .lcp-user-role { color:#6366f1; font-weight:600; }
  /* Panel width transitions smoothly when entering/leaving picker mode */
  .login-panel-left { transition:width 0.28s cubic-bezier(0.16,1,0.3,1); }

  /* LOGIN MODE ONLY: pull brand down so it sits flush above "Welcome back" */
  #login-screen:not(.signup-mode):not(.picker-mode) .login-panel-left { justify-content:center; }
  #login-screen:not(.signup-mode):not(.picker-mode) .login-above-brand { padding-top:0; padding-bottom:1.4rem; }
  #login-screen:not(.signup-mode):not(.picker-mode) .login-form-inner { flex:none; justify-content:flex-start; padding-bottom:0; }

  /* Signup: form content is tall — let it scroll inside the form wrapper (scrollbar hidden globally).
     Push form to start so it doesn't center-clip on short screens. */
  #login-screen.signup-mode .login-form-inner { justify-content:flex-start; padding-top:2rem; }
  /* Airy modern gaps between fields — visible breathing room without feeling bulky */
  #login-screen.signup-mode .login-fields { gap: 0.9rem; }
  #login-screen.signup-mode input[type=text],
  #login-screen.signup-mode input[type=email],
  #login-screen.signup-mode input[type=password],
  #login-screen.signup-mode input[type=tel] { padding-top: 10px !important; padding-bottom: 10px !important; }
  #login-screen.signup-mode .su-pk-select { padding-top: 10px !important; padding-bottom: 10px !important; }
  #login-screen.signup-mode .su-phone-trigger { padding-top: 10px !important; padding-bottom: 10px !important; }
  #login-screen.signup-mode .flow-sign-in-btn { height: 44px; }
  /* Clear visual break between the heading area and the first input */
  #login-screen.signup-mode .login-hint { margin-bottom: 1.6rem; }
  /* In picker-mode, PW step is constrained so it looks centred in the wider panel */
  #login-screen.picker-mode #login-pw-overlay { max-width:360px; margin:0 auto; }
  /* ── Password overlay ──────────────────────────────────── */
  #login-pw-overlay { padding:6px 0 4px; }
  #lpw-avatar {
    width:56px; height:56px; border-radius:50%;
    background:#111; color:#fff; font-size:1.1rem; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 10px;
  }

  .login-deco { display:none; }
  .login-card { display:contents; }
  .login-logo-row { display:none; }

  @media(max-width:768px){
    .login-panel-left,
    #login-screen.picker-mode .login-panel-left { width:100%; padding:0 1.75rem; }
    .login-wave-sep { display:none; }
    #login-screen.picker-mode .login-form-inner { max-width:100%; }
    .login-above-brand { padding-top:3vh; }
  }

  /* ── ANIMATION GATING — only animate when .ls-animate is present.
     Prevents animations firing while screen is hidden (logged-in state)
     and ensures they replay properly on refresh and after logout. ── */
  #login-screen:not(.ls-animate) .login-above-brand,
  #login-screen:not(.ls-animate) .login-brand-logo-img,
  #login-screen:not(.ls-animate) .login-title,
  #login-screen:not(.ls-animate) .login-hint,
  #login-screen:not(.ls-animate) .login-tab-bar,
  #login-screen:not(.ls-animate) .lin-group,
  #login-screen:not(.ls-animate) .login-remember-row,
  #login-screen:not(.ls-animate) .flow-sign-in-btn,
  #login-screen:not(.ls-animate) .login-nav-links,
  #login-screen:not(.ls-animate) .login-footer,
  #login-screen:not(.ls-animate) .dash-lang-switcher {
    animation: none !important;
    opacity: 0;
  }
  /* Language switcher fades in with the title (same delay) */
  #login-screen.ls-animate .dash-lang-switcher {
    animation: ls-fadein 0.5s cubic-bezier(0.16,1,0.3,1) 0.08s both;
  }

  /* FORMS */
  .form-group { margin-bottom: 1rem; }
  label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; letter-spacing: 0.04em; text-transform: uppercase; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
    width: 100%; padding: 9px 13px; border: 1px solid var(--border);
    border-radius: var(--radius); font-family: var(--font); font-size: 0.875rem;
    color: var(--text); background: rgba(255,255,255,0.8);
    outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--accent-warm); background: white;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
  }
  .btn {
    padding: 9px 18px; border-radius: var(--radius); font-family: var(--font); font-size: 0.875rem;
    font-weight: 600; cursor: pointer; border: none; transition: all 0.2s cubic-bezier(0.34,1.3,0.64,1);
    display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.01em;
    position: relative; overflow: hidden;
  }
  .btn::after {
    content: ''; position: absolute; inset: 0; opacity: 0;
    background: rgba(255,255,255,0.18); transition: opacity 0.15s;
    border-radius: inherit;
  }
  .btn:active::after { opacity: 1; }
  .btn-primary {
    background: #111111;
    color: #fff; box-shadow: none;
  }
  .btn-primary:hover { background: #333333; box-shadow: 0 4px 14px rgba(0,0,0,0.22); transform: translateY(-1px); }
  .btn-primary:active { transform: translateY(0) scale(0.98); }
  .btn-primary:disabled { background: #9ca3af; color: rgba(255,255,255,0.6); box-shadow: none; cursor: not-allowed; transform: none; }
  .btn-outline { background: #ffffff; border: 1px solid var(--border-dark); color: var(--text); transition: all 0.18s; }
  .btn-outline:hover { background: white; border-color: #111111; color: #111111; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
  .btn-outline:active { transform: translateY(0); }
  .btn-green { background: var(--green-bg); color: var(--green); border: 1px solid #bbf7d0; transition: all 0.18s; }
  .btn-green:hover { background: #dcfce7; transform: translateY(-1px); }
  .btn-red {
    background:#dc2626; color:#fff; border:1.5px solid #dc2626;
    transition:all 0.18s;
  }
  .btn-red:not(.btn-sm) {
    position:relative; overflow:hidden;
    transition:color 0.45s ease, transform 0.16s, box-shadow 0.2s;
  }
  .btn-red:not(.btn-sm)::before {
    content:''; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:0; height:0; border-radius:50%; background:#fff; z-index:0;
    transition:width 1.0s cubic-bezier(0.19,1,0.22,1), height 1.0s cubic-bezier(0.19,1,0.22,1);
  }
  .btn-red .btn-inner { position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; }
  .btn-red:not(.btn-sm):hover { color:#dc2626; transform:translateY(-1px); box-shadow:0 6px 20px rgba(220,38,38,0.2); }
  .btn-red:not(.btn-sm):hover::before { width:700px; height:700px; }
  .btn-red.btn-sm:hover { background:#b91c1c; transform:translateY(-1px); }
  .btn-gold { background: #111111; color: #fff; transition: all 0.18s; }
  .btn-gold:hover { background: #333333; transform: translateY(-1px); }
  .btn-sm { padding: 5px 11px; font-size: 0.77rem; }
  .btn-full { width: 100%; justify-content: center; padding: 11px; }

  /* Flow button — same circle-fill animation as login */
  .btn-flow {
    position:relative; display:flex; align-items:center; justify-content:center;
    width:100%; height:46px; overflow:hidden;
    border-radius:100px; border:1.5px solid rgba(0,0,0,0.25);
    background:transparent;
    font-family:var(--font); font-size:0.9rem; font-weight:600;
    letter-spacing:0.01em; color:#111; cursor:pointer;
    transition:color 600ms ease; padding:0;
  }
  .btn-flow:hover { color:#fff; }
  .btn-flow:active { transform:scale(0.96); }
  .btn-flow .flow-btn-circle {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:0; height:0; border-radius:50%;
    background:#111; z-index:1;
    transition:width 700ms cubic-bezier(0.19,1,0.22,1),
               height 700ms cubic-bezier(0.19,1,0.22,1);
    display:block;
  }
  .btn-flow:hover .flow-btn-circle { width:800px; height:800px; }

  /* arrows — fleet card "View Details & Book" (short travel) */
  .btn-flow .flow-arr-left {
    position:absolute; width:18px; height:18px;
    top:calc(50% - 9px); left:-22px;
    opacity:1; stroke:#fff; fill:none; z-index:2;
    transition:left 700ms cubic-bezier(0.34,1.56,0.64,1);
  }
  .btn-flow:hover .flow-arr-left { left:14px; }
  .btn-flow .flow-arr-right {
    position:absolute; width:18px; height:18px;
    top:calc(50% - 9px); right:14px;
    stroke:#111; fill:none; z-index:2;
    transition:right 700ms cubic-bezier(0.34,1.56,0.64,1), opacity 500ms ease, stroke 500ms ease;
  }
  .btn-flow:hover .flow-arr-right { right:-22px; opacity:0; stroke:#fff; }
  .btn-flow .flow-btn-text { position:relative; z-index:2; }
  .btn-flow-full { width:100%; margin-top:10px; }

  /* "Book this car" button — longer arrow travel */
  #cdm-book-btn .flow-arr-left { left:-60px; }
  #cdm-book-btn:hover .flow-arr-left { left:18px; }
  #cdm-book-btn .flow-arr-right { right:18px; }
  #cdm-book-btn:hover .flow-arr-right { right:-60px; opacity:0; }

  .error-msg { background: var(--red-bg); color: var(--red); border: 1px solid #fecaca; border-radius: var(--radius); padding: 9px 13px; font-size: 0.8rem; margin-bottom: 1rem; }
  .success-msg { background: var(--green-bg); color: var(--green); border: 1px solid #bbf7d0; border-radius: var(--radius); padding: 9px 13px; font-size: 0.8rem; margin-bottom: 1rem; }

  /* LAYOUT */
  #app { display: none; height: 100vh; overflow: hidden; }
  html, body { height: 100vh; overflow: hidden; }
  .layout { display: grid; grid-template-columns: 230px 1fr; height: 100vh; overflow: hidden; min-width: 0; }

  /* SIDEBAR */
  .sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    padding: 1.5rem 0; display: flex; flex-direction: column;
    height: 100vh; overflow: hidden;
    box-shadow: 4px 0 32px rgba(0,0,0,0.25);
    position: relative;
    width: 230px; min-width: 230px; flex-shrink: 0;
  }
  .sidebar::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 200px;
    background: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.10) 0%, transparent 70%);
    pointer-events: none;
  }
  .sidebar-logo {
    padding: 0 1.5rem 1.25rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.03em;
    border-bottom: 1px solid var(--sidebar-border);
    display: flex; align-items: center; justify-content: space-between;
  }
  .sidebar-actions { display:flex; align-items:center; gap:8px; }
  .sidebar-actions span { background:none !important; -webkit-text-fill-color:currentColor !important; color:inherit; }
  /* Brand mark + animated wordmark, grouped so they stay together on the left */
  .sb-brand-group { display:flex; align-items:center; gap:10px; min-width:0; }
  .sb-logo-img {
    height:34px; width:auto; max-width:120px; flex-shrink:0;
    object-fit:contain; display:block;
    filter:drop-shadow(0 2px 8px rgba(0,0,0,0.45));
  }
  /* Theme toggle hidden - replaced by purple palette */
  .theme-toggle-btn { display: none !important; }
  .notification-btn {
    position:relative; width:30px; height:30px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.25);
    background:linear-gradient(145deg,rgba(30,30,30,0.96),rgba(17,17,17,0.96));
    color:#e0e0e0; display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex-shrink:0; padding:0; outline:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 5px 14px rgba(0,0,0,0.18);
    transition:all 0.18s cubic-bezier(0.34,1.3,0.64,1);
  }
  .notification-btn:hover {
    background:linear-gradient(145deg,rgba(40,40,40,0.98),rgba(17,17,17,0.98));
    border-color:rgba(255,255,255,0.28);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 0 16px rgba(0,0,0,0.13),0 7px 20px rgba(0,0,0,0.20);
    transform:translateY(-1px);
  }
  .notification-btn:active { transform:translateY(0) scale(0.96); }
  .notification-icon { width:17px; height:17px; display:flex; align-items:center; justify-content:center; font-size:0.92rem; line-height:1; filter:drop-shadow(0 0 5px rgba(255,255,255,0.18)); }
  .sidebar-company {
    padding: 1rem 1.5rem 1rem; margin-top: 0.5rem; border-bottom: 1px solid var(--sidebar-border);
    display: flex; align-items: center; gap: 10px;
  }
  .co-avatar {
    width: 34px; height: 34px; border-radius: 9px;
    background: rgba(255,255,255,0.12);
    color: #ffffff; border: 1px solid rgba(255,255,255,0.20);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.13);
  }
  .co-info { min-width: 0; }
  .co-info .co-name { font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .co-info .co-role { font-size: 0.76rem; color: rgba(255,255,255,0.45); margin-top: 1px; letter-spacing: 0.03em; }
  /* Company-card actions: relocated "My Public Page" button + settings hint */
  .co-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
  .co-gear { font-size: 0.65rem; color: rgba(255,255,255,0.25); flex-shrink: 0; }
  .nav-item {
    display: flex; align-items: center; gap: 10px; padding: 11px 1.2rem; margin: 0 8px;
    border-radius: 10px; cursor: pointer; font-size: 0.855rem; color: rgba(255,255,255,0.45);
    transition: background 0.16s ease, color 0.16s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease;
    font-weight: 500; position: relative; will-change: transform; border: 1px solid transparent;
  }
  .nav-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); transform: translateX(4px); }
  .nav-item:active { transform: translateX(2px) scale(0.975); transition-duration: 0.08s; }
  .nav-item.active {
    background: rgba(255,255,255,0.12);
    color: #ffffff; transform: translateX(0);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 2px 20px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.12);
  }
  .nav-item.active::before {
    content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
    width: 3px; border-radius: 0 3px 3px 0;
    background: linear-gradient(to bottom, #ffffff, #9ca3af);
    animation: nav-bar-slide 0.28s cubic-bezier(0.34,1.56,0.64,1) forwards;
  }
  @keyframes nav-bar-slide { from { height: 0%; opacity: 0; } to { height: 60%; opacity: 1; } }
  .nav-item .nav-icon { font-size: 1rem; width: 18px; text-align: center; transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1); display: inline-block; }
  .nav-item:hover .nav-icon { transform: scale(1.22) rotate(-4deg); }
  .nav-item.active .nav-icon { transform: scale(1.15); }
  .nav-badge { margin-left: auto; background: #ffffff; color: #111111; font-size: 0.63rem; font-weight: 700; border-radius: 100px; padding: 1px 7px; min-width: 18px; text-align: center; }
  #profile-avatar-big img { width:100%; height:100%; object-fit:cover; border-radius:15px; display:block; }
  #profile-avatar-big { position:relative; }
  [onclick="document.getElementById('profile-pic-input').click()"]:hover #profile-avatar-overlay { opacity: 1 !important; }

  .nav-divider {
    height: 1px; margin: 6px 12px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 25%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0.18) 75%, transparent 100%);
    border-radius: 1px;
    flex-shrink: 0;
    opacity: 0.85;
  }
  .sidebar-footer { margin-top: auto; padding: 1rem 1.5rem; border-top: 1px solid var(--sidebar-border); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
  .logout-btn { color: rgba(255,255,255,0.35); font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: color 0.18s; }
  .logout-btn:hover { color: #f87171; }

  /* ── BRANCH CARDS (br-*) ── */
  /* ── Branch cards ── */
  .br-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:0; display:flex; flex-direction:column; transition:box-shadow .18s,border-color .18s; overflow:hidden; }
  .br-card:hover { box-shadow:0 6px 24px rgba(0,0,0,0.09); border-color:rgba(0,0,0,0.16); }
  .br-card-inactive { opacity:0.6; }
  .br-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:18px 18px 14px; }
  .br-card-title-row { display:flex; align-items:flex-start; gap:11px; min-width:0; flex:1; }
  .br-card-icon { width:34px; height:34px; border-radius:9px; background:var(--bg,#f3f4f6); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--text-muted); }
  .br-card-name { font-weight:700; font-size:0.95rem; color:var(--text); line-height:1.2; }
  .br-card-address { font-size:0.76rem; color:var(--text-muted); margin-top:3px; line-height:1.4; }
  .br-badge { display:inline-flex; align-items:center; gap:5px; font-size:0.7rem; font-weight:700; letter-spacing:.04em; padding:3px 9px; border-radius:100px; white-space:nowrap; flex-shrink:0; }
  .br-badge-active { background:#dcfce7; color:#15803d; }
  .br-badge-inactive { background:#f3f4f6; color:var(--text-muted); }
  .br-badge .pip { width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
  .br-card-body { display:flex; flex-direction:column; gap:5px; padding:12px 18px 14px; border-top:1px solid var(--border); }
  .br-card-detail { display:flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--text-muted); }
  .br-detail-icon { width:20px; height:20px; border-radius:6px; background:var(--bg,#f3f4f6); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--text-muted); }
  .br-card-footer { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border); }
  /* ── Branch active toggle (dark-modal aware) ── */
  .br-toggle { position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; cursor:pointer; }
  .br-toggle input { opacity:0; width:0; height:0; position:absolute; }
  .br-toggle-track { position:absolute; cursor:pointer; inset:0; border-radius:100px; background:rgba(255,255,255,0.15); transition:background 0.2s; }
  .br-toggle input:checked + .br-toggle-track { background:rgba(255,255,255,0.85); }
  .br-toggle-track::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#111; transition:transform 0.22s var(--ease-spring,cubic-bezier(0.34,1.3,0.64,1)); box-shadow:0 1px 4px rgba(0,0,0,0.3); }
  .br-toggle input:checked + .br-toggle-track::after { transform:translateX(18px); }
  html.modal-white .br-toggle-track { background:rgba(0,0,0,0.18); }
  html.modal-white .br-toggle input:checked + .br-toggle-track { background:#111; }
  html.modal-white .br-toggle-track::after { background:#fff; }
  /* ── Branch modal inputs (light theme, matches website design) ── */
  #branch-modal-inner input, #branch-modal-inner select, #branch-modal-inner textarea { background:#f5f5f5 !important; border:1px solid rgba(0,0,0,0.14) !important; color:var(--text) !important; width:100%; padding:9px 13px; border-radius:10px; font-family:var(--font); font-size:0.855rem; outline:none; transition:border-color 0.2s,box-shadow 0.2s; box-sizing:border-box; }
  #branch-modal-inner input:focus, #branch-modal-inner select:focus, #branch-modal-inner textarea:focus { border-color:var(--accent-warm) !important; background:#fff !important; box-shadow:0 0 0 3px rgba(0,0,0,0.07) !important; }
  #branch-modal-inner input::placeholder, #branch-modal-inner textarea::placeholder { color:rgba(0,0,0,0.28) !important; }
  #branch-modal-inner select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:12px !important; padding-right:36px !important; }
  #branch-modal-inner select option { background:#fff !important; color:var(--text) !important; }
  #branch-modal-inner .form-label { color:rgba(0,0,0,0.42) !important; font-size:0.65rem !important; text-transform:uppercase !important; letter-spacing:0.07em !important; }
  /* ── Branch modal address — matches public booking page style ── */
  #branch-modal-address { background:#fafafa !important; border:1.5px solid rgba(0,0,0,0.15) !important; padding:9px 36px 9px 12px !important; font-weight:500 !important; font-size:0.87rem !important; }
  #branch-modal-address:focus { background:#fff !important; border-color:rgba(0,0,0,0.35) !important; box-shadow:0 0 0 3px rgba(0,0,0,0.07) !important; }
  /* ── Branch modal phone picker (light theme, opens downward above all) ── */
  #branch-modal-inner .phone-picker-trigger { background:#f5f5f5 !important; border-color:rgba(0,0,0,0.14) !important; }
  #branch-modal-inner .phone-picker-dial { color:var(--text) !important; }
  #branch-modal-inner .phone-picker-iso { color:rgba(0,0,0,0.38) !important; }
  #branch-modal-inner .phone-picker-arrow { color:rgba(0,0,0,0.3) !important; }
  #branch-modal-inner .phone-picker-dropdown { background:#fff !important; border-color:rgba(0,0,0,0.12) !important; box-shadow:0 8px 40px rgba(0,0,0,0.18) !important; top:calc(100% + 4px) !important; bottom:auto !important; z-index:9999 !important; }
  #branch-modal-inner .phone-picker-search { background:#f5f5f5 !important; border-color:rgba(0,0,0,0.12) !important; color:var(--text) !important; }
  #branch-modal-inner .phone-picker-search::placeholder { color:rgba(0,0,0,0.28) !important; }
  #branch-modal-inner .phone-picker-item { color:#111111 !important; background:transparent !important; }
  #branch-modal-inner .phone-picker-item:hover, #branch-modal-inner .phone-picker-item.pci-selected { background:rgba(0,0,0,0.05) !important; color:#111111 !important; }
  #branch-modal-inner .phone-picker-item .pci-iso { color:rgba(0,0,0,0.38) !important; }
  #branch-modal-inner .phone-picker-item .pci-name { color:#111111 !important; }
  #branch-modal-inner .phone-picker-item .pci-dial { color:rgba(0,0,0,0.4) !important; }
  /* ── Branch modal manager custom select (light theme, opens downward above all) ── */
  #branch-modal-inner .cd-wrap { width:100%; color-scheme:light; }
  #branch-modal-inner .cd-trigger { background-color:#f5f5f5 !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555555' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 13px center !important; background-size:12px !important; border-color:rgba(0,0,0,0.14) !important; color:#111111 !important; font-size:0.855rem !important; transition:none !important; }
  #branch-modal-inner .cd-trigger:hover { background-color:#fff !important; border-color:rgba(0,0,0,0.25) !important; }
  #branch-modal-inner .cd-trigger.open { background-color:#fff !important; border-color:var(--accent-warm) !important; box-shadow:0 0 0 3px rgba(0,0,0,0.07) !important; }
  #branch-modal-inner .cd-val { color:#111111 !important; opacity:1 !important; }
  #branch-modal-inner .cd-val.ph { color:rgba(0,0,0,0.38) !important; opacity:1 !important; }
  #branch-modal-inner .cd-panel { background:#fff !important; border-color:rgba(0,0,0,0.12) !important; box-shadow:0 8px 36px rgba(0,0,0,0.16) !important; top:calc(100% + 4px) !important; bottom:auto !important; z-index:9999 !important; scrollbar-width:none !important; }
  #branch-modal-inner .cd-item { color:#111111 !important; background:transparent !important; border-bottom:1px solid rgba(0,0,0,0.05) !important; font-family:var(--font) !important; font-size:0.855rem !important; font-weight:500 !important; }
  #branch-modal-inner .cd-item:last-child { border-bottom:none !important; }
  #branch-modal-inner .cd-item:hover { background-color:rgba(0,0,0,0.04) !important; color:#111111 !important; }
  #branch-modal-inner .cd-item.cd-selected { color:#111111 !important; font-weight:600 !important; background-color:#f9fafb !important; }
  /* ── Branch modal toggle (light theme) ── */
  #branch-modal-inner .br-toggle-track { background:rgba(0,0,0,0.15) !important; }
  #branch-modal-inner .br-toggle input:checked + .br-toggle-track { background:#111 !important; }
  #branch-modal-inner .br-toggle-track::after { background:#fff !important; }

  /* ── SETTINGS LAYOUT (stg-*) ── */
  /* Top row: 2-col equal-width cards */
  .stg-top-row { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; max-width:940px; margin-bottom:1.5rem; }
  .stg-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
  .stg-card-head { display:flex; align-items:center; gap:12px; padding:1rem 1.25rem; border-bottom:1px solid var(--border); background:var(--bg); }
  .stg-card-icon { font-size:1.1rem; }
  .stg-card-title { font-size:0.9rem; font-weight:700; color:var(--text); }
  .stg-card-sub { font-size:0.7rem; color:var(--text-muted); margin-top:1px; }
  .stg-rows { display:flex; flex-direction:column; }
  .stg-row { display:flex; align-items:center; justify-content:space-between; padding:0.9rem 1.25rem; border-bottom:1px solid var(--border); gap:1rem; }
  .stg-row-label { flex:1; min-width:0; }
  .stg-row-name { font-size:0.855rem; font-weight:600; color:var(--text); }
  .stg-row-hint { font-size:0.7rem; color:var(--text-muted); margin-top:1px; }
  .stg-action-btn { padding:7px 16px; border:1px solid var(--border-dark); border-radius:9px; background:rgba(0,0,0,0.05); color:var(--accent-warm); cursor:pointer; font-size:0.8rem; font-weight:700; font-family:var(--font); transition:background 0.15s; white-space:nowrap; flex-shrink:0; }
  .stg-action-danger { background:rgba(220,38,38,0.06); border-color:rgba(220,38,38,0.2); color:var(--red); }
  /* Integrations section */
  .stg-int-header { display:flex; align-items:center; gap:12px; max-width:940px; margin-bottom:1rem; }
  /* 3-col integration card grid */
  .stg-int-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; max-width:940px; }
  .stg-int-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; overflow:hidden; display:flex; flex-direction:column; gap:0;
    position:relative;
  }
  .stg-int-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    border-radius:16px 16px 0 0;
  }
  .stg-int-card-ai::before  { background:linear-gradient(90deg,#6366f1,#818cf8); }
  .stg-int-card-wa::before  { background:linear-gradient(90deg,#25d366,#16a34a); }
  .stg-int-card-hook::before{ background:linear-gradient(90deg,#f59e0b,#fbbf24); }
  .stg-int-card-top {
    display:flex; align-items:center; gap:12px;
    padding:1.1rem 1.25rem 0.85rem; border-bottom:1px solid var(--border);
    background:var(--bg);
  }
  .stg-int-card-icon-wrap { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0; }
  .stg-int-card-icon-ai   { background:rgba(99,102,241,0.1); }
  .stg-int-card-icon-wa   { background:rgba(37,211,102,0.1); }
  .stg-int-card-icon-hook { background:rgba(245,158,11,0.1); }
  .stg-int-card-name { font-size:0.9rem; font-weight:700; color:var(--text); }
  .stg-int-card-tag { display:inline-block; margin-top:3px; padding:2px 8px; border-radius:100px; font-size:0.63rem; font-weight:700; letter-spacing:0.04em; }
  .stg-int-tag-ai   { background:rgba(99,102,241,0.1); color:#6366f1; }
  .stg-int-tag-wa   { background:rgba(22,163,74,0.1); color:#16a34a; }
  .stg-int-tag-hook { background:rgba(245,158,11,0.1); color:#b45309; }
  .stg-int-notice { margin:1rem 1.25rem 0; padding:9px 12px; border-radius:9px; font-size:0.75rem; line-height:1.55; }
  .stg-int-notice-green { background:rgba(22,163,74,0.07); border:1px solid rgba(22,163,74,0.15); color:#15803d; }
  .stg-int-notice-blue  { background:rgba(37,211,102,0.05); border:1px solid rgba(37,211,102,0.18); color:#166534; }
  .stg-int-notice-amber { background:rgba(245,158,11,0.07); border:1px solid rgba(245,158,11,0.20); color:#92400e; }
  .stg-int-field { padding:0.85rem 1.25rem 0; }
  .stg-int-field:last-child { padding-bottom:1.25rem; }
  .stg-label { font-size:0.66rem; font-weight:700; color:var(--text-muted); display:block; margin-bottom:5px; text-transform:uppercase; letter-spacing:0.07em; }
  .stg-input {
    width:100%; padding:9px 12px; border:1px solid var(--border-dark);
    border-radius:9px; background:var(--bg); color:var(--text);
    font-size:0.85rem; font-family:var(--font); outline:none; box-sizing:border-box;
    transition:border-color 0.15s, box-shadow 0.15s;
  }
  .stg-input:focus { border-color:rgba(0,0,0,0.35); box-shadow:0 0 0 3px rgba(0,0,0,0.07); }
  .stg-icon-btn { padding:9px 12px; border:1px solid var(--border-dark); border-radius:9px; background:var(--bg); color:var(--text-muted); cursor:pointer; font-size:0.82rem; transition:all 0.15s; flex-shrink:0; }
  .stg-icon-btn:hover { background:rgba(0,0,0,0.07); color:var(--text); }
  .stg-hint { font-size:0.68rem; color:var(--text-faint); margin-top:5px; }
  .stg-webhook-url {
    flex:1; padding:9px 12px; background:var(--bg); border:1px solid var(--border-dark);
    border-radius:9px; font-family:monospace; font-size:0.73rem; color:var(--text);
    word-break:break-all; line-height:1.4;
  }
  /* pill toggle (seg-ctrl) used in settings rows */
  .seg-ctrl { display:flex; gap:2px; background:rgba(0,0,0,0.04); border-radius:100px; padding:3px; border:1px solid var(--border); flex-shrink:0; }
  .seg-btn { padding:5px 11px; border-radius:100px; font-size:0.71rem; font-weight:700; cursor:pointer; border:none; background:transparent; color:var(--text-muted); transition:all 0.15s; font-family:var(--font); }
  .seg-btn.active { background:#fff; color:#111; box-shadow:0 1px 4px rgba(0,0,0,0.12); }

  /* ── PAYMENT SETTINGS section ── */
  .stg-pay-header { display:flex; align-items:center; gap:12px; max-width:1300px; margin-bottom:1rem; margin-top:2rem; }
  .stg-pay-grid   { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.25rem; max-width:1300px; }
  @media(max-width:900px){ .stg-pay-grid { grid-template-columns:1fr 1fr; } }
  @media(max-width:600px){ .stg-pay-grid { grid-template-columns:1fr; } }
  .stg-int-card-iban::before   { background:linear-gradient(90deg,#3b82f6,#38bdf8); }
  .stg-int-card-paytr::before  { background:linear-gradient(90deg,#8b5cf6,#a78bfa); }
  .stg-int-card-stripe::before { background:linear-gradient(90deg,#635bff,#9f97ff); }
  .stg-int-card-icon-iban   { background:rgba(59,130,246,0.10); }
  .stg-int-card-icon-paytr  { background:rgba(139,92,246,0.10); }
  .stg-int-card-icon-stripe { background:rgba(99,91,255,0.10); }
  .stg-int-tag-iban   { background:rgba(59,130,246,0.10); color:#1d4ed8; }
  .stg-int-tag-paytr  { background:rgba(139,92,246,0.10); color:#7c3aed; }
  .stg-int-tag-stripe { background:rgba(99,91,255,0.10);  color:#4f46e5; }
  .stg-int-notice-sky    { background:rgba(59,130,246,0.06); border:1px solid rgba(59,130,246,0.18); color:#1e40af; }
  .stg-int-notice-purple { background:rgba(139,92,246,0.06); border:1px solid rgba(139,92,246,0.18); color:#6d28d9; }
  .stg-int-notice-indigo { background:rgba(99,91,255,0.06);  border:1px solid rgba(99,91,255,0.20);  color:#4338ca; }
  .stg-input-mono { font-family:monospace; letter-spacing:0.05em; font-size:0.875rem !important; }
  /* IBAN live-validation badge */
  .iban-vbadge {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 10px; border-radius:100px;
    font-size:0.68rem; font-weight:700; letter-spacing:0.02em;
    margin-top:6px; transition:all 0.2s;
  }
  .iban-vbadge.valid   { background:rgba(22,163,74,0.09);  border:1px solid rgba(22,163,74,0.22);  color:#15803d; }
  .iban-vbadge.warn    { background:rgba(245,158,11,0.09); border:1px solid rgba(245,158,11,0.25); color:#92400e; }
  .iban-vbadge.error   { background:rgba(220,38,38,0.08);  border:1px solid rgba(220,38,38,0.20);  color:#b91c1c; }
  .iban-vbadge.neutral { background:rgba(0,0,0,0.04);      border:1px solid var(--border);         color:var(--text-faint); }
  /* Country chip shown next to IBAN input */
  .iban-country-chip {
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    background:rgba(59,130,246,0.1); color:#1d4ed8;
    border:1px solid rgba(59,130,246,0.22); border-radius:6px;
    font-size:0.65rem; font-weight:800; padding:2px 7px; letter-spacing:0.06em;
    pointer-events:none; transition:opacity 0.2s;
  }
  /* save footer */
  .stg-pay-footer {
    display:flex; align-items:center; justify-content:space-between;
    max-width:940px; margin-top:1.1rem;
    padding:0.85rem 1.1rem; border-radius:12px;
    background:var(--surface); border:1px solid var(--border);
  }
  .stg-pay-save-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 22px; border:none; border-radius:10px;
    background:linear-gradient(135deg,#111,#374151);
    color:#fff; font-size:0.84rem; font-weight:700;
    font-family:var(--font); cursor:pointer; flex-shrink:0;
    transition:box-shadow 0.2s, transform 0.15s;
    box-shadow:0 2px 10px rgba(0,0,0,0.18);
  }
  .stg-pay-save-btn:hover  { box-shadow:0 6px 22px rgba(0,0,0,0.28); transform:translateY(-1px); }
  .stg-pay-save-btn:active { transform:translateY(0); box-shadow:0 2px 8px rgba(0,0,0,0.18); }
  .stg-pay-msg { font-size:0.78rem; font-weight:600; }
  @media(max-width:700px){
    .stg-pay-grid { grid-template-columns:1fr; }
    .stg-pay-footer { flex-direction:column; align-items:flex-start; gap:10px; }
  }

  /* ════════════════════════════════════════════════════════════════════
     SETTINGS — MODERN B/W REDESIGN  (scoped to #page-settings)
     One font family (DM Sans), pure black & white, modern controls.
     ════════════════════════════════════════════════════════════════════ */
  #page-settings {
    --st-ink:          #0a0a0a;
    --st-ink-soft:     #4b5563;
    --st-ink-faint:    #9ca3af;
    --st-line:         rgba(0,0,0,0.08);
    --st-line-soft:    rgba(0,0,0,0.05);
    --st-line-strong:  rgba(0,0,0,0.16);
    --st-rule:         rgba(0,0,0,0.10);
    --st-surface:      #ffffff;
    --st-surface-2:    #fafafa;
    --st-surface-3:    #f5f5f5;
    --st-shadow-sm:    0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(0,0,0,0.03);
    --st-shadow-md:    0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(0,0,0,0.03), 0 16px 40px -22px rgba(0,0,0,0.18);
    position: relative;
    padding: 0.5rem 0 4rem;
    background: transparent;
    border: none;
    overflow: visible;
  }
  #page-settings::before, #page-settings::after { content: none; }

  /* ── HERO ───────────────────────────────────────────────── */
  #page-settings .st-hero {
    position: relative;
    padding: 0.25rem 0 1.75rem;
    border-bottom: 1px solid var(--st-rule);
    margin-bottom: 1.75rem;
    animation: fadeInUp 0.4s var(--ease-out) both;
  }
  #page-settings .st-hero-tag {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font);
    font-size: 0.66rem; font-weight: 700;
    color: var(--st-ink-soft);
    text-transform: uppercase; letter-spacing: 0.18em;
    margin-bottom: 1rem;
  }
  #page-settings .st-hero-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.16);
    animation: stPulse 2.4s ease-in-out infinite;
  }
  @keyframes stPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(22,163,74,0.16); }
    50%      { box-shadow: 0 0 0 6px rgba(22,163,74,0.02); }
  }
  #page-settings .st-hero-bar {
    width: 18px; height: 1px;
    background: var(--st-line-strong);
    display: inline-block;
  }
  #page-settings .st-hero-title {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
    color: var(--st-ink);
    font-weight: 800;
    font-family: var(--font);
    margin-bottom: 0.85rem;
  }
  /* Convert the old <em> serif accent into a plain inline word — no italic, no serif */
  #page-settings .st-hero-title em {
    font-family: var(--font);
    font-style: normal;
    font-weight: 800;
    letter-spacing: -0.045em;
    color: var(--st-ink);
    display: inline;
    transform: none;
  }
  #page-settings .st-hero-title em::after {
    content: '.';
    color: var(--st-ink);
    font-style: normal;
    font-family: var(--font);
    font-weight: 800;
  }
  #page-settings .st-hero-deck {
    max-width: 600px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--st-ink-soft);
    font-weight: 400;
  }
  #page-settings .st-hero-deck strong { color: var(--st-ink); font-weight: 600; }

  #page-settings .st-hero-meta {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    margin-top: 1.25rem;
  }
  #page-settings .st-hero-fact {
    display: flex; flex-direction: column; gap: 2px;
    padding-right: 22px;
    border-right: 1px solid var(--st-line);
  }
  #page-settings .st-hero-fact:last-child { border-right: none; padding-right: 0; }
  #page-settings .st-hero-fact-label {
    font-family: var(--font);
    font-size: 0.6rem; font-weight: 700;
    color: var(--st-ink-faint);
    text-transform: uppercase; letter-spacing: 0.16em;
  }
  #page-settings .st-hero-fact-val {
    font-size: 0.84rem; font-weight: 700;
    color: var(--st-ink);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  #page-settings .st-hero-fact-val em {
    font-family: var(--font);
    font-style: normal; font-weight: 700;
    color: var(--st-ink);
  }

  /* ── TAB BAR — centered floating "tubelight" navbar ─────── */
  /* Sticks to the top of the scroller so the 10 sections stay reachable. */
  #page-settings .st-tabs-outer {
    position: sticky;
    top: 10px;
    z-index: 60;
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    pointer-events: none; /* only the pill itself catches clicks */
  }
  #page-settings .st-tabs {
    pointer-events: auto;
    position: relative;
    display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px;
    padding: 5px;
    background: rgba(255,255,255,0.74);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid var(--st-line);
    border-radius: 100px;
    box-shadow: 0 14px 36px -16px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.85) inset;
    animation: fadeInUp 0.4s var(--ease-out) 0.06s both;
  }
  /* sliding indicator behind the active tab — soft pill + tubelight lamp on the rim */
  #page-settings .st-tab-pill {
    position: absolute;
    top: 0; left: 0;
    height: 36px;
    width: 0;
    background: rgba(10,10,10,0.06);
    border-radius: 100px;
    transform: translate(0, 0);
    transition: transform 0.42s var(--ease-spring), width 0.42s var(--ease-spring);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    will-change: transform, width;
  }
  #page-settings .st-tab-pill.ready { opacity: 1; }
  /* the lamp — a glowing bar straddling the navbar's top edge */
  #page-settings .st-tab-pill::before {
    content: '';
    position: absolute;
    top: -7px; left: 50%;
    transform: translateX(-50%);
    width: 32px; height: 4px;
    background: var(--st-ink);
    border-radius: 100px;
  }
  #page-settings .st-tab-pill::after {
    content: '';
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    width: 64px; height: 26px;
    background: radial-gradient(closest-side, rgba(10,10,10,0.22), transparent 72%);
    filter: blur(5px);
  }
  #page-settings .st-tab {
    position: relative;
    z-index: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 15px;
    flex: 0 0 auto;
    border-radius: 100px;
    text-decoration: none;
    color: var(--st-ink-soft);
    font-family: var(--font);
    font-size: 0.8rem; font-weight: 700;
    letter-spacing: -0.01em;
    transition: color 0.3s var(--ease-out), background 0.2s var(--ease-out), transform 0.28s var(--ease-spring);
    white-space: nowrap;
    animation: stTabIn 0.45s var(--ease-out) both;
  }
  #page-settings .st-tab:not(.is-active):hover { background: rgba(0,0,0,0.045); }
  #page-settings .st-tab:active { transform: scale(0.96); }
  #page-settings .st-tab:nth-child(2) { animation-delay: 0.03s; }
  #page-settings .st-tab:nth-child(3) { animation-delay: 0.06s; }
  #page-settings .st-tab:nth-child(4) { animation-delay: 0.09s; }
  #page-settings .st-tab:nth-child(5) { animation-delay: 0.12s; }
  #page-settings .st-tab:nth-child(6) { animation-delay: 0.15s; }
  #page-settings .st-tab:nth-child(7) { animation-delay: 0.18s; }
  #page-settings .st-tab:nth-child(8) { animation-delay: 0.21s; }
  #page-settings .st-tab:nth-child(9) { animation-delay: 0.24s; }
  #page-settings .st-tab:nth-child(10) { animation-delay: 0.27s; }
  #page-settings .st-tab:nth-child(11) { animation-delay: 0.30s; }
  @keyframes stTabIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
  #page-settings .st-tab:hover { color: var(--st-ink); }
  #page-settings .st-tab.is-active { color: var(--st-ink); }
  /* emoji icons — always visible; labels collapse away on narrow screens */
  #page-settings .st-tab-ico {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.92rem; line-height: 1;
    transform: translateZ(0);
    transition: transform 0.28s var(--ease-spring);
  }
  #page-settings .st-tab.is-active .st-tab-ico { transform: scale(1.12); }
  @media (max-width: 940px) {
    #page-settings .st-tab-name { display: none; }
    #page-settings .st-tab { padding: 10px 12px; }
    #page-settings .st-tab-ico { font-size: 1.05rem; }
  }
  /* section reveal when navigated to */
  #page-settings .st-section.st-just-shown { animation: stSectionIn 0.5s var(--ease-out) both; }
  @keyframes stSectionIn { from { opacity: 0.35; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

  /* ── SECTION HEAD ──────────────────────────────────────── */
  #page-settings .st-section { margin-bottom: 2.5rem; scroll-margin-top: 90px; }
  #page-settings .st-sec-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 1.25rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid var(--st-rule);
  }
  #page-settings .st-sec-num {
    font-family: var(--font);
    font-style: normal;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    letter-spacing: 0;
    background: var(--st-ink);
    border-radius: 10px;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    user-select: none;
    font-variant-numeric: tabular-nums;
  }
  #page-settings .st-sec-num::before { content: none; }
  #page-settings .st-sec-title-wrap { min-width: 0; }
  #page-settings .st-sec-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--st-ink);
    line-height: 1.15;
    font-family: var(--font);
  }
  #page-settings .st-sec-sub {
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--st-ink-soft);
    line-height: 1.45;
    max-width: 60ch;
  }
  #page-settings .st-sec-pill {
    font-family: var(--font);
    font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--st-ink-soft);
    padding: 5px 11px;
    border: 1px solid var(--st-line);
    border-radius: 100px;
    white-space: nowrap;
    background: var(--st-surface);
  }

  /* ── BASE CARD ─────────────────────────────────────────── */
  #page-settings .st-card,
  #page-settings .st-pref-rows {
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: 16px;
    box-shadow: var(--st-shadow-sm);
    overflow: visible;
    position: relative;
  }
  #page-settings .st-pref-rows > .st-pref-row:first-child { border-radius: 16px 16px 0 0; }
  #page-settings .st-pref-rows > .st-pref-row:last-child { border-radius: 0 0 16px 16px; }

  /* ── PREFERENCES ROWS ──────────────────────────────────── */
  #page-settings .st-pref-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--st-line-soft);
    transition: background 0.18s var(--ease-out);
  }
  #page-settings .st-pref-row:hover { background: var(--st-surface-2); }
  #page-settings .st-pref-row:last-child { border-bottom: none; }
  #page-settings .st-pref-text { min-width: 0; }
  #page-settings .st-pref-name {
    font-size: 0.92rem; font-weight: 700; color: var(--st-ink);
    letter-spacing: -0.01em;
    display: flex; align-items: baseline; gap: 8px;
  }
  #page-settings .st-pref-name-num {
    font-family: var(--font);
    font-size: 0.62rem; font-weight: 700;
    color: var(--st-ink-faint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  #page-settings .st-pref-hint {
    margin-top: 3px;
    font-size: 0.77rem;
    color: var(--st-ink-soft);
    line-height: 1.45;
  }
  #page-settings .st-pref-hint em {
    font-family: var(--font);
    font-style: normal;
    color: var(--st-ink);
    font-weight: 600;
  }

  /* Segmented control */
  #page-settings .seg-ctrl {
    background: var(--st-surface-3);
    border: 1px solid var(--st-line);
    border-radius: 100px;
    padding: 4px;
    gap: 2px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
  }
  #page-settings .seg-btn {
    padding: 7px 16px;
    font-family: var(--font);
    font-size: 0.74rem; font-weight: 600;
    color: var(--st-ink-soft);
    letter-spacing: -0.005em;
    border-radius: 100px;
    transition: all 0.22s var(--ease-out);
  }
  #page-settings .seg-btn:hover { color: var(--st-ink); }
  #page-settings .seg-btn.active {
    background: var(--st-ink);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.22);
  }

  /* ── INTEGRATION / PAYMENT GRID (cards) ──────────────────── */
  /* ── Payment policy (prepayment + deposit handling) ── */
  #page-settings .pp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
  #page-settings .pp-opt {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer; text-align: left;
    border: 1.5px solid var(--st-line); border-radius: 12px; background: var(--st-surface);
    padding: 11px 13px; font-family: var(--font);
    transition: border-color .18s, box-shadow .18s, background .18s, transform .18s var(--ease-spring);
  }
  #page-settings .pp-opt:hover { border-color: var(--st-line-strong); transform: translateY(-1px); }
  #page-settings .pp-opt.sel { border-color: var(--st-ink); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); background: var(--st-surface-3); }
  #page-settings .pp-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--st-line-strong); flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; transition: border-color .15s; }
  #page-settings .pp-opt.sel .pp-radio { border-color: var(--st-ink); }
  #page-settings .pp-opt.sel .pp-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--st-ink); }
  /* Square check variant for multi-select payment method toggles */
  #page-settings .pp-check { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--st-line-strong); flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s; }
  #page-settings .pp-opt.sel .pp-check { border-color: var(--st-ink); background: var(--st-ink); }
  #page-settings .pp-opt.sel .pp-check::after { content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); }
  #page-settings .pp-opt.pp-disabled { opacity: 0.55; }
  #page-settings .pp-opt-name { display: block; font-size: 0.85rem; font-weight: 700; color: var(--st-ink); }
  #page-settings .pp-opt-hint { display: block; font-size: 0.72rem; color: var(--st-ink-faint); margin-top: 2px; line-height: 1.4; }
  #page-settings .pp-rec { display: inline-block; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--green); padding: 2px 7px; border-radius: 100px; margin-left: 6px; vertical-align: middle; }

  #page-settings .st-int-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  @media (max-width: 1100px) { #page-settings .st-int-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 680px)  { #page-settings .st-int-grid { grid-template-columns: 1fr; } }

  #page-settings .st-int-card {
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: 16px;
    overflow: hidden;
    display: flex; flex-direction: column;
    position: relative;
    transition: transform 0.22s var(--ease-spring), box-shadow 0.22s var(--ease-out), border-color 0.2s;
    box-shadow: var(--st-shadow-sm);
  }
  #page-settings .st-int-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 20px 44px -22px rgba(0,0,0,0.22);
    border-color: var(--st-line-strong);
  }
  /* Neutralize accent variants — all cards now share the same B/W treatment */
  #page-settings .st-int-card[data-accent] {
    --acc: var(--st-ink);
    --acc-soft: var(--st-surface-3);
    --acc-ink: var(--st-ink);
  }
  #page-settings .st-int-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--st-ink);
    opacity: 0;
    transition: opacity 0.2s;
  }
  #page-settings .st-int-card:hover::before { opacity: 1; }

  #page-settings .st-int-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 1.05rem 1.15rem 0.95rem;
    border-bottom: 1px solid var(--st-line-soft);
  }
  #page-settings .st-int-icon {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: var(--st-surface-3);
    border: 1px solid var(--st-line);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    color: var(--st-ink);
  }
  #page-settings .st-int-titles { min-width: 0; }
  #page-settings .st-int-tagline {
    font-family: var(--font);
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--st-ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 3px;
  }
  #page-settings .st-int-name {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--st-ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  #page-settings .st-int-name em {
    font-family: var(--font);
    font-style: normal;
    font-weight: 800;
    color: var(--st-ink);
  }
  #page-settings .st-int-meta {
    margin-top: 3px;
    font-size: 0.72rem;
    color: var(--st-ink-soft);
    line-height: 1.4;
  }
  /* Status chip */
  #page-settings .st-int-pulse {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 8px;
    background: var(--st-surface-3);
    color: var(--st-ink);
    border: 1px solid var(--st-line);
    border-radius: 100px;
    font-family: var(--font);
    font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    align-self: flex-start;
    margin-top: 2px;
  }
  #page-settings .st-int-pulse-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--st-ink);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
  }

  #page-settings .st-int-body {
    padding: 1rem 1.15rem 1.15rem;
    display: flex; flex-direction: column; gap: 0.85rem;
    flex: 1;
  }

  /* Callout — neutral light gray, no rainbow */
  #page-settings .st-callout {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.74rem; line-height: 1.55;
    background: var(--st-surface-3);
    color: var(--st-ink-soft);
    border: 1px solid var(--st-line);
    position: relative;
  }
  #page-settings .st-callout strong { font-weight: 700; color: var(--st-ink); }

  /* Field */
  #page-settings .st-field { display: flex; flex-direction: column; gap: 6px; }
  #page-settings .st-field-label {
    font-family: var(--font);
    font-size: 0.62rem; font-weight: 700;
    color: var(--st-ink-soft);
    text-transform: uppercase; letter-spacing: 0.13em;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  #page-settings .st-field-label-aux {
    font-family: var(--font);
    text-transform: none; letter-spacing: 0;
    font-size: 0.65rem; font-weight: 500;
    color: var(--st-ink-faint);
  }
  #page-settings .st-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--st-line-strong);
    border-radius: 11px;
    background: var(--st-surface);
    color: var(--st-ink);
    font-size: 0.88rem;
    font-family: var(--font);
    font-weight: 500;
    outline: none;
    transition: all 0.18s var(--ease-out);
    letter-spacing: -0.005em;
  }
  #page-settings .st-input::placeholder { color: var(--st-ink-faint); font-weight: 400; }
  #page-settings .st-input:hover { border-color: rgba(0,0,0,0.28); }
  #page-settings .st-input:focus {
    border-color: var(--st-ink);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
  }
  /* Mono-look inputs now use DM Sans with tabular numerals — same font, distinct rhythm */
  #page-settings .st-input-mono {
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    letter-spacing: 0;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }

  #page-settings .st-input-group { display: flex; gap: 6px; }
  #page-settings .st-input-group > .st-input { flex: 1; }
  #page-settings .st-icon-btn {
    padding: 0 13px;
    height: auto;
    border: 1px solid var(--st-line-strong);
    border-radius: 11px;
    background: var(--st-surface);
    color: var(--st-ink-soft);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.16s var(--ease-out);
    flex-shrink: 0;
    line-height: 1;
  }
  #page-settings .st-icon-btn:hover { background: var(--st-ink); color: #fff; border-color: var(--st-ink); }

  #page-settings .st-field-hint {
    font-size: 0.72rem;
    color: var(--st-ink-faint);
    line-height: 1.5;
  }
  #page-settings .st-field-hint strong { color: var(--st-ink-soft); font-weight: 600; }
  #page-settings .st-field-hint code {
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    background: var(--st-surface-3);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--st-line);
    color: var(--st-ink);
    font-weight: 600;
  }

  #page-settings .st-webhook {
    flex: 1;
    padding: 11px 13px;
    background: var(--st-surface-3);
    border: 1px dashed var(--st-line-strong);
    border-radius: 11px;
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
    font-size: 0.74rem;
    color: var(--st-ink);
    word-break: break-all;
    line-height: 1.5;
    font-weight: 500;
  }

  /* ── ACTION CARDS (Data & Backup) ──────────────────────── */
  #page-settings .st-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  @media (max-width: 720px) { #page-settings .st-action-grid { grid-template-columns: 1fr; } }
  #page-settings .st-action-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.1rem;
    padding: 1.3rem 1.4rem;
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: 16px;
    box-shadow: var(--st-shadow-sm);
    transition: all 0.22s var(--ease-out);
    position: relative;
    overflow: hidden;
  }
  #page-settings .st-action-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--st-ink);
  }
  #page-settings .st-action-card.is-danger::before { background: #dc2626; }
  #page-settings .st-action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 20px 44px -22px rgba(0,0,0,0.22);
    border-color: var(--st-line-strong);
  }
  #page-settings .st-action-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--st-surface-3);
    border: 1px solid var(--st-line);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    color: var(--st-ink);
  }
  #page-settings .st-action-card.is-danger .st-action-icon {
    background: #fef2f2;
    border-color: rgba(220,38,38,0.18);
    color: #dc2626;
  }
  #page-settings .st-action-text { min-width: 0; }
  #page-settings .st-action-title {
    font-size: 0.98rem; font-weight: 800;
    color: var(--st-ink);
    letter-spacing: -0.02em;
  }
  #page-settings .st-action-hint {
    margin-top: 4px;
    font-size: 0.77rem;
    line-height: 1.5;
    color: var(--st-ink-soft);
    max-width: 42ch;
  }
  #page-settings .st-action-hint strong { color: #dc2626; font-weight: 700; }

  #page-settings .st-action-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border-radius: 100px;
    border: 1px solid var(--st-ink);
    background: var(--st-ink);
    color: #fff;
    font-family: var(--font);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.18s var(--ease-out);
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(11,11,12,0.18);
  }
  #page-settings .st-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.28);
  }
  #page-settings .st-action-btn-danger {
    background: #fff;
    color: #dc2626;
    border-color: rgba(220,38,38,0.4);
  }
  #page-settings .st-action-btn-danger:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
    box-shadow: 0 8px 22px rgba(220,38,38,0.32);
  }

  /* ── IBAN chip ───────────────────────────────────────── */
  #page-settings .iban-country-chip {
    right: 14px;
    background: var(--st-ink);
    color: #fff;
    border: 1px solid var(--st-ink);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  }
  #page-settings .iban-vbadge {
    margin-top: 8px;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 5px 12px;
  }

  #page-settings #wa-key-status,
  #page-settings #wa-green-status {
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font);
  }

  /* ── MESSAGES (Settings → sec-messages) ───────────────── */
  /* App-shell card: message rail flush left, editor pane on the right */
  #page-settings .mt-card { padding: 0; overflow: hidden; }
  #page-settings #mt-grid {
    display: grid;
    grid-template-columns: 256px 1fr;
    align-items: stretch;
    min-height: 480px;
  }
  /* Left rail — message list */
  #page-settings .mt-list {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--st-surface-2);
    border-right: 1px solid var(--st-line);
    padding: 16px 12px 18px;
  }
  #page-settings .mt-group-label {
    font-size: 0.56rem; font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--st-ink-faint);
    margin: 16px 10px 7px;
  }
  #page-settings .mt-list > .mt-group-label:first-child { margin-top: 2px; }
  #page-settings .mt-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    border: none;
    background: transparent;
    color: var(--st-ink-soft);
    border-radius: 100px;
    padding: 7px 9px;
    font-family: var(--font);
    font-size: 0.79rem; font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: all 0.18s var(--ease-out);
  }
  #page-settings .mt-item:hover { color: var(--st-ink); background: rgba(0,0,0,0.05); }
  #page-settings .mt-item.active {
    background: var(--st-ink);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 18px -8px rgba(0,0,0,0.45);
  }
  #page-settings .mt-item-ico {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--st-line);
    color: var(--st-ink-soft);
    transition: all 0.18s var(--ease-out);
  }
  #page-settings .mt-item.active .mt-item-ico {
    background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.22); color: #fff;
  }
  #page-settings .mt-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #page-settings .mt-item-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #d97706; flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(217,119,6,0.14);
  }
  #page-settings .mt-item.active .mt-item-dot { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,0.22); }
  /* Editor pane */
  #page-settings #mt-editor { padding: 22px 24px 26px; }
  #page-settings .mt-ed-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: 18px;
  }
  #page-settings .mt-ed-title { font-size: 1.12rem; font-weight: 800; color: var(--st-ink); letter-spacing: -0.025em; line-height: 1.2; }
  #page-settings .mt-ed-desc { font-size: 0.77rem; color: var(--st-ink-soft); margin-top: 3px; line-height: 1.5; max-width: 52ch; }
  #page-settings .mt-ed-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  #page-settings .mt-custom-badge {
    font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 100px; padding: 4px 11px;
  }
  #page-settings .mt-off-badge {
    font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    color: #b42318; background: #fef2f2; border: 1px solid #fecaca;
    border-radius: 100px; padding: 4px 11px; display: inline-flex; align-items: center; gap: 4px;
  }
  /* Per-message on/off mini toggle in the list rail */
  #page-settings .mt-mini-switch { position: relative; display: inline-flex; width: 34px; height: 18px; flex: none; }
  #page-settings .mt-mini-switch input { opacity: 0; width: 0; height: 0; }
  #page-settings .mt-mini-slider { position: absolute; inset: 0; background: rgba(0,0,0,0.16); border-radius: 999px; transition: background .18s ease; cursor: pointer; }
  #page-settings .mt-mini-slider::before { content: ""; position: absolute; height: 13px; width: 13px; left: 3px; top: 2.5px; background: #fff; border-radius: 50%; transition: transform .18s var(--ease-spring); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
  #page-settings .mt-mini-switch input:checked + .mt-mini-slider { background: #16a34a; }
  #page-settings .mt-mini-switch input:checked + .mt-mini-slider::before { transform: translateX(16px); }
  #page-settings .mt-item.active .mt-mini-slider { background: rgba(255,255,255,0.28); }
  #page-settings .mt-item.active .mt-mini-switch input:checked + .mt-mini-slider { background: #22c55e; }
  /* A message that's switched off — dim its label but keep the toggle bright */
  #page-settings .mt-item.is-off .mt-item-ico,
  #page-settings .mt-item.is-off .mt-item-name { opacity: 0.42; }
  #page-settings .mt-item.is-off .mt-item-name { text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.25); }
  /* Master switch off → dim the whole editor grid to signal "all paused" */
  #page-settings #mt-grid.mt-muted { opacity: 0.55; transition: opacity .2s ease; }
  /* Edit ⇄ Preview mode switch — centered, echoes the tubelight navbar */
  #page-settings .mt-mode-wrap { display: flex; justify-content: center; margin-bottom: 18px; }
  #page-settings .mt-mode {
    display: inline-flex; gap: 3px;
    background: var(--st-surface-3);
    border: 1px solid var(--st-line);
    border-radius: 100px;
    padding: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
  }
  #page-settings .mt-mode-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 18px;
    border-radius: 100px;
    border: none; background: transparent;
    color: var(--st-ink-soft);
    font-family: var(--font);
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: all 0.22s var(--ease-out);
  }
  #page-settings .mt-mode-btn:hover { color: var(--st-ink); }
  #page-settings .mt-mode-btn.is-active {
    background: #fff;
    color: var(--st-ink);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 0 0 1px var(--st-line);
  }
  #page-settings .mt-mode-btn em { font-style: normal; font-weight: 600; color: var(--st-ink-faint); }
  #page-settings .mt-mode-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green); flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.16);
  }
  #page-settings .mt-mode-btn.is-active .mt-mode-dot { animation: mtLivePulse 2s ease-in-out infinite; }
  @keyframes mtLivePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(22,163,74,0.06); }
  }
  /* Composer — subject row + body in one frame */
  #page-settings .mt-composer {
    border: 1px solid var(--st-line-strong);
    border-radius: 16px;
    background: var(--st-surface);
    overflow: hidden;
    transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
  }
  #page-settings .mt-composer:focus-within {
    border-color: var(--st-ink);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
  }
  #page-settings .mt-composer-row {
    display: flex; align-items: center; gap: 12px;
    padding: 3px 16px;
    border-bottom: 1px solid var(--st-line);
    background: var(--st-surface-2);
  }
  #page-settings .mt-composer-tag {
    font-size: 0.58rem; font-weight: 800;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--st-ink-faint); flex-shrink: 0;
  }
  #page-settings .mt-composer-row input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: transparent;
    padding: 12px 0;
    font-family: var(--font);
    font-size: 0.9rem; font-weight: 700;
    color: var(--st-ink); letter-spacing: -0.01em;
  }
  #page-settings .mt-composer-row input::placeholder { color: var(--st-ink-faint); font-weight: 500; }
  #page-settings .mt-composer textarea {
    display: block; width: 100%;
    border: none; outline: none; background: transparent;
    padding: 14px 16px;
    font-family: var(--font);
    font-size: 0.85rem; line-height: 1.7;
    font-weight: 500;
    letter-spacing: -0.005em;
    resize: vertical; white-space: pre-wrap;
    color: var(--st-ink);
    min-height: 240px;
  }
  #page-settings .mt-composer textarea::placeholder { color: var(--st-ink-faint); font-weight: 500; }
  /* Placeholder tray — human-readable chips */
  #page-settings .mt-vars-tray {
    margin-top: 14px;
    border: 1px dashed var(--st-line-strong);
    border-radius: 14px;
    background: var(--st-surface-2);
    padding: 12px 14px 13px;
  }
  #page-settings .mt-vars-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: 9px;
  }
  #page-settings .mt-vars-label {
    font-size: 0.58rem; font-weight: 800;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--st-ink-faint);
  }
  #page-settings .mt-vars-hint { font-size: 0.66rem; color: var(--st-ink-faint); }
  #page-settings #mt-vars { display: flex; flex-wrap: wrap; gap: 6px; }
  #page-settings .mt-var-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--st-line);
    background: #fff;
    border-radius: 100px;
    padding: 5px 12px 5px 9px;
    font-size: 0.72rem; font-weight: 650;
    font-family: var(--font);
    color: var(--st-ink-soft);
    cursor: pointer;
    transition: all 0.15s var(--ease-out);
  }
  #page-settings .mt-var-plus {
    font-weight: 800; font-size: 0.78rem; line-height: 1;
    color: var(--st-ink-faint);
    transition: color 0.15s var(--ease-out);
  }
  #page-settings .mt-var-chip:hover {
    background: var(--st-ink); border-color: var(--st-ink); color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  }
  #page-settings .mt-var-chip:hover .mt-var-plus { color: rgba(255,255,255,0.7); }
  /* Actions */
  #page-settings .mt-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
  #page-settings .mt-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 100px;
    border: 1px solid var(--st-line-strong); background: var(--st-surface);
    color: var(--st-ink-soft); font-family: var(--font);
    font-size: 0.8rem; font-weight: 700; cursor: pointer;
    transition: all 0.18s var(--ease-out);
  }
  #page-settings .mt-btn-ghost:hover { border-color: var(--st-ink); color: var(--st-ink); transform: translateY(-1px); }
  #page-settings .mt-saved-chip {
    display: none; align-items: center; gap: 5px;
    font-size: 0.68rem; font-weight: 800;
    color: var(--green); background: var(--green-bg);
    border: 1px solid rgba(22,163,74,0.2);
    border-radius: 100px; padding: 5px 12px;
  }
  /* Preview pane — reads like the email the customer receives */
  #page-settings .mt-preview {
    border: 1px solid var(--st-line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--st-surface);
    box-shadow: var(--st-shadow-sm);
    animation: mtPaneIn 0.3s var(--ease-out) both;
  }
  @keyframes mtPaneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  #page-settings .mt-preview-head {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px;
    background: var(--st-surface-3);
    border-bottom: 1px solid var(--st-line);
  }
  #page-settings .mt-preview-win { display: inline-flex; gap: 5px; flex-shrink: 0; }
  #page-settings .mt-preview-win i {
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.06);
  }
  #page-settings .mt-preview-dot {
    display: inline-block;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green); flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.14);
    margin-right: 4px;
    vertical-align: 1px;
    animation: mtLivePulse 2s ease-in-out infinite;
  }
  #page-settings .mt-preview-tag {
    font-size: 0.6rem; font-weight: 800;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--st-ink-soft);
  }
  #page-settings .mt-preview-spin { margin-left: auto; font-size: 0.68rem; color: var(--st-ink-faint); }
  #page-settings .mt-preview-body {
    padding: 18px 22px 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%);
  }
  #page-settings .mt-preview-meta {
    font-size: 0.68rem; color: var(--st-ink-faint);
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--st-line-strong);
  }
  #page-settings .mt-preview-subject {
    font-weight: 800; font-size: 0.98rem;
    color: var(--st-ink); letter-spacing: -0.015em;
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid var(--st-line);
  }
  #page-settings .mt-preview-text {
    margin: 0;
    font-family: var(--font);
    font-size: 0.85rem; line-height: 1.75;
    white-space: pre-wrap; word-break: break-word;
    color: var(--st-ink);
  }
  @media (max-width: 900px) {
    #page-settings #mt-grid { grid-template-columns: 1fr; }
    #page-settings .mt-list { border-right: none; border-bottom: 1px solid var(--st-line); }
  }

  /* ── CANCELLATION POLICY BOX (modern) ─────────────────── */
  .st-policy-box { border:1.5px solid var(--border-dark); border-radius:16px; background:#fff; overflow:hidden; transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
  .st-policy-box:focus-within { border-color:#111; box-shadow:0 0 0 4px rgba(0,0,0,0.06); }
  .st-policy-head { display:flex; align-items:center; gap:7px; padding:11px 16px; border-bottom:1px solid var(--border); color:var(--text); font-size:0.74rem; font-weight:800; letter-spacing:-0.01em; background:var(--freeze); }
  .st-policy-head svg { color:var(--text-muted); }
  .st-policy-autosave { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:0.68rem; font-weight:700; color:var(--text-faint); text-transform:none; letter-spacing:0; }
  .st-policy-autosave svg { color:var(--green); }
  .st-policy-box textarea { width:100%; resize:vertical; padding:16px 18px; background:#fff; border:none; font-family:var(--font); font-size:0.9rem; font-weight:400; color:var(--text); outline:none; min-height:120px; line-height:1.7; display:block; }
  .st-policy-box textarea::placeholder { color:var(--text-faint); }

  /* ── BRANCH HOURS UI (modern) ─────────────────────────── */
  .bh-card { border:1px solid var(--border); border-radius:18px; background:#fff; overflow:visible; box-shadow:0 1px 3px rgba(0,0,0,0.05); transition:box-shadow 0.25s var(--ease-out), border-color 0.25s; }
  .bh-card:hover { box-shadow:0 8px 30px rgba(0,0,0,0.07); border-color:rgba(0,0,0,0.16); }
  .bh-card-head { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); background:var(--bg); border-radius:18px 18px 0 0; }
  .bh-card-badge { width:38px; height:38px; border-radius:11px; background:rgba(0,0,0,0.06); border:1px solid var(--border); color:var(--text); display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }
  .bh-card-name { font-weight:800; font-size:0.95rem; color:var(--text); letter-spacing:-0.01em; }
  .bh-card-addr { font-size:0.74rem; color:var(--text-muted); margin-top:1px; }
  .bh-copy-all { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:700; color:var(--text-muted); background:#fff; border:1px solid var(--border-dark); border-radius:100px; padding:6px 13px; cursor:pointer; transition:all 0.16s var(--ease-out); white-space:nowrap; }
  .bh-copy-all:hover { background:#111; color:#fff; border-color:#111; transform:translateY(-1px); }
  .bh-saved-badge { font-size:0.72rem; font-weight:800; color:var(--green); opacity:0; transition:opacity 0.3s; display:inline-flex; align-items:center; gap:4px; }
  .bh-rows { padding:6px 20px 10px; }
  .bh-row { display:grid; grid-template-columns:104px 116px 1fr; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--st-line-soft, rgba(0,0,0,0.05)); transition:background 0.15s; border-radius:10px; }
  .bh-row:last-child { border-bottom:none; }
  .bh-row.is-closed { opacity:0.72; }
  .bh-day { font-size:0.84rem; font-weight:700; color:var(--text); flex-shrink:0; letter-spacing:-0.01em; }
  /* Toggle switch (black = open, grey = closed) */
  .bh-toggle-wrap { display:flex; align-items:center; gap:9px; cursor:pointer; flex-shrink:0; user-select:none; }
  .bh-toggle-inp { display:none; }
  .bh-toggle-track { width:38px; height:22px; background:#111; border-radius:100px; border:1.5px solid #111; position:relative; transition:background 0.24s var(--ease-out), border-color 0.24s; flex-shrink:0; }
  .bh-toggle-thumb { position:absolute; top:2px; left:2px; width:14px; height:14px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,0.3); transition:transform 0.26s var(--ease-spring); transform:translateX(16px); }
  /* checked = CLOSED → grey track, thumb left */
  .bh-toggle-inp:checked + .bh-toggle-track { background:var(--ice); border-color:var(--border-dark); }
  .bh-toggle-inp:checked + .bh-toggle-track .bh-toggle-thumb { transform:translateX(0); }
  .bh-toggle-label { font-size:0.76rem; font-weight:800; color:var(--text); letter-spacing:-0.01em; }
  /* Times */
  .bh-times { display:flex; align-items:center; gap:10px; }
  .bh-sep { color:var(--text-faint); font-size:0.85rem; font-weight:700; }
  .bh-closed-tag { font-size:0.73rem; color:var(--text-muted); font-weight:700; background:var(--bg); padding:5px 13px; border-radius:100px; border:1px solid var(--border); white-space:nowrap; }
  /* Modern time dropdown */
  .bh-tdrop { position:relative; }
  .bh-tdrop-trigger { display:flex; align-items:center; gap:8px; min-width:108px; padding:9px 12px; border:1.5px solid var(--border-dark); border-radius:11px; background:#fff; font-size:0.84rem; font-weight:700; color:var(--text); font-family:var(--font); cursor:pointer; transition:border-color 0.15s, box-shadow 0.15s; font-variant-numeric:tabular-nums; }
  .bh-tdrop-trigger:hover { border-color:#111; }
  .bh-tdrop.open .bh-tdrop-trigger { border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,0.07); }
  .bh-tdrop-trigger .bh-tdrop-arr { margin-left:auto; font-size:0.6rem; color:var(--text-faint); transition:transform 0.2s var(--ease-out); }
  .bh-tdrop.open .bh-tdrop-trigger .bh-tdrop-arr { transform:rotate(180deg); }
  .bh-tdrop-menu { position:absolute; top:calc(100% + 6px); left:0; z-index:60; width:138px; max-height:230px; overflow-y:auto; background:#fff; border:1px solid var(--border-dark); border-radius:13px; box-shadow:0 16px 40px rgba(0,0,0,0.16); padding:5px; opacity:0; transform:translateY(-6px) scale(0.98); pointer-events:none; transition:opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out); scrollbar-width:none; }
  .bh-tdrop-menu::-webkit-scrollbar { display:none; }
  .bh-tdrop.open .bh-tdrop-menu { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .bh-tdrop-opt { padding:8px 11px; border-radius:8px; font-size:0.82rem; font-weight:600; color:var(--text); cursor:pointer; font-variant-numeric:tabular-nums; transition:background 0.12s; }
  .bh-tdrop-opt:hover { background:var(--bg); }
  .bh-tdrop-opt.sel { background:#111; color:#fff; }

  /* ── FLOATING SAVE TOAST ──────────────────────────────── */
  #page-settings .stg-pay-msg {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 90;
    padding: 12px 20px;
    background: var(--st-ink);
    color: #fff !important;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 18px 40px -8px rgba(0,0,0,0.42);
    border: 1px solid rgba(255,255,255,0.08);
    animation: stToastIn 0.35s var(--ease-spring) both;
    letter-spacing: -0.005em;
    pointer-events: none;
    max-width: 380px;
  }
  #page-settings .stg-pay-msg::before {
    content: '●';
    color: #16a34a;
    margin-right: 8px;
    font-size: 0.7em;
    vertical-align: 0.15em;
  }
  @keyframes stToastIn {
    from { opacity: 0; transform: translateY(12px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* ── RESPONSIVE  ──────────────────────────────────────── */
  @media (max-width: 760px) {
    #page-settings { padding: 0.25rem 0 4rem; }
    #page-settings .st-sec-head { grid-template-columns: auto 1fr; }
    #page-settings .st-sec-pill { grid-column: 1 / -1; justify-self: start; }
    #page-settings .st-pref-row { grid-template-columns: 1fr; gap: 0.75rem; }
    #page-settings .st-action-card { grid-template-columns: auto 1fr; }
    #page-settings .st-action-btn { grid-column: 1 / -1; justify-content: center; }
  }

  .sidebar-debug-row { display:flex; gap:8px; align-items:center; }
  .debug-btn { width:34px; height:34px; border-radius:9px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.48); cursor:pointer; font-size:0.9rem; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
  .debug-btn:hover { border-color:rgba(255,255,255,0.30); background:rgba(255,255,255,0.10); color:#ffffff; }
  .debug-popout { position:fixed; top:74px; right:24px; z-index:280; width:620px; max-width:calc(100vw - 28px); max-height:calc(100vh - 28px); color:#111827; }
  .debug-popout * { text-shadow:none; }
  .debug-popout .dark-modal-inner { background:#ffffff !important; border-color:rgba(0,0,0,0.10) !important; color:#111827 !important; box-shadow:0 24px 70px rgba(17,24,39,0.22) !important; }
  .debug-popout [style*="color:#e0e0e0"],
  .debug-popout [style*="color:rgba(255,255,255"] { color:#111827 !important; }
  #debug-drag-handle { background:#f9fafb; border-bottom-color:rgba(0,0,0,0.08) !important; }
  #debug-drag-handle div div:first-child { color:#111827 !important; }
  #debug-drag-handle div div:last-child { color:#1f2937 !important; font-weight:650; }
  #debug-drag-handle button { border:1px solid rgba(0,0,0,0.12) !important; background:#ffffff !important; color:#111827 !important; }
  .debug-modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .debug-action { border:1px solid rgba(0,0,0,0.10); background:#fafaf8; border-radius:12px; padding:12px; text-align:left; cursor:pointer; color:#111827; transition:all 0.15s; font-family:var(--font); box-shadow:inset 0 1px 0 rgba(255,255,255,0.75); }
  .debug-action:hover { border-color:rgba(0,0,0,0.22); background:#f9fafb; transform:translateY(-1px); }
  .debug-action-title { font-size:0.87rem; font-weight:800; margin-bottom:4px; color:#111827; letter-spacing:0; }
  .debug-action-sub { font-size:0.74rem; line-height:1.38; color:#1f2937; font-weight:650; letter-spacing:0; }
  .debug-status { margin-top:12px; min-height:18px; font-size:0.8rem; color:#111827; font-weight:700; }
  @media (max-width: 620px) { .debug-popout { left:14px !important; right:auto !important; top:64px !important; width:calc(100vw - 28px); } .debug-modal-grid { grid-template-columns:1fr; } }

  /* MAIN */
  .main-content {
    padding: 1.75rem 2rem; overflow-y: auto; overflow-x: hidden;
    background: var(--bg); height: 100vh; scroll-behavior: smooth;
    transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.34,1.3,0.64,1); will-change: opacity, transform;
    transform: translateZ(0); -webkit-transform: translateZ(0);
    background-image: radial-gradient(ellipse at 100% 0%, rgba(255,255,255,0.06) 0%, transparent 50%),
                      radial-gradient(ellipse at 0% 100%, rgba(0,0,0,0.03) 0%, transparent 50%);
  }
  .main-content.page-transitioning { opacity: 0.06; transform: translateY(5px); pointer-events: none; }
  /* Background refresh: zero out durations instead of `animation:none` —
     removing `animation-name` restarts every entry animation from frame 0,
     which made the whole page "replay" after each poll / on tab return.
     Changing only the duration never restarts a finished animation. */
  .main-content.background-refresh,
  .main-content.background-refresh * {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }

  /* --- PAGE HEADER ------------------------------------------------------- */
  .page-header {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    box-shadow: 0 2px 24px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.9) inset;
    overflow: hidden;
  }
  .page-header::before {
    content: ''; position: absolute;
    top: 0; left: 8%; right: 8%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.22), transparent);
  }
  .page-header::after {
    content: ''; position: absolute; pointer-events: none;
    top: -50px; right: -30px; width: 200px; height: 160px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.08) 0%, transparent 70%);
  }
  .ph-left { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
  .ph-accent {
    width: 3px; height: 40px; flex-shrink: 0; border-radius: 100px;
    background: linear-gradient(to bottom, #111111 0%, #9ca3af 100%);
  }
  .page-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.04em; color: var(--text); line-height: 1.1; }
  .page-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
  .page-actions { display:flex; align-items:center; gap:8px; position:relative; z-index:1; flex-wrap:wrap; justify-content:flex-end; }
  .dash-live-indicator {
    display:none; align-items:center; gap:8px; position:relative; z-index:1;
    padding:8px 11px; border-radius:10px; border:1px solid rgba(22,163,74,0.24);
    background:#f0fdf4; color:#166534; font-size:0.78rem; font-weight:800;
  }
  .dash-live-indicator.show { display:flex; }
  .dash-live-dot { width:8px; height:8px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,0.12); flex-shrink:0; }
  .dash-live-link { border:none; background:transparent; color:#166534; font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:2px; padding:0; }
  /* ── Subscription / payment warning banner ── */
  .subscription-warning {
    display:none; align-items:center; gap:8px;
    margin:-0.35rem 0 1.25rem;
    height:35px; padding:0 6px 0 10px;
    border:1px solid #fcd34d; border-radius:6px;
    background:#fefce8; color:#713f12;
    font-size:0.8125rem; position:relative; overflow:hidden;
    animation: sw-slidein 0.35s cubic-bezier(0.34,1.3,0.64,1) both;
  }
  @keyframes sw-slidein {
    from { opacity:0; transform:translateX(20px); }
    to   { opacity:1; transform:translateX(0); }
  }
  .subscription-warning.show { display:flex; }
  .subscription-warning.expired {
    border-color:#fca5a5; background:#fef2f2; color:#7f1d1d;
  }
  .subscription-warning-body { display:flex; align-items:center; gap:7px; flex:1; min-width:0; }
  .subscription-warning-icon { width:14px; height:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .subscription-warning-icon svg { width:14px; height:14px; fill:currentColor; }
  /* action text — underlined, no button chrome */
  .subscription-warning-title {
    font-weight:700; font-size:0.8125rem;
    text-decoration:underline; text-decoration-color:rgba(113,63,18,0.35);
    text-underline-offset:4px; cursor:default;
  }
  .subscription-warning.expired .subscription-warning-title {
    text-decoration-color:rgba(127,29,29,0.35);
  }
  .subscription-warning-msg { font-weight:400; font-size:0.8125rem; color:inherit; opacity:0.8; }
  /* dismiss X button */
  .subscription-warning button.sw-dismiss {
    border:none; background:transparent; color:currentColor;
    border-radius:4px; width:24px; height:24px; flex-shrink:0;
    cursor:pointer; font-size:0.9rem; font-weight:600;
    display:flex; align-items:center; justify-content:center;
    opacity:0.55; transition:opacity 0.12s, background 0.12s; margin-left:auto;
  }
  .subscription-warning button.sw-dismiss:hover { opacity:1; background:rgba(113,63,18,0.1); }
  .subscription-warning.expired button.sw-dismiss:hover { background:rgba(127,29,29,0.1); }
  .storage-action {
    height:42px; padding:0 14px; border-radius:8px; border:1.5px solid #111;
    display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:var(--font);
    transition:transform 0.16s, box-shadow 0.2s, color 0.45s ease;
    min-width:130px; position:relative; overflow:hidden;
  }
  .storage-action::before {
    content:''; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:0; height:0; border-radius:50%; z-index:0;
    transition:width 1.0s cubic-bezier(0.19,1,0.22,1), height 1.0s cubic-bezier(0.19,1,0.22,1);
  }
  .storage-action .action-mark {
    width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center;
    font-size:1rem; font-weight:800; line-height:1; position:relative; z-index:1;
    transition:background 0.45s, color 0.45s;
  }
  .storage-action .action-copy { display:flex; flex-direction:column; align-items:flex-start; line-height:1.05; position:relative; z-index:1; }
  .storage-action .action-title { font-size:0.82rem; font-weight:800; letter-spacing:0; white-space:nowrap; }
  .storage-action .action-sub { margin-top:3px; font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap; transition:color 0.45s; }
  .storage-action.primary {
    background:#111; color:#fff; box-shadow:0 4px 16px rgba(0,0,0,0.18);
  }
  .storage-action.primary::before { background:#fff; }
  .storage-action.primary .action-mark { background:rgba(255,255,255,0.15); color:#fff; }
  .storage-action.primary .action-sub { color:rgba(255,255,255,0.65); }
  .storage-action.primary:hover { color:#111; box-shadow:0 8px 28px rgba(0,0,0,0.14); }
  .storage-action.primary:hover::before { width:500px; height:500px; }
  .storage-action.primary:hover .action-mark { background:rgba(0,0,0,0.08); color:#111; }
  .storage-action.primary:hover .action-sub { color:rgba(0,0,0,0.5); }
  .storage-action.secondary {
    background:#fff; color:#111; box-shadow:0 2px 10px rgba(0,0,0,0.06);
  }
  .storage-action.secondary::before { background:#111; }
  .storage-action.secondary .action-mark { background:rgba(0,0,0,0.07); color:#111; }
  .storage-action.secondary .action-sub { color:var(--text-faint); }
  .storage-action.secondary:hover { color:#fff; box-shadow:0 8px 28px rgba(0,0,0,0.18); }
  .storage-action.secondary:hover::before { width:500px; height:500px; }
  .storage-action.secondary:hover .action-mark { background:rgba(255,255,255,0.15); color:#fff; }
  .storage-action.secondary:hover .action-sub { color:rgba(255,255,255,0.65); }
  .storage-action:hover { transform:translateY(-2px); }
  .storage-demo-btn { opacity:0.48; height:34px; padding:0 10px; font-size:0.74rem; border-radius:8px; }
  @media (max-width: 760px) {
    .page-header { align-items:flex-start; flex-direction:column; gap:14px; }
    .page-actions { width:100%; justify-content:stretch; }
    .storage-action { flex:1; justify-content:center; }
    .storage-demo-btn { width:100%; justify-content:center; }
  }

  /* STATS */
  .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
  .stat-card {
    background: #ffffff; border: 1px solid rgba(0,0,0,0.07);
    border-radius: 16px; padding: 1.25rem 1.4rem;
    box-shadow: 0 2px 20px rgba(0,0,0,0.03), 0 1px 0 rgba(255,255,255,0.9) inset;
    transition: box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1), border-color 0.2s ease;
    position: relative; overflow: hidden;
  }
  .stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.28), rgba(255,255,255,0.32), transparent);
  }
  .stat-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.10); transform: translateY(-4px); border-color: rgba(0,0,0,0.12); }
  .stat-card:active { transform: translateY(-1px) scale(0.985); transition-duration: 0.1s; }
  .stat-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.07em; }
  .stat-val { font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--text); }
  .stat-val.green { color: var(--green); }
  .stat-val.yellow { color: var(--yellow); }
  .stat-val.gold { color: #111111; }

  /* ── Unified filter pill — used by dashboard, analytics, customers, etc. ── */
  .filter-pill-bar {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:14px;
    padding:10px 16px; margin-bottom:1.25rem; box-shadow:0 1px 6px rgba(0,0,0,0.04);
  }
  .filter-pill-label {
    font-size:0.78rem; font-weight:800; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; font-family:var(--font); flex-shrink:0;
  }
  .filter-pill {
    padding:4px 14px; border-radius:100px; font-size:0.72rem; font-weight:600;
    border:1px solid var(--border); background:transparent; color:var(--text-muted);
    cursor:pointer; transition:all 0.15s; font-family:var(--font);
  }
  .filter-pill:hover { background:rgba(0,0,0,0.04); color:var(--text); border-color:rgba(0,0,0,0.18); }
  .filter-pill.active { background:var(--accent); color:#fff; border-color:var(--border-dark); }
  /* keep old names as aliases so existing JS still works */
  .dash-range-pills { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:14px; padding:10px 16px; margin-bottom:1.25rem; box-shadow:0 1px 6px rgba(0,0,0,0.04); }
  .dash-range-pill { padding:4px 14px; border-radius:100px; font-size:0.72rem; font-weight:600; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; transition:all 0.15s; font-family:var(--font); }
  .dash-range-pill:hover { background:rgba(0,0,0,0.04); color:var(--text); border-color:rgba(0,0,0,0.18); }
  .dash-range-pill.active { background:var(--accent); color:#fff; border-color:var(--border-dark); }
  /* ── Revenue chart card ──────────────────────────────────── */
  .rev-chart-card {
    background:rgba(255,255,255,0.92); border:1px solid rgba(0,0,0,0.07);
    border-radius:16px; overflow:hidden; margin-bottom:1.25rem;
    box-shadow:0 2px 24px rgba(0,0,0,0.04);
  }
  .rev-chart-header {
    padding:0.85rem 1rem; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
  }
  .rev-chart-header .rch-title { font-weight:600; font-size:0.88rem; }
  .rev-chart-header .rch-meta { font-size:0.72rem; color:var(--text-muted); }
  .rev-chart-legend { display:flex; gap:14px; align-items:center; }
  .rev-chart-legend span { display:flex; align-items:center; gap:5px; font-size:0.7rem; color:var(--text-muted); font-weight:600; }
  .rev-chart-legend .dot { width:9px; height:9px; border-radius:2px; flex-shrink:0; }

  /* ── FleetAreaChart (SVG, dependency-free) ───────────────── */
  .ac-root { width:100%; user-select:none; -webkit-tap-highlight-color:transparent; }
  .ac-svg { display:block; overflow:visible; }
  .ac-axis-label { fill:var(--text-faint,#9ca3af); font-size:10px; font-family:var(--font); font-variant-numeric:tabular-nums; }
  .ac-xaxis { position:absolute; left:0; right:0; bottom:6px; height:14px; pointer-events:none; }
  .ac-xlabel { position:absolute; transform:translateX(-50%); white-space:nowrap; font-size:10px; color:var(--text-faint,#9ca3af); font-family:var(--font); }
  .ac-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-faint,#9ca3af); font-size:0.82rem; }
  .ac-tip {
    position:absolute; z-index:30; pointer-events:none; min-width:132px;
    background:rgba(17,17,17,0.96); color:#fff; border-radius:11px;
    padding:9px 11px; box-shadow:0 12px 34px rgba(0,0,0,0.28);
    opacity:0; transition:opacity 0.14s ease, left 0.18s cubic-bezier(0.22,1,0.36,1), top 0.18s cubic-bezier(0.22,1,0.36,1);
    backdrop-filter:blur(8px);
  }
  .ac-tip-title { font-size:0.66rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:7px; }
  .ac-tip-row { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:5px; }
  .ac-tip-key { display:flex; align-items:center; gap:7px; font-size:0.78rem; color:rgba(255,255,255,0.72); }
  .ac-tip-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 2px rgba(255,255,255,0.12); }
  .ac-tip-val { font-size:0.82rem; font-weight:700; font-variant-numeric:tabular-nums; }
  .ac-pill {
    position:absolute; z-index:29; bottom:2px; transform:translateX(-50%); pointer-events:none;
    background:#111; color:#fff; font-size:0.7rem; font-weight:700; padding:2px 11px;
    border-radius:100px; opacity:0; transition:opacity 0.14s ease, left 0.18s cubic-bezier(0.22,1,0.36,1);
    white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,0.22);
  }
  /* ── Overdue returns card ────────────────────────────────── */
  .overdue-card {
    background:rgba(255,255,255,0.92); border:1px solid rgba(0,0,0,0.07);
    border-left:3px solid var(--red); border-radius:16px;
    overflow:hidden; box-shadow:0 2px 24px rgba(0,0,0,0.04);
  }
  .overdue-card.all-good { border-left-color:var(--green); }
  .overdue-header {
    padding:0.75rem 1rem; border-bottom:1px solid var(--border);
    font-weight:600; font-size:0.83rem; display:flex; align-items:center; gap:6px;
  }
  .overdue-item {
    display:flex; align-items:center; gap:10px;
    padding:0.55rem 1rem; border-bottom:1px solid rgba(0,0,0,0.04);
    font-size:0.82rem; cursor:pointer; transition:background 0.12s;
  }
  .overdue-item:hover { background:rgba(0,0,0,0.02); }
  .overdue-item:last-child { border-bottom:none; }
  .overdue-badge {
    background:var(--red-bg); color:var(--red); font-weight:700;
    font-size:0.68rem; border-radius:100px; padding:2px 9px; white-space:nowrap; flex-shrink:0;
  }
  .overdue-empty { padding:1.1rem 1rem; text-align:center; color:var(--green); font-size:0.82rem; font-weight:600; }
  #overdue-body { max-height:240px; overflow-y:auto; }
  #today-schedule-table th, #upcoming-week-table th { position:sticky; top:0; z-index:1; background:rgb(249,250,251); }
  /* ── Activity feed card ──────────────────────────────────── */
  .activity-feed-card {
    background:rgba(255,255,255,0.92); border:1px solid rgba(0,0,0,0.07);
    border-radius:16px; overflow:hidden; box-shadow:0 2px 24px rgba(0,0,0,0.04);
  }
  .activity-header { padding:0.75rem 1rem; border-bottom:1px solid var(--border); font-weight:600; font-size:0.83rem; }
  .activity-item {
    display:flex; align-items:flex-start; gap:9px;
    padding:0.5rem 1rem; border-bottom:1px solid rgba(0,0,0,0.04);
    transition:background 0.12s;
  }
  .activity-item:hover { background:rgba(0,0,0,0.02); }
  .activity-item:last-child { border-bottom:none; }
  .activity-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:5px; }
  .activity-text { flex:1; min-width:0; font-size:0.78rem; line-height:1.45; color:var(--text); }
  .activity-time { font-size:0.68rem; color:var(--text-faint); white-space:nowrap; flex-shrink:0; padding-top:2px; }
  /* ══════════════════════════════════════════════════════════════════
     NEW FEATURES CSS — Analytics, Calendar, CRM, Inspection, Export,
     Error Boundary, Late Return, PWA
     ══════════════════════════════════════════════════════════════════ */

  /* ── ANALYTICS PAGE ─────────────────────────────────────────────── */
  #page-analytics { padding-bottom: 3rem; }

  /* Analytics header banner — matches .page-header style */
  .an-header-banner {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    box-shadow: 0 2px 24px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.9) inset;
    overflow: hidden;
  }
  .an-header-banner::before {
    content: ''; position: absolute;
    top: 0; left: 8%; right: 8%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.22), transparent);
  }
  .an-header-left { display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
  .an-header-accent {
    width: 3px; height: 40px; flex-shrink: 0; border-radius: 100px;
    background: linear-gradient(to bottom, #111111 0%, #9ca3af 100%);
  }
  .an-header-text { display:flex; flex-direction:column; gap:4px; }
  .an-header-title { font-size:1.45rem; font-weight:800; color:var(--text); letter-spacing:-0.04em; line-height:1.1; font-family:var(--font); }
  .an-header-sub { font-size:0.78rem; color:var(--text-muted); margin-top:4px; font-family:var(--font); }
  /* Analytics filter — same as fin-filter-bar */
  .an-filter-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:14px; padding:10px 16px; margin-bottom:1.25rem; box-shadow:0 1px 6px rgba(0,0,0,0.04); }
  .an-filter-label { font-size:0.78rem; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; font-family:var(--font); flex-shrink:0; }
  .an-range-pills { display:flex; gap:4px; flex-wrap:wrap; }
  .an-range-pill { padding:4px 14px; border-radius:100px; font-size:0.72rem; font-weight:600; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; font-family:var(--font); transition:all 0.15s; }
  .an-range-pill:hover { background:rgba(0,0,0,0.04); color:var(--text); border-color:rgba(0,0,0,0.18); }
  .an-range-pill.active { background:var(--accent); color:#fff; border-color:var(--border-dark); }

  /* KPI row */
  .an-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; }
  @media(max-width:900px) { .an-kpi-row { grid-template-columns:repeat(2,1fr); } }
  .an-kpi {
    background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:16px;
    padding:1.2rem 1.4rem 1rem; position:relative; overflow:hidden;
    box-shadow:0 2px 20px rgba(0,0,0,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .an-kpi:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,0.08); }
  .an-kpi::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    border-radius:16px 16px 0 0;
  }
  .an-kpi-rev::before  { background:linear-gradient(90deg,#111,#374151); }
  .an-kpi-util::before { background:linear-gradient(90deg,#16a34a,#4ade80); }
  .an-kpi-avg::before  { background:linear-gradient(90deg,#b45309,#fbbf24); }
  .an-kpi-cust::before { background:linear-gradient(90deg,#7c3aed,#a78bfa); }
  .an-kpi-icon { font-size:1.2rem; margin-bottom:0.45rem; }
  .an-kpi-label { font-size:0.66rem; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.45rem; }
  .an-kpi-val { font-size:1.9rem; font-weight:800; color:var(--text); letter-spacing:-0.04em; line-height:1; }
  .an-kpi-delta { display:inline-flex; align-items:center; gap:3px; margin-top:0.4rem; font-size:0.7rem; font-weight:700; border-radius:100px; padding:2px 8px; }
  .an-kpi-delta.up      { background:rgba(22,163,74,0.1); color:#16a34a; }
  .an-kpi-delta.down    { background:rgba(220,38,38,0.1); color:#dc2626; }
  .an-kpi-delta.neutral { background:rgba(0,0,0,0.05); color:var(--text-muted); }

  /* Chart cards */
  .an-charts-grid { display:grid; grid-template-columns:2fr 1fr; gap:1.25rem; margin-bottom:1.25rem; }
  @media(max-width:1100px) { .an-charts-grid { grid-template-columns:1fr; } }
  .an-charts-row2 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.25rem; margin-bottom:1.25rem; }
  @media(max-width:1100px) { .an-charts-row2 { grid-template-columns:1fr 1fr; } }
  @media(max-width:700px) { .an-charts-row2 { grid-template-columns:1fr; } }
  .an-card {
    background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:18px;
    overflow:hidden; box-shadow:0 3px 28px rgba(0,0,0,0.05);
  }
  .an-card-head {
    padding:0.9rem 1.15rem; border-bottom:1px solid rgba(0,0,0,0.06);
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    background:linear-gradient(to bottom, #fafafa, #fff);
  }
  .an-card-title { font-size:0.84rem; font-weight:800; color:var(--text); letter-spacing:-0.01em; }
  .an-card-sub   { font-size:0.7rem; color:var(--text-muted); margin-top:1px; font-weight:400; }
  .an-card-body  { padding:1rem 1.15rem; }
  .an-legend { display:flex; gap:10px; flex-wrap:wrap; }
  .an-legend-item { display:flex; align-items:center; gap:5px; font-size:0.7rem; font-weight:600; color:var(--text-muted); }
  .an-legend-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
  /* Funnel */
  /* ── Booking funnel — horizontal stage rows ── */
  .an-funnel { display:flex; flex-direction:column; gap:13px; padding:0.55rem 0.1rem 0.35rem; }
  .an-funnel-step { display:grid; grid-template-columns:88px 1fr 110px; align-items:center; gap:14px; }
  .an-funnel-label { font-size:0.74rem; font-weight:700; color:var(--text-muted); white-space:nowrap; letter-spacing:-0.01em; }
  .an-funnel-bar-wrap {
    position:relative; height:26px; border-radius:8px; overflow:hidden;
    background-color:#f5f5f4;
    background-image:repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 6px);
  }
  .an-funnel-bar {
    height:100%; width:0; border-radius:8px;
    transition:width 0.85s cubic-bezier(0.34,1,0.64,1); min-width:4px;
  }
  .an-funnel-meta { display:flex; align-items:center; justify-content:flex-end; gap:7px; }
  .an-funnel-bar-val { font-size:0.86rem; font-weight:800; color:#111; font-variant-numeric:tabular-nums; }
  .an-funnel-pct {
    font-size:0.66rem; font-weight:700; color:var(--text-muted);
    font-variant-numeric:tabular-nums; background:var(--bg);
    border:1px solid var(--border); border-radius:100px;
    padding:2px 8px; min-width:44px; text-align:center;
  }
  /* Utilization — segmented donut + legend */
  .an-util-wrap {
    display:flex; flex-direction:column; align-items:stretch; gap:18px;
    padding:0.5rem 0.25rem 0.25rem;
  }
  .an-util-donut-shell {
    position:relative;
    display:flex; align-items:center; justify-content:center;
    padding:6px 0 2px;
  }
  .an-util-donut { width:178px; height:178px; overflow:visible; }
  .an-util-track { stroke:rgba(0,0,0,0.045); }
  .an-util-seg {
    transition:stroke-dasharray 1.1s cubic-bezier(0.34,1,0.64,1),
               stroke-dashoffset 1.1s cubic-bezier(0.34,1,0.64,1);
    stroke-linecap:butt;
  }
  .an-util-seg-active { stroke:#0a0a0a; }
  .an-util-seg-idle   { stroke:#a3a3a3; }
  .an-util-seg-maint  { stroke:url(#an-util-hatch); }
  .an-util-center-val {
    fill:#0a0a0a; font-family:var(--font);
    font-weight:800; font-size:30px; letter-spacing:-0.045em;
  }
  .an-util-center-lbl {
    fill:#9ca3af; font-family:var(--font);
    font-size:8.5px; font-weight:700;
    letter-spacing:0.22em; text-transform:uppercase;
  }
  .an-util-stack {
    display:flex; flex-direction:column; gap:6px;
    padding:0 2px;
  }
  .an-util-stat {
    display:flex; align-items:center; gap:11px;
    padding:10px 13px;
    background:#fff;
    border:1px solid rgba(0,0,0,0.07);
    border-radius:11px;
    transition:background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  }
  .an-util-stat:hover {
    background:#fafafa;
    border-color:rgba(0,0,0,0.12);
    transform:translateX(2px);
  }
  .an-util-swatch {
    width:11px; height:11px; border-radius:3px; flex-shrink:0;
    box-shadow:0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,0.18);
  }
  .an-util-swatch.s-active { background:#0a0a0a; }
  .an-util-swatch.s-idle   { background:#a3a3a3; }
  .an-util-swatch.s-maint  {
    background:repeating-linear-gradient(45deg,#1f2937 0 2px,#fff 2px 4px);
    border:1px solid #1f2937;
    box-sizing:border-box;
  }
  .an-util-stat-lbl {
    flex:1; min-width:0;
    font-size:0.78rem; font-weight:700;
    color:var(--text); letter-spacing:-0.005em;
  }
  .an-util-stat-cnt {
    font-size:1rem; font-weight:800;
    color:var(--text); letter-spacing:-0.035em;
    font-variant-numeric:tabular-nums;
    line-height:1;
  }
  .an-util-stat-pct {
    min-width:46px; text-align:center;
    font-size:0.66rem; font-weight:800;
    color:var(--text-muted);
    font-variant-numeric:tabular-nums;
    padding:3px 8px; border-radius:999px;
    background:rgba(0,0,0,0.04);
    border:1px solid rgba(0,0,0,0.05);
    letter-spacing:0.02em;
  }
  /* Top cars list */
  .an-top-cars { display:flex; flex-direction:column; gap:0; }
  .an-top-car-row { display:flex; align-items:center; gap:10px; padding:0.65rem 0; border-bottom:1px solid rgba(0,0,0,0.05); }
  .an-top-car-row:last-child { border-bottom:none; }
  .an-top-car-rank { width:20px; font-size:0.7rem; font-weight:800; color:var(--text-faint); text-align:center; flex-shrink:0; }
  .an-top-car-name { flex:1; min-width:0; }
  .an-top-car-nm { font-size:0.82rem; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .an-top-car-plate { font-size:0.67rem; color:var(--text-faint); }
  .an-top-car-bar-wrap { width:80px; height:6px; background:rgba(0,0,0,0.07); border-radius:3px; overflow:hidden; }
  .an-top-car-bar { height:100%; border-radius:3px; background:#111; transition:width 0.7s cubic-bezier(0.34,1,0.64,1); }
  .an-top-car-rev { font-size:0.78rem; font-weight:700; color:var(--text); width:58px; text-align:right; flex-shrink:0; }
  /* Export row */
  .an-export-row { display:flex; gap:8px; flex-wrap:wrap; }
  .an-export-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 15px; border:1px solid rgba(0,0,0,0.14); border-radius:9px;
    background:#fff; color:var(--text); font-size:0.79rem; font-weight:700;
    font-family:var(--font); cursor:pointer;
    transition:all 0.15s; box-shadow:0 1px 4px rgba(0,0,0,0.06);
  }
  .an-export-btn:hover { background:#111; color:#fff; border-color:#111; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.15); }
  .an-export-btn.pdf:hover { background:#dc2626; border-color:#dc2626; }

  /* ── CALENDAR VIEW ───────────────────────────────────────────────── */
  .cal-toolbar {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-bottom:1.1rem; flex-wrap:wrap;
    background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:14px;
    padding:10px 14px; box-shadow:0 1px 8px rgba(0,0,0,0.04);
  }
  .cal-nav { display:flex; align-items:center; gap:6px; }
  .cal-nav-btn {
    width:34px; height:34px; border-radius:10px; border:1px solid rgba(0,0,0,0.10);
    background:#f9fafb; cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:0.9rem; font-weight:700; transition:all 0.15s; color:var(--text);
    box-shadow:0 1px 3px rgba(0,0,0,0.06);
  }
  .cal-nav-btn:hover { background:#111; color:#fff; border-color:#111; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
  .cal-month-label {
    font-size:1.05rem; font-weight:800; color:var(--text); letter-spacing:-0.03em;
    min-width:160px; text-align:center;
  }
  .cal-view-toggle {
    display:flex; background:rgba(0,0,0,0.04); border-radius:10px; padding:3px; gap:2px;
    border:1px solid rgba(0,0,0,0.07);
  }
  .cal-view-btn {
    padding:5px 14px; border-radius:8px; font-size:0.75rem; font-weight:700;
    border:none; cursor:pointer; font-family:var(--font); color:var(--text-muted);
    background:transparent; transition:all 0.15s;
  }
  .cal-view-btn.active { background:#fff; color:#111; box-shadow:0 1px 6px rgba(0,0,0,0.12); }
  .cal-grid {
    background:#fff; border:1px solid var(--border); border-radius:18px;
    overflow:hidden; box-shadow:0 4px 30px rgba(0,0,0,0.05);
  }
  .cal-day-headers {
    display:grid; grid-template-columns:repeat(7,1fr);
    border-bottom:1px solid var(--border);
    background:var(--freeze);
  }
  .cal-day-hdr {
    padding:13px 0; text-align:center; font-size:0.64rem; font-weight:800;
    color:var(--text-muted); text-transform:uppercase; letter-spacing:0.12em;
  }
  .cal-days { display:grid; grid-template-columns:repeat(7,1fr); }
  .cal-cell {
    min-height:112px; border-right:1px solid var(--border);
    border-bottom:1px solid var(--border); padding:8px 7px 6px;
    position:relative; transition:background 0.15s var(--ease-out);
    display:flex; flex-direction:column; gap:3px;
  }
  .cal-cell:nth-child(7n) { border-right:none; }
  .cal-cell:hover { background:var(--freeze); cursor:pointer; }
  .cal-cell.other-month { background:rgba(0,0,0,0.015); }
  .cal-cell.other-month .cal-date-num { opacity:0.3; }
  .cal-cell.today { background:rgba(17,17,17,0.035); }
  .cal-cell.today .cal-date-num {
    background:#111; color:#fff; border-radius:9px;
    box-shadow:0 2px 8px rgba(0,0,0,0.22);
  }
  .cal-date-num {
    font-size:0.78rem; font-weight:800; color:var(--text);
    margin-bottom:2px; width:26px; height:26px;
    display:flex; align-items:center; justify-content:center;
    font-variant-numeric:tabular-nums;
  }
  .cal-booking-chip {
    display:flex; align-items:center; width:100%; padding:3px 8px;
    border-radius:7px; font-size:0.65rem; font-weight:700; gap:5px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    cursor:pointer; transition:transform 0.14s var(--ease-out), box-shadow 0.14s, background 0.14s;
    line-height:1.4;
  }
  .cal-booking-chip::before { content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0; }
  .cal-booking-chip:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.14); }
  /* Monochrome system: filled = pickup, outlined = return, grey = active, dashed = pending */
  .cal-chip-pickup  { background:#111; color:#fff; }
  .cal-chip-pickup::before  { background:#fff; }
  .cal-chip-return  { background:#fff; color:#111; border:1.5px solid #111; padding:1.5px 7px; }
  .cal-chip-return::before  { background:#111; }
  .cal-chip-active  { background:var(--ice); color:#374151; }
  .cal-chip-active::before  { background:#6b7280; }
  .cal-chip-pending { background:var(--freeze); color:var(--text-muted); border:1px dashed var(--border-dark); padding:2px 7px; }
  .cal-chip-pending::before { background:var(--text-faint); }
  .cal-more {
    display:inline-flex; align-items:center; gap:3px;
    font-size:0.62rem; font-weight:800; color:var(--text-muted);
    padding:2px 8px; border-radius:100px; background:var(--bg);
    cursor:pointer; margin-top:auto; transition:all 0.15s; align-self:flex-start;
  }
  .cal-more:hover { background:#111; color:#fff; }
  /* Legend swatches (monochrome) */
  .cal-legend { display:flex; gap:14px; flex-wrap:wrap; }
  .cal-legend-item { display:inline-flex; align-items:center; gap:6px; font-size:0.68rem; font-weight:700; color:var(--text-muted); }
  .cal-legend-sw { width:14px; height:14px; border-radius:5px; flex-shrink:0; }
  .cal-legend-sw.lg-pickup  { background:#111; }
  .cal-legend-sw.lg-return  { background:#fff; border:1.5px solid #111; }
  .cal-legend-sw.lg-active  { background:var(--ice); border:1px solid var(--border-dark); }
  .cal-legend-sw.lg-pending { background:var(--freeze); border:1px dashed var(--border-dark); }
  /* Week view */
  .cal-week-grid { display:grid; grid-template-columns:50px repeat(7,1fr); }
  .cal-week-time { font-size:0.62rem; color:var(--text-faint); padding:3px 5px 3px 8px; text-align:right; border-right:1px solid var(--border); background:var(--freeze); }
  .cal-week-col { border-right:1px solid var(--border); min-height:40px; padding:6px 5px; }
  .cal-week-col:last-child { border-right:none; }
  .cal-week-hdr-row {
    display:grid; grid-template-columns:50px repeat(7,1fr);
    border-bottom:1px solid var(--border);
    background:var(--freeze);
  }
  .cal-week-hdr { padding:12px 4px; text-align:center; font-size:0.68rem; font-weight:700; color:var(--text-muted); }
  .cal-week-hdr.today-col { color:#111; }
  .cal-week-hdr .wk-day { font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em; }
  .cal-week-hdr .wk-num { font-size:1.1rem; font-weight:800; color:var(--text); display:block; line-height:1.2; margin-top:2px; }
  .cal-week-hdr.today-col .wk-num {
    background:#111; color:#fff; border-radius:9px;
    width:30px; height:30px; display:flex; align-items:center; justify-content:center;
    margin:2px auto 0; box-shadow:0 2px 8px rgba(0,0,0,0.2);
  }

  /* ── CRM DETAIL DRAWER ───────────────────────────────────────────── */
  #crm-drawer-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:1200;
    opacity:0; pointer-events:none;
    transition:opacity 0.3s cubic-bezier(0.22,1,0.36,1);
    backdrop-filter:blur(2px);
  }
  #crm-drawer-overlay.open { opacity:1; pointer-events:auto; }
  #crm-drawer {
    position:fixed; top:0; right:0; bottom:0; width:min(540px, 96vw);
    background:#fff; z-index:1201;
    transform:translateX(100%);
    transition:transform 0.35s cubic-bezier(0.22,1,0.36,1);
    display:flex; flex-direction:column; overflow:hidden;
    box-shadow:-8px 0 60px rgba(0,0,0,0.18);
  }
  #crm-drawer.open { transform:translateX(0); }
  .crm-drawer-header {
    padding:1.25rem 1.25rem 1rem; border-bottom:1px solid rgba(0,0,0,0.07);
    display:flex; align-items:flex-start; gap:12px; flex-shrink:0;
    background:linear-gradient(135deg,#f9fafb 0%,#fff 100%);
  }
  .crm-avatar-big {
    width:56px; height:56px; border-radius:16px; background:#111; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:700;
    flex-shrink:0; box-shadow:0 4px 16px rgba(0,0,0,0.2);
  }
  .crm-header-info { flex:1; min-width:0; }
  .crm-header-name { font-size:1.15rem; font-weight:800; color:var(--text); letter-spacing:-0.02em; margin-bottom:3px; }
  .crm-header-contact { font-size:0.8rem; color:var(--text-muted); margin-bottom:6px; }
  .crm-header-badges { display:flex; gap:5px; flex-wrap:wrap; }
  .crm-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:100px; font-size:0.65rem; font-weight:700; }
  .crm-badge-green  { background:rgba(22,163,74,0.1); color:#166534; border:1px solid rgba(22,163,74,0.2); }
  .crm-badge-yellow { background:rgba(180,83,9,0.1); color:#92400e; border:1px solid rgba(180,83,9,0.2); }
  .crm-badge-red    { background:rgba(220,38,38,0.1); color:#991b1b; border:1px solid rgba(220,38,38,0.2); }
  .crm-badge-gray   { background:rgba(0,0,0,0.06); color:var(--text-muted); border:1px solid rgba(0,0,0,0.1); }
  .crm-close-btn { width:32px; height:32px; border-radius:8px; border:1px solid rgba(0,0,0,0.1); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; transition:all 0.15s; }
  .crm-close-btn:hover { background:#111; color:#fff; }
  .crm-drawer-tabs { display:flex; border-bottom:1px solid rgba(0,0,0,0.07); flex-shrink:0; padding:0 1rem; background:#fff; overflow-x:auto; scrollbar-width:none; }
  .crm-drawer-tabs::-webkit-scrollbar { display:none; }
  .crm-drawer-tab { padding:11px 15px; font-size:0.78rem; font-weight:700; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; transition:color 0.15s, border-color 0.15s; margin-bottom:-1px; white-space:nowrap; flex-shrink:0; position:relative; }
  .crm-drawer-tab:hover { color:#111; }
  .crm-drawer-tab.active { color:#111; border-bottom-color:#111; }

  /* ── CRM: order / booking cards + status pills ───────────────────── */
  .crm-order-summary { display:flex; gap:8px; margin-bottom:1rem; }
  .crm-order-chip { flex:1; background:#f9fafb; border:1px solid rgba(0,0,0,0.06); border-radius:11px; padding:0.7rem 0.8rem; text-align:left; }
  .crm-order-chip .num { font-size:1.35rem; font-weight:800; letter-spacing:-0.03em; line-height:1; }
  .crm-order-chip .cap { font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted); margin-top:5px; }
  .crm-order { border:1px solid rgba(0,0,0,0.08); border-radius:13px; padding:0.9rem 1rem; margin-bottom:10px; transition:border-color 0.15s, box-shadow 0.15s, transform 0.15s; cursor:pointer; background:#fff; }
  .crm-order:hover { border-color:rgba(0,0,0,0.22); box-shadow:0 6px 22px rgba(0,0,0,0.06); transform:translateY(-1px); }
  .crm-order-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
  .crm-order-car { font-size:0.9rem; font-weight:800; color:var(--text); letter-spacing:-0.01em; }
  .crm-order-id { font-size:0.68rem; color:var(--text-faint); font-weight:700; }
  .crm-status-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:100px; font-size:0.66rem; font-weight:800; letter-spacing:0.01em; white-space:nowrap; }
  .crm-status-pill .pip { width:6px; height:6px; border-radius:50%; }
  .crm-order-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .crm-order-meta > div { min-width:0; }
  .crm-order-meta .ml { font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint); margin-bottom:2px; }
  .crm-order-meta .mv { font-size:0.78rem; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .crm-order-bar { height:5px; border-radius:100px; background:rgba(0,0,0,0.06); overflow:hidden; margin-top:10px; }
  .crm-order-bar > span { display:block; height:100%; border-radius:100px; background:var(--green); }
  .crm-id-meta-row { display:flex; gap:6px; flex-wrap:wrap; margin:-2px 0 14px; }
  .crm-id-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:8px; background:#f3f4f6; border:1px solid rgba(0,0,0,0.06); font-size:0.68rem; font-weight:700; color:var(--text-muted); }
  .crm-doc-note { font-size:0.7rem; color:var(--text-faint); margin:-2px 0 12px; display:flex; align-items:center; gap:5px; }
  .crm-drawer-body { flex:1; overflow-y:auto; padding:1.25rem; }
  .crm-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:1.25rem; }
  .crm-stat { background:#f9fafb; border:1px solid rgba(0,0,0,0.06); border-radius:10px; padding:0.75rem 0.85rem; }
  .crm-stat-label { font-size:0.63rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:3px; }
  .crm-stat-val { font-size:1.2rem; font-weight:800; color:var(--text); letter-spacing:-0.03em; }
  .crm-section-title { font-size:0.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.07em; margin:1.1rem 0 0.6rem; }
  /* Identity & Docs tab — force light/white styling inside the white CRM drawer */
  #crm-drawer .customer-info-field { background:#f9fafb; border:1px solid rgba(0,0,0,0.08); }
  #crm-drawer .customer-info-label { color:var(--text-muted); }
  #crm-drawer .customer-info-value { color:var(--text); }
  #crm-drawer .customer-id-image { background:#f9fafb; border:1px solid rgba(0,0,0,0.08); color:var(--text-faint); }
  .crm-booking-item { display:flex; align-items:flex-start; gap:10px; padding:0.65rem 0; border-bottom:1px solid rgba(0,0,0,0.05); }
  .crm-booking-item:last-child { border-bottom:none; }
  .crm-booking-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
  .crm-booking-info { flex:1; min-width:0; }
  .crm-booking-car { font-size:0.82rem; font-weight:700; color:var(--text); }
  .crm-booking-dates { font-size:0.72rem; color:var(--text-muted); margin-top:1px; }
  .crm-booking-amount { font-size:0.82rem; font-weight:700; color:var(--green); white-space:nowrap; }
  .crm-note-area { width:100%; padding:10px 12px; border:1px solid rgba(0,0,0,0.12); border-radius:10px; font-family:var(--font); font-size:0.85rem; color:var(--text); background:#fafafa; resize:vertical; min-height:90px; outline:none; transition:all 0.18s; }
  .crm-note-area:focus { border-color:rgba(0,0,0,0.3); background:#fff; box-shadow:0 0 0 3px rgba(0,0,0,0.06); }
  .crm-save-note-btn { margin-top:8px; padding:7px 18px; border:none; border-radius:8px; background:#111; color:#fff; font-size:0.79rem; font-weight:700; font-family:var(--font); cursor:pointer; transition:all 0.15s; }
  .crm-save-note-btn:hover { background:#374151; }

  /* ── INSPECTION / DAMAGE MODAL ───────────────────────────────────── */
  #inspection-modal .modal-card { max-width:700px; }
  .insp-header { display:flex; align-items:center; gap:10px; margin-bottom:1.25rem; }
  .insp-type-toggle { display:flex; background:rgba(0,0,0,0.04); border-radius:9px; padding:3px; gap:2px; border:1px solid rgba(0,0,0,0.07); }
  .insp-type-btn { padding:6px 14px; border-radius:7px; font-size:0.78rem; font-weight:700; border:none; cursor:pointer; font-family:var(--font); color:var(--text-muted); background:transparent; transition:all 0.15s; }
  .insp-type-btn.active { background:#fff; color:#111; box-shadow:0 1px 4px rgba(0,0,0,0.1); }
  .insp-vehicle-diagram { position:relative; width:100%; max-width:380px; margin:0 auto 1.25rem; }
  .insp-diagram-img { width:100%; height:auto; border-radius:10px; opacity:0.8; }
  .insp-checklist { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:1.25rem; }
  @media(max-width:500px) { .insp-checklist { grid-template-columns:1fr; } }
  .insp-check-item {
    display:flex; align-items:center; gap:8px; padding:9px 12px;
    border:1px solid rgba(0,0,0,0.08); border-radius:9px; background:#fafafa;
    cursor:pointer; transition:all 0.15s; user-select:none;
  }
  .insp-check-item:hover { border-color:rgba(0,0,0,0.2); background:#fff; }
  .insp-check-item.checked { border-color:rgba(22,163,74,0.3); background:rgba(22,163,74,0.06); }
  .insp-check-item.damaged { border-color:rgba(220,38,38,0.3); background:rgba(220,38,38,0.06); }
  .insp-check-box { width:18px; height:18px; border-radius:5px; border:1.5px solid rgba(0,0,0,0.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.15s; }
  .insp-check-item.checked .insp-check-box { background:#16a34a; border-color:#16a34a; color:#fff; }
  .insp-check-item.damaged .insp-check-box { background:#dc2626; border-color:#dc2626; color:#fff; }
  .insp-check-label { font-size:0.82rem; font-weight:600; color:var(--text); flex:1; min-width:0; }
  .insp-check-status { font-size:0.65rem; font-weight:700; margin-top:1px; }
  .insp-photo-grid { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1rem; }
  .insp-photo-thumb {
    width:72px; height:72px; border-radius:8px; object-fit:cover;
    border:1px solid rgba(0,0,0,0.1); cursor:pointer;
    transition:transform 0.15s; flex-shrink:0;
  }
  .insp-photo-thumb:hover { transform:scale(1.04); }
  .insp-photo-add {
    width:72px; height:72px; border-radius:8px; border:2px dashed rgba(0,0,0,0.2);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    color:var(--text-faint); font-size:1.4rem; transition:all 0.15s; flex-shrink:0;
    background:#fafafa;
  }
  .insp-photo-add:hover { border-color:#111; color:#111; background:#fff; }
  .insp-odometer-row { display:flex; align-items:center; gap:10px; margin-bottom:1rem; }
  .insp-odometer-input { flex:1; padding:9px 12px; border:1px solid rgba(0,0,0,0.12); border-radius:9px; font-family:var(--font); font-size:0.9rem; font-weight:700; color:var(--text); outline:none; transition:all 0.18s; }
  .insp-odometer-input:focus { border-color:rgba(0,0,0,0.3); box-shadow:0 0 0 3px rgba(0,0,0,0.06); }
  .insp-notes-area { width:100%; padding:9px 12px; border:1px solid rgba(0,0,0,0.12); border-radius:9px; font-family:var(--font); font-size:0.83rem; color:var(--text); background:#fafafa; resize:vertical; min-height:70px; outline:none; transition:all 0.18s; }
  .insp-notes-area:focus { border-color:rgba(0,0,0,0.3); background:#fff; box-shadow:0 0 0 3px rgba(0,0,0,0.06); }
  .insp-damage-score { display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; margin-bottom:1rem; }
  .insp-damage-score.score-ok  { background:rgba(22,163,74,0.08); border:1px solid rgba(22,163,74,0.2); color:#166534; }
  .insp-damage-score.score-warn { background:rgba(180,83,9,0.08); border:1px solid rgba(180,83,9,0.2); color:#92400e; }
  .insp-damage-score.score-bad  { background:rgba(220,38,38,0.08); border:1px solid rgba(220,38,38,0.2); color:#991b1b; }

  /* ── LATE RETURN MODAL ───────────────────────────────────────────── */
  #late-return-modal .modal-card { max-width:480px; }
  .late-ret-info { background:#f9fafb; border:1px solid rgba(0,0,0,0.07); border-radius:12px; padding:1rem 1.1rem; margin-bottom:1.25rem; }
  .late-ret-info-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid rgba(0,0,0,0.05); }
  .late-ret-info-row:last-child { border-bottom:none; }
  .late-ret-info-label { font-size:0.75rem; color:var(--text-muted); font-weight:600; }
  .late-ret-info-val { font-size:0.82rem; color:var(--text); font-weight:700; }
  .late-ret-options { display:flex; flex-direction:column; gap:8px; margin-bottom:1.25rem; }
  .late-ret-option {
    display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
    border:1.5px solid rgba(0,0,0,0.1); border-radius:10px; cursor:pointer;
    transition:all 0.15s; background:#fff;
  }
  .late-ret-option:hover { border-color:rgba(0,0,0,0.25); background:#fafafa; }
  .late-ret-option.selected { border-color:#111; background:rgba(0,0,0,0.03); }
  .late-ret-option-radio { width:18px; height:18px; border-radius:50%; border:2px solid rgba(0,0,0,0.2); flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
  .late-ret-option.selected .late-ret-option-radio { border-color:#111; background:#111; }
  .late-ret-option.selected .late-ret-option-radio::after { content:''; width:6px; height:6px; border-radius:50%; background:#fff; }
  .late-ret-option-info { flex:1; }
  .late-ret-option-title { font-size:0.84rem; font-weight:700; color:var(--text); margin-bottom:2px; }
  .late-ret-option-sub { font-size:0.73rem; color:var(--text-muted); }
  .late-ret-calc { background:linear-gradient(135deg,#f0fdf4 0%,#fff 100%); border:1px solid rgba(22,163,74,0.2); border-radius:10px; padding:1rem 1.1rem; margin-bottom:1.25rem; }
  .late-ret-calc-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; }
  .late-ret-calc-label { font-size:0.76rem; color:var(--text-muted); }
  .late-ret-calc-val { font-size:0.82rem; font-weight:700; color:var(--text); }
  .late-ret-calc-total { font-size:1rem; font-weight:800; color:#16a34a; }
  .late-ret-extra-days { display:flex; align-items:center; gap:8px; margin-bottom:1rem; }
  .late-ret-days-input { width:80px; padding:8px 12px; border:1px solid rgba(0,0,0,0.14); border-radius:9px; text-align:center; font-size:1rem; font-weight:800; font-family:var(--font); color:var(--text); outline:none; transition:all 0.18s; }
  .late-ret-days-input:focus { border-color:rgba(0,0,0,0.3); box-shadow:0 0 0 3px rgba(0,0,0,0.07); }

  /* ── API ERROR BOUNDARY ──────────────────────────────────────────── */
  #api-error-boundary {
    position:fixed; inset:0; z-index:9100;
    display:flex; align-items:center; justify-content:center;
    background:rgba(249,250,251,0.95); backdrop-filter:blur(8px);
    opacity:0; pointer-events:none;
    transition:opacity 0.3s ease;
  }
  #api-error-boundary.visible { opacity:1; pointer-events:auto; }
  .aeb-card {
    background:#fff; border:1px solid rgba(0,0,0,0.1); border-radius:20px;
    padding:2.5rem 2rem; max-width:400px; width:90%;
    box-shadow:0 24px 80px rgba(0,0,0,0.12);
    text-align:center;
    animation:springPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  .aeb-icon { font-size:2.5rem; margin-bottom:1rem; display:block; }
  .aeb-title { font-size:1.25rem; font-weight:800; color:var(--text); letter-spacing:-0.03em; margin-bottom:0.5rem; }
  .aeb-msg { font-size:0.88rem; color:var(--text-muted); line-height:1.6; margin-bottom:1.5rem; }
  .aeb-retry-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 28px; border:none; border-radius:100px;
    background:#111; color:#fff; font-size:0.88rem; font-weight:700;
    font-family:var(--font); cursor:pointer;
    transition:all 0.2s; box-shadow:0 4px 16px rgba(0,0,0,0.2);
  }
  .aeb-retry-btn:hover { background:#374151; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.25); }
  @keyframes aeb-spin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
  .aeb-retry-btn.spinning .aeb-retry-icon { animation:aeb-spin 0.7s linear infinite; }
  .aeb-dots { display:flex; justify-content:center; gap:6px; margin-top:1.25rem; }
  .aeb-dot { width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,0.15); }
  .aeb-dot.active { background:#111; }
  .aeb-countdown { font-size:0.75rem; color:var(--text-faint); margin-top:0.75rem; }
  .aeb-status-row { display:flex; align-items:center; gap:6px; justify-content:center; margin-bottom:1.5rem; }
  .aeb-status-dot { width:8px; height:8px; border-radius:50%; background:#dc2626; animation:aeb-pulse 1.4s ease-in-out infinite; }
  @keyframes aeb-pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

  /* ── PWA INSTALL PROMPT ──────────────────────────────────────────── */
  #pwa-install-bar {
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(120px);
    z-index:8000; background:#111; color:#fff;
    border-radius:14px; padding:12px 18px;
    display:flex; align-items:center; gap:12px;
    box-shadow:0 8px 40px rgba(0,0,0,0.28);
    transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
    white-space:nowrap; max-width:90vw;
  }
  #pwa-install-bar.visible { transform:translateX(-50%) translateY(0); }
  .pwa-bar-icon { font-size:1.2rem; }
  .pwa-bar-text { font-size:0.82rem; font-weight:600; }
  .pwa-install-btn { padding:6px 14px; border-radius:100px; background:#fff; color:#111; font-size:0.78rem; font-weight:800; font-family:var(--font); border:none; cursor:pointer; transition:all 0.15s; }
  .pwa-install-btn:hover { background:#e5e7eb; }
  .pwa-dismiss-btn { width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.15); border:none; color:#fff; font-size:0.85rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
  .pwa-dismiss-btn:hover { background:rgba(255,255,255,0.25); }

  /* ── EXPORT BUTTON in bookings & finance ─────────────────────────── */
  .export-menu-wrap { position:relative; display:inline-block; }
  .export-menu {
    position:absolute; top:calc(100% + 6px); right:0;
    background:#fff; border:1px solid rgba(0,0,0,0.1); border-radius:12px;
    box-shadow:0 8px 32px rgba(0,0,0,0.14);
    min-width:170px; z-index:200; overflow:hidden;
    animation:scaleIn 0.18s cubic-bezier(0.34,1.56,0.64,1) both;
    transform-origin:top right;
  }
  .export-menu-item {
    display:flex; align-items:center; gap:9px; padding:9px 14px;
    font-size:0.82rem; font-weight:600; color:var(--text); cursor:pointer;
    transition:background 0.12s; border:none; background:none; width:100%; text-align:left;
    font-family:var(--font);
  }
  .export-menu-item:hover { background:rgba(0,0,0,0.04); }
  .export-menu-sep { height:1px; background:rgba(0,0,0,0.06); margin:3px 0; }

  /* ── Finance (Payments) page ─────────────────────────────── */
  #page-finance { padding-bottom:3rem; }
  /* Hero stat row */
  .fin-hero-row {
    display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
    margin-bottom:1.5rem;
  }
  @media(max-width:900px) { .fin-hero-row { grid-template-columns:repeat(2,1fr); } }
  .fin-hero-card {
    background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:16px;
    padding:1.2rem 1.4rem; position:relative; overflow:hidden;
    box-shadow:0 2px 20px rgba(0,0,0,0.04); transition:transform .2s, box-shadow .2s;
  }
  .fin-hero-card:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,0.08); }
  .fin-hero-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    border-radius:16px 16px 0 0;
  }
  .fin-hero-card.fhc-collected::before { background:linear-gradient(90deg,#16a34a,#4ade80); }
  .fin-hero-card.fhc-expenses::before  { background:linear-gradient(90deg,#dc2626,#f87171); }
  .fin-hero-card.fhc-profit::before    { background:linear-gradient(90deg,#111,#374151); }
  .fin-hero-card.fhc-outstanding::before { background:linear-gradient(90deg,#b45309,#fbbf24); }
  .fin-hero-icon { font-size:1.3rem; margin-bottom:0.5rem; }
  .fin-hero-label { font-size:0.68rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.35rem; }
  .fin-hero-val { font-size:1.8rem; font-weight:800; color:var(--text); letter-spacing:-0.04em; line-height:1; }
  .fin-hero-val.green { color:var(--green); }
  .fin-hero-val.red   { color:var(--red); }
  .fin-hero-val.yellow { color:var(--yellow); }
  .fin-hero-sub { font-size:0.72rem; color:var(--text-faint); margin-top:5px; font-weight:500; }
  /* Period + method filter bar */
  .fin-filter-bar {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:14px;
    padding:10px 16px; margin-bottom:1.25rem; box-shadow:0 1px 6px rgba(0,0,0,0.04);
  }
  .fin-filter-sep { width:1px; height:20px; background:rgba(0,0,0,0.08); flex-shrink:0; }
  /* Activity log: two filter rows (Activity + Period) grouped into ONE card so
     they read as a single intentional control instead of two stacked bars. The
     inner .fin-filter-bar cards are flattened into borderless rows here. */
  .audit-filters {
    background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:14px;
    box-shadow:0 1px 6px rgba(0,0,0,0.04); overflow:hidden;
  }
  .audit-filters .fin-filter-bar {
    background:transparent; border:0; border-radius:0; box-shadow:none;
    margin:0; padding:11px 16px;
  }
  .audit-filters .fin-filter-bar + .fin-filter-bar { border-top:1px solid rgba(0,0,0,0.06); }
  /* Finance chart cards */
  .fin-charts-row { display:grid; grid-template-columns:1.5fr 1fr; gap:1.25rem; margin-bottom:1.5rem; }
  @media(max-width:900px) { .fin-charts-row { grid-template-columns:1fr; } }
  .fin-chart-card {
    background:#fff; border:1px solid rgba(0,0,0,0.08);
    border-radius:18px; overflow:hidden; box-shadow:0 3px 28px rgba(0,0,0,0.05);
  }
  .fin-chart-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:0.85rem 1.1rem; border-bottom:1px solid rgba(0,0,0,0.06);
    font-weight:700; font-size:0.84rem; color:var(--text);
  }
  /* Payment method breakdown */
  .fin-method-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:1rem; }
  .fin-method-chip {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,0.07);
    background:#fafafa;
  }
  .fin-method-name { font-size:0.78rem; font-weight:700; color:var(--text); }
  .fin-method-val  { font-size:0.78rem; font-weight:800; color:var(--text); }
  .fin-method-pct  { font-size:0.64rem; font-weight:600; color:var(--text-muted); margin-top:1px; }

  /* ═══════════════════════════════════════════════════════════════════
     PAYMENTS + ANALYTICS — EDITORIAL B/W REDESIGN
     ═══════════════════════════════════════════════════════════════════ */

  /* Page hero — used by Payments & Analytics */
  .pay-hero, .an-hero, .ph-hero {
    position: relative;
    padding: 0.25rem 0 1.5rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    animation: fadeInUp 0.4s var(--ease-out) both;
  }
  .pay-hero-eyebrow, .an-hero-eyebrow, .ph-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 0.66rem; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.18em;
    margin-bottom: 0.9rem;
    font-variant-numeric: tabular-nums;
  }
  .pay-hero-pulse, .an-hero-pulse, .ph-hero-pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.16);
    animation: stPulse 2.4s ease-in-out infinite;
  }
  .pay-hero-bar, .an-hero-bar, .ph-hero-bar {
    width: 18px; height: 1px; background: rgba(0,0,0,0.18);
    display: inline-block;
  }
  .pay-hero-row, .ph-hero-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
  }
  .pay-hero-title, .an-hero-title, .ph-hero-title {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
    color: var(--text);
    font-weight: 800;
    font-family: var(--font);
    margin: 0 0 0.85rem;
  }
  .pay-hero-dot, .an-hero-dot, .ph-hero-dot {
    color: var(--text);
    margin-left: -0.05em;
  }
  .pay-hero-deck, .an-hero-deck, .ph-hero-deck {
    max-width: 640px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-muted);
    font-weight: 400;
  }
  .pay-hero-deck a, .an-hero-deck a, .ph-hero-deck a {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    transition: border-color 0.18s;
  }
  .pay-hero-deck a:hover, .an-hero-deck a:hover, .ph-hero-deck a:hover { border-color: var(--text); }

  /* Header action buttons */
  .pay-hero-actions, .ph-hero-actions {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  }
  .pay-btn, .ph-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 18px;
    border-radius: 100px;
    font-size: 0.82rem; font-weight: 700;
    font-family: var(--font);
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
    border: 1.5px solid transparent;
    line-height: 1;
  }
  .pay-btn-solid, .ph-btn-solid {
    background: #111; color: #fff;
    border-color: #111;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  }
  .pay-btn-solid:hover, .ph-btn-solid:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.25);
    background: #000;
  }
  .pay-btn-ghost, .ph-btn-ghost {
    background: #fff; color: var(--text);
    border-color: rgba(0,0,0,0.14);
  }
  .pay-btn-ghost:hover, .ph-btn-ghost:hover {
    background: #fafafa;
    border-color: rgba(0,0,0,0.32);
    transform: translateY(-1px);
  }
  .pay-btn-sm, .ph-btn-sm { padding: 7px 14px; font-size: 0.76rem; }
  /* Red variant for destructive actions in editorial header */
  .ph-btn-red {
    background: #fff; color: #dc2626;
    border-color: rgba(220,38,38,0.30);
  }
  .ph-btn-red:hover {
    background: #dc2626; color: #fff; border-color: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(220,38,38,0.32);
  }

  /* KPI strip */
  .pay-kpi-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem;
    margin-bottom: 1.5rem;
  }
  @media(max-width:1000px) { .pay-kpi-row { grid-template-columns: repeat(2, 1fr); } }
  @media(max-width:560px)  { .pay-kpi-row { grid-template-columns: 1fr; } }
  .pay-kpi {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    padding: 1.1rem 1.3rem 1rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s var(--ease-spring), box-shadow 0.22s;
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(0,0,0,0.03);
  }
  .pay-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 18px 38px -16px rgba(0,0,0,0.18);
    border-color: rgba(0,0,0,0.18);
  }
  .pay-kpi-primary {
    background: #111;
    color: #fff;
    border-color: #111;
  }
  .pay-kpi-primary .pay-kpi-tag { color: rgba(255,255,255,0.5); }
  .pay-kpi-primary .pay-kpi-val { color: #fff; }
  .pay-kpi-primary .pay-kpi-foot { color: rgba(255,255,255,0.55); }
  .pay-kpi-primary .pay-kpi-arrow { color: #fff; }
  .pay-kpi-primary .pay-kpi-rule { background: rgba(255,255,255,0.25); }

  .pay-kpi-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.85rem;
  }
  .pay-kpi-tag {
    font-size: 0.62rem; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.14em;
  }
  .pay-kpi-arrow { color: var(--green); flex-shrink: 0; }
  .pay-kpi-arrow.neg { color: var(--red); }
  .pay-kpi-rule { display: inline-block; width: 18px; height: 1px; background: rgba(0,0,0,0.2); }
  .pay-kpi-pulse-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.18);
    animation: stPulse 2.4s ease-in-out infinite;
  }
  .pay-kpi-val {
    font-size: 1.9rem; font-weight: 800;
    color: var(--text);
    letter-spacing: -0.05em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .pay-kpi-foot {
    margin-top: 0.55rem;
    font-size: 0.7rem; font-weight: 500;
    color: var(--text-faint);
  }
  .pay-kpi-spark {
    position: absolute; bottom: 0; left: 0; right: 0; height: 28px;
    background:
      linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.025) 100%);
    pointer-events: none;
    opacity: 0.7;
  }
  .pay-kpi-primary .pay-kpi-spark {
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.04) 100%);
  }

  /* Filter bar */
  .pay-filter-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    padding: 10px 16px;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(0,0,0,0.03);
  }
  .pay-filter-tag {
    font-size: 0.62rem; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.18em;
    white-space: nowrap;
  }
  .pay-filter-pills { display: flex; gap: 4px; flex-wrap: wrap; }
  .pay-filter-sep { width: 1px; height: 18px; background: rgba(0,0,0,0.10); }

  /* ══════ WHATSAPP AI (black & white) ══════ */
  .wa-tabs { position:relative; display:inline-flex; gap:4px; margin-bottom:1.5rem; padding:5px; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,0.04); }
  .wa-tab { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border:none; border-radius:10px; cursor:pointer; font-family:var(--font); font-size:0.82rem; font-weight:700; letter-spacing:-0.01em; color:var(--text-muted); background:transparent; transition:color 0.25s var(--ease-out), background 0.25s var(--ease-out); white-space:nowrap; }
  .wa-tab:hover { color:var(--text); }
  .wa-tab.is-active { background:#111; color:#fff; box-shadow:0 5px 16px rgba(0,0,0,0.2); }
  .wa-card { background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
  .wa-card-head { display:flex; align-items:center; gap:11px; padding:16px 20px; border-bottom:1px solid var(--border); }
  .wa-card-ico { width:38px; height:38px; border-radius:11px; background:#111; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }
  .wa-card-title { font-size:0.95rem; font-weight:800; color:var(--text); letter-spacing:-0.01em; }
  .wa-card-sub { font-size:0.74rem; color:var(--text-muted); margin-top:1px; }
  .wa-card-body { padding:18px 20px; }
  .wa-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; background:var(--freeze); border:1px solid var(--border); border-radius:13px; }
  .wa-row-title { font-weight:700; font-size:0.86rem; color:var(--text); }
  .wa-row-sub { font-size:0.75rem; color:var(--text-muted); margin-top:2px; }
  .wa-label { display:block; font-size:0.7rem; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:7px; }
  .wa-input, .wa-textarea { width:100%; padding:11px 14px; border:1.5px solid var(--border-dark); border-radius:12px; background:#fff; color:var(--text); font-size:0.88rem; font-family:var(--font); outline:none; transition:border-color 0.18s, box-shadow 0.18s; box-sizing:border-box; }
  .wa-input:focus, .wa-textarea:focus { border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,0.07); }
  .wa-textarea { resize:vertical; line-height:1.65; min-height:120px; }
  /* iOS-style toggle, black when on */
  .wa-switch { position:relative; display:inline-block; width:46px; height:26px; cursor:pointer; flex-shrink:0; }
  .wa-switch input { opacity:0; width:0; height:0; }
  .wa-switch-track { position:absolute; inset:0; border-radius:100px; background:var(--ice); border:1.5px solid var(--border-dark); transition:background 0.24s var(--ease-out), border-color 0.24s; }
  .wa-switch-thumb { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.28); transition:transform 0.26s var(--ease-spring); }
  .wa-status-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:100px; font-size:0.72rem; font-weight:800; }
  .wa-callout { display:flex; gap:10px; padding:11px 14px; background:var(--freeze); border:1px solid var(--border); border-radius:12px; font-size:0.78rem; color:var(--text-muted); line-height:1.55; }
  .wa-btn-dark { display:inline-flex; align-items:center; gap:8px; padding:11px 24px; border:none; border-radius:12px; background:#111; color:#fff; font-family:var(--font); font-size:0.86rem; font-weight:700; cursor:pointer; transition:transform 0.15s var(--ease-out), box-shadow 0.15s; }
  .wa-btn-dark:hover { transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,0.22); }
  .wa-btn-ghost { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border:1.5px solid var(--border-dark); border-radius:12px; background:#fff; color:var(--text); font-family:var(--font); font-size:0.86rem; font-weight:700; cursor:pointer; transition:all 0.15s var(--ease-out); }
  .wa-btn-ghost:hover { background:#111; color:#fff; border-color:#111; }
  /* Chat window */
  .wa-chat { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
  .wa-chat-head { background:#111; padding:13px 18px; display:flex; align-items:center; gap:12px; flex-shrink:0; }
  .wa-chat-avatar { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
  .wa-chat-name { font-weight:800; color:#fff; font-size:0.9rem; }
  .wa-chat-status { font-size:0.7rem; color:rgba(255,255,255,0.55); display:flex; align-items:center; gap:5px; }
  .wa-chat-status::before { content:''; width:6px; height:6px; border-radius:50%; background:#22c55e; display:inline-block; }
  .wa-chat-newbtn { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.16); color:#fff; padding:6px 13px; border-radius:9px; cursor:pointer; font-size:0.74rem; font-weight:700; transition:background 0.15s; }
  .wa-chat-newbtn:hover { background:rgba(255,255,255,0.22); }
  .wa-chat-msgs { flex:1; overflow-y:auto; padding:18px; background:#f3f4f6; display:flex; flex-direction:column; gap:9px; scrollbar-width:thin; }
  .wa-chat-input-bar { background:#fff; padding:11px 13px; display:flex; gap:9px; align-items:flex-end; flex-shrink:0; border-top:1px solid var(--border); }
  .wa-chat-input { flex:1; padding:10px 16px; border-radius:22px; border:1.5px solid var(--border-dark); background:#fff; font-size:0.88rem; resize:none; outline:none; font-family:var(--font); line-height:1.4; max-height:100px; overflow-y:auto; transition:border-color 0.15s, box-shadow 0.15s; }
  .wa-chat-input:focus { border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,0.06); }
  .wa-send-btn { width:42px; height:42px; border-radius:50%; background:#111; border:none; cursor:pointer; color:#fff; font-size:1.05rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform 0.15s, opacity 0.15s; }
  .wa-send-btn:hover { transform:scale(1.06); }
  .wa-info-list { font-size:0.8rem; color:var(--text-muted); display:flex; flex-direction:column; gap:9px; }
  .wa-info-list .wa-info-row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .wa-info-row .wa-info-val { font-weight:700; color:var(--text); }
  .wa-quick-btn { text-align:left; padding:9px 13px; border:1px solid var(--border-dark); border-radius:11px; background:#fff; cursor:pointer; font-size:0.78rem; font-weight:600; color:var(--text); transition:all 0.15s var(--ease-out); }
  .wa-quick-btn:hover { background:#111; color:#fff; border-color:#111; transform:translateX(2px); }
  .wa-conv-item { padding:13px 15px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.12s; }
  .wa-conv-item:hover, .wa-conv-item.sel { background:var(--freeze); }

  /* ══════ WORK ORDERS — inline status dropdown ══════ */
  .wo-status-sel { appearance:none; -webkit-appearance:none; -moz-appearance:none; padding:5px 27px 5px 12px; border:1.5px solid var(--border-dark); border-radius:100px; font-size:0.72rem; font-weight:800; font-family:var(--font); color:var(--text); background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 9px center; cursor:pointer; outline:none; transition:border-color 0.15s, box-shadow 0.15s; text-transform:capitalize; }
  .wo-status-sel:hover { border-color:#111; }
  .wo-status-sel:focus { border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,0.07); }
  .wo-status-sel[data-s="completed"]   { color:#166534; border-color:rgba(22,163,74,0.4);  background-color:var(--green-bg); }
  .wo-status-sel[data-s="in_progress"] { color:#92400e; border-color:rgba(180,83,9,0.35);  background-color:var(--yellow-bg); }
  .wo-status-sel[data-s="cancelled"]   { color:#991b1b; border-color:rgba(220,38,38,0.3);  background-color:var(--red-bg); }
  .wo-thumb { width:34px; height:34px; border-radius:9px; background:var(--freeze); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:0.95rem; overflow:hidden; flex-shrink:0; }
  .wo-thumb img { width:100%; height:100%; object-fit:cover; }

  /* Main grids (Payments + Analytics) */
  .pay-grid-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.1rem;
    margin-bottom: 1.5rem;
  }
  @media(max-width:1000px) { .pay-grid-main { grid-template-columns: 1fr; } }

  .an-grid-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.1rem;
    margin-bottom: 1.1rem;
  }
  @media(max-width:1000px) { .an-grid-main { grid-template-columns: 1fr; } }
  .an-grid-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
    margin-bottom: 1.1rem;
  }
  @media(max-width:900px) { .an-grid-bottom { grid-template-columns: 1fr; } }

  /* Reusable editorial panel */
  .pay-panel {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(0,0,0,0.03);
  }
  .pay-panel-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: 1rem 1.25rem 0.85rem;
    border-bottom: 1px dashed rgba(0,0,0,0.08);
  }
  .pay-panel-title-wrap { min-width: 0; }
  .pay-panel-eyebrow {
    font-size: 0.58rem; font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase; letter-spacing: 0.18em;
    margin-bottom: 2px;
  }
  .pay-panel-title {
    font-size: 1.05rem; font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  .pay-panel-sub {
    margin-top: 3px;
    font-size: 0.75rem;
    color: var(--text-muted);
  }
  .pay-panel-body { padding: 1rem 1.25rem 1.1rem; }
  .pay-panel-chart .pay-panel-body { padding: 0.85rem 1.25rem 1rem; }

  /* Legend */
  .pay-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  .pay-legend-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.7rem; font-weight: 600;
    color: var(--text-muted);
  }
  .pay-legend-dot { width: 9px; height: 2px; border-radius: 2px; display: inline-block; }
  .pay-legend-dot.in  { background: #111; }
  .pay-legend-dot.out { background: #9ca3af; }
  .pay-legend-dot.net { background: #16a34a; }

  /* Payment methods list */
  .pay-methods {
    display: flex; flex-direction: column; gap: 14px;
    padding: 1.1rem 1.25rem 1.25rem;
  }
  .pay-method-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr auto;
    gap: 14px;
    align-items: center;
  }
  .pay-method-info {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
  }
  .pay-method-name {
    font-size: 0.82rem; font-weight: 700;
    color: var(--text); letter-spacing: -0.01em;
  }
  .pay-method-pct {
    font-size: 0.66rem; font-weight: 600;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
  }
  .pay-method-bar {
    height: 6px;
    background: rgba(0,0,0,0.05);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
  }
  .pay-method-bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, #111 0%, #4b5563 100%);
    border-radius: 100px;
    transition: width 0.8s cubic-bezier(0.34,1,0.64,1);
  }
  .pay-method-val {
    font-size: 0.85rem; font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }

  /* Ledger tabs (Transactions / Traffic Fines) */
  .pay-ledger {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(0,0,0,0.03);
  }
  .pay-ledger-tabs {
    display: flex; gap: 0;
    padding: 8px 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: linear-gradient(to bottom, #fafafa, #fff);
  }
  .pay-ledger-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 0.84rem; font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
    margin-bottom: -1px;
    position: relative;
  }
  .pay-ledger-tab:hover { color: var(--text); }
  .pay-ledger-tab.is-active {
    color: var(--text);
    border-bottom-color: var(--text);
    font-weight: 700;
  }
  .pay-ledger-tab-num {
    font-size: 0.62rem;
    font-weight: 600;
    opacity: 0.5;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
  }
  .pay-ledger-tab.is-active .pay-ledger-tab-num { opacity: 0.85; }
  .pay-ledger-panel { animation: fadeInUp 0.25s var(--ease-out) both; }
  .pay-ledger-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    background: rgba(249,250,251,0.5);
  }
  .pay-type-pills { display: flex; gap: 5px; flex-wrap: wrap; }
  .pay-pill {
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid rgba(0,0,0,0.10);
    background: #fff;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 0.74rem; font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: all 0.18s var(--ease-out);
  }
  .pay-pill:hover { color: var(--text); border-color: rgba(0,0,0,0.32); }
  .pay-pill.active {
    background: #111; color: #fff;
    border-color: #111;
    box-shadow: 0 3px 10px rgba(0,0,0,0.16);
  }
  .fine-status-pills .pay-pill { display:inline-flex; align-items:center; gap:6px; }
  .fine-status-pills .fs-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 2px rgba(0,0,0,0.04); }
  .fine-status-pills .pay-pill.active .fs-dot { box-shadow:0 0 0 2px rgba(255,255,255,0.2); }
  /* Modern status pill used inside the fines table */
  .fine-pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; border-radius:100px; font-size:0.68rem; font-weight:800; letter-spacing:0.01em; white-space:nowrap; border:1px solid transparent; }
  .fine-pill .pip { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
  .fine-pill.fp-received { background:rgba(180,83,9,0.10);  color:#92400e; border-color:rgba(180,83,9,0.18); }
  .fine-pill.fp-charged  { background:rgba(29,78,216,0.10); color:#1d4ed8; border-color:rgba(29,78,216,0.18); }
  .fine-pill.fp-paid     { background:rgba(22,163,74,0.10); color:#15803d; border-color:rgba(22,163,74,0.18); }
  .fine-pill.fp-disputed { background:rgba(220,38,38,0.10); color:#b91c1c; border-color:rgba(220,38,38,0.18); }
  /* Segmented status control inside the Log Fine modal */
  .fine-status-seg { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
  .fss-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 8px; border:1px solid rgba(0,0,0,0.12); border-radius:10px; background:#fff; color:var(--text-muted); font-family:var(--font); font-size:0.76rem; font-weight:700; cursor:pointer; transition:all 0.16s var(--ease-out,ease); }
  .fss-btn:hover { border-color:rgba(0,0,0,0.3); color:var(--text); }
  .fss-btn.active { background:#111; color:#fff; border-color:#111; box-shadow:0 3px 12px rgba(0,0,0,0.18); }
  .fss-pip { width:7px; height:7px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 2px rgba(0,0,0,0.05); }
  .fss-btn.active .fss-pip { box-shadow:0 0 0 2px rgba(255,255,255,0.25); }
  @media(max-width:480px){ .fine-status-seg { grid-template-columns:repeat(2,1fr); } }
  .pay-search {
    padding: 8px 14px;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 100px;
    background: #fff;
    font-family: var(--font);
    font-size: 0.8rem; font-weight: 500;
    color: var(--text);
    outline: none;
    width: 220px;
    transition: all 0.18s;
  }
  .pay-search:focus {
    border-color: var(--text);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
  }
  .pay-select {
    padding: 8px 32px 8px 14px;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 100px;
    background: #fff
      url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23111' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat right 14px center;
    font-family: var(--font);
    font-size: 0.8rem; font-weight: 600;
    color: var(--text);
    outline: none;
    appearance: none; -webkit-appearance: none;
    cursor: pointer;
    transition: all 0.18s;
  }
  .pay-select:focus {
    border-color: var(--text);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
  }

  #page-analytics .an-funnel-pct { font-variant-numeric: tabular-nums; }
  /* ── Clickable stat cards ────────────────────────────────── */
  .stat-card.clickable { cursor:pointer; }
  .stat-card.clickable::after {
    content:'→'; position:absolute; bottom:0.85rem; right:1rem;
    font-size:0.72rem; color:var(--text-faint); opacity:0;
    transition:opacity 0.18s, transform 0.18s;
  }
  .stat-card.clickable:hover::after { opacity:1; transform:translateX(3px); }
  /* TABLE */
  .table-container {
    background: #ffffff; border: 1px solid rgba(0,0,0,0.07);
    border-radius: 16px; overflow: visible; position: relative;
    box-shadow: 0 2px 24px rgba(0,0,0,0.04);
  }
  .table-toolbar { padding: 12px 1.25rem; border-bottom: 1px solid rgba(0,0,0,0.06); display: flex; align-items: center; gap: 10px; background: rgba(249,250,251,0.4); overflow: visible; border-radius: 16px 16px 0 0; }
  .search-input { padding: 7px 12px; border: 1px solid rgba(0,0,0,0.10); border-radius: 8px; font-family:var(--font); font-size: 0.82rem; font-weight:600; letter-spacing:0; outline: none; width: 210px; background: rgba(255,255,255,0.8); transition: all 0.2s; }
  .search-input::placeholder { color:var(--text-faint); font-family:var(--font); font-weight:600; opacity:1; }
  .search-input:focus { border-color: var(--accent-warm); background: white; box-shadow: 0 0 0 3px rgba(0,0,0,0.07); }
  .filter-select { padding: 7px 34px 7px 11px; border: 1px solid rgba(0,0,0,0.10); border-radius: 8px; font-family:var(--font); font-size: 0.82rem; font-weight:600; letter-spacing:0; outline: none; background: rgba(255,255,255,0.8); transition: all 0.18s; }
  .filter-select:focus { border-color: var(--accent-warm); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); outline: none; }
  table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  th {
    padding: 11px 1rem; text-align: left; font-size: 0.68rem; font-weight: 700;
    color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase;
    border-bottom: 1px solid rgba(0,0,0,0.06); background: rgba(249,250,251,0.5);
    white-space: nowrap; overflow: hidden;
  }
  td { padding: 12px 1rem; border-bottom: 1px solid rgba(0,0,0,0.04); font-size: 0.85rem; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
  #page-cars table th:nth-child(1) { width: 23%; }
  #page-cars table th:nth-child(2) { width: 11%; }
  #page-cars table th:nth-child(3) { width: 9%; }
  #page-cars table th:nth-child(4) { width: 9%; }
  #page-cars table th:nth-child(5) { width: 9%; }
  #page-cars table th:nth-child(6) { width: 9%; }
  #page-cars table th:nth-child(7) { width: 17%; }
  #page-cars table th:nth-child(8) { width: 13%; }
  #page-maintenance table th:nth-child(1) { width: 24%; }
  #page-maintenance table th:nth-child(2) { width: 10%; }
  #page-maintenance table th:nth-child(3) { width: 12%; }
  #page-maintenance table th:nth-child(4) { width: 12%; }
  #page-maintenance table th:nth-child(5) { width: 12%; }
  #page-maintenance table th:nth-child(6) { width: 16%; }
  #page-maintenance table th:nth-child(7) { width: 14%; }
  #page-bookings table th:nth-child(1) { width: 20%; }
  #page-bookings table th:nth-child(2) { width: 13%; }
  #page-bookings table th:nth-child(3) { width: 20%; }
  #page-bookings table th:nth-child(4) { width: 15%; }
  #page-bookings table th:nth-child(5) { width: 7%; }
  #page-bookings table th:nth-child(6) { width: 10%; }
  #page-bookings table th:nth-child(7) { width: 15%; }
  th.sortable { cursor: pointer; user-select: none; }
  th.sortable:hover { color: var(--accent-warm); }
  .sort-icon { font-size: 0.65rem; margin-left: 4px; opacity: 0.3; }
  th.sort-asc .sort-icon, th.sort-desc .sort-icon { opacity: 1; color: var(--accent-warm); }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: rgba(0,0,0,0.03); transition: background 0.15s ease; }
  tbody tr { transition: opacity 0.18s ease; }
  tbody tr:hover { opacity: 1; }
  .page.active.page-enter tbody tr { animation: fadeInUp 0.22s var(--ease-out) both; }
  .page.active.page-enter tbody tr:nth-child(1)  { animation-delay: 0.03s; }
  .page.active.page-enter tbody tr:nth-child(2)  { animation-delay: 0.06s; }
  .page.active.page-enter tbody tr:nth-child(3)  { animation-delay: 0.09s; }
  .page.active.page-enter tbody tr:nth-child(4)  { animation-delay: 0.12s; }
  .page.active.page-enter tbody tr:nth-child(5)  { animation-delay: 0.15s; }
  .page.active.page-enter tbody tr:nth-child(6)  { animation-delay: 0.18s; }
  .page.active.page-enter tbody tr:nth-child(7)  { animation-delay: 0.20s; }
  .page.active.page-enter tbody tr:nth-child(8)  { animation-delay: 0.22s; }
  #today-schedule-body tr, #upcoming-week-body tr { cursor: pointer; }
  #today-schedule-body tr:not(:last-child) td,
  #upcoming-week-body tr:not(:last-child) td,
  #staff-store-body tr:not(:last-child) td,
  #staff-location-body tr:not(:last-child) td,
  #cars-table-body tr:not(:last-child) td,
  #bookings-table-body tr:not(:last-child) td,
  #car-profit-body tr:not(:last-child) td,
  #expenses-body tr:not(:last-child) td,
  #payments-body tr:not(:last-child) td {
    border-bottom-color: rgba(0,0,0,0.08);
  }
  #staff-store-table, #staff-location-table { border-collapse: separate; border-spacing: 0; }
  @keyframes row-flash-cell {
    0%, 100% {
      background-color: transparent;
      box-shadow: var(--row-flash-shadow-clear);
    }
    50% {
      background-color: rgba(0,0,0,0.06);
      box-shadow: var(--row-flash-shadow);
    }
  }
  #staff-store-body tr.row-flash,
  #staff-location-body tr.row-flash,
  #cars-table-body tr.row-flash,
  #bookings-table-body tr.row-flash,
  #maintenance-body tr.row-flash {
    position: relative;
    z-index: 2;
  }
  #staff-store-body tr.row-flash td,
  #staff-location-body tr.row-flash td,
  #cars-table-body tr.row-flash td,
  #bookings-table-body tr.row-flash td,
  #maintenance-body tr.row-flash td {
    --row-flash-shadow: inset 0 2px 0rgba(0,0,0,0.12), inset 0 -2px 0rgba(0,0,0,0.12);
    --row-flash-shadow-clear: inset 0 2px 0rgba(0,0,0,0.12), inset 0 -2px 0rgba(0,0,0,0.12);
    animation: row-flash-cell 1.05s ease-in-out 3 !important;
    background-clip: padding-box;
  }
  #staff-store-body tr.row-flash td:first-child,
  #staff-location-body tr.row-flash td:first-child,
  #cars-table-body tr.row-flash td:first-child,
  #bookings-table-body tr.row-flash td:first-child,
  #maintenance-body tr.row-flash td:first-child {
    border-radius: 10px 0 0 10px;
    --row-flash-shadow: inset 2px 0 0rgba(0,0,0,0.12), inset 0 2px 0rgba(0,0,0,0.12), inset 0 -2px 0rgba(0,0,0,0.12);
    --row-flash-shadow-clear: inset 2px 0 0rgba(0,0,0,0.12), inset 0 2px 0rgba(0,0,0,0.12), inset 0 -2px 0rgba(0,0,0,0.12);
  }
  #staff-store-body tr.row-flash td:last-child,
  #staff-location-body tr.row-flash td:last-child,
  #cars-table-body tr.row-flash td:last-child,
  #bookings-table-body tr.row-flash td:last-child,
  #maintenance-body tr.row-flash td:last-child {
    border-radius: 0 10px 10px 0;
    --row-flash-shadow: inset -2px 0 0rgba(0,0,0,0.12), inset 0 2px 0rgba(0,0,0,0.12), inset 0 -2px 0rgba(0,0,0,0.12);
    --row-flash-shadow-clear: inset -2px 0 0rgba(0,0,0,0.12), inset 0 2px 0rgba(0,0,0,0.12), inset 0 -2px 0rgba(0,0,0,0.12);
  }
  .badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; }
  .badge-available { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
  .badge-unavailable { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
  .badge-booked { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
  .badge-rented { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
  .badge-booked-soon { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
  .badge-has-pending { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
  .badge-pending { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
  .badge-neutral { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
  .badge-approved { background: #f3f4f6; color: #374151; border: 1px solid rgba(0,0,0,0.15); }
  .badge-pre_rental_checks { background: #f3f4f6; color: #374151; border: 1px solid rgba(0,0,0,0.15); }
  .badge-confirmed { background: #f3f4f6; color: #374151; border: 1px solid rgba(0,0,0,0.15); }
  .badge-deposit_paid { background: #f3f4f6; color: #374151; border: 1px solid rgba(0,0,0,0.15); }
  .badge-ready_for_pickup { background: #fefce8; color: #a16207; border: 1px solid #fde68a; }
  .badge-handover_pending { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
  .badge-active_rental { background: #f3f4f6; color: #111111; border: 1px solid rgba(0,0,0,0.15); }
  .badge-completed { background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
  .badge-no_show { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
  .badge-rejected { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
  .badge-maintenance { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
  .badge-cancelled { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
  .badge-returned { background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
  .btn-orange { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; transition: all 0.18s; }
  .btn-orange:hover { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; transform: translateY(-1px); }
  .btn-insp { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; transition: all 0.18s; font-weight: 600; }
  .btn-insp:hover { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(37,99,235,0.15); }
  .btn-receipt {
    background: #111111;
    color: #fff; border: 1px solid #111111;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    transition: all 0.2s cubic-bezier(0.34,1.3,0.64,1);
  }
  .btn-receipt:hover { background: #000; border-color: #000; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.28); }
  .btn-receipt:active { transform: translateY(0) scale(0.97); }
  .actions-cell { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
  .pay-type-opt { width:100%;border:0;background:transparent;color:var(--text);border-radius:8px;padding:8px 10px;text-align:left;cursor:pointer;font-family:var(--font);font-size:0.84rem;font-weight:600;transition:background 0.12s,color 0.12s; }
  .pay-type-opt:hover { background:rgba(0,0,0,0.06); }
  .pay-type-opt.active { background:#111;color:#fff; }
  #pay-type-btn:hover { border-color:var(--border-dark);background:#f5f5f5; }
  #pay-type-btn.open { border-color:var(--accent-warm);background:#fff;box-shadow:0 0 0 3px rgba(0,0,0,0.08); }
  .pay-method-opt { width:100%;border:0;background:transparent;color:var(--text);border-radius:8px;padding:8px 10px;text-align:left;cursor:pointer;font-family:var(--font);font-size:0.84rem;font-weight:600;transition:background 0.12s,color 0.12s; }
  .pay-method-opt:hover { background:rgba(0,0,0,0.06); }
  .pay-method-opt.active { background:#111;color:#fff; }
  #pay-method-btn:hover { border-color:var(--border-dark);background:#f5f5f5; }
  #pay-method-btn.open { border-color:var(--accent-warm);background:#fff;box-shadow:0 0 0 3px rgba(0,0,0,0.08); }

  /* --- FLEET ALERTS --------------------------------------------------------- */
  .alerts-header { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:0.7rem; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.09em; margin-bottom:6px; }
  .alerts-count { color:var(--accent-warm); background:var(--gold-light); border:1px solid var(--border); border-radius:100px; padding:2px 8px; font-size:0.64rem; letter-spacing:0.04em; }

  /* ── Fleet alert banner rows ── */
  .alert-item {
    display:flex; align-items:center; gap:10px;
    min-height:46px; padding:8px 8px 8px 14px;
    border:1px solid; border-radius:10px;
    margin-bottom:6px; font-size:0.8125rem;
    position:relative;
    cursor:pointer;
    animation: sw-slidein 0.35s cubic-bezier(0.34,1.3,0.64,1) both;
    user-select:none; -webkit-user-select:none; outline:none;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
  }
  .alert-item:hover { transform:translateY(-1px); }
  .alert-item:last-child { margin-bottom:0; }
  .alert-item:focus { outline:none; }
  .alert-item.alert-error { border-color:#fca5a5; background:#fef2f2; color:#7f1d1d; }
  .alert-item.alert-warn  { border-color:#fcd34d; background:#fefce8; color:#713f12; }
  .alert-item.alert-error:hover { box-shadow:0 4px 16px rgba(220,38,38,0.12); }
  .alert-item.alert-warn:hover  { box-shadow:0 4px 16px rgba(217,119,6,0.12); }

  .alert-icon { width:16px; height:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .alert-icon svg { width:16px; height:16px; fill:currentColor; }

  .alert-main { display:flex; align-items:center; gap:8px; flex:1; min-width:0; overflow:hidden; flex-wrap:wrap; }
  .alert-car { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .alert-meta { font-weight:400; font-size:0.72rem; opacity:0.6; flex-shrink:0; }
  .alert-list { display:flex; gap:4px; flex-shrink:0; flex-wrap:wrap; }
  .alert-chip { border-radius:100px; padding:2px 8px; font-size:0.69rem; font-weight:600; border:1px solid; white-space:nowrap; }
  .alert-chip.error { background:rgba(220,38,38,0.1); border-color:rgba(220,38,38,0.28); color:#991b1b; }
  .alert-chip.warn  { background:rgba(217,119,6,0.1); border-color:rgba(217,119,6,0.28); color:#78350f; }

  /* ── Update button: liquid ink fill from center ── */
  .alert-actions { display:flex; align-items:center; gap:5px; flex-shrink:0; }
  .alert-update-wrap { position:relative; display:inline-flex; align-items:center; }

  @keyframes alert-btn-ink {
    0%   { transform:translate(-50%,-50%) scale(0); opacity:0.7; }
    60%  { opacity:0.55; }
    100% { transform:translate(-50%,-50%) scale(3.5); opacity:0; }
  }
  @keyframes alert-btn-label-up {
    0%   { transform:translateY(0);   opacity:1; }
    35%  { transform:translateY(-8px); opacity:0; }
    36%  { transform:translateY(8px);  opacity:0; }
    100% { transform:translateY(0);   opacity:1; }
  }

  .alert-update-btn {
    position:relative; overflow:hidden;
    border:1.5px solid currentColor;
    background:transparent;
    padding:5px 13px; border-radius:7px; cursor:pointer;
    font-family:var(--font); font-size:0.7rem; font-weight:800;
    letter-spacing:0.06em; text-transform:uppercase;
    color:inherit; opacity:0.55;
    transition: opacity 0.18s ease, transform 0.16s cubic-bezier(0.34,1.5,0.64,1), box-shadow 0.18s ease;
  }
  .alert-update-btn:hover {
    opacity:1;
    transform:scale(1.06);
  }
  .alert-update-btn[data-v="warn"]:hover {
    box-shadow:0 0 0 3px rgba(217,119,6,0.18), 0 4px 14px rgba(217,119,6,0.18);
  }
  .alert-update-btn[data-v="error"]:hover {
    box-shadow:0 0 0 3px rgba(220,38,38,0.18), 0 4px 14px rgba(220,38,38,0.18);
  }
  /* ink blob spawned by JS on click */
  .alert-update-btn .btn-ink {
    position:absolute; border-radius:50%;
    width:60px; height:60px;
    pointer-events:none;
    animation:alert-btn-ink 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
  }
  .alert-update-btn[data-v="warn"] .btn-ink  { background:rgba(217,119,6,0.35); }
  .alert-update-btn[data-v="error"] .btn-ink { background:rgba(220,38,38,0.35); }
  /* label bounce on click */
  .alert-update-btn.ink-active .btn-label {
    animation:alert-btn-label-up 0.42s cubic-bezier(0.22,1,0.36,1) both;
  }
  .alert-update-btn:active {
    transform:scale(0.95) !important;
    transition:transform 0.08s !important;
  }

  /* dismiss button */
  .alert-dismiss-btn {
    flex-shrink:0; width:22px; height:22px; border-radius:4px;
    border:none; background:transparent; color:currentColor;
    cursor:pointer; font-size:0.85rem;
    display:flex; align-items:center; justify-content:center;
    opacity:0.45; transition:opacity 0.12s, background 0.12s;
  }
  .alert-dismiss-btn:hover { opacity:1; background:rgba(0,0,0,0.07); }
  /* Maintenance branch filter bar */
  .mnt-filter-bar { display:flex; align-items:center; gap:10px; padding:0.85rem 1rem; border-bottom:1px solid var(--border); }
  .mnt-filter-label { font-weight:600; font-size:0.88rem; flex-shrink:0; }
  .mnt-branch-tabs { display:flex; gap:4px; flex-wrap:wrap; }
  .mnt-branch-tab { padding:4px 12px; border-radius:100px; border:1px solid var(--border); font-size:0.76rem; font-weight:600; cursor:pointer; transition:all 0.15s; background:transparent; color:var(--text-muted); }
  .mnt-branch-tab:hover { border-color:var(--accent-warm); color:var(--accent-warm); background:var(--gold-light); }
  .mnt-branch-tab.active { background:var(--accent-warm); color:#fff; border-color:var(--accent-warm); box-shadow:0 2px 8pxrgba(0,0,0,0.12); }
  .mnt-tab-btn { padding:7px 16px; border-radius:8px; border:none; font-size:0.8rem; font-weight:600; cursor:pointer; transition:all 0.15s; background:transparent; color:var(--text-muted); font-family:var(--font); }
  .mnt-tab-btn:hover { background:rgba(0,0,0,0.05); color:var(--text); }
  .mnt-tab-btn.active { background:#fff; color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,0.1); }
  .empty-state { padding: 3rem; text-align: center; color: var(--text-muted); }
  .empty-icon { font-size: 2rem; margin-bottom: 0.5rem; }
  .empty-title { font-weight: 600; margin-bottom: 4px; color: var(--text); }

  /* MODAL */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center; z-index: 200;
    backdrop-filter: blur(10px);
  }
  .modal {
    background: rgba(255,255,255,0.97); border-radius: 20px; padding: 2rem;
    width: 440px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 32px 80px rgba(26,11,46,0.3), 0 0 0 1px rgba(0,0,0,0.11), inset 0 1px 0 rgba(255,255,255,0.9);
    backdrop-filter: blur(20px);
    animation: scaleIn 0.25s var(--ease-spring) both;
  }
  .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,0.07); }
  .modal-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
  .modal-close { background: rgba(0,0,0,0.04); border: none; font-size: 1rem; cursor: pointer; color: var(--text-muted); padding: 6px; line-height: 1; border-radius: 8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; transition: all 0.18s; }
  .modal-close:hover { background: rgba(220,38,38,0.1); color: var(--red); transform: scale(1.1); }
  .modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.06); }
  .modal-card {
    background: rgba(255,255,255,0.97);
    border-radius: 20px;
    width: 95vw;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 32px 80px rgba(26,11,46,0.25), 0 0 0 1px rgba(0,0,0,0.11), inset 0 1px 0 rgba(255,255,255,0.9);
    animation: scaleIn 0.25s var(--ease-spring) both;
  }
  .modal-card > .modal-header { padding: 1.25rem 1.5rem; margin-bottom: 0; }
  .form-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; letter-spacing: 0.04em; text-transform: uppercase; }
  .form-input { width: 100%; padding: 9px 13px; border: 1.5px solid var(--border-dark); border-radius: var(--radius); font-family: var(--font); font-size: 0.875rem; color: var(--text); background: #fff; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
  .form-input:focus { border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,0.07); }
  select.form-input { cursor: pointer; }
  textarea.form-input { resize: vertical; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  /* --- WHITE MODAL — visible inputs --------------------------------------- */
  .light-modal-inner input,
  .light-modal-inner select,
  .light-modal-inner textarea {
    background: #f5f5f5 !important;
    border-color: rgba(0,0,0,0.14) !important;
    color: var(--text) !important;
  }
  .light-modal-inner input:focus,
  .light-modal-inner select:focus,
  .light-modal-inner textarea:focus {
    background: #fff !important;
    border-color: var(--accent-warm) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important;
  }

  /* --- PREMIUM MODAL OVERRIDE ------------------------------------------------ */
  html.modal-premium .light-modal-inner {
    --border: rgba(0,0,0,0.11);
    --text: #f3f4f6;
    --text-muted: rgba(255,255,255,0.32);
    --bg: rgba(255,255,255,0.05);
    background: #111111 !important;
    color: #f3f4f6 !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.10) !important;
  }
  html.modal-premium .light-modal-inner input,
  html.modal-premium .light-modal-inner select,
  html.modal-premium .light-modal-inner textarea {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #f3f4f6 !important;
    color-scheme: dark;
  }
  html.modal-premium .light-modal-inner input::placeholder,
  html.modal-premium .light-modal-inner textarea::placeholder { color: rgba(255,255,255,0.18) !important; }
  html.modal-premium .light-modal-inner input:focus,
  html.modal-premium .light-modal-inner select:focus,
  html.modal-premium .light-modal-inner textarea:focus {
    border-color: rgba(0,0,0,0.30) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important;
  }
  html.modal-premium .light-modal-inner option { background: #111111; color: #f3f4f6; }

  /* --- WHITE MODE — dark modals (car, booking) become light ------------------- */
  html.modal-white .dark-modal-inner {
    --border: rgba(0,0,0,0.10);
    --border-dark: rgba(0,0,0,0.18);
    --text: #111111;
    --text-muted: #4b5563;
    --text-faint: #9ca3af;
    --bg: #f9fafb;
    background: #fff !important;
    border-color: rgba(0,0,0,0.10) !important;
    color: var(--text) !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.08) !important;
  }
  html.modal-white .dark-modal-inner .cm-section-head { color: var(--text-muted) !important; border-bottom-color: var(--border) !important; }
  html.modal-white .dark-modal-inner .cm-section-head::before { background: var(--border-dark) !important; }
  html.modal-white .dark-modal-inner .cm-label { color: var(--text-muted) !important; }
  html.modal-white .dark-modal-inner .cm-input {
    background: var(--bg) !important; border-color: var(--border-dark) !important;
    color: var(--text) !important; color-scheme: light;
  }
  html.modal-white .dark-modal-inner .cm-input::placeholder { color: var(--text-faint) !important; }
  html.modal-white .dark-modal-inner .cm-input option { background: #fff; color: var(--text); }
  html.modal-white .dark-modal-inner .cm-feature-label { background: var(--bg) !important; border-color: var(--border) !important; color: var(--text-muted) !important; }
  html.modal-white .dark-modal-inner .cm-feature-label:hover { background: rgba(0,0,0,0.06) !important; }
  html.modal-white .dark-modal-inner .cm-feature-label input:checked ~ span { color: var(--text) !important; }
  html.modal-white .dark-modal-inner .cm-feature-label:has(input:checked) {
    background: rgba(0,0,0,0.06) !important;
    border-color:rgba(0,0,0,0.12) !important;
    color: var(--text) !important;
  }
  html.modal-white .dark-modal-inner input,
  html.modal-white .dark-modal-inner select,
  html.modal-white .dark-modal-inner textarea {
    background: #f9fafb !important; border-color: rgba(0,0,0,0.14) !important;
    color: var(--text) !important; color-scheme: light !important;
  }
  html.modal-white .dark-modal-inner input:focus,
  html.modal-white .dark-modal-inner select:focus,
  html.modal-white .dark-modal-inner textarea:focus {
    background: #fff !important; border-color: var(--accent-warm) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important;
  }
  html.modal-white .dark-modal-inner input::placeholder,
  html.modal-white .dark-modal-inner textarea::placeholder { color: var(--text-faint) !important; }
  html.modal-white .dark-modal-inner [style*="color:#f0ece2"],
  html.modal-white .dark-modal-inner [style*="color:#f3f4f6"] { color: var(--text) !important; }
  html.modal-white .dark-modal-inner [style*="color:rgba(200,169,110"],
  html.modal-white .dark-modal-inner [style*="color:rgba(255,255,255"] { color: var(--text-muted) !important; }
  html.modal-white .dark-modal-inner [style*="background:rgba(0,0,0,0.12)"] { background: #f9fafb !important; }
  html.modal-white .dark-modal-inner [style*="border-bottom:1px solid rgba(0,0,0"] { border-bottom-color: var(--border) !important; }
  html.modal-white .dark-modal-inner [style*="border:1px solid rgba(0,0,0,0.13)"] { border-color: var(--border-dark) !important; }
  html.modal-white #profile-panel-inner {
    --border: rgba(0,0,0,0.10);
    --border-dark: rgba(0,0,0,0.18);
    --text: #111111;
    --text-muted: #4b5563;
    --text-faint: #9ca3af;
    --bg: #f9fafb;
    background:#fff !important;
    border-color:rgba(0,0,0,0.10) !important;
    color:var(--text) !important;
    box-shadow:0 32px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.08) !important;
  }
  html.modal-white #profile-panel-inner [style*="color:#f0ece2"],
  html.modal-white #profile-panel-inner [style*="color:#f3f4f6"] { color:var(--text) !important; }
  html.modal-white #profile-panel-inner [style*="color:rgba(200,169,110"],
  html.modal-white #profile-panel-inner [style*="color:rgba(255,255,255"] { color:var(--text-muted) !important; }
  html.modal-white #profile-panel-inner [style*="border-bottom:1px solid rgba(0,0,0"] { border-bottom-color:var(--border) !important; }
  html.modal-white #profile-panel-inner [style*="background:rgba(0,0,0,0.05)"] { background:rgba(0,0,0,0.04) !important; }
  html.modal-white #profile-panel-inner input {
    background:#f9fafb !important;
    border-color:rgba(0,0,0,0.14) !important;
    color:var(--text) !important;
    color-scheme:light !important;
  }
  html.modal-white #profile-panel-inner input:focus {
    background:#fff !important;
    border-color:var(--accent-warm) !important;
    box-shadow:0 0 0 3px rgba(0,0,0,0.07) !important;
  }
  html.modal-white #profile-panel-inner input::placeholder { color:var(--text-faint) !important; }
  html.modal-white #profile-panel-inner input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 1000px #f9fafb inset !important;
    -webkit-text-fill-color:var(--text) !important;
  }
  html.modal-white #profile-panel-inner button[onclick="closeProfilePanel()"] {
    background:rgba(0,0,0,0.04) !important;
    border-color:rgba(0,0,0,0.11) !important;
    color:var(--text-muted) !important;
  }

  /* BOOKING DETAIL */
  .booking-detail dt { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.05em; }
  .booking-detail dd { font-size: 0.9rem; font-weight: 500; margin-bottom: 14px; }
  .booking-approval { display: flex; gap: 8px; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

  .hidden { display: none !important; }
  .page { display: none; }
  .page.active { display: block; }
  /* Disable scrolling when the Dashboard tab is active */
  /* Dashboard scrolls like every other tab (was overflow:hidden, which clipped
     the charts / activity feed below the fold on shorter viewports). */
  .main-content:has(#page-dashboard.active) { overflow-y: auto; overflow-x: hidden; }

  /* TOAST */
  #toast {
    position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 300;
    background: linear-gradient(135deg, #111111, #2d1b4e);
    color: rgba(255,255,255,0.95); padding: 11px 18px;
    border-radius: 10px; font-size: 0.85rem; font-weight: 500;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.13);
    transform: translateY(80px); opacity: 0; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  }
  #toast.show { transform: translateY(0); opacity: 1; }
  #toast.success { background: linear-gradient(135deg, #15803d, #16a34a); box-shadow: 0 8px 32px rgba(22,163,74,0.3); }
  #toast.error { background: linear-gradient(135deg, #b91c1c, #dc2626); box-shadow: 0 8px 32px rgba(220,38,38,0.3); }

  @media (max-width: 700px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .form-row { grid-template-columns: 1fr; }
  }
  /* --- DATE PICKER ----------------------------------------------------- */
  .dp-wrapper { position: relative; display: block; }
  .dp-trigger {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 13px; border: 1px solid var(--border);
    border-radius: var(--radius); background: rgba(255,255,255,0.8);
    cursor: pointer; font-size: 0.875rem; color: var(--text);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    user-select: none; min-height: 38px;
  }
  .dp-trigger:hover { border-color: var(--border-dark); background: white; }
  .dp-trigger.open { border-color: var(--accent-warm); background: white; box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }
  .dp-t-ico { font-size: 0.85rem; color: var(--accent-warm); flex-shrink: 0; line-height: 1; }
  .dp-t-val { flex: 1; white-space: nowrap; }
  .dp-t-val.ph { color: var(--text-faint); }
  .dp-t-arr { font-size: 0.6rem; color: var(--text-faint); transition: transform 0.2s; }
  .dp-trigger.open .dp-t-arr { transform: rotate(180deg); }
  .dp-cal {
    position: fixed; z-index: 9999;
    background: rgba(255,255,255,0.97); border: 1px solid var(--border);
    border-radius: 16px; padding: 1rem 1rem 1.1rem;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.08);
    width: 288px; backdrop-filter: blur(20px);
  }
  .dp-cal-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .dp-cal-title { display:flex; align-items:center; gap:6px; position:relative; }
  .dp-cal-field { position:relative; }
  .dp-cal-select {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    min-width:92px; height:32px; padding:0 10px;
    border:1px solid rgba(0,0,0,0.12); border-radius:9px;
    background:rgba(255,255,255,0.86); color:var(--text);
    font-family:var(--font); font-size:0.78rem; font-weight:800;
    outline:none; cursor:pointer; transition:border-color 0.16s, background 0.16s, box-shadow 0.16s;
  }
  .dp-cal-field.year .dp-cal-select { min-width:72px; }
  .dp-cal-select::after { content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:0.55; flex-shrink:0; }
  .dp-cal-select:hover, .dp-cal-select.open { border-color:var(--accent-warm); background:#fff; box-shadow:0 0 0 3px rgba(0,0,0,0.07); }
  .dp-cal-menu {
    position:absolute; left:0; top:calc(100% + 6px); z-index:10001;
    min-width:100%; max-height:196px; overflow-y:auto; padding:5px;
    background:rgba(255,255,255,0.98); border:1px solid rgba(0,0,0,0.11);
    border-radius:10px; box-shadow:0 16px 36px rgba(20,10,40,0.16);
    display:none; scrollbar-width:thin; scrollbar-color:rgba(0,0,0,0.12)transparent;
  }
  .dp-cal-menu.open { display:block; }
  .dp-cal-option {
    width:100%; border:0; background:transparent; color:var(--text); border-radius:7px;
    padding:8px 9px; text-align:left; cursor:pointer;
    font-family:var(--font); font-size:0.8rem; font-weight:650;
    transition:background 0.12s, color 0.12s;
  }
  .dp-cal-option:hover { background:rgba(0,0,0,0.06); }
  .dp-cal-option.sel { background:linear-gradient(135deg,#111111,#374151); color:#fff; }
  .dp-cal-nav {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--border); background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 1rem; font-family: var(--font);
    transition: all 0.12s; line-height: 1;
  }
  .dp-cal-nav:hover { background: var(--gold-light); border-color: var(--border-dark); color: var(--accent-warm); }

  .dp-cal-month { font-weight: 700; font-size: 0.9rem; letter-spacing: -0.02em; color: var(--text); }
  .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
  .dp-wd { text-align: center; font-size: 0.6rem; font-weight: 700; color: var(--text-faint); padding: 2px 0 7px; text-transform: uppercase; letter-spacing: 0.05em; }
  .dp-d {
    aspect-ratio: 1; border: none; background: none;
    font-family: var(--font); font-size: 0.79rem; color: var(--text);
    border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.1s, color 0.1s;
  }
  .dp-d:hover:not(:disabled):not(.sel):not(.rs):not(.re) { background: var(--gold-light); }
  .dp-d.today:not(.sel):not(.rs):not(.re) { color: var(--accent-warm); font-weight: 700; }
  .dp-d.sel, .dp-d.rs, .dp-d.re { background: linear-gradient(135deg, #111111, #374151); color: #fff; font-weight: 700; border-radius: 8px; }
  .dp-d.ir { background: rgba(0,0,0,0.05); border-radius: 0; }
  .dp-d.rs:not(.re) { border-radius: 8px 0 0 8px; }
  .dp-d.re:not(.rs) { border-radius: 0 8px 8px 0; }
  .dp-d:disabled { color: var(--text-faint); opacity: 0.3; cursor: default; pointer-events: none; }
  .dp-d.ghost { visibility: hidden; pointer-events: none; }

  .dash-lang-switcher { display:flex; gap:3px; background:rgba(0,0,0,0.06); border-radius:100px; padding:3px; border:1px solid rgba(0,0,0,0.10); }
  .dash-lang-btn { flex:1; padding:4px 0; border-radius:100px; font-size:0.7rem; font-weight:700; cursor:pointer; border:none; background:transparent; color:var(--text-muted); transition:all 0.15s; font-family:inherit; text-align:center; }
  .dash-lang-btn.active { background:white; color:var(--accent-warm); box-shadow:0 1px 4px rgba(0,0,0,0.11); }
  /* Login-screen lang switcher override — black & white */
  #login-screen .dash-lang-switcher { background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.12); }
  #login-screen .dash-lang-btn { color:#888; }
  #login-screen .dash-lang-btn.active { background:#111; color:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.18); }
  html[dir="rtl"] body { direction: rtl; }
  html[dir="rtl"] .layout { direction: rtl; }
  html[dir="rtl"] .sidebar { border-right:0; border-left:1px solid var(--sidebar-border); }
  html[dir="rtl"] th, html[dir="rtl"] td { text-align:right; }
  html[dir="rtl"] .actions-cell, html[dir="rtl"] .page-actions, html[dir="rtl"] .modal-footer { justify-content:flex-start; }
  html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align:right; }
  html[dir="rtl"] .phone-picker, html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="url"] { direction:ltr; text-align:left; }

  /* --- CAR MODAL (DARK GLASS) --- */
  @keyframes cm-section-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
  #car-modal-inner { scrollbar-width:none; -ms-overflow-style:none; }
  #car-modal-inner::-webkit-scrollbar { display:none; }
  #car-modal-body { scrollbar-width:none; -ms-overflow-style:none; }
  #car-modal-body::-webkit-scrollbar { display:none; }
  #car-modal-body .cm-section {
    animation:cm-section-in 0.28s ease both;
  }
  #car-modal-body .cm-section:nth-child(1) { animation-delay:0.04s; }
  #car-modal-body .cm-section:nth-child(2) { animation-delay:0.08s; }
  #car-modal-body .cm-section:nth-child(3) { animation-delay:0.12s; }
  #car-modal-body .cm-section:nth-child(4) { animation-delay:0.16s; }
  #car-modal-body .cm-section:nth-child(5) { animation-delay:0.20s; }
  #car-modal-body .cm-section:nth-child(6) { animation-delay:0.22s; }
  #car-modal-body .cm-section:nth-child(7) { animation-delay:0.24s; }
  #car-modal-body .cm-section:nth-child(8) { animation-delay:0.26s; }
  .cm-section { margin-bottom:22px; }
  .cm-section-head {
    font-size:0.63rem; font-weight:800; color:rgba(255,255,255,0.48); text-transform:uppercase;
    letter-spacing:0.13em; margin:0 0 12px; padding-bottom:9px;
    border-bottom:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; gap:8px;
  }
  .cm-section-head::before { content:''; flex:0 0 3px; height:13px; background:linear-gradient(to bottom,rgba(255,255,255,0.75),rgba(255,255,255,0.12)); border-radius:2px; }
  html.modal-white .cm-section-head { color:rgba(0,0,0,0.50) !important; border-bottom-color:rgba(0,0,0,0.08) !important; }
  html.modal-white .cm-section-head::before { background:linear-gradient(to bottom,rgba(0,0,0,0.65),rgba(0,0,0,0.12)) !important; }
  .cm-label { display:block; font-size:0.71rem; font-weight:700; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:5px; }
  html.modal-white .cm-label { color:var(--text-muted) !important; }
  .cm-input {
    width:100%; padding:9px 13px; background:rgba(255,255,255,0.05); border:1px solid rgba(0,0,0,0.11);
    border-radius:10px; font-size:0.875rem; color:#f3f4f6; font-family:var(--font);
    transition:border-color 0.2s, background 0.2s, box-shadow 0.2s; outline:none;
  }
  .cm-input::placeholder { color:rgba(255,255,255,0.18); }
  .cm-input:focus { border-color:rgba(0,0,0,0.30); background:rgba(255,255,255,0.08); box-shadow:0 0 0 3px rgba(0,0,0,0.07); }
  .cm-input option { background:#111111; color:#f3f4f6; }
  .cm-feature-row { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; }
  .btn-clear-img { padding:9px 14px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:rgba(229,234,245,0.45); border-radius:10px; cursor:pointer; font-size:0.8rem; font-weight:600; white-space:nowrap; transition:all 0.15s; font-family:var(--font); }
  .btn-clear-img:hover { background:rgba(220,38,38,0.12) !important; color:#f87171 !important; border-color:rgba(220,38,38,0.25) !important; }
  html.modal-white .btn-clear-img { background:rgba(0,0,0,0.04) !important; border-color:rgba(0,0,0,0.13) !important; color:var(--text-muted) !important; }
  html.modal-white .btn-clear-img:hover { background:rgba(220,38,38,0.08) !important; color:#dc2626 !important; border-color:rgba(220,38,38,0.3) !important; }
  .cm-feature-label {
    display:flex; align-items:center; gap:8px; padding:7px 10px;
    background:rgba(255,255,255,0.03); border:1px solid rgba(0,0,0,0.08);
    border-radius:8px; cursor:pointer; transition:all 0.15s; font-size:0.8rem; font-weight:500; color:rgba(229,234,245,0.7);
  }
  .cm-feature-label:hover { background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.16); color:#f3f4f6; }
  .cm-feature-label input:checked ~ span { color:#f3f4f6; }
  .cm-feature-label:has(input:checked) { background:rgba(0,0,0,0.08); border-color:rgba(0,0,0,0.22); color:#f3f4f6; }
  .cm-check { width:15px; height:15px; accent-color:var(--accent-warm); flex-shrink:0; cursor:pointer; }
  .cm-features-dd-wrap { position:relative; }
  .cm-features-dd-trigger {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:10px 13px; background:rgba(255,255,255,0.05); border:1px solid rgba(0,0,0,0.12);
    border-radius:10px; color:rgba(255,255,255,0.32); font-size:0.875rem; font-family:var(--font);
    cursor:pointer; transition:all 0.15s;
  }
  .cm-features-dd-trigger:hover { border-color:rgba(0,0,0,0.25); background:rgba(255,255,255,0.08); }
  .cm-features-dd-trigger.has-value { color:#f3f4f6; }
  .cm-features-dd-trigger svg { flex-shrink:0; opacity:0.55; transition:transform 0.2s; }
  .cm-features-dd-trigger.open svg { transform:rotate(180deg); }
  .cm-features-dd-panel {
    position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:200;
    background:#1a1a1a; border:1px solid rgba(0,0,0,0.16); border-radius:10px;
    padding:8px; display:grid; grid-template-columns:1fr 1fr; gap:5px 8px;
    box-shadow:0 8px 32px rgba(0,0,0,0.5);
  }
  .cm-features-dd-panel.hidden { display:none; }
  html.modal-white .cm-features-dd-trigger { background:rgba(0,0,0,0.04) !important; border-color:rgba(0,0,0,0.12) !important; color:var(--text-muted) !important; }
  html.modal-white .cm-features-dd-trigger.has-value { color:var(--text) !important; }
  html.modal-white .cm-features-dd-panel { background:#fff !important; border-color:rgba(0,0,0,0.12) !important; box-shadow:0 8px 24px rgba(0,0,0,0.12) !important; }

  /* ── ADDON ROWS (theme-aware) ── */
  @keyframes car-addon-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
  .car-addon-row {
    display:flex; align-items:center; gap:12px; padding:11px 14px;
    border-radius:11px; border:1px solid rgba(255,255,255,0.07);
    background:rgba(255,255,255,0.025); cursor:pointer; user-select:none;
    transition:all 0.2s cubic-bezier(0.34,1.3,0.64,1);
    animation:car-addon-in 0.22s ease both;
  }
  .car-addon-row:hover { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.14); transform:translateY(-1px); }
  .car-addon-row.car-addon-enabled { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.22); }
  .car-addon-row.car-addon-enabled:hover { background:rgba(255,255,255,0.1); }
  .car-addon-row-icon {
    flex-shrink:0; display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:8px;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.6);
  }
  .car-addon-row-name { font-size:0.82rem; font-weight:600; color:#e5e7eb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .car-addon-row-meta { font-size:0.67rem; color:rgba(255,255,255,0.3); margin-top:2px; }
  .car-addon-row-req { flex-shrink:0; font-size:0.58rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.6); padding:2px 7px; border-radius:4px; }
  .car-addon-row-ovr-wrap { position:relative; }
  .car-addon-row-ovr-sym { position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:0.72rem; color:rgba(255,255,255,0.35); pointer-events:none; }
  .car-addon-row-ovr { width:90px; padding:6px 8px 6px 20px; border:1px solid rgba(255,255,255,0.1); border-radius:7px; background:rgba(0,0,0,0.3); color:#fff; font-size:0.78rem; font-weight:600; text-align:right; outline:none; transition:border-color 0.15s; }
  .car-addon-row-ovr:focus { border-color:rgba(255,255,255,0.3) !important; }
  .car-addon-row-cb {
    appearance:none; -webkit-appearance:none; width:18px; height:18px; border-radius:5px;
    border:1.5px solid rgba(255,255,255,0.18); background:transparent; cursor:pointer;
    flex-shrink:0; transition:all 0.15s; background-size:70%; background-position:center; background-repeat:no-repeat;
  }
  .car-addon-row-cb:checked { background-color:#fff; border-color:rgba(255,255,255,0.5); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
  .car-addon-section-title {
    font-size:0.7rem; font-weight:800; letter-spacing:0.10em; text-transform:uppercase;
    color:rgba(255,255,255,0.55); display:flex; align-items:center; gap:7px;
  }
  .car-addon-section-title::before {
    content:''; width:3px; height:12px; border-radius:2px;
    background:linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0.18));
  }
  .car-addon-catalog-link {
    display:inline-flex; align-items:center; gap:5px;
    font-size:0.7rem; font-weight:700; letter-spacing:0.04em;
    color:rgba(255,255,255,0.6); text-decoration:none;
    border:1.5px solid rgba(255,255,255,0.18); border-radius:8px;
    padding:5px 11px; transition:all 0.22s cubic-bezier(0.34,1.3,0.64,1);
    background:rgba(255,255,255,0.04);
  }
  .car-addon-catalog-link:hover {
    color:#fff; border-color:rgba(255,255,255,0.42);
    background:rgba(255,255,255,0.1); transform:translateY(-1px);
  }
  /* White modal overrides */
  html.modal-white .car-addon-row { background:rgba(0,0,0,0.03) !important; border-color:rgba(0,0,0,0.10) !important; }
  html.modal-white .car-addon-row:hover { background:rgba(0,0,0,0.05) !important; border-color:rgba(0,0,0,0.18) !important; transform:translateY(-1px); }
  html.modal-white .car-addon-row.car-addon-enabled { background:rgba(0,0,0,0.06) !important; border-color:rgba(0,0,0,0.20) !important; }
  html.modal-white .car-addon-row.car-addon-enabled:hover { background:rgba(0,0,0,0.09) !important; }
  html.modal-white .car-addon-row-icon { background:rgba(0,0,0,0.05) !important; border-color:rgba(0,0,0,0.12) !important; color:rgba(0,0,0,0.5) !important; }
  html.modal-white .car-addon-row-name { color:#111 !important; }
  html.modal-white .car-addon-row-meta { color:rgba(0,0,0,0.42) !important; }
  html.modal-white .car-addon-row-req { background:rgba(0,0,0,0.07) !important; color:rgba(0,0,0,0.5) !important; }
  html.modal-white .car-addon-row-ovr-sym { color:rgba(0,0,0,0.38) !important; }
  html.modal-white .car-addon-row-ovr { background:rgba(0,0,0,0.04) !important; border-color:rgba(0,0,0,0.14) !important; color:#111 !important; }
  html.modal-white .car-addon-row-ovr:focus { border-color:rgba(0,0,0,0.3) !important; }
  html.modal-white .car-addon-row-cb { border-color:rgba(0,0,0,0.28) !important; background-color:transparent !important; background-image:none !important; }
  html.modal-white .car-addon-row-cb:checked { background-color:#111 !important; border-color:rgba(0,0,0,0.6) !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important; }
  /* Specificity override: #car-modal-inner input rule must not clobber addon checkboxes */
  html.modal-white #car-modal-inner input.car-addon-row-cb { background:#00000000 !important; border-color:rgba(0,0,0,0.28) !important; background-image:none !important; }
  html.modal-white #car-modal-inner input.car-addon-row-cb:checked { background:#111 !important; border-color:rgba(0,0,0,0.6) !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important; }
  html.modal-white .car-addon-section-title { color:rgba(0,0,0,0.60) !important; }
  html.modal-white .car-addon-section-title::before { background:linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.15)) !important; }
  html.modal-white .car-addon-catalog-link { color:rgba(0,0,0,0.55) !important; border-color:rgba(0,0,0,0.18) !important; background:rgba(0,0,0,0.03) !important; }
  html.modal-white .car-addon-catalog-link:hover { color:#111 !important; border-color:rgba(0,0,0,0.35) !important; background:rgba(0,0,0,0.07) !important; }
  /* White mode: addon description text fix */
  html.modal-white .car-addon-desc-text { color:rgba(0,0,0,0.45) !important; }
  .cm-url-cancel-btn { border-color:rgba(255,255,255,0.10) !important; color:rgba(255,255,255,0.38) !important; }
  .cm-url-cancel-btn:hover { background:rgba(255,255,255,0.04) !important; border-color:rgba(255,255,255,0.22) !important; color:rgba(255,255,255,0.65) !important; }
  html.modal-white .cm-url-cancel-btn { border-color:rgba(0,0,0,0.12) !important; color:rgba(0,0,0,0.38) !important; }
  html.modal-white .cm-url-cancel-btn:hover { background:rgba(0,0,0,0.04) !important; border-color:rgba(0,0,0,0.25) !important; color:rgba(0,0,0,0.58) !important; }

  /* ── COMBINED PHOTO + GALLERY SECTION ── */
  @keyframes cm-tab-slide-in { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:translateX(0); } }
  @keyframes cm-tab-slide-out { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:translateX(0); } }
  .cm-photo-tabs {
    display:flex; gap:0; margin-bottom:14px; position:relative;
    background:rgba(255,255,255,0.04); border-radius:10px; padding:3px;
    border:1px solid rgba(255,255,255,0.08);
  }
  .cm-photo-tab {
    flex:1; padding:7px 14px; border-radius:8px; border:none; cursor:pointer;
    font-size:0.73rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
    background:transparent; color:rgba(255,255,255,0.38); font-family:var(--font);
    transition:color 0.22s ease; position:relative; z-index:1;
    display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .cm-photo-tab.active { color:#f3f4f6; }
  .cm-photo-tab:hover:not(.active) { color:rgba(255,255,255,0.68); }
  .cm-photo-tabs::after {
    content:''; position:absolute; top:3px; bottom:3px; left:3px;
    width:calc(50% - 3px); border-radius:7px;
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.12);
    transition:transform 0.28s cubic-bezier(0.34,1.3,0.64,1);
    pointer-events:none; z-index:0;
  }
  .cm-photo-tabs.tab-gallery::after { transform:translateX(100%); }
  .cm-photo-pane { display:none; animation:cm-tab-slide-in 0.22s ease both; }
  .cm-photo-pane.active { display:block; }
  /* Gallery photo grid items — modern */
  .cm-gallery-item {
    position:relative; aspect-ratio:4/3; border-radius:9px; overflow:hidden;
    border:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.03);
    cursor:pointer; transition:all 0.2s;
  }
  .cm-gallery-item:hover { border-color:rgba(255,255,255,0.2); transform:scale(1.02); }
  .cm-gallery-item img { width:100%; height:100%; object-fit:cover; display:block; }
  .cm-gallery-item-badge {
    position:absolute; top:5px; left:5px; background:rgba(17,17,17,0.88);
    color:#fbbf24; font-size:0.55rem; font-weight:800; padding:2px 6px;
    border-radius:4px; letter-spacing:0.06em; text-transform:uppercase;
  }
  .cm-gallery-item-actions {
    position:absolute; top:5px; right:5px; display:flex; gap:3px; opacity:0; transition:opacity 0.15s;
  }
  .cm-gallery-item:hover .cm-gallery-item-actions { opacity:1; }
  .cm-gallery-item-btn {
    background:rgba(0,0,0,0.72); border:none; border-radius:5px;
    padding:3px 7px; cursor:pointer; font-size:0.65rem; font-weight:700; transition:all 0.12s;
  }
  /* Add Photo button — proper outlined button style */
  .cm-add-photo-btn {
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 16px; border-radius:9px;
    border:1.5px solid rgba(255,255,255,0.22);
    background:transparent; color:rgba(255,255,255,0.7);
    font-size:0.78rem; font-weight:700; font-family:var(--font);
    cursor:pointer; letter-spacing:0.02em;
    transition:all 0.18s cubic-bezier(0.34,1.3,0.64,1);
  }
  .cm-add-photo-btn:hover {
    border-color:rgba(255,255,255,0.55); color:#f3f4f6;
    background:rgba(255,255,255,0.06);
    transform:translateY(-1px);
  }
  .cm-add-photo-btn svg { flex-shrink:0; }
  /* URL input row for gallery add */
  .cm-url-input-row {
    display:flex; gap:7px; align-items:center; margin-top:10px;
    animation:cm-tab-slide-in 0.22s ease both;
  }
  .cm-url-input-row input {
    flex:1; padding:8px 12px; background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12); border-radius:9px;
    color:#f3f4f6; font-size:0.82rem; font-family:var(--font); outline:none;
    transition:border-color 0.18s, background 0.18s;
  }
  .cm-url-input-row input:focus { border-color:rgba(255,255,255,0.32); background:rgba(255,255,255,0.09); }
  .cm-url-input-row input::placeholder { color:rgba(255,255,255,0.22); }
  .cm-url-add-btn {
    padding:8px 14px; border-radius:9px; border:1.5px solid rgba(255,255,255,0.22);
    background:transparent; color:#f3f4f6; font-size:0.78rem; font-weight:700;
    font-family:var(--font); cursor:pointer; white-space:nowrap;
    transition:all 0.18s; letter-spacing:0.02em;
  }
  .cm-url-add-btn:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.4); }
  /* White modal overrides for new photo styles */
  html.modal-white .cm-photo-tabs { background:rgba(0,0,0,0.04) !important; border-color:rgba(0,0,0,0.10) !important; }
  html.modal-white .cm-photo-tab { color:rgba(0,0,0,0.38) !important; }
  html.modal-white .cm-photo-tab.active { color:#111 !important; }
  html.modal-white .cm-photo-tab:hover:not(.active) { color:rgba(0,0,0,0.68) !important; }
  html.modal-white .cm-photo-tabs::after { background:rgba(0,0,0,0.08) !important; border-color:rgba(0,0,0,0.12) !important; }
  html.modal-white .cm-gallery-item { border-color:rgba(0,0,0,0.10) !important; background:rgba(0,0,0,0.03) !important; }
  html.modal-white .cm-gallery-item:hover { border-color:rgba(0,0,0,0.22) !important; }
  html.modal-white .cm-gallery-item-badge { background:rgba(255,255,255,0.9) !important; color:#b45309 !important; }
  html.modal-white .cm-gallery-item-btn { background:rgba(255,255,255,0.88) !important; color:#111 !important; }
  html.modal-white .cm-add-photo-btn { border-color:rgba(0,0,0,0.20) !important; color:rgba(0,0,0,0.65) !important; }
  html.modal-white .cm-add-photo-btn:hover { border-color:rgba(0,0,0,0.42) !important; color:#111 !important; background:rgba(0,0,0,0.05) !important; }
  html.modal-white .cm-url-input-row input { background:rgba(0,0,0,0.03) !important; border-color:rgba(0,0,0,0.14) !important; color:#111 !important; }
  html.modal-white .cm-url-input-row input:focus { border-color:rgba(0,0,0,0.30) !important; background:#fff !important; }
  html.modal-white .cm-url-input-row input::placeholder { color:var(--text-faint) !important; }
  html.modal-white .cm-url-add-btn { border-color:rgba(0,0,0,0.20) !important; color:#111 !important; }
  html.modal-white .cm-url-add-btn:hover { background:rgba(0,0,0,0.06) !important; border-color:rgba(0,0,0,0.35) !important; }
  /* ── Cover / Gallery photo mode toggle ── */
  .cm-photo-mode-toggle {
    display:flex; gap:4px; background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.09); border-radius:10px;
    padding:3px; margin-bottom:10px;
  }
  .cm-photo-mode-btn {
    display:inline-flex; align-items:center; gap:6px; flex:1; justify-content:center;
    padding:7px 10px; border-radius:7px; border:none; background:transparent;
    color:rgba(229,234,245,0.42); font-size:0.76rem; font-weight:700; letter-spacing:0.03em;
    cursor:pointer; transition:all 0.18s; font-family:var(--font);
  }
  .cm-photo-mode-btn.active {
    background:rgba(255,255,255,0.10); color:#f3f4f6;
    box-shadow:0 1px 6px rgba(0,0,0,0.25);
  }
  .cm-photo-mode-btn:hover:not(.active) { color:rgba(229,234,245,0.70); background:rgba(255,255,255,0.04); }
  .cm-photo-input-mode { animation:cm-tab-slide-in 0.2s ease both; }
  /* ── Upload dropzone ── */
  .cm-upload-dropzone {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; padding:22px 16px; border-radius:12px; cursor:pointer;
    border:1.5px dashed rgba(255,255,255,0.18); background:rgba(255,255,255,0.03);
    transition:all 0.2s; text-align:center;
  }
  .cm-upload-dropzone:hover { border-color:rgba(255,255,255,0.40); background:rgba(255,255,255,0.06); }
  .cm-upload-dropzone-sm { padding:14px 12px; }
  .cm-upload-dropzone-icon { color:rgba(229,234,245,0.38); line-height:1; }
  .cm-upload-dropzone-text { font-size:0.82rem; font-weight:600; color:rgba(229,234,245,0.65); }
  .cm-upload-dropzone-hint { font-size:0.7rem; color:rgba(229,234,245,0.30); }
  .cm-upload-status-msg { font-size:0.74rem; padding:2px 0; }
  /* ── Gallery add bar ── */
  .cm-gallery-add-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:2px; }
  .cm-add-photo-btn.active { border-color:rgba(255,255,255,0.55) !important; color:#f3f4f6 !important; background:rgba(255,255,255,0.08) !important; }
  html.modal-white .cm-add-photo-btn.active { border-color:rgba(0,0,0,0.45) !important; color:#111 !important; background:rgba(0,0,0,0.07) !important; }
  /* ── Modal-white overrides ── */
  html.modal-white .cm-photo-mode-toggle { background:rgba(0,0,0,0.03) !important; border-color:rgba(0,0,0,0.10) !important; }
  html.modal-white .cm-photo-mode-btn { color:rgba(0,0,0,0.38) !important; }
  html.modal-white .cm-photo-mode-btn.active { background:rgba(0,0,0,0.08) !important; color:#111 !important; box-shadow:0 1px 4px rgba(0,0,0,0.10) !important; }
  html.modal-white .cm-photo-mode-btn:hover:not(.active) { color:rgba(0,0,0,0.60) !important; }
  html.modal-white .cm-upload-dropzone { border-color:rgba(0,0,0,0.18) !important; background:rgba(0,0,0,0.02) !important; }
  html.modal-white .cm-upload-dropzone:hover { border-color:rgba(0,0,0,0.38) !important; background:rgba(0,0,0,0.04) !important; }
  html.modal-white .cm-upload-dropzone-icon { color:rgba(0,0,0,0.28) !important; }
  html.modal-white .cm-upload-dropzone-text { color:rgba(0,0,0,0.55) !important; }
  html.modal-white .cm-upload-dropzone-hint { color:rgba(0,0,0,0.28) !important; }

  /* Override global light form rules inside the dark car modal */
  #car-modal-inner input,
  #car-modal-inner select,
  #car-modal-inner textarea {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    color: #f3f4f6 !important;
    color-scheme: dark;
  }
  #car-modal-inner input:focus,
  #car-modal-inner select:focus,
  #car-modal-inner textarea:focus {
    border-color: rgba(0,0,0,0.30) !important;
    background: rgba(255,255,255,0.09) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important;
  }
  #car-modal-inner input::placeholder { color: rgba(255,255,255,0.18) !important; }
  #car-modal-inner label { color: rgba(255,255,255,0.45); }
  #car-modal-inner select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    padding-right: 36px !important;
    cursor: pointer;
  }
  #car-modal-inner select option { background: #111111 !important; color: #f3f4f6 !important; }
  #car-modal-inner input:-webkit-autofill,
  #car-modal-inner input:-webkit-autofill:hover,
  #car-modal-inner input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #111111 inset !important;
    -webkit-text-fill-color: #f3f4f6 !important;
    caret-color: #e0e0e0 !important;
  }
  #car-modal-inner input[type=date]::-webkit-calendar-picker-indicator { filter: invert(0.7) sepia(1) saturate(2) hue-rotate(5deg); cursor: pointer; }
  #car-modal-body .form-group { margin-bottom: 0; }
  .currency-row { display:flex; align-items:center; gap:6px; }

  /* BOOKING MODAL DARK INPUTS */
  #booking-modal-inner input,
  #booking-modal-inner select,
  #booking-modal-inner textarea {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    color: #f3f4f6 !important;
    color-scheme: dark;
    width: 100%;
    padding: 9px 13px;
    border-radius: 10px;
    font-family: var(--font);
    font-size: 0.855rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
  }
  #booking-modal-inner input:focus,
  #booking-modal-inner select:focus,
  #booking-modal-inner textarea:focus {
    border-color: rgba(0,0,0,0.30) !important;
    background: rgba(255,255,255,0.09) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important;
  }
  #booking-modal-inner input::placeholder,
  #booking-modal-inner textarea::placeholder { color: rgba(255,255,255,0.18) !important; }
  #booking-modal-inner label { display:block; font-size:0.65rem; font-weight:700; color:rgba(255,255,255,0.48); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:5px; }
  #booking-modal-inner select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 12px center !important;
    background-size: 12px !important; padding-right: 36px !important; cursor: pointer;
  }
  #booking-modal-inner select option { background: #111111 !important; color: #f3f4f6 !important; }
  #bk-phone { width:auto !important; flex:1; min-width:0; }
  html.modal-white #bk-phone { background:#f9fafb !important; border-color:rgba(0,0,0,0.13) !important; color:var(--text) !important; }
  #booking-modal-inner input:-webkit-autofill,
  #booking-modal-inner input:-webkit-autofill:hover,
  #booking-modal-inner input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #111111 inset !important;
    -webkit-text-fill-color: #f3f4f6 !important;
    caret-color: #e0e0e0 !important;
  }
  #booking-modal-inner input[type=date]::-webkit-calendar-picker-indicator,
  #booking-modal-inner input[type=time]::-webkit-calendar-picker-indicator { filter: invert(0.7) sepia(1) saturate(2) hue-rotate(220deg); cursor: pointer; }
  #booking-modal-inner .bk-section-head { font-size:0.62rem; font-weight:800; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:0.12em; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
  #booking-modal-inner .bk-section-head span { display:inline-block; width:3px; height:10px; background:linear-gradient(to bottom,#e0e0e0,rgba(0,0,0,0.22)); border-radius:2px; }
  #booking-modal-inner .bk-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  #booking-modal-inner .bk-field { display:flex; flex-direction:column; }
  .id-upload-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .id-upload-card { border:1px dashed rgba(0,0,0,0.14); background:rgba(255,255,255,0.035); border-radius:12px; padding:10px; min-height:220px; display:flex; flex-direction:column; gap:8px; }
  .id-upload-preview { min-height:184px; aspect-ratio:1.58/1; border-radius:9px; background:rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:center; overflow:hidden; color:rgba(255,255,255,0.28); font-size:0.78rem; font-weight:600; text-align:center; position:relative; cursor:pointer; transition:border-color 0.15s, background 0.15s; }
  .id-upload-preview:hover { border-color:rgba(0,0,0,0.22); background:rgba(0,0,0,0.08); }
  .id-upload-preview img { width:100%; height:100%; object-fit:contain; display:block; background:rgba(0,0,0,0.18); }
  .id-upload-remove { position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,0.35); background:rgba(8,7,4,0.72); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:0.72rem; line-height:1; z-index:2; }
  .id-upload-remove:hover { background:rgba(220,38,38,0.9); border-color:rgba(255,255,255,0.55); }
  .id-upload-status { min-height:15px; font-size:0.68rem; color:rgba(255,255,255,0.25); line-height:1.25; }
  .customer-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .customer-info-field { border:1px solid rgba(0,0,0,0.10); background:rgba(255,255,255,0.05); border-radius:10px; padding:10px 12px; }
  .customer-info-label { font-size:0.62rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.32); margin-bottom:4px; }
  .customer-info-value { font-size:0.88rem; color:#f3f4f6; font-weight:600; overflow-wrap:anywhere; }
  .customer-id-images { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
  .customer-id-image { border:1px solid rgba(0,0,0,0.11); background:rgba(255,255,255,0.035); border-radius:12px; overflow:hidden; min-height:180px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.28); font-size:0.82rem; font-weight:600; text-align:center; }
  .customer-id-image img { width:100%; height:220px; object-fit:contain; background:rgba(255,255,255,0.03); }
  @media (max-width: 620px) {
    .id-upload-grid, .customer-info-grid, .customer-id-images { grid-template-columns: 1fr; }
  }
  /* RENTAL FILE MODAL */
  #workflow-modal-inner input,
  #workflow-modal-inner select,
  #workflow-modal-inner textarea {
    background: #f9fafb !important;
    border: 1px solid rgba(0,0,0,0.14) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    color-scheme: light;
    width: 100%;
    padding: 9px 13px;
    border-radius: 10px;
    font-family: var(--font);
    font-size: 0.855rem;
    font-weight: 500;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  }
  #workflow-modal-inner input:focus,
  #workflow-modal-inner select:focus,
  #workflow-modal-inner textarea:focus {
    border-color: var(--accent) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important;
  }
  #workflow-modal-inner input::placeholder,
  #workflow-modal-inner textarea::placeholder { color: #9a8aaa !important; -webkit-text-fill-color:#9a8aaa !important; }
  #workflow-modal-inner label { display:block; font-size:0.68rem; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:5px; }
  #workflow-modal-inner select {
    appearance:none; -webkit-appearance:none;
    background-color:#f9fafb !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111111' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:12px !important; padding-right:36px !important; cursor:pointer;
  }
  #workflow-modal-inner select:focus {
    background-color:#fff !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111111' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:12px !important;
  }
  #workflow-modal-inner select option { background:#fff !important; color:#111111 !important; }
  #workflow-modal-inner input[type=checkbox] {
    width:16px !important; height:16px; min-width:16px; padding:0; accent-color:#111111; cursor:pointer;
  }
  .wf-body { padding:18px 22px 22px; }
  .wf-header { padding:18px 22px; border-bottom:1px solid rgba(0,0,0,0.08); display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
  .wf-kicker { font-size:0.62rem; font-weight:800; color:rgba(0,0,0,0.12); letter-spacing:0.13em; text-transform:uppercase; margin-bottom:4px; }
  .wf-close { width:32px; height:32px; border-radius:50%; border:none; background:rgba(0,0,0,0.04); color:rgba(0,0,0,0.32); cursor:pointer; font-size:1.1rem; flex-shrink:0; }
  .wf-close:hover { background:rgba(220,38,38,0.15); color:#dc2626; }

  /* ── Shared modern modal header (b/w) ─────────────────────────────────── */
  .mhd { display:flex; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid rgba(0,0,0,0.08); flex-shrink:0; }
  .mhd-ico { width:42px; height:42px; border-radius:13px; background:#111; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.12rem; flex-shrink:0; box-shadow:0 6px 18px rgba(0,0,0,0.22); }
  .mhd-txt { flex:1; min-width:0; }
  .mhd-eyebrow { font-size:0.58rem; font-weight:800; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-faint); margin-bottom:3px; }
  .mhd-title { font-size:1.05rem; font-weight:800; letter-spacing:-0.02em; color:#111; line-height:1.15; }
  .mhd-sub { font-size:0.74rem; color:var(--text-muted); margin-top:3px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; }
  .mhd-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .mhd-close { width:32px; height:32px; border-radius:10px; border:none; background:rgba(0,0,0,0.05); color:var(--text-muted); cursor:pointer; font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:all 0.16s var(--ease-out); flex-shrink:0; }
  .mhd-close:hover { background:rgba(220,38,38,0.1); color:var(--red); transform:rotate(90deg); }
  .wf-summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-bottom:14px; }
  .wf-summary { border:1px solid rgba(0,0,0,0.07); background:#f9fafb; border-radius:12px; padding:11px 12px; min-width:0; transition:border-color 0.18s, box-shadow 0.18s; }
  .wf-summary:hover { border-color:rgba(0,0,0,0.14); box-shadow:0 2px 10px rgba(0,0,0,0.04); }
  .wf-summary-label { font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-faint); margin-bottom:5px; }
  .wf-summary-value { font-size:0.88rem; font-weight:750; color:var(--text); line-height:1.35; overflow-wrap:anywhere; }
  .wf-summary-sub { font-size:0.72rem; color:var(--text-muted); margin-top:3px; line-height:1.35; }
  .wf-stage-rail { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:16px; }
  .wf-step { position:relative; min-height:52px; border:1px solid rgba(0,0,0,0.07); background:#f9fafb; border-radius:12px; padding:8px 7px; color:var(--text-faint); font-size:0.65rem; font-weight:700; line-height:1.25; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; transition:all 0.18s ease; }
  .wf-step:hover { background:#fff; border-color:rgba(0,0,0,0.18); color:var(--text); }
  .wf-step .wf-step-icon { font-size:1rem; }
  .wf-step.done { border-color:rgba(34,197,94,0.35); background:rgba(34,197,94,0.08); color:rgba(134,239,172,0.9); }
  .wf-step.active { border-color:rgba(0,0,0,0.32); background:rgba(0,0,0,0.08); color:#d1d5db; box-shadow:0 0 0 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.08); }
  .wf-card-grid { display:grid; grid-template-columns:1fr; gap:12px; }
  .wf-card { border:1px solid rgba(0,0,0,0.07); background:#f9fafb; border-radius:14px; padding:16px; min-width:0; transition:border-color 0.18s ease; }
  .wf-card:has(input:focus),.wf-card:has(textarea:focus) { border-color:rgba(0,0,0,0.12); }
  .wf-card-wide { grid-column:1/-1; }
  .wf-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:12px; }
  .wf-card-title { font-size:0.86rem; font-weight:800; color:var(--text); }
  .wf-card-note { font-size:0.72rem; color:var(--text-muted); line-height:1.35; margin-top:3px; }
  .wf-pill { display:inline-flex; align-items:center; white-space:nowrap; padding:4px 8px; border-radius:999px; background:rgba(0,0,0,0.06); color:#111111; font-size:0.66rem; font-weight:800; }
  .wf-check-list { display:grid; gap:8px; }
  #workflow-modal-inner .wf-check-row {
    display:flex; align-items:flex-start; gap:10px; margin:0; padding:11px 12px; border:1px solid rgba(0,0,0,0.07); background:#f9fafb; border-radius:10px; color:var(--text); cursor:pointer; text-transform:none; letter-spacing:0; font-size:0.82rem; font-weight:650; transition:border-color 0.15s, background 0.15s;
  }
  #workflow-modal-inner .wf-check-row:hover { border-color:rgba(0,0,0,0.16); background:#fff; }
  #workflow-modal-inner .wf-check-row:has(input:checked) { border-color:rgba(17,17,17,0.28); background:#fff; }
  .wf-check-row strong { display:block; color:var(--text); font-size:0.82rem; line-height:1.25; }
  .wf-check-row small { display:block; color:var(--text-muted); font-size:0.69rem; font-weight:600; line-height:1.3; margin-top:2px; }
  .wf-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:11px; }
  .wf-field { display:flex; flex-direction:column; min-width:0; }
  .wf-photo-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
  .wf-photo-slot { width:80px; height:72px; border-radius:10px; border:1.5px dashed rgba(0,0,0,0.16); background:#f9fafb; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; position:relative; flex-shrink:0; transition:border-color 0.18s, background 0.18s; }
  .wf-photo-slot:hover { border-color:rgba(0,0,0,0.32); background:#fff; }
  .wf-photo-slot img { width:100%; height:100%; object-fit:cover; border-radius:9px; }
  .wf-photo-slot .wf-photo-placeholder { font-size:1.2rem; opacity:0.45; pointer-events:none; }
  .wf-photo-slot .wf-photo-remove { position:absolute; top:3px; right:3px; width:17px; height:17px; border-radius:50%; background:rgba(220,38,38,0.85); color:#fff; font-size:0.62rem; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity 0.15s; line-height:1; border:none; }
  .wf-photo-slot:hover .wf-photo-remove { opacity:1; }
  .wf-add-photo-btn { margin-top:8px; padding:6px 13px; border-radius:8px; border:1.5px dashed rgba(0,0,0,0.18); background:transparent; color:var(--text-muted); font-size:0.74rem; font-weight:700; cursor:pointer; transition:all 0.18s; font-family:var(--font); }
  .wf-add-photo-btn:hover { border-color:#111; color:#111; background:#f9fafb; }
  .wf-return-note { font-size:0.72rem; color:var(--text-muted); margin-top:8px; padding:9px 12px; border-radius:8px; background:#f9fafb; border:1px solid rgba(0,0,0,0.06); }
  .wf-actions-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .wf-footer { padding:14px 22px 18px; border-top:1px solid rgba(0,0,0,0.06); display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .wf-footer-hint { font-size:0.72rem; color:var(--text-muted); }
  #workflow-modal-inner .cd-wrap { width:100%; }
  #workflow-modal-inner .wf-header .cd-wrap { min-width:190px; }
  #workflow-modal-inner .cd-trigger {
    min-height:38px; padding:7px 34px 7px 11px; border-radius:8px;
    background-color:rgba(255,255,255,0.82); border-color:rgba(0,0,0,0.11);
    color:var(--text); font-family:var(--font); font-size:0.82rem; font-weight:600; letter-spacing:0;
    box-shadow:0 1px 0 rgba(255,255,255,0.65) inset;
  }
  #workflow-modal-inner .cd-trigger:hover,
  #workflow-modal-inner .cd-trigger.open { background-color:#fff; border-color:rgba(0,0,0,0.25); box-shadow:0 0 0 3px rgba(0,0,0,0.06); }
  #workflow-modal-inner .cd-panel {
    background:#fff; border-color:rgba(0,0,0,0.10);
    box-shadow:0 12px 32px rgba(20,10,40,0.14); z-index:6000; text-align:left;
  }
  #workflow-modal-inner .cd-item { color:var(--text); border-bottom-color:rgba(0,0,0,0.04); font-family:var(--font); font-size:0.82rem; font-weight:600; letter-spacing:0; text-align:left; }
  #workflow-modal-inner .cd-item:hover { background:rgba(0,0,0,0.04); color:var(--text); }
  #workflow-modal-inner .cd-item.cd-selected { color:#111111; }
  #workflow-modal-inner .cd-val,
  #workflow-modal-inner .cd-val.ph { color:var(--text) !important; opacity:1; }
  html.modal-white #workflow-modal-inner input,
  html.modal-white #workflow-modal-inner textarea {
    background:#fff !important; border-color:rgba(0,0,0,0.14) !important; color:#111111 !important; -webkit-text-fill-color:#111111 !important; color-scheme:light !important;
  }
  html.modal-white #workflow-modal-inner select {
    background-color:#fff !important; border-color:rgba(0,0,0,0.14) !important; color:#111111 !important; -webkit-text-fill-color:#111111 !important; color-scheme:light !important;
  }
  html.modal-white #workflow-modal-inner select option { background:#fff !important; color:#111111 !important; }
  html.modal-white #workflow-modal-inner input:focus,
  html.modal-white #workflow-modal-inner textarea:focus,
  html.modal-white #workflow-modal-inner select:focus { background:#fff !important; border-color:var(--accent-warm) !important; box-shadow:0 0 0 3px rgba(0,0,0,0.07) !important; }
  html.modal-white #workflow-modal-inner label,
  html.modal-white .wf-summary-label,
  html.modal-white .wf-card-note,
  html.modal-white .wf-summary-sub,
  html.modal-white .wf-footer-hint { color:#4b5563 !important; }
  html.modal-white .wf-summary,
  html.modal-white .wf-card,
  html.modal-white #workflow-modal-inner .wf-check-row,
  html.modal-white .wf-step { background:#f9fafb !important; border-color:rgba(0,0,0,0.07) !important; }
  html.modal-white .wf-summary-value,
  html.modal-white .wf-card-title,
  html.modal-white .wf-check-row strong { color:#1f1a13 !important; }
  #wf-contract-summary.no-id-warning { color: var(--red) !important; }
  html.modal-white .wf-check-row small { color:#5f5140 !important; }
  html.modal-white .wf-pill { background:rgba(0,0,0,0.06) !important; color:#111 !important; border:1px solid rgba(0,0,0,0.10); }
  html.modal-white .wf-step { color:#5f5140 !important; }
  html.modal-white .wf-step.done { background:rgba(22,163,74,0.1) !important; border-color:rgba(22,101,52,0.24) !important; color:#166534 !important; }
  html.modal-white .wf-step.active { background:rgba(0,0,0,0.07) !important; border-color:rgba(0,0,0,0.22) !important; color:#111111 !important; box-shadow:0 0 0 3px rgba(0,0,0,0.05) !important; }
  @media (max-width: 820px) {
    .wf-summary-grid, .wf-card-grid, .wf-mini-grid { grid-template-columns:1fr; }
    .wf-stage-rail { grid-template-columns:repeat(3,1fr); }
    .wf-footer { align-items:flex-start; flex-direction:column; }
  }

  /* ── WORKFLOW v2: Step-based sections ─────────────────────────────────── */
  .wf-stage-rail { grid-template-columns:repeat(7,1fr) !important; gap:5px !important; }
  @media (max-width: 820px) { .wf-stage-rail { grid-template-columns:repeat(4,1fr) !important; } }

  /* Section containers */
  .wf-section {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
  }
  .wf-section.wf-state-active {
    border-color: rgba(0,0,0,0.25);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05), 0 4px 20px rgba(0,0,0,0.06);
  }
  .wf-section.wf-state-done {
    border-color: rgba(34,197,94,0.25);
    background: #fafffe;
  }
  .wf-section.wf-state-done .wf-section-bd { display: none; }
  .wf-section.wf-expanded .wf-section-bd { display: block !important; }
  .wf-section-pending {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-color: rgba(0,0,0,0.11);
    text-align: center; padding: 20px;
  }

  /* Section header */
  .wf-section-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; cursor: pointer; gap: 12px;
    transition: background 0.15s;
  }
  .wf-section-hd:hover { background:rgba(0,0,0,0.025); }
  .wf-section-title { font-size: 0.88rem; font-weight: 800; color: #111111; letter-spacing: -0.01em; }
  .wf-section-sub { font-size: 0.72rem; color: #4b5563; margin-top: 2px; line-height: 1.3; }

  /* Section body */
  .wf-section-bd {
    padding: 0 16px 16px;
    border-top: 1px solid rgba(0,0,0,0.06);
  }
  .wf-state-done .wf-section-bd { border-top: none; }

  /* Step badge */
  .wf-step-badge {
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.11);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0; transition: all 0.18s;
  }
  .wf-state-active .wf-step-badge {
    background: linear-gradient(135deg, rgba(0,0,0,0.10), rgba(255,255,255,0.08));
    border-color: rgba(0,0,0,0.28);
    box-shadow: 0 2px 10px rgba(0,0,0,0.11);
  }
  .wf-state-done .wf-step-badge {
    background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.35);
  }
  .wf-step-badge-current {
    background: linear-gradient(135deg, rgba(0,0,0,0.08),rgba(255,255,255,0.25));
    border: 1px solid rgba(0,0,0,0.22);
    font-size: 1.2rem; width: 40px; height: 40px; border-radius: 12px;
  }

  /* Done badge */
  .wf-done-badge {
    display: inline-flex; align-items: center; padding: 3px 9px;
    border-radius: 100px; background: rgba(34,197,94,0.12);
    color: #15803d; font-size: 0.68rem; font-weight: 700;
    border: 1px solid rgba(34,197,94,0.28); white-space: nowrap;
  }
  .wf-collapse-ico {
    font-size: 0.65rem; color: rgba(0,0,0,0.30);
    transition: transform 0.2s; user-select: none;
  }
  .wf-state-done .wf-collapse-ico { transform: rotate(180deg); }
  .wf-expanded .wf-collapse-ico { transform: rotate(0deg) !important; }

  /* Section action buttons row */
  .wf-section-acts {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.06);
    justify-content: flex-end;
  }
  .wf-act-btn { min-width: 140px; justify-content: center; }

  /* IBAN Transfer Panel */
  .wf-iban-panel { background:#f9fafb; border:1px solid rgba(0,0,0,0.10); border-radius:14px; padding:16px 18px; text-align:left; }
  .wf-iban-number-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
  .wf-iban-sublabel { font-size:0.62rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:#1d4ed8; margin-bottom:3px; }
  .wf-iban-val { font-family:monospace; font-size:0.88rem; font-weight:700; color:#111111; letter-spacing:0.05em; flex:1; word-break:break-all; }
  .wf-iban-copy { padding:5px 11px; border-radius:7px; border:1px solid rgba(59,130,246,0.25); background:#fff; color:#1d4ed8; font-size:0.7rem; font-weight:700; cursor:pointer; transition:all 0.15s; white-space:nowrap; flex-shrink:0; }
  .wf-iban-copy:hover { background:#dbeafe; }
  .wf-iban-chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; margin-bottom:10px; }
  .wf-iban-chip { padding:7px 14px; border-radius:100px; border:1px solid rgba(59,130,246,0.22); background:#fff; color:#1d4ed8; font-size:0.78rem; font-weight:600; cursor:pointer; transition:all 0.18s; }
  .wf-iban-chip:hover { background:#eff6ff; }
  .wf-iban-chip.active { background:#2563eb; color:#fff; border-color:#2563eb; box-shadow:0 2px 8px rgba(37,99,235,0.25); }
  .wf-iban-amount-display { padding:12px 14px; border-radius:10px; background:#fff; border:1px solid rgba(59,130,246,0.16); }
  .wf-iban-amount-big { font-size:1.55rem; font-weight:800; color:#111111; }
  .wf-iban-amount-desc { font-size:0.71rem; color:#4b5563; margin-top:2px; }
  .wf-iban-receipt-section { border-top:1px solid rgba(59,130,246,0.14); padding-top:14px; margin-top:14px; }
  .wf-iban-receipt-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:9px; border:1.5px dashed rgba(59,130,246,0.35); background:rgba(59,130,246,0.04); color:#1d4ed8; font-size:0.82rem; font-weight:700; cursor:pointer; transition:all 0.15s; }
  .wf-iban-receipt-btn:hover { background:rgba(59,130,246,0.10); border-color:#2563eb; }
  .wf-iban-receipt-thumb { margin-top:10px; border-radius:10px; overflow:hidden; border:1px solid rgba(59,130,246,0.18); max-height:180px; display:flex; align-items:center; justify-content:center; background:transparent; }
  .wf-iban-receipt-thumb img { max-width:100%; max-height:180px; object-fit:contain; display:block; }
  .wf-iban-receipt-status { font-size:0.7rem; margin-top:6px; font-weight:700; }

  /* Read-only state: disable inputs, hide action buttons, hide add-photo btn */
  .wf-section.wf-state-done .wf-section-acts { display: none !important; }
  .wf-section.wf-state-done .wf-add-photo-btn { display: none !important; }
  .wf-section.wf-state-done input:not([type=checkbox]),
  .wf-section.wf-state-done select,
  .wf-section.wf-state-done textarea {
    pointer-events: none !important;
    opacity: 0.65 !important;
    background:rgba(0,0,0,0.12) !important;
  }
  /* Override done-state locks for return section when kept editable after completion */
  .wf-section.wf-state-done.wf-return-editable .wf-section-bd { display: block !important; }
  .wf-section.wf-state-done.wf-return-editable .wf-section-acts { display: flex !important; }
  .wf-section.wf-state-done.wf-return-editable .wf-add-photo-btn { display: inline-flex !important; }
  .wf-section.wf-state-done.wf-return-editable input:not([type=checkbox]),
  .wf-section.wf-state-done.wf-return-editable select,
  .wf-section.wf-state-done.wf-return-editable textarea {
    pointer-events: auto !important;
    opacity: 1 !important;
    background: #fff !important;
  }
  .wf-section.wf-state-done input[type=checkbox] { pointer-events: none !important; }
  .wf-section.wf-state-done .wf-check-row { pointer-events: none; }
  /* Completed: everything locked */
  .wf-completed-banner {
    text-align: center; padding: 32px 24px;
    border: 2px solid rgba(34,197,94,0.3);
    border-radius: 16px; background: linear-gradient(135deg, #f0fdf4, #fafffe);
  }

  /* Info grid for active rental summary */
  .wf-info-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 4px 0;
  }
  .wf-info-item { padding: 10px 12px; background:#f9fafb; border: 1px solid rgba(0,0,0,0.07); border-radius: 10px; }
  .wf-info-label { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 3px; }
  .wf-info-value { font-size: 0.85rem; font-weight: 650; color: #111111; }

  /* Photo slot: clickable to open lightbox */
  .wf-photo-slot.wf-clickable-photo { cursor: zoom-in; }
  .wf-photo-slot.wf-clickable-photo:hover img { opacity: 0.88; transform: scale(1.04); transition: all 0.18s; }

  /* Readonly photo slot (no remove button, no upload) */
  .wf-photo-slot-readonly {
    width: 80px; height: 72px; border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.08); background:#f9fafb;
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-in; overflow: hidden; position: relative; flex-shrink: 0;
  }
  .wf-photo-slot-readonly img { width:100%; height:100%; object-fit:cover; border-radius:9px; transition:opacity 0.15s,transform 0.18s; }
  .wf-photo-slot-readonly:hover img { opacity:0.85; transform:scale(1.04); }

  /* Confirmation message */
  .wf-confirm-msg {
    padding: 10px 14px; border-radius: 10px; font-size: 0.82rem; font-weight: 600;
    margin: 10px 0; animation: fadeInUp 0.22s var(--ease-out) both;
  }
  .wf-confirm-msg.success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
  .wf-confirm-msg.error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

  /* section body padding at top */
  .wf-section-bd { padding-top: 14px; }

  #booking-modal-inner .dp-wrapper { margin-bottom:0; }
  #booking-modal-inner .dp-trigger { background:rgba(255,255,255,0.05); border:1px solid rgba(0,0,0,0.12); border-radius:10px; color:#f3f4f6; }
  #booking-modal-inner .dp-trigger:hover { border-color:rgba(0,0,0,0.25); background:rgba(255,255,255,0.08); }
  #booking-modal-inner .dp-trigger.open { border-color:rgba(0,0,0,0.30); box-shadow:0 0 0 3px rgba(0,0,0,0.07); }
  #booking-modal-inner .dp-t-val.ph { color:rgba(255,255,255,0.18); }

  /* --- CAR MODAL: date picker trigger -------------------------------------- */
  #car-modal-inner .dp-trigger { background:rgba(255,255,255,0.05); border:1px solid rgba(0,0,0,0.12); border-radius:10px; color:#f3f4f6; }
  #car-modal-inner .dp-trigger:hover { border-color:rgba(0,0,0,0.25); background:rgba(255,255,255,0.08); }
  #car-modal-inner .dp-trigger.open { border-color:rgba(0,0,0,0.30); background:rgba(255,255,255,0.09); box-shadow:0 0 0 3px rgba(0,0,0,0.07); }
  #car-modal-inner .dp-t-val.ph { color:rgba(255,255,255,0.18); }

  /* --- DARK CALENDAR THEME (car & booking modal pickers) ------------------- */
  .dp-cal.dp-dark {
    background: #111111 !important;
    border-color: rgba(0,0,0,0.12) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(0,0,0,0.08) !important;
  }
  .dp-cal.dp-dark .dp-cal-nav { border-color: rgba(0,0,0,0.12); color: rgba(255,255,255,0.32); background: none; }
  .dp-cal.dp-dark .dp-cal-nav:hover { background: rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.25); color: var(--accent-warm); }
  .dp-cal.dp-dark .dp-cal-month { color: #f3f4f6; }
  .dp-cal.dp-dark .dp-cal-select { background:rgba(255,255,255,0.05); border-color:rgba(0,0,0,0.12); color:#f3f4f6; }
  .dp-cal.dp-dark .dp-cal-select:hover, .dp-cal.dp-dark .dp-cal-select.open { background:rgba(255,255,255,0.09); border-color:rgba(0,0,0,0.30); box-shadow:0 0 0 3px rgba(0,0,0,0.07); }
  .dp-cal.dp-dark .dp-cal-menu { background:rgba(18,18,18,0.98); border-color:rgba(0,0,0,0.13); box-shadow:0 18px 42px rgba(0,0,0,0.48); scrollbar-color:rgba(0,0,0,0.12)transparent; }
  .dp-cal.dp-dark .dp-cal-option { color:rgba(229,234,245,0.85); }
  .dp-cal.dp-dark .dp-cal-option:hover { background:rgba(0,0,0,0.07); color:#f3f4f6; }
  .dp-cal.dp-dark .dp-cal-option.sel { color:#fff; }
  .dp-cal.dp-dark .dp-wd { color:rgba(255,255,255,0.25); }
  .dp-cal.dp-dark .dp-d { color: rgba(229,234,245,0.8); }
  .dp-cal.dp-dark .dp-d:hover:not(:disabled):not(.sel):not(.rs):not(.re) { background: rgba(0,0,0,0.08); }
  .dp-cal.dp-dark .dp-d.today:not(.sel):not(.rs):not(.re) { color: var(--accent-warm); }
  .dp-cal.dp-dark .dp-d:disabled { color: rgba(229,234,245,0.18); opacity: 0.4; }

  /* --- BRAND DROPDOWN ITEMS ------------------------------------------------- */
  .brand-dd-item {
    padding: 9px 14px; cursor: pointer; font-size: 0.85rem; color: rgba(229,234,245,0.85);
    border-bottom: 1px solid rgba(0,0,0,0.06); transition: background 0.12s; font-family: var(--font);
  }
  .brand-dd-item:hover { background: rgba(0,0,0,0.07); color: #f3f4f6; }
  .brand-dd-item:last-child { border-bottom: none; }
  /* White mode: brand/model dropdowns */
  html.modal-white #brand-dropdown,
  html.modal-white #model-dropdown {
    background: #fff !important;
    border-color: rgba(0,0,0,0.12) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  }
  html.modal-white #brand-dropdown .brand-dd-item,
  html.modal-white #model-dropdown .brand-dd-item { color: var(--text) !important; border-bottom-color: rgba(0,0,0,0.05) !important; }
  html.modal-white #brand-dropdown .brand-dd-item:hover,
  html.modal-white #model-dropdown .brand-dd-item:hover { background: rgba(0,0,0,0.05) !important; }

  /* --- WHITE MODE: car & booking modal dp-trigger --------------------------- */
  html.modal-white #car-modal-inner .dp-trigger,
  html.modal-white #booking-modal-inner .dp-trigger {
    background: #f9fafb !important; border-color: rgba(0,0,0,0.16) !important; color: var(--text) !important;
  }
  html.modal-white #car-modal-inner .dp-trigger:hover,
  html.modal-white #booking-modal-inner .dp-trigger:hover { background: #fff !important; border-color:rgba(0,0,0,0.12) !important; }
  html.modal-white #car-modal-inner .dp-trigger.open,
  html.modal-white #booking-modal-inner .dp-trigger.open { background: #fff !important; border-color: var(--accent-warm) !important; box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important; }
  html.modal-white #car-modal-inner .dp-t-val.ph,
  html.modal-white #booking-modal-inner .dp-t-val.ph { color: var(--text-faint) !important; }
  html.modal-white #car-modal-inner .dp-t-ico,
  html.modal-white #booking-modal-inner .dp-t-ico { color: var(--accent-warm) !important; }

  /* --- WHITE MODE: car & booking modal inputs clearly visible --------------- */
  html.modal-white #car-modal-inner input,
  html.modal-white #car-modal-inner textarea,
  html.modal-white #booking-modal-inner input,
  html.modal-white #booking-modal-inner textarea {
    background: #f9fafb !important;
    border: 1px solid rgba(0,0,0,0.14) !important;
    color: var(--text) !important;
    color-scheme: light !important;
  }
  html.modal-white #car-modal-inner select,
  html.modal-white #booking-modal-inner select {
    background-color: #f9fafb !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111111' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    border: 1px solid rgba(0,0,0,0.14) !important;
    color: var(--text) !important;
    color-scheme: light !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 36px !important;
  }
  html.modal-white #car-modal-inner input:focus,
  html.modal-white #car-modal-inner textarea:focus,
  html.modal-white #booking-modal-inner input:focus,
  html.modal-white #booking-modal-inner textarea:focus {
    background: #fff !important;
    border-color: var(--accent-warm) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important;
  }
  html.modal-white #car-modal-inner select:focus,
  html.modal-white #booking-modal-inner select:focus {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111111' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    border-color: var(--accent-warm) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important;
  }
  html.modal-white #car-modal-inner input::placeholder,
  html.modal-white #car-modal-inner textarea::placeholder,
  html.modal-white #booking-modal-inner input::placeholder,
  html.modal-white #booking-modal-inner textarea::placeholder { color: var(--text-faint) !important; }
  html.modal-white #car-modal-inner select option,
  html.modal-white #booking-modal-inner select option { background: #fff !important; color: var(--text) !important; }
  html.modal-white #car-modal-inner label { color: var(--text-muted) !important; }
  html.modal-white #booking-modal-inner label { color: var(--text-muted) !important; font-size: 0.72rem !important; }
  html.modal-white .id-upload-card { background:#fff !important; border-color:rgba(0,0,0,0.13) !important; }
  html.modal-white .id-upload-preview { background:#f9fafb !important; border-color:rgba(0,0,0,0.08) !important; color:var(--text-faint) !important; }
  html.modal-white .customer-info-field { background:#fff !important; border-color:rgba(0,0,0,0.08) !important; }
  html.modal-white .customer-info-label { color:var(--text-muted) !important; }
  html.modal-white .customer-info-value { color:var(--text) !important; }
  html.modal-white .customer-id-image { background:#fff !important; border-color:rgba(0,0,0,0.08) !important; color:var(--text-faint) !important; }
  html.modal-white #car-modal-inner input:-webkit-autofill,
  html.modal-white #booking-modal-inner input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f9fafb inset !important;
    -webkit-text-fill-color: var(--text) !important;
  }
  html.modal-white #car-modal-inner input[type=date]::-webkit-calendar-picker-indicator,
  html.modal-white #booking-modal-inner input[type=date]::-webkit-calendar-picker-indicator,
  html.modal-white #booking-modal-inner input[type=time]::-webkit-calendar-picker-indicator { filter: none !important; }
  html.modal-white #booking-modal-inner .dp-trigger {
    background: #f9fafb !important; border-color: rgba(0,0,0,0.14) !important; color: var(--text) !important;
  }
  html.modal-white #booking-modal-inner .bk-section-head { color: var(--text-muted) !important; }
  html.modal-white #booking-modal-inner .bk-section-head span { background: var(--accent-warm) !important; }

  /* Custom time picker */
  .tp-wrap { position:relative; }
  .tp-btn { width:100%; padding:9px 13px; background:rgba(255,255,255,0.05); border:1px solid rgba(0,0,0,0.12); border-radius:10px; color:#f3f4f6; font-size:0.855rem; font-family:var(--font); cursor:pointer; display:flex; align-items:center; gap:8px; transition:border-color 0.2s,background 0.2s; text-align:left; }
  .tp-btn:hover,.tp-btn.open { border-color:rgba(0,0,0,0.30) !important; background:rgba(255,255,255,0.09) !important; box-shadow:0 0 0 3px rgba(0,0,0,0.07); }
  .tp-drop { position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:600; background:rgba(18,18,18,0.98); border:1px solid rgba(0,0,0,0.13); border-radius:12px; padding:10px; box-shadow:0 20px 60px rgba(0,0,0,0.7); }
  .tp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
  .tp-chip { padding:7px 3px; border-radius:7px; font-size:0.71rem; font-weight:600; color:rgba(255,255,255,0.32); background:transparent; border:1px solid transparent; cursor:pointer; text-align:center; transition:all 0.12s; line-height:1; }
  .tp-chip:hover { background:rgba(0,0,0,0.08); color:#f3f4f6; border-color:rgba(0,0,0,0.12); }
  .tp-chip.tp-active { background:#ffffff; color:#111111; border-color:transparent; font-weight:700; }
  .tp-sep { grid-column:1/-1; height:1px; background:rgba(0,0,0,0.08); margin:4px 0; }
  html.modal-white #booking-modal-inner .tp-btn {
    background:#f9fafb !important;
    border-color:rgba(0,0,0,0.14) !important;
    color:var(--text) !important;
  }
  html.modal-white #booking-modal-inner .tp-btn:hover,
  html.modal-white #booking-modal-inner .tp-btn.open {
    background:#fff !important;
    border-color:rgba(0,0,0,0.12)!important;
    box-shadow:0 0 0 3px rgba(0,0,0,0.07) !important;
  }
  html.modal-white #booking-modal-inner .tp-drop {
    background:#fff !important;
    border-color:rgba(0,0,0,0.12) !important;
    box-shadow:0 12px 40px rgba(0,0,0,0.15) !important;
  }
  html.modal-white #booking-modal-inner .tp-chip { color:var(--text-muted) !important; }
  html.modal-white #booking-modal-inner .tp-chip:hover { background:rgba(0,0,0,0.05) !important; color:var(--text) !important; }

  /* WHITE MODE: pickup/return method buttons → dark text on light bg */
  html.modal-white #bk-pickup-store-btn,
  html.modal-white #bk-pickup-location-btn,
  html.modal-white #bk-return-same-btn,
  html.modal-white #bk-return-branch-btn {
    color: var(--text) !important;
    border-color: rgba(0,0,0,0.18) !important;
    background: rgba(0,0,0,0.04) !important;
  }
  /* WHITE MODE: active time chip → dark on light bg */
  html.modal-white #booking-modal-inner .tp-chip.tp-active { background:#111111 !important; color:#fff !important; }

  /* CAR THUMBNAIL */
  .car-thumb { width:80px; height:60px; border-radius:10px; background:var(--bg); border:1px solid var(--border); overflow:hidden; position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--text-faint); font-size:1.2rem; box-shadow:0 2px 12px rgba(0,0,0,0.1); cursor:pointer; transition:box-shadow 0.15s; }
  .car-thumb:hover { box-shadow:0 4px 20px rgba(0,0,0,0.2); }
  .car-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:auto; transition:transform 0.2s; filter:contrast(1.08) saturate(1.12); will-change:transform; }
  .car-thumb:hover img { transform:scale(1.06); }
  .branch-chip { display:inline-flex; align-items:center; gap:4px; margin-top:4px; padding:3px 7px; border-radius:100px; background:rgba(0,0,0,0.06); color:var(--accent-warm); font-size:0.68rem; font-weight:700; }
  .branch-address-wrap { position:relative; }
  .branch-address-suggestions {
    position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:1200;
    background:rgba(18,18,18,0.98); border:1px solid rgba(0,0,0,0.13); border-radius:10px;
    max-height:210px; overflow-y:auto; box-shadow:0 16px 40px rgba(0,0,0,0.5); display:none;
  }
  .branch-address-item { padding:10px 14px; cursor:pointer; font-size:0.82rem; color:rgba(229,234,245,0.86); border-bottom:1px solid rgba(0,0,0,0.06); line-height:1.35; }
  .branch-address-item:hover { background:rgba(0,0,0,0.07); color:#f3f4f6; }
  .branch-address-selected { display:none; margin-top:7px; padding:9px 12px; background:rgba(0,0,0,0.05); border:1px solid rgba(0,0,0,0.11); border-radius:8px; font-size:0.82rem; color:rgba(255,255,255,0.75); align-items:flex-start; gap:7px; line-height:1.4; }
  .branch-manager-list { display:flex; flex-direction:column; gap:9px; }
  .branch-manager-row {
    display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px;
    border:1px solid rgba(0,0,0,0.10); border-radius:8px; background:rgba(255,255,255,0.05);
  }
  .branch-manager-name { font-size:0.9rem; font-weight:800; color:#f3f4f6; }
  .branch-manager-meta { margin-top:3px; font-size:0.72rem; color:rgba(255,255,255,0.32); line-height:1.35; }
  .branch-manager-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; }
  html.modal-white .branch-address-suggestions { background:#fff; border-color:rgba(0,0,0,0.12); box-shadow:0 12px 32px rgba(0,0,0,0.12); }
  html.modal-white .branch-address-item { color:var(--text); border-bottom-color:rgba(0,0,0,0.05); }
  html.modal-white .branch-address-item:hover { background:rgba(0,0,0,0.04); color:var(--text); }
  html.modal-white .branch-address-selected { background:rgba(0,0,0,0.04); color:var(--text-muted); }
  html.modal-white .branch-manager-row { background:#f9fafb; border-color:rgba(0,0,0,0.10); }
  html.modal-white .branch-manager-name { color:var(--text); }
  html.modal-white .branch-manager-meta { color:var(--text-muted); }

  /* PHONE PICKER */
  .phone-picker { position:relative; flex-shrink:0; }
  .phone-picker-trigger { display:flex; align-items:center; gap:5px; padding:0 10px; height:40px; cursor:pointer; border-radius:10px 0 0 10px; border:1px solid rgba(0,0,0,0.12); border-right:none; background:rgba(255,255,255,0.03); min-width:92px; transition:border-color 0.15s; user-select:none; }
  .phone-picker-trigger:hover { border-color:rgba(0,0,0,0.25); }
  .phone-picker-flag { width:20px; height:14px; border-radius:2px; object-fit:cover; flex-shrink:0; }
  .phone-picker-iso { font-size:0.68rem; font-weight:700; letter-spacing:0.04em; color:rgba(255,255,255,0.48); flex-shrink:0; }
  .phone-picker-dial { font-size:0.82rem; font-weight:600; color:var(--text); flex:1; }
  .phone-picker-arrow { font-size:0.6rem; color:rgba(255,255,255,0.25); }
  .phone-picker-dropdown { position:absolute; top:calc(100% + 4px); left:0; width:250px; z-index:2000; background:rgba(18,18,18,0.99); border:1px solid rgba(0,0,0,0.13); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,0.6); overflow:hidden; }
  .phone-picker-search { width:100%; padding:8px 11px; background:rgba(255,255,255,0.06); border:1px solid rgba(0,0,0,0.12); border-radius:8px; color:#f3f4f6; font-size:0.8rem; font-family:var(--font); outline:none; box-sizing:border-box; }
  .phone-picker-search::placeholder { color:rgba(255,255,255,0.25); }
  .phone-picker-list { max-height:210px; overflow-y:auto; scrollbar-width:none; }
  .phone-picker-item { display:flex; align-items:center; gap:7px; padding:7px 12px; cursor:pointer; transition:background 0.1s; font-size:0.81rem; color:#f3f4f6; }
  .phone-picker-item:hover, .phone-picker-item.pci-selected { background:rgba(0,0,0,0.08); }
  .phone-picker-item img { width:20px; height:14px; border-radius:2px; object-fit:cover; flex-shrink:0; }
  .phone-picker-item .pci-iso { font-size:0.67rem; font-weight:700; color:rgba(255,255,255,0.32); width:22px; flex-shrink:0; }
  .phone-picker-item .pci-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .phone-picker-item .pci-dial { font-size:0.76rem; color:rgba(255,255,255,0.25); flex-shrink:0; }
  #booking-modal-inner .phone-picker-dial { color:#f3f4f6 !important; }
  #booking-modal-inner .phone-picker-iso { color:rgba(255,255,255,0.48) !important; }
  html.modal-white .phone-picker-trigger { background:rgba(0,0,0,0.03) !important; border-color:rgba(0,0,0,0.13) !important; }
  html.modal-white .phone-picker-dial { color:var(--text) !important; }
  html.modal-white .phone-picker-dropdown { background:#fff !important; border-color:rgba(0,0,0,0.12) !important; box-shadow:0 12px 40px rgba(0,0,0,0.15) !important; }
  html.modal-white .phone-picker-search { background:#f9fafb !important; border-color:rgba(0,0,0,0.13) !important; color:var(--text) !important; }
  html.modal-white .phone-picker-search::placeholder { color:rgba(90,74,110,0.4) !important; }
  html.modal-white .phone-picker-item { color:var(--text) !important; }
  html.modal-white .phone-picker-item:hover, html.modal-white .phone-picker-item.pci-selected { background:rgba(0,0,0,0.05) !important; }
  html.modal-white .phone-picker-item .pci-iso { color:rgba(90,74,110,0.7) !important; }
  html.modal-white .phone-picker-item .pci-dial { color:rgba(90,74,110,0.6) !important; }
  html.modal-white #booking-modal-inner .phone-picker-dial { color:var(--text) !important; }
  html.modal-white #booking-modal-inner .phone-picker-iso { color:var(--text-muted) !important; }
  .branch-phone-row { display:flex; gap:0; }
  .branch-phone-row .phone-picker-trigger { height:40px; border-radius:10px 0 0 10px; min-width:108px; }

  /* ── Settings page phone picker (light theme) ────────────── */
  .st-phone-picker { position:relative; flex-shrink:0; }
  .st-phone-trigger {
    display:flex; align-items:center; gap:6px; padding:0 12px; height:42px;
    cursor:pointer; border-radius:12px 0 0 12px;
    border:1.5px solid var(--border-dark); border-right:none;
    background:#fafafa; min-width:90px; transition:border-color 0.15s,background 0.15s;
    user-select:none;
  }
  .st-phone-trigger:hover { border-color:#999; background:#f5f5f5; }
  .st-phone-flag { width:20px; height:14px; border-radius:2px; object-fit:cover; flex-shrink:0; }
  .st-phone-dial { font-size:0.82rem; font-weight:700; color:var(--text); flex:1; }
  .st-phone-arrow { font-size:0.6rem; color:var(--text-faint); }
  .st-phone-dropdown {
    position:absolute; top:calc(100% + 4px); left:0; min-width:260px; z-index:99999;
    background:#fff; border:1px solid rgba(0,0,0,0.12); border-radius:14px;
    box-shadow:0 16px 48px rgba(0,0,0,0.18),0 4px 12px rgba(0,0,0,0.08); overflow:hidden;
  }
  .st-phone-search {
    width:100%; padding:8px 11px; background:#f9fafb; border:1px solid rgba(0,0,0,0.10);
    border-radius:8px; color:var(--text); font-size:0.8rem; font-family:var(--font);
    outline:none; box-sizing:border-box;
  }
  .st-phone-search::placeholder { color:var(--text-faint); }
  .st-phone-list { max-height:220px; overflow-y:auto; scrollbar-width:none; }
  .st-phone-item {
    display:flex; align-items:center; gap:7px; padding:7px 12px; cursor:pointer;
    transition:background 0.1s; font-size:0.81rem; color:var(--text);
  }
  .st-phone-item:hover, .st-phone-item.pci-sel { background:rgba(0,0,0,0.05); }
  .st-phone-item img { width:20px; height:14px; border-radius:2px; object-fit:cover; flex-shrink:0; }
  .st-phone-item .sp-iso { font-size:0.67rem; font-weight:700; color:var(--text-faint); width:24px; flex-shrink:0; }
  .st-phone-item .sp-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .st-phone-item .sp-dial { font-size:0.74rem; color:var(--text-muted); flex-shrink:0; }
  .branch-phone-row #branch-phone { flex:1; border-radius:0 10px 10px 0 !important; min-width:0; }

  /* SIDEBAR CLOCK */
  #sidebar-clock { padding:10px 14px; background:rgba(255,255,255,0.03); border:1px solid rgba(0,0,0,0.08); border-radius:13px; margin-bottom:10px; }
  #sidebar-clock-time { font-size:1.15rem; font-weight:700; color:#f3f4f6; letter-spacing:0.06em; font-variant-numeric:tabular-nums; }
  #sidebar-clock-date { font-size:0.68rem; color:rgba(255,255,255,0.25); margin-top:2px; }

  /* AVAILABILITY PAGE */
  .avail-search-card { background:rgba(255,255,255,0.88); border:1px solid var(--border); border-radius:18px; padding:1.75rem 2rem; margin-bottom:2rem; box-shadow:0 4px 24px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9); backdrop-filter:blur(12px); position:relative; z-index:20; overflow:visible; }
  .avail-search-row { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
  .avail-date-group { display:flex; flex-direction:column; gap:5px; }
  .avail-date-group label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); }
  .avail-branch-group { min-width:240px; flex:0 0 260px; }
  .avail-branch-group .cd-wrap { width:100%; }
  .avail-branch-group .cd-trigger {
    min-height:42px; background-color:#fff; border-color:rgba(0,0,0,0.13); color:var(--text);
    font-family:var(--font); font-size:0.875rem; font-weight:650; border-radius:10px;
    box-shadow:0 1px 0 rgba(255,255,255,0.75) inset;
  }
  .avail-branch-group .cd-trigger:hover,
  .avail-branch-group .cd-trigger.open { background-color:#fff; border-color:rgba(0,0,0,0.12); box-shadow:0 0 0 3px rgba(0,0,0,0.07); }
  .avail-branch-group .cd-val,
  .avail-branch-group .cd-val.ph { color:var(--text) !important; opacity:1; }
  .avail-branch-group .cd-panel {
    background:#fff; border-color:rgba(0,0,0,0.11); z-index:6000;
    box-shadow:0 18px 44px rgba(20,10,40,0.18);
  }
  .avail-branch-group .cd-item { color:var(--text); border-bottom-color:rgba(0,0,0,0.04); font-weight:600; }
  .avail-branch-group .cd-item:hover { background:rgba(0,0,0,0.04); color:var(--text); }
  .avail-branch-group .cd-item.cd-selected { color:#111111; }
  .avail-sep { color:var(--accent-warm); font-family:var(--font); font-size:1rem; font-weight:800; line-height:42px; align-self:flex-end; padding-bottom:0; }
  .avail-results-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
  #avail-results { position:relative; z-index:1; }
  .avail-results-title { font-size:0.95rem; font-weight:700; }
  .avail-results-meta { font-size:0.8rem; color:var(--text-muted); }
  .avail-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.25rem; }
  .avail-card { background:rgba(255,255,255,0.9); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s; backdrop-filter:blur(8px); display:flex; flex-direction:column; }
  .avail-card:hover { box-shadow:0 16px 48px rgba(0,0,0,0.11), 0 2px 8px rgba(0,0,0,0.06); transform:translateY(-4px); border-color:rgba(0,0,0,0.16); }
  .avail-img-wrap { position:relative; width:100%; height:200px; background:linear-gradient(135deg,#f3f4f6 0%,#e5e7eb 100%); display:flex; align-items:center; justify-content:center; font-size:2.8rem; overflow:hidden; }
  .avail-img-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
  .avail-img-wrap::after { display:none; }
  .avail-img-wrap .avail-car-emoji { position:relative; z-index:2; }
  .avail-card-body { padding:1.1rem 1.2rem 1.2rem; display:flex; flex-direction:column; flex:1; }
  .avail-card-name { font-size:0.95rem; font-weight:700; letter-spacing:-0.02em; margin-bottom:2px; }
  .avail-card-sub { font-size:0.75rem; color:var(--text-muted); margin-bottom:10px; min-height:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .avail-badges { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
  .avail-badge { padding:2px 9px; border-radius:100px; font-size:0.67rem; font-weight:700; background:var(--gold-light); color:#111111; border:1px solid rgba(0,0,0,0.11); }
  .avail-price { font-size:1.35rem; font-weight:700; letter-spacing:-0.03em; line-height:1; background:linear-gradient(135deg,#111111,#d1d5db); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
  .avail-price em { font-size:0.75rem; font-weight:400; color:var(--text-muted); font-style:normal; -webkit-text-fill-color:var(--text-muted); }
  .avail-price-sub { font-size:0.72rem; color:var(--text-muted); margin:4px 0 12px; }
  #car-detail-inner::-webkit-scrollbar { display:none; }
  #booking-modal-inner > div[style*="overflow-y"]::-webkit-scrollbar { display:none; }
  @keyframes pulse-dot {
    0%, 100% { opacity:1; transform:scale(1); }
    50% { opacity:0.35; transform:scale(0.65); }
  }

  /* --- CUSTOM SELECT DROPDOWN ------------------------------------------------ */
  .cd-wrap { position: relative; width: 100%; }
  .cd-trigger {
    display: flex; align-items: center; width: 100%;
    padding: 9px 36px 9px 13px;
    background-color: rgba(255,255,255,0.05);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; background-size: 12px;
    border: 1px solid rgba(0,0,0,0.12); border-radius: 10px;
    color: #f3f4f6; font-family: var(--font); font-size: 0.875rem;
    cursor: pointer; user-select: none; text-align: left;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    outline: none; box-sizing: border-box; min-height: 38px;
  }
  .cd-trigger:hover { border-color: rgba(0,0,0,0.25); background-color: rgba(255,255,255,0.08); }
  .cd-trigger.open { border-color: rgba(0,0,0,0.30); background-color: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(0,0,0,0.07); }
  .cd-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cd-val.ph { color:rgba(255,255,255,0.25); }
  .cd-panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000;
    background: rgba(18,18,18,0.98); border: 1px solid rgba(0,0,0,0.13);
    border-radius: 10px; max-height: 220px; overflow-y: auto;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5); scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.12) transparent; display: none;
  }
  .cd-panel.open { display: block; }
  .cd-search {
    display: block; width: calc(100% - 16px); margin: 6px 8px 4px;
    padding: 7px 10px; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(0,0,0,0.12); border-radius: 7px;
    color: #f3f4f6; font-size: 0.8rem; font-family: var(--font); outline: none; box-sizing: border-box;
  }
  .cd-search::placeholder { color:rgba(255,255,255,0.25); }
  .cd-list { }
  .cd-item {
    padding: 9px 14px; cursor: pointer; font-size: 0.855rem;
    color: rgba(229,234,245,0.85); border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: background 0.12s; font-family: var(--font);
  }
  .cd-item:hover { background: rgba(0,0,0,0.07); color: #f3f4f6; }
  .cd-item.cd-selected { color: #d1d5db; font-weight: 600; }
  .cd-item:last-child { border-bottom: none; }
  .table-toolbar .cd-wrap { width: 180px; flex: 0 0 180px; z-index: 30; }
  .table-toolbar .cd-trigger {
    min-height:34px; padding:7px 34px 7px 11px; border-radius:8px;
    background-color:rgba(255,255,255,0.78); border-color:rgba(0,0,0,0.11);
    color:var(--text); font-family:var(--font); font-size:0.82rem; font-weight:600; letter-spacing:0; box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
  }
  .table-toolbar .cd-trigger:hover,
  .table-toolbar .cd-trigger.open { background-color:#fff; border-color:rgba(0,0,0,0.25); box-shadow:0 0 0 3px rgba(0,0,0,0.06); }
  .table-toolbar .cd-panel { background:#fff; border-color:rgba(0,0,0,0.10); box-shadow:0 12px 32px rgba(20,10,40,0.12); z-index: 3000; }
  .table-toolbar .cd-item { color:var(--text); border-bottom-color:rgba(0,0,0,0.04); font-family:var(--font); font-size:0.82rem; font-weight:600; letter-spacing:0; }
  .table-toolbar .cd-item:hover { background:rgba(0,0,0,0.04); color:var(--text); }
  .table-toolbar .cd-item.cd-selected { color:#111111; }
  .table-toolbar .cd-val,
  .table-toolbar .cd-val.ph { color:var(--text) !important; opacity:1; }

  /* --- LIGHT custom selects: white modal cards (.modal-card) --------------- */
  .modal-card .cd-wrap { width: 100%; }
  .modal-card .cd-trigger {
    background-color: #fff; border: 1.5px solid var(--border-dark);
    border-radius: 10px; color: var(--text);
    font-family: var(--font); font-size: 0.875rem; font-weight: 500; min-height: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .modal-card .cd-trigger:hover { border-color: rgba(0,0,0,0.3); background-color: #fff; }
  .modal-card .cd-trigger.open { border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,0.07); background-color: #fff; }
  .modal-card .cd-val, .modal-card .cd-val.ph { color: var(--text) !important; opacity: 1; }
  .modal-card .cd-panel { background: #fff; border-color: rgba(0,0,0,0.12); box-shadow: 0 14px 36px rgba(20,10,40,0.16); z-index: 5000; }
  .modal-card .cd-item { color: var(--text); border-bottom-color: rgba(0,0,0,0.05); font-family: var(--font); font-size: 0.855rem; font-weight: 500; }
  .modal-card .cd-item:hover { background: rgba(0,0,0,0.04); color: #111; }
  .modal-card .cd-item.cd-selected { color: #111; font-weight: 700; }

  /* --- LIGHT custom selects: settings page (#page-settings) --------------- */
  #page-settings .cd-wrap { width: auto; }
  #page-settings .cd-trigger {
    background-color: #fff; border: 1.5px solid var(--border-dark);
    border-radius: 10px; color: var(--text);
    font-family: var(--font); font-size: 0.82rem; font-weight: 600; min-height: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  #page-settings .cd-trigger:hover { border-color: rgba(0,0,0,0.3); background-color: #fff; }
  #page-settings .cd-trigger.open { border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,0.07); background-color: #fff; }
  #page-settings .cd-val, #page-settings .cd-val.ph { color: var(--text) !important; opacity: 1; }
  #page-settings .cd-panel { background: #fff; border-color: rgba(0,0,0,0.12); box-shadow: 0 14px 36px rgba(20,10,40,0.16); z-index: 500; }
  #page-settings .cd-item { color: var(--text); border-bottom-color: rgba(0,0,0,0.05); font-family: var(--font); font-size: 0.82rem; font-weight: 600; }
  #page-settings .cd-item:hover { background: rgba(0,0,0,0.04); color: #111; }
  #page-settings .cd-item.cd-selected { color: #111; font-weight: 700; }

  /* Integration channel on/off toggle row (Settings → Integrations cards) */
  .st-int-toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.06);
  }
  .st-int-toggle-text { min-width: 0; }
  .st-int-toggle-name { font-size: 0.82rem; font-weight: 700; color: var(--text); }
  .st-int-toggle-hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

  /* Custom select inside the dynamic Security-Deposit modal (white modal) */
  #deposit-modal-dyn .cd-wrap { width: 130px; flex: 0 0 130px; }
  #deposit-modal-dyn .cd-trigger {
    background-color: #f5f5f5; border: 1px solid rgba(0,0,0,0.14);
    border-radius: 10px; color: var(--text); font-weight: 600;
    font-family: var(--font); font-size: 0.875rem; min-height: 40px;
    padding: 9px 34px 9px 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  #deposit-modal-dyn .cd-trigger:hover { border-color: rgba(0,0,0,0.3); background-color: #fff; }
  #deposit-modal-dyn .cd-trigger.open { border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,0.07); background-color: #fff; }
  #deposit-modal-dyn .cd-val, #deposit-modal-dyn .cd-val.ph { color: var(--text) !important; opacity: 1; }
  #deposit-modal-dyn .cd-panel { background: #fff; border-color: rgba(0,0,0,0.12); box-shadow: 0 14px 36px rgba(20,10,40,0.16); z-index: 6000; }
  #deposit-modal-dyn .cd-item { color: var(--text); border-bottom-color: rgba(0,0,0,0.05); font-family: var(--font); font-size: 0.855rem; font-weight: 600; }
  #deposit-modal-dyn .cd-item:hover { background: rgba(0,0,0,0.04); color: #111; }
  #deposit-modal-dyn .cd-item.cd-selected { color: #111; font-weight: 700; }

  /* --- WHITE MODE: custom dropdowns (car & booking modals) -------------------- */
  html.modal-white #car-modal-inner .cd-trigger,
  html.modal-white #booking-modal-inner .cd-trigger {
    background-color: #f9fafb !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111111' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 13px center !important; background-size: 12px !important;
    border-color: rgba(0,0,0,0.14) !important; color: var(--text) !important;
  }
  html.modal-white #car-modal-inner .cd-trigger:hover,
  html.modal-white #booking-modal-inner .cd-trigger:hover { background-color: #fff !important; border-color:rgba(0,0,0,0.12) !important; }
  html.modal-white #car-modal-inner .cd-trigger.open,
  html.modal-white #booking-modal-inner .cd-trigger.open { background-color: #fff !important; border-color: var(--accent-warm) !important; box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important; }
  html.modal-white #car-modal-inner .cd-val.ph,
  html.modal-white #booking-modal-inner .cd-val.ph { color: var(--text-faint) !important; }
  html.modal-white #car-modal-inner .cd-panel,
  html.modal-white #booking-modal-inner .cd-panel { background: #fff !important; border-color: rgba(0,0,0,0.11) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important; }
  html.modal-white #car-modal-inner .cd-search,
  html.modal-white #booking-modal-inner .cd-search { background: #f9fafb !important; border-color: rgba(0,0,0,0.12) !important; color: var(--text) !important; }
  html.modal-white #car-modal-inner .cd-search::placeholder,
  html.modal-white #booking-modal-inner .cd-search::placeholder { color: rgba(90,74,110,0.45) !important; }
  html.modal-white #car-modal-inner .cd-item,
  html.modal-white #booking-modal-inner .cd-item { color: var(--text) !important; border-bottom-color: rgba(0,0,0,0.05) !important; }
  html.modal-white #car-modal-inner .cd-item:hover,
  html.modal-white #booking-modal-inner .cd-item:hover { background: rgba(0,0,0,0.04) !important; }
  html.modal-white #car-modal-inner .cd-item.cd-selected,
  html.modal-white #booking-modal-inner .cd-item.cd-selected { color: #111111 !important; }

  /* --- EXPENSE MODAL: custom dropdowns (light default mode) ------------------- */
  #expense-modal .cd-trigger {
    background-color: #f9fafb !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px !important;
    border: 1.5px solid rgba(0,0,0,0.13) !important; border-radius: 10px !important; color: var(--text) !important;
  }
  #expense-modal .cd-trigger:hover { background-color: #fff !important; border-color: rgba(0,0,0,0.28) !important; }
  #expense-modal .cd-trigger.open { background-color: #fff !important; border-color: var(--accent-warm) !important; box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important; }
  #expense-modal .cd-val.ph { color: rgba(90,74,110,0.5) !important; }
  #expense-modal .cd-panel { background: #fff !important; border: 1.5px solid rgba(0,0,0,0.10) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important; }
  #expense-modal .cd-search { background: #f9fafb !important; border-color: rgba(0,0,0,0.12) !important; color: var(--text) !important; }
  #expense-modal .cd-search::placeholder { color: rgba(90,74,110,0.5) !important; }
  #expense-modal .cd-item { color: var(--text) !important; border-bottom-color: rgba(0,0,0,0.05) !important; }
  #expense-modal .cd-item:hover { background: rgba(0,0,0,0.04) !important; }
  #expense-modal .cd-item.cd-selected { color: #111111 !important; font-weight: 600; }

  /* --- EXPENSE MODAL: custom dropdowns (premium dark mode) -------------------- */
  html.modal-premium #expense-modal .cd-trigger {
    background-color: rgba(255,255,255,0.05) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 13px center !important; background-size: 12px !important;
    border: 1px solid rgba(0,0,0,0.12) !important; color: #f3f4f6 !important;
  }
  html.modal-premium #expense-modal .cd-trigger:hover { border-color: rgba(0,0,0,0.25) !important; background-color: rgba(255,255,255,0.08) !important; }
  html.modal-premium #expense-modal .cd-trigger.open { border-color: rgba(0,0,0,0.30) !important; background-color: rgba(255,255,255,0.09) !important; box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important; }
  html.modal-premium #expense-modal .cd-val.ph { color:rgba(255,255,255,0.25)!important; }
  html.modal-premium #expense-modal .cd-panel { background: rgba(18,18,18,0.98) !important; border: 1px solid rgba(0,0,0,0.13) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important; }
  html.modal-premium #expense-modal .cd-search { background: rgba(255,255,255,0.06) !important; border-color: rgba(0,0,0,0.12) !important; color: #f3f4f6 !important; }
  html.modal-premium #expense-modal .cd-search::placeholder { color:rgba(255,255,255,0.25)!important; }
  html.modal-premium #expense-modal .cd-item { color: rgba(229,234,245,0.85) !important; border-bottom-color: rgba(0,0,0,0.06) !important; }
  html.modal-premium #expense-modal .cd-item:hover { background: rgba(0,0,0,0.07) !important; color: #f3f4f6 !important; }
  html.modal-premium #expense-modal .cd-item.cd-selected { color: #d1d5db !important; }

  /* --- EXPENSE MODAL: DatePicker trigger in premium dark mode ----------------- */
  html.modal-premium #expense-modal .dp-trigger {
    background: rgba(255,255,255,0.05) !important; border-color: rgba(0,0,0,0.12) !important; color: #f3f4f6 !important;
  }
  html.modal-premium #expense-modal .dp-trigger:hover { border-color: rgba(0,0,0,0.25) !important; background: rgba(255,255,255,0.08) !important; }
  html.modal-premium #expense-modal .dp-trigger.open { border-color: rgba(0,0,0,0.30) !important; background: rgba(255,255,255,0.09) !important; box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important; }
  html.modal-premium #expense-modal .dp-t-val.ph { color:rgba(255,255,255,0.25)!important; }
  html.modal-premium #expense-modal .dp-t-ico { color: var(--accent-warm) !important; }
  html.modal-premium #expense-modal .dp-t-arr { color:rgba(255,255,255,0.25)!important; }

  /* --- EXPENSE MODAL — modern selects ---------------------------------------- */
  #expense-modal select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding: 10px 36px 10px 13px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    background-color: #f9fafb !important;
    border: 1.5px solid rgba(0,0,0,0.13) !important;
    border-radius: 10px !important;
    font-size: 0.875rem;
    color: var(--text) !important;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s !important;
  }
  #expense-modal select:hover {
    border-color: rgba(0,0,0,0.28) !important;
    background-color: #fff !important;
  }
  #expense-modal select:focus {
    border-color: var(--accent-warm) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important;
    outline: none;
  }
  #expense-modal select option {
    background: #fff;
    color: var(--text);
    padding: 6px 12px;
  }

  /* --- EXPENSE MODAL — premium (dark) mode ------------------------------------ */
  html.modal-premium #expense-modal select {
    background-color: rgba(255,255,255,0.05) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #f3f4f6 !important;
    color-scheme: dark;
  }
  html.modal-premium #expense-modal select:hover {
    border-color: rgba(0,0,0,0.25) !important;
    background-color: rgba(255,255,255,0.08) !important;
  }
  html.modal-premium #expense-modal select:focus {
    border-color: rgba(0,0,0,0.30) !important;
    background-color: rgba(255,255,255,0.09) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important;
  }
  html.modal-premium #expense-modal select option {
    background: #111111;
    color: #f3f4f6;
  }
  /* --- GLOBAL INLINE STYLE OVERRIDES (dark modal elements) ------------------- */
  .dark-modal-inner [style*="color:#f0ece2"] { color: #f3f4f6 !important; }
  .dark-modal-inner [style*="color:rgba(200,169,110,0.5)"],
  .dark-modal-inner [style*="color:rgba(200,169,110,0.45)"],
  .dark-modal-inner [style*="color:rgba(200,169,110,0.4)"] { color:rgba(255,255,255,0.25)!important; }
  .dark-modal-inner [style*="color:rgba(200,169,110,0.6)"],
  .dark-modal-inner [style*="color:rgba(200,169,110,0.55)"] { color: rgba(255,255,255,0.45) !important; }
  .dark-modal-inner [style*="background:rgba(200,169,110,0.08)"],
  .dark-modal-inner [style*="background:rgba(200,169,110,0.12)"] { background: rgba(0,0,0,0.06) !important; }
  .dark-modal-inner [style*="border:1px solid rgba(200,169,110,0.15)"],
  .dark-modal-inner [style*="border:1px solid rgba(200,169,110,0.2)"],
  .dark-modal-inner [style*="border:1px solid rgba(200,169,110,0.25)"] { border-color: rgba(0,0,0,0.13) !important; }
  .dark-modal-inner [style*="border-bottom:1px solid rgba(200,169,110,0.1)"],
  .dark-modal-inner [style*="border-bottom:1px solid rgba(200,169,110,0.12)"] { border-bottom-color: rgba(0,0,0,0.08) !important; }
  .dark-modal-inner [style*="border:1px solid rgba(200,169,110,0.3)"],
  .dark-modal-inner [style*="border:1px solid rgba(200,169,110,0.35)"] { border-color:rgba(0,0,0,0.12) !important; }
  /* Catch car/booking modal background patterns */
  .dark-modal-inner [style*="background:linear-gradient(135deg,rgba(200,169,110"] { background: linear-gradient(135deg,rgba(0,0,0,0.11),rgba(0,0,0,0.05)) !important; }
  /* Save password button */
  .dark-modal-inner button[style*="background:linear-gradient(135deg,#c8a96e"] {
    background: linear-gradient(135deg,#111111,#374151) !important;
    color: #fff !important;
    box-shadow: 0 4px 16pxrgba(0,0,0,0.12) !important;
  }
  /* Download backup button */
  .dark-modal-inner button[style*="background:linear-gradient(135deg,rgba(200,169,110,0.15)"] {
    background: linear-gradient(135deg,rgba(0,0,0,0.08),rgba(0,0,0,0.05)) !important;
    border-color: rgba(0,0,0,0.16) !important;
    color: #d1d5db !important;
  }

  /* ── CIRCLE-EXPAND FILL ANIMATIONS (center → outward, like sign-in) ── */
  .btn-fill-light, .btn-fill-dark, .btn-update-pw {
    position:relative; overflow:hidden;
    border-radius:10px; font-family:var(--font); font-size:0.875rem; font-weight:700;
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px;
    transition:color 0.45s ease, box-shadow 0.2s, transform 0.16s, border-color 0.2s;
  }
  .btn-fill-light::before, .btn-fill-dark::before, .btn-update-pw::before {
    content:''; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:0; height:0; border-radius:50%; z-index:0;
    transition:width 1.0s cubic-bezier(0.19,1,0.22,1), height 1.0s cubic-bezier(0.19,1,0.22,1);
  }
  .btn-update-pw::before {
    transition:width 1.1s cubic-bezier(0.19,1,0.22,1), height 1.1s cubic-bezier(0.19,1,0.22,1);
  }
  .btn-fill-light::before, .btn-update-pw::before { background:#111; }
  .btn-fill-dark::before { background:#fff; }
  .btn-fill-light:hover::before, .btn-update-pw:hover::before,
  .btn-fill-dark:hover::before { width:700px; height:700px; }
  .btn-inner { position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; }

  /* White bg → black fill */
  .btn-fill-light {
    background:#fff; color:#111; border:1.5px solid #111;
    padding:9px 18px;
  }
  .btn-fill-light:hover { color:#fff; transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,0.18); }

  /* Black bg → white fill */
  .btn-fill-dark {
    background:#111; color:#fff; border:1.5px solid #111;
    padding:9px 18px;
  }
  .btn-fill-dark:hover { color:#111; transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,0.12); }

  /* Update Password */
  .btn-update-pw {
    width:100%; padding:10px;
    background:#fff; color:#111; border:1.5px solid #111;
  }
  .btn-update-pw:hover { color:#fff; }
  .btn-update-pw.has-error { border-color:#dc2626; color:#dc2626; }
  .btn-update-pw.has-error::before { background:#dc2626; }
  .btn-update-pw.has-error:hover { color:#fff; }

  /* Ghost cancel (mimics sign-out style) */
  .btn-ghost-cancel {
    background:none; border:none;
    color:#111;
    cursor:pointer; font-family:var(--font);
    font-size:0.875rem; font-weight:600;
    padding:10px 22px; border-radius:11px;
    transition:color 0.18s;
    display:inline-flex; align-items:center; gap:6px;
  }
  .btn-ghost-cancel:hover { color:#ef4444; }
  .btn-ghost-cancel.on-dark { color:rgba(255,255,255,0.7); }
  .btn-ghost-cancel.on-dark:hover { color:#f87171; }

  /* Clear Closed confirm modal */
  #clear-closed-modal { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); backdrop-filter:blur(8px); }
  #clear-closed-modal.show { display:flex; }
  #clear-closed-modal-card { background:#fff; border-radius:16px; padding:28px 28px 24px; max-width:420px; width:90%; box-shadow:0 24px 80px rgba(0,0,0,0.22); position:relative; animation:scaleIn 0.25s cubic-bezier(0.34,1.3,0.64,1) both; }

        /* — Staff page (tm- = team management) — */
        .tm-user-cell { display:flex; align-items:center; gap:11px; }
        .tm-avatar { width:34px; height:34px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.82rem; color:#fff; background:#111; letter-spacing:0.02em; }
        .tm-user-name { font-weight:700; color:var(--text); line-height:1.25; }
        .tm-user-sub { font-size:0.74rem; color:var(--text-faint); font-family:monospace; letter-spacing:0.01em; }

/* ── Profile panel: Company Logo section ─────────────────────────────────── */
/* Dark (modal-premium) base styles; white-theme overrides below. */
.logo-sec-card {
  display:flex; align-items:center; gap:16px;
  border:1px solid rgba(255,255,255,0.09); background:rgba(255,255,255,0.04);
  border-radius:14px; padding:14px 16px;
}
.logo-sec-preview { position:relative; width:64px; height:64px; border-radius:14px; cursor:pointer; flex-shrink:0; }
.logo-sec-img {
  width:100%; height:100%; border-radius:14px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  background:linear-gradient(135deg,rgba(255,255,255,0.10),rgba(255,255,255,0.04));
  border:1px dashed rgba(255,255,255,0.25);
  transition:border-color 0.15s;
}
.logo-sec-preview:hover .logo-sec-img { border-color:rgba(255,255,255,0.5); }
.logo-sec-preview.has-logo .logo-sec-img { border-style:solid; border-color:rgba(255,255,255,0.14); }
.logo-sec-hover {
  position:absolute; inset:0; border-radius:14px; background:rgba(0,0,0,0.55);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  opacity:0; transition:opacity 0.15s; pointer-events:none;
}
.logo-sec-preview:hover .logo-sec-hover { opacity:1; }
.logo-sec-info { flex:1; min-width:0; }
.logo-sec-title { font-size:0.84rem; font-weight:700; color:#f3f4f6; letter-spacing:-0.01em; }
.logo-sec-sub { font-size:0.72rem; color:rgba(255,255,255,0.38); margin-top:2px; line-height:1.45; }
.logo-sec-status { font-size:0.7rem; color:rgba(255,255,255,0.45); margin-top:4px; }
.logo-sec-actions { display:flex; gap:8px; margin-top:10px; }
.logo-sec-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 15px; border-radius:100px;
  background:#fff; border:none; color:#111;
  font-size:0.74rem; font-weight:700; font-family:var(--font); cursor:pointer;
  transition:transform 0.14s, box-shadow 0.14s;
}
.logo-sec-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,0.35); }
.logo-sec-btn svg { width:13px; height:13px; flex-shrink:0; }
.logo-sec-btn.danger { background:transparent; border:1px solid rgba(220,38,38,0.45); color:#f87171; }
.logo-sec-btn.danger:hover { background:rgba(220,38,38,0.12); box-shadow:none; transform:none; }

/* White (default) profile-panel theme */
html.modal-white #profile-panel-inner .logo-sec-card { background:#fafafa; border-color:rgba(0,0,0,0.10); }
html.modal-white #profile-panel-inner .logo-sec-img {
  background:#fff; border-color:rgba(0,0,0,0.22);
}
html.modal-white #profile-panel-inner .logo-sec-preview:hover .logo-sec-img { border-color:rgba(0,0,0,0.45); }
html.modal-white #profile-panel-inner .logo-sec-preview.has-logo .logo-sec-img { border-color:rgba(0,0,0,0.12); }
html.modal-white #profile-panel-inner .logo-sec-title { color:#111; }
html.modal-white #profile-panel-inner .logo-sec-sub { color:rgba(0,0,0,0.48); }
html.modal-white #profile-panel-inner .logo-sec-status { color:rgba(0,0,0,0.45); }
html.modal-white #profile-panel-inner .logo-sec-btn { background:#111; color:#fff; }
html.modal-white #profile-panel-inner .logo-sec-btn:hover { box-shadow:0 4px 14px rgba(0,0,0,0.22); }
html.modal-white #profile-panel-inner .logo-sec-btn.danger { background:transparent; border-color:rgba(220,38,38,0.4); color:#dc2626; }
html.modal-white #profile-panel-inner .logo-sec-btn.danger:hover { background:rgba(220,38,38,0.08); }

/* ── Profile panel: Custom domain (white-label) section ───────────────────── */
/* Dark (modal-premium) base styles; white-theme overrides below — mirrors .logo-sec-*. */
.domain-sec-card { border:1px solid rgba(255,255,255,0.09); background:rgba(255,255,255,0.04); border-radius:14px; padding:14px 16px; }
.domain-sec-desc { font-size:0.74rem; color:rgba(255,255,255,0.38); line-height:1.5; margin-bottom:11px; }
.domain-sec-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.domain-sec-input { flex:1; min-width:200px; padding:9px 13px; border-radius:10px; border:1px solid rgba(0,0,0,0.11); background:rgba(255,255,255,0.05); color:#f3f4f6; font-size:0.85rem; font-family:var(--font); outline:none; transition:border-color 0.2s,box-shadow 0.2s; }
.domain-sec-input:focus { border-color:rgba(0,0,0,0.32); box-shadow:0 0 0 3px rgba(0,0,0,0.07); }
.domain-sec-btn { padding:9px 17px; border-radius:10px; border:none; background:#fff; color:#111; font-weight:700; font-size:0.78rem; font-family:var(--font); cursor:pointer; white-space:nowrap; transition:transform 0.14s, box-shadow 0.14s; }
.domain-sec-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,0.35); }
.domain-sec-status { font-size:0.72rem; margin-top:9px; color:rgba(255,255,255,0.45); line-height:1.4; }
.domain-sec-status.is-error { color:#f87171; }

html.modal-white #profile-panel-inner .domain-sec-card { background:#fafafa; border-color:rgba(0,0,0,0.10); }
html.modal-white #profile-panel-inner .domain-sec-desc { color:rgba(0,0,0,0.48); }
html.modal-white #profile-panel-inner .domain-sec-input { background:#f9fafb; border-color:rgba(0,0,0,0.14); color:#111; }
html.modal-white #profile-panel-inner .domain-sec-input:focus { background:#fff; border-color:var(--accent-warm); box-shadow:0 0 0 3px rgba(0,0,0,0.07); }
html.modal-white #profile-panel-inner .domain-sec-btn { background:#111; color:#fff; }
html.modal-white #profile-panel-inner .domain-sec-btn:hover { box-shadow:0 4px 14px rgba(0,0,0,0.22); }
html.modal-white #profile-panel-inner .domain-sec-status { color:rgba(0,0,0,0.45); }
html.modal-white #profile-panel-inner .domain-sec-status.is-error { color:#dc2626; }
        .tm-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:100px; font-size:0.68rem; font-weight:800; letter-spacing:0.02em; white-space:nowrap; text-transform:uppercase; }
        .tm-pill .pip { width:6px; height:6px; border-radius:50%; }
        .tm-role-owner { background:#111; color:#fff; }
        .tm-role-manager { background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe; }
        .tm-role-staff { background:var(--bg); color:var(--accent-warm); border:1px solid var(--border-dark); }
        .tm-status-active { background:var(--green-bg); color:var(--green); border:1px solid #bbf7d0; }
        .tm-status-active .pip { background:var(--green); }
        .tm-status-disabled { background:var(--bg); color:var(--text-muted); border:1px solid var(--border); }
        .tm-status-disabled .pip { background:var(--text-faint); }
        .tm-perm-chips { display:flex; flex-wrap:wrap; gap:4px; max-width:280px; }
        .tm-chip { font-size:0.68rem; font-weight:700; color:var(--accent-warm); background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:2px 8px; }
        .tm-chip-all { background:#111; color:#fff; border-color:#111; }
        .tm-chip-branch { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
        .tm-row-actions { display:flex; gap:6px; align-items:center; }
        .tm-icon-btn { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-dark); border-radius:9px; background:#fff; color:var(--text-muted); cursor:pointer; transition:all 0.15s; padding:0; }
        .tm-icon-btn:hover { border-color:#111; color:#111; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.08); }
        .tm-icon-btn.tm-danger:hover { border-color:var(--red); color:var(--red); box-shadow:0 4px 12px rgba(220,38,38,0.14); }
        .tm-icon-btn svg { width:14px; height:14px; }
        .tm-you-tag { font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint); border:1px solid var(--border); border-radius:6px; padding:1px 6px; margin-left:7px; }
        /* — Switch (reused in table + modal) — */
        .tm-switch { position:relative; display:inline-block; width:40px; height:23px; flex-shrink:0; cursor:pointer; }
        .tm-switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2; }
        .tm-switch-track { position:absolute; inset:0; border-radius:100px; background:#d4d4d8; border:1.5px solid #d4d4d8; transition:background 0.24s var(--ease-out), border-color 0.24s; }
        .tm-switch-thumb { position:absolute; top:2px; left:2px; width:15px; height:15px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,0.3); transition:transform 0.26s var(--ease-spring); }
        .tm-switch input:checked + .tm-switch-track { background:#111; border-color:#111; }
        .tm-switch input:checked + .tm-switch-track .tm-switch-thumb { transform:translateX(17px); }
        .tm-switch input:disabled { cursor:not-allowed; }
        .tm-switch input:disabled + .tm-switch-track { opacity:0.45; }
        /* — Permission grid in modal — */
        .tm-perm-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
        .tm-perm-mgr-note { display:none; font-size:0.8rem; color:var(--text-muted); background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:11px 13px; line-height:1.5; }
        .tm-perm-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
        .tm-perm-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border:1px solid var(--border); border-radius:11px; background:#fff; transition:border-color 0.15s, background 0.15s; }
        .tm-perm-item:hover { border-color:var(--border-dark); }
        .tm-perm-label { font-size:0.83rem; font-weight:600; color:var(--text); }
        .tm-perm-selectall { font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:7px; transition:color 0.15s, background 0.15s; }
        .tm-perm-selectall:hover { color:#111; background:var(--bg); }
        .tm-field-hint { font-size:0.72rem; color:var(--text-faint); margin-top:5px; text-transform:none; letter-spacing:0; font-weight:500; }
        .tm-pw-wrap { position:relative; }
        .tm-pw-toggle { position:absolute; right:9px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text-faint); padding:4px; display:flex; }
        .tm-pw-toggle:hover { color:var(--text); }
        @media (max-width:620px){ .tm-perm-grid { grid-template-columns:1fr; } }
        /* Polished CustomSelect inside the staff modal (mirrors .modal-card rules) */
        #user-modal .cd-wrap { width:100%; }
        #user-modal .cd-trigger {
          background-color:#fff; border:1.5px solid var(--border-dark);
          border-radius:10px; color:var(--text);
          font-family:var(--font); font-size:0.875rem; font-weight:500; min-height:38px;
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        }
        #user-modal .cd-trigger:hover { border-color:rgba(0,0,0,0.3); }
        #user-modal .cd-trigger.open { border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,0.07); }
        #user-modal .cd-val, #user-modal .cd-val.ph { color:var(--text) !important; opacity:1; }
        #user-modal .cd-panel { background:#fff; border-color:rgba(0,0,0,0.12); box-shadow:0 14px 36px rgba(20,10,40,0.16); z-index:5000; }
        #user-modal .cd-item { color:var(--text); border-bottom-color:rgba(0,0,0,0.05); font-family:var(--font); font-size:0.855rem; font-weight:500; }
        #user-modal .cd-item:hover { background:rgba(0,0,0,0.04); color:#111; }
        #user-modal .cd-item.cd-selected { color:#111; font-weight:700; }
      

/* ═══ Fleet Timeline (Gantt) ═══════════════════════════════════════════════ */
.ft-wrap {
  background: var(--card-bg, #fff);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 14px;
  overflow-x: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ft-row {
  display: grid;
  grid-template-columns: 200px repeat(14, minmax(52px, 1fr));
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: relative;
  min-width: 940px;
}
.ft-row:last-child { border-bottom: none; }
.ft-hdr-row {
  position: sticky; top: 0; z-index: 3;
  background: var(--card-bg, #fff);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.ft-car-cell {
  padding: 8px 12px;
  border-right: 1px solid rgba(0,0,0,0.08);
  position: sticky; left: 0; z-index: 2;
  background: var(--card-bg, #fff);
  display: flex; flex-direction: column; justify-content: center;
  grid-column: 1;
}
.ft-hdr-cell { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #6b7280); }
.ft-car-name { font-size: 0.8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-car-sub { font-size: 0.66rem; color: var(--text-muted, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-day-hdr {
  text-align: center; padding: 7px 2px 6px;
  display: flex; flex-direction: column; gap: 1px;
  border-right: 1px solid rgba(0,0,0,0.04);
}
.ft-day-name { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted, #9ca3af); }
.ft-day-num { font-size: 0.78rem; font-weight: 800; }
.ft-day-cell { border-right: 1px solid rgba(0,0,0,0.04); min-height: 34px; }
.ft-day-hdr.ft-today .ft-day-num {
  background: #111; color: #fff; border-radius: 50%;
  width: 22px; height: 22px; display: inline-flex;
  align-items: center; justify-content: center; margin: 0 auto;
}
.ft-day-cell.ft-today { background: rgba(17,17,17,0.04); }
.ft-bar {
  margin: 3px 3px;
  border-radius: 7px;
  font-size: 0.66rem; font-weight: 700;
  padding: 0 8px;
  display: flex; align-items: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; z-index: 1;
  transition: filter 0.12s ease;
}
.ft-bar:hover { filter: brightness(0.92); }
.ft-bar-pending  { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.ft-bar-reserved { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.ft-bar-active   { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.ft-clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dashed; }
.ft-clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dashed; }

/* ── MOBILE-FIRST PASS: pickup/return (Rental File) flow ──────────────────
   Staff do handovers standing next to the car — on a phone the rental file
   becomes a full-screen app: thumb-sized controls, swipeable stage rail,
   stacked action buttons, full-width signature pad and damage map. */
@media (max-width: 640px) {
  /* Full-screen rental file on phones */
  #workflow-modal { padding: 0 !important; align-items: stretch !important; }
  #workflow-modal-inner {
    width: 100vw !important; max-width: 100vw !important;
    height: 100dvh; max-height: 100dvh !important;
    border-radius: 0 !important; border: none !important;
  }
  #workflow-modal-inner .mhd { padding: 12px 14px; }
  #wf-body-scroll { padding: 12px 12px 110px !important; -webkit-overflow-scrolling: touch; }

  /* Stage rail: one swipeable strip instead of a wrapped grid */
  #workflow-modal-inner .wf-stage-rail {
    display: flex !important; overflow-x: auto; gap: 6px !important;
    padding: 10px 12px 2px !important; scrollbar-width: none;
  }
  #workflow-modal-inner .wf-stage-rail::-webkit-scrollbar { display: none; }
  #workflow-modal-inner .wf-step { flex: 0 0 auto; white-space: nowrap; }

  /* Comfortable touch targets; 16px font stops iOS zoom-on-focus */
  #workflow-modal-inner input:not([type=checkbox]):not([type=radio]),
  #workflow-modal-inner select,
  #workflow-modal-inner textarea { min-height: 44px; font-size: 16px !important; }
  #workflow-modal-inner input[type=checkbox] { width: 22px !important; height: 22px !important; }
  #workflow-modal-inner .wf-check-row { padding: 13px 14px !important; }

  /* Action rows: stacked, full-width, thumb-sized */
  #workflow-modal-inner .wf-section-acts { flex-direction: column; align-items: stretch; gap: 8px; }
  #workflow-modal-inner .wf-section-acts .btn,
  #workflow-modal-inner .wf-section-acts button { width: 100%; min-height: 48px; font-size: 0.92rem; }

  /* Condition photos: two thumb-friendly columns */
  #workflow-modal-inner .wf-photo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* Signature pad + damage map stretch to the screen and ignore page scroll */
  #workflow-modal-inner canvas, #wf-damage-map { width: 100% !important; touch-action: none; }

  /* Compact summary cells (the 820px rule already stacks them) */
  .wf-summary-grid { gap: 8px; }
  .wf-summary { padding: 10px 12px; }

  /* Inline edit panels (change dates / swap car) fill the width */
  #wf-edit-dates input, #wf-swap-car select { width: 100%; max-width: none !important; }

  /* Bookings list actions (the entry point to pickup/return) stay tappable */
  #page-bookings .actions-cell .btn { min-height: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVIEWS PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.rv-stars { display:inline-flex; gap:1px; line-height:1; white-space:nowrap; }
.rv-star { color:#d8d8d8; font-size:0.95rem; }
.rv-star.on { color:#f5a623; }

/* Summary: average score card + distribution bars */
.rv-summary { display:flex; gap:18px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
.rv-score-card { flex:none; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px 26px; min-width:140px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.rv-score-big { font-size:2.8rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
.rv-score-card .rv-stars { margin:8px 0 5px; font-size:1.05rem; }
.rv-score-sub { font-size:0.74rem; color:var(--text-muted); font-weight:600; }
.rv-dist { flex:1; min-width:220px; display:flex; flex-direction:column; gap:5px; }
.rv-bar-row { display:flex; align-items:center; gap:10px; }
.rv-bar-lbl { font-size:0.72rem; color:var(--text-muted); width:24px; font-weight:700; }
.rv-bar { flex:1; height:8px; background:var(--bg); border-radius:999px; overflow:hidden; }
.rv-bar-fill { height:100%; background:#f5a623; border-radius:999px; transition:width .5s cubic-bezier(0.22,1,0.36,1); }
.rv-bar-c { font-size:0.72rem; color:var(--text-faint); width:22px; text-align:right; font-weight:600; }

/* Segmented filter control */
.seg-control { display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:3px; gap:2px; }
.seg-btn { border:none; background:transparent; color:var(--text-muted); font-size:0.8rem; font-weight:600; padding:6px 14px; border-radius:7px; cursor:pointer; font-family:inherit; transition:all .15s ease; }
.seg-btn:hover { color:var(--text); }
.seg-btn.active { background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.08); }

/* Review cards */
.rv-loading { padding:2rem; text-align:center; color:var(--text-muted); font-size:0.9rem; }
.rv-card { display:flex; gap:14px; align-items:flex-start; justify-content:space-between; padding:15px 16px; border:1px solid var(--border); border-radius:14px; background:var(--surface); margin-bottom:10px; transition:border-color .15s ease; }
.rv-card:hover { border-color:var(--border-dark); }
.rv-card.hidden-review { opacity:.62; background:var(--bg); }
.rv-card-main { flex:1; min-width:0; }
.rv-card-head { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:6px; }
.rv-name { font-weight:700; font-size:0.86rem; color:var(--text); }
.rv-car { font-size:0.68rem; font-weight:700; color:var(--text-muted); background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:2px 9px; }
.rv-hidden-tag { font-size:0.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); background:var(--border); border-radius:5px; padding:2px 7px; }
.rv-date { font-size:0.72rem; color:var(--text-faint); margin-left:auto; }
.rv-comment { font-size:0.88rem; line-height:1.5; color:var(--text); }
.rv-comment.rv-nocomment { color:var(--text-faint); font-style:italic; }
.rv-reply { margin-top:9px; font-size:0.82rem; line-height:1.45; color:var(--text-muted); background:var(--bg); border-left:3px solid var(--border-dark); border-radius:0 9px 9px 0; padding:8px 12px; }
.rv-reply-lbl { display:block; font-weight:800; color:var(--text); font-size:0.7rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:2px; }
.rv-actions { flex:none; display:flex; flex-direction:column; gap:6px; }
.rv-act { border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:0.74rem; font-weight:600; padding:6px 12px; border-radius:8px; cursor:pointer; font-family:inherit; white-space:nowrap; transition:all .15s ease; }
.rv-act:hover { background:var(--bg); border-color:var(--border-dark); }
.rv-act-del:hover { color:var(--red); border-color:var(--red); }
@media (max-width:640px){ .rv-card { flex-direction:column; } .rv-actions { flex-direction:row; flex-wrap:wrap; } }

/* Settings toggle switch (Loyalty & Referrals, etc.) */
.st-switch { position:relative; display:inline-block; width:46px; height:26px; flex:none; }
.st-switch input { opacity:0; width:0; height:0; }
.st-switch-slider { position:absolute; inset:0; background:#d1d5db; border-radius:999px; transition:background .2s ease; cursor:pointer; }
.st-switch-slider::before { content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s var(--ease-spring); box-shadow:0 1px 3px rgba(0,0,0,.25); }
.st-switch input:checked + .st-switch-slider { background:#111; }
.st-switch input:checked + .st-switch-slider::before { transform:translateX(20px); }
.st-switch input:focus-visible + .st-switch-slider { box-shadow:0 0 0 3px rgba(0,0,0,.12); }

/* Messaging status banner (Settings → Messages) */
.msg-status-banner { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:14px; margin-bottom:16px; border:1px solid var(--border); }
.msg-status-banner.off  { background:#fef2f2; border-color:#fecaca; }
.msg-status-banner.warn { background:#fffbeb; border-color:#fde68a; }
.msg-status-banner.on   { background:#f0fdf4; border-color:#bbf7d0; }
.msg-status-ico { font-size:1.25rem; line-height:1.3; flex:none; }
.msg-status-title { font-size:0.92rem; font-weight:800; color:var(--text); letter-spacing:-0.01em; }
.msg-status-sub { font-size:0.8rem; color:var(--text-muted); line-height:1.5; margin-top:3px; }

/* Master on/off switch card (Settings → Messages) */
.msg-master-card {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 20px; margin-bottom:16px;
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 1px 6px rgba(0,0,0,0.04); transition:background .2s ease, border-color .2s ease;
}
.msg-master-card.is-off { background:#fafafa; border-color:#e5e7eb; }
.msg-master-info { min-width:0; }
.msg-master-title { font-size:0.95rem; font-weight:800; color:var(--text); letter-spacing:-0.01em; }
.msg-master-sub { font-size:0.78rem; color:var(--text-muted); line-height:1.5; margin-top:3px; }

/* Activity log pager (Team → Activity log) */
.audit-pager { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 2px 4px; }
.audit-pager-info { font-size:0.74rem; font-weight:600; color:var(--text-muted); }
.audit-pager-btns { display:flex; gap:8px; }
.audit-pager-btns .ph-btn[disabled] { opacity:0.4; cursor:default; pointer-events:none; }

/* ─── Ctrl/⌘-K command palette ─────────────────────────────────────────────── */
#cmdk-overlay { position:fixed; inset:0; z-index:11000; background:rgba(0,0,0,0.4); backdrop-filter:blur(6px); display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; animation:fadeIn .12s ease; }
#cmdk-box { width:560px; max-width:94vw; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,0.32); overflow:hidden; }
#cmdk-input { width:100%; border:none; outline:none; padding:18px 20px; font-family:var(--font); font-size:1rem; font-weight:600; color:var(--text); background:transparent; border-bottom:1px solid var(--border); }
#cmdk-input::placeholder { color:var(--text-faint); font-weight:500; }
#cmdk-list { max-height:46vh; overflow-y:auto; padding:6px; }
.cmdk-item { padding:10px 14px; border-radius:10px; cursor:pointer; display:flex; flex-direction:column; gap:1px; }
.cmdk-item.sel { background:var(--bg); }
.cmdk-label { font-size:0.9rem; font-weight:700; color:var(--text); }
.cmdk-sub { font-size:0.75rem; color:var(--text-muted); }
.cmdk-empty { padding:24px; text-align:center; color:var(--text-faint); font-size:0.85rem; }
#cmdk-hint { display:flex; gap:16px; padding:9px 16px; border-top:1px solid var(--border); font-size:0.7rem; color:var(--text-muted); }
#cmdk-hint kbd { background:var(--bg); border:1px solid var(--border-dark); border-radius:4px; padding:1px 5px; font-family:var(--font); font-size:0.66rem; margin-right:2px; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* In-app dashboard language switcher */
.dash-applang { display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:2px; gap:1px; }
.dash-applang-btn { border:none; background:transparent; color:var(--text-muted); font-size:0.68rem; font-weight:800; letter-spacing:0.02em; padding:4px 7px; border-radius:6px; cursor:pointer; font-family:var(--font); transition:all .15s ease; }
.dash-applang-btn:hover { color:var(--text); }
.dash-applang-btn.active { background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.1); }

/* ── Subscription plan cards (Settings → Subscription) ──────────────────────── */
.set-plan-card{
  border:1px solid rgba(0,0,0,0.10); border-radius:14px; padding:16px 16px 18px;
  background:#fff; display:flex; flex-direction:column; gap:6px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.set-plan-card:hover{ border-color:rgba(0,0,0,0.22); box-shadow:0 6px 22px rgba(17,24,39,0.07); transform:translateY(-2px); }
.set-plan-card.is-current{ border-color:#15803d; background:rgba(22,163,74,0.05); }
.set-plan-name{ font-size:0.82rem; font-weight:800; letter-spacing:0.02em; color:var(--text,#111); text-transform:uppercase; }
.set-plan-price{ font-size:1.7rem; font-weight:800; color:var(--text,#111); line-height:1; margin:2px 0 10px; }
.set-plan-price span{ font-size:0.78rem; font-weight:600; color:var(--text-muted,#6b7280); margin-left:2px; }
.set-plan-btn{
  margin-top:auto; padding:9px 12px; border-radius:10px; border:1px solid #111;
  background:#111; color:#fff; font-size:0.8rem; font-weight:700; cursor:pointer;
  font-family:var(--font); transition:opacity .15s ease, background .15s ease;
}
.set-plan-btn:hover{ opacity:0.9; }
.set-plan-btn:disabled{ background:#15803d; border-color:#15803d; cursor:default; opacity:1; }
.set-billing-manage-btn{
  padding:9px 14px; border-radius:10px; border:1px solid rgba(0,0,0,0.18);
  background:transparent; color:var(--text,#111); font-size:0.8rem; font-weight:700;
  cursor:pointer; font-family:var(--font); transition:background .15s ease;
}
.set-billing-manage-btn:hover{ background:rgba(0,0,0,0.05); }

/* Login-card logo (RentalGate) — sits to the LEFT of the title */
.login-title-group{ display:flex; align-items:center; gap:12px; min-width:0; }
.login-card-logo{ display:block; height:42px; width:auto; flex-shrink:0; border-radius:10px; }

/* ════════════════════ SIGN-UP FLAG PICKERS (nationality + phone) ════════════════════ */
#login-screen .su-pk-group { position:relative; }
/* The field rows keep a transform after their fade-in (animation fill-mode:both),
   which makes each row its own stacking context — that would render an open
   dropdown BEHIND the rows beneath it. Lift the active row above its siblings so
   the nationality / phone menus are visible and clickable. */
#login-screen .su-pk-group.su-pk-up,
#login-screen .su-phone-row.su-pk-up { z-index:120; }
#login-screen .su-pk-group:has(> .su-pk-dropdown:not(.hidden)),
#login-screen .su-phone-row:has(.su-pk-dropdown:not(.hidden)) { z-index:120; }
#login-screen .su-pk-select {
  width:100%; display:flex; align-items:center; gap:9px;
  padding:12px 14px 12px 42px;
  background:rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.12); border-radius:10px;
  font-family:var(--font); font-size:0.9375rem; color:#111; cursor:pointer; text-align:left;
  transition:border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
#login-screen .su-pk-select:hover { border-color:rgba(0,0,0,0.22); }
#login-screen .su-pk-select:focus { border-color:rgba(0,0,0,0.35); background:rgba(0,0,0,0.07); box-shadow:0 0 0 3px rgba(0,0,0,0.07); outline:none; }
.su-pk-flag { width:22px; height:15px; border-radius:3px; object-fit:cover; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,0.07); }
.su-pk-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.su-pk-placeholder { color:#aaa; }
.su-pk-arrow { color:#999; display:flex; flex-shrink:0; transition:transform 0.2s ease; }

.su-pk-dropdown {
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
  background:#fff; border:1px solid rgba(0,0,0,0.1); border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,0.16); overflow:hidden;
  animation:su-pk-in 0.16s cubic-bezier(0.16,1,0.3,1);
}
.su-pk-dropdown.hidden { display:none; }
@keyframes su-pk-in { from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
.su-pk-search-wrap { padding:8px; border-bottom:1px solid rgba(0,0,0,0.06); }
.su-pk-search { width:100%; padding:9px 11px; background:#f5f5f5; border:1px solid rgba(0,0,0,0.1); border-radius:8px; font-family:var(--font); font-size:0.85rem; color:#111; outline:none; box-sizing:border-box; }
.su-pk-search:focus { border-color:rgba(0,0,0,0.3); background:#fff; }
.su-pk-list { max-height:210px; overflow-y:auto; }
.su-pk-list::-webkit-scrollbar { width:8px; }
.su-pk-list::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.14); border-radius:8px; }
.su-pk-item { display:flex; align-items:center; gap:9px; padding:9px 12px; cursor:pointer; font-size:0.86rem; color:#222; transition:background 0.12s; }
.su-pk-item:hover, .su-pk-item.su-pk-sel { background:#f3f4f6; }
.su-pk-item img { width:22px; height:15px; border-radius:3px; object-fit:cover; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,0.07); }
.su-pk-item-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.su-pk-item-dial { color:#999; font-size:0.8rem; flex-shrink:0; }

.su-phone-row { position:relative; display:flex; align-items:stretch; animation:ls-fadein 0.5s cubic-bezier(0.16,1,0.3,1) 0.24s both; }

/* Signup field stagger — override the generic 2-step stagger with a full sequential cascade */
#signup-pane .login-fields > :nth-child(1)  { animation-delay: 0.18s; }
#signup-pane .login-fields > :nth-child(2)  { animation-delay: 0.24s; }
#signup-pane .login-fields > :nth-child(3)  { animation-delay: 0.30s; }
#signup-pane .login-fields > :nth-child(4)  { animation-delay: 0.36s; }
#signup-pane .login-fields > :nth-child(5)  { animation-delay: 0.42s; }
#signup-pane .login-fields > :nth-child(6)  { animation-delay: 0.48s; }
#signup-pane .login-fields > :nth-child(7)  { animation-delay: 0.54s; }
#signup-pane .login-fields > :nth-child(8)  { animation-delay: 0.60s; }
#signup-pane #su-submit-btn                 { animation-delay: 0.66s; }

.su-phone-pk { position:relative; flex-shrink:0; display:flex; }
.su-phone-trigger {
  display:flex; align-items:center; gap:7px; padding:0 11px;
  background:rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.12); border-right:none;
  border-radius:10px 0 0 10px; cursor:pointer; font-family:var(--font);
  transition:border-color 0.18s, background 0.18s;
}
.su-phone-trigger:hover { border-color:rgba(0,0,0,0.22); }
.su-phone-dial { font-size:0.9rem; font-weight:600; color:#111; }
#login-screen input[type=tel].su-phone-input { flex:1; min-width:0; border-radius:0 10px 10px 0 !important; padding-left:14px !important; }
.su-phone-pk .su-pk-dropdown { width:268px; left:0; right:auto; }
.su-hint { font-size:0.74rem; color:#888; line-height:1.45; margin:0.1rem 0 0; animation:ls-fadein 0.5s cubic-bezier(0.16,1,0.3,1) 0.3s both; }

/* ════════════════════ AUTO-RENEW TOGGLE (Settings → Subscription) ════════════════════ */
.ar-row {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:16px; padding:14px 16px;
  background:rgba(0,0,0,0.025); border:1px solid rgba(0,0,0,0.08); border-radius:14px;
}
.ar-text { min-width:0; }
.ar-title { display:flex; align-items:center; gap:8px; font-size:0.9rem; font-weight:700; color:var(--text,#111); }
.ar-title svg { color:#6b7280; flex-shrink:0; }
.ar-sub { font-size:0.76rem; color:var(--text-muted,#6b7280); line-height:1.45; margin-top:3px; }
.ar-toggle { position:relative; display:inline-flex; flex-shrink:0; cursor:pointer; }
.ar-toggle input { position:absolute; opacity:0; width:0; height:0; }
.ar-track { width:46px; height:26px; border-radius:999px; background:#d1d5db; transition:background 0.22s cubic-bezier(0.16,1,0.3,1); display:inline-block; }
.ar-thumb { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.3); transition:left 0.22s cubic-bezier(0.34,1.56,0.64,1); }
.ar-toggle input:checked + .ar-track { background:#16a34a; }
.ar-toggle input:checked + .ar-track .ar-thumb { left:23px; }
.ar-toggle input:focus-visible + .ar-track { box-shadow:0 0 0 3px rgba(22,163,74,0.25); }
.ar-toggle input:disabled + .ar-track { opacity:0.6; cursor:wait; }