/* /Components/Layout/ConsoleLayout.razor.rz.scp.css */
.console-layout[b-bvv44rlzd6] {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background: var(--surface-workspace);
    }
/* /Components/Layout/EditorLayout.razor.rz.scp.css */
.editor-layout[b-jmy7aujw1p] {
        width: 100vw;
        height: 100vh;
        overflow: auto;
        background: var(--surface-workspace);
    }
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
.login-content[b-z12nvkq4xs] {
    flex: 1;
    width: 100%;
    min-height: 100vh;
    padding: 0;
    margin: 0;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.top-bar-brand[b-v5t8evwz3t] {
        display: flex;
        align-items: baseline;
        gap: 0.4rem;
    }
    
    .brand-name[b-v5t8evwz3t] {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--app-primary-color);
        letter-spacing: 0.02em;
    }
    
    .brand-sep[b-v5t8evwz3t] {
        color: var(--app-text-secondary);
        opacity: 0.4;
    }
    
    .brand-subtitle[b-v5t8evwz3t] {
        font-size: 0.85rem;
        color: var(--app-text-secondary);
        font-weight: 400;
    }
    
    .btn-profile[b-v5t8evwz3t] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.8rem;
        background: rgba(30, 148, 188, 0.1);
        border: 1px solid rgba(30, 148, 188, 0.3);
        border-radius: 6px;
        color: var(--app-primary-color);
        text-decoration: none;
        font-size: 0.85rem;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .btn-profile:hover[b-v5t8evwz3t] {
        background: rgba(30, 148, 188, 0.2);
        border-color: var(--app-primary-color);
        transform: translateY(-1px);
        text-decoration: none;
    }
    
    .profile-icon[b-v5t8evwz3t] {
        font-size: 1.1rem;
        line-height: 1;
    }
    
    .profile-text[b-v5t8evwz3t] {
        font-size: 0.85rem;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .btn-profile[b-v5t8evwz3t] { padding: 0.3rem 0.5rem; font-size: 0.8rem; }
    }

    @media (max-width: 480px) {
        .btn-profile .profile-text[b-v5t8evwz3t] { display: none; }
    }
/* /Components/Pages/Account/Login.razor.rz.scp.css */
/* Full viewport login page — card centers on screen, sidebar overlays on top */
    .login-page[b-dc8k3plxh2] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: var(--surface-card);
        margin: 0;
        padding: 1rem;
        box-sizing: border-box;
        z-index: 50;
    }

    .login-announcement-area[b-dc8k3plxh2] {
        width: 80%;
        max-width: 800px;
        margin-bottom: 1.5rem;
    }

    .login-spacer-top[b-dc8k3plxh2] {
        flex: 1;
    }

    .login-spacer[b-dc8k3plxh2] {
        flex: 1;
    }

    .login-spacer-bottom[b-dc8k3plxh2] {
        flex: 3;
    }

    .login-announcement-area:empty[b-dc8k3plxh2] {
        display: none;
    }

    .login-page .login-card[b-dc8k3plxh2] {
        width: 100%;
        max-width: 420px;
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: 12px;
        padding: 2.5rem;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
        flex-shrink: 0;
    }
    
    .login-page .login-header[b-dc8k3plxh2] {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .login-page .login-logo-img[b-dc8k3plxh2] {
        max-width: 280px;
        width: 100%;
        height: auto;
        margin-bottom: 1rem;
    }
    
    .login-page .login-header h1[b-dc8k3plxh2] {
        color: var(--text-primary);
        font-size: 1.75rem;
        margin: 0 0 0.5rem 0;
        font-weight: 700;
        letter-spacing: -0.5px;
    }
    
    .login-page .login-header p[b-dc8k3plxh2] {
        color: var(--text-muted);
        margin: 0;
        font-size: 0.95rem;
    }
    
    .login-page .form-group[b-dc8k3plxh2] {
        margin-bottom: 1.25rem;
    }
    
    .login-page .form-label[b-dc8k3plxh2] {
        display: block;
        color: var(--text-secondary);
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }
    
    .login-page .form-control[b-dc8k3plxh2] {
        width: 100%;
        padding: 0.875rem 1rem;
        background: var(--surface-sunken);
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        color: var(--text-primary);
        font-size: 1rem;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }
    
    .login-page .form-control:focus[b-dc8k3plxh2] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(31, 148, 185, 0.15);
        background: var(--surface-card);
    }
    
    .login-page .form-control[b-dc8k3plxh2]::placeholder {
        color: var(--text-muted);
    }
    
    .login-page .password-wrapper[b-dc8k3plxh2] {
        position: relative;
    }
    
    .login-page .password-wrapper .form-control[b-dc8k3plxh2] {
        padding-right: 3rem;
    }
    
    .login-page .password-toggle[b-dc8k3plxh2] {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.25rem;
        font-size: 1.1rem;
        opacity: 0.6;
        transition: opacity 0.2s;
    }
    
    .login-page .password-toggle:hover[b-dc8k3plxh2] {
        opacity: 1;
    }
    
    .login-page .flex[b-dc8k3plxh2] {
        display: flex;
    }
    
    .login-page .justify-between[b-dc8k3plxh2] {
        justify-content: space-between;
    }
    
    .login-page .items-center[b-dc8k3plxh2] {
        align-items: center;
    }
    
    .login-page .mb-4[b-dc8k3plxh2] {
        margin-bottom: 1.5rem;
    }
    
    .login-page .form-check[b-dc8k3plxh2] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .login-page .form-check-input[b-dc8k3plxh2] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }
    
    .login-page .form-check label[b-dc8k3plxh2] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        cursor: pointer;
    }
    
    .login-page .text-sm[b-dc8k3plxh2] {
        font-size: 0.875rem;
        color: var(--color-accent);
        text-decoration: none;
    }
    
    .login-page .text-sm:hover[b-dc8k3plxh2] {
        text-decoration: underline;
    }
    
    .login-page .btn-primary[b-dc8k3plxh2] {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
        color: #ffffff;
        border: none;
        padding: 1rem 2rem;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 8px rgba(30, 148, 188, 0.3);
    }
    
    .login-page .btn-primary:hover[b-dc8k3plxh2] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(31, 148, 185, 0.3);
    }
    
    .login-page .btn-primary:active[b-dc8k3plxh2] {
        transform: translateY(0);
    }
    
    .login-page .alert-danger[b-dc8k3plxh2] {
        background: rgba(195, 29, 100, 0.08);
        border: 1px solid rgba(195, 29, 100, 0.25);
        color: var(--color-accent);
        padding: 0.875rem 1rem;
        border-radius: 8px;
        margin-bottom: 1.25rem;
        font-size: 0.9rem;
    }
    
    @media (max-width: 480px) {
        .login-page .login-card[b-dc8k3plxh2] { padding: 1.5rem 1.25rem; margin: 0 0.5rem; }
        .login-page .login-header h2[b-dc8k3plxh2] { font-size: 1.3rem; }
    }
/* /Components/Pages/Account/LoginWith2fa.razor.rz.scp.css */
/* Full viewport login page — matches Login.razor.css */
.login-page[b-veprshxrpj] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface-card);
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
    z-index: 50;
}

.login-spacer-top[b-veprshxrpj] {
    flex: 1;
}

.login-spacer[b-veprshxrpj] {
    flex: 1;
}

.login-spacer-bottom[b-veprshxrpj] {
    flex: 3;
}

.login-page .login-card[b-veprshxrpj] {
    width: 100%;
    max-width: 420px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.login-page .login-header[b-veprshxrpj] {
    text-align: center;
    margin-bottom: 2rem;
}

.login-page .login-header h1[b-veprshxrpj] {
    color: var(--text-primary);
    font-size: 1.75rem;
    margin: 0 0 0.5rem 0;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.login-page .login-header p[b-veprshxrpj] {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.95rem;
}

.login-page .form-group[b-veprshxrpj] {
    margin-bottom: 1.25rem;
}

.login-page .form-label[b-veprshxrpj] {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.login-page .form-control[b-veprshxrpj] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.login-page .form-control:focus[b-veprshxrpj] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(31, 148, 185, 0.15);
    background: var(--surface-card);
}

.login-page .form-control[b-veprshxrpj]::placeholder {
    color: var(--text-muted);
}

.login-page .btn-primary[b-veprshxrpj] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #ffffff;
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(30, 148, 188, 0.3);
}

.login-page .btn-primary:hover[b-veprshxrpj] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(31, 148, 185, 0.3);
}

.login-page .btn-primary:active[b-veprshxrpj] {
    transform: translateY(0);
}

.login-page .alert-danger[b-veprshxrpj] {
    background: rgba(195, 29, 100, 0.08);
    border: 1px solid rgba(195, 29, 100, 0.25);
    color: var(--color-accent);
    padding: 0.875rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    .login-page .login-card[b-veprshxrpj] { padding: 1.5rem 1.25rem; margin: 0 0.5rem; }
    .login-page .login-header h1[b-veprshxrpj] { font-size: 1.3rem; }
}
/* /Components/Pages/Account/LoginWithRecoveryCode.razor.rz.scp.css */
/* Full viewport login page — matches Login.razor.css */
.login-page[b-mwi26pqjr9] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface-card);
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
    z-index: 50;
}

.login-spacer-top[b-mwi26pqjr9] {
    flex: 1;
}

.login-spacer[b-mwi26pqjr9] {
    flex: 1;
}

.login-spacer-bottom[b-mwi26pqjr9] {
    flex: 3;
}

.login-page .login-card[b-mwi26pqjr9] {
    width: 100%;
    max-width: 420px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.login-page .login-header[b-mwi26pqjr9] {
    text-align: center;
    margin-bottom: 2rem;
}

.login-page .login-header h1[b-mwi26pqjr9] {
    color: var(--text-primary);
    font-size: 1.75rem;
    margin: 0 0 0.5rem 0;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.login-page .login-header p[b-mwi26pqjr9] {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.95rem;
}

.login-page .form-group[b-mwi26pqjr9] {
    margin-bottom: 1.25rem;
}

.login-page .form-label[b-mwi26pqjr9] {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.login-page .form-control[b-mwi26pqjr9] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.login-page .form-control:focus[b-mwi26pqjr9] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(31, 148, 185, 0.15);
    background: var(--surface-card);
}

.login-page .form-control[b-mwi26pqjr9]::placeholder {
    color: var(--text-muted);
}

.login-page .btn-primary[b-mwi26pqjr9] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #ffffff;
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(30, 148, 188, 0.3);
}

.login-page .btn-primary:hover[b-mwi26pqjr9] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(31, 148, 185, 0.3);
}

.login-page .btn-primary:active[b-mwi26pqjr9] {
    transform: translateY(0);
}

.login-page .alert-danger[b-mwi26pqjr9] {
    background: rgba(195, 29, 100, 0.08);
    border: 1px solid rgba(195, 29, 100, 0.25);
    color: var(--color-accent);
    padding: 0.875rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    .login-page .login-card[b-mwi26pqjr9] { padding: 1.5rem 1.25rem; margin: 0 0.5rem; }
    .login-page .login-header h1[b-mwi26pqjr9] { font-size: 1.3rem; }
}
/* /Components/Pages/Account/Logout.razor.rz.scp.css */
.btn-logout-confirm[b-qbphkgrtyn] {
    width: 100%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #ffffff;
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(30, 148, 188, 0.3);
    margin-bottom: 0.75rem;
}

.btn-logout-confirm:hover[b-qbphkgrtyn] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(31, 148, 185, 0.3);
}

.btn-logout-confirm:active[b-qbphkgrtyn] {
    transform: translateY(0);
}

.btn-logout-cancel[b-qbphkgrtyn] {
    display: block;
    width: 100%;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
}

.btn-logout-cancel:hover[b-qbphkgrtyn] {
    background: var(--surface-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
/* /Components/Pages/Admin/Benachrichtigungen.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   Benachrichtigungen page — Summary, Tabs, Logs, Queue
   ══════════════════════════════════════════════════════════════ */

/* ── Summary Cards ── */
.bn-summary[b-o5czez1og1] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.bn-stat-card[b-o5czez1og1] {
    flex: 1;
    min-width: 120px;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    text-align: center;
}

.bn-stat-value[b-o5czez1og1] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.bn-stat-label[b-o5czez1og1] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.bn-pending[b-o5czez1og1] { color: #f59e0b; }
.bn-sending[b-o5czez1og1] { color: #3b82f6; }
.bn-success[b-o5czez1og1] { color: #22c55e; }
.bn-dryrun[b-o5czez1og1]  { color: #a855f7; }
.bn-failed[b-o5czez1og1]  { color: #ef4444; }

/* ── Tab Bar ── */
.bn-tabs[b-o5czez1og1] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-default);
    margin-bottom: 1rem;
    align-items: stretch;
}

.bn-tab[b-o5czez1og1] {
    padding: 0.6rem 1.2rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bn-tab:hover[b-o5czez1og1] {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.bn-tab.active[b-o5czez1og1] {
    color: var(--text-primary);
    border-bottom-color: var(--color-primary, #3b82f6);
    font-weight: 600;
}

.bn-tab-count[b-o5czez1og1] {
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    background: var(--surface-hover);
    color: var(--text-secondary);
    font-weight: 500;
}

.bn-tab.active .bn-tab-count[b-o5czez1og1] {
    background: var(--color-primary, #3b82f6);
    color: white;
}

/* ── Search Box ── */
.bn-search-box[b-o5czez1og1] {
    position: relative;
    align-self: center;
    margin-right: 0.5rem;
}

.bn-search-box input[b-o5czez1og1] {
    width: 180px;
    padding-right: 1.8rem;
}

.bn-search-clear[b-o5czez1og1] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0 4px;
    line-height: 1;
}

.bn-search-clear:hover[b-o5czez1og1] {
    color: var(--text-primary);
}

/* ── Filter Bar ── */
.bn-filter-bar[b-o5czez1og1] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Störung Pills ── */
.bn-stoerung-pills[b-o5czez1og1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.bn-stoerung-pill[b-o5czez1og1] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    background: var(--surface-hover);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    white-space: nowrap;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bn-stoerung-pill strong[b-o5czez1og1] {
    color: var(--color-primary, #3b82f6);
    margin-right: 0.1rem;
}

/* ── Row Classes ── */
.bn-row-failed[b-o5czez1og1] {
    background: rgba(239, 68, 68, 0.06) !important;
}

.bn-row-sending[b-o5czez1og1] {
    background: rgba(59, 130, 246, 0.06) !important;
}

.bn-row-dryrun[b-o5czez1og1] {
    background: rgba(168, 85, 247, 0.06) !important;
}

/* ── Badges ── */
[b-o5czez1og1] .badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

[b-o5czez1og1] .badge-success {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

[b-o5czez1og1] .badge-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

[b-o5czez1og1] .badge-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

[b-o5czez1og1] .badge-info {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

[b-o5czez1og1] .badge-sms {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

[b-o5czez1og1] .badge-email {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

[b-o5czez1og1] .badge-dryrun {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    border: 1px dashed rgba(168, 85, 247, 0.4);
}

/* ── Matrix-Übersicht ── */
.mx-row-threshold[b-o5czez1og1] {
    background: rgba(239, 68, 68, 0.08) !important;
}

.mx-row-counting[b-o5czez1og1] {
    background: rgba(245, 158, 11, 0.06) !important;
}

.mx-counter[b-o5czez1og1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mx-counter-bar[b-o5czez1og1] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--surface-hover);
    overflow: hidden;
    min-width: 40px;
}

.mx-counter-fill[b-o5czez1og1] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.mx-fill-counting[b-o5czez1og1] {
    background: #f59e0b;
}

.mx-fill-threshold[b-o5czez1og1] {
    background: #ef4444;
}

/* ── Utility ── */
.bn-mono[b-o5czez1og1] {
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 0.85rem;
}
/* /Components/Pages/Admin/BenutzerImport.razor.rz.scp.css */
.import-page[b-2f7njiiaqe] { padding: 1.5rem; }
    .page-header h2[b-2f7njiiaqe] { margin: 0; }
    .page-header .subtitle[b-2f7njiiaqe] { color: var(--text-secondary); margin: 0.25rem 0 1.5rem 0; }

    /* ── Import Section ── */
    .import-section[b-2f7njiiaqe] { max-width: 1100px; }

    .import-card[b-2f7njiiaqe] {
        border: 1px solid var(--border-default);
        border-radius: 8px;
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .import-card.info-border[b-2f7njiiaqe] { border-color: var(--color-primary); }
    .import-card.warn-border[b-2f7njiiaqe] { border-color: var(--color-warning); }
    .import-card.ok-border[b-2f7njiiaqe] { border-color: var(--color-success); }
    .import-card.err-border[b-2f7njiiaqe] { border-color: var(--color-danger); }

    .card-header-import[b-2f7njiiaqe] {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.7rem 1rem;
        background: var(--surface-sunken);
        border-bottom: 1px solid var(--border-default);
    }

    .card-header-import h4[b-2f7njiiaqe] { margin: 0; font-size: 1rem; }
    .card-header-import.info-bg[b-2f7njiiaqe] { background: var(--color-primary-light); }
    .card-header-import.warn-bg[b-2f7njiiaqe] { background: var(--color-warning-light); }
    .card-header-import.ok-bg[b-2f7njiiaqe] { background: var(--color-success-light); }
    .card-header-import.err-bg[b-2f7njiiaqe] { background: var(--color-danger-light); }

    .card-body-import[b-2f7njiiaqe] { padding: 1rem; }

    .step-badge[b-2f7njiiaqe] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        background: var(--color-primary);
        color: var(--text-primary);
        border-radius: 50%;
        font-size: 0.8rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    /* Upload area */
    .upload-area[b-2f7njiiaqe] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 2rem 1.5rem;
        border: 2px dashed #adb5bd;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .upload-area:hover[b-2f7njiiaqe] { border-color: var(--color-primary); background: var(--color-primary-light); }
    .upload-area[b-2f7njiiaqe]  input[type="file"] { display: none; }
    .upload-icon[b-2f7njiiaqe] { font-size: 2rem; }
    .upload-text[b-2f7njiiaqe] { font-size: 0.95rem; color: var(--text-secondary); }
    .upload-hint[b-2f7njiiaqe] { font-size: 0.8rem; color: var(--text-muted); }

    .import-spinner[b-2f7njiiaqe] {
        display: inline-block;
        width: 20px; height: 20px;
        border: 2px solid var(--text-muted);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-2f7njiiaqe 0.6s linear infinite;
    }
    @keyframes spin-b-2f7njiiaqe { to { transform: rotate(360deg); } }

    .file-loaded[b-2f7njiiaqe] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: var(--color-success-light);
        border-radius: 6px;
    }

    .file-info[b-2f7njiiaqe] { display: flex; align-items: center; gap: 0.5rem; }
    .file-name[b-2f7njiiaqe] { color: #166534; }
    .file-size[b-2f7njiiaqe] { font-size: 0.85rem; color: var(--text-secondary); }

    .admin-list[b-2f7njiiaqe] { display: flex; flex-wrap: wrap; gap: 0.3rem; }
    .admin-badge[b-2f7njiiaqe] {
        background: var(--border-default);
        padding: 0.15rem 0.5rem;
        border-radius: 3px;
        font-size: 0.85rem;
    }

    .import-warning-line[b-2f7njiiaqe] { color: #92400e; font-size: 0.9rem; padding: 0.15rem 0; }

    /* Stats grid */
    .stats-grid[b-2f7njiiaqe] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.6rem;
        margin-bottom: 1rem;
    }

    .stat-box[b-2f7njiiaqe] {
        border: 1px solid var(--border-default);
        border-radius: 6px;
        padding: 0.6rem;
        text-align: center;
    }

    .stat-value[b-2f7njiiaqe] { font-size: 1.4rem; font-weight: 700; }
    .stat-label[b-2f7njiiaqe] { font-size: 0.75rem; color: var(--text-secondary); }
    .stat-new .stat-value[b-2f7njiiaqe] { color: var(--color-success); }
    .stat-existing .stat-value[b-2f7njiiaqe] { color: var(--color-warning); }
    .stat-matched .stat-value[b-2f7njiiaqe] { color: var(--color-primary); }
    .stat-unmatched .stat-value[b-2f7njiiaqe] { color: var(--color-danger); }

    /* Import table */
    .import-table-wrapper[b-2f7njiiaqe] { overflow-x: auto; max-height: 450px; overflow-y: auto; }

    .import-table[b-2f7njiiaqe] {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
    }

    .import-table thead[b-2f7njiiaqe] { position: sticky; top: 0; z-index: 2; }

    .import-table th[b-2f7njiiaqe] {
        background: var(--surface-sunken);
        padding: 0.5rem 0.6rem;
        border-bottom: 2px solid var(--color-primary);
        font-weight: 600;
        white-space: nowrap;
    }

    .import-table td[b-2f7njiiaqe] {
        padding: 0.35rem 0.6rem;
        border-bottom: 1px solid var(--border-default);
        vertical-align: top;
    }

    .import-table tr:hover[b-2f7njiiaqe] { background: var(--color-primary-light); }

    .mod-col[b-2f7njiiaqe] { text-align: center; width: 55px; }
    .mod-cell[b-2f7njiiaqe] { text-align: center; font-weight: 600; }
    .cell-new[b-2f7njiiaqe] { font-weight: 600; color: var(--color-success); }
    .cell-existing[b-2f7njiiaqe] { font-weight: 600; color: var(--color-warning); }
    .badge-exists[b-2f7njiiaqe] {
        font-size: 0.65rem;
        background: var(--color-warning-light);
        color: #92400e;
        padding: 0.1rem 0.35rem;
        border-radius: 3px;
        margin-left: 0.3rem;
    }
    .user-count[b-2f7njiiaqe] { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }
    .row-unmatched[b-2f7njiiaqe] { opacity: 0.5; }
/* /Components/Pages/Admin/Benutzerverwaltung.razor.rz.scp.css */
/* ── Tabs ── */
    .tabs[b-bnwd7hk623] {
        display: flex;
        gap: 0;
        margin-bottom: 1.5rem;
        border-bottom: 2px solid var(--border-default);
    }

    .tab[b-bnwd7hk623] {
        padding: 0.6rem 1.2rem;
        border: none;
        background: transparent;
        font-size: 0.95rem;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
        color: var(--text-secondary);
        transition: all 0.15s ease;
    }

    .tab:hover[b-bnwd7hk623] { color: var(--text-primary); }
    .tab.active[b-bnwd7hk623] {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
        font-weight: 600;
    }

    /* ── Table row hover ── */
    .user-table tbody tr[b-bnwd7hk623] {
        cursor: pointer;
        transition: background-color 0.15s ease;
    }
    
    .user-table tbody tr:hover[b-bnwd7hk623] {
        background-color: #90caf9 !important; /* Strong blue highlight */
    }
    
    .user-table tbody tr:hover td[b-bnwd7hk623] {
        background-color: transparent;
    }
    
    /* Inactive users styling with hover */
    .user-table tbody tr.inactive[b-bnwd7hk623] {
        opacity: 0.6;
        background-color: var(--surface-sunken);
    }
    
    .user-table tbody tr.inactive:hover[b-bnwd7hk623] {
        background-color: #90caf9 !important;
        opacity: 0.8;
    }
    
    /* Alternating row colors with hover */
    .user-table.table-striped tbody tr:nth-of-type(odd)[b-bnwd7hk623] {
        background-color: rgba(0, 0, 0, 0.02);
    }
    
    .user-table.table-striped tbody tr:nth-of-type(odd):hover[b-bnwd7hk623] {
        background-color: #90caf9 !important;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {
        .tabs[b-bnwd7hk623] { overflow-x: auto; flex-wrap: nowrap; }
        .tab[b-bnwd7hk623] { white-space: nowrap; font-size: 0.85rem; padding: 0.5rem 0.8rem; }
    }
/* /Components/Pages/Admin/CostSettings.razor.rz.scp.css */
.page-container[b-c8m9c7rl1f] {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }

    .page-header[b-c8m9c7rl1f] {
        margin-bottom: 2rem;
    }

    .page-header h2[b-c8m9c7rl1f] {
        margin: 0 0 0.5rem 0;
        color: var(--text-primary);
    }

    .subtitle[b-c8m9c7rl1f] {
        color: var(--text-secondary);
        font-size: 1.1rem;
        margin: 0.5rem 0;
    }

    .admin-badge[b-c8m9c7rl1f] {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        background: linear-gradient(135deg, var(--color-indigo) 0%, #764ba2 100%);
        color: var(--text-primary);
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
        margin-top: 0.5rem;
    }

    .loading-container[b-c8m9c7rl1f] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4rem;
        color: var(--text-secondary);
    }

    .spinner[b-c8m9c7rl1f] {
        width: 40px;
        height: 40px;
        border: 4px solid var(--border-default);
        border-top-color: var(--color-indigo);
        border-radius: 50%;
        animation: spin-b-c8m9c7rl1f 1s linear infinite;
        margin-bottom: 1rem;
    }

    @keyframes spin-b-c8m9c7rl1f {
        to { transform: rotate(360deg); }
    }

    .settings-container[b-c8m9c7rl1f] {
        display: grid;
        gap: 2rem;
    }
    
    .message-box[b-c8m9c7rl1f] {
        padding: 1rem 1.5rem;
        border-radius: 8px;
        margin-bottom: 1rem;
        font-weight: 500;
    }
    
    .message-box.success[b-c8m9c7rl1f] {
        background: var(--color-success-light);
        color: var(--color-success);
        border-left: 4px solid var(--color-success);
    }
    
    .message-box.error[b-c8m9c7rl1f] {
        background: #fef2f2;
        color: var(--color-danger);
        border-left: 4px solid var(--color-danger);
    }
    
    .message-box.warning[b-c8m9c7rl1f] {
        background: #fffbeb;
        color: var(--color-warning);
        border-left: 4px solid var(--color-warning);
    }

    .settings-form[b-c8m9c7rl1f] {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 2rem;
    }

    .form-section[b-c8m9c7rl1f] {
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--border-default);
    }

    .form-section:last-of-type[b-c8m9c7rl1f] {
        border-bottom: none;
        margin-bottom: 0;
    }

    .form-section h3[b-c8m9c7rl1f] {
        margin: 0 0 1.5rem 0;
        color: var(--text-primary);
        font-size: 1.25rem;
    }

    .form-group[b-c8m9c7rl1f] {
        margin-bottom: 1.5rem;
    }

    .form-row[b-c8m9c7rl1f] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .form-group label[b-c8m9c7rl1f] {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--text-secondary);
        font-weight: 500;
    }

    .form-control[b-c8m9c7rl1f] {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        font-size: 1rem;
        transition: border-color 0.2s;
    }

    .form-control:focus[b-c8m9c7rl1f] {
        outline: none;
        border-color: var(--color-indigo);
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .form-text[b-c8m9c7rl1f] {
        display: block;
        margin-top: 0.25rem;
        color: var(--text-secondary);
        font-size: 0.875rem;
    }

    .checkbox-label[b-c8m9c7rl1f] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        font-weight: normal;
    }

    .checkbox-label input[type="checkbox"][b-c8m9c7rl1f] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

    .peak-pricing-section[b-c8m9c7rl1f] {
        margin-top: 1.5rem;
        padding: 1.5rem;
        background: var(--surface-sunken);
        border-radius: 8px;
        border-left: 4px solid var(--color-primary);
    }

    .form-actions[b-c8m9c7rl1f] {
        display: flex;
        gap: 1rem;
        padding-top: 1.5rem;
    }

    .btn[b-c8m9c7rl1f] {
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-primary[b-c8m9c7rl1f] {
        background: linear-gradient(135deg, var(--color-indigo) 0%, #764ba2 100%);
        color: var(--text-primary);
    }

    .btn-primary:hover:not(:disabled)[b-c8m9c7rl1f] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .btn-primary:disabled[b-c8m9c7rl1f] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-secondary[b-c8m9c7rl1f] {
        background: var(--border-default);
        color: var(--text-secondary);
    }

    .btn-secondary:hover:not(:disabled)[b-c8m9c7rl1f] {
        background: var(--border-strong);
    }

    .spinner-small[b-c8m9c7rl1f] {
        width: 16px;
        height: 16px;
        border: 2px solid rgba(0, 0, 0, 0.15);
        border-top-color: var(--text-primary);
        border-radius: 50%;
        animation: spin-b-c8m9c7rl1f 0.8s linear infinite;
    }

    .settings-history[b-c8m9c7rl1f] {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 2rem;
    }

    .settings-history h3[b-c8m9c7rl1f] {
        margin: 0 0 1.5rem 0;
        color: var(--text-primary);
    }

    .history-table-container[b-c8m9c7rl1f] {
        overflow-x: auto;
    }

    .history-table[b-c8m9c7rl1f] {
        width: 100%;
        border-collapse: collapse;
    }

    .history-table th[b-c8m9c7rl1f] {
        text-align: left;
        padding: 0.75rem;
        background: var(--surface-sunken);
        color: var(--text-secondary);
        font-weight: 600;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid var(--border-default);
    }

    .history-table td[b-c8m9c7rl1f] {
        padding: 0.75rem;
        border-bottom: 1px solid var(--border-default);
        color: var(--text-secondary);
    }

    .history-table tr:hover[b-c8m9c7rl1f] {
        background: var(--surface-sunken);
    }

    .active-row[b-c8m9c7rl1f] {
        background: var(--color-success-light) !important;
    }

    .active-row td[b-c8m9c7rl1f] {
        font-weight: 500;
    }

    .badge[b-c8m9c7rl1f] {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .badge-success[b-c8m9c7rl1f] {
        background: var(--color-success);
        color: var(--text-primary);
    }

    .peak-info[b-c8m9c7rl1f] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.875rem;
    }

    @media (max-width: 768px) {
        .form-row[b-c8m9c7rl1f] {
            grid-template-columns: 1fr;
        }

        .page-container[b-c8m9c7rl1f] {
            padding: 1rem;
        }
    }
/* /Components/Pages/Admin/DocumentImport.razor.rz.scp.css */
.document-import-container[b-9o0py0oriw] {
        padding: 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .page-header[b-9o0py0oriw] {
        margin-bottom: 1.5rem;
    }
    
    .page-header h1[b-9o0py0oriw] {
        margin: 0;
        color: var(--text-primary);
        font-size: 1.8rem;
    }
    
    .subtitle[b-9o0py0oriw] {
        color: var(--text-secondary);
        margin: 0.5rem 0 0 0;
    }
    
    .info-box[b-9o0py0oriw] {
        background: rgba(30, 148, 188, 0.1);
        border: 1px solid rgba(30, 148, 188, 0.3);
        border-radius: 8px;
        padding: 1rem 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .info-box h4[b-9o0py0oriw] {
        margin: 0 0 0.5rem 0;
        color: var(--color-primary);
    }
    
    .info-box p[b-9o0py0oriw] {
        margin: 0.5rem 0;
        color: var(--text-secondary);
    }
    
    .info-box ul[b-9o0py0oriw] {
        margin: 0.5rem 0;
        padding-left: 1.5rem;
    }
    
    .info-box li[b-9o0py0oriw] {
        color: var(--text-muted);
        margin: 0.25rem 0;
    }
    
    .info-box code[b-9o0py0oriw] {
        background: rgba(0,0,0,0.3);
        padding: 0.15rem 0.4rem;
        border-radius: 3px;
        color: var(--color-primary);
        font-family: monospace;
    }
    
    .action-buttons[b-9o0py0oriw] {
        display: flex;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .btn-scan[b-9o0py0oriw], .btn-import[b-9o0py0oriw] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .btn-scan[b-9o0py0oriw] {
        background: var(--color-primary);
        color: var(--surface-page);
    }
    
    .btn-scan:hover:not(:disabled)[b-9o0py0oriw] {
        background: var(--color-primary);
    }
    
    .btn-import[b-9o0py0oriw] {
        background: #F18F01;
        color: var(--text-primary);
    }
    
    .btn-import:hover:not(:disabled)[b-9o0py0oriw] {
        background: var(--color-warning);
    }
    
    .btn-scan:disabled[b-9o0py0oriw], .btn-import:disabled[b-9o0py0oriw] {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    .scan-results[b-9o0py0oriw] {
        background: rgba(0,0,0,0.2);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .scan-results h3[b-9o0py0oriw] {
        margin: 0 0 1rem 0;
        color: var(--text-primary);
    }
    
    .result-tabs[b-9o0py0oriw] {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        padding-bottom: 0.5rem;
    }
    
    .tab-btn[b-9o0py0oriw] {
        padding: 0.5rem 1rem;
        background: transparent;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 4px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .tab-btn:hover[b-9o0py0oriw] {
        background: rgba(0,0,0,0.03);
        color: var(--text-secondary);
    }
    
    .tab-btn.active[b-9o0py0oriw] {
        background: rgba(30, 148, 188, 0.2);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }
    
    .results-table-container[b-9o0py0oriw] {
        overflow-x: auto;
        max-height: 500px;
        overflow-y: auto;
    }
    
    .results-table[b-9o0py0oriw] {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
    }
    
    .results-table th[b-9o0py0oriw] {
        background: rgba(0,0,0,0.3);
        color: var(--color-primary);
        padding: 0.75rem;
        text-align: left;
        position: sticky;
        top: 0;
    }
    
    .results-table td[b-9o0py0oriw] {
        padding: 0.6rem 0.75rem;
        border-bottom: 1px solid rgba(0,0,0,0.03);
        color: var(--text-secondary);
    }
    
    .results-table tr:hover[b-9o0py0oriw] {
        background: rgba(0,0,0,0.02);
    }
    
    .results-table tr.imported[b-9o0py0oriw] {
        background: rgba(30, 148, 188, 0.1);
    }
    
    .results-table tr.error[b-9o0py0oriw] {
        background: rgba(255, 107, 107, 0.1);
    }
    
    .filename[b-9o0py0oriw] {
        font-family: monospace;
        font-size: 0.85rem;
    }
    
    .projektnummer[b-9o0py0oriw] {
        font-weight: 600;
        color: var(--color-primary);
    }
    
    .badge[b-9o0py0oriw] {
        padding: 0.2rem 0.5rem;
        border-radius: 3px;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    
    .badge-blue[b-9o0py0oriw] {
        background: rgba(46, 134, 171, 0.3);
        color: var(--color-primary);
    }
    
    .badge-orange[b-9o0py0oriw] {
        background: rgba(241, 143, 1, 0.3);
        color: var(--color-warning);
    }
    
    .found[b-9o0py0oriw] {
        color: var(--color-success);
    }
    
    .not-found[b-9o0py0oriw] {
        color: var(--color-danger);
    }
    
    .status-imported[b-9o0py0oriw] {
        color: var(--color-primary);
    }
    
    .status-exists[b-9o0py0oriw] {
        color: #F18F01;
    }
    
    .status-ready[b-9o0py0oriw] {
        color: var(--color-success);
    }
    
    .status-error[b-9o0py0oriw] {
        color: var(--color-danger);
        font-size: 0.8rem;
    }
    
    .btn-small[b-9o0py0oriw] {
        padding: 0.3rem 0.6rem;
        background: var(--color-primary);
        color: var(--surface-page);
        border: none;
        border-radius: 3px;
        font-size: 0.8rem;
        cursor: pointer;
    }
    
    .btn-small:hover[b-9o0py0oriw] {
        background: var(--color-primary);
    }
    
    .btn-small.btn-warning[b-9o0py0oriw] {
        background: #F18F01;
        color: var(--text-primary);
    }
    
    .btn-small.btn-warning:hover[b-9o0py0oriw] {
        background: var(--color-warning);
    }
    
    .import-log[b-9o0py0oriw] {
        background: rgba(0,0,0,0.3);
        border-radius: 8px;
        padding: 1rem;
    }
    
    .import-log h3[b-9o0py0oriw] {
        margin: 0 0 0.75rem 0;
        color: var(--text-primary);
    }
    
    .log-container[b-9o0py0oriw] {
        max-height: 200px;
        overflow-y: auto;
        font-family: monospace;
        font-size: 0.8rem;
    }
    
    .log-entry[b-9o0py0oriw] {
        padding: 0.3rem 0.5rem;
        border-bottom: 1px solid rgba(0,0,0,0.03);
    }
    
    .log-entry.info[b-9o0py0oriw] {
        color: var(--text-secondary);
    }
    
    .log-entry.success[b-9o0py0oriw] {
        color: var(--color-primary);
    }
    
    .log-entry.warning[b-9o0py0oriw] {
        color: #F18F01;
    }
    
    .log-entry.error[b-9o0py0oriw] {
        color: var(--color-danger);
    }
    
    .log-time[b-9o0py0oriw] {
        color: var(--text-secondary);
        margin-right: 0.5rem;
    }
/* /Components/Pages/Admin/DownloadDiag.razor.rz.scp.css */
.download-diag[b-nycmm1ggzw] { padding: 2rem; max-width: 1400px; margin: 0 auto; }
    .page-header[b-nycmm1ggzw] { margin-bottom: 2rem; }
    .page-header h2[b-nycmm1ggzw] { margin: 0 0 0.5rem 0; color: var(--text-primary); }
    .page-header .subtitle[b-nycmm1ggzw] { margin: 0; color: var(--text-secondary); }
    
    .config-section[b-nycmm1ggzw], .esc-section[b-nycmm1ggzw], .internal-section[b-nycmm1ggzw], .result-section[b-nycmm1ggzw] {
        background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem;
    }
    .config-section h3[b-nycmm1ggzw], .esc-section h3[b-nycmm1ggzw], .internal-section h3[b-nycmm1ggzw], .result-section h3[b-nycmm1ggzw] {
        margin: 0 0 1rem 0; font-size: 1.1rem; color: var(--text-primary);
    }
    .config-grid[b-nycmm1ggzw] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
    .form-group label[b-nycmm1ggzw] { display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
    .form-control[b-nycmm1ggzw] { width: 100%; padding: 0.5rem; border: 1px solid var(--border-default); border-radius: 4px; font-size: 0.9rem; }
    .connection-info[b-nycmm1ggzw] { margin-top: 1rem; display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; }
    
    .badge[b-nycmm1ggzw] { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
    .badge-info[b-nycmm1ggzw] { background: var(--color-primary); color: var(--surface-card); }
    .badge-secondary[b-nycmm1ggzw] { background: var(--text-secondary); color: var(--surface-card); }
    .badge-warning[b-nycmm1ggzw] { background: var(--color-warning); color: #000; }
    .badge-danger[b-nycmm1ggzw] { background: var(--color-danger); color: var(--surface-card); }
    
    .esc-grid[b-nycmm1ggzw] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
    .esc-card[b-nycmm1ggzw] { border: 1px solid var(--border-default); border-radius: 8px; padding: 1rem; background: var(--surface-sunken); transition: all 0.2s; }
    .esc-card:hover[b-nycmm1ggzw] { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(30, 148, 188, 0.15); }
    .esc-card.active[b-nycmm1ggzw] { border-color: var(--color-primary); background: rgba(30, 148, 188, 0.1); }
    .esc-header[b-nycmm1ggzw] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
    .esc-name[b-nycmm1ggzw] { font-weight: 600; color: var(--text-primary); }
    .esc-code[b-nycmm1ggzw] { font-family: monospace; background: var(--text-primary); color: var(--color-primary); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem; }
    .esc-info[b-nycmm1ggzw] { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; font-size: 0.75rem; color: var(--text-secondary); font-family: monospace; }
    .esc-params[b-nycmm1ggzw] { margin-bottom: 0.75rem; }
    .param-row[b-nycmm1ggzw] { display: flex; gap: 0.5rem; }
    .param-input[b-nycmm1ggzw] { flex: 1; padding: 0.35rem 0.5rem; border: 1px solid var(--border-default); border-radius: 4px; font-size: 0.8rem; min-width: 0; }
    
    .btn-download[b-nycmm1ggzw] { width: 100%; padding: 0.5rem; background: var(--color-primary); color: #000; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s; }
    .btn-download:hover:not(:disabled)[b-nycmm1ggzw] { background: var(--color-primary); }
    .btn-download:disabled[b-nycmm1ggzw] { opacity: 0.5; cursor: not-allowed; }
    .spinner-small[b-nycmm1ggzw] { width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.1); border-top-color: #000; border-radius: 50%; animation: spin-b-nycmm1ggzw 1s linear infinite; }
    @keyframes spin-b-nycmm1ggzw { to { transform: rotate(360deg); } }
    
    .internal-table[b-nycmm1ggzw] { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
    .internal-table th[b-nycmm1ggzw], .internal-table td[b-nycmm1ggzw] { padding: 0.75rem; border: 1px solid var(--border-default); text-align: left; }
    .internal-table th[b-nycmm1ggzw] { background: var(--surface-sunken); font-weight: 600; }
    
    .result-header[b-nycmm1ggzw] { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
    .result-header h3[b-nycmm1ggzw] { margin: 0; flex: 1; }
    .result-meta[b-nycmm1ggzw] { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--text-secondary); }
    .btn-clear[b-nycmm1ggzw] { padding: 0.25rem 0.75rem; background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
    .result-error[b-nycmm1ggzw] { background: rgba(231, 76, 60, 0.1); color: var(--color-danger); padding: 0.75rem; border-radius: 4px; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
    
    .result-tabs[b-nycmm1ggzw] { display: flex; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-default); padding-bottom: 0.5rem; flex-wrap: wrap; }
    .result-tabs .tab[b-nycmm1ggzw] { padding: 0.5rem 1rem; background: none; border: 1px solid transparent; border-radius: 4px 4px 0 0; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); }
    .result-tabs .tab:hover[b-nycmm1ggzw] { background: var(--surface-sunken); }
    .result-tabs .tab.active[b-nycmm1ggzw] { background: var(--surface-card); border-color: var(--text-body); border-bottom-color: var(--text-primary); color: var(--color-primary); font-weight: 600; margin-bottom: -1px; }
    .result-content[b-nycmm1ggzw] { max-height: 600px; overflow: auto; }
    
    .hex-view[b-nycmm1ggzw], .text-view[b-nycmm1ggzw] { margin: 0; padding: 1rem; background: var(--surface-page); color: var(--color-primary); font-family: 'Consolas', monospace; font-size: 0.8rem; border-radius: 4px; white-space: pre; overflow-x: auto; }
    .parsed-table[b-nycmm1ggzw] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
    .parsed-table th[b-nycmm1ggzw], .parsed-table td[b-nycmm1ggzw] { padding: 0.5rem; border: 1px solid var(--border-default); text-align: left; }
    .parsed-table th[b-nycmm1ggzw] { background: var(--surface-sunken); font-weight: 600; position: sticky; top: 0; }
    .parsed-table tr:hover[b-nycmm1ggzw] { background: rgba(30, 148, 188, 0.05); }
    
    /* Debug View */
    .debug-view[b-nycmm1ggzw] { padding: 1rem; }
    .debug-section[b-nycmm1ggzw] { background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
    .debug-section h4[b-nycmm1ggzw] { margin: 0 0 0.75rem 0; color: var(--gray-600); font-size: 1rem; }
    .debug-section h5[b-nycmm1ggzw] { margin: 1rem 0 0.5rem 0; color: var(--text-secondary); font-size: 0.9rem; }
    .debug-grid[b-nycmm1ggzw] { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.5rem; }
    .debug-item[b-nycmm1ggzw] { display: flex; gap: 0.5rem; align-items: center; }
    .debug-label[b-nycmm1ggzw] { font-weight: 600; color: var(--gray-600); font-size: 0.85rem; }
    .debug-value[b-nycmm1ggzw] { color: var(--text-primary); font-family: monospace; font-size: 0.85rem; }
    .debug-raw[b-nycmm1ggzw] { background: #212529; color: #e2e8f0; padding: 1rem; border-radius: 4px; font-family: monospace; font-size: 0.75rem; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow: auto; }
    .debug-highlight[b-nycmm1ggzw] { background: var(--color-warning-light); border: 1px solid var(--color-warning); border-radius: 4px; padding: 0.75rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    .debug-code[b-nycmm1ggzw] { background: var(--gray-800); color: var(--color-primary); padding: 0.25rem 0.5rem; border-radius: 4px; font-family: monospace; font-size: 0.9rem; }
    .debug-stats[b-nycmm1ggzw] { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
    .stat-card[b-nycmm1ggzw] { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 8px; padding: 1rem 1.5rem; text-align: center; min-width: 120px; }
    .stat-card.stat-warning[b-nycmm1ggzw] { border-color: var(--color-warning); background: var(--color-warning-light); }
    .stat-value[b-nycmm1ggzw] { display: block; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
    .stat-label[b-nycmm1ggzw] { display: block; font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem; }
    .debug-type-grid[b-nycmm1ggzw] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .type-badge[b-nycmm1ggzw] { background: var(--border-default); border-radius: 4px; padding: 0.25rem 0.5rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
    .type-name[b-nycmm1ggzw] { font-weight: 600; font-family: monospace; }
    .type-count[b-nycmm1ggzw] { background: var(--color-primary); color: #000; padding: 0.1rem 0.4rem; border-radius: 10px; font-size: 0.7rem; }
    .debug-log[b-nycmm1ggzw] { background: #212529; color: #adb5bd; padding: 1rem; border-radius: 4px; font-family: monospace; font-size: 0.75rem; white-space: pre-wrap; max-height: 300px; overflow: auto; }
    
    /* Patterns View */
    .patterns-view[b-nycmm1ggzw] { padding: 1rem; }
    .pattern-section[b-nycmm1ggzw] { margin-bottom: 1.5rem; }
    .pattern-section h5[b-nycmm1ggzw] { margin: 0 0 0.75rem 0; color: var(--gray-600); }
    .pattern-grid[b-nycmm1ggzw] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem; }
    .pattern-item[b-nycmm1ggzw] { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem; border-radius: 4px; font-size: 0.8rem; }
    .pattern-item.found[b-nycmm1ggzw] { background: rgba(40, 167, 69, 0.1); border: 1px solid var(--color-success); }
    .pattern-item.not-found[b-nycmm1ggzw] { background: var(--surface-sunken); border: 1px solid var(--border-default); opacity: 0.6; }
    .pattern-name[b-nycmm1ggzw] { font-weight: 600; font-family: monospace; }
    .pattern-hex[b-nycmm1ggzw] { font-size: 0.7rem; color: var(--text-secondary); font-family: monospace; }
    .pattern-count[b-nycmm1ggzw] { font-weight: 700; color: var(--color-success); }
    .pattern-positions[b-nycmm1ggzw] { font-size: 0.7rem; color: var(--text-secondary); }
    .structure-analysis[b-nycmm1ggzw] { background: var(--surface-sunken); padding: 1rem; border-radius: 4px; font-family: monospace; font-size: 0.8rem; white-space: pre-wrap; }
    
    /* Visu Details */
    .visu-details[b-nycmm1ggzw] { padding: 1rem; }
    .visu-header-info[b-nycmm1ggzw] { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
    .info-card[b-nycmm1ggzw] { background: var(--surface-sunken); padding: 0.75rem 1rem; border-radius: 4px; }
    .info-card .label[b-nycmm1ggzw] { font-size: 0.75rem; color: var(--text-secondary); display: block; }
    .info-card .value[b-nycmm1ggzw] { font-size: 1.1rem; font-weight: 600; }
    .visu-group[b-nycmm1ggzw] { margin-bottom: 1rem; }
    .group-header[b-nycmm1ggzw] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; padding: 0.5rem; background: var(--border-default); border-radius: 4px; }
    .group-name[b-nycmm1ggzw] { font-weight: 600; font-family: monospace; }
    .group-count[b-nycmm1ggzw] { font-size: 0.75rem; color: var(--text-secondary); }
    .group-items[b-nycmm1ggzw] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem; }
    .visu-item[b-nycmm1ggzw] { padding: 0.5rem; border: 1px solid var(--border-default); border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
    .visu-item.bool-item[b-nycmm1ggzw] { background: rgba(30, 148, 188, 0.05); }
    .item-key[b-nycmm1ggzw] { font-family: monospace; font-size: 0.8rem; }
    .item-value[b-nycmm1ggzw] { font-weight: 600; }
    .unit[b-nycmm1ggzw] { font-size: 0.75rem; color: var(--text-secondary); margin-left: 0.25rem; }
    .bool-badge[b-nycmm1ggzw] { padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.7rem; }
    .bool-badge.on[b-nycmm1ggzw] { background: var(--color-success); color: var(--surface-card); }
    .bool-badge.off[b-nycmm1ggzw] { background: var(--text-secondary); color: var(--surface-card); }
    .text-danger[b-nycmm1ggzw] { color: var(--color-danger); }
    .ml-2[b-nycmm1ggzw] { margin-left: 0.5rem; }
    
    /* QHHeader Database Actions */
    .qh-db-actions[b-nycmm1ggzw] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        margin-bottom: 1rem;
        background: linear-gradient(135deg, var(--surface-sunken) 0%, var(--border-default) 100%);
        border-radius: 8px;
        border: 1px solid var(--border-default);
    }
    .db-status[b-nycmm1ggzw] { }
    .db-status .badge[b-nycmm1ggzw] { font-size: 0.85rem; padding: 0.4rem 0.8rem; }
    .badge-success[b-nycmm1ggzw] { background: var(--color-success); color: var(--surface-card); }
    .badge-secondary[b-nycmm1ggzw] { background: var(--text-secondary); color: var(--surface-card); }
    .db-buttons[b-nycmm1ggzw] { display: flex; gap: 0.5rem; }
    .db-buttons .btn[b-nycmm1ggzw] { display: flex; align-items: center; gap: 0.25rem; }
    .btn-sm[b-nycmm1ggzw] { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
    .btn-primary[b-nycmm1ggzw] { background: var(--color-primary); color: var(--surface-card); border: none; border-radius: 4px; cursor: pointer; }
    .btn-primary:hover[b-nycmm1ggzw] { background: var(--color-primary-hover); }
    .btn-primary:disabled[b-nycmm1ggzw] { background: var(--text-secondary); cursor: not-allowed; }
    .btn-danger[b-nycmm1ggzw] { background: var(--color-danger); color: var(--surface-card); border: none; border-radius: 4px; cursor: pointer; }
    .btn-danger:hover[b-nycmm1ggzw] { background: #b91c1c; }
    .btn-warning[b-nycmm1ggzw] { background: var(--color-warning); color: var(--text-primary); border: none; border-radius: 4px; cursor: pointer; }
    .btn-warning:hover[b-nycmm1ggzw] { background: var(--color-warning); }
/* /Components/Pages/Admin/HeizungenVerwaltung.razor.rz.scp.css */
/* Permission column icons - bigger and clearer */
    .perm-icon[b-g4nbx20dd9] {
        font-size: 1.4rem;
        line-height: 1;
    }
    
    /* Table row hover highlighting - very strong color */
    .heizung-table tbody tr[b-g4nbx20dd9] {
        cursor: pointer;
        transition: background-color 0.15s ease;
    }
    
    .heizung-table tbody tr:hover[b-g4nbx20dd9] {
        background-color: #90caf9 !important; /* Strong blue highlight */
    }
    
    .heizung-table tbody tr:hover td[b-g4nbx20dd9] {
        background-color: transparent;
    }
    
    /* Alternating row colors with hover */
    .heizung-table.table-striped tbody tr:nth-of-type(odd)[b-g4nbx20dd9] {
        background-color: rgba(0, 0, 0, 0.02);
    }
    
    .heizung-table.table-striped tbody tr:nth-of-type(odd):hover[b-g4nbx20dd9] {
        background-color: #90caf9 !important;
    }
    
    /* table-success rows (permission assigned) with hover */
    .heizung-table tbody tr.table-success[b-g4nbx20dd9] {
        background-color: #d1e7dd;
    }
    
    .heizung-table tbody tr.table-success:hover[b-g4nbx20dd9] {
        background-color: #81c784 !important; /* Strong green highlight */
    }
    
    /* Make sure buttons don't trigger row hover on small tables */
    .heizung-table.table-sm tbody tr[b-g4nbx20dd9] {
        cursor: default;
    }
/* /Components/Pages/Admin/LegacyVisuImport.razor.rz.scp.css */
.import-container[b-5jrsxwafhu] {
        max-width: 900px;
        margin: 0 auto;
        padding: 2rem;
        min-height: 100vh;
        background: var(--surface-page);
        color: var(--text-body);
    }
    
    .import-header[b-5jrsxwafhu] {
        margin-bottom: 2rem;
    }
    
    .btn-back[b-5jrsxwafhu] {
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 0.9rem;
    }
    
    .btn-back:hover[b-5jrsxwafhu] {
        color: var(--color-primary);
    }
    
    .import-header h1[b-5jrsxwafhu] {
        margin: 1rem 0 0.5rem;
        color: var(--text-primary);
    }
    
    .import-header p[b-5jrsxwafhu] {
        color: var(--text-secondary);
        margin: 0;
    }
    
    .import-content[b-5jrsxwafhu] {
        background: var(--surface-sunken);
        border-radius: 8px;
        padding: 2rem;
    }
    
    .import-step[b-5jrsxwafhu] {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border-strong);
    }
    
    .import-step h2[b-5jrsxwafhu] {
        color: var(--color-primary);
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    
    .step-description[b-5jrsxwafhu] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    .heizung-select[b-5jrsxwafhu] {
        width: 100%;
        padding: 0.75rem;
        background: var(--surface-page);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-body);
        font-size: 1rem;
    }
    
    .file-upload[b-5jrsxwafhu] {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .file-upload[b-5jrsxwafhu]  input[type="file"] {
        padding: 0.5rem;
        background: var(--surface-page);
        border: 1px dashed var(--border-strong);
        border-radius: 4px;
        color: var(--text-body);
        cursor: pointer;
    }
    
    .file-selected[b-5jrsxwafhu] {
        color: var(--color-primary);
        font-size: 0.9rem;
    }
    
    .import-actions[b-5jrsxwafhu] {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        margin-top: 1.5rem;
    }
    
    .btn-convert[b-5jrsxwafhu], .btn-import[b-5jrsxwafhu] {
        padding: 0.75rem 1.5rem;
        background: var(--color-primary);
        color: var(--surface-sunken);
        border: none;
        border-radius: 4px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .btn-convert:disabled[b-5jrsxwafhu], .btn-import:disabled[b-5jrsxwafhu] {
        background: var(--border-strong);
        color: var(--text-secondary);
        cursor: not-allowed;
    }
    
    .btn-convert:hover:not(:disabled)[b-5jrsxwafhu], .btn-import:hover:not(:disabled)[b-5jrsxwafhu] {
        background: var(--color-primary-hover);
    }
    
    .btn-secondary[b-5jrsxwafhu], .btn-download[b-5jrsxwafhu] {
        padding: 0.75rem 1.5rem;
        background: var(--border-strong);
        color: var(--text-body);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .btn-secondary:hover[b-5jrsxwafhu], .btn-download:hover[b-5jrsxwafhu] {
        background: var(--border-strong);
    }
    
    .error-message[b-5jrsxwafhu] {
        background: rgba(255, 68, 68, 0.1);
        border: 1px solid rgba(255, 68, 68, 0.3);
        border-radius: 4px;
        padding: 1rem;
        color: var(--color-danger);
        margin-top: 1rem;
    }
    
    .success-message[b-5jrsxwafhu] {
        background: rgba(0, 255, 136, 0.1);
        border: 1px solid rgba(0, 255, 136, 0.3);
        border-radius: 4px;
        padding: 1rem;
        color: var(--color-primary);
        margin-top: 1rem;
    }
    
    .warning[b-5jrsxwafhu] {
        color: var(--color-warning);
        font-size: 0.9rem;
    }
    
    .preview-stats[b-5jrsxwafhu] {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .stat-item[b-5jrsxwafhu] {
        background: var(--surface-page);
        border-radius: 8px;
        padding: 1rem 1.5rem;
        text-align: center;
    }
    
    .stat-value[b-5jrsxwafhu] {
        display: block;
        font-size: 2rem;
        font-weight: bold;
        color: var(--color-primary);
    }
    
    .stat-label[b-5jrsxwafhu] {
        display: block;
        font-size: 0.85rem;
        color: var(--text-secondary);
        margin-top: 0.25rem;
    }
    
    .json-preview[b-5jrsxwafhu] {
        margin-bottom: 1.5rem;
    }
    
    .json-preview h3[b-5jrsxwafhu] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .json-preview textarea[b-5jrsxwafhu] {
        width: 100%;
        height: 300px;
        background: var(--surface-page);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-secondary);
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 0.75rem;
        padding: 1rem;
        resize: vertical;
    }
    
    .bitmap-info[b-5jrsxwafhu] {
        background: var(--surface-page);
        border-radius: 4px;
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .bitmap-info h3[b-5jrsxwafhu] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .bitmap-info ul[b-5jrsxwafhu] {
        margin: 0.5rem 0;
        padding-left: 1.5rem;
        color: var(--text-body);
    }
/* /Components/Pages/Admin/QHSettingsImport.razor.rz.scp.css */
.stat-card[b-9st6egwtpb] {
        border: 1px solid var(--border-default);
    }
    
    .sticky-top[b-9st6egwtpb] {
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .card[b-9st6egwtpb] {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    .card-header[b-9st6egwtpb] {
        font-weight: 600;
    }
/* /Components/Pages/Admin/QHVerwaltung.razor.rz.scp.css */
/* Only page-specific additions not covered by app.css */
    .qh-status-border[b-2fau29pkz8] { border-left: 4px solid transparent; }
    .qh-status-border.qh-ok[b-2fau29pkz8] { border-left-color: var(--success-color); }
    .qh-status-border.qh-warn[b-2fau29pkz8] { border-left-color: var(--warning-color); }
    .qh-status-border.qh-crit[b-2fau29pkz8] { border-left-color: var(--danger-color); }
    .qh-status-border.qh-none[b-2fau29pkz8] { border-left-color: var(--secondary-color); }
    .qh-num[b-2fau29pkz8] { text-align: right; font-variant-numeric: tabular-nums; }
    .qh-mono[b-2fau29pkz8] { font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: 0.85rem; }
    .qh-filter-bar[b-2fau29pkz8] { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
    .qh-filter-bar .search-box[b-2fau29pkz8] { flex: 1; min-width: 200px; max-width: 350px; margin-bottom: 0; }
    .qh-filter-bar .form-group[b-2fau29pkz8] { margin-bottom: 0; }
    .qh-filter-bar select[b-2fau29pkz8] { min-width: 140px; max-width: 200px; }
    .qh-legend[b-2fau29pkz8] { display: flex; gap: 0.75rem; font-size: 0.8rem; margin-left: auto; }
    .qh-legend span[b-2fau29pkz8] { display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
    .qh-gap-panel[b-2fau29pkz8] { margin-top: 1rem; }
    .qh-gap-list[b-2fau29pkz8] { display: flex; flex-wrap: wrap; gap: 0.3rem; max-height: 200px; overflow-y: auto; padding: 0.5rem 0; }
    .table th.sortable[b-2fau29pkz8] { cursor: pointer; user-select: none; }
    .table th.sortable:hover[b-2fau29pkz8] { color: var(--text-primary); }
    .dl-progress[b-2fau29pkz8] { margin-top: 1rem; }
    .dl-progress .dl-log[b-2fau29pkz8] { max-height: 400px; overflow-y: auto; font-family: monospace; font-size: 0.8rem; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 0.75rem; scroll-behavior: smooth; }
    .dl-progress .dl-log-line[b-2fau29pkz8] { padding: 0.1rem 0; border-bottom: 1px solid rgba(0,0,0,0.02); }
    .dl-progress .dl-log-line.ok[b-2fau29pkz8] { color: var(--success-color); }
    .dl-progress .dl-log-line.err[b-2fau29pkz8] { color: var(--danger-color); }
    .dl-progress .dl-log-line.info[b-2fau29pkz8] { color: var(--text-secondary); }
    .dl-stats[b-2fau29pkz8] { display: flex; gap: 1.5rem; margin: 0.75rem 0; font-size: 0.85rem; }
    .dl-stats .stat-val[b-2fau29pkz8] { font-weight: 600; }
/* /Components/Pages/Admin/SteuerungenImport.razor.rz.scp.css */
.import-page[b-4w6ibg89ws] { padding: 1.5rem; }
    .page-header h2[b-4w6ibg89ws] { margin: 0; }
    .page-header .subtitle[b-4w6ibg89ws] { color: var(--text-secondary); margin: 0.25rem 0 1.5rem 0; }
/* /Components/Pages/Admin/StoerungsheaderImport.razor.rz.scp.css */
.preview-row td[b-5i5n51gind] { padding: 0.25rem 0.75rem !important; background: var(--surface-sunken); }
    .preview-container[b-5i5n51gind] { padding: 0.25rem 0; }
    .preview-tags[b-5i5n51gind] { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.25rem; }
    .preview-tag[b-5i5n51gind] { 
        display: inline-block; 
        padding: 0.15rem 0.5rem; 
        background: var(--border-default); 
        border-radius: 4px; 
        font-size: 0.75rem; 
        white-space: nowrap;
    }
    .preview-tag strong[b-5i5n51gind] { color: var(--gray-600); margin-right: 0.25rem; }
    .preview-tag.more[b-5i5n51gind] { background: var(--border-default); font-style: italic; }
/* /Components/Pages/Admin/TemplateLibraryTab.razor.rz.scp.css */
.template-item:hover[b-e0gc7ucxbe] {
        background-color: var(--border-default);
    }
/* /Components/Pages/Admin/VisuImport.razor.rz.scp.css */
.subtitle[b-o5l7mi9afm] { color: var(--text-secondary); margin-bottom: 1.5rem; }
    
    .heizung-selector[b-o5l7mi9afm] {
        background: var(--surface-sunken);
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .heizung-selector label[b-o5l7mi9afm] { margin: 0; }
    .heizung-selector .search-row[b-o5l7mi9afm] {
        display: flex;
        gap: 0.5rem;
        flex: 1;
    }
    
    .options-grid[b-o5l7mi9afm] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .option-card[b-o5l7mi9afm] {
        background: var(--surface-card);
        border: 2px solid var(--border-default);
        border-radius: 8px;
        padding: 1rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    .option-card:hover[b-o5l7mi9afm] {
        border-color: var(--color-primary);
        box-shadow: 0 2px 8px rgba(0,123,255,0.15);
    }
    .option-card.selected[b-o5l7mi9afm] {
        border-color: var(--color-primary);
        background: #e7f1ff;
    }
    .option-card.recommended[b-o5l7mi9afm] {
        border-color: var(--color-warning);
        background: #fffbeb;
    }
    .option-card.recommended.selected[b-o5l7mi9afm] {
        border-color: var(--color-primary);
        background: #e7f1ff;
    }
    
    .option-header[b-o5l7mi9afm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .option-number[b-o5l7mi9afm] {
        width: 24px;
        height: 24px;
        background: var(--text-secondary);
        color: var(--surface-card);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: bold;
    }
    .option-card.selected .option-number[b-o5l7mi9afm] {
        background: var(--color-primary);
    }
    .option-icon[b-o5l7mi9afm] {
        font-size: 1.25rem;
    }
    .option-header h3[b-o5l7mi9afm] {
        margin: 0;
        font-size: 1rem;
        flex: 1;
    }
    .option-card p[b-o5l7mi9afm] {
        margin: 0;
        font-size: 0.85rem;
        color: var(--text-secondary);
    }
    
    .badge-recommended[b-o5l7mi9afm] {
        background: var(--color-warning);
        color: #000;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-size: 0.7rem;
    }
    
    .option-content-panel[b-o5l7mi9afm] {
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: 8px;
        padding: 1.5rem;
        margin-top: 1rem;
    }
    .option-content-panel h3[b-o5l7mi9afm] {
        margin-top: 0;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-default);
    }
    
    .form-group[b-o5l7mi9afm] { margin-bottom: 1rem; }
    .form-group label[b-o5l7mi9afm] { display: block; margin-bottom: 0.25rem; }
    .form-text[b-o5l7mi9afm] { color: var(--text-secondary); font-size: 0.85rem; }
    .info[b-o5l7mi9afm] { color: var(--text-secondary); margin-bottom: 1rem; }
    
    .file-loaded[b-o5l7mi9afm] {
        color: var(--color-success);
        margin: 0.5rem 0;
        font-weight: 500;
    }
    
    .bitmap-list[b-o5l7mi9afm] {
        border: 1px solid var(--border-default);
        border-radius: 4px;
        margin: 0.5rem 0;
        max-height: 200px;
        overflow-y: auto;
    }
    .bitmap-item[b-o5l7mi9afm] {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-default);
        cursor: pointer;
    }
    .bitmap-item:last-child[b-o5l7mi9afm] { border-bottom: none; }
    .bitmap-item:hover[b-o5l7mi9afm] { background: var(--surface-sunken); }
    .bitmap-item.selected[b-o5l7mi9afm] { background: #e3f2fd; }
    .bitmap-order[b-o5l7mi9afm] {
        width: 24px;
        height: 24px;
        background: var(--color-primary);
        color: var(--surface-card);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        margin-right: 0.75rem;
    }
    .bitmap-name[b-o5l7mi9afm] { flex: 1; }
    .bitmap-size[b-o5l7mi9afm] { color: var(--text-secondary); font-size: 0.85rem; margin-right: 0.5rem; }
    .btn-remove[b-o5l7mi9afm] {
        background: none;
        border: none;
        color: var(--color-danger);
        font-size: 1.2rem;
        cursor: pointer;
        padding: 0 0.25rem;
    }
    .bitmap-actions[b-o5l7mi9afm] {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .action-bar[b-o5l7mi9afm] {
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border-default);
    }
    
    .import-result[b-o5l7mi9afm] {
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 8px;
    }
    .import-result.success[b-o5l7mi9afm] {
        background: var(--color-success-light);
        border: 1px solid #c3e6cb;
    }
    .import-result h4[b-o5l7mi9afm] { margin-top: 0; }
    .import-actions[b-o5l7mi9afm] {
        display: flex;
        gap: 0.75rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(0,0,0,0.1);
        flex-wrap: wrap;
    }
    .import-actions .btn[b-o5l7mi9afm] {
        min-width: 160px;
    }
    
    .template-grid[b-o5l7mi9afm] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1rem;
    }
    .template-card[b-o5l7mi9afm] {
        border: 1px solid var(--border-default);
        border-radius: 8px;
        padding: 1rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
    }
    .template-card:hover[b-o5l7mi9afm] {
        border-color: var(--color-primary);
        background: var(--surface-sunken);
    }
    .template-card.selected[b-o5l7mi9afm] {
        border-color: var(--color-primary);
        background: #e7f1ff;
    }
    .template-icon[b-o5l7mi9afm] {
        font-size: 2rem;
        display: block;
        margin-bottom: 0.5rem;
    }
    .template-card strong[b-o5l7mi9afm] { display: block; }
    .template-card small[b-o5l7mi9afm] { color: var(--text-secondary); }
    
    .naming-convention[b-o5l7mi9afm] {
        background: var(--surface-sunken);
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    .naming-convention h4[b-o5l7mi9afm] { margin-top: 0; }
    .naming-convention code[b-o5l7mi9afm] {
        background: var(--border-default);
        padding: 0.1rem 0.3rem;
        border-radius: 3px;
    }
    .examples ul[b-o5l7mi9afm] { margin-bottom: 0.5rem; }
    
    .batch-preview[b-o5l7mi9afm] { margin: 1rem 0; }
    .batch-results[b-o5l7mi9afm] { margin-top: 1rem; }
    .batch-summary[b-o5l7mi9afm] {
        padding: 0.5rem;
        background: var(--surface-sunken);
        border-radius: 4px;
        margin-top: 0.5rem;
    }
    
    .alert[b-o5l7mi9afm] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
    }
    .btn-close[b-o5l7mi9afm] {
        background: none;
        border: none;
        font-size: 1.2rem;
        cursor: pointer;
        opacity: 0.5;
    }
    .btn-close:hover[b-o5l7mi9afm] { opacity: 1; }
    
    /* Option 3 Enhanced Styles */
    .import-step[b-o5l7mi9afm] {
        background: var(--surface-sunken);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .import-step h4[b-o5l7mi9afm] {
        margin: 0 0 0.75rem 0;
        font-size: 1rem;
        color: var(--gray-600);
    }
    
    /* Bitmap Preview Grid */
    .bitmap-preview-grid[b-o5l7mi9afm] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }
    .bitmap-preview-card[b-o5l7mi9afm] {
        background: white;
        border: 2px solid var(--border-default);
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.2s;
    }
    .bitmap-preview-card:hover[b-o5l7mi9afm] {
        border-color: var(--color-primary);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .bitmap-preview-card.selected[b-o5l7mi9afm] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
    }
    .preview-header[b-o5l7mi9afm] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.25rem 0.5rem;
        background: var(--surface-sunken);
    }
    .page-number[b-o5l7mi9afm] {
        background: var(--color-primary);
        color: var(--surface-card);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: bold;
    }
    .btn-remove-small[b-o5l7mi9afm] {
        background: none;
        border: none;
        color: var(--color-danger);
        font-size: 1rem;
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }
    .preview-image[b-o5l7mi9afm] {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--border-default);
        overflow: hidden;
    }
    .preview-image img[b-o5l7mi9afm] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .preview-info[b-o5l7mi9afm] {
        padding: 0.5rem;
        font-size: 0.75rem;
        border-top: 1px solid var(--border-default);
    }
    .preview-info .filename[b-o5l7mi9afm] {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
    }
    .preview-info .filesize[b-o5l7mi9afm] {
        color: var(--text-secondary);
    }
    
    .bitmap-count[b-o5l7mi9afm] {
        margin-left: auto;
        color: var(--text-secondary);
        font-size: 0.9rem;
    }
    
    /* Scaling Option */
    .scaling-option[b-o5l7mi9afm] {
        margin-top: 1rem;
        padding: 0.75rem 1rem;
        background: linear-gradient(135deg, var(--surface-sunken) 0%, var(--border-default) 100%);
        border-radius: 8px;
        border: 1px solid var(--border-default);
    }
    
    .scaling-option label[b-o5l7mi9afm] {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--gray-600);
    }
    
    .scale-selector[b-o5l7mi9afm] {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
    
    .scale-selector select[b-o5l7mi9afm] {
        border: 2px solid var(--color-primary);
        border-radius: 6px;
        font-weight: 500;
    }
    
    .scale-selector .form-text[b-o5l7mi9afm] {
        color: var(--text-secondary);
        font-size: 0.85rem;
    }
    
    /* Legacy Preview */
    .legacy-preview[b-o5l7mi9afm] {
        background: white;
        border: 1px solid var(--border-default);
        border-radius: 8px;
        padding: 1rem;
        margin-top: 0.75rem;
    }
    .preview-section[b-o5l7mi9afm] {
        margin-bottom: 1rem;
    }
    .preview-section:last-child[b-o5l7mi9afm] {
        margin-bottom: 0;
    }
    .preview-section h5[b-o5l7mi9afm] {
        margin: 0 0 0.5rem 0;
        font-size: 0.9rem;
        color: var(--gray-600);
        padding-bottom: 0.25rem;
        border-bottom: 1px solid var(--border-default);
    }
    
    .preview-stats[b-o5l7mi9afm] {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
    }
    .stat-item[b-o5l7mi9afm] {
        text-align: center;
    }
    .stat-value[b-o5l7mi9afm] {
        display: block;
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--color-primary);
    }
    .stat-label[b-o5l7mi9afm] {
        font-size: 0.8rem;
        color: var(--text-secondary);
    }
    
    /* VCO Table */
    .vco-table-container[b-o5l7mi9afm] {
        max-height: 250px;
        overflow-y: auto;
        border: 1px solid var(--border-default);
        border-radius: 4px;
    }
    .vco-table[b-o5l7mi9afm] {
        margin: 0;
        font-size: 0.85rem;
    }
    .vco-table th[b-o5l7mi9afm] {
        position: sticky;
        top: 0;
        background: var(--surface-sunken);
        z-index: 1;
    }
    .vco-table code[b-o5l7mi9afm] {
        background: var(--border-default);
        padding: 0.1rem 0.3rem;
        border-radius: 3px;
        font-size: 0.8rem;
    }
    
    /* Drop Items Preview */
    .drop-items-preview[b-o5l7mi9afm] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    .drop-item-preview[b-o5l7mi9afm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0.5rem;
        background: var(--surface-sunken);
        border-radius: 4px;
        font-size: 0.85rem;
    }
    .drop-page[b-o5l7mi9afm] {
        background: var(--text-secondary);
        color: var(--surface-card);
        padding: 0.1rem 0.4rem;
        border-radius: 3px;
        font-size: 0.75rem;
    }
    .drop-pos[b-o5l7mi9afm] {
        color: var(--text-secondary);
        font-family: monospace;
        font-size: 0.8rem;
    }
    .drop-label[b-o5l7mi9afm] {
        flex: 1;
    }
    .drop-tooltip[b-o5l7mi9afm] {
        cursor: help;
    }
    
    .more-items[b-o5l7mi9afm] {
        text-align: center;
        color: var(--text-secondary);
        font-style: italic;
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    
    /* Import Summary */
    .import-summary[b-o5l7mi9afm] {
        background: white;
        border: 1px solid var(--border-default);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .import-summary p[b-o5l7mi9afm] {
        margin: 0 0 0.5rem 0;
    }
    .import-summary ul[b-o5l7mi9afm] {
        margin: 0;
        padding-left: 1.5rem;
    }
    .import-summary li[b-o5l7mi9afm] {
        margin-bottom: 0.25rem;
    }
    
    /* Server Bitmap Status (Option 11) */
    .server-bitmaps-preview[b-o5l7mi9afm] {
        background: var(--surface-sunken);
        border: 1px solid var(--border-default);
        border-radius: 8px;
        padding: 1rem;
    }
    .bitmap-status-list[b-o5l7mi9afm] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        max-height: 300px;
        overflow-y: auto;
    }
    .bitmap-status-item[b-o5l7mi9afm] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        background: white;
        border-radius: 4px;
        border: 1px solid var(--border-default);
    }
    .bitmap-status-item.found[b-o5l7mi9afm] {
        border-color: var(--color-success);
        background: #f0fff4;
    }
    .bitmap-status-item.missing[b-o5l7mi9afm] {
        border-color: var(--color-danger);
        background: #fff5f5;
    }
    .bitmap-status-item .status-icon[b-o5l7mi9afm] {
        font-size: 1.1rem;
    }
    .bitmap-status-item .bitmap-filename[b-o5l7mi9afm] {
        font-family: monospace;
        font-size: 0.85rem;
        font-weight: 500;
    }
    .bitmap-status-item .bitmap-desc[b-o5l7mi9afm] {
        flex: 1;
        color: var(--text-secondary);
        font-size: 0.85rem;
    }
    .bitmap-status-item .missing-hint[b-o5l7mi9afm] {
        color: var(--color-danger);
        font-size: 0.8rem;
        font-style: italic;
    }
    
    /* Mass Import (Option 12) */
    .mass-import-summary[b-o5l7mi9afm] {
        background: var(--surface-sunken);
        border-radius: 8px;
        padding: 1rem;
    }
    .summary-stats[b-o5l7mi9afm] {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .stat-box[b-o5l7mi9afm] {
        padding: 0.75rem 1.25rem;
        border-radius: 6px;
        text-align: center;
        min-width: 100px;
    }
    .stat-box.ready[b-o5l7mi9afm] { background: var(--color-success-light); border: 1px solid var(--color-success); }
    .stat-box.skip[b-o5l7mi9afm] { background: #e2e3e5; border: 1px solid var(--text-secondary); }
    .stat-box.warning[b-o5l7mi9afm] { background: #fff3cd; border: 1px solid var(--color-warning); }
    .stat-box.total[b-o5l7mi9afm] { background: #cce5ff; border: 1px solid var(--color-primary); }
    .stat-box .stat-value[b-o5l7mi9afm] {
        display: block;
        font-size: 1.5rem;
        font-weight: bold;
    }
    .stat-box .stat-label[b-o5l7mi9afm] {
        font-size: 0.8rem;
        color: var(--text-secondary);
    }
    
    .mass-import-table-container[b-o5l7mi9afm] {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid var(--border-default);
        border-radius: 8px;
    }
    .mass-import-table[b-o5l7mi9afm] {
        margin: 0;
        font-size: 0.85rem;
    }
    .mass-import-table thead th[b-o5l7mi9afm] {
        position: sticky;
        top: 0;
        background: var(--surface-sunken);
        z-index: 1;
    }
    .mass-import-table tr.ready[b-o5l7mi9afm] { background-color: #f0fff4; }
    .mass-import-table tr.skip[b-o5l7mi9afm] { background-color: var(--surface-sunken); color: var(--text-secondary); }
    .mass-import-table tr.warning[b-o5l7mi9afm] { background-color: #fffbeb; }
    
    .mass-import-results[b-o5l7mi9afm], .deploy-results[b-o5l7mi9afm] {
        background: var(--surface-sunken);
        border-radius: 8px;
        padding: 1rem;
    }
    .results-list[b-o5l7mi9afm] {
        max-height: 300px;
        overflow-y: auto;
    }
    .result-item[b-o5l7mi9afm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0.6rem;
        border-radius: 4px;
        margin-bottom: 0.25rem;
        font-size: 0.85rem;
    }
    .result-item.success[b-o5l7mi9afm] { background: var(--color-success-light); }
    .result-item.error[b-o5l7mi9afm] { background: var(--color-danger-light); }
    .result-item .result-icon[b-o5l7mi9afm] { font-size: 1rem; }
    .result-item .result-name[b-o5l7mi9afm] { font-weight: 500; min-width: 150px; }
    .result-item .result-message[b-o5l7mi9afm] { color: var(--text-secondary); flex: 1; }
    
    /* Mass Deploy Section */
    .mass-deploy-section[b-o5l7mi9afm] {
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        border: 1px solid #90caf9;
        border-radius: 8px;
        padding: 1.5rem;
    }
    .mass-deploy-section h5[b-o5l7mi9afm] {
        margin-top: 0;
        color: #1565c0;
    }
/* /Components/Pages/Error.razor.rz.scp.css */
.error-page[b-x5itedgjks] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 60vh;
        padding: 2rem;
    }
    
    .error-card[b-x5itedgjks] {
        text-align: center;
        max-width: 500px;
        background: rgba(20, 20, 35, 0.95);
        border: 1px solid var(--border-default);
        border-radius: 16px;
        padding: 3rem;
    }
    
    .error-icon[b-x5itedgjks] {
        font-size: 4rem;
        margin-bottom: 1rem;
    }
    
    .error-card h1[b-x5itedgjks] {
        color: var(--text-primary);
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .error-text[b-x5itedgjks] {
        color: var(--text-secondary);
        margin-bottom: 2rem;
    }
/* /Components/Pages/Heizungen/AnleitungTab.razor.rz.scp.css */
.anleitung-container[b-w78tz4oc0x] {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .pdf-object[b-w78tz4oc0x] {
        flex: 1;
        width: 100%;
        height: 100%;
        border: none;
        background: var(--surface-card);
    }
    
    .tab-placeholder[b-w78tz4oc0x] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        padding: 2rem;
        text-align: center;
        color: var(--text-body);
    }

    .placeholder-icon[b-w78tz4oc0x] {
        font-size: 4rem;
        margin-bottom: 1rem;
    }

    .tab-placeholder h2[b-w78tz4oc0x] {
        color: var(--color-primary);
        margin: 0 0 0.5rem 0;
        font-size: 1.5rem;
    }

    .tab-placeholder p[b-w78tz4oc0x] {
        color: var(--text-secondary);
        margin: 0 0 2rem 0;
    }

    .placeholder-info[b-w78tz4oc0x] {
        background: var(--surface-sunken);
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        padding: 1rem 1.5rem;
        margin-bottom: 1.5rem;
        min-width: 300px;
    }

    .info-item[b-w78tz4oc0x] {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border-strong);
    }

    .info-item:last-child[b-w78tz4oc0x] {
        border-bottom: none;
    }

    .info-label[b-w78tz4oc0x] {
        color: var(--text-secondary);
    }

    .info-value[b-w78tz4oc0x] {
        color: var(--color-primary);
        font-family: monospace;
    }

    .placeholder-status[b-w78tz4oc0x] {
        margin-bottom: 2rem;
    }

    .status-badge[b-w78tz4oc0x] {
        background: rgba(245, 158, 11, 0.2);
        color: var(--color-warning);
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
    }
/* /Components/Pages/Heizungen/BetriebsParamsTab.razor.rz.scp.css */
/* ══════════════════════════════════════════════════
       BetriebsParamsTab — Light Theme (EKH Brand)
       ══════════════════════════════════════════════════ */

    .bp-tab[b-kyzplvouo0] {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: var(--surface-card);
        color: var(--text-body);
        overflow: hidden;
    }

    .bp-placeholder[b-kyzplvouo0] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: 0.75rem;
        color: var(--text-secondary);
    }

    .bp-placeholder-icon[b-kyzplvouo0] { font-size: 3rem; opacity: 0.5; }
    .bp-placeholder h2[b-kyzplvouo0] { margin: 0; font-size: 1.2rem; color: var(--text-muted); }
    .bp-placeholder p[b-kyzplvouo0] { margin: 0; font-size: 0.9rem; }

    .bp-spinner[b-kyzplvouo0] {
        width: 32px; height: 32px;
        border: 3px solid var(--border-strong);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: bp-spin-b-kyzplvouo0 1s linear infinite;
    }

    @keyframes bp-spin-b-kyzplvouo0 { to { transform: rotate(360deg); } }

    /* ──── Toolbar ──── */
    .bp-toolbar[b-kyzplvouo0] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        background: var(--surface-sunken);
        border-bottom: 1px solid var(--border-strong);
        flex-shrink: 0;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .bp-toolbar-left[b-kyzplvouo0], .bp-toolbar-right[b-kyzplvouo0] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .bp-mode-switch[b-kyzplvouo0] {
        display: flex;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: 6px;
        overflow: hidden;
    }

    .bp-mode-btn[b-kyzplvouo0] {
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
        font-weight: 500;
        background: transparent;
        color: var(--text-secondary);
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: inherit;
        white-space: nowrap;
    }

    .bp-mode-btn:not(:last-child)[b-kyzplvouo0] {
        border-right: 1px solid var(--border-strong);
    }

    .bp-mode-btn:hover:not([disabled])[b-kyzplvouo0] {
        color: var(--text-muted);
        background: rgba(0,0,0,0.02);
    }

    .bp-mode-btn.active[b-kyzplvouo0] {
        color: var(--color-primary);
        background: rgba(30, 148, 188, 0.1);
    }

    .bp-mode-btn[disabled][b-kyzplvouo0] {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .bp-select-wrap[b-kyzplvouo0] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .bp-label[b-kyzplvouo0] {
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-secondary);
        font-weight: 600;
    }

    .bp-select[b-kyzplvouo0] {
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        color: var(--text-body);
        padding: 0.45rem 0.65rem;
        border-radius: 4px;
        font-size: 1rem;
        font-family: 'Consolas', 'Monaco', monospace;
        min-width: 180px;
        cursor: pointer;
    }

    .bp-select:focus[b-kyzplvouo0] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 1px rgba(30, 148, 188, 0.3);
    }

    .bp-vs[b-kyzplvouo0] {
        font-size: 0.85rem;
        color: var(--color-primary);
        font-weight: 700;
    }

    .bp-snap-count[b-kyzplvouo0] {
        font-size: 0.85rem;
        color: var(--text-body);
    }

    .bp-diff-badge[b-kyzplvouo0] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.85rem;
        color: var(--color-warning);
        background: rgba(245, 158, 11, 0.1);
        border: 1px solid rgba(245, 158, 11, 0.2);
        padding: 0.2rem 0.6rem;
        border-radius: 12px;
    }

    .bp-diff-badge-info[b-kyzplvouo0] {
        color: var(--color-primary);
        background: rgba(30, 148, 188, 0.08);
        border-color: rgba(30, 148, 188, 0.2);
    }

    .bp-badge-dot[b-kyzplvouo0] {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--color-warning);
    }

    /* Search */
    .bp-search-wrap[b-kyzplvouo0] {
        display: flex;
        align-items: center;
        background: var(--surface-hover);
        border: 1px solid var(--color-primary);
        border-radius: 4px;
        padding: 0 0.6rem;
        gap: 0.4rem;
        transition: all 0.2s;
        box-shadow: 0 0 4px rgba(30, 148, 188, 0.15);
    }

    .bp-search-wrap:focus-within[b-kyzplvouo0] {
        border-color: var(--color-primary);
        box-shadow: 0 0 10px rgba(30, 148, 188, 0.3);
    }

    .bp-search-icon[b-kyzplvouo0] {
        font-size: 0.9rem;
        opacity: 0.7;
    }

    .bp-search-input[b-kyzplvouo0] {
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: 0.95rem;
        font-family: inherit;
        padding: 0.45rem 0;
        outline: none;
        width: 170px;
    }

    .bp-search-input[b-kyzplvouo0]::placeholder {
        color: var(--text-secondary);
    }

    .bp-search-count[b-kyzplvouo0] {
        font-size: 0.82rem;
        color: var(--color-primary);
        font-weight: 600;
        white-space: nowrap;
    }

    .bp-search-clear[b-kyzplvouo0] {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: var(--color-danger);
        cursor: pointer;
        font-size: 0.8rem;
        padding: 0.15rem 0.35rem;
        line-height: 1;
        font-family: inherit;
        border-radius: 3px;
        transition: all 0.15s;
    }

    .bp-search-clear:hover[b-kyzplvouo0] {
        background: rgba(239, 68, 68, 0.3);
        color: var(--text-primary);
    }

    .bp-search-hit[b-kyzplvouo0] {
        background: rgba(30, 148, 188, 0.06) !important;
    }

    .bp-search-faded[b-kyzplvouo0] {
        opacity: 0.2;
        transition: opacity 0.15s ease;
    }

    .bp-search-faded:hover[b-kyzplvouo0] {
        opacity: 0.5;
    }

    .bp-highlight[b-kyzplvouo0] {
        background: rgba(30, 148, 188, 0.35);
        color: var(--text-primary);
        border-radius: 2px;
        padding: 0 2px;
    }

    /* Buttons */
    .bp-btn[b-kyzplvouo0] {
        padding: 0.45rem 1rem;
        font-size: 0.92rem;
        font-weight: 500;
        border-radius: 4px;
        border: 1px solid var(--color-primary);
        background: rgba(30, 148, 188, 0.08);
        color: var(--color-primary);
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
        font-family: inherit;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

    .bp-btn:hover[b-kyzplvouo0] {
        background: rgba(30, 148, 188, 0.2);
        box-shadow: 0 0 8px rgba(30, 148, 188, 0.2);
    }

    .bp-btn-download[b-kyzplvouo0] {
        border-color: var(--color-primary);
        color: var(--color-primary);
        background: rgba(0, 255, 136, 0.08);
    }

    .bp-btn-download:hover[b-kyzplvouo0] {
        background: rgba(0, 255, 136, 0.2);
        box-shadow: 0 0 8px rgba(0, 255, 136, 0.25);
    }

    /* Content area */
    .bp-content-area[b-kyzplvouo0] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }

    /* ──── Single View ──── */
    .bp-single-view[b-kyzplvouo0] {
        flex: 1;
        overflow-y: auto;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 1.05rem;
        line-height: 1.75;
    }

    .bp-single-row[b-kyzplvouo0] {
        display: flex;
        padding: 0 1rem;
    }

    .bp-single-row:hover[b-kyzplvouo0] { background: rgba(0,0,0,0.02); }

    .bp-ln[b-kyzplvouo0] {
        min-width: 44px;
        text-align: right;
        padding-right: 0.75rem;
        color: var(--text-secondary);
        user-select: none;
        border-right: 1px solid var(--border-default);
        margin-right: 0.75rem;
        flex-shrink: 0;
    }

    .bp-code[b-kyzplvouo0] { white-space: pre; flex: 1; }

    .bp-row-header[b-kyzplvouo0] { background: rgba(30, 148, 188, 0.06); }
    .bp-row-header .bp-code[b-kyzplvouo0] { color: var(--color-primary); font-weight: 600; }
    .bp-row-section[b-kyzplvouo0] { background: rgba(0, 255, 136, 0.04); }
    .bp-row-section .bp-code[b-kyzplvouo0] { color: var(--color-primary); font-weight: 600; }

    /* ──── Diff View ──── */
    .bp-diff-legend[b-kyzplvouo0] {
        display: flex;
        gap: 1.25rem;
        align-items: center;
        padding: 0.4rem 1rem;
        background: var(--surface-hover);
        border-bottom: 1px solid var(--border-default);
        flex-shrink: 0;
    }

    .bp-filter-toggle[b-kyzplvouo0] {
        margin-left: auto;
        font-size: 0.85rem;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 0.35rem;
        cursor: pointer;
    }

    .bp-filter-toggle input[b-kyzplvouo0] { cursor: pointer; accent-color: var(--color-primary); }

    .bp-legend-item[b-kyzplvouo0] {
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .bp-legend-item[b-kyzplvouo0]::before {
        content: '';
        display: inline-block;
        width: 10px; height: 10px;
        border-radius: 2px;
    }

    .bp-legend-removed[b-kyzplvouo0]::before { background: rgba(239,68,68,0.4); }
    .bp-legend-removed[b-kyzplvouo0] { color: var(--color-danger); }
    .bp-legend-changed[b-kyzplvouo0]::before { background: rgba(245,158,11,0.4); }
    .bp-legend-changed[b-kyzplvouo0] { color: var(--color-warning); }
    .bp-legend-added[b-kyzplvouo0]::before { background: rgba(34,197,94,0.4); }
    .bp-legend-added[b-kyzplvouo0] { color: var(--color-success); }

    .bp-diff-container[b-kyzplvouo0] {
        flex: 1;
        display: flex;
        overflow: hidden;
        min-height: 0;
    }

    .bp-diff-pane[b-kyzplvouo0] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-width: 0;
    }

    .bp-diff-pane:first-child[b-kyzplvouo0] { border-right: 2px solid var(--border-strong); }

    .bp-diff-pane-header[b-kyzplvouo0] {
        padding: 0.35rem 0.75rem;
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-secondary);
        background: var(--surface-hover);
        border-bottom: 1px solid var(--border-default);
        flex-shrink: 0;
    }

    .bp-diff-scroll[b-kyzplvouo0] {
        flex: 1;
        overflow-y: auto;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 1rem;
        line-height: 1.7;
    }

    .bp-diff-row[b-kyzplvouo0] {
        display: flex;
        padding: 0 0.75rem;
        min-height: 1.55em;
    }

    .bp-diff-row:hover[b-kyzplvouo0] { filter: brightness(1.15); }
    .bp-diff-row .bp-ln[b-kyzplvouo0] { min-width: 42px; font-size: 0.92rem; }
    .bp-diff-row .bp-code[b-kyzplvouo0] { font-size: 1rem; }

    .bp-row-old[b-kyzplvouo0] { background: rgba(245,158,11,0.08); }
    .bp-row-old .bp-code[b-kyzplvouo0] { color: var(--color-primary); }
    .bp-row-new[b-kyzplvouo0] { background: rgba(245,158,11,0.08); }
    .bp-row-new .bp-code[b-kyzplvouo0] { color: var(--color-primary); }
    .bp-row-removed[b-kyzplvouo0] { background: rgba(239,68,68,0.1); }
    .bp-row-removed .bp-code[b-kyzplvouo0] { color: var(--color-danger); text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.4); }
    .bp-row-added[b-kyzplvouo0] { background: rgba(34,197,94,0.08); }
    .bp-row-added .bp-code[b-kyzplvouo0] { color: var(--color-success); }

    /* ──── Timeline View ──── */
    .bp-timeline-scroll[b-kyzplvouo0] {
        flex: 1;
        overflow-y: auto;
        padding: 1.25rem 1.5rem;
    }

    .bp-tl-entry[b-kyzplvouo0] {
        display: flex;
        gap: 1rem;
    }

    /* Rail: dot + vertical line */
    .bp-tl-rail[b-kyzplvouo0] {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20px;
        flex-shrink: 0;
    }

    .bp-tl-dot[b-kyzplvouo0] {
        width: 14px; height: 14px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: 4px;
        border: 2px solid;
    }

    .bp-dot-ok[b-kyzplvouo0] {
        background: transparent;
        border-color: var(--color-success);
        box-shadow: 0 0 6px rgba(34,197,94,0.3);
    }

    .bp-dot-warn[b-kyzplvouo0] {
        background: var(--color-warning);
        border-color: var(--color-warning);
        box-shadow: 0 0 8px rgba(245,158,11,0.4);
    }

    .bp-dot-alert[b-kyzplvouo0] {
        background: var(--color-danger);
        border-color: var(--color-danger);
        box-shadow: 0 0 8px rgba(239,68,68,0.4);
    }

    .bp-tl-line[b-kyzplvouo0] {
        width: 2px;
        flex: 1;
        background: var(--border-strong);
        min-height: 12px;
    }

    /* Content */
    .bp-tl-content[b-kyzplvouo0] {
        flex: 1;
        margin-bottom: 0.5rem;
        min-width: 0;
    }

    .bp-tl-header[b-kyzplvouo0] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background: var(--surface-sunken);
        border: 1px solid var(--border-strong);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .bp-tl-header:hover[b-kyzplvouo0] {
        background: var(--surface-hover);
        border-color: var(--text-secondary);
    }

    .bp-tl-date[b-kyzplvouo0] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .bp-tl-date-main[b-kyzplvouo0] {
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-body);
    }

    .bp-tl-change-count[b-kyzplvouo0] {
        font-size: 0.95rem;
        color: var(--color-warning);
        background: rgba(245,158,11,0.1);
        padding: 0.15rem 0.5rem;
        border-radius: 10px;
        border: 1px solid rgba(245,158,11,0.2);
    }

    .bp-tl-no-change[b-kyzplvouo0] {
        font-size: 0.95rem;
        color: var(--color-success);
        opacity: 0.6;
    }

    .bp-tl-expand[b-kyzplvouo0] {
        color: var(--text-secondary);
        font-size: 0.85rem;
        transition: color 0.15s;
    }

    .bp-tl-header:hover .bp-tl-expand[b-kyzplvouo0] { color: var(--text-muted); }

    /* Expanded changes */
    .bp-tl-changes[b-kyzplvouo0] {
        margin-top: 0.4rem;
        border: 1px solid var(--border-default);
        border-radius: 6px;
        overflow: hidden;
        background: var(--surface-hover);
    }

    .bp-tl-change-item[b-kyzplvouo0] {
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--surface-hover);
    }

    .bp-tl-change-item:last-child[b-kyzplvouo0] { border-bottom: none; }

    .bp-tl-change-line[b-kyzplvouo0] {
        font-size: 0.88rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
    }

    .bp-tl-change-old[b-kyzplvouo0], .bp-tl-change-new[b-kyzplvouo0] {
        display: flex;
        gap: 0.5rem;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 1.02rem;
        padding: 0.2rem 0;
    }

    .bp-tl-arrow[b-kyzplvouo0] {
        font-weight: 700;
        width: 14px;
        flex-shrink: 0;
        text-align: center;
    }

    .bp-tl-change-old .bp-tl-arrow[b-kyzplvouo0] { color: var(--color-danger); }
    .bp-tl-change-old .bp-tl-val[b-kyzplvouo0] { color: var(--color-danger); }
    .bp-tl-change-new .bp-tl-arrow[b-kyzplvouo0] { color: var(--color-success); }
    .bp-tl-change-new .bp-tl-val[b-kyzplvouo0] { color: var(--color-success); }

    .bp-tl-val[b-kyzplvouo0] {
        word-break: break-all;
        white-space: pre-wrap;
    }

    /* ──── Scrollbars ──── */
    .bp-single-view[b-kyzplvouo0]::-webkit-scrollbar,
    .bp-diff-scroll[b-kyzplvouo0]::-webkit-scrollbar,
    .bp-timeline-scroll[b-kyzplvouo0]::-webkit-scrollbar {
        width: 6px;
    }

    .bp-single-view[b-kyzplvouo0]::-webkit-scrollbar-track,
    .bp-diff-scroll[b-kyzplvouo0]::-webkit-scrollbar-track,
    .bp-timeline-scroll[b-kyzplvouo0]::-webkit-scrollbar-track {
        background: transparent;
    }

    .bp-single-view[b-kyzplvouo0]::-webkit-scrollbar-thumb,
    .bp-diff-scroll[b-kyzplvouo0]::-webkit-scrollbar-thumb,
    .bp-timeline-scroll[b-kyzplvouo0]::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: 3px;
    }

    .bp-single-view[b-kyzplvouo0]::-webkit-scrollbar-thumb:hover,
    .bp-diff-scroll[b-kyzplvouo0]::-webkit-scrollbar-thumb:hover,
    .bp-timeline-scroll[b-kyzplvouo0]::-webkit-scrollbar-thumb:hover {
        background: var(--text-secondary);
    }

    /* ── Responsive ── */
    @media (max-width: 1024px) {
        .bp-toolbar[b-kyzplvouo0] { padding: 0.4rem 0.75rem; gap: 0.5rem; }
        .bp-mode-btn[b-kyzplvouo0] { padding: 0.4rem 0.7rem; font-size: 0.88rem; }
        .bp-search-input[b-kyzplvouo0] { width: 130px; }
        .bp-select[b-kyzplvouo0] { min-width: 140px; font-size: 0.9rem; }
    }

    @media (max-width: 768px) {
        .bp-toolbar-left[b-kyzplvouo0], .bp-toolbar-right[b-kyzplvouo0] { flex-wrap: wrap; }
        .bp-search-input[b-kyzplvouo0] { width: 110px; }
        .bp-diff-container[b-kyzplvouo0] { flex-direction: column; }
        .bp-diff-pane:first-child[b-kyzplvouo0] { border-right: none; border-bottom: 2px solid var(--border-strong); }
        .bp-select[b-kyzplvouo0] { min-width: 120px; }
        .bp-single-view[b-kyzplvouo0], .bp-diff-scroll[b-kyzplvouo0] { font-size: 0.9rem; }
    }
/* /Components/Pages/Heizungen/DatenTab.razor.rz.scp.css */
.daten-tab[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: white;
        color: var(--text-body);
        position: relative;
        overflow: hidden;
    }
    
    .loading-overlay[b-2agv6jtole] {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: var(--surface-overlay);
        z-index: 100;
    }
    
    .loading-modal-overlay[b-2agv6jtole] {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
        backdrop-filter: blur(4px);
    }
    
    .loading-modal[b-2agv6jtole] {
        background: white;
        border: 1px solid #d0e8ef;
        border-radius: 16px;
        padding: 2.5rem 3rem;
        text-align: center;
        min-width: 360px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    }
    
    .loading-modal-icon[b-2agv6jtole] {
        display: flex;
        justify-content: center;
        margin-bottom: 1.5rem;
    }
    
    .loading-modal-icon .spinner[b-2agv6jtole] {
        width: 56px;
        height: 56px;
        border-width: 4px;
    }
    
    .loading-modal h3[b-2agv6jtole] {
        color: var(--color-primary);
        font-size: 1.05rem;
        font-weight: 600;
        margin: 0 0 0.8rem 0;
    }
    
    .loading-modal-progress[b-2agv6jtole] {
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--text-body);
        margin: 0.5rem 0;
    }
    
    .loading-modal-hint[b-2agv6jtole] {
        color: var(--text-secondary);
        font-size: 0.78rem;
        margin-top: 1.2rem;
        line-height: 1.5;
    }
    
    .spinner[b-2agv6jtole] {
        width: 50px; height: 50px;
        border: 4px solid rgba(0,0,0,0.08);
        border-left-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-2agv6jtole 1s linear infinite;
    }
    
    @keyframes spin-b-2agv6jtole { to { transform: rotate(360deg); } }
    
    /* Control Bar — removed, controls now in sidebar-left */
    
    .group-label[b-2agv6jtole] {
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-right: 0.4rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .btn-icon[b-2agv6jtole] { font-size: 0.9rem; }
    
    .date-navigation .date-input[b-2agv6jtole] {
        padding: 0.35rem 0.5rem;
        border: 1px solid rgba(0,0,0,0.1);
        background: rgba(0,0,0,0.08);
        color: var(--text-primary);
        border-radius: 5px;
        font-size: 0.8rem;
    }
    
    /* Actions — now in sidebar */
    
    /* Compare Bar */
    .compare-bar[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        padding: 0.4rem 1rem;
        background: var(--sidebar-bg);
        border-bottom: 1px solid #d0e8ef;
    }
    
    .compare-bar-header[b-2agv6jtole] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .compare-bar-title[b-2agv6jtole] {
        font-weight: 700;
        font-size: 0.85rem;
        color: var(--color-primary);
        white-space: nowrap;
    }
    
    .compare-close-btn[b-2agv6jtole] {
        margin-left: auto;
        background: none;
        border: 1px solid #d0e8ef;
        border-radius: var(--radius);
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 0.8rem;
        padding: 0.2rem 0.5rem;
        transition: all 0.2s;
    }
    
    .compare-close-btn:hover[b-2agv6jtole] {
        background: rgba(220, 53, 69, 0.08);
        border-color: rgba(220, 53, 69, 0.3);
        color: #dc3545;
    }
    
    .compare-row[b-2agv6jtole] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-wrap: wrap;
    }
    
    .compare-row label[b-2agv6jtole] {
        font-weight: 600;
        font-size: 0.8rem;
        color: var(--text-secondary);
        white-space: nowrap;
    }
    
    .compare-sep[b-2agv6jtole] {
        color: #d0e8ef;
        font-weight: 300;
    }
    
    .compare-action-btn[b-2agv6jtole] {
        padding: 0.3rem 0.75rem;
        background: var(--color-primary);
        color: white;
        border: none;
        border-radius: var(--radius);
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: opacity 0.2s;
    }
    
    .compare-action-btn:hover[b-2agv6jtole] { opacity: 0.85; }
    .compare-action-btn:disabled[b-2agv6jtole] { opacity: 0.4; cursor: not-allowed; }
    
    .year-checkbox-inline[b-2agv6jtole] {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        font-size: 0.8rem;
        cursor: pointer;
        white-space: nowrap;
    }
    
    .year-checkbox-inline input[type="checkbox"][b-2agv6jtole] {
        width: 14px;
        height: 14px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }
    
    .year-checkbox-inline span[b-2agv6jtole] {
        font-weight: 500;
        color: var(--text-body);
    }
    
    .mode-select[b-2agv6jtole] {
        padding: 0.25rem 0.4rem;
        border: 1px solid #d0e8ef;
        background: white;
        color: var(--text-body);
        border-radius: var(--radius);
        font-weight: 600;
        font-size: 0.8rem;
        cursor: pointer;
    }
    
    .period-select[b-2agv6jtole], .month-select[b-2agv6jtole], .quarter-select[b-2agv6jtole], .season-select[b-2agv6jtole] {
        padding: 0.25rem 0.4rem;
        border: 1px solid #d0e8ef;
        background: white;
        color: var(--text-body);
        border-radius: var(--radius);
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .period-select:hover[b-2agv6jtole], .month-select:hover[b-2agv6jtole], .quarter-select:hover[b-2agv6jtole], .season-select:hover[b-2agv6jtole] {
        border-color: var(--color-primary);
    }
    
    .date-label[b-2agv6jtole] {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
    }
    
    .custom-date-input[b-2agv6jtole] {
        padding: 0.25rem 0.4rem;
        border: 1px solid #d0e8ef;
        background: white;
        color: var(--text-body);
        border-radius: var(--radius);
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: 120px;
    }
    
    .custom-date-input:hover[b-2agv6jtole] { border-color: var(--color-primary); }
    .custom-date-input:focus[b-2agv6jtole] { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(31,148,185,0.12); }
    
    .compare-row .track-select[b-2agv6jtole] {
        padding: 0.25rem 0.4rem;
        border: 1px solid #d0e8ef;
        background: white;
        color: var(--text-body);
        border-radius: var(--radius);
        font-size: 0.8rem;
        font-weight: 500;
        cursor: pointer;
        max-width: 200px;
        min-width: auto;
    }
    
    /* Track Selector Bar */
    .track-selector-bar[b-2agv6jtole] {
        display: flex;
        gap: 0.75rem;
        padding: 0.65rem 1.25rem;
        background: var(--sidebar-bg);
        border-bottom: 1px solid #d0e8ef;
        align-items: center;
        box-shadow: var(--shadow-sm);
    }
    
    .track-selector-bar .group-label[b-2agv6jtole] {
        font-weight: 600;
        color: var(--color-primary);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .track-select[b-2agv6jtole], .year-select[b-2agv6jtole] {
        padding: 0.4rem 0.6rem;
        border: 1px solid #d0e8ef;
        background: white;
        color: var(--text-body);
        border-radius: var(--radius);
        font-size: 0.85rem;
        font-weight: 500;
        min-width: 150px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .track-select:hover[b-2agv6jtole], .year-select:hover[b-2agv6jtole] {
        border-color: var(--color-primary);
        box-shadow: 0 2px 8px rgba(31,148,185,0.15);
    }
    
    .track-select:focus[b-2agv6jtole], .year-select:focus[b-2agv6jtole] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(31,148,185,0.15);
    }
    
    /* Dropdown options styling */
    .track-select option[b-2agv6jtole], .year-select option[b-2agv6jtole] {
        background: white;
        color: var(--text-body);
        padding: 0.5rem;
        font-weight: 500;
    }
    
    .track-select option:hover[b-2agv6jtole], .year-select option:hover[b-2agv6jtole] {
        background: rgba(31, 148, 185, 0.1);
    }
    
    .track-select option:checked[b-2agv6jtole], .year-select option:checked[b-2agv6jtole] {
        background: rgba(31, 148, 185, 0.15);
        color: var(--color-primary);
        font-weight: 600;
    }
    
    .track-indicator-hint[b-2agv6jtole] {
        font-size: 0.72rem;
        color: var(--text-secondary);
        font-style: italic;
        margin-left: 0.5rem;
        padding: 0.25rem 0.5rem;
        background: rgba(31, 148, 185, 0.06);
        border-radius: 4px;
        border: 1px solid #d0e8ef;
    }
    
    /* Main Content Area with Sidebars */
    .main-content-area[b-2agv6jtole] {
        flex: 1;
        display: flex;
        min-height: 0;
        overflow: hidden;
    }
    
    /* Left Sidebar — wider, contains controls + scaling */
    .sidebar-left[b-2agv6jtole] {
        width: 280px;
        min-width: 280px;
        background: var(--sidebar-bg);
        border-right: 1px solid #d0e8ef;
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex-shrink: 0;
    }
    
    .sidebar-header[b-2agv6jtole] {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #d0e8ef;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--sidebar-bg);
    }
    
    .sidebar-header h4[b-2agv6jtole] {
        margin: 0;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        color: var(--color-primary);
    }
    
    .sidebar-content[b-2agv6jtole] {
        flex: 1;
        overflow-y: auto;
        padding: 1rem 0;
    }
    
    .sidebar-bottom-action[b-2agv6jtole] {
        padding: 0.75rem;
        border-top: 1px solid #d0e8ef;
        flex-shrink: 0;
    }
    
    .sb-btn-admin[b-2agv6jtole] {
        width: 100%;
        justify-content: center;
        background: rgba(168, 22, 84, 0.08) !important;
        border-color: rgba(168, 22, 84, 0.2) !important;
        color: #a81654 !important;
    }
    
    .sb-btn-admin:hover[b-2agv6jtole] {
        background: rgba(168, 22, 84, 0.14) !important;
        border-color: rgba(168, 22, 84, 0.3) !important;
    }
    
    .sb-btn-admin.active[b-2agv6jtole] {
        background: #a81654 !important;
        color: white !important;
        border-color: #a81654 !important;
    }
    
    /* Sidebar Sections — match nav-section */
    .sb-section[b-2agv6jtole] {
        margin: 0 0.75rem 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #d0e8ef;
    }
    
    .sb-section:last-child[b-2agv6jtole] {
        border-bottom: none;
    }
    
    .sb-section-label[b-2agv6jtole] {
        padding: 0.5rem 0.25rem;
        margin-top: 0.25rem;
        font-size: 0.75rem;
        color: var(--color-primary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
    }
    
    /* Sidebar Button Grid (2 columns) */
    .sb-button-grid[b-2agv6jtole] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.3rem;
    }
    
    .sb-button-grid.sb-grid-3col[b-2agv6jtole] {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .sb-split-grid[b-2agv6jtole] {
        display: flex;
        gap: 0.4rem;
    }
    
    .sb-split-col[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        flex: 1;
        justify-content: center;
    }
    
    .sb-btn[b-2agv6jtole] {
        padding: 0.5rem 0.75rem;
        border: 1px solid rgba(31, 148, 185, 0.15);
        background: rgba(31, 148, 185, 0.08);
        color: var(--text-primary);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.9rem;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        white-space: nowrap;
    }
    
    .sb-btn:hover[b-2agv6jtole] {
        background: rgba(31, 148, 185, 0.14);
        border-color: rgba(31, 148, 185, 0.25);
        color: var(--text-primary);
    }
    
    .sb-btn.active[b-2agv6jtole] {
        background: var(--color-primary);
        color: var(--text-on-primary);
        border-color: var(--color-primary);
    }
    
    /* Date Navigation in Sidebar */
    .sb-date-nav[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .sb-date-label[b-2agv6jtole] {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-primary);
        margin-bottom: 0.3rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: center;
    }
    
    .sb-date-row[b-2agv6jtole] {
        display: flex;
        gap: 0.25rem;
        align-items: stretch;
    }
    
    .sb-nav-btn[b-2agv6jtole] {
        padding: 0.4rem 0.6rem;
        border: 1px solid rgba(31, 148, 185, 0.15);
        background: rgba(31, 148, 185, 0.08);
        color: var(--text-primary);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.9rem;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }
    
    .sb-nav-btn:hover[b-2agv6jtole] {
        background: rgba(31, 148, 185, 0.14);
        border-color: rgba(31, 148, 185, 0.25);
        color: var(--text-primary);
    }
    
    .sb-date-input[b-2agv6jtole] {
        flex: 1;
        min-width: 0;
        padding: 0.5rem 0.6rem;
        border: 1px solid #d0e8ef;
        background: white;
        color: var(--text-primary);
        border-radius: var(--radius);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .sb-date-input:hover[b-2agv6jtole] {
        border-color: var(--color-primary);
    }
    
    .sb-date-input:focus[b-2agv6jtole] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(31,148,185,0.15);
    }
    
    .sb-today-btn[b-2agv6jtole] {
        font-weight: 600;
        font-size: 0.8rem;
        white-space: nowrap;
        padding: 0.5rem 0.6rem;
    }
    
    /* Quick Navigation Section */
    .sb-quick-nav[b-2agv6jtole] {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid #d0e8ef;
    }
    
    .sb-quick-nav-label[b-2agv6jtole] {
        font-size: 0.75rem;
        color: var(--color-primary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.4rem;
        font-weight: 600;
    }
    
    .sb-quick-nav-grid[b-2agv6jtole] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.25rem;
    }
    
    .sb-refresh-btn[b-2agv6jtole] {
        width: 100%;
        justify-content: center;
        margin-top: 0.4rem;
    }
    
    .sb-quick-btn[b-2agv6jtole] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        padding: 0.4rem 0.5rem;
        border: 1px solid rgba(31, 148, 185, 0.15);
        background: rgba(31, 148, 185, 0.08);
        color: var(--text-primary);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.85rem;
        font-weight: 500;
        transition: all 0.2s ease;
        white-space: nowrap;
    }
    
    .sb-quick-btn:hover[b-2agv6jtole] {
        background: rgba(31, 148, 185, 0.14);
        border-color: rgba(31, 148, 185, 0.25);
    }
    
    .sb-quick-btn:active[b-2agv6jtole] {
        background: var(--color-primary);
        color: var(--text-on-primary);
    }
    
    .sb-quick-btn .quick-icon[b-2agv6jtole] {
        font-size: 0.8rem;
    }
    
    /* Custom Date Range Section */
    .custom-range-section[b-2agv6jtole] {
        background: transparent;
        border: none;
        border-top: 1px solid #d0e8ef;
        border-radius: 0;
        padding: 0.75rem 0;
        margin-top: 0.5rem;
    }
    
    .custom-range-inputs[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .date-range-field[b-2agv6jtole] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .date-range-field label[b-2agv6jtole] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        font-weight: 600;
        min-width: 35px;
    }
    
    .custom-range-error[b-2agv6jtole] {
        background: rgba(255, 82, 82, 0.15);
        border: 1px solid rgba(255, 82, 82, 0.3);
        color: var(--color-danger);
        padding: 0.4rem 0.6rem;
        border-radius: 5px;
        font-size: 0.75rem;
        margin-top: 0.4rem;
        text-align: center;
    }
    
    .quick-presets[b-2agv6jtole] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.3rem;
        margin-top: 0.5rem;
    }
    
    .preset-btn[b-2agv6jtole] {
        padding: 0.4rem 0.5rem;
        border: 1px solid rgba(31, 148, 185, 0.15);
        background: rgba(31, 148, 185, 0.08);
        color: var(--text-primary);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.85rem;
        transition: all 0.2s ease;
        white-space: nowrap;
        text-align: center;
    }
    
    .preset-btn:hover[b-2agv6jtole] {
        background: rgba(31, 148, 185, 0.14);
        border-color: rgba(31, 148, 185, 0.25);
        color: var(--text-primary);
    }
    
    .preset-btn:active[b-2agv6jtole] {
        background: var(--color-primary);
        color: var(--text-on-primary);
    }
    
    .custom-range-info[b-2agv6jtole] {
        margin-top: 0.6rem;
        padding: 0.4rem;
        background: transparent;
        border-radius: var(--radius);
        text-align: center;
    }
    
    .custom-range-info small[b-2agv6jtole] {
        color: var(--text-secondary);
        font-size: 0.72rem;
    }
    
    .custom-range-info .available-range[b-2agv6jtole] {
        color: var(--color-primary);
        font-weight: 600;
    }
    
    /* Data Range Warnings */
    .data-warning[b-2agv6jtole] {
        display: flex;
        gap: 0.8rem;
        padding: 1rem;
        margin: 1rem 0;
        border-radius: 8px;
        align-items: flex-start;
        animation: slideIn-b-2agv6jtole 0.3s ease-out;
    }
    
    @keyframes slideIn-b-2agv6jtole {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .data-warning.no-data[b-2agv6jtole] {
        background: rgba(255, 152, 0, 0.15);
        border: 2px solid rgba(255, 152, 0, 0.4);
    }
    
    .data-warning.partial-data[b-2agv6jtole] {
        background: rgba(33, 150, 243, 0.15);
        border: 2px solid rgba(33, 150, 243, 0.4);
    }
    
    .data-warning .warning-icon[b-2agv6jtole] {
        font-size: 2rem;
        line-height: 1;
        flex-shrink: 0;
    }
    
    .data-warning .warning-content[b-2agv6jtole] {
        flex: 1;
    }
    
    .data-warning .warning-title[b-2agv6jtole] {
        font-size: 0.95rem;
        font-weight: 700;
        margin-bottom: 0.4rem;
        color: var(--text-primary);
    }
    
    .data-warning .warning-message[b-2agv6jtole] {
        font-size: 0.82rem;
        color: var(--text-secondary);
        line-height: 1.5;
        margin-bottom: 0.8rem;
    }
    
    .data-warning .warning-action[b-2agv6jtole] {
        padding: 0.5rem 1rem;
        background: rgba(31, 148, 185, 0.08);
        border: 1px solid rgba(31, 148, 185, 0.25);
        color: var(--color-primary);
        border-radius: 5px;
        cursor: pointer;
        font-size: 0.85rem;
        font-weight: 600;
        transition: all 0.2s;
    }
    
    .data-warning .warning-action:hover[b-2agv6jtole] {
        background: rgba(31, 148, 185, 0.14);
        border-color: var(--color-primary);
        transform: translateY(-1px);
    }
    
    /* Data Table View */
    .data-table-container[b-2agv6jtole] {
        margin: 1rem 0;
        background: rgba(0,0,0,0.02);
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 8px;
        overflow: hidden;
    }
    
    .data-table-header[b-2agv6jtole] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.8rem 1rem;
        background: var(--sidebar-bg);
        border-bottom: 1px solid #d0e8ef;
    }
    
    .data-table-header h4[b-2agv6jtole] {
        margin: 0;
        color: var(--color-primary);
        font-size: 0.95rem;
        font-weight: 600;
    }
    
    .table-actions[b-2agv6jtole] {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    
    .table-rows-select[b-2agv6jtole] {
        padding: 0.4rem 0.6rem;
        background: white;
        border: 1px solid #d0e8ef;
        color: var(--text-primary);
        border-radius: 6px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .table-rows-select:hover[b-2agv6jtole] {
        background: rgba(31, 148, 185, 0.06);
        border-color: var(--color-primary);
        box-shadow: 0 2px 8px rgba(31,148,185,0.15);
    }
    
    .table-rows-select:focus[b-2agv6jtole] {
        outline: none;
        border-color: var(--color-primary);
        background: rgba(31, 148, 185, 0.06);
        box-shadow: 0 0 0 3px rgba(31,148,185,0.15);
    }
    
    .table-rows-select option[b-2agv6jtole] {
        background: white;
        color: var(--text-primary);
        padding: 0.5rem;
        font-weight: 600;
    }
    
    .table-action-btn[b-2agv6jtole] {
        padding: 0.3rem 0.7rem;
        background: rgba(31, 148, 185, 0.08);
        border: 1px solid rgba(31, 148, 185, 0.2);
        color: var(--color-primary);
        border-radius: 5px;
        cursor: pointer;
        font-size: 0.8rem;
        font-weight: 600;
        transition: all 0.15s;
    }
    
    .table-action-btn:hover[b-2agv6jtole] {
        background: rgba(31, 148, 185, 0.14);
        border-color: var(--color-primary);
    }
    
    .data-table-scroll[b-2agv6jtole] {
        max-height: 500px;
        overflow-y: auto;
        overflow-x: auto;
    }
    
    .data-table[b-2agv6jtole] {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.82rem;
    }
    
    .data-table thead[b-2agv6jtole] {
        position: sticky;
        top: 0;
        background: rgba(22, 33, 62, 0.95);
        z-index: 10;
    }
    
    .data-table th[b-2agv6jtole] {
        padding: 0.6rem 0.8rem;
        text-align: left;
        color: var(--color-primary);
        font-weight: 600;
        border-bottom: 1px solid #d0e8ef;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
        transition: background 0.15s;
    }
    
    .data-table th:hover[b-2agv6jtole] {
        background: rgba(31, 148, 185, 0.08);
    }
    
    .data-table th .sort-indicator[b-2agv6jtole] {
        margin-left: 0.3rem;
        font-size: 0.7rem;
        color: var(--color-primary);
    }
    
    .data-table tbody tr[b-2agv6jtole] {
        transition: background 0.15s;
    }
    
    .data-table tbody tr:nth-child(even)[b-2agv6jtole] {
        background: rgba(0,0,0,0.02);
    }
    
    .data-table tbody tr:hover[b-2agv6jtole] {
        background: var(--sidebar-bg);
    }
    
    .data-table td[b-2agv6jtole] {
        padding: 0.5rem 0.8rem;
        border-bottom: 1px solid rgba(0,0,0,0.03);
        color: var(--gray-600);
    }
    
    .data-table .timestamp-col[b-2agv6jtole] {
        font-family: 'Consolas', 'Monaco', monospace;
        color: var(--text-secondary);
        min-width: 130px;
    }
    
    .data-table .value-col[b-2agv6jtole] {
        font-family: 'Consolas', 'Monaco', monospace;
        text-align: right;
        min-width: 80px;
    }
    
    .table-footer[b-2agv6jtole] {
        padding: 0.6rem 1rem;
        background: rgba(0,0,0,0.02);
        border-top: 1px solid rgba(0,0,0,0.08);
        text-align: center;
        color: var(--text-secondary);
        font-size: 0.8rem;
    }
    
    /* Actions in Sidebar */
    .sb-actions[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .sb-export-group[b-2agv6jtole] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.25rem;
    }
    
    .sb-export-group .sb-btn[b-2agv6jtole] {
        font-size: 0.85rem;
        justify-content: center;
        padding: 0.4rem 0.3rem;
    }
    
    /* Erweitert toggle section */
    .sb-section-toggle[b-2agv6jtole] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        width: 100%;
        padding: 0.4rem 0.25rem;
        background: transparent;
        border: none;
        cursor: pointer;
        border-radius: var(--radius);
        transition: all 0.2s ease;
    }
    
    .sb-section-toggle:hover[b-2agv6jtole] {
        background: var(--surface-hover);
    }
    
    .toggle-chevron[b-2agv6jtole] {
        font-size: 0.7rem;
        color: var(--color-primary);
        transition: transform 0.2s ease;
    }
    
    .sb-erweitert-content[b-2agv6jtole] {
        padding: 0.5rem 0 0;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .sb-sub-label[b-2agv6jtole] {
        font-size: 0.7rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        padding: 0.2rem 0;
    }
    
    .sb-debug-btn[b-2agv6jtole] {
        color: #c59000 !important;
    }
    
    .sb-debug-btn:hover[b-2agv6jtole] {
        background: rgba(255, 193, 7, 0.1) !important;
    }
    
    /* Auto-Refresh Status Display */
    .auto-refresh-status[b-2agv6jtole] {
        background: rgba(31, 148, 185, 0.08);
        border: 1px solid rgba(31, 148, 185, 0.2);
        border-radius: 5px;
        padding: 0.5rem;
        margin-top: 0.3rem;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .refresh-indicator[b-2agv6jtole] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--color-primary);
    }
    
    .live-dot[b-2agv6jtole] {
        font-size: 0.7rem;
        animation: pulse-b-2agv6jtole 2s infinite;
    }
    
    @keyframes pulse-b-2agv6jtole {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
    
    .status-text[b-2agv6jtole] {
        color: var(--color-primary);
    }
    
    .refresh-countdown[b-2agv6jtole] {
        font-size: 0.82rem;
        color: var(--text-secondary);
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .refresh-last-update[b-2agv6jtole] {
        font-size: 0.75rem;
        color: var(--text-secondary);
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .sb-btn:disabled[b-2agv6jtole] {
        opacity: 0.4;
        cursor: not-allowed;
    }
    
    .sb-btn:disabled:hover[b-2agv6jtole] {
        background: transparent;
        transform: none;
    }
    
    /* Scale Settings */
    .scale-section[b-2agv6jtole] {
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #d0e8ef;
    }
    
    .scale-section:last-of-type[b-2agv6jtole] {
        border-bottom: none;
    }
    
    .scale-field[b-2agv6jtole] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.4rem;
    }
    
    .scale-field label[b-2agv6jtole] {
        font-size: 0.75rem;
        color: var(--text-secondary);
        width: 50px;
    }
    
    .scale-field input[b-2agv6jtole] {
        flex: 1;
        padding: 0.3rem 0.4rem;
        background: white;
        border: 1px solid #d0e8ef;
        border-radius: var(--radius);
        color: var(--text-body);
        font-size: 0.8rem;
        width: 60px;
    }
    
    .scale-field input:focus[b-2agv6jtole] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(31,148,185,0.15);
    }
    
    .sb-save-scale-btn[b-2agv6jtole] {
        width: 100%;
        justify-content: center;
        margin-top: 0.3rem;
    }
    
    /* Statistics Section */
    .statistics-section[b-2agv6jtole] {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(0,0,0,0.08);
    }
    
    .statistics-section h5[b-2agv6jtole] {
        margin: 0 0 0.5rem 0;
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--text-secondary);
    }
    
    .stat-mini[b-2agv6jtole] {
        background: transparent;
        padding: 0.4rem 0.5rem;
        margin-bottom: 0.4rem;
        border-radius: 4px;
        padding-left: 0.6rem;
    }
    
    .stat-mini-name[b-2agv6jtole] {
        font-size: 0.88rem;
        color: var(--gray-600);
        margin-bottom: 0.2rem;
        font-weight: 500;
    }
    
    .stat-mini-row[b-2agv6jtole] {
        display: flex;
        justify-content: space-between;
        font-size: 0.82rem;
        color: var(--text-secondary);
    }
    
    /* Chart Container */
    .chart-container[b-2agv6jtole] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 0.75rem;
    }

    .chart-canvas-wrapper[b-2agv6jtole] {
        position: relative;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .chart-controller-label[b-2agv6jtole] {
        position: absolute;
        top: 0.5rem;
        left: 0.75rem;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-primary);
        background: rgba(var(--surface-card-rgb, 255, 255, 255), 0.85);
        padding: 0.15rem 0.5rem;
        border-radius: 4px;
        pointer-events: none;
        z-index: 5;
    }

    .last-update[b-2agv6jtole] {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }
    
    .data-source-badge[b-2agv6jtole] {
        font-size: 0.7rem;
        padding: 1px 6px;
        border-radius: 3px;
        font-weight: 500;
    }
    
    .data-source-badge.source-webterm[b-2agv6jtole] {
        background: #dcfce7;
        color: #166534;
    }
    
    .data-source-badge.source-legacy[b-2agv6jtole] {
        background: #fef3c7;
        color: #92400e;
    }
    
    .aggregation-badge[b-2agv6jtole] {
        font-size: 0.7rem;
        padding: 1px 6px;
        border-radius: 3px;
        background: rgba(31,148,185,0.1);
        color: var(--color-primary);
        font-weight: 500;
    }
    
    .echarts-container[b-2agv6jtole] {
        flex: 1;
        min-height: 300px;
        background: var(--chart-bg);
        border-radius: 8px;
        transition: background-color 0.3s ease;
    }
    
    /* Dataset Info */
    .dataset-info[b-2agv6jtole] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
        color: var(--text-secondary);
        flex-wrap: wrap;
    }
    
    .dataset-actual[b-2agv6jtole] {
        color: var(--color-primary);
        font-weight: 500;
    }
    
    .dataset-separator[b-2agv6jtole] {
        color: var(--text-secondary);
    }
    
    .dataset-theoretical[b-2agv6jtole] {
        color: var(--text-secondary);
    }
    
    .dataset-percent[b-2agv6jtole] {
        color: var(--text-secondary);
        margin-left: 0.3rem;
    }
    
    .cache-info[b-2agv6jtole] {
        margin-left: 1rem;
        padding: 2px 8px;
        background: rgba(31, 148, 185, 0.1);
        border: 1px solid rgba(31, 148, 185, 0.2);
        border-radius: 4px;
        color: var(--color-primary);
        font-size: 0.7rem;
        cursor: default;
    }
    
    /* Right Sidebar */
    .sidebar-right[b-2agv6jtole] {
        width: 380px;
        min-width: 380px;
        background: var(--sidebar-bg);
        border-left: 1px solid #d0e8ef;
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex-shrink: 0;
    }
    
    .track-actions[b-2agv6jtole] {
        display: flex;
        gap: 0.35rem;
    }
    
    .mini-btn[b-2agv6jtole] {
        padding: 0.4rem 0.65rem;
        border: 1px solid rgba(31, 148, 185, 0.15);
        background: rgba(31, 148, 185, 0.08);
        color: var(--text-primary);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.9rem;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .mini-btn:hover[b-2agv6jtole] { background: rgba(31, 148, 185, 0.14); border-color: rgba(31, 148, 185, 0.25); color: var(--text-primary); }
    
    .save-btn[b-2agv6jtole] {
        background: #4CAF50 !important;
        color: var(--text-primary) !important;
        border-color: #4CAF50 !important;
        font-weight: 600;
        min-width: 3rem;
        padding: 0.4rem 0.65rem !important;
        font-size: 0.95rem !important;
    }
    
    .save-btn:hover:not(:disabled)[b-2agv6jtole] {
        background: #45a049 !important;
        border-color: #45a049 !important;
        transform: scale(1.05);  /* Slight grow effect on hover */
        transition: all 0.2s ease;
    }
    
    .save-btn:disabled[b-2agv6jtole] {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    .track-list-container[b-2agv6jtole] {
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem 0;
    }
    
    /* Track Item - Single Row Layout */
    .track-item[b-2agv6jtole] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.5rem;
        margin: 0 0.25rem 0.15rem;
        background: transparent;
        border-radius: var(--radius);
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
        min-height: 34px;
    }
    
    .track-item:hover[b-2agv6jtole] {
        background: var(--surface-hover);
    }
    
    .track-item.enabled[b-2agv6jtole] {
        background: rgba(31,148,185,0.12);
    }
    
    .track-item.enabled .track-name[b-2agv6jtole] {
        color: var(--text-primary);
        font-weight: 600;
    }
    
    .track-checkbox[b-2agv6jtole] {
        width: 17px;
        height: 17px;
        cursor: pointer;
        accent-color: var(--color-primary);
        flex-shrink: 0;
    }
    
    .track-name[b-2agv6jtole] {
        font-size: 0.95rem;
        color: var(--text-body);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }
    
    .track-stat[b-2agv6jtole] {
        font-size: 0.95rem;
        color: var(--color-primary);
        white-space: nowrap;
        flex-shrink: 0;
        margin-right: 0.3rem;
    }
    
    .track-stat.sum[b-2agv6jtole] {
        color: #F18F01;
    }

    .color-picker-small[b-2agv6jtole] {
        width: 18px;
        height: 18px;
        padding: 0;
        border: 1px solid #d0e8ef;
        border-radius: 3px;
        cursor: pointer;
        background: transparent;
        flex-shrink: 0;
    }
    
    .color-picker-small[b-2agv6jtole]::-webkit-color-swatch-wrapper { padding: 1px; }
    .color-picker-small[b-2agv6jtole]::-webkit-color-swatch { border-radius: 2px; }
    
    /* Track Axis Select (L/R) - same size as color picker */
    .track-axis-select[b-2agv6jtole] {
        display: flex;
        gap: 1px;
        flex-shrink: 0;
        margin-left: 0.5rem;
    }
    
    .axis-checkbox[b-2agv6jtole] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        font-size: 0.75rem;
        font-weight: bold;
        color: var(--text-secondary);
        background: transparent;
        border: 1px solid #d0e8ef;
        cursor: pointer;
        transition: all 0.15s;
    }
    
    .axis-checkbox:first-child[b-2agv6jtole] {
        border-radius: 3px 0 0 3px;
    }
    
    .axis-checkbox:last-child[b-2agv6jtole] {
        border-radius: 0 3px 3px 0;
    }
    
    .axis-checkbox input[type="radio"][b-2agv6jtole] {
        display: none;
    }
    
    .axis-checkbox.active[b-2agv6jtole] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--text-on-primary);
    }
    
    .axis-checkbox:hover[b-2agv6jtole] {
        background: var(--surface-hover);
        color: var(--text-primary);
    }
    
    /* Sync Checkbox Option */
    .sync-option[b-2agv6jtole] {
        margin: 0.3rem 0;
        font-size: 0.8rem;
        color: var(--text-secondary);
    }
    
    .sync-checkbox[b-2agv6jtole] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.75rem;
        color: var(--text-secondary);
        cursor: pointer;
    }
    
    .sync-checkbox input[type="checkbox"][b-2agv6jtole] {
        width: 14px;
        height: 14px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }
    
    .sync-checkbox span[b-2agv6jtole] {
        flex: 1;
    }
    
    .track-controls[b-2agv6jtole] {
        display: flex;
        gap: 0.3rem;
        align-items: center;
    }
    
    .track-controls input[type="checkbox"][b-2agv6jtole] {
        width: 14px;
        height: 14px;
        cursor: pointer;
    }
    
    .color-picker[b-2agv6jtole] {
        width: 22px;
        height: 22px;
        padding: 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        background: transparent;
    }
    
    /* Placeholder */
    .tab-placeholder[b-2agv6jtole] {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 2rem;
    }
    
    .placeholder-icon[b-2agv6jtole] { font-size: 4rem; margin-bottom: 1rem; }
    .placeholder-info[b-2agv6jtole] { margin-top: 2rem; background: transparent; padding: 1rem 2rem; border-radius: 8px; }
    .info-item[b-2agv6jtole] { display: flex; gap: 1rem; margin: 0.5rem 0; }
    .info-label[b-2agv6jtole] { color: var(--text-secondary); }
    .info-value[b-2agv6jtole] { color: var(--text-primary); }
    
    /* Scrollbar Styling */
    .sidebar-content[b-2agv6jtole]::-webkit-scrollbar,
    .track-list-container[b-2agv6jtole]::-webkit-scrollbar {
        width: 6px;
    }
    
    .sidebar-content[b-2agv6jtole]::-webkit-scrollbar-track,
    .track-list-container[b-2agv6jtole]::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .sidebar-content[b-2agv6jtole]::-webkit-scrollbar-thumb,
    .track-list-container[b-2agv6jtole]::-webkit-scrollbar-thumb {
        background: #d0e8ef;
        border-radius: 3px;
    }
    
    .sidebar-content[b-2agv6jtole]::-webkit-scrollbar-thumb:hover,
    .track-list-container[b-2agv6jtole]::-webkit-scrollbar-thumb:hover {
        background: var(--color-primary);
    }
    
    /* QH Header Refresh Button */
    .qh-header-refresh[b-2agv6jtole] {
        padding: 0.6rem 1rem;
        border-top: 1px solid #d0e8ef;
        background: var(--sidebar-bg);
        flex-shrink: 0;
    }
    
    .qh-refresh-btn[b-2agv6jtole] {
        width: 100%;
        justify-content: center;
        font-size: 0.95rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid #d0e8ef;
        background: transparent;
        color: var(--text-body);
        border-radius: var(--radius);
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
    
    .qh-refresh-btn:hover:not(:disabled)[b-2agv6jtole] {
        background: var(--surface-hover);
        border-color: var(--color-primary);
        color: var(--text-primary);
    }
    
    .qh-refresh-btn:disabled[b-2agv6jtole] {
        opacity: 0.6;
        cursor: wait;
    }
    
    .spinner-inline[b-2agv6jtole] {
        width: 14px;
        height: 14px;
        border: 2px solid #d0e8ef;
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-2agv6jtole 0.8s linear infinite;
        flex-shrink: 0;
    }
    
    .qh-refresh-msg[b-2agv6jtole] {
        margin-top: 0.4rem;
        padding: 0.3rem 0.5rem;
        border-radius: 4px;
        font-size: 0.85rem;
        text-align: center;
    }
    
    .qh-refresh-msg.success[b-2agv6jtole] {
        background: rgba(76, 175, 80, 0.15);
        color: #81C784;
    }
    
    .qh-refresh-msg.error[b-2agv6jtole] {
        background: rgba(244, 67, 54, 0.15);
        color: #E57373;
    }
    
    /* Responsive — both sidebars scale with screen */
    @media (min-width: 1600px) {
        .sidebar-left[b-2agv6jtole] { width: 340px; min-width: 340px; }
        .sidebar-right[b-2agv6jtole] { width: 400px; min-width: 400px; }
    }
    
    @media (min-width: 1400px) and (max-width: 1599px) {
        .sidebar-left[b-2agv6jtole] { width: 300px; min-width: 300px; }
        .sidebar-right[b-2agv6jtole] { width: 370px; min-width: 370px; }
    }
    
    @media (max-width: 1200px) {
        .sidebar-left[b-2agv6jtole] { width: 260px; min-width: 260px; }
        .sidebar-right[b-2agv6jtole] { width: 320px; min-width: 320px; }
        .track-stat[b-2agv6jtole] { font-size: 0.88rem; }
    }
    
    @media (max-width: 1024px) {
        .sidebar-left[b-2agv6jtole] { width: 220px; min-width: 220px; }
        .sidebar-right[b-2agv6jtole] { width: 280px; min-width: 280px; }
    }
    
    @media (max-width: 900px) {
        .sidebar-left[b-2agv6jtole] { width: 200px; min-width: 200px; }
        .sidebar-right[b-2agv6jtole] { width: 250px; min-width: 250px; }
        .sb-button-grid[b-2agv6jtole] { grid-template-columns: 1fr; }
        .sb-split-grid[b-2agv6jtole] { flex-direction: column; }
        .sb-export-group[b-2agv6jtole] { grid-template-columns: 1fr 1fr; }
        .track-stat[b-2agv6jtole] { display: none; }
    }
    
    @media (max-width: 768px) {
        .main-content-area[b-2agv6jtole] { flex-direction: column; }
        .sidebar-left[b-2agv6jtole], .sidebar-right[b-2agv6jtole] {
            width: 100%;
            min-width: 100%;
            max-height: 200px;
            border: none;
            border-bottom: 1px solid rgba(0,0,0,0.08);
        }
        .sidebar-content[b-2agv6jtole], .track-list-container[b-2agv6jtole] {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .sb-section[b-2agv6jtole], .track-item[b-2agv6jtole] {
            flex: 1;
            min-width: 150px;
        }
    }
    
    /* Debug Button */
    .debug-btn[b-2agv6jtole] {
        background: rgba(255, 193, 7, 0.2) !important;
        border-color: rgba(255, 193, 7, 0.5) !important;
    }
    
    .debug-btn:hover[b-2agv6jtole] {
        background: rgba(255, 193, 7, 0.3) !important;
    }
    
    .debug-btn-large[b-2agv6jtole] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 2rem;
        padding: 1rem 2rem;
        background: rgba(255, 193, 7, 0.2);
        border: 2px solid rgba(255, 193, 7, 0.5);
        border-radius: 8px;
        color: var(--color-warning);
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .debug-btn-large:hover[b-2agv6jtole] {
        background: rgba(255, 193, 7, 0.3);
        border-color: rgba(255, 193, 7, 0.7);
        transform: translateY(-2px);
    }
    
    .debug-btn-large span[b-2agv6jtole] {
        font-size: 1.2rem;
    }
    
    /* Debug Modal Overlay */
    .debug-modal-overlay[b-2agv6jtole] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
    }
    
    .debug-modal[b-2agv6jtole] {
        background: white;
        border: 1px solid rgba(31, 148, 185, 0.2);
        border-radius: 12px;
        width: 90%;
        max-width: 900px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 40px var(--surface-overlay);
    }
    
    .debug-modal-header[b-2agv6jtole] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(0, 0, 0, 0.2);
        border-radius: 12px 12px 0 0;
    }
    
    .debug-modal-header h3[b-2agv6jtole] {
        margin: 0;
        color: var(--color-primary);
        font-size: 1.1rem;
    }
    
    .debug-modal-header .close-btn[b-2agv6jtole] {
        background: none;
        border: none;
        color: var(--text-secondary);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0 0.5rem;
        transition: color 0.2s;
    }
    
    .debug-modal-header .close-btn:hover[b-2agv6jtole] {
        color: var(--color-danger);
    }
    
    .debug-modal-body[b-2agv6jtole] {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }
    
    .debug-spinner[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem;
    }
    
    .debug-actions[b-2agv6jtole] {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .debug-action-btn[b-2agv6jtole] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: rgba(31, 148, 185, 0.08);
        border: 1px solid rgba(31, 148, 185, 0.3);
        border-radius: 6px;
        color: var(--color-primary);
        cursor: pointer;
        font-size: 0.85rem;
        transition: all 0.2s;
    }
    
    .debug-action-btn:hover[b-2agv6jtole] {
        background: rgba(31, 148, 185, 0.14);
    }
    
    .debug-log[b-2agv6jtole] {
        flex: 1;
        overflow-y: auto;
        background: var(--surface-hover);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 6px;
        padding: 0.5rem;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 0.8rem;
    }
    
    .debug-entry[b-2agv6jtole] {
        padding: 0.3rem 0.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
        line-height: 1.4;
    }
    
    .debug-entry:last-child[b-2agv6jtole] {
        border-bottom: none;
    }
    
    .debug-time[b-2agv6jtole] {
        color: var(--text-secondary);
        margin-right: 0.5rem;
    }
    
    .debug-level[b-2agv6jtole] {
        font-weight: bold;
        margin-right: 0.5rem;
        padding: 0.1rem 0.3rem;
        border-radius: 3px;
        font-size: 0.7rem;
    }
    
    .debug-entry.INFO .debug-level[b-2agv6jtole] {
        color: var(--color-primary);
        background: rgba(31, 148, 185, 0.08);
    }
    
    .debug-entry.SUCCESS .debug-level[b-2agv6jtole] {
        color: var(--color-success);
        background: rgba(46, 204, 113, 0.15);
    }
    
    .debug-entry.WARNING .debug-level[b-2agv6jtole] {
        color: var(--color-warning);
        background: rgba(243, 156, 18, 0.15);
    }
    
    .debug-entry.ERROR .debug-level[b-2agv6jtole] {
        color: var(--color-danger);
        background: rgba(231, 76, 60, 0.15);
    }
    
    .debug-message[b-2agv6jtole] {
        color: var(--gray-600);
    }
    
    .debug-details[b-2agv6jtole] {
        margin: 0.5rem 0 0 0;
        padding: 0.5rem;
        background: rgba(31, 148, 185, 0.06);
        border-radius: 4px;
        color: var(--text-secondary);
        font-size: 0.75rem;
        white-space: pre-wrap;
        word-break: break-all;
        max-height: 200px;
        overflow-y: auto;
    }
    
    .debug-log[b-2agv6jtole]::-webkit-scrollbar,
    .debug-details[b-2agv6jtole]::-webkit-scrollbar {
        width: 8px;
    }
    
    .debug-log[b-2agv6jtole]::-webkit-scrollbar-track,
    .debug-details[b-2agv6jtole]::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
    }
    
    .debug-log[b-2agv6jtole]::-webkit-scrollbar-thumb,
    .debug-details[b-2agv6jtole]::-webkit-scrollbar-thumb {
        background: rgba(31, 148, 185, 0.3);
        border-radius: 4px;
    }
    
    /* ═══════════════════════════════════════════════════════════════ */
    /* STATISTICAL ANALYSIS MODAL */
    /* ═══════════════════════════════════════════════════════════════ */
    
    .analysis-modal-overlay[b-2agv6jtole] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        backdrop-filter: blur(4px);
        animation: fadeIn 0.2s;
    }
    
    .analysis-modal[b-2agv6jtole] {
        background: white;
        border-radius: 12px;
        border: 1px solid #d0e8ef;
        width: 95%;
        max-width: 1400px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15);
        animation: slideIn-b-2agv6jtole 0.3s ease-out;
    }
    
    .analysis-modal-header[b-2agv6jtole] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.2rem 1.5rem;
        border-bottom: 1px solid #d0e8ef;
        background: var(--sidebar-bg);
    }
    
    .analysis-modal-header h3[b-2agv6jtole] {
        margin: 0;
        color: var(--color-primary);
        font-size: 1.3rem;
        font-weight: 600;
    }
    
    .analysis-header-actions[b-2agv6jtole] {
        display: flex;
        gap: 1rem;
        align-items: center;
    }
    
    .analysis-track-select[b-2agv6jtole] {
        padding: 0.5rem 1rem;
        background: white;
        border: 1px solid #d0e8ef;
        color: var(--text-primary);
        border-radius: 6px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        min-width: 200px;
    }
    
    .analysis-track-select:hover[b-2agv6jtole] {
        background: white;
        border-color: var(--color-primary);
        box-shadow: 0 2px 8px rgba(31,148,185,0.15);
    }
    
    .analysis-track-select:focus[b-2agv6jtole] {
        outline: none;
        background: white;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(31,148,185,0.15);
    }
    
    .analysis-track-select option[b-2agv6jtole] {
        background: white;
        color: var(--text-primary);
        padding: 0.5rem;
    }
    
    .analysis-tabs[b-2agv6jtole] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: rgba(31, 148, 185, 0.06);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    .analysis-tab[b-2agv6jtole] {
        padding: 0.6rem 1rem;
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(0, 0, 0, 0.08);
        color: var(--text-secondary);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
        font-size: 0.85rem;
        font-weight: 600;
        flex-shrink: 0;
    }
    
    .analysis-tab:hover[b-2agv6jtole] {
        background: white;
        color: var(--text-primary);
        transform: translateY(-2px);
    }
    
    .analysis-tab.active[b-2agv6jtole] {
        background: var(--color-primary);
        color: var(--text-primary);
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(31, 148, 185, 0.2);
    }
    
    .analysis-content[b-2agv6jtole] {
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem;
    }
    
    .analysis-section[b-2agv6jtole] {
        margin-bottom: 2rem;
    }
    
    .analysis-section-title[b-2agv6jtole] {
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--color-primary);
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #d0e8ef;
    }
    
    .stats-grid[b-2agv6jtole] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
    
    .stat-card[b-2agv6jtole] {
        background: rgba(0, 0, 0, 0.03);
        padding: 1rem;
        border-radius: 8px;
        border-left: 3px solid var(--color-primary);
        transition: all 0.2s;
    }
    
    .stat-card:hover[b-2agv6jtole] {
        background: rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .stat-label[b-2agv6jtole] {
        color: var(--text-secondary);
        font-size: 0.85rem;
        margin-bottom: 0.4rem;
        font-weight: 500;
    }
    
    .stat-value[b-2agv6jtole] {
        color: var(--text-primary);
        font-size: 1.4rem;
        font-weight: 700;
        font-family: 'Consolas', 'Monaco', monospace;
        line-height: 1.2;
    }
    
    .stat-detail[b-2agv6jtole] {
        color: var(--text-secondary);
        font-size: 0.8rem;
        margin-top: 0.4rem;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .analysis-loading[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 400px;
        gap: 1rem;
    }
    
    .analysis-loading p[b-2agv6jtole] {
        color: var(--color-primary);
        font-size: 1.1rem;
    }
    
    .analysis-placeholder[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 400px;
        gap: 1rem;
        text-align: center;
    }
    
    .analysis-placeholder h3[b-2agv6jtole] {
        color: var(--color-primary);
        font-size: 2rem;
        margin: 0;
    }
    
    .analysis-placeholder p[b-2agv6jtole] {
        color: var(--text-secondary);
        font-size: 1.1rem;
        margin: 0.5rem 0;
    }
    
    .analysis-placeholder-hint[b-2agv6jtole] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        font-style: italic;
    }
    
    .analysis-info-text[b-2agv6jtole] {
        color: var(--text-secondary);
        font-size: 1rem;
        text-align: center;
        padding: 2rem;
    }
    
    /* Comparison Grid */
    .comparison-grid[b-2agv6jtole] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .comparison-card[b-2agv6jtole] {
        background: rgba(0, 0, 0, 0.03);
        padding: 1.2rem;
        border-radius: 8px;
        border-left: 3px solid var(--color-primary);
        transition: all 0.2s;
    }
    
    .comparison-card:hover[b-2agv6jtole] {
        background: rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .comparison-title[b-2agv6jtole] {
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-primary);
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(31, 148, 185, 0.2);
    }
    
    .comparison-values[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .comparison-value[b-2agv6jtole] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .comparison-label[b-2agv6jtole] {
        color: var(--text-secondary);
        font-size: 0.85rem;
    }
    
    .comparison-number[b-2agv6jtole] {
        color: var(--text-primary);
        font-size: 1.1rem;
        font-weight: 600;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .comparison-diff[b-2agv6jtole] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.8rem;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        margin-top: 0.5rem;
    }
    
    .comparison-arrow[b-2agv6jtole] {
        font-size: 1.5rem;
    }
    
    .comparison-percent[b-2agv6jtole] {
        font-size: 1.3rem;
        font-weight: 700;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .comparison-percent.positive[b-2agv6jtole] {
        color: var(--color-primary);
    }
    
    .comparison-percent.negative[b-2agv6jtole] {
        color: var(--color-danger);
    }
    
    .comparison-percent.neutral[b-2agv6jtole] {
        color: #FFD93D;
    }
    
    .comparison-absolute[b-2agv6jtole] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    /* Correlation Tab */
    .correlation-list[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .correlation-card[b-2agv6jtole] {
        background: rgba(0, 0, 0, 0.03);
        padding: 1rem;
        border-radius: 6px;
        border-left: 3px solid rgba(31, 148, 185, 0.35);
        transition: all 0.2s;
    }
    
    .correlation-card:hover[b-2agv6jtole] {
        background: rgba(0, 0, 0, 0.05);
        transform: translateX(4px);
    }
    
    .correlation-header[b-2agv6jtole] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    
    .correlation-tracks[b-2agv6jtole] {
        font-weight: 600;
        color: var(--text-primary);
    }
    
    .correlation-value[b-2agv6jtole] {
        font-size: 1.2rem;
        font-weight: 700;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .correlation-strong[b-2agv6jtole] {
        color: var(--color-primary);
    }
    
    .correlation-moderate[b-2agv6jtole] {
        color: #FFD93D;
    }
    
    .correlation-weak[b-2agv6jtole] {
        color: var(--text-secondary);
    }
    
    .correlation-bar[b-2agv6jtole] {
        height: 8px;
        background: rgba(31, 148, 185, 0.06);
        border-radius: 4px;
        overflow: hidden;
        margin: 0.5rem 0;
    }
    
    .correlation-bar-fill[b-2agv6jtole] {
        height: 100%;
        transition: width 0.3s;
    }
    
    .correlation-interpretation[b-2agv6jtole] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        font-style: italic;
    }
    
    /* Distribution Tab */
    .histogram-container[b-2agv6jtole] {
        background: rgba(31, 148, 185, 0.06);
        padding: 1.5rem;
        border-radius: 8px;
        overflow-x: auto;
    }
    
    .histogram-ascii[b-2agv6jtole] {
        color: var(--color-primary);
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 0.9rem;
        line-height: 1.4;
        margin: 0;
        white-space: pre;
    }
    
    /* Anomalies Tab */
    .anomaly-list[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-height: 500px;
        overflow-y: auto;
    }
    
    .anomaly-card[b-2agv6jtole] {
        background: rgba(0, 0, 0, 0.03);
        padding: 1rem;
        border-radius: 6px;
        border-left: 4px solid;
        transition: all 0.2s;
    }
    
    .anomaly-card:hover[b-2agv6jtole] {
        background: rgba(0, 0, 0, 0.05);
        transform: translateX(4px);
    }
    
    .anomaly-kritisch[b-2agv6jtole] {
        border-left-color: var(--color-danger);
    }
    
    .anomaly-warnung[b-2agv6jtole] {
        border-left-color: #FFD93D;
    }
    
    .anomaly-gering[b-2agv6jtole] {
        border-left-color: var(--color-primary);
    }
    
    .anomaly-header[b-2agv6jtole] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.8rem;
    }
    
    .anomaly-time[b-2agv6jtole] {
        font-size: 0.9rem;
        color: var(--text-secondary);
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .anomaly-severity[b-2agv6jtole] {
        padding: 0.2rem 0.8rem;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 600;
    }
    
    .anomaly-kritisch .anomaly-severity[b-2agv6jtole] {
        background: rgba(255, 107, 107, 0.2);
        color: var(--color-danger);
    }
    
    .anomaly-warnung .anomaly-severity[b-2agv6jtole] {
        background: rgba(255, 217, 61, 0.2);
        color: #FFD93D;
    }
    
    .anomaly-gering .anomaly-severity[b-2agv6jtole] {
        background: rgba(31, 148, 185, 0.08);
        color: var(--color-primary);
    }
    
    .anomaly-values[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 0.8rem;
    }
    
    .anomaly-value-row[b-2agv6jtole] {
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
    }
    
    .anomaly-label[b-2agv6jtole] {
        color: var(--text-secondary);
    }
    
    .anomaly-number[b-2agv6jtole] {
        color: var(--text-primary);
        font-weight: 600;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .anomaly-description[b-2agv6jtole] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        font-style: italic;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    .anomaly-critical[b-2agv6jtole] {
        color: var(--color-danger);
    }
    
    .anomaly-warning[b-2agv6jtole] {
        color: #FFD93D;
    }
    
    .anomaly-minor[b-2agv6jtole] {
        color: var(--color-primary);
    }
    
    /* === Installation Comparison Modal === */
    .comparison-modal[b-2agv6jtole] {
        background: linear-gradient(135deg, var(--surface-page) 0%, var(--surface-card) 50%, var(--color-primary) 100%);
        border-radius: 12px;
        width: 95%;
        max-width: 1600px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 60px var(--surface-overlay);
        overflow: hidden;
    }
    
    .comparison-content[b-2agv6jtole] {
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem;
    }
    
    .comparison-setup[b-2agv6jtole] {
        max-width: 900px;
        margin: 0 auto;
    }
    
    .comparison-setup-section[b-2agv6jtole] {
        background: rgba(0, 0, 0, 0.03);
        padding: 1.5rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
        border: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    .comparison-setup-section h4[b-2agv6jtole] {
        color: var(--color-primary);
        font-size: 1.1rem;
        margin-bottom: 1rem;
        font-weight: 600;
    }
    
    .date-range-selectors[b-2agv6jtole] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    
    .date-input-group[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .date-input-group label[b-2agv6jtole] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    .date-input[b-2agv6jtole] {
        padding: 0.75rem;
        background: rgba(31, 148, 185, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        color: var(--text-primary);
        font-size: 1rem;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .date-input:focus[b-2agv6jtole] {
        outline: none;
        border-color: var(--color-primary);
        background: rgba(0, 0, 0, 0.4);
    }
    
    .installation-selector[b-2agv6jtole] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 0.75rem;
        max-height: 400px;
        overflow-y: auto;
        padding: 0.5rem;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 6px;
    }
    
    .installation-checkbox[b-2agv6jtole] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .installation-checkbox:hover[b-2agv6jtole] {
        background: white;
        border-color: var(--color-primary);
    }
    
    .installation-checkbox input[type="checkbox"][b-2agv6jtole] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: var(--color-primary);
    }
    
    .installation-checkbox span[b-2agv6jtole] {
        color: var(--text-primary);
        font-size: 0.95rem;
        flex: 1;
    }
    
    .comparison-hint[b-2agv6jtole] {
        margin-top: 1rem;
        padding: 0.75rem;
        background: rgba(31, 148, 185, 0.08);
        border-left: 3px solid var(--color-primary);
        color: var(--color-primary);
        border-radius: 4px;
        font-size: 0.9rem;
    }
    
    .comparison-hint.warning[b-2agv6jtole] {
        background: rgba(255, 107, 107, 0.1);
        border-left-color: var(--color-danger);
        color: var(--color-danger);
    }
    
    .comparison-actions[b-2agv6jtole] {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 2rem;
    }
    
    .btn-primary[b-2agv6jtole] {
        padding: 0.9rem 2rem;
        background: var(--color-primary);
        border: none;
        border-radius: 8px;
        color: var(--text-primary);
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 4px 12px rgba(31, 148, 185, 0.2);
    }
    
    .btn-primary:hover:not(:disabled)[b-2agv6jtole] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(31, 148, 185, 0.3);
    }
    
    .btn-primary:disabled[b-2agv6jtole] {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .btn-secondary[b-2agv6jtole] {
        padding: 0.75rem 1.5rem;
        background: white;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        color: var(--text-primary);
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .btn-secondary:hover[b-2agv6jtole] {
        background: white;
        border-color: var(--color-primary);
    }
    
    .comparison-results[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .comparison-header-info[b-2agv6jtole] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 8px;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .comparison-header-info span[b-2agv6jtole] {
        color: var(--color-primary);
        font-weight: 600;
        font-size: 0.95rem;
    }
    
    .comparison-table-container[b-2agv6jtole] {
        overflow-x: auto;
        border-radius: 8px;
        background: rgba(31, 148, 185, 0.06);
    }
    
    .comparison-table[b-2agv6jtole] {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
    }
    
    .comparison-table thead[b-2agv6jtole] {
        background: var(--color-primary);
        color: var(--text-primary);
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .comparison-table th[b-2agv6jtole] {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        white-space: nowrap;
    }
    
    .comparison-table td[b-2agv6jtole] {
        padding: 0.9rem 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        color: var(--text-primary);
    }
    
    .comparison-table tbody tr[b-2agv6jtole] {
        transition: background 0.2s;
    }
    
    .comparison-table tbody tr:hover[b-2agv6jtole] {
        background: rgba(0, 0, 0, 0.03);
    }
    
    .comparison-table .sticky-col[b-2agv6jtole] {
        position: sticky;
        left: 0;
        background: rgba(26, 26, 46, 0.95);
        z-index: 5;
        border-right: 2px solid rgba(0, 0, 0, 0.1);
    }
    
    .comparison-table thead .sticky-col[b-2agv6jtole] {
        background: var(--color-primary);
        z-index: 15;
    }
    
    .installation-name[b-2agv6jtole] {
        font-weight: 600;
        color: var(--color-primary);
    }
    
    .completeness-bar[b-2agv6jtole] {
        position: relative;
        width: 100%;
        height: 24px;
        background: rgba(31, 148, 185, 0.06);
        border-radius: 4px;
        overflow: hidden;
    }
    
    .completeness-fill[b-2agv6jtole] {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--color-primary);
        transition: width 0.3s;
    }
    
    .completeness-bar span[b-2agv6jtole] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--text-primary);
        text-shadow: 0 1px 2px var(--surface-overlay);
        z-index: 1;
    }
    
    .anomaly-count[b-2agv6jtole] {
        font-family: 'Consolas', 'Monaco', monospace;
        font-weight: 600;
        color: #FFD93D;
    }
    
    .rank-badge[b-2agv6jtole] {
        font-weight: 700;
        font-size: 1.1rem;
    }
    
    .rank-1[b-2agv6jtole] {
        color: #FFD700;
        font-size: 1.2rem;
    }
    
    .rank-2[b-2agv6jtole] {
        color: #C0C0C0;
        font-size: 1.1rem;
    }
    
    .rank-3[b-2agv6jtole] {
        color: #CD7F32;
        font-size: 1.05rem;
    }
    
    .rank-first[b-2agv6jtole] {
        background: rgba(255, 215, 0, 0.1);
    }
    
    .rank-second[b-2agv6jtole] {
        background: rgba(192, 192, 192, 0.1);
    }
    
    .rank-third[b-2agv6jtole] {
        background: rgba(205, 127, 50, 0.1);
    }
    
    .comparison-footer[b-2agv6jtole] {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        padding: 1rem;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(31, 148, 185, 0.06);
    }
    
    @media (max-width: 768px) {
        .comparison-modal[b-2agv6jtole] {
            width: 98%;
            max-height: 95vh;
        }
        
        .date-range-selectors[b-2agv6jtole] {
            grid-template-columns: 1fr;
        }
        
        .installation-selector[b-2agv6jtole] {
            grid-template-columns: 1fr;
        }
        
        .comparison-header-info[b-2agv6jtole] {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .comparison-table[b-2agv6jtole] {
            font-size: 0.8rem;
        }
        
        .comparison-table th[b-2agv6jtole],
        .comparison-table td[b-2agv6jtole] {
            padding: 0.6rem 0.5rem;
        }
    }
    
    .analysis-footer[b-2agv6jtole] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(31, 148, 185, 0.06);
    }
    
    .analysis-info[b-2agv6jtole] {
        display: flex;
        gap: 2rem;
        color: var(--text-secondary);
        font-size: 0.9rem;
    }
    
    .analysis-actions[b-2agv6jtole] {
        display: flex;
        gap: 1rem;
    }
    
    .analysis-btn[b-2agv6jtole] {
        padding: 0.7rem 1.5rem;
        background: var(--color-primary);
        color: var(--text-primary);
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.95rem;
        transition: all 0.2s;
    }
    
    .analysis-btn:hover:not(:disabled)[b-2agv6jtole] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(31, 148, 185, 0.3);
    }
    
    .analysis-btn:disabled[b-2agv6jtole] {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .analysis-btn.secondary[b-2agv6jtole] {
        background: white;
        color: var(--text-secondary);
    }
    
    .analysis-btn.secondary:hover[b-2agv6jtole] {
        background: white;
        color: var(--text-primary);
    }
    
    /* Responsive */
    @media (max-width: 1200px) {
        .analysis-modal[b-2agv6jtole] {
            width: 98%;
            max-height: 95vh;
        }
        
        .stats-grid[b-2agv6jtole] {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
    }
    
    @media (max-width: 768px) {
        .analysis-modal-header h3[b-2agv6jtole] {
            font-size: 1rem;
        }
        
        .analysis-track-select[b-2agv6jtole] {
            min-width: 150px;
            font-size: 0.85rem;
        }
        
        .analysis-tabs[b-2agv6jtole] {
            flex-wrap: wrap;
        }
        
        .analysis-tab[b-2agv6jtole] {
            font-size: 0.85rem;
            padding: 0.5rem 0.8rem;
        }
        
        .stats-grid[b-2agv6jtole] {
            grid-template-columns: 1fr;
        }
        
        .analysis-footer[b-2agv6jtole] {
            flex-direction: column;
            gap: 1rem;
        }
        
        .analysis-info[b-2agv6jtole] {
            flex-direction: column;
            gap: 0.5rem;
        }
    }
    
    /* ============================================ */
    /* PRESET MANAGEMENT STYLES */
    /* ============================================ */
    
    /* Preset button in header */
    .preset-btn[b-2agv6jtole] {
        background: linear-gradient(135deg, var(--color-indigo) 0%, #764ba2 100%);
        color: var(--text-primary);
        border: none;
        min-width: 3rem;
        padding: 0.4rem 0.65rem;  /* Match mini-btn base padding */
        font-size: 0.85rem;  /* Match mini-btn base font size */
    }
    
    .preset-btn:hover[b-2agv6jtole] {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    
    /* Presets section in sidebar */
    .presets-section[b-2agv6jtole] {
        margin: 0.5rem 0.75rem 0;
        padding: 0.5rem 0;
        background: transparent;
        border-radius: 0;
        border: none; border-top: 1px solid #d0e8ef;
    }
    
    .section-toggle[b-2agv6jtole] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.5rem 0.75rem;
        background: transparent;
        border: none;
        color: var(--text-body);
        font-size: 1.0rem;
        font-weight: 600;
        cursor: pointer;
        border-radius: var(--radius);
        transition: all 0.2s ease;
    }
    
    .section-toggle:hover[b-2agv6jtole] {
        background: var(--surface-hover);
    }
    
    .section-toggle.active[b-2agv6jtole] {
        color: var(--color-primary);
    }
    
    .toggle-icon[b-2agv6jtole] {
        color: var(--color-primary);
        font-size: 0.8rem;
    }
    
    .section-title[b-2agv6jtole] {
        flex: 1;
        text-align: left;
    }
    
    .presets-count[b-2agv6jtole] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        font-weight: 400;
    }
    
    .presets-content[b-2agv6jtole] {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid #d0e8ef;
    }
    
    .presets-loading[b-2agv6jtole],
    .presets-empty[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem;
        color: var(--text-secondary);
        font-size: 0.95rem;
    }
    
    .spinner-small[b-2agv6jtole] {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(102, 126, 234, 0.2);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-2agv6jtole 0.8s linear infinite;
    }
    
    .preset-create-btn[b-2agv6jtole] {
        margin-top: 0.5rem;
        padding: 0.5rem 1rem;
        background: rgba(102, 126, 234, 0.1);
        border: 1px solid rgba(102, 126, 234, 0.3);
        border-radius: 4px;
        color: var(--color-primary);
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .preset-create-btn:hover[b-2agv6jtole] {
        background: rgba(102, 126, 234, 0.2);
        border-color: var(--color-primary);
    }
    
    .presets-list[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }
    
    .preset-item[b-2agv6jtole] {
        display: flex;
        align-items: stretch;
        gap: 0.3rem;
        background: transparent;
        border: 1px solid #d0e8ef;
        border-radius: var(--radius);
        overflow: hidden;
        transition: all 0.2s;
    }
    
    .preset-item:hover[b-2agv6jtole] {
        background: var(--surface-hover);
        border-color: var(--color-primary);
    }
    
    .preset-item.default[b-2agv6jtole] {
        border-color: rgba(255, 215, 0, 0.3);
        background: rgba(255, 215, 0, 0.05);
    }
    
    .preset-load-btn[b-2agv6jtole] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        padding: 0.6rem 0.8rem;
        background: transparent;
        border: none;
        color: var(--text-body);
        text-align: left;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .preset-load-btn:hover[b-2agv6jtole] {
        background: rgba(102, 126, 234, 0.1);
    }
    
    .preset-name[b-2agv6jtole] {
        font-size: 0.95rem;
        font-weight: 500;
    }
    
    .preset-description[b-2agv6jtole] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        line-height: 1.3;
    }
    
    .preset-manage-btn[b-2agv6jtole] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        padding: 0;
        background: transparent;
        border: none;
        border-left: 1px solid #d0e8ef;
        color: var(--text-secondary);
        font-size: 1.1rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .preset-manage-btn:hover[b-2agv6jtole] {
        background: var(--surface-hover);
        color: var(--color-primary);
    }
    
    /* Preset Modal Overlay */
    .preset-modal-overlay[b-2agv6jtole] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        animation: fadeIn 0.2s;
    }
    
    .preset-modal[b-2agv6jtole] {
        background: white;
        border: 1px solid rgba(102, 126, 234, 0.3);
        border-radius: 12px;
        width: 90%;
        max-width: 500px;
        max-height: 90vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 60px var(--surface-overlay);
        animation: slideUp-b-2agv6jtole 0.3s ease-out;
    }
    
    .preset-modal-header[b-2agv6jtole] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(102, 126, 234, 0.1);
    }
    
    .preset-modal-header h3[b-2agv6jtole] {
        margin: 0;
        color: var(--text-body);
        font-size: 1.2rem;
    }
    
    .preset-modal-content[b-2agv6jtole] {
        flex: 1;
        padding: 1.5rem;
        overflow-y: auto;
    }
    
    .form-group[b-2agv6jtole] {
        margin-bottom: 1.2rem;
    }
    
    .form-group label[b-2agv6jtole] {
        display: block;
        margin-bottom: 0.4rem;
        color: var(--text-secondary);
        font-size: 0.85rem;
        font-weight: 500;
    }
    
    .form-input[b-2agv6jtole] {
        width: 100%;
        padding: 0.7rem;
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 6px;
        color: var(--text-body);
        font-size: 0.9rem;
        transition: all 0.2s;
    }
    
    .form-input:focus[b-2agv6jtole] {
        outline: none;
        border-color: var(--color-primary);
        background: rgba(0, 0, 0, 0.05);
    }
    
    .form-textarea[b-2agv6jtole] {
        width: 100%;
        padding: 0.7rem;
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 6px;
        color: var(--text-body);
        font-size: 0.85rem;
        font-family: inherit;
        resize: vertical;
        transition: all 0.2s;
    }
    
    .form-textarea:focus[b-2agv6jtole] {
        outline: none;
        border-color: var(--color-primary);
        background: rgba(0, 0, 0, 0.05);
    }
    
    .form-group-checkbox[b-2agv6jtole] {
        margin-bottom: 1.2rem;
    }
    
    .checkbox-label[b-2agv6jtole] {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        cursor: pointer;
        font-size: 0.9rem;
        color: var(--text-body);
    }
    
    .checkbox-label input[type="checkbox"][b-2agv6jtole] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }
    
    .form-hint[b-2agv6jtole] {
        margin-top: 0.4rem;
        color: var(--text-secondary);
        font-size: 0.75rem;
        line-height: 1.4;
    }
    
    .preset-info[b-2agv6jtole] {
        padding: 1rem;
        background: rgba(0,0,0,0.02);
        border: 1px solid rgba(0, 0, 0, 0.03);
        border-radius: 6px;
        margin-bottom: 1rem;
    }
    
    .info-row[b-2agv6jtole] {
        display: flex;
        justify-content: space-between;
        padding: 0.4rem 0;
        font-size: 0.85rem;
    }
    
    .info-label[b-2agv6jtole] {
        color: var(--text-secondary);
    }
    
    .info-value[b-2agv6jtole] {
        color: var(--text-body);
        font-weight: 500;
    }
    
    .preset-message[b-2agv6jtole] {
        padding: 0.8rem;
        border-radius: 6px;
        font-size: 0.85rem;
        text-align: center;
        margin-top: 1rem;
    }
    
    .preset-message.success[b-2agv6jtole] {
        background: rgba(31, 148, 185, 0.08);
        border: 1px solid rgba(31, 148, 185, 0.2);
        color: var(--color-primary);
    }
    
    .preset-message.error[b-2agv6jtole] {
        background: rgba(255, 99, 99, 0.1);
        border: 1px solid rgba(255, 99, 99, 0.3);
        color: #ff6363;
    }
    
    .preset-modal-footer[b-2agv6jtole] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(0, 0, 0, 0.2);
    }
    
    .footer-right[b-2agv6jtole] {
        display: flex;
        gap: 0.6rem;
    }
    
    .btn-primary[b-2agv6jtole],
    .btn-secondary[b-2agv6jtole],
    .btn-danger[b-2agv6jtole] {
        padding: 0.6rem 1.2rem;
        border: none;
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .btn-primary[b-2agv6jtole] {
        background: linear-gradient(135deg, var(--color-indigo) 0%, #764ba2 100%);
        color: var(--text-primary);
    }
    
    .btn-primary:hover:not(:disabled)[b-2agv6jtole] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    
    .btn-primary:disabled[b-2agv6jtole] {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .btn-secondary[b-2agv6jtole] {
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(0, 0, 0, 0.08);
        color: var(--text-body);
    }
    
    .btn-secondary:hover:not(:disabled)[b-2agv6jtole] {
        background: rgba(0, 0, 0, 0.05);
    }
    
    .btn-danger[b-2agv6jtole] {
        background: rgba(255, 99, 99, 0.2);
        border: 1px solid rgba(255, 99, 99, 0.4);
        color: #ff6363;
    }
    
    .btn-danger:hover:not(:disabled)[b-2agv6jtole] {
        background: rgba(255, 99, 99, 0.3);
        border-color: #ff6363;
    }
    
    @keyframes slideUp-b-2agv6jtole {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /* Cost Analysis Styles (Admin-Only) */
    .cost-tab[b-2agv6jtole] {
        background: linear-gradient(135deg, var(--color-indigo) 0%, #764ba2 100%);
        color: var(--text-primary);
    }

    .cost-total[b-2agv6jtole] {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: var(--text-primary);
    }

    .cost-total .stat-label[b-2agv6jtole],
    .cost-total .stat-value[b-2agv6jtole],
    .cost-total .stat-detail[b-2agv6jtole] {
        color: var(--text-primary);
    }

    .cost-projection[b-2agv6jtole] {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        color: var(--text-primary);
    }

    .cost-projection .stat-label[b-2agv6jtole],
    .cost-projection .stat-value[b-2agv6jtole],
    .cost-projection .stat-detail[b-2agv6jtole] {
        color: var(--text-primary);
    }

    .cost-increase[b-2agv6jtole] {
        background: #fef2f2;
        border-left: 4px solid var(--color-danger);
    }

    .cost-increase .stat-value[b-2agv6jtole] {
        color: var(--color-danger);
    }

    .cost-decrease[b-2agv6jtole] {
        background: #f0fdf4;
        border-left: 4px solid #10b981;
    }

    .cost-decrease .stat-value[b-2agv6jtole] {
        color: #059669;
    }

    .peak-distribution[b-2agv6jtole] {
        margin-top: 1rem;
    }

    .peak-bar[b-2agv6jtole] {
        display: flex;
        height: 40px;
        border-radius: 8px;
        overflow: hidden;
        background: #f3f4f6;
    }

    .peak-bar-fill[b-2agv6jtole] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .peak-bar-fill.peak[b-2agv6jtole] {
        background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning) 100%);
        color: var(--text-primary);
    }

    .peak-bar-fill.offpeak[b-2agv6jtole] {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        color: var(--text-primary);
    }

    .btn-link[b-2agv6jtole] {
        display: inline-block;
        padding: 0.75rem 1.5rem;
        background: linear-gradient(135deg, var(--color-indigo) 0%, #764ba2 100%);
        color: var(--text-primary);
        text-decoration: none;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-link:hover[b-2agv6jtole] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    /* ═══ Data Export Modal ═══ */
    .export-modal[b-2agv6jtole] {
        background: var(--surface-card);
        border-radius: 12px;
        border: 1px solid var(--border-default);
        width: 95%;
        max-width: 680px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15);
        animation: slideIn-b-2agv6jtole 0.3s ease-out;
    }

    .export-modal .analysis-modal-header[b-2agv6jtole] {
        padding: 1rem 1.25rem;
        background: var(--sidebar-bg);
        border-bottom: 1px solid var(--border-default);
    }

    .export-modal .analysis-modal-header h3[b-2agv6jtole] {
        font-size: 1.15rem;
        color: var(--color-primary);
    }

    .export-modal-body[b-2agv6jtole] {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .export-section[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .export-label[b-2agv6jtole] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-secondary);
    }

    .export-range-btns[b-2agv6jtole] {
        display: flex;
        gap: 0.4rem;
        flex-wrap: wrap;
    }

    .export-opt-btn[b-2agv6jtole] {
        padding: 0.5rem 1rem;
        border-radius: 6px;
        border: 1px solid var(--border-default);
        background: var(--surface-card);
        color: var(--text-primary);
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.15s;
    }

    .export-opt-btn:hover:not(:disabled)[b-2agv6jtole] {
        border-color: var(--color-primary);
        background: var(--color-primary-10);
    }

    .export-opt-btn.active[b-2agv6jtole] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
        font-weight: 600;
    }

    .export-opt-btn:disabled[b-2agv6jtole] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .export-date-row[b-2agv6jtole] {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 0.25rem;
    }

    .export-date-field[b-2agv6jtole] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .export-date-field label[b-2agv6jtole] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        min-width: fit-content;
    }

    .export-date-input[b-2agv6jtole] {
        padding: 0.4rem 0.6rem;
        border-radius: 5px;
        border: 1px solid var(--border-default);
        background: var(--surface-card);
        color: var(--text-primary);
        font-size: 0.9rem;
    }

    .export-date-input:focus[b-2agv6jtole] {
        border-color: var(--color-primary);
        outline: none;
        box-shadow: 0 0 0 2px var(--color-primary-10);
    }

    .export-range-info[b-2agv6jtole] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
    }

    .export-track-info[b-2agv6jtole] {
        font-size: 0.9rem;
        color: var(--text-primary);
    }

    .export-estimate[b-2agv6jtole] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.85rem;
        color: var(--text-secondary);
        padding: 0.6rem 0.85rem;
        background: var(--surface-sunken);
        border-radius: 6px;
        border: 1px solid var(--border-subtle);
    }

    .export-warn[b-2agv6jtole] {
        color: var(--color-warning);
        font-weight: 500;
    }

    .export-error[b-2agv6jtole] {
        padding: 0.6rem 0.85rem;
        border-radius: 6px;
        background: var(--color-danger-light);
        border: 1px solid var(--color-danger-10);
        color: var(--color-danger);
        font-size: 0.9rem;
    }

    .export-actions[b-2agv6jtole] {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-default);
    }

    .export-actions .btn-secondary[b-2agv6jtole] {
        padding: 0.6rem 1.3rem;
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: 6px;
        color: var(--text-primary);
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s;
    }

    .export-actions .btn-secondary:hover[b-2agv6jtole] {
        background: var(--surface-sunken);
        border-color: var(--border-strong);
    }

    .export-actions .btn-primary[b-2agv6jtole] {
        padding: 0.6rem 1.3rem;
        background: var(--color-primary);
        border: none;
        border-radius: 6px;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s;
        box-shadow: 0 2px 8px rgba(30, 148, 188, 0.25);
    }

    .export-actions .btn-primary:hover:not(:disabled)[b-2agv6jtole] {
        background: var(--color-primary-hover);
        box-shadow: 0 4px 12px rgba(30, 148, 188, 0.35);
    }

    .export-actions .btn-primary:disabled[b-2agv6jtole] {
        opacity: 0.5;
        cursor: not-allowed;
    }
/* /Components/Pages/Heizungen/EnergieTab.razor.rz.scp.css */
.energie-container[b-8kgeodsn5i] { padding: 10px; color: var(--text-body); background: var(--surface-card); }
    .energie-loading[b-8kgeodsn5i] { text-align: center; padding: 60px; color: var(--text-secondary); font-size: 16px; }
    .energie-setup[b-8kgeodsn5i] { text-align: center; padding: 40px; background: var(--surface-card); border-radius: 8px; border: 1px dashed var(--text-secondary); }
    .setup-header h3[b-8kgeodsn5i] { color: var(--color-primary); margin-bottom: 8px; }
    .setup-header p[b-8kgeodsn5i] { color: var(--text-secondary); font-size: 14px; }
    .energie-header[b-8kgeodsn5i] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 10px 0; border-bottom: 1px solid var(--surface-hover); }
    .energie-header h3[b-8kgeodsn5i] { margin: 0; font-size: 18px; color: var(--color-primary); }
    .energie-header-actions[b-8kgeodsn5i] { display: flex; gap: 8px; align-items: center; }
    .energie-btn[b-8kgeodsn5i] { background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-strong); border-radius: 4px; padding: 6px 14px; font-size: 13px; cursor: pointer; transition: all 0.15s; }
    .energie-btn:hover[b-8kgeodsn5i] { background: var(--surface-hover); border-color: var(--color-primary); }
    .energie-btn-primary[b-8kgeodsn5i] { background: var(--color-primary); border-color: var(--color-primary); }
    .energie-btn-primary:hover[b-8kgeodsn5i] { background: var(--color-primary-hover); }
    .energie-btn-primary:disabled[b-8kgeodsn5i] { opacity: 0.5; cursor: not-allowed; }
    .energie-btn-active[b-8kgeodsn5i] { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); }
    .energie-period-select[b-8kgeodsn5i] { background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-strong); border-radius: 4px; padding: 6px 10px; font-size: 13px; }
    
    /* Config panel */
    .energie-config-panel[b-8kgeodsn5i] { background: var(--surface-card); border: 1px solid var(--surface-hover); border-radius: 8px; padding: 16px; margin-bottom: 16px; animation: slideDown-b-8kgeodsn5i 0.2s ease-out; }
    @keyframes slideDown-b-8kgeodsn5i { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 2000px; } }
    .config-section[b-8kgeodsn5i] { margin-bottom: 14px; }
    .config-section h4[b-8kgeodsn5i] { margin: 0 0 6px; font-size: 14px; color: var(--color-primary); }
    .config-hint[b-8kgeodsn5i] { color: var(--text-secondary); font-size: 11px; margin: 0 0 8px; }
    .config-grid[b-8kgeodsn5i] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
    .config-field[b-8kgeodsn5i] { display: flex; flex-direction: column; gap: 3px; }
    .config-field label[b-8kgeodsn5i] { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
    .config-field select[b-8kgeodsn5i], .config-field input[b-8kgeodsn5i] { background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-strong); border-radius: 4px; padding: 5px 8px; font-size: 12px; }
    .config-actions[b-8kgeodsn5i] { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--surface-hover); }
    .config-status[b-8kgeodsn5i] { font-size: 12px; color: var(--color-success); }
    .config-status.error[b-8kgeodsn5i] { color: var(--color-danger); }
    
    /* Pair rows */
    .pair-row[b-8kgeodsn5i] { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 6px 8px; background: var(--surface-card); border-radius: 4px; border: 1px solid var(--surface-sunken); }
    .pair-name[b-8kgeodsn5i] { width: 120px; background: var(--surface-card); color: var(--color-primary); border: 1px solid var(--border-strong); border-radius: 3px; padding: 4px 6px; font-size: 12px; font-weight: 600; }
    .pair-label[b-8kgeodsn5i] { color: var(--text-secondary); font-size: 11px; min-width: 20px; }
    .pair-select[b-8kgeodsn5i] { flex: 1; background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-strong); border-radius: 3px; padding: 4px 6px; font-size: 12px; min-width: 140px; }
    .pair-remove[b-8kgeodsn5i] { background: none; border: none; color: var(--color-danger); cursor: pointer; font-size: 14px; padding: 2px 6px; opacity: 0.6; }
    .pair-remove:hover[b-8kgeodsn5i] { opacity: 1; }
    
    /* Zähler checkboxes */
    .zaehler-check-grid[b-8kgeodsn5i] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; }
    .zaehler-check[b-8kgeodsn5i] { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-hover); border: 1px solid var(--text-secondary); border-radius: 6px; cursor: pointer; transition: all 0.15s; }
    .zaehler-check:hover[b-8kgeodsn5i] { border-color: var(--color-primary); }
    .zaehler-check.checked[b-8kgeodsn5i] { border-color: var(--color-primary); background: var(--color-primary-light); }
    .zaehler-check input[type=checkbox][b-8kgeodsn5i] { accent-color: var(--color-primary); width: 16px; height: 16px; }
    .zaehler-check-name[b-8kgeodsn5i] { font-size: 13px; font-weight: 600; color: var(--text-primary); }
    .zaehler-check-unit[b-8kgeodsn5i] { font-size: 11px; color: var(--text-secondary); padding: 1px 6px; background: var(--surface-card); border-radius: 3px; }
    .zaehler-check-val[b-8kgeodsn5i] { font-size: 10px; color: var(--text-secondary); margin-left: auto; white-space: nowrap; }
    
    /* KPI Cards */
    .kpi-row[b-8kgeodsn5i] { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
    .kpi-card[b-8kgeodsn5i] { background: var(--surface-card); border: 1px solid var(--surface-hover); border-radius: 8px; padding: 12px; text-align: center; }
    .kpi-card.kpi-warning[b-8kgeodsn5i] { border-color: var(--color-warning); }
    .kpi-card.kpi-highlight[b-8kgeodsn5i] { border-color: var(--color-primary); background: var(--color-primary-light); }
    .kpi-value[b-8kgeodsn5i] { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
    .kpi-label[b-8kgeodsn5i] { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
    .kpi-sub[b-8kgeodsn5i] { font-size: 10px; color: var(--text-secondary); margin-top: 3px; }
    
    /* Widget cards */
    .widget-card[b-8kgeodsn5i] { background: var(--surface-card); border: 1px solid var(--surface-hover); border-radius: 8px; padding: 16px; margin-bottom: 12px; }
    .widget-card h4[b-8kgeodsn5i] { margin: 0 0 12px; font-size: 14px; color: var(--border-strong); }
    
    /* Zähler section */
    .zaehler-section[b-8kgeodsn5i] { margin-top: 8px; }
    .gauge-row[b-8kgeodsn5i] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
    .gauge-card[b-8kgeodsn5i] { background: var(--surface-card); border: 1px solid var(--surface-hover); border-radius: 8px; padding: 12px; text-align: center; }
    .gauge-details[b-8kgeodsn5i] { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--text-secondary); }
    .gauge-details b[b-8kgeodsn5i] { color: var(--text-primary); }
    .gauge-no-data[b-8kgeodsn5i] { padding: 16px 8px; text-align: center; }
    .gauge-details-name[b-8kgeodsn5i] { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
    
    @media (max-width: 768px) { .kpi-row[b-8kgeodsn5i] { grid-template-columns: repeat(2, 1fr); } .config-grid[b-8kgeodsn5i] { grid-template-columns: 1fr; } .pair-row[b-8kgeodsn5i] { flex-wrap: wrap; } .gauge-row[b-8kgeodsn5i] { grid-template-columns: 1fr 1fr; } }
/* /Components/Pages/Heizungen/FernbedienungTab.razor.rz.scp.css */
    .fernbed-tab[b-is6nsass3l] {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: var(--surface-workspace);
        overflow: hidden;
        font-size: 1rem;
        position: relative;
    }

    .term-main[b-is6nsass3l] {
        display: flex;
        flex: 1;
        overflow: hidden;
        min-height: 0;
    }

    /* === Sidebar === */
    .term-sidebar[b-is6nsass3l] {
        width: 280px;
        background: var(--sidebar-bg);
        border-right: 1px solid #d0e8ef;
        box-shadow: 2px 0 8px rgba(0,0,0,0.12);
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        overflow-y: auto;
        flex-shrink: 0;
        transition: width 0.3s ease;
        font-size: 1rem;
    }

    .term-control-section[b-is6nsass3l] {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .term-control-title[b-is6nsass3l] {
        font-size: 0.85rem;
        text-transform: uppercase;
        color: var(--text-secondary);
        letter-spacing: 0.05em;
        font-weight: 600;
    }

    .term-ctrl-btn[b-is6nsass3l] {
        padding: 0.6rem 0.8rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: 6px;
        color: var(--text-body);
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .term-ctrl-btn:hover:not(:disabled)[b-is6nsass3l] {
        background: var(--border-strong);
        border-color: var(--color-primary);
    }

    .term-ctrl-btn:disabled[b-is6nsass3l] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .term-ctrl-connect[b-is6nsass3l] { border-color: var(--color-primary); }
    .term-ctrl-disconnect[b-is6nsass3l] { border-color: var(--color-danger); color: var(--color-danger); }

    /* === Connection Status === */
    .term-status-badge[b-is6nsass3l] {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
        border-radius: 6px;
        text-align: center;
        border: 1px solid var(--border-default);
        background: var(--surface-hover);
        color: var(--text-secondary);
    }

    .term-status-badge.connected[b-is6nsass3l] {
        color: var(--color-primary);
        background: rgba(30, 148, 188, 0.1);
        border-color: var(--color-primary);
    }

    .term-status-badge.loading[b-is6nsass3l] {
        color: var(--color-warning);
        background: rgba(245, 158, 11, 0.1);
        border-color: var(--color-warning);
    }

    .term-mode-indicator[b-is6nsass3l] {
        font-size: 0.9rem;
        color: var(--text-secondary);
        text-align: center;
        padding: 0.5rem;
        background: var(--surface-card);
        border-radius: 6px;
        border: 1px solid var(--border-default);
    }

    .term-mode-indicator.connected[b-is6nsass3l] {
        color: var(--color-primary);
        background: rgba(30, 148, 188, 0.1);
    }

    .term-mode-indicator.terminal-mode[b-is6nsass3l] {
        color: var(--color-warning);
        background: rgba(245, 158, 11, 0.1);
    }

    /* === Menu Section (P2xxx) === */
    .term-menu-section[b-is6nsass3l] {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .term-search-box[b-is6nsass3l] {
        position: relative;
        margin-bottom: 0.6rem;
    }

    .term-search-box input[b-is6nsass3l] {
        width: 100%;
        padding: 0.6rem 2rem 0.6rem 0.8rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: 6px;
        color: var(--text-body);
        font-size: 0.95rem;
        outline: none;
        transition: border-color 0.2s;
        box-sizing: border-box;
    }

    .term-search-box input:focus[b-is6nsass3l] {
        border-color: var(--color-primary);
    }

    .term-search-box input[b-is6nsass3l]::placeholder {
        color: var(--text-secondary);
    }

    .term-clear-btn[b-is6nsass3l] {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        padding: 2px 6px;
        font-size: 0.9rem;
    }

    .term-clear-btn:hover[b-is6nsass3l] {
        color: var(--color-danger);
    }

    .term-menu-nav[b-is6nsass3l] {
        flex: 1;
        overflow-y: auto;
    }

    .term-menu-status[b-is6nsass3l] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        color: var(--text-secondary);
        gap: 0.5rem;
        font-size: 0.95rem;
    }

    .term-menu-status.error[b-is6nsass3l] {
        color: var(--color-danger);
    }

    .term-menu-list[b-is6nsass3l], .term-submenu[b-is6nsass3l] {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .term-submenu[b-is6nsass3l] {
        margin-left: 1.2rem;
        padding-left: 0.75rem;
        border-left: 2px solid var(--border-strong);
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: top;
    }

    .term-submenu.collapsed[b-is6nsass3l] {
        max-height: 0;
        opacity: 0;
        pointer-events: none;
        transform: scaleY(0.95);
    }

    .term-submenu.expanded[b-is6nsass3l] {
        max-height: 2000px;
        opacity: 1;
        pointer-events: auto;
        transform: scaleY(1);
    }

    .term-menu-item[b-is6nsass3l] {
        margin: 3px 0;
    }

    .term-menu-item.match > .term-menu-folder[b-is6nsass3l],
    .term-menu-item.match > .term-menu-leaf[b-is6nsass3l] {
        background: rgba(0, 255, 136, 0.15);
    }

    .term-menu-folder[b-is6nsass3l], .term-menu-leaf[b-is6nsass3l] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0.55rem 0.75rem;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.95rem;
        color: var(--text-secondary);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .term-menu-folder:hover[b-is6nsass3l], .term-menu-leaf:hover[b-is6nsass3l] {
        background: rgba(0, 0, 0, 0.05);
    }

    .term-menu-folder.open[b-is6nsass3l] {
        color: var(--color-primary);
        background: rgba(30, 148, 188, 0.1);
    }

    .term-menu-text[b-is6nsass3l] {
        flex: 1;
        white-space: nowrap;
    }

    /* Menu Icons */
    .term-menu-icon[b-is6nsass3l] {
        position: relative;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .term-menu-icon-circle[b-is6nsass3l] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .term-menu-icon-arrow[b-is6nsass3l] {
        font-size: 0.7rem;
        line-height: 1;
        transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .term-menu-icon.folder[b-is6nsass3l] {
        width: 20px;
        height: 20px;
        background: rgba(106, 154, 122, 0.15);
        border: 1px solid rgba(106, 154, 122, 0.3);
        border-radius: 4px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .term-menu-icon.folder .term-menu-icon-arrow[b-is6nsass3l] {
        color: var(--color-success);
    }

    .term-menu-icon.leaf[b-is6nsass3l] {
        width: 20px;
        height: 20px;
    }

    .term-menu-icon.leaf .term-menu-icon-circle[b-is6nsass3l] {
        width: 8px;
        height: 8px;
        background: var(--surface-hover);
        border: 2px solid var(--border-strong);
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0);
    }

    .term-menu-icon.leaf .term-menu-icon-arrow[b-is6nsass3l] {
        display: none;
    }

    .term-menu-folder:hover .term-menu-icon.folder[b-is6nsass3l] {
        background: rgba(0, 255, 136, 0.2);
        border-color: rgba(0, 255, 136, 0.5);
        box-shadow: 0 0 8px rgba(30, 148, 188, 0.2);
    }

    .term-menu-folder:hover .term-menu-icon-arrow[b-is6nsass3l] {
        color: var(--color-primary);
    }

    .term-menu-leaf:hover .term-menu-icon-circle[b-is6nsass3l] {
        background: rgba(0, 255, 136, 0.4);
        border-color: var(--color-primary);
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
        transform: scale(1.2);
    }

    .term-menu-folder:active .term-menu-icon.folder[b-is6nsass3l] {
        transform: scale(1.1);
        background: rgba(30, 148, 188, 0.2);
        box-shadow: 0 0 12px rgba(0, 255, 136, 0.5);
    }

    .term-menu-leaf:active .term-menu-icon-circle[b-is6nsass3l] {
        transform: scale(1.4);
        background: rgba(0, 255, 136, 0.6);
        box-shadow: 0 0 14px rgba(0, 255, 136, 0.7);
    }

    .term-menu-folder.open .term-menu-icon.folder[b-is6nsass3l] {
        background: rgba(0, 255, 136, 0.25);
        border-color: var(--color-primary);
        box-shadow: 0 0 6px rgba(30, 148, 188, 0.2);
    }

    .term-menu-folder.open .term-menu-icon-arrow[b-is6nsass3l] {
        transform: rotate(90deg);
        color: var(--color-primary);
    }

    .term-menu-leaf[b-is6nsass3l] {
        color: var(--text-muted);
    }

    .term-menu-leaf:hover[b-is6nsass3l] {
        color: var(--color-primary);
    }

    mark[b-is6nsass3l] {
        background: var(--color-primary);
        color: var(--surface-page);
        padding: 0 2px;
        border-radius: 2px;
    }

    /* === Theme Picker === */
    .term-theme-grid[b-is6nsass3l] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .term-theme-btn[b-is6nsass3l] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.5rem;
        background: var(--surface-hover);
        border: 1.5px solid var(--border-default);
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.75rem;
        color: var(--text-secondary);
        transition: all 0.15s;
    }

    .term-theme-btn:hover[b-is6nsass3l] {
        border-color: var(--color-primary);
        background: var(--surface-hover);
    }

    .term-theme-btn.active[b-is6nsass3l] {
        border-color: var(--text-body);
        background: var(--border-strong);
        color: var(--text-body);
        font-weight: 600;
    }

    .term-theme-preview[b-is6nsass3l] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 20px;
        border-radius: 3px;
        font-family: 'Consolas', monospace;
        font-size: 11px;
        font-weight: 700;
        flex-shrink: 0;
        border: 1px solid rgba(0,0,0,0.15);
    }

    /* Custom theme editor */
    .term-custom-section[b-is6nsass3l] {
        margin-top: 0.5rem;
        border-top: 1px solid var(--border-default);
        padding-top: 0.5rem;
    }

    .term-custom-header[b-is6nsass3l] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.35rem;
    }

    .term-custom-label[b-is6nsass3l] {
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .term-custom-add[b-is6nsass3l] {
        background: none;
        border: 1px solid var(--border-default);
        border-radius: 4px;
        color: var(--color-primary);
        cursor: pointer;
        font-size: 0.85rem;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: all 0.15s;
    }

    .term-custom-add:hover[b-is6nsass3l] {
        background: var(--color-primary);
        color: var(--text-on-primary);
        border-color: var(--color-primary);
    }

    .term-custom-editor[b-is6nsass3l] {
        background: var(--surface-sunken);
        border: 1px solid var(--border-default);
        border-radius: 6px;
        padding: 0.5rem;
        margin-bottom: 0.4rem;
    }

    .term-custom-name[b-is6nsass3l] {
        width: 100%;
        padding: 0.3rem 0.5rem;
        border: 1px solid var(--border-default);
        border-radius: 4px;
        font-size: 0.82rem;
        background: var(--surface-card);
        color: var(--text-primary);
        margin-bottom: 0.4rem;
        box-sizing: border-box;
    }

    .term-custom-name:focus[b-is6nsass3l] {
        outline: none;
        border-color: var(--color-primary);
    }

    .term-custom-colors[b-is6nsass3l] {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.4rem;
    }

    .term-custom-colors label[b-is6nsass3l] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.72rem;
        color: var(--text-secondary);
    }

    .term-custom-colors input[type="color"][b-is6nsass3l] {
        width: 28px;
        height: 22px;
        padding: 0;
        border: 1px solid var(--border-default);
        border-radius: 3px;
        cursor: pointer;
        background: none;
    }

    .term-custom-preview-row[b-is6nsass3l] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .term-custom-save[b-is6nsass3l] {
        flex: 1;
        padding: 0.3rem 0.5rem;
        background: var(--color-primary);
        color: var(--text-on-primary);
        border: none;
        border-radius: 4px;
        font-size: 0.78rem;
        cursor: pointer;
        transition: opacity 0.15s;
    }

    .term-custom-save:hover[b-is6nsass3l] { opacity: 0.85; }

    .term-custom-list[b-is6nsass3l] {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .term-custom-item[b-is6nsass3l] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.5rem;
        background: var(--surface-hover);
        border: 1.5px solid var(--border-default);
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.75rem;
        color: var(--text-secondary);
        transition: all 0.15s;
    }

    .term-custom-item:hover[b-is6nsass3l] {
        border-color: var(--color-primary);
    }

    .term-custom-item.active[b-is6nsass3l] {
        border-color: var(--text-body);
        background: var(--border-strong);
        color: var(--text-body);
        font-weight: 600;
    }

    .term-custom-item-name[b-is6nsass3l] {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .term-custom-delete[b-is6nsass3l] {
        background: none;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 0.7rem;
        padding: 0 0.2rem;
        opacity: 0.5;
        transition: opacity 0.15s;
    }

    .term-custom-delete:hover[b-is6nsass3l] {
        opacity: 1;
        color: var(--color-danger);
    }

    /* === Info Overlay (top right of content area) === */
    .term-info-overlay[b-is6nsass3l] {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        z-index: 60;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        background: var(--surface-overlay, rgba(15, 23, 42, 0.85));
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        padding: 0.6rem 0.85rem;
        backdrop-filter: blur(8px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        max-width: 320px;
        pointer-events: auto;
    }

    .term-info-status[b-is6nsass3l] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: var(--text-secondary);
        padding-bottom: 0.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 0.1rem;
    }

    .status-dot[b-is6nsass3l] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--text-secondary);
        flex-shrink: 0;
        transition: background 0.3s;
    }

    .status-dot.connected[b-is6nsass3l] {
        background: var(--color-success, #22c55e);
        box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
    }

    .term-info-item[b-is6nsass3l] {
        display: flex;
        gap: 0.4rem;
        font-size: 0.78rem;
    }

    .term-info-label[b-is6nsass3l] {
        color: var(--text-secondary);
        white-space: nowrap;
    }

    .term-info-value[b-is6nsass3l] {
        color: var(--text-body);
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* === Connection Spinner === */
    .connection-spinner[b-is6nsass3l] {
        width: 60px;
        height: 60px;
        border: 4px solid var(--border-strong);
        border-top: 4px solid var(--color-primary);
        border-radius: 50%;
        margin: 0 auto 1.5rem;
        animation: spin-b-is6nsass3l 1s linear infinite;
    }

    .connection-spinner.small[b-is6nsass3l] {
        width: 20px;
        height: 20px;
        border-width: 2px;
        margin: 0;
    }

    @keyframes spin-b-is6nsass3l {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* === Arrow Pad === */
    .term-arrow-pad[b-is6nsass3l] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .term-arrow-row[b-is6nsass3l] {
        display: flex;
        gap: 6px;
    }

    .term-arrow-btn[b-is6nsass3l] {
        width: 48px;
        height: 48px;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        color: var(--text-body);
        font-size: 1.2rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
    }

    .term-arrow-btn:hover:not(:disabled)[b-is6nsass3l] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--surface-page);
    }

    .term-arrow-btn:disabled[b-is6nsass3l] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .term-enter-btn[b-is6nsass3l] {
        background: rgba(30,148,188,0.15);
        border-color: var(--color-primary);
    }

    /* === Terminal Content Area === */
    .term-content-area[b-is6nsass3l] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
    }

    /* Navigation Overlay (bottom right corner) */
    .term-navigation-overlay[b-is6nsass3l] {
        position: absolute;
        bottom: 1.5rem;
        right: 1.5rem;
        background: var(--surface-overlay);
        border: 1px solid var(--border-strong);
        border-radius: 12px;
        padding: 0.75rem;
        z-index: 50;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    /* === Legacy Terminal Display === */
    .term-terminal-panel[b-is6nsass3l] {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: var(--terminal-bg);
        overflow: hidden;
        min-height: 0;
    }

    .term-terminal-header[b-is6nsass3l] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background: var(--terminal-bg);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        font-size: 0.85rem;
    }

    .term-terminal-header span[b-is6nsass3l] {
        color: var(--terminal-text);
        opacity: 0.6;
    }

    .term-terminal-info[b-is6nsass3l] {
        display: flex;
        gap: 1rem;
        font-size: 0.8rem;
        justify-content: flex-end;
    }

    .term-terminal-display[b-is6nsass3l] {
        flex: 1;
        position: relative;
        overflow: hidden;
        background: var(--terminal-bg);
        min-height: 0;
    }

    .term-terminal-wrapper[b-is6nsass3l] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 12px;
        overflow: hidden;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: var(--term-font-size, 18px);
        line-height: 1.2;
        color: var(--terminal-text);
        white-space: pre;
    }

    .terminal-cursor[b-is6nsass3l] {
        position: absolute;
        background: var(--terminal-cursor, var(--terminal-text));
        outline: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
        animation: blink-b-is6nsass3l 1s step-end infinite;
        display: none;
        pointer-events: none;
    }

    .terminal-cursor.visible[b-is6nsass3l] {
        display: block;
    }

    @keyframes blink-b-is6nsass3l {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0; }
    }

    /* Character attributes - inverse, red */
    .term-terminal-wrapper .char-inverse[b-is6nsass3l],
    #terminalRows .char-inverse[b-is6nsass3l] {
        color: var(--terminal-bg);
        background: var(--terminal-text);
    }

    .term-terminal-wrapper .char-red[b-is6nsass3l],
    #terminalRows .char-red[b-is6nsass3l] {
        color: var(--color-danger);
        background: transparent;
    }

    .term-terminal-wrapper .char-red-inverse[b-is6nsass3l],
    #terminalRows .char-red-inverse[b-is6nsass3l] {
        color: var(--terminal-bg);
        background: var(--color-danger);
    }

    /* Terminal Text Mode */
    .term-terminal-text[b-is6nsass3l] {
        flex: 1;
        background: var(--terminal-bg);
        overflow-y: auto;
        min-height: 0;
        display: none;
    }

    .term-terminal-text pre[b-is6nsass3l] {
        margin: 0;
        padding: 12px;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: clamp(16px, 2vw, 22px);
        color: var(--terminal-text);
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    /* === Help Footer === */
    .term-help[b-is6nsass3l] {
        display: flex;
        gap: 2rem;
        padding: 0.6rem 1rem;
        background: var(--surface-card);
        border-top: 1px solid var(--border-strong);
        font-size: 0.9rem;
        color: var(--text-secondary);
        flex-shrink: 0;
    }

    .term-help-item strong[b-is6nsass3l] {
        color: var(--text-muted);
    }

    /* Mode visibility */
    .term-fernbed-only.hidden[b-is6nsass3l] {
        display: none !important;
    }

    .term-terminal-only[b-is6nsass3l] {
        display: none;
    }

    .term-terminal-only.visible[b-is6nsass3l] {
        display: block;
    }

    /* === Responsive - Extra Large screens === */
    @media (min-width: 1600px) {
        .term-sidebar[b-is6nsass3l] {
            width: 340px;
            padding: 1.2rem;
            gap: 1.5rem;
        }

        .term-ctrl-btn[b-is6nsass3l] {
            font-size: 1.15rem;
            padding: 0.9rem 1.1rem;
        }

        .term-arrow-btn[b-is6nsass3l] {
            width: 65px;
            height: 65px;
            font-size: 1.6rem;
        }

        .term-terminal-wrapper[b-is6nsass3l] {
            --term-font-size: 24px;
        }

        .term-mode-indicator[b-is6nsass3l] {
            font-size: 1.05rem;
            padding: 0.6rem;
        }

        .term-control-title[b-is6nsass3l] {
            font-size: 1rem;
        }

        .term-search-box input[b-is6nsass3l] {
            font-size: 1.05rem;
            padding: 0.7rem 2.2rem 0.7rem 0.9rem;
        }

        .term-menu-folder[b-is6nsass3l], .term-menu-leaf[b-is6nsass3l] {
            font-size: 1.05rem;
            padding: 0.55rem 0.7rem;
        }

        .term-navigation-overlay[b-is6nsass3l] {
            bottom: 2rem;
            right: 2rem;
            padding: 1rem;
        }
    }

    /* === Responsive - Large screens === */
    @media (min-width: 1400px) and (max-width: 1599px) {
        .term-sidebar[b-is6nsass3l] {
            width: 300px;
            padding: 1.1rem;
        }

        .term-ctrl-btn[b-is6nsass3l] {
            font-size: 1.1rem;
            padding: 0.8rem 1rem;
        }

        .term-arrow-btn[b-is6nsass3l] {
            width: 60px;
            height: 60px;
            font-size: 1.5rem;
        }

        .term-terminal-wrapper[b-is6nsass3l] {
            --term-font-size: 22px;
        }

        .term-mode-indicator[b-is6nsass3l] {
            font-size: 1rem;
            padding: 0.5rem;
        }

        .term-control-title[b-is6nsass3l] {
            font-size: 0.95rem;
        }

        .term-search-box input[b-is6nsass3l] {
            font-size: 1rem;
        }

        .term-menu-folder[b-is6nsass3l], .term-menu-leaf[b-is6nsass3l] {
            font-size: 1rem;
            padding: 0.5rem 0.65rem;
        }

        .term-navigation-overlay[b-is6nsass3l] {
            bottom: 1.75rem;
            right: 1.75rem;
            padding: 0.9rem;
        }
    }

    /* === Responsive - Medium screens === */
    @media (max-width: 1200px) {
        .term-sidebar[b-is6nsass3l] {
            width: 260px;
            padding: 0.85rem;
            gap: 1rem;
        }

        .term-ctrl-btn[b-is6nsass3l] {
            font-size: 0.9rem;
            padding: 0.55rem 0.7rem;
        }

        .term-arrow-btn[b-is6nsass3l] {
            width: 48px;
            height: 48px;
            font-size: 1.15rem;
        }

        .term-terminal-wrapper[b-is6nsass3l] {
            --term-font-size: 16px;
        }

        .term-mode-indicator[b-is6nsass3l] {
            font-size: 0.85rem;
        }

        .term-control-title[b-is6nsass3l] {
            font-size: 0.8rem;
        }

        .term-search-box input[b-is6nsass3l] {
            font-size: 0.9rem;
            padding: 0.55rem 1.9rem 0.55rem 0.7rem;
        }

        .term-menu-folder[b-is6nsass3l], .term-menu-leaf[b-is6nsass3l] {
            font-size: 0.9rem;
            padding: 0.4rem 0.55rem;
        }

        .term-navigation-overlay[b-is6nsass3l] {
            bottom: 1.25rem;
            right: 1.25rem;
            padding: 0.7rem;
        }
    }

    /* === Sidebar collapses to compact strip — expand on hover === */
    @media (max-width: 1024px) {
        .term-sidebar[b-is6nsass3l] {
            width: 52px;
            padding: 0.5rem 0.4rem;
            overflow: hidden;
            transition: width 0.25s ease;
            z-index: 100;
            gap: 0.8rem;
        }

        .term-sidebar:hover[b-is6nsass3l],
        .term-sidebar:focus-within[b-is6nsass3l] {
            width: 280px;
            padding: 0.85rem;
            overflow-y: auto;
            box-shadow: 4px 0 16px rgba(0,0,0,0.15);
        }

        /* Collapsed: hide text labels, keep icons */
        .term-sidebar:not(:hover):not(:focus-within) .term-control-title[b-is6nsass3l],
        .term-sidebar:not(:hover):not(:focus-within) .term-mode-indicator[b-is6nsass3l],
        .term-sidebar:not(:hover):not(:focus-within) .term-menu-section[b-is6nsass3l] {
            display: none;
        }

        /* Hide info overlay when sidebar is collapsed */
        .term-info-overlay[b-is6nsass3l] {
            display: none;
        }

        .term-sidebar:not(:hover):not(:focus-within) .term-ctrl-btn[b-is6nsass3l] {
            font-size: 0;
            padding: 0.6rem;
            text-align: center;
            min-height: 40px;
        }

        /* Show only emoji in collapsed buttons */
        .term-sidebar:not(:hover):not(:focus-within) .term-ctrl-connect[b-is6nsass3l]::first-letter,
        .term-sidebar:not(:hover):not(:focus-within) .term-ctrl-disconnect[b-is6nsass3l]::first-letter {
            font-size: 1.1rem;
        }

        /* Hide theme and status when collapsed */
        .term-sidebar:not(:hover):not(:focus-within) .term-theme-toggle[b-is6nsass3l],
        .term-sidebar:not(:hover):not(:focus-within) .term-theme-panel[b-is6nsass3l],
        .term-sidebar:not(:hover):not(:focus-within) .term-status-badge[b-is6nsass3l] {
            display: none;
        }

        .term-ctrl-btn[b-is6nsass3l] {
            font-size: 0.9rem;
        }

        .term-menu-folder[b-is6nsass3l], .term-menu-leaf[b-is6nsass3l] {
            font-size: 0.9rem;
        }

        .term-search-box input[b-is6nsass3l] {
            font-size: 0.9rem;
        }

        .term-terminal-wrapper[b-is6nsass3l] {
            --term-font-size: 15px;
        }

        .term-navigation-overlay[b-is6nsass3l] {
            bottom: 1rem;
            right: 1rem;
            padding: 0.6rem;
        }

        .term-navigation-overlay .term-arrow-btn[b-is6nsass3l] {
            width: 44px;
            height: 44px;
            font-size: 1.1rem;
        }
    }

    /* === Small screens — sidebar becomes horizontal toolbar === */
    @media (max-width: 768px) {
        .term-main[b-is6nsass3l] {
            flex-direction: column;
        }

        .term-sidebar[b-is6nsass3l] {
            width: 100% !important;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            padding: 0.5rem 0.6rem;
            gap: 0.4rem;
            border-right: none;
            border-bottom: 1px solid var(--border-strong);
            box-shadow: none;
            overflow: visible;
            transition: none;
        }

        .term-control-section[b-is6nsass3l] {
            flex-direction: row;
            align-items: center;
            gap: 0.4rem;
        }

        .term-control-title[b-is6nsass3l],
        .term-mode-indicator[b-is6nsass3l],
        .term-menu-section[b-is6nsass3l] {
            display: none;
        }

        .term-info-overlay[b-is6nsass3l] {
            font-size: 0.7rem;
            padding: 0.4rem 0.6rem;
            max-width: 250px;
        }

        .term-info-item[b-is6nsass3l] {
            font-size: 0.7rem;
        }

        .term-info-status[b-is6nsass3l] {
            font-size: 0.7rem;
        }

        .term-ctrl-btn[b-is6nsass3l] {
            padding: 0.45rem 0.6rem;
            font-size: 0.85rem;
        }

        /* Theme toggle inline */
        .term-theme-toggle[b-is6nsass3l] {
            padding: 0.4rem 0.6rem;
            font-size: 0.85rem;
        }

        .term-theme-panel[b-is6nsass3l] {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 200;
            background: var(--sidebar-bg);
            border-bottom: 1px solid var(--border-strong);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            padding: 0.5rem;
        }

        .term-arrow-btn[b-is6nsass3l] {
            width: 40px;
            height: 40px;
            font-size: 1rem;
        }

        .term-terminal-wrapper[b-is6nsass3l] {
            --term-font-size: 14px;
        }

        .term-help[b-is6nsass3l] {
            flex-wrap: wrap;
            gap: 0.6rem;
            font-size: 0.8rem;
            padding: 0.4rem 0.6rem;
        }

        .term-navigation-overlay[b-is6nsass3l] {
            bottom: 0.5rem;
            right: 0.5rem;
            padding: 0.5rem;
        }

        .term-navigation-overlay .term-arrow-btn[b-is6nsass3l] {
            width: 38px;
            height: 38px;
            font-size: 0.95rem;
        }
    }

    /* === Very small screens — minimal UI === */
    @media (max-width: 480px) {
        .term-sidebar[b-is6nsass3l] {
            padding: 0.35rem 0.5rem;
        }

        .term-ctrl-btn[b-is6nsass3l] {
            padding: 0.4rem 0.5rem;
            font-size: 0.8rem;
        }

        /* Hide theme and info overlay on very small screens */
        .term-theme-toggle[b-is6nsass3l],
        .term-theme-panel[b-is6nsass3l],
        .term-info-overlay[b-is6nsass3l] {
            display: none;
        }

        .term-terminal-wrapper[b-is6nsass3l] {
            --term-font-size: 12px;
            padding: 6px;
        }

        .term-help[b-is6nsass3l] {
            display: none;
        }

        .term-navigation-overlay .term-arrow-btn[b-is6nsass3l] {
            width: 34px;
            height: 34px;
            font-size: 0.85rem;
        }
    }

    /* === Owner/Viewer Mode Styles === */

    .viewer-banner[b-is6nsass3l] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        background: linear-gradient(135deg, var(--surface-page), var(--surface-card));
        border-bottom: 2px solid var(--color-danger);
        color: var(--text-body);
        font-size: 0.9rem;
        z-index: 100;
    }

    .viewer-banner-icon[b-is6nsass3l] {
        font-size: 1.2rem;
    }

    .viewer-banner-text strong[b-is6nsass3l] {
        color: var(--color-danger);
    }

    .viewer-disabled[b-is6nsass3l] {
        opacity: 0.4 !important;
        pointer-events: none !important;
        cursor: not-allowed !important;
    }

    .viewer-panel[b-is6nsass3l] {
        margin-top: 8px;
    }

    .viewer-panel .term-control-section[b-is6nsass3l] {
        background: rgba(74, 222, 128, 0.05);
        border: 1px solid rgba(74, 222, 128, 0.15);
        border-radius: 8px;
        padding: 10px;
    }

    .viewer-panel .term-control-title[b-is6nsass3l] {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .viewer-item[b-is6nsass3l] {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 10px 8px;
        margin-bottom: 6px;
        background: rgba(0,0,0,0.02);
        border-radius: 6px;
        border: 1px solid rgba(0,0,0,0.04);
    }

    .viewer-name[b-is6nsass3l] {
        color: var(--text-muted);
        font-size: 0.95rem;
        font-weight: 500;
    }

    .viewer-transfer-btn[b-is6nsass3l] {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
        background: rgba(22,163,74,0.15) !important;
        border: 1px solid var(--color-success) !important;
        color: var(--color-success) !important;
        border-radius: 6px !important;
        cursor: pointer;
        transition: all 0.2s ease;
        width: 100%;
        text-align: center;
    }

    .viewer-transfer-btn:hover[b-is6nsass3l] {
        background: var(--color-success) !important;
        color: var(--text-primary) !important;
        transform: scale(1.02);
    }

    .control-offer-dialog[b-is6nsass3l] {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
    }

    .control-offer-content[b-is6nsass3l] {
        background: var(--surface-page);
        border: 2px solid var(--color-success);
        border-radius: 12px;
        padding: 24px 32px;
        text-align: center;
        max-width: 400px;
        color: var(--text-body);
        box-shadow: 0 8px 32px rgba(74, 222, 128, 0.2);
    }

    .control-offer-icon[b-is6nsass3l] {
        font-size: 2.5rem;
        margin-bottom: 12px;
    }

    .control-offer-text[b-is6nsass3l] {
        font-size: 1rem;
        margin-bottom: 20px;
        line-height: 1.5;
    }

    .control-offer-text strong[b-is6nsass3l] {
        color: var(--color-success);
    }

    .control-offer-buttons[b-is6nsass3l] {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-bottom: 12px;
    }

    .control-offer-accept[b-is6nsass3l],
    .control-offer-deny[b-is6nsass3l] {
        padding: 10px 24px;
        border: none;
        border-radius: 8px;
        font-size: 0.95rem;
        cursor: pointer;
        font-weight: 600;
    }

    .control-offer-accept[b-is6nsass3l] {
        background: var(--color-success);
        color: var(--text-primary);
    }

    .control-offer-accept:hover[b-is6nsass3l] {
        background: var(--color-success);
    }

    .control-offer-deny[b-is6nsass3l] {
        background: rgba(220,38,38,0.1);
        color: var(--color-danger);
        border: 1px solid var(--color-danger);
    }

    .control-offer-deny:hover[b-is6nsass3l] {
        background: var(--color-danger);
        color: var(--text-primary);
    }

    .control-offer-timer[b-is6nsass3l] {
        font-size: 0.8rem;
        color: var(--text-secondary);
    }
/* /Components/Pages/Heizungen/HeizungConsole.razor.rz.scp.css */
.console-container[b-gexqf2ie75] {
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        background: var(--surface-workspace);
        color: var(--text-body);
        overflow: hidden;
    }

    .console-loading[b-gexqf2ie75], .console-error[b-gexqf2ie75] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        background: var(--surface-workspace);
        color: var(--text-body);
        gap: 1rem;
    }

    .console-spinner[b-gexqf2ie75] {
        width: 40px;
        height: 40px;
        border: 3px solid var(--border-strong);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-gexqf2ie75 1s linear infinite;
    }

    @keyframes spin-b-gexqf2ie75 {
        to { transform: rotate(360deg); }
    }

    .console-back-link[b-gexqf2ie75] {
        color: var(--color-primary);
        text-decoration: none;
        margin-top: 1rem;
    }

    .console-back-link:hover[b-gexqf2ie75] {
        text-decoration: underline;
    }

    /* Header */
    .console-header[b-gexqf2ie75] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        background: var(--surface-card);
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        border-bottom: 1px solid var(--border-strong);
        flex-shrink: 0;
    }

    .console-title[b-gexqf2ie75] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .console-icon[b-gexqf2ie75] {
        font-size: 1.25rem;
    }

    .console-title h1[b-gexqf2ie75] {
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-primary);
        margin: 0;
    }

    .console-subtitle[b-gexqf2ie75] {
        color: var(--text-secondary);
        font-size: 0.8rem;
    }

    .console-header-right[b-gexqf2ie75] {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .console-status[b-gexqf2ie75] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: var(--text-secondary);
    }

    .status-dot[b-gexqf2ie75] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--text-secondary);
    }

    .status-dot.connected[b-gexqf2ie75] {
        background: var(--color-primary);
        box-shadow: 0 0 8px rgba(30,148,188,0.5);
    }

    /* Tabs */
    .console-tabs[b-gexqf2ie75] {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        background: var(--surface-card);
        border-bottom: 1px solid var(--border-strong);
        overflow-x: auto;
        flex-shrink: 0;
        padding: 0;
        gap: 0;
    }
    
    .console-tabs-spacer[b-gexqf2ie75] {
        flex: 1;
    }
    
    .console-action-btn[b-gexqf2ie75] {
        margin: 0.6rem 0.3rem;
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        white-space: nowrap;
        align-self: center;
        background: rgba(30, 148, 188, 0.1);
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }
    
    .console-action-btn:hover[b-gexqf2ie75] {
        background: rgba(30, 148, 188, 0.2);
        box-shadow: 0 0 8px rgba(30, 148, 188, 0.3);
    }
    
    .console-upload-btn[b-gexqf2ie75] {
        background: rgba(241, 143, 1, 0.1);
        border-color: #F18F01;
        color: #F18F01;
    }
    
    .console-upload-btn:hover[b-gexqf2ie75] {
        background: rgba(241, 143, 1, 0.2);
        box-shadow: 0 0 8px rgba(241, 143, 1, 0.3);
    }

    .console-copy-btn[b-gexqf2ie75] {
        margin: 0.6rem 1.2rem;
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
        white-space: nowrap;
        align-self: center;
        background: rgba(30, 148, 188, 0.1);
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .console-copy-btn:hover[b-gexqf2ie75] {
        background: rgba(0, 255, 136, 0.2);
        box-shadow: 0 0 8px rgba(30, 148, 188, 0.2);
    }

    .console-tab[b-gexqf2ie75] {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 1rem 1.5rem;
        color: var(--text-secondary);
        text-decoration: none;
        border: none;
        border-bottom: 3px solid transparent;
        transition: all 0.2s ease;
        white-space: nowrap;
        font-size: 0.95rem;
        cursor: pointer;
        background: transparent;
        font-family: inherit;
    }

    .console-tab:hover[b-gexqf2ie75] {
        color: var(--text-body);
        background: rgba(0, 0, 0, 0.05);
    }

    .console-tab.active[b-gexqf2ie75] {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
        background: rgba(30, 148, 188, 0.1);
    }

    .console-tab-home[b-gexqf2ie75] {
        width: 280px;
        min-width: 280px;
        justify-content: center;
        color: var(--color-warning);
        background: linear-gradient(135deg, #fffbeb 0%, var(--color-warning-light) 100%);
        border: none;
        border-right: 1px solid var(--border-default);
        border-bottom: 3px solid transparent;
        flex-shrink: 0;
        cursor: pointer;
        font-family: inherit;
        font-size: 1rem;
        padding: 1rem 1.2rem;
    }

    .console-tab-home:hover[b-gexqf2ie75] {
        color: var(--color-primary);
        background: rgba(245, 158, 11, 0.2);
    }

    .console-tab-terminal[b-gexqf2ie75] {
        color: var(--color-indigo);
        border-bottom-color: transparent !important;
    }
    .console-tab-terminal:hover[b-gexqf2ie75] {
        color: var(--color-indigo);
        background: rgba(139, 92, 246, 0.15);
    }
    .console-tab-terminal.terminal-mode[b-gexqf2ie75] {
        color: var(--color-success);
        border-bottom-color: var(--color-success) !important;
    }
    .console-tab-terminal .term-mode-indicator[b-gexqf2ie75] {
        font-size: 0.7rem;
        opacity: 0.7;
        margin-left: 0.3rem;
    }
    .console-tab-terminal .term-mode-indicator.connected[b-gexqf2ie75] {
        color: var(--color-success);
        opacity: 1;
    }
    .console-tab-terminal .term-mode-indicator.connected[b-gexqf2ie75]::before {
        content: '●';
        margin-right: 0.2rem;
    }

    .tab-icon[b-gexqf2ie75] {
        font-size: 1.1rem;
    }

    .tab-text[b-gexqf2ie75] {
        font-size: 0.95rem;
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    /* Content */
    .console-content[b-gexqf2ie75] {
        flex: 1;
        overflow: hidden;
        min-height: 0;
        position: relative;
    }
    
    /* Tab panels - all rendered but only active one visible, with fade transition */
    .tab-panel[b-gexqf2ie75] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        opacity: 0;
        transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
    }
    
    .tab-panel.hidden[b-gexqf2ie75] {
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
    }
    
    .tab-panel.active[b-gexqf2ie75] {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
    }

    /* Connection Modal styles moved to global app.css */

    /* Responsive - Extra Large screens */
    @media (min-width: 1600px) {
        .console-tab-home[b-gexqf2ie75] {
            width: 340px;
            min-width: 340px;
            font-size: 1.1rem;
            padding: 1.1rem 1.4rem;
        }
        
        .console-tab[b-gexqf2ie75] {
            font-size: 1.05rem;
            padding: 1.1rem 1.6rem;
        }
        
        .tab-icon[b-gexqf2ie75] {
            font-size: 1.2rem;
        }
        
        .tab-text[b-gexqf2ie75] {
            font-size: 1.05rem;
        }
        
        .console-copy-btn[b-gexqf2ie75] {
            font-size: 1.05rem;
            padding: 0.7rem 1.4rem;
        }
        
        .console-title h1[b-gexqf2ie75] {
            font-size: 1.25rem;
        }
        
        .console-status[b-gexqf2ie75] {
            font-size: 1rem;
        }
    }

    /* Responsive - Large screens */
    @media (min-width: 1400px) and (max-width: 1599px) {
        .console-tab-home[b-gexqf2ie75] {
            width: 300px;
            min-width: 300px;
            font-size: 1.05rem;
            padding: 1rem 1.3rem;
        }
        
        .console-tab[b-gexqf2ie75] {
            font-size: 1rem;
            padding: 1rem 1.4rem;
        }
        
        .tab-icon[b-gexqf2ie75] {
            font-size: 1.15rem;
        }
        
        .tab-text[b-gexqf2ie75] {
            font-size: 1rem;
        }
        
        .console-copy-btn[b-gexqf2ie75] {
            font-size: 1rem;
            padding: 0.65rem 1.3rem;
        }
        
        .console-title h1[b-gexqf2ie75] {
            font-size: 1.15rem;
        }
        
        .console-status[b-gexqf2ie75] {
            font-size: 0.95rem;
        }
    }
    
    /* Responsive - Medium screens */
    @media (max-width: 1200px) {
        .console-tab-home[b-gexqf2ie75] {
            width: 260px;
            min-width: 260px;
            font-size: 0.95rem;
            padding: 0.9rem 1.1rem;
        }
        
        .console-tab[b-gexqf2ie75] {
            font-size: 0.9rem;
            padding: 0.9rem 1.2rem;
        }
        
        .tab-text[b-gexqf2ie75] {
            font-size: 0.9rem;
        }
        
        .console-copy-btn[b-gexqf2ie75] {
            font-size: 0.9rem;
            padding: 0.55rem 1rem;
        }
    }
    
    /* Responsive - Small-Medium screens */
    @media (max-width: 1024px) {
        .console-tab-home[b-gexqf2ie75] {
            width: 200px;
            min-width: 200px;
            font-size: 0.9rem;
        }
        
        .console-tab[b-gexqf2ie75] {
            padding: 0.8rem 1rem;
        }
    }

    /* Responsive - Small screens */
    @media (max-width: 768px) {
        .console-header[b-gexqf2ie75] {
            padding: 0.4rem 0.75rem;
        }

        .console-subtitle[b-gexqf2ie75] {
            display: none;
        }

        .console-tabs[b-gexqf2ie75] {
            padding: 0;
        }

        .console-tab[b-gexqf2ie75] {
            padding: 0.5rem 0.6rem;
        }

        .console-tab-home[b-gexqf2ie75] {
            width: auto;
            min-width: 50px;
        }

        .tab-text[b-gexqf2ie75] {
            display: none;
        }

        .tab-icon[b-gexqf2ie75] {
            font-size: 1.1rem;
        }

        .console-copy-btn[b-gexqf2ie75] {
            margin: 0.3rem 0.5rem;
            padding: 0.4rem 0.6rem;
            font-size: 0.75rem;
        }
    }
/* /Components/Pages/Heizungen/KontaktePage.razor.rz.scp.css */
.kontakte-page[b-yzwr59gzal] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    color: var(--text-body);
}

.page-header[b-yzwr59gzal] {
    padding: 0.75rem 1.5rem;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.page-header h3[b-yzwr59gzal] { margin: 0; font-size: 1.1rem; color: var(--color-primary); }

.back-link[b-yzwr59gzal] {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
}
.back-link:hover[b-yzwr59gzal] { color: var(--color-primary-hover); }

.status-message[b-yzwr59gzal] {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.status-message.success[b-yzwr59gzal] { background: var(--color-success-light); color: var(--color-success); }
.status-message.error[b-yzwr59gzal] { background: var(--color-danger-light); color: var(--color-danger); }
.status-message .close-btn[b-yzwr59gzal] { background: none; border: none; color: inherit; cursor: pointer; margin-left: auto; font-size: 1.2rem; }

.content-wrapper[b-yzwr59gzal] {
    flex: 1;
    display: flex;
    gap: 1px;
    min-height: 0;
    background: var(--border-subtle);
}

.panel[b-yzwr59gzal] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    min-width: 0;
}

.panel-header[b-yzwr59gzal] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
}
.panel-header h4[b-yzwr59gzal] { margin: 0; font-size: 0.95rem; color: var(--color-primary); }

.panel-body[b-yzwr59gzal] {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
}

/* Form elements */
.form-row[b-yzwr59gzal] { margin-bottom: 0.75rem; }
.form-row label[b-yzwr59gzal] { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
.form-row input[b-yzwr59gzal], .form-row textarea[b-yzwr59gzal] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    color: var(--text-body);
    font-size: 0.9rem;
}
.form-row input:focus[b-yzwr59gzal], .form-row textarea:focus[b-yzwr59gzal] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-10);
}
.form-row textarea[b-yzwr59gzal] { resize: vertical; font-family: inherit; }
.two-col[b-yzwr59gzal] { display: flex; gap: 0.75rem; }
.form-field[b-yzwr59gzal] { flex: 1; }
.form-field label[b-yzwr59gzal] { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
.checkbox-row label[b-yzwr59gzal] { font-size: 0.9rem; color: var(--text-body); cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }

.form-actions[b-yzwr59gzal] { display: flex; gap: 0.5rem; margin-top: 1rem; }
.btn-save[b-yzwr59gzal] { padding: 0.5rem 1rem; background: var(--color-primary); color: var(--text-on-primary); border: none; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.btn-save:hover[b-yzwr59gzal] { background: var(--color-primary-hover); }
.btn-save:disabled[b-yzwr59gzal] { opacity: 0.5; cursor: not-allowed; }
.btn-delete[b-yzwr59gzal] { padding: 0.5rem 1rem; background: var(--color-danger); color: var(--text-on-primary); border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
.btn-delete:hover[b-yzwr59gzal] { opacity: 0.9; }
.btn-cancel[b-yzwr59gzal] { padding: 0.5rem 1rem; background: var(--surface-page); color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
.btn-cancel:hover[b-yzwr59gzal] { background: var(--surface-hover); }

/* Adresse info section */
.adresse-info[b-yzwr59gzal] {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    font-size: 0.85rem;
}
.info-label[b-yzwr59gzal] { color: var(--text-secondary); }
.info-value[b-yzwr59gzal] { color: var(--text-body); }

/* Mini button */
.mini-btn[b-yzwr59gzal] { padding: 0.3rem 0.75rem; border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); border-radius: 4px; cursor: pointer; font-size: 0.8rem; }
.mini-btn.primary[b-yzwr59gzal] { border-color: var(--color-primary); color: var(--color-primary); }
.mini-btn:hover[b-yzwr59gzal] { background: var(--surface-hover); }

/* Ansprechpartner list */
.ansprech-list[b-yzwr59gzal] {
    flex: 0 0 auto;
    max-height: 350px;
    overflow-y: auto;
    border-bottom: 1px solid var(--border-default);
}

.ansprech-item[b-yzwr59gzal] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.15s;
    border-bottom: 1px solid var(--border-subtle);
}
.ansprech-item:hover[b-yzwr59gzal] { background: var(--surface-hover); }
.ansprech-item.selected[b-yzwr59gzal] { background: var(--color-primary-light); border-left: 3px solid var(--color-primary); }
.ansprech-item.inactive[b-yzwr59gzal] { opacity: 0.5; }

.ap-avatar[b-yzwr59gzal] {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; color: var(--text-on-primary);
    flex-shrink: 0;
}
.ap-info[b-yzwr59gzal] { flex: 1; min-width: 0; }
.ap-name[b-yzwr59gzal] { font-size: 0.9rem; font-weight: 500; }
.ap-rolle[b-yzwr59gzal] { font-size: 0.8rem; color: var(--color-primary); font-weight: 500; }
.ap-detail[b-yzwr59gzal] { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Editor */
.ansprech-editor[b-yzwr59gzal] {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
}
.ansprech-editor h5[b-yzwr59gzal] { margin: 0 0 1rem 0; font-size: 0.95rem; color: var(--color-primary); }

.ansprech-placeholder[b-yzwr59gzal] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-secondary);
    text-align: center;
}
.ansprech-placeholder .icon[b-yzwr59gzal] { font-size: 2rem; margin-bottom: 0.5rem; }

/* Rolle input with datalist */
.rolle-input input[b-yzwr59gzal] { width: 100%; }

/* Loading / error */
.loading-screen[b-yzwr59gzal], .error-screen[b-yzwr59gzal] {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: var(--text-secondary); gap: 1rem;
}
.loading-screen .spinner[b-yzwr59gzal] {
    width: 50px; height: 50px;
    border: 4px solid var(--border-default); border-top-color: var(--color-primary);
    border-radius: 50%; animation: spin-b-yzwr59gzal 1s linear infinite;
}
.btn-back[b-yzwr59gzal] {
    padding: 0.75rem 1.5rem; background: var(--color-primary); color: var(--text-on-primary);
    text-decoration: none; border-radius: 6px; font-weight: 500;
}

/* Scrollbars */
.ansprech-list[b-yzwr59gzal]::-webkit-scrollbar, .ansprech-editor[b-yzwr59gzal]::-webkit-scrollbar, .panel-body[b-yzwr59gzal]::-webkit-scrollbar { width: 6px; }
.ansprech-list[b-yzwr59gzal]::-webkit-scrollbar-thumb, .ansprech-editor[b-yzwr59gzal]::-webkit-scrollbar-thumb, .panel-body[b-yzwr59gzal]::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }

@keyframes spin-b-yzwr59gzal { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .content-wrapper[b-yzwr59gzal] { flex-direction: column; } .ansprech-list[b-yzwr59gzal] { max-height: 200px; } }
/* /Components/Pages/Heizungen/NoVnc.razor.rz.scp.css */
    .novnc-wrapper[b-v3jzrl58hn] {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 4rem);
        background: var(--surface-hover);
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .novnc-toolbar[b-v3jzrl58hn] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 1rem;
        background: var(--surface-card);
        border-bottom: 1px solid var(--border-default);
        flex-shrink: 0;
    }

    .novnc-title[b-v3jzrl58hn] {
        font-weight: 600;
        color: var(--text-primary);
        font-size: 0.95rem;
    }

    .novnc-ip[b-v3jzrl58hn] {
        color: var(--text-secondary);
        font-size: 0.85rem;
        font-family: monospace;
    }

    .novnc-toolbar-actions[b-v3jzrl58hn] {
        margin-left: auto;
        display: flex;
        gap: 0.5rem;
    }

    .novnc-frame[b-v3jzrl58hn] {
        flex: 1;
        width: 100%;
        border: none;
        background: #000;
    }
/* /Components/Pages/Heizungen/P2xxxFernbedienungContent.razor.rz.scp.css */
/* === P2xxx Display Styles (canvas + TCP terminal modes) === */

    /* Canvas Area (HTTP Fernbedienung) */
    .term-canvas-area[b-wun6tzneu2] {
        display: block;
        background: var(--terminal-bg);
        outline: none;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .term-canvas-area:focus[b-wun6tzneu2] {
        box-shadow: inset 0 0 0 2px rgba(30, 148, 188, 0.2);
    }

    .term-canvas-area canvas[b-wun6tzneu2] {
        display: block;
        background: var(--terminal-bg);
        cursor: pointer;
    }

    /* Terminal Display (TCP modes) - fills parent completely */
    .term-terminal-display[b-wun6tzneu2] {
        flex: 1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        background: var(--terminal-bg);
    }

    .term-terminal-panel[b-wun6tzneu2] {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: var(--surface-page);
        border-radius: 8px;
        overflow: hidden;
    }

    #terminalDisplay[b-wun6tzneu2] {
        flex: 1;
        background: #000;
        overflow: hidden;
        position: relative;
    }

    .term-terminal-wrapper[b-wun6tzneu2] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 14px;
        line-height: 1.4;
    }

    #terminalRows[b-wun6tzneu2] {
        color: var(--color-primary);
    }

    .terminal-cursor[b-wun6tzneu2] {
        display: inline-block;
        width: 8px;
        height: 16px;
        background: var(--color-primary);
        animation: blink-b-wun6tzneu2 1s step-end infinite;
    }

    @keyframes blink-b-wun6tzneu2 {
        50% { opacity: 0; }
    }

    /* Text Terminal (reiner Text-Modus) */
    .term-text-terminal[b-wun6tzneu2] {
        flex: 1;
        background: var(--terminal-bg);
        overflow: auto;
        padding: 10px;
    }

    .term-text-content[b-wun6tzneu2] {
        margin: 0;
        padding: 0;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 14px;
        line-height: 1.5;
        color: var(--terminal-text);
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .connection-spinner[b-wun6tzneu2] {
        width: 60px;
        height: 60px;
        border: 4px solid var(--border-strong);
        border-top: 4px solid var(--color-primary);
        border-radius: 50%;
        margin: 0 auto 1.5rem;
        animation: spin-b-wun6tzneu2 1s linear infinite;
    }

    .connection-spinner.small[b-wun6tzneu2] {
        width: 20px;
        height: 20px;
        border-width: 2px;
        margin: 0;
    }

    @keyframes spin-b-wun6tzneu2 {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
/* /Components/Pages/Heizungen/StoerungConfig.razor.rz.scp.css */
.stoerung-config-page[b-6ug84ejgku] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
}

.page-header[b-6ug84ejgku] {
    padding: 0.75rem 1.5rem;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
}

.back-link[b-6ug84ejgku] {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
}

.back-link:hover[b-6ug84ejgku] {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.stoerung-container[b-6ug84ejgku] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.loading-screen[b-6ug84ejgku],
.error-screen[b-6ug84ejgku] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    gap: 1rem;
}

.loading-screen .spinner[b-6ug84ejgku] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-default);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-6ug84ejgku 1s linear infinite;
}

.error-screen .icon[b-6ug84ejgku] {
    font-size: 4rem;
}

.error-screen h3[b-6ug84ejgku] {
    color: var(--color-danger);
    margin: 0;
}

.error-screen p[b-6ug84ejgku] {
    margin: 0;
    color: var(--text-secondary);
}

.btn-back[b-6ug84ejgku] {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: var(--text-on-primary);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
}

.btn-back:hover[b-6ug84ejgku] {
    background: var(--color-primary-hover);
}

@keyframes spin-b-6ug84ejgku {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Heizungen/StoerungConfigListe.razor.rz.scp.css */
.stoerung-config-liste[b-luy4sswtx8] {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.page-header[b-luy4sswtx8] {
    margin-bottom: 2rem;
}

.page-header h2[b-luy4sswtx8] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.page-header .subtitle[b-luy4sswtx8] {
    color: var(--text-secondary);
    margin: 0;
}

.loading[b-luy4sswtx8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--text-secondary);
    gap: 1rem;
}

.spinner[b-luy4sswtx8] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-default);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-luy4sswtx8 1s linear infinite;
}

@keyframes spin-b-luy4sswtx8 { to { transform: rotate(360deg); } }

.empty-state[b-luy4sswtx8] {
    text-align: center;
    padding: 4rem;
    color: var(--text-secondary);
}

.empty-state .icon[b-luy4sswtx8] {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
}

.search-box[b-luy4sswtx8] {
    position: relative;
    margin-bottom: 1.5rem;
}

.search-box .search-icon[b-luy4sswtx8] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.search-box input[b-luy4sswtx8] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--surface-card);
    color: var(--text-primary);
}

.search-box input:focus[b-luy4sswtx8] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-10);
}

.heizungen-grid[b-luy4sswtx8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
}

.heizung-card[b-luy4sswtx8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.heizung-card:hover[b-luy4sswtx8] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-icon[b-luy4sswtx8] {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-danger), #ee5a5a);
    border-radius: 12px;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-content[b-luy4sswtx8] {
    flex: 1;
    min-width: 0;
}

.card-content h3[b-luy4sswtx8] {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projektnummer[b-luy4sswtx8] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: var(--color-primary);
    color: var(--text-on-primary);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.card-meta[b-luy4sswtx8] {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.card-arrow[b-luy4sswtx8] {
    font-size: 1.5rem;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.heizung-card:hover .card-arrow[b-luy4sswtx8] {
    color: var(--color-primary);
    transform: translateX(4px);
}

@media (max-width: 600px) {
    .stoerung-config-liste[b-luy4sswtx8] {
        padding: 1rem;
    }

    .heizungen-grid[b-luy4sswtx8] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Heizungen/StoerungsheaderConfig.razor.rz.scp.css */
.stoerungsheader-config-page[b-b9mkxml23y] {
        height: 100vh;
        display: flex;
        flex-direction: column;
        background: var(--surface-card);
    }
    
    .page-header[b-b9mkxml23y] {
        padding: 0.75rem 1.5rem;
        background: rgba(0,0,0,0.3);
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    
    .back-link[b-b9mkxml23y] {
        color: var(--color-primary);
        text-decoration: none;
        font-size: 0.9rem;
    }
    
    .back-link:hover[b-b9mkxml23y] {
        color: var(--text-primary);
        text-decoration: underline;
    }
    
    .content-container[b-b9mkxml23y] {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    
    .loading-screen[b-b9mkxml23y],
    .error-screen[b-b9mkxml23y] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        gap: 1rem;
    }
    
    .loading-screen .spinner[b-b9mkxml23y] {
        width: 50px;
        height: 50px;
        border: 4px solid rgba(30, 148, 188, 0.2);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-b9mkxml23y 1s linear infinite;
    }
    
    .error-screen .icon[b-b9mkxml23y] { font-size: 4rem; }
    .error-screen h3[b-b9mkxml23y] { color: var(--color-danger); margin: 0; }
    .error-screen p[b-b9mkxml23y] { margin: 0; color: var(--text-secondary); }
    
    .btn-back[b-b9mkxml23y] {
        margin-top: 1rem;
        padding: 0.75rem 1.5rem;
        background: var(--color-primary);
        color: #000;
        text-decoration: none;
        border-radius: 6px;
        font-weight: 500;
    }
    
    .btn-back:hover[b-b9mkxml23y] { background: var(--color-primary); }
    
    @keyframes spin-b-b9mkxml23y { to { transform: rotate(360deg); } }
/* /Components/Pages/Heizungen/StoerungsHeaderEditor.razor.rz.scp.css */
.header-editor[b-nj5xr91j34] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--surface-card);
    color: var(--text-body);
}

/* Debug Info Panel */
.debug-info-panel[b-nj5xr91j34] {
    display: flex;
    gap: 2rem;
    padding: 0.5rem 1.5rem;
    background: var(--color-primary-light);
    border-bottom: 1px solid var(--color-primary);
    font-size: 0.8rem;
    font-family: monospace;
    color: var(--color-primary);
}

/* RTOS Action Panel - Always visible */
.rtos-action-panel[b-nj5xr91j34] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--color-success-light);
    border-bottom: 1px solid var(--color-success);
}

.rtos-action-panel h4[b-nj5xr91j34] {
    margin: 0;
    color: var(--color-success);
    font-size: 0.95rem;
}

.rtos-buttons[b-nj5xr91j34] {
    display: flex;
    gap: 0.75rem;
}

/* RTOS Preview Panel */
.rtos-preview-panel[b-nj5xr91j34] {
    background: var(--color-success-10);
    border-bottom: 1px solid var(--color-success);
    max-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.preview-header[b-nj5xr91j34] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--color-success-light);
    border-bottom: 1px solid var(--color-success);
}

.preview-header h4[b-nj5xr91j34] {
    margin: 0;
    color: var(--color-success);
    font-size: 0.9rem;
}

.preview-count[b-nj5xr91j34] {
    color: var(--color-success);
    font-size: 0.8rem;
}

.preview-table-container[b-nj5xr91j34] {
    flex: 1;
    overflow-y: auto;
}

.preview-table[b-nj5xr91j34] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.preview-table th[b-nj5xr91j34] {
    position: sticky;
    top: 0;
    background: var(--surface-page);
    color: var(--color-success);
    font-weight: 600;
    text-align: left;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--color-success);
}

.preview-table td[b-nj5xr91j34] {
    padding: 0.3rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}

.preview-table tr.new[b-nj5xr91j34] { background: var(--color-success-10); }
.preview-table tr.exists[b-nj5xr91j34] { background: var(--color-warning-10); }

.status-new[b-nj5xr91j34] { color: var(--color-success); font-weight: 600; font-size: 0.75rem; }
.status-exists[b-nj5xr91j34] { color: var(--color-warning); font-weight: 600; font-size: 0.75rem; }

.more-rows[b-nj5xr91j34] {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

.page-header[b-nj5xr91j34] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
}

.header-left[b-nj5xr91j34] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-left h2[b-nj5xr91j34] { margin: 0; font-size: 1.3rem; }
.header-left .subtitle[b-nj5xr91j34] { margin: 0; color: var(--text-secondary); font-size: 0.9rem; }

.btn-back[b-nj5xr91j34] {
    padding: 0.5rem 1rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
}

.header-actions[b-nj5xr91j34] {
    display: flex;
    gap: 0.75rem;
}

.btn[b-nj5xr91j34] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn.primary[b-nj5xr91j34] { background: var(--color-primary); color: var(--text-on-primary); }
.btn.secondary[b-nj5xr91j34] { background: var(--surface-page); color: var(--text-primary); border: 1px solid var(--border-default); }
.btn.danger[b-nj5xr91j34] { background: var(--color-danger); color: var(--text-on-primary); }
.btn:disabled[b-nj5xr91j34] { opacity: 0.5; cursor: not-allowed; }

.status-bar[b-nj5xr91j34] {
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-bar.success[b-nj5xr91j34] { background: var(--color-success-light); color: var(--color-success); }
.status-bar.error[b-nj5xr91j34] { background: var(--color-danger-light); color: var(--color-danger); }

.btn-close[b-nj5xr91j34] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.2rem;
}

.toolbar[b-nj5xr91j34] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
}

.search-box[b-nj5xr91j34] {
    position: relative;
    flex: 0 0 250px;
}

.search-box input[b-nj5xr91j34] {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    color: var(--text-primary);
}

.btn-clear-search[b-nj5xr91j34] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
}

.filter-group[b-nj5xr91j34] {
    display: flex;
    gap: 1rem;
}

.filter-group label[b-nj5xr91j34] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
}

.stats[b-nj5xr91j34] {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.table-container[b-nj5xr91j34] {
    flex: 1;
    overflow: auto;
    position: relative;
}

.loading-overlay[b-nj5xr91j34] {
    position: absolute;
    inset: 0;
    background: var(--surface-overlay);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 10;
}

.spinner[b-nj5xr91j34] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-default);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-nj5xr91j34 1s linear infinite;
}

.spinner-small[b-nj5xr91j34] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-subtle);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-nj5xr91j34 1s linear infinite;
}

@keyframes spin-b-nj5xr91j34 { to { transform: rotate(360deg); } }

.header-table[b-nj5xr91j34] {
    width: 100%;
    border-collapse: collapse;
}

.header-table th[b-nj5xr91j34] {
    position: sticky;
    top: 0;
    background: var(--surface-page);
    color: var(--color-primary);
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--color-primary);
    cursor: pointer;
    user-select: none;
}

.header-table th:hover[b-nj5xr91j34] { background: var(--surface-hover); }

.header-table td[b-nj5xr91j34] {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.header-table tr:hover[b-nj5xr91j34] { background: var(--surface-hover); }
.header-table tr.webterm-row[b-nj5xr91j34] { background: var(--color-warning-10); }
.header-table tr.inactive-row[b-nj5xr91j34] { opacity: 0.5; }

.col-index[b-nj5xr91j34] { width: 100px; }
.col-text[b-nj5xr91j34] { min-width: 300px; }
.col-source[b-nj5xr91j34] { width: 80px; }
.col-status[b-nj5xr91j34] { width: 100px; }
.col-updated[b-nj5xr91j34] { width: 150px; }
.col-actions[b-nj5xr91j34] { width: 120px; text-align: center; }

.index-badge[b-nj5xr91j34] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--color-primary-10);
    color: var(--color-primary);
    border-radius: 4px;
    font-family: monospace;
    font-weight: 600;
}

.badge-wt[b-nj5xr91j34] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.3rem;
    background: var(--color-warning);
    color: #000;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 3px;
}

.char-count[b-nj5xr91j34] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.source-badge[b-nj5xr91j34] {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.source-badge.rtos[b-nj5xr91j34] { background: var(--color-primary); color: var(--text-on-primary); }
.source-badge.webterm[b-nj5xr91j34] { background: var(--color-warning); color: #000; }
.source-badge.manual[b-nj5xr91j34] { background: var(--color-indigo); color: var(--text-on-primary); }

.status-active[b-nj5xr91j34] { color: var(--color-success); }
.status-inactive[b-nj5xr91j34] { color: var(--text-secondary); }

.btn-icon[b-nj5xr91j34] {
    padding: 0.3rem 0.5rem;
    background: none;
    border: 1px solid var(--border-default);
    color: var(--text-muted);
    border-radius: 4px;
    cursor: pointer;
    margin: 0 0.2rem;
}

.btn-icon:hover[b-nj5xr91j34] { background: var(--surface-hover); color: var(--text-primary); }
.btn-icon.danger:hover[b-nj5xr91j34] { background: var(--color-danger-10); color: var(--color-danger); }

.no-data[b-nj5xr91j34] {
    text-align: center;
    padding: 3rem !important;
    color: var(--text-secondary);
}

.padding-preview[b-nj5xr91j34] {
    padding: 1rem 1.5rem;
    background: var(--surface-page);
    border-top: 1px solid var(--border-default);
}

.padding-preview h4[b-nj5xr91j34] { margin: 0 0 0.5rem 0; color: var(--color-primary); font-size: 0.95rem; }
.padding-preview .info[b-nj5xr91j34] { margin: 0 0 0.5rem 0; color: var(--text-secondary); font-size: 0.85rem; }
.padding-preview .hint[b-nj5xr91j34] { color: var(--text-secondary); font-style: italic; }

.padded-record[b-nj5xr91j34] {
    margin: 0;
    padding: 0.75rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    font-family: 'Consolas', monospace;
    font-size: 0.8rem;
    color: var(--color-primary);
    white-space: pre;
    overflow-x: auto;
}

.preview-length[b-nj5xr91j34] { font-size: 0.8rem; color: var(--text-secondary); margin-left: 1rem; }

/* Dialog Styles */
.dialog-overlay[b-nj5xr91j34] {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dialog[b-nj5xr91j34] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: var(--shadow-lg);
}

.dialog-small[b-nj5xr91j34] { max-width: 450px; }

.dialog-header[b-nj5xr91j34] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-default);
}

.dialog-header h3[b-nj5xr91j34] { margin: 0; }

.dialog-body[b-nj5xr91j34] {
    padding: 1.5rem;
}

.form-group[b-nj5xr91j34] {
    margin-bottom: 1.25rem;
}

.form-group label[b-nj5xr91j34] {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.form-group input[b-nj5xr91j34], .form-group select[b-nj5xr91j34] {
    width: 100%;
    padding: 0.6rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.form-group input:disabled[b-nj5xr91j34], .form-group select:disabled[b-nj5xr91j34] {
    opacity: 0.5;
    cursor: not-allowed;
}

.help-text[b-nj5xr91j34] { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.25rem; display: block; }

.char-counter[b-nj5xr91j34] {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.char-counter.warning[b-nj5xr91j34] { color: var(--color-warning); }

.checkbox-group label[b-nj5xr91j34] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.preview-box[b-nj5xr91j34] {
    background: var(--surface-sunken);
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid var(--border-default);
}

.preview-box label[b-nj5xr91j34] { margin-bottom: 0.5rem; }

.preview-box pre[b-nj5xr91j34] {
    margin: 0;
    padding: 0.5rem;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-family: 'Consolas', monospace;
    font-size: 0.75rem;
    color: var(--color-primary);
    white-space: pre;
    overflow-x: auto;
}

.dialog-footer[b-nj5xr91j34] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-default);
}

.delete-info[b-nj5xr91j34] {
    background: var(--surface-sunken);
    padding: 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--border-default);
    margin: 1rem 0;
}

.warning-text[b-nj5xr91j34] { color: var(--color-warning); font-size: 0.9rem; }
/* /Components/Pages/Heizungen/StoerungsheaderTab.razor.rz.scp.css */
.stoerungsheader-tab[b-aha6y3o21v] { display: flex; flex-direction: column; height: 100%; background: var(--surface-card); color: var(--text-primary); position: relative; }
    
    .tab-header[b-aha6y3o21v] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(0,0,0,0.08); }
    .tab-header h3[b-aha6y3o21v] { margin: 0; font-size: 1.25rem; }
    .header-info[b-aha6y3o21v] { display: flex; gap: 0.75rem; }
    .info-badge[b-aha6y3o21v] { font-size: 0.8rem; color: var(--text-secondary); padding: 0.25rem 0.5rem; background: rgba(0,0,0,0.03); border-radius: 4px; }
    
    .status-message[b-aha6y3o21v] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; font-size: 0.85rem; }
    .status-message.success[b-aha6y3o21v] { background: rgba(30,148,188,0.2); color: var(--color-primary); }
    .status-message.error[b-aha6y3o21v] { background: rgba(231,76,60,0.2); color: var(--color-danger); }
    .status-message .close-btn[b-aha6y3o21v] { margin-left: auto; background: none; border: none; color: inherit; cursor: pointer; font-size: 1.2rem; }
    
    .action-bar[b-aha6y3o21v] { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: rgba(0,0,0,0.15); border-bottom: 1px solid rgba(0,0,0,0.08); flex-wrap: wrap; }
    .db-count[b-aha6y3o21v] { margin-left: auto; color: var(--color-primary); font-size: 0.8rem; font-weight: 600; }
    
    .btn-action[b-aha6y3o21v] { padding: 0.5rem 1rem; border: 1px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.03); color: var(--text-primary); border-radius: 6px; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s; }
    .btn-action:hover:not(:disabled)[b-aha6y3o21v] { background: rgba(0,0,0,0.08); }
    .btn-action.primary[b-aha6y3o21v] { background: var(--color-primary); border-color: var(--color-primary); color: #000; }
    .btn-action.primary:hover:not(:disabled)[b-aha6y3o21v] { background: var(--color-primary); }
    .btn-action.secondary[b-aha6y3o21v] { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.1); }
    .btn-action.go-config[b-aha6y3o21v] { background: var(--color-success); border-color: var(--color-success); color: #000; font-weight: 600; }
    .btn-action.go-config:hover[b-aha6y3o21v] { background: var(--color-success); }
    .btn-action:disabled[b-aha6y3o21v] { opacity: 0.5; cursor: not-allowed; }
    
    .loading-overlay[b-aha6y3o21v] { position: absolute; inset: 0; background: rgba(26,26,46,0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; z-index: 100; }
    .spinner[b-aha6y3o21v] { width: 40px; height: 40px; border: 3px solid rgba(30,148,188,0.2); border-top-color: var(--color-primary); border-radius: 50%; animation: spin-b-aha6y3o21v 1s linear infinite; }
    .spinner-small[b-aha6y3o21v] { width: 14px; height: 14px; border: 2px solid rgba(0,0,0,0.1); border-top-color: currentColor; border-radius: 50%; animation: spin-b-aha6y3o21v 0.8s linear infinite; display: inline-block; }
    @keyframes spin-b-aha6y3o21v { to { transform: rotate(360deg); } }
    
    .content-wrapper[b-aha6y3o21v] { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
    
    .panel[b-aha6y3o21v] { display: flex; flex-direction: column; min-height: 0; }
    .panel-preview[b-aha6y3o21v] { flex: 0 0 auto; max-height: 40%; border-bottom: 2px solid rgba(241,196,15,0.3); }
    .panel-db[b-aha6y3o21v] { flex: 1; }
    
    .panel-header[b-aha6y3o21v] { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; }
    .panel-header h4[b-aha6y3o21v] { margin: 0; font-size: 0.9rem; }
    .panel-header.preview[b-aha6y3o21v] { background: rgba(241,196,15,0.1); color: var(--color-warning); }
    .panel-header.preview h4[b-aha6y3o21v] { color: var(--color-warning); }
    .panel-header.preview .hint[b-aha6y3o21v] { font-size: 0.75rem; color: var(--color-warning); }
    .panel-header.db[b-aha6y3o21v] { background: rgba(30,148,188,0.08); }
    .panel-header.db h4[b-aha6y3o21v] { color: var(--color-primary); }
    
    .table-container[b-aha6y3o21v] { flex: 1; overflow: auto; }
    
    .header-table[b-aha6y3o21v] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
    .header-table th[b-aha6y3o21v] { position: sticky; top: 0; background: var(--surface-card); color: var(--color-primary); font-weight: 600; text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid rgba(30,148,188,0.3); z-index: 1; }
    .header-table td[b-aha6y3o21v] { padding: 0.4rem 0.75rem; border-bottom: 1px solid rgba(0,0,0,0.03); }
    .header-table tr:hover[b-aha6y3o21v] { background: rgba(0,0,0,0.03); }
    
    .header-table.preview th[b-aha6y3o21v] { color: var(--color-warning); border-bottom-color: rgba(241,196,15,0.3); }
    .header-table tr.new[b-aha6y3o21v] { background: rgba(46,204,113,0.1); }
    .header-table tr.update[b-aha6y3o21v] { background: rgba(241,196,15,0.1); }
    .header-table tr.unchanged[b-aha6y3o21v] { opacity: 0.6; }
    .header-table tr.webterm[b-aha6y3o21v] { background: rgba(243,156,18,0.08); }
    
    .col-nr[b-aha6y3o21v] { width: 70px; text-align: center; }
    .col-text[b-aha6y3o21v] { max-width: 500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .col-source[b-aha6y3o21v], .col-status[b-aha6y3o21v] { width: 80px; text-align: center; }
    .col-actions[b-aha6y3o21v] { width: 80px; text-align: center; white-space: nowrap; }
    
    .idx[b-aha6y3o21v] { display: inline-block; min-width: 28px; padding: 0.15rem 0.4rem; background: rgba(30,148,188,0.2); color: var(--color-primary); border-radius: 3px; text-align: center; font-family: monospace; font-size: 0.8rem; }
    .wt-badge[b-aha6y3o21v] { display: inline-block; margin-left: 0.3rem; padding: 0.1rem 0.3rem; background: var(--color-warning); color: #000; font-size: 0.6rem; font-weight: 700; border-radius: 2px; }
    
    .status-tag[b-aha6y3o21v] { padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.7rem; font-weight: 600; }
    .status-tag.new[b-aha6y3o21v] { background: rgba(46,204,113,0.3); color: var(--color-success); }
    .status-tag.update[b-aha6y3o21v] { background: rgba(241,196,15,0.3); color: var(--color-warning); }
    .status-tag.same[b-aha6y3o21v] { background: rgba(0,0,0,0.08); color: var(--text-secondary); }
    
    .source-tag[b-aha6y3o21v] { padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.7rem; font-weight: 600; }
    .source-tag.rtos[b-aha6y3o21v] { background: var(--color-primary); color: var(--surface-card); }
    .source-tag.manual[b-aha6y3o21v] { background: var(--color-indigo); color: var(--surface-card); }
    .source-tag.webterm[b-aha6y3o21v] { background: var(--color-warning); color: #000; }
    
    .icon-btn[b-aha6y3o21v] { padding: 0.2rem 0.4rem; background: none; border: 1px solid rgba(0,0,0,0.08); color: var(--text-muted); border-radius: 3px; cursor: pointer; margin: 0 0.1rem; font-size: 0.75rem; }
    .icon-btn:hover[b-aha6y3o21v] { background: rgba(0,0,0,0.08); color: var(--text-primary); }
    .icon-btn.danger:hover[b-aha6y3o21v] { background: rgba(231,76,60,0.3); color: var(--color-danger); }
    
    .empty-state[b-aha6y3o21v] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; color: var(--text-secondary); text-align: center; }
    .empty-state .icon[b-aha6y3o21v] { font-size: 3rem; margin-bottom: 1rem; }
    .empty-state .hint[b-aha6y3o21v] { font-size: 0.8rem; color: var(--text-secondary); }
    
    .status-bar[b-aha6y3o21v] { display: flex; gap: 1.5rem; padding: 0.5rem 1rem; background: rgba(0,0,0,0.3); border-top: 1px solid rgba(0,0,0,0.08); font-size: 0.75rem; color: var(--text-secondary); }
    .status-item[b-aha6y3o21v] { display: flex; align-items: center; gap: 0.25rem; }
    .status-item.preview[b-aha6y3o21v] { color: var(--color-warning); }
    .status-item.right[b-aha6y3o21v] { margin-left: auto; }
    
    /* Edit Dialog */
    .dialog-overlay[b-aha6y3o21v] { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; }
    .edit-dialog[b-aha6y3o21v] { background: var(--surface-card); border: 1px solid var(--color-primary); border-radius: 8px; width: 90%; max-width: 500px; }
    .edit-dialog .dialog-header[b-aha6y3o21v] { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: rgba(30,148,188,0.1); border-bottom: 1px solid rgba(30,148,188,0.3); }
    .edit-dialog .dialog-header h3[b-aha6y3o21v] { margin: 0; font-size: 1rem; color: var(--color-primary); }
    .edit-dialog .btn-close[b-aha6y3o21v] { background: none; border: none; color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; }
    .edit-dialog .btn-close:hover[b-aha6y3o21v] { color: var(--text-primary); }
    .edit-dialog .dialog-body[b-aha6y3o21v] { padding: 1rem; }
    .edit-dialog .dialog-footer[b-aha6y3o21v] { padding: 0.75rem 1rem; border-top: 1px solid rgba(0,0,0,0.08); display: flex; justify-content: flex-end; gap: 0.5rem; }
    .form-row[b-aha6y3o21v] { margin-bottom: 0.75rem; }
    .form-row label[b-aha6y3o21v] { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; color: var(--text-muted); }
    .form-row input[b-aha6y3o21v], .form-row select[b-aha6y3o21v] { width: 100%; padding: 0.5rem; background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; color: var(--text-primary); font-size: 0.9rem; }
    .form-row input:focus[b-aha6y3o21v] { outline: none; border-color: var(--color-primary); }
    .form-row input:disabled[b-aha6y3o21v] { opacity: 0.5; }
    .char-count[b-aha6y3o21v] { display: block; text-align: right; font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem; }
    
    .table-container[b-aha6y3o21v]::-webkit-scrollbar { width: 6px; height: 6px; }
    .table-container[b-aha6y3o21v]::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
    .table-container[b-aha6y3o21v]::-webkit-scrollbar-thumb { background: rgba(30,148,188,0.4); border-radius: 3px; }
    
    @media (max-width: 768px) {
        .action-bar[b-aha6y3o21v] { flex-direction: column; align-items: stretch; }
        .db-count[b-aha6y3o21v] { margin-left: 0; }
        .col-text[b-aha6y3o21v] { max-width: 200px; }
    }
/* /Components/Pages/Heizungen/StoerungTab.razor.rz.scp.css */
.stoerung-tab[b-70qb7l7t19] { display: flex; flex-direction: column; height: 100%; background: var(--surface-card); color: var(--text-primary); position: relative; }
.tab-header[b-70qb7l7t19] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: var(--surface-page); border-bottom: 1px solid var(--border-default); }
.tab-header h3[b-70qb7l7t19] { margin: 0; font-size: 1.25rem; }
.header-actions[b-70qb7l7t19] { display: flex; gap: 0.75rem; }
.btn-action[b-70qb7l7t19] { padding: 0.5rem 1rem; border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-primary); border-radius: 6px; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s; text-decoration: none; }
.btn-action:hover:not(:disabled)[b-70qb7l7t19] { background: var(--surface-hover); border-color: var(--border-strong); }
.btn-action.primary[b-70qb7l7t19] { background: var(--color-primary); border-color: var(--color-primary); color: var(--text-on-primary); }
.btn-action.primary:hover:not(:disabled)[b-70qb7l7t19] { background: var(--color-primary-hover); }
.btn-action:disabled[b-70qb7l7t19] { opacity: 0.5; cursor: not-allowed; }
.status-message[b-70qb7l7t19] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; font-size: 0.85rem; }
.status-message.success[b-70qb7l7t19] { background: var(--color-success-light); color: var(--color-success); }
.status-message.error[b-70qb7l7t19] { background: var(--color-danger-light); color: var(--color-danger); }
.status-message .close-btn[b-70qb7l7t19] { margin-left: auto; background: none; border: none; color: inherit; cursor: pointer; font-size: 1.2rem; }

.loading-overlay[b-70qb7l7t19] { position: absolute; inset: 0; background: var(--surface-overlay); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; z-index: 100; }
.spinner[b-70qb7l7t19] { width: 40px; height: 40px; border: 3px solid var(--border-default); border-top-color: var(--color-primary); border-radius: 50%; animation: spin-b-70qb7l7t19 1s linear infinite; }
@keyframes spin-b-70qb7l7t19 { to { transform: rotate(360deg); } }
.content-wrapper[b-70qb7l7t19] { flex: 1; display: flex; gap: 1px; min-height: 0; background: var(--border-subtle); }
.panel[b-70qb7l7t19] { display: flex; flex-direction: column; background: var(--surface-card); }
.panel-left[b-70qb7l7t19] { flex: 1; min-width: 0; }
.panel-right[b-70qb7l7t19] { flex: 1; min-width: 0; }
.panel-header[b-70qb7l7t19] { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: var(--surface-page); border-bottom: 1px solid var(--border-default); }
.panel-header h4[b-70qb7l7t19] { margin: 0; font-size: 0.9rem; color: var(--text-secondary); }
.panel-actions[b-70qb7l7t19] { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.mini-btn[b-70qb7l7t19] { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-muted); border-radius: 4px; cursor: pointer; font-size: 0.7rem; transition: all 0.2s; }
.mini-btn:hover[b-70qb7l7t19] { background: var(--surface-hover); color: var(--text-primary); }
.mini-btn.primary[b-70qb7l7t19] { background: var(--color-primary); border-color: var(--color-primary); color: var(--text-on-primary); }
.mini-btn.secondary[b-70qb7l7t19] { background: var(--color-danger-light); color: var(--color-danger); }
.table-container[b-70qb7l7t19] { flex: 1; overflow: auto; }
.stoerung-table[b-70qb7l7t19] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.stoerung-table th[b-70qb7l7t19] { position: sticky; top: 0; background: var(--surface-page); color: var(--color-primary); font-weight: 600; text-align: left; padding: 0.6rem 0.75rem; border-bottom: 2px solid var(--color-primary); }
.stoerung-table td[b-70qb7l7t19] { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-subtle); }
.stoerung-table tr:hover[b-70qb7l7t19] { background: var(--surface-hover); }
.stoerung-table tr.active[b-70qb7l7t19] { background: var(--color-primary-10); }
.stoerung-table tr.webterm-internal[b-70qb7l7t19] { background: var(--color-warning-10); }
.stoerung-table tr.webterm-internal:hover[b-70qb7l7t19] { background: var(--color-warning-light); }
.col-nr[b-70qb7l7t19] { width: 70px; text-align: center; color: var(--text-secondary); font-family: monospace; }
.badge-webterm[b-70qb7l7t19] { display: inline-block; margin-left: 0.3rem; padding: 0.1rem 0.3rem; background: var(--color-warning); color: #000; font-size: 0.6rem; font-weight: 600; border-radius: 3px; vertical-align: middle; }
.col-text[b-70qb7l7t19] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.col-sms[b-70qb7l7t19], .col-email[b-70qb7l7t19] { width: 70px; text-align: center; }
.stoerung-table input[type="checkbox"][b-70qb7l7t19] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--color-primary); }
.stoerung-table input[type="checkbox"]:disabled[b-70qb7l7t19] { opacity: 0.3; cursor: not-allowed; }
.table-footer[b-70qb7l7t19] { padding: 0.5rem 1rem; background: var(--surface-page); font-size: 0.75rem; color: var(--text-secondary); display: flex; justify-content: space-between; }
.table-footer .stats[b-70qb7l7t19] { color: var(--color-primary); }
.table-footer .hint[b-70qb7l7t19] { color: var(--text-secondary); font-style: italic; }
.empty-state[b-70qb7l7t19] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; color: var(--text-secondary); text-align: center; }
.empty-state .icon[b-70qb7l7t19] { font-size: 3rem; margin-bottom: 1rem; }
.empty-state .hint[b-70qb7l7t19] { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 1rem; }
.empty-state.small[b-70qb7l7t19] { padding: 1.5rem; }
.empty-state.small .icon[b-70qb7l7t19] { font-size: 1.5rem; }
.empfaenger-list[b-70qb7l7t19] { flex: 0 0 auto; max-height: 280px; overflow-y: auto; border-bottom: 1px solid var(--border-default); }
.empfaenger-item[b-70qb7l7t19] { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; cursor: pointer; transition: all 0.15s; border-bottom: 1px solid var(--border-subtle); }
.empfaenger-item:hover[b-70qb7l7t19] { background: var(--surface-hover); }
.empfaenger-item.selected[b-70qb7l7t19] { background: var(--color-primary-light); border-left: 3px solid var(--color-primary); }
.empfaenger-item.inactive[b-70qb7l7t19] { opacity: 0.5; }
.emp-edit-btn[b-70qb7l7t19] { background: none; border: none; cursor: pointer; padding: 0.3rem 0.5rem; border-radius: 4px; opacity: 0; transition: opacity 0.15s; margin-left: auto; font-size: 0.9rem; }
.empfaenger-item:hover .emp-edit-btn[b-70qb7l7t19] { opacity: 0.6; }
.emp-edit-btn:hover[b-70qb7l7t19] { opacity: 1 !important; background: var(--surface-hover); }
.emp-avatar[b-70qb7l7t19] { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--text-on-primary); flex-shrink: 0; }
.emp-info[b-70qb7l7t19] { flex: 1; min-width: 0; }
.emp-name[b-70qb7l7t19] { font-size: 0.9rem; font-weight: 500; }
.emp-detail[b-70qb7l7t19] { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empfaenger-editor[b-70qb7l7t19] { flex: 1; padding: 1rem; overflow-y: auto; }
.empfaenger-editor h5[b-70qb7l7t19] { margin: 0 0 1rem 0; font-size: 0.95rem; color: var(--color-primary); }
.empfaenger-placeholder[b-70qb7l7t19] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; color: var(--text-secondary); text-align: center; }
.empfaenger-placeholder .icon[b-70qb7l7t19] { font-size: 2rem; margin-bottom: 0.5rem; }
.empfaenger-detail[b-70qb7l7t19] { padding: 1.25rem; }
.empfaenger-detail h5[b-70qb7l7t19] { margin: 0 0 0.75rem 0; font-size: 1rem; }
.empfaenger-detail .detail-row[b-70qb7l7t19] { padding: 0.2rem 0; font-size: 0.85rem; color: var(--text-secondary); }
.form-row[b-70qb7l7t19] { margin-bottom: 0.75rem; }
.form-row.two-col[b-70qb7l7t19] { display: flex; gap: 0.5rem; }
.form-field[b-70qb7l7t19] { flex: 1; }
.form-row label[b-70qb7l7t19] { display: block; font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
.form-row input[type="text"][b-70qb7l7t19], .form-row input[type="email"][b-70qb7l7t19], .form-row input[type="tel"][b-70qb7l7t19] { width: 100%; padding: 0.5rem 0.75rem; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 4px; color: var(--text-primary); font-size: 0.85rem; }
.form-row input:focus[b-70qb7l7t19] { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-10); }
.checkbox-row label[b-70qb7l7t19] { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); }
.form-actions[b-70qb7l7t19] { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-default); }
.btn-save[b-70qb7l7t19], .btn-delete[b-70qb7l7t19], .btn-cancel[b-70qb7l7t19] { padding: 0.5rem 0.75rem; border: none; border-radius: 4px; cursor: pointer; font-size: 0.8rem; }
.btn-save[b-70qb7l7t19] { background: var(--color-primary); color: var(--text-on-primary); }
.btn-save:hover:not(:disabled)[b-70qb7l7t19] { background: var(--color-primary-hover); }
.btn-save:disabled[b-70qb7l7t19] { opacity: 0.5; cursor: not-allowed; }
.btn-delete[b-70qb7l7t19] { background: var(--color-danger); color: var(--text-on-primary); }
.btn-delete:hover[b-70qb7l7t19] { opacity: 0.9; }
.btn-cancel[b-70qb7l7t19] { background: var(--surface-page); color: var(--text-secondary); border: 1px solid var(--border-default); }
.btn-cancel:hover[b-70qb7l7t19] { background: var(--surface-hover); }
.test-section[b-70qb7l7t19] { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-default); }
.test-section h6[b-70qb7l7t19] { margin: 0 0 0.5rem 0; font-size: 0.8rem; color: var(--text-secondary); }
.test-buttons[b-70qb7l7t19] { display: flex; gap: 0.5rem; }
.btn-test[b-70qb7l7t19] { flex: 1; padding: 0.5rem; border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-secondary); border-radius: 4px; cursor: pointer; font-size: 0.75rem; }
.btn-test:hover:not(:disabled)[b-70qb7l7t19] { background: var(--surface-hover); color: var(--text-primary); }
.btn-test:disabled[b-70qb7l7t19] { opacity: 0.4; cursor: not-allowed; }
.spinner-inline[b-70qb7l7t19] { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border-default); border-top-color: var(--color-primary); border-radius: 50%; animation: spin-b-70qb7l7t19 1s linear infinite; vertical-align: middle; margin-right: 0.25rem; }
.test-hint[b-70qb7l7t19] { font-size: 0.75rem; color: var(--color-warning); margin-top: 0.4rem; }
.status-bar[b-70qb7l7t19] { display: flex; gap: 1.5rem; padding: 0.5rem 1rem; background: var(--surface-page); border-top: 1px solid var(--border-default); font-size: 0.75rem; color: var(--text-secondary); }
.status-item[b-70qb7l7t19] { display: flex; align-items: center; gap: 0.25rem; }
.status-item.right[b-70qb7l7t19] { margin-left: auto; }

@media (max-width: 900px) { .content-wrapper[b-70qb7l7t19] { flex-direction: column; } .panel-left[b-70qb7l7t19], .panel-right[b-70qb7l7t19] { width: 100%; flex: none; } .panel-right[b-70qb7l7t19] { max-height: 400px; } .empfaenger-list[b-70qb7l7t19] { max-height: 150px; } }
.table-container[b-70qb7l7t19]::-webkit-scrollbar, .empfaenger-list[b-70qb7l7t19]::-webkit-scrollbar, .empfaenger-editor[b-70qb7l7t19]::-webkit-scrollbar { width: 6px; height: 6px; }
.table-container[b-70qb7l7t19]::-webkit-scrollbar-track, .empfaenger-list[b-70qb7l7t19]::-webkit-scrollbar-track, .empfaenger-editor[b-70qb7l7t19]::-webkit-scrollbar-track { background: var(--surface-sunken); }
.table-container[b-70qb7l7t19]::-webkit-scrollbar-thumb, .empfaenger-list[b-70qb7l7t19]::-webkit-scrollbar-thumb, .empfaenger-editor[b-70qb7l7t19]::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
/* /Components/Pages/Heizungen/VerdrahtungTab.razor.rz.scp.css */
.verdrahtung-container[b-xlv40v4k7l] {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .pdf-object[b-xlv40v4k7l] {
        flex: 1;
        width: 100%;
        height: 100%;
        border: none;
        background: var(--surface-card);
    }
    
    .tab-placeholder[b-xlv40v4k7l] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 2rem;
        text-align: center;
        color: var(--text-body);
    }

    .placeholder-icon[b-xlv40v4k7l] {
        font-size: 4rem;
        margin-bottom: 1rem;
    }

    .tab-placeholder h2[b-xlv40v4k7l] {
        color: var(--color-primary);
        margin: 0 0 0.5rem 0;
        font-size: 1.5rem;
    }

    .tab-placeholder p[b-xlv40v4k7l] {
        color: var(--text-secondary);
        margin: 0 0 2rem 0;
    }

    .placeholder-info[b-xlv40v4k7l] {
        background: var(--surface-sunken);
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        padding: 1rem 1.5rem;
        margin-bottom: 1.5rem;
        min-width: 300px;
    }

    .info-item[b-xlv40v4k7l] {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border-strong);
    }

    .info-item:last-child[b-xlv40v4k7l] {
        border-bottom: none;
    }

    .info-label[b-xlv40v4k7l] {
        color: var(--text-secondary);
    }

    .info-value[b-xlv40v4k7l] {
        color: var(--color-primary);
        font-family: monospace;
    }

    .placeholder-status[b-xlv40v4k7l] {
        margin-bottom: 2rem;
    }

    .status-badge[b-xlv40v4k7l] {
        background: rgba(245, 158, 11, 0.2);
        color: var(--color-warning);
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
    }
/* /Components/Pages/Heizungen/VisualisierungEditor.razor.rz.scp.css */
/* ===== GLOBAL SELECT FIX (dark theme contrast) ===== */
    select[b-xpwtzo4rah] {
        color: var(--text-body) !important;
        -webkit-text-fill-color: var(--text-body) !important;
        color-scheme: light;
    }
    
    select option[b-xpwtzo4rah] {
        background-color: var(--surface-card);
        color: var(--text-body) !important;
        -webkit-text-fill-color: var(--text-body) !important;
    }
    
    /* ===== LOADING ===== */
    .loading-container[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background: var(--surface-workspace);
        color: var(--text-body);
    }

    .spinner[b-xpwtzo4rah] {
        width: 50px;
        height: 50px;
        border: 3px solid var(--border-strong);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-xpwtzo4rah 1s linear infinite;
    }

    @keyframes spin-b-xpwtzo4rah {
        to { transform: rotate(360deg); }
    }

    /* ===== HEIZUNG SELECTION ===== */
    .heizung-selection[b-xpwtzo4rah] {
        padding: 2rem;
        background: var(--surface-workspace);
        min-height: 100vh;
    }

    .selection-header[b-xpwtzo4rah] {
        text-align: center;
        margin-bottom: 2rem;
    }

    .selection-header h1[b-xpwtzo4rah] {
        color: var(--color-primary);
        margin: 1rem 0 0.5rem;
    }

    .selection-subtitle[b-xpwtzo4rah] {
        color: var(--text-muted);
    }

    .btn-back[b-xpwtzo4rah] {
        color: var(--color-primary);
        text-decoration: none;
    }

    .selection-search[b-xpwtzo4rah] {
        max-width: 400px;
        margin: 0 auto 2rem;
    }

    .selection-search input[b-xpwtzo4rah] {
        width: 100%;
        padding: 0.75rem 1rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        color: var(--text-body);
        font-size: 1rem;
    }

    .heizung-grid[b-xpwtzo4rah] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .heizung-card[b-xpwtzo4rah] {
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        border-radius: 8px;
        padding: 1rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .heizung-card:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        transform: translateY(-2px);
    }

    .heizung-card-header[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.75rem;
    }

    .heizung-icon[b-xpwtzo4rah] {
        font-size: 2rem;
    }

    .heizung-info h3[b-xpwtzo4rah] {
        margin: 0;
        color: var(--text-body);
    }

    .heizung-projekt[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .heizung-card-body[b-xpwtzo4rah] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .visu-badge[b-xpwtzo4rah] {
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.8rem;
    }

    .visu-badge.published[b-xpwtzo4rah] { background: rgba(30, 148, 188, 0.2); color: var(--color-primary); }
    .visu-badge.draft[b-xpwtzo4rah] { background: rgba(255, 170, 0, 0.2); color: var(--color-warning); }
    .visu-badge.new[b-xpwtzo4rah] { background: rgba(68, 136, 255, 0.2); color: var(--color-primary); }

    .visu-date[b-xpwtzo4rah] {
        color: var(--text-secondary);
        font-size: 0.8rem;
    }

    .no-results[b-xpwtzo4rah] {
        text-align: center;
        color: var(--text-secondary);
        padding: 2rem;
    }

    /* ===== EDITOR LAYOUT ===== */
    .visu-editor[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        height: 100vh;
        background: var(--surface-workspace);
        color: var(--text-body);
    }

    /* Header */
    .visu-header[b-xpwtzo4rah] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        background: var(--surface-card);
        border-bottom: 1px solid var(--border-strong);
        height: 50px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .header-left[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .header-left h2[b-xpwtzo4rah] {
        margin: 0;
        font-size: 1.1rem;
        color: var(--color-primary);
    }

    .projekt-nr[b-xpwtzo4rah] {
        color: var(--text-secondary);
        font-size: 0.9rem;
    }

    .btn-back-small[b-xpwtzo4rah] {
        background: none;
        border: 1px solid var(--border-strong);
        color: var(--text-muted);
        padding: 0.25rem 0.75rem;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.85rem;
    }

    .btn-back-small:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .unsaved-indicator[b-xpwtzo4rah] {
        color: var(--color-warning);
        font-size: 0.9rem;
    }

    .header-right[b-xpwtzo4rah] {
        display: flex;
        gap: 0.5rem;
    }

    .btn-primary[b-xpwtzo4rah], .btn-secondary[b-xpwtzo4rah], .btn-danger[b-xpwtzo4rah] {
        padding: 0.4rem 1rem;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.9rem;
    }

    .btn-primary[b-xpwtzo4rah] {
        background: var(--color-primary);
        color: var(--surface-card);
    }

    .btn-secondary[b-xpwtzo4rah] {
        background: var(--surface-hover);
        color: var(--text-body);
        border: 1px solid var(--border-strong);
    }
    
    .btn-danger[b-xpwtzo4rah] {
        background: var(--color-danger);
        color: var(--text-on-primary);
    }
    
    .btn-danger:hover[b-xpwtzo4rah] {
        background: #b91c1c;
    }
    
    /* Delete Modal */
    .delete-modal[b-xpwtzo4rah] {
        background: var(--surface-card);
        border-radius: 8px;
        min-width: 400px;
        max-width: 500px;
        box-shadow: 0 10px 30px var(--surface-overlay);
    }
    
    .delete-modal-header[b-xpwtzo4rah] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid var(--border-strong);
    }
    
    .delete-modal-header h3[b-xpwtzo4rah] {
        margin: 0;
        color: var(--color-danger);
    }
    
    .delete-modal-body[b-xpwtzo4rah] {
        padding: 1.5rem;
    }
    
    .delete-modal-body p[b-xpwtzo4rah] {
        margin: 0.5rem 0;
        color: var(--text-body);
    }
    
    .delete-modal-body .warning-text[b-xpwtzo4rah] {
        color: var(--color-warning);
        margin-top: 1rem;
    }
    
    .delete-modal-actions[b-xpwtzo4rah] {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        padding: 1rem;
        border-top: 1px solid var(--border-strong);
    }

    /* Main Area */
    .visu-main[b-xpwtzo4rah] {
        display: flex;
        flex: 1;
        overflow: hidden;
    }

    /* ===== LEFT TOOLBOX ===== */
    .visu-toolbox[b-xpwtzo4rah] {
        width: 260px;
        background: var(--surface-card);
        border-right: 1px solid var(--border-strong);
        box-shadow: 2px 0 8px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .toolbox-tabs[b-xpwtzo4rah] {
        display: flex;
        flex-wrap: wrap;
        background: var(--surface-sunken);
        border-bottom: 1px solid var(--border-strong);
    }

    .tab-btn[b-xpwtzo4rah] {
        flex: 1;
        min-width: 50%;
        padding: 0.5rem;
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 0.75rem;
        transition: all 0.2s;
    }

    .tab-btn:hover[b-xpwtzo4rah] {
        color: var(--text-body);
    }

    .tab-btn.active[b-xpwtzo4rah] {
        color: var(--color-primary);
        background: var(--color-primary-light);
        border-bottom: 2px solid var(--color-primary);
    }

    .toolbox-content[b-xpwtzo4rah] {
        flex: 1;
        overflow-y: auto;
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        background: var(--surface-card);
    }

    .tool-section[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .tool-section h4[b-xpwtzo4rah] {
        margin: 0.75rem 0 0.5rem;
        color: var(--text-muted);
        font-size: 0.8rem;
        text-transform: uppercase;
        flex-shrink: 0;
    }

    .tool-section h4:first-child[b-xpwtzo4rah] {
        margin-top: 0;
    }

    /* Script Section - Always visible */
    .script-section[b-xpwtzo4rah] {
        padding: 0.75rem;
        background: var(--surface-sunken);
        border-bottom: 1px solid var(--border-strong);
    }

    .channel-badge[b-xpwtzo4rah] {
        display: inline-block;
        padding: 0.2rem 0.5rem;
        background: rgba(30, 148, 188, 0.15);
        color: var(--color-primary);
        border-radius: 4px;
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }

    /* Script Upload */
    .script-upload[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .upload-btn[b-xpwtzo4rah] {
        padding: 0.4rem 0.75rem;
        background: var(--surface-hover);
        border: 1px dashed var(--border-strong);
        border-radius: 4px;
        color: var(--color-primary);
        cursor: pointer;
        font-size: 0.8rem;
    }

    .upload-btn:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
    }

    .script-name[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-size: 0.75rem;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .search-input[b-xpwtzo4rah] {
        width: 100%;
        padding: 0.4rem 0.5rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-body);
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
        flex-shrink: 0;
    }

    .channel-count[b-xpwtzo4rah] {
        color: var(--text-secondary);
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
        flex-shrink: 0;
    }

    .empty-state[b-xpwtzo4rah] {
        text-align: center;
        padding: 1rem;
        color: var(--text-secondary);
    }

    .empty-state .hint[b-xpwtzo4rah] {
        font-size: 0.8rem;
        color: var(--text-secondary);
    }

    .hint[b-xpwtzo4rah] {
        color: var(--text-secondary);
        font-size: 0.88rem;
        font-style: italic;
    }

    /* Bitmap Upload */
    .upload-area[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .bitmap-upload-input[b-xpwtzo4rah] {
        display: none;
    }

    .upload-label[b-xpwtzo4rah] {
        display: inline-block;
        padding: 0.5rem 1rem;
        background: var(--color-primary);
        color: var(--text-on-primary);
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.9rem;
        text-align: center;
        transition: background 0.2s;
    }

    .upload-label:hover[b-xpwtzo4rah] {
        background: var(--color-primary-hover);
    }

    .upload-filename[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.85rem;
        word-break: break-all;
    }

    .bitmap-list[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .bitmap-item[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0.6rem;
        background: rgba(0,0,0,0.03);
        border: 1px solid rgba(0,0,0,0.06);
        border-radius: 4px;
        cursor: grab;
        font-size: 0.88rem;
    }

    .bitmap-item:hover[b-xpwtzo4rah] {
        background: rgba(30, 148, 188, 0.15);
        border-color: rgba(30, 148, 188, 0.3);
    }
    
    .bitmap-item.is-current-bg[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: rgba(30, 148, 188, 0.08);
    }
    
    .bitmap-thumb[b-xpwtzo4rah] {
        width: 40px;
        height: 30px;
        border-radius: 3px;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--surface-card);
    }
    
    .bitmap-thumb img[b-xpwtzo4rah] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .bitmap-info[b-xpwtzo4rah] {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }
    
    .bitmap-name[b-xpwtzo4rah] {
        font-size: 0.8rem;
        color: var(--text-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .bitmap-status[b-xpwtzo4rah] {
        font-size: 0.7rem;
        color: var(--color-primary);
    }
    
    .bitmap-status.assigned[b-xpwtzo4rah] {
        color: var(--color-primary);
    }
    
    .bitmap-status.unassigned[b-xpwtzo4rah] {
        color: var(--color-warning);
    }
    
    .bitmap-actions[b-xpwtzo4rah] {
        display: flex;
        gap: 0.2rem;
        flex-shrink: 0;
    }
    
    /* Current Background Info */
    .current-bg-info[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        background: rgba(30, 148, 188, 0.08);
        border: 1px solid rgba(30, 148, 188, 0.2);
        border-radius: 6px;
    }
    
    .current-bg-thumb[b-xpwtzo4rah] {
        width: 48px;
        height: 36px;
        border-radius: 4px;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--surface-card);
    }
    
    .current-bg-thumb img[b-xpwtzo4rah] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .current-bg-details[b-xpwtzo4rah] {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }
    
    .bg-name[b-xpwtzo4rah] {
        font-size: 0.8rem;
        color: var(--color-primary);
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .bg-size[b-xpwtzo4rah], .bg-scale[b-xpwtzo4rah] {
        font-size: 0.7rem;
        color: var(--text-muted);
    }
    
    /* Background Preview in Properties Panel */
    .bg-preview[b-xpwtzo4rah] {
        margin-bottom: 0.5rem;
        text-align: center;
    }
    
    .bg-preview-img[b-xpwtzo4rah] {
        max-width: 100%;
        max-height: 80px;
        border-radius: 4px;
        border: 1px solid var(--border-strong);
        object-fit: contain;
        background: var(--surface-card);
    }
    
    .bg-preview-name[b-xpwtzo4rah] {
        display: block;
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }

    .bitmap-icon[b-xpwtzo4rah] {
        font-size: 1.1rem;
    }

    .bitmap-name[b-xpwtzo4rah] {
        color: var(--text-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .link-info[b-xpwtzo4rah] {
        color: var(--color-primary);
        background: rgba(30, 148, 188, 0.1);
        padding: 0.3rem 0.5rem;
        border-radius: 4px;
        font-size: 0.88rem;
        margin-top: 0.5rem;
    }

    .rotation-buttons[b-xpwtzo4rah] {
        display: flex;
        gap: 0.3rem;
    }

    .rotation-buttons .btn-tiny[b-xpwtzo4rah] {
        padding: 0.35rem 0.55rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        color: var(--text-muted);
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.85rem;
    }

    .rotation-buttons .btn-tiny:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        color: var(--text-body);
    }

    .rotation-buttons .btn-tiny.active[b-xpwtzo4rah] {
        background: rgba(30, 148, 188, 0.2);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }
    
    .rotation-controls[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .size-inputs[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .size-input[b-xpwtzo4rah] {
        width: 55px;
        padding: 0.3rem 0.4rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-body);
        font-size: 0.8rem;
        text-align: center;
    }

    .size-input:focus[b-xpwtzo4rah] {
        outline: none;
        border-color: var(--color-primary);
    }

    .size-input[b-xpwtzo4rah]::placeholder {
        color: var(--text-secondary);
        font-size: 0.7rem;
    }

    .size-unit[b-xpwtzo4rah] {
        color: var(--text-secondary);
        font-size: 0.75rem;
    }

    /* Channel List */
    .channel-list[b-xpwtzo4rah] {
        list-style: none;
        padding: 0;
        margin: 0;
        flex: 1;
        overflow-y: auto;
    }

    .channel-item[b-xpwtzo4rah] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.4rem 0.5rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        margin-bottom: 0.25rem;
        cursor: grab;
        font-size: 0.8rem;
    }

    .channel-item:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--surface-hover);
    }

    .channel-key[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-family: monospace;
        font-weight: bold;
    }

    .channel-name[b-xpwtzo4rah] {
        color: var(--text-body);
        flex: 1;
    }

    .channel-unit[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.75rem;
    }

    /* Symbol Grid */
    .symbol-grid[b-xpwtzo4rah] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .symbol-item[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        cursor: grab;
    }

    .symbol-item:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--surface-hover);
    }

    .symbol-icon[b-xpwtzo4rah] {
        font-size: 1.5rem;
    }

    .symbol-label[b-xpwtzo4rah] {
        font-size: 0.7rem;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }

    /* Tool Grid */





    /* Color & Stroke */
    .color-row[b-xpwtzo4rah], .stroke-row[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .color-picker[b-xpwtzo4rah] {
        width: 40px;
        height: 30px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .color-label[b-xpwtzo4rah], .stroke-label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.8rem;
        font-family: monospace;
    }

    .quick-colors[b-xpwtzo4rah] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
    }

    .color-btn[b-xpwtzo4rah] {
        min-width: 32px;
        padding: 0.35rem 0.5rem;
        border: 2px solid transparent;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.65rem;
        font-weight: bold;
        transition: all 0.15s;
    }

    .color-btn:hover[b-xpwtzo4rah] {
        transform: scale(1.1);
        border-color: var(--color-primary);
    }

    .stroke-slider[b-xpwtzo4rah] {
        flex: 1;
        accent-color: var(--color-primary);
    }

    /* Line Type Buttons */
    .line-type-row[b-xpwtzo4rah] {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .line-type-btn[b-xpwtzo4rah] {
        flex: 1;
        padding: 0.5rem;
        background: var(--surface-card);
        border: 2px solid var(--border-strong);
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        transition: all 0.15s;
    }

    .line-type-btn:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .line-type-btn.active[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: rgba(30, 148, 188, 0.1);
        color: var(--color-primary);
    }

    .line-type-btn svg[b-xpwtzo4rah] {
        display: block;
    }

    /* Stroke Preview */
    .stroke-preview[b-xpwtzo4rah] {
        background: var(--surface-card);
        border-radius: 4px;
        padding: 5px;
        margin-bottom: 0.75rem;
        overflow: hidden;
    }

    .stroke-preview svg[b-xpwtzo4rah] {
        display: block;
        width: 100%;
        height: 20px;
    }

    /* Fill Toggle */
    .fill-toggle[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 0.85rem;
    }

    .fill-toggle input[type="checkbox"][b-xpwtzo4rah] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }

    /* Text Input */
    .text-input[b-xpwtzo4rah] {
        width: 100%;
        padding: 0.5rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-body);
        margin-bottom: 0.5rem;
        font-size: 14px;
    }

    .text-input:focus[b-xpwtzo4rah] {
        outline: none;
        border-color: var(--color-primary);
    }

    .font-size-row[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .font-slider[b-xpwtzo4rah] {
        flex: 1;
        accent-color: var(--color-primary);
    }

    .font-size-label[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-weight: bold;
        min-width: 50px;
        text-align: right;
    }

    .text-format-row[b-xpwtzo4rah] {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .format-btn[b-xpwtzo4rah] {
        width: 40px;
        height: 36px;
        background: var(--surface-card);
        border: 2px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 16px;
        transition: all 0.15s;
    }

    .format-btn:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .format-btn.active[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: rgba(30, 148, 188, 0.1);
        color: var(--color-primary);
    }

    .display-option-row[b-xpwtzo4rah] {
        margin-bottom: 0.75rem;
    }

    .display-toggle[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 0.9rem;
    }

    .display-toggle input[type="checkbox"][b-xpwtzo4rah] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }

    .button-color-row[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .button-color-row label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .button-link-row[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        margin-bottom: 0.75rem;
    }

    .button-link-row label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .page-select[b-xpwtzo4rah] {
        width: 100%;
        padding: 0.4rem 0.5rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-body);
        font-size: 0.85rem;
        color-scheme: light;
    }

    .page-select:focus[b-xpwtzo4rah] {
        outline: none;
        border-color: var(--color-primary);
    }

    .text-preview[b-xpwtzo4rah] {
        padding: 10px;
        background: var(--surface-card);
        border-radius: 4px;
        margin-bottom: 0.75rem;
        min-height: 40px;
        display: flex;
        align-items: center;
        color: #000;
    }

    .text-preview.as-button[b-xpwtzo4rah] {
        background: transparent;
        justify-content: center;
    }

    /* Text Drag Item */
    .text-drag-item[b-xpwtzo4rah] {
        padding: 12px 16px;
        background: var(--surface-card);
        border: 2px dashed var(--color-primary);
        border-radius: 6px;
        margin-bottom: 0.5rem;
        cursor: grab;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: all 0.2s;
        color: #000;
    }

    .text-drag-item:hover[b-xpwtzo4rah] {
        border-style: solid;
        background: #f0fff5;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(30, 148, 188, 0.3);
    }

    .text-drag-item:active[b-xpwtzo4rah] {
        cursor: grabbing;
        transform: translateY(0);
    }

    .text-drag-item.as-button[b-xpwtzo4rah] {
        border-radius: 10px;
        border: none;
        padding: 14px 24px;
        background: linear-gradient(180deg, 
            rgba(0,0,0,0.15) 0%, 
            rgba(0,0,0,0.06) 10%, 
            transparent 50%, 
            rgba(0,0,0,0.1) 90%, 
            rgba(0,0,0,0.2) 100%
        ), var(--btn-color, var(--border-strong));
        box-shadow: 
            0 6px 20px rgba(0, 0, 0, 0.4),
            0 2px 4px rgba(0, 0, 0, 0.3),
            inset 0 2px 0 rgba(0,0,0,0.12),
            inset 0 -2px 0 rgba(0,0,0,0.2);
        text-shadow: 0 2px 4px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }

    .text-drag-item.as-button[b-xpwtzo4rah]::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 10%;
        right: 10%;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(0,0,0,0.25), transparent);
        border-radius: 2px;
    }

    .text-drag-item.as-button:hover[b-xpwtzo4rah] {
        transform: translateY(-4px);
        box-shadow: 
            0 10px 30px var(--surface-overlay),
            0 4px 8px rgba(0, 0, 0, 0.3),
            inset 0 2px 0 rgba(0,0,0,0.15),
            inset 0 -2px 0 rgba(0,0,0,0.2),
            0 0 20px rgba(30, 148, 188, 0.3);
    }

    .text-drag-item.as-button:active[b-xpwtzo4rah] {
        transform: translateY(2px);
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.4),
            inset 0 2px 4px rgba(0,0,0,0.3),
            inset 0 -1px 0 rgba(0,0,0,0.06);
    }

    .drag-handle[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-size: 18px;
        opacity: 0.7;
    }

    .text-drag-item:hover .drag-handle[b-xpwtzo4rah] {
        opacity: 1;
    }

    .text-drag-item.as-button .drag-handle[b-xpwtzo4rah] {
        color: rgba(0,0,0,0.4);
        text-shadow: none;
    }

    .hint.active[b-xpwtzo4rah] {
        color: var(--color-primary);
        background: rgba(30, 148, 188, 0.1);
        padding: 0.5rem;
        border-radius: 4px;
        border: 1px solid var(--color-primary);
    }

    .text-options[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .text-options label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.8rem;
    }

    .text-options select[b-xpwtzo4rah] {
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        color: var(--text-body);
        padding: 0.25rem;
        border-radius: 4px;
    }



    /* ===== CENTER CANVAS AREA ===== */
    .visu-canvas-area[b-xpwtzo4rah] {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: var(--surface-workspace);
        overflow: hidden;
    }

    .canvas-toolbar[b-xpwtzo4rah] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        background: var(--surface-card);
        border-bottom: 1px solid var(--border-strong);
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        min-height: 42px;
        flex-shrink: 0;
    }

    .toolbar-left[b-xpwtzo4rah], .toolbar-center[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .toolbar-actions[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        overflow-x: auto;
        overflow-y: hidden;
        flex-shrink: 1;
        min-width: 0;
        scrollbar-width: none; /* Firefox */
    }
    
    .toolbar-actions[b-xpwtzo4rah]::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    
    .toolbar-actions .btn-icon:disabled[b-xpwtzo4rah] {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .toolbar-right[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .select-toggle[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        padding: 0.3rem 0.6rem;
        border-radius: 20px;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s;
        user-select: none;
        flex-shrink: 0;
    }

    .select-toggle:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--border-default);
    }

    .select-toggle.active[b-xpwtzo4rah] {
        background: rgba(30, 148, 188, 0.15);
        border-color: var(--color-primary);
    }

    .select-toggle .toggle-icon[b-xpwtzo4rah] {
        font-size: 0.9rem;
    }

    .select-toggle .toggle-label[b-xpwtzo4rah] {
        font-size: 0.8rem;
        color: var(--text-muted);
        transition: color 0.2s;
    }

    .select-toggle.active .toggle-label[b-xpwtzo4rah] {
        color: var(--color-primary);
    }

    .toggle-switch[b-xpwtzo4rah] {
        width: 32px;
        height: 18px;
        background: var(--surface-card);
        border-radius: 10px;
        position: relative;
        transition: background 0.2s;
    }

    .select-toggle.active .toggle-switch[b-xpwtzo4rah] {
        background: var(--color-primary);
    }

    .toggle-knob[b-xpwtzo4rah] {
        position: absolute;
        width: 14px;
        height: 14px;
        background: var(--text-secondary);
        border-radius: 50%;
        top: 2px;
        left: 2px;
        transition: left 0.2s, background 0.2s;
    }

    .select-toggle.active .toggle-knob[b-xpwtzo4rah] {
        left: 16px;
        background: var(--surface-card);
    }

    .mode-indicator[b-xpwtzo4rah] {
        padding: 0.25rem 0.75rem;
        background: var(--surface-hover);
        border-radius: 4px;
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    .mode-indicator.tool-active[b-xpwtzo4rah] {
        background: rgba(255, 193, 7, 0.15);
        color: var(--color-warning);
        border: 1px solid rgba(255, 193, 7, 0.3);
    }

    .coords[b-xpwtzo4rah] {
        font-family: monospace;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .element-count[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.8rem;
    }

    .btn-icon[b-xpwtzo4rah] {
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        color: var(--text-body);
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.85rem;
        flex-shrink: 0;
        transition: border-color 0.15s;
    }

    .btn-icon:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
    }

    .btn-icon:disabled[b-xpwtzo4rah] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* Page Navigation */
    .page-navigation[b-xpwtzo4rah] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--surface-page);
        border-bottom: 1px solid var(--border-strong);
        padding: 0 0.5rem;
        min-height: 36px;
    }

    .page-tabs[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 2px;
        overflow-x: auto;
        flex: 1;
        scrollbar-width: thin;
        scrollbar-color: var(--border-default) transparent;
    }

    .page-tabs[b-xpwtzo4rah]::-webkit-scrollbar {
        height: 4px;
    }

    .page-tabs[b-xpwtzo4rah]::-webkit-scrollbar-thumb {
        background: var(--border-default);
        border-radius: 2px;
    }

    .page-tab[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.75rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-bottom: none;
        border-radius: 6px 6px 0 0;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 0.8rem;
        white-space: nowrap;
        transition: all 0.15s;
        position: relative;
        top: 1px;
    }

    .page-tab:hover[b-xpwtzo4rah] {
        background: var(--surface-hover);
        color: var(--text-body);
    }

    .page-tab.active[b-xpwtzo4rah] {
        background: var(--surface-hover);
        border-color: var(--color-primary);
        border-bottom: 1px solid var(--surface-hover);
        color: var(--color-primary);
    }

    .page-icon[b-xpwtzo4rah] {
        font-size: 0.9rem;
    }

    .page-name[b-xpwtzo4rah] {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .page-tab-close[b-xpwtzo4rah] {
        background: transparent;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 1rem;
        padding: 0 0.2rem;
        margin-left: 0.25rem;
        line-height: 1;
        border-radius: 3px;
    }

    .page-tab-close:hover[b-xpwtzo4rah] {
        color: var(--color-danger);
        background: rgba(255, 68, 68, 0.2);
    }

    .page-tab-add[b-xpwtzo4rah] {
        background: transparent;
        border: 1px dashed var(--border-strong);
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 1.1rem;
        padding: 0.3rem 0.6rem;
        border-radius: 6px 6px 0 0;
        transition: all 0.15s;
    }

    .page-tab-add:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        color: var(--color-primary);
        background: rgba(30, 148, 188, 0.1);
    }

    .page-actions[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding-left: 0.5rem;
        border-left: 1px solid var(--border-strong);
        margin-left: 0.5rem;
    }

    .canvas-wrapper[b-xpwtzo4rah] {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        overflow: auto;
        background: var(--surface-hover);
        position: relative;
        padding: 0;
        outline: none;
    }
    
    .canvas-wrapper:focus[b-xpwtzo4rah] {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

    .main-canvas[b-xpwtzo4rah] {
        background: var(--surface-card);
        border: none;
        cursor: crosshair;
        display: block;
        /* Explicitly prevent CSS scaling - size controlled by canvas.width/height attributes only */
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
    }

    .canvas-size-controls[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .canvas-size-controls label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.8rem;
    }

    .canvas-size-controls input[type="number"][b-xpwtzo4rah] {
        width: 55px;
        padding: 0.2rem 0.4rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-body);
        font-size: 0.8rem;
    }
    
    .design-size-label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.75rem;
        font-variant-numeric: tabular-nums;
        min-width: 5rem;
        text-align: center;
    }

    .toolbar-divider[b-xpwtzo4rah] {
        color: var(--border-default);
        margin: 0 0.25rem;
        flex-shrink: 0;
    }
    
    .toolbar-toggle-active[b-xpwtzo4rah] {
        background: #1E94BC33 !important;
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 4px #1E94BC44;
    }
    
    .toolbar-select[b-xpwtzo4rah] {
        padding: 0.2rem 0.3rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-body);
        font-size: 0.75rem;
        cursor: pointer;
        flex-shrink: 0;
        color-scheme: light;
    }
    
    .toolbar-select:hover[b-xpwtzo4rah] {
        border-color: var(--border-default);
    }
    
    .zoom-label[b-xpwtzo4rah] {
        font-size: 0.75rem !important;
        min-width: 3.5rem;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }
    
    .canvas-zoom-container[b-xpwtzo4rah] {
        display: inline-block;
        transition: transform 0.15s ease;
    }

    .btn-small[b-xpwtzo4rah] {
        padding: 0.25rem 0.75rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-body);
        cursor: pointer;
        font-size: 0.85rem;
    }

    .btn-small:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
    }

    .btn-small.danger[b-xpwtzo4rah] {
        border-color: var(--color-danger);
        color: var(--color-danger);
    }

    /* ===== RIGHT PROPERTIES PANEL ===== */
    .visu-properties[b-xpwtzo4rah] {
        width: 288px;
        background: var(--surface-card);
        border-left: 1px solid var(--border-strong);
        box-shadow: -2px 0 8px rgba(0,0,0,0.1);
        overflow-y: auto;
        padding: 0.75rem;
        font-size: 0.95rem;
        display: flex;
        flex-direction: column;
    }

    .visu-properties h3[b-xpwtzo4rah] {
        margin: 0 0 1rem;
        color: var(--color-primary);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .property-section[b-xpwtzo4rah] {
        margin-bottom: 1.25rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border-strong);
        flex-shrink: 0;
    }

    .property-section:last-child[b-xpwtzo4rah] {
        flex: 1 0 auto;
        margin-bottom: 0;
        border-bottom: none;
    }

    .property-section.info-section[b-xpwtzo4rah] {
        background: rgba(100, 149, 237, 0.1);
        padding: 0.5rem;
        border-radius: 4px;
        border: 1px solid rgba(100, 149, 237, 0.3);
        flex-shrink: 0;
    }

    .property-section.info-section h4[b-xpwtzo4rah] {
        color: var(--color-primary);
    }

    .property-section.info-section .hint[b-xpwtzo4rah] {
        margin-bottom: 0.5rem;
    }

    .property-section.info-section .hint strong[b-xpwtzo4rah] {
        color: var(--text-body);
    }

    .property-section h4[b-xpwtzo4rah] {
        margin: 0.6rem 0 0.5rem;
        color: var(--text-muted);
        font-size: 0.9rem;
        text-transform: uppercase;
    }

    .property-section h4:first-child[b-xpwtzo4rah] {
        margin-top: 0;
    }

    .property-section.selected[b-xpwtzo4rah] {
        background: rgba(30, 148, 188, 0.05);
        padding: 0.6rem;
        border-radius: 4px;
        border: 1px solid rgba(30, 148, 188, 0.2);
        flex: 1 0 auto;
    }
    
    .multi-selection-info[b-xpwtzo4rah] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
    }
    
    .multi-type-badge[b-xpwtzo4rah] {
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: 12px;
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
        color: var(--text-secondary);
    }
    
    .multi-actions[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
    }
    
    .multi-actions .btn-small[b-xpwtzo4rah] {
        width: 100%;
        text-align: center;
    }
    
    .btn-danger[b-xpwtzo4rah] {
        background: rgba(195,29,100,0.1) !important;
        border-color: rgba(195,29,100,0.2) !important;
        color: var(--color-danger) !important;
    }
    
    .btn-danger:hover[b-xpwtzo4rah] {
        background: rgba(195,29,100,0.15) !important;
    }
    
    .multi-hint[b-xpwtzo4rah] {
        font-size: 0.72rem;
        color: var(--text-secondary);
        line-height: 1.5;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-strong);
    }
    
    .zorder-buttons[b-xpwtzo4rah] {
        display: flex;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
    }
    
    .zorder-buttons .btn-small[b-xpwtzo4rah] {
        flex: 1;
        text-align: center;
        padding: 0.35rem 0;
        min-width: 0;
    }
    
    
    
    
    
    

    .property-row[b-xpwtzo4rah] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
        gap: 0.5rem;
    }

    .property-row label[b-xpwtzo4rah] {
        color: var(--text-muted);
        min-width: 60px;
    }

    .compact-fields[b-xpwtzo4rah] {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.6rem;
    }
    
    .compact-field[b-xpwtzo4rah] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
    }
    
    .compact-field .field-label[b-xpwtzo4rah] {
        font-size: 0.78rem;
        color: var(--text-secondary);
        text-align: center;
    }
    
    .prop-input-compact[b-xpwtzo4rah] {
        width: 100%;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-body);
        padding: 0.3rem 0.35rem;
        font-size: 0.9rem;
        text-align: center;
    }
    
    .inline-row[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }
    
    .inline-label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.85rem;
        min-width: 42px;
        flex-shrink: 0;
    }
    
    .prop-info-grid[b-xpwtzo4rah] {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.2rem 0.5rem;
        align-items: center;
        font-size: 0.85rem;
        margin-bottom: 0.6rem;
        padding: 0.4rem;
        background: var(--surface-page);
        border-radius: 4px;
    }
    
    .prop-info-grid .prop-label[b-xpwtzo4rah] {
        color: var(--text-muted);
        white-space: nowrap;
    }
    
    .prop-info-grid .prop-input-sm[b-xpwtzo4rah] {
        width: 50px;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 3px;
        color: var(--text-body);
        padding: 0.15rem 0.3rem;
        font-size: 0.8rem;
        text-align: center;
    }
    
    .property-row-dual[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 0.5rem;
    }
    
    .property-row-dual label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.85rem;
        flex-shrink: 0;
    }
    
    .property-row-dual .prop-input[b-xpwtzo4rah] {
        flex: 1;
        min-width: 0;
    }
    
    .property-actions-footer[b-xpwtzo4rah] {
        display: flex;
        gap: 0.4rem;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-strong);
    }
    
    .property-actions-footer .btn-small[b-xpwtzo4rah] {
        flex: 1;
        text-align: center;
        font-size: 0.8rem;
    }
    
    .btn-small.primary[b-xpwtzo4rah] {
        background: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: var(--surface-card) !important;
    }
    
    .btn-small.primary:hover[b-xpwtzo4rah] {
        background: var(--color-primary-hover) !important;
    }
    
    .color-picker-sm[b-xpwtzo4rah] {
        width: 30px;
        height: 26px;
        border: 1px solid var(--border-strong);
        border-radius: 3px;
        padding: 1px;
        background: var(--surface-card);
        cursor: pointer;
        flex-shrink: 0;
    }
    
    .prop-value-sm[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.8rem;
        min-width: 24px;
        text-align: right;
        flex-shrink: 0;
    }
    
    .prop-select-sm[b-xpwtzo4rah] {
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 3px;
        color: var(--text-body);
        padding: 3px 5px;
        font-size: 0.85rem;
        width: 40px;
        flex-shrink: 0;
        color-scheme: light;
    }
    
    .fill-toggle-inline[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        cursor: pointer;
        flex-shrink: 0;
    }

    .prop-input[b-xpwtzo4rah] {
        width: 70px;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-body);
        padding: 0.3rem 0.4rem;
        font-size: 0.95rem;
    }

    .prop-input-wide[b-xpwtzo4rah] {
        width: 100%;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-body);
        padding: 0.3rem 0.4rem;
        font-size: 0.95rem;
    }

    .prop-input:focus[b-xpwtzo4rah],
    .prop-input-wide:focus[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        outline: none;
    }

    .checkbox-label[b-xpwtzo4rah] {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        color: var(--text-body);
        font-size: 0.85rem;
        cursor: pointer;
        margin-right: 1rem;
    }

    .checkbox-label input[type="checkbox"][b-xpwtzo4rah] {
        accent-color: var(--color-primary);
        cursor: pointer;
    }

    .prop-select[b-xpwtzo4rah] {
        flex: 1;
        background-color: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-body) !important;
        -webkit-text-fill-color: var(--text-body);
        padding: 0.3rem 0.4rem;
        font-size: 0.9rem;
        color-scheme: light;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 6px center;
        padding-right: 22px;
    }
    
    .prop-select option[b-xpwtzo4rah] {
        background-color: var(--surface-card);
        color: var(--text-body) !important;
        -webkit-text-fill-color: var(--text-body);
    }

    .prop-select:focus[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        outline: none;
    }
    
    .format-grid[b-xpwtzo4rah] {
        display: grid;
        grid-template-columns: 75px 1fr;
        gap: 0.35rem 0.5rem;
        align-items: center;
        font-size: 0.85rem;
    }
    
    .format-grid > label[b-xpwtzo4rah] {
        color: var(--text-muted);
        white-space: nowrap;
    }
    
    .format-grid .prop-select[b-xpwtzo4rah] {
        width: 100%;
        min-width: 0;
    }
    
    .format-grid .bg-color-row[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
    
    .opacity-row[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
    
    .opacity-row .stroke-slider[b-xpwtzo4rah] {
        flex: 1;
        min-width: 0;
    }
    
    .bg-color-select[b-xpwtzo4rah] {
        color-scheme: light;
        color: var(--text-body) !important;
        text-shadow: 0 0 3px rgba(0,0,0,0.8), 0 0 1px rgba(0,0,0,0.9);
    }
    
    .bg-color-select option[b-xpwtzo4rah] {
        background-color: var(--surface-card);
        color: var(--text-body);
        text-shadow: none;
    }

    .prop-value[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-size: 0.9rem;
        min-width: 40px;
        text-align: right;
    }
    
    .prop-value-small[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.75rem;
        font-family: monospace;
    }
    
    .bg-color-row[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .checkbox-inline[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.75rem;
        color: var(--text-muted);
        cursor: pointer;
    }
    
    .checkbox-inline input[type="checkbox"][b-xpwtzo4rah] {
        accent-color: var(--color-primary);
        cursor: pointer;
    }
    
    .property-subheader[b-xpwtzo4rah] {
        font-size: 0.92rem;
        color: var(--color-primary);
        margin: 0.85rem 0 0.5rem 0;
        padding-top: 0.6rem;
        border-top: 1px solid var(--border-default);
    }
    
    .style-buttons[b-xpwtzo4rah] {
        display: flex;
        gap: 0.25rem;
    }
    
    .style-btn[b-xpwtzo4rah] {
        width: 28px;
        height: 28px;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        transition: all 0.2s;
    }
    
    .style-btn:hover[b-xpwtzo4rah] {
        background: var(--border-default);
        border-color: var(--border-default);
    }
    
    .style-btn.active[b-xpwtzo4rah] {
        background: rgba(30,148,188,0.15);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .prop-value-highlight[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-weight: bold;
        font-size: 0.85rem;
    }

    .stroke-slider[b-xpwtzo4rah] {
        flex: 1;
        height: 6px;
        accent-color: var(--color-primary);
    }

    .fill-toggle[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        color: var(--text-body) !important;
    }

    .fill-toggle input[b-xpwtzo4rah] {
        accent-color: var(--color-primary);
    }


    .property-section.selected[b-xpwtzo4rah] {
        border: 1px solid var(--color-primary);
        background: rgba(30, 148, 188, 0.05);
    }

    .element-item.selected[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: rgba(30, 148, 188, 0.15);
        box-shadow: 0 0 5px rgba(30, 148, 188, 0.3);
    }

    .element-item.selected span[b-xpwtzo4rah] {
        color: var(--color-primary);
    }

    .element-clickable[b-xpwtzo4rah] {
        cursor: pointer;
    }

    .element-clickable:hover[b-xpwtzo4rah] {
        color: var(--color-primary);
    }

    .property-actions[b-xpwtzo4rah] {
        margin: 0.75rem 0;
        display: flex;
        gap: 0.5rem;
    }
    
    .property-actions.bottom-actions[b-xpwtzo4rah] {
        margin-top: 1rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-strong);
        flex-wrap: nowrap;
    }
    
    .property-actions.bottom-actions .btn-small[b-xpwtzo4rah] {
        flex: 1;
        text-align: center;
        padding: 0.45rem 0.3rem;
        white-space: nowrap;
        font-size: 0.82rem;
    }

    .btn-small[b-xpwtzo4rah] {
        padding: 0.45rem 0.85rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-body);
        cursor: pointer;
        font-size: 0.88rem;
        transition: all 0.2s;
    }

    .btn-small:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--border-default);
    }

    .btn-small.danger[b-xpwtzo4rah] {
        border-color: var(--color-danger);
        color: var(--color-danger);
    }

    .btn-small.danger:hover[b-xpwtzo4rah] {
        background: rgba(255, 68, 68, 0.2);
    }

    .keyboard-hint[b-xpwtzo4rah] {
        font-size: 0.75rem;
        color: var(--text-muted);
        background: rgba(30, 148, 188, 0.1);
        padding: 0.4rem 0.6rem;
        border-radius: 4px;
        margin-bottom: 0.5rem;
        text-align: center;
        border: 1px solid rgba(30, 148, 188, 0.2);
    }

    .arrow-pad[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    .arrow-pad button[b-xpwtzo4rah] {
        width: 35px;
        height: 35px;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-body);
        cursor: pointer;
        font-size: 1rem;
        transition: all 0.15s;
    }

    .arrow-pad button:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--border-default);
    }

    .arrow-pad button:active[b-xpwtzo4rah] {
        transform: scale(0.95);
        background: var(--border-default);
    }

    .arrow-row[b-xpwtzo4rah] {
        display: flex;
        gap: 0.25rem;
    }

    .canvas-wrapper:focus[b-xpwtzo4rah] {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

    .element-list[b-xpwtzo4rah] {
        max-height: 150px;
        overflow-y: auto;
    }

    .element-item[b-xpwtzo4rah] {
        padding: 0.35rem 0.5rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        margin-bottom: 0.25rem;
        font-size: 0.8rem;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }

    .element-item span[b-xpwtzo4rah] {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .element-item:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--surface-hover);
    }

    .btn-tiny[b-xpwtzo4rah] {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 1.1rem;
        padding: 0 0.3rem;
        line-height: 1;
        border-radius: 3px;
        transition: all 0.15s;
        flex-shrink: 0;
    }

    .btn-tiny:hover[b-xpwtzo4rah] {
        color: var(--color-danger);
        background: rgba(255, 68, 68, 0.2);
    }

    .btn-tiny.delete[b-xpwtzo4rah] {
        font-weight: bold;
    }

    /* Modal Dialog */
    .modal-overlay[b-xpwtzo4rah] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .modal-dialog[b-xpwtzo4rah] {
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        padding: 1.5rem;
        min-width: 350px;
        max-width: 500px;
        box-shadow: 0 10px 40px var(--surface-overlay);
    }

    .modal-dialog h3[b-xpwtzo4rah] {
        margin: 0 0 1rem 0;
        color: var(--color-primary);
        font-size: 1.1rem;
    }

    .modal-dialog .form-group[b-xpwtzo4rah] {
        margin-bottom: 1rem;
    }

    .modal-dialog .form-group label[b-xpwtzo4rah] {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--text-muted);
        font-size: 0.9rem;
    }

    .modal-dialog .form-control[b-xpwtzo4rah] {
        width: 100%;
        padding: 0.5rem 0.75rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        color: var(--text-body);
        font-size: 1rem;
    }

    .modal-dialog .form-control:focus[b-xpwtzo4rah] {
        outline: none;
        border-color: var(--color-primary);
    }

    .modal-actions[b-xpwtzo4rah] {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    .modal-actions .btn-secondary[b-xpwtzo4rah] {
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        color: var(--text-muted);
        padding: 0.5rem 1rem;
        border-radius: 4px;
        cursor: pointer;
    }

    .modal-actions .btn-secondary:hover[b-xpwtzo4rah] {
        background: var(--border-default);
        color: var(--text-body);
    }

    .modal-actions .btn-primary[b-xpwtzo4rah] {
        background: var(--color-primary);
        border: none;
        color: var(--surface-hover);
        padding: 0.5rem 1rem;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
    }

    .modal-actions .btn-primary:hover[b-xpwtzo4rah] {
        background: var(--color-primary-hover);
    }
    
    /* Bool Symbol Modal */
    .bool-symbol-modal[b-xpwtzo4rah] {
        max-width: 600px;
        width: 90vw;
    }
    
    .modal-subtitle[b-xpwtzo4rah] {
        color: var(--text-muted);
        margin: 0.5rem 0;
        font-size: 0.95rem;
    }
    
    .modal-hint[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
    
    .bool-symbol-grid[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin: 1rem 0;
    }
    
    .symbol-category h4[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.85rem;
        margin: 0 0 0.5rem 0;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .symbol-options[b-xpwtzo4rah] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .symbol-option[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.75rem 1rem;
        background: var(--surface-hover);
        border: 2px solid var(--border-default);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        min-width: 80px;
    }
    
    .symbol-option:hover[b-xpwtzo4rah] {
        background: var(--border-default);
        border-color: var(--border-default);
    }
    
    .symbol-option.selected[b-xpwtzo4rah] {
        background: rgba(30,148,188,0.15);
        border-color: var(--color-primary);
    }
    
    .symbol-preview[b-xpwtzo4rah] {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }
    
    .symbol-name[b-xpwtzo4rah] {
        font-size: 0.75rem;
        color: var(--text-muted);
    }
    
    .symbol-option.selected .symbol-name[b-xpwtzo4rah] {
        color: var(--color-primary);
    }
    
    .bool-options[b-xpwtzo4rah] {
        margin: 1rem 0;
        padding: 0.75rem;
        background: var(--surface-hover);
        border-radius: 6px;
    }
    
    .checkbox-label[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        color: var(--text-secondary);
    }
    
    .checkbox-label input[type="checkbox"][b-xpwtzo4rah] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-primary);
    }
    
    /* Channel list bool indicator */
    .channel-item.is-bool[b-xpwtzo4rah] {
        border-left: 3px solid var(--color-primary);
    }
    
    .channel-item.is-used[b-xpwtzo4rah] {
        background: rgba(60, 60, 80, 0.3);
        border-color: var(--border-default);
        opacity: 0.55;
        cursor: not-allowed;
    }
    
    .channel-item.is-used .channel-key[b-xpwtzo4rah] {
        color: var(--text-secondary);
    }
    
    .channel-item.is-used .channel-name[b-xpwtzo4rah] {
        color: var(--text-muted);
    }
    
    .used-indicator[b-xpwtzo4rah] {
        font-size: 0.7rem;
        flex-shrink: 0;
    }
    
    .bool-indicator[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-size: 0.9rem;
        margin-right: 0.25rem;
    }
    
    /* Test Button */
    .btn-test[b-xpwtzo4rah] {
        padding: 0.5rem 1rem;
        background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
        color: var(--surface-card);
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        margin-right: 0.5rem;
        transition: all 0.2s;
    }
    
    .btn-test:hover[b-xpwtzo4rah] {
        background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(147, 51, 234, 0.4);
    }
    
    /* Test Preview Modal */
    .test-modal-overlay[b-xpwtzo4rah] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.85);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
    }
    
    .test-modal[b-xpwtzo4rah] {
        width: 95%;
        max-width: 1400px;
        height: 90vh;
        background: var(--surface-card);
        border-radius: 12px;
        border: 1px solid var(--border-strong);
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 60px var(--surface-overlay);
    }
    
    .test-modal-header[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--border-strong);
        background: var(--surface-page);
        border-radius: 12px 12px 0 0;
    }
    
    .test-modal-header h3[b-xpwtzo4rah] {
        flex: 1;
        margin: 0;
        color: var(--surface-card);
        font-size: 1.25rem;
    }
    
    .test-info[b-xpwtzo4rah] {
        margin-right: 1rem;
    }
    
    .loading-text[b-xpwtzo4rah] { color: var(--color-warning); }
    .success-text[b-xpwtzo4rah] { color: var(--color-primary); }
    .error-text[b-xpwtzo4rah] { color: var(--color-danger); }
    
    .btn-close[b-xpwtzo4rah] {
        width: 36px;
        height: 36px;
        background: var(--surface-hover);
        border: none;
        border-radius: 50%;
        color: var(--text-muted);
        font-size: 1.5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }
    
    .btn-close:hover[b-xpwtzo4rah] {
        background: var(--color-danger);
        color: var(--surface-card);
    }
    
    .test-page-tabs[b-xpwtzo4rah] {
        display: flex;
        gap: 0.25rem;
        padding: 0.5rem 1.5rem;
        background: var(--surface-page);
        border-bottom: 1px solid var(--border-strong);
        overflow-x: auto;
    }
    
    .test-page-tab[b-xpwtzo4rah] {
        padding: 0.5rem 1rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: 6px;
        color: var(--text-muted);
        font-size: 0.875rem;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s;
    }
    
    .test-page-tab:hover[b-xpwtzo4rah] {
        background: var(--surface-hover);
        color: var(--surface-card);
    }
    
    .test-page-tab.active[b-xpwtzo4rah] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--surface-card);
    }
    
    .test-modal-body[b-xpwtzo4rah] {
        flex: 1;
        display: flex;
        overflow: hidden;
    }
    
    .test-canvas-container[b-xpwtzo4rah] {
        flex: 1;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: auto;
        padding: 1rem;
    }
    
    .test-canvas-container canvas[b-xpwtzo4rah] {
        background: var(--surface-card);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    
    .test-sidebar[b-xpwtzo4rah] {
        width: 280px;
        background: var(--surface-page);
        border-left: 1px solid var(--border-strong);
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }
    
    .test-sidebar h4[b-xpwtzo4rah] {
        margin: 0 0 1rem;
        color: var(--color-primary);
        font-size: 0.95rem;
    }
    
    .test-values-list[b-xpwtzo4rah] {
        flex: 1;
        overflow-y: auto;
    }
    
    .test-value-item[b-xpwtzo4rah] {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem;
        margin-bottom: 0.25rem;
        background: var(--surface-card);
        border-radius: 4px;
        font-size: 0.85rem;
    }
    
    .value-channel[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-family: monospace;
    }
    
    .value-data[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-weight: bold;
        font-family: monospace;
    }
    
    .test-actions[b-xpwtzo4rah] {
        padding-top: 1rem;
        border-top: 1px solid var(--border-strong);
        margin-top: 1rem;
    }
/* /Components/Pages/Heizungen/VisualisierungTab.razor.rz.scp.css */
.visu-loading[b-evr2bwesir] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: var(--text-secondary);
    }
    
    .visu-loading .spinner[b-evr2bwesir] {
        width: 40px;
        height: 40px;
        border: 3px solid var(--border-strong);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-evr2bwesir 1s linear infinite;
    }
    
    .tab-placeholder[b-evr2bwesir] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 2rem;
        text-align: center;
        color: var(--text-body);
    }

    .placeholder-icon[b-evr2bwesir] {
        font-size: 4rem;
        margin-bottom: 1rem;
    }

    .tab-placeholder h2[b-evr2bwesir] {
        color: var(--color-primary);
        margin: 0 0 0.5rem 0;
    }

    .tab-placeholder p[b-evr2bwesir] {
        color: var(--text-secondary);
        margin: 0 0 2rem 0;
    }

    .placeholder-info[b-evr2bwesir] {
        background: var(--surface-sunken);
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        padding: 1rem 1.5rem;
        margin-bottom: 1.5rem;
    }

    .info-item[b-evr2bwesir] {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border-strong);
    }

    .info-item:last-child[b-evr2bwesir] { border-bottom: none; }
    .info-label[b-evr2bwesir] { color: var(--text-secondary); }
    .info-value[b-evr2bwesir] { color: var(--color-primary); font-family: monospace; }

    .status-badge[b-evr2bwesir] {
        background: rgba(245, 158, 11, 0.2);
        color: var(--color-warning);
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
    }
    
    .visu-view[b-evr2bwesir] {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: var(--surface-card);
    }
    
    .visu-canvas-container[b-evr2bwesir] {
        flex: 1;
        display: flex;
        flex-direction: row;
        overflow: hidden;
    }
    
    .canvas-area[b-evr2bwesir] {
        flex: 1;
        display: flex;
        overflow: auto;
        padding: 0;
        background: var(--surface-card);
        position: relative;
        /* No transition - prevents blinking during rapid redraws */
    }
    
    .canvas-area.auto-fit[b-evr2bwesir] {
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    
    .canvas-wrapper[b-evr2bwesir] {
        position: relative;
        background: var(--surface-card); /* Same as canvas-area */
        overflow: visible;
        /* No transition - prevents blinking during rapid redraws */
    }
    
    #visuCanvas[b-evr2bwesir] {
        display: block;
        cursor: default;
        /* No transition - prevents blinking during animation loop */
        /* Explicitly prevent CSS scaling - size controlled by canvas.width/height attributes only */
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        flex-shrink: 0;
    }
    
    /* Recording and Playback Controls */
    .recording-control[b-evr2bwesir] {
        position: absolute;
        top: 8px;
        left: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 4px;
        z-index: 15;
    }
    
    .recording-control button[b-evr2bwesir],
    .recording-control .btn-load-file[b-evr2bwesir] {
        background: transparent;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        padding: 4px 8px;
        cursor: pointer;
        font-size: 0.85rem;
        color: var(--text-primary);
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .recording-control button:hover[b-evr2bwesir],
    .recording-control .btn-load-file:hover[b-evr2bwesir] {
        background: rgba(0, 0, 0, 0.08);
        border-color: rgba(0, 0, 0, 0.25);
    }
    
    .btn-record.recording[b-evr2bwesir] {
        background: rgba(255, 0, 0, 0.3);
        border-color: var(--color-danger);
        animation: recording-pulse-b-evr2bwesir 1s infinite;
    }
    
    @keyframes recording-pulse-b-evr2bwesir {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }
    
    .autofit-control[b-evr2bwesir] {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 15;
    }
    
    .btn-autofit[b-evr2bwesir] {
        background: rgba(0, 0, 0, 0.7);
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        padding: 4px 10px;
        cursor: pointer;
        font-size: 1.1rem;
        color: var(--text-primary);
        transition: all 0.2s;
        line-height: 1;
    }
    
    .btn-autofit:hover[b-evr2bwesir] {
        background: rgba(0, 0, 0, 0.08);
        border-color: rgba(0, 0, 0, 0.25);
    }
    
    .btn-autofit.active[b-evr2bwesir] {
        border-color: #2E86AB;
        color: #2E86AB;
    }
    
    .btn-stop-playback[b-evr2bwesir] {
        background: rgba(0, 255, 136, 0.2) !important;
        border-color: var(--color-primary) !important;
    }
    
    .btn-speed[b-evr2bwesir] {
        min-width: 40px;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 0.7rem !important;
    }
    
    .playback-time[b-evr2bwesir] {
        color: var(--text-muted);
        font-size: 0.7rem;
        font-family: 'Consolas', 'Monaco', monospace;
        margin-left: 4px;
    }
    
    /* Playback Timeline */
    .playback-timeline[b-evr2bwesir] {
        position: absolute;
        top: 50px;
        left: 8px;
        right: 8px;
        padding: 8px 12px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 4px;
        z-index: 15;
    }
    
    .timeline-slider[b-evr2bwesir] {
        width: 100%;
        height: 6px;
        -webkit-appearance: none;
        appearance: none;
        background: var(--text-primary);
        border-radius: 3px;
        outline: none;
        cursor: pointer;
    }
    
    .timeline-slider[b-evr2bwesir]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        background: var(--color-primary);
        border-radius: 50%;
        cursor: pointer;
    }
    
    .timeline-slider[b-evr2bwesir]::-moz-range-thumb {
        width: 14px;
        height: 14px;
        background: var(--color-primary);
        border-radius: 50%;
        cursor: pointer;
        border: none;
    }
    
    .timeline-labels[b-evr2bwesir] {
        display: flex;
        justify-content: space-between;
        margin-top: 4px;
        font-size: 0.65rem;
        color: var(--text-secondary);
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .update-timestamp[b-evr2bwesir] {
        position: absolute;
        bottom: 8px;
        right: 8px;
        padding: 4px 8px;
        background: rgba(0, 0, 0, 0.6);
        color: var(--text-primary);
        font-size: 0.75rem;
        font-family: 'Consolas', 'Monaco', monospace;
        border-radius: 4px;
        pointer-events: none;
        z-index: 10;
    }
    
    .refresh-control[b-evr2bwesir] {
        position: absolute;
        bottom: 8px;
        left: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 8px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 4px;
        z-index: 10;
    }
    
    .auto-refresh-toggle[b-evr2bwesir] {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--text-primary);
        font-size: 0.75rem;
        cursor: pointer;
    }
    
    .auto-refresh-toggle input[type="checkbox"][b-evr2bwesir] {
        width: 14px;
        height: 14px;
        cursor: pointer;
        accent-color: var(--color-primary);
    }
    
    .btn-manual-refresh[b-evr2bwesir] {
        background: transparent;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        padding: 2px 6px;
        cursor: pointer;
        font-size: 0.85rem;
        transition: all 0.2s;
    }
    
    .btn-manual-refresh:hover[b-evr2bwesir] {
        background: rgba(0, 0, 0, 0.08);
        border-color: rgba(0, 0, 0, 0.25);
    }
    
    .refresh-info[b-evr2bwesir] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.7rem;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .projekt-nr[b-evr2bwesir] {
        color: var(--color-primary);
        font-weight: bold;
        padding: 2px 6px;
        background: rgba(0, 255, 136, 0.15);
        border-radius: 3px;
    }
    
    .interval-badge[b-evr2bwesir] {
        color: var(--text-muted);
        padding: 2px 6px;
        background: rgba(0, 0, 0, 0.08);
        border-radius: 3px;
    }
    
    .update-count[b-evr2bwesir] {
        color: var(--text-secondary);
        padding: 2px 6px;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 3px;
    }
    
    .recording-badge[b-evr2bwesir] {
        color: var(--color-danger);
        padding: 2px 6px;
        background: rgba(255, 68, 68, 0.2);
        border-radius: 3px;
        animation: recording-pulse-b-evr2bwesir 1s infinite;
    }
    
    .playback-info[b-evr2bwesir] {
        background: rgba(0, 100, 200, 0.6);
    }
    
    .playback-badge[b-evr2bwesir] {
        color: var(--text-primary);
        font-weight: bold;
        padding: 2px 6px;
        background: rgba(0, 150, 255, 0.3);
        border-radius: 3px;
    }
    
    .playback-frame[b-evr2bwesir] {
        color: var(--text-muted);
        padding: 2px 6px;
    }
    
    /* Responsive styles */
    @media (max-width: 768px) {
        .refresh-info[b-evr2bwesir] {
            gap: 4px;
        }
        
        .interval-badge[b-evr2bwesir],
        .update-count[b-evr2bwesir] {
            font-size: 0.6rem;
            padding: 1px 4px;
        }
    }
    
    @media (max-width: 480px) {
        .update-timestamp[b-evr2bwesir] {
            font-size: 0.65rem;
            padding: 2px 6px;
        }
        
        .refresh-control[b-evr2bwesir] {
            font-size: 0.65rem;
            padding: 2px 6px;
            gap: 4px;
        }
        
        .refresh-info[b-evr2bwesir] {
            gap: 2px;
        }
        
        .interval-badge[b-evr2bwesir] {
            display: none;
        }
        
        .update-count[b-evr2bwesir] {
            display: none;
        }
        
        .recording-badge[b-evr2bwesir] {
            padding: 1px 3px;
        }
    }
    
    @keyframes spin-b-evr2bwesir {
        to { transform: rotate(360deg); }
    }
    
    /* Störung Modal List */
    .stoerung-modal.stoerung-modal[b-evr2bwesir] {
        max-width: min(500px, 90vw);
    }
    
    .stoerung-list[b-evr2bwesir] {
        display: flex;
        flex-direction: column;
        gap: clamp(0.3rem, 0.5vw, 0.5rem);
    }
    
    .stoerung-list-item[b-evr2bwesir] {
        display: flex;
        gap: clamp(0.5rem, 0.8vw, 0.75rem);
        padding: clamp(0.5rem, 0.8vw, 0.75rem);
        background: var(--border-strong);
        border-radius: 4px;
        border-left: 3px solid var(--color-danger);
    }
    
    .stoerung-nr[b-evr2bwesir] {
        font-weight: bold;
        color: var(--color-danger);
        min-width: 30px;
    }
    
    .stoerung-text[b-evr2bwesir] {
        color: var(--text-body);
    }
    
    /* ═══════════════════════════════════════════════════════════════════════
       ZÄHLER MODAL STYLES
       ═══════════════════════════════════════════════════════════════════════ */
    
    .zaehler-modal.zaehler-modal[b-evr2bwesir] {
        max-width: min(900px, 95vw);
        max-height: 90vh;
        width: 95%;
    }
    
    .zaehler-tabs[b-evr2bwesir] {
        display: flex;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(0, 0, 0, 0.2);
        flex-shrink: 0;
    }
    
    .zaehler-tab[b-evr2bwesir] {
        flex: 1;
        padding: clamp(0.4rem, 0.8vw, 0.6rem) clamp(0.6rem, 1vw, 1rem);
        background: transparent;
        border: none;
        color: var(--text-secondary);
        font-size: clamp(0.8rem, 1.2vw, 0.9rem);
        cursor: pointer;
        transition: all 0.2s;
        border-bottom: 2px solid transparent;
    }
    
    .zaehler-tab:hover[b-evr2bwesir] {
        color: var(--text-secondary);
        background: rgba(0,0,0,0.02);
    }
    
    .zaehler-tab.active[b-evr2bwesir] {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
        background: rgba(30, 148, 188, 0.05);
    }
    
    .zaehler-body[b-evr2bwesir] {
        padding: clamp(0.6rem, 1vw, 1rem);
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .zaehler-loading[b-evr2bwesir] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: clamp(1rem, 2vw, 2rem);
        color: var(--text-secondary);
        gap: 0.75rem;
    }
    
    .zaehler-loading .spinner[b-evr2bwesir] {
        width: clamp(24px, 2.5vw, 30px);
        height: clamp(24px, 2.5vw, 30px);
        border: 3px solid rgba(30, 148, 188, 0.2);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-evr2bwesir 0.8s linear infinite;
    }
    
    .zaehler-pre[b-evr2bwesir] {
        background: var(--surface-hover);
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        padding: clamp(0.5rem, 0.8vw, 0.75rem);
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: clamp(0.75rem, 1.1vw, 1.05rem);
        color: var(--text-body);
        white-space: pre;
        overflow-x: auto;
        margin: 0;
        line-height: 1.6;
    }
    
    .zaehler-archiv[b-evr2bwesir] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .zaehler-date-picker[b-evr2bwesir] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0;
    }
    
    .zaehler-date-picker label[b-evr2bwesir] {
        color: var(--text-muted);
        font-size: clamp(0.85rem, 1.1vw, 1.05rem);
        white-space: nowrap;
    }
    
    .zaehler-date-picker input[type="date"][b-evr2bwesir] {
        background: var(--surface-card);
        border: 1px solid var(--text-muted);
        border-radius: 6px;
        color: var(--text-primary);
        padding: clamp(0.4rem, 0.6vw, 0.6rem) clamp(0.5rem, 0.8vw, 0.8rem);
        font-size: clamp(0.9rem, 1.1vw, 1.1rem);
        cursor: pointer;
        min-width: clamp(160px, 18vw, 200px);
    }
    
    .zaehler-date-picker input[type="date"]:focus[b-evr2bwesir] {
        outline: none;
        border-color: #2E86AB;
    }
    
    .zaehler-error[b-evr2bwesir] {
        text-align: center;
        padding: clamp(1rem, 2vw, 2rem);
        color: var(--color-danger);
    }
    
    .zaehler-error span[b-evr2bwesir] {
        font-size: clamp(1.5rem, 2vw, 2rem);
        display: block;
        margin-bottom: 0.5rem;
    }
    
    .zaehler-error p[b-evr2bwesir] {
        white-space: pre-line;
    }
    
    .zaehler-timestamp[b-evr2bwesir] {
        font-size: clamp(0.7rem, 0.9vw, 0.8rem);
        color: var(--text-secondary);
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .zaehler-footer[b-evr2bwesir] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .zaehler-footer-left[b-evr2bwesir] {
        flex: 1;
        min-width: 0;
    }
    
    .zaehler-footer-actions[b-evr2bwesir] {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    
    .btn-zaehler-action[b-evr2bwesir] {
        background: rgba(46, 134, 171, 0.15);
        border: 1px solid rgba(46, 134, 171, 0.4);
        color: var(--color-primary);
        padding: clamp(0.3rem, 0.5vw, 0.4rem) clamp(0.5rem, 0.8vw, 0.75rem);
        border-radius: 6px;
        cursor: pointer;
        font-size: clamp(0.75rem, 1vw, 0.85rem);
        transition: all 0.2s;
        white-space: nowrap;
    }
    
    .btn-zaehler-action:hover[b-evr2bwesir] {
        background: rgba(46, 134, 171, 0.3);
        border-color: var(--color-primary);
        color: var(--text-primary);
    }
    
    /* Debug Sidebar */
    .debug-toggle[b-evr2bwesir] {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.7);
        border: 1px solid var(--text-body);
        border-radius: 8px;
        color: var(--text-secondary);
        font-size: 1.2rem;
        cursor: pointer;
        z-index: 100;
        transition: all 0.2s;
    }
    
    .debug-toggle:hover[b-evr2bwesir], .debug-toggle.active[b-evr2bwesir] {
        background: rgba(255, 165, 0, 0.2);
        border-color: orange;
        color: orange;
    }
    
    .debug-sidebar[b-evr2bwesir] {
        position: absolute;
        top: 0;
        right: 0;
        width: 350px;
        height: 100%;
        background: rgba(10, 10, 20, 0.95);
        border-left: 1px solid var(--border-default);
        z-index: 99;
        display: flex;
        flex-direction: column;
        font-size: 0.8rem;
    }
    
    .debug-header[b-evr2bwesir] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        background: var(--surface-overlay);
        border-bottom: 1px solid var(--border-default);
        color: orange;
        font-weight: bold;
    }
    
    .debug-close[b-evr2bwesir] {
        background: none;
        border: none;
        color: var(--text-secondary);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }
    
    .debug-close:hover[b-evr2bwesir] {
        color: var(--text-primary);
    }
    
    .debug-content[b-evr2bwesir] {
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem;
    }
    
    .debug-section[b-evr2bwesir] {
        background: rgba(30, 30, 40, 0.8);
        border: 1px solid var(--border-default);
        border-radius: 6px;
        margin-bottom: 0.5rem;
        padding: 0.5rem;
    }
    
    .debug-section h4[b-evr2bwesir] {
        margin: 0 0 0.5rem 0;
        color: var(--color-primary);
        font-size: 0.85rem;
        border-bottom: 1px solid var(--border-default);
        padding-bottom: 0.25rem;
    }
    
    .debug-item[b-evr2bwesir] {
        display: flex;
        justify-content: space-between;
        padding: 0.2rem 0;
        border-bottom: 1px solid rgba(0,0,0,0.03);
    }
    
    .debug-item:last-child[b-evr2bwesir] {
        border-bottom: none;
    }
    
    .debug-item label[b-evr2bwesir] {
        color: var(--text-secondary);
        font-size: 0.75rem;
    }
    
    .debug-item span[b-evr2bwesir] {
        color: var(--text-primary);
        font-family: monospace;
        font-size: 0.75rem;
    }
    
    .debug-item.error span[b-evr2bwesir] {
        color: var(--color-danger);
    }
    
    .status-ok[b-evr2bwesir] {
        color: var(--color-primary) !important;
    }
    
    .status-error[b-evr2bwesir] {
        color: var(--color-danger) !important;
    }
    
    .debug-log[b-evr2bwesir] {
        max-height: 150px;
        overflow-y: auto;
        background: #000;
        border-radius: 4px;
        padding: 0.25rem;
        font-family: monospace;
        font-size: 0.7rem;
    }
    
    .log-entry[b-evr2bwesir] {
        padding: 2px 4px;
        border-bottom: 1px solid var(--border-default);
    }
    
    .log-entry.error[b-evr2bwesir] {
        background: rgba(255, 0, 0, 0.1);
        color: var(--color-danger);
    }
    
    .log-entry.warn[b-evr2bwesir] {
        background: rgba(255, 165, 0, 0.1);
        color: orange;
    }
    
    .log-time[b-evr2bwesir] {
        color: var(--text-secondary);
        margin-right: 0.5rem;
    }
    
    .log-msg[b-evr2bwesir] {
        color: var(--text-secondary);
    }
    
    .btn-debug[b-evr2bwesir] {
        width: 100%;
        padding: 0.5rem;
        margin-top: 0.25rem;
        background: rgba(0, 255, 136, 0.1);
        border: 1px solid rgba(0, 255, 136, 0.3);
        border-radius: 4px;
        color: var(--color-primary);
        cursor: pointer;
        font-size: 0.75rem;
    }
    
    .btn-debug:hover[b-evr2bwesir] {
        background: rgba(0, 255, 136, 0.2);
    }
    
    .btn-clear-log[b-evr2bwesir] {
        width: 100%;
        padding: 0.25rem;
        margin-top: 0.5rem;
        background: rgba(255, 100, 100, 0.1);
        border: 1px solid rgba(255, 100, 100, 0.3);
        border-radius: 4px;
        color: var(--color-danger);
        cursor: pointer;
        font-size: 0.7rem;
    }
    
    /* ═══════════════════════════════════════════════════════════════════════
       FACEPLATE MODAL STYLES
       ═══════════════════════════════════════════════════════════════════════ */
    
    .faceplate-overlay[b-evr2bwesir] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        backdrop-filter: blur(3px);
    }
    
    .faceplate-modal[b-evr2bwesir] {
        background: var(--surface-page);
        border-radius: clamp(8px, 1.2vw, 12px);
        box-shadow: 0 8px 32px var(--surface-overlay);
        width: 90%;
        max-width: 480px;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--border-default);
        overflow: hidden;
        font-size: clamp(13px, 1.4vw, 16px);
    }
    
    .faceplate-header[b-evr2bwesir] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.5vw, 18px);
        background: linear-gradient(135deg, var(--color-primary), #177A99);
        flex-shrink: 0;
    }
    
    .faceplate-title[b-evr2bwesir] {
        display: flex;
        align-items: center;
        gap: clamp(6px, 0.8vw, 10px);
        font-size: clamp(14px, 1.5vw, 16px);
        font-weight: 600;
        color: var(--text-primary);
    }
    
    .faceplate-icon[b-evr2bwesir] {
        font-size: clamp(16px, 1.8vw, 20px);
    }
    
    .faceplate-close[b-evr2bwesir] {
        background: rgba(0, 0, 0, 0.1);
        border: none;
        color: var(--text-primary);
        width: clamp(26px, 2.8vw, 30px);
        height: clamp(26px, 2.8vw, 30px);
        border-radius: 50%;
        font-size: clamp(14px, 1.6vw, 18px);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }
    
    .faceplate-close:hover[b-evr2bwesir] {
        background: rgba(0, 0, 0, 0.15);
    }
    
    .faceplate-body[b-evr2bwesir] {
        position: relative;
        flex: 1;
        overflow-y: auto;
        padding: clamp(10px, 1.2vw, 14px);
        min-height: 120px;
    }
    
    .faceplate-saving-overlay[b-evr2bwesir] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(30, 30, 46, 0.95);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 20px;
        gap: 12px;
        color: var(--color-primary);
        z-index: 10;
        border-radius: inherit;
    }
    
    .faceplate-loading[b-evr2bwesir],
    .faceplate-error[b-evr2bwesir],
    .faceplate-empty[b-evr2bwesir] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 20px;
        gap: 12px;
        color: var(--text-muted);
    }
    
    .faceplate-error[b-evr2bwesir] {
        color: var(--color-danger);
    }
    
    .error-icon[b-evr2bwesir] {
        font-size: 28px;
    }
    
    .btn-retry[b-evr2bwesir] {
        margin-top: 8px;
        padding: 8px 16px;
        background: var(--color-primary);
        color: var(--text-primary);
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
    }
    
    .btn-retry:hover[b-evr2bwesir] {
        background: #2AA8CD;
    }
    
    .fp-spinner[b-evr2bwesir] {
        width: 28px;
        height: 28px;
        border: 3px solid var(--text-primary);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: fp-spin-b-evr2bwesir 1s linear infinite;
    }
    
    .fp-spinner-small[b-evr2bwesir] {
        display: inline-block;
        width: 14px;
        height: 14px;
        border: 2px solid rgba(0,0,0,0.15);
        border-top-color: var(--text-primary);
        border-radius: 50%;
        animation: fp-spin-b-evr2bwesir 1s linear infinite;
    }
    
    @keyframes fp-spin-b-evr2bwesir {
        to { transform: rotate(360deg); }
    }
    
    .faceplate-section[b-evr2bwesir] {
        margin-bottom: 14px;
    }
    
    .section-title[b-evr2bwesir] {
        font-size: 13px;
        font-weight: 600;
        color: var(--color-primary);
        padding: 6px 0;
        border-bottom: 1px solid var(--border-default);
        margin-bottom: 10px;
    }
    
    .parameter-row[b-evr2bwesir] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-strong);
    }
    
    .parameter-row:last-child[b-evr2bwesir] {
        border-bottom: none;
    }
    
    .parameter-row.modified[b-evr2bwesir] {
        background: rgba(31, 148, 185, 0.15);
        margin: 0 -6px;
        padding: 8px 6px;
        border-radius: 4px;
    }
    
    .parameter-label[b-evr2bwesir] {
        color: var(--text-secondary);
        font-size: 13px;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 10px;
    }
    
    .parameter-control[b-evr2bwesir] {
        flex-shrink: 0;
    }
    
    .parameter-value[b-evr2bwesir] {
        color: var(--text-primary);
        font-weight: 500;
        font-family: monospace;
        font-size: 13px;
    }
    
    .toggle-buttons[b-evr2bwesir] {
        display: flex;
        gap: 2px;
        background: var(--border-strong);
        padding: 2px;
        border-radius: 6px;
    }
    
    .toggle-btn[b-evr2bwesir] {
        padding: 5px 10px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        border-radius: 4px;
        font-size: 11px;
        transition: all 0.2s;
    }
    
    .toggle-btn:hover[b-evr2bwesir] {
        color: var(--text-primary);
        background: var(--surface-hover);
    }
    
    .toggle-btn.active[b-evr2bwesir] {
        background: var(--color-primary);
        color: var(--text-primary);
    }
    
    .slider-control[b-evr2bwesir] {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .slider-btn[b-evr2bwesir] {
        width: 26px;
        height: 26px;
        border: none;
        background: var(--border-strong);
        color: var(--text-primary);
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .slider-btn:hover[b-evr2bwesir] {
        background: var(--surface-hover);
    }
    
    .fp-slider[b-evr2bwesir] {
        width: 80px;
        height: 6px;
        -webkit-appearance: none;
        background: var(--border-strong);
        border-radius: 3px;
        outline: none;
    }
    
    .fp-slider[b-evr2bwesir]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        background: var(--color-primary);
        border-radius: 50%;
        cursor: pointer;
    }
    
    .fp-slider[b-evr2bwesir]::-moz-range-thumb {
        width: 16px;
        height: 16px;
        background: var(--color-primary);
        border-radius: 50%;
        cursor: pointer;
        border: none;
    }
    
    .slider-value[b-evr2bwesir] {
        color: var(--text-primary);
        font-family: monospace;
        font-size: 12px;
        min-width: 55px;
        text-align: right;
    }
    
    .faceplate-footer[b-evr2bwesir] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: clamp(8px, 1vw, 12px) clamp(12px, 1.5vw, 18px);
        border-top: 1px solid var(--border-default);
        background: var(--surface-hover);
        flex-shrink: 0;
    }
    
    .changes-indicator[b-evr2bwesir] {
        color: var(--color-primary);
        font-size: clamp(11px, 1.1vw, 12px);
    }
    
    .footer-buttons[b-evr2bwesir] {
        display: flex;
        gap: clamp(6px, 0.7vw, 8px);
    }
    
    .btn-cancel[b-evr2bwesir],
    .btn-save[b-evr2bwesir] {
        padding: clamp(6px, 0.8vw, 8px) clamp(12px, 1.4vw, 16px);
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: clamp(12px, 1.2vw, 13px);
        font-weight: 500;
        transition: all 0.2s;
    }
    
    .btn-cancel[b-evr2bwesir] {
        background: var(--surface-hover);
        color: var(--text-primary);
    }
    
    .btn-cancel:hover[b-evr2bwesir] {
        background: var(--gray-500);
    }
    
    .btn-save[b-evr2bwesir] {
        background: var(--color-primary);
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .btn-save:hover:not(:disabled)[b-evr2bwesir] {
        background: #2AA8CD;
    }
    
    .btn-save:disabled[b-evr2bwesir] {
        background: var(--text-primary);
        color: var(--text-secondary);
        cursor: not-allowed;
    }
/* /Components/Pages/Heizungen/WagoFernbedienungContent.razor.rz.scp.css */
    .wago-webvisu-wrapper[b-kjc5m90ba0] {
        flex: 1;
        position: relative;
        min-height: 500px;
        background: #000;
    }

    .wago-iframe[b-kjc5m90ba0] {
        width: 100%;
        height: 100%;
        border: none;
        background: var(--surface-card);
    }

    .wago-iframe.loading[b-kjc5m90ba0] {
        opacity: 0;
        position: absolute;
    }

    .wago-loading[b-kjc5m90ba0], .wago-error[b-kjc5m90ba0] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: var(--text-body);
        z-index: 10;
    }

    .wago-spinner[b-kjc5m90ba0] {
        width: 50px;
        height: 50px;
        border: 4px solid var(--color-primary);
        border-top-color: var(--color-danger);
        border-radius: 50%;
        animation: wago-spin-b-kjc5m90ba0 1s linear infinite;
        margin: 0 auto 20px;
    }

    @keyframes wago-spin-b-kjc5m90ba0 {
        to { transform: rotate(360deg); }
    }

    .wago-loading-text[b-kjc5m90ba0] {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }

    .wago-loading-subtext[b-kjc5m90ba0] {
        font-size: 0.9rem;
        color: var(--text-secondary);
    }

    .wago-error-icon[b-kjc5m90ba0] {
        font-size: 3rem;
        margin-bottom: 16px;
    }

    .wago-error-title[b-kjc5m90ba0] {
        font-size: 1.3rem;
        color: var(--color-danger);
        margin-bottom: 8px;
    }

    .wago-error-message[b-kjc5m90ba0] {
        font-size: 0.9rem;
        color: var(--text-secondary);
        margin-bottom: 20px;
        max-width: 400px;
    }

    .wago-btn[b-kjc5m90ba0] {
        background: var(--color-primary);
        border: 1px solid var(--surface-card);
        color: var(--text-body);
        padding: 8px 14px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.85rem;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .wago-btn:hover[b-kjc5m90ba0] {
        background: var(--color-primary-hover);
        border-color: var(--color-danger);
    }
/* /Components/Pages/Help/DatenTabHelp.razor.rz.scp.css */
.help-container[b-t1llqnanjo] {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
        color: var(--text-primary);
    }

    .help-header[b-t1llqnanjo] {
        text-align: center;
        margin-bottom: 3rem;
        padding-bottom: 2rem;
        border-bottom: 2px solid var(--border-color);
    }

    .help-header h1[b-t1llqnanjo] {
        color: var(--primary-color);
        margin-bottom: 0.5rem;
    }

    .help-subtitle[b-t1llqnanjo] {
        font-size: 1.1rem;
        color: var(--text-secondary);
    }

    .help-toc[b-t1llqnanjo] {
        background: var(--card-bg);
        padding: 1.5rem;
        border-radius: 8px;
        margin-bottom: 2rem;
        border: 1px solid var(--border-color);
    }

    .help-toc h3[b-t1llqnanjo] {
        margin-top: 0;
        color: var(--primary-color);
    }

    .help-toc ul[b-t1llqnanjo] {
        list-style: none;
        padding-left: 0;
    }

    .help-toc ul ul[b-t1llqnanjo] {
        padding-left: 1.5rem;
        margin-top: 0.5rem;
    }

    .help-toc a[b-t1llqnanjo] {
        color: var(--text-primary);
        text-decoration: none;
        padding: 0.25rem 0;
        display: inline-block;
    }

    .help-toc a:hover[b-t1llqnanjo] {
        color: var(--primary-color);
    }

    .help-section[b-t1llqnanjo] {
        margin-bottom: 4rem;
    }

    .help-section h2[b-t1llqnanjo] {
        color: var(--primary-color);
        border-bottom: 2px solid var(--border-color);
        padding-bottom: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .help-subsection[b-t1llqnanjo] {
        margin: 2rem 0;
    }

    .help-subsection h3[b-t1llqnanjo] {
        color: var(--secondary-color);
        margin-bottom: 1rem;
    }

    .help-card[b-t1llqnanjo] {
        background: var(--card-bg);
        padding: 1.5rem;
        border-radius: 8px;
        margin: 1rem 0;
        border-left: 4px solid var(--primary-color);
    }

    .help-card h4[b-t1llqnanjo] {
        margin-top: 0;
        color: var(--primary-color);
    }

    .help-steps[b-t1llqnanjo] {
        display: grid;
        gap: 1.5rem;
        margin: 2rem 0;
    }

    .help-step[b-t1llqnanjo] {
        display: flex;
        align-items: start;
        gap: 1rem;
    }

    .step-number[b-t1llqnanjo] {
        background: var(--primary-color);
        color: #000;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    .step-content h4[b-t1llqnanjo] {
        margin: 0 0 0.5rem 0;
        color: var(--text-primary);
    }

    .step-content p[b-t1llqnanjo] {
        margin: 0;
        color: var(--text-secondary);
    }

    .stat-explanation[b-t1llqnanjo] {
        margin: 2rem 0;
        padding: 1.5rem;
        background: var(--card-bg);
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }

    .stat-explanation h4[b-t1llqnanjo] {
        color: var(--primary-color);
        margin-top: 0;
    }

    .formula-box[b-t1llqnanjo] {
        background: rgba(30, 148, 188, 0.1);
        padding: 1rem;
        border-radius: 4px;
        border-left: 3px solid var(--primary-color);
        margin: 1rem 0;
        font-family: 'Courier New', monospace;
    }

    .formula-box code[b-t1llqnanjo] {
        font-size: 1rem;
        color: var(--text-primary);
    }

    .help-example[b-t1llqnanjo] {
        background: rgba(249, 115, 22, 0.1);
        padding: 1rem;
        border-radius: 4px;
        border-left: 3px solid #f97316;
        margin: 1rem 0;
    }

    .help-example h4[b-t1llqnanjo] {
        margin-top: 0;
        color: #f97316;
    }

    .help-note[b-t1llqnanjo] {
        background: rgba(37, 99, 235, 0.1);
        padding: 1rem;
        border-radius: 4px;
        border-left: 3px solid #2563eb;
        margin: 1rem 0;
    }

    .formula-card[b-t1llqnanjo] {
        background: var(--card-bg);
        padding: 1.5rem;
        border-radius: 8px;
        margin: 1.5rem 0;
        border: 1px solid var(--border-color);
    }

    .formula-card h4[b-t1llqnanjo] {
        color: var(--primary-color);
        margin-top: 0;
    }

    .help-table[b-t1llqnanjo] {
        width: 100%;
        border-collapse: collapse;
        margin: 1.5rem 0;
    }

    .help-table th[b-t1llqnanjo],
    .help-table td[b-t1llqnanjo] {
        padding: 0.75rem;
        text-align: left;
        border: 1px solid var(--border-color);
    }

    .help-table th[b-t1llqnanjo] {
        background: var(--card-bg);
        color: var(--primary-color);
        font-weight: 600;
    }

    .help-table tbody tr:nth-child(even)[b-t1llqnanjo] {
        background: rgba(0,0,0,0.02);
    }

    .help-tips[b-t1llqnanjo] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1rem;
        margin: 2rem 0;
    }

    .tip-card[b-t1llqnanjo] {
        background: var(--card-bg);
        padding: 1.5rem;
        border-radius: 8px;
        border-left: 4px solid var(--info-color);
    }

    .tip-card h4[b-t1llqnanjo] {
        margin-top: 0;
        color: var(--info-color);
    }

    .help-footer[b-t1llqnanjo] {
        text-align: center;
        padding: 2rem;
        margin-top: 4rem;
        border-top: 2px solid var(--border-color);
        color: var(--text-secondary);
    }

    /* Light mode adjustments */
    body.app-light-mode .help-card[b-t1llqnanjo],
    body.app-light-mode .stat-explanation[b-t1llqnanjo],
    body.app-light-mode .formula-card[b-t1llqnanjo],
    body.app-light-mode .tip-card[b-t1llqnanjo] {
        background: var(--surface-sunken);
    }

    body.app-light-mode .help-table th[b-t1llqnanjo] {
        background: var(--surface-hover);
    }

    body.app-light-mode .help-table tbody tr:nth-child(even)[b-t1llqnanjo] {
        background: var(--surface-sunken);
    }

    @media (max-width: 768px) {
        .help-container[b-t1llqnanjo] {
            padding: 1rem;
        }

        .help-tips[b-t1llqnanjo] {
            grid-template-columns: 1fr;
        }
    }
/* /Components/Pages/Home.razor.rz.scp.css */
/* Recent Controllers Section */
.recent-section[b-kq04p5re85] {
    margin-top: 1.5rem;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border-color);
    border-radius: 10px;
    overflow: hidden;
}

.recent-header[b-kq04p5re85] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--app-border-color);
}

.recent-title[b-kq04p5re85] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--app-text-secondary);
}

/* Card grid layout */
.recent-cards[b-kq04p5re85] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.recent-card[b-kq04p5re85] {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border-color);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.recent-card:hover[b-kq04p5re85] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: var(--app-primary-color);
}

.recent-card-header[b-kq04p5re85] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.recent-card-name[b-kq04p5re85] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--app-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projekt-badge[b-kq04p5re85] {
    display: inline-block;
    background: var(--app-card-bg);
    color: var(--app-success-color);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-family: monospace;
    border: 1px solid var(--app-border-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.recent-card-details[b-kq04p5re85] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.recent-card-detail[b-kq04p5re85] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
}

.detail-label[b-kq04p5re85] {
    color: var(--app-text-secondary);
}

.detail-value[b-kq04p5re85] {
    color: var(--app-text-primary);
    font-weight: 500;
}

.text-success[b-kq04p5re85] {
    color: #51CF66 !important;
}

.text-danger[b-kq04p5re85] {
    color: var(--color-danger) !important;
}

.recent-card-actions[b-kq04p5re85] {
    display: flex;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--app-border-color);
}

.btn-card[b-kq04p5re85] {
    flex: 1;
    padding: 0.4rem 0.5rem;
    background: rgba(30, 148, 188, 0.1);
    border: 1px solid rgba(30, 148, 188, 0.25);
    border-radius: 5px;
    color: var(--app-primary-color);
    text-decoration: none;
    font-size: 0.78rem;
    white-space: nowrap;
    text-align: center;
    transition: all 0.15s;
}

.btn-card:hover[b-kq04p5re85] {
    background: rgba(30, 148, 188, 0.2);
    border-color: var(--app-primary-color);
    text-decoration: none;
    color: var(--app-primary-color);
}

/* Dashboard Alert Cards */
.dashboard-alerts[b-kq04p5re85] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.alert-card[b-kq04p5re85] {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border-color);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.alert-card:hover[b-kq04p5re85] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.alert-icon[b-kq04p5re85] {
    font-size: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.alert-content[b-kq04p5re85] {
    flex: 1;
    min-width: 0;
}

.alert-value[b-kq04p5re85] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
    color: var(--app-text-primary);
}

.alert-label[b-kq04p5re85] {
    font-size: 0.85rem;
    color: var(--app-text-secondary);
    font-weight: 500;
}

.alert-subtext[b-kq04p5re85] {
    font-size: 0.75rem;
    color: var(--app-text-secondary);
    margin-top: 0.25rem;
    opacity: 0.8;
}

/* Card Color Variants */
.alert-card.installations[b-kq04p5re85] {
    border-left: 4px solid var(--app-primary-color);
}

.alert-card.active-faults[b-kq04p5re85] {
    border-left: 4px solid var(--color-danger);
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.05) 0%, var(--app-card-bg) 100%);
}

.alert-card.no-faults[b-kq04p5re85] {
    border-left: 4px solid #51CF66;
    background: linear-gradient(135deg, rgba(81, 207, 102, 0.05) 0%, var(--app-card-bg) 100%);
}

.alert-card.offline[b-kq04p5re85] {
    border-left: 4px solid #FFA94D;
    background: linear-gradient(135deg, rgba(255, 169, 77, 0.05) 0%, var(--app-card-bg) 100%);
}

.alert-card.online[b-kq04p5re85] {
    border-left: 4px solid #51CF66;
}

.alert-card.notifications[b-kq04p5re85] {
    border-left: 4px solid #748FFC;
}

.alert-card.success-rate[b-kq04p5re85] {
    border-left: 4px solid #51CF66;
}

/* Responsive */
@media (max-width: 1200px) {
    .dashboard-alerts[b-kq04p5re85] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard-alerts[b-kq04p5re85] {
        grid-template-columns: 1fr;
    }

    .alert-card[b-kq04p5re85] {
        padding: 1rem;
    }

    .alert-icon[b-kq04p5re85] {
        font-size: 2rem;
    }

    .alert-value[b-kq04p5re85] {
        font-size: 1.5rem;
    }

    .recent-cards[b-kq04p5re85] {
        grid-template-columns: 1fr;
    }

    .recent-card-actions[b-kq04p5re85] {
        flex-wrap: wrap;
    }

    .btn-card[b-kq04p5re85] {
        flex: 1 1 calc(50% - 0.2rem);
    }
}
/* /Components/Shared/VisuPreview.razor.rz.scp.css */
.visu-preview[b-0zpkj5gdu6] {
        min-height: 200px;
    }
    
    .visu-preview svg[b-0zpkj5gdu6] {
        display: block;
        margin: 0 auto;
    }
/* /Components/VisuPreviewCanvas.razor.rz.scp.css */
.visu-preview-canvas[b-ptic8peng2] {
        position: relative;
        width: 100%;
        height: 400px;
        border: 1px solid var(--text-muted);
        border-radius: 8px;
        overflow: hidden;
    }
    
    .background-image[b-ptic8peng2] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0.8;
    }
    
    .preview-svg[b-ptic8peng2] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .no-preview[b-ptic8peng2] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: var(--text-secondary);
    }
    
    .no-preview-icon[b-ptic8peng2] {
        font-size: 3rem;
        margin-bottom: 10px;
    }
    
    .page-tabs[b-ptic8peng2] {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 5px;
        background: rgba(0,0,0,0.9);
        padding: 5px;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .page-tab[b-ptic8peng2] {
        padding: 5px 12px;
        border: 1px solid var(--border-default);
        border-radius: 4px;
        background: white;
        cursor: pointer;
        font-size: 0.85rem;
    }
    
    .page-tab:hover[b-ptic8peng2] {
        background: #f0f0f0;
    }
    
    .page-tab.active[b-ptic8peng2] {
        background: var(--color-primary);
        color: var(--surface-card);
        border-color: var(--color-primary);
    }
/* /Pages/Admin/VisuImportWizard.razor.rz.scp.css */
/* Visu Import Wizard Styles */

.import-wizard[b-n1crihno22] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.wizard-header[b-n1crihno22] {
    text-align: center;
    margin-bottom: 30px;
}

.wizard-header h1[b-n1crihno22] {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #333;
}

.wizard-header .subtitle[b-n1crihno22] {
    color: #666;
    font-size: 1.1rem;
}

/* Progress Bar */
.progress-bar[b-n1crihno22] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    padding: 0 20px;
    position: relative;
}

.progress-bar[b-n1crihno22]::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 60px;
    right: 60px;
    height: 3px;
    background: #ddd;
    z-index: 0;
}

.step[b-n1crihno22] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.step-icon[b-n1crihno22] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.step.active .step-icon[b-n1crihno22] {
    border-color: #007bff;
    background: #e7f1ff;
    transform: scale(1.1);
}

.step.completed .step-icon[b-n1crihno22] {
    border-color: #28a745;
    background: #d4edda;
}

.step-title[b-n1crihno22] {
    font-size: 0.85rem;
    color: #666;
}

.step.active .step-title[b-n1crihno22] {
    color: #007bff;
    font-weight: bold;
}

/* Wizard Content */
.wizard-content[b-n1crihno22] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 30px;
    min-height: 400px;
    margin-bottom: 20px;
}

.step-content h2[b-n1crihno22] {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #eee;
}

/* Format Selection Grid */
.format-grid[b-n1crihno22] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.format-card[b-n1crihno22] {
    padding: 20px;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.format-card:hover[b-n1crihno22] {
    border-color: #007bff;
    transform: translateY(-2px);
}

.format-card.selected[b-n1crihno22] {
    border-color: #007bff;
    background: #e7f1ff;
}

.format-icon[b-n1crihno22] {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.format-name[b-n1crihno22] {
    font-weight: bold;
    margin-bottom: 5px;
}

.format-ext[b-n1crihno22] {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px;
}

.format-desc[b-n1crihno22] {
    font-size: 0.8rem;
    color: #888;
}

/* Template Selection */
.template-selection[b-n1crihno22] {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.template-grid[b-n1crihno22] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.template-card[b-n1crihno22] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.template-card:hover[b-n1crihno22] {
    border-color: #28a745;
}

.template-card.selected[b-n1crihno22] {
    border-color: #28a745;
    background: #d4edda;
}

.template-icon[b-n1crihno22] {
    font-size: 1.8rem;
}

.template-name[b-n1crihno22] {
    font-weight: bold;
}

.template-desc[b-n1crihno22] {
    font-size: 0.8rem;
    color: #666;
}

/* Upload Zone */
.upload-zone[b-n1crihno22] {
    margin: 20px 0;
}

.upload-zone h4[b-n1crihno22] {
    margin-bottom: 10px;
}

.upload-area[b-n1crihno22] {
    border: 3px dashed #ccc;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.upload-area:hover[b-n1crihno22] {
    border-color: #007bff;
    background: #f8f9ff;
}

.upload-area.small[b-n1crihno22] {
    padding: 20px;
}

.upload-area input[type="file"][b-n1crihno22] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-icon[b-n1crihno22] {
    font-size: 3rem;
    margin-bottom: 15px;
}

.upload-text[b-n1crihno22] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.file-name[b-n1crihno22] {
    color: #28a745;
    font-weight: bold;
}

.file-types[b-n1crihno22] {
    font-size: 0.85rem;
    color: #888;
}

/* Template Config Form */
.template-config[b-n1crihno22] {
    margin-top: 20px;
}

.config-form[b-n1crihno22] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 600px;
}

.config-form label[b-n1crihno22] {
    font-weight: bold;
    margin-bottom: 5px;
}

.config-form input[type="text"][b-n1crihno22],
.config-form input[type="number"][b-n1crihno22],
.config-form select[b-n1crihno22] {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
}

.erzeuger-list[b-n1crihno22],
.heizkreis-list[b-n1crihno22] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.erzeuger-row[b-n1crihno22],
.hk-row[b-n1crihno22] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.erzeuger-row select[b-n1crihno22] {
    width: 150px;
}

.erzeuger-row input[type="text"][b-n1crihno22] {
    flex: 1;
}

.erzeuger-row input[type="number"][b-n1crihno22] {
    width: 80px;
}

.checkbox-row[b-n1crihno22] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-row input[type="checkbox"][b-n1crihno22] {
    width: 18px;
    height: 18px;
}

.btn-icon[b-n1crihno22] {
    padding: 5px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
}

.btn-icon:hover[b-n1crihno22] {
    transform: scale(1.2);
}

/* Options Grid */
.options-grid[b-n1crihno22] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.option-group[b-n1crihno22] {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
}

.option-group h3[b-n1crihno22] {
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.option-row[b-n1crihno22] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.option-row input[type="checkbox"][b-n1crihno22] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
}

.option-row label[b-n1crihno22] {
    display: flex;
    flex-direction: column;
}

.option-row label strong[b-n1crihno22] {
    margin-bottom: 3px;
}

.option-desc[b-n1crihno22] {
    font-size: 0.85rem;
    color: #666;
}

.sub-options[b-n1crihno22] {
    margin-left: 28px;
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.size-inputs[b-n1crihno22] {
    display: flex;
    gap: 15px;
}

.size-inputs > div[b-n1crihno22] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.size-inputs input[b-n1crihno22] {
    width: 100px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Preview */
.processing[b-n1crihno22] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.spinner[b-n1crihno22] {
    width: 50px;
    height: 50px;
    border: 4px solid #eee;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin-b-n1crihno22 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin-b-n1crihno22 {
    to { transform: rotate(360deg); }
}

.preview-container[b-n1crihno22] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.preview-stats[b-n1crihno22] {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
}

.stat[b-n1crihno22] {
    text-align: center;
}

.stat-value[b-n1crihno22] {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: #007bff;
}

.stat-label[b-n1crihno22] {
    font-size: 0.85rem;
    color: #666;
}

.warnings[b-n1crihno22] {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
}

.warnings h4[b-n1crihno22] {
    margin-bottom: 10px;
}

.warnings ul[b-n1crihno22] {
    margin: 0;
    padding-left: 20px;
}

.preview-canvas[b-n1crihno22] {
    border: 1px solid #ddd;
    border-radius: 8px;
    min-height: 300px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-pages[b-n1crihno22] {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.page-preview[b-n1crihno22] {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    min-width: 150px;
}

.page-preview h4[b-n1crihno22] {
    margin-bottom: 10px;
    font-size: 1rem;
}

.page-preview ul[b-n1crihno22] {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    color: #666;
}

/* Result */
.result-success[b-n1crihno22],
.result-error[b-n1crihno22] {
    text-align: center;
    padding: 40px;
}

.success-icon[b-n1crihno22],
.error-icon[b-n1crihno22] {
    font-size: 4rem;
    margin-bottom: 20px;
}

.result-summary[b-n1crihno22] {
    max-width: 300px;
    margin: 30px auto;
}

.result-summary table[b-n1crihno22] {
    width: 100%;
    border-collapse: collapse;
}

.result-summary td[b-n1crihno22] {
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.result-summary td:last-child[b-n1crihno22] {
    text-align: right;
    font-weight: bold;
}

.result-actions[b-n1crihno22] {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.error-list[b-n1crihno22] {
    text-align: left;
    max-width: 500px;
    margin: 20px auto;
    background: #fff5f5;
    border: 1px solid #dc3545;
    border-radius: 8px;
    padding: 15px 30px;
}

/* Navigation */
.wizard-navigation[b-n1crihno22] {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
}

.spacer[b-n1crihno22] {
    flex: 1;
}

/* Buttons */
.btn[b-n1crihno22] {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn:disabled[b-n1crihno22] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-n1crihno22] {
    background: #007bff;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-n1crihno22] {
    background: #0056b3;
}

.btn-secondary[b-n1crihno22] {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover:not(:disabled)[b-n1crihno22] {
    background: #545b62;
}

.btn-success[b-n1crihno22] {
    background: #28a745;
    color: white;
}

.btn-success:hover:not(:disabled)[b-n1crihno22] {
    background: #1e7e34;
}

.btn-small[b-n1crihno22] {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* Error Message */
.error-message[b-n1crihno22] {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 12px;
    border-radius: 6px;
    margin-top: 15px;
}

/* Responsive */
@media (max-width: 768px) {
    .progress-bar[b-n1crihno22] {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .progress-bar[b-n1crihno22]::before {
        display: none;
    }
    
    .format-grid[b-n1crihno22],
    .template-grid[b-n1crihno22],
    .options-grid[b-n1crihno22] {
        grid-template-columns: 1fr;
    }
    
    .preview-stats[b-n1crihno22] {
        flex-wrap: wrap;
    }
}