:root{
  /* Ohne das hier rendern Chromium/Firefox native Formularelemente (Auswahl-
     Dropdowns von <select>, der Kalender von <input type="date">, außerdem
     Scrollbars) im hellen OS-Standardthema — auf dem dunklen Hintergrund
     hier ein weißer Fremdkörper mit schlecht lesbarem grauem Text drauf.
     color-scheme sagt dem Browser, dass die Seite dunkel ist, und lässt ihn
     diese Elemente in seinem eigenen dunklen Thema zeichnen (kein CSS
     erreicht das Innere dieser Popups direkt, das ist reine Browsersache). */
  color-scheme: dark;
  --depth:#0D181B; --depth-2:#112126; --grid:#1B3239; --edge:#223C43;
  --ivory:#E4DED0; --ivory-2:#D2CBBA; --ink:#12201F; --ink-soft:#5C6B68;
  --brass:#C79A3A; --verdigris:#38A18C; --rust:#CF5A54; --warning:#EBC24A;
  --paper:#F2EEE3; --text-light:#CFDBDA; --text-muted:#7C9096;
  --shadow-slot:0 1px 0 rgba(255,255,255,.5) inset, 0 -2px 0 rgba(0,0,0,.12) inset, 0 10px 22px -10px rgba(0,0,0,.75);
  --ad-width:160px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--depth);color:var(--text-light);
  font-family:"Instrument Sans",system-ui,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--edge);border-radius:5px}

#header{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 14px;background:linear-gradient(to bottom,rgba(13,24,27,.97),rgba(13,24,27,.86));
  border-bottom:1px solid var(--edge);backdrop-filter:blur(8px)}
#header.off{display:none}
.brand h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:18px;letter-spacing:-.03em;margin:0;color:var(--paper)}
#roleBadge{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);
  border:1px solid rgba(199,154,58,.45);padding:3px 7px;border-radius:2px}
#roleBadge.off{display:none}
#activeUsers{display:flex;align-items:center;gap:4px;margin-right:8px;padding-right:8px;border-right:1px solid var(--edge)}
#activeUsers:empty{display:none}
.user-dot-holder{position:relative;display:inline-flex;flex:none}
.user-dot-holder:hover::after{content:attr(data-name);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:#0B1518;border:1px solid var(--edge);padding:4px 8px;border-radius:3px;white-space:nowrap;z-index:100;
  font-weight:500;font-size:11px;color:var(--paper);box-shadow:0 4px 12px rgba(0,0,0,.5)}
.user-dot{width:24px;height:24px;border-radius:50%;background:var(--grid);border:1.5px solid var(--edge);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#0B1518;
  cursor:default;position:relative;overflow:hidden;flex:none}
.user-dot-holder.manageable{cursor:pointer}
.user-dot-holder.manageable .user-dot{transition:box-shadow .15s}
.user-dot-holder.manageable:hover .user-dot{box-shadow:0 0 0 2px var(--brass)}
.user-dot img{width:100%;height:100%;object-fit:cover}
.user-dot svg{width:82%;height:82%;display:block}
#btnUserMenu .user-dot{width:20px;height:20px;font-size:9px}
#profileAvatar{width:76px;height:76px;border-radius:50%;overflow:hidden;border:1.5px solid var(--edge);
  display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#0B1518;flex:none}
#profileAvatar img{width:100%;height:100%;object-fit:cover}
#profileAvatar svg{width:82%;height:82%;display:block}

.metrics{display:flex;gap:6px;flex-wrap:wrap}
.metric{padding:4px 10px 5px;border:1px solid var(--edge);border-radius:3px;background:rgba(255,255,255,.02);min-width:98px}
.metric b{display:block;font-family:"Azeret Mono",monospace;font-weight:500;font-size:13.5px;letter-spacing:-.02em;color:var(--paper)}
.metric small{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
.metric.income b{color:var(--verdigris)}
.metric.expense b{color:var(--rust)}

.tools{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;align-items:center}
.tool-group{display:inline-flex;gap:6px}
.tool{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--edge);border-radius:3px;
  font-size:12.5px;font-weight:500;color:var(--text-light);transition:border-color .15s,background .15s,color .15s}
