/* ===== Fonts (lokal, file://-tauglich) ===== */
  @font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('lib/fonts/RobotoMono-Variable.woff2') format('woff2-variations'),
         url('lib/fonts/RobotoMono-Variable.woff2') format('woff2');
  }
  @font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('lib/fonts/JetBrainsMono-Variable.woff2') format('woff2-variations'),
         url('lib/fonts/JetBrainsMono-Variable.woff2') format('woff2');
  }

  /* ===== Base (myFramework, Dark, minimal, ein Amber-Akzent) ===== */
  :root {
    /* Neutrals, Near-Black, Flaechen stufen sich in der Helligkeit */
    --bg:          #1c1c1e;   /* gray-0, App-Hintergrund */
    --surface:     #232326;   /* gray-1, Panel: Sidebar, Topbar, Spalten */
    --surface-2:   #2c2c30;   /* gray-2, Karten */
    --surface-3:   #34343a;   /* Karten-Hover */
    --border:      #38383d;   /* gray-3, border-subtle */
    --border-soft: #2c2c30;   /* feine Trennlinien */

    /* Text, gray-Rampe */
    --text:        #f2f2f3;   /* gray-8, primaer hell */
    --text-soft:   #c7c7cc;   /* gray-7 */
    --text-dim:    #9a9aa1;   /* gray-6 */

    /* Brand Accent, myFramework Amber, sparsam eingesetzt */
    --accent:         #e4b123;
    --accent-strong:  #c99610;   /* accent-active, gedrueckt */
    --accent-soft:    color-mix(in srgb, #e4b123 16%, var(--surface-2));
    --accent-muted:   color-mix(in srgb, #e4b123 32%, var(--border));

    /* Status, bewusst entsaettigt, damit sie dem Akzent nicht Konkurrenz machen */
    --danger:      #c4554a;
    --danger-bg:   color-mix(in srgb, #c4554a 16%, var(--surface-2));
    --warning:     #d68a3c;
    --warning-bg:  color-mix(in srgb, #d68a3c 16%, var(--surface-2));
    --success:     #4e9b6b;
    --success-bg:  color-mix(in srgb, #4e9b6b 16%, var(--surface-2));
    --info:        #6e8fa0;
    /* Offene Fragen an einer Karte, bewusst eigene Farbe (nicht prio/due/done),
       damit die Markierung unabhängig von Spalte und Status sichtbar bleibt. */
    --question:      #b06fd1;
    --question-bg:   color-mix(in srgb, #b06fd1 16%, var(--surface-2));

    /* Radii & Motion, myFramework: klein und konsistent */
    --radius-sm:   4px;
    --radius:      6px;
    --radius-lg:   10px;
    --radius-pill: 999px;

    --shadow-none: none;
    --shadow-pop:  0 4px 16px rgba(0,0,0,0.5);

    --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:    100ms;
    --dur-base:    160ms;
  }
  *{ -webkit-tap-highlight-color: transparent; }
  html,body{ height:100%; overflow:hidden; }
  body{
    margin:0;
    font-family: 'Roboto Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 14px;
    line-height: 1.5;
    color:var(--text);
    background:var(--bg);
    overscroll-behavior:none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /* myFramework: eine einzige Familie überall, Roboto Mono. */
  .mono, .tabular-nums, .font-mono, code, kbd, pre {
    font-family: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  }

  /* Text selection, accent tint */
  ::selection{
    background: color-mix(in srgb, var(--accent) 32%, transparent);
    color: var(--text);
  }

  /* Scrollbars, discreet, flat, theme-aware */
  * { scrollbar-color: var(--border) transparent; scrollbar-width: thin; }
  *::-webkit-scrollbar{ width: 10px; height: 10px; }
  *::-webkit-scrollbar-track{ background: transparent; }
  *::-webkit-scrollbar-thumb{
    background: var(--border);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  *::-webkit-scrollbar-thumb:hover{ background: var(--accent-muted); background-clip: padding-box; }

  /* Board accent strip, top of viewport, 2 px (war 6) */
  .accent-strip{
    position:fixed; top:0; left:0; right:0; height:2px;
    background: var(--board-accent, var(--accent));
    z-index: 10;
    transition: background var(--dur-base) var(--ease-out);
  }

  /* Board dot (next to title) */
  #boardDot{
    transition: background .35s ease;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
  }

  /* View tabs (Board/Gantt/…), Unterstrich-Variante */
  .view-tab{
    position: relative;
    height: 32px;
    padding: 0 12px;
    font-size: 13px; font-weight: 500;
    background: transparent; color: var(--text-soft);
    border: none; cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .view-tab:hover{ color: var(--text); }
  .view-tab.active{
    background: transparent;
    color: var(--text);
  }
  .view-tab.active::after{
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
  }
  .view-tab + .view-tab{ margin-left: 4px; }

  /* ===== Gantt ===== */
  #ganttRoot{ position:relative; }
  .gantt-toolbar{
    display:flex; align-items:center; gap:8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink:0;
  }
  .gantt-scroll{ flex:1; overflow:auto; position:relative; }
  .gantt-empty{
    display:flex; align-items:center; justify-content:center;
    padding: 48px 24px; color: var(--text-dim); font-size:13px; text-align:center;
  }
  .gantt-row-label{
    position: sticky; left: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 8px 10px;
    font-size: 12px;
    z-index: 3;
    width: 240px;
    min-width: 240px;
    display:flex; align-items:center; gap:8px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-soft);
  }
  .gantt-row-label .gantt-row-list{
    font-size:10px; color: var(--text-dim); text-transform:uppercase; letter-spacing:.05em;
  }
  .gantt-row{
    display:flex; align-items:stretch; min-height: 34px;
  }
  .gantt-lane{
    flex:1; position:relative;
    border-bottom: 1px solid var(--border-soft);
    background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--gantt-day-px) - 1px), var(--border-soft) calc(var(--gantt-day-px) - 1px), var(--border-soft) var(--gantt-day-px));
  }
  .gantt-lane.weekend-shade{
    /* weekend stripes are drawn absolutely */
  }
  .gantt-bar{
    position: absolute; top: 6px; height: 22px;
    background: var(--accent);
    border-radius: 4px;
    cursor: grab;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
    display:flex; align-items:center;
    padding: 0 8px;
    font-size: 11px; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    user-select: none;
    transition: box-shadow .12s;
  }
  .gantt-bar:hover{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 2px var(--text); }
  .gantt-bar.dragging{ cursor: grabbing; opacity:.85; }
  .gantt-bar.milestone{
    background: transparent; color: var(--text);
    width: 14px !important; padding: 0;
    box-shadow: none;
    transform: rotate(45deg); transform-origin: center;
  }
  .gantt-bar.milestone::before{
    content:""; position:absolute; inset:0;
    background: var(--accent);
    border-radius:2px;
  }
  .gantt-bar-handle{
    position: absolute; top:0; bottom:0; width:6px;
    cursor: ew-resize;
  }
  .gantt-bar-handle.left{ left:0; border-radius: 4px 0 0 4px; }
  .gantt-bar-handle.right{ right:0; border-radius: 0 4px 4px 0; }
  .gantt-bar-handle:hover{ background: rgba(0,0,0,.2); }

  .gantt-today-line{
    position: absolute; top:0; bottom:0; width:1.5px;
    background: #c95d5d;
    z-index: 2;
    pointer-events:none;
  }
  .gantt-today-label{
    position: absolute; top: 2px;
    background: #c95d5d; color:#fff;
    font-size: 10px; padding: 1px 5px; border-radius: 3px;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .gantt-axis{
    display:flex; position:sticky; top:0; z-index: 4;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .gantt-axis-corner{
    width: 240px; min-width: 240px;
    border-right: 1px solid var(--border);
    background: var(--surface);
    position: sticky; left: 0; z-index: 5;
  }
  .gantt-axis-scale{ position: relative; flex:1; height: 44px; }
  .gantt-axis-major{
    position: absolute; top:0; height: 22px;
    display:flex; align-items:center;
    padding-left: 6px;
    font-size: 11px; font-weight:600;
    color: var(--text);
    border-right: 1px solid var(--border);
    box-sizing: border-box;
  }
  .gantt-axis-minor{
    position: absolute; top: 22px; height: 22px;
    display:flex; align-items:center; justify-content:center;
    font-size: 10px; color: var(--text-dim);
    border-right: 1px solid var(--border-soft);
    box-sizing: border-box;
  }
  .gantt-axis-minor.is-weekend{ background: var(--surface-2); }
  .gantt-weekend-shade{
    position:absolute; top:0; bottom:0;
    background: var(--surface-2);
    pointer-events:none;
  }

  /* ===== Surfaces ===== */
  /* .glass, flat, no backdrop blur, no shadow (Design Spec v1) */
  .glass{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  /* Sidebar + topbar transition groundwork (flat, no board-tint gradient) */
  #sidebar, .topbar{
    transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  }
  .topbar{
    background: var(--surface);
    border-color: var(--border) !important;
  }
  .glass-strong{
    background: var(--surface-2);
    border:1px solid var(--border);
    border-radius: var(--radius);
  }

  /* ===== Sidebar (Design Spec v1) ===== */
  #sidebar{
    width: 280px;
    flex-shrink: 0;
    height: calc(100dvh - 24px);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: width .45s cubic-bezier(.34,1.4,.64,1),
                margin .45s cubic-bezier(.34,1.4,.64,1),
                opacity .3s,
                background-color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
    background: var(--surface);
    border-color: var(--border) !important;
  }
  #sidebar > .mt-auto{ margin-top: 0 !important; }
  #sidebar.collapsed{ width: 0; margin-right:0 !important; margin-left:0 !important; opacity:0; }
  .side-item{
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer; position: relative;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.3;
    min-height: 28px;
  }
  .side-item:hover{ background: var(--surface-2); color: var(--text); }
  .side-item.active{
    background: var(--accent-soft);
    color: var(--text);
  }
  .side-close{
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:4px;
    background:transparent; border:none; color: var(--text-dim);
    cursor:pointer; opacity:0; transition: opacity .12s, background .12s, color .12s;
    flex-shrink:0;
  }
  /* Board-color dot in the sidebar, also acts as the board-menu trigger */
  .side-board-dot{
    width: 8px; height: 8px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .side-board-dot:hover{
    transform: scale(1.18);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 22%, transparent);
  }
  .side-board-dot:focus-visible{
    outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset: 2px;
  }
  .side-item:hover .side-close{ opacity: 0.8; }
  .side-close:hover{ opacity:1; background: var(--border); color: var(--danger); }

  .side-count{
    margin-left: auto;
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 500;
    min-width: 18px;
    text-align: right;
    flex-shrink: 0;
  }
  .side-item.active .side-count{ color: var(--text-soft); }

  .side-item.active::before{
    content:""; position:absolute; left:0; top:15%; bottom:15%; width:2px;
    /* Per-item accent color (set inline in JS to match each board's theme) */
    background: var(--item-accent, var(--accent));
    border-radius: 0 2px 2px 0;
  }
  /* Einheitliche Icon-Spalte: jedes führende Icon/Pfeil belegt exakt 16px,
     damit Icons UND der Text aller Zeilen bündig starten (Dashboard bis unten). */
  #sidebar .side-item > svg:first-child,
  #sidebar .side-item > .side-lead-ico,
  #sidebar .side-item > .side-board-dot,
  #sidebar .side-section-header > .side-caret,
  #sidebar .trash-open-btn > svg:first-child{ flex: 0 0 16px; box-sizing: content-box; }

  /* Collapsible sidebar sections (Daten, Einstellungen) */
  /* Keine eigenen Trennlinien mehr an den Sektionen, es gibt genau EINE
     einheitliche Linie (an .mt-auto). So sind alle Striche identisch. */
  .side-section{ border-top: none; }
  .side-section:first-child{ border-top: none; }
  .side-section-header{
    width:100%; display:flex; align-items:center; gap:8px;
    padding: 8px 10px;
    background: transparent; border: none; cursor: pointer;
    text-align: left;
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-dim); font-weight: 600;
    transition: color .15s;
  }
  .side-section-header:hover{ color: var(--text); }
  .side-section-header .side-caret{
    transition: transform .2s ease;
    flex-shrink: 0;
  }
  .side-section.collapsed .side-caret{ transform: rotate(-90deg); }
  .side-section-body{
    display: flex; flex-direction: column; gap: 8px;
    padding: 0 14px 12px 14px;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease, padding .2s ease;
  }

  .backup-status-panel{
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .backup-status-banner{
    min-height: 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:6px 7px;
    border:1px solid var(--border-soft);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-soft);
    background: var(--surface);
  }
  .backup-status-banner strong{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .backup-status-banner span{
    text-align:right;
    color: var(--text-dim);
  }
  .backup-status-banner.ok{
    border-color: color-mix(in srgb, var(--success) 42%, var(--border-soft));
  }
  .backup-status-banner.ok strong{ color: var(--success); }
  .backup-status-banner.warn,
  .backup-status-banner.critical{
    border-color: color-mix(in srgb, var(--warning) 55%, var(--border-soft));
    background: color-mix(in srgb, var(--warning) 9%, var(--surface-2));
  }
  .backup-status-banner.warn strong,
  .backup-status-banner.critical strong{ color: var(--warning); }
  .backup-status-row{
    min-height: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--text-dim);
  }
  .backup-status-row strong{
    color: var(--text-soft);
    font-family: 'JetBrains Mono', 'JetBrains Mono NL', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 500;
    text-align: right;
  }
  .backup-status-row strong.ok{ color: var(--success); }
  .backup-status-row strong.warn{ color: var(--warning); }
  .backup-status-action{
    width: 100%;
    min-height: 28px;
    margin-top: 4px;
  }
  .side-section.collapsed .side-section-body{
    max-height: 0; opacity: 0;
    padding-top: 0; padding-bottom: 0;
    pointer-events: none;
  }

  /* ===== List columns (Buckets, Design Spec v1) ===== */
  .list-col{
    width: 300px;
    min-width: 280px;
    max-width: 320px;
    flex-shrink: 0;
    display: flex; flex-direction: column;
    /* Kein Einzelscroll je Spalte. Der ganze Board-Bereich scrollt am Stueck. */
    max-height: none;
  }
  .list-inner{
    padding: 12px;
    border-radius: var(--radius);
    position: relative;
    display: flex; flex-direction: column;
    min-height: 80px;
    background: var(--surface);
    border: 1px solid var(--border);
  }
  /* List header, 1 px top accent, bleibt beim Scrollen oben kleben (Jira-artig) */
  .list-header{
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 1px solid var(--border-soft);
    border-top: 1px solid var(--board-accent, var(--accent));
    background: var(--surface);
    transition: border-top-color var(--dur-base) var(--ease-out);
    cursor: grab;
    min-height: 36px;
    display: flex; align-items: center;
    position: sticky; top: 0; z-index: 5;
  }
  .list-header:active{ cursor: grabbing; }
  .list-grip{
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-dim); opacity: 0.6; flex-shrink: 0;
    cursor: grab;
    padding: 0 2px;
    transition: opacity .15s;
  }
  .list-header:hover .list-grip{ opacity: 1; }
  /* List (bucket) drag state */
  .list-col.list-dragging{
    opacity: 0.4;
  }
  .list-col.list-dragging .list-header{
    cursor: grabbing;
  }
  /* Drop marker between lists */
  .list-drop-hint{
    width: 4px; flex-shrink: 0;
    background: var(--board-accent, var(--accent));
    border-radius: 2px;
    margin: 0 4px;
    align-self: stretch;
  }
  .list-header-inner{
    padding: 8px 12px;
    display: flex; align-items: center; gap: 10px;
    color: var(--text);
    font-size: 13px; font-weight: 600;
    width: 100%;
  }

  .cards-wrap{
    overflow-y:visible;
    padding: 4px 2px 10px 2px;
    display:flex; flex-direction:column; gap:10px;
    flex:1;
  }
  /* Board-Bereich scrollt als Ganzes vertikal, Spalten oben ausgerichtet. */
  #boardRoot{ overflow-y:auto; align-items:flex-start; }

  /* ===== Card, flat (Design Spec v1) ===== */
  .card{
    position: relative;
    padding: 10px 12px;
    border-radius: var(--radius);
    cursor: grab;
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
  }
  .card:hover{
    border-color: var(--accent-muted);
    background: var(--surface-3);
    z-index: 2;
  }
  /* Einhänge-Ziel: eine Karte wird auf diese Karte als Unteraufgabe gezogen */
  .card.card-nest-target{
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  }
  /* Herausloese-Ziel: Karte auf den freien Bereich unten ziehen */
  .add-card.detach-drop-ready{
    outline: 2px dashed var(--accent);
    outline-offset: 2px;
    color: var(--accent);
    background: var(--accent-soft);
  }
  .card .card-title{
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
  }
  .card .card-meta{
    font-size: 11px;
    color: var(--text-dim);
  }
  /* Priority indicator on cards (left-edge stripe), 2 px statt 3 px */
  .card.prio-high{    box-shadow: inset 2px 0 0 var(--danger); }
  .card.prio-medium{  box-shadow: inset 2px 0 0 var(--warning); }
  .card.prio-low{     box-shadow: inset 2px 0 0 var(--text-dim); }

  /* SoA-driven: all linked controls marked "not applicable" -> card is irrelevant */
  .card.is-irrelevant{
    opacity: 0.55;
    background: var(--surface);
  }
  .card.is-irrelevant .card-title{ text-decoration: line-through; color: var(--text-dim); }
  .card.is-irrelevant::after{
    content: 'n/a'; position: absolute; top: 4px; right: 6px;
    font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em;
  }

  /* Due-state tint on cards, dezent, aber sichtbar */
  .card.due-near-end{
    background: var(--warning-bg);
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  }
  .card.due-overdue{
    background: var(--danger-bg);
    border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  }

  /* Card done, Success-BG, Titel durchgestrichen, Opacity dezent runter */
  .card.card-done{
    background: var(--success-bg);
    border-color: color-mix(in srgb, var(--success) 40%, var(--border));
    opacity: 0.75;
  }
  .card.card-done .card-title{
    color: var(--text-dim);
    text-decoration: line-through;
  }
  /* due-state tints should not override the done look */
  .card.card-done.due-overdue,
  .card.card-done.due-near-end{
    background: var(--success-bg);
    border-color: color-mix(in srgb, var(--success) 40%, var(--border));
  }

  /* Offene Fragen an der Karte: sichtbar in JEDER Spalte, unabhängig vom
     Status (auch "In Arbeit" etc.). Eigene Randfarbe + Badge, damit sie
     nicht mit Priorität/Due-State/Done-Look kollidiert. */
  .card.has-open-questions{
    border-color: color-mix(in srgb, var(--question) 55%, var(--border));
  }
  .card-question-badge{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--question-bg);
    color: var(--question);
    border: 1px solid color-mix(in srgb, var(--question) 45%, var(--border));
    margin-right: 6px;
    flex-shrink: 0;
  }

  /* Fragen-Bereich im Karten-Modal (05-modals.js renderQuestions), bewusst
     eigener, klar abgegrenzter Block, getrennt vom Kommentare/Activity-
     Abschnitt. Selbe Frage-Akzentfarbe wie das ❓-Badge auf der Kartenkachel. */
  .mq-box{
    border: 1px solid color-mix(in srgb, var(--question) 45%, var(--border));
    background: var(--question-bg);
    border-radius: var(--radius);
    padding: 12px 14px;
  }
  .mq-head{
    display:flex; align-items:center; gap:8px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
    color: var(--question);
    margin-bottom: 8px;
  }
  .mq-count{
    display:inline-flex; align-items:center; justify-content:center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--question) 30%, var(--surface-2));
    color: var(--text);
    font-size: 11px; font-weight: 700;
  }
  .mq-hint{
    font-size: 12px; color: var(--warning);
    background: var(--warning-bg);
    border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    margin-bottom: 10px;
  }
  .mq-empty{
    font-size: 12px; color: var(--text-dim); font-style: italic;
  }
  .mq-list{ display:flex; flex-direction:column; gap:10px; }
  .mq-item{
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
  }
  .mq-item.mq-open{ border-color: color-mix(in srgb, var(--question) 55%, var(--border)); }
  .mq-item.mq-answered{ border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
  .mq-item-head{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    font-size: 12px; margin-bottom: 4px;
  }
  .mq-number{ font-weight:700; color: var(--text); }
  .mq-author{ color: var(--text-dim); }
  .mq-status{
    margin-left:auto; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    padding: 1px 7px; border-radius: var(--radius-pill);
  }
  .mq-status-open{ background: var(--question-bg); color: var(--question); border:1px solid color-mix(in srgb, var(--question) 45%, var(--border)); }
  .mq-status-answered{ background: var(--success-bg); color: var(--success); border:1px solid color-mix(in srgb, var(--success) 40%, var(--border)); }
  .mq-text{ font-size: 13px; color: var(--text-soft); margin-bottom: 6px; white-space: pre-wrap; }
  .mq-answer{
    font-size: 12px; background: var(--surface); border-radius: var(--radius-sm); padding: 8px 10px; margin-top:4px;
  }
  .mq-answer-label{ color: var(--text-dim); font-size: 11px; margin-bottom:2px; }
  .mq-answer-text{ color: var(--text); white-space: pre-wrap; }
  .mq-answer-form{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
  .mq-answer-btn{ align-self:flex-end; }

  /* Parent / group card, all subtasks completed */
  .card.is-group.parent-done{
    background: var(--success-bg);
    border-left-color: var(--success);
  }
  .card.is-group.parent-done .card-title{
    color: var(--text-dim);
    text-decoration: line-through;
    text-decoration-color: rgba(74,138,107,0.7);
    text-decoration-thickness: 1.5px;
  }
  .card.is-group.parent-done .group-progress-bar{
    background: #4a8a6b;
  }
  .parent-done-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width: 18px; height: 18px; border-radius: 50%;
    background: #4a8a6b; color: #fff;
    flex-shrink: 0;
  }

  /* Parent / group card */
  .card.is-group{
    background: var(--surface-2);
    border-color: var(--border);
    border-left: 3px solid var(--board-accent, var(--accent));
    padding: 8px 10px 8px 10px;
  }
  .card.is-group .card-title{ font-weight: 600; font-size: 13px; }
  .card.is-group .group-meta{
    display:flex; align-items:center; gap:6px;
    font-size: 11px; color: var(--text-dim);
    margin-top: 4px;
  }
  .card.is-group .group-progress{
    flex:1; height:3px; background: var(--border); border-radius:2px; overflow:hidden;
  }
  .card.is-group .group-progress-bar{
    height:100%; background: var(--board-accent, var(--accent));
    transition: width .3s ease;
  }
  .group-caret{
    display:inline-flex; align-items:center; justify-content:center;
    width: 28px; height: 28px; border-radius: 6px;
    margin: -4px -2px -4px -6px;
    cursor: pointer; color: var(--text-dim);
    transition: transform .18s ease, background .12s;
    user-select: none;
    flex-shrink:0;
  }
  .group-caret svg{ width: 15px; height: 15px; }
  .group-caret:hover{ background: var(--border); color: var(--text); }
  .group-caret.collapsed{ transform: rotate(-90deg); }
  /* Child card, slightly indented and smaller */
  .card.is-child{
    margin-left: 18px;
    padding: 8px 10px;
    border-left: 2px solid var(--border-soft);
  }
  .card.is-child:hover{ border-left-color: var(--board-accent, var(--accent)); }

  .card.dragging{
    cursor: grabbing;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    border-color: var(--accent);
    z-index: 1000;
    opacity:.9;
  }
  .card-glow{ display:none; }

  .card-title{ font-size:13px; font-weight:500; color:var(--text); line-height:1.45; }
  .card-head{ display:flex; align-items:flex-start; gap:8px; }
  .card-done.chk{ width:14px; height:14px; margin-top: 2px; flex-shrink:0; cursor: pointer;}
  .card-done.chk.on::after{ font-size: 9px; }
  .card-cl-toggle{
    flex-shrink:0; width: 18px; height: 18px;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-dim); border-radius: 3px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .card-cl-toggle:hover{ background: var(--border); color: var(--text); }
  /* Herausloese-Schaltflaeche auf Unteraufgaben-Karten (auf Hover sichtbar) */
  .card-detach{
    flex-shrink:0; width: 22px; height: 22px;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-soft); border-radius: 4px;
    display:inline-flex; align-items:center; justify-content:center;
    opacity: .55; transition: opacity .12s, background .12s, color .12s;
  }
  .card.is-child:hover .card-detach{ opacity: 1; }
  .card-detach:hover{ background: var(--accent-soft); color: var(--accent); opacity: 1; }
  .card-cl-body{
    margin-top: 8px; padding: 6px 0 4px 22px;
    border-left: 2px solid var(--border);
    margin-left: 3px;
    display:flex; flex-direction:column; gap: 3px;
  }
  .card-cl-row{
    display:flex; align-items:center; gap: 6px;
    font-size: 12px; line-height: 1.3; cursor: pointer;
    padding: 2px 0;
    color: var(--text-soft);
  }
  .card-cl-row:hover{ color: var(--text); }
  .card-cl-row .chk{ width: 14px; height: 14px; flex-shrink: 0; }
  .card-cl-row .chk.on::after{ font-size: 9px; }
  .card-cl-text{ flex: 1; }
  .card-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; font-size:11px; color:var(--text-dim); align-items:center;}
  /* Chips & Badges (Design Spec v1) */
  .chip{
    display: inline-flex; align-items: center; gap: 4px;
    height: 18px; padding: 0 6px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
  }
  .chip.prio-high   { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger); }
  .chip.prio-medium { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
  .chip.prio-low    { background: var(--surface-3);  color: var(--text-soft); border-color: var(--border); }
  .chip.due-overdue { background: var(--danger-bg);  color: var(--danger);  border-color: transparent; }
  .chip.due-week    { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
  .chip.due-ok      { background: var(--surface-2);  color: var(--text-dim); border-color: transparent; }
  .chip.mono-chip   {
    background: var(--surface-3);
    color: var(--text-soft);
    border: 1px solid var(--border-soft);
    border-radius: 2px;
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  }

  /* Labels, muted, flat */
  .label-pill{
    height:4px; min-width:28px; border-radius:2px;
    display:inline-block;
  }
  .lbl-red{    background:#a34848; color:#a34848; }
  .lbl-orange{ background:#a3643a; color:#a3643a; }
  .lbl-yellow{ background:#9a8140; color:#9a8140; }
  .lbl-green{  background:#4a8a6b; color:#4a8a6b; }
  .lbl-teal{   background:#457a7a; color:#457a7a; }
  .lbl-blue{   background:#4a7fb8; color:#4a7fb8; }
  .lbl-purple{ background:#6b5b9a; color:#6b5b9a; }
  .lbl-pink{   background:#9a5a75; color:#9a5a75; }

  .due-chip[data-state="overdue"]{ background: var(--danger-bg);  border-color: transparent; color: var(--danger); }
  .due-chip[data-state="soon"]   { background: var(--warning-bg); border-color: transparent; color: var(--warning); }
  .due-chip[data-state="ok"]     { background: var(--surface-2);  border-color: transparent; color: var(--text-dim); }
  .due-chip[data-state="done"]   { background: transparent; color: var(--text-dim); text-decoration: line-through; }

  /* Checklist progress */
  .progress{
    height:3px; background: var(--border); border-radius:2px; overflow:hidden; margin-top:6px;
  }
  .progress-bar{
    height:100%; border-radius:2px;
    background: var(--accent);
    transition: width .4s ease;
  }

  /* Avatars */
  .avatar{
    width:22px; height:22px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:600; color:#fff;
    border:1.5px solid var(--surface);
  }
  .avatar-stack > *+*{ margin-left:-6px; }

  /* Drop target */
  .drop-hint{
    height: 48px; border-radius: 6px;
    border: 1.5px dashed var(--accent);
    background: var(--surface-2);
  }

  /* Modal */
  .backdrop{
    position:fixed; inset:0; z-index:70;
    background: rgba(0,0,0,.55);
    opacity:0; pointer-events:none;
    transition: opacity .2s ease;
  }
  .backdrop.open{ opacity:1; pointer-events:auto; }
  .modal{
    position: fixed; z-index: 80;
    top: 50%; left: 50%;
    width: min(720px, 92vw);
    max-height: 85vh;
    transform: translate(-50%, -46%);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
  }
  .modal.open{ opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
  /* Card modal: breit, nutzt den verfügbaren Platz; schmaler Rand + mehr Höhe,
     damit man möglichst nicht scrollen muss. */
  #cardModal{
    width: calc(100vw - 3cm);
    max-width: 1800px;
    max-height: 92vh;
    /* Charlie: Rand der Detailansicht war zu dunkel/kontrastarm, jetzt in der
       bestehenden Gold-Akzentfarbe, analog btn-primary / .dash-kpi.is-active. */
    border: 1.5px solid var(--accent);
    box-shadow: var(--shadow-pop), 0 0 24px -10px color-mix(in srgb, var(--accent) 65%, transparent);
  }
  /* Kill horizontal slide: only vertical scroll inside the body. */
  #modalBody{ overflow-x: hidden; }
  /* Card-modal layout: main column may shrink below its content (minmax 0),
     so a wide table / long word can never push the sidebar off-screen. */
  .card-modal-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 28px;
    align-items: start;
  }
  .card-modal-grid > *{ min-width: 0; }
  @media (max-width: 760px){
    .card-modal-grid{ grid-template-columns: 1fr; gap: 20px; }
  }
  /* ===== Dashboard (redesigned: action-first, compact) ===== */
  #dashboardRoot{ overflow-y:auto; padding: 12px 16px 24px; }
  .dash-wrap{ display:flex; flex-direction:column; gap: 12px; width: 100%; }
  .dash-empty{ padding: 48px; text-align:center; color: var(--text-dim); font-size:14px; }

  /* Top row: KPI strip + chart panel side by side */
  .dash-top-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 10px;
    align-items: stretch;
  }
  /* KPI strip, 4 compact tiles in a 2x2 grid within the top row */
  .dash-kpi-strip{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 8px;
  }
  .dash-kpi{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: 64px;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    text-align: left;
  }
  .dash-kpi:hover{ border-color: var(--accent-muted); }
  .dash-kpi.is-active{
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  .dash-kpi.is-active::before{
    content: "";
    position: absolute; left: 0; top: 8%; bottom: 8%; width: 2px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
  }
  .dash-kpi-value{
    font-size: 24px; font-weight: 600; line-height: 1; color: var(--text);
    letter-spacing: -0.01em;
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    font-variant-numeric: tabular-nums;
  }
  .dash-kpi-label{
    font-size: 11px; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
  }
  /* Tone accents on value color */
  .dash-kpi-overdue .dash-kpi-value{ color: var(--danger); }
  .dash-kpi-week    .dash-kpi-value{ color: var(--warning); }
  .dash-kpi-stalled .dash-kpi-value{ color: var(--text); }
  .dash-kpi-done    .dash-kpi-value{ color: var(--success); }

  /* Task list, compact title-focused list */
  .dash-tasklist-wrap{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
  }
  .dash-tasklist-head{
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
  }
  .dash-tasklist-title{ font-weight: 600; }
  .dash-tasklist-clearbtn{
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-soft);
    font-size: 10px;
    padding: 2px 8px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
  }
  .dash-tasklist-clearbtn:hover{ background: var(--surface); color: var(--text); }
  .dash-tasklist{
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
  }
  .dash-tli{
    display: grid;
    grid-template-columns: 18px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    font-size: 12.5px;
    transition: background 80ms ease;
  }
  .dash-tli:last-child{ border-bottom: 0; }
  .dash-tli[data-card]:hover{
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  }
  .dash-tli-prio{ text-align: center; }
  .dash-tli-title{
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dash-tli-board{
    color: var(--text-dim);
    font-size: 11.5px;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dash-tli-board > .dash-dot{ margin-right: 5px; vertical-align: middle; }
  .dash-tli-due{
    font-size: 11.5px;
    color: var(--text-soft);
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
  }
  .dash-tli-due.dash-tl-col-overdue{ color: #a34848; font-weight: 600; }
  .dash-tli-due.dash-tl-col-today{ color: #b89155; font-weight: 600; }
  .dash-tli-due.dash-tl-col-soon{ color: #b89155; }
  .dash-tli-due.dash-tl-col-stalled{ color: var(--text-dim); font-weight: 600; }
  .dash-tli-empty{
    display: block;
    padding: 20px; text-align: center;
    color: var(--text-dim); font-size: 12px;
    cursor: default;
  }

  .dash-prio-dot{
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--border);
    vertical-align: middle;
  }
  .dash-prio-dot.dash-prio-high{ background: #a34848; }
  .dash-prio-dot.dash-prio-medium{ background: #b89155; }
  .dash-prio-dot.dash-prio-low{ background: #7d8590; }
  .dash-tl-done{ color: #4a8a6b; font-weight: 700; font-size: 12px; }

  .dash-empty-row{
    padding: 24px;
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
  }

  .dash-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0;}

  /* Section title (between task list and board grid) */
  .dash-section-title{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    font-weight: 600;
    padding: 6px 2px 0;
  }

  /* ===== Mid-view switch (Boards | Kalender) ===== */
  .dash-mid-switch{
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
    align-self: flex-start;
    margin: 2px 0 4px;
  }
  .dash-mid-tab{
    background: transparent;
    border: 0;
    color: var(--text-soft);
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 100ms, color 100ms;
  }
  .dash-mid-tab:hover{ color: var(--text); }
  .dash-mid-tab.is-active{
    background: var(--surface);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--border);
  }

  /* ===== Monatskalender ===== */
  .dash-calendar{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dash-cal-head{
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px;
  }
  .dash-cal-title{
    font-weight: 700; color: var(--text);
    margin: 0 6px;
    text-transform: capitalize;
    flex: 1;
  }
  .dash-cal-nav{
    background: transparent;
    color: var(--text-soft);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background 80ms;
  }
  .dash-cal-nav:hover{ background: var(--surface-2); color: var(--text); }
  .dash-cal-clear{
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 10.5px;
    color: var(--text-soft);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
  }
  .dash-cal-clear:hover{ background: var(--surface-2); color: var(--text); }
  .dash-cal-weekdays{
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    text-align: center;
    padding: 0 2px;
  }
  .dash-cal-grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
  }
  .dash-cal-day{
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 4px 5px;
    min-height: 44px;
    font-size: 11px;
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    transition: background 80ms, border-color 80ms;
  }
  .dash-cal-day:hover{ background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
  .dash-cal-day.is-other{ opacity: 0.35; }
  .dash-cal-day.is-today{ border-color: var(--accent); }
  .dash-cal-day.is-active{
    background: color-mix(in srgb, var(--accent) 25%, var(--surface-2));
    border-color: var(--accent);
  }
  .dash-cal-day.is-empty{ cursor: default; }
  .dash-cal-day.is-empty:hover{ background: var(--surface-2); }
  .dash-cal-date{
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
  }
  .dash-cal-day.is-today .dash-cal-date{
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px;
  }
  .dash-cal-badges{
    display: flex; gap: 3px; flex-wrap: wrap;
  }
  .dash-cal-badge{
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
  }
  .dash-cal-b-over  { background: #a34848; }
  .dash-cal-b-due   { background: #b89155; }
  .dash-cal-b-later { background: #4a5b72; }

  /* Board grid, tight, single-row tiles */
  .dash-board-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
  }
  .dash-board-tile{
    display: grid;
    grid-template-columns: 10px 1fr auto;
    grid-template-rows: auto auto;
    grid-column-gap: 8px;
    grid-row-gap: 2px;
    align-items: center;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    text-align: left;
    transition: border-color 120ms ease, background 120ms ease;
  }
  .dash-board-tile:hover{
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  }
  .dash-board-tile.is-filter-active{
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .dash-board-dot{
    grid-row: 1 / span 2;
    width: 10px; height: 10px; border-radius: 50%;
  }
  .dash-board-name{
    grid-column: 2 / 3;
    font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis;
  }
  .dash-board-prog{
    grid-column: 3 / 4;
    display: flex; align-items: center; gap: 6px;
  }
  .dash-board-bar{
    display: inline-block;
    width: 48px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
  }
  .dash-board-bar > span{ display: block; height: 100%; border-radius: 2px; }
  .dash-board-pct{ font-size: 10px; color: var(--text-dim); min-width: 28px; text-align: right; }
  .dash-board-sub{
    grid-column: 2 / 4;
    font-size: 10.5px;
    color: var(--text-dim);
    letter-spacing: 0.02em;
  }
  .dash-board-sub .bg-over{ color:#a34848; font-weight:600; margin-right:4px; }
  .dash-board-sub .bg-week{ color:#b89155; font-weight:600; margin-right:4px; }
  .dash-board-sub .bg-open{ color: var(--text-soft); }

  /* Chart panel, donut (prio) or horizontal bars (due) */
  .dash-chart-panel{
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    min-height: 136px;
  }
  .dash-chart-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
  }
  .dash-chart-title{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    font-weight: 600;
  }
  .dash-chart-toggle{
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 5px;
    overflow: hidden;
    background: var(--surface-2);
  }
  .dash-chart-tab{
    font-size: 11px;
    padding: 3px 10px;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    border: 0;
    border-right: 1px solid var(--border);
    transition: background 120ms ease, color 120ms ease;
  }
  .dash-chart-tab:last-child{ border-right: 0; }
  .dash-chart-tab:hover{ color: var(--text); }
  .dash-chart-tab.is-active{
    background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
    color: var(--text);
    font-weight: 600;
  }

  /* Donut body */
  .dash-chart-body{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
  }
  .dash-chart-donut{
    width: 96px;
    height: 96px;
    flex-shrink: 0;
  }
  .dash-chart-seg:hover{ stroke-width: 16 !important; }
  .dash-chart-legend{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .dash-chart-legend-row{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    font-size: 11.5px;
    color: var(--text-soft);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 120ms ease, color 120ms ease;
  }
  .dash-chart-legend-row:hover{ background: var(--surface-2); color: var(--text); }
  .dash-chart-legend-row.is-active{
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
    color: var(--text);
    font-weight: 600;
  }
  .dash-chart-legend-row .tabular-nums{
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
  }
  .dash-chart-empty{
    padding: 10px;
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    text-align: center;
  }

  /* Bars body (due-mode) */
  .dash-chart-bars{
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    justify-content: center;
  }
  .dash-chart-bar-row{
    display: grid;
    grid-template-columns: 80px 1fr 26px;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    font-size: 11px;
    color: var(--text-soft);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    transition: background 120ms ease;
  }
  .dash-chart-bar-row:hover{ background: var(--surface-2); }
  .dash-chart-bar-row.is-active{
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
    color: var(--text);
    font-weight: 600;
  }
  .dash-chart-bar-label{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dash-chart-bar-track{
    display: block;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
  }
  .dash-chart-bar-fill{
    display: block;
    height: 100%;
    border-radius: 4px;
    transition: width 200ms ease, opacity 120ms ease;
  }
  .dash-chart-bar-count{
    text-align: right;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
  }

  @media (max-width: 1100px){
    .dash-top-row{
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @media (max-width: 900px){
    .dash-kpi-strip{ grid-template-columns: repeat(2, 1fr); }
    .dash-tli-board{ display: none; }
  }

  /* ===============================================
     Dashboard v2 (per Screenshot / Design Spec v1)
     =============================================== */
  .dash-v2{
    display: flex; flex-direction: column; gap: 16px;
    padding: 4px 6px 24px;
  }
  .dash-v2 .dash-top-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
  }
  @media (max-width: 1100px){
    .dash-v2 .dash-top-row{ grid-template-columns: 1fr; }
  }
  .dash-v2 .dash-bottom-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
  }
  @media (max-width: 900px){
    .dash-v2 .dash-bottom-row{ grid-template-columns: 1fr; }
  }

  /* Greeting tile */
  .dash-greet{
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    display: flex; flex-direction: column; gap: 18px;
  }
  .dash-greet-head{
    display: flex; align-items: center; justify-content: space-between;
  }
  .dash-greet-date{
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.08em; color: var(--text-dim);
    text-transform: uppercase;
  }
  .dash-greet-live{
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--success);
    background: var(--success-bg);
    border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border));
    border-radius: var(--radius-pill);
    padding: 2px 8px;
  }
  .dash-live-dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--success);
  }
  .dash-greet-title{
    font-size: 24px; font-weight: 600; color: var(--text);
    line-height: 1.2; margin: 0;
  }
  .dash-greet-kpis{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  }
  .dash-mini-kpi{
    display: flex; flex-direction: column; gap: 6px;
    background: transparent; border: 0;
    text-align: left; cursor: pointer;
    padding: 6px 0;
    border-top: 1px solid transparent;
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .dash-mini-kpi:hover{ border-top-color: var(--accent-muted); }
  .dash-mini-kpi.is-active{ border-top-color: var(--accent); }
  .dash-mini-kpi-label{
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-dim); font-weight: 500;
  }
  .dash-mini-kpi-value{
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    font-size: 34px; font-weight: 600; line-height: 1;
    color: var(--text);
    letter-spacing: -0.02em;
  }
  .dash-mini-kpi.tone-overdue .dash-mini-kpi-value{ color: var(--danger); }
  .dash-mini-kpi.tone-week    .dash-mini-kpi-value{ color: var(--accent); }
  .dash-mini-kpi.tone-neutral .dash-mini-kpi-value{ color: var(--text); }
  .dash-mini-kpi.tone-done    .dash-mini-kpi-value{ color: var(--text-dim); }

  /* Donut tile */
  .dash-donut{
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .dash-donut-title{
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-dim);
  }
  .dash-donut-body{
    display: grid; grid-template-columns: 150px 1fr; gap: 16px;
    align-items: center;
  }
  .dash-donut-svg{ flex-shrink: 0; }
  .dash-donut-svg .dash-donut-num{
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    font-size: 22px; font-weight: 600;
    fill: var(--text);
  }
  .dash-donut-svg .dash-donut-sub{
    font-size: 9px; letter-spacing: 0.1em;
    fill: var(--text-dim);
  }
  .dash-donut-legend{
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
  }
  .dash-donut-legend > li{
    display: grid;
    grid-template-columns: 10px 1fr auto auto;
    gap: 8px; align-items: center;
    font-size: 12.5px;
  }
  .dash-donut-legend .dash-dot{ width: 8px; height: 8px; border-radius: 50%; }
  .dash-donut-legend .lbl{ color: var(--text); }
  .dash-donut-legend .n{ color: var(--text); font-weight: 500; }
  .dash-donut-legend .p{ color: var(--text-dim); }

  /* Open-cards table */
  .dash-open{
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .dash-open-head{
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
  }
  .dash-open-title{
    font-size: 14px; font-weight: 600; color: var(--text);
  }
  .dash-count{
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 11px; font-weight: 500;
    color: var(--text-dim);
    background: var(--surface-3);
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
  }
  .dash-tabs{ display: inline-flex; gap: 4px; }
  .dash-tab{
    background: transparent; border: 0;
    color: var(--text-dim);
    font-size: 12px; font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .dash-tab:hover{ color: var(--text); }
  .dash-tab.is-active{
    color: var(--text);
    background: var(--surface-3);
  }
  .dash-open-tbl{
    width: 100%; border-collapse: collapse;
    font-size: 13px;
  }
  .dash-open-tbl thead th{
    text-align: left;
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-dim);
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-soft);
  }
  .dash-open-tbl thead th.dash-open-th-due{ text-align: right; }
  .dash-open-tbl thead th.dash-open-th-chk{ width: 32px; padding-right: 0; }
  .dash-open-tbl tbody tr{
    height: 38px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .dash-open-tbl tbody tr:hover{ background: var(--surface-3); }
  .dash-open-tbl tbody td{
    padding: 8px 18px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
    color: var(--text);
  }
  .dash-open-tbl tbody tr:last-child td{ border-bottom: 0; }
  .dash-open-chk{ width: 32px; padding-right: 0; }
  .dash-chk{
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 3px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    vertical-align: middle;
  }
  .dash-chk.on{
    background: var(--accent); border-color: var(--accent);
  }
  .dash-open-title{ font-weight: 500; }
  .dash-open-board{ display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 12.5px; }
  .dash-open-board .truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
  .dash-chip-list{
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--text);
    background: var(--surface-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
  }
  .dash-prio-chip{
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 500;
  }
  .dash-prio-chip .dash-prio-dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
  }
  .dash-prio-chip.prio-high  { color: var(--danger); }
  .dash-prio-chip.prio-medium{ color: var(--warning); }
  .dash-prio-chip.prio-low   { color: var(--text-soft); }
  .dash-open-due{ text-align: right; font-size: 12.5px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
  .dash-due-overdue{ color: var(--danger); font-weight: 500; }
  .dash-due-today  { color: var(--danger); font-weight: 500; }
  .dash-due-soon   { color: var(--warning); }
  .dash-due-ok     { color: var(--text-soft); }
  .dash-due-none   { color: var(--text-dim); }
  .dash-open-empty{
    text-align: center; padding: 24px; color: var(--text-dim); font-size: 12.5px;
  }

  /* Bottom panels (Boards + Activity) */
  .dash-panel{
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .dash-panel-head{
    display: flex; align-items: center; justify-content: space-between;
  }
  .dash-panel-head strong{ font-size: 13px; font-weight: 600; color: var(--text); }
  .dash-panel-head .dash-count.text-dim{
    background: transparent; color: var(--text-dim); padding: 0;
  }
  .dash-boards-list{
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
  }
  .dash-board-row{
    display: grid;
    grid-template-columns: 10px 1fr minmax(100px, 160px) auto;
    gap: 10px; align-items: center;
    cursor: pointer;
    padding: 4px 0;
  }
  .dash-board-name{ color: var(--text); font-size: 13px; }
  .dash-board-bar{
    display: inline-block;
    height: 5px;
    background: var(--surface-3);
    border-radius: 3px;
    overflow: hidden;
  }
  .dash-board-bar > span{
    display: block; height: 100%;
    border-radius: 3px;
    transition: width var(--dur-base) var(--ease-out);
  }
  .dash-board-count{ color: var(--text-dim); font-size: 12px; }
  .dash-activity-list{
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
  }
  .dash-activity-row{
    display: grid;
    grid-template-columns: 60px 10px 1fr;
    gap: 8px; align-items: center;
    font-size: 13px;
    color: var(--text-soft);
  }
  .dash-activity-time{ color: var(--text-dim); font-size: 11.5px; }
  .dash-activity-text{
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dash-activity-text strong{ color: var(--text); font-weight: 500; }
  .dash-activity-empty{ color: var(--text-dim); font-size: 12.5px; }

  /* ===== Dashboard v3, compact, action-first ===== */
  .dash-v3{ display:flex; flex-direction:column; gap: 14px; width:100%; }
  /* Header bar */
  .dash-headbar{
    display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  }
  .dash-hb-left{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .dash-hb-title{ font-size: 20px; font-weight: 700; color: var(--text); line-height:1.1; margin:0; }
  .dash-hb-sub{ font-size: 12.5px; color: var(--text-dim); }
  .dash-hb-sub .dash-hb-over{ color: var(--danger); font-weight:600; }
  .dash-hb-right{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
  .dash-hb-date{ font-size: 11px; letter-spacing:.06em; color: var(--text-dim); text-transform:uppercase; }
  /* KPI chips */
  .dash-chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .dash-chip{
    display:flex; align-items:baseline; gap:7px;
    padding: 7px 12px; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--border);
    cursor:pointer; transition: border-color .12s, background .12s;
  }
  .dash-chip:hover{ border-color: var(--accent-muted); }
  .dash-chip.is-active{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
  .dash-chip-val{ font-size: 17px; font-weight: 700; color: var(--text); line-height:1; }
  .dash-chip-lbl{ font-size: 11px; letter-spacing:.04em; color: var(--text-dim); text-transform:uppercase; white-space:nowrap; }
  .dash-chip.tone-overdue .dash-chip-val{ color: var(--danger); }
  .dash-chip.tone-today   .dash-chip-val{ color: var(--warning); }
  .dash-chip.tone-week    .dash-chip-val{ color: var(--accent); }
  .dash-chip.tone-neutral .dash-chip-val{ color: var(--text); }
  .dash-chip.tone-done    .dash-chip-val{ color: var(--success); }
  /* Main two-column area */
  .dash-main{ display:grid; grid-template-columns: 1fr 320px; gap: 14px; align-items:start; }
  .dash-side{ display:flex; flex-direction:column; gap: 14px; }
  .dash-v3 .dash-open{ margin:0; }
  /* Side board rows with next action */
  .dash-v3 .dash-board-row{
    display:flex; flex-direction:column; gap:5px;
    padding: 8px 6px; border-radius: 8px; cursor:pointer;
    border-bottom: 1px solid var(--border-soft);
  }
  .dash-v3 .dash-board-row:last-child{ border-bottom:0; }
  .dash-v3 .dash-board-row:hover{ background: var(--surface-2); }
  .dash-br-top{ display:flex; align-items:center; gap:8px; }
  .dash-br-top .dash-board-name{ flex:1; min-width:0; font-size: 13px; font-weight:500; }
  .dash-br-top .dash-board-count{ color: var(--text-dim); font-size: 11.5px; flex-shrink:0; }
  .dash-br-over{ color: var(--danger); font-weight:700; }
  .dash-v3 .dash-board-bar{ width:100%; height:4px; background: var(--surface-3); border-radius:2px; overflow:hidden; }
  .dash-v3 .dash-board-bar > span{ display:block; height:100%; border-radius:2px; }
  .dash-br-next{
    font-size: 11.5px; color: var(--text-soft);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  @media (max-width: 880px){
    .dash-main{ grid-template-columns: 1fr; }
    .dash-side{ flex-direction:row; flex-wrap:wrap; }
    .dash-side > .dash-panel{ flex:1; min-width: 240px; }
  }
  /* Upcoming agenda (solo-friendly: deadlines ahead) */
  .dash-up-list{ list-style:none; margin:0; padding:0; }
  .dash-up-group{
    font-size: 10.5px; letter-spacing:.06em; text-transform:uppercase;
    color: var(--text-dim); font-weight:600;
    margin: 10px 0 3px; padding-bottom: 2px;
    border-bottom: 1px solid var(--border-soft);
  }
  .dash-up-group:first-child{ margin-top: 0; }
  .dash-up-row{
    display:flex; align-items:center; gap:8px;
    padding: 5px 4px; border-radius: 6px; cursor:pointer;
  }
  .dash-up-row:hover{ background: var(--surface-2); }
  .dash-up-row .dash-prio-dot{ flex-shrink:0; }
  .dash-up-title{ flex:1; min-width:0; font-size: 12.5px; color: var(--text); }
  .dash-up-due{ flex-shrink:0; font-size: 11.5px; }

  /* ===== SoA view ===== */
  #soaRoot{ display:flex; flex-direction:column; }
  .soa-toolbar{
    display:flex; align-items:center; gap:16px;
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    background: var(--surface); flex-shrink:0;
  }
  .soa-stats{ display:flex; gap: 18px; }
  .soa-stat{ display:flex; flex-direction:column; align-items:flex-start; min-width: 70px; }
  .soa-stat-v{ font-size: 20px; font-weight: 700; color: var(--text); line-height: 1; }
  .soa-stat-l{ font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-top: 4px; white-space: nowrap; }
  .soa-actions{ margin-left:auto; display:flex; gap: 8px; align-items:center; }
  .soa-search{ width: 220px; }
  .soa-filters{ padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink:0;}
  .soa-filter-row{ display:flex; flex-wrap:wrap; gap: 6px; align-items:center; }
  .soa-scroll{ flex:1; overflow:auto; }
  .soa-table{ width:100%; border-collapse: collapse; font-size: 13px; }
  .soa-table thead th{
    position: sticky; top: 0; background: var(--surface);
    padding: 8px 10px; text-align: left;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-dim); font-weight: 500;
    border-bottom: 1px solid var(--border);
    z-index: 2;
  }
  .soa-table tbody tr{ height: 32px; }
  .soa-table tbody td{
    padding: 6px 10px; border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
  }
  .soa-table tbody tr:hover td{ background: var(--surface-2);}
  .soa-id{ font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text); }
  .soa-title{ font-weight: 600; color: var(--text); }
  .soa-desc{ font-size: 11px; color: var(--text-dim); margin-top: 2px; line-height: 1.4; }
  .soa-justify{ margin-top: 6px; }
  .soa-justify summary{ font-size: 11px; color: var(--text-soft); cursor: pointer; }
  .soa-justify summary:hover{ color: var(--text); }
  .soa-just-input{ margin-top: 4px; font-size: 12px; min-height: 60px; }
  .soa-auto-hint{
    margin-top: 6px; padding: 5px 8px; font-size: 11px;
    background: #4a8a6b22; color: #4a8a6b; border: 1px solid #4a8a6b55;
    border-radius: 4px; cursor: pointer;
  }
  .soa-auto-hint:hover{ background: #4a8a6b44; }
  .soa-select{ font-size: 12px; padding: 4px 6px; }
  .soa-lastrev{ font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap;}
  .soa-linked{ display:flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
  .soa-card-chip{
    display:inline-flex; align-items:center; gap: 4px;
    font-size: 11px; padding: 2px 6px 2px 6px;
    border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border-soft);
    cursor: pointer;
  }
  .soa-card-chip:hover{ background: var(--border-soft); }
  .soa-card-chip.done{ background: #4a8a6b22; border-color: #4a8a6b55; color: #4a8a6b; text-decoration: line-through; }
  .soa-card-unlink{ background:transparent; border:none; cursor:pointer; color:var(--text-dim); padding: 0 2px;}
  .soa-card-unlink:hover{ color: #a34848; }
  .soa-link-btn{ font-size: 11px; padding: 2px 8px; }
  .soa-link-pop{
    position: fixed; z-index: 100; width: 340px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.3);
    display:flex; flex-direction:column;
  }
  .soa-link-head{ padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 12px; color: var(--text);}
  .soa-link-filter{ margin: 8px 10px; }
  .soa-link-list{ flex:1; max-height: 280px; overflow:auto; padding: 0 10px 10px 10px;}
  .soa-link-row{ display:flex; align-items:center; gap: 8px; font-size: 12px; padding: 4px 6px; border-radius: 4px; cursor: pointer; }
  .soa-link-row:hover{ background: var(--surface-2); }
  .soa-link-foot{ padding: 8px 10px; border-top: 1px solid var(--border); display:flex; justify-content: flex-end;}

  /* Template modal: wider too, so all templates fit in a table */
  #templateModal{
    width: calc(100vw - 4cm);
    max-width: 1200px !important;
  }
  /* Template table */
  .tpl-table{ width: 100%; border-collapse: separate; border-spacing: 0; }
  .tpl-table th, .tpl-table td{
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
    text-align: left; vertical-align: top;
    font-size: 13px;
  }
  .tpl-table thead th{
    font-size: 11px; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
  }
  .tpl-table tbody tr:hover{ background: var(--surface-2); }
  .tpl-table td .tpl-buckets{
    font-size: 11px; color: var(--text-dim); margin-top:4px;
  }
  .tpl-dot{ display:inline-block; width:10px; height:10px; border-radius:3px; flex-shrink:0; }

  /* Buttons, flat (Design Spec v1) */
  .btn{
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius);
    font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }
  .btn:hover{ background: var(--surface-3); border-color: var(--accent-muted); }
  .btn:active{ background: var(--surface-3); }
  .btn:focus-visible{
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }

  .btn-primary{
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
  }
  .btn-primary:hover{ background: var(--accent-strong); border-color: var(--accent-strong); }

  /* Ghost variant, for icon-only buttons */
  .btn-ghost{
    background: transparent;
    border-color: transparent;
    width: 32px; height: 32px; padding: 0;
    justify-content: center;
    color: var(--text-soft);
  }
  .btn-ghost:hover{ background: var(--surface-2); border-color: transparent; color: var(--text); }

  /* Danger */
  .btn-danger{
    background: transparent;
    border-color: var(--border);
    color: var(--danger);
  }
  .btn-danger:hover{ background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

  /* Inputs (Design Spec v1) */
  .input, .textarea, select.input {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
  }
  .input::placeholder, .textarea::placeholder { color: var(--text-dim); }
  .input:focus, .textarea:focus, select.input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .textarea {
    height: auto;
    padding: 8px 10px;
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
  }

  /* Checkbox */
  .chk{
    width:16px; height:16px; border-radius:3px;
    border:1.5px solid var(--border);
    background: var(--surface);
    cursor:pointer; position:relative;
    transition: background .12s, border-color .12s;
    flex-shrink:0;
  }
  .chk:hover{ border-color: var(--text-dim); }
  .chk.on{
    background: var(--accent);
    border-color: var(--accent);
  }
  .chk.on::after{
    content:"ok"; position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:11px; font-weight:700;
  }
  /* Checklist drag & drop reordering */
  .chk-drag{
    flex-shrink:0; cursor:grab; user-select:none;
    color: var(--text-dim); font-size:14px; line-height:1;
    padding:2px 2px; border-radius:4px;
    opacity:0; transition: opacity .12s, color .12s, background .12s;
  }
  .chk-row:hover .chk-drag{ opacity:.7; }
  .chk-drag:hover{ opacity:1; color: var(--text); background: var(--surface-2); }
  .chk-drag:active{ cursor:grabbing; }
  .chk-row.chk-dragging{ opacity:.45; }
  .chk-row.chk-drop-before{ box-shadow: inset 0 2px 0 0 var(--accent); }
  .chk-row.chk-drop-after{ box-shadow: inset 0 -2px 0 0 var(--accent); }
  /* Mehrzeiliges, mitwachsendes Checklisten-Textfeld */
  .chk-input{
    padding:0; margin:0; border:0; min-height:20px;
    font: inherit; line-height:1.35; color: inherit;
    display:block;
  }
  .chk-input::placeholder{ color: var(--text-dim); }
  /* Unteraufgaben-Abschnitt als Drop-Ziel für Checklistenpunkte */
  .subtask-drop-active{
    outline:2px dashed var(--accent); outline-offset:3px;
    border-radius: var(--radius);
    background: var(--accent-soft);
  }

  /* Search filter pills */
  .pill{
    padding: 3px 8px; border-radius:4px; font-size:12px;
    background: var(--surface-2); border:1px solid var(--border);
    cursor:pointer; transition: background .12s;
    display:inline-flex; align-items:center; gap:6px;
    color: var(--text-soft);
  }
  .pill:hover{ background: var(--border-soft); }
  .pill.active{ background: var(--accent); border-color: var(--accent); color:#fff;}

  /* Filter button badge */
  #filterBtn{ position: relative; display: inline-flex; align-items: center; gap: 4px; }
  #filterBtn.active{ border-color: var(--accent); color: var(--accent); }
  .filter-count{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--accent); color: #fff;
    border-radius: 8px; font-size: 10px; font-weight: 600;
    line-height: 1;
  }

  /* Filter panel (expandable below topbar) */
  .filter-panel{
    margin-top: 8px; padding: 0;
    border-radius: 6px;
    overflow: hidden;
  }
  .filter-panel-inner{
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 18px; padding: 12px 14px;
  }
  .filter-section{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .filter-section.filter-actions{ margin-left: auto; align-self: center; }
  .filter-section-hdr{
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-dim);
  }
  .filter-section-pills{ display: flex; flex-wrap: wrap; gap: 6px; }

  /* Shortcut hint */
  .kbd{
    display:inline-block; padding: 1px 6px; font-size: 11px; font-family: 'JetBrains Mono', monospace;
    background: var(--surface-2); border:1px solid var(--border);
    border-radius:3px; color:var(--text-soft);
  }

  /* Onboarding */
  #onboarding{
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    background: var(--bg);
  }
  .onboard-title{
    font-size: clamp(40px, 7vw, 80px);
    font-weight: 700; letter-spacing: -0.03em;
    color: var(--text);
    line-height:1;
  }

  /* Toast */
  #toast{
    position:fixed; bottom:20px; left:50%; transform: translateX(-50%) translateY(40px);
    padding: 10px 16px; border-radius:5px;
    background: var(--surface); border:1px solid var(--border); color:var(--text);
    font-size:13px; z-index:200;
    opacity:0; transition: opacity .2s, transform .2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
  }
  #toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

  /* Text helpers */
  .text-dim{ color: var(--text-dim); }
  .text-soft{ color: var(--text-soft); }
  .contenteditable-title{
    outline:none; border-radius:6px; padding:2px 4px;
    transition: background .2s;
  }
  .contenteditable-title:focus{ background: rgba(139,92,246,.12); }
  /* Sticky-Kopf: Titel + „in Liste …" bleiben beim Scrollen oben stehen. */
  #modalBody{ padding-top: 0 !important; }
  .card-modal-head{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 6;
    margin: 0 -24px 16px;
    padding: 20px 24px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .card-modal-title-wrap{
    flex: 1;
    min-width: 0;
  }
  .card-modal-title-input{
    display: block;
    width: 100%;
    min-height: 72px;
    max-height: 220px;
    resize: vertical;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
    font-size: 20px;
    font-weight: 600;
    background: transparent;
    border-color: transparent;
    padding: 8px 10px;
  }

  /* Board theme picker, muted professional tones */
  .theme-swatch{
    width:40px; height:40px; border-radius:6px; cursor:pointer;
    border:2px solid var(--border); transition: border-color .15s;
    position:relative;
  }
  .theme-swatch:hover{ border-color: var(--text-dim); }
  .theme-swatch.active{ border-color: var(--text); }
  .theme-swatch.sw-slate   { background:#475569; }
  .theme-swatch.sw-navy    { background:#1e3a5f; }
  .theme-swatch.sw-steel   { background:#4a7fb8; }
  .theme-swatch.sw-azure   { background:#3B82F6; }
  .theme-swatch.sw-forest  { background:#3d5a47; }
  .theme-swatch.sw-graphite{ background:#3a3f47; }
  .theme-swatch.sw-sand    { background:#b59a6e; }
  .theme-swatch.sw-rust    { background:#c2451c; }

  /* Dropdown */
  .menu{
    position:absolute; z-index:120;
    min-width: 180px; padding:4px;
    background: var(--surface);
    border:1px solid var(--border);
    border-radius:6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    opacity:0; transform: translateY(-4px); pointer-events:none;
    transition: opacity .15s, transform .15s ease;
  }
  .menu.open{ opacity:1; transform: translateY(0); pointer-events:auto;}
  .menu button{
    display:flex; align-items:center; gap:8px;
    width:100%; text-align:left; padding: 7px 10px;
    border-radius:4px; font-size:13px; color:var(--text-soft);
    background:transparent; border:none; cursor:pointer;
  }
  .menu button:hover{ background: var(--surface-2); color:var(--text); }

  /* Confetti */
  .confetti{
    position:fixed; width:8px; height:8px; pointer-events:none;
    z-index: 9999; border-radius:2px;
  }

  /* IT-Netting Organigramm, Ebenen bleiben nebeneinander (horizontales Scrollen statt Umbruch) */
  .itn-level-scroll{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    justify-content: safe center;
    scroll-snap-type: x proximity;
  }
  .itn-level-scroll > .itn-node{ scroll-snap-align: center; }
  @media (max-width: 640px){
    .itn-level-scroll{
      flex-wrap: wrap;
      overflow-x: visible;
      justify-content: center;
    }
  }

  /* Utility */
  .no-scrollbar::-webkit-scrollbar{ display:none; }
  .truncate-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden;}
  .hide{ display:none !important; }

  /* Markdown preview */
  .md{ font-size:14px; color:var(--text-soft); line-height:1.6; min-width:0; overflow-wrap:anywhere; word-break:break-word;}
  .md table{ display:block; max-width:100%; overflow-x:auto; }
  .md h1,.md h2,.md h3{ color:var(--text); margin:0.6em 0 0.3em; font-weight:600;}
  .md h1{ font-size:20px;} .md h2{ font-size:17px;} .md h3{ font-size:14px;}
  .md p{ margin: 0.4em 0;}
  .md ul,.md ol{ margin:0.4em 0; padding-left:1.4em;}
  .md ul{ list-style: disc; }
  .md ol{ list-style: decimal; }
  .md li{ margin: 0.15em 0; }
  .md code{ background: var(--surface-2); border:1px solid var(--border-soft); padding:1px 5px; border-radius:3px; font-family:'JetBrains Mono',monospace; font-size:12px;}
  .md a{ color:var(--accent); text-decoration:underline;}
  .md blockquote{ border-left:3px solid var(--border); padding-left:12px; color:var(--text-dim); margin: 0.4em 0;}
  /* Re-enable inline markers that Tailwind's CSS reset strips off */
  .md strong, .md b{ font-weight: 700; color: var(--text); }
  .md em, .md i{ font-style: italic; }
  .md u{ text-decoration: underline; }
  .md s, .md del{ text-decoration: line-through; }
  .md hr{ border: 0; border-top: 1px solid var(--border); margin: 0.8em 0; }
  .md table{ border-collapse: collapse; margin: 0.4em 0; }
  .md th, .md td{ border: 1px solid var(--border); padding: 4px 8px; }
  .md pre{ background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 4px; padding: 8px 10px; overflow-x: auto; margin: 0.4em 0; }
  .md pre code{ background: transparent; border: 0; padding: 0; }

  /* Attachment thumbs */
  .attach-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:8px;}
  .attach-thumb{
    position:relative; aspect-ratio: 4/3; border-radius:5px; overflow:hidden;
    border:1px solid var(--border); cursor:pointer;
  }
  .attach-thumb:hover{ border-color: var(--text-dim); }
  .attach-thumb img{ width:100%; height:100%; object-fit:cover;}

  /* Tilt */
  .tilt-wrap{ perspective: 800px; }

  /* ---------- Recurrence ---------- */
  /* Card-meta chip: subtle accent tint so recurring cards are spotted at a glance */
  .chip.rec-chip{
    background: color-mix(in srgb, var(--board-accent, var(--accent)) 18%, var(--surface-2));
    border-color: color-mix(in srgb, var(--board-accent, var(--accent)) 38%, var(--border-soft));
    color: var(--text-soft);
  }
  .chip.rec-chip svg{ opacity:.9; }

  /* Modal aside: recurrence block */
  .rec-card{
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:6px;
    background: var(--surface-2);
  }
  .rec-card.rec-editor{ padding:10px; }
  .rec-history{ border-top:1px dashed var(--border); padding-top:6px; }
  .rec-history-list{ max-height:140px; overflow-y:auto; }

  /* Editor pattern buttons */
  .rec-mode-btn{
    flex:1; padding:4px 6px; font-size:11px;
    background: var(--surface); border:1px solid var(--border); border-radius:4px;
    color: var(--text-soft); cursor:pointer; transition: background .15s, border-color .15s;
  }
  .rec-mode-btn:hover{ border-color: var(--text-dim); color: var(--text); }
  .rec-mode-btn.on{
    background: color-mix(in srgb, var(--board-accent, var(--accent)) 22%, var(--surface-2));
    border-color: var(--board-accent, var(--accent));
    color: var(--text);
  }
  /* Weekday toggles */
  .rec-wd-btn{
    min-width:28px; padding:3px 6px; font-size:11px;
    background: var(--surface); border:1px solid var(--border); border-radius:4px;
    color: var(--text-soft); cursor:pointer;
  }
  .rec-wd-btn:hover{ border-color: var(--text-dim); color: var(--text); }
  .rec-wd-btn.on{
    background: color-mix(in srgb, var(--board-accent, var(--accent)) 28%, var(--surface-2));
    border-color: var(--board-accent, var(--accent));
    color: var(--text);
  }

  /* App logo as Settings trigger (top-left of sidebar) */
  .app-logo-btn{
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background 140ms ease;
    border-radius: 10px;
  }
  .app-logo-btn:hover{
    background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  }
  .app-logo-btn:focus-visible{
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: -2px;
  }

  /* Visual feedback when a file is dragged over a card tile */
  .card.card-drop-ready{
    outline: 2px dashed color-mix(in srgb, var(--accent) 75%, transparent);
    outline-offset: 2px;
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  }
  /* „+ Karte hinzufügen": Hover = Akzent-Highlight (NIE auf Weiß setzen, sonst unsichtbar) */
  .add-card{ width:100%; color: var(--text-soft); border:1px solid transparent; }
  .add-card:hover{
    color: var(--accent);
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  }
  /* Tagesaufgaben: verknüpfte Projekt-Aufgabe (eine Wahrheit, gespiegelt) */
  /* KEIN farbiger Links-Balken, der würde sich mit dem Prioritäts-Strich (Hoch=rot)
     mischen. Die Verknüpfung erkennt man am ->-Hinweis unten (.mirror-origin). */
  .mirror-card{ cursor: pointer; }
  .mirror-card .card-title{ font-size: 13px; }
  .mirror-card.card-done .card-title{ text-decoration: line-through; color: var(--text-dim); }
  .mirror-origin{ display:flex; align-items:center; gap:6px; font-size:11px; color: var(--text-dim); margin-top:4px; }
  .mirror-origin .dash-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .mirror-link-ico{ color: var(--accent); font-weight:700; flex-shrink:0; }
  /* „In Tagesaufgaben"-Hinweis auf Projekt-Karten */
  .daily-link-chip{ display:inline-flex; align-items:center; gap:3px; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight:600; }
  .daily-link-chip svg{ flex-shrink:0; }
  /* ->-Verknüpfungs-Marker in Tabelle & Gantt */
  .daily-mark{ color: var(--accent); font-weight:700; margin-left:5px; font-size:12px; cursor:default; }
  /* Stundenerfassung: leere Wochenend-Tage dezent (kein Regelarbeitstag) */
  .ts-wk-day.ts-wk-weekend.ts-wk-empty{ opacity:.5; }

  /* ===== Archiv (erledigte Aufgaben als flache Tabelle) ===== */
  .arch-page{ max-width: 980px; margin: 0 auto; padding: 4px 2px 24px; }
  .arch-head{ display:flex; align-items:baseline; gap:10px; margin:2px 2px 12px; }
  .arch-head strong{ font-size:18px; color:var(--text); }
  .arch-head span{ font-size:12px; color:var(--text-dim); }
  .arch-empty{ color:var(--text-dim); padding:28px 8px; text-align:center; font-size:14px; }
  .arch-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
  .arch-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); padding:6px 10px; border-bottom:1px solid var(--border); font-weight:600; }
  .arch-table td{ padding:9px 10px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }
  .arch-row{ cursor:pointer; transition:background .12s; }
  .arch-row:hover td{ background:var(--surface-3, rgba(127,127,127,.10)); }
  .arch-title{ font-weight:600; }
  .arch-src{ color:var(--text-dim); white-space:nowrap; }
  .arch-src .arch-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle; }
  .arch-date{ color:var(--text-dim); white-space:nowrap; }
  .arch-avs{ display:inline-flex; }
  .arch-av{ width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:9px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-left:-5px; border:1.5px solid var(--surface,#222); }
  .arch-av:first-child{ margin-left:0; }
  .arch-av-more{ background:var(--surface-3,#555); color:var(--text); }
  .arch-c-chk{ width:54px; }
  .arch-check{ width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center;
    background:#1f9d57; color:#fff; border:1px solid #1f9d57; transition:background .12s, opacity .12s; }
  .arch-check:hover{ background:transparent; color:#1f9d57; }
  .arch-row:hover .arch-check{ box-shadow:0 0 0 2px color-mix(in srgb,#1f9d57 30%, transparent); }

  /* ===== Kalender (Wochenansicht, Outlook-Stil) ===== */
  .cal-wrap{ display:flex; flex-direction:column; height:100%; min-height:0; }
  .cal-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 10px; flex-wrap:wrap; }
  .cal-nav{ display:flex; align-items:center; gap:6px; }
  .cal-btn{ padding:5px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--text); font-size:13px; }
  .cal-btn:hover{ border-color:var(--accent); }
  .cal-range{ margin-left:8px; font-weight:600; color:var(--text); }
  .cal-seg{ display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .cal-seg-btn{ padding:5px 12px; background:var(--surface-2); color:var(--text-dim); font-size:13px; }
  .cal-seg-btn.is-active{ background:var(--accent); color:#fff; }
  .cal-body{ display:flex; gap:12px; flex:1; min-height:0; }
  .cal-palette{ width:230px; flex-shrink:0; overflow-y:auto; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); padding:8px; }
  .cal-pal-head{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin:2px 2px 8px; }
  .cal-pal-empty{ color:var(--text-dim); font-size:12px; padding:12px 4px; text-align:center; }
  .cal-task{ border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; background:var(--surface); padding:7px 9px; margin-bottom:6px; cursor:grab; }
  .cal-task:hover{ border-color:var(--accent); }
  .cal-task.dragging{ opacity:.5; }
  .cal-task-title{ font-size:13px; font-weight:600; color:var(--text); }
  .cal-task-meta{ font-size:11px; color:var(--text-dim); margin-top:2px; }
  .cal-grid-wrap{ flex:1; min-width:0; overflow:auto; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }
  .cal-heads{ display:grid; position:sticky; top:0; z-index:3; background:var(--surface-2); border-bottom:1px solid var(--border); }
  .cal-corner{ }
  .cal-day-head{ text-align:center; padding:7px 4px; border-left:1px solid var(--border); display:flex; flex-direction:column; gap:1px; }
  .cal-day-head.cal-weekend{ background:color-mix(in srgb, var(--text-dim) 7%, transparent); }
  .cal-day-head.cal-today{ background:color-mix(in srgb, var(--accent) 16%, transparent); }
  .cal-dh-wd{ font-size:12px; font-weight:700; color:var(--text); }
  .cal-dh-date{ font-size:11px; color:var(--text-dim); }
  .cal-grid{ display:flex; }
  .cal-gutter{ width:54px; flex-shrink:0; }
  .cal-hour{ display:flex; align-items:flex-start; justify-content:flex-end; padding:2px 6px 0 0; font-size:11px; color:var(--text-dim); border-top:1px solid var(--border); box-sizing:border-box; }
  .cal-days{ display:grid; flex:1; }
  .cal-day-col{ position:relative; border-left:1px solid var(--border); min-width:74px; }
  .cal-day-col.cal-weekend{ background:color-mix(in srgb, var(--text-dim) 5%, transparent); }
  .cal-day-col.cal-today{ background:color-mix(in srgb, var(--accent) 6%, transparent); }
  .cal-day-col.cal-drop{ background:color-mix(in srgb, var(--accent) 14%, transparent); }
  .cal-line{ position:absolute; left:0; right:0; border-top:1px solid var(--border); pointer-events:none; }
  .cal-block{ position:absolute; left:3px; right:3px; background:#868b92; color:#fff; border-radius:6px; padding:3px 6px; overflow:hidden; cursor:grab; box-shadow:0 1px 4px rgba(0,0,0,.25); border:1px solid #767b83; }
  .cal-pal-hint{ margin-top:10px; padding:8px; font-size:11px; color:var(--text-dim); border-top:1px dashed var(--border); line-height:1.4; }
  .cal-block.dragging{ opacity:.5; }
  .cal-bl-time{ font-size:10px; opacity:.9; }
  .cal-bl-title{ font-size:12px; font-weight:600; line-height:1.15; }
  .cal-bl-src{ font-size:10px; opacity:.85; }
  .cal-bl-x{ position:absolute; top:3px; right:3px; width:24px; height:24px; line-height:22px; text-align:center; border-radius:7px; color:#fff; background:rgba(0,0,0,.28); opacity:.9; font-size:20px; font-weight:700; }
  .cal-block:hover .cal-bl-x{ opacity:1; }
  .cal-bl-x:hover{ background:rgba(0,0,0,.5); }
  .cal-resize{ position:absolute; left:0; right:0; bottom:0; height:7px; cursor:ns-resize; }
  .cal-resize:hover{ background:rgba(255,255,255,.35); }
  /* Text bricht vor dem × um (kein Überlappen mit dem Entfernen-Knopf) */
  .cal-block .cal-bl-time{ padding-right:30px; }
  .cal-block .cal-bl-title{ padding-right:28px; overflow-wrap:anywhere; }
  .cal-bl-bang{ display:inline-block; color:#fff; background:#d23f34; font-weight:800; line-height:1; padding:1px 5px; border-radius:5px; margin-right:4px; font-size:11px; }
  /* weitere Labels einer Aufgabe als kleine Punkte (Hauptfarbe = erstes Label) */
  .cal-bl-tags{ position:absolute; right:4px; bottom:3px; display:flex; gap:3px; }
  .cal-bl-dot{ width:9px; height:9px; border-radius:50%; border:1px solid rgba(255,255,255,.75); }
  .cal-tip{ position:fixed; z-index:1300; background:var(--text); color:var(--surface); font-size:12px; font-weight:700; padding:3px 8px; border-radius:6px; pointer-events:none; box-shadow:0 2px 10px rgba(0,0,0,.35); white-space:nowrap; }

  /* ===== E-Mail -> Aufgabe (Drop-Dialog) ===== */
  .maildrop-ov{ position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; }
  .maildrop-dlg{ width:min(560px,92vw); max-height:90vh; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 16px 50px rgba(0,0,0,.45); }
  .maildrop-head{ padding:14px 18px; border-bottom:1px solid var(--border); font-size:15px; color:var(--text); }
  .maildrop-body{ padding:14px 18px; display:flex; flex-direction:column; gap:6px; }
  .maildrop-l{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin-top:8px; }
  .maildrop-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .maildrop-chk{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); margin-top:10px; }
  .maildrop-atts{ font-size:12px; color:var(--text-dim); margin-top:4px; }
  .maildrop-foot{ padding:12px 18px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }

  /* ===== Kalender-Druck: nur Kalender, Querformat, Mo-Fr ===== */
  @media print {
    @page calland { size: A4 landscape; margin: 8mm; }
    body.cal-printing{ page: calland; background:#fff !important; }
    body.cal-printing #sidebar,
    body.cal-printing .topbar,
    body.cal-printing .accent-strip,
    body.cal-printing #viewTabs,
    body.cal-printing #backdrop,
    body.cal-printing #toast, body.cal-printing .toast,
    body.cal-printing .modal,
    body.cal-printing .cal-toolbar,
    body.cal-printing .cal-palette,
    body.cal-printing .cal-tip{ display:none !important; }
    body.cal-printing #app, body.cal-printing main,
    body.cal-printing #calendarRoot, body.cal-printing .cal-wrap,
    body.cal-printing .cal-body{ display:block !important; height:auto !important; width:100% !important; margin:0 !important; padding:0 !important; overflow:visible !important; }
    body.cal-printing .cal-grid-wrap{ overflow:visible !important; border:none !important; border-radius:0 !important; background:#fff !important; }
    body.cal-printing .cal-heads{ position:static !important; background:#fff !important; }
    body.cal-printing .cal-block{ -webkit-print-color-adjust:exact; print-color-adjust:exact; box-shadow:none !important; }
    body.cal-printing .cal-bl-x, body.cal-printing .cal-resize{ display:none !important; }
  }

  /* ===== App-weite Such-Seite ===== */
  .se-page{ max-width: 880px; margin: 0 auto; padding: 4px 2px 24px; }
  .se-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2, var(--surface)); position:sticky; top:0; z-index:2; }
  .se-head-ico{ color: var(--text-dim); flex-shrink:0; }
  .se-input{ flex:1; background:transparent; border:0; outline:0; color:var(--text); font-size:16px; }
  .se-input::placeholder{ color: var(--text-dim); }
  .se-clear{ flex-shrink:0; color:var(--text-dim); padding:2px 8px; border-radius:8px; font-size:14px; }
  .se-clear:hover{ color:var(--text); background:var(--surface-3, rgba(127,127,127,.15)); }
  .se-results{ margin-top:12px; }
  .se-hint{ color:var(--text-dim); padding:24px 8px; text-align:center; font-size:14px; }
  .se-count{ color:var(--text-dim); font-size:12px; margin:4px 4px 10px; }
  .se-section{ margin-bottom:16px; }
  .se-sechead{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin:0 4px 6px; display:flex; gap:6px; align-items:center; }
  .se-sechead span{ background:var(--surface-3, rgba(127,127,127,.18)); border-radius:10px; padding:0 7px; font-size:11px; }
  .se-row{ display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface, transparent); margin-bottom:6px; transition:background .12s, border-color .12s; }
  .se-row:hover{ background:var(--surface-3, rgba(127,127,127,.10)); border-color:var(--accent); }
  .se-tag{ flex-shrink:0; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 7px; border-radius:7px; margin-top:1px; color:#fff; }
  .se-tag-card{ background:#4a7fb8; }
  .se-tag-note{ background:#8a7b5a; }
  .se-tag-board{ background:#4a8a6b; }
  .se-tag-list{ background:#6b5b9a; }
  .se-tag-main{ background:#3f7a52; }
  .se-tag-sub{ background:#8a6d3b; }
  .se-row-sub{ margin-left:22px; }
  .se-row-context{ opacity:.72; }
  .se-bind{ color:var(--accent); font-size:11px; font-weight:600; }
  .dash-sub-bind{ font-size:11px; color:var(--text-dim); margin-top:2px; }
  .se-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
  .se-title{ color:var(--text); font-size:14px; font-weight:600; }
  .se-snip{ color:var(--text-dim); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .se-loc{ color:var(--text-dim); font-size:11px; display:flex; align-items:center; gap:5px; }
  .se-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
  .se-hl{ background:color-mix(in srgb, var(--accent) 35%, transparent); color:var(--text); border-radius:3px; padding:0 1px; }
  .se-avs{ display:flex; flex-shrink:0; }
  .se-av{ width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-left:-5px; border:1.5px solid var(--surface, #222); }
  .se-av-more{ background:var(--surface-3, #555); color:var(--text); }
  .mirror-offline{ opacity:.82; }
  .mirror-unlink{ flex-shrink:0; opacity:0; color: var(--text-dim); padding:2px; border-radius:6px; transition: opacity .12s, color .12s, background .12s; }
  .mirror-card:hover .mirror-unlink{ opacity:.65; }
  .mirror-unlink:hover{ opacity:1; color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
  /* File drop zone on "+ add card" button and empty list area */
  .add-card.list-drop-ready,
  .list-inner.list-drop-ready{
    outline: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface)) !important;
  }

  /* ---------- Services (DL) modal rows ---------- */
  .service-row{
    display: grid;
    grid-template-columns: 90px 1fr 140px 110px auto;
    gap: 8px;
    align-items: center;
  }
  .service-row .service-number{ font-variant-numeric: tabular-nums; }

  /* ---------- Time-entries block inside card modal ---------- */
  /* Grid columns: [x] Datum Von Bis Pause Dauer DL Notiz × */
  .time-entry-row,
  #mTimeAddRow{
    display: grid;
    grid-template-columns: 26px 130px 86px 86px 60px 64px minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
  }
  .time-entry-row .input,
  #mTimeAddRow .input{
    padding: 4px 8px;
    font-size: 12px;
  }
  .time-dur{
    font-size: 11.5px;
    color: var(--text-soft);
    text-align: right;
    padding-right: 4px;
  }
  .time-booked-cell{
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .time-entry-row.is-booked{
    opacity: 0.6;
  }
  .time-entry-row.is-booked .time-date,
  .time-entry-row.is-booked .time-from,
  .time-entry-row.is-booked .time-to,
  .time-entry-row.is-booked .time-note,
  .time-entry-row.is-booked .time-service{
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--text-dim) 70%, transparent);
  }

  /* ---------- Report view (Auswertung) ---------- */
  #reportRoot{ padding: 4px 2px 20px; }
  .report-root{
    display: flex; flex-direction: column; gap: 12px;
  }
  /* 2-column layout: main (filters + table) left, category pie as sidebar right */
  .report-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 14px;
    align-items: start;
  }
  .report-main{ display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .report-side{ position: sticky; top: 8px; }
  @media (max-width: 1100px){
    .report-layout{ grid-template-columns: 1fr; }
    .report-side{ position: static; }
  }
  /* Delete-button on orphan rows */
  .report-del-btn{
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dim);
    border-radius: 4px;
    padding: 3px 5px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 80ms, color 80ms, border-color 80ms;
  }
  .report-del-btn:hover{
    color: #a34848;
    background: color-mix(in srgb, #a34848 12%, transparent);
    border-color: color-mix(in srgb, #a34848 40%, var(--border));
  }
  .report-header{
    display: flex; align-items: baseline; justify-content: space-between;
    padding-bottom: 4px;
  }
  .report-title{
    font-size: 16px; font-weight: 700; color: var(--text);
  }
  .report-sub{
    font-size: 12px; color: var(--text-dim);
  }
  .report-controls{
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
  }
  .report-toggle{
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 5px;
    overflow: hidden;
    background: var(--surface-2);
  }
  .report-tab{
    font-size: 12px;
    padding: 4px 12px;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    border: 0;
    border-right: 1px solid var(--border);
    transition: background 120ms ease, color 120ms ease;
  }
  .report-tab:last-child{ border-right: 0; }
  .report-tab:hover{ color: var(--text); }
  .report-tab.is-active{
    background: color-mix(in srgb, var(--accent) 20%, var(--surface-2));
    color: var(--text);
    font-weight: 600;
  }
  .report-date-wrap{ display: flex; gap: 8px; }
  .report-ctl-date{ display: flex; flex-direction: column; gap: 3px; }
  .report-ctl-label{
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .report-ctl-date .input{ padding: 4px 8px; font-size: 12px; }
  .report-body{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
  }
  .report-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
  }
  .report-table th{
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    padding: 8px 12px;
    font-weight: 500;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .report-table tbody tr{ height: 32px; }
  .report-table td{
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-soft);
    vertical-align: middle;
  }
  .report-table tbody tr:hover td{ background: var(--surface-2); }
  .report-table tbody tr:last-child td{ border-bottom: 0; }
  .report-service-num{ color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
  .report-service-desc{ color: var(--text-soft); font-size: 11.5px; margin-top: 2px; }
  .report-hours{ color: var(--text); font-weight: 600; }
  .report-table tfoot td{
    padding: 8px 12px;
    background: var(--surface-2);
    border-top: 1px solid var(--border-soft);
    color: var(--text);
    font-weight: 600;
    font-size: 12px;
  }
  .report-table tfoot tr.report-total td{
    border-top: 1px solid var(--border);
    font-weight: 700;
    background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
  }
  /* Booked rows: tint green, keep text fully readable (no strike-through). */
  .report-flat tbody tr.is-booked td{
    background: color-mix(in srgb, #4a8a6b 14%, transparent);
    color: var(--text);
  }
  .report-flat tbody tr.is-booked:hover td{
    background: color-mix(in srgb, #4a8a6b 22%, transparent);
  }
  /* Booked-button: clear checkbox -> checkmark icon */
  .report-book-btn{
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
    padding: 0;
  }
  .report-book-btn:hover{
    border-color: #4a8a6b;
    color: #4a8a6b;
  }
  .report-book-btn.is-booked{
    background: #4a8a6b;
    border-color: #4a8a6b;
    color: #fff;
  }
  .report-book-btn.is-booked:hover{
    background: #3f7659;
    border-color: #3f7659;
  }
  .report-book-btn.is-booked:active{ transform: scale(0.92); }

  /* ===== Global topbar timer ===== */
  .top-timer{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12px;
    height: 34px;
  }
  .top-timer.is-running{
    border-color: color-mix(in srgb, #4a8a6b 60%, var(--border));
    background: color-mix(in srgb, #4a8a6b 10%, var(--surface-2));
  }
  .top-timer-clock{
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    padding: 0 2px;
  }
  .top-timer-elapsed{
    color: #4a8a6b;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    padding: 0 4px;
  }
  .top-timer-pill{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 11.5px;
    cursor: pointer;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color 120ms ease, background 120ms ease;
  }
  .top-timer-pill:hover{
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  }
  .top-timer-pill-dot{
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-dim);
  }
  .top-timer.is-running .top-timer-pill-dot{
    background: #4a8a6b;
  }
  .top-timer-btn{
    width: 26px; height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: #4a8a6b;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 120ms ease;
  }
  .top-timer-btn:hover{ background: #3f7659; }
  .top-timer-btn.is-running{ background: #a34848; }
  .top-timer-btn.is-running:hover{ background: #8a3a3a; }

  /* ===== Board "DL fehlt" banner ===== */
  .board-dl-banner{
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: color-mix(in srgb, #b89155 14%, var(--surface));
    border: 1px solid color-mix(in srgb, #b89155 60%, var(--border));
    border-left-width: 3px;
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
  }
  .board-dl-banner-body{
    display: inline-flex; align-items: center; gap: 8px;
    color: #b89155;
    font-weight: 500;
  }
  .board-dl-banner .btn{ flex-shrink: 0; }
  .report-flat tbody tr.report-row:hover{
    background: color-mix(in srgb, var(--accent) 7%, transparent);
  }
  .report-card-link{ color: var(--text); }
  .report-flat tbody tr.report-row:hover .report-card-link{ color: var(--accent); }
  .report-note{ color: var(--text-dim); font-style: italic; }
  .report-empty{
    padding: 24px;
    text-align: center;
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
  }

  /* Inline-editable cells + service select for orphan report rows */
  .report-edit{
    display: inline-block;
    min-width: 60px;
    padding: 2px 5px;
    border-radius: 3px;
    background: transparent;
    color: var(--text);
    cursor: text;
    outline: none;
    border: 1px dashed transparent;
    transition: border-color 80ms, background 80ms;
  }
  .report-edit:hover{ border-color: var(--border); }
  .report-edit:focus{
    border-color: var(--accent);
    background: var(--surface);
  }
  .report-svc-select{
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    font-family: inherit;
    max-width: 180px;
  }
  .report-svc-select:hover{ border-color: var(--accent); }
  .report-svc-select:focus{
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
  }

  /* Category pie chart (Intern / Kunde / Presales) in report view
    , compact sidebar variant (stacked: pie on top, legend below). */
  .report-cat-pie{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 12px 14px;
  }
  .report-side .report-cat-body{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .report-side .report-cat-svg{
    width: 140px; height: 140px;
    margin: 0 auto;
  }
  .report-side .report-cat-legend-row{
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 6px;
    font-size: 11px;
    align-items: center;
  }
  .report-side .report-cat-min,
  .report-side .report-cat-hrs{ display: none; }
  .report-cat-hint{
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, #F59E0B 40%, var(--border));
    background: color-mix(in srgb, #F59E0B 10%, var(--surface-2));
    border-radius: 5px;
    font-size: 11.5px;
    color: var(--text-soft);
    line-height: 1.4;
  }
  .report-cat-title{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .report-cat-body{
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .report-cat-svg{
    width: 160px;
    height: 160px;
    flex-shrink: 0;
  }
  .report-cat-legend{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .report-cat-legend-row{
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
  }
  .report-cat-dot{
    width: 10px; height: 10px; border-radius: 2px;
  }
  .report-cat-label{ color: var(--text); }
  .report-cat-pct{ color: var(--text); font-weight: 600; width: 38px; text-align: right; }
  .report-cat-min{ color: var(--text-dim); width: 62px; text-align: right; }
  .report-cat-hrs{ color: var(--text-soft); width: 68px; text-align: right; }
  .report-cat-empty{
    padding: 18px; text-align: center; color: var(--text-dim);
    font-size: 12px; font-style: italic;
  }

  /* Collapsible "Erledigt (N)" section at the bottom of a bucket
     (used only on the Tagesaufgaben board). */
  .done-section{
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .done-section-header{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    transition: background 120ms ease, color 120ms ease;
  }
  .done-section-header:hover{
    background: var(--surface-2);
    color: var(--text-soft);
  }
  .done-section-caret{
    transition: transform 160ms ease;
  }
  .done-section.collapsed .done-section-caret{
    transform: rotate(-90deg);
  }
  .done-section-count{
    margin-left: 2px;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }
  .done-section-body{
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0.8;
  }
  .done-section.collapsed .done-section-body{ display: none; }

  /* ---------- Pipeline / Presales boards ---------- */
  .pipeline-chip{
    background: color-mix(in srgb, var(--board-accent, var(--accent)) 14%, var(--surface-2));
    border-color: color-mix(in srgb, var(--board-accent, var(--accent)) 32%, var(--border-soft));
    color: var(--text-soft);
    font-weight: 600;
  }
  .chip.chip-volume{
    color: var(--text);
    background: color-mix(in srgb, var(--board-accent, var(--accent)) 22%, var(--surface-2));
  }
  .chip.chip-probability{ letter-spacing: 0.02em; }
  .chip.chip-closedate{ font-weight: 500; }
  .chip.chip-stalled{
    background: color-mix(in srgb, var(--danger) 16%, var(--surface-2));
    border-color: color-mix(in srgb, var(--danger) 38%, var(--border-soft));
    color: var(--text);
  }
  .chip.chip-nextstep{
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--text-dim);
    font-weight: 400;
  }
  .card-nextstep{
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
    font-size: 11px;
    line-height: 1.3;
  }
  .card-nextstep .chip{ margin: 0; }
  .chip.chip-transition{
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-soft);
    padding: 0 6px;
    font-weight: 700;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  }
  .chip.chip-transition:hover{
    background: color-mix(in srgb, var(--board-accent, var(--accent)) 18%, var(--surface-2));
    border-color: color-mix(in srgb, var(--board-accent, var(--accent)) 45%, var(--border));
    color: var(--text);
  }

  /* Stage footer under each bucket on a pipeline board */
  .pipeline-footer{
    margin-top: 12px;
    padding: 10px 12px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
  }
  .pipeline-footer-row{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  .pipeline-footer-label{ color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
  .pipeline-footer-value{ color: var(--text); font-weight: 600; }
  .pipeline-footer-count{
    color: var(--text-soft);
    justify-content: flex-end;
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px solid var(--border-soft);
  }

  /* Forecast panel inside the card modal */
  .forecast-card{
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .forecast-row{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
  }
  .forecast-row .forecast-label{
    color: var(--text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 1;
  }
  .forecast-row .forecast-value{ font-size: 12px; }
  .forecast-weighted{
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    font-weight: 600;
  }
  .forecast-history{
    border-top: 1px dashed var(--border);
    padding-top: 6px;
  }

  /* ---------- Forecast view (replaces Gantt on pipeline boards) ---------- */
  .fc-root{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px 20px;
  }
  .fc-kpi-strip{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }
  .fc-kpi{
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .fc-kpi-label{
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .fc-kpi-value{
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.1;
  }
  .fc-kpi-sub{
    font-size: 11px;
    color: var(--text-dim);
  }
  .fc-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 12px;
  }
  .fc-card{
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 14px 16px;
  }
  .fc-card-header{
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
  }
  .fc-card-header-sub{
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dim);
  }

  .fc-funnel-wrap{ width: 100%; overflow-x: auto; }
  .fc-funnel-svg{ width: 100%; height: auto; display: block; }
  .fc-funnel-label{ fill: var(--text-soft); font-size: 12px; font-family: inherit; }
  .fc-funnel-count{ fill: var(--text); font-size: 12px; font-weight: 600; font-family: inherit; }
  .fc-funnel-vol{ fill: var(--text-soft); font-size: 11px; font-family: inherit; }
  .fc-funnel-conv{ fill: var(--text-dim); font-size: 10px; font-style: italic; font-family: inherit; }

  .fc-monthly-wrap{ width: 100%; }
  .fc-monthly-svg{ width: 100%; height: auto; display: block; }
  .fc-grid{ stroke: var(--border-soft); stroke-dasharray: 2 3; }
  .fc-baseline{ stroke: var(--border); }
  .fc-axis-label{ fill: var(--text-dim); font-size: 10px; font-family: inherit; }
  .fc-bar-label{ fill: var(--text-soft); font-size: 10px; font-weight: 600; font-family: inherit; }
  .fc-weighted-line{ stroke: var(--text); stroke-width: 1.5; }

  .fc-legend{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-soft);
    font-size: 11px;
    color: var(--text-soft);
  }
  .fc-legend-item{ display: inline-flex; align-items: center; gap: 6px; }
  .fc-legend-dot{ width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
  .fc-legend-line{ width: 14px; height: 2px; background: var(--text); display: inline-block; }
  .fc-legend-weighted{ color: var(--text); font-weight: 500; }

  .fc-stalled-card .fc-card-header{ justify-content: flex-start; }
  .fc-stalled-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  .fc-stalled-table th{
    text-align: left;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
  }
  .fc-stalled-table td{
    padding: 8px 8px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-soft);
  }
  .fc-stalled-row{ cursor: pointer; transition: background 120ms ease; }
  .fc-stalled-row:hover{ background: color-mix(in srgb, var(--board-accent, var(--accent)) 8%, transparent); }
  .fc-stalled-title{ color: var(--text); font-weight: 500; }
  .fc-nextstep-cell{ color: var(--text-dim); font-style: italic; }
  .fc-stage-pill{
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
  }

  .fc-empty{
    padding: 20px;
    text-align: center;
    color: var(--text-dim);
    font-size: 12px;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 6px;
  }

  @media (max-width: 1024px){
    .fc-kpi-strip{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fc-row{ grid-template-columns: minmax(0, 1fr); }
  }

  /* ===== Assessments (top-level view) ===== */
  #assessmentsRoot{ padding: 8px 16px 24px; }
  .as-root{ display: flex; flex-direction: column; gap: 14px; width: 100%; }
  .as-header{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 4px;
  }
  .as-title{ font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; line-height: 1.3; }
  .as-sub{ font-size: 12px; color: var(--text-dim); margin-top: 2px; }
  .as-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
  }
  .as-empty{
    padding: 48px;
    text-align: center;
    color: var(--text-dim);
    font-size: 14px;
    font-style: italic;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 8px;
  }
  .as-tile{
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
  }
  .as-tile:hover{
    border-color: var(--accent-muted);
    background: var(--surface-3);
  }
  .as-tile-head{
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .as-tile-title{ flex: 1; min-width: 0; }
  .as-tile-name{
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    word-wrap: break-word;
  }
  .as-tile-catalog{
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
    margin-top: 2px;
  }
  .as-tile-mandant{
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
  }
  .as-tile-chips{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .as-norm-chip{
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .as-chip{
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .as-chip-draft{
    color: var(--text-soft);
    background: var(--surface-2);
    border: 1px solid var(--border);
  }
  .as-chip-inprogress{
    color: #8a6a3c;
    background: #b8915522;
    border: 1px solid #b8915566;
  }
  .as-chip-done{
    color: #4a8a6b;
    background: #4a8a6b22;
    border: 1px solid #4a8a6b66;
  }
  .as-tile-progress{ display: flex; flex-direction: column; gap: 4px; }
  .as-tile-progress-row{
    display: flex; align-items: baseline; justify-content: space-between;
  }
  .as-tile-bar{
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
  }
  .as-tile-bar-fill{
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 200ms ease;
  }
  .as-tile-foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
    gap: 8px;
  }
  .as-tile-actions{
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .as-act{
    font-size: 11.5px;
    background: transparent;
    border: 0;
    color: color-mix(in srgb, var(--accent) 80%, var(--text));
    cursor: pointer;
    padding: 2px 2px;
    transition: color 120ms ease;
  }
  .as-act:hover{ color: var(--accent); }
  .as-act.as-act-del{
    color: var(--text-dim);
  }
  .as-act.as-act-del:hover{ color: var(--danger); }

  /* Catalog manager rows */
  .catalog-row{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
  }
  .catalog-row-main{ flex: 1; min-width: 0; }
  .catalog-name{
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
  }
  .catalog-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-dim);
  }
  .catalog-desc{
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-soft);
  }
  .catalog-row-actions{
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .catalog-qa-badges{
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
  }
  .catalog-qa-badge{
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
  }
  .catalog-qa-badge.qa-verified   { background: #1f3a2a; color: #9ed8b3; }
  .catalog-qa-badge.qa-partial    { background: #3d3015; color: #e0b663; }
  .catalog-qa-badge.qa-unverified { background: #3a1f1f; color: #e09494; }

  /* ===== Assessment detail view ===== */
  #assessmentDetailRoot{ display: flex; flex-direction: column; height: 100%; }
  .asd-layout{
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 12px;
    height: 100%;
    overflow: hidden;
  }
  .asd-sidebar{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
  }
  .asd-back{
    background: transparent;
    border: 0;
    color: var(--text-soft);
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    padding: 2px 0;
  }
  .asd-back:hover{ color: var(--accent); }

  .asd-timer-panel{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    position: relative;
  }
  .asd-timer-panel.is-running{
    border-color: color-mix(in srgb, #4a8a6b 60%, var(--border));
    background: color-mix(in srgb, #4a8a6b 8%, var(--surface-2));
  }
  .asd-timer-clock{
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .asd-timer-status{
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 14px;
  }
  .asd-timer-dot{
    width: 8px; height: 8px; border-radius: 50%;
    background: #4a8a6b;
  }
  .asd-timer-live{
    font-size: 11px;
    color: #4a8a6b;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .asd-timer-svc .input{
    padding: 4px 8px;
    font-size: 12px;
    width: 100%;
  }
  .asd-timer-hint{
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
  }
  .asd-timer-elapsed{
    font-size: 22px;
    font-weight: 700;
    color: #4a8a6b;
    font-variant-numeric: tabular-nums;
    text-align: center;
    margin-top: 4px;
  }
  .asd-timer-start,
  .asd-timer-stop{
    width: 100%;
    padding: 6px 10px;
    font-weight: 600;
  }
  .asd-timer-stop{
    background: #a34848;
    color: #fff;
    border-color: #a34848;
  }
  .asd-timer-stop:hover{ background: #8a3a3a; }
  .asd-project{
    padding: 10px 12px;
    background: var(--surface-2);
    border-radius: 6px;
  }
  .asd-project-name{ font-weight: 700; color: var(--text); font-size: 14px; }
  .asd-project-mandant{ font-size: 11px; color: var(--text-dim); margin-top: 2px; }
  .asd-project-progress{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .asd-project-bar{
    height: 5px;
    background: var(--border);
    border-radius: 3px;
    margin-top: 4px;
    overflow: hidden;
  }
  .asd-project-bar-fill{
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 200ms ease;
  }
  .asd-nav{ display: flex; flex-direction: column; gap: 2px; }
  .asd-nav-item{
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 5px;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background 100ms ease, color 100ms ease;
  }
  .asd-nav-item:hover{ background: var(--surface-2); color: var(--text); }
  .asd-nav-item.is-active{
    background: color-mix(in srgb, var(--accent) 70%, transparent);
    color: #fff;
  }
  .asd-cluster-section{ margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
  .asd-cluster-heading{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    padding: 4px 0;
  }
  .asd-cluster-item{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-column-gap: 8px;
    grid-row-gap: 4px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    transition: background 100ms ease;
  }
  .asd-cluster-item:hover{ background: var(--surface-2); }
  .asd-cluster-item.is-active{
    background: color-mix(in srgb, var(--accent) 15%, var(--surface-2));
    color: var(--text);
  }
  .asd-cluster-item.is-done{ color: #4a8a6b; }
  .asd-cluster-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .asd-cluster-check{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    color: #4a8a6b;
    font-weight: 700;
  }
  .asd-cluster-bar{
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    height: 2px;
    background: var(--border);
    border-radius: 1px;
    overflow: hidden;
  }
  .asd-cluster-bar > span{
    display: block; height: 100%;
    background: #4a8a6b;
    border-radius: 1px;
    transition: width 200ms ease;
  }

  .asd-main{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 24px;
    overflow-y: auto;
  }
  .asd-placeholder{
    padding: 40px;
    text-align: center;
    color: var(--text-dim);
    font-style: italic;
  }

  .asd-cluster-block{ display: flex; flex-direction: column; gap: 12px; }
  .asd-breadcrumb{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    font-weight: 600;
  }
  .asd-cluster-title{
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .asd-cluster-ref{ font-size: 12px; color: var(--text-dim); margin-top: -8px; }

  .asd-q-list{ display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }

  .asd-q-card{
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .asd-q-head{
    display: flex; align-items: center; gap: 10px;
    font-size: 11px;
    color: var(--text-dim);
  }
  .asd-q-ref{
    background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
    color: var(--accent);
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
  }
  .asd-q-idx{ color: var(--text-dim); }
  .asd-q-norm{
    margin-left: auto;
    font-size: 10.5px;
    color: var(--text-dim);
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .asd-qa-chip{
    margin-left: 6px;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    white-space: nowrap;
  }
  .asd-qa-verified   { background: #1f3a2a; color: #9ed8b3; border: 1px solid #2e5b42; }
  .asd-qa-partial    { background: #3d3015; color: #e0b663; border: 1px solid #6b5322; }
  .asd-qa-partial::before    { content: '! '; }
  .asd-qa-unverified { background: #3a1f1f; color: #e09494; border: 1px solid #6b2e2e; }
  .asd-qa-unverified::before { content: '! '; }

  .asd-q-card.is-qa-unverified{
    opacity: 0.6;
    filter: grayscale(0.35);
  }
  .asd-q-card.is-qa-unverified .asd-score-row .asd-score-tile{
    cursor: not-allowed;
    pointer-events: auto; /* still clickable to trigger toast */
  }

  /* QA section in results view */
  .asd-res-qa{ margin-top: 18px; }
  .asd-res-qa-kpis{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
  }
  .asd-res-qa-kpi{
    padding: 10px 12px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--border);
    background: var(--surface-2);
  }
  .asd-res-qa-kpi.qa-verified  { border-color: #2e5b42; }
  .asd-res-qa-kpi.qa-partial   { border-color: #6b5322; }
  .asd-res-qa-kpi.qa-unverified{ border-color: #6b2e2e; }
  .asd-res-qa-n{ font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .asd-res-qa-kpi.qa-verified   .asd-res-qa-n{ color: #9ed8b3; }
  .asd-res-qa-kpi.qa-partial    .asd-res-qa-n{ color: #e0b663; }
  .asd-res-qa-kpi.qa-unverified .asd-res-qa-n{ color: #e09494; }
  .asd-res-qa-l{ font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
  .asd-res-qa-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
  }
  .asd-res-qa-table th{
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    font-weight: 600;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
  }
  .asd-res-qa-table td{
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
  }
  .asd-q-core{
    font-size: 15px;
    color: var(--text);
    font-weight: 500;
    line-height: 1.4;
  }
  .asd-q-hint{
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
  }
  .asd-q-hint summary{
    cursor: pointer;
    color: var(--accent);
    font-weight: 500;
  }
  .asd-q-hint-body{
    margin-top: 6px;
    color: var(--text-soft);
    font-size: 12px;
  }
  .asd-q-support{
    margin: 6px 0 0;
    padding-left: 20px;
    list-style: disc;
    font-size: 12px;
    color: var(--text-soft);
  }
  .asd-q-support li{ margin: 2px 0; }

  .asd-q-label{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    font-weight: 600;
    margin-top: 6px;
  }

  .asd-score-row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 6px;
  }
  .asd-score-tile{
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    padding: 12px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease, transform 120ms ease;
    text-align: center;
  }
  .asd-score-tile:hover{ border-color: var(--text-dim); }
  .asd-score-tile.is-active{
    /* Background + border are set inline per-tile (red->green gradient). */
    color: #fff;
    transform: scale(1.02);
  }
  .asd-score-num{
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
  }
  .asd-score-lbl{
    font-size: 10.5px;
    color: inherit;
    opacity: 0.85;
    line-height: 1.2;
  }

  .asd-ist{
    width: 100%;
    min-height: 60px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
    outline: none;
    transition: border-color 120ms ease;
  }
  .asd-ist:focus{
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  }

  .asd-q-meta{ margin-top: 4px; }

  .asd-cluster-nav{
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
  }

  @media (max-width: 900px){
    .asd-layout{ grid-template-columns: 1fr; }
    .asd-sidebar{ max-height: 240px; }
  }

  /* ---------- Assessment results ---------- */
  .asd-results{ display: flex; flex-direction: column; gap: 16px; }
  .asd-res-header{
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  }
  .asd-res-title{
    font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.01em;
  }
  .asd-res-sub{ font-size: 12px; color: var(--text-dim); margin-top: 2px; }

  .asd-res-kpis{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .asd-res-kpi{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .asd-res-kpi-circle{
    width: 66px; height: 66px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  .asd-res-kpi-body{ flex: 1; min-width: 0; }
  .asd-res-kpi-label{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    font-weight: 600;
  }
  .asd-res-kpi-value{
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-top: 2px;
    line-height: 1.1;
  }
  .asd-res-kpi-value-danger{ color: #a34848; }
  .asd-res-kpi-sub{ font-size: 11px; color: var(--text-dim); margin-top: 2px; }
  .asd-res-bar{
    height: 5px; background: var(--border); border-radius: 3px; overflow: hidden;
    margin-top: 6px;
  }
  .asd-res-bar-fill{
    height: 100%; background: var(--accent); border-radius: 3px;
    transition: width 200ms ease;
  }

  .asd-res-row{
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
    gap: 12px;
  }
  .asd-res-radar-card,
  .asd-res-cluster-overview{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
  }
  .asd-res-section-title{
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .asd-res-section-sub{
    font-size: 11px; font-weight: 500; color: var(--text-dim);
  }
  .asd-radar-svg{ width: 100%; height: auto; display: block; }
  .asd-radar-ring{ fill: none; stroke: var(--border-soft); stroke-width: 1; }
  .asd-radar-axis{ stroke: var(--border); stroke-width: 1; }
  .asd-radar-poly{
    fill: color-mix(in srgb, var(--accent) 28%, transparent);
    stroke: var(--accent);
    stroke-width: 1.6;
  }
  .asd-radar-point{ fill: var(--accent); }
  .asd-radar-target{
    fill: none;
    stroke: #b89155;
    stroke-width: 1.2;
    stroke-dasharray: 5 4;
    opacity: 0.9;
  }
  .asd-radar-target-label{
    fill: #b89155;
    font-size: 9.5px;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .asd-radar-label{ fill: var(--text-soft); font-size: 10.5px; font-family: inherit; }
  .asd-radar-scale{ fill: var(--text-dim); font-size: 9.5px; font-family: inherit; }

  .asd-res-cluster-row{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
  }
  .asd-res-cluster-row:first-of-type{ margin-top: 0; padding-top: 0; border-top: 0; }
  .asd-res-cluster-row-head{
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }
  .asd-res-cluster-row-name{ color: var(--text); font-weight: 500; }
  .asd-res-cluster-row-avg{ font-weight: 700; font-variant-numeric: tabular-nums; }
  .asd-res-cluster-row-bar{
    height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 4px;
  }
  .asd-res-cluster-row-bar-fill{
    height: 100%; border-radius: 3px;
    transition: width 200ms ease;
  }
  .asd-res-cluster-row-chips{
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
    font-size: 10.5px;
  }
  .asd-res-chip{
    padding: 2px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
    color: inherit;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.01em;
  }
  .asd-res-chip.is-answered{
    font-weight: 700;
  }

  .asd-res-gap{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .asd-res-gap-card{
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
  }
  .asd-res-gap-head{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }
  .asd-res-gap-ref{
    background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
    color: var(--accent);
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 11px;
  }
  .asd-res-gap-norm{
    flex: 1;
    color: var(--text-dim);
    font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .asd-res-gap-score{
    width: 26px; height: 26px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
  }
  .asd-res-gap-core{
    font-size: 13.5px;
    color: var(--text);
    font-weight: 500;
    line-height: 1.4;
  }
  .asd-res-finding,
  .asd-res-reco{
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 5px;
    font-size: 12.5px;
    line-height: 1.5;
  }
  .asd-res-finding{
    background: color-mix(in srgb, #4a8a6b 10%, transparent);
    border-left: 3px solid #4a8a6b;
    color: var(--text);
  }
  .asd-res-reco{
    background: color-mix(in srgb, #4a7fb8 10%, transparent);
    border-left: 3px solid #4a7fb8;
    color: var(--text);
  }
  .asd-res-tag-label{
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    font-weight: 700;
    margin-bottom: 4px;
  }

  @media (max-width: 1100px){
    .asd-res-kpis{ grid-template-columns: 1fr; }
    .asd-res-row{ grid-template-columns: minmax(0, 1fr); }
  }

  /* ---------- Assessment measures (Maßnahmenplan) ---------- */
  .asd-measures{ display: flex; flex-direction: column; gap: 14px; }
  .asd-msr-kpis{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .asd-msr-kpi{
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    border-left-width: 4px;
  }
  .asd-msr-kpi-open{ border-left-color: #a34848; }
  .asd-msr-kpi-prog{ border-left-color: #b89155; }
  .asd-msr-kpi-done{ border-left-color: #4a8a6b; }
  .asd-msr-kpi-count{
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
  }
  .asd-msr-kpi-label{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    font-weight: 600;
    margin-top: 4px;
  }
  .asd-msr-kpi-open  .asd-msr-kpi-count{ color: #a34848; }
  .asd-msr-kpi-prog  .asd-msr-kpi-count{ color: #b89155; }
  .asd-msr-kpi-done  .asd-msr-kpi-count{ color: #4a8a6b; }

  .asd-msr-table-wrap{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }
  .asd-msr-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .asd-msr-table th{
    text-align: left;
    padding: 10px 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    font-weight: 700;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
  }
  .asd-msr-table td{
    padding: 10px 12px;
    vertical-align: top;
    border-bottom: 1px solid var(--border-soft);
  }
  .asd-msr-table tbody tr:last-child td{ border-bottom: 0; }
  .asd-msr-text,
  .asd-msr-desc,
  .asd-msr-input{
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 4px;
    outline: none;
    resize: none;
    transition: background 100ms ease;
  }
  .asd-msr-text{ font-weight: 600; }
  .asd-msr-desc{ color: var(--text-soft); font-size: 12.5px; margin-top: 2px; }
  .asd-msr-text:focus,
  .asd-msr-desc:focus,
  .asd-msr-input:focus{ background: var(--surface-2); }
  .asd-msr-ref{
    display: inline-block;
    margin-top: 4px;
    padding: 1px 8px;
    background: color-mix(in srgb, var(--accent) 15%, var(--surface-2));
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 3px;
  }
  .asd-msr-prio{
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
  }
  .asd-msr-prio-hoch{
    background: #a3484822;
    color: #a34848;
  }
  .asd-msr-prio-mittel{
    background: #b8915522;
    color: #8a6a3c;
  }
  .asd-msr-prio-niedrig{
    background: #7d859022;
    color: var(--text-dim);
  }
  .asd-msr-status-select{
    padding: 4px 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-weight: 600;
  }
  .asd-msr-del{
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 100ms ease;
  }
  .asd-msr-del:hover{ opacity: 1; }

  /* ===================================================================
     PRINT, only used when body has the `asd-printing` class.
     Layout: full-width portrait A4, page-breaks between KPI/radar/cluster
     overview/gap cards. Sidebar + app chrome hidden. Dark theme forced to
     light printable styling.
     =================================================================== */
  /* ===== Formal report overlay (separate from Ergebnisse view) ===== */
  .asd-formal-overlay{
    position: fixed; inset: 0; z-index: 9998;
    background: var(--bg);
    display: flex; flex-direction: column;
  }
  .asd-formal-topbar{
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; border-bottom: 1px solid var(--border);
    background: var(--surface); flex-shrink: 0;
  }
  .asd-formal-title{ font-weight: 600; color: var(--text); }
  .asd-formal-actions{ display: flex; gap: 8px; }
  .asd-formal-scroll{ flex: 1; overflow-y: auto; padding: 20px 24px; }

  body.asd-formal-printing .asd-formal-topbar{ display: none !important; }

  /* chip cursor + flash when jumped to */
  .asd-res-chip-score{ cursor: pointer; }

  /* ===== Assessment Report sections (screen + print) ===== */
  .asd-report{ display: flex; flex-direction: column; gap: 22px; }

  /* Cover */
  .asd-rpt-cover{
    padding: 28px 30px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    display: flex; flex-direction: column; gap: 18px;
  }
  .asd-rpt-cover-top{
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-dim); border-bottom: 1px solid var(--border-soft); padding-bottom: 10px;
  }
  .asd-rpt-cover-kind{ font-weight: 700; }
  .asd-rpt-cover-catalog{ color: var(--accent); }
  .asd-rpt-cover-main{ padding: 6px 0 12px; }
  .asd-rpt-cover-assessment{ font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.2; }
  .asd-rpt-cover-mandant{ font-size: 15px; color: var(--text-soft); margin-top: 6px; }
  .asd-rpt-cover-meta{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 20px;
    margin: 0; padding: 0;
  }
  .asd-rpt-cover-meta > div{ display: flex; flex-direction: column; gap: 2px; }
  .asd-rpt-cover-meta dt{
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 600;
  }
  .asd-rpt-cover-meta dd{ font-size: 12.5px; color: var(--text); margin: 0; }

  /* Shared sub-title */
  .asd-rpt-sub-title{
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
    color: var(--text-soft); margin-bottom: 6px;
  }

  /* Management Summary */
  .asd-rpt-summary-box{
    display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-2); margin-bottom: 14px;
  }
  .asd-rpt-summary-score{ display: flex; align-items: center; gap: 12px; }
  .asd-rpt-summary-score-label{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
  .asd-rpt-summary-score-scale{ font-size: 11px; color: var(--text-dim); }
  .asd-rpt-summary-text{ margin: 0; font-size: 13px; color: var(--text); line-height: 1.5; }
  .asd-rpt-summary-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .asd-rpt-top-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
  .asd-rpt-top-list > li{ display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: start; }
  .asd-rpt-top-ref{
    background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
    color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums;
    padding: 1px 6px; border-radius: 3px; font-size: 10.5px;
    align-self: start;
  }
  .asd-rpt-top-score{
    color: #fff; font-weight: 700; padding: 1px 7px; border-radius: 10px;
    font-size: 10.5px; font-variant-numeric: tabular-nums;
    align-self: start;
  }
  .asd-rpt-top-text{ color: var(--text); line-height: 1.4; }

  /* Methodology */
  .asd-rpt-method-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .asd-rpt-method-grid p{ font-size: 12.5px; color: var(--text-soft); line-height: 1.5; margin: 0 0 8px; }
  .asd-rpt-scale-list{ list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
  .asd-rpt-scale-list > li{ display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; }
  .asd-rpt-scale-num{
    font-weight: 700; background: var(--accent); color: #fff; text-align: center;
    border-radius: 3px; font-size: 10.5px; padding: 1px 0;
  }

  /* Participants */
  .asd-rpt-participants-table{ width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .asd-rpt-participants-table th{
    text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-dim); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border);
  }
  .asd-rpt-participants-table td{
    padding: 6px 8px; border-bottom: 1px solid var(--border-soft); color: var(--text);
  }
  .asd-rpt-roles{ list-style: disc; padding-left: 18px; font-size: 12px; color: var(--text-soft); }
  .asd-rpt-roles > li{ margin: 2px 0; }

  /* Appendix */
  .asd-rpt-appendix-cluster{ margin-bottom: 14px; }
  .asd-rpt-appendix-table{ width: 100%; border-collapse: collapse; font-size: 11.5px; }
  .asd-rpt-appendix-table td{ padding: 4px 8px; border-bottom: 1px solid var(--border-soft); color: var(--text-soft); vertical-align: top; }
  .asd-rpt-appendix-id{
    width: 70px; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--accent);
  }

  @media (max-width: 900px){
    .asd-rpt-summary-grid{ grid-template-columns: 1fr; }
    .asd-rpt-method-grid{ grid-template-columns: 1fr; }
    .asd-rpt-cover-meta{ grid-template-columns: repeat(2, 1fr); }
  }

  /* Taskboard-Druck: am Bildschirm versteckte, druckbare Tabelle */
  .tb-print-only{ display:none; }
  .tbp-h1{ font-size:16pt; color:#111; margin:0 0 8mm; }
  .tbp-h1 .tbp-date{ font-size:10pt; color:#666; font-weight:400; margin-left:8px; }
  .tbp-table{ width:100%; border-collapse:collapse; font-size:10pt; }
  .tbp-table th, .tbp-table td{ border:1px solid #c8c8c8; padding:4px 7px; text-align:left; vertical-align:top; color:#111; }
  .tbp-table th{ background:#f0f0f0; font-weight:600; }
  .tbp-title{ font-weight:600; }
  .tbp-cl{ margin:3px 0 0; padding-left:15px; color:#333; font-size:9pt; list-style:none; }
  .tbp-cl li{ margin:1px 0; }
  .tbp-due{ white-space:nowrap; }

  @media print {
    /* Taskboard: nur die saubere Tabelle drucken, Bedien-UI ausblenden */
    #taskboardRoot .tb-wrap{ display:none !important; }
    #taskboardRoot .tb-print-only{ display:block !important; }
    .tbp-table tr{ break-inside:avoid; page-break-inside:avoid; }
    body.tb-printing{ background:#fff !important; color:#111 !important; }
    body.tb-printing #sidebar,
    body.tb-printing .topbar,
    body.tb-printing .accent-strip,
    body.tb-printing #backdrop,
    body.tb-printing #toast,
    body.tb-printing .toast,
    body.tb-printing .modal{ display:none !important; }
    body.tb-printing #app,
    body.tb-printing main,
    body.tb-printing #taskboardRoot{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; left:0 !important; }
  }
  @media print {
    @page {
      size: A4 portrait;
      margin: 16mm 14mm 18mm 14mm;
    }
    body.asd-printing {
      background: #fff !important;
      color: #111 !important;
    }
    body.asd-printing #sidebar,
    body.asd-printing .topbar,
    body.asd-printing .accent-strip,
    body.asd-printing #backdrop,
    body.asd-printing .modal,
    body.asd-printing .toast,
    body.asd-printing #toast,
    body.asd-printing .asd-sidebar,
    body.asd-printing .asd-print-hide,
    body.asd-printing #dashboardRoot,
    body.asd-printing #assessmentsRoot,
    body.asd-printing #boardRoot,
    body.asd-printing #ganttRoot,
    body.asd-printing #forecastRoot,
    body.asd-printing #reportRoot,
    body.asd-printing #soaRoot {
      display: none !important;
    }
    body.asd-printing #app,
    body.asd-printing main,
    body.asd-printing #assessmentDetailRoot,
    body.asd-printing .asd-layout,
    body.asd-printing .asd-main {
      display: block !important;
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
      padding: 0 !important;
      margin: 0 !important;
      background: #fff !important;
      border: 0 !important;
      box-shadow: none !important;
      color: #111 !important;
    }
    body.asd-printing #app {
      width: 100% !important;
      flex-direction: column !important;
    }

    body.asd-printing .asd-results { gap: 12mm; }

    /* Print-only header block rendered via CSS so we don't need extra DOM */
    body.asd-printing .asd-results::before {
      content: "Pulse · Assessment: " attr(data-assessment-name) "  ·  " attr(data-mandant);
      display: block;
      font-size: 10pt;
      color: #666;
      margin-bottom: 6mm;
      padding-bottom: 3mm;
      border-bottom: 1px solid #ccc;
    }

    body.asd-printing .asd-res-title { color: #111 !important; font-size: 18pt; }
    body.asd-printing .asd-res-sub   { color: #555 !important; font-size: 10pt; }
    body.asd-printing .asd-res-section-title { color: #111 !important; font-size: 13pt; }

    /* KPI strip, keep grid, but tighten */
    body.asd-printing .asd-res-kpis {
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 6mm !important;
    }
    body.asd-printing .asd-res-kpi {
      background: #fff !important;
      border: 1px solid #ccc !important;
      page-break-inside: avoid;
      break-inside: avoid;
    }
    body.asd-printing .asd-res-kpi-label { color: #555 !important; }
    body.asd-printing .asd-res-kpi-value { color: #111 !important; }
    body.asd-printing .asd-res-kpi-sub   { color: #777 !important; }
    body.asd-printing .asd-res-kpi-circle { color: #fff !important; }

    /* Radar + cluster overview on their own page(s) */
    body.asd-printing .asd-res-row {
      grid-template-columns: 1fr !important;
      gap: 8mm !important;
    }
    body.asd-printing .asd-res-radar-card,
    body.asd-printing .asd-res-cluster-overview {
      background: #fff !important;
      border: 1px solid #ccc !important;
      page-break-inside: avoid;
      break-inside: avoid;
    }
    body.asd-printing .asd-radar-ring { stroke: #e2e2e2 !important; }
    body.asd-printing .asd-radar-axis { stroke: #c0c0c0 !important; }
    body.asd-printing .asd-radar-poly {
      fill: rgba(46, 99, 153, 0.22) !important;
      stroke: #2e6399 !important;
    }
    body.asd-printing .asd-radar-point { fill: #2e6399 !important; }
    body.asd-printing .asd-radar-target { stroke: #b67d2a !important; }
    body.asd-printing .asd-radar-target-label { fill: #b67d2a !important; }
    body.asd-printing .asd-radar-label { fill: #333 !important; }
    body.asd-printing .asd-radar-scale { fill: #777 !important; }

    body.asd-printing .asd-res-cluster-row { page-break-inside: avoid; break-inside: avoid; }
    body.asd-printing .asd-res-cluster-row-name { color: #111 !important; }
    body.asd-printing .asd-res-cluster-row-bar { background: #eee !important; }
    body.asd-printing .asd-res-chip {
      background: #fff !important;
      border: 1px solid #d0d0d0 !important;
    }

    /* Start the Gap-Analyse on a fresh page */
    body.asd-printing .asd-res-gap {
      background: #fff !important;
      border: 1px solid #ccc !important;
      page-break-before: always;
      break-before: page;
    }
    body.asd-printing .asd-res-gap-card {
      background: #fafafa !important;
      border: 1px solid #d0d0d0 !important;
      page-break-inside: avoid;
      break-inside: avoid;
      margin-bottom: 6mm;
    }
    body.asd-printing .asd-res-gap-core { color: #111 !important; }
    body.asd-printing .asd-res-gap-norm { color: #555 !important; }
    body.asd-printing .asd-res-gap-ref  {
      background: rgba(46, 99, 153, 0.12) !important;
      color: #2e6399 !important;
    }
    body.asd-printing .asd-res-finding  {
      background: rgba(74, 138, 107, 0.10) !important;
      color: #111 !important;
      border-left-color: #4a8a6b !important;
    }
    body.asd-printing .asd-res-reco {
      background: rgba(74, 127, 184, 0.10) !important;
      color: #111 !important;
      border-left-color: #4a7fb8 !important;
    }
    body.asd-printing .asd-res-tag-label { color: #666 !important; }

    /* ===== Report-section print overrides ===== */

    /* Cover page, own page */
    body.asd-printing .asd-rpt-cover{
      background: #fff !important;
      border: 1px solid #bbb !important;
      padding: 20mm 16mm !important;
      page-break-after: always;
      break-after: page;
      min-height: 240mm;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
    }
    body.asd-printing .asd-rpt-cover-top{
      border-bottom-color: #ccc !important;
      color: #555 !important;
    }
    body.asd-printing .asd-rpt-cover-catalog{ color: #2e6399 !important; }
    body.asd-printing .asd-rpt-cover-assessment{ color: #111 !important; font-size: 22pt !important; }
    body.asd-printing .asd-rpt-cover-mandant{ color: #444 !important; }
    body.asd-printing .asd-rpt-cover-meta dt{ color: #555 !important; }
    body.asd-printing .asd-rpt-cover-meta dd{ color: #111 !important; }

    /* Hide the auto-header (rendered via ::before) on the cover page for cleanliness */
    body.asd-printing .asd-report::before{ display: none !important; }

    /* General section page break rules */
    body.asd-printing .asd-rpt-summary,
    body.asd-printing .asd-rpt-method,
    body.asd-printing .asd-rpt-participants,
    body.asd-printing .asd-rpt-overview,
    body.asd-printing .asd-res-cluster-overview,
    body.asd-printing .asd-res-gap,
    body.asd-printing .asd-res-qa,
    body.asd-printing .asd-rpt-appendix{
      page-break-before: auto;
      break-before: auto;
    }

    /* Start appendix on new page */
    body.asd-printing .asd-rpt-appendix{
      page-break-before: page;
      break-before: page;
    }

    /* Management summary box + top lists */
    body.asd-printing .asd-rpt-summary-box{
      background: #fff !important;
      border: 1px solid #ccc !important;
      page-break-inside: avoid; break-inside: avoid;
    }
    body.asd-printing .asd-rpt-summary-text{ color: #111 !important; }
    body.asd-printing .asd-rpt-summary-grid{ page-break-inside: avoid; break-inside: avoid; }
    body.asd-printing .asd-rpt-sub-title{ color: #444 !important; }
    body.asd-printing .asd-rpt-top-ref{
      background: #eef2f8 !important;
      color: #2e6399 !important;
    }
    body.asd-printing .asd-rpt-top-score{ color: #fff !important; }
    body.asd-printing .asd-rpt-top-text{ color: #111 !important; }

    /* Methodology */
    body.asd-printing .asd-rpt-method-grid p{ color: #333 !important; }
    body.asd-printing .asd-rpt-scale-num{ background: #2e6399 !important; color: #fff !important; }

    /* Participants */
    body.asd-printing .asd-rpt-participants-table th{ color: #555 !important; border-bottom-color: #ccc !important; }
    body.asd-printing .asd-rpt-participants-table td{ color: #111 !important; border-bottom-color: #e5e5e5 !important; }
    body.asd-printing .asd-rpt-roles{ color: #333 !important; }

    /* Appendix */
    body.asd-printing .asd-rpt-appendix-table td{ color: #333 !important; border-bottom-color: #e5e5e5 !important; }
    body.asd-printing .asd-rpt-appendix-id{ color: #2e6399 !important; }

    /* Running footer with page number via CSS Paged Media */
    @page {
      @bottom-right {
        content: "Seite " counter(page) " / " counter(pages);
        font-size: 9pt;
        color: #666;
      }
    }

    /* ===== Formal report overlay print, full document, not only viewport ===== */
    body.asd-formal-printing #app,
    body.asd-formal-printing #sidebar,
    body.asd-formal-printing .topbar,
    body.asd-formal-printing .accent-strip,
    body.asd-formal-printing #assessmentDetailRoot,
    body.asd-formal-printing #dashboardRoot,
    body.asd-formal-printing #boardRoot,
    body.asd-formal-printing #assessmentsRoot,
    body.asd-formal-printing #soaRoot,
    body.asd-formal-printing #forecastRoot,
    body.asd-formal-printing #reportRoot,
    body.asd-formal-printing #ganttRoot,
    body.asd-formal-printing .modal,
    body.asd-formal-printing #backdrop,
    body.asd-formal-printing .toast,
    body.asd-formal-printing #toast {
      display: none !important;
    }
    body.asd-formal-printing .asd-formal-topbar { display: none !important; }
    body.asd-formal-printing .asd-formal-overlay{
      position: static !important;
      inset: auto !important;
      background: #fff !important;
      display: block !important;
      overflow: visible !important;
      height: auto !important;
      max-height: none !important;
      z-index: auto !important;
    }
    body.asd-formal-printing .asd-formal-scroll{
      overflow: visible !important;
      height: auto !important;
      max-height: none !important;
      padding: 0 !important;
      flex: none !important;
      display: block !important;
    }
    body.asd-formal-printing .asd-formal-overlay .asd-results,
    body.asd-formal-printing .asd-formal-overlay .asd-report{
      display: block !important;
      height: auto !important;
      overflow: visible !important;
      max-height: none !important;
    }

    /* Force printed colors */
    body.asd-printing * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }
  }

/* =========================================================
   Product-development, Portfolio view + phase progress bar
   ========================================================= */

/* --- Phasen-Fortschrittsleiste (im Board-View bei kind='product') --- */
.product-phase-bar {
  display: flex;
  gap: 6px;
  padding: 8px;
  margin-top: 8px;
  margin-bottom: 4px;
  border-radius: 8px;
  flex-wrap: wrap;
}
.product-phase-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  min-height: 34px;
}
.product-phase-step:hover { border-color: var(--accent); }
.product-phase-idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-soft);
}
.product-phase-name { font-weight: 500; }
.product-phase-count { color: var(--text-dim); font-size: 11px; }
.product-phase-step[data-state="done"]   { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.product-phase-step[data-state="done"] .product-phase-idx { background: var(--accent); border-color: var(--accent); color: #fff; }
.product-phase-step[data-state="partial"]{ border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.product-phase-step[data-state="empty"]  { opacity: .55; }

/* --- Portfolio-View (#productsRoot) --- */
.products-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 2px;
}
.products-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px;
}
.products-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.products-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}
.products-header-actions {
  display: flex;
  gap: 8px;
}
.product-factory-map {
  padding: 14px;
  border-radius: 10px;
}
.product-factory-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.product-factory-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.product-factory-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-dim);
}
.product-factory-kpi {
  color: var(--text-soft);
  font-size: 12px;
  white-space: nowrap;
}
.product-factory-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.product-factory-node {
  position: relative;
  min-height: 74px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-soft);
  padding: 10px;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: 1fr auto;
  gap: 4px 8px;
  transition: border-color .15s, background-color .15s, color .15s;
}
.product-factory-node:hover {
  border-color: var(--accent-muted);
  color: var(--text);
}
.product-factory-node.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}
.product-factory-node::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  background: var(--border);
}
.product-factory-node[data-state="done"]::after { background: var(--accent); }
.product-factory-node[data-state="partial"]::after { background: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.product-factory-node[data-state="empty"] { opacity: .7; }
.product-factory-idx {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-dim);
  font-size: 10px;
}
.product-factory-node[data-state="done"] .product-factory-idx {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.product-factory-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}
.product-factory-meta {
  font-size: 11px;
  color: var(--text-dim);
}
.products-empty {
  padding: 28px;
  text-align: center;
  border-radius: 10px;
}
.products-empty-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.products-empty-sub {
  color: var(--text-soft);
  font-size: 13px;
  max-width: 520px;
  margin: 0 auto;
}
.products-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 2px 4px;
}
.products-phase-tabs {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.products-phase-tab {
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-soft);
  border-radius: 5px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.products-phase-tab:hover { color: var(--text); }
.products-phase-tab.active {
  border-color: var(--accent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* --- Matrix --- */
.products-matrix-wrap {
  padding: 14px 14px 10px;
  border-radius: 10px;
  overflow: auto;
}
.products-matrix-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.products-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.products-matrix th,
.products-matrix td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
}
.products-matrix th {
  font-weight: 600;
  color: var(--text-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.products-matrix th.products-matrix-rowhead,
.products-matrix td.products-matrix-rowhead {
  text-align: left;
}
.products-matrix-open {
  background: none;
  border: none;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.products-matrix-open:hover { color: var(--accent); }
.products-matrix-cell {
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}
.products-matrix-cell[data-state="done"] {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
  font-weight: 600;
}
.products-matrix-cell[data-state="partial"] {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--text);
}
.products-matrix-cell[data-state="empty"] {
  color: var(--text-dim);
}
.products-matrix-total {
  font-weight: 600;
  color: var(--text);
}

/* --- Fortschrittsliste --- */
.products-list-wrap {
  padding: 14px;
  border-radius: 10px;
}
.products-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.products-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 2fr);
  gap: 16px;
  align-items: center;
  padding: 10px 6px;
  border-bottom: 1px solid var(--border);
}
.products-list-row:last-child { border-bottom: none; }
.products-list-main { min-width: 0; }
.products-list-title {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-weight: 500;
  color: var(--text);
  font-size: 13px;
  text-align: left;
}
.products-list-title:hover { color: var(--accent); }
.products-list-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.products-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--text);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}
.products-list-bar {
  display: flex;
  height: 10px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--border);
}
.products-list-seg {
  height: 100%;
  border-right: 1px solid var(--bg);
}
.products-list-seg:last-child { border-right: none; }
.products-list-seg[data-state="done"]    { background: var(--accent); }
.products-list-seg[data-state="partial"] { background: color-mix(in srgb, var(--accent) 50%, var(--surface-2)); }
.products-list-seg[data-state="open"]    { background: var(--surface-2); }
.products-list-seg[data-state="empty"]   { background: transparent; }

/* =========================================================
   DL view (Dienstleistungen), Tab next to Auswertung
   Reuses .report-root/.report-header/.report-body styling.
   ========================================================= */

.dl-root { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; }

.dl-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 2px 4px;
}
.dl-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.dl-pill:hover { color: var(--text); }
.dl-pill.active {
  border-color: var(--accent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.dl-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  height: 18px;
  border-radius: 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-dim);
}
.dl-pill.active .dl-pill-count {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.dl-body { padding: 4px 2px; }
.dl-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  font-style: italic;
}

.dl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dl-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.dl-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.dl-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }

.dl-input {
  width: 100%;
  min-height: 32px;
  padding: 5px 9px;
  font-size: 13px;
}
/* Farbige Markierung der Kategorie im Select */
.dl-cat-intern   { border-left: 3px solid #3B82F6; }
.dl-cat-kunde    { border-left: 3px solid #10B981; }
.dl-cat-presales { border-left: 3px solid #F59E0B; }

.dl-del { opacity: .6; }
.dl-del:hover { opacity: 1; color: #c77; }

/* Global no-motion policy: Pulse should switch views and states immediately. */
*, *::before, *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* =========================================================
   Taskboard (zentraler Rollup, monday.com-Board-Look)
   ========================================================= */
.tb-wrap { display: flex; flex-direction: column; gap: 16px; padding: 4px 6px 28px; }
.tb-toolbar { display: flex; align-items: center; gap: 14px; padding: 2px 2px 0; }
.tb-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tb-seg-btn { padding: 7px 15px; font-size: 13px; font-weight: 600; color: var(--text-dim); background: transparent; border: 0; cursor: pointer; }
.tb-seg-btn.is-active { background: var(--accent); color: #fff; }
.tb-total { font-size: 13px; color: var(--text-dim); }
.tb-total strong { color: var(--text); font-size: 15px; }
.tb-spacer { flex: 1; }
.tb-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; }

/* one continuous board surface */
.tb-board { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05); overflow: hidden; }
.tb-group + .tb-group { border-top: 1px solid var(--border); }
.tb-group-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px 8px; background: transparent; border: 0; cursor: pointer; text-align: left; }
.tb-caret { color: var(--text-dim); font-size: 10px; width: 12px; display: inline-block; }
.tb-group-head.is-collapsed .tb-caret { transform: rotate(-90deg); }
.tb-group-name { font-size: 15px; font-weight: 700; }              /* eingefärbt per inline-style */
.tb-group-count { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--text-dim); }

/* Shared column grid, header + rows align exactly */
.tb-colhead, .tb-row {
  display: grid;
  grid-template-columns: 40px minmax(200px,1fr) 158px 132px 108px 36px;
  align-items: stretch;
}
/* The 6px colored bar that runs down the left of every group's items */
.tb-group-body { border-left: 6px solid var(--accent); }

.tb-colhead { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tb-colhead .tb-cell { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); min-height: 30px; }

.tb-row { border-bottom: 1px solid var(--border); cursor: pointer; }
.tb-row:last-child { border-bottom: 0; }
.tb-row:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.tb-row.is-done .tb-name-title { text-decoration: line-through; color: var(--text-dim); }

/* Cells: vertical gridlines like monday's board */
.tb-cell { display: flex; align-items: center; min-height: 46px; padding: 0 12px; border-right: 1px solid var(--border); min-width: 0; }
.tb-cell-act { border-right: 0; }
.tb-cell-check { justify-content: center; padding: 0; }
.tb-cell-status { padding: 0; }            /* status fills the whole cell */
.tb-cell-owners { gap: 0; }
.tb-cell-due { justify-content: flex-end; }
.tb-cell-act { justify-content: center; }

.tb-name-text { display: flex; flex-direction: column; min-width: 0; }
.tb-name-title { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-name-project { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* The signature monday element: a fully colour-filled status cell */
.tb-status-cell { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 0 8px; color: #fff; font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.2; }

.tb-avs { display: inline-flex; }
.tb-av { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; border: 2px solid var(--surface); margin-left: -8px; }
.tb-av:first-child { margin-left: 0; }
.tb-av-more { background: var(--surface-2); color: var(--text-dim); }
.tb-owner-empty { color: var(--text-dim); }

.tb-due { font-size: 12.5px; font-weight: 600; }
.tb-due-over { color: #e2445c; }
.tb-due-today { color: #fdab3d; }
.tb-due-soon { color: #d8870f; }
.tb-due-ok, .tb-due-none { color: var(--text-dim); font-weight: 500; }
.tb-due-done { color: #00c875; font-weight: 700; }

.tb-prio { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; margin-right: 8px; }
.tb-prio-high { background: #e2445c; }
.tb-prio-medium { background: #fdab3d; }
.tb-prio-low { background: #9aa3af; }

.tb-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--border-2, var(--border)); background: transparent; color: #fff; font-size: 11px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.tb-check:hover { border-color: #00c875; }
.tb-check.on { background: #00c875; border-color: #00c875; }
.tb-act { opacity: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); border-radius: 6px; width: 26px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tb-row:hover .tb-act { opacity: 1; }
.tb-act:hover { color: var(--accent); border-color: var(--accent); }

.tb-empty { padding: 40px 24px; text-align: center; color: var(--text-dim); font-size: 14px; background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; }

@media (max-width: 860px){
  .tb-colhead, .tb-row { grid-template-columns: 40px minmax(0,1fr) 120px 96px; }
  .tb-cell-owners, .tb-cell-act { display: none; }
}

/* =========================================================
   monday-Tabellenansicht (Main Table), .mt-*
   ========================================================= */
.mt-wrap { display: flex; flex-direction: column; gap: 14px; padding: 6px 6px 32px; }
/* one continuous board surface, groups are sections inside it, not separate cards */
.mt-board { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05); overflow: hidden; }
.mt-group + .mt-group { border-top: 1px solid var(--border); }
.mt-group-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.mt-caret { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; background: transparent; color: var(--text-soft); font-size: 34px; line-height: 1; cursor: pointer; padding: 0; border-radius: 6px; transition: background .12s, color .12s; }
.mt-caret:hover { background: var(--surface-2); color: var(--text); }
.mt-caret.is-collapsed { transform: rotate(-90deg); }
.mt-group-name { font-size: 15px; font-weight: 700; outline: none; border-radius: 4px; padding: 1px 4px; }
.mt-group-name:focus { background: var(--surface-2); box-shadow: 0 0 0 2px var(--accent); }
.mt-group-count { font-size: 12px; color: var(--text-dim); }

/* Shared column grid, header, rows, add-row and footer line up */
.mt-colhead, .mt-row, .mt-addrow, .mt-group-foot {
  display: grid;
  grid-template-columns: 42px minmax(220px,1fr) 160px 132px 132px 116px;
  align-items: stretch;
}
.mt-group-body { border-left: 6px solid var(--accent); }
.mt-colhead { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mt-colhead .mt-cell { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); min-height: 30px; }

.mt-cell { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-right: 1px solid var(--border); min-width: 0; }
.mt-cell:last-child { border-right: 0; }
.mt-cell-check { justify-content: center; padding: 0; }
.mt-cell-status, .mt-cell-prio { padding: 0; }
.mt-cell-due { padding: 0 6px; }

.mt-row { border-bottom: 1px solid var(--border); }
.mt-row:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.mt-row.is-done .mt-name-btn { text-decoration: line-through; color: var(--text-dim); }

.mt-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--border-2, var(--border)); background: transparent; color: #fff; font-size: 11px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mt-check:hover { border-color: #00c875; }
.mt-check.on { background: #00c875; border-color: #00c875; }

.mt-name-btn { border: 0; background: transparent; color: var(--text); font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.mt-name-btn:hover { color: var(--accent); }

/* Signature monday element: fully colour-filled, inline-editable status cell */
.mt-status-btn, .mt-prio-btn { width: 100%; height: 100%; border: 0; background: transparent; padding: 0; cursor: pointer; }
.mt-status-fill { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 8px; color: #fff; font-size: 12.5px; font-weight: 600; text-align: center; }
.mt-status-blank { color: var(--text-dim); background: var(--surface-2); }
.mt-prio-fill { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; color: #fff; font-size: 12px; font-weight: 600; }
.mt-prio-empty { display: flex; align-items: center; justify-content: center; width: 100%; color: var(--text-dim); }

.mt-avs { display: inline-flex; }
.mt-av { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; border: 2px solid var(--surface); margin-left: -8px; }
.mt-av:first-child { margin-left: 0; }
.mt-av-more { background: var(--surface-2); color: var(--text-dim); }
.mt-owner-btn { display: flex; align-items: center; width: 100%; border: 0; background: transparent; cursor: pointer; padding: 0; }
.mt-owner-empty { width: 26px; height: 26px; border-radius: 999px; border: 1.5px dashed var(--border-2, var(--border)); color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }

.mt-date { width: 100%; border: 0; background: transparent; color: var(--text); font-size: 12.5px; font-family: inherit; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.mt-date:hover, .mt-date:focus { background: var(--surface-2); outline: none; }

.mt-addrow { cursor: pointer; color: var(--text-dim); border-top: 1px solid transparent; }
.mt-addrow:hover { background: var(--surface-2); color: var(--accent); }
.mt-addrow .mt-cell { min-height: 38px; border-right: 0; }
.mt-addrow .mt-cell-name { font-size: 13px; font-weight: 500; }

.mt-group-foot .mt-cell { min-height: 30px; border-right: 0; background: var(--surface-2); }
.mt-sum-bar { display: flex; width: 100%; height: 14px; border-radius: 3px; overflow: hidden; }
.mt-sum-seg { height: 100%; }

.mt-addgroup { align-self: flex-start; margin-top: 2px; padding: 8px 16px; border: 1px dashed var(--border-2, var(--border)); background: var(--surface); color: var(--text-dim); border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.mt-addgroup:hover { color: var(--accent); border-color: var(--accent); }

/* inline status dropdown */
.mt-menu { position: fixed; z-index: 9999; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.mt-menu-opt { border: 0; border-radius: 5px; padding: 7px 12px; color: #fff; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; }
.mt-menu-opt:hover { filter: brightness(1.08); }
.mt-menu-clear { background: var(--surface-2) !important; color: var(--text-dim) !important; }

@media (max-width: 900px){
  .mt-colhead, .mt-row, .mt-addrow, .mt-group-foot { grid-template-columns: 40px minmax(0,1fr) 130px 116px; }
  .mt-cell-owners, .mt-cell-prio { display: none; }
}

/* ---- Taskboard inline-editable cells (status / owner / date / name) ---- */
.tb-cell-status, .tb-cell-owners { padding: 0; }
.tb-cell-due { padding: 0 6px; }
.tb-status-btn { width: 100%; height: 100%; min-height: 46px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.tb-owner-btn { width: 100%; height: 100%; border: 0; background: transparent; padding: 0 12px; cursor: pointer; display: flex; align-items: center; }
.tb-status-blank { background: var(--surface-2); color: var(--text-dim); }
.tb-name-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-width: 0; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; }
.tb-name-btn .tb-name-title, .tb-name-btn .tb-name-project { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tb-name-btn:hover .tb-name-title { color: var(--accent); }
.tb-date { width: 100%; border: 0; background: transparent; color: var(--text); font-size: 12.5px; font-family: inherit; cursor: pointer; padding: 5px 6px; border-radius: 6px; }
.tb-date:hover, .tb-date:focus { background: var(--surface-2); outline: none; }
.tb-date.is-over { color: #e2445c; font-weight: 600; }

/* ---- shared people-picker menu (used by table + taskboard) ---- */
.mt-menu-owner { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; border-radius: 6px; padding: 6px 8px; cursor: pointer; color: var(--text); font-size: 13px; text-align: left; }
.mt-menu-owner:hover { background: var(--surface-2); }
.mt-menu-owner.on { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.mt-menu-owner .mt-av { width: 24px; height: 24px; margin: 0; }
.mt-owner-nm { flex: 1; }
.mt-owner-check { color: #00c875; font-weight: 700; }
.mt-menu-note { padding: 8px 10px; color: var(--text-dim); font-size: 12.5px; }

/* =========================================================
   Stundenerfassung (.ts-*)
   ========================================================= */
.ts-wrap { display: flex; flex-direction: column; gap: 14px; padding: 6px 6px 32px; }
.ts-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ts-target { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.ts-target input { width: 70px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 13px; }
.ts-spacer { flex: 1; }
.ts-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.ts-chip { display: flex; flex-direction: column; gap: 2px; min-width: 120px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.ts-chip-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
.ts-chip-val { font-size: 22px; font-weight: 800; line-height: 1.1; }
.ts-chip-sub { font-size: 11px; color: var(--text-dim); }
.ts-pos { color: #00854d; }
.ts-neg { color: #e2445c; }
.ts-zero { color: var(--text-dim); }

.ts-addbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.ts-addbar input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text); font-size: 13px; font-family: inherit; }
.ts-addbar input[type=text] { flex: 1; min-width: 160px; }
.ts-addbar .ts-num { width: 92px; }

.ts-tablewrap { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05); overflow: hidden; }
.ts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ts-table thead th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); padding: 10px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ts-table td { padding: 4px 10px; border-bottom: 1px solid var(--border-soft, var(--border)); color: var(--text); vertical-align: middle; }
.ts-table tbody.ts-month-grp:last-child .ts-row:last-child td { border-bottom: 0; }
.ts-month td { background: var(--surface-2); font-weight: 700; font-size: 12px; color: var(--text); padding: 7px 10px; border-bottom: 1px solid var(--border); }
.ts-row.is-weekend td { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.ts-row input { width: 100%; border: 0; background: transparent; color: var(--text); font-size: 13px; font-family: inherit; padding: 5px 4px; border-radius: 6px; }
.ts-row input:hover, .ts-row input:focus { background: var(--surface-2); outline: none; }
.ts-row .ts-num { width: 64px; }
.ts-row .ts-date input { min-width: 120px; }
.ts-wd { color: var(--text-dim); font-size: 12px; width: 36px; }
.ts-ist { font-weight: 600; white-space: nowrap; }
.ts-ot { font-weight: 700; white-space: nowrap; }
.ts-del button { border: 0; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.ts-del button:hover { color: #e2445c; background: var(--surface-2); }
.ts-empty { padding: 40px 24px; text-align: center; color: var(--text-dim); font-size: 14px; }
/* Running entry (start set, no end yet) */
.ts-end { display: flex; align-items: center; gap: 4px; }
.ts-end input { flex: 1; min-width: 0; }
.ts-stop { border: 1px solid var(--accent-muted); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); cursor: pointer; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.ts-stop:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.ts-run { color: var(--accent); font-weight: 600; font-style: italic; }
.ts-row.is-running td { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
/* Freitext-Zeitfelder (HH:MM) */
.ts-time-input { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ts-addbar .ts-time-input { width: 86px; text-align: center; }
.ts-row .ts-time-input { text-align: left; }
/* Detail/Monat-Umschalter */
.ts-viewtoggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-left: 12px; }
.ts-vt { border: 0; background: transparent; color: var(--text-dim); font-size: 12px; padding: 5px 12px; cursor: pointer; }
.ts-vt + .ts-vt { border-left: 1px solid var(--border); }
.ts-vt:hover { color: var(--text); background: var(--surface-2); }
.ts-vt.is-active { color: var(--text); background: var(--surface-2); font-weight: 600; }
/* Monatsübersicht-Tabelle */
.ts-table-month th.ts-r, .ts-table-month td.ts-r { text-align: right; }
.ts-msum-row td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); }
.ts-msum-row:hover td { background: var(--surface-2); }
.ts-msum-total td { padding: 11px 10px; border-top: 2px solid var(--border); font-weight: 700; }

/* Wochenansicht, Tagesampel */
.ts-week{ display:flex; flex-direction:column; gap:12px; }
.ts-wk-head{ display:flex; align-items:center; gap:10px; }
.ts-wk-nav{ border:1px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer;
  font-size:14px; padding:5px 11px; border-radius:8px; }
.ts-wk-nav:hover{ border-color:var(--accent-muted); color:var(--accent); }
.ts-wk-title{ font-size:15px; font-weight:700; color:var(--text); letter-spacing:.02em; }
.ts-wk-sum{ font-size:13px; color:var(--text-soft); }
.ts-wk-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.ts-wk-day{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px 8px 12px;
  border-radius:12px; border:1px solid var(--border); background:var(--surface-2); position:relative; }
.ts-wk-day.is-today{ box-shadow:0 0 0 2px var(--accent-muted); }
.ts-wk-wd{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.ts-wk-date{ font-size:11px; color:var(--text-dim); }
.ts-wk-h{ font-size:20px; font-weight:700; color:var(--text); margin-top:4px; }
.ts-wk-ot{ font-size:12px; font-weight:700; min-height:16px; }
.ts-wk-lbl{ font-size:10px; letter-spacing:.04em; text-transform:uppercase; margin-top:3px; opacity:.95; }
/* Ampel = nur farbige UMRANDUNG + farbige SCHRIFT auf neutralem Hintergrund
   (kein farbiger Untergrund -> dezent, immer lesbar in hell & dunkel).
   grün = erfüllt/Überstunden, rot = zu wenig, neutral = kein Eintrag/frei. */
.ts-wk-day{ background:var(--surface-2); }
.ts-wk-day.ts-wk-over,
.ts-wk-day.ts-wk-under{ border-width:2px; }
.ts-wk-day.ts-wk-ok    { border-color:#1f9d57; }
.ts-wk-day.ts-wk-ok    .ts-wk-ot, .ts-wk-day.ts-wk-ok    .ts-wk-lbl{ color:#1f9d57; }
.ts-wk-day.ts-wk-over  { border-color:#1f9d57; }
.ts-wk-day.ts-wk-over  .ts-wk-ot, .ts-wk-day.ts-wk-over  .ts-wk-lbl{ color:#1f9d57; }
.ts-wk-day.ts-wk-under { border-color:#d23f34; }
.ts-wk-day.ts-wk-under .ts-wk-ot, .ts-wk-day.ts-wk-under .ts-wk-lbl{ color:#d23f34; }
.ts-wk-day.ts-wk-empty .ts-wk-lbl{ color:var(--text-dim); }
@media (max-width: 780px){ .ts-wk-grid{ grid-template-columns:repeat(4,1fr); } }

.tb-flat { border-left: 0 !important; }

/* Sidebar bündig statt abgesetzt: kein Rand-Abstand, scharfe Kanten,
   nur eine feine Trennlinie rechts; volle Höhe. */
#sidebar{
  margin: 0 !important;
  border-radius: 0 !important;
  border-width: 0 1px 0 0 !important;
  height: 100dvh !important;
}

/* =========================================================
   Drucken / PDF, Grundfunktion für jede Ansicht.
   Versteckt App-Chrome, druckt die aktuell sichtbare Ansicht
   randlos in Farbe (Browser-Dialog -> „Als PDF speichern").
   ========================================================= */
@media print {
  #sidebar, .topbar, #accentStrip, #toast, .backdrop, #onboarding { display: none !important; }
  html, body, #app, #app > main { height: auto !important; overflow: visible !important; background: #fff !important; }
  #app { display: block !important; }
  #app > main { display: block !important; padding: 0 !important; }
  #tableRoot, #taskboardRoot, #dashboardRoot, #timesheetRoot,
  #boardRoot, #ganttRoot, #soaRoot, #assessmentsRoot, #assessmentDetailRoot {
    overflow: visible !important; height: auto !important; max-height: none !important;
  }
  *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  @page { margin: 12mm; }
}

/* =========================================================
   Notizen (OneNote-artig), .nt-*
   ========================================================= */
.nt-wrap { display: flex; height: 100%; min-height: 0; }
.nt-list { width: 264px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow-y: auto; }
.nt-add { width: 100%; justify-content: center; }
.nt-items { display: flex; flex-direction: column; }
.nt-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 9px 10px; border: 0; border-bottom: 1px solid var(--border-soft, var(--border)); background: transparent; text-align: left; cursor: pointer; }
.nt-item:hover { background: var(--surface-2); }
.nt-item.is-active { background: var(--accent-soft); }
.nt-item-title { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.nt-item-date { font-size: 11px; color: var(--text-dim); }
.nt-editor { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.nt-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.nt-title { flex: 1; border: 0; background: transparent; color: var(--text); font-size: 18px; font-weight: 700; outline: none; min-width: 0; }
.nt-del { flex-shrink: 0; }
.nt-split { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.nt-body { border: 0; border-right: 1px solid var(--border); resize: none; padding: 14px; background: transparent; color: var(--text); font-family: var(--mono, ui-monospace, monospace); font-size: 13px; line-height: 1.55; outline: none; }
.nt-preview { padding: 14px 16px; overflow-y: auto; color: var(--text); line-height: 1.6; }
.nt-preview h1 { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.nt-preview h2 { font-size: 18px; font-weight: 700; margin: 14px 0 6px; }
.nt-preview h3 { font-size: 15px; font-weight: 700; margin: 12px 0 5px; }
.nt-preview p { margin: 0 0 9px; }
.nt-preview ul, .nt-preview ol { margin: 0 0 9px 20px; }
.nt-preview li { margin: 2px 0; }
.nt-preview code { background: var(--surface-2); padding: 1px 5px; font-size: 12.5px; }
.nt-preview pre { background: var(--surface-2); padding: 10px 12px; overflow-x: auto; }
.nt-preview a { color: var(--accent); }
.nt-preview blockquote { border-left: 3px solid var(--border-2, var(--border)); margin: 0 0 9px; padding: 2px 0 2px 12px; color: var(--text-soft); }
.nt-none, .nt-empty { padding: 28px 20px; color: var(--text-dim); font-size: 14px; }

/* Rich-Text-Formatleiste + Editor (Notizen) */
.nt-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 6px 14px; border-bottom: 1px solid var(--border); }
.nt-tb { min-width: 28px; height: 26px; padding: 0 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.nt-tb:hover { background: var(--surface-2); }
.nt-tb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.nt-colors { display: inline-flex; gap: 3px; }
.nt-color { width: 18px; height: 18px; border: 1px solid var(--border); cursor: pointer; padding: 0; }
.nt-rt { flex: 1; overflow-y: auto; padding: 14px 16px; outline: none; color: var(--text); line-height: 1.6; }
.nt-rt:empty::before { content: attr(data-ph); color: var(--text-dim); }
.nt-rt h2 { font-size: 18px; font-weight: 700; margin: 12px 0 6px; }
.nt-rt h3 { font-size: 15px; font-weight: 700; margin: 10px 0 5px; }
.nt-rt ul { list-style: disc outside; margin: 0 0 9px; padding-left: 24px; }
.nt-rt ol { list-style: decimal outside; margin: 0 0 9px; padding-left: 24px; }
.nt-rt li { margin: 2px 0; display: list-item; }
.nt-rt p { margin: 0 0 8px; }

/* =========================================================
   Notiz  Aufgabe, Verknüpfung (Karten-Sektion, Editor-Overlay, Chips)
   ========================================================= */
.cnote-count{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:color-mix(in srgb, var(--accent) 18%, var(--surface-2)); border:1px solid var(--accent-muted); color:var(--text); font-size:11px; font-weight:700; }
.cnote-wrap{ display:flex; flex-direction:column; gap:8px; }
.cnote-list{ display:flex; flex-direction:column; gap:6px; }
.cnote-empty{ font-size:12.5px; color:var(--text-dim); padding:2px 0; }
.cnote-row{
  display:flex; align-items:flex-start; gap:8px;
  padding:8px 10px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--border-soft);
}
.cnote-row:hover{ border-color:var(--accent-muted); }
.cnote-main{ flex:1; min-width:0; cursor:pointer; }
.cnote-title{ font-size:13px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; }
.cnote-multi{ font-size:10.5px; color:var(--accent); font-weight:700; }
.cnote-preview{ font-size:11.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.cnote-acts{ display:flex; gap:4px; flex-shrink:0; }
.cnote-act{ border:0; background:transparent; cursor:pointer; color:var(--text-dim); font-size:13px; padding:3px 6px; border-radius:6px; }
.cnote-act:hover{ background:var(--surface); color:var(--text); }
.cnote-del:hover{ color:var(--danger); }
.cnote-toolbar{ display:flex; gap:8px; }

/* Verknüpfungs-Chips (Editor-Overlay + Notizen-Ansicht) */
.note-link-chip{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; line-height:1.6;
  padding:1px 6px 1px 9px; margin:2px 3px 2px 0; border-radius:999px;
  background:color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  border:1px solid var(--accent-muted); color:var(--text);
}
.note-link-chip.is-clickable{ cursor:pointer; }
.note-link-chip.is-clickable:hover{ background:color-mix(in srgb, var(--accent) 26%, var(--surface-2)); }
.note-link-x{
  border:0; background:transparent; color:var(--text-dim); cursor:pointer;
  font-size:14px; line-height:1; padding:0 2px; border-radius:50%;
}
.note-link-x:hover{ color:var(--danger); background:color-mix(in srgb, var(--danger) 16%, transparent); }
.nt-linkbar{ padding:8px 2px 0; font-size:12px; }
.nt-linkbar-lbl, .note-ov-links-lbl{ color:var(--text-dim); font-size:11px; text-transform:uppercase; letter-spacing:.04em; margin-right:4px; }

/* Notiz-Editor-Overlay (über dem Karten-Modal) */
.note-ov{
  position:fixed; inset:0; z-index:200;
  background:rgba(5,9,14,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
}
.note-ov.hide{ display:none; }
.note-ov-panel{
  width:min(820px, 94vw); max-height:88vh; display:flex; flex-direction:column;
  padding:18px; border-radius:var(--radius-lg);
}
.note-ov-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.note-ov-title{
  flex:1; font-size:18px; font-weight:600; color:var(--text);
  background:transparent; border:0; border-bottom:1px solid var(--border);
  padding:6px 4px; outline:none;
}
.note-ov-title:focus{ border-color:var(--accent); }
.note-ov-links{ margin-bottom:8px; }
.note-ov-body{ flex:1; min-height:240px; overflow-y:auto; }

/* =========================================================
   Papierkorb (Trash), Overlay + Zeilen
   ========================================================= */
.trash-open-btn{ display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border:0; background:transparent; color:var(--text-soft); cursor:pointer; font-size:13px; }
.trash-open-btn:hover{ background:var(--surface-2); color:var(--text); }
.trash-open-btn .trash-open-lbl{ font-weight:500; }
.trash-count{ display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 5px; margin-left:auto; border-radius:999px; background:color-mix(in srgb, var(--accent) 20%, var(--surface-2)); border:1px solid var(--accent-muted); color:var(--text); font-size:10.5px; font-weight:700; }
.trash-page{ max-width:980px; }
.trash-page-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.trash-page-title{ font-size:20px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }
.trash-page-count{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:color-mix(in srgb, var(--accent) 18%, var(--surface-2)); border:1px solid var(--accent-muted); font-size:12px; font-weight:700; }
.trash-page-sub{ font-size:12.5px; color:var(--text-dim); margin-top:3px; }
.trash-spacer{ flex:1; }
.trash-list{ display:flex; flex-direction:column; gap:6px; }
.trash-empty{ padding:32px; text-align:center; color:var(--text-dim); font-size:14px; }
.trash-row{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border-soft); }
.trash-row:hover{ border-color:var(--accent-muted); }
.trash-main{ flex:1; min-width:0; }
.trash-row-title{ font-size:13.5px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:8px; }
.trash-tag{ flex-shrink:0; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:1px 7px; border-radius:999px; border:1px solid var(--border); color:var(--text-dim); }
.trash-tag-task{ background:color-mix(in srgb, var(--accent) 14%, var(--surface-2)); border-color:var(--accent-muted); color:var(--text-soft); }
.trash-tag-note{ background:color-mix(in srgb, #b89155 16%, var(--surface-2)); border-color:color-mix(in srgb,#b89155 40%,var(--border)); color:#d9b97a; }
.trash-tag-board{ background:color-mix(in srgb, #6b5b9a 18%, var(--surface-2)); border-color:color-mix(in srgb,#6b5b9a 44%,var(--border)); color:#b8a8e0; }
.trash-row-meta{ font-size:11.5px; color:var(--text-dim); margin-top:2px; }
.trash-row-meta strong{ color:var(--text-soft); font-weight:600; }
.trash-acts{ display:flex; gap:6px; flex-shrink:0; }
.trash-del{ color:var(--text-dim); }
.trash-del:hover{ color:var(--danger); border-color:var(--danger); }





/* ===== Story Map (Bucket-Sicht) ===== */
.smap-head{ display:flex; align-items:center; gap:8px; padding:12px 16px 4px; font-size:16px; font-weight:600; }
.smap-board-dot{ width:12px; height:12px; border-radius:3px; }
.smap-hint{ padding:40px; text-align:center; color:var(--text-dim); }
.smap-wrap{ display:flex; gap:14px; align-items:flex-start; padding:8px 16px 24px; }
.smap-col{ flex:0 0 300px; width:300px; display:flex; flex-direction:column; }
.smap-col-head{ position:sticky; top:0; z-index:1; background:var(--bg); display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 6px; margin-bottom:8px; font-weight:600; border-bottom:2px solid var(--accent-muted); }
.smap-col-count{ font-size:11px; color:var(--text-dim); font-weight:600; }
.smap-col-body{ display:flex; flex-direction:column; gap:8px; }
.smap-item{ border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:var(--surface); cursor:pointer; transition:border-color .12s, background .12s; }
.smap-item:hover{ border-color:var(--accent); }
.smap-item-top{ display:flex; align-items:center; gap:6px; }
.smap-title{ font-size:13px; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; }
.smap-kidcount{ font-size:10px; font-weight:700; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:0 6px; }
.smap-caret{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; font-size:14px; color:var(--text-dim); transition:transform .12s; }
.smap-caret.collapsed{ transform:rotate(0deg); }
.smap-caret:not(.collapsed){ transform:rotate(90deg); }
.smap-child{ margin-left:18px; }
.smap-overdue{ background:color-mix(in srgb, var(--danger) 16%, var(--surface)); border-color:color-mix(in srgb, var(--danger) 45%, var(--border)); }
.smap-overdue:hover{ border-color:var(--danger); }
.smap-done .smap-title{ text-decoration:line-through; color:var(--text-dim); }
.smap-meta{ display:flex; align-items:center; gap:8px; margin-top:5px; font-size:11px; color:var(--text-dim); }
.smap-prio-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.smap-empty{ color:var(--text-dim); font-size:12px; padding:8px 4px; }
.smap-item[draggable="true"]{ cursor:grab; }
.smap-item.smap-dragging{ opacity:.5; }
.smap-subtoggle{ display:flex; align-items:center; gap:6px; margin:2px 0 4px 10px; padding:3px 8px; font-size:11px; font-weight:600; color:var(--text-soft); cursor:pointer; border-left:2px solid var(--border); border-radius:0 6px 6px 0; user-select:none; }
.smap-subtoggle:hover{ color:var(--text); border-left-color:var(--accent); }
.smap-col-head .smap-col-name{ flex:1; }
.smap-col-menu{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; border:0; background:transparent; color:var(--text-dim); border-radius:5px; cursor:pointer; }
.smap-col-menu:hover{ background:var(--surface-2); color:var(--text); }
.smap-col-drop{ outline:2px dashed var(--accent); outline-offset:3px; border-radius:8px; }
.smap-addcol{ flex:0 0 160px; width:160px; }
.smap-addbucket{ width:100%; padding:8px 10px; border:1px dashed var(--border); border-radius:8px; background:transparent; color:var(--text-dim); font-size:13px; cursor:pointer; }
.smap-addbucket:hover{ border-color:var(--accent); color:var(--text); }
.smap-drop-line{ height:0; border-top:2px dashed var(--accent); margin:3px 0; border-radius:2px; }
.smap-item-droptarget{ outline:2px solid var(--accent); outline-offset:1px; }
.sub-badge-detach{ margin-left:8px; font-size:10px; font-weight:700; color:var(--accent); background:transparent; border:1px solid var(--accent-muted); border-radius:6px; padding:1px 7px; cursor:pointer; }
.sub-badge-detach:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent); }
/* Kennzeichnung im Karten-Dialog, wenn die Karte eine Unteraufgabe ist */
.sub-badge{ display:inline-flex; align-items:center; gap:6px; margin:6px 0 0 8px; font-size:11px; font-weight:600; color:var(--accent); }
.sub-badge-lvl{ font-size:10px; font-weight:700; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:0 6px; }
/* Story-Map-Karte nutzt die etablierten Bausteine, Labels und Prioritaets-Kante */
.smap-labels{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:6px; }
.smap-item.prio-high{ border-left:3px solid #c16b6b; }
.smap-item.prio-medium{ border-left:3px solid #d4a85a; }
.smap-item.prio-low{ border-left:3px solid #6a9fb5; }
/* Taskboard-Tabelle, Unteraufgabe eingerückt, Anzahl-Chip, überfällige Zeile rötlich */
.tb-row-sub{ background:color-mix(in srgb, var(--accent) 5%, transparent); }
.tb-subcount{ font-size:10px; font-weight:700; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:0 6px; margin-left:6px; }
.tb-row-over{ background:color-mix(in srgb, var(--danger) 12%, transparent); }

/* ===== Cockpit (Dashboard) ===== */
.cp-wrap{ max-width:1100px; margin:0 auto; padding:14px 16px 28px; }
.cp-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.cp-title{ font-size:20px; font-weight:700; margin:0; }
.cp-scope{ display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.cp-scope-btn{ padding:6px 12px; font-size:12px; font-weight:600; background:transparent; color:var(--text-dim); border:0; cursor:pointer; }
.cp-scope-btn.is-active{ background:var(--accent); color:#fff; }
.cp-scope-name{ font-size:12px; color:var(--text-dim); max-width:260px; }
.cp-top{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.cp-donut-wrap{ flex:0 0 auto; }
.cp-donut-pct{ font-size:26px; font-weight:700; fill:var(--text); }
.cp-donut-lbl{ font-size:8px; letter-spacing:.14em; fill:var(--text-dim); }
.cp-tiles{ flex:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; min-width:280px; }
.cp-tile{ border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:14px 16px; }
.cp-tile-val{ font-size:26px; font-weight:700; color:var(--text); }
.cp-tile-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); margin-top:4px; }
.cp-tile-sub{ font-size:11px; color:var(--text-dim); margin-top:6px; }
.cp-tile.cp-tone-over{ border-color:color-mix(in srgb, var(--danger) 50%, var(--border)); }
.cp-tile.cp-tone-over .cp-tile-val{ color:var(--danger); }
.cp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.cp-panel{ border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:14px 16px; }
.cp-panel-head{ font-weight:600; margin-bottom:12px; }
.cp-panel-sub{ font-size:11px; color:var(--text-dim); font-weight:400; margin-left:6px; }
.cp-bars{ display:flex; flex-direction:column; gap:10px; }
.cp-bar-row{ display:flex; align-items:center; gap:10px; }
.cp-bar-name{ flex:0 0 140px; max-width:140px; font-size:12px; color:var(--text-soft); }
.cp-bar{ flex:1; height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden; }
.cp-bar>span{ display:block; height:100%; border-radius:4px; }
.cp-bar-val{ flex:0 0 auto; font-size:11px; color:var(--text-dim); }
.cp-next{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.cp-next-row{ display:flex; align-items:center; gap:8px; padding:7px 6px; border-radius:8px; cursor:pointer; }
.cp-next-row:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent); }
.cp-next-title{ flex:1; font-size:13px; color:var(--text); }
.cp-next-due{ font-size:11px; }
.cp-next-over{ color:var(--danger); font-weight:600; }
.cp-next-soon{ color:var(--warning); }
.cp-next-ok{ color:var(--text-dim); }
.cp-empty{ color:var(--text-dim); font-size:13px; padding:14px 4px; }
@media (max-width:820px){ .cp-cols{ grid-template-columns:1fr; } }

/* ===== Auftragslog (Ausfuehrungsdetails, aus dem Dashboard ausgelagert) ===== */
.alog-wrap{max-width:1100px;margin:0 auto;padding:14px 16px 32px;color:var(--text)}
.alog-head{padding:4px 0 16px;border-bottom:1px solid var(--border);margin-bottom:14px}
.alog-head h1{margin:0;font-size:20px;font-weight:700}
.alog-head p{margin:5px 0 12px;color:var(--text-dim);font-size:12px;line-height:1.45}
.alog-head .input{width:100%;max-width:420px}
.alog-list{display:flex;flex-direction:column;gap:8px}
.alog-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.alog-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
.alog-card-head:hover{background:var(--surface-2)}
.alog-card-titles h3{margin:0;font-size:14px;font-weight:600;color:var(--text)}
.alog-card-titles p{margin:3px 0 0;font-size:11px;color:var(--text-dim)}
.alog-card-titles p span{padding:0 4px}
.alog-card-titles p b{font-weight:600;color:var(--text-soft)}
.alog-card-facts{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--text-soft);flex-shrink:0}
.alog-executor{color:var(--text-dim);font-style:italic}
.alog-caret{color:var(--text-dim);width:12px;text-align:center}
.alog-card.is-open{border-color:var(--accent-muted)}
.alog-card-body{padding:0 14px 14px;border-top:1px solid var(--border-soft)}
.alog-last{margin:10px 0;font-size:12px;color:var(--text-soft)}
.alog-events{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.alog-event{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:6px;padding:8px 10px;font-size:12px;color:var(--text-soft)}
.alog-event time{display:block;color:var(--accent);font-size:11px;margin-bottom:2px}
.alog-event div{margin-top:2px;white-space:pre-wrap;word-break:break-word}
.alog-empty,.alog-empty-state{color:var(--text-dim);font-size:12px;padding:18px;text-align:center}


/* ===== Dashboard v3: Fortschritt statt Audit-Protokoll (27.09.2026) ===== */
.dash-v3{max-width:1320px;margin:0 auto;padding:14px 16px 32px;color:var(--text)}
/* Kompakte Fassung (27.09.2026, Charlie: viel zu viel Platz fuer Ueberschrift/
   Kreisdiagramm/Agenten/LLM-Verbrauch verschwendet). Nur noch die Board-Kacheln,
   ganz oben, kein Kopfbereich, keine Seitenspalte. */
.dash-v3-compact{padding-top:6px}
.dash-v3-compact .dash-board-grid{margin-top:0}
.dash-headbar{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:4px 0 16px;border-bottom:1px solid var(--border)}
.dash-hb-title{margin:0;font-weight:700;font-size:22px}
.dash-hb-sub{margin:5px 0 0;color:var(--text-dim);font-size:12px;line-height:1.45}
.dash-main{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;margin-top:16px;align-items:start}
.dash-section-title,.agents-panel h2,.usage-panel h2{font-size:15px;font-weight:700;margin:0 0 10px}
.section-hint{margin:0 0 10px;color:var(--text-dim);font-size:12px;line-height:1.45}
.dash-board-grid{display:grid;gap:10px}
/* TEST (27.09.2026, Charlie): duenner Rahmen in McLaren-Orange/Papaya um die
   Board-Kacheln, zur Probe. Farbe bestaetigt, Linie auf Wunsch verduennt
   (0.5px statt 1px - auf Bildschirmen mit hoher Pixeldichte ein echter
   Haarstrich, sonst rundet der Browser auf 1px). Eigene Variable, damit
   der Test mit einer Zeile rueckgaengig zu machen ist (border-color zurueck
   auf var(--border)). */
.dash-board-tile{display:grid;grid-template-columns:10px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;row-gap:4px;align-items:center;text-align:left;background:var(--surface);border:0.5px solid #FF8000;border-radius:10px;padding:12px 14px;cursor:pointer;font:inherit;color:inherit}
.dash-board-tile:hover{border-color:var(--accent-muted);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.dash-board-dot{width:10px;height:10px;border-radius:50%}
.dash-board-name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-board-pct{font-size:16px;font-weight:700;color:var(--accent)}
.dash-board-sub{grid-column:2/3;font-size:11px;color:var(--text-dim)}
.dash-board-bar{border-radius:4px;background:var(--surface-2)}
.dash-empty-row{border:1px dashed var(--border);padding:18px;border-radius:8px;color:var(--text-dim);font-size:12px}
.dash-side{display:flex;flex-direction:column;gap:14px}
.dash-chart-panel,.agents-panel,.usage-panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px}
.dash-chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.dash-chart-title{font-size:15px;font-weight:700}
.dash-chart-body{display:flex;flex-direction:column;align-items:center;gap:10px}
.dash-chart-donut{width:132px;height:132px}
.dash-donut-num{font-size:20px;font-weight:800;fill:var(--text)}
.dash-donut-sub{font-size:8px;letter-spacing:.08em;fill:var(--text-dim)}
.dash-chart-empty{color:var(--text-dim);font-size:12px;padding:18px 0}
.dash-chart-legend{display:flex;flex-direction:column;gap:2px;width:100%}
.dash-chart-legend-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;border:1px solid transparent;background:none;font:inherit;color:inherit;cursor:pointer;font-size:12px;text-align:left}
.dash-chart-legend-row:hover,.dash-chart-legend-row.is-active{background:var(--surface-2);border-color:var(--border)}
.dash-dot{width:9px;height:9px;border-radius:50%;flex:none}
.pixel-agent{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.pixel-agent:last-child{border-bottom:0}.pixel-agent-copy{display:flex;flex-direction:column;min-width:0;gap:2px}.pixel-agent-copy strong{font-size:13px}.pixel-agent-copy span{font-size:11px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pixel-agent-copy em{font-size:10px;font-style:normal;color:var(--text-dim)}.pixel-agent.is-working .pixel-agent-copy em{color:var(--accent)}
.pixel-sprite{position:relative;display:block;width:38px;height:38px;image-rendering:pixelated;background:linear-gradient(90deg,transparent 33%,#d8b363 33% 66%,transparent 66%);filter:drop-shadow(0 2px 0 #15110a)}.pixel-sprite i{position:absolute;width:6px;height:6px;background:#e4b123;box-shadow:6px 0 #e4b123,0 6px #c9942f,6px 6px #c9942f}.pixel-sprite i:nth-child(1){left:13px;top:4px}.pixel-sprite i:nth-child(2){left:7px;top:16px}.pixel-sprite i:nth-child(3){left:25px;top:16px}.pixel-sprite i:nth-child(4){left:13px;top:16px}.pixel-sprite i:nth-child(5){left:7px;top:28px}.pixel-sprite i:nth-child(6){left:19px;top:28px}.pixel-agent.is-working .pixel-sprite{animation:pixel-step 700ms steps(2,end) infinite}@keyframes pixel-step{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.usage-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px}.usage-row:last-child{border-bottom:0}.usage-row span{color:var(--text-soft)}.usage-row b{font-size:12px;white-space:nowrap;color:var(--text)}.usage-row.usage-muted b{color:var(--text-dim)}
.usage-muted{color:var(--text-dim);font-size:12px;line-height:1.45}
/* Bildvorschau an Karten-Anhaengen (27.09.2026): grosses Overlay statt Download,
   siehe openImagePreview() in 05-modals.js. */
.attach-preview-overlay{
  position:fixed; inset:0; z-index:9999; background:rgba(10,8,6,.86);
  display:flex; align-items:center; justify-content:center; padding:32px;
  cursor:zoom-out;
}
.attach-preview-box{
  position:relative; max-width:92vw; max-height:92vh; display:flex;
  flex-direction:column; align-items:center; gap:10px; cursor:default;
}
.attach-preview-box img{
  max-width:92vw; max-height:82vh; object-fit:contain; border-radius:6px;
  box-shadow:0 12px 40px rgba(0,0,0,.5); background:#fff;
}
.attach-preview-name{color:var(--text-dim); font-size:12.5px; text-align:center}
.attach-preview-close{
  position:absolute; top:-14px; right:-14px; width:34px; height:34px;
  border-radius:999px; background:var(--surface-2); color:var(--text-soft);
  border:1px solid var(--border); display:flex; align-items:center;
  justify-content:center; cursor:pointer;
}
.attach-preview-close:hover{color:var(--danger); border-color:var(--danger)}
@media (max-width:980px){.dash-main{grid-template-columns:1fr}.dash-side{display:grid;grid-template-columns:1fr 1fr}.dash-headbar{flex-direction:column}}
@media (max-width:640px){.dash-side{grid-template-columns:1fr}.dash-v3{padding:12px 4px 24px}}

/* ===== Projektmappe: Team-Verteilung (27.09.2026) ===== */
.pm-team-grid{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.pm-team-row{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:9px}
.pm-team-row-muted{opacity:.75;border-style:dashed}
.pm-avatar{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#15110a}
.pm-avatar-muted{background:var(--surface-2);color:var(--text-dim)}
.pm-team-copy{flex:1;min-width:0}
.pm-team-name{font-weight:600;font-size:13px}
.pm-team-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.pm-team-chip{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:2px 7px;font-size:11px;color:var(--text-soft)}
.pm-team-empty{color:var(--text-dim);font-size:11px}
.pm-team-count{flex:0 0 auto;font-weight:700;font-size:13px;color:var(--accent);align-self:center}
.pm-team-empty-state{color:var(--text-dim);font-size:12px;padding:12px;border:1px dashed var(--border);border-radius:9px;margin-bottom:4px}