/* ============================================================
   APP-SHELL — eigene, ergänzende Regeln für Rail/Topbar/Panels (nicht Teil des Kits).
   ============================================================ */
.ico{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.shell{height:100vh;display:flex;flex-direction:column}
.topbar{height:var(--topbar-h);flex:none;display:flex;align-items:center;gap:4px;padding:0 8px;background:#fff;border-bottom:1px solid var(--border-1)}
.wordmark{font:700 15px/1 var(--font-sans);padding:0 8px;color:var(--ink)}
.sep{width:1px;align-self:stretch;margin:8px 4px;background:var(--border-1)}
.crumb-dim{font:var(--type-small);color:var(--text-3)}
.crumb-title{font:var(--type-card-title);padding:0 4px}
.user{display:flex;align-items:center;gap:8px;padding:0 8px;font:var(--type-small)}
.user b{font:var(--fw-semibold) var(--fs-13)/1 var(--font-sans);color:var(--text-1);display:block}
.user span{color:var(--text-3)}
.avatar{width:24px;height:24px;border-radius:var(--radius-2);background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center;font:var(--fw-semibold) 11px/1 var(--font-sans)}
.body-row{flex:1;display:flex;min-height:0}
.rail{width:var(--rail-w);flex:none;background:var(--gray-50);border-right:1px solid var(--border-1);display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0}
.rail .grow{flex:1}
.topbar .grow{flex:1}
.rail-item{position:relative}
/* Leiste: oben die Arbeitsbereiche (Dashboards, Chat, Segmente), abgetrennt darunter alle Einstellungsseiten */
.rail-sep{width:22px;height:1px;margin:8px 0;background:var(--border-2);flex:none}
.rail-dot{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--blue-500);box-shadow:0 0 0 2px var(--gray-50)}
.panel{width:var(--sidebar-w);flex:none;background:#fff;border-right:1px solid var(--border-1);display:flex;flex-direction:column;min-height:0}
.panel-list{overflow:auto;padding:4px}
.hrow{display:flex;flex-direction:column;gap:2px;padding:6px 8px;border-radius:var(--radius-2);cursor:pointer}
.hrow:hover{background:var(--surface-hover)}
.hrow--active{background:var(--surface-selected)}
.hrow__t{font:var(--fw-medium) var(--fs-13)/1.3 var(--font-sans);color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrow__m{font:var(--type-small);color:var(--text-3)}
main.view{flex:1;min-width:0;overflow:auto;background:var(--surface-app)}
.pad{padding:16px;display:flex;flex-direction:column;gap:12px}
.page-title{margin:0;font:var(--type-page-title);color:var(--text-accent)}
.page-sub{font:var(--type-small);color:var(--text-3)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.metric-label{font:var(--type-label-caps);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-3)}
.metric-val{font:var(--type-metric);margin-top:6px}
.metric-sub{font:var(--type-small);color:var(--text-3);margin-top:2px}
.screen{display:none}
.screen.active{display:block}
.chat-col{flex-direction:column;height:100%}
.screen.active.chat-col{display:flex}
.chat-scroll{flex:1;min-height:0;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:18px}
.composer-wrap{flex:none;padding:12px 16px 24px;border-top:1px solid var(--border-1);background:var(--gray-50);width:100%}
.stat5{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.stat5 div{background:var(--gray-50);border-radius:var(--radius-2);padding:8px;text-align:center}
.stat5 .l{font:var(--type-small);color:var(--text-3)}
.stat5 .v{font:var(--fw-semibold) var(--fs-14)/1 var(--font-mono);margin-top:3px}
.bars{display:flex;flex-direction:column;gap:6px}
.bars .r{display:grid;grid-template-columns:96px 1fr 64px;align-items:center;gap:8px}
.bars .k{font:var(--type-small);color:var(--text-2)}
.bars .track{height:16px;background:var(--chart-grid);border-radius:1px}
.bars .fill{height:100%;border-radius:1px}
.bars .v{font:var(--type-mono);text-align:right}