/* ===== RESET ===== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    }
    
    body{
    
    background:#f4f6fa;
    
    font-family:Inter,Arial,sans-serif;
    
    color:#1e293b;
    
    line-height:1.5;
    
    overflow-x:hidden;
    
    }
    
    
    /* ===== APP ===== */
    
    .app-content{
    
    margin-left:280px;
    
    padding:25px;
    
    min-height:100vh;
    
    transition:.3s;
    
    }
    
    
    /* ===== SIDEBAR ===== */
    .menu-btn{

        display:none;
        
        position:fixed;
        
        top:15px;
        
        left:15px;
        
        z-index:2000;
        
        border:none;
        
        background:#0f172a;
        
        color:white;
        
        width:45px;
        
        height:45px;
        
        border-radius:12px;
        
        font-size:22px;
        
        box-shadow:
        0 4px 15px rgba(0,0,0,.2);
        
        }
        
        
        @media(max-width:1200px){

            .menu-btn{
            
            display:block;
            
            }
            
            
            .sidebar{
            
            left:0;
            
            top:0;
            
            transform:translateX(-100%);
            
            transition:.3s;
            
            width:260px;
            
            }
            
            
            .sidebar.open{
            
            transform:translateX(0);
            
            }
            
            
            .app-content{
            
            margin-left:0!important;
            
            width:100%!important;
            
            padding:70px 20px 20px;
            
            }
            
            
            .dashboard{
            
            max-width:100%;
            
            padding:0;
            
            }
            
            
            .hero-grid{
            
            display:grid;
            
            grid-template-columns:1fr!important;
            
            gap:25px;
            
            }
            
            
            .hero-landing h1{
            
            font-size:42px;
            
            max-width:100%;
            
            }
            
            
            .hero-landing p{
            
            max-width:100%;
            
            }
            
            
            .mock-dashboard{
            
            max-width:100%;
            
            margin:auto;
            
            }
            
            
            .kpi-grid{
            
            grid-template-columns:
            repeat(
            2,
            1fr
            );
            
            }
            
            
            .chart-grid{
            
            display:flex;
            
            flex-direction:column;
            
            }
            
            
            .chart-card{
            
            width:100%;
            
            min-height:auto;
            
            }
            
            
            .chart-card canvas{
            
            height:420px!important;
            
            }
            
            }
            
            
            @media(max-width:700px){
            
            .kpi-grid{
            
            grid-template-columns:1fr;
            
            }
            
            
            .hero-landing h1{
            
            font-size:34px;
            
            line-height:1.1;
            
            }
            
            
            .hero-buttons{
            
            flex-direction:column;
            
            }
            
            
            .recommend-grid{
            
            grid-template-columns:1fr;
            
            }
            
            }
    
    .sidebar{
    
    position:fixed;
    
    top:0;
    
    left:0;
    
    width:280px;
    
    height:100vh;
    
    background:#0f172a;
    
    padding:25px;
    
    z-index:999;
    
    border-right:
    1px solid rgba(255,255,255,.05);
    
    display:flex;
    
    flex-direction:column;
    
    justify-content:space-between;
    
    overflow:hidden;
    
    }
    
    
    .sidebar-top{
    
    overflow-y:auto;
    
    padding-right:5px;
    
    padding-bottom:20px;
    
    }
    
    
    .sidebar-logo{
    
    text-align:center;
    
    margin-bottom:30px;
    
    }
    
    
    .logo-img{
    
    width:65px;
    
    margin-bottom:12px;
    
    }
    
    
    .sidebar-logo h2{
    
    font-size:24px;
    
    margin:0;
    
    color:white;
    
    }
    
    
    .sidebar-logo small{
    
    color:#94a3b8;
    
    }
    
    
    .sidebar-nav{
    
    display:flex;
    
    flex-direction:column;
    
    gap:6px;
    
    }
    
    
    .sidebar-item{
    
    display:block;
    
    padding:12px 15px;
    
    border-radius:12px;
    
    text-decoration:none;
    
    font-weight:600;
    
    color:#cbd5e1;
    
    transition:.2s;
    
    }
    
    
    .sidebar-item:hover{
    
    background:#1e293b;
    
    color:white;
    
    }
    
    
    .sidebar-item.active{
    
    background:#2563eb;
    
    color:white;
    
    }
    
    
    .sidebar-divider{
    
    height:1px;
    
    background:
    rgba(255,255,255,.1);
    
    margin:18px 0;
    
    }
    
    
    /* ===== SIDEBAR FOOTER ===== */
    
    .sidebar-footer{
    
    padding-top:20px;
    
    border-top:
    1px solid rgba(255,255,255,.08);
    
    flex-shrink:0;
    
    }
    
    
    .profile-box{
    
    display:flex;
    
    align-items:center;
    
    gap:12px;
    
    padding:15px;
    
    background:#1e293b;
    
    border-radius:14px;
    
    color:white;
    
    }
    
    
    .profile-circle{
    
    width:40px;
    
    height:40px;
    
    background:#2563eb;
    
    border-radius:50%;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-weight:700;
    
    }
    
    
.sidebar-system{
    
    margin-top:15px;
    
    color:#94a3b8;
    
    font-size:13px;
    
    line-height:1.7;
    
    }

.home-switcher{
margin-top:14px;
display:grid;
gap:8px;
}

.home-switcher label{
font-size:12px;
font-weight:800;
color:#94a3b8;
text-transform:uppercase;
}

.home-switcher select{
width:100%;
border:1px solid rgba(255,255,255,.12);
background:#1e293b;
color:#fff;
border-radius:8px;
padding:10px;
}

.sidebar-mini-link{
font-size:13px;
font-weight:700;
color:#93c5fd;
text-decoration:none;
}
    
    
    .sidebar-system small{
    
    display:block;
    
    opacity:.7;
    
    margin-top:5px;
    
    }
    
    
    /* ===== HEADER ===== */
    
    header{
    
    background:#0f172a;
    
    padding:30px;
    
    color:white;
    
    border-radius:25px;
    
    margin-bottom:25px;
    
    box-shadow:
    0 2px 10px rgba(0,0,0,.12);
    
    }
    
    
    .hero-top{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    gap:20px;
    
    }
    
    
    .system-state{
    
    display:flex;
    
    align-items:center;
    
    font-weight:600;
    
    }
    
    
    .green-dot{
    
    width:10px;
    
    height:10px;
    
    background:#18c964;
    
    border-radius:50%;
    
    display:inline-block;
    
    margin-right:8px;
    
    }
    
    
    /* ===== TOPBAR ===== */
    
    .topbar{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    flex-wrap:wrap;
    
    gap:20px;
    
    margin-bottom:25px;
    
    }
    
    
    .topbar h1{
    
    font-size:36px;
    
    color:#0f172a;
    
    margin-bottom:5px;
    
    }
    
    
    .topbar p{
    
    margin:0;
    
    color:#64748b;
    
    }
    
    
    /* ===== KPI ===== */
    
    .kpi-grid{
    
    display:grid;
    
    grid-template-columns:
    repeat(auto-fit,minmax(230px,1fr));
    
    gap:20px;
    
    margin-bottom:30px;
    
    }
    
    
    .kpi-card{
    
    background:white;
    
    padding:30px;
    
    border-radius:20px;
    
    text-align:center;
    
    box-shadow:
    0 4px 20px rgba(0,0,0,.05);
    
    transition:.2s;
    
    }
    
    
    .kpi-card:hover{
    
    transform:translateY(-3px);
    
    }
    
    
    .kpi-card h2,
    .kpi-card h3{
    
    font-size:42px;
    
    font-weight:700;
    
    margin-bottom:8px;
    
    color:#0f172a;
    
    }
    
    
    .kpi-card p{
    
    margin:0;
    
    color:#64748b;
    
    }
    
    
    /* ===== BANNER ===== */
    
    .system-banner{
    
    background:white;
    
    padding:25px;
    
    border-radius:20px;
    
    margin-bottom:30px;
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    box-shadow:
    0 4px 20px rgba(0,0,0,.05);
    
    }
    
    
    .small-label{
    
    font-size:12px;
    
    letter-spacing:2px;
    
    text-transform:uppercase;
    
    color:#64748b;
    
    margin-bottom:5px;
    
    }
    
    
    /* ===== CHARTS ===== */
    