.tool:hover{border-color:var(--brass);color:var(--paper);background:rgba(199,154,58,.09)}
.tool.strong{background:var(--brass);border-color:var(--brass);color:#20180A;font-weight:600}
.tool.strong:hover{background:#DCAE47}
.tool.quiet{border-color:transparent;color:var(--text-muted);padding:7px 8px}
.tool.quiet:hover{color:var(--paper);background:rgba(255,255,255,.05)}
.tool[disabled]{opacity:.35;pointer-events:none}
.tool i{font-style:normal;font-size:14px;line-height:1}
#saveStatus{font-size:11px;color:var(--text-muted);min-width:78px;text-align:right}

.menu-holder{position:relative}
.menu{position:absolute;top:calc(100% + 6px);left:0;min-width:242px;z-index:60;
  background:#0B1518;border:1px solid var(--edge);border-radius:4px;padding:5px;
  box-shadow:0 24px 48px -16px rgba(0,0,0,.8);display:none}
.menu.open{display:block}
.menu.right{left:auto;right:0}
.menu button,.menu a{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;
  padding:8px 10px;border-radius:3px;font-size:13px;text-align:left;color:var(--text-light)}
.menu button:hover,.menu a:hover{background:rgba(199,154,58,.13);color:var(--paper)}
.menu button.off{display:none}
.menu button[disabled]{opacity:.32;pointer-events:none}
.menu button.current{color:var(--brass);font-weight:600}
.menu button small{color:var(--text-muted);font-size:10.5px}
.menu hr{border:0;border-top:1px solid var(--edge);margin:5px 2px}
.menu .danger:hover{background:rgba(207,90,84,.15);color:var(--rust)}
.menu .period-choice{padding:4px 10px 8px;margin-bottom:0}

/* Eigenes Kalender-Widget statt <input type="date"> — siehe createDatePicker()
   in index.js für die Begründung (Chromium/Firefox lassen das native
   Kalender-Popup nicht per CSS umfärben). Baut auf .menu-holder/.menu auf,
   die Regeln hier setzen nur zurück, was .menu button oben (volle Breite,
   flex space-between) für die Kalendertage/Kopfzeile ungeeignet macht. */
.date-trigger{display:block;width:100%;padding:9px 11px;border-radius:3px;
  background:rgba(255,255,255,.04);border:1px solid var(--edge);
  text-align:left;font-size:13px;color:var(--text-light);font-family:"Azeret Mono",monospace}
.date-trigger:hover{border-color:var(--brass)}
.date-trigger.empty{color:var(--text-muted)}
.date-trigger[disabled]{opacity:.55;pointer-events:none}
.date-menu{width:252px;padding:10px}
.date-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.date-nav button{display:inline-flex;width:auto;padding:4px 9px}
.date-nav-label{font-size:12.5px;font-weight:600;color:var(--paper)}
.date-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;
  font-size:10px;color:var(--text-muted);text-transform:uppercase;margin-bottom:2px}
.date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.date-cell{display:block;width:100%;padding:6px 0;border-radius:3px;font-size:12.5px;
  text-align:center;color:var(--text-light)}
.date-cell:hover{background:rgba(199,154,58,.13);color:var(--paper)}
.date-cell.outside{color:var(--text-muted);opacity:.45}
.date-cell.today{box-shadow:inset 0 0 0 1px var(--edge)}
.date-cell.selected{background:var(--brass);color:#20180A;font-weight:600}
.date-footer{display:flex;justify-content:space-between;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--edge)}
.date-footer button{display:inline-flex;width:auto}

#btnNotifications{position:relative}
.badge{position:absolute;top:3px;right:3px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;
  background:var(--rust);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;
  font-family:"Azeret Mono",monospace;line-height:1;pointer-events:none}
.badge.off{display:none}
#notificationToast{position:fixed;top:calc(var(--header-height,60px) + 12px);right:16px;z-index:200;
  max-width:340px;padding:11px 14px;border-radius:6px;background:#0B1518;border:1px solid var(--edge);
  box-shadow:0 20px 40px -12px rgba(0,0,0,.75);color:var(--text-light);font-size:12.5px;line-height:1.5;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
#notificationToast.showing{opacity:1;transform:translateY(0);pointer-events:auto}
#notificationToast.hiding{transition:opacity 1s ease,transform 1s ease;opacity:0;transform:translateY(-6px)}
#notificationToast b{color:var(--paper);font-weight:600}
.menu.notifications{width:340px;max-height:min(70vh,420px);overflow-y:auto;padding:8px}
.menu.notifications.open{display:flex;flex-direction:column;gap:6px}
.message{position:relative;padding:10px 30px 10px 11px;border-radius:4px;font-size:12.5px;line-height:1.5;
  color:var(--text-light);border:1px solid var(--edge);background:rgba(255,255,255,.025)}
.message.unread{background:rgba(199,154,58,.09);border-color:rgba(199,154,58,.4)}
.message b{color:var(--paper);font-weight:600}
.message button.message-close{position:absolute;top:8px;right:6px;width:18px;height:18px;padding:0;
  border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-muted)}
