@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Sans+TC:wght@300;400;500;700&family=Poppins:wght@400;500;600;700&display=swap');
        
        body { 
            font-family: 'Poppins', system-ui, 'Noto Sans TC', 'Noto Sans JP', 'PingFang TC', 'Hiragino Sans', 'Microsoft JhengHei', 'Yu Gothic', 'Meiryo', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'SimHei', sans-serif;
            overflow-x: hidden; 
        }

        html, #root {
            min-width: 0;
            min-height: 100%;
        }

        .template-editor-page,
        .template-editor-workspace,
        .editor-canvas-viewport {
            box-sizing: border-box;
        }

        .editor-contextual-toolbar {
            align-items: center;
            display: flex;
            flex: 0 0 auto;
            min-height: 4.5rem;
            overflow: hidden;
            padding: 0.5rem 0;
            width: 100%;
        }

        .editor-contextual-toolbar-content {
            flex: 0 0 auto;
            min-width: min(100%, 24rem);
        }

        .editor-canvas-viewport {
            min-height: 0;
            width: 100%;
        }

        @media (max-width: 639px) {
            .editor-contextual-toolbar {
                min-height: 4rem;
            }

            .editor-contextual-toolbar-content {
                justify-content: flex-start;
                min-width: 100%;
            }
        }

        .template-canvas-frame {
            flex: 0 0 auto;
            max-width: 100%;
            position: relative;
        }

        .template-editor-workspace .no-print button,
        .template-editor-workspace .no-print select,
        .template-editor-workspace .no-print input {
            min-height: 2.25rem;
        }

        @media (max-width: 639px) {
            .template-editor-page {
                padding-bottom: 5rem;
            }
        }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

        .page-break-marker {
            position: absolute;
            left: 0;
            width: 100%;
            border-bottom: 2px dashed #3b82f6;
            pointer-events: none;
            z-index: 50;
            display: flex;
            justify-content: flex-end;
        }
        .page-break-label {
            background: #3b82f6;
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px 0 0 0;
        }

        .canvas-input {
            background: transparent;
            border: 1px solid transparent;
            width: 100%;
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit;
            color: inherit;
            text-align: inherit;
            padding: 0;
            margin: 0;
            resize: none;
            outline: none;
        }
        .canvas-input:hover:not(:disabled) { border-bottom: 1px dashed #ccc; }
        .canvas-input:focus { border-bottom: 1px solid #998bff; }
        
        @media print {
            @page { size: A4; margin: 0mm !important; }
            html, body { width: 210mm; height: 297mm; margin: 0 !important; padding: 0 !important; background: white; -webkit-print-color-adjust: exact; print-color-adjust: exact; overflow: hidden; }
            #root, .sidebar, .no-print, .mobile-header, .page-break-marker, .group > div.absolute, .payment-modal-overlay { display: none !important; }
            #root, .flex.h-screen, .main-content { display: block !important; height: auto !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: white !important; }
            .scale-container { width: 100% !important; height: auto !important; transform: none !important; display: block !important; margin: 0 !important; padding: 0 !important; left: 0 !important; top: 0 !important; }
            .scale-container > div { transform: none !important; width: 100% !important; }
            .invoice-page-container { position: fixed !important; top: 0 !important; left: 0 !important; margin: 0 !important; padding: 0 !important; width: 210mm !important; min-height: 297mm !important; z-index: 9999; background: white !important; box-shadow: none !important; }
            .invoice-page { width: 210mm !important; min-height: 297mm !important; margin: 0 !important; padding: 15mm !important; box-shadow: none !important; border: none !important; transform: none !important; overflow: visible !important; background: white !important; display: block !important; }
            input, textarea, select { display: none !important; }
            .print-text-view { display: block !important; }
            * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

            html.invoice-printing body > * { display: none !important; }
            html.invoice-printing body > .invoice-print-surface {
                display: block !important;
                position: static !important;
                width: 210mm !important;
                height: 297mm !important;
                min-height: 297mm !important;
                margin: 0 !important;
                padding: 0 !important;
                overflow: hidden !important;
                background: white !important;
            }
            html.invoice-printing .invoice-print-surface .invoice-export-page {
                box-shadow: none !important;
                overflow: visible !important;
            }
        }

        .invoice-print-surface { display: none; }

        .invoice-page {
            width: 210mm;
            min-height: 297mm;
            background: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            padding: 15mm;
            position: relative;
            transform-origin: top center;
            overflow: hidden; 
        }

        :root {
            --nu-ink: #111827;
            --nu-muted: #667085;
            --nu-paper: #f6f8fb;
            --nu-surface: #ffffff;
            --nu-soft: #f1f3f6;
            --nu-line: #e1e5eb;
            --nu-accent: #111827;
            --nu-accent-dark: #080e1a;
            --nu-accent-soft: #f1f3f6;
            --nu-success: #209765;
            --nu-danger: #cd4848;
            --nu-radius: 9px;
            --nu-shadow: 0 12px 36px rgba(17, 24, 39, .055), 0 2px 8px rgba(17, 24, 39, .035);
        }

        html, body, #root { min-width: 320px; min-height: 100%; }
        body { background: var(--nu-paper); color: var(--nu-ink); font-family: 'Poppins', system-ui, 'Noto Sans TC', 'Noto Sans JP', 'PingFang TC', 'Hiragino Sans', 'Microsoft JhengHei', 'Yu Gothic', 'Meiryo', sans-serif; font-size: 14px; letter-spacing: -.01em; }
        body.bg-gray-100 { background: var(--nu-paper); color: var(--nu-ink); }
        button, input, select, textarea { font: inherit; }
        button { transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
        button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(53, 87, 255, .18); outline-offset: 1px; }
        ::-webkit-scrollbar { width: 7px; height: 7px; }
        ::-webkit-scrollbar-thumb { background: #c9cbc5; border: 2px solid transparent; border-radius: 10px; background-clip: padding-box; }

        .dark { --nu-ink: #f2f2ef; --nu-muted: #a4a8a3; --nu-paper: #171a19; --nu-surface: #202423; --nu-soft: #292e2c; --nu-line: #373d3a; --nu-accent-soft: #29345e; }
        .dark body, .dark .app-shell { background: var(--nu-paper); color: var(--nu-ink); }

        .app-shell { background: var(--nu-paper); color: var(--nu-ink); }
        .app-sidebar { width: 256px; flex: 0 0 256px; padding: 26px 17px 15px; background: #fff; border-right: 1px solid var(--nu-line); color: var(--nu-ink); }
        .dark .app-sidebar { background: #1d2220; }
        .app-brand-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 10px 25px; font-family: Poppins, Inter, sans-serif; }
        body .mobile-header { position: relative !important; }
        .app-brand { color: var(--nu-ink); font-size: 24px; font-weight: 750; letter-spacing: -.075em; line-height: 1; }
        .app-brand span { font-weight: 450; letter-spacing: -.065em; }
        .app-brand small { display: block; margin-top: 8px; color: var(--nu-muted); font-size: 9px; font-weight: 650; letter-spacing: .18em; }
        .app-create-button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; margin: 0 5px 24px; border: 1px solid var(--nu-accent); border-radius: var(--nu-radius); background: var(--nu-accent); color: #fff; font-family: Poppins, Inter, sans-serif; font-size: 13.5px; font-weight: 500; box-shadow: 0 4px 10px rgba(17,24,39,.12); }
        .app-create-button:hover { background: var(--nu-accent-dark); transform: translateY(-1px); }
        .app-navigation { flex: 1; min-height: 0; overflow-y: auto; }
        .app-nav-caption { margin: 0 10px 9px; color: #687386; font-family: Poppins, Inter, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .13em; }
        .app-nav-caption-spaced { margin-top: 29px; }
        .app-nav-link { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: #384152; font-family: Poppins, Inter, sans-serif; text-align: left; font-size: 13px; font-weight: 500; letter-spacing: -.015em; }
        .dark .app-nav-link { color: #b2b7b2; }
        .app-nav-link svg { color: #7b8492; }
        .app-nav-link:hover { background: #f5f6f8; color: var(--nu-ink); }
        .dark .app-nav-link:hover { background: #292f2c; }
        .app-nav-link.is-active { background: var(--nu-accent-soft); color: var(--nu-accent-dark); font-weight: 600; }
        .app-nav-link.is-active svg { color: var(--nu-accent); }
        .dark .app-nav-link.is-active { color: #d6ddff; }
        .app-nav-indicator { display: none; }
        .app-sidebar-footer { display: flex; align-items: center; gap: 8px; padding: 14px 6px 0; border-top: 1px solid var(--nu-line); }
        .app-sync-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #c58b39; }
        .app-sync-dot.synced { background: var(--nu-success); }
        .app-sync-dot.offline { background: #c58b39; }
        .app-sync-dot.error { background: var(--nu-danger); }
        .app-sync-label { flex: 1; color: var(--nu-muted); font-family: Poppins, Inter, sans-serif; font-size: 11px; }
        .app-signout { border: 0; background: transparent; color: var(--nu-muted); font-family: Poppins, Inter, sans-serif; font-size: 11px; }
        .app-signout:hover { color: var(--nu-ink); }
        .app-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--nu-muted); }
        .app-icon-button:hover { background: var(--nu-soft); color: var(--nu-ink); }
        .app-drawer-backdrop { background: rgba(22, 24, 23, .28); backdrop-filter: blur(2px); }
        .app-main { background: var(--nu-paper); color: var(--nu-ink); }
        .app-main h2 { color: var(--nu-ink); font-size: 21px; font-weight: 620; letter-spacing: -.04em; }
        .app-main h3 { color: var(--nu-ink); font-weight: 620; letter-spacing: -.025em; }
        .app-main .text-gray-500, .app-main .text-gray-400 { color: var(--nu-muted); }
        .app-main .text-gray-800 { color: var(--nu-ink); }
        .app-main .border-b, .app-main .border-t { border-color: var(--nu-line); }

        .document-workspace { min-height: 100%; padding: 19px clamp(18px, 3.2vw, 52px) 44px; }
        .document-heading, .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; margin: 0 0 12px; }
        .eyebrow { color: #8a8e89; font-size: 9px; font-weight: 700; letter-spacing: .17em; }
        .eyebrow span { color: var(--nu-accent); }
        .document-heading h1, .page-heading h1 { margin: 6px 0 0; color: var(--nu-ink); font-size: clamp(26px, 2vw, 30px); font-weight: 700; letter-spacing: -.055em; line-height: 1.08; }
        .manage-page .page-heading h1, .clients-page .page-heading h1, .history-page .page-heading h1 { font-size: clamp(32px, 3vw, 38px); font-weight: 700; letter-spacing: -.045em; }
        .document-heading p, .page-heading p { margin: 0; color: var(--nu-muted); font-size: 12px; }
        .document-heading-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; color: var(--nu-muted); font-size: 10px; }
        .mobile-document-heading { display: none; }
        .document-heading-meta span { padding: 3px 6px; border-radius: 4px; background: var(--nu-soft); font-size: 9px; font-weight: 600; letter-spacing: .025em; }
        .document-heading-meta strong { color: var(--nu-ink); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 550; }
        .document-builder-grid { display: grid; grid-template-columns: minmax(285px, 325px) minmax(0, 1fr); align-items: start; gap: clamp(20px, 2.2vw, 34px); max-width: 1600px; margin: 0 auto; }
        .document-controls-panel { min-width: 0; padding: 0 2px 20px; }
        .document-controls-panel > .space-y-4 { display: flex; flex-direction: column; gap: 0; }
        .document-controls-panel > .space-y-4 > .text-xs.font-bold { margin: 0 0 8px; padding: 0 0 10px; border-color: var(--nu-line); color: var(--nu-muted); font-size: 10px; letter-spacing: .1em; }
        .document-controls-panel label { color: #606660; font-size: 10px; font-weight: 650; letter-spacing: .025em; }
        .dark .document-controls-panel label { color: #b5bbb6; }
        .document-controls-panel select, .document-controls-panel input:not([type="checkbox"]):not([type="color"]), .document-controls-panel textarea { width: 100%; min-height: 37px; padding: 8px 10px; border: 1px solid var(--nu-line); border-radius: 6px; background-color: var(--nu-surface); color: var(--nu-ink); font-size: 12px; box-shadow: none; }
        .document-controls-panel select, .manage-surface select, .settings-surface select { appearance: none; padding-right: 33px; 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='%23777d77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
        .document-controls-panel textarea { min-height: 60px; }
        .document-controls-panel select:hover, .document-controls-panel input:hover, .document-controls-panel textarea:hover { border-color: #c8cbc4; }
        .document-controls-panel select:focus, .document-controls-panel input:focus, .document-controls-panel textarea:focus { border-color: var(--nu-accent); outline: 3px solid rgba(17,24,39,.1); }
        .document-controls-panel .mb-4.border-b { margin: 0; padding: 10px 0 11px; border-color: var(--nu-line); }
        .document-controls-panel > .space-y-4 > div:not(.pt-4):not(.fixed) { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--nu-line); }
        .document-controls-panel > .space-y-4 > div:first-of-type { padding-top: 0; }
        .document-controls-panel .grid.grid-cols-2, .document-details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
        .document-controls-panel .space-y-2 > .line-item-card { padding: 9px; border: 1px solid var(--nu-line); border-radius: 7px; background: #f7f8fa; }
        .dark .document-controls-panel .space-y-2 > .line-item-card { background: var(--nu-soft); }
        .document-controls-panel .line-item-description { display: block; min-height: 56px; max-height: 190px; margin-bottom: 7px; padding: 8px 9px; border-color: #e7e8e3; background: var(--nu-surface); line-height: 1.45; resize: vertical; }
        .document-controls-panel .line-item-description::-webkit-resizer { border: 5px solid transparent; border-right-color: #b8bcb5; border-bottom-color: #b8bcb5; }
        .document-controls-panel .line-item-values { display: grid; grid-template-columns: 58px minmax(66px, 1fr) minmax(72px, 1fr) 25px; align-items: center; gap: 7px; }
        .document-controls-panel .line-item-values input { width: 100%; min-width: 0; min-height: 34px !important; padding: 6px 7px; }
        .document-controls-panel .line-item-amount { overflow: hidden; color: var(--nu-muted); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
        .document-controls-panel .line-item-remove { display: flex; align-items: center; justify-content: center; width: 25px; height: 30px; border-radius: 5px; }
        .document-controls-panel .line-items-section .space-y-2 > * + * { margin-top: 7px; }
        .document-controls-panel .discount-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .document-controls-panel .discount-input-wrap { position: relative; width: 92px; flex: 0 0 92px; }
        .document-controls-panel .discount-input-wrap input { min-height: 34px !important; padding-right: 27px !important; text-align: right; }
        .document-controls-panel .discount-input-wrap span { position: absolute; top: 50%; right: 10px; color: var(--nu-muted); font-size: 12px; transform: translateY(-50%); pointer-events: none; }
        .document-controls-panel .invoice-totals-summary { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
        .document-controls-panel .invoice-total-row { display: flex; justify-content: space-between; gap: 12px; color: var(--nu-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
        .document-controls-panel .invoice-final-total { color: var(--nu-ink); font-size: 14px; font-weight: 650; }
        .document-controls-panel .invoice-discount-row span:last-child { color: #b45309; }
        .dark .document-controls-panel .invoice-discount-row span:last-child { color: #fbbf24; }
        .document-controls-panel > .space-y-4 > div > button.border-dashed { border-color: #c5cbd5; background: #f7f8fa; color: var(--nu-accent); font-weight: 600; }
        .dark .document-controls-panel > .space-y-4 > div > button.border-dashed { background: var(--nu-accent-soft); }
        .document-controls-panel .pt-4.border-t { margin-top: 18px; padding-top: 18px; border-color: var(--nu-line); }
        .document-controls-panel .pt-4.border-t > div:first-child { margin-bottom: 15px; }
        .document-controls-panel .pt-4.border-t button:first-child { min-height: 43px; border-radius: 6px; background: var(--nu-accent); font-weight: 620; box-shadow: none; }
        .document-controls-panel .pt-4.border-t button:first-child:hover { background: var(--nu-accent-dark); }
        .document-controls-panel .pt-4.border-t button:last-child { min-height: 40px; border-color: var(--nu-line); border-radius: 6px; color: var(--nu-ink); font-weight: 560; }
        .document-controls-panel .invoice-draft-status { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 2px; color: #6b7280; font-size: 11px; line-height: 1.3; }
        .document-controls-panel .invoice-draft-status.saved { color: #15803d; }
        .document-controls-panel .invoice-draft-status.error { color: #b91c1c; }
        .document-controls-panel .invoice-draft-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: invoice-draft-pulse 1s ease-in-out infinite alternate; }
        @keyframes invoice-draft-pulse { to { opacity: .35; } }
        .dark .document-controls-panel .invoice-draft-status { color: #9ca3af; }
        .dark .document-controls-panel .invoice-draft-status.saved { color: #4ade80; }
        .dark .document-controls-panel .invoice-draft-status.error { color: #fca5a5; }
        .document-controls-panel button:not(.pt-4 button) { border-radius: 6px; }
        .document-controls-panel .fixed { z-index: 100; }
        .document-controls-panel .fixed > div { border: 1px solid var(--nu-line); border-radius: 12px; box-shadow: 0 24px 80px rgba(16, 20, 18, .2); }
        .document-controls-panel .fixed input, .document-controls-panel .fixed textarea { background: var(--nu-surface); }
        .document-controls-panel .fixed button:last-child { min-height: 38px; border-radius: 6px; background: var(--nu-accent); }
        .document-preview-panel { min-width: 0; }
        .invoice-draft-modal-backdrop { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, .46); backdrop-filter: blur(3px); }
        .invoice-draft-modal { width: min(100%, 420px); padding: 24px; border: 1px solid var(--nu-line); border-radius: 12px; background: var(--nu-surface); color: var(--nu-ink); box-shadow: 0 24px 70px rgba(15, 23, 42, .22); }
        .invoice-draft-modal-mark { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 16px; border-radius: 10px; background: #ecfdf5; color: #15803d; }
        .invoice-draft-modal h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
        .invoice-draft-modal p { margin: 9px 0 20px; color: var(--nu-muted); font-size: 13px; line-height: 1.55; }
        .invoice-draft-modal-actions { display: grid; gap: 9px; }
        .invoice-draft-modal-actions button { min-height: 40px; padding: 9px 12px; border: 1px solid var(--nu-line); border-radius: 6px; font-size: 13px; font-weight: 600; transition: background .15s ease, border-color .15s ease; }
        .invoice-draft-modal-actions .invoice-draft-continue { border-color: var(--nu-accent); background: var(--nu-accent); color: #fff; }
        .invoice-draft-modal-actions .invoice-draft-continue:hover { background: var(--nu-accent-dark); }
        .invoice-draft-modal-actions .invoice-draft-start { background: transparent; color: var(--nu-ink); }
        .invoice-draft-modal-actions .invoice-draft-start:hover { background: var(--nu-soft); }
        .dark .invoice-draft-modal-mark { background: rgba(22, 101, 52, .25); color: #4ade80; }
        .preview-stage { display: flex; justify-content: center; min-height: 560px; padding: clamp(15px, 1.8vw, 25px) 8px; overflow: auto; border: 1px solid #e8e7e1; border-radius: 9px; background: #eeede7; }
        .dark .preview-stage { border-color: var(--nu-line); background: #252a28; }
        .preview-stage .scale-container { flex: 0 0 auto; margin: 0 auto; }
        .preview-stage .invoice-page { box-shadow: 0 22px 50px rgba(27, 29, 27, .12), 0 2px 8px rgba(27,29,27,.06); }

        .content-page { width: min(100%, 1420px); min-height: 100%; margin: 0 auto; padding: 52px 24px 64px; }
        .page-heading { align-items: flex-end; margin-bottom: 30px; }
        .manage-page > .page-heading, .clients-page > .page-heading, .history-page > .page-heading { align-items: flex-start; justify-content: flex-start; text-align: left; }
        .manage-page .page-heading h1, .clients-page .page-heading h1, .history-page .page-heading h1 { margin-top: 8px; font-size: clamp(32px, 2.5vw, 36px); }
        .manage-surface, .settings-surface, .client-create-surface, .data-table-surface { border: 1px solid var(--nu-line); border-radius: 9px; background: var(--nu-surface); }
        .manage-surface { padding: 24px; }
        .manage-surface > .space-y-4 { display: flex; flex-direction: column; gap: 21px; }
        .manage-surface > .space-y-4 > .flex.border-b { margin: 0; border-color: var(--nu-line); }
        .manage-surface > .space-y-4 > .flex.border-b button { flex: 1; min-height: 46px; margin: 0; padding: 10px 16px 12px; border: 1px solid transparent; border-bottom: 2px solid transparent; border-radius: 7px 7px 0 0; color: var(--nu-muted); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
        .manage-surface > .space-y-4 > .flex.border-b button.text-sky-600 { border-color: var(--nu-line); border-bottom-color: var(--nu-accent); background: var(--nu-accent-soft); color: var(--nu-accent); }
        .manage-company-panel { display: grid; grid-template-columns: minmax(190px, .72fr) minmax(0, 1.5fr); align-items: start; gap: 24px; }
        .manage-company-panel > * + *, .manage-terms-panel > * + * { margin-top: 0 !important; }
        .manage-company-panel > .manage-company-list { display: flex; flex-direction: column; align-items: stretch; gap: 8px; max-height: 420px; overflow: auto; padding: 0 0 4px; }
        .manage-company-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
        .manage-company-select { display: block; flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 10px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--nu-ink); text-align: left; font-size: 12px; font-weight: 600; }
        .manage-company-row.is-selected .manage-company-select { border-color: var(--nu-line); background: var(--nu-accent-soft); }
        .manage-company-select:hover { background: var(--nu-soft); }
        .manage-company-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .manage-default-button { flex: 0 0 auto; min-height: 34px; padding: 0 10px; border: 1px solid var(--nu-line); border-radius: 6px; background: var(--nu-surface); color: var(--nu-ink); font-size: 10px; font-weight: 650; white-space: nowrap; }
        .manage-default-button:not(:disabled):hover { border-color: var(--nu-ink); background: var(--nu-soft); }
        .manage-default-button.is-default, .manage-default-button:disabled { border-color: var(--nu-accent); background: var(--nu-accent); color: #fff; cursor: default; }
        .manage-company-panel > .manage-company-list > button.manage-add-company { min-height: 42px; margin-top: 2px; padding: 0 12px; border: 1px dashed #aeb6c2; border-radius: 6px; background: transparent; color: var(--nu-ink); text-align: left; font-size: 12px; font-weight: 620; }
        .manage-terms-panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(190px, .8fr); align-items: start; gap: 22px; }
        .manage-terms-panel .max-h-48 { max-height: 440px; }
        .manage-surface .rounded-full { border-radius: 6px; }
        .manage-surface .bg-gray-50.p-3, .manage-surface .bg-gray-50.p-3.rounded { padding: 18px; border: 0; border-radius: 7px; background: #f7f8fa; }
        .dark .manage-surface .bg-gray-50.p-3 { background: var(--nu-soft); }
        .manage-surface input:not([type="file"]), .manage-surface textarea, .settings-surface input, .settings-surface select { min-height: 39px; padding: 9px 11px; border: 1px solid var(--nu-line); border-radius: 6px; background: var(--nu-surface); color: var(--nu-ink); font-size: 12px; }
        .manage-surface textarea { min-height: 78px; }
        .manage-surface button.bg-green-600, .manage-surface button.bg-blue-600 { padding: 9px 13px; border-radius: 6px; background: var(--nu-accent); font-size: 11px; font-weight: 620; }
        .manage-surface button.bg-green-600:hover, .manage-surface button.bg-blue-600:hover { background: var(--nu-accent-dark); }
        .manage-surface .group { border-color: var(--nu-line); border-radius: 6px; }
        .settings-surface { max-width: 560px; padding: 24px; }
        .settings-surface select { width: 100%; margin-top: 7px; }
        .client-library-layout { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); align-items: start; gap: 24px; }
        .client-create-surface { padding: 20px; }
        .client-create-surface .space-y-3 { display: flex; flex-direction: column; gap: 10px; }
        .client-create-surface input, .client-create-surface textarea { width: 100%; min-height: 39px; padding: 9px 11px; border: 1px solid var(--nu-line); border-radius: 6px; background: var(--nu-surface); color: var(--nu-ink); font-size: 12px; }
        .client-create-surface button.bg-sky-600 { min-height: 38px; border-radius: 6px; background: var(--nu-accent); font-weight: 600; }
        .surface-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
        .surface-heading h2 { margin: 0; color: var(--nu-ink); font-size: 14px; font-weight: 620; letter-spacing: -.02em; }
        .surface-heading > span { color: #90948e; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
        .data-table-surface { overflow-x: auto; }
        .history-desktop-table { min-width: 0; }
        .history-mobile-list { display: none; }
        .history-mobile-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 0 12px; }
        .history-mobile-sort > span { flex: 0 0 100%; color: var(--nu-muted); font-size: 10px; font-weight: 650; }
        .history-mobile-sort button { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 5px 8px; border: 1px solid var(--nu-line); border-radius: 6px; background: var(--nu-surface); color: var(--nu-muted); font-size: 10px; }
        .history-mobile-sort button.is-active { border-color: var(--nu-ink); background: var(--nu-accent-soft); color: var(--nu-ink); }
        .history-mobile-cards { display: grid; gap: 9px; min-width: 0; }
        .history-mobile-card { min-width: 0; padding: 13px; border: 1px solid var(--nu-line); border-radius: 8px; background: var(--nu-surface); }
        .history-mobile-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--nu-line); }
        .history-mobile-card-header > div, .history-mobile-field { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
        .history-mobile-field-label { color: var(--nu-muted); font-size: 9px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
        .history-mobile-type { color: var(--nu-ink); font-size: 12px; font-weight: 700; }
        .history-mobile-status { flex: 0 0 auto; padding: 4px 7px; border-radius: 5px; font-size: 9px; font-weight: 650; }
        .history-mobile-status.is-paid { background: #dcfce7; color: #166534; }
        .history-mobile-status.is-partial { background: #fef3c7; color: #92400e; }
        .history-mobile-status.is-unpaid { background: var(--nu-soft); color: var(--nu-muted); }
        .history-mobile-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; min-width: 0; padding: 11px 0; }
        .history-mobile-number-value { max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--nu-accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 600; text-align: left; overflow-wrap: anywhere; }
        .history-mobile-amount { align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
        .history-mobile-amount strong { color: var(--nu-ink); font-size: 13px; white-space: nowrap; }
        .history-mobile-amount small { color: var(--nu-success); font-size: 9px; }
        .history-mobile-client { grid-column: 1 / -1; }
        .history-mobile-client strong { color: var(--nu-ink); font-size: 12px; font-weight: 550; line-height: 1.45; overflow-wrap: anywhere; }
        .history-mobile-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--nu-line); }
        .history-mobile-actions button { display: inline-flex; align-items: center; gap: 5px; min-height: 31px; padding: 5px 7px; border: 1px solid var(--nu-line); border-radius: 5px; background: var(--nu-surface); color: var(--nu-muted); font-size: 9px; }
        .history-mobile-actions button:hover { background: var(--nu-soft); color: var(--nu-ink); }
        .history-mobile-empty { padding: 24px 8px; color: var(--nu-muted); font-size: 12px; text-align: center; }
        .data-table-surface table, .app-main table { border-collapse: collapse; }
        .app-main thead { background: #f4f6f9; }
        .dark .app-main thead { background: #292f2c; }
        .app-main th { padding: 12px 15px; border-bottom: 1px solid var(--nu-line); color: var(--nu-muted); font-size: 10px; font-weight: 650; letter-spacing: .035em; }
        .app-main td { padding: 13px 15px; border-bottom: 1px solid #eeefeb; color: var(--nu-ink); font-size: 12px; }
        .dark .app-main td { border-color: var(--nu-line); }
        .app-main tbody tr:hover { background: rgba(17,24,39,.025); }
        .app-main td button.rounded-full { min-height: 27px; padding: 3px 9px; border: 1px solid var(--nu-line); border-radius: 5px; background: #f4f4ef; color: var(--nu-muted); font-size: 10px; }
        .app-main td button.rounded-full:not(:disabled) { background: var(--nu-accent-soft); border-color: var(--nu-line); color: var(--nu-accent-dark); }
        .app-main td button.rounded-full:hover:not(:disabled) { background: #e9edf2; }
        .app-main td button:not(.rounded-full) { transition: color .16s ease, background .16s ease; }
        .app-main .bg-white:not(.invoice-page):not(.template-canvas-frame > div) { background-color: var(--nu-surface); }
        .app-main .rounded-xl, .app-main .rounded-lg { border-radius: 8px; }
        .app-main .shadow, .app-main .shadow-sm { box-shadow: 0 4px 18px rgba(24,27,25,.035); }
        .app-main .border-gray-200, .app-main .border-gray-100 { border-color: var(--nu-line); }
        .app-main .p-4.lg\:p-8.max-w-7xl, .app-main .p-4.lg\:p-8.max-w-3xl { max-width: 1420px; margin: 0 auto; padding: 52px 24px 64px; }
        .app-main .p-4.lg\:p-8.max-w-7xl > h2, .app-main .p-4.lg\:p-8.max-w-3xl > h2 { margin-bottom: 24px; font-size: 29px; }
        .app-main .fixed.top-20.right-8 { padding: 11px 16px; border-radius: 7px; background: var(--nu-success); box-shadow: 0 8px 26px rgba(32,151,101,.18); font-size: 12px; }
        .fixed.inset-0.backdrop-blur-sm { background: rgba(22,24,23,.36); }
        .fixed.inset-0.backdrop-blur-sm > div { border: 1px solid var(--nu-line); border-radius: 10px; background: var(--nu-surface); box-shadow: 0 24px 80px rgba(16,20,18,.2); color: var(--nu-ink); }
        .fixed.inset-0.backdrop-blur-sm input { min-height: 40px; border-color: var(--nu-line); border-radius: 6px; background: var(--nu-surface); color: var(--nu-ink); }
        .fixed.inset-0.backdrop-blur-sm button.bg-green-600 { border-radius: 6px; background: var(--nu-accent); box-shadow: none; }
        .fixed.inset-0.backdrop-blur-sm button.bg-green-600:hover { background: var(--nu-accent-dark); }
        .welcome-page { display: flex; min-height: 100%; flex-direction: column; align-items: flex-start; justify-content: center; padding: 11vh clamp(26px, 10vw, 150px); }
        .welcome-page h1 { margin: 19px 0 13px; color: var(--nu-ink); font-size: clamp(42px, 6.5vw, 78px); font-weight: 570; letter-spacing: -.075em; line-height: .98; }
        .welcome-page p { max-width: 390px; margin: 0 0 26px; color: var(--nu-muted); font-size: 14px; line-height: 1.7; }
        .welcome-page button { display: inline-flex; align-items: center; gap: 9px; min-height: 43px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--nu-accent); color: #fff; font-size: 12px; font-weight: 620; }
        .welcome-page button:hover { background: var(--nu-accent-dark); transform: translateY(-1px); }
        .welcome-note { margin-top: 52px; color: #92968f; font-size: 10px; }

        .template-editor-page { min-height: 100%; padding: 30px clamp(14px, 2.2vw, 32px) 40px; overflow: auto; }
        .template-page-heading { align-items: center; max-width: none; margin: 0 0 23px; }
        .template-product-layout { display: grid; grid-template-columns: minmax(235px, 285px) minmax(0, 1fr); align-items: start; gap: 22px; }
        .template-library { position: sticky; top: 15px; max-height: calc(100vh - 120px); overflow-y: auto; padding: 17px; border: 1px solid var(--nu-line); border-radius: 8px; background: var(--nu-surface); }
        .template-library .space-y-4 { display: flex; flex-direction: column; gap: 15px; }
        .template-library .border-t { border-color: var(--nu-line); }
        .template-library input { min-width: 0; min-height: 35px; border: 1px solid var(--nu-line); border-radius: 5px; background: var(--nu-surface); color: var(--nu-ink); font-size: 11px; }
        .template-library button.bg-sky-600 { border-radius: 5px; background: var(--nu-accent); }
        .template-library .rounded.border { border-color: var(--nu-line); border-radius: 6px; }
        .template-stage-panel { min-width: 0; }
        .template-editor-toolbar { border-color: var(--nu-line) !important; border-radius: 7px !important; background: var(--nu-surface) !important; box-shadow: none !important; }
        .template-editor-toolbar button { border-radius: 5px !important; }
        .template-editor-workspace { min-height: min(74vh, 920px); border: 1px solid var(--nu-line); border-radius: 8px; background: #f0f3f7; }
        .dark .template-editor-workspace { background: #252a28; }
        .template-editor-workspace .editor-contextual-toolbar { min-height: 56px; }
        .template-editor-workspace .template-canvas-frame { filter: drop-shadow(0 14px 24px rgba(26,28,26,.1)); }
        .template-editor-workspace .template-canvas-frame > div { box-shadow: none !important; }
        .editor-contextual-toolbar-content { border-radius: 6px !important; box-shadow: 0 4px 16px rgba(20,24,22,.08) !important; }

        .app-main :is(button, a).bg-sky-600, .app-main button.bg-blue-600 { background-color: var(--nu-accent); }
        .app-main :is(button, a).bg-sky-600:hover, .app-main button.bg-blue-600:hover { background-color: var(--nu-accent-dark); }
        .app-main .text-sky-600, .app-main .text-blue-600 { color: var(--nu-accent); }
        .app-main .focus\:ring-sky-500:focus { --tw-ring-color: rgba(17,24,39,.2); }

        .invoice-page table { table-layout: fixed; }
        .invoice-page table thead th { padding: 12px; border: 0; color: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; letter-spacing: inherit; }
        .invoice-page table tbody td { padding: 12px; color: inherit; font-size: inherit; }

        @media (max-width: 1100px) {
            .app-sidebar { width: 235px; flex-basis: 235px; }
            .document-workspace { padding: 17px 24px 38px; }
            .document-builder-grid { grid-template-columns: minmax(270px, 300px) minmax(0, 1fr); gap: 18px; }
            .template-product-layout { grid-template-columns: minmax(205px, 245px) minmax(0, 1fr); gap: 14px; }
        }
        @media (max-width: 760px) {
            .app-sidebar { width: min(290px, calc(100vw - 38px)); flex-basis: min(290px, calc(100vw - 38px)); padding: 20px 14px 13px; }
            .app-shell { height: 100dvh; }
            .app-main { min-height: 0; }
            body .mobile-header { position: fixed !important; }
            .document-workspace { padding: 17px 15px 30px; }
            .document-heading, .page-heading { align-items: flex-start; margin-bottom: 12px; }
            .document-heading-meta { display: none; }
            .document-workspace > .mobile-document-heading {
                display: flex;
                margin: -17px -15px calc(12px - var(--mobile-heading-margin-reduction, 0px)) !important;
                padding-right: 15px;
                padding-left: 15px;
            }
            .document-controls-panel > .desktop-document-heading { display: none; }
            .welcome-page { padding: 10vh 24px; }
            .welcome-page h1 { font-size: clamp(43px, 12vw, 64px); }
            .welcome-note { margin-top: 35px; }
            .document-builder-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
            .document-controls-panel { padding: 0; }
            .preview-stage { min-height: 390px; padding: 14px 4px; }
            .content-page { padding: 8px 15px 36px; }
            .mobile-sticky-heading {
                position: sticky;
                top: 0;
                z-index: 30;
                margin-bottom: calc(12px - var(--mobile-heading-margin-reduction, 0px)) !important;
                padding: 2px 0 calc(11px - var(--mobile-heading-padding-reduction, 0px));
                background: var(--nu-paper);
            }
            .mobile-sticky-heading :is(h1, h2),
            .mobile-sticky-heading:is(h1, h2) {
                font-size: max(16px, calc(var(--mobile-heading-title-size, 24px) - var(--mobile-heading-title-reduction, 0px))) !important;
            }
            .mobile-sticky-heading .eyebrow {
                max-height: calc(12px - var(--mobile-heading-eyebrow-reduction, 0px));
                overflow: hidden;
                opacity: calc(1 - var(--mobile-heading-progress, 0));
            }
            .mobile-sticky-heading h1 {
                margin-top: calc(6px - var(--mobile-heading-gap-reduction, 0px));
            }
            .content-page > .mobile-sticky-heading {
                display: block;
                margin-right: -15px !important;
                margin-left: -15px !important;
                padding-top: 2px;
                padding-right: 15px;
                padding-left: 15px;
            }
            .content-page > .mobile-sticky-heading { --mobile-heading-title-size: clamp(26px, 2vw, 30px); }
            .manage-page > .mobile-sticky-heading,
            .clients-page > .mobile-sticky-heading,
            .history-page > .mobile-sticky-heading { --mobile-heading-title-size: clamp(32px, 2.5vw, 36px); }
            .template-page-heading, .document-heading { --mobile-heading-title-size: clamp(26px, 2vw, 30px); }
            .cloud-backup-heading, .version-history-heading { --mobile-heading-title-size: 24px; }
            .client-drilldown-heading { --mobile-heading-title-size: 20px; }
            .trash-heading { --mobile-heading-title-size: 18px; }
            .welcome-heading { --mobile-heading-title-size: clamp(43px, 12vw, 64px); }
            .mobile-sticky-heading p {
                max-height: calc(120px - var(--mobile-heading-description-reduction, 0px));
                overflow: hidden;
                opacity: calc(1 - var(--mobile-heading-progress, 0));
            }
            .history-page { height: auto !important; min-height: 100%; }
            .history-list-surface { flex: 0 0 auto !important; min-height: 0; overflow: visible !important; }
            .history-desktop-table { display: none; }
            .history-mobile-list { display: block; min-width: 0; padding: 12px; }
            .history-pagination { flex-wrap: wrap; gap: 10px; }
            .client-library-layout { grid-template-columns: minmax(0, 1fr); }
            .manage-surface { padding: 17px; }
            .manage-company-panel, .manage-terms-panel { grid-template-columns: minmax(0, 1fr); }
            .manage-company-panel > .manage-company-list { max-height: 250px; }
            .template-editor-page { padding: 8px 13px 30px; }
            .template-page-heading { flex-direction: column; }
            .template-product-layout { grid-template-columns: minmax(0, 1fr); }
            .template-library { position: static; max-height: none; }
            .template-editor-workspace { min-height: 660px; }
            .document-controls-panel .fixed { position: fixed; }
            .document-controls-panel .line-item-values { grid-template-columns: 58px minmax(70px, 1fr) minmax(75px, 1fr) 25px; }
        }

        @media print {
            body.bg-gray-100 { background: #fff !important; }
            .app-sidebar, .app-drawer-backdrop { display: none !important; }
        }