/* ===== GRAFICE ===== */

.chart-grid{

    display:flex;
    
    flex-direction:column;
    
    gap:25px;
    
    width:100%;
    
    }
    
    
    .chart-card{
    
    width:100%;
    
    background:white;
    
    padding:30px;
    
    border-radius:25px;
    
    box-shadow:
    0 4px 20px rgba(0,0,0,.05);
    
    height:auto;
    
    min-height:650px;
    
    }
    
    
    .chart-card canvas{
    
    width:100%!important;
    
    height:550px!important;
    
    display:block;
    
    }
    
    
    .chart-card,
    .graph-card{
    
    background:white;
    
    padding:30px;
    
    border-radius:20px;
    
    box-shadow:
    0 4px 20px rgba(0,0,0,.05);
    
    min-height:650px;
    
    overflow:hidden;
    
    }
    
    
    .chart-card h3,
    .graph-card h3{
    
    margin-bottom:25px;
    
    font-size:22px;
    
    }
    
    
    .chart-card canvas,
    .graph-card canvas{
    
    width:100%!important;
    
    height:550px!important;
    
    }
    
    
    /* ===== FOOTER ===== */
    
    footer{
    
    padding:25px;
    
    text-align:center;
    
    color:#64748b;
    
    }
    
    
    /* ===== RESPONSIVE ===== */
    
    @media(max-width:1000px){
    
    .sidebar{
    
    transform:translateX(-100%);
    
    }
    
    .app-content{
    
    margin-left:0;
    
    }
    
    .chart-grid{
    
    grid-template-columns:1fr;
    
    }
    
    }
    
    
    @media(max-width:700px){
    
    .kpi-grid{
    
    grid-template-columns:1fr;
    
    }
    
    }

    /* ===== LANDING PAGE ===== */

.hero-landing{

    padding:40px 0 70px;
    
    }
    
    
    .hero-grid{
    
    display:grid;
    
    grid-template-columns:
    1.1fr 1fr;
    
    gap:40px;
    
    align-items:center;
    
    }
    
    
    .hero-landing h1{
    
    font-size:64px;
    
    font-weight:800;
    
    line-height:1.05;
    
    margin:15px 0;
    
    max-width:700px;
    
    }
    
    
    .hero-landing p{
    
    font-size:20px;
    
    color:#64748b;
    
    max-width:650px;
    
    line-height:1.8;
    
    }
    
    
    .hero-buttons{
    
    display:flex;
    
    gap:15px;
    
    margin-top:35px;
    
    flex-wrap:wrap;
    
    }
    
    
    .primary-btn{
    
    background:#2563eb;
    
    border:none;
    
    color:white;
    
    padding:16px 28px;
    
    border-radius:18px;
    
    font-weight:700;
    
    transition:.25s;
    
    box-shadow:
    0 10px 25px rgba(37,99,235,.2);
    
    }
    
    
    .primary-btn:hover{
    
    transform:translateY(-2px);
    
    background:#1d4ed8;
    
    }
    
    
    .secondary-btn{
    
    background:white;
    
    border:none;
    
    padding:16px 28px;
    
    border-radius:18px;
    
    font-weight:700;
    
    color:#0f172a;
    
    box-shadow:
    0 4px 20px rgba(0,0,0,.05);
    
    }
    
    
    .secondary-btn:hover{
    
    transform:translateY(-2px);
    
    }
    
    
    /* ===== DASHBOARD MOCK ===== */
    
    .mock-dashboard{
    
    background:white;
    
    padding:25px;
    
    border-radius:35px;
    
    box-shadow:
    0 20px 50px rgba(0,0,0,.08);
    
    animation:float 5s ease infinite;
    
    }
    
    
    @keyframes float{
    
    0%{
    
    transform:
    translateY(0px);
    
    }
    
    50%{
    
    transform:
    translateY(-10px);
    
    }
    
    100%{
    
    transform:
    translateY(0px);
    
    }
    
    }
    
    
    .alert-card{
    
    margin-top:20px;
    
    padding:18px;
    
    border-radius:18px;
    
    background:
    rgba(251,191,36,.12);
    
    border:
    1px solid rgba(251,191,36,.3);
    
    font-weight:700;
    
    color:#b45309;
    
    }
    
    
    /* ===== FAKE CHART ===== */
    
    .fake-chart{
    
    height:220px;
    
    display:flex;
    
    align-items:flex-end;
    
    gap:10px;
    
    margin-top:20px;
    
    padding-top:20px;
    
    }
    
    
    .fake-chart div{
    
    flex:1;
    
    border-radius:15px 15px 0 0;
    
    background:linear-gradient(
    180deg,
    #60a5fa,
    #2563eb
    );
    
    animation:bars 2s ease;
    
    }
    
    
    @keyframes bars{
    
    from{
    
    height:0;
    
    opacity:.3;
    
    }
    
    }
    
    
    /* ===== RECOMMENDATIONS ===== */
    
    .recommend-grid{
    
    display:grid;
    
    gap:15px;
    
    margin-top:30px;
    
    }
    
    
    .recommend-card{
    
    background:white;
    
    padding:20px;
    
    border-radius:18px;
    
    box-shadow:
    0 4px 20px rgba(0,0,0,.05);
    
    border-left:
    5px solid #2563eb;
    
    transition:.25s;
    
    }
    
    
    .recommend-card:hover{
    
    transform:
    translateX(5px);
    
    }
    
    
    /* ===== DONUT DEMO ===== */
    
    .donut-demo{
    
    width:260px;
    
    height:260px;
    
    margin:35px auto;
    
    border-radius:50%;
    
    background:
    
    conic-gradient(
    
    #2563eb 0 46%,
    
    #60a5fa 46% 60%,
    
    #818cf8 60% 70%,
    
    #c084fc 70% 79%,
    
    #d4d4d8 79% 100%
    
    );
    
    position:relative;
    
    }
    
    
    .donut-demo:after{
    
    content:"";
    
    position:absolute;
    
    width:130px;
    
    height:130px;
    
    background:white;
    
    border-radius:50%;
    
    top:50%;
    
    left:50%;
    
    transform:
    translate(
    -50%,
    -50%
    );
    
    }
    
    
    /* ===== INFO ===== */
    
    .info-section{
    
    margin-top:80px;
    
    }
    
    
    .info-section h2{
    
    font-size:40px;
    
    margin-bottom:30px;
    
    }
    
    
    /* ===== CTA ===== */
    
    .text-center{
    
    text-align:center;
    
    }
    
    
    /* ===== MOBILE ===== */
    
    @media(max-width:1000px){
    
    .hero-grid{
    
    grid-template-columns:1fr;
    
    }
    
    
    .hero-landing h1{
    
    font-size:44px;
    
    }
    
    
    .mock-dashboard{
    
    margin-top:20px;
    
    }
    
    
    .info-section h2{
    
    font-size:32px;
    
    }
    
    }
    
    
    @media(max-width:700px){
    
    .hero-landing h1{
    
    font-size:34px;
    
    }
    
    .hero-buttons{
    
    flex-direction:column;
    
    }
    
    }

    /* ===== LANDING ===== */

