/* Fake-Dashboards: schwarz, alle gleich */
.dash { position: absolute; container-type: inline-size; background: var(--app-bg); border: 1px solid #262626; border-radius: 1.2cqw; overflow: hidden; display: grid; grid-template-columns: 22cqw 1fr; color: var(--app-fg); font-family: Inter, var(--f-head); box-shadow: 0 40px 120px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.03); aspect-ratio: 16/10; }
.dash .side { background: var(--app-side); border-right: 1px solid var(--app-line); padding: 2cqw 1.6cqw; display: grid; gap: .9cqw; align-content: start; overflow: hidden; }
.dash .hub { display: flex; align-items: center; gap: 1.2cqw; font-weight: 600; font-size: 1.9cqw; }
.dash .hub b { width: 3.8cqw; height: 3.8cqw; border-radius: .9cqw; display: grid; place-items: center; font-size: 1.4cqw; color: #fff; flex: none; }
.dash .find { border: 1px solid var(--app-line); border-radius: .8cqw; padding: .9cqw 1.2cqw; font-size: 1.3cqw; color: var(--app-mute); background: #000; }
.dash .grp { font-family: var(--f-mono); font-size: 1cqw; letter-spacing: .2em; color: var(--app-mute); margin-top: .6cqw; }
.dash .it { font-size: 1.45cqw; color: var(--app-mute); padding: .5cqw 1cqw; border-radius: .7cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .it.h { color: var(--app-fg); font-weight: 600; padding-left: 0; }
.dash .it.on { background: #1A1A1A; color: var(--app-fg); }
.dash .main { display: grid; grid-template-rows: auto auto 1fr; min-width: 0; }
.dash .top { display: flex; align-items: center; gap: 1cqw; padding: 1.4cqw 2.2cqw; border-bottom: 1px solid var(--app-line); font-size: 1.35cqw; color: var(--app-mute); }
.dash .top .sp { flex: 1; }
.dash .top .pill { border: 1px solid var(--app-line); border-radius: .8cqw; padding: .6cqw 1.2cqw; color: var(--app-fg); }
.dash .ttl { display: flex; align-items: center; gap: 1.4cqw; padding: 2cqw 2.2cqw 1.2cqw; }
.dash .ttl .ic { width: 4cqw; height: 4cqw; border-radius: 1cqw; display: grid; place-items: center; font-size: 1.8cqw; color: #fff; }
.dash .ttl h4 { margin: 0; font-size: 2.3cqw; font-weight: 600; }
.dash .ttl p { font-size: 1.3cqw; color: var(--app-mute); }
.dash .ttl .btn { margin-left: auto; background: var(--orange); color: #fff; font-size: 1.3cqw; font-weight: 600; padding: .9cqw 1.6cqw; border-radius: .8cqw; }
.dash .body { padding: 0 2.2cqw 2cqw; display: grid; gap: 1.4cqw; align-content: start; min-height: 0; overflow: hidden; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; }
.kpi { background: var(--app-card); border: 1px solid var(--app-line); border-radius: 1cqw; padding: 1.3cqw 1.4cqw; }
.kpi .l { font-size: 1.1cqw; color: var(--app-mute); }
.kpi .v { font-size: 2.4cqw; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: .3cqw; letter-spacing: -.02em; }
.kpi .d { font-size: 1.05cqw; color: #4ADE80; }
.kpi .d.n { color: #F87171; }
.card { background: var(--app-card); border: 1px solid var(--app-line); border-radius: 1cqw; padding: 1.4cqw; display: grid; gap: 1cqw; min-width: 0; }
.card h5 { margin: 0; font-size: 1.35cqw; font-weight: 600; }
.row2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2cqw; }
.hbar { display: grid; grid-template-columns: 10cqw 1fr 5.5cqw; gap: 1cqw; align-items: center; font-size: 1.15cqw; color: var(--app-mute); }
.hbar i { height: 1cqw; border-radius: 99px; background: #1C1C1C; position: relative; overflow: hidden; }
.hbar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c, var(--orange)); border-radius: 99px; }
.hbar span:last-child { text-align: right; color: var(--app-fg); font-variant-numeric: tabular-nums; }
.lrow { display: grid; grid-template-columns: 1fr auto; gap: 1cqw; font-size: 1.15cqw; padding: .7cqw 0; border-top: 1px solid var(--app-line); color: var(--app-mute); align-items: center; }
.lrow b { color: var(--app-fg); font-weight: 500; }
.task { display: grid; grid-template-columns: .35cqw 1fr auto; gap: 1.4cqw; align-items: center; padding: 1.1cqw 1.4cqw; border-top: 1px solid var(--app-line); }
.task:first-child { border-top: 0; }
.task i { align-self: stretch; border-radius: 99px; background: #3B82F6; }
.task .tt { font-size: 1.35cqw; font-weight: 500; display: flex; gap: .8cqw; align-items: center; flex-wrap: wrap; }
.task .tg { display: flex; gap: .6cqw; margin-top: .5cqw; flex-wrap: wrap; }
.tag { font-size: 1cqw; padding: .25cqw .8cqw; border-radius: 99px; border: 1px solid var(--app-line); color: var(--app-fg); white-space: nowrap; }
.tag.b { background: #1D3A8A; border-color: #1D4ED8; color: #DBEAFE; }
.tag.ok::before { content: "● "; color: #22C55E; }
.tag.late { background: rgba(220,38,38,.18); border-color: rgba(248,113,113,.5); color: #FCA5A5; }
.tag.or { background: rgba(254,80,0,.15); border-color: rgba(254,80,0,.45); color: #FFC2A6; }
.task .meta { font-size: 1.1cqw; color: var(--app-mute); text-align: right; white-space: nowrap; }
.task .meta em { font-style: normal; color: #4ADE80; }
.tabs { display: flex; gap: .4cqw; background: var(--app-card); border: 1px solid var(--app-line); border-radius: 1cqw; padding: .4cqw; width: max-content; }
.tabs span { font-size: 1.2cqw; padding: .6cqw 1.2cqw; border-radius: .7cqw; color: var(--app-mute); }
.tabs span.on { background: #1A1A1A; color: var(--app-fg); }
.media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; }
.mph { border: 1px solid var(--app-line); border-radius: 1cqw; overflow: hidden; background: var(--app-card); }
.mph img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.mph div { display: flex; gap: .6cqw; justify-content: flex-end; padding: .9cqw; }
.mph div span { font-size: 1cqw; border: 1px solid var(--app-line); border-radius: .6cqw; padding: .3cqw .8cqw; color: var(--app-mute); }
.chart svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 1.6cqw; font-size: 1.05cqw; color: var(--app-mute); }
.legend span::before { content: ""; display: inline-block; width: 1.4cqw; height: .3cqw; margin-right: .5cqw; vertical-align: middle; background: var(--c); }
.roster { display: grid; grid-template-columns: 13cqw repeat(7, 1fr); gap: .5cqw; font-size: 1.05cqw; }
.roster .h { color: var(--app-mute); text-align: center; font-family: var(--f-mono); font-size: .95cqw; }
.roster .p { color: var(--app-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center; }
.roster .p small { display: block; color: var(--app-mute); font-size: .9cqw; }
.sh { border-radius: .6cqw; text-align: center; padding: .9cqw 0; font-weight: 500; }
.sh.F { background: rgba(59,130,246,.2); color: #BFDBFE; }
.sh.S { background: rgba(254,80,0,.2); color: #FFD3BF; }
.sh.N { background: rgba(139,92,246,.22); color: #DDD6FE; }
.sh.X { background: transparent; color: var(--app-mute); border: 1px dashed var(--app-line); }