:root{
    --bg-color:#121214;
    --card-bg:#232326;
    --border-color:#3d3d3f;
    --panel-dark:#19191b;
    --panel-border:#232326;
    --text-primary:#ffffff;
    --text-secondary:#a0a0a5;
    --primary-orange:#f36f21;
    --primary-blue:#3b82f6;
    --primary-green:#10b981;
    --primary-purple:#a855f7;
    --accent-bg-glow:rgba(243, 111, 33, 0.12);
    --font-outfit:'Outfit', sans-serif;
    --font-inter:'Inter', sans-serif;
    --header-height:70px;
}
body.light-theme{
    --bg-color:#f4f5f8;
    --card-bg:#ffffff;
    --border-color:#e4e6eb;
    --panel-dark:#f7f8fa;
    --panel-border:#e4e6eb;
    --text-primary:#212529;
    --text-secondary:#6c757d;
    --accent-bg-glow:rgba(243, 111, 33, 0.08);
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}
body{
    background-color:var(--bg-color);
    color:var(--text-primary);
    font-family:var(--font-inter);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    padding-top:var(--header-height);
    background-image:
        radial-gradient(at 0% 0%, rgba(243, 111, 33, 0.03) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(243, 111, 33, 0.02) 0px, transparent 50%);
    transition:background-color 0.3s ease, color 0.3s ease;
}
.app-container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:16px;
    flex:1;
    display:flex;
    flex-direction:column;
}
.app-header{
    background-color:var(--card-bg);
    border-bottom:1.5px solid var(--border-color);
    height:var(--header-height);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    box-shadow:0 4px 12px rgba(0, 0, 0, 0.05);
    transition:background-color 0.3s ease, border-color 0.3s ease;
}
.header-content{
    max-width:1200px;
    height:100%;
    margin:0 auto;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
}
.brand{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    z-index:1010;
}
.brand-logo{
    height:28px;
    width:auto;
}
.brand-divider{
    color:var(--border-color);
    font-size:1.2rem;
    font-weight:300;
}
.brand-title{
    font-family:var(--font-outfit);
    font-size:0.95rem;
    font-weight:800;
    color:var(--text-primary);
    letter-spacing:0.2px;
}
.menu-toggle-cb{
    display:none;
}
.menu-btn{
    cursor:pointer;
    font-size:1.4rem;
    color:var(--text-primary);
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background-color:rgba(255, 255, 255, 0.02);
    border:1px solid var(--border-color);
    z-index:1010;
    transition:all 0.2s ease;
}
.menu-btn .icon-close{
    display:none;
}
.nav-menu{
    position:fixed;
    top:var(--header-height);
    left:0;
    width:100%;
    height:calc(100vh - var(--header-height));
    background-color:var(--card-bg);
    border-bottom:2px solid var(--primary-orange);
    padding:30px 20px;
    display:flex;
    flex-direction:column;
    gap:30px;
    transform:translateY(-120%);
    opacity:0;
    pointer-events:none;
    transition:transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    z-index:999;
    box-shadow:0 10px 30px rgba(0, 0, 0, 0.15);
}
.menu-links{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.menu-item{
    font-family:var(--font-outfit);
    font-size:1.15rem;
    font-weight:700;
    text-decoration:none;
    color:var(--text-secondary);
    padding:12px 16px;
    border-radius:10px;
    transition:all 0.2s ease;
}
.menu-item:hover, .menu-item.active{
    color:var(--primary-orange);
    background-color:var(--accent-bg-glow);
}
.menu-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 16px 0;
    border-top:1px solid var(--border-color);
    margin-top:auto;
}
.lang-selector{
    display:flex;
    background-color:rgba(255, 255, 255, 0.04);
    border:1px solid var(--border-color);
    border-radius:8px;
    padding:3px;
}
body.light-theme .lang-selector{
    background-color:rgba(0, 0, 0, 0.03);
}
.lang-link{
    text-decoration:none;
    color:var(--text-secondary);
    font-family:var(--font-outfit);
    font-size:0.8rem;
    font-weight:700;
    padding:6px 12px;
    border-radius:6px;
    transition:all 0.2s ease;
}
.lang-link.active{
    background-color:var(--primary-orange);
    color:#ffffff;
}
.theme-btn{
    text-decoration:none;
    background-color:rgba(255, 255, 255, 0.04);
    border:1px solid var(--border-color);
    color:var(--text-primary);
    width:36px;
    height:36px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    transition:all 0.2s ease;
}
body.light-theme .theme-btn{
    background-color:rgba(0, 0, 0, 0.03);
}
.theme-btn:hover{
    border-color:var(--primary-orange);
    color:var(--primary-orange);
}
.menu-toggle-cb:checked ~ .nav-menu{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
}
.menu-toggle-cb:checked ~ .menu-btn .icon-open{
    display:none;
}
.menu-toggle-cb:checked ~ .menu-btn .icon-close{
    display:block;
}
.menu-toggle-cb:checked ~ .menu-btn{
    border-color:var(--primary-orange);
    color:var(--primary-orange);
}
.configurator-card{
    background-color:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:16px;
    width:100%;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0, 0, 0, 0.05);
    transition:background-color 0.3s ease, border-color 0.3s ease;
}
.configurator-body{
    display:flex;
    flex-direction:column;
}
.input-panel{
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:25px;
}
.info-card{
    background-color:rgba(59, 130, 246, 0.04);
    border:1.5px dashed rgba(59, 130, 246, 0.2);
    border-radius:10px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-outfit);
    font-size:0.82rem;
    font-weight:500;
    color:var(--text-secondary);
    line-height:1.3;
}
.info-card i{
    color:var(--primary-blue);
    font-size:1rem;
    flex-shrink:0;
}
.config-section{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.section-title{
    font-family:var(--font-outfit);
    font-size:0.88rem;
    font-weight:700;
    letter-spacing:0.5px;
    color:var(--text-secondary);
    border-left:3px solid var(--primary-blue);
    padding-left:8px;
}
.type-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}
.opt-card{
    background-color:var(--panel-dark);
    border:1.5px solid var(--border-color);
    border-radius:10px;
    padding:12px;
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    transition:all 0.2s ease;
}
.opt-card.active{
    border-color:var(--primary-orange);
    box-shadow:0 4px 12px rgba(243, 111, 33, 0.1);
    background-color:var(--accent-bg-glow);
}
.opt-icon{
    font-size:1.4rem;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    background-color:rgba(255, 255, 255, 0.02);
    border-radius:8px;
    border:1px solid rgba(255, 255, 255, 0.04);
}
.opt-content{
    display:flex;
    flex-direction:column;
}
.opt-title{
    font-family:var(--font-outfit);
    font-size:0.95rem;
    font-weight:600;
    color:var(--text-primary);
}
.opt-desc{
    font-size:0.72rem;
    color:var(--text-secondary);
}
.text-blue{color:var(--primary-blue)}
.text-orange{color:var(--primary-orange)}
.text-green{color:var(--primary-green)}
.text-purple{color:var(--primary-purple)}
.capacity-grid{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.opt-cap-pill{
    background-color:var(--panel-dark);
    border:1.5px solid var(--border-color);
    border-radius:8px;
    padding:8px 12px;
    font-family:var(--font-outfit);
    font-size:0.95rem;
    font-weight:600;
    color:var(--text-primary);
    cursor:pointer;
    transition:all 0.15s ease;
    min-width:60px;
    text-align:center;
}
.opt-cap-pill.active{
    border-color:var(--primary-orange);
    background-color:var(--accent-bg-glow);
}
.v-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
}
.opt-pill{
    background-color:var(--panel-dark);
    border:1.5px solid var(--border-color);
    border-radius:8px;
    padding:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    cursor:pointer;
    transition:all 0.15s ease;
}
.opt-pill.active{
    border-color:var(--primary-orange);
    background-color:var(--accent-bg-glow);
}
.pill-volts{
    font-family:var(--font-outfit);
    font-size:1.1rem;
    font-weight:700;
    color:var(--text-primary);
}
.pill-desc{
    font-size:0.68rem;
    color:var(--text-secondary);
}
.dim-row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
}
.input-group{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.input-group label{
    font-family:var(--font-outfit);
    font-size:0.7rem;
    font-weight:600;
    color:var(--text-secondary);
}
.dim-input{
    background-color:var(--panel-dark);
    border:1.5px solid var(--border-color);
    border-radius:6px;
    padding:10px;
    color:var(--text-primary);
    font-family:var(--font-outfit);
    font-size:1.1rem;
    font-weight:600;
    width:100%;
    outline:none;
    text-align:center;
    transition:all 0.15s ease;
}
.dim-input:focus{
    border-color:var(--primary-blue);
}
.output-panel{
    background-color:var(--panel-dark);
    border-top:1.5px solid var(--border-color);
    padding:24px 20px;
    display:flex;
    flex-direction:column;
    gap:25px;
}
.output-header{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.output-header h3{
    font-family:var(--font-outfit);
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.5px;
    color:var(--text-secondary);
}
.ah-val{
    font-family:var(--font-outfit);
    font-size:2.2rem;
    font-weight:800;
    color:var(--primary-orange);
    line-height:1;
    text-shadow:0 4px 10px rgba(249, 115, 22, 0.1);
}
.wh-desc{
    font-size:0.9rem;
    font-weight:500;
    color:var(--text-primary);
}
.stat-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
.stat-box{
    background-color:rgba(255, 255, 255, 0.015);
    border:1px solid rgba(255, 255, 255, 0.03);
    border-radius:8px;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:2px;
}
body.light-theme .stat-box{
    background-color:#ffffff;
    border-color:#e4e6eb;
}
.stat-label{
    font-family:var(--font-outfit);
    font-size:0.65rem;
    font-weight:600;
    color:var(--text-secondary);
}
.stat-value{
    font-family:var(--font-outfit);
    font-size:1.05rem;
    font-weight:700;
    color:var(--text-primary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.box-3d-section{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.box-3d-header{
    font-family:var(--font-outfit);
    font-size:0.68rem;
    font-weight:700;
    color:var(--text-secondary);
    text-transform:uppercase;
}
#box-3d-container{
    width:100%;
    height:160px;
    background:rgba(0, 0, 0, 0.2);
    border:1px solid var(--border-color);
    border-radius:8px;
    overflow:hidden;
    cursor:grab;
    position:relative;
    transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#box-3d-container.fullscreen-active{
    position:fixed;
    top:0;
    left:0;
    width:100vw !important;
    height:100vh !important;
    z-index:99999;
    border-radius:0;
    background:#121214;
    cursor:grab;
}
body.light-theme #box-3d-container.fullscreen-active{
    background:#f4f5f8;
}
#box-3d-container canvas{
    position:absolute !important;
    top:0;
    left:0;
    width:100% !important;
    height:100% !important;
}
.hud-close-btn{
    display:none;
    position:absolute;
    top:16px;
    right:16px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(24, 24, 26, 0.7);
    border:1px solid rgba(255, 255, 255, 0.15);
    color:#ffffff;
    font-size:1.2rem;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    z-index:10006;
    transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter:blur(10px);
}
.hud-close-btn:hover{
    background:var(--primary-orange);
    border-color:var(--primary-orange);
    transform:scale(1.08);
}
#box-3d-container.fullscreen-active .hud-close-btn{
    display:flex;
}
body.light-theme #box-3d-container.fullscreen-active .hud-close-btn{
    background:rgba(255, 255, 255, 0.9);
    border-color:rgba(0, 0, 0, 0.1);
    color:#121214;
}
body.light-theme #box-3d-container.fullscreen-active .hud-close-btn:hover{
    background:var(--primary-orange);
    border-color:var(--primary-orange);
    color:#ffffff;
}
@media (max-width:849px){
    #box-3d-container{
        height:auto !important;
        aspect-ratio:1 / 1 !important;
        width:100% !important;
        max-height:80vw !important;
  }
}
@media (max-width:849px){
    #box-3d-container.fullscreen-active{
        position:fixed !important;
        top:50% !important;
        left:50% !important;
        transform:translate(-50%, -50%) !important;
        width:80vw !important;
        height:80vh !important;
        max-width:80vw !important;
        max-height:80vh !important;
        z-index:99999 !important;
        border-radius:16px !important;
        box-shadow:0 0 0 100vmax rgba(0, 0, 0, 0.85) !important;
        background:#121214 !important;
        border:1px solid rgba(255, 255, 255, 0.1) !important;
  }
    body.light-theme #box-3d-container.fullscreen-active{
        background:#ffffff !important;
        border:1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow:0 0 0 100vmax rgba(0, 0, 0, 0.5) !important;
  }
}
.hud-controls{
    position:absolute;
    bottom:12px;
    left:50%;
    transform:translateX(-50%) translateY(10px);
    display:flex;
    gap:6px;
    background:rgba(24, 24, 26, 0.7);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255, 255, 255, 0.08);
    border-radius:20px;
    padding:4px;
    z-index:1005;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#box-3d-container:hover .hud-controls,