.dashboard{

    max-width:1280px;
    
    margin:auto;
    
    padding:30px 40px;
    
    }
    
    
    /* HERO */
    
    .hero-landing{
    
    padding:15px 0 50px;
    
    }
    
    
    .hero-grid{
    
    display:grid;
    
    grid-template-columns:
    minmax(500px,650px)
    minmax(420px,520px);
    
    justify-content:space-between;
    
    gap:40px;
    
    align-items:center;
    
    }
    
    
    .hero-landing h1{
    
    font-size:58px;
    
    font-weight:800;
    
    line-height:1.05;
    
    max-width:620px;
    
    margin:15px 0;
    
    }
    
    
    .hero-landing p{
    
    font-size:18px;
    
    line-height:1.8;
    
    max-width:560px;
    
    color:#64748b;
    
    }
    
    
    .hero-buttons{
    
    display:flex;
    
    gap:15px;
    
    margin-top:35px;
    
    flex-wrap:wrap;
    
    }
    
    
    /* BUTTONS */
    
    .primary-btn{
    
    background:#2563eb;
    
    border:none;
    
    padding:16px 26px;
    
    color:white;
    
    font-weight:700;
    
    border-radius:18px;
    
    transition:.25s;
    
    box-shadow:
    0 10px 30px rgba(37,99,235,.2);
    
    }
    
    
    .primary-btn:hover{
    
    transform:translateY(-3px);
    
    background:#1d4ed8;
    
    }
    
    
    .secondary-btn{
    
    background:white;
    
    border:none;
    
    padding:16px 26px;
    
    border-radius:18px;
    
    font-weight:700;
    
    box-shadow:
    0 4px 20px rgba(0,0,0,.05);
    
    }
    
    
    /* MOCK DASHBOARD */
    
    .mock-dashboard{
    
    background:white;
    
    padding:22px;
    
    border-radius:35px;
    
    max-width:520px;
    
    margin-left:auto;
    
    box-shadow:
    0 20px 60px rgba(0,0,0,.08);
    
    animation:float 6s ease infinite;
    
    }
    
    
    @keyframes float{
    
    0%{
    
    transform:
    translateY(0)
    
    }
    
    50%{
    
    transform:
    translateY(-8px)
    
    }
    
    100%{
    
    transform:
    translateY(0)
    
    }
    
    }
    
    
    .alert-card{
    
    margin-top:18px;
    
    padding:18px;
    
    background:
    rgba(251,191,36,.12);
    
    border:
    1px solid rgba(251,191,36,.25);
    
    border-radius:18px;
    
    font-weight:700;
    
    color:#b45309;
    
    }
    
    
    /* BARCHART */
    
    .fake-chart{
    
    height:180px;
    
    display:flex;
    
    align-items:flex-end;
    
    gap:10px;
    
    margin-top:20px;
    
    overflow:hidden;
    
    }
    
    
    .fake-chart div{
    
    flex:1;
    
    border-radius:14px 14px 0 0;
    
    background:
    
    linear-gradient(
    180deg,
    #60a5fa,
    #2563eb
    );
    
    animation:bars 1.5s ease;
    
    }
    
    
    @keyframes bars{
    
    from{
    
    height:0;
    
    opacity:.3
    
    }
    
    }
    
    
    /* CONTENT SECTIONS */
    
    .info-section{
    
    margin-top:65px;
    
    }
    
    
    .info-section h2{
    
    font-size:34px;
    
    margin-bottom:25px;
    
    }
    
    
    /* CARDS */
    
    .kpi-grid{
    
    display:grid;
    
    grid-template-columns:
    repeat(
    auto-fit,
    minmax(260px,1fr)
    );
    
    gap:20px;
    
    margin-bottom:25px;
    
    }
    
    
    .kpi-card{
    
    background:white;
    
    padding:25px;
    
    border-radius:20px;
    
    min-height:130px;
    
    text-align:left;
    
    box-shadow:
    0 4px 20px rgba(0,0,0,.05);
    
    }
    
    
    .kpi-card h2{
    
    font-size:34px;
    
    margin-bottom:10px;
    
    }
    
    
    .kpi-card h3{
    
    font-size:22px;
    
    margin-bottom:10px;
    
    }
    
    
    /* RECOMMENDATIONS */
    
    .recommend-grid{
    
    display:grid;
    
    grid-template-columns:
    repeat(2,1fr);
    
    gap:16px;
    
    }
    
    
    .recommend-card{
    
    background:white;
    
    padding:20px;
    
    border-radius:18px;
    
    border-left:
    5px solid #2563eb;
    
    box-shadow:
    0 4px 20px rgba(0,0,0,.05);
    
    transition:.2s;
    
    }
    
    
    .recommend-card:hover{
    
    transform:
    translateX(4px);
    
    }
    
    
    /* DONUT */
    
    .donut-demo{
    
    width:260px;
    
    height:260px;
    
    margin:30px auto;
    
    border-radius:50%;
    
    background:
    
    conic-gradient(
    
    #2563eb 0 46%,
    #60a5fa 46% 60%,
    #818cf8 60% 70%,
    #c084fc 70% 79%,
    #d4d4d8 79% 100%
    
    );
    
    position:relative;
    
    }
    
    
    .donut-demo:after{
    
    content:"";
    
    position:absolute;
    
    width:130px;
    
    height:130px;
    
    background:white;
    
    border-radius:50%;
    
    top:50%;
    
    left:50%;
    
    transform:
    translate(-50%,-50%);
    
    }
    
    
    /* FIX PENTRU CHART-CARD VECHI */
    
    .chart-card{
    
    min-height:auto;
    
    height:auto;
    
    }
    
    
    /* RESPONSIVE */
    
    @media(max-width:1200px){
    
    .app-content{
    
    margin-left:0;
    
    width:100%;
    
    }
    
    
    .hero-grid{
    
    grid-template-columns:1fr;
    
    }
    
    
    .mock-dashboard{
    
    margin:auto;
    
    }
    
    }
    
    
    @media(max-width:700px){
    
    .dashboard{
    
    padding:20px;
    
    }
    
    
    .hero-landing h1{
    
    font-size:38px;
    
    }
    
    
    .hero-buttons{
    
    flex-direction:column;
    
    }
    
    
    .recommend-grid{
    
    grid-template-columns:1fr;
    
    }
    
    }

 /* ===========================
INVESTMENT CARDS
=========================== */