.message button.message-close:hover{background:rgba(207,90,84,.18);color:var(--rust)}
.message button.message-link{display:inline;width:auto;padding:0;
  font-size:inherit;font-weight:600;line-height:inherit;color:#6EA8E0;
  text-decoration:underline;text-decoration-color:rgba(110,168,224,.5);cursor:pointer}
.message button.message-link:hover{color:#8FC0F0;text-decoration-color:#8FC0F0}
.message time{display:block;margin-top:4px;font-size:10.5px;color:var(--text-muted);font-family:"Azeret Mono",monospace}

#board{position:fixed;inset:0;
  background:radial-gradient(circle at 1px 1px, var(--grid) 1px, transparent 0) 0 0/26px 26px,
             radial-gradient(ellipse 900px 620px at 50% 38%, var(--depth-2), var(--depth) 72%);
  touch-action:none;cursor:grab;-webkit-touch-callout:none}
#board.panning{cursor:grabbing}

/* Google-AdSense-Banner für Normal-Konten (Premium blendet sie aus, siehe
   session.user.plan in index.js). Schmal, aber möglichst hoch — daher
   fest von knapp unterm Header bis über den Zoom-Reglern (bottom:60px
   lässt Platz für #footer/#zoom, die beide in diesem Streifen liegen),
   statt volle Bildschirmhöhe. #adLeft ist zusätzlich um die Breite des
   eingeklappten #boardsPanel eingerückt, damit dessen immer sichtbarer
   Ausklapp-Griff nie die Anzeige überlappt. Auf schmalen Bildschirmen ist
   ohnehin kein Platz dafür — dort bleiben sie ausgeblendet.
   .off wird beim Laden gesetzt/entfernt, siehe applyPlanUI() in index.js;
   erst nachdem session.user.plan bekannt ist, nie by default sichtbar. Ist
   noch kein AdSense eingerichtet, bleibt die Fläche für Normal-Konten
   trotzdem sichtbar, nur mit .ad-placeholder statt einer echten Anzeige
   (siehe fillAdSlot() in index.js). */
.ad-slot{position:fixed;top:var(--header-height,60px);bottom:60px;width:var(--ad-width);
  z-index:25;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ad-slot.off{display:none}
#adLeft{left:22px}
#adRight{right:0}
@media (max-width:1400px){ .ad-slot{display:none!important} }

.ad-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:10px;font-size:11px;line-height:1.5;color:var(--text-muted);
  border:1px dashed var(--edge);border-radius:4px;background:rgba(255,255,255,.02)}
#stage{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
#wires{position:absolute;top:0;left:0;width:6000px;height:4200px;overflow:visible;pointer-events:none}
#wires .hit-area{pointer-events:stroke}
#tags{position:absolute;top:0;left:0;width:0;height:0}

.slot{position:absolute;background:linear-gradient(168deg,var(--ivory),var(--ivory-2));border-radius:4px;
  box-shadow:var(--shadow-slot);color:var(--ink);padding:11px 13px 10px;user-select:none;touch-action:none;
  -webkit-touch-callout:none;transition:box-shadow .18s}
