/* =========================================================== KLYO — design tokens A control-room aesthetic: contacts behave like signals you read, track, and transmit to. Every theme below redefines its own background, surface, border, and text colors — not just the accent gradient — so picking a theme genuinely changes the canvas, not just the buttons. Status colors (lead/negotiating/ customer/lost) stay constant across all themes on purpose: that's meaning, not decoration, and it shouldn't shift under you. =========================================================== */ :root { /* default theme: "signal" — deep navy canvas, cyan → violet accent */ --bg: #0a0e1a; --bg-glow: #122038; --bg-soft: #0d1322; --surface: #121a2c; --surface-2: #16203650; --border: #232f4d; --border-soft: #1a2540; --text: #e7ebf7; --text-dim: #8b93ab; --text-faint: #5b6584; --accent-1: #4fd8ff; --accent-2: #8b6bff; --signal: linear-gradient(135deg, var(--accent-1), var(--accent-2)); --lead: #6f8bff; --contacted: var(--accent-1); --negotiating: #f6b94d; --customer: #3ee6a8; --lost: #ff6b7a; --danger: #ff6b7a; --radius: 14px; --radius-sm: 9px; --font-display: "Space Grotesk", "Inter", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } /* ---------- theme presets ---------- Swapped in by setting data-theme on . Each one is a full palette — background, surface, border, text, and accent — so the whole canvas shifts, not just button colors. Status colors are deliberately left out of every block below; they never change. */ [data-theme="ember"] { --bg: #170f0c; --bg-glow: #2a1810; --bg-soft: #1c1310; --surface: #261a15; --surface-2: #2e1f1850; --border: #3d2a1f; --border-soft: #2c1f17; --text: #f5ebe2; --text-dim: #b89a85; --text-faint: #7a5f4d; --accent-1: #ff9d5c; --accent-2: #ff5c7a; } [data-theme="meadow"] { --bg: #0a140f; --bg-glow: #0f2418; --bg-soft: #0d1813; --surface: #13241c; --surface-2: #1a2e2350; --border: #25402f; --border-soft: #1c3024; --text: #e7f5ec; --text-dim: #8fb0a0; --text-faint: #5c7c6c; --accent-1: #4ce6a8; --accent-2: #a8e64c; } [data-theme="nebula"] { --bg: #110a1a; --bg-glow: #1f1430; --bg-soft: #150d1f; --surface: #20132c; --surface-2: #2a1a3850; --border: #3a2750; --border-soft: #2a1d3d; --text: #f0e7f5; --text-dim: #a896b8; --text-faint: #6e5c80; --accent-1: #d65cff; --accent-2: #5c7aff; } [data-theme="arctic"] { --bg: #08131a; --bg-glow: #0f2430; --bg-soft: #0b1820; --surface: #11232c; --surface-2: #182d3850; --border: #234050; --border-soft: #1a303c; --text: #e7f3f7; --text-dim: #87aab8; --text-faint: #557684; --accent-1: #8fe8ff; --accent-2: #c9d8ff; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: radial-gradient(circle at 12% 0%, var(--bg-glow) 0%, var(--bg) 45%) fixed; color: var(--text); font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } /* subtle fixed dot-grid so the canvas never feels flat */ body::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; z-index: 0; } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; } p { margin: 0; } a { color: var(--accent-1); text-decoration: none; } ::selection { background: color-mix(in srgb, var(--accent-1) 20%, transparent); } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 13%, transparent); } :focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; } ::-webkit-scrollbar-track { background: transparent; } .hidden { display: none !important; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 10px 16px; font-size: 13.5px; font-weight: 500; transition: border-color .15s ease, transform .1s ease, background .15s ease; } .btn:hover { border-color: #3a4a72; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--signal); color: #061018; border: none; font-weight: 600; } .btn-primary:hover { filter: brightness(1.07); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); } .btn-ghost:hover { color: var(--text); background: var(--surface); } .btn-danger { color: var(--danger); } .btn-danger:hover { border-color: var(--danger); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn-sm { padding: 7px 12px; font-size: 12.5px; } .btn-icon { padding: 9px; } /* ---------- layout shell ---------- */ .shell { position: relative; z-index: 1; display: flex; min-height: 100vh; } .sidebar { width: 230px; flex-shrink: 0; background: var(--bg-soft); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; padding: 22px 16px; } .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 26px; } .brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--signal); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 18px color-mix(in srgb, var(--accent-1) 20%, transparent); } .brand-mark svg { width: 16px; height: 16px; } .brand-name { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; } .brand-name span { color: var(--accent-1); } .nav { display: flex; flex-direction: column; gap: 3px; flex: 1; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 13.5px; font-weight: 500; border: 1px solid transparent; transition: all .15s ease; } .nav-item svg { width: 17px; height: 17px; flex-shrink: 0; } .nav-item:hover { background: var(--surface); color: var(--text); } .nav-item.active { background: var(--surface); color: var(--text); border-color: var(--border); } .nav-item.active::before { content: ""; } .sidebar-foot { border-top: 1px solid var(--border-soft); padding-top: 14px; margin-top: 10px; } .user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 8px; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--accent-1); font-family: var(--font-display); } .user-meta { overflow: hidden; } .user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { font-size: 11px; color: var(--text-faint); text-transform: capitalize; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; background: rgba(10,14,26,0.75); backdrop-filter: blur(10px); z-index: 5; } .topbar h1 { font-size: 19px; } .topbar-sub { color: var(--text-faint); font-size: 12.5px; margin-top: 2px; } .search-box { position: relative; width: 280px; } .search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-faint); } .search-box input { width: 100%; padding: 9px 12px 9px 34px; font-size: 13px; } .content { padding: 26px 28px 60px; } /* ---------- stat cards (with sparkline signature) ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .stat-card { background: linear-gradient(160deg, var(--surface), var(--bg-soft)); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 18px 18px 14px; position: relative; overflow: hidden; } .stat-card .label { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; } .stat-card .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-1); box-shadow: 0 0 8px var(--accent-1); } .stat-card .value { font-family: var(--font-display); font-size: 30px; font-weight: 600; margin-top: 8px; } .stat-card svg.spark { position: absolute; bottom: 8px; right: 10px; opacity: .55; } /* ---------- filter bar ---------- */ .filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; } .filter-bar select { padding: 9px 10px; font-size: 13px; } .filter-bar .spacer { flex: 1; } /* ---------- table ---------- */ .table-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; } table { width: 100%; border-collapse: collapse; } thead th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 600; padding: 13px 16px; border-bottom: 1px solid var(--border-soft); } tbody tr { border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background .12s ease; } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: #ffffff06; } tbody td { padding: 13px 16px; vertical-align: middle; font-size: 13.5px; } td.name-cell { position: relative; padding-left: 20px; font-weight: 600; } td.name-cell::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--stage-color, var(--lead)); } .mono { font-family: var(--font-mono); color: var(--text-dim); font-size: 12.5px; } .muted { color: var(--text-faint); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--border-soft); text-transform: capitalize; } .badge .ping { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.lead { color: var(--lead); background: #6f8bff14; } .badge.contacted { color: var(--contacted); background: color-mix(in srgb, var(--accent-1) 8%, transparent); } .badge.negotiating { color: var(--negotiating); background: #f6b94d14; } .badge.negotiating .ping { animation: ping 1.6s ease-in-out infinite; } .badge.customer { color: var(--customer); background: #3ee6a814; } .badge.lost { color: var(--lost); background: #ff6b7a14; } @keyframes ping { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 70% { box-shadow: 0 0 0 5px transparent; opacity: .5; } } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 20px; text-align: center; color: var(--text-dim); gap: 14px; } .empty-state svg { width: 40px; height: 40px; color: var(--text-faint); } .empty-state h3 { font-size: 15.5px; color: var(--text); } .empty-state p { font-size: 13px; max-width: 320px; } /* ---------- modal / panel scaffolding ---------- */ .overlay { position: fixed; inset: 0; background: #05070ecc; backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 50; animation: fadeIn .15s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { width: 460px; max-width: 92vw; max-height: 86vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; animation: riseIn .18s ease; } @keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .modal-head h2 { font-size: 17px; } .modal-close { background: none; border: none; color: var(--text-faint); padding: 4px; border-radius: 6px; } .modal-close:hover { color: var(--text); background: var(--bg-soft); } .field { margin-bottom: 14px; } .field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; font-weight: 500; } .field input, .field select, .field textarea { width: 100%; padding: 10px 12px; font-size: 13.5px; } .field textarea { resize: vertical; min-height: 70px; font-family: var(--font-body); } .field-row { display: flex; gap: 12px; } .field-row .field { flex: 1; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } .form-error { color: var(--danger); font-size: 12.5px; margin-top: -4px; margin-bottom: 12px; min-height: 16px; } /* ---------- contact slide-over panel ---------- */ .panel-overlay { position: fixed; inset: 0; background: #05070ecc; z-index: 50; display: flex; justify-content: flex-end; animation: fadeIn .15s ease; } .panel { width: 480px; max-width: 92vw; height: 100%; background: var(--surface); border-left: 1px solid var(--border); padding: 24px; overflow-y: auto; animation: slideIn .2s ease; } @keyframes slideIn { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .panel-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; } .panel-title { font-size: 19px; } .panel-sub { color: var(--text-faint); font-size: 12.5px; margin-top: 4px; } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; } .detail-item { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; } .detail-item .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: 4px; } .detail-item .v { font-size: 13px; } .section-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; } .section-title::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); } .notes-box { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px; font-size: 13px; color: var(--text-dim); white-space: pre-wrap; } .timeline { display: flex; flex-direction: column; gap: 14px; } .timeline-item { display: flex; gap: 10px; } .timeline-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-1); margin-top: 6px; flex-shrink: 0; box-shadow: 0 0 6px var(--accent-1); } .timeline-body p { font-size: 13px; } .timeline-body time { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); } /* ---------- AI composer (the signature moment) ---------- */ .composer { background: linear-gradient(160deg, #121a2c, #0d1322); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .composer-label { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; } .composer-label svg { width: 13px; height: 13px; color: var(--accent-2); } .scan-btn { position: relative; overflow: hidden; width: 100%; background: var(--signal); color: #061018; border: none; border-radius: var(--radius-sm); padding: 11px; font-weight: 600; font-size: 13.5px; } .scan-btn.loading::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, #ffffff66, transparent); animation: scan 1.1s linear infinite; } @keyframes scan { from { left: -40%; } to { left: 100%; } } .draft-box { margin-top: 14px; display: none; } .draft-box.show { display: block; } .draft-box .field input, .draft-box .field textarea { background: var(--bg); } .draft-box textarea { min-height: 150px; } .toast-wrap { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 100; } .toast { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13px; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px #00000055; animation: riseIn .18s ease; min-width: 220px; } .toast.success { border-left: 3px solid var(--customer); } .toast.error { border-left: 3px solid var(--danger); } /* ---------- auth pages ---------- */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; padding: 20px; } .auth-card { width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; } .auth-card .brand { padding: 0 0 22px; justify-content: center; } .auth-card h1 { font-size: 18px; text-align: center; margin-bottom: 4px; } .auth-card .sub { text-align: center; color: var(--text-faint); font-size: 12.5px; margin-bottom: 22px; } .auth-switch { text-align: center; font-size: 13px; color: var(--text-dim); margin-top: 16px; } @media (max-width: 980px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .sidebar { display: none; } .topbar { padding: 16px; } .content { padding: 18px; } .panel { width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition: none !important; } } /* ---------- theme picker ---------- */ .theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 6px; } .theme-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; padding: 4px; border-radius: var(--radius-sm); } .theme-swatch .puck { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; transition: border-color .15s ease, transform .1s ease; } .theme-swatch.active .puck { border-color: var(--text); } .theme-swatch:hover .puck { transform: scale(1.06); } .theme-swatch span { font-size: 10.5px; color: var(--text-dim); } .theme-swatch[data-theme-key="signal"] .puck { background: linear-gradient(135deg, #4fd8ff, #8b6bff); box-shadow: 0 0 0 3px #0a0e1a; } .theme-swatch[data-theme-key="ember"] .puck { background: linear-gradient(135deg, #ff9d5c, #ff5c7a); box-shadow: 0 0 0 3px #170f0c; } .theme-swatch[data-theme-key="meadow"] .puck { background: linear-gradient(135deg, #4ce6a8, #a8e64c); box-shadow: 0 0 0 3px #0a140f; } .theme-swatch[data-theme-key="nebula"] .puck { background: linear-gradient(135deg, #d65cff, #5c7aff); box-shadow: 0 0 0 3px #110a1a; } .theme-swatch[data-theme-key="arctic"] .puck { background: linear-gradient(135deg, #8fe8ff, #c9d8ff); box-shadow: 0 0 0 3px #08131a; } /* ---------- onboarding tour ---------- */ #tourOverlay { background: transparent; backdrop-filter: none; } .tour-modal { width: 340px; z-index: 61; transition: top .2s ease, left .2s ease; } .tour-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--signal); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .tour-icon svg { width: 17px; height: 17px; color: #061018; } .tour-step-title { font-size: 15.5px; } /* the glowing "hole" a spotlighted element sits in during the tour */ .tour-spotlight { position: relative !important; z-index: 60 !important; pointer-events: none !important; box-shadow: 0 0 0 9999px rgba(5, 7, 14, 0.74), 0 0 0 3px var(--accent-1); transition: box-shadow .25s ease; } .tour-step-title { font-size: 17px; margin-bottom: 8px; } .tour-step-body { font-size: 13.5px; color: var(--text-dim); line-height: 1.6; } .tour-dots { display: flex; gap: 6px; margin: 22px 0 0; } .tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background .15s ease, width .15s ease; } .tour-dot.active { background: var(--accent-1); width: 18px; border-radius: 3px; } .tour-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; } /* ---------- help re-launch button ---------- */ .help-fab { position: fixed; bottom: 22px; left: 246px; z-index: 40; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; } .help-fab:hover { color: var(--text); border-color: var(--accent-1); } /* ---------- pricing modal ---------- */ .pricing-modal { width: 880px; max-width: 94vw; } .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; } .tier-card { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; } .tier-card.current { border-color: var(--accent-1); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-1) 30%, transparent); } .tier-card h3 { font-size: 15.5px; } .tier-card .tier-price { font-family: var(--font-display); font-size: 24px; font-weight: 600; } .tier-card .tier-price span { font-size: 12px; color: var(--text-faint); font-weight: 400; font-family: var(--font-body); } .tier-card .tier-tagline { font-size: 12px; color: var(--text-faint); min-height: 32px; } .tier-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; } .tier-card li { font-size: 12.5px; color: var(--text-dim); display: flex; gap: 7px; align-items: flex-start; } .tier-card li svg { width: 13px; height: 13px; color: var(--customer); margin-top: 2px; flex-shrink: 0; } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .pricing-grid { grid-template-columns: 1fr; } .help-fab { left: 16px; } } /* ---------- companies / quotes shared bits ---------- */ .company-link { color: var(--accent-1); cursor: pointer; } .company-link:hover { text-decoration: underline; } /* ---------- quote builder ---------- */ .quote-modal { width: 720px; max-width: 95vw; } .recipient-checklist { display: flex; flex-direction: column; gap: 6px; max-height: 140px; overflow-y: auto; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; } .recipient-option { display: flex; align-items: center; gap: 8px; font-size: 13px; } .recipient-option .badge { transform: scale(0.85); } .quote-items { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; } .quote-line-row { display: grid; grid-template-columns: 16px 1.3fr 1.6fr 60px 90px 70px 90px 28px; gap: 8px; align-items: center; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px; } .quote-line-row.dragging { opacity: 0.4; } .quote-line-row .drag-handle { cursor: grab; color: var(--text-faint); text-align: center; font-size: 14px; user-select: none; } .quote-line-row select, .quote-line-row input { padding: 7px 8px; font-size: 12.5px; width: 100%; } .quote-line-row .line-total-display { font-family: var(--font-mono); font-size: 12.5px; text-align: right; color: var(--text); white-space: nowrap; } .quote-line-row .line-remove-btn { background: none; border: none; color: var(--text-faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 4px; } .quote-line-row .line-remove-btn:hover { color: var(--danger); } .quote-line-headers { display: grid; grid-template-columns: 16px 1.3fr 1.6fr 60px 90px 70px 90px 28px; gap: 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); padding: 0 8px; } .quote-totals { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; margin: 14px 0; padding-top: 14px; border-top: 1px solid var(--border-soft); } .quote-totals > div { display: flex; gap: 18px; font-size: 13px; color: var(--text-dim); min-width: 200px; justify-content: space-between; } .quote-totals .quote-total-final { font-size: 16px; font-weight: 600; color: var(--text); font-family: var(--font-display); } .quote-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; text-transform: capitalize; } .quote-status-badge.draft { color: var(--text-dim); background: var(--surface-2); } .quote-status-badge.sent { color: var(--accent-1); background: color-mix(in srgb, var(--accent-1) 10%, transparent); } .quote-status-badge.accepted { color: var(--customer); background: color-mix(in srgb, var(--customer) 10%, transparent); } .quote-status-badge.declined { color: var(--lost); background: color-mix(in srgb, var(--lost) 10%, transparent); } /* ---------- products / catalog manager ---------- */ .product-row { display: grid; grid-template-columns: 1.4fr 80px 90px 100px 28px; gap: 8px; align-items: center; padding: 8px; border-bottom: 1px solid var(--border-soft); } .product-row input, .product-row select { padding: 6px 8px; font-size: 12.5px; width: 100%; } /* ---------- performance table ---------- */ #performanceBody td { text-align: center; } #performanceBody td:first-child { text-align: left; font-weight: 600; } /* ---------- activity log quick-add ---------- */ .activity-log-form { display: flex; gap: 8px; margin-bottom: 14px; } .activity-log-form select { flex: 0 0 120px; } .activity-log-form input { flex: 1; } @media (max-width: 760px) { .quote-line-row, .quote-line-headers { grid-template-columns: 1fr; } .quote-line-row .drag-handle { display: none; } }