/* ============================================================
   Project TARS – Design-System
   (übernommen aus dem VisionFX-Dashboard, gleiche Optik)
   ============================================================ */
:root{
    --bg: #030303;
    --panel: rgba(16, 18, 24, 0.58);
    --border: rgba(255,255,255,0.12);
    --border-strong: rgba(255,255,255,0.18);
    --text: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.70);
    --muted2: rgba(255,255,255,0.55);
    --shadow: 0 14px 50px rgba(0,0,0,0.55);
    --shadow-soft: 0 10px 28px rgba(0,0,0,0.42);
    --radius: 18px;
    --radius-sm: 14px;
    --accent: #602EEF;
    --accent2: #4A00E0;
    --focus: rgba(96, 46, 239, 0.45);
    --success: #2ecc71;
    --warning: #f39c12;
    --error: #e74c3c;
    --page-pad: 22px;
    --header-h: 64px;
    --gap: 18px;
}

html, body {
    height: 100%;
    width: 100%;
    background-color: var(--bg);
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text);
    /* Das Bild liegt in body::before (position: fixed). Als
       background-attachment: fixed auf dem body malte es nur die erste
       Bildschirmhöhe aus – auf langen Seiten wurde darunter alles schwarz. */
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
}

body::before{
    content:""; position: fixed; inset: 0; z-index: -2;
    /* Reihenfolge = Malreihenfolge von oben nach unten: erst die Farbschleier,
       zuletzt (also ganz unten) das Foto. */
    background:
        radial-gradient(1200px 700px at 12% 10%, rgba(96,46,239,0.18), transparent 55%),
        radial-gradient(900px 600px at 85% 20%, rgba(74,0,224,0.14), transparent 55%),
        radial-gradient(900px 650px at 50% 105%, rgba(0,0,0,0.82), rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.86)),
        url('/static/assets/dashboard_background.webp') center / cover no-repeat;
    pointer-events: none;
}
body::after{
    content:""; position: fixed; inset: 0; z-index: -1; opacity: 0.10;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 6px),
        repeating-linear-gradient(9deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 10px);
    mix-blend-mode: overlay; pointer-events: none;
}

/* ---------------- Header ---------------- */
.dashboard-header {
    height: var(--header-h);
    padding: 10px var(--page-pad);
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(8, 8, 10, 0.50);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    position: sticky; top: 0; z-index: 1000;
}
.dashboard-header::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(to bottom, rgba(255,255,255,0.06), transparent 70%);
    opacity: 0.65;
}

.tars-wordmark{
    display: flex; align-items: baseline; gap: 10px;
    text-decoration: none;
    position: relative; z-index: 1;
}
.tars-wordmark .brand{
    font-size: 1.5rem; font-weight: 900; letter-spacing: 0.14em;
    color: #fff;
    text-shadow: 0 0 24px rgba(96,46,239,0.65), 0 10px 18px rgba(0,0,0,0.55);
}
.tars-wordmark .brand .accent{ color: var(--accent); }
.tars-wordmark .sub{
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--muted2);
}

.header-actions { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }

.dashboard-header .nav-btn {
    color: rgba(255,255,255,0.92); text-decoration: none; font-weight: 800;
    padding: 10px 14px; border-radius: 12px;
    border: 1px solid rgba(96,46,239,0.55);
    background: linear-gradient(180deg, rgba(96,46,239,0.16), rgba(96,46,239,0.06));
    box-shadow: 0 10px 26px rgba(0,0,0,0.35);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
    cursor: pointer; display: inline-block;
    font-family: inherit; font-size: 0.9rem;
}
.dashboard-header .nav-btn:hover {
    transform: translateY(-1px); border-color: rgba(96,46,239,0.85);
    box-shadow: 0 14px 34px rgba(0,0,0,0.45);
    background: linear-gradient(180deg, rgba(96,46,239,0.26), rgba(96,46,239,0.10));
}
.dashboard-header .nav-btn:focus-visible{
    outline: none;
    box-shadow: 0 0 0 4px var(--focus), 0 14px 34px rgba(0,0,0,0.45);
}

/* ---------------- Titelzeile ---------------- */
.dashboard-main {
    min-height: calc(100vh - var(--header-h));
    padding: 16px var(--page-pad) var(--page-pad);
    width: 100%;
}