.slot.main{width:246px;min-height:120px;border-top:3px solid var(--brass)}
.slot.sub{width:210px;min-height:104px;border-top:3px solid rgba(0,0,0,.16)}
.slot.source,.slot.target{width:186px;min-height:66px;border-radius:34px;padding:14px 20px;
  background:none;box-shadow:none;color:var(--text-light);
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
/* Quelle = zahlt nur (wie eine Einnahme, verdigris) · Ziel = empfängt nur (wie eine Ausgabe, rust) */
.slot.source{border:1.5px dashed rgba(56,161,140,.55)}
.slot.target{border:1.5px dashed rgba(207,90,84,.55)}
.slot.selected{box-shadow:var(--shadow-slot),0 0 0 2px var(--brass)}
.slot.source.selected,.slot.target.selected{box-shadow:0 0 0 2px var(--brass);border-color:var(--brass)}
.slot.dimmed{opacity:.34}
.slot .handle{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:44px;height:4px;border-radius:2px;background:rgba(18,32,31,.16)}
.slot .row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.slot .kind-label{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.slot.source .kind-label{color:rgba(56,161,140,.9)}
.slot.target .kind-label{color:rgba(207,90,84,.9)}
.slot .dots{display:flex;gap:3px;flex:none;margin-top:3px}
.slot .dots i{width:8px;height:8px;border-radius:50%;display:block}
.slot .name{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:16.5px;letter-spacing:-.02em;
  line-height:1.15;margin:5px 0 0;word-break:break-word}
.slot.source .name,.slot.target .name{font-size:14.5px;color:var(--paper);margin:3px 0 0}
.slot .balance{font-family:"Azeret Mono",monospace;font-weight:500;font-size:17px;letter-spacing:-.03em;margin-top:7px}
.slot .summary{display:flex;gap:10px;margin-top:6px;font-family:"Azeret Mono",monospace;font-size:10.5px}
.slot .summary .p{color:#2E7F6E}
.slot .summary .m{color:#B3453F}
.slot .summary .none{color:var(--ink-soft)}
.slot .owner{font-size:10px;color:var(--ink-soft);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.warning-icon{position:absolute;top:-9px;right:-9px;width:22px;height:22px;z-index:4;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}

.anchor{position:absolute;width:15px;height:15px;border-radius:50%;background:var(--paper);border:2px solid var(--brass);
  opacity:0;transform:scale(.6);transition:opacity .14s,transform .14s;cursor:crosshair;touch-action:none;z-index:3}
.anchor::after{content:"";position:absolute;inset:-11px}
.slot:hover .anchor,.slot.selected .anchor,body.connecting .anchor{opacity:1;transform:scale(1)}
.anchor:hover{background:var(--brass);transform:scale(1.35)}
body.read-only .anchor{display:none}
.anchor.moving{opacity:1;transform:scale(1);background:var(--brass)}
.anchor.moving:hover{transform:scale(1.35)}
.anchor[data-side="top"]{top:-8px;left:50%;margin-left:-7.5px}
.anchor[data-side="bottom"]{bottom:-8px;left:50%;margin-left:-7.5px}
.anchor[data-side="left"]{left:-8px;top:50%;margin-top:-7.5px}
.anchor[data-side="right"]{right:-8px;top:50%;margin-top:-7.5px}
.slot.source .anchor[data-side="top"],.slot.target .anchor[data-side="top"]{top:-6px}
.slot.source .anchor[data-side="bottom"],.slot.target .anchor[data-side="bottom"]{bottom:-6px}
.slot.source .anchor[data-side="left"],.slot.target .anchor[data-side="left"]{left:-6px}
.slot.source .anchor[data-side="right"],.slot.target .anchor[data-side="right"]{right:-6px}

.pipe{fill:none;stroke:rgba(255,255,255,.10);stroke-linecap:round}
.pulse{fill:none;stroke-linecap:round;stroke-dasharray:1 15;animation:march linear infinite}
@keyframes march{to{stroke-dashoffset:-150}}
.line.dimmed{opacity:.2}
.line.selected .pipe{stroke:rgba(199,154,58,.5)}
.temp{fill:none;stroke:var(--brass);stroke-width:2;stroke-dasharray:5 6;opacity:.85}
.tag{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:4px 9px 5px;border-radius:3px;background:rgba(9,18,20,.94);border:1px solid var(--edge);
  font-size:11.5px;line-height:1.1;cursor:pointer;user-select:none;touch-action:none;-webkit-touch-callout:none;
  transition:border-color .15s,opacity .15s}
.tag:hover{border-color:var(--brass)}
.tag.selected{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.tag.dimmed{opacity:.22}
.tag b{font-weight:500;color:var(--paper)}
.tag em{font-family:"Azeret Mono",monospace;font-style:normal;font-weight:500;font-size:11.5px;letter-spacing:-.02em}
.tag .cycle{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}

.flow-anchor{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--brass);
  border:2px solid var(--paper);transform:translate(-50%,-50%);cursor:move;z-index:50;touch-action:none;
  box-shadow:0 2px 5px rgba(0,0,0,.5);transition:transform .15s}
.flow-anchor::after{content:"";position:absolute;inset:-13px}
.flow-anchor:hover{transform:translate(-50%,-50%) scale(1.2)}
.flow-anchor.on{background:var(--paper);border-color:var(--brass);box-shadow:0 0 0 2px var(--brass)}

#panel{position:fixed;top:0;right:0;bottom:0;width:326px;z-index:45;background:rgba(11,21,24,.97);
  border-left:1px solid var(--edge);backdrop-filter:blur(10px);
  transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
#panel.open{transform:none}
body.connecting #panel.open{transform:translateX(100%);pointer-events:none}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 12px;border-bottom:1px solid var(--edge)}
.panel-header h2{flex:1}

#boardsPanel{position:fixed;top:var(--header-height,56px);left:0;bottom:0;width:22px;z-index:35;background:rgba(11,21,24,.97);
  border-right:1px solid var(--edge);backdrop-filter:blur(10px);overflow:hidden;
  transition:width .22s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
#boardsPanel.open{width:326px}
#btnBoardsExpand{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:13px}
#btnBoardsExpand:hover{color:var(--brass)}
#boardsPanel.open #btnBoardsExpand{display:none}
#boardsPanel .panel-header,#boardsPanel .panel-body{display:none}
#boardsPanel.open .panel-header{display:flex}
#boardsPanel.open #boardsPanelBody{display:flex}
#boardsPanelBody{padding:12px;overflow-y:auto;flex:1;flex-direction:column;gap:8px}
.board-entry{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--edge);border-radius:5px;cursor:pointer;transition:.15s}
.board-entry:hover{border-color:var(--brass)}
.board-entry.active{border-color:var(--brass);background:rgba(199,154,58,.08)}
.board-thumb{width:52px;height:40px;flex:0 0 auto;border-radius:3px;background:rgba(255,255,255,.03);border:1px solid var(--edge);overflow:hidden}
.board-thumb svg{width:100%;height:100%;display:block}
.board-info{flex:1;min-width:0}
.board-info b{display:block;font-size:13px;font-weight:600;color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-info small{font-size:10.5px;color:var(--text-muted)}
.panel-header h2{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--paper)}
.panel-body{padding:16px;overflow-y:auto;flex:1}
.field{margin-bottom:15px}
.field label{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.field input,.field select{width:100%;padding:9px 11px;border-radius:3px;background:rgba(255,255,255,.04);
  border:1px solid var(--edge);font-size:13.5px}
.field input:focus,.field select:focus{outline:0;border-color:var(--brass);background:rgba(199,154,58,.07)}
.field input[type="range"]{accent-color:var(--brass);margin:10px 0}
.field input[disabled],.field select[disabled]{opacity:.55}
.field input.number{font-family:"Azeret Mono",monospace;letter-spacing:-.02em}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.choice-row{display:flex;flex-wrap:wrap;gap:5px}
.choice{padding:7px 11px;border:1px solid var(--edge);border-radius:3px;font-size:11.5px;color:var(--text-muted);transition:.15s;
  display:inline-flex;align-items:center;gap:6px}
.choice i{width:8px;height:8px;border-radius:50%;display:block}
.choice:hover{color:var(--paper);border-color:var(--text-muted)}
.choice.on{background:rgba(199,154,58,.18);border-color:var(--brass);color:var(--paper);font-weight:500}
.person-chip-remove{margin-left:1px;padding:0 2px;font-size:10px;line-height:1;color:var(--text-muted);border-radius:2px}
.person-chip-remove:hover{color:var(--rust)}
.route{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:10px 11px;border:1px solid var(--edge);
  border-radius:3px;background:rgba(255,255,255,.03)}
.route span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;color:var(--paper)}
.route i{font-style:normal;color:var(--brass);flex:none}
.divider{height:1px;background:var(--edge);margin:18px 0}
.hint{font-size:11.5px;line-height:1.55;color:var(--text-muted)}
.hint b{color:var(--text-light);font-weight:500}
.hint.warn{color:var(--warning)}
.delete{width:100%;padding:10px;border:1px solid rgba(207,90,84,.4);border-radius:3px;color:var(--rust);
  font-size:12.5px;font-weight:500;transition:.15s}
.delete:hover{background:rgba(207,90,84,.13);border-color:var(--rust)}

#modal,#modal2{position:fixed;inset:0;z-index:80;background:rgba(6,12,14,.72);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:24px}
#modal.open,#modal2.open{display:flex}
#modal2{z-index:90}
.dialog{width:100%;max-width:452px;max-height:86vh;display:flex;flex-direction:column;
  background:#0B1518;border:1px solid var(--edge);border-radius:5px;box-shadow:0 40px 80px -24px rgba(0,0,0,.9)}
.dialog.wide{max-width:600px}
.dialog.small{max-width:320px}
.dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 14px;border-bottom:1px solid var(--edge)}
.dialog header h3{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--paper)}
.dialog .content{padding:18px;overflow-y:auto}
.dialog footer{display:flex;gap:8px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--edge)}
.dialog-error{font-size:12px;color:var(--rust);margin:0 0 12px;line-height:1.5}
.dialog-error:empty{display:none}
.list{display:flex;flex-direction:column;gap:6px}
.entry{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--edge);border-radius:3px;
  background:rgba(255,255,255,.02);text-align:left;width:100%}
.entry:hover{border-color:var(--brass)}
.entry .main{flex:1;min-width:0}
.entry .main b{display:block;font-size:13.5px;font-weight:600;color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entry .main small{font-size:11px;color:var(--text-muted)}
.role-badge{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);border:1px solid rgba(199,154,58,.4);
  padding:2px 6px;border-radius:2px;flex:none}
.role-switch{display:inline-flex;border:1px solid var(--edge);border-radius:3px;overflow:hidden;flex:none}
.role-switch button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  background:transparent;border:none;color:var(--text-muted);cursor:pointer}
.role-switch button+button{border-left:1px solid var(--edge)}
.role-switch button svg{width:15px;height:15px}
.role-switch button:hover{color:var(--paper);background:rgba(255,255,255,.05)}
.role-switch button.active{background:var(--brass);color:#20180A}
.role-switch button.active:hover{background:#DCAE47}
.color-picker{display:flex;gap:4px}
.color-picker button{width:18px;height:18px;border-radius:50%;border:2px solid transparent}
.color-picker button.on{border-color:var(--paper)}

.language-picker-holder{display:flex;justify-content:flex-end;margin:-8px -8px 10px}
#menuLanguage button.current::after,#menuLanguageGate button.current::after{content:"✓";float:right;color:var(--brass)}
.language-flag{width:20px;height:14px;object-fit:cover;border-radius:2px;margin-right:9px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);flex:none;vertical-align:-2px}

.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}

