:root {
            /* Hansen Homes Brand Palette */
            --pine:   #2C3B2D;   /* Forest Pine  — primary dark  */
            --slate:  #5C6B5D;   /* Slate Green  — secondary     */
            --drift:  #A89070;   /* Driftwood    — warm accent    */
            --gold:   #B89A6A;   /* Antique Gold — highlight      */
            --ash:    #E8E0D0;   /* Birch Ash    — light bg       */
            --birch:  #F5F0E8;   /* Birch White  — lightest bg    */

            /* Functional aliases — keep these names so existing code still works */
            --bg:        var(--birch);
            --card-bg:   #ffffff;
            --text:      #1a1a1a;
            --gold-dim:  rgba(184,154,106,0.15);
            --border:    #e0e0e0;
            --dark:      var(--pine);
            --muted:     #888;
            --green:     #27ae60;
            --red:       #e74c3c;
            --blue:      #2980b9;
            --orange:    #e67e22;
            --purple:    #8e44ad;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: "Helvetica Neue", Arial, sans-serif;
            background: var(--bg);
            color: var(--text);
            -webkit-tap-highlight-color: transparent;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* ─────────────────────────────────────
           LOGIN SCREEN
        ───────────────────────────────────── */
        #loginScreen {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background: var(--ash);
            align-items: center;
            justify-content: center;
            padding: 24px;
        }
        .login-logo {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: var(--gold);
            font-size: 13px;
            letter-spacing: 4px;
            text-transform: uppercase;
            margin-bottom: 8px;
            text-align: center;
        }
        .login-name {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: white;
            font-size: 28px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 4px;
        }
        .login-tagline {
            color: var(--muted);
            font-size: 12px;
            letter-spacing: 1px;
            text-align: center;
            margin-bottom: 40px;
        }
        .login-card {
            background: #1e2e1f;
            border: 1px solid #3a4e3b;
            border-radius: 12px;
            padding: 28px 24px;
            width: 100%;
            max-width: 380px;
        }
        .login-tab-row {
            display: flex;
            background: #192619;
            border-radius: 8px;
            padding: 3px;
            margin-bottom: 22px;
        }
        .login-tab {
            flex: 1;
            text-align: center;
            padding: 9px;
            font-size: 13px;
            font-weight: 600;
            color: #666;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .login-tab.active { background: var(--gold); color: black; }
        .login-label {
            display: block;
            font-size: 11px;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
        }
        .login-input {
            width: 100%;
            padding: 13px 14px;
            background: #192619;
            border: 1px solid #3a4e3b;
            border-radius: 6px;
            color: white;
            font-size: 15px;
            margin-bottom: 14px;
            font-family: sans-serif;
        }
        .login-input:focus { outline: none; border-color: var(--gold); }
        .login-btn {
            width: 100%;
            padding: 15px;
            background: var(--gold);
            color: black;
            border: none;
            border-radius: 6px;
            font-size: 15px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            margin-bottom: 10px;
            font-family: sans-serif;
        }
        .login-btn:disabled { opacity: 0.5; cursor: default; }
        .login-error {
            color: #e74c3c;
            font-size: 13px;
            text-align: center;
            margin-top: 8px;
            min-height: 20px;
            font-family: sans-serif;
        }
        .demo-section {
            margin-top: 20px;
            border-top: 1px solid #333;
            padding-top: 16px;
        }
        .demo-label {
            font-size: 11px;
            color: #555;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 10px;
        }
        .demo-btn-row { display: flex; gap: 8px; }
        .demo-btn {
            flex: 1;
            padding: 10px;
            background: transparent;
            border: 1px solid #3a4e3b;
            border-radius: 6px;
            color: #aaa;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            font-family: sans-serif;
            transition: all 0.2s;
        }
        .demo-btn:hover { border-color: var(--gold); color: var(--gold); }

        /* Invite landing */
        #inviteLanding {
            display: none;
            flex-direction: column;
            min-height: 100vh;
            background: var(--dark);
            align-items: center;
            justify-content: center;
            padding: 24px;
        }
        .invite-card {
            background: #162f36;
            border: 1px solid var(--gold);
            border-radius: 12px;
            padding: 28px 24px;
            width: 100%;
            max-width: 380px;
            text-align: center;
        }
        .invite-icon { font-size: 40px; margin-bottom: 12px; }
        .invite-title { color: white; font-size: 20px; font-weight: 700; margin-bottom: 6px; }
        .invite-sub { color: var(--muted); font-size: 13px; margin-bottom: 22px; line-height: 1.5; }

        /* ─────────────────────────────────────
           MAIN APP
        ───────────────────────────────────── */
        #mainApp { display: none; }

        /* App Bar */
        .app-bar {
            background: var(--dark);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 16px;
            position: sticky;
            top: 0;
            z-index: 500;
        }
        .app-bar-title {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: var(--gold);
            font-size: 15px;
            letter-spacing: 2px;
            font-weight: 700;
        }
        .app-bar-right { display: flex; gap: 10px; align-items: center; }
        .user-pill {
            font-size: 11px;
            color: #888;
            background: #2a2a2a;
            padding: 5px 10px;
            border-radius: 20px;
        }
        .logout-btn {
            font-size: 12px;
            color: var(--muted);
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
        }

        /* View toggle */
        .view-toggle {
            display: flex;
            background: #333;
            border-radius: 20px;
            padding: 3px;
        }
        .view-btn {
            padding: 5px 12px;
            border-radius: 16px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            cursor: pointer;
            color: #aaa;
            transition: all 0.2s;
        }
        .view-btn.active { background: var(--gold); color: black; }

        /* Views */
        .view { display: none; }
        .view.active { display: block; }

        /* Section tabs */
        .section-tabs {
            display: flex;
            background: #f0f0f0;
            border-radius: 8px;
            padding: 4px;
            margin: 14px 16px;
        }
        .sec-tab {
            flex: 1;
            text-align: center;
            padding: 9px 4px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            color: #888;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .sec-tab.active { background: white; color: black; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .section-content { display: none; padding: 0 16px 100px; }
        .section-content.active { display: block; }

        /* Cards / Inputs */
        .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 4px; padding: 16px; margin-bottom: 14px; }
        .section-header { font-family: sans-serif; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; color: var(--gold); margin-bottom: 12px; font-weight: 700; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
        .input-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #e5e5ea; gap:6px; }
        .input-row label { flex:0 0 auto; max-width:54%; font-size:14px; line-height:1.3; color:#444; }
        .input-row > input:not([class]) { width:120px; min-width:0; text-align:right; font-size:14px; }
        @media(max-width:380px){ .input-row label{font-size:13px;max-width:50%;} .input-row>input:not([class]){width:100px;} }
        .input-row:last-child { border-bottom: none; }
        input[type="number"]:not(.dual-input-pct):not(.dual-input-amt):not(.dual-input), select { font-family: sans-serif; font-size: 16px; text-align: right; border: none; background: transparent; color: black; font-weight: 500; width: 130px; }
        input:focus, select:focus { outline: none; border-bottom: 1px solid var(--gold); }
        .dual-input-container { display:flex; gap:0; justify-content:flex-end; align-items:center; flex-shrink:0; }
        .dual-input-pct  { width:46px; min-width:0; text-align:right; border-bottom:1px solid transparent; font-size:16px;  background:transparent; border:none; padding:0; color:black; }
        .dual-input-pct:focus { border-bottom:1px solid var(--gold); outline:none; }
        .dual-input-amt  { width:82px; min-width:0; text-align:right; border-bottom:1px solid transparent; font-size:16px;  background:transparent; border:none; padding:0; color:black; }
        .dual-input-amt:focus { border-bottom:1px solid var(--gold); outline:none; }
        .dual-input { width:60px; min-width:0; text-align:right; border-bottom:1px solid transparent; font-size:16px; }
        .dual-input:focus { border-bottom:1px solid var(--gold); }
        .dp-sep   { color:#aaa; font-size:14px; padding:0 6px 0 2px; }
        .dp-divider { color:#ddd; font-size:16px; padding:0 6px; }
        .dp-prefix { color:#aaa; font-size:14px; padding:0 3px; }
        @media(max-width:380px){ .dual-input-pct{width:38px;} .dual-input-amt{width:52px;} .dual-input{width:44px;font-size:12px;} }

        /* Toggles */
        .toggle-container { display: flex; background: white; border: 1px solid #ddd; border-radius: 4px; padding: 2px; margin-bottom: 14px; }
        .toggle-btn { flex: 1; text-align: center; padding: 8px 4px; font-size: 12px; cursor: pointer; font-weight: 600; color: #888; transition: all 0.2s; border-radius: 3px; }
        .toggle-btn.active { background: var(--gold); color: white; }

        /* Results */
        .result-box { background: var(--dark); color: white; border-radius: 4px; padding: 22px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.15); margin-bottom: 14px; }
        .big-number { font-size: 40px; font-weight: 700; color: var(--gold); margin: 4px 0; letter-spacing: -1px; }
        .sub-result { display: flex; justify-content: space-between; font-size: 13px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #444; color: #ddd; }
        .warning-text { color: #ffcc00; font-weight: 600; }
        .info-pill { background: #f4f4f4; color: #444; font-size: 13px; padding: 13px; border-left: 3px solid var(--gold); margin-bottom: 14px; line-height: 1.5; }

        /* Net Out */
        .net-out-line { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #e5e5ea; }
        .net-out-line:last-child { border-bottom: none; }
        .net-out-label { font-size: 13px; color: #555; flex: 1; }
        .net-out-input { width: 110px; text-align: right; font-size: 14px; font-weight: 500; border: none; background: transparent; border-bottom: 1px solid transparent; }
        .net-out-input:focus { outline: none; border-bottom: 1px solid var(--gold); }
        .net-result-positive { color: var(--gold); }
        .net-result-negative { color: var(--red); }

        /* Pipeline */
        .pipeline-header { padding: 14px 16px 6px; display: flex; justify-content: space-between; align-items: center; }
        .pipeline-title { font-size: 18px; font-weight: 700; }
        .add-client-btn { background: var(--gold); color: black; border: none; padding: 10px 18px; border-radius: 4px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; }
        .stage-section { margin-bottom: 4px; }
        .stage-header { display: flex; align-items: center; padding: 10px 16px; cursor: pointer; user-select: none; }
        .stage-dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; flex-shrink: 0; }
        .stage-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; flex: 1; }
        .stage-count { font-size: 12px; color: var(--muted); background: #eee; padding: 2px 8px; border-radius: 10px; }
        .stage-chevron { font-size: 11px; color: var(--muted); margin-left: 8px; transition: transform 0.2s; }
        .stage-chevron.open { transform: rotate(90deg); }
        .stage-clients { padding: 0 16px 6px; }
        .stage-lead .stage-dot { background: #95a5a6; }
        .stage-active .stage-dot { background: var(--blue); }
        .stage-contract .stage-dot { background: var(--orange); }
        .stage-closed .stage-dot { background: var(--green); }
        .stage-past .stage-dot { background: var(--purple); }

        .client-card { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 10px; cursor: pointer; transition: box-shadow 0.2s; position: relative; }
        .client-card:active { box-shadow: 0 3px 12px rgba(0,0,0,0.1); }
        .client-name { font-size: 15px; font-weight: 700; margin-bottom: 3px; padding-right: 60px; }
        .client-meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
        .client-note { font-size: 13px; color: #555; background: #fafafa; border-left: 3px solid var(--gold); padding: 6px 8px; border-radius: 0 3px 3px 0; line-height: 1.4; }
        .client-stage-badge { position: absolute; top: 14px; right: 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 10px; }
        .badge-lead { background: #ecf0f1; color: #7f8c8d; }
        .badge-active { background: #d6eaf8; color: #2471a3; }
        .badge-contract { background: #fef9e7; color: #b7950b; }
        .badge-closed { background: #d5f5e3; color: #1e8449; }
        .badge-past { background: #f4ecf7; color: #7d3c98; }
        .deadline-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
        .deadline-chip { font-size: 11px; padding: 3px 8px; border-radius: 10px; background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
        .deadline-chip.urgent { background: #f8d7da; color: #842029; border-color: #f5c2c7; }

        /* ─────────────────────────────────────
           CLIENT DETAIL MODAL
        ───────────────────────────────────── */
        .bottom-sheet-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.6);
            z-index: 2000;
            flex-direction: column;
        }
        .bottom-sheet-overlay.open { display: flex; }
        .bottom-sheet {
            background: white;
            margin-top: auto;
            border-radius: 18px 18px 0 0;
            padding: 16px 16px 40px;
            max-height: 88vh;
            overflow-y: auto;
        }
        .sheet-handle { width: 36px; height: 4px; background: #ddd; border-radius: 2px; margin: 0 auto 16px; }
        .sheet-close { float: right; background: #f0f0f0; border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 15px; cursor: pointer; }
        .sheet-title { font-size: 19px; font-weight: 700; margin-bottom: 3px; padding-right: 40px; }
        .sheet-sub { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
        .sheet-section { margin-bottom: 16px; }
        .sheet-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); font-weight: 700; margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
        .sheet-field { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
        .sheet-field span:first-child { color: var(--muted); }
        .sheet-field span:last-child { font-weight: 600; max-width: 200px; text-align: right; }
        .action-btn { width: 100%; padding: 14px; margin-bottom: 8px; border-radius: 6px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; border: none; }
        .action-btn.primary { background: var(--gold); color: black; }
        .action-btn.secondary { background: #f0f0f0; color: black; }
        .action-btn.blue { background: var(--blue); color: white; }
        .action-btn.danger { background: #fff0f0; color: var(--red); border: 1px solid var(--red); }
        .showing-row { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; align-items: flex-start; }
        .showing-time-col { min-width: 55px; font-weight: 700; color: var(--gold); font-size: 11px; }
        .showing-addr-col { flex: 1; }
        .showing-addr-col a { color: var(--blue); text-decoration: none; }

        /* ─────────────────────────────────────
           ADD/EDIT FORM
        ───────────────────────────────────── */
        .form-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 3000; flex-direction: column; overflow-y: auto; }
        .form-overlay.open { display: flex; }
        .form-sheet { background: white; flex: 1; padding: 16px 16px 50px; max-height: 94vh; overflow-y: auto; }
        .form-title { font-size: 17px; font-weight: 700; margin-bottom: 16px; }
        .form-group { margin-bottom: 14px; }
        .form-label { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
        .form-input { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 15px; background: white; font-family: sans-serif; }
        .form-input:focus { outline: none; border-color: var(--gold); }
        textarea.form-input { resize: vertical; }
        .form-select { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 15px; background: white; font-family: sans-serif; -webkit-appearance: none; }
        .showing-input-row { display: flex; gap: 8px; margin-bottom: 8px; }
        .showing-input-row input { flex: 1; padding: 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: sans-serif; }
        .showing-remove-btn { background: #fff0f0; color: var(--red); border: 1px solid #fcc; border-radius: 6px; padding: 9px 12px; cursor: pointer; font-size: 14px; }
        .add-showing-btn { background: #f0f0f0; border: none; padding: 9px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; }

        /* ─────────────────────────────────────
           INVITE MODAL
        ───────────────────────────────────── */
        .invite-result-box {
            background: #113138;
            border: 1px solid var(--gold);
            border-radius: 8px;
            padding: 16px;
            margin: 12px 0;
            text-align: center;
        }
        .invite-code {
            font-size: 28px;
            font-weight: 700;
            color: var(--gold);
            letter-spacing: 4px;
            font-family: monospace;
            margin-bottom: 6px;
        }
        .invite-link-small { font-size: 11px; color: #888; word-break: break-all; }
        .copy-link-btn { background: var(--gold); color: black; border: none; padding: 10px 20px; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; margin-top: 10px; width: 100%; }

        /* ─────────────────────────────────────
           CLIENT VIEW (mobile-first)
        ───────────────────────────────────── */
        #clientApp {
            display: none;
            flex-direction: column;
            min-height: 100vh;
            background: #f5f5f7;
            padding-bottom: 80px;
        }
        .client-app-bar {
            background: var(--dark);
            padding: 16px 16px 20px;
        }
        .client-greeting { font-size: 12px; color: #888; letter-spacing: 0.5px; margin-bottom: 2px; }
        .client-name-large { font-size: 22px; font-weight: 700; color: white; }
        .client-agent-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.08);
            border: 1px solid #333;
            border-radius: 20px;
            padding: 6px 12px;
            margin-top: 10px;
        }
        .client-agent-avatar {
            width: 24px; height: 24px;
            border-radius: 50%;
            background: var(--gold);
            display: flex; align-items: center; justify-content: center;
            font-size: 10px; font-weight: 700; color: black;
        }
        .client-agent-name { font-size: 12px; color: #ccc; }

        /* Status card */
        .client-status-card {
            background: white;
            border-radius: 16px;
            margin: 16px;
            overflow: hidden;
            box-shadow: 0 2px 16px rgba(0,0,0,0.08);
        }
        .client-status-header {
            background: var(--dark);
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .client-status-stage { font-size: 12px; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
        .client-status-property { font-size: 14px; color: white; margin-top: 3px; }
        .client-progress-bar-wrap { padding: 14px 16px 6px; }
        .client-progress-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; display: flex; justify-content: space-between; }
        .client-progress-bar { height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
        .client-progress-fill { height: 100%; background: var(--gold); border-radius: 3px; transition: width 0.6s ease; }
        .client-next-step {
            padding: 12px 16px 16px;
            border-top: 1px solid #f0f0f0;
        }
        .client-next-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
        .client-next-value { font-size: 14px; font-weight: 700; color: var(--text); }

        /* Deadline cards */
        .client-deadlines { padding: 0 16px; }
        .client-section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 10px; margin-top: 20px; }
        .deadline-card {
            background: white;
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 8px;
            box-shadow: 0 1px 6px rgba(0,0,0,0.06);
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-left: 4px solid #e0e0e0;
            gap: 12px;
        }
        .deadline-card.dl-urgent  { border-left-color: var(--red); }
        .deadline-card.dl-soon    { border-left-color: var(--orange); }
        .deadline-card.dl-ok      { border-left-color: var(--green); }
        .deadline-card.dl-past    { border-left-color: #ccc; opacity: 0.7; }
        .deadline-card-label { font-size: 14px; font-weight: 700; color: #222; }
        .deadline-card-type  { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: #999; margin-top: 2px; }
        .deadline-card-note  { font-size: 11px; color: #aaa; margin-top: 4px; font-style: italic; }
        .deadline-card-right { text-align: right; flex-shrink: 0; }
        .deadline-card-date  { font-size: 18px; font-weight: 800; color: #222; line-height: 1.1; }
        .deadline-card-date.dl-urgent { color: var(--red); }
        .deadline-card-date.dl-soon   { color: var(--orange); }
        .deadline-card-time  { font-size: 13px; font-weight: 600; color: #555; margin-top: 3px; }
        .deadline-card-countdown { font-size: 11px; font-weight: 700; margin-top: 4px; padding: 2px 7px; border-radius: 8px; display: inline-block; }
        .deadline-card-countdown.dl-urgent { background: #fdecea; color: var(--red); }
        .deadline-card-countdown.dl-soon   { background: #fff3e0; color: var(--orange); }
        .deadline-card-countdown.dl-ok     { background: #eafaf1; color: var(--green); }
        .deadline-card-countdown.dl-past   { background: #f5f5f5; color: #aaa; }
        .deadline-card-countdown.dl-today  { background: #fdecea; color: var(--red); }
        /* Journey checklist collapsible */
        .journey-checklist-toggle {
            width: 100%; text-align: left; background: none; border: none; border-top: 1px solid #f0f0f0;
            padding: 10px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
            font-size: 12px; color: #888; font-family: inherit;
        }
        .journey-checklist-toggle:hover { color: var(--dark); }
        .journey-checklist-body { padding-bottom: 4px; }
        .journey-toggle-arrow { font-size: 10px; transition: transform 0.2s; }
        .journey-toggle-arrow.open { transform: rotate(180deg); }

        /* Showings (client) */
        .client-showing-card {
            background: white;
            border-radius: 12px;
            padding: 14px;
            margin-bottom: 8px;
            box-shadow: 0 1px 6px rgba(0,0,0,0.06);
        }
        .client-showing-addr { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
        .client-showing-time { font-size: 13px; color: var(--muted); }
        .client-showing-nav {
            display: block;
            margin-top: 10px;
            background: var(--dark);
            color: var(--gold);
            text-align: center;
            padding: 10px;
            border-radius: 8px;
            text-decoration: none;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        /* Contact card (client) */
        .client-contact-card {
            background: var(--dark);
            border-radius: 16px;
            margin: 0 16px;
            padding: 20px;
            display: flex;
            gap: 16px;
            align-items: center;
        }
        .contact-card-avatar {
            width: 48px; height: 48px;
            border-radius: 50%;
            background: var(--gold);
            flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; font-weight: 700; color: black;
        }
        .contact-card-info { flex: 1; }
        .contact-card-name { color: white; font-size: 16px; font-weight: 700; }
        .contact-card-role { color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
        .contact-card-btns { display: flex; flex-direction: column; gap: 6px; }
        .contact-card-btn {
            background: rgba(255,255,255,0.1);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 14px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            white-space: nowrap;
        }

        /* Bottom nav (client) */
        .client-bottom-nav {
            position: fixed;
            bottom: 0; left: 0; right: 0;
            background: white;
            border-top: 1px solid #eee;
            display: flex;
            padding: 8px 0 20px;
            z-index: 400;
            box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
        }
        .client-nav-item {
            flex: 1;
            text-align: center;
            cursor: pointer;
            padding: 6px 4px;
        }
        .client-nav-icon { font-size: 22px; }
        .client-nav-label { font-size: 10px; color: var(--muted); margin-top: 2px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
        .client-nav-item.active .client-nav-label { color: var(--gold); }
        .client-nav-item.active .client-nav-icon { filter: none; }

        /* Client sections */
        .client-section { display: none; padding-bottom: 20px; }
        .client-section.active { display: block; }

        /* Calculator (client view) */
        .client-calc-wrap { padding: 0 16px; }

        /* Footer (realtor) */
        .brand-footer { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 1px solid var(--gold); height: 62px; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; box-shadow: 0 -2px 10px rgba(0,0,0,0.06); z-index: 400; }
        .footer-logo { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 17px; letter-spacing: 2px; font-weight: 700; color: var(--text); text-decoration: none; }
        .footer-contact { background: var(--gold); color: black; padding: 10px 18px; border-radius: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; }

        .loading-screen { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--dark); flex-direction: column; gap: 12px; z-index: 99999; }
        .loading-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulse 1.2s infinite; }
        @keyframes pulse { 0%,100%{opacity:0.2;transform:scale(0.8)} 50%{opacity:1;transform:scale(1)} }

        .empty-state { text-align: center; padding: 32px 20px; color: var(--muted); font-size: 14px; }
        .empty-icon { font-size: 36px; margin-bottom: 8px; }
        /* ── Password toggle ── */
        .pw-wrap { position: relative; margin-bottom: 14px; }
        .pw-wrap .login-input { margin-bottom: 0; padding-right: 44px; }
        .pw-toggle {
            position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
            background: none; border: none; cursor: pointer;
            font-size: 18px; color: #666; padding: 4px;
            user-select: none; -webkit-user-select: none;
        }
        .pw-toggle:hover { color: var(--gold); }

        /* ── Two-step register ── */
        .reg-step { display: none; }
        .reg-step.active { display: block; }
        .step-back {
            background: none; border: none; color: #888;
            font-size: 13px; cursor: pointer; margin-bottom: 14px;
            padding: 0; text-decoration: underline;
        }
        .invite-code-big {
            text-align: center; letter-spacing: 6px; font-size: 22px;
            font-weight: 700; text-transform: uppercase;
            background: #111; border: 2px solid var(--gold) !important;
            color: var(--gold) !important;
        }
        .code-check-row {
            display: flex; gap: 8px; margin-bottom: 14px;
        }
        .code-check-row .login-input { margin-bottom: 0; flex: 1; }
        .code-next-btn {
            background: var(--gold); color: black; border: none;
            border-radius: 6px; padding: 0 18px; font-size: 14px;
            font-weight: 700; cursor: pointer; white-space: nowrap;
            font-family: sans-serif;
        }

        /* ── Professional SVG eye icon ── */
        .eye-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
        .pw-toggle { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:#666; padding:4px; }
        .pw-toggle:hover { color:var(--gold); }

        /* ── Unified top bar ── */
        .top-bar { background:var(--dark); display:flex; justify-content:space-between; align-items:center; padding:0 16px; height:56px; position:sticky; top:0; z-index:500; }
        .top-bar-logo { display:flex; align-items:center; text-decoration:none; line-height:1; }
        .top-bar-right { display:flex; align-items:center; gap:10px; }
        .top-bar-user { font-size:12px; color:#aaa; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .top-bar-signout { background:none; border:none; cursor:pointer; color:#666; padding:6px; border-radius:4px; display:flex; align-items:center; transition:color 0.2s; }
        .top-bar-signout:hover { color:#ccc; }
        .top-bar-signout svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
        .top-bar-cma-btn { font-size:10px; font-weight:700; letter-spacing:1.5px; color:rgba(255,255,255,0.5); text-decoration:none; padding:5px 10px; border:1px solid rgba(255,255,255,0.18); border-radius:2px; transition:color 0.2s, border-color 0.2s; }
        .top-bar-cma-btn:hover { color:#fff; border-color:rgba(255,255,255,0.45); }

        /* ── Chevron dropdown arrow ── */
        .stage-chevron { display:inline-flex; align-items:center; margin-left:8px; transition:transform 0.25s; }
        .stage-chevron svg { width:16px; height:16px; stroke:#888; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
        .stage-chevron.open { transform:rotate(90deg); }

        /* ── Sign-out confirm modal ── */
        .confirm-overlay { display:none; position:fixed; top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,0.75); z-index:9000; align-items:center; justify-content:center; }
        .confirm-overlay.open { display:flex; }
        .confirm-card { background:white; border-radius:12px; padding:28px 24px; width:88%; max-width:340px; text-align:center; }
        .confirm-title { font-size:17px; font-weight:700; margin-bottom:8px; }
        .confirm-sub { font-size:13px; color:#666; margin-bottom:22px; line-height:1.5; }
        .confirm-row { display:flex; gap:10px; }
        .confirm-yes { flex:1; padding:13px; background:var(--dark); color:white; border:none; border-radius:6px; font-size:14px; font-weight:700; cursor:pointer; }
        .confirm-no  { flex:1; padding:13px; background:#f0f0f0; color:black; border:none; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; }

        /* ── Invite type modal ── */
        .invite-type-card { background:white; border-radius:12px; padding:28px 24px; width:88%; max-width:360px; }
        .invite-type-title { font-size:17px; font-weight:700; margin-bottom:6px; }
        .invite-type-sub { font-size:13px; color:#666; margin-bottom:20px; line-height:1.5; }
        .invite-type-btn { width:100%; padding:16px; border-radius:8px; border:1px solid var(--border); margin-bottom:10px; text-align:left; cursor:pointer; background:white; transition:border-color 0.2s,background 0.2s; }
        .invite-type-btn:hover { border-color:var(--gold); background:#fffdf0; }
        .invite-type-btn strong { display:block; font-size:14px; font-weight:700; margin-bottom:3px; }
        .invite-type-btn span { font-size:12px; color:#888; }
        .invite-type-cancel { width:100%; padding:12px; background:none; border:none; color:#aaa; font-size:13px; cursor:pointer; margin-top:4px; text-decoration:underline; }

        /* ── Client nav SVG icons ── */
        .client-nav-icon svg { width:22px; height:22px; stroke:#aaa; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
        .client-nav-item.active .client-nav-icon svg { stroke:var(--gold); }
        .client-nav-item.active .client-nav-label { color:var(--gold); }

        /* ── Profile sheets ── */
        .profile-name-btn { background:none; border:none; cursor:pointer; color:#aaa; font-size:12px; text-align:right; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:underline dotted; text-underline-offset:2px; padding:0; font-family:sans-serif; }
        .profile-name-btn:hover { color:var(--gold); }

        /* ── Quick card (collapsed client row) ── */
        .client-row { background:white; border:1px solid var(--border); border-radius:8px; margin-bottom:8px; overflow:hidden; }
        .client-row-header { display:flex; justify-content:space-between; align-items:center; padding:14px 14px; cursor:pointer; }
        .client-row-name { font-size:15px; font-weight:700; }
        .client-row-right { display:flex; align-items:center; gap:10px; }
        .client-row-type { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:3px 8px; border-radius:10px; }
        .client-row-chevron { color:#aaa; font-size:11px; transition:transform 0.2s; }
        .client-row-chevron.open { transform:rotate(90deg); }
        .client-quick { display:none; padding:0 14px 14px; border-top:1px solid #f5f5f5; }
        .client-quick.open { display:block; }
        .client-quick-meta { font-size:13px; color:#666; margin-bottom:8px; }
        .client-quick-note { font-size:13px; color:#555; background:#fafafa; border-left:3px solid var(--gold); padding:8px 10px; border-radius:0 4px 4px 0; margin-bottom:10px; line-height:1.5; }
        .client-quick-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
        .client-view-more { background:var(--dark); color:var(--gold); border:none; border-radius:6px; padding:9px 16px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; cursor:pointer; width:100%; margin-top:2px; }

        /* ── Realtor bottom nav ── */
        .realtor-bottom-nav { position:fixed; bottom:0; left:0; right:0; background:white; border-top:1px solid #eee; display:flex; padding:8px 0 20px; z-index:400; box-shadow:0 -2px 16px rgba(0,0,0,0.07); }
        .realtor-nav-item { flex:1; text-align:center; cursor:pointer; padding:6px 4px; }
        .realtor-nav-icon svg { width:22px; height:22px; stroke:#aaa; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
        .realtor-nav-label { font-size:10px; color:#aaa; margin-top:2px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
        .realtor-nav-item.active .realtor-nav-icon svg { stroke:var(--gold); }
        .realtor-nav-item.active .realtor-nav-label { color:var(--gold); }

        /* ── Tradition tab ── */
        .tradition-header { padding:20px 16px 8px; }
        .tradition-title { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:22px; font-weight:700; margin-bottom:4px; }
        .tradition-sub { font-size:13px; color:var(--muted); }
        .broker-card { background:white; border:1px solid var(--border); border-radius:8px; padding:16px; margin:0 16px 10px; display:flex; align-items:center; gap:14px; }
        .broker-avatar { width:44px; height:44px; border-radius:50%; background:var(--gold); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:black; }
        .broker-name { font-size:15px; font-weight:700; margin-bottom:2px; }
        .broker-title { font-size:12px; color:var(--muted); }
        .broker-license { font-size:11px; color:#aaa; margin-top:3px; }
        .broker-contact-row { display:flex; gap:8px; margin-top:8px; }
        .broker-contact-btn { flex:1; text-align:center; padding:8px; background:#f5f5f5; border-radius:6px; font-size:12px; font-weight:600; color:var(--text); text-decoration:none; border:none; cursor:pointer; }

        /* ── None placeholder ── */
        .none-placeholder { background:#f5f5f5; border-radius:8px; padding:14px 16px; margin:8px 16px; font-size:13px; color:#aaa; text-align:center; letter-spacing:0.3px; }

        /* ── Co-buyer section ── */
        .co-party-card { background:white; border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:8px; box-shadow:0 1px 6px rgba(0,0,0,0.05); }
        .co-party-name { font-size:14px; font-weight:700; margin-bottom:3px; }
        .co-party-role { font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:0.5px; font-weight:700; }
        .co-party-meta { font-size:12px; color:var(--muted); margin-top:4px; }
        .co-party-pending { font-size:12px; color:#aaa; font-style:italic; }
        .invite-co-btn { width:100%; padding:12px; background:#f5f5f5; border:1px dashed #ccc; border-radius:8px; font-size:13px; color:#888; cursor:pointer; margin-top:4px; font-family:sans-serif; }
        .invite-co-btn:hover { border-color:var(--gold); color:var(--gold); background:#fffdf0; }

        /* ── Profile edit modal uses form-sheet ── */
        .section-content { padding-bottom: 80px; }

        /* ── Guest calculator button ── */
        .guest-calc-btn {
            display: block;
            width: 100%;
            padding: 18px;
            margin-bottom: 12px;
            background: var(--gold);
            color: black;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            cursor: pointer;
            letter-spacing: 0.3px;
            font-family: sans-serif;
        }
        .guest-calc-btn:hover { background: #c9a227; }
        .guest-calc-subtitle {
            font-size: 11px;
            color: #7a6d5a;
            text-align: center;
            margin-bottom: 20px;
            letter-spacing: 0.3px;
        }
        .login-divider {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 18px;
        }
        .login-divider-line { flex: 1; height: 1px; background: rgba(0,0,0,0.15); }
        .login-divider-text { font-size: 11px; color: #8a7a6a; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }

        /* ── Guest calculator screen ── */
        #guestCalcScreen {
            display: none;
            flex-direction: column;
            min-height: 100vh;
            background: var(--bg);
        }
        .guest-calc-bar {
            background: var(--dark);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            height: 56px;
            position: sticky;
            top: 0;
            z-index: 500;
        }
        .guest-calc-bar-logo {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: var(--gold);
            font-size: 14px;
            letter-spacing: 3px;
            font-weight: 700;
            text-decoration: none;
        }
        .guest-back-btn {
            background: none;
            border: none;
            color: #aaa;
            font-size: 13px;
            cursor: pointer;
            font-family: sans-serif;
            padding: 6px 10px;
            border-radius: 6px;
        }
        .guest-back-btn:hover { color: white; }
        .guest-cta-strip {
            background: var(--dark);
            border-top: 1px solid #2a2a2a;
            padding: 16px;
            text-align: center;
        }
        .guest-cta-text {
            font-size: 12px;
            color: #888;
            margin-bottom: 10px;
            line-height: 1.5;
        }
        .guest-cta-text strong { color: var(--gold); }
        .guest-cta-row { display: flex; gap: 8px; }
        .guest-cta-primary {
            flex: 2;
            padding: 12px;
            background: var(--gold);
            color: black;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            font-family: sans-serif;
        }
        .guest-cta-secondary {
            flex: 1;
            padding: 12px;
            background: #162f36;
            color: #aaa;
            border: 1px solid #333;
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
            font-family: sans-serif;
        }

        /* ── Guest calculator entry ── */
        .calc-guest-btn {
            display: block;
            width: 100%;
            max-width: 380px;
            margin: 16px auto 0;
            padding: 18px;
            background: transparent;
            border: 2px solid var(--gold);
            border-radius: 10px;
            color: var(--gold);
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            cursor: pointer;
            text-align: center;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            transition: background 0.2s, color 0.2s;
        }
        .calc-guest-btn:hover { background: var(--gold); color: black; }
        .calc-guest-sub { font-size: 10px; display: block; letter-spacing: 1px; opacity: 0.7; margin-top: 4px; text-transform: uppercase; font-family: "Helvetica Neue", sans-serif; font-weight: 400; }

        /* ── Guest calculator screen ── */
        .guest-calc-bar {
            background: var(--dark);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            height: 56px;
            position: sticky;
            top: 0;
            z-index: 500;
        }
        .guest-calc-logo { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--gold); font-size: 14px; letter-spacing: 3px; font-weight: 700; text-decoration: none; }
        .guest-back-btn { background: none; border: none; color: #888; font-size: 13px; cursor: pointer; font-family: sans-serif; display: flex; align-items: center; gap: 4px; }
        .guest-back-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

        /* ── Guest CTA at bottom ── */
        .guest-cta-card {
            margin: 8px 16px 32px;
            background: var(--dark);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
        }
        .guest-cta-title { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--gold); font-size: 16px; font-weight: 700; margin-bottom: 6px; }
        .guest-cta-sub { font-size: 12px; color: #888; line-height: 1.6; margin-bottom: 16px; }
        .guest-cta-row { display: flex; gap: 10px; }
        .guest-cta-primary { flex: 1; padding: 13px; background: var(--gold); color: black; border: none; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: sans-serif; }
        .guest-cta-secondary { flex: 1; padding: 13px; background: transparent; color: #888; border: 1px solid #444; border-radius: 6px; font-size: 13px; cursor: pointer; font-family: sans-serif; }

        /* ── Full client profile view ── */
        #clientProfileView {
            display: none;
            position: fixed; top:0; left:0; right:0; bottom:0;
            background: var(--bg);
            z-index: 700;
            flex-direction: column;
        }
        .cpv-topbar {
            background: var(--dark);
            display: flex;
            align-items: center;
            padding: 0 12px;
            height: 56px;
            gap: 10px;
            flex-shrink: 0;
        }
        .cpv-back {
            background: none;
            border: none;
            color: var(--gold);
            font-size: 22px;
            cursor: pointer;
            padding: 6px 4px;
            line-height: 1;
        }
        .cpv-title { flex:1; color: white; font-size: 16px; font-weight: 700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .cpv-actions-btn {
            background: none;
            border: 1px solid #444;
            border-radius: 6px;
            color: #aaa;
            font-size: 18px;
            width: 34px; height: 34px;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }
        .cpv-body { flex:1; overflow-y:auto; padding-bottom: 80px; }
        .cpv-status-card {
            background: var(--dark);
            padding: 16px;
            margin: 12px;
            border-radius: 12px;
            color: white;
        }
        .cpv-status-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 10px; }
        .cpv-stage-label { font-size: 11px; text-transform:uppercase; letter-spacing: 1px; color: var(--gold); font-weight:700; }
        .cpv-name { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
        .cpv-property { font-size: 13px; color: #aaa; }
        .cpv-type-badge { font-size: 10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:4px 10px; border-radius:10px; flex-shrink:0; }
        .cpv-progress-wrap { margin-top: 10px; }
        .cpv-progress-bar { height: 5px; background: rgba(255,255,255,0.15); border-radius:3px; }
        .cpv-progress-fill { height: 5px; background: var(--gold); border-radius:3px; transition: width 0.4s; }
        .cpv-section { margin: 0 12px 16px; }
        .cpv-section-title { font-size: 11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#999; margin-bottom: 8px; }
        .cpv-field-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f0f0f0; font-size:14px; }
        .cpv-field-row:last-child { border-bottom: none; }
        .cpv-field-label { color: #888; }
        .cpv-field-val { font-weight: 600; color: #222; text-align:right; max-width:60%; }
        .cpv-deadline-card {
            background: white;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 14px;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .cpv-deadline-card.urgent { border-left: 3px solid #e74c3c; }
        .cpv-deadline-name { font-size: 14px; font-weight: 600; }
        .cpv-deadline-days { font-size: 12px; color: #aaa; margin-top: 2px; }
        .cpv-deadline-date { font-size: 16px; font-weight: 700; color: var(--dark); text-align:right; }
        .cpv-deadline-date.urgent { color: #e74c3c; }
        .cpv-deadline-card.cpv-dl-critical { border-left: 3px solid #e74c3c; }
        .cpv-deadline-card.cpv-dl-important { border-left: 3px solid #f39c12; }
        .cpv-deadline-card.cpv-dl-info { border-left: 3px solid #27ae60; }
        .cpv-dl-type-tag { display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 8px; background: #f0f0f0; color: #666; margin-top: 4px; font-weight: 600; text-transform: capitalize; }
        .cpv-dl-action-btn { background: none; border: none; font-size: 11px; cursor: pointer; padding: 3px 8px; border-radius: 4px; color: #888; }
        .cpv-dl-action-btn:hover { background: #f0f0f0; }
        .cpv-dl-action-btn.del:hover { color: #e74c3c; background: #fdecea; }
        /* Deadline modal row styles */
        .dl-row { background: #f9f9f7; border-radius: 10px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--border); }
        .dl-row-header { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
        .dl-row-header .form-input { flex: 1; margin: 0; }
        .dl-row-remove { background: none; border: none; color: #bbb; font-size: 18px; cursor: pointer; padding: 4px; line-height: 1; flex-shrink: 0; }
        .dl-row-remove:hover { color: #e74c3c; }
        .dl-row-body { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
        .dl-row-body .form-input { flex: 1; min-width: 120px; margin: 0; }
        .dl-row-body .form-select { flex: 0 0 auto; margin: 0; min-width: 130px; font-size: 13px; }
        .dl-imp-group { display: flex; gap: 6px; flex-wrap: wrap; }
        .dl-imp-btn { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: white; font-size: 12px; cursor: pointer; color: #888; }
        .dl-imp-btn.active[data-imp="critical"] { background: #fdecea; color: #c0392b; border-color: #e74c3c; font-weight: 700; }
        .dl-imp-btn.active[data-imp="important"] { background: #fff3cd; color: #b35a00; border-color: #f0a500; font-weight: 700; }
        .dl-imp-btn.active[data-imp="info"] { background: #eafaf1; color: #1e7e46; border-color: #27ae60; font-weight: 700; }
        .dl-template-btn { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--gold); background: white; color: var(--dark); font-size: 13px; font-weight: 600; cursor: pointer; }
        .dl-template-btn:hover { background: var(--gold); color: white; }
        .cpv-showing-card {
            background: white;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 14px;
            margin-bottom: 8px;
        }
        .cpv-showing-time { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
        .cpv-showing-addr { font-size: 13px; color: #666; }
        .cpv-notes-box {
            background: white;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 14px;
            font-size: 14px;
            line-height: 1.6;
            color: #333;
            min-height: 80px;
        }
        .cpv-edit-notes {
            width: 100%;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px;
            font-size: 14px;
            line-height: 1.6;
            resize: vertical;
            min-height: 100px;
            font-family: sans-serif;
            display: none;
        }
        .cpv-nav { display:flex; border-bottom: 2px solid #eee; background:white; flex-shrink:0; }
        .cpv-nav-tab { flex:1; text-align:center; padding:10px 2px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#aaa; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; }
        .cpv-nav-tab.active { color: var(--dark); border-bottom-color: var(--gold); }
        .cpv-pane { display:none; padding: 14px 0 0; }
        .cpv-pane.active { display:block; }

        /* ── Add showing form inside full profile ── */
        .cpv-add-btn {
            width: 100%;
            padding: 12px;
            background: none;
            border: 1px dashed #ccc;
            border-radius: 8px;
            font-size: 13px;
            color: #888;
            cursor: pointer;
            margin-top: 4px;
            font-family: sans-serif;
        }
        .cpv-add-btn:hover { border-color: var(--gold); color: var(--gold); }
        .cpv-action-row { display:flex; gap:8px; margin:0 12px; }
        .cpv-action-sm {
            flex: 1;
            padding: 9px 6px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .3px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: white;
            cursor: pointer;
            text-align: center;
            color: #555;
            font-family: sans-serif;
        }
        .cpv-action-sm.danger { color: #e74c3c; border-color: #fdd; background: #fff8f8; }
        .cpv-action-sm.primary { background: var(--dark); color: var(--gold); border-color: var(--dark); }

        /* ── Actions dropdown menu ── */
        .cpv-actions-menu {
            position: absolute;
            top: 56px; right: 10px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            z-index: 800;
            overflow: hidden;
            min-width: 180px;
            display: none;
        }
        .cpv-actions-menu.open { display: block; }
        .cpv-menu-item {
            padding: 13px 16px;
            font-size: 14px;
            cursor: pointer;
            border-bottom: 1px solid #f5f5f5;
            color: #333;
        }
        .cpv-menu-item:last-child { border-bottom: none; }
        .cpv-menu-item:hover { background: #f9f9f9; }
        .cpv-menu-item.danger { color: #e74c3c; }

        /* ── Tasks section ── */
        .task-card {
            background: white;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 14px;
            margin: 0 16px 10px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .task-urgency { width: 8px; height: 8px; border-radius: 50%; flex-shrink:0; }
        .task-urgency.red    { background: #e74c3c; }
        .task-urgency.yellow { background: #f39c12; }
        .task-urgency.green  { background: #27ae60; }
        .task-content { flex:1; }
        .task-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
        .task-desc { font-size: 12px; color: #888; }
        .task-due  { font-size: 12px; font-weight:700; color: #555; flex-shrink:0; }
        .task-view-btn { font-size:11px; color:var(--gold); font-weight:700; cursor:pointer; flex-shrink:0; }
        .tasks-empty { padding: 40px 24px; text-align:center; color:#aaa; font-size:14px; }

        /* ── Calculator print/share ── */
        .calc-share-bar {
            display: flex;
            justify-content: flex-end;
            padding: 6px 8px 0;
        }
        .calc-share-btn {
            background: none;
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 6px 14px;
            font-size: 12px;
            font-weight: 700;
            color: #555;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            font-family: sans-serif;
        }
        .calc-share-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

        /* ── Print styles ── */
        @media print {
            body > *:not(#printModal) { display:none !important; }
            #printModal { display:block !important; position:static !important; background:white !important; }
            #printModalClose { display:none !important; }
        }
        .print-modal {
            display: none;
            position: fixed; top:0; left:0; right:0; bottom:0;
            background: white;
            z-index: 9999;
            overflow-y: auto;
            padding: 24px;
        }
        .print-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 2px solid var(--dark);
        }
        .print-header-left h1 { font-size:18px; font-weight:700; margin:0 0 3px; }
        .print-header-left p  { font-size:12px; color:#666; margin:0; }
        .print-close-btn {
            background: var(--dark);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 16px;
            cursor: pointer;
            font-size: 13px;
            font-family: sans-serif;
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .print-section { margin-bottom: 28px; }
        .print-section h3 { font-size:14px; text-transform:uppercase; letter-spacing:1px; color:#888; margin:0 0 12px; border-bottom:1px solid #eee; padding-bottom:6px; }
        .print-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .print-result-card { background:#f9f9f9; border-radius:8px; padding:14px; }
        .print-result-label { font-size:11px; color:#888; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
        .print-result-value { font-size:22px; font-weight:700; color:var(--dark); }
        .print-input-row { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid #f5f5f5; font-size:13px; }
        .print-input-label { color:#666; }
        .print-input-value { font-weight:600; }
        .print-footer { margin-top:28px; padding-top:16px; border-top:1px solid #eee; font-size:11px; color:#aaa; text-align:center; }

        /* ── Full-screen client detail view (realtor) ── */
        #clientDetailView {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: var(--bg);
            z-index: 600;
            flex-direction: column;
            overflow: hidden;
        }
        .cdv-scroll { flex: 1; overflow-y: auto; padding-bottom: 80px; }
        .cdv-top-bar {
            background: var(--dark);
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 12px;
            height: 56px;
            flex-shrink: 0;
        }
        .cdv-back-btn {
            background: none;
            border: none;
            color: var(--gold);
            font-size: 22px;
            cursor: pointer;
            padding: 6px;
            line-height: 1;
            font-family: sans-serif;
        }
        .cdv-client-name {
            flex: 1;
            color: white;
            font-size: 16px;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .cdv-actions { display: flex; gap: 6px; }
        .cdv-action-btn {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
            border-radius: 6px;
            padding: 5px 10px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            font-family: sans-serif;
            white-space: nowrap;
        }
        .cdv-action-btn:hover { background: rgba(221,194,130,0.2); border-color: var(--gold); color: var(--gold); }
        .cdv-action-btn.danger { color: #e74c3c; border-color: #e74c3c; }
        .cdv-status-card {
            background: var(--dark);
            margin: 12px 14px 0;
            border-radius: 12px;
            padding: 16px;
        }
        .cdv-stage-badge {
            display: inline-block;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            padding: 3px 10px;
            border-radius: 12px;
            margin-bottom: 6px;
        }
        .cdv-property { color: white; font-size: 15px; font-weight: 700; margin-bottom: 4px; line-height: 1.4; }
        .cdv-type-label { font-size: 12px; color: rgba(255,255,255,0.5); }
        .cdv-section { margin: 14px 14px 0; }
        .cdv-section-title {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--muted);
            margin-bottom: 8px;
        }
        .cdv-card {
            background: white;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 14px;
        }
        .cdv-field { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
        .cdv-field:last-child { border-bottom: none; }
        .cdv-field-label { font-size: 12px; color: var(--muted); }
        .cdv-field-value { font-size: 13px; font-weight: 600; color: var(--text); text-align: right; max-width: 60%; }
        .cdv-field-value a { color: var(--dark); text-decoration: none; }
        .cdv-deadline-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 9px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        .cdv-deadline-row:last-child { border-bottom: none; }
        .cdv-deadline-label { font-size: 13px; color: var(--text); }
        .cdv-deadline-date { font-size: 13px; font-weight: 700; color: var(--dark); }
        .cdv-deadline-days { font-size: 11px; color: var(--muted); text-align: right; }
        .cdv-deadline-urgent .cdv-deadline-date { color: var(--red); }
        .cdv-deadline-urgent .cdv-deadline-days { color: var(--red); }
        .cdv-note-text { font-size: 13px; color: #444; line-height: 1.6; }
        .cdv-showing-row {
            padding: 9px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        .cdv-showing-row:last-child { border-bottom: none; }
        .cdv-showing-time { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
        .cdv-showing-addr { font-size: 13px; font-weight: 600; color: var(--dark); }
        .cdv-add-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            padding: 11px;
            background: #f5f5f5;
            border: 1px dashed #ccc;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 700;
            color: #888;
            cursor: pointer;
            margin-top: 8px;
            font-family: sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .cdv-add-btn:hover { border-color: var(--gold); color: var(--gold); background: #fffdf5; }
        .cdv-empty { font-size: 13px; color: #aaa; font-style: italic; padding: 4px 0; }

        /* ═══════════════════════════════════════
           TASKS PAGE — Full CRM Task Manager
        ═══════════════════════════════════════ */

        .tasks-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 16px 12px;
        }
        .tasks-page-title {
            font-size: 22px;
            font-weight: 800;
            color: var(--dark);
            letter-spacing: -0.3px;
        }
        .tasks-page-sub {
            font-size: 12px;
            color: var(--muted);
            margin-top: 2px;
        }
        .add-task-btn {
            background: var(--dark);
            color: var(--gold);
            border: none;
            border-radius: 20px;
            padding: 9px 16px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            font-family: sans-serif;
            letter-spacing: 0.3px;
        }
        .add-task-btn:active { opacity: 0.85; }

        /* ── Task Sections (same DNA as pipeline stages) ── */
        .tasks-section { margin-bottom: 4px; }
        .tasks-section-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            cursor: pointer;
            user-select: none;
            border-left: 3px solid transparent;
        }
        .tasks-section-header.ts-contract {
            background: linear-gradient(135deg, var(--dark) 0%, #1a4550 100%);
            border-left-color: var(--gold);
        }
        .tasks-section-header.ts-contract .ts-icon,
        .tasks-section-header.ts-contract .ts-label,
        .tasks-section-header.ts-contract .ts-count { color: var(--gold); }
        .tasks-section-header.ts-contract .ts-chevron { color: rgba(221,194,130,0.6); }

        .tasks-section-header.ts-active {
            background: #fff8ee;
            border-left-color: var(--orange);
        }
        .tasks-section-header.ts-active .ts-icon { color: var(--orange); }
        .tasks-section-header.ts-active .ts-label { color: #b35a00; }
        .tasks-section-header.ts-active .ts-count { background: #fde8cc; color: var(--orange); }
        .tasks-section-header.ts-active .ts-chevron { color: #e0a060; }

        .tasks-section-header.ts-followup {
            background: #f4f0ff;
            border-left-color: var(--purple);
        }
        .tasks-section-header.ts-followup .ts-icon { color: var(--purple); }
        .tasks-section-header.ts-followup .ts-label { color: #5a2d82; }
        .tasks-section-header.ts-followup .ts-count { background: #e8deff; color: var(--purple); }
        .tasks-section-header.ts-followup .ts-chevron { color: #9e6cc8; }

        .tasks-section-header.ts-general {
            background: #f5f5f5;
            border-left-color: #999;
        }
        .tasks-section-header.ts-general .ts-icon { color: #666; }
        .tasks-section-header.ts-general .ts-label { color: #333; }
        .tasks-section-header.ts-general .ts-count { background: #e5e5e5; color: #555; }
        .tasks-section-header.ts-general .ts-chevron { color: #bbb; }

        .ts-icon { display: flex; align-items: center; flex-shrink: 0; }
        .ts-label { flex: 1; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }
        .ts-count {
            font-size: 11px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 10px;
            min-width: 22px;
            text-align: center;
            background: rgba(255,255,255,0.18);
            color: inherit;
        }
        .ts-chevron {
            display: flex;
            align-items: center;
            transition: transform 0.2s;
        }
        .ts-chevron.open { transform: rotate(90deg); }

        .tasks-section-body {
            background: white;
            border-bottom: 1px solid var(--border);
        }

        /* ── Task Client Group ── */
        .task-client-group {
            margin: 8px 16px;
            border: 1px solid var(--border);
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
        }
        .task-client-group-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            background: #f8f8f8;
            border-bottom: 1px solid var(--border);
        }
        .task-client-name {
            flex: 1;
            font-size: 13px;
            font-weight: 700;
            color: var(--dark);
        }
        .task-client-type {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 2px 7px;
            border-radius: 10px;
        }

        /* ── Task Items ── */
        .task-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            border-bottom: 1px solid #f5f5f5;
            background: white;
            transition: background 0.15s;
            border-radius: 8px;
        }
        .task-item:last-child { border-bottom: none; }
        .task-item-left {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        .task-item-title {
            font-size: 13px;
            font-weight: 600;
            color: #222;
            line-height: 1.3;
        }
        .task-item-title.done {
            text-decoration: line-through;
            color: #bbb;
        }
        .task-item-sub {
            font-size: 11px;
            color: #aaa;
            margin-top: 1px;
        }

        /* ── Urgency variants ── */
        .task-item-overdue { background: #fff5f5; }
        .task-item-urgent  { background: #fffbf0; }
        .task-item-soon    { background: #fefff5; }
        .task-item-done    { background: #fafafa; }
        .task-item-next    { background: #fffdf0; }

        /* ── Deadline icon / Anniversary icon ── */
        .task-item-icon {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .deadline-icon {
            background: linear-gradient(135deg, var(--dark), #1a4550);
            position: relative;
        }
        .deadline-icon::after {
            content: '';
            position: absolute;
            inset: 5px;
            border: 2px solid var(--gold);
            border-radius: 2px;
        }
        .anniv-icon {
            background: linear-gradient(135deg, #7b3fa0, #a855d4);
            position: relative;
        }
        .anniv-icon::after {
            content: '';
            position: absolute;
            top: 5px; left: 7px; right: 7px; bottom: 5px;
            border: 2px solid rgba(255,255,255,0.7);
            border-radius: 50%;
        }

        /* ── Checkbox ── */
        .task-checkbox {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            border: 2px solid #ddd;
            flex-shrink: 0;
            margin-top: 1px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s, border-color 0.15s;
            background: white;
        }
        .task-checkbox.checked {
            background: var(--dark);
            border-color: var(--dark);
        }
        .task-checkbox:active { opacity: 0.7; }

        /* ── Urgency badges ── */
        .task-urgency-badge {
            font-size: 10px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 10px;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .task-urgency-badge.overdue { background: #fdecea; color: var(--red); }
        .task-urgency-badge.urgent  { background: #fff3cd; color: #b35a00; }
        .task-urgency-badge.soon    { background: #fff9e0; color: #8a7000; }
        .task-urgency-badge.ok      { background: #eafaf1; color: #1e7e46; }
        .task-urgency-badge.daily   { background: #e8f4ff; color: #1a6fb5; }
        .task-urgency-badge.badge-done { background: #f0f0f0; color: #bbb; }

        /* ── Delete button ── */
        .task-delete-btn {
            background: none;
            border: none;
            color: #ccc;
            cursor: pointer;
            padding: 4px;
            display: flex;
            align-items: center;
            border-radius: 4px;
        }
        .task-delete-btn:active { color: var(--red); background: #fdecea; }

        /* ── Empty section state ── */
        .tasks-empty-section {
            padding: 16px 16px 20px;
            font-size: 13px;
            color: #bbb;
            font-style: italic;
            text-align: center;
        }

        /* ── Add Task recurrence buttons ── */
        .at-recur-btn {
            padding: 7px 13px;
            border-radius: 16px;
            border: 1.5px solid #ddd;
            background: white;
            font-size: 12px;
            font-weight: 600;
            color: #888;
            cursor: pointer;
            font-family: sans-serif;
            transition: all 0.15s;
        }
        .at-recur-btn.active {
            background: var(--dark);
            border-color: var(--dark);
            color: var(--gold);
        }

        /* ── Calculator print button ── */
        .calc-print-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: calc(100% - 32px);
            margin: 12px 16px 4px;
            padding: 12px;
            background: var(--dark);
            color: var(--gold);
            border: none;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.5px;
            cursor: pointer;
            font-family: sans-serif;
        }
        .calc-print-btn:hover { background: #1a4550; }

        /* ── Print styles ── */
        @media print {
            body > *:not(#printCalcPage) { display: none !important; }
            #printCalcPage { display: block !important; }
        }
        #printCalcPage {
            display: none;
            padding: 24px;
            font-family: "Helvetica Neue", Arial, sans-serif;
        }
        .print-header { text-align: center; margin-bottom: 24px; border-bottom: 2px solid #113138; padding-bottom: 16px; }
        .print-section { margin-bottom: 20px; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; }
        .print-section-title { background: #113138; color: #ddc282; padding: 8px 14px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
        .print-row { display: flex; justify-content: space-between; padding: 7px 14px; border-bottom: 1px solid #f5f5f5; font-size: 13px; }
        .print-row:last-child { border-bottom: none; }
        .print-total { font-weight: 700; font-size: 16px; color: #113138; }
        .print-footer { text-align: center; font-size: 11px; color: #aaa; margin-top: 24px; }

        /* Screenshot / Share modal */
        .screenshot-modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.85);
            z-index: 9500;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            overflow-y: auto;
            padding: 0;
        }
        .screenshot-modal-overlay.open { display: flex; }
        .screenshot-modal-inner {
            background: white;
            width: 100%;
            max-width: 480px;
            min-height: 100vh;
            padding: 0 0 40px;
        }
        .screenshot-header {
            background: var(--dark);
            padding: 16px 16px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .screenshot-header-title { color: var(--gold); font-size: 14px; font-weight: 700; letter-spacing: 0.5px; }
        .screenshot-close-btn {
            background: rgba(255,255,255,0.15);
            border: none;
            color: white;
            border-radius: 6px;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            font-family: sans-serif;
        }
        .screenshot-close-btn {
            background: rgba(255,255,255,0.15);
            border: none;
            color: white;
            border-radius: 6px;
            padding: 6px 14px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            font-family: sans-serif;
        }
        .screenshot-share-hint {
            background: #fffbf0;
            border-top: 2px dashed #e8c84a;
            padding: 12px 16px;
            font-size: 11px;
            color: #888;
            line-height: 1.5;
            text-align: center;
            margin-top: 8px;
        }
        .screenshot-hint {
            font-size: 11px;
            color: #999;
            padding: 6px 16px;
            line-height: 1.5;
        }
        .screenshot-section { margin: 12px 14px 0; }
        .screenshot-section-title {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--muted);
            margin-bottom: 6px;
        }
        .screenshot-card {
            background: white;
            border: 1px solid #e8e8e8;
            border-radius: 10px;
            overflow: hidden;
        }
        .screenshot-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 14px;
            border-bottom: 1px solid #f5f5f5;
            font-size: 13px;
        }
        .screenshot-row:last-child { border-bottom: none; }
        .screenshot-row-label { color: #666; }
        .screenshot-row-value { font-weight: 700; color: var(--text); text-align: right; }
        .screenshot-total-row {
            background: var(--dark);
            color: white;
            padding: 13px 14px;
            display: flex;
            justify-content: space-between;
            font-weight: 700;
            font-size: 15px;
        }
        .screenshot-footnotes {
            padding: 0 16px 8px;
        }
        .screenshot-branding {
            text-align: center;
            padding: 20px 14px 8px;
            border-top: 1px solid #eee;
            margin-top: 16px;
        }
        .screenshot-branding-name { font-size: 11px; color: #999; letter-spacing: 1px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

        

        .net-read-val { font-size:13px; color:#888; font-weight:500; }
        .net-result-positive { color: var(--gold) !important; }
        .net-result-negative { color: #f44 !important; }

        /* ── Calc inline share button ── */
        .calc-share-inline { display:none; justify-content:flex-end; padding:0 12px 4px; }
        .net-share-row { gap: 8px; }
        .calc-share-inline-btn {
            display:inline-flex; align-items:center; gap:6px;
            padding:7px 14px; background:transparent;
            border:1px solid #ddd; border-radius:6px;
            color:#888; font-size:11px; font-weight:700;
            cursor:pointer; font-family:sans-serif; letter-spacing:0.3px;
        }
        .calc-share-inline-btn:hover { border-color:var(--gold); color:var(--gold); }
        .calc-share-inline-btn svg { stroke:#aaa; }
        .calc-share-inline-btn:hover svg { stroke:var(--gold); }

        /* ══ Responsive Layout ══ */
        @media (min-width: 640px) {
            .section-content, #rsec-pipeline, #rsec-tasks, #rsec-calc, #rsec-tradition {
                max-width: 640px; margin: 0 auto;
            }
            .calc-root { max-width: 580px; margin: 0 auto; }
            .top-bar { max-width: 100%; }
            .login-card { max-width: 420px; margin: 0 auto; border-radius: 16px; }
            #loginScreen { padding: 32px 20px; }
        }
        @media (min-width: 960px) {
            body { background: #ebebea; }
            #mainApp, #clientApp { background: #ebebea; min-height: 100vh; }
            .section-content, #rsec-pipeline, #rsec-tasks, #rsec-calc, #rsec-tradition {
                max-width: 720px;
            }
            .calc-root { max-width: 640px; }
        }
        @media (max-width: 390px) {
            .top-bar { padding: 0 12px; }
            .card { padding: 12px; border-radius: 8px; }
            .net-out-line { flex-wrap: wrap; }
            .net-out-input { font-size: 14px; }
            .big-number { font-size: 32px; }
            .result-box { border-radius: 14px; padding: 18px; }
            .calc-share-inline-btn { font-size: 10px; padding: 6px 10px; }
        }

        /* ── Add Client Wizard ── */
        .wiz-dot { width:7px;height:7px;border-radius:50%;background:#444;transition:background 0.2s; }
        .wiz-dot.active { background:var(--gold); }
        .wiz-type-btn {
            flex:1; padding:8px 4px; border:1px solid var(--border); border-radius:8px;
            background:white; font-size:13px; cursor:pointer; color:#444; transition:all 0.15s;
        }
        .wiz-type-btn.active { background:var(--dark); color:var(--gold); border-color:var(--dark); font-weight:600; }
        .wiz-stage-btn {
            padding:7px 10px; border:1px solid var(--border); border-radius:8px;
            background:white; font-size:12px; cursor:pointer; color:#555; transition:all 0.15s;
        }
        .wiz-stage-btn.active { background:var(--dark); color:var(--gold); border-color:var(--dark); font-weight:600; }
        .wiz-review-row { display:flex; justify-content:space-between; padding:5px 0;
            border-bottom:1px solid #eee; font-size:13px; }
        .wiz-review-row:last-child { border-bottom:none; }
        .wiz-review-label { color:#888; flex-shrink:0; margin-right:8px; }
        .wiz-review-val { color:#222; font-weight:500; text-align:right; }