.success-card{
    border-left:5px solid #2ecc71;
    }
    
    .warning-card{
    border-left:5px solid #f1c40f;
    }
    
    .danger-card{
    border-left:5px solid #e74c3c;
    position:relative;
    opacity:.93;
    }
    
    /* ===========================
    KPI CARD BASE
    =========================== */
    
    .kpi-card{
    
    background:#fff;
    
    border-radius:18px;
    
    padding:24px;
    
    overflow:hidden;
    
    position:relative;
    
    transition:
    all .3s ease;
    
    box-shadow:
    0 8px 25px rgba(0,0,0,.05);
    
    height:100%;
    
    }
    
    .kpi-card:hover{
    
    transform:translateY(-6px);
    
    box-shadow:
    0 14px 35px rgba(0,0,0,.1);
    
    }
    
    /* ===========================
    STATUS BADGES
    =========================== */
    
    .status-badge{
    
    display:inline-flex;
    
    align-items:center;
    
    gap:8px;
    
    padding:8px 14px;
    
    border-radius:30px;
    
    font-size:.85rem;
    
    font-weight:700;
    
    margin-bottom:15px;
    
    }
    
    .success{
    
    background:#eafaf1;
    
    color:#27ae60;
    
    }
    
    .warning{
    
    background:#fff8db;
    
    color:#c58b00;
    
    }
    
    .danger{
    
    background:#fdeaea;
    
    color:#d63031;
    
    }
    
    /* ===========================
    TITLES + TEXT
    =========================== */
    
    .kpi-card h3{
    
    margin-top:10px;
    
    font-size:1.1rem;
    
    font-weight:700;
    
    margin-bottom:14px;
    
    color:#111;
    
    }
    
    .kpi-card p{
    
    margin-bottom:8px;
    
    font-size:.95rem;
    
    color:#666;
    
    line-height:1.5;
    
    }
    
    .kpi-card strong{
    
    color:#111;
    
    font-weight:700;
    
    }
    
    .kpi-card h4{
    
    margin-top:18px;
    
    font-size:1.2rem;
    
    font-weight:800;
    
    color:#111;
    
    }
    
    .kpi-card small{
    
    display:block;
    
    margin-top:14px;
    
    color:#888;
    
    line-height:1.5;
    
    }
    
    /* ===========================
    HORIZONTAL LINE
    =========================== */
    
    .kpi-card hr{
    
    margin:18px 0;
    
    opacity:.08;
    
    }
    
    /* ===========================
    RED RIBBON
    =========================== */
    
    .danger-card::after{
    
    content:"Nu recomandăm";
    
    position:absolute;
    
    top:18px;
    
    right:-40px;
    
    background:#e74c3c;
    
    color:white;
    
    padding:6px 50px;
    
    font-size:.7rem;
    
    font-weight:700;
    
    transform:rotate(35deg);
    
    box-shadow:
    0 5px 15px rgba(0,0,0,.15);
    
    }
    
    /* ===========================
    FOOTER MESSAGE
    =========================== */
    
    .investment-note{
    
    margin-top:30px;
    
    padding:22px;
    
    background:
    linear-gradient(
    90deg,
    #f7fafc,
    #eef5ff
    );
    
    border-radius:14px;
    
    font-weight:600;
    
    text-align:center;
    
    color:#444;
    
    box-shadow:
    0 4px 15px rgba(0,0,0,.03);
    
    }
    
    /* ===========================
    MOBILE
    =========================== */
    
    @media(max-width:768px){
    
    .kpi-card{
    
    padding:18px;
    
    }
    
    .kpi-card h3{
    
    font-size:1rem;
    
    }
    
    .status-badge{
    
    font-size:.8rem;
    
    padding:6px 12px;
    
    }
    
    .danger-card::after{
    
    display:none;
    
    }
    
    }
    

    /* ===========================
    Money list
    =========================== */

    .money-list{

        margin-top:30px;
        
        display:flex;
        
        flex-direction:column;
        
        gap:14px;
        
        }
        
        .money-item{
        
        display:flex;
        
        justify-content:space-between;
        
        align-items:center;
        
        padding:18px;
        
        background:#fff;
        
        border-radius:14px;
        
        box-shadow:
        0 5px 20px rgba(0,0,0,.04);
        
        transition:.3s;
        
        }
        
        .money-item:hover{
        
        transform:translateX(6px);
        
        box-shadow:
        0 10px 30px rgba(0,0,0,.08);
        
        }
        
        .money-item h4{
        
        margin:0;
        
        font-size:1rem;
        
        font-weight:700;
        
        }
        
        .money-item small{
        
        color:#888;
        
        }
        
        .money-item strong{
        
        font-size:1.1rem;
        
        color:#111;
        
        }
        


        /* ===========================
        Formular date
        =========================== */
        .analysis-page{
        
        max-width:1100px;
        
        margin:auto;
        
        padding:40px;
        
        }
        
        .step{
        
        display:none;
        
        }
        
        .step.active{
        
        display:block;
        
        animation:fade .3s;
        
        }
        
        @keyframes fade{
        
        from{
        opacity:0;
        transform:translateY(20px)
        }
        
        to{
        opacity:1;
        transform:none
        }
        
        }
        
        .form-grid{
        
        display:grid;
        
        grid-template-columns:
        repeat(
        auto-fit,
        minmax(250px,1fr)
        );
        
        gap:20px;
        
        margin-top:25px;
        
        }
        
        .form-grid div{
        
        display:flex;
        
        flex-direction:column;
        
        }
        
        input,
        select{
        
        padding:14px;
        
        border-radius:12px;
        
        border:1px solid #ddd;
        
        }
        
        .progress{
        
        height:10px;
        
        background:#eee;
        
        border-radius:20px;
        
        margin:20px 0;
        
        overflow:hidden;
        
        }
        
        #progressBar{
        
        height:100%;
        
        width:10%;
        
        background:#2ecc71;
        
        transition:.3s;
        
        }
        
        .buttons{
        
        display:flex;
        
        justify-content:space-between;
        
        margin-top:30px;
        
        }
        

        .analysis-page{

            max-width:1200px;
            
            margin:auto;
            
            }
            
            .progress{
            
            height:10px;
            
            background:#eee;
            
            border-radius:50px;
            
            overflow:hidden;
            
            margin:20px 0;
            
            }
            
            #progressBar{
            
            width:10%;
            
            height:100%;
            
            background:#2ecc71;
            
            transition:.4s;
            
            border-radius:50px;
            
            }
            
            .step{
            
            display:none;
            
            padding:30px;
            
            background:#fff;
            
            border-radius:18px;
            
            box-shadow:
            0 8px 25px rgba(0,0,0,.04);
            
            margin-bottom:30px;
            
            }
            
            .step.active{
            
            display:block;
            
            animation:fade .3s;
            
            }
            
            .form-grid{
            
            display:grid;
            
            grid-template-columns:
            repeat(
            auto-fit,
            minmax(250px,1fr)
            );
            
            gap:20px;
            
            margin-top:20px;
            
            }
            
            .form-grid div{
            
            display:flex;
            
            flex-direction:column;
            
            }
            
            .form-grid label{
            
            font-weight:600;
            
            margin-bottom:8px;
            
            }
            
            .form-grid input,
            .form-grid select{
            
            padding:14px;
            
            border:1px solid #ddd;
            
            border-radius:12px;
            
            }
            
            .buttons{
            
            display:flex;
            
            justify-content:space-between;
            
            margin-top:30px;
            
            }
            
            @keyframes fade{
            
            from{
            opacity:0;
            transform:translateY(15px)
            }
            
            to{
            opacity:1;
            transform:none
            }
            
            }

.auth-layout{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
align-items:start;
}

.auth-panel{
background:#fff;
border:1px solid #e5e7eb;
border-radius:8px;
padding:24px;
box-shadow:0 8px 25px rgba(0,0,0,.04);
display:flex;
flex-direction:column;
gap:12px;
}

.auth-panel h1,
.auth-panel h2{
font-size:24px;
line-height:1.2;
margin:0;
}