#gate{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(circle at 1px 1px, var(--grid) 1px, transparent 0) 0 0/26px 26px,
             radial-gradient(ellipse 900px 620px at 50% 40%, var(--depth-2), var(--depth) 72%)}
#gate.open{display:flex}
#gate .card{width:100%;max-width:400px;padding:32px;border:1px solid var(--edge);border-radius:5px;background:rgba(11,21,24,.94)}
#gate h2{font-family:"Bricolage Grotesque",sans-serif;font-size:26px;font-weight:800;letter-spacing:-.03em;margin:0 0 6px;color:var(--paper)}
#gate p.subtitle{font-size:13px;color:var(--text-muted);margin:0 0 22px;line-height:1.55}

/* Marken-Banner (#brandBanner, siehe banner.js): das Wort "graphli" aus
   Quell-/Konto-/Ziel-Knoten und Flowpaths — dieselben Bausteine wie die
   Kontenwand, siehe .pipe/.pulse weiter unten. */
#brandBanner{margin:0 0 18px;line-height:0}
.brand-banner-svg{width:100%;max-width:280px;height:auto;overflow:visible;display:block;
  margin:0 auto;--tiltX:0;--tiltY:0}
.brand-banner-svg .pipe{stroke-width:3}
.brand-banner-svg .pulse{stroke-width:1.5;stroke-dasharray:1.2 4}
.brand-banner-svg:hover .pulse{animation-duration:.7s !important}
.brand-node{transform-box:fill-box;transform-origin:center;cursor:pointer;
  transition:transform .15s ease,filter .15s ease}
