:root { --ink:#18212a; --muted:#657280; --line:#e4e8ec; --canvas:#f7f8f7; --panel:#fff; --navy:#14293b; --green:#73e0b8; --violet:#6959d7; --amber:#e9a647; --teal:#31acac; --danger:#c95555; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:var(--canvas); } button, input, textarea, select { font:inherit; } button { cursor:pointer; } button:disabled { cursor:wait; opacity:.68; }
.login-body { display:grid; place-items:center; padding:28px; background:radial-gradient(circle at 13% 15%, #e5f7ee 0, transparent 28rem), radial-gradient(circle at 86% 86%, #e8e6fb 0, transparent 28rem), #f7f8f7; }
.login-card { width:min(100%, 450px); background:rgba(255,255,255,.94); border:1px solid #e8ecea; border-radius:28px; padding:42px; box-shadow:0 24px 80px rgba(27,48,65,.12); }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--navy); color:var(--green); font-weight:800; letter-spacing:-.06em; }
.login-card .brand-mark { width:46px; height:46px; border-radius:15px; font-size:1.2rem; margin-bottom:28px; }.eyebrow { margin:0 0 8px; color:#71808e; font-size:.69rem; font-weight:800; letter-spacing:.13em; }.login-card h1 { margin:0; font-size:2.1rem; letter-spacing:-.06em; line-height:1.04; }.login-copy { color:var(--muted); line-height:1.55; margin:16px 0 28px; }
.login-form, .dialog form { display:grid; gap:16px; }.login-form label, .dialog label { display:grid; gap:7px; font-size:.82rem; font-weight:700; color:#445360; } input, textarea, select { width:100%; border:1px solid #dbe1e5; border-radius:10px; background:#fff; color:var(--ink); padding:11px 12px; outline:none; transition:border .15s, box-shadow .15s; } textarea { min-height:110px; resize:vertical; line-height:1.45; } input:focus, textarea:focus, select:focus { border-color:#7594aa; box-shadow:0 0 0 3px #dbe9f1; }.form-message { min-height:1.15em; color:#ad4a4a; font-size:.82rem; margin:0; }.button { border:0; border-radius:10px; padding:10px 14px; font-weight:750; font-size:.88rem; transition:transform .15s, filter .15s; }.button:hover { filter:brightness(.97); }.button:active { transform:translateY(1px); }.button-primary { background:var(--navy); color:white; }.button-wide { width:100%; padding:13px; }.button-quiet { color:var(--navy); background:#edf1f3; }.button-danger { color:#9d3838; background:#ffeded; }.text-button { border:0; background:transparent; color:#425b71; font-weight:750; padding:5px 0; }.icon-button { border:0; background:transparent; color:#73808b; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; font-size:1.25rem; }.icon-button:hover { background:#eef1f3; color:var(--navy); }
.app-shell { min-height:100vh; display:grid; grid-template-columns:252px minmax(0,1fr); }.sidebar { background:var(--navy); color:#dce6ea; padding:22px 14px; display:flex; flex-direction:column; height:100vh; min-height:0; position:sticky; top:0; align-self:start; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }.sidebar-brand { display:flex; align-items:center; gap:10px; padding:0 8px 27px; font-weight:800; letter-spacing:-.03em; }.sidebar .brand-mark { background:#2a455c; }.nav-item, .project-nav { width:100%; min-width:0; display:flex; align-items:center; gap:10px; border:0; border-radius:9px; color:#b8c7d1; padding:10px 9px; background:transparent; text-align:left; font-size:.86rem; }.nav-item:hover, .project-nav:hover { background:#20394d; }.nav-item.active, .project-nav.active { color:white; background:#29455c; }.sidebar-heading { display:flex; align-items:center; justify-content:space-between; color:#8fa3b2; font-size:.66rem; font-weight:800; letter-spacing:.12em; margin:28px 8px 8px; }.sidebar-heading .icon-button { color:#b7c9d4; }.project-list { display:grid; gap:3px; min-width:0; }.project-nav-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }.project-count { flex:0 0 auto; color:#9cb1c0; font-size:.73rem; }.project-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:#7f92a0; }.project-dot.active { background:var(--green); }.project-dot.on_hold { background:var(--amber); }.project-dot.complete { background:#99a8b2; }.sidebar-empty { padding:0 9px; color:#8fa3b2; font-size:.78rem; line-height:1.45; }.sidebar-footer { margin-top:auto; padding:14px 8px 2px; font-size:.75rem; color:#9db0be; display:flex; gap:8px; align-items:center; }.status-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(115,224,184,.13); }
.main-content { padding:32px 40px 58px; max-width:1600px; width:100%; margin:0 auto; }.topbar, .workspace-head { display:flex; align-items:center; justify-content:space-between; gap:22px; }.topbar h1 { margin:0; font-size:clamp(1.7rem, 3vw, 2.35rem); letter-spacing:-.055em; line-height:1.05; }.topbar-actions { display:flex; align-items:center; gap:9px; }.avatar { display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; background:#e5ebef; color:#31495c; font-weight:800; }.metrics { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin:32px 0 38px; }.metric { border:1px solid var(--line); background:var(--panel); padding:19px; border-radius:15px; min-height:130px; display:flex; flex-direction:column; }.metric-label { color:var(--muted); font-size:.79rem; font-weight:700; }.metric strong { font-size:2rem; margin-top:11px; letter-spacing:-.06em; }.metric-detail { color:#91a0aa; font-size:.73rem; margin-top:auto; }.workspace-head { margin-bottom:16px; }.workspace-head h2 { font-size:1.1rem; letter-spacing:-.035em; margin:0 0 5px; }.workspace-head p { margin:0; color:var(--muted); font-size:.86rem; }.board { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:start; }.lane { border:1px solid var(--line); background:#fbfcfc; border-radius:16px; overflow:hidden; min-height:315px; }.lane-head { display:flex; justify-content:space-between; align-items:center; padding:14px 15px; border-bottom:1px solid #edf0f1; }.lane-head > div { display:flex; align-items:center; gap:7px; }.lane-head h2 { font-size:.9rem; margin:0; letter-spacing:-.02em; }.lane-icon { width:22px; height:22px; display:grid; place-items:center; border-radius:7px; font-size:.85rem; }.lane-violet .lane-icon { color:var(--violet); background:#eeebff; }.lane-amber .lane-icon { color:#a86b10; background:#fff3dc; }.lane-teal .lane-icon { color:#167879; background:#def5f3; }.lane-total { color:#98a6af; font-size:.75rem; }.lane-add { border:0; background:#eef2f4; color:#526675; border-radius:7px; width:25px; height:25px; font-size:1.1rem; }.lane-stack { padding:10px; display:grid; gap:9px; }.record-card { background:white; border:1px solid #e7ecee; border-radius:11px; padding:13px; box-shadow:0 2px 4px rgba(20,41,59,.025); }.record-card:hover { border-color:#ccd9df; }.record-meta { display:flex; justify-content:space-between; gap:8px; color:#8b99a4; font-size:.69rem; margin-bottom:8px; }.record-project { color:#5a7182; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.record-card h3 { margin:0; font-size:.88rem; letter-spacing:-.02em; line-height:1.28; }.record-card p { color:#64727d; font-size:.77rem; line-height:1.45; margin:8px 0 0; white-space:pre-wrap; }.record-actions { display:flex; gap:12px; margin-top:12px; }.record-action { padding:0; border:0; background:transparent; color:#718697; font-size:.72rem; font-weight:750; }.record-action:hover { color:var(--navy); }.lane-empty { padding:18px 8px; color:#86949e; font-size:.79rem; line-height:1.5; }.lane-empty p { margin:0 0 8px; }.connections-section { margin-top:38px; }.connection-list { display:grid; gap:8px; }.connection, .connections-empty { border:1px solid var(--line); background:var(--panel); border-radius:12px; padding:14px 16px; }.connection { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto; align-items:center; gap:16px; }.connection > div { min-width:0; display:grid; gap:3px; }.connection strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.84rem; }.connection-label { color:#7e8d98; font-size:.68rem; }.connection-arrow { color:#567086; font-size:.76rem; font-weight:750; white-space:nowrap; }.connection-remove { margin-left:auto; }.connections-empty { color:#778691; font-size:.83rem; line-height:1.5; }
.dialog { border:0; border-radius:18px; padding:0; width:min(540px, calc(100vw - 28px)); box-shadow:0 24px 80px rgba(20,41,59,.25); }.dialog::backdrop { background:rgba(17,31,43,.48); backdrop-filter:blur(3px); }.dialog form { padding:24px; }.dialog-title { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }.dialog-title h2 { margin:0; font-size:1.25rem; letter-spacing:-.04em; }.dialog-actions { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:8px; margin-top:6px; }.hidden { display:none!important; }.toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%, 18px); background:var(--navy); color:white; padding:11px 15px; border-radius:10px; font-size:.82rem; box-shadow:0 12px 28px rgba(20,41,59,.22); opacity:0; pointer-events:none; transition:.22s; }.toast.show { opacity:1; transform:translate(-50%, 0); }
@media (max-width:980px) { .app-shell { grid-template-columns:205px minmax(0,1fr); }.main-content { padding:28px 24px 48px; }.board { grid-template-columns:1fr; }.lane { min-height:0; }.metrics { margin-bottom:28px; } }
@media (max-width:720px) { .app-shell { display:block; }.sidebar { height:auto; min-height:auto; position:static; overflow:visible; padding:14px; }.sidebar-brand { padding:0 6px 12px; }.sidebar-heading, .project-list, .sidebar-footer { display:none; }.nav-item { width:auto; }.main-content { padding:24px 16px 40px; }.topbar, .workspace-head { align-items:flex-start; }.topbar { flex-direction:column; }.topbar-actions { width:100%; flex-wrap:wrap; }.metrics { grid-template-columns:1fr; gap:9px; margin:22px 0 28px; }.metric { min-height:104px; }.connection { grid-template-columns:1fr; gap:7px; }.connection-arrow { padding-left:4px; }.connection-remove { position:absolute; right:19px; }.connection { position:relative; }.button-quiet { display:none; } }

.workspace-actions { display:flex; align-items:center; gap:16px; }
.workspace-empty { grid-column:1 / -1; min-height:280px; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; border:1px dashed #b6c7d0; border-radius:16px; padding:30px; background:linear-gradient(135deg,#f8fbfb,#eef5f4); }
.workspace-empty h2 { margin:12px 0 7px; font-size:1.35rem; letter-spacing:-.045em; }
.workspace-empty p { max-width:560px; margin:0; color:#61727d; line-height:1.55; }
.workspace-step { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--navy); color:var(--green); font-weight:800; font-size:.8rem; }
.lane-empty-add { width:100%; }
.form-hint { margin:0; color:#657683; font-size:.78rem; line-height:1.45; }
@media (max-width:720px) { .workspace-actions { gap:12px; }.workspace-empty { min-height:230px; padding:22px; align-items:flex-start; flex-direction:column; }.lane-empty-add { display:block; } }

.nav-link { text-decoration:none; }
.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.people-tools { display:grid; grid-template-columns:minmax(260px, 1fr) minmax(150px, .34fr) minmax(160px, .34fr); gap:10px; align-items:end; margin:0 0 10px; }.people-tools label { display:grid; gap:6px; color:#657681; font-size:.72rem; font-weight:800; letter-spacing:.035em; }.people-tools input, .people-tools select { padding:10px 11px; }.people-result-count { margin:0 0 11px; color:#7c8b95; font-size:.78rem; }.people-directory { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel); }.people-table-wrap { overflow-x:auto; }.people-table { width:100%; border-collapse:collapse; text-align:left; min-width:890px; }.people-table th { padding:12px 15px; color:#71818c; background:#f7f9f9; border-bottom:1px solid var(--line); font-size:.69rem; font-weight:800; letter-spacing:.075em; text-transform:uppercase; }.people-table td { padding:14px 15px; border-bottom:1px solid #e9eeef; color:#53636f; font-size:.79rem; line-height:1.4; vertical-align:top; }.people-table tbody tr:last-child td { border-bottom:0; }.people-table tbody tr:hover { background:#fbfdfd; }.person-name { display:block; color:var(--ink); font-size:.88rem; }.person-list-note { display:block; max-width:230px; color:#7a8993; font-size:.74rem; line-height:1.4; margin-top:4px; }.person-contacts { display:grid; gap:5px; min-width:180px; }.person-contact { display:block; white-space:nowrap; }.person-date { white-space:nowrap; }.person-connection-list { min-width:185px; }.person-connection-list ul { display:grid; gap:5px; list-style:none; padding:0; margin:0 0 7px; }.person-connection-list li { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:0; }.person-connection-list li span { display:grid; gap:1px; min-width:0; }.person-connection-list li strong { color:#4c6170; font-size:.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.person-connection-list li small { color:#81909a; font-size:.68rem; }.person-connection-list .icon-button { flex:0 0 auto; width:23px; height:23px; font-size:1rem; }.person-connect-button { font-size:.73rem; }.people-no-results { display:grid; gap:7px; padding:34px 24px; justify-items:start; }.people-no-results h2 { margin:0; font-size:1rem; }.people-no-results p { margin:0; color:#71818b; font-size:.82rem; }.people-no-results .button { display:block; margin-top:5px; }
.person-status { border-radius:999px; background:#edf2f4; color:#506775; padding:5px 8px; font-size:.68rem; font-weight:750; white-space:nowrap; }
.person-muted { color:#8a98a1; }.people-empty { margin:0; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0; }
@media (max-width:720px) { .form-grid { grid-template-columns:1fr; }.people-tools { grid-template-columns:1fr; }.people-directory { border-radius:12px; } }

.contact-editor { display:grid; gap:10px; }.contact-editor > div:first-child { display:grid; gap:3px; }.contact-editor strong { font-size:.82rem; color:#445360; }.contact-editor span { color:#7c8a94; font-size:.75rem; }.contact-inputs { display:grid; gap:8px; }.contact-input-row { display:grid; grid-template-columns:104px minmax(100px,.7fr) minmax(0,1.25fr) auto; gap:7px; align-items:center; }.contact-input-row input, .contact-input-row select { padding:9px 10px; }.contact-actions { display:flex; gap:8px; }.contact-actions .button { padding:8px 10px; font-size:.78rem; }.contact-kind { display:inline-block; min-width:54px; color:#81909a; font-size:.7rem; font-weight:750; text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:720px) { .contact-input-row { grid-template-columns:1fr 1fr auto; }.contact-value-input { grid-column:1 / 3; }.contact-actions { flex-wrap:wrap; } }

.person-contact { display:flex; align-items:center; gap:5px; }.country-flag { font-size:1rem; line-height:1; }

.address-editor { display:grid; gap:10px; }.address-editor > div:first-child { display:grid; gap:3px; }.address-editor strong { font-size:.82rem; color:#445360; }.address-editor span { color:#7c8a94; font-size:.75rem; }.person-address { display:grid; gap:2px; min-width:180px; }.people-table { min-width:1040px; }

.person-notes-editor { display:grid; gap:10px; }.person-notes-editor > div:first-child { display:grid; gap:3px; }.person-notes-editor strong { font-size:.82rem; color:#445360; }.person-notes-editor span { color:#7c8a94; font-size:.75rem; }.person-note-inputs { display:grid; gap:9px; }.person-note-input { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; padding:10px; border:1px solid #e2e8ea; border-radius:10px; background:#fbfcfc; }.person-note-input > div { display:grid; gap:7px; }.person-note-input textarea { min-height:82px; }.note-actions { display:flex; gap:8px; }.note-actions .button { padding:8px 10px; font-size:.78rem; }.person-note-summary { display:grid; gap:3px; max-width:220px; }.person-note-summary strong { color:#4c6170; font-size:.76rem; }.person-note-summary span { color:#7a8993; font-size:.74rem; line-height:1.4; }.people-table { min-width:1210px; }
@media (max-width:720px) { .contact-actions .button-quiet, .note-actions .button-quiet { display:block; } }