@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,300;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap');

/* ===== Main App Styles ===== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,300;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap');

        :root {
            --ink: #1a1a1a;
            --ink-light: #374151;
            --ink-muted: #6b7280;
            --surface: #f3f4f6;
            --surface-warm: #e5e7eb;
            --card: #ffffff;
            --accent: #1d4ed8;
            --accent-light: #2563eb;
            --accent-pale: #eff6ff;
            --accent-glow: #3b82f6;
            --gold: #b8960c;
            --gold-pale: #fef9c3;
            --border: #d1d5db;
            --border-strong: #9ca3af;
        }

        body { 
            font-family: 'DM Sans', sans-serif; 
            background: var(--surface);
            color: var(--ink);
        }

        h1, h2, .serif { font-family: 'DM Serif Display', serif; }

        /* Remove number input spinners */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        input[type=number] { -moz-appearance: textfield; }

        .stage-checkbox { 
            width: 1.15rem; height: 1.15rem; cursor: pointer; 
            accent-color: var(--accent); 
        }

        .input-field {
            width: 100%; padding: 0.875rem 1rem;
            background: var(--surface); border: 1.5px solid var(--border);
            border-radius: 0.75rem; outline: none;
            font-family: 'DM Sans', sans-serif; font-weight: 500;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .input-field:focus {
            border-color: var(--accent); 
            box-shadow: 0 0 0 3px rgba(45,74,62,0.08);
        }

        .section-label {
            font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em;
            text-transform: uppercase; color: var(--ink-muted);
        }

        .field-label {
            font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em;
            text-transform: uppercase; color: var(--ink-muted); font-style: italic;
        }

        .card {
            background: var(--card); border: 1.5px solid var(--border);
            border-radius: 1.25rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

        .btn-primary {
            background: var(--accent); color: white;
            font-weight: 700; border-radius: 0.875rem;
            transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(45,74,62,0.2);
        }
        .btn-primary:hover { background: var(--accent-light); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(45,74,62,0.25); }
        .btn-primary:active { transform: translateY(0); }

        .btn-outline {
            background: transparent; color: var(--accent);
            border: 1.5px solid var(--accent); font-weight: 600;
            border-radius: 0.75rem; transition: all 0.2s;
        }
        .btn-outline:hover { background: var(--accent-pale); }

        .fade-in { animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

        .partial-row { animation: slideIn 0.25s ease; }
        @keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }

        /* Table styling */
        .fee-table { border-collapse: separate; border-spacing: 0; }
        .fee-table thead th { 
            background: var(--ink); color: white; 
            font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
            padding: 1rem 1.25rem;
        }
        .fee-table thead th:first-child { border-radius: 0.75rem 0 0 0; }
        .fee-table thead th:last-child { border-radius: 0 0.75rem 0 0; }
        .fee-table tbody td { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border); }
        .fee-table tbody tr:last-child td { border-bottom: none; }
        .fee-table tbody tr:hover { background: var(--accent-pale); }

        .accent-card {
            background: var(--accent); color: white;
            border-radius: 1.25rem; position: relative; overflow: hidden;
        }
        .accent-card::before {
            content: ''; position: absolute; top: -30%; right: -10%;
            width: 200px; height: 200px; border-radius: 50%;
            background: rgba(255,255,255,0.04);
        }

        .partial-item-row td { vertical-align: middle; }

        .remove-btn {
            width: 1.75rem; height: 1.75rem; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;
            cursor: pointer; transition: all 0.15s; font-size: 0.85rem;
        }
        .remove-btn:hover { background: #fee2e2; border-color: #fca5a5; }

        /* ═══ PROJECT MANAGEMENT STYLES ═══ */
        .project-card { border:1.5px solid var(--border);border-radius:0.75rem;margin-bottom:0.45rem;overflow:hidden;background:white;transition:all 0.2s;cursor:pointer; }
        .project-card:hover { border-color:var(--accent);box-shadow:0 2px 12px rgba(29,78,216,0.08); }
        .project-card-row { display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0.75rem;gap:0.5rem; }
        .project-card-meta { display:grid;grid-template-columns:5.25rem 3.5rem 4.25rem;align-items:center;gap:0.35rem;flex-shrink:0;text-align:center; }
        .project-card-meta-stage, .project-card-meta-status { display:flex;justify-content:center;align-items:center;min-height:1.6rem; }
        .project-card-meta-tasks { font-size:0.68rem;color:var(--ink-muted);font-weight:600;text-align:center;line-height:1.2; }
        .project-card-meta-placeholder { font-size:0.68rem;color:var(--ink-muted);opacity:0.45; }
        .project-card-icon { width:24px;height:24px;background:var(--accent-pale);border-radius:0.45rem;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
        .project-card-icon span { font-size:0.5rem;font-weight:800;color:var(--accent); }
        .project-title-line { font-family:'DM Serif Display',serif;font-weight:400;color:var(--ink);line-height:1.25; }
        .project-title-line--list { font-size:20px; }
        .project-title-line--workspace { font-size:20px; }
        .project-job-code { font-size:0.68rem;color:var(--ink-muted);font-weight:600;letter-spacing:0.06em;margin-top:0.1rem; }
        .project-badge { display:inline-flex;align-items:center;gap:0.3rem;padding:0.25rem 0.6rem;border-radius:0.4rem;font-size:0.65rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase; }
        .badge-active { background:#eff6ff;color:var(--accent); }
        .badge-complete { background:#dcfce7;color:#059669; }
        .status-pill { display:inline-flex;align-items:center;padding:0.25rem 0.65rem;border-radius:9999px;font-size:0.7rem;font-weight:700;white-space:nowrap; }
        .status-assigned { background:#e0e7ff;color:#4338ca; }
        .status-in-progress { background:#fef3c7;color:#b45309; }
        .status-please-check { background:#fce7f3;color:#be185d; }
        .status-update { background:#f3e8ff;color:#7c3aed; }
        .status-complete { background:#dcfce7;color:#15803d; }
        .priority-pill { display:inline-flex;align-items:center;gap:0.2rem;padding:0.2rem 0.5rem;border-radius:9999px;font-size:0.65rem;font-weight:700; }
        .priority-urgent { background:#fef2f2;color:#dc2626; }
        .priority-high { background:#fff7ed;color:#ea580c; }
        .priority-medium { background:#fefce8;color:#ca8a04; }
        .priority-low { background:#f0fdf4;color:#16a34a; }
        .task-table { width:100%;border-collapse:separate;border-spacing:0; }
        .task-table thead th { background:var(--ink);color:white;font-size:0.6rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;padding:0.75rem 1rem;text-align:left;white-space:nowrap; }
        .task-table thead th:first-child { border-radius:0.75rem 0 0 0; }
        .task-table thead th:last-child { border-radius:0 0.75rem 0 0; }
        .task-table tbody td { padding:0.5rem 0.75rem;border-bottom:1px solid var(--border);font-size:0.8rem;vertical-align:middle; }
        .task-table tbody tr { cursor:pointer;transition:background 0.15s; }
        .task-table tbody tr:hover { background:var(--accent-pale); }
        .task-table tbody tr:last-child td { border-bottom:none; }
        .task-table tbody tr.drag-over { border-top:3px solid var(--accent); }
        .collapsible-header { display:flex;align-items:center;gap:0.5rem;padding:0.875rem 1.25rem;cursor:pointer;background:var(--surface);border-radius:0.75rem;transition:background 0.15s;user-select:none; }
        .collapsible-header:hover { background:var(--surface-warm); }
        .collapsible-header .chevron { transition:transform 0.25s;flex-shrink:0; }
        .collapsible-header.open .chevron { transform:rotate(180deg); }
        .collapsible-body { display:none;padding:1rem 1.25rem; }
        .collapsible-body.open { display:block; }
        .modal-overlay { display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.4);backdrop-filter:blur(3px); }
        .modal-overlay.open { display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto; }
        .job-card-modal { position:relative;z-index:10000;width:min(1050px,95vw);height:min(82vh,900px);min-width:640px;min-height:420px;max-width:96vw;max-height:94vh;background:white;border:1.5px solid var(--border);border-radius:1.25rem;box-shadow:0 20px 60px rgba(0,0,0,0.15);display:flex;flex-direction:column;overflow:auto;animation:fadeIn 0.3s ease both;resize:both; }
        .job-card-modal::after { content:'';position:absolute;right:4px;bottom:4px;width:14px;height:14px;pointer-events:none;opacity:0.35;background:linear-gradient(135deg, transparent 50%, var(--ink-muted) 50%);border-bottom-right-radius:0.5rem; }
        .jc-header { display:flex;align-items:flex-start;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1.5px solid var(--border);flex-shrink:0; }
        .jc-breadcrumbs { font-size:0.72rem;font-weight:600;color:var(--ink-muted);margin-bottom:0.4rem;line-height:1.5;display:flex;flex-wrap:wrap;align-items:center;gap:0.2rem 0.35rem; }
        .jc-breadcrumb-sep { opacity:0.4;font-weight:400; }
        .jc-breadcrumb-strong { color:var(--ink);font-weight:800; }
        .jc-breadcrumb-job { letter-spacing:0.05em;font-weight:700;color:var(--accent); }
        .jc-close { width:2rem;height:2rem;border-radius:50%;background:var(--surface);color:var(--ink-muted);border:none;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:all 0.15s; }
        .jc-close:hover { background:var(--surface-warm);color:var(--ink); }
        .jc-body { display:flex;flex:1;overflow:hidden; }
        .jc-left { flex:1;overflow-y:auto;padding:1.5rem;border-right:1.5px solid var(--border); }
        .jc-right { width:360px;display:flex;flex-direction:column;flex-shrink:0; }
        @media (max-width:768px) { .jc-body { flex-direction:column; } .jc-right { width:100%;border-top:1.5px solid var(--border);max-height:400px; } .jc-left { border-right:none; } }
        .chat-header { padding:0.875rem 1.25rem;border-bottom:1.5px solid var(--border);font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-muted);display:flex;align-items:center;gap:0.4rem;flex-shrink:0; }
        .chat-messages { flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:0.75rem; }
        .chat-msg { max-width:85%;padding:0.65rem 0.875rem;border-radius:1rem;font-size:0.85rem;line-height:1.5;position:relative; }
        .chat-msg.outgoing { align-self:flex-end;background:var(--accent);color:white;border-bottom-right-radius:0.25rem; }
        .chat-msg.incoming { align-self:flex-start;background:var(--surface);color:var(--ink);border-bottom-left-radius:0.25rem; }
        .chat-msg-meta { font-size:0.6rem;opacity:0.7;margin-top:0.3rem; }
        .chat-msg-file { display:inline-flex;align-items:center;gap:0.3rem;padding:0.3rem 0.6rem;border-radius:0.5rem;font-size:0.72rem;font-weight:600;margin-top:0.4rem;cursor:pointer;text-decoration:none; }
        .chat-msg.outgoing .chat-msg-file { background:rgba(255,255,255,0.2);color:white; }
        .chat-msg.incoming .chat-msg-file { background:white;color:var(--accent);border:1px solid var(--border); }
        .chat-input-area { padding:0.75rem 1rem;border-top:1.5px solid var(--border);display:flex;gap:0.5rem;align-items:flex-end;flex-shrink:0; }
        .chat-input { flex:1;padding:0.6rem 0.875rem;border:1.5px solid var(--border);border-radius:0.75rem;font-family:'DM Sans',sans-serif;font-size:0.85rem;outline:none;resize:none;min-height:38px;max-height:120px;color:var(--ink);background:var(--surface); }
        .chat-input:focus { border-color:var(--accent); }
        .chat-send { width:38px;height:38px;border-radius:50%;background:var(--accent);color:white;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s; }
        .chat-send:hover { background:var(--accent-light); }
        .chat-file-btn { width:38px;height:38px;border-radius:50%;background:white;color:var(--ink-muted);border:1.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;position:relative;overflow:hidden; }
        .chat-file-btn:hover { background:var(--surface); }
        .chat-file-btn input[type="file"] { position:absolute;inset:0;opacity:0;cursor:pointer; }
        .chat-voice-btn { width:38px;height:38px;border-radius:50%;background:white;color:var(--ink-muted);border:1.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;user-select:none;-webkit-user-select:none;touch-action:none; }
        .chat-voice-btn:hover { background:var(--surface); }
        .chat-voice-btn.recording { background:#fef2f2;border-color:#fca5a5;color:#dc2626;animation:voicePulse 1s ease infinite; }
        @keyframes voicePulse { 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0.35);} 50%{box-shadow:0 0 0 6px rgba(220,38,38,0);} }
        .chat-recording-bar { display:none;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:#fef2f2;border-top:1px solid #fecaca;font-size:0.75rem;font-weight:600;color:#b91c1c;flex-shrink:0; }
        .chat-recording-bar.active { display:flex; }
        .chat-recording-dot { width:8px;height:8px;border-radius:50%;background:#dc2626;animation:voicePulse 1s ease infinite;flex-shrink:0; }
        .chat-voice-note { display:flex;align-items:center;gap:0.5rem;margin-top:0.25rem; }
        .chat-voice-play { width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:800;flex-shrink:0;background:rgba(255,255,255,0.25);color:inherit; }
        .chat-voice-play.playing { opacity:0.85; }
        .chat-voice-duration { font-size:0.72rem;font-weight:700;opacity:0.9; }
        .chat-voice-cancel { margin-left:auto;padding:0.2rem 0.55rem;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;border:1px solid #fca5a5;border-radius:0.4rem;background:white;color:#b91c1c;cursor:pointer; }
        .upload-zone { border:2px dashed var(--border);border-radius:0.875rem;padding:1.25rem 1rem;text-align:center;cursor:pointer;transition:all 0.2s;position:relative;background:var(--surface); }
        .upload-zone:hover,.upload-zone.drag-over { border-color:var(--accent);background:var(--accent-pale); }
        .upload-zone input[type="file"] { position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%; }
        .client-list-card { border:1.5px solid var(--border);border-radius:0.75rem;margin-bottom:0.45rem;overflow:hidden;background:white;cursor:pointer;transition:all 0.2s; }
        .client-list-card:hover { border-color:var(--accent);box-shadow:0 2px 12px rgba(29,78,216,0.08); }
        #jcChatPanel.drag-over { background:var(--accent-pale);outline:2px dashed var(--accent);outline-offset:-4px; }
        #jcChatMessages.drag-over { background:var(--accent-pale); }
        .chat-pending-files { display:none;flex-wrap:wrap;gap:0.35rem;padding:0 1rem 0.5rem;border-top:1px solid var(--border); }
        .chat-pending-chip.loading { opacity:0.7;font-style:italic; }
        .storage-summary { margin-bottom:1.25rem; }
        .storage-summary-label { display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.4rem;font-size:0.75rem;font-weight:600;color:var(--ink-muted); }
        .storage-summary-label strong { color:var(--ink);font-size:0.85rem; }
        .storage-meter { height:10px;background:var(--surface);border-radius:9999px;overflow:hidden;border:1px solid var(--border); }
        .storage-meter-fill { height:100%;background:var(--accent);border-radius:9999px;transition:width 0.25s ease,background 0.25s ease; }
        .storage-meter-fill.warn { background:#f59e0b; }
        .storage-meter-fill.danger { background:#dc2626; }
        .storage-toolbar { display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin-bottom:0.75rem;padding:0.65rem 0.75rem;background:var(--surface);border:1.5px solid var(--border);border-radius:0.75rem; }
        .storage-toolbar-count { font-size:0.72rem;font-weight:600;color:var(--ink-muted);margin-right:0.25rem; }
        .storage-toolbar-btn { padding:0.4rem 0.75rem;font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;border:1.5px solid var(--border);border-radius:0.45rem;background:white;color:var(--ink-muted);cursor:pointer; }
        .storage-toolbar-btn:hover { border-color:var(--accent);color:var(--accent);background:var(--accent-pale); }
        .storage-toolbar-btn.primary-danger { background:#fef2f2;border-color:#fecaca;color:#dc2626; }
        .storage-toolbar-btn.primary-danger:hover:not(:disabled) { background:#fee2e2; }
        .storage-toolbar-btn:disabled { opacity:0.45;cursor:not-allowed; }
        .storage-file-row { display:flex;align-items:center;gap:0.75rem;padding:0.65rem 0.75rem;border:1.5px solid var(--border);border-radius:0.75rem;margin-bottom:0.5rem;background:white;cursor:pointer; }
        .storage-file-row:hover { border-color:var(--accent);background:var(--accent-pale); }
        .storage-file-row.selected { border-color:var(--accent);background:var(--accent-pale);box-shadow:0 0 0 1px var(--accent); }
        .storage-file-cb { width:1.1rem;height:1.1rem;accent-color:var(--accent);cursor:pointer;flex-shrink:0;margin:0; }
        .storage-file-meta { flex:1;min-width:0; }
        .storage-file-name { font-size:0.82rem;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
        .storage-file-sub { font-size:0.68rem;color:var(--ink-muted);margin-top:0.15rem; }
        .storage-del-btn { flex-shrink:0;padding:0.35rem 0.65rem;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;border:1.5px solid #fecaca;border-radius:0.45rem;background:#fef2f2;color:#dc2626;cursor:pointer; }
        .storage-del-btn:hover { background:#fee2e2; }
        .attachment-removed-label { font-size:0.72rem;font-style:italic;color:var(--ink-muted); }
        .client-fee-admin { margin-top:1.25rem;padding-top:1.25rem;border-top:2px solid var(--accent); }
        .client-fee-admin-badge { display:inline-block;font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--accent);background:var(--accent-pale);padding:0.2rem 0.5rem;border-radius:0.35rem;margin-bottom:0.75rem; }
        .client-fee-summary-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0.65rem;margin-bottom:1rem; }
        .client-fee-stat { background:var(--surface);border:1.5px solid var(--border);border-radius:0.75rem;padding:0.65rem 0.75rem; }
        .client-fee-stat-label { font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-muted); }
        .client-fee-stat-value { font-size:1rem;font-weight:800;color:var(--ink);margin-top:0.2rem; }
        .client-fee-stat-value.accent { color:var(--accent); }
        .client-fee-stat-value.success { color:#059669; }
        .client-fee-table { width:100%;border-collapse:collapse;font-size:0.78rem;margin-bottom:1rem; }
        .client-fee-table th { text-align:left;padding:0.5rem 0.6rem;background:var(--ink);color:white;font-size:0.62rem;text-transform:uppercase;letter-spacing:0.06em; }
        .client-fee-table td { padding:0.5rem 0.6rem;border-bottom:1px solid var(--border);vertical-align:middle; }
        .client-fee-table tr:hover td { background:var(--accent-pale); }
        .client-fee-paid-btn { padding:0.35rem 0.7rem;font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;border:1.5px solid var(--border);border-radius:0.45rem;background:white;color:var(--ink-muted);cursor:pointer;white-space:nowrap; }
        .client-fee-paid-btn.is-paid { background:#dcfce7;border-color:#bbf7d0;color:#059669; }
        .client-fee-paid-btn.is-pending { background:#fffbeb;border-color:#fde68a;color:#b45309; }
        .client-fee-paid-btn.is-send { background:#eff6ff;border-color:#bfdbfe;color:var(--accent); }
        .client-fee-paid-btn:hover { border-color:var(--accent); }
        .client-fee-status-pill { display:inline-block;font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;padding:0.2rem 0.5rem;border-radius:0.35rem;white-space:nowrap; }
        .client-fee-status-pill.to-invoice { background:#f3f4f6;color:#6b7280; }
        .client-fee-status-pill.pending { background:#fffbeb;color:#b45309; }
        .client-fee-status-pill.paid { background:#dcfce7;color:#059669; }
        .client-fee-stat-value.pending { color:#b45309; }
        .client-detail-collapsible { margin-bottom:0.75rem;border:1.5px solid var(--border);border-radius:0.75rem;overflow:hidden;background:white; }
        .client-detail-collapsible .collapsible-header { border-radius:0; }
        .client-detail-collapsible .collapsible-body { padding:0.75rem 1rem 1rem; }
        .client-doc-open-btn { display:inline-flex;align-items:center;gap:0.4rem;padding:0.45rem 0.8rem;background:var(--accent-pale);color:var(--accent);border:1.5px solid #bfdbfe;border-radius:0.5rem;font-size:0.72rem;font-weight:700;cursor:pointer;font-family:inherit; }
        .client-doc-open-btn:hover { background:#dbeafe; }
        .client-fee-paid-section { margin-top:0.5rem;padding-top:0.5rem;border-top:1px dashed var(--border); }
        .agreement-stage-row { display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.6rem 0;border-bottom:1px solid var(--border);flex-wrap:wrap; }
        .agreement-stage-row:last-child { border-bottom:none; }
        .agreement-stage-complete-btn { padding:0.4rem 0.75rem;font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;border:1.5px solid #bbf7d0;border-radius:0.45rem;background:#ecfdf5;color:#059669;cursor:pointer;white-space:nowrap;font-family:inherit; }
        .agreement-stage-complete-btn:hover { background:#dcfce7; }
        .agreement-stage-complete-btn:disabled { opacity:0.55;cursor:default;background:#f3f4f6;border-color:var(--border);color:var(--ink-muted); }
        .agreement-stage-done-badge { font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#059669;background:#dcfce7;padding:0.2rem 0.5rem;border-radius:0.35rem; }
        .client-stage-badge { display:inline-block;font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--accent);background:var(--accent-pale);border:1.5px solid #bfdbfe;padding:0.25rem 0.55rem;border-radius:0.4rem;white-space:nowrap; }
        .client-stage-badge.complete { color:#059669;background:#dcfce7;border-color:#bbf7d0; }
        .client-stage-badge.none { color:var(--ink-muted);background:var(--surface);border-color:var(--border); }
        .member-hours-banner { display:none;margin-bottom:1.25rem;padding:1.1rem 1.35rem;background:linear-gradient(135deg,#ecfdf5 0%,#f0fdf4 100%);border:1.5px solid #86efac;border-radius:1rem;box-shadow:0 2px 10px rgba(5,150,105,0.08); }
        .member-hours-banner.visible { display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap; }
        .member-hours-banner-text { font-size:0.95rem;color:#166534;font-weight:700;line-height:1.55;flex:1;min-width:220px; }
        .member-hours-banner-text strong { color:#047857;font-weight:800; }
        .member-hours-banner-btn { padding:0.65rem 1.25rem;font-size:0.75rem;font-weight:800;text-transform:uppercase;letter-spacing:0.07em;border:none;border-radius:0.65rem;background:#059669;color:white;cursor:pointer;font-family:inherit;white-space:nowrap;box-shadow:0 2px 6px rgba(5,150,105,0.25); }
        .member-hours-banner-btn:hover { background:#047857; }
        .task-created-notice { position:fixed;top:1rem;right:1rem;z-index:10001;max-width:min(360px,92vw);padding:0.9rem 1.1rem;background:#1e3a5f;color:white;border-radius:0.8rem;box-shadow:0 10px 28px rgba(0,0,0,0.2);font-size:0.82rem;font-weight:600;line-height:1.5;display:none;cursor:pointer; }
        .task-created-notice.visible { display:block;animation:fadeIn 0.3s ease both; }
        .task-created-notice strong { color:#93c5fd;font-weight:800; }
        .manager-cost-form { margin-top:0.75rem;padding:0.875rem;background:#f8fafc;border:1.5px solid var(--border);border-radius:0.75rem; }
        .manager-cost-add-btn { display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.75rem;font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;border:1.5px solid #bfdbfe;border-radius:0.5rem;background:var(--accent-pale);color:var(--accent);cursor:pointer;font-family:inherit; }
        .manager-cost-add-btn:hover { background:#dbeafe; }
        .jc-pay-section { margin-bottom:1.25rem;padding:1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:0.75rem; }
        .jc-pay-type-row { display:flex;gap:1.25rem;margin-top:0.5rem;flex-wrap:wrap; }
        .jc-pay-type-opt { display:flex;align-items:center;gap:0.4rem;font-size:0.85rem;font-weight:600;color:var(--ink);cursor:pointer; }
        .jc-pay-type-opt input { accent-color:var(--accent);width:1rem;height:1rem; }
        .jc-accept-quote-btn { padding:0.55rem 1.1rem;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;border:none;border-radius:0.5rem;background:#059669;color:white;cursor:pointer;font-family:inherit; }
        .jc-accept-quote-btn:hover { background:#047857; }
        .jc-reject-quote-btn { padding:0.55rem 1.1rem;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;border:1.5px solid #fecaca;border-radius:0.5rem;background:#fee2e2;color:#dc2626;cursor:pointer;font-family:inherit; }
        .jc-reject-quote-btn:hover { background:#fecaca; }
        .jc-fixed-quote-gate-bar { padding:1rem 1.5rem;background:#fffbeb;border-bottom:1.5px solid #fde68a;flex-shrink:0; }
        .jc-fixed-quote-gate-text { font-size:0.85rem;color:#92400e;margin:0 0 0.75rem;line-height:1.5;font-weight:600; }
        .jc-fixed-quote-gate-actions { display:flex;gap:0.65rem;flex-wrap:wrap; }
        .jc-fixed-quote-rejected-bar { padding:0.85rem 1.5rem;background:#fef2f2;border-bottom:1.5px solid #fecaca;font-size:0.82rem;font-weight:600;color:#b91c1c;flex-shrink:0; }
        .jc-quote-accepted { margin-top:0.5rem;font-size:0.78rem;font-weight:700;color:#059669; }
        .payout-entry-row { display:flex;align-items:center;gap:0.6rem;padding:0.55rem 0.75rem;border:1.5px solid var(--border);border-radius:0.65rem;margin-bottom:0.4rem;transition:all 0.15s;cursor:pointer; }
        .payout-entry-row:hover { box-shadow:0 2px 8px rgba(0,0,0,0.06); }
        .payout-entry-cb-wrap { flex-shrink:0;display:flex;align-items:center; }
        .hours-spent-table { width:100%;border-collapse:collapse;font-size:0.78rem;margin-bottom:0.75rem; }
        .hours-spent-table th { text-align:left;padding:0.45rem 0.5rem;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-muted);border-bottom:1.5px solid var(--border); }
        .hours-spent-table td { padding:0.5rem;border-bottom:1px solid var(--border);vertical-align:top; }
        .hours-spent-section-label { font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-muted);margin:0.75rem 0 0.5rem; }
        .hours-spent-section-label:first-child { margin-top:0; }
        .hours-spent-total-row { display:flex;justify-content:space-between;align-items:center;padding:0.65rem 0.75rem;background:var(--surface);border:1.5px solid var(--border);border-radius:0.65rem;font-size:0.8rem;font-weight:700;margin-top:0.5rem; }
        .hours-spent-grand-total { display:flex;justify-content:space-between;align-items:center;padding:0.85rem 1rem;background:var(--accent-pale);border:1.5px solid #bfdbfe;border-radius:0.75rem;font-size:0.88rem;font-weight:800;color:var(--ink);margin-top:1rem; }
        .client-hours-project-block { margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1.5px solid var(--border); }
        .client-hours-project-block:last-child { border-bottom:none;margin-bottom:0;padding-bottom:0; }
        .client-hours-project-title { font-size:0.85rem;font-weight:700;color:var(--ink);margin-bottom:0.65rem; }
        .payout-entry-row.unpaid { background:#ecfdf5;border-color:#bbf7d0; }
        .payout-entry-row.paid { background:#f3f4f6;border-color:#e5e7eb;opacity:0.75; }
        .payout-entry-row.selected { box-shadow:0 0 0 2px var(--accent); }
        .payout-entry-cb { width:1.1rem;height:1.1rem;accent-color:var(--accent);flex-shrink:0; }
        .payout-entry-meta { flex:1;min-width:0; }
        .payout-entry-title { font-size:0.85rem;font-weight:700;color:var(--ink); }
        .payout-entry-sub { font-size:0.72rem;color:var(--ink-muted);margin-top:0.15rem; }
        .payout-entry-amount { font-size:0.95rem;font-weight:800;color:var(--accent);white-space:nowrap; }
        .payout-entry-row.paid .payout-entry-amount { color:var(--ink-muted); }
        .payout-week-label { font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-muted);margin:1rem 0 0.5rem; }
        .payout-toolbar { display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin-bottom:1rem;padding:0.65rem 0.75rem;background:var(--surface);border:1.5px solid var(--border);border-radius:0.75rem; }
        .client-sort-bar { display:flex;gap:0.5rem;margin-bottom:1rem;flex-wrap:wrap; }
        .client-sort-btn { padding:0.4rem 0.875rem;font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;border:1.5px solid var(--border);border-radius:2rem;cursor:pointer;background:white;color:var(--ink-muted);font-family:inherit;transition:all 0.15s; }
        .client-sort-btn.active { background:var(--accent);border-color:var(--accent);color:white; }
        .task-new-badge { display:inline-flex;align-items:center;padding:0.15rem 0.45rem;border-radius:0.3rem;font-size:0.58rem;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;background:#dc2626;color:white;margin-left:0.35rem;vertical-align:middle; }
        .jc-footer { display:flex;justify-content:flex-end;padding:0.875rem 1.5rem;border-top:1.5px solid var(--border);background:var(--surface);flex-shrink:0; }
        .jc-done-btn { padding:0.65rem 1.5rem;font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;border:1.5px solid var(--border);border-radius:0.75rem;background:white;color:var(--ink-muted);cursor:pointer;font-family:inherit;transition:all 0.15s; }
        .jc-done-btn:hover { border-color:var(--accent);color:var(--accent);background:var(--accent-pale); }
        .jc-hours-submit-section { margin-bottom:1.25rem;padding:1rem;background:#fffbeb;border:1.5px solid #fde68a;border-radius:0.75rem; }
        .jc-payout-panel { margin-bottom:1.25rem; }
        .jc-payout-history-wrap { margin-bottom:0.875rem;padding:0.875rem;background:var(--surface);border:1.5px solid var(--border);border-radius:0.75rem; }
        .jc-payout-history-row { display:flex;justify-content:space-between;align-items:center;gap:0.5rem;padding:0.45rem 0;border-bottom:1px solid var(--border);font-size:0.78rem;flex-wrap:wrap; }
        .jc-payout-history-row:last-child { border-bottom:none; }
        .jc-payout-history-total { margin-top:0.5rem;padding-top:0.5rem;border-top:1.5px solid var(--border);font-size:0.8rem;font-weight:700;color:var(--ink); }
        .jc-interim-payout-section { padding:1rem;background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:0.75rem;margin-bottom:0.875rem; }
        .jc-record-payout-btn { width:100%;padding:0.75rem;font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;border:none;border-radius:0.65rem;background:#16a34a;color:white;cursor:pointer;font-family:inherit; }
        .jc-record-payout-btn:hover { background:#15803d; }
        .chat-pending-chip { display:inline-flex;align-items:center;gap:0.35rem;padding:0.25rem 0.55rem;background:var(--accent-pale);border:1px solid #bfdbfe;border-radius:9999px;font-size:0.68rem;font-weight:600;color:var(--accent); }
        .chat-pending-chip button { background:none;border:none;cursor:pointer;color:var(--ink-muted);font-size:0.9rem;line-height:1;padding:0; }
        .chat-msg-file img { display:block;margin-bottom:0.25rem;border-radius:0.5rem;max-width:200px;max-height:140px;object-fit:cover; }
        .header-top-bar { position:absolute;top:0;right:0;display:flex;align-items:center;gap:0.45rem;z-index:5;flex-wrap:nowrap;max-width:min(340px,48vw); }
        .header-user-role { font-size:0.68rem;font-weight:600;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:10.5rem;flex:1;min-width:0;text-align:right; }
        #headerSignedInUser { font-size:0.72rem;font-weight:700;color:var(--ink-muted);white-space:nowrap;display:inline-flex;align-items:center;gap:0.4rem;flex-shrink:0; }
        .header-user-name-pill { display:inline-block;padding:0.2rem 0.55rem;border-radius:0.4rem;font-weight:800;font-size:0.72rem;white-space:nowrap; }
        .fin-overview-summary { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0.75rem;margin-bottom:1.25rem; }
        .fin-overview-row { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.9rem 1.1rem;border:1.5px solid var(--border);border-radius:0.85rem;margin-bottom:0.55rem;cursor:pointer;transition:all 0.15s;background:white;flex-wrap:wrap; }
        .fin-overview-row:hover { border-color:#bfdbfe;box-shadow:0 2px 8px rgba(29,78,216,0.08); }
        .fin-overview-row.no-agreement { opacity:0.72;cursor:default; }
        .fin-overview-row.no-agreement:hover { border-color:var(--border);box-shadow:none; }
        .fin-overview-client { font-weight:700;font-size:0.92rem;color:var(--ink);min-width:0; }
        .fin-overview-sub { font-size:0.72rem;color:var(--ink-muted);margin-top:0.15rem; }
        .fin-overview-amounts { display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-shrink:0;min-width:13rem;margin-left:auto; }
        .fin-overview-amt { min-width:5rem; }
        .fin-overview-amt.pending-col { text-align:left; }
        .fin-overview-amt.invoice-col { text-align:right;margin-left:auto; }
        .fin-overview-amt-label { font-size:0.58rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-muted); }
        .fin-overview-amt-value { font-size:0.88rem;font-weight:800;margin-top:0.1rem; }
        .fin-overview-amt-value.invoice { color:#1d4ed8; }
        .fin-overview-amt-value.pending { color:#b45309; }
        .fin-overview-amt-value.due { color:#059669; }
        .auth-screen { min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem; }
        .auth-card { width:100%;max-width:400px;background:var(--card);border:1.5px solid var(--border);border-radius:1.25rem;padding:2rem 2rem 1.75rem;box-shadow:0 8px 32px rgba(0,0,0,0.06); }
        .auth-logo { width:52px;height:52px;background:var(--ink);border-radius:0.875rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem; }
        .auth-title { font-family:'DM Serif Display',serif;font-size:1.65rem;text-align:center;color:var(--ink);margin:0 0 0.25rem; }
        .auth-sub { text-align:center;font-size:0.8rem;color:var(--ink-muted);margin:0 0 1.5rem;line-height:1.5; }
        .auth-error { display:none;color:#dc2626;background:#fef2f2;padding:0.5rem 0.75rem;border-radius:0.5rem;font-size:0.8rem;margin-bottom:1rem;font-weight:600; }
        .auth-link { background:none;border:none;color:var(--accent);font-size:0.8rem;font-weight:700;cursor:pointer;text-decoration:underline;padding:0;margin-top:0.75rem; }
        .member-tab-bar { display:flex;gap:0.25rem;margin-bottom:1.25rem;background:var(--surface);border-radius:0.875rem;padding:0.25rem;flex-wrap:wrap; }
        .member-tab { flex:1;min-width:5rem;padding:0.55rem 0.75rem;font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;border:none;cursor:pointer;border-radius:0.625rem;background:transparent;color:var(--ink-muted);transition:all 0.2s; }
        .member-tab.active { background:white;color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,0.08); }
        .nav-tab-hidden { display:none !important; }
        .main-nav-tab {
            flex:1;padding:0.875rem 1rem;
            font-family:Arial,Helvetica,sans-serif;
            font-size:0.68rem;font-weight:700;
            text-transform:uppercase;letter-spacing:0.1em;
            border:none;cursor:pointer;
            display:flex;align-items:center;justify-content:center;gap:0.4rem;
            transition:all 0.2s;
        }
        .main-nav-tab + .main-nav-tab { border-left:1.5px solid var(--border); }
        .main-nav-tab--inactive { background:var(--surface);color:var(--ink-muted); }
        .main-nav-tab--active { background:var(--accent);color:white; }
        .field-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.875rem; }
        @media (max-width:600px) { .field-grid { grid-template-columns:1fr 1fr; } }
        .np-modal { position:relative;z-index:10000;width:90%;max-width:480px;background:white;border:1.5px solid var(--border);border-radius:1.25rem;box-shadow:0 20px 60px rgba(0,0,0,0.15);animation:fadeIn 0.3s ease both; }
        .avatar { width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:800;text-transform:uppercase;flex-shrink:0; }
        .avatar-blue { background:var(--accent-pale);color:var(--accent); }
        .member-avatar-img { object-fit:cover;flex-shrink:0;display:block;background:var(--surface); }
        .member-avatar-img.circle { border-radius:50%; }
        .member-avatar-img.rounded { border-radius:0.45rem; }
        .chat-msg-row { display:flex;align-items:flex-end;gap:0.4rem;max-width:92%; }
        .chat-msg-row.outgoing { align-self:flex-end;flex-direction:row-reverse;margin-left:auto; }
        .chat-msg-row.incoming { align-self:flex-start; }
        .profile-photo-upload { display:flex;align-items:center;gap:0.85rem;margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1.5px solid var(--border); }
        .template-item { display:flex;align-items:center;justify-content:space-between;padding:0.6rem 0.875rem;border:1.5px solid var(--border);border-radius:0.75rem;margin-bottom:0.5rem;cursor:pointer;transition:all 0.15s; }
        .template-item:hover { background:var(--accent-pale);border-color:var(--accent); }
        .task-list-person { border:1.5px solid var(--border);border-radius:0.75rem;padding:0.65rem 0.85rem;margin-bottom:0.45rem;background:white;transition:all 0.2s; }
        .task-list-person:hover { border-color:var(--accent);box-shadow:0 2px 12px rgba(29,78,216,0.08); }
        .task-list-main { flex:1;min-width:0;cursor:pointer; }
        .task-priority-actions { display:flex;flex-direction:column;gap:0.35rem;flex-shrink:0;align-items:stretch; }
        .task-priority-btn { padding:0.3rem 0.55rem;font-size:0.58rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;border:1.5px solid var(--border);border-radius:0.45rem;background:white;color:var(--ink-muted);cursor:pointer;white-space:nowrap;font-family:'DM Sans',sans-serif;transition:all 0.15s; }
        .task-priority-btn:hover { border-color:var(--accent);color:var(--accent);background:var(--accent-pale); }

/* ===== Client Form Styles ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --ink: #1a1a1a;
            --ink-light: #374151;
            --ink-muted: #6b7280;
            --surface: #f3f4f6;
            --surface-warm: #e5e7eb;
            --accent: #1d4ed8;
            --accent-light: #2563eb;
            --accent-pale: #eff6ff;
            --border: #d1d5db;
            --border-strong: #9ca3af;
            --card: #ffffff;
            --gold: #b8960c;
            --error: #dc2626;
            --success: #059669;
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--surface);
            color: var(--ink);
            min-height: 100vh;
            padding: 2rem 1rem 4rem;
        }

        h1, h2, h3, .serif { font-family: 'DM Serif Display', serif; }

        .wrapper {
            max-width: 680px;
            margin: 0 auto;
        }

        /* ── Header ── */
        .form-header {
            margin-bottom: 2rem;
        }
        .practice-logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }
        .logo-mark {
            width: 48px;
            height: 48px;
            background: var(--ink);
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .logo-mark svg { opacity: 0.9; }
        .practice-name {
            font-family: 'DM Serif Display', serif;
            font-size: 1rem;
            color: var(--ink);
            letter-spacing: 0.02em;
        }
        .practice-sub {
            font-size: 0.7rem;
            color: var(--ink-muted);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            font-weight: 600;
        }

        .form-title {
            font-family: 'DM Serif Display', serif;
            font-size: 2rem;
            color: var(--ink);
            margin-bottom: 1rem;
            line-height: 1.2;
        }

        .form-intro {
            background: var(--card);
            border: 1.5px solid var(--border);
            border-radius: 1rem;
            padding: 1.25rem 1.5rem;
            font-size: 0.875rem;
            color: var(--ink-light);
            line-height: 1.7;
        }
        .form-intro p { margin-bottom: 0.75rem; }
        .form-intro p:last-child { margin-bottom: 0; }
        .form-intro ul {
            padding-left: 1.25rem;
            margin: 0.5rem 0;
        }
        .form-intro li { margin-bottom: 0.35rem; }
        .form-intro a {
            color: var(--accent);
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        /* ── Pre-filled notice ── */
        .prefill-notice {
            display: none;
            background: var(--accent-pale);
            border: 1.5px solid #bfdbfe;
            border-radius: 0.75rem;
            padding: 0.75rem 1rem;
            font-size: 0.8rem;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 1.5rem;
            align-items: center;
            gap: 0.5rem;
        }

        /* ── Card ── */
        .card {
            background: var(--card);
            border: 1.5px solid var(--border);
            border-radius: 1.25rem;
            padding: 2rem;
            margin-bottom: 1.5rem;
        }

        .section-label {
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--ink-muted);
            margin-bottom: 1.25rem;
            padding-bottom: 0.6rem;
            border-bottom: 1.5px solid var(--border);
        }

        /* ── Fields ── */
        .field { margin-bottom: 1.25rem; }
        .field:last-child { margin-bottom: 0; }

        .field-label {
            display: block;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--ink-muted);
            margin-bottom: 0.4rem;
        }
        .field-label .req {
            color: var(--error);
            margin-left: 0.2rem;
        }

        .field-hint {
            font-size: 0.75rem;
            color: var(--ink-muted);
            margin-bottom: 0.4rem;
            font-style: italic;
        }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="number"],
        select,
        textarea {
            width: 100%;
            padding: 0.75rem 1rem;
            background: var(--surface);
            border: 1.5px solid var(--border);
            border-radius: 0.75rem;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--ink);
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
            appearance: none;
        }
        input:focus, select:focus, textarea:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(29,78,216,0.1);
        }
        input.prefilled {
            background: var(--accent-pale);
            border-color: #bfdbfe;
            color: var(--accent);
            font-weight: 600;
        }
        select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.875rem center;
            padding-right: 2.5rem;
            cursor: pointer;
        }
        textarea { resize: vertical; min-height: 90px; }

        .field-error {
            display: none;
            font-size: 0.75rem;
            color: var(--error);
            font-weight: 600;
            margin-top: 0.35rem;
            align-items: center;
            gap: 0.3rem;
        }
        .field-error.visible { display: flex; }

        input.invalid, select.invalid { border-color: var(--error); }

        /* ── Upload zones ── */
        .upload-zone {
            border: 2px dashed var(--border);
            border-radius: 0.875rem;
            padding: 1.5rem 1rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            background: var(--surface);
        }
        .upload-zone:hover, .upload-zone.drag-over {
            border-color: var(--accent);
            background: var(--accent-pale);
        }
        .upload-zone input[type="file"] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
            border: none;
            background: none;
            padding: 0;
        }
        .upload-zone input[type="file"]:focus { box-shadow: none; }
        .upload-icon { margin-bottom: 0.5rem; opacity: 0.4; }
        .upload-text {
            font-size: 0.8rem;
            color: var(--ink-muted);
            font-weight: 500;
        }
        .upload-text span {
            color: var(--accent);
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .upload-hint {
            font-size: 0.7rem;
            color: var(--ink-muted);
            margin-top: 0.25rem;
            opacity: 0.8;
        }
        .upload-filelist {
            margin-top: 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            text-align: left;
        }
        .upload-file-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: white;
            border: 1.5px solid var(--border);
            border-radius: 0.5rem;
            padding: 0.4rem 0.75rem;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--ink);
        }
        .upload-file-item svg { flex-shrink: 0; color: var(--accent); }
        .upload-file-remove {
            margin-left: auto;
            background: none;
            border: none;
            cursor: pointer;
            color: var(--ink-muted);
            font-size: 1rem;
            line-height: 1;
            padding: 0 0.2rem;
        }
        .upload-file-remove:hover { color: var(--error); }

        /* ── Dynamic sections ── */
        .dynamic-section { display: none; }
        .dynamic-section.visible { display: block; }

        /* ── Two column grid ── */
        .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        @media (max-width: 520px) { .grid-2 { grid-template-columns: 1fr; } }

        /* ── Submit button ── */
        .btn-submit {
            width: 100%;
            padding: 1.1rem;
            background: var(--accent);
            color: white;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.875rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            border: none;
            border-radius: 0.875rem;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(29,78,216,0.25);
        }
        .btn-submit:hover { background: var(--accent-light); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(29,78,216,0.3); }
        .btn-submit:active { transform: translateY(0); }
        .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

        /* ── Success screen ── */
        #successScreen {
            display: none;
            text-align: center;
            padding: 3rem 2rem;
        }
        .success-icon {
            width: 72px;
            height: 72px;
            background: #dcfce7;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
        }
        .success-title {
            font-family: 'DM Serif Display', serif;
            font-size: 1.75rem;
            color: var(--ink);
            margin-bottom: 0.75rem;
        }
        .success-msg {
            font-size: 0.9rem;
            color: var(--ink-muted);
            line-height: 1.7;
            max-width: 400px;
            margin: 0 auto;
        }

        /* ── Progress indicator ── */
        .form-progress {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--ink-muted);
        }
        .progress-bar {
            flex: 1;
            height: 4px;
            background: var(--border);
            border-radius: 9999px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background: var(--accent);
            border-radius: 9999px;
            transition: width 0.4s ease;
            width: 0%;
        }

        /* ── Footer ── */
        .form-footer {
            text-align: center;
            font-size: 0.72rem;
            color: var(--ink-muted);
            margin-top: 2rem;
        }

        /* Fade in animation */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .card { animation: fadeUp 0.4s ease both; }
        .card:nth-child(2) { animation-delay: 0.05s; }
        .card:nth-child(3) { animation-delay: 0.1s; }
        .card:nth-child(4) { animation-delay: 0.15s; }