.brand-node:hover{filter:brightness(1.4)}
.brand-node.account{fill:var(--brass);
  transform:translate(calc(var(--tiltX)*.6px),calc(var(--tiltY)*.6px))}
.brand-node.account:hover{transform:translate(calc(var(--tiltX)*.6px),calc(var(--tiltY)*.6px)) scale(1.3)}
.brand-node.source{fill:var(--depth);stroke:var(--verdigris);stroke-width:1.3;stroke-dasharray:1.6 1.2;
  transform:translate(calc(var(--tiltX)*-1.6px),calc(var(--tiltY)*-1.6px))}
.brand-node.source:hover{transform:translate(calc(var(--tiltX)*-1.6px),calc(var(--tiltY)*-1.6px)) scale(1.3)}
.brand-node.target{fill:var(--depth);stroke:var(--rust);stroke-width:1.3;stroke-dasharray:1.6 1.2;
  transform:translate(calc(var(--tiltX)*1.6px),calc(var(--tiltY)*1.6px))}
.brand-node.target:hover{transform:translate(calc(var(--tiltX)*1.6px),calc(var(--tiltY)*1.6px)) scale(1.3)}
#start{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(circle at 1px 1px, var(--grid) 1px, transparent 0) 0 0/26px 26px,
             radial-gradient(ellipse 900px 620px at 50% 40%, var(--depth-2), var(--depth) 72%)}