.auth-panel label{
font-weight:600;
font-size:14px;
}

.auth-panel a{
color:#2563eb;
text-decoration:none;
font-weight:600;
}

.form-message{
min-height:24px;
font-size:14px;
color:#475569;
word-break:break-word;
}

.form-message.error{
color:#dc2626;
}

.auth-page{
min-height:100vh;
display:grid;
place-items:center;
padding:24px;
background:#f4f6fa;
}

.reset-panel{
width:min(100%,460px);
}

.dashboard-auth-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin:24px 0 10px;
}

.dashboard-auth-actions .primary-btn,
.dashboard-auth-actions .secondary-btn,
.hero-buttons .primary-btn,
.hero-buttons .secondary-btn{
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
}

.analysis-auth-required{
max-width:640px;
margin:0 auto 30px;
}

.analysis-auth-required .primary-btn{
align-self:flex-start;
text-decoration:none;
}

.standard-auth-card{
gap:16px;
padding:28px;
}

.auth-brand{
display:flex;
align-items:center;
gap:12px;
}

.auth-brand img{
width:42px;
height:42px;
border-radius:8px;
}

.auth-copy{
color:#64748b;
margin:0;
}

.auth-tabs{
display:grid;
grid-template-columns:1fr 1fr;
gap:4px;
padding:4px;
background:#eef2f7;
border-radius:8px;
}

.auth-tab{
border:0;
border-radius:6px;
padding:10px 12px;
font-weight:700;
background:transparent;
color:#475569;
}

.auth-tab.active{
background:#fff;
color:#0f172a;
box-shadow:0 1px 4px rgba(15,23,42,.08);
}

.auth-form{
display:none;
flex-direction:column;
gap:10px;
}

.auth-form.active{
display:flex;
}

.auth-form .primary-btn{
width:100%;
margin-top:4px;
}

.product-dashboard{
padding-bottom:60px;
}

.product-hero{
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
gap:28px;
align-items:center;
padding:42px 0 28px;
}

.product-hero h1{
font-size:clamp(40px,6vw,72px);
line-height:1.02;
max-width:820px;
margin:12px 0 18px;
font-weight:800;
color:#0f172a;
}

.product-hero p{
font-size:19px;
max-width:720px;
color:#475569;
}

.score-card,
.metric-card,
.dashboard-band,
.recommendation-summary article,
.recommendation-detail-card{
background:#fff;
border:1px solid #e5e7eb;
border-radius:8px;
box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.hero-score-card{
padding:28px;
display:grid;
gap:22px;
}

.score-ring{
width:170px;
height:170px;
border-radius:50%;
display:grid;
place-items:center;
background:
radial-gradient(circle at center,#fff 55%,transparent 56%),
conic-gradient(#22c55e 0 72%,#e2e8f0 72% 100%);
}

.score-ring span{
font-size:52px;
font-weight:800;
color:#0f172a;
}

.score-ring small{
margin-top:-48px;
color:#64748b;
font-weight:700;
}

.dashboard-summary-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
margin:18px 0 24px;
}

.metric-card{
padding:22px;
}

.metric-label,
.section-heading .small-label{
display:block;
font-size:12px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:#64748b;
margin-bottom:10px;
}

.metric-card strong{
display:block;
font-size:30px;
line-height:1.1;
color:#0f172a;
margin-bottom:8px;
}

.metric-card p{
margin:0;
color:#64748b;
}

.score-metric{
border-color:#bbf7d0;
background:#f0fdf4;
}

.dashboard-band{
padding:28px;
margin-top:22px;
}

.two-column-band{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:24px;
}

.section-heading h2{
font-size:28px;
line-height:1.2;
margin:0 0 16px;
color:#0f172a;
}

.percentile-bar{
height:18px;
background:#e2e8f0;
border-radius:999px;
overflow:hidden;
margin:24px 0 12px;
}

.percentile-bar span{
display:block;
height:100%;
background:linear-gradient(90deg,#22c55e,#f59e0b);
border-radius:999px;
}

.percentile-labels{
display:flex;
justify-content:space-between;
gap:12px;
font-size:13px;
color:#64748b;
margin-bottom:18px;
}

.percentile-labels strong{
color:#0f172a;
}

.recommendation-row{
display:grid;
grid-template-columns:44px 1fr;
gap:14px;
padding:16px 0;
border-top:1px solid #e5e7eb;
text-decoration:none;
color:#0f172a;
}

.recommendation-row span,
.recommendation-rank{
width:40px;
height:40px;
border-radius:8px;
display:grid;
place-items:center;
font-weight:800;
background:#eff6ff;
color:#2563eb;
}

.recommendation-row small{
display:block;
margin-top:4px;
color:#64748b;
}

.value-card-grid,
.advanced-tools-grid,
.steps-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
}

.value-card-grid article,
.steps-grid article,
.advanced-tool-card{
border:1px solid #e5e7eb;
border-radius:8px;
padding:20px;
background:#f8fafc;
}

.steps-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.steps-grid span{
width:34px;
height:34px;
border-radius:50%;
display:grid;
place-items:center;
background:#2563eb;
color:#fff;
font-weight:800;
margin-bottom:12px;
}

.steps-grid h3,
.advanced-tool-card h3{
font-size:18px;
margin:0 0 8px;
color:#0f172a;
}

.steps-grid p,
.advanced-tool-card p{
color:#64748b;
margin:0;
}

.advanced-tool-card{
display:flex;
flex-direction:column;
gap:10px;
text-decoration:none;
color:#0f172a;
background:#fff;
transition:.2s;
}

.advanced-tool-card:hover{
transform:translateY(-3px);
box-shadow:0 14px 35px rgba(15,23,42,.08);
}

.tool-icon{
font-size:28px;
}

.advanced-tool-card small{
color:#64748b;
line-height:1.4;
}

.recommendation-summary{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
margin:20px 0 24px;
}

.recommendation-summary article{
padding:22px;
}

.recommendation-summary span{
display:block;
font-size:13px;
font-weight:700;
color:#64748b;
margin-bottom:8px;
}

.recommendation-summary strong{
font-size:28px;
color:#0f172a;
}

.recommendation-list{
display:grid;
gap:14px;
}

.billing-insights-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin:18px 0;
}

.billing-insights-grid article{
background:#fff;
border:1px solid #e5e7eb;
border-radius:8px;
padding:18px;
}

.billing-insights-grid span{
display:block;
font-size:12px;
font-weight:800;
color:#64748b;
text-transform:uppercase;
margin-bottom:8px;
}

.billing-insights-grid strong{
font-size:22px;
color:#0f172a;
}

.billing-curve{
min-height:190px;
display:flex;
align-items:flex-end;
gap:10px;
padding:18px;
border:1px solid #e5e7eb;
border-radius:8px;
background:#f8fafc;
overflow-x:auto;
}

.billing-bar-wrap{
height:150px;
min-width:42px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-end;
gap:8px;
}

.billing-bar{
width:28px;
border-radius:8px 8px 3px 3px;
background:#0f766e;
box-shadow:0 10px 22px rgba(15,118,110,.16);
}

.billing-bar.soft{
background:#94a3b8;
box-shadow:none;
}

.billing-bar-wrap span{
font-size:12px;
font-weight:700;
color:#64748b;
}

.billing-conclusions{
display:grid;
gap:8px;
margin:16px 0;
}

.billing-conclusions p{
margin:0;
padding:12px 14px;
border-radius:8px;
background:#ecfdf5;
color:#14532d;
font-weight:700;
}

.billing-history-list{
display:grid;
gap:8px;
}

.billing-history-list article{
display:grid;
grid-template-columns:1.1fr repeat(3,1fr);
gap:10px;
align-items:center;
padding:12px 14px;
border:1px solid #e5e7eb;
border-radius:8px;
background:#fff;
color:#475569;
font-size:14px;
}

.money-wallet-card{
border-color:#bbf7d0;
background:linear-gradient(180deg,#f0fdf4 0%,#fff 70%);
}

.wallet-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin:18px 0;
}

.wallet-grid article{
border:1px solid #e5e7eb;
border-radius:8px;
padding:18px;
background:#fff;
}

.wallet-grid span,
.wallet-grid small{
display:block;
color:#64748b;
font-weight:700;
}

.wallet-grid span{
font-size:12px;
text-transform:uppercase;
margin-bottom:10px;
}

.wallet-grid strong{
display:block;
font-size:28px;
line-height:1.1;
color:#0f172a;
margin-bottom:8px;
}

.wallet-positive{
box-shadow:inset 0 4px 0 #16a34a;
}

.wallet-negative{
box-shadow:inset 0 4px 0 #dc2626;
}

.wallet-negative strong{
color:#991b1b;
}

.wallet-message{
font-weight:800;
color:#14532d;
margin:0;
}

.benchmark-callout{
display:flex;
align-items:center;
gap:16px;
margin-top:18px;
padding:18px;
border:1px solid #bae6fd;
border-radius:8px;
background:#f0f9ff;
}

.benchmark-callout strong{
font-size:38px;
color:#0369a1;
min-width:92px;
}

.benchmark-callout span{
color:#0f172a;
font-weight:700;
}

.provider-recommendations{
display:grid;
gap:12px;
margin-top:14px;
}

.provider-offer-row{
display:grid;
grid-template-columns:minmax(0,1fr) 150px minmax(180px,240px) auto;
gap:10px;
align-items:center;
padding:12px;
border:1px solid #e5e7eb;
border-radius:8px;
background:#f8fafc;
}

.provider-offer-row small{
display:block;
color:#64748b;
font-weight:700;
margin-top:4px;
}

.provider-offer-row input{
border:1px solid #cbd5e1;
border-radius:8px;
padding:10px 12px;
}

.provider-interest-box{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
margin-top:14px;
padding:14px;
border:1px solid #bae6fd;
border-radius:8px;
background:#f0f9ff;
}

.provider-interest-box strong{
color:#075985;
}

.provider-interest-box span{
color:#475569;
font-weight:700;
}

.provider-admin-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:14px;
}