.dashboard-title-row{
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px; margin: 8px 0 14px;
}
.dashboard-title-row h1{
    margin: 0;
    font-size: clamp(1.35rem, 1.05rem + 1.35vw, 2.1rem);
    font-weight: 900; letter-spacing: -0.02em;
    color: rgba(255,255,255,0.94);
    text-shadow: 0 18px 55px rgba(0,0,0,0.55);
    /* Lange Projektnamen dürfen die Kopfzeile nicht umbrechen */
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dashboard-subtitle{
    color: var(--muted2); font-size: 0.95rem; font-weight: 700; white-space: nowrap;
}

/* ---------------- Toggle-Switch (Focus Mode) ---------------- */
.switch-container{
    display: flex; align-items: center; gap: 10px;
    padding-right: 16px; margin-right: 4px;
    border-right: 1px solid rgba(255,255,255,0.15);
}
.switch-label-text{
    font-size: 0.85rem; font-weight: 700; color: var(--muted2);
    white-space: nowrap;
}
.switch{
    position: relative; display: inline-block;
    width: 44px; height: 24px; flex-shrink: 0;
}
.switch input{ opacity: 0; width: 0; height: 0; }
.slider{
    position: absolute; cursor: pointer; inset: 0;
    background-color: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 34px;
    transition: 0.3s;
}
.slider:before{
    position: absolute; content: "";
    height: 18px; width: 18px; left: 2px; bottom: 2px;
    background-color: #fff; border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.switch input:checked + .slider{
    background-color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 16px rgba(96,46,239,0.45);
}
.switch input:checked + .slider:before{ transform: translateX(20px); }
.switch input:focus-visible + .slider{ box-shadow: 0 0 0 4px var(--focus); }

/* ---------------- Widgets (Glass Cards) ---------------- */
.widget {
    height: 100%;
    background: linear-gradient(180deg, rgba(16, 18, 24, 0.64), rgba(16, 18, 24, 0.46));
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-soft);
    display: flex; flex-direction: column;
    overflow: hidden; position: relative;
    transform: translateZ(0);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.widget::before{
    content:""; position:absolute; inset:-1px;
    border-radius: calc(var(--radius) + 1px);
    padding: 1px;
    background: linear-gradient(135deg, rgba(96,46,239,0.38), rgba(255,255,255,0.14), rgba(74,0,224,0.28));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.55; pointer-events: none;
}
.widget:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: rgba(255,255,255,0.18);
}

.widget-title-inline{
    color: rgba(255,255,255,0.92);
    font-size: 1.05rem; font-weight: 900; letter-spacing: -0.01em;
}
.widget-topbar{
    display:flex; align-items:center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px;
}

.chip{
    display:inline-flex; align-items:center; gap: 8px;
    padding: 6px 10px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(10, 12, 18, 0.35);
    color: rgba(255,255,255,0.76);
    font-weight: 800; font-size: 0.78rem; white-space: nowrap;
}

.btn-mini{
    padding: 7px 10px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(10, 12, 18, 0.32);
    color: rgba(255,255,255,0.86);
    font-weight: 900; font-size: 0.78rem;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
    cursor: pointer; user-select: none;
    font-family: inherit;
}
.btn-mini:hover{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.22);
    background: rgba(10, 12, 18, 0.45);
}
.btn-mini:active{ transform: translateY(0px) scale(0.99); }
.btn-mini:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--focus); }

/* ---------------- Panels & Progress ---------------- */
.rounded-field-custom-bg{
    background: rgba(10, 12, 18, 0.40);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 26px rgba(0,0,0,0.30);
    padding: 12px;
}
.gradient-text{ color: var(--accent); font-weight: 700; margin: 0 0 6px; font-size: 0.95rem; }

.progress-track{
    background-color: rgba(255,255,255,0.12);
    width: 100%; height: 24px; border-radius: 999px; overflow: hidden;
}
.progress-track{ position: relative; }
.progress-fill{
    height: 100%; border-radius: 999px;
    background-image: linear-gradient(to right, var(--accent), var(--accent2));
    transition: width 520ms ease; will-change: width;
    min-width: 0;
}
/* Unbestimmter Fortschritt (Szene lädt, noch keine Sample-Daten) */
.progress-fill.is-indeterminate{
    background-image: linear-gradient(90deg,
        rgba(96,46,239,0.10) 0%, rgba(96,46,239,0.75) 50%, rgba(96,46,239,0.10) 100%);
    background-size: 220% 100%;
    animation: indeterminate-slide 1.6s ease-in-out infinite;
}
@keyframes indeterminate-slide{
    0%   { background-position: 120% 0; }
    100% { background-position: -20% 0; }
}

/* Kopfzeile "Aktueller Frame" */
.frame-head{
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.frame-badge{
    padding: 3px 10px; border-radius: 999px;
    border: 1px solid rgba(96,46,239,0.5);
    background: rgba(96,46,239,0.18);
    color: rgba(255,255,255,0.94);
    font-weight: 900; font-size: 0.74rem; font-family: monospace;
    white-space: nowrap;
}
.frame-sub{
    text-align: center; margin-top: 7px !important;
    font-family: monospace; font-size: 0.8rem;
    color: rgba(255,255,255,0.78);
}

/* Prozentzahl mittig über dem Balken – bleibt auch bei 0 % lesbar */
.progress-track > .progress-label{
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.75rem; font-weight: 800;
    text-shadow: 0 1px 3px rgba(0,0,0,0.65);
    pointer-events: none;
}
.progress-track.slim{ height: 10px; }

.error-message{
    background-color: rgba(10, 10, 12, 0.70);
    padding: 1rem; border-radius: 14px;
    border: 1px solid rgba(255, 70, 70, 0.55);
    color: rgba(255, 190, 190, 0.95);
    box-shadow: 0 12px 26px rgba(0,0,0,0.45);
}
.muted-hint{ color: rgba(255,255,255,0.62); font-weight: 800; font-size: 0.78rem; }

/* ---------------- Status-Pills ---------------- */
.status-pill{
    padding: 5px 10px; border-radius: 999px;
    font-weight: 900; font-size: 0.72rem;
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(0,0,0,0.88);
    white-space: nowrap;
}
.status-running{ background: var(--success); }
.status-creating{ background: var(--warning); }
.status-restarting{ background: var(--warning); }
.status-terminated{ background: var(--error); color: rgba(255,255,255,0.92); }
.status-error{ background: var(--error); color: rgba(255,255,255,0.92); }
.status-paused{ background: rgba(127,140,141,1); color: rgba(255,255,255,0.92); }
.status-exited{ background: rgba(149,165,166,1); }
.status-unknown{ background: rgba(189,195,199,1); }
.status-completed{ background: var(--success); }
.status-offline{ background: rgba(149,165,166,1); }
/* Pod ist gestartet, hat aber keine Arbeit bekommen (ein anderer war beim
   Beanspruchen schneller). Bewusst neutral-blau statt grau: kein Fehler,
   aber auch kein Render – und deutlich von 'offline' unterscheidbar. */
.status-skipped{ background: rgba(93,131,167,1); color: rgba(255,255,255,0.92); }

/* Hinweis unter dem Fortschrittsbalken, wenn ein abgebrochener Auftrag
   weitergeführt wird. Bewusst zurückhaltend: Der Fortschritt soll aussehen
   wie ein normaler Lauf, die Fortsetzung ist eine Randnotiz. */
.resume-note{
    text-align: center;
    margin: 6px 0 0;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.55);
}