#start.open{display:flex}
#start .card{width:100%;max-width:400px;padding:32px;border:1px solid var(--edge);border-radius:5px;background:rgba(11,21,24,.94)}
#start h2{font-family:"Bricolage Grotesque",sans-serif;font-size:26px;font-weight:800;letter-spacing:-.03em;margin:0 0 6px;color:var(--paper)}
#start p.subtitle{font-size:13px;color:var(--text-muted);margin:0 0 22px;line-height:1.55}
.tabs{display:flex;gap:4px;margin-bottom:20px;border:1px solid var(--edge);border-radius:3px;padding:3px}
.tabs button{flex:1;padding:8px;border-radius:2px;font-size:12.5px;color:var(--text-muted)}
.tabs button.on{background:var(--brass);color:#20180A;font-weight:600}
#gateError{font-size:12px;color:var(--rust);margin:0 0 12px;line-height:1.5}
#gateError:empty{display:none}

.legal-links{margin-top:16px;padding-top:14px;border-top:1px solid var(--edge);
  display:flex;justify-content:center;gap:14px}
.legal-links a{font-size:11.5px;color:var(--text-muted)}
.legal-links a:hover{color:var(--paper);text-decoration:underline}

#empty{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;pointer-events:none}
#empty .card{pointer-events:auto;max-width:404px;text-align:center;padding:32px;border:1px solid var(--edge);
  border-radius:5px;background:rgba(11,21,24,.9)}
#empty h3{font-family:"Bricolage Grotesque",sans-serif;font-size:23px;font-weight:800;letter-spacing:-.03em;margin:0 0 10px;color:var(--paper)}
#empty p{font-size:13.5px;line-height:1.6;color:var(--text-muted);margin:0 0 22px}
#empty .buttons{display:flex;gap:8px;justify-content:center}
#empty.gone{display:none}
#footer{position:fixed;left:16px;bottom:14px;z-index:30;font-size:11px;color:var(--text-muted);line-height:1.6;pointer-events:none}
#footer kbd{font-family:"Azeret Mono",monospace;font-size:10px;padding:1px 5px;border:1px solid var(--edge);border-radius:3px;color:var(--text-light)}
#zoom{position:fixed;right:16px;bottom:14px;z-index:30;display:flex;gap:4px;align-items:center}
#zoom button{width:30px;height:30px;border:1px solid var(--edge);border-radius:3px;color:var(--text-light);
  display:grid;place-items:center;font-size:15px;background:rgba(11,21,24,.85)}
#zoom button:hover{border-color:var(--brass);color:var(--paper)}
#zoom span{font-family:"Azeret Mono",monospace;font-size:11px;color:var(--text-muted);width:44px;text-align:center}

.remote-cursor{position:absolute;pointer-events:none;z-index:100;transition:transform .1s linear;will-change:transform;display:flex;flex-direction:column;align-items:flex-start}
.remote-cursor svg{width:20px;height:20px;fill:var(--brass);filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.remote-cursor .name{margin-left:12px;margin-top:-4px;padding:2px 6px;background:var(--brass);color:#20180A;font-size:10px;font-weight:700;border-radius:2px;white-space:nowrap}

.slot.remote-editing{box-shadow:0 0 0 2px var(--remote-color,var(--brass)),var(--shadow-slot);
  transition:left .08s linear,top .08s linear;z-index:20}
.slot .remote-label{position:absolute;top:-22px;left:0;padding:2px 7px;border-radius:2px;
  font-size:10px;font-weight:700;color:#20180A;background:var(--remote-color,var(--brass));
  white-space:nowrap;pointer-events:none;z-index:5}
.line.remote-editing .pulse{filter:drop-shadow(0 0 5px var(--remote-color,var(--brass)))}
.remote-dot{position:absolute;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--remote-color,var(--brass));box-shadow:0 0 0 3px rgba(11,21,24,.6);
  pointer-events:none;z-index:90;transition:left .08s linear,top .08s linear}
.remote-dot .remote-label{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);
  padding:2px 7px;border-radius:2px;font-size:10px;font-weight:700;color:#20180A;
  background:var(--remote-color,var(--brass));white-space:nowrap}