.muted-text{
color:#64748b;
margin:0;
}

.recommendation-detail-card{
display:grid;
grid-template-columns:54px 1fr;
gap:18px;
padding:22px;
}

.recommendation-detail-card h3{
font-size:21px;
margin:0 0 8px;
color:#0f172a;
}

.recommendation-detail-card p{
color:#64748b;
margin-bottom:14px;
}

.recommendation-metrics{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.recommendation-metrics span{
background:#f8fafc;
border:1px solid #e5e7eb;
border-radius:999px;
padding:8px 12px;
font-size:13px;
color:#475569;
}

.recommendation-detail-card.high{
border-color:#bbf7d0;
}

@media(max-width:1100px){
.product-hero,
.two-column-band{
grid-template-columns:1fr;
}

.dashboard-summary-grid,
.value-card-grid,
.advanced-tools-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media(max-width:720px){
.dashboard-auth-actions{
justify-content:flex-start;
flex-wrap:wrap;
}

.dashboard-summary-grid,
.value-card-grid,
.advanced-tools-grid,
.billing-insights-grid,
.wallet-grid,
.steps-grid,
.recommendation-summary{
grid-template-columns:1fr;
}

.billing-history-list article{
grid-template-columns:1fr;
}

.benchmark-callout{
align-items:flex-start;
flex-direction:column;
}

.provider-offer-row{
grid-template-columns:1fr;
}

.report-document{
padding:24px;
}

.report-document-header,
.report-executive-summary,
.live-algorithm-header{
grid-template-columns:1fr;
}

.report-document-header{
display:grid;
}

.report-facts-grid,
.live-source-grid,
.algorithm-metric-grid,
.technical-model-hero,
.technical-chapter-grid,
.formula-grid,
.technical-status-grid{
grid-template-columns:1fr;
}

.dashboard-band{
padding:20px;
}

.product-hero{
padding-top:24px;
}
}

.energy-report-page .report-disclaimer{
border-color:#facc15;
background:#fefce8;
color:#854d0e;
font-weight:700;
}

.report-document-shell{
background:#f8fafc;
}

.report-document-page{
max-width:980px;
margin:0 auto;
padding:28px 18px 60px;
}

.report-document{
display:block;
background:#fff;
border:1px solid #e5e7eb;
border-radius:4px;
box-shadow:0 20px 60px rgba(15,23,42,.08);
padding:44px;
color:#0f172a;
}

.report-document-header{
display:flex;
justify-content:space-between;
gap:24px;
padding-bottom:28px;
border-bottom:1px solid #e5e7eb;
}

.report-document-header h1{
font-size:38px;
margin:8px 0;
}

.report-document-header p{
margin:0;
color:#64748b;
font-weight:700;
}

.report-status-box{
border:1px solid #d1d5db;
border-radius:4px;
padding:14px 16px;
align-self:flex-start;
min-width:220px;
background:#f8fafc;
}

.report-status-box strong,
.report-status-box span{
display:block;
}

.report-status-box span{
font-size:13px;
color:#64748b;
margin-top:4px;
}

.report-section{
padding:30px 0;
border-bottom:1px solid #e5e7eb;
}

.report-section:last-child{
border-bottom:0;
}

.report-executive-summary{
display:grid;
grid-template-columns:minmax(0,1fr) 260px;
gap:28px;
align-items:start;
}

.report-executive-summary h2{
font-size:30px;
line-height:1.2;
margin:8px 0 10px;
}

.report-executive-summary p{
color:#475569;
font-size:17px;
margin:0;
}

.report-score-document{
border:1px solid #cbd5e1;
border-radius:4px;
padding:18px;
background:#fff;
}

.report-score-document span,
.report-score-document em{
display:block;
color:#64748b;
font-style:normal;
font-weight:700;
}

.report-score-document strong{
display:block;
font-size:54px;
line-height:1;
margin:10px 0;
}

.report-score-document small{
font-size:18px;
color:#64748b;
}

.report-facts-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.report-facts-grid article{
border:1px solid #e5e7eb;
border-radius:4px;
padding:16px;
background:#fff;
}

.report-facts-grid span{
display:block;
font-size:12px;
font-weight:800;
text-transform:uppercase;
color:#64748b;
margin-bottom:8px;
}

.report-facts-grid strong{
display:block;
font-size:18px;
color:#0f172a;
}

.report-simple-list{
display:grid;
gap:12px;
}

.report-simple-list article{
display:grid;
grid-template-columns:34px 1fr;
gap:14px;
padding:16px 0;
border-bottom:1px solid #e5e7eb;
}

.report-simple-list article:last-child{
border-bottom:0;
}

.report-simple-list article > span{
display:grid;
place-items:center;
width:32px;
height:32px;
border-radius:50%;
background:#0f172a;
color:#fff;
font-weight:900;
}

.report-simple-list h3{
font-size:19px;
margin:0 0 6px;
}

.report-simple-list p{
margin:0;
color:#475569;
}

.loss-cost-note{
margin:0 0 16px;
color:#475569;
max-width:760px;
}

.loss-cost-list article{
grid-template-columns:minmax(118px,150px) 1fr;
align-items:start;
}

.loss-cost-list article > span{
width:auto;
height:auto;
min-height:38px;
border-radius:4px;
padding:8px 10px;
background:#fef2f2;
color:#991b1b;
font-size:15px;
line-height:1.2;
text-align:center;
}

.loss-cost-list small{
display:block;
margin-top:8px;
font-size:12px;
font-weight:800;
text-transform:uppercase;
color:#64748b;
}

.report-document .technical-details{
background:#fff;
}

.report-document .report-disclaimer{
margin-top:28px;
padding:18px;
border:1px solid #facc15;
border-radius:4px;
background:#fefce8;
color:#854d0e;
font-weight:800;
}

.algorithms-page .dashboard-band{
border-color:#dbeafe;
}

.live-algorithm-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,460px);
gap:22px;
align-items:center;
background:linear-gradient(180deg,#eff6ff,#ffffff);
}

.live-source-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}