#box-3d-container.show-hud .hud-controls{
    opacity:1;
    transform:translateX(-50%) translateY(0);
    pointer-events:auto;
}
body.light-theme .hud-controls{
    background:rgba(255, 255, 255, 0.85);
    border-color:rgba(0, 0, 0, 0.08);
    box-shadow:0 4px 12px rgba(0, 0, 0, 0.05);
}
.hud-btn{
    background:none;
    border:none;
    color:var(--text-secondary);
    font-family:var(--font-outfit);
    font-size:0.75rem;
    font-weight:700;
    width:32px;
    height:32px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.2s ease;
}
.hud-btn:hover{
    color:var(--text-primary);
    background:rgba(255, 255, 255, 0.06);
}
body.light-theme .hud-btn:hover{
    background:rgba(0, 0, 0, 0.04);
}
.hud-btn.active{
    background:var(--primary-orange);
    color:#ffffff !important;
}
.hud-btn-fs{
    border-left:1.5px solid rgba(255, 255, 255, 0.1);
    border-radius:0;
    padding-left:8px;
    width:38px;
}
body.light-theme .hud-btn-fs{
    border-left-color:rgba(0, 0, 0, 0.08);
}
.dim-3d-label{
    position:absolute;
    background:var(--primary-orange);
    color:#ffffff;
    font-family:var(--font-outfit);
    font-size:0.72rem;
    font-weight:700;
    padding:3px 7px;
    border-radius:4px;
    pointer-events:none;
    transform:translate(-50%, -50%);
    box-shadow:0 2px 6px rgba(0, 0, 0, 0.25);
    white-space:nowrap;
    z-index:1002;
    opacity:0;
    transition:opacity 0.15s ease;
}
body.light-theme .dim-3d-label{
    background:var(--primary-orange);
    color:#ffffff;
}
.warn-message{
    background-color:rgba(239, 68, 68, 0.08);
    border:1px solid rgba(239, 68, 68, 0.15);
    border-radius:8px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    gap:10px;
    color:#f87171;
    font-size:0.78rem;
    font-weight:500;
}
.action-btn{
    background-color:var(--primary-green);
    color:#fff;
    border-radius:8px;
    padding:14px 16px;
    font-family:var(--font-outfit);
    font-size:0.95rem;
    font-weight:700;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    box-shadow:0 4px 12px rgba(16, 185, 129, 0.15);
    transition:all 0.15s ease;
}
.action-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(16, 185, 129, 0.25);
}
.app-footer{
    background-color:var(--card-bg);
    border-top:1px solid var(--border-color);
    padding:30px 16px 20px;
    margin-top:40px;
    transition:background-color 0.3s ease, border-color 0.3s ease;
}
.footer-content{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:20px;
}
.footer-brand{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.footer-logo{
    height:24px;
    width:auto;
    align-self:flex-start;
}
.footer-desc{
    color:var(--text-secondary);
    font-size:0.8rem;
    line-height:1.4;
}
.footer-divider{
    height:1px;
    background-color:var(--border-color);
    width:100%;
}
.footer-bottom{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.copyright{
    color:var(--text-secondary);
    font-size:0.75rem;
}
.footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}
.footer-links a{
    color:var(--text-secondary);
    font-size:0.75rem;
    text-decoration:none;
    transition:color 0.15s ease;
}
.footer-links a:hover{
    color:var(--primary-orange);
}
@media (min-width:850px){
    .menu-btn{
        display:none;
  }
    .nav-menu{
        position:static;
        height:auto;
        width:auto;
        transform:none;
        opacity:1;
        pointer-events:auto;
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:24px;
        padding:0;
        box-shadow:none;
        background:none;
        border-bottom:none;
  }
    .menu-links{
        flex-direction:row;
        gap:20px;
  }
    .menu-item{
        font-size:0.95rem;
        padding:6px 12px;
  }
    .menu-controls{
        padding:0;
        border-top:none;
        margin-top:0;
        gap:15px;
  }
    .app-container{
        padding:24px;
  }
    .configurator-card{
        border-radius:20px;
        box-shadow:0 20px 40px rgba(0, 0, 0, 0.12);
  }
    .configurator-body{
        display:grid;
        grid-template-columns:1.3fr 1fr;
  }
    .input-panel{
        padding:40px;
        gap:35px;
  }
    .info-card{
        font-size:0.88rem;
        padding:14px 18px;
  }
    .section-title{
        font-size:0.95rem;
        padding-left:10px;
  }
    .type-grid{
        grid-template-columns:1fr 1fr;
        gap:16px;
  }
    .opt-card{
        padding:16px;
        gap:16px;
  }
    .opt-title{
        font-size:1.05rem;
  }
    .opt-desc{
        font-size:0.78rem;
  }
    .v-grid{
        grid-template-columns:repeat(3, 1fr);
        gap:12px;
  }
    .opt-pill{
        padding:12px;
  }
    .pill-volts{
        font-size:1.25rem;
  }
    .pill-desc{
        font-size:0.72rem;
  }
    .dim-row{
        gap:20px;
  }
    .output-panel{
        border-top:none;
        border-left:1.5px solid var(--border-color);
        padding:40px;
        gap:30px;
  }
    .ah-val{
        font-size:2.8rem;
  }
    .wh-desc{
        font-size:1rem;
  }
    .stat-grid{
        gap:16px;
  }
    .stat-box{
        padding:16px;
  }
    .stat-label{
        font-size:0.72rem;
  }
    .stat-value{
        font-size:1.25rem;
  }
    #box-3d-container{
        height:180px;
  }
    .footer-content{
        flex-direction:row;
        justify-content:space-between;
        align-items:flex-start;
  }
    .footer-brand{
        max-width:400px;
  }
    .footer-bottom{
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        width:100%;
        margin-top:10px;
  }
}
.toast-container{
    position:fixed;
    top:24px;
    right:24px;
    z-index:100000;
    display:flex;
    flex-direction:column;
    gap:10px;
    pointer-events:none;
}
.toast-alert{
    pointer-events:auto;
    display:flex;
    align-items:center;
    gap:12px;
    background:#1f2937;
    color:#ffffff;
    border-left:4px solid var(--primary-orange);
    padding:14px 20px;
    border-radius:8px;
    box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    min-width:300px;
    max-width:400px;
    transform:translateX(120%);
    transition:transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
    opacity:0;
}
.toast-alert.show{
    transform:translateX(0);
    opacity:1;
}
.toast-icon{
    font-size:1.3rem;
    color:var(--primary-orange);
}
.toast-content{
    flex-grow:1;
    font-size:0.9rem;
    font-weight:500;
    line-height:1.4;
}
.toast-close{
    cursor:pointer;
    opacity:0.6;
    transition:opacity 0.2s;
    font-size:0.9rem;
}
.toast-close:hover{
    opacity:1;
}
body.light-theme .toast-alert{
    background:#ffffff;
    color:#1f2937;
    box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-left-color:var(--primary-orange);
}