:root{color-scheme:light;--red:#e60025;--ink:#1f252d;--muted:#66717d;--line:#e5e8ed;--card:#fff;--panel:#f8f9fb}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#f2f4f7}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:2px}
header{height:70px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:12px;position:relative;z-index:4}
.brand{display:flex;align-items:center;gap:13px;white-space:nowrap}
.brandmark{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.brandmark strong{font-size:24px;color:#df0024;font-weight:800;letter-spacing:.035em;line-height:1}
.brandmark span{color:#343a40;font-size:10px;letter-spacing:.17em;padding-left:4px}
.brand-divider{width:1px;height:30px;background:#e6e8ec;margin:0 2px}
.brandtitle{font-size:14px;font-weight:650;color:#4f5864}
.toptools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.btn{background:white;border:1px solid #d9dfe6;border-radius:8px;min-height:36px;padding:7px 12px;color:#343a44;font-size:13px;font-weight:650;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{border-color:#dd2944;background:#fff5f6}
.btn.primary{background:var(--red);border-color:var(--red);color:white}
.btn.primary:hover{background:#bd0020}
.btn.muted{background:#f7f8fa}
.btn.danger{color:#b82336}
.btn.iconic{min-width:36px;padding:7px 10px;font-size:20px;line-height:1}
button:disabled{opacity:.42;cursor:not-allowed}
.zoom-number{min-width:55px;font-variant-numeric:tabular-nums;color:#596270;font-size:13px;text-align:center;font-weight:650}
.app{height:calc(100% - 70px);display:flex;min-height:0}
aside{width:355px;flex-shrink:0;background:white;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;position:relative;z-index:3}
.aside-scroll{overflow:auto;padding:18px;min-height:0;flex:1;scrollbar-color:#c7cdd5 transparent;scrollbar-width:thin}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.section-head h2{font-size:12px;letter-spacing:.10em;text-transform:uppercase;color:#6d7481;margin:0;font-weight:800}
.small-counter{background:#f2f3f5;color:#75808c;border-radius:20px;padding:3px 7px;font-size:11px}
.search{margin:14px 0 10px;width:100%;border:1px solid #e0e3e9;background:#fafbfc;border-radius:9px;padding:12px 12px;font-size:14px}
.search:focus{background:white}
.departments{display:flex;flex-direction:column;gap:3px;max-height:270px;overflow:auto;margin-bottom:21px}
.department{border:0;background:transparent;width:100%;display:flex;align-items:center;text-align:left;gap:10px;padding:10px 10px;border-radius:8px;color:#414956;font-size:13px;font-weight:650}
.department:hover{background:#f5f6f8}
.department.active{background:#fff1f4;color:#bd0020}
.department .bullet{height:8px;width:8px;border:2px solid #e6223c;border-radius:50%;flex:0 0 auto}
.department .count{margin-left:auto;color:#98a0a8;font-size:11px;flex:0 0 auto;font-weight:600}
.search-result{border:0;background:transparent;width:100%;display:block;text-align:left;padding:10px;border-radius:7px;font-size:13px;color:#343940}
.search-result:hover{background:#f6f7fa}
.search-result small{display:block;font-size:11px;color:#8a929d;margin-top:4px}
.line{height:1px;background:var(--line);margin:15px 0 19px}
.selection-eyebrow{font-size:12px;color:#848e9b;margin-top:15px;line-height:1.5;overflow-wrap:anywhere}
.selection-title{font-size:19px;font-weight:760;margin:5px 0 15px;line-height:1.3;word-break:break-word}
.field-label{font-weight:680;font-size:12px;color:#5f6974;margin:0 0 7px;display:block}
.name-input{width:100%;border:1px solid #d9dfe5;border-radius:8px;padding:10px 12px;font-size:14px;background:white}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.actions .btn{flex:1}
#addbox{margin-top:16px;background:#fff8f9;border:1px solid #f1ced5;padding:14px;border-radius:11px}
#addbox h3{margin:0 0 6px;font-size:14px}
#addbox p{font-size:12px;margin:0 0 12px;color:#69727b;line-height:1.45;word-break:break-word}
#addbox .actions{margin-top:10px}
#message{padding:10px;border:1px solid #e4e9ef;background:#f8fafd;border-radius:8px;font-size:12px;line-height:1.5;color:#576474;margin-top:14px}
#message.error{border-color:#edb7c0;background:#fff4f5;color:#9d2336}
.hint{color:#8b929b;font-size:11.5px;line-height:1.55;margin:14px 0 5px}
.canvas-wrap{position:relative;flex:1;min-width:0;min-height:0;margin:14px;background:white;border:1px solid #dce2e7;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(30,40,70,.04)}
#map{width:100%;height:100%;display:block;touch-action:none;cursor:grab;background:white;user-select:none}
#map.dragging{cursor:grabbing}
#map .edge{fill:none;stroke:#838992;stroke-width:2.45;stroke-linecap:round;opacity:.78}
#map .edge.accent{stroke:#d40b2a;opacity:.95;stroke-width:3.8}
#map .node-hit{cursor:pointer}
#map .node-outer{fill:url(#nodeGradient);stroke:#232323;stroke-width:1.9}
#map .node-inner{fill:#151515}
#map .node-label{font-family:Inter,"Segoe UI",Arial,sans-serif;fill:#17191d;pointer-events:none;font-size:27px;font-weight:520}
#map .node-group.l1 .node-label{font-size:39px;font-weight:740}
#map .node-group.l2 .node-label{font-size:31px;font-weight:650}
#map .node-group.selected .node-label{fill:#d80027}
#map .selected-ring{fill:none;stroke:var(--red);stroke-width:3.1;pointer-events:none}
#map .addcircle{fill:white;stroke:#d60027;stroke-width:2.4}
#map .addglyph{font:700 28px Arial,sans-serif;text-anchor:middle;dominant-baseline:middle;fill:#d60027;pointer-events:none}
#map .node-add{cursor:pointer;opacity:0;transition:opacity .14s}
#map .node-group:hover .node-add,#map .node-group.selected .node-add{opacity:1}
#map .node-add:hover .addcircle{fill:#ffe7ec}
#map .node-group:hover .node-outer{stroke:#b40021;stroke-width:3}
#map .root-halo{fill:#fff;stroke:#e60025;stroke-width:5}
#map .root-hit{cursor:pointer}
.corner-help{position:absolute;right:15px;bottom:13px;border:1px solid #edf0f3;border-radius:8px;background:rgba(255,255,255,.94);padding:8px 11px;color:#7b8491;font-size:12px;pointer-events:none}
#mobile-panel-toggle{display:none}
.footerbar{padding:10px 18px;border-top:1px solid var(--line);background:#fcfcfd;font-size:11px;color:#85909d;display:flex;justify-content:space-between;gap:8px}
.hidden,[hidden]{display:none !important}
@media(max-width:900px){header{height:auto;min-height:70px;padding:10px 12px}.brandtitle{display:none}.app{height:calc(100% - 70px)}aside{width:310px}.canvas-wrap{margin:7px}}
@media(max-width:680px){.app{position:relative}.toptools .hide-small{display:none}header{height:64px;min-height:64px}.app{height:calc(100% - 64px)}aside{position:absolute;top:0;bottom:0;left:0;transform:translateX(-102%);box-shadow:6px 0 20px rgba(0,0,0,.08);transition:transform .18s;width:min(87vw,355px)}aside.open{transform:translateX(0)}#mobile-panel-toggle{display:inline-flex}.canvas-wrap{margin:4px}.brandmark strong{font-size:20px}.corner-help{display:none}}


/* Branch editor: every existing item has an independently accessible + action. */
.modebtn.active{color:#b80020;border-color:#f0b4c0;background:#fff2f5}
.departments{max-height:195px;margin-bottom:8px}
.dept-hint{margin:4px 0 12px}
.branch-list{max-height:318px;overflow:auto;border:1px solid #e4e8ed;border-radius:9px;margin-top:10px;padding:5px 3px;background:#fcfdfe;scrollbar-width:thin}
.tree-row{display:flex;align-items:center;min-height:33px;gap:3px;padding-right:4px;border-radius:6px}
.tree-row:hover{background:#f5f7fa}
.tree-row.active{background:#fff1f3}
.tree-select{min-width:0;flex:1;text-align:left;padding:6px 4px;border:0;background:none;font-size:12px;color:#404955;word-break:break-word;line-height:1.3;cursor:pointer}
.tree-row.active .tree-select{color:#b40021;font-weight:750}
.tree-fold{border:0;background:none;color:#7d8691;padding:0;width:18px;min-width:18px;height:25px;line-height:1;font-size:12px}
.tree-plus{border:1px solid #efb4bf;background:#fff;border-radius:7px;width:26px;min-width:26px;height:26px;font-weight:800;color:#ce092a;line-height:1;font-size:17px;padding:0}
.tree-plus:hover{background:#e60025;color:white}
.tree-spacer{width:18px;min-width:18px}
.tree-depth{border-left:1px solid #e5e8ed;min-width:0;height:20px}
#addoverlay{position:fixed;inset:0;background:rgba(13,22,34,.38);z-index:30;display:flex;align-items:center;justify-content:center;padding:20px}
#addbox{position:relative;width:min(460px,100%);margin:0;background:white;border:1px solid #e1d5d7;padding:25px;border-radius:15px;box-shadow:0 22px 75px rgba(12,23,39,.25)}
#addbox h3{margin:0 0 12px;font-size:19px;color:#202936}
#addbox p{font-size:13px;color:#5d6875;margin:0 0 20px;line-height:1.55}
#addbox .btn{min-height:41px}
#map .node-add{opacity:0}
#map .node-group:hover .node-add,#map .node-group.selected .node-add{opacity:1}
#map .node-group:hover .node-outer{cursor:pointer}
@media(max-width:680px){.modebtn{padding:5px;font-size:11px}.brand-divider,.brandmark span{display:none}.toptools{gap:3px}.zoom-number{display:none}}

/* v3: compact, restrained detail card. Existing map, sidebar and toolbar styling retained. */
textarea{font:inherit}
textarea:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.detail-panel{display:block;position:absolute;right:17px;top:64px;z-index:2;max-height:min(640px,calc(100% - 83px));overflow:auto;width:min(325px,calc(100% - 38px));background:rgba(255,255,255,.98);border:1px solid #dce2e8;border-radius:12px;box-shadow:0 9px 28px rgba(30,41,59,.095);padding:15px 17px;backdrop-filter:blur(6px)}
.detail-panel.is-hidden{display:none}
.info-toggle{position:absolute;z-index:3;right:17px;top:17px;background:#fff;color:#495463;box-shadow:0 3px 12px rgba(17,24,39,.055)}
.detail-title-row{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.detail-eyebrow{color:#9aa2ab;font-size:10px;letter-spacing:.11em;font-weight:800;margin-bottom:6px}
.detail-name{font-size:17px;font-weight:780;color:#242b35;line-height:1.22;overflow-wrap:anywhere}
.panel-dismiss{border:0;background:#f5f6f8;color:#596473;border-radius:7px;width:25px;height:25px;font-size:22px;line-height:20px;flex-shrink:0}
.detail-path{font-size:11px;color:#8e96a2;margin-top:7px;overflow-wrap:anywhere;line-height:1.4}
.panel-divider{height:1px;background:#eceef0;margin:14px 0}
.panel-label{display:block;font-size:12px;font-weight:760;color:#576171;margin-bottom:8px}
.panel-actions{display:flex;gap:7px}
.panel-actions .btn{flex:1;font-size:11.5px;padding:6px 7px;min-height:32px}
.detail-hint{font-size:11px;color:#8d96a1;line-height:1.5;margin:7px 0 0}
.note-input{resize:vertical;display:block;width:100%;min-height:90px;max-height:210px;font-size:12.5px;line-height:1.5;padding:10px;border:1px solid #dfe4ea;border-radius:8px;background:#fcfdfe;color:#313b47}
.note-meta{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;color:#8792a0;margin-top:7px;gap:8px}
.text-button{border:0;background:none;padding:3px 0;font-size:11px;color:#a42039;text-decoration:underline;text-underline-offset:2px}
.color-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.color-choice{height:24px;width:24px;border-radius:50%;border:2px solid white;outline:1px solid #d8dde4;box-shadow:0 1px 2px rgba(0,0,0,.09);padding:0;position:relative}
.color-choice.is-active{outline:2px solid #333b46;outline-offset:2px}
.color-choice:hover{transform:scale(1.07)}
#map .comment-indicator{fill:#fff;stroke:#66758b;stroke-width:2;pointer-events:none}
#map .comment-symbol{font:bold 13px Arial,sans-serif;fill:#66758b;text-anchor:middle;dominant-baseline:central;pointer-events:none}
#map .edge-hit{fill:none;stroke:transparent;stroke-width:24;pointer-events:stroke;cursor:pointer}
#map .edge-hit:hover{stroke:rgba(215,10,42,.15)}
#map .node-group{cursor:pointer}
#map .node-group .node-label{cursor:pointer;pointer-events:visiblePainted}
@media(max-width:1240px){header{padding:0 11px;gap:5px}.toptools{gap:4px}.toptools .btn{padding:6px 8px;font-size:12px}.brandtitle{display:none}}
@media(max-width:940px){.detail-panel{width:min(285px,calc(100% - 30px));right:10px;top:57px;padding:13px}.info-toggle{right:10px;top:9px}}
@media(max-width:680px){.detail-panel{top:48px;max-height:calc(100% - 60px)}.toptools #expandall,.toptools #collapseall{font-size:10px;padding:4px 5px}.note-input{min-height:64px}}

@media(min-width:681px) and (max-width:1240px){header .toptools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}.brandmark span{display:none}.brand{gap:7px}}

/* Cloud sign-in and administration. Existing map visuals remain untouched. */
body.cloud-locked > header, body.cloud-locked > .app, body.cloud-locked > #addoverlay {display:none !important}
.auth-gate{position:fixed;inset:0;background:#f3f5f7;display:grid;place-items:center;z-index:4000;padding:20px;font-family:inherit}
.auth-gate[hidden]{display:none}
.auth-card{width:min(440px,95vw);padding:35px 32px;background:#fff;border:1px solid #d9dfe6;border-radius:15px;box-shadow:0 22px 55px #1d2c3f19}
.auth-brand{font-size:36px;color:#e60025;letter-spacing:1px;font-weight:800;margin-bottom:18px}
.auth-card h1{font-size:20px;line-height:1.25;margin:0 0 12px}
.auth-card p{color:#667080;margin:0 0 22px;font-size:14px}
.auth-card .name-input{display:block;width:100%;margin-bottom:18px;box-sizing:border-box}
.auth-card .btn{width:100%;margin:5px 0}
.auth-message{margin-top:14px;font-size:13px;min-height:20px;color:#525f73}
.account-user{font-size:12px;color:#64748b;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-drawer{position:fixed;right:16px;top:83px;width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 96px);overflow:auto;z-index:2200;box-sizing:border-box;padding:20px;background:white;border:1px solid #d9dfe6;border-radius:14px;box-shadow:0 20px 50px #1d2c3f30;font-size:13px}
.admin-drawer[hidden]{display:none}
.admin-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px}
.admin-drawer p{color:#64748b;line-height:1.5}
.user-record{border-top:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:8px}
.user-record .meta{display:block;color:#64748b;font-size:11px;margin-top:4px}
.user-record label{display:flex;align-items:center;gap:5px;white-space:nowrap}