.live-source-grid article,
.algorithm-metric-grid article{
border:1px solid #dbeafe;
border-radius:8px;
background:#fff;
padding:14px;
}

.live-source-grid span,
.algorithm-metric-grid span{
display:block;
font-size:12px;
font-weight:800;
text-transform:uppercase;
color:#64748b;
margin-bottom:6px;
}

.live-source-grid strong,
.algorithm-metric-grid strong{
font-size:22px;
color:#0f172a;
}

.live-source-grid small{
display:block;
color:#64748b;
font-weight:700;
margin-top:4px;
}

.algorithm-insights-list{
display:grid;
gap:16px;
}

.algorithm-insight-card{
border:1px solid #dbeafe;
border-radius:8px;
padding:22px;
background:#fff;
box-shadow:0 12px 30px rgba(37,99,235,.07);
}

.algorithm-insight-card.priority{
border-color:#93c5fd;
box-shadow:0 16px 38px rgba(37,99,235,.13);
}

.algorithm-card-header{
display:flex;
justify-content:space-between;
gap:12px;
align-items:center;
margin-bottom:12px;
}

.live-badge{
display:inline-flex;
align-items:center;
gap:6px;
border:1px solid #bfdbfe;
border-radius:999px;
background:#eff6ff;
color:#1d4ed8;
padding:6px 10px;
font-size:12px;
font-weight:900;
text-transform:uppercase;
}

.algorithm-insight-card h3{
font-size:24px;
margin:0 0 8px;
}

.algorithm-insight-card p{
color:#475569;
margin:0 0 16px;
}

.algorithm-metric-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin:16px 0;
}

.algorithm-source-line,
.algorithm-why{
border:1px solid #e5e7eb;
border-radius:8px;
background:#f8fafc;
padding:12px;
color:#475569;
font-weight:700;
margin-bottom:12px;
}

.algorithm-why strong,
.algorithm-why span{
display:block;
}

.algorithm-why strong{
color:#0f172a;
margin-bottom:4px;
}

.technical-model-hero{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,420px);
gap:22px;
align-items:start;
}

.formula-block{
margin:0;
padding:18px;
border:1px solid #cbd5e1;
border-radius:8px;
background:#0f172a;
color:#e2e8f0;
font-size:14px;
line-height:1.55;
white-space:pre-wrap;
}

.technical-chapter-grid,
.formula-grid,
.technical-status-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin-bottom:20px;
}

.technical-chapter-card,
.formula-grid article,
.technical-status-grid article,
.technical-output-list article,
.technical-file-map article{
border:1px solid #e5e7eb;
border-radius:8px;
background:#fff;
padding:18px;
}

.technical-chapter-card > span,
.technical-status-grid article > span{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:34px;
height:28px;
border-radius:999px;
background:#eef2ff;
color:#3730a3;
font-size:12px;
font-weight:900;
text-transform:uppercase;
margin-bottom:12px;
}

.technical-chapter-card h3,
.technical-status-grid strong{
display:block;
font-size:20px;
margin:0 0 8px;
color:#0f172a;
}

.technical-chapter-card p,
.technical-status-grid p{
color:#64748b;
margin:0 0 12px;
}

.technical-chapter-card ul{
margin:0;
padding-left:18px;
color:#334155;
font-weight:700;
}

.formula-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.formula-grid span{
display:block;
font-size:12px;
font-weight:900;
text-transform:uppercase;
color:#64748b;
margin-bottom:8px;
}

.formula-grid strong{
display:block;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
font-size:18px;
color:#0f172a;
margin-bottom:8px;
}

.formula-grid p{
margin:0;
color:#64748b;
}

.technical-table-wrap{
overflow:auto;
border:1px solid #e5e7eb;
border-radius:8px;
}

.technical-table{
width:100%;
border-collapse:collapse;
min-width:720px;
font-size:13px;
}

.technical-table th,
.technical-table td{
padding:12px;
border-bottom:1px solid #e5e7eb;
text-align:left;
vertical-align:top;
}

.technical-table th{
background:#f8fafc;
font-size:12px;
text-transform:uppercase;
color:#64748b;
}

.technical-table td:first-child{
font-weight:900;
color:#0f172a;
}

.technical-output-list,
.technical-file-map{
display:grid;
gap:10px;
}

.technical-output-list article{
display:grid;
gap:4px;
padding:14px;
}

.technical-output-list strong,
.technical-file-map strong{
color:#0f172a;
}

.technical-output-list span{
color:#64748b;
font-weight:700;
}

.technical-status-grid article.done{
border-color:#bbf7d0;
background:#f0fdf4;
}

.technical-file-map code{
display:block;
margin-top:6px;
white-space:normal;
word-break:break-word;
color:#334155;
}

.report-hero-grid{
display:grid;
grid-template-columns:minmax(280px,380px) minmax(0,1fr);
gap:20px;
margin:20px 0;
align-items:stretch;
}

.report-score-card{
padding:24px;
display:flex;
flex-direction:column;
gap:16px;
align-items:flex-start;
}

.report-score-card .score-ring{
align-self:center;
}

.main-conclusion-card{
margin-top:0;
display:flex;
flex-direction:column;
justify-content:center;
}

.confidence-card{
border-color:#bfdbfe;
background:#eff6ff;
}

.technical-details summary{
font-weight:800;
cursor:pointer;
color:#0f172a;
}

.technical-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
margin:18px 0;
}

.technical-grid article{
background:#f8fafc;
border:1px solid #e5e7eb;
border-radius:8px;
padding:16px;
}

.technical-grid span{
display:block;
font-size:12px;
font-weight:800;
color:#64748b;
text-transform:uppercase;
margin-bottom:8px;
}

.technical-grid strong{
font-size:20px;
color:#0f172a;
}

.form-wide{
grid-column:1 / -1;
}

.conditional-panel{
border:1px solid #e5e7eb;
border-radius:8px;
padding:16px;
background:#f8fafc;
}

.source-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:12px;
}

.source-grid label{
display:grid;
gap:6px;
align-content:start;
}

.source-grid.compact label{
display:flex;
align-items:center;
gap:8px;
}

input:disabled{
cursor:not-allowed;
opacity:.6;
background:#f1f5f9;
}

.admin-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}

.admin-chart{
display:grid;
gap:12px;
}