.tag.remote-editing{border-color:var(--remote-color,var(--brass));box-shadow:0 0 0 1px var(--remote-color,var(--brass))}
.remote-label-tag{position:absolute;transform:translate(-50%,calc(-100% - 20px));padding:2px 7px;border-radius:2px;
  font-size:10px;font-weight:700;color:#20180A;background:var(--remote-color,var(--brass));
  white-space:nowrap;pointer-events:none;z-index:90}

#tutorialOverlay{display:none}
#tutorialOverlay.active{display:block;position:fixed;inset:0;z-index:300;pointer-events:none}
.tutorial-dim{position:fixed;z-index:300;pointer-events:auto;background:rgba(6,12,14,.62);backdrop-filter:blur(6px);
  transition:top .18s ease,left .18s ease,width .18s ease,height .18s ease,bottom .18s ease,right .18s ease}
.tutorial-ring{position:fixed;z-index:300;border-radius:6px;pointer-events:none;border:2px solid var(--brass);
  animation:tutorial-blink 1.1s ease-in-out infinite;
  transition:top .18s ease,left .18s ease,width .18s ease,height .18s ease}
@keyframes tutorial-blink{
  0%,100%{border-color:var(--brass);box-shadow:0 0 0 4px rgba(199,154,58,.35),0 0 18px 2px rgba(199,154,58,.35)}
  50%{border-color:var(--verdigris);box-shadow:0 0 0 4px rgba(56,161,140,.12),0 0 8px 0 rgba(56,161,140,.12)}
}
.tutorial-click-catcher{position:fixed;z-index:300;pointer-events:auto;background:transparent;border:0;padding:0;cursor:pointer;
  transition:top .18s ease,left .18s ease,width .18s ease,height .18s ease}
.tutorial-card{position:fixed;z-index:301;pointer-events:auto;width:320px;max-width:calc(100vw - 16px);padding:16px;
  background:#0B1518;border:1px solid var(--edge);border-radius:6px;box-shadow:0 24px 48px -16px rgba(0,0,0,.8);
  transition:top .18s ease,left .18s ease}
.tutorial-header{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.tutorial-title{flex:1;font-family:"Bricolage Grotesque",sans-serif;font-size:15px;font-weight:800;
  letter-spacing:-.02em;color:var(--paper)}
.tutorial-mute,.tutorial-close{flex:none;background:none;border:0;color:var(--text-muted);
  font-size:14px;line-height:1;cursor:pointer;padding:4px;border-radius:3px}
.tutorial-mute:hover,.tutorial-close:hover{color:var(--paper);background:rgba(255,255,255,.06)}
.tutorial-text{font-size:13px;line-height:1.55;color:var(--text-light);margin:0 0 8px}
.tutorial-hint{font-size:11px;font-style:italic;color:var(--text-muted);margin:0 0 12px}
.tutorial-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tutorial-progress{font-family:"Azeret Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted)}
.tutorial-buttons{display:flex;gap:6px}
.tutorial-buttons .tool{padding:6px 12px;font-size:12px}

@media (max-width:960px){
  #header{gap:8px;padding:8px 10px}
  .brand,.metric:nth-child(4){display:none}
  .metric{min-width:84px;padding:3px 8px 4px}
  #panel{width:100%;top:auto;height:68vh;border-left:0;border-top:1px solid var(--edge);transform:translateY(100%)}
  #boardsPanel.open{width:88vw}
  #footer{display:none}
}
@media (pointer:coarse){
  .color-picker{gap:9px}
  .color-picker button{width:26px;height:26px}
  .message button.message-close{width:30px;height:30px}
  #zoom button{width:40px;height:40px}
  .role-switch button{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){
  .pulse{animation:none;stroke-dasharray:none;opacity:.85}
  #panel,#boardsPanel{transition:none}
  .tutorial-ring{animation:none;box-shadow:0 0 0 4px rgba(199,154,58,.35)}
  .tutorial-dim,.tutorial-ring,.tutorial-click-catcher,.tutorial-card{transition:none}
}