:root {
  --ink: #17202a; --muted: #637083; --line: #dbe1e7; --soft: #f3f6f8; --paper: #fff;
  --navy: #173d5f; --navy-2: #245d86; --teal: #138178; --teal-soft: #dff3ef;
  --red: #b54444; --shadow: 0 18px 50px rgba(23, 43, 64, .14); --radius: 12px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.45 "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--soft); overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-header { height: 70px; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr) minmax(220px, 1fr); align-items: center; gap: 20px; padding: 0 22px; background: var(--paper); border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; width: max-content; }
.brand strong, .brand small { display: block; }.brand strong { font-size: 18px; letter-spacing: -.02em; }.brand small { color: var(--muted); font-size: 11px; }
.brand-mark { width: 35px; height: 34px; position: relative; display: inline-block; }
.brand-mark::before, .brand-mark::after { content:""; position: absolute; background: var(--navy); }
.brand-mark::before { width: 2px; height: 12px; left: 17px; top: 10px; }.brand-mark::after { height: 2px; width: 26px; left: 5px; top: 20px; }
.brand-mark i { width: 10px; height: 10px; border: 2px solid var(--navy); border-radius: 3px; background:#fff; position:absolute; top:0; left:12px; }
.brand-mark i:nth-child(2) { top:24px; left:0; }.brand-mark i:nth-child(3) { top:24px; left:25px; }
.header-center { display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; }
.chart-name-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.chart-name-label input { display:block; width: 230px; border:0; border-bottom:1px solid transparent; padding:2px 4px; color:var(--ink); font-size:16px; font-weight:650; text-align:center; outline:none; }
.chart-name-label input:focus { border-color:var(--teal); }
.status { font-size:12px; color:var(--muted); white-space:nowrap; }.status.guest { color:#8a5a16; }.status.error { color:var(--red); }.status.saved { color:var(--teal); }
.account-actions { justify-self:end; display:flex; gap:8px; }
.guest-notice { min-height: 36px; display:flex; justify-content:center; align-items:center; gap:8px; padding:7px 20px; color:#6e4a13; background:#fff4d8; border-bottom:1px solid #ecd8a7; font-size:13px; position:relative; z-index:20; }
.text-button { border:0; padding:0; color:var(--navy-2); background:transparent; text-decoration:underline; }
.app-main { height: calc(100% - 106px); display:flex; flex-direction:column; }
.toolbar { min-height: 58px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding:9px 16px; background:#fbfcfd; border-bottom:1px solid var(--line); position:relative; z-index:15; overflow:visible; }
.tool-group { display:flex; align-items:center; gap:7px; white-space:nowrap; }.tool-group + .tool-group { padding-left:16px; border-left:1px solid var(--line); }.toolbar-end { margin-left:0; }
.button { min-height:34px; padding:7px 12px; border:1px solid #cbd4dc; border-radius:8px; color:#263746; background:#fff; font-weight:600; transition:.15s ease; }
.button:hover:not(:disabled) { border-color:#8ea1b1; transform:translateY(-1px); }.button:disabled { opacity:.45; cursor:not-allowed; }
.button.primary { color:#fff; border-color:var(--navy); background:var(--navy); }.button.primary:hover { background:#214e72; }.button.subtle { background:var(--soft); }.button.danger-quiet { color:var(--red); }.button.icon { min-width:36px; padding:5px; font-size:19px; }.button.large { padding:10px 18px; }
.view-switch .button { border-radius:0; margin-left:-1px; }.view-switch .button:first-child { border-radius:8px 0 0 8px; }.view-switch .button:last-child { border-radius:0 8px 8px 0; }.view-switch .button.active { color:#fff; background:var(--teal); border-color:var(--teal); }
.select-label { color:var(--muted); font-size:12px; }.select-label select { margin-left:5px; border:1px solid #cbd4dc; border-radius:7px; padding:6px; background:#fff; }
.workspace-panel { flex:1; min-height:0; position:relative; }.chart-viewport { width:100%; height:100%; overflow:hidden; position:relative; background-color:#eef3f5; background-image:linear-gradient(#dfe6e9 1px, transparent 1px),linear-gradient(90deg,#dfe6e9 1px,transparent 1px); background-size:24px 24px; cursor:grab; }.chart-viewport.panning { cursor:grabbing; }
.chart-world { position:absolute; left:0; top:0; width:1px; height:1px; transform-origin:0 0; }.connectors { position:absolute; left:-50000px; top:-50000px; width:100000px; height:100000px; overflow:visible; pointer-events:none; }
.org-card { width:240px; min-height:116px; position:absolute; padding:15px 16px; border:1px solid #c8d3db; border-top:4px solid var(--navy-2); border-radius:11px; background:#fff; box-shadow:0 6px 18px rgba(30,50,70,.10); cursor:grab; user-select:none; transition:box-shadow .15s,border-color .15s; }
.org-card:hover { box-shadow:0 9px 24px rgba(30,50,70,.16); }.org-card.selected { border-color:var(--teal); box-shadow:0 0 0 3px rgba(19,129,120,.24),0 10px 25px rgba(30,50,70,.15); }.org-card.dragging { cursor:grabbing; z-index:5; }
.card-name { font-size:16px; font-weight:750; line-height:1.2; margin-bottom:4px; }.card-vacant { color:#92601c; font-style:italic; }.card-title { color:var(--navy); font-weight:650; }.card-meta { margin-top:9px; color:var(--muted); font-size:12px; display:flex; flex-wrap:wrap; gap:5px 10px; }.card-unit { display:inline-flex; align-items:center; gap:6px; }.card-unit::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--teal); }
.empty-state { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); text-align:center; color:var(--muted); max-width:440px; }.empty-state h1 { margin:18px 0 6px; color:var(--ink); font-size:25px; }.empty-state p { margin:0 0 20px; }.empty-illustration { width:110px; height:75px; margin:auto; position:relative; }.empty-illustration::before,.empty-illustration::after { content:""; position:absolute; background:#9eb3c1; }.empty-illustration::before { left:54px; top:25px; width:2px; height:24px; }.empty-illustration::after { left:20px; top:48px; width:70px; height:2px; }.empty-illustration span { width:34px; height:25px; border:2px solid var(--navy-2); border-radius:6px; background:#fff; position:absolute; }.empty-illustration span:first-child { left:38px; }.empty-illustration span:nth-child(2) { left:4px; top:50px; }.empty-illustration span:nth-child(3) { left:72px; top:50px; }
.zoom-readout { position:absolute; right:16px; bottom:14px; padding:5px 9px; border-radius:7px; color:#fff; background:rgba(23,32,42,.72); font-size:12px; }
.list-panel { overflow:auto; background:#fff; padding:28px clamp(18px,4vw,64px); }.list-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:22px; }.list-heading h1 { margin:0; font-size:26px; }.list-heading p { margin:5px 0 0; color:var(--muted); }.search-label { color:var(--muted); font-size:12px; }.search-label input { display:block; width:290px; margin-top:5px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; }
.table-wrap { border:1px solid var(--line); border-radius:12px; overflow:hidden; }table { width:100%; border-collapse:collapse; }th { text-align:left; padding:10px 12px; background:var(--soft); color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }td { padding:11px 12px; border-top:1px solid var(--line); vertical-align:top; }tbody tr:hover { background:#f8fbfb; }.list-person { font-weight:700; }.list-title { color:var(--navy); }.list-empty { text-align:center; color:var(--muted); padding:40px; }
.table-wrap a { color:var(--navy-2); text-underline-offset:2px; }
.editor-panel { position:fixed; top:0; right:0; z-index:60; width:min(440px,100vw); height:100%; overflow:auto; padding:25px; background:#fff; box-shadow:-20px 0 55px rgba(22,42,60,.18); }.panel-heading,.dialog-heading.split { display:flex; justify-content:space-between; align-items:start; gap:20px; }.panel-heading { margin-bottom:20px; }.panel-heading h2,.dialog-heading h2 { margin:2px 0 0; font-size:24px; }.eyebrow { color:var(--teal); font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.1em; }
.icon-button { width:34px; height:34px; border:0; border-radius:50%; background:var(--soft); font-size:22px; color:var(--muted); }.editor-panel label,.dialog label { display:block; margin:0 0 15px; font-weight:650; }.editor-panel label > span { float:right; color:var(--muted); font-size:11px; font-weight:400; }.editor-panel input,.editor-panel select,.editor-panel textarea,.dialog input { width:100%; margin-top:6px; padding:9px 10px; border:1px solid #cbd4dc; border-radius:8px; outline:none; }.editor-panel input:focus,.editor-panel select:focus,.editor-panel textarea:focus,.dialog input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(19,129,120,.12); }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.checkbox { display:flex!important; align-items:center; gap:9px; font-weight:500!important; }.checkbox input { width:auto!important; margin:0!important; }.panel-actions,.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:22px; }.form-error { min-height:20px; color:var(--red); font-size:13px; }
.dialog { width:min(520px,calc(100vw - 30px)); padding:26px; border:0; border-radius:16px; box-shadow:var(--shadow); }.dialog.wide { width:min(760px,calc(100vw - 30px)); }.dialog::backdrop { background:rgba(17,29,40,.55); backdrop-filter:blur(2px); }.dialog-heading { margin-bottom:20px; }.dialog-heading p { color:var(--muted); margin:6px 0 0; }.import-options,.export-grid { display:grid; gap:10px; }.export-grid { grid-template-columns:1fr 1fr; }.choice-button { display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:14px; text-align:left; border:1px solid var(--line); border-radius:10px; background:#fff; }.choice-button:hover { border-color:var(--teal); background:#f6fbfa; }.choice-button span { color:var(--muted); font-size:12px; }.export-privacy { padding:10px 12px; background:var(--soft); border-radius:8px; }
.library-contents { min-height:140px; }.library-group + .library-group { margin-top:22px; }.library-group h3 { margin:0 0 9px; }.library-chart { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:12px 4px; border-top:1px solid var(--line); }.library-chart p { margin:2px 0 0; color:var(--muted); font-size:12px; }.library-empty { color:var(--muted); text-align:center; padding:45px; }.toast { position:fixed; z-index:100; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:10px 16px; border-radius:9px; color:#fff; background:#1f2b35; box-shadow:var(--shadow); transition:.2s; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width: 1100px) { .toolbar { gap:7px 10px; }.tool-group + .tool-group { padding-left:8px; }.workspace-panel { min-height:0; } }
@media (max-width: 900px) { .app-header { grid-template-columns:1fr auto; }.header-center { display:none; }.list-heading { align-items:stretch; flex-direction:column; }.search-label input { width:100%; }.field-grid { grid-template-columns:1fr; } }
@media print { body { overflow:visible; background:#fff; }.app-header,.guest-notice,.toolbar,.zoom-readout,.editor-panel { display:none!important; }.app-main { height:auto; }.workspace-panel[hidden] { display:none!important; }.chart-viewport { height:auto; min-height:95vh; background:#fff; overflow:visible; }.list-panel { padding:0; overflow:visible; }.table-wrap { border:0; }.org-card { box-shadow:none; } }