.admin-bar-row{
display:grid;
grid-template-columns:minmax(90px,140px) 1fr 42px;
gap:10px;
align-items:center;
font-size:14px;
}

.admin-bar-row span{
font-weight:700;
color:#334155;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.admin-bar-track{
height:12px;
border-radius:999px;
background:#e5e7eb;
overflow:hidden;
}

.admin-bar-track div{
height:100%;
border-radius:999px;
background:#0f766e;
}

.admin-table-wrap{
overflow:auto;
border:1px solid #e5e7eb;
border-radius:8px;
}

.admin-table{
width:100%;
border-collapse:collapse;
min-width:1100px;
font-size:13px;
}

.admin-table th,
.admin-table td{
padding:12px;
border-bottom:1px solid #e5e7eb;
text-align:left;
vertical-align:top;
}

.admin-table th{
background:#f8fafc;
font-size:12px;
text-transform:uppercase;
color:#64748b;
}

.admin-tabs{
display:flex;
gap:10px;
flex-wrap:wrap;
padding:12px;
}

.admin-tab{
border:1px solid #d1d5db;
border-radius:8px;
background:#fff;
color:#334155;
font-weight:800;
padding:10px 14px;
}

.admin-tab.active{
background:#0f766e;
border-color:#0f766e;
color:#fff;
}

.admin-controls{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:12px;
align-items:end;
margin-bottom:16px;
}

.admin-controls label,
.admin-grid label{
display:grid;
gap:6px;
font-size:13px;
font-weight:800;
color:#475569;
}

.admin-profile-list{
display:grid;
gap:10px;
margin-top:14px;
max-height:420px;
overflow:auto;
}

.admin-profile-row{
display:grid;
grid-template-columns:minmax(120px,1fr) 90px 90px;
gap:10px;
align-items:center;
border:1px solid #e5e7eb;
border-radius:8px;
padding:10px;
font-size:13px;
}

.admin-profile-row strong{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.admin-json{
background:#0f172a;
color:#e2e8f0;
border-radius:8px;
padding:14px;
max-height:420px;
overflow:auto;
font-size:12px;
white-space:pre-wrap;
}

.admin-table tbody tr{
cursor:pointer;
}

.admin-table tbody tr:hover{
background:#f0fdfa;
}

.hardware-teaser{
display:grid;
grid-template-columns:minmax(120px,180px) 1fr;
gap:18px;
align-items:center;
}

.hardware-teaser.compact{
grid-template-columns:120px 1fr;
}

.hardware-teaser img{
width:100%;
border-radius:8px;
border:1px solid #e5e7eb;
background:#fff;
object-fit:cover;
aspect-ratio:4 / 3;
}

.hardware-teaser p{
margin:0;
color:#475569;
line-height:1.6;
}

.metric-card.inactive-metric{
filter:grayscale(.85);
opacity:.62;
}

.metric-card.inactive-metric strong{
color:#64748b;
}

.secondary-btn.danger-soft{
border-color:#fecaca;
background:#fff1f2;
color:#991b1b;
}

.secondary-btn.danger-soft:hover{
background:#ffe4e6;
color:#7f1d1d;
}

@media(max-width:900px){
.report-hero-grid,
.technical-grid,
.admin-grid{
grid-template-columns:1fr;
}

.hardware-teaser,
.hardware-teaser.compact{
grid-template-columns:1fr;
}
}

/* ===== MOBILE FIRST FIXES: REPORT, ALGORITHMS, ENERGY DATA HUB ===== */

@media(max-width:820px){
.report-document-shell .app-content,
.app-content.report-document-shell{
margin-left:0;
}

.report-document-page,
.dashboard.energy-data-page,
.dashboard.algorithms-page{
width:100%;
max-width:100%;
padding:14px;
}

.report-document{
padding:20px;
border-radius:0;
box-shadow:none;
}

.report-document-header,
.report-executive-summary,
.live-algorithm-header,
.technical-model-hero{
display:grid;
grid-template-columns:1fr;
gap:18px;
}

.report-status-box,
.report-score-document{
width:100%;
min-width:0;
}

.report-document-header h1{
font-size:clamp(28px,8vw,36px);
line-height:1.08;
overflow-wrap:anywhere;
}

.report-executive-summary h2{
font-size:clamp(22px,6vw,28px);
}

.report-score-document strong{
font-size:clamp(44px,16vw,58px);
}

.report-section{
padding:22px 0;
}

.report-facts-grid,
.technical-grid,
.live-source-grid,
.algorithm-metric-grid,
.billing-insights-grid,
.technical-chapter-grid,
.formula-grid,
.technical-status-grid,
.admin-grid{
grid-template-columns:1fr;
}

.report-facts-grid article,
.technical-grid article,
.live-source-grid article,
.algorithm-metric-grid article,
.technical-chapter-card,
.formula-grid article,
.technical-status-grid article,
.technical-output-list article,
.technical-file-map article{
min-width:0;
}

.report-simple-list article{
grid-template-columns:28px 1fr;
gap:12px;
}

.report-simple-list article > span{
width:28px;
height:28px;
font-size:13px;
}

.loss-cost-list article{
grid-template-columns:1fr;
}

.loss-cost-list article > span{
width:fit-content;
height:auto;
min-height:0;
border-radius:4px;
font-size:14px;
}

.dashboard-band,
.algorithms-page .dashboard-band{
padding:18px;
border-radius:8px;
}

.hero-top{
display:grid;
grid-template-columns:1fr;
gap:14px;
align-items:start;
}

.system-state{
justify-self:start;
max-width:100%;
}

.live-source-grid.market-grid{
grid-template-columns:1fr;
}

.algorithm-card-header{
align-items:flex-start;
flex-direction:column;
gap:10px;
}

.algorithm-insight-card{
padding:18px;
}

.algorithm-insight-card h3{
font-size:22px;
line-height:1.2;
}

.algorithm-source-line,
.algorithm-why,
.benchmark-callout{
overflow-wrap:anywhere;
}

.formula-block{
max-width:100%;
overflow-x:auto;
font-size:13px;
}

.formula-grid strong{
font-size:15px;
line-height:1.45;
overflow-wrap:anywhere;
}

.technical-table-wrap{
margin-inline:-2px;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}

.technical-table{
min-width:680px;
}

.technical-table th,
.technical-table td{
padding:10px;
}

.technical-file-map code{
font-size:12px;
}
}

@media(max-width:520px){
.app-content{
padding:0;
}

.app-content > header{
padding:76px 14px 10px;
}

.dashboard,
.report-document-page{
padding-inline:12px;
}

.report-document{
padding:16px;
}

.report-document-header{
padding-bottom:20px;
}

.report-status-box,
.report-score-document,
.report-facts-grid article,
.technical-grid article,
.dashboard-band,
.algorithms-page .dashboard-band,
.algorithm-insight-card,
.technical-chapter-card,
.formula-grid article,
.technical-status-grid article{
padding:14px;
}

.report-facts-grid strong,
.technical-grid strong,
.live-source-grid strong,
.algorithm-metric-grid strong{
font-size:18px;
line-height:1.2;
overflow-wrap:anywhere;
}

.section-heading h2,
.technical-model-hero h2{
font-size:clamp(22px,7vw,28px);
line-height:1.18;
}

.technical-chapter-card h3,
.technical-status-grid strong{
font-size:18px;
}

.technical-chapter-card ul{
padding-left:16px;
}

.technical-table{
min-width:620px;
font-size:12px;
}

.live-badge{
white-space:normal;
border-radius:8px;
}
}