/* ---------------- Home: Kopfzeile mit Status rechts ---------------- */
.home-topbar{
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    margin: 8px 0 16px;
}
.home-topbar h1{
    margin: 0;
    font-size: clamp(1.35rem, 1.05rem + 1.35vw, 2.1rem);
    font-weight: 900; letter-spacing: -0.02em;
    color: rgba(255,255,255,0.94);
    text-shadow: 0 18px 55px rgba(0,0,0,0.55);
}
.home-topbar .status-banner{ margin: 0; width: auto; min-width: 300px; }

/* ---------------- Ansichts-Umschalter ---------------- */
.view-toolbar{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.view-switch{
    display: inline-flex; gap: 4px; padding: 4px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(10, 12, 18, 0.42);
    backdrop-filter: blur(10px);
}
.view-btn{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: 10px;
    border: 1px solid transparent; background: transparent;
    color: rgba(255,255,255,0.66);
    font-family: inherit; font-weight: 800; font-size: 0.8rem;
    cursor: pointer; transition: all 160ms ease;
}
.view-btn svg{ width: 15px; height: 15px; }
.view-btn:hover{ color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.06); }
.view-btn.is-active{
    color: #fff;
    border-color: rgba(96,46,239,0.65);
    background: linear-gradient(180deg, rgba(96,46,239,0.30), rgba(96,46,239,0.14));
    box-shadow: 0 6px 18px rgba(0,0,0,0.32);
}

/* ---------------- Slot-Ansichten ---------------- */
.slots-viewport{ margin-bottom: 26px; }

/* Ansicht "Reihe": nebeneinander, horizontal scrollbar */
.slots-viewport.view-row .slots-grid{
    display: flex; gap: var(--gap);
    overflow-x: auto; overflow-y: hidden;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
}
.slots-viewport.view-row .slot-card{
    flex: 0 0 340px; max-width: 340px;
    scroll-snap-align: start;
}
.slots-viewport.view-row .slots-grid::-webkit-scrollbar{ height: 8px; }
.slots-viewport.view-row .slots-grid::-webkit-scrollbar-track{
    background: rgba(255,255,255,0.05); border-radius: 10px;
}
.slots-viewport.view-row .slots-grid::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,0.20); border-radius: 10px;
}
.slots-viewport.view-row .slots-grid::-webkit-scrollbar-thumb:hover{
    background: rgba(96,46,239,0.55);
}

/* Ansicht "Raster": alles ohne Scrollen sichtbar */
.slots-viewport.view-grid .slots-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}
@media (max-width: 1300px){
    .slots-viewport.view-grid .slots-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px){
    .slots-viewport.view-grid .slots-grid{ grid-template-columns: 1fr; }
    .slots-viewport.view-row .slot-card{ flex-basis: 86%; }
}

/* Freier Slot: deutlich gedämpft */
.slot-card.is-idle .widget{
    background: linear-gradient(180deg, rgba(14, 15, 20, 0.42), rgba(14, 15, 20, 0.26));
    border-style: dashed;
    border-color: rgba(255,255,255,0.13);
    box-shadow: none;
}
.slot-card.is-idle .widget::before{ opacity: 0.14; }
.slot-card.is-idle:hover .widget{ transform: none; box-shadow: none; border-color: rgba(255,255,255,0.18); }
.slot-card.is-idle .slot-badge{
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.62);
}
.slot-card.is-idle .slot-card-project{ color: rgba(255,255,255,0.42); font-weight: 700; }
.slot-card.is-idle .slot-preview{ background: rgba(10, 12, 18, 0.26); border-style: dashed; }
.slot-card.is-idle .slot-stats{ opacity: 0.45; }
.slot-card.is-idle .progress-track{ opacity: 0.35; }

.status-idle{ background: rgba(120,125,140,0.85); color: rgba(255,255,255,0.92); }

.slot-badge.small{ padding: 3px 9px; font-size: 0.72rem; }

/* Listen-Ansicht */
.slots-list-wrap{ height: auto; margin-bottom: 26px; }
.slots-table td{ vertical-align: middle; }
.slots-table .row-idle td{ opacity: 0.5; }
.slots-table .row-active:hover td{ background: rgba(96,46,239,0.10); }
.tiny{ font-size: 0.7rem; }
.mono{ font-family: monospace; }

/* Historie: begrenzte Höhe + Scroll (~10 Zeilen) */
.history-widget{ height: auto; }
.history-scroll{
    max-height: 420px; overflow-y: auto; overflow-x: auto;
}
.history-scroll::-webkit-scrollbar{ width: 8px; height: 8px; }
.history-scroll::-webkit-scrollbar-track{ background: rgba(255,255,255,0.05); border-radius: 10px; }
.history-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.20); border-radius: 10px; }
.history-scroll thead th{
    position: sticky; top: 0; z-index: 2;
    background: rgba(18, 20, 27, 0.97);
    backdrop-filter: blur(8px);
}

