/* Bau-Kunden visual system — premium SaaS refresh */
:root {
    --ink: #0d1a35;
    --muted: #71809a;
    --line: #e4eaf4;
    --surface: #ffffff;
    --canvas: #f4f7fc;
    --sidebar: #0d1732;
    --sidebar-soft: #142348;
    --primary: #5865f2;
    --primary-dark: #4450dc;
    --accent: #b8f264;
    --green: #1faf82;
    --shadow: 0 18px 50px rgba(31, 48, 88, .08);
    --shadow-hover: 0 24px 60px rgba(31, 48, 88, .13);
    --radius: 22px;
}

html { scroll-behavior: smooth; }
body {
    background:
        radial-gradient(circle at 86% -10%, rgba(112, 124, 255, .10), transparent 28rem),
        var(--canvas);
    color: var(--ink);
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: -.01em;
}

/* Workspace shell */
.sidebar {
    background: linear-gradient(180deg, #101c3d 0%, #0b1530 100%);
    border: 0;
    box-shadow: 20px 0 55px rgba(8, 19, 49, .12);
    padding: 25px 14px 18px;
}
.sidebar::after {
    content: '';
    position: absolute;
    width: 190px;
    height: 190px;
    right: -105px;
    top: 115px;
    border-radius: 50%;
    background: rgba(113, 126, 255, .17);
    filter: blur(35px);
    pointer-events: none;
}
.brand-row { padding: 0 11px 25px; position: relative; z-index: 1; }
.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--accent), #7d8bff 78%);
    color: #111d3d;
    box-shadow: 0 8px 20px rgba(126, 142, 255, .26);
    font-family: 'Poppins', sans-serif;
}
.brand-name { color: #fff; font-family: 'Poppins', sans-serif; font-size: 15px; }
.brand-caption { color: #8c9abd; letter-spacing: 1px; }
.workspace-switcher {
    position: relative;
    z-index: 1;
    margin: 0 3px 30px;
    border: 1px solid rgba(194, 207, 255, .13);
    background: rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.workspace-avatar { background: rgba(184, 242, 100, .16); color: var(--accent); }
.workspace-name { color: #fff; }
.workspace-type { color: #8c9abd; }
.workspace-switcher > .bi { color: #7383aa; }
.nav-label { color: #7283a9; position: relative; z-index: 1; }
.main-nav { position: relative; z-index: 1; }
.nav-item {
    min-height: 44px;
    color: #a7b3d0;
    border-radius: 13px;
    padding: 0 13px;
    font-size: 12px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-item .bi { color: #7d8caf; font-size: 16px; }
.nav-item:hover { background: rgba(255,255,255,.075); color: #fff; transform: translateX(2px); }
.nav-item:hover .bi { color: #c8d1eb; }
.nav-item.active {
    color: #fff;
    background: linear-gradient(100deg, rgba(92, 105, 244, .9), rgba(105, 113, 240, .52));
    box-shadow: 0 10px 24px rgba(76, 89, 226, .25);
}
.nav-item.active .bi { color: var(--accent); }
.nav-badge { background: var(--accent); color: #192548; }
.nav-kbd { color: #8090b5; }
.sidebar-footer { position: relative; z-index: 1; }
.help-card { background: linear-gradient(135deg, rgba(184,242,100,.17), rgba(110,128,255,.17)); color: var(--accent); border: 1px solid rgba(184,242,100,.14); }
.help-icon { background: rgba(255,255,255,.12); }
.help-title { color: #e6f8c8; }
.help-subtitle { color: #9eafd1; }
.user-row { border-color: rgba(194,207,255,.12); }
.user-avatar { background: linear-gradient(135deg, #7785ff, #b8f264); color: #172344; }
.user-name { color: #fff; }
.user-role { color: #8c9abd; }

.main-content { background: transparent; }
.topbar {
    height: 78px;
    padding: 0 46px;
    background: rgba(255,255,255,.72);
    border-bottom: 1px solid rgba(222,229,241,.86);
    backdrop-filter: blur(18px);
}
.breadcrumb-line { color: #9aa8bf; font-size: 11px; }
.breadcrumb-line strong { color: var(--ink); }
.topbar-actions { gap: 12px; }
.topbar-divider { height: 26px; background: var(--line); }
.mini-avatar { background: linear-gradient(135deg, #e3e7ff, #c9f07e); color: #3544a4; width: 35px; height: 35px; }
.content-wrap { padding: 42px 46px 64px; max-width: 1600px; }
.page-heading { margin-bottom: 31px; }
.eyebrow { color: #8390a9; letter-spacing: 1.45px; font-size: 9px; }
.page-heading h1 { font-family: 'Poppins', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -1.6px; margin: 9px 0 8px; }
.wave { color: var(--primary); }
.page-heading p { color: #8190a8; font-size: 12px; }

.metric-grid, .dashboard-grid, .automation-grid { gap: 18px; }
.metric-card, .panel {
    border: 1px solid rgba(222,229,241,.95);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.metric-card { position: relative; overflow: hidden; min-height: 158px; padding: 22px; }
.metric-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), #a579ff, var(--accent));
    opacity: .8;
}
.metric-card:hover, .panel:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: #d6def0; }
.metric-label { color: #7c8aa3; font-size: 11px; }
.metric-icon { width: 35px; height: 35px; border-radius: 12px; }
.metric-value { font-family: 'Poppins', sans-serif; font-size: 29px; letter-spacing: -1.3px; margin-top: 18px; }
.metric-trend { color: #8c9ab0; font-size: 10px; }
.trend-up { color: var(--green); }
.panel { padding: 23px; }
.panel h2 { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; }
.panel-heading p { color: #8b99af; }
.btn { border-radius: 12px; padding: 11px 15px; font-size: 11px; font-weight: 700; }
.btn-primary-custom { border: 0; background: linear-gradient(135deg, var(--primary), #8170ed); box-shadow: 0 10px 20px rgba(88,101,242,.24); }
.btn-primary-custom:hover { background: linear-gradient(135deg, var(--primary-dark), #715cdd); transform: translateY(-1px); }
.btn-soft { background: #fff; border: 1px solid var(--line); color: #64728c; }
.btn-soft:hover, .btn-soft.active { background: #f0f2ff; border-color: #d9dcff; color: var(--primary); }
.select-button, .search-box { border-radius: 11px; border-color: var(--line); background: #fff; }
.live-pill { border-radius: 999px; background: #eaf9f1; padding: 7px 10px; font-weight: 700; }
.ad-status { background: linear-gradient(135deg, #f2f4ff, #f4f9ff); border: 1px solid #e6eaff; border-radius: 15px; }
.status-orb { background: linear-gradient(135deg, #dfe4ff, #c7f0d9); }
.budget-bar { height: 8px; background: #e9edf5; }
.budget-bar span { background: linear-gradient(90deg, var(--primary), #a67cff); }
.insight-card { border: 1px solid #e3e6ff; border-radius: 15px; background: linear-gradient(135deg, #f1f3ff, #f9f9ff); }
.insight-card.warm { border-color: #f4e5bd; background: linear-gradient(135deg, #fff7e8, #fffdf8); }
.table-panel { overflow: hidden; }
.table-panel .panel-heading { background: linear-gradient(180deg, rgba(250,251,255,.9), rgba(255,255,255,.35)); }
.lead-table th { background: #f8faff; color: #8693aa; padding-top: 15px; padding-bottom: 15px; }
.lead-table td { color: #64728b; border-color: #edf1f6; }
.lead-table td strong { color: #223252; }
.lead-table tr:hover td { background: #fafbff; }
.status-pill, .invoice-type { border-radius: 999px; padding: 6px 9px; }
.status-select { border-radius: 999px; }
.kanban-grid { gap: 14px; }
.kanban-column { border: 1px solid #e1e7f1; border-radius: 17px; background: rgba(239,243,249,.82); padding: 12px; }
.kanban-heading { padding: 4px 5px 13px; color: #566581; }
.kanban-count { border-radius: 999px; color: #5f6e89; }
.kanban-card { border-radius: 14px; border-color: #e3e8f1; box-shadow: 0 8px 18px rgba(39,55,96,.06); padding: 14px; }
.kanban-card:hover { border-color: #cdd5ec; }
.kanban-card strong { color: #273655; }
.table-person small, .table-sub, .kanban-card p { color: #8c9ab0; }
.value-tag { color: var(--primary); }
.empty-state-page { padding: 86px 28px; }
.empty-state-icon { background: linear-gradient(135deg, #e8ebff, #e2f7e8); box-shadow: 0 10px 25px rgba(88,101,242,.10); }
.readonly-note, .source-badge { border-radius: 999px; }
.readonly-note { background: #f6f8fc; border-color: #e8edf5; }

/* Billing, results, settings */
.billing-layout { gap: 18px; }
.billing-seller-details { display:grid; gap:4px; color:#71809a; font-size:11px; line-height:1.55; }
.billing-seller-details strong { color:#30405f; font-size:12px; }
.plan-card { background: linear-gradient(155deg, #111d40, #1b2860) !important; color: #fff; border: 0; box-shadow: 0 22px 50px rgba(17,29,64,.22); }
.plan-card h2, .plan-card .plan-price { color: #fff; }
.plan-card .plan-description, .plan-card .plan-feature { color: #b9c4df; }
.plan-card .plan-status { color: var(--accent); }
.plan-card hr { border-color: rgba(255,255,255,.12); }
.plan-card .plan-feature .bi { color: var(--accent); }
.budget-option { border-radius: 13px; border-color: var(--line); padding: 13px 10px; }
.budget-option:hover { border-color: #b9c1ff; background: #f6f7ff; }
.invoice-panel > .panel-heading { background: linear-gradient(180deg, #fbfcff, #fff); }
.settings-layout { gap: 18px; }
.settings-nav { border-radius: 20px; background: rgba(255,255,255,.82); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 10px; }
.settings-nav a { border-radius: 11px; padding: 12px 13px; font-weight: 600; }
.settings-nav a.active, .settings-nav a:hover { color: var(--primary); background: #eef0ff; }
.settings-form { max-width: none; }
.settings-form .panel-heading { margin-bottom: 28px; }
.saved-pill { border-radius: 999px; padding: 7px 10px; }
.form-label, .field-label-row label { color: #5e6d87; font-size: 10px; letter-spacing: .01em; }
.form-control, .form-select, .input-wrap input, .phone-input-group .form-select { border: 1px solid #dfe6f1; border-radius: 12px; min-height: 43px; background: #fbfcff; }
.form-control:focus, .form-select:focus, .input-wrap input:focus { border-color: #98a2ff; box-shadow: 0 0 0 4px rgba(88,101,242,.11); background: #fff; }
.custom-modal { border-radius: 24px; }
.app-toast { border-radius: 14px; }

/* Dark mode remains available only from settings, but gets the same system */
body.dark-mode {
    --ink: #f1f5ff;
    --muted: #9eabc5;
    --line: #263454;
    --surface: #111c35;
    --canvas: #080f22;
    background: radial-gradient(circle at 86% -10%, rgba(91,105,245,.18), transparent 28rem), var(--canvas);
}
.dark-mode .topbar { background: rgba(13,23,50,.78); border-color: #263454; }
.dark-mode .breadcrumb-line strong, .dark-mode .page-heading h1 { color: #f3f6ff; }
.dark-mode .metric-card, .dark-mode .panel, .dark-mode .settings-nav { background: rgba(17,28,53,.92); border-color: #263454; }
.dark-mode .table-panel .panel-heading, .dark-mode .invoice-panel > .panel-heading { background: rgba(17,28,53,.94); }
.dark-mode .metric-label, .dark-mode .page-heading p, .dark-mode .panel-heading p { color: #9eabc5; }
.dark-mode .lead-table th, .dark-mode .lead-table td, .dark-mode .lead-table tr:hover td { background: #111c35; border-color: #263454; }
.dark-mode .lead-table td strong, .dark-mode .kanban-card strong { color: #f1f5ff; }
.dark-mode .btn-soft, .dark-mode .select-button, .dark-mode .search-box, .dark-mode .form-control, .dark-mode .form-select, .dark-mode .input-wrap input { background: #0e1830; border-color: #2e3d60; color: #e8eeff; }
.dark-mode .btn-soft:hover, .dark-mode .btn-soft.active { background: #222e5a; }
.dark-mode .kanban-column { background: #0d1730; border-color: #263454; }
.dark-mode .kanban-card { background: #14213f; border-color: #2b3b60; }
.dark-mode .readonly-note { background: #0e1830; border-color: #263454; }
.dark-mode .ad-status, .dark-mode .insight-card { background: #192651; border-color: #2c3b6e; }
.dark-mode .insight-card.warm { background: #342a1b; border-color: #5b4825; }
.dark-mode .settings-nav a.active, .dark-mode .settings-nav a:hover { background: #222e5a; }
.dark-mode .form-label, .dark-mode .field-label-row label { color: #aebbd6; }
.dark-mode .form-control:focus, .dark-mode .form-select:focus, .dark-mode .input-wrap input:focus { background: #101c38; }

/* Auth */
.auth-page { background: #f4f7fc; }
.auth-shell { grid-template-columns: minmax(410px, .82fr) 1.18fr; }
.auth-pitch {
    background:
        radial-gradient(circle at 82% 18%, rgba(184,242,100,.14), transparent 17rem),
        linear-gradient(145deg, #0d1732 0%, #172653 100%);
    padding: 48px clamp(35px, 7vw, 110px) 35px;
}
.auth-pitch::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 80%); }
.auth-pitch::after { width: 520px; height: 520px; background: radial-gradient(circle, rgba(95,110,247,.38), transparent 67%); right: -220px; bottom: -240px; }
.auth-brand .brand-mark { background: linear-gradient(145deg, var(--accent), #8d9aff); color: #142040; }
.pitch-content { max-width: 550px; }
.pitch-kicker { color: var(--accent); letter-spacing: 1.65px; }
.pitch-content h1 { font-family: 'Poppins', sans-serif; font-size: clamp(38px, 4vw, 61px); letter-spacing: -3px; }
.pitch-content h1 em { color: #98a4ff; }
.pitch-content p { color: #b9c5df; line-height: 1.85; }
.proof-icon { background: rgba(184,242,100,.15); color: var(--accent); }
.pitch-proof { color: #e0e7f7; }
.pitch-footer { color: #8595bb; }
.pitch-footer a { color: var(--accent); }
.auth-form-wrap { background: radial-gradient(circle at 70% 20%, rgba(112,124,255,.09), transparent 26rem), #f7f9fd; padding: 38px clamp(24px, 7vw, 120px); }
.auth-form-card { max-width: 475px; padding: 37px 40px; border: 1px solid rgba(221,229,241,.9); border-radius: 27px; background: rgba(255,255,255,.88); box-shadow: 0 25px 70px rgba(32,52,91,.11); backdrop-filter: blur(15px); }
.auth-language { border-bottom-color: #e8edf5; }
.auth-header { margin-bottom: 28px; }
.auth-header h2 { font-family: 'Poppins', sans-serif; font-size: 30px; }
.auth-header p { color: #7c8ba4; }
.form-field { margin-top: 19px; }
.input-wrap input { padding-top: 13px; padding-bottom: 13px; }
.auth-submit { min-height: 47px; margin-top: 11px; }
.auth-switch { margin-top: 25px; }
.check-line { color: #71809a; line-height: 1.6; }
.form-alert { border-radius: 12px; }
.form-alert.pending { color: #87621c; background: #fff8e7; border: 1px solid #f1dfad; }
.payment-verification-overlay { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(18,32,62,.42); backdrop-filter: blur(7px); }
.payment-verification-dialog { width: min(430px, 100%); padding: 38px 32px 32px; border: 1px solid rgba(255,255,255,.7); border-radius: 24px; background: rgba(255,255,255,.97); box-shadow: 0 28px 80px rgba(16,28,58,.28); text-align: center; }
.payment-verification-spinner { width: 58px; height: 58px; margin: 0 auto 19px; padding: 5px; border: 4px solid #e7ebf5; border-top-color: var(--primary); border-right-color: var(--accent); border-radius: 50%; animation: payment-spin .9s linear infinite; }
.payment-verification-spinner span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid transparent; border-left-color: #7d8bff; }
.payment-verification-dialog h2 { margin: 0; color: #263655; font: 800 20px/1.25 'Poppins', sans-serif; }
.payment-verification-dialog p { margin: 10px auto 16px; max-width: 330px; color: #7c8ca5; font-size: 11px; line-height: 1.7; }
.payment-verification-status { color: #5666d8; font-size: 11px; font-weight: 700; }
@keyframes payment-spin { to { transform: rotate(360deg); } }

/* Onboarding */
.onboarding-page { background: radial-gradient(circle at 82% 0%, rgba(112,124,255,.12), transparent 26rem), #f4f7fc; }
.onboarding-header { height: 78px; padding: 0 clamp(20px, 7vw, 110px); background: rgba(255,255,255,.78); border-bottom-color: #e4eaf4; backdrop-filter: blur(16px); }
.onboarding-header .auth-brand { color: var(--ink); }
.onboarding-header .auth-brand .brand-mark { background: linear-gradient(145deg, #b8f264, #7d8bff); color: #12203e; }
.onboarding-main { max-width: 900px; padding: 58px 20px 80px; }
.onboarding-progress { margin-bottom: 32px; }
.progress-label { color: #7d8ca6; }
.progress-label strong { color: var(--primary); }
.progress-track { height: 8px; background: #e2e8f2; }
.progress-track span { background: linear-gradient(90deg, var(--primary), #8c77ef, var(--accent)); }
.step-dots { margin-top: 19px; }
.step-dot { color: #a4b0c2; }
.step-dot span { background: #fff; border-color: #d9e0ec; width: 25px; height: 25px; }
.step-dot.done span { background: #e9edff; border-color: #e9edff; color: var(--primary); }
.step-dot.current small { color: var(--primary); }
.onboarding-card { border: 1px solid #e1e8f2; border-radius: 26px; box-shadow: 0 24px 70px rgba(29,47,87,.10); padding: 40px 44px; }
.onboarding-card h1 { font-family: 'Poppins', sans-serif; font-size: 27px; }
.onboarding-intro { color: #7c8ba3; line-height: 1.75; }
.service-catalog-card, .radio-cards span, .budget-cards span { border-color: #dfe6f1; border-radius: 14px; background: #fcfdff; }
.service-catalog-card:hover, .service-catalog-card:has(input:checked), .radio-cards input:checked + span, .budget-cards input:checked + span { background: #eff1ff; border-color: #aab1ff; box-shadow: 0 0 0 4px #f3f4ff; }
.service-catalog-card strong, .radio-cards span strong, .budget-cards span strong { color: #344361; }
.service-catalog-card small, .radio-cards span small, .budget-cards span small { color: #8190a8; }
.profile-note, .budget-note { background: #f5f8fc; border: 1px solid #e6ecf4; border-radius: 13px; }
.verification-card { border-color: #dfe6f1; border-radius: 15px; }
.verification-row { border-color: #edf1f6; }
.onboarding-actions { border-color: #e8edf4; }

/* City picker */
.city-picker { position: relative; }
.city-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 7px); padding: 7px; overflow: hidden; background: #fff; border: 1px solid #dfe6f1; border-radius: 16px; box-shadow: 0 18px 40px rgba(24,43,83,.16); }
.city-result { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 10px; border: 0; border-radius: 11px; background: transparent; color: #263655; text-align: left; }
.city-result:hover, .city-result:focus-visible { background: #f0f2ff; outline: none; }
.city-result-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px; border-radius: 9px; background: #eef0ff; color: var(--primary); }
.city-result > span:nth-child(2) { flex: 1; min-width: 0; }
.city-result strong, .city-result small { display: block; }
.city-result strong { font-size: 11px; }
.city-result small { margin-top: 2px; color: #8b99af; font-size: 9px; }
.city-result > .bi { color: #9aa8be; }
.city-result-empty, .city-result-loading { padding: 13px; color: #8b99af; font-size: 10px; }
.selected-city-meta { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: #1c9c73; font-size: 10px; }
.selected-city-meta i { font-size: 13px; }
.input-suffix { position: absolute; right: 13px; color: #7b8aa2; font-size: 11px; font-weight: 700; pointer-events: none; }
#service_radius_km { padding-right: 42px; }
.service-area-summary { margin-top: 18px; padding: 16px 18px; border: 1px solid #e4eaf3; border-radius: 15px; background: #f8faff; }
.service-area-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.service-area-summary-head strong { color: #344361; font-size: 12px; }
.service-area-summary-head small { color: #8b99af; font-size: 10px; }
.service-area-city-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.service-area-city-list span { padding: 6px 9px; border-radius: 999px; background: #fff; color: #64738c; font-size: 10px; }
.service-area-summary-note { margin: 12px 0 0; color: #8b99af; font-size: 10px; }
.custom-hours-panel { margin-top: 14px; padding: 15px; border: 1px solid #e4eaf3; border-radius: 15px; background: #f8faff; }
.hours-row { display: grid; grid-template-columns: 105px 110px 1fr; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e9eef5; }
.hours-row:last-child { border-bottom: 0; }
.hours-row strong { color: #344361; font-size: 10px; }
.hours-closed { display: flex; align-items: center; gap: 6px; margin: 0; color: #8b99af; font-size: 10px; }
.hours-closed input { accent-color: var(--primary); }
.hours-time { display: flex; align-items: center; gap: 7px; color: #8b99af; font-size: 10px; }
.hours-time input { min-width: 108px; padding: 8px 9px; border: 1px solid #dfe6f1; border-radius: 8px; color: #344361; background: #fff; font-size: 10px; }
.hours-time input:focus { border-color: #9ba2f3; outline: none; box-shadow: 0 0 0 3px #eef0ff; }
.document-preview { margin-top: 10px; padding: 9px; overflow: hidden; border: 1px solid #e4eaf3; border-radius: 12px; background: #f8faff; }
.document-preview img { display: block; width: 100%; max-height: 210px; object-fit: contain; border-radius: 8px; background: #fff; }
.document-preview iframe { display: block; width: 100%; height: 210px; border: 0; border-radius: 8px; background: #fff; }
.document-preview-meta { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: #7e8ca4; font-size: 10px; }
.document-preview-meta span { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.document-preview-meta a { color: var(--primary); text-decoration: none; font-weight: 700; }
.dark-mode .city-results { background: #111c35; border-color: #2e3d60; }
.dark-mode .city-result { color: #eff4ff; }
.dark-mode .city-result:hover, .dark-mode .city-result:focus-visible { background: #222e5a; }
.dark-mode .city-result small, .dark-mode .city-result-empty, .dark-mode .city-result-loading { color: #9eabc5; }
.dark-mode .city-result-icon { background: #26315d; }
.dark-mode .service-area-summary { background: #111c35; border-color: #2e3d60; }
.dark-mode .service-area-summary-head strong { color: #eff4ff; }
.dark-mode .service-area-city-list span { background: #1c2949; color: #c4cee2; }
.dark-mode .custom-hours-panel { background: #111c35; border-color: #2e3d60; }
.dark-mode .hours-row { border-color: #2e3d60; }
.dark-mode .hours-row strong { color: #eff4ff; }
.dark-mode .hours-time input { background: #171f38; border-color: #37466b; color: #eff4ff; }
.dark-mode .document-preview { background: #111c35; border-color: #2e3d60; }
.dark-mode .document-preview img, .dark-mode .document-preview iframe { background: #171f38; }

@media (max-width: 1100px) {
    .topbar, .content-wrap { padding-left: 28px; padding-right: 28px; }
    .auth-shell { grid-template-columns: minmax(350px, .9fr) 1.1fr; }
    .auth-form-card { padding: 32px; }
}
@media (max-width: 991px) {
    .topbar { height: 70px; }
    .content-wrap { padding: 30px 20px 50px; }
    .auth-shell { display: block; }
    .auth-pitch { display: none; }
    .auth-form-wrap { min-height: 100vh; padding: 30px 20px; }
    .auth-form-card { max-width: 520px; margin: 0 auto; }
}
@media (max-width: 575px) {
    .page-heading h1 { font-size: 26px; letter-spacing: -1.1px; }
    .content-wrap { padding: 24px 15px 40px; }
    .panel { padding: 18px; border-radius: 18px; }
    .metric-card { min-height: 140px; padding: 18px; }
    .auth-form-card { padding: 27px 21px; border-radius: 22px; }
    .onboarding-card { padding: 27px 20px; border-radius: 21px; }
    .onboarding-main { padding-top: 35px; }
    .hours-row { grid-template-columns: 1fr auto; gap: 8px; }
    .hours-time { grid-column: 1 / -1; }
}