/* ---------------- Übersicht: Status-Banner ---------------- */
.status-banner {
    width: 100%; max-width: 600px; margin: 0 auto 8px;
    background: rgba(16, 18, 24, 0.64);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 12px 24px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
}
.status-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background-color: var(--muted2);
    box-shadow: 0 0 0 0 rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.status-text { font-weight: 800; font-size: 1rem; color: var(--muted); }

.status-banner.is-active {
    border-color: rgba(46, 204, 113, 0.4);
    background: rgba(16, 30, 20, 0.75);
    box-shadow: 0 0 30px rgba(46, 204, 113, 0.15);
}
.status-banner.is-active .status-dot {
    background-color: var(--success);
    animation: pulse-green 2s infinite;
}
.status-banner.is-active .status-text {
    color: #fff; text-shadow: 0 0 10px rgba(46, 204, 113, 0.6);
}
.status-banner.is-error{ border-color: rgba(231, 76, 60, 0.45); }
.status-banner.is-error .status-dot{ background-color: var(--error); }

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* ---------------- Übersicht: Slot-Karten ---------------- */
.slots-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--gap);
    margin-top: 16px;
}

.slot-card{
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    cursor: pointer;
    /* Ohne min-width:0 wachsen Flex-/Grid-Items über ihre Basis hinaus,
       sobald der Inhalt (z. B. ein langer Projektname) breiter ist. */
    min-width: 0;
}
.slot-card > .widget{ min-width: 0; }
.slot-card .widget{ transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.25s ease, border-color 0.25s ease; }
.slot-card:hover .widget{
    transform: translateY(-6px);
    border-color: rgba(96,46,239,0.6);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(96,46,239,0.3);
}

.slot-card-head{
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px;
}
.slot-badge{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px; border-radius: 999px;
    font-weight: 900; font-size: 0.8rem;
    border: 1px solid rgba(96,46,239,0.55);
    background: rgba(96,46,239,0.20);
    color: rgba(255,255,255,0.95);
    white-space: nowrap;
}
/* Projektname: Kachel darf NICHT mitwachsen. Lange Namen werden gekürzt und
   laufen beim Hover einmal durch (Marquee). */
.slot-card-project{
    font-weight: 900; font-size: 1.1rem;
    color: rgba(255,255,255,0.94);
    overflow: hidden; white-space: nowrap;
    min-width: 0; max-width: 100%;
    position: relative;
    margin-bottom: 2px;
}
.slot-card-project > span{
    display: inline-block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: bottom;
}
/* Nur wenn der Text wirklich zu lang ist (Klasse wird per JS gesetzt) */
.slot-card-project.is-truncated > span{ text-overflow: ellipsis; }
.slot-card:hover .slot-card-project.is-truncated > span{
    max-width: none; text-overflow: clip;
    animation: marquee-slide 9s linear infinite;
}
@keyframes marquee-slide{
    0%, 12%   { transform: translateX(0); }
    88%, 100% { transform: translateX(var(--marquee-shift, -50%)); }
}

/* Titelzeile rechts: Focus-Switch + Pod-ID */
.title-row-right{
    display: flex; align-items: center; gap: 14px;
    flex-shrink: 0;
}

.slot-preview{
    position: relative;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(10, 12, 18, 0.45);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.slot-preview img{
    width: 100%; height: 100%; object-fit: contain;
    display: block;
}
.slot-preview .no-preview{
    color: var(--muted2); font-weight: 800; font-size: 0.8rem;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center; padding: 10px;
}
.slot-preview .preview-tag{
    position: absolute; bottom: 8px; right: 8px;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(0,0,0,0.65);
    color: rgba(255,255,255,0.85);
    font-size: 0.68rem; font-weight: 800;
    border: 1px solid rgba(255,255,255,0.14);
}

.slot-stats{
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    font-size: 0.8rem; color: rgba(255,255,255,0.74);
    margin-top: 10px;
}
.slot-stats b{ color: rgba(255,255,255,0.88); font-weight: 900; }
.slot-stats .stat-value{ font-family: monospace; }

.cost-live{ color: var(--success); font-weight: 900; font-family: monospace; }

/* ---------------- Historie-Tabelle ---------------- */
.history-table-wrap{ overflow-x: auto; flex: 1; min-height: 0; }
.history-table{
    width: 100%; border-collapse: collapse;
    font-size: 0.82rem; color: rgba(255,255,255,0.80);
}
.history-table th{
    text-align: left; font-weight: 900; font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted2);
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    white-space: nowrap;
}
.history-table td{
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    white-space: nowrap;
}
.history-table tr:hover td{ background: rgba(255,255,255,0.04); }

/* ---------------- Detail: Grid-Layout (wie dashboard.php) ---------------- */
/* Seite mit fixer Höhe: kein Page-Scroll, jedes Widget scrollt intern */
body.page-fixed{ height: 100%; overflow: hidden; }
body.page-fixed .dashboard-main{
    height: calc(100vh - var(--header-h));
    overflow: hidden;
    display: flex; flex-direction: column;
}
body.page-fixed .dashboard-title-row{ flex: 0 0 auto; }

.dashboard-grid{
    display: grid;
    /* minmax(0, 1fr) statt 1fr: sonst wachsen die Spalten mit langen
       Projektnamen mit, statt den Text zu kürzen. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 1fr 1fr;
    gap: var(--gap);
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}
.grid-item{ min-height: 0; min-width: 0; }
.grid-item > .widget{ min-width: 0; }

/* Projektname in der Widget-Kopfzeile: kürzen, beim Hover durchlaufen */
.widget-title-inline.is-project{
    overflow: hidden; white-space: nowrap; min-width: 0; flex: 1 1 auto;
}
.widget-title-inline.is-project > span{
    display: inline-block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: bottom;
}
.widget:hover .widget-title-inline.is-project.is-truncated > span{
    max-width: none; text-overflow: clip;
    animation: marquee-slide 9s linear infinite;
}

/* Anordnung: links Stats (voll), Mitte Preview+Addons, rechts Log+Telemetry */
#widget-status{ grid-column: 1 / 2; grid-row: 1 / 3; }
#widget-preview{ grid-column: 2 / 3; grid-row: 1 / 2; }
#widget-addons{ grid-column: 2 / 3; grid-row: 2 / 3; }
#widget-log{ grid-column: 3 / 4; grid-row: 1 / 2; }
#widget-telemetry{ grid-column: 3 / 4; grid-row: 2 / 3; }

/* Focus Mode: Preview übernimmt die vier rechten Kacheln, Stats bleiben */
.dashboard-grid.focus-mode #widget-preview{ grid-column: 2 / 4; grid-row: 1 / 3; }
.dashboard-grid.focus-mode #widget-addons,
.dashboard-grid.focus-mode #widget-log,
.dashboard-grid.focus-mode #widget-telemetry{ display: none; }

/* Log-Kopfzeile mit Icon-Buttons */
.log-actions{ display: flex; align-items: center; gap: 6px; }
.icon-btn{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px; line-height: 0;
}
.icon-btn svg{ width: 14px; height: 14px; }

/* Toast für Kopier-Feedback */
.toast{
    position: fixed; bottom: 26px; left: 50%;
    transform: translateX(-50%) translateY(14px);
    padding: 11px 20px; border-radius: 12px;
    background: rgba(16, 18, 24, 0.94);
    border: 1px solid rgba(96,46,239,0.55);
    color: rgba(255,255,255,0.94);
    font-weight: 800; font-size: 0.85rem;
    box-shadow: var(--shadow);
    opacity: 0; pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
    z-index: 3000;
}
.toast.is-visible{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* Status-Widget Innenleben */
.status-body{
    color: rgba(255,255,255,0.84);
    font-size: 14px; line-height: 1.55;
    width: 100%; height: 100%;
    display:flex; flex-direction: column;
    position: relative; min-height: 0;
    overflow-y: auto; gap: 12px;
}
.status-body p{ margin: 2px 0; }
.status-body .mono{ font-family: monospace; }
.two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1500px){ .two-col{ grid-template-columns: 1fr; } }

/* Preview / EXR Widget */
.preview-box{
    flex: 1; min-height: 0;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(10, 12, 18, 0.32);
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    overflow: hidden;
    display:flex; flex-direction: column;
    position: relative;
}
.preview-box img{
    width: 100%; height: 100%; object-fit: contain;
}
.preview-box .placeholder{
    flex: 1; display:flex; justify-content:center; align-items:center;
    color: rgba(255,255,255,0.62); text-align: center; padding: 10px;
    font-weight: 700;
}
.preview-box .preview-tag{
    position: absolute; bottom: 10px; right: 10px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(0,0,0,0.65);
    color: rgba(255,255,255,0.88);
    font-size: 0.72rem; font-weight: 800;
    border: 1px solid rgba(255,255,255,0.14);
    z-index: 5;
}
#exrViewerMount{ flex: 1; min-height: 0; }
#exrViewerMount > div{ height: 100%; }

/* Live-Log */
.log-console{
    flex: 1; min-height: 0;
    background: rgba(5, 6, 10, 0.72);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    overflow-y: auto;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.72rem; line-height: 1.5;
    color: rgba(210, 215, 230, 0.85);
    white-space: pre-wrap; word-break: break-all;
}
.log-console::-webkit-scrollbar { width: 6px; }
.log-console::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; }
.log-console::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
.log-console .log-line.is-error{ color: rgba(255, 150, 150, 0.95); }
.log-console .log-line.is-tars{ color: rgba(160, 130, 255, 0.95); }

/* Telemetry */
.telemetry-box {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; gap: 12px;
    font-size: 0.85rem; overflow-y: auto;
}
.tele-row {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 6px; margin-bottom: 2px;
}
.tele-row:last-child { border-bottom: none; }
.tele-label { color: var(--muted); font-weight: 600; }
.tele-val { color: rgba(255,255,255,0.95); font-family: monospace; text-align: right; }
.tele-highlight { color: var(--accent); font-weight: 800; }

/* Laufender Pod: Status leuchtet – beendeter Pod: ausgegraut */
.tele-live{
    color: var(--success) !important; font-weight: 900;
    text-shadow: 0 0 12px rgba(46,204,113,0.55);
}
.tele-muted{ color: rgba(255,255,255,0.42) !important; font-weight: 700; }
.chip-live{
    border-color: rgba(46,204,113,0.45);
    background: rgba(46,204,113,0.16);
    color: rgba(214,255,232,0.96);
}
.tele-divider{ margin: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.10); }

/* Addons */
.addons-container {
    flex: 1; overflow-y: auto; min-height: 0;
    display: flex; flex-direction: column; gap: 8px;
    padding-right: 4px;
}
.addons-container::-webkit-scrollbar { width: 6px; }
.addons-container::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; }
.addons-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
.addon-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex; align-items: center; gap: 12px;
    transition: background 0.2s, transform 0.1s;
}
.addon-item:hover { background: rgba(255, 255, 255, 0.09); transform: translateX(2px); }
.addon-icon { color: var(--accent); flex-shrink: 0; }
.addon-icon svg{ width: 20px; height: 20px; }
.addon-name { font-weight: 700; font-size: 0.9rem; color: rgba(255,255,255,0.9); word-break: break-all; }
.addon-size { margin-left: auto; font-size: 0.75rem; color: var(--muted2); font-family: monospace; }

/* ---------------- Login ---------------- */
body.login-page{
    display: flex; justify-content: center; align-items: center;
    height: 100vh; overflow: hidden;
    background-image: url('/static/assets/vision_fx_cloud_background.webp');
}
.login-container {
    width: 100%; max-width: 360px; padding: 34px 30px;
    background-color: rgba(25, 25, 40, 0.55);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    text-align: center;
}
.login-brand{
    font-size: 2.1rem; font-weight: 900; letter-spacing: 0.16em;
    color: #fff; margin: 0 0 2px;
    text-shadow: 0 0 30px rgba(96,46,239,0.75);
}
.login-brand .accent{ color: var(--accent); }
.login-sub{
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.32em;
    text-transform: uppercase; color: var(--muted2);
    margin: 0 0 26px;
}
.login-container form { display: flex; flex-direction: column; align-items: stretch; }
.login-container input[type="text"],
.login-container input[type="password"] {
    width: 100%; padding: 12px 15px; margin: 10px 0 8px 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    font-size: 1em; font-family: inherit;
    background-color: rgba(0, 0, 0, 0.3);
    color: #e0e0e0;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}
.login-container input::placeholder { color: #9a9aae; }
.login-container input:focus {
    outline: none;
    border-color: rgba(96, 46, 239, 0.7);
    background-color: rgba(0, 0, 0, 0.35);
}
.login-button {
    width: 100%; padding: 12px 15px;
    background-color: var(--accent);
    color: #fff; border: none; border-radius: 10px;
    font-size: 1.1em; font-weight: bold; font-family: inherit;
    cursor: pointer; transition: all 0.3s ease;
    margin-top: 18px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.login-button:hover {
    background-color: #5028D0;
    box-shadow: 0 6px 20px rgba(96, 46, 239, 0.3);
    transform: translateY(-2px);
}
.login-button:active { transform: translateY(0px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
.login-button:disabled{ opacity: 0.6; cursor: wait; transform: none; }
.login-error {
    color: #ff8a8a;
    background-color: rgba(255, 50, 50, 0.1);
    padding: 8px; border-radius: 5px;
    margin-top: 15px; font-size: 0.9em; text-align: center;
    border: 1px solid rgba(255, 50, 50, 0.2);
    display: none;
}
.login-error.visible{ display: block; }

/* ---------------- Verbindungsanzeige ---------------- */
.conn-chip{
    display:inline-flex; align-items:center; gap: 8px;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(10, 12, 18, 0.35);
    color: rgba(255,255,255,0.76);
    font-weight: 800; font-size: 0.75rem; white-space: nowrap;
}
.conn-chip .dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--muted2); }
.conn-chip.is-live .dot{ background: var(--success); animation: pulse-green 2s infinite; }
.conn-chip.is-down .dot{ background: var(--error); }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px){
    :root{ --page-pad: 14px; --gap: 14px; --header-h: 60px; }
    .dashboard-subtitle{ display: none; }
    /* Auf kleinen Schirmen darf die Detailseite wieder scrollen */
    body.page-fixed{ overflow: auto; }
    body.page-fixed .dashboard-main{ height: auto; overflow: visible; }
    .dashboard-grid{
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    #widget-status, #widget-preview, #widget-log, #widget-telemetry, #widget-addons{
        grid-column: 1 / 2; grid-row: auto;
        min-height: 340px;
    }
    .dashboard-grid.focus-mode #widget-preview{ grid-column: 1 / 2; grid-row: auto; }
    .switch-container{ display: none; }
}

@media (prefers-reduced-motion: reduce){
    .widget, .dashboard-header .nav-btn { transition: none; }
    .progress-fill{ transition: none; }
}

/* ---------------- Einstellungen ---------------- */
.settings-page{ max-width: 1500px; }

#settingsBody{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    gap: 16px;
    align-items: start;   /* Gruppen behalten ihre eigene Höhe */
}

.settings-intro{
    color: var(--muted); font-size: 0.82rem; font-weight: 600;
    line-height: 1.55; margin: 0 0 18px; max-width: 72ch;
}
.settings-intro strong{ color: var(--text); }

.settings-actions{ display: flex; align-items: center; gap: 10px; }
.settings-status{ color: var(--warning); font-size: 0.78rem; font-weight: 800; }

/* .nav-btn ist sonst auf den Header beschränkt – hier nochmal für die Seite */
.settings-actions .nav-btn{
    background: rgba(255,255,255,0.06); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: 999px;
    padding: 9px 16px; font: inherit; font-weight: 800; font-size: 0.78rem;
    cursor: pointer; transition: background .16s ease, border-color .16s ease;
}
.settings-actions .nav-btn:hover{ background: rgba(255,255,255,0.12); }
.settings-actions .nav-btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--focus); }
.settings-actions .nav-btn.is-primary{
    background: var(--accent); border-color: var(--accent);
}
.settings-actions .nav-btn.is-primary:hover{ background: var(--accent2); }
.settings-actions .nav-btn:disabled{ opacity: 0.4; cursor: default; }
.settings-actions .nav-btn:disabled:hover{ background: rgba(255,255,255,0.06); }

.settings-group{ margin: 0; }

.settings-row{
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; padding: 14px 0;
    border-top: 1px solid var(--border);
}
.settings-group .settings-row:first-of-type{ border-top: none; }
.settings-row.is-dirty{
    box-shadow: inset 3px 0 0 var(--warning);
    padding-left: 12px; margin-left: -12px;
}

.settings-label{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.settings-name{ font-weight: 800; font-size: 0.86rem; color: var(--text); }
.settings-help{ color: var(--muted2); font-size: 0.76rem; font-weight: 600; line-height: 1.45; }
.settings-env{ color: var(--muted2); font-size: 0.72rem; font-weight: 700; margin-top: 2px; }
.settings-env code{
    background: rgba(255,255,255,0.07); border-radius: 5px;
    padding: 1px 5px; font-size: 0.94em;
}

.settings-control{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.settings-input{
    width: 92px; text-align: right;
    background: rgba(0,0,0,0.45); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    padding: 8px 10px; font: inherit; font-weight: 800; font-size: 0.84rem;
}
.settings-input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); }
.settings-unit{ color: var(--muted2); font-size: 0.78rem; font-weight: 800; width: 22px; }

.link-btn{
    background: none; border: none; color: var(--muted2);
    cursor: pointer; font-size: 1rem; padding: 4px 6px; border-radius: 8px;
    line-height: 1; transition: color .16s ease, background .16s ease;
}
.link-btn:hover{ color: var(--text); background: rgba(255,255,255,0.08); }
.link-btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--focus); }

@media (max-width: 640px){
    .settings-row{ flex-direction: column; align-items: stretch; gap: 10px; }
    .settings-control{ justify-content: flex-end; }
}

/* Ereignis-Auswahl (Telegram) */
.settings-row.is-stacked{ flex-direction: column; align-items: stretch; gap: 12px; }
.event-list{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 4px 14px;
}
.event-item{
    display: flex; align-items: center; gap: 9px;
    padding: 6px 8px; border-radius: 10px; cursor: pointer;
    font-size: 0.8rem; font-weight: 700; color: var(--muted);
    transition: background .14s ease, color .14s ease;
}
.event-item:hover{ background: rgba(255,255,255,0.06); color: var(--text); }
.event-item input{
    appearance: none; -webkit-appearance: none;
    width: 17px; height: 17px; flex-shrink: 0; margin: 0;
    border: 1px solid var(--border-strong); border-radius: 5px;
    background: rgba(0,0,0,0.45); cursor: pointer; position: relative;
    transition: background .14s ease, border-color .14s ease;
}
.event-item input:checked{ background: var(--accent); border-color: var(--accent); }
.event-item input:checked::after{
    content: ""; position: absolute; left: 5px; top: 1px;
    width: 4px; height: 9px; border: solid #fff;
    border-width: 0 2px 2px 0; transform: rotate(43deg);
}
.event-item input:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--focus); }
.event-item input:checked + span{ color: var(--text); }
.event-reset{ align-self: flex-start; font-size: 0.74rem; font-weight: 800; }

/* =====================================================================
   Handy (bis 560px)

   Rein additiv: alles hier steht in einer Media Query, die Desktop-Regeln
   oben bleiben unangetastet. Der 1100er-Breakpoint darüber entstapelt
   bereits das Slot-Dashboard – hier geht es um echte Telefonbreiten.
   ===================================================================== */
@media (max-width: 560px){
    :root{ --page-pad: 12px; --gap: 12px; --header-h: 56px; }

    /* --- Kopfzeile: Platz für die Buttons schaffen --- */
    /* "Renderfarm Control" braucht zwei Zeilen und schiebt Logout raus. */
    .tars-wordmark .sub{ display: none; }
    .dashboard-header{ padding-left: var(--page-pad); padding-right: var(--page-pad); }
    .dashboard-header .nav-btn{ padding: 8px 12px; font-size: 0.74rem; }
    .header-actions{ gap: 6px; }
    /* Verbindungsanzeige auf den Punkt reduzieren – der Zustand bleibt sichtbar */
    .conn-chip{ padding: 6px; }
    .conn-chip #connText{ display: none; }

    /* --- Übersicht --- */
    .home-topbar{ gap: 10px; }
    .home-topbar h1{ font-size: 1.6rem; }
    .status-banner{ width: 100%; }
    /* Kennzahlen der Slot-Kachel untereinander statt zweispaltig gequetscht.
       Die zweite Spalte trägt inline text-align:right (aus overview.js) –
       einspaltig sähe das als Zickzack aus, deshalb hier überstimmen. */
    .slot-stats{ grid-template-columns: 1fr; gap: 4px; }
    .slot-stats > div[style]{ text-align: left !important; }
    .slots-viewport.view-row .slot-card{ flex-basis: 88%; }

    /* Historie: Titel über die Chips, Tabelle seitlich scrollbar */
    .history-widget .widget-topbar{ flex-direction: column; align-items: flex-start; }
    .history-widget .widget-topbar > div{ flex-wrap: wrap; }
    .history-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .history-table{ min-width: 760px; }

    /* --- Slot-Dashboard --- */
    /* Reihenfolge nach Wichtigkeit am Telefon: Fortschritt, Bild, Log,
       Telemetrie, Addons. Im Quelltext steht Addons vor dem Log. */
    #widget-status{ order: 1; }
    #widget-preview{ order: 2; }
    #widget-log{ order: 3; }
    #widget-telemetry{ order: 4; }
    #widget-addons{ order: 5; }
    .dashboard-grid{ display: flex; flex-direction: column; }
    #widget-preview, #widget-log, #widget-telemetry, #widget-addons{ min-height: 300px; }
    .dashboard-title-row h1{ font-size: 1.25rem; }
    /* Der EXR-Viewer lädt React + WASM für ein Bild, das auf 6 Zoll
       niemand beurteilt – am Telefon bleibt es beim Live-Preview. */
    #modeExrBtn{ display: none; }
    .two-col{ grid-template-columns: 1fr; }

    /* --- Einstellungen --- */
    .settings-actions{ width: 100%; flex-wrap: wrap; }
    .settings-actions .nav-btn{ flex: 1 1 auto; }
    .event-list{ grid-template-columns: 1fr; }
}

/* ---------------- Eigene Bildmarken ---------------- */
/* Die SVGs sind reines Weiß – auf dem dunklen Grund genau richtig.
   Der Leuchtschein kommt per drop-shadow, damit er der Form folgt
   statt einem Kasten (box-shadow würde das Rechteck zeigen). */
.brand-mark{
    height: 26px; width: auto; display: block;
    filter: drop-shadow(0 0 18px rgba(96,46,239,0.55));
}
.tars-wordmark{ align-items: center; }

.login-badge{
    width: 132px; height: 132px; display: block; margin: 0 auto 14px;
    filter: drop-shadow(0 0 34px rgba(96,46,239,0.45));
}
.login-wordmark{
    width: 190px; height: auto; display: block; margin: 0 auto 4px;
    filter: drop-shadow(0 0 24px rgba(96,46,239,0.6));
}

@media (max-width: 560px){
    .brand-mark{ height: 22px; }
    .login-badge{ width: 104px; height: 104px; }
    .login-wordmark{ width: 158px; }
}

/* ---------------- Pod Telemetry (überarbeitet) ---------------- */
.tele-hero{
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px; margin-bottom: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(96,46,239,0.45);
    background: linear-gradient(180deg, rgba(96,46,239,0.20), rgba(96,46,239,0.05));
}
.tele-hero-label{
    font-size: 0.66rem; font-weight: 900; letter-spacing: 0.18em;
    text-transform: uppercase; color: rgba(255,255,255,0.58);
}
.tele-hero-val{
    font-size: 1.05rem; font-weight: 900; color: #fff; line-height: 1.25;
    overflow-wrap: anywhere;
}

.tele-stats{
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; margin-bottom: 12px;
}
.tele-stat{
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 9px 6px; border-radius: var(--radius-sm);
    background: rgba(0,0,0,0.32); border: 1px solid var(--border);
}
.tele-stat-val{ font-size: 0.95rem; font-weight: 900; color: #fff; font-family: monospace; }
.tele-stat-label{
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted2);
}

.tele-section{ margin-bottom: 12px; }
.tele-section:last-of-type{ margin-bottom: 0; }
.tele-section-head{
    font-size: 0.66rem; font-weight: 900; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 5px; padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.tele-cost{ color: var(--success); font-weight: 900; }

/* Diagnose-Ausklapper: erscheint nur, wenn der Host keinen Standort meldet */
.tele-diag{
    margin-top: 12px; border-radius: var(--radius-sm);
    border: 1px dashed rgba(243,156,18,0.45);
    background: rgba(243,156,18,0.06);
}
.tele-diag > summary{
    cursor: pointer; padding: 8px 11px; list-style: none;
    font-size: 0.74rem; font-weight: 800; color: var(--warning);
}
.tele-diag > summary::-webkit-details-marker{ display: none; }
.tele-diag > summary::before{ content: "▸ "; }
.tele-diag[open] > summary::before{ content: "▾ "; }
.tele-diag-body{ padding: 0 11px 9px; }
.tele-diag-body .tele-val{ font-size: 0.7rem; overflow-wrap: anywhere; }

@media (max-width: 560px){
    .tele-stats{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tele-hero-val{ font-size: 0.95rem; }
}

/* Zweite Kachelreihe (Laufzeit/Kosten): längere Werte, deshalb kleiner */
.tele-stats.is-compact{ margin-bottom: 12px; }
.tele-stats.is-compact .tele-stat-val{ font-size: 0.82rem; letter-spacing: -0.01em; }

/* Auslastungs-Kacheln (GPU/VRAM/CPU aus der Runpod-API) */
.tele-stats.tele-loads{ margin-bottom: 10px; }
.tele-load{ position: relative; padding-bottom: 12px; }
.tele-load .tele-stat-val small{ font-size: 0.62em; opacity: 0.7; margin-left: 1px; }
.tele-load-bar{
    position: absolute; left: 8px; right: 8px; bottom: 6px; height: 3px;
    border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden;
}
.tele-load-bar i{
    display: block; height: 100%; border-radius: 2px;
    background: var(--accent); transition: width .6s ease, background .6s ease;
}
.tele-load-bar i.is-mid{ background: var(--warning); }
.tele-load-bar i.is-high{ background: var(--success); }