:root,
html[data-theme="dark"]{
    --bg:#07101e;
    --bg2:#0b1526;
    --panel:#0f1b2e;
    --panel2:#111f35;
    --panel3:#142640;
    --text:#f2f6fc;
    --muted:#8fa1b9;
    --line:#223550;
    --blue:#2f7df6;
    --blue2:#5da0ff;
    --green:#2ccf96;
    --red:#ff6b72;
    --amber:#ffbf66;
    --shadow:0 24px 60px rgba(0,0,0,.28);
    --input:#0a1628;
    --sidebar:#081321;
    --hover:#132743;
}

html[data-theme="light"]{
    --bg:#f4f7fb;
    --bg2:#eef3f9;
    --panel:#ffffff;
    --panel2:#ffffff;
    --panel3:#f5f8fd;
    --text:#14213a;
    --muted:#6f7f95;
    --line:#dfe7f1;
    --blue:#1768e8;
    --blue2:#0c58d5;
    --green:#098861;
    --red:#ca3641;
    --amber:#9f6c14;
    --shadow:0 20px 55px rgba(37,63,97,.10);
    --input:#ffffff;
    --sidebar:#ffffff;
    --hover:#f1f6fd;
}

*{
    box-sizing:border-box;
}

html{
    background:var(--bg);
    color-scheme:dark;
}

html[data-theme="light"]{
    color-scheme:light;
}

body{
    margin:0;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    background:
        radial-gradient(
            circle at 90% 0,
            rgba(47,125,246,.12),
            transparent 28%
        ),
        var(--bg);
    color:var(--text);
    min-height:100vh;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select{
    font:inherit;
}


/* SIDEBAR */

.portal-layout{
    min-height:100vh;
}

.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:270px;
    background:
        linear-gradient(
            180deg,
            var(--sidebar),
            var(--bg2)
        );
    border-right:1px solid var(--line);
    padding:24px 18px;
    display:flex;
    flex-direction:column;
    z-index:40;
}

.side-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:4px 8px 24px;
}

.brand-mark{
    width:43px;
    height:43px;
    border-radius:13px;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:900;
    letter-spacing:-1px;
    background:
        linear-gradient(
            145deg,
            var(--blue),
            #60a6ff
        );
    box-shadow:
        0 10px 28px
        rgba(47,125,246,.34);
}

.brand-mark.large{
    width:56px;
    height:56px;
    border-radius:17px;
    font-size:20px;
}

.side-brand strong,
.side-brand small,
.login-brand strong,
.login-brand small{
    display:block;
}

.side-brand small,
.login-brand small{
    color:var(--muted);
    font-size:12px;
    margin-top:2px;
}

.side-label,
.eyebrow,
.login-kicker{
    font-size:10px;
    font-weight:900;
    letter-spacing:.16em;
    color:var(--muted);
}

.side-label{
    padding:8px 12px;
}

.side-nav{
    display:grid;
    gap:5px;
}

.side-nav a{
    padding:12px 13px;
    border-radius:12px;
    color:var(--muted);
    font-size:14px;
    font-weight:700;
}

.side-nav a:hover{
    background:var(--hover);
    color:var(--text);
}

.side-spacer{
    flex:1;
}

.theme-switch{
    border:1px solid var(--line);
    background:var(--panel);
    color:var(--text);
    border-radius:12px;
    padding:11px 12px;
    display:flex;
    align-items:center;
    gap:9px;
    cursor:pointer;
}

.theme-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--blue);
    box-shadow:
        0 0 0 5px
        rgba(47,125,246,.12);
}

.side-user{
    display:grid;
    grid-template-columns:38px 1fr;
    gap:10px;
    align-items:center;
    padding:18px 6px 12px;
}

.side-user-avatar,
.user-avatar{
    display:grid;
    place-items:center;
    background:var(--panel3);
    color:var(--blue2);
    border:1px solid var(--line);
    border-radius:11px;
    font-weight:900;
}

.side-user-avatar{
    width:38px;
    height:38px;
}

.side-user strong,
.side-user small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.side-user strong{
    font-size:12px;
}

.side-user small{
    font-size:10px;
    color:var(--muted);
    margin-top:3px;
}

.side-logout{
    padding:10px 12px;
    border-radius:10px;
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}

.side-logout:hover{
    background:var(--hover);
    color:var(--red);
}


/* MAIN */

.portal-stage{
    margin-left:270px;
    min-height:100vh;
}

.mobile-topbar{
    display:none;
}

.shell{
    max-width:1450px;
    margin:0 auto;
    padding:34px 34px 64px;
}

.footer{
    color:var(--muted);
    font-size:11px;
    text-align:center;
    padding:18px 24px 30px;
}

.page-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin:0 0 24px;
}

.page-head h1{
    font-size:32px;
    letter-spacing:-.7px;
    margin:5px 0 6px;
}

.page-head p{
    color:var(--muted);
    margin:0;
}

.page-head.split{
    align-items:center;
}


/* HERO */

.hero{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            #0e326d,
            #0f4fae 55%,
            #1768e8
        );
    border:1px solid rgba(255,255,255,.1);
    color:#fff;
    border-radius:24px;
    padding:34px 38px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:
        0 25px 70px
        rgba(9,48,117,.3);
}

.hero:after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    right:-90px;
    top:-160px;
    background:
        rgba(255,255,255,.08);
}

.hero h1,
.customer-hero h1{
    margin:6px 0 8px;
    font-size:32px;
    letter-spacing:-.8px;
}

.hero p{
    margin:0;
    color:rgba(255,255,255,.76);
}

.hero .eyebrow{
    color:#b9d5ff;
}

.sync-pill{
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(5,20,48,.22);
    padding:12px 15px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    position:relative;
    z-index:2;
}

.sync-pill>span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#43dda3;
    box-shadow:
        0 0 0 5px
        rgba(67,221,163,.13);
}

.sync-pill strong,
.sync-pill small{
    display:block;
}

.sync-pill small{
    font-size:10px;
    color:#cbdcff;
    margin-top:2px;
}


/* CARDS */

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

.stats article,
.panel,
.provider-card,
.license-card,
.customer-list,
.customer-hero{
    background:
        linear-gradient(
            180deg,
            var(--panel),
            var(--panel2)
        );
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}

.stats article{
    border-radius:17px;
    padding:20px;
}

.stats span,
.stats small{
    display:block;
    color:var(--muted);
}

.stats strong{
    display:block;
    font-size:29px;
    letter-spacing:-.7px;
    margin:7px 0 4px;
}

.stats small{
    font-size:11px;
}

.section{
    margin-top:30px;
}

.section.flush{
    margin-top:18px;
}

.section-head,
.panel-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:14px;
}

.section-head h1,
.section-head h2,
.panel-head h2{
    margin:4px 0 0;
    letter-spacing:-.4px;
}

.muted{
    color:var(--muted);
}


/* PROVIDERS */

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

.provider-grid.compact{
    margin:17px 0;
}

.provider-card{
    display:flex;
    align-items:center;
    gap:12px;
    border-radius:15px;
    padding:15px;
}

.provider-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:rgba(47,125,246,.12);
    color:var(--blue2);
    border:1px solid rgba(47,125,246,.18);
    font-weight:900;
}

.provider-card strong,
.provider-card small{
    display:block;
}

.provider-card small{
    color:var(--muted);
    font-size:11px;
    margin-top:3px;
}


/* CUSTOMERS */

.customer-list{
    border-radius:18px;
    overflow:hidden;
}

.customer-row{
    display:grid;
    grid-template-columns:
        48px
        1fr
        110px
        110px
        22px;
    align-items:center;
    gap:14px;
    padding:15px 18px;
    border-bottom:1px solid var(--line);
    transition:.18s;
}

.customer-row:last-child{
    border-bottom:0;
}

.customer-row:hover{
    background:var(--hover);
    transform:translateX(2px);
}

.avatar{
    width:42px;
    height:42px;
    border-radius:12px;
    background:rgba(47,125,246,.11);
    color:var(--blue2);
    border:1px solid rgba(47,125,246,.16);
    display:grid;
    place-items:center;
    font-weight:900;
}

.avatar.xl{
    width:68px;
    height:68px;
    border-radius:19px;
    font-size:24px;
}

.customer-main strong,
.customer-main small,
.metric strong,
.metric small{
    display:block;
}

.customer-main small,
.metric small{
    color:var(--muted);
    font-size:11px;
    margin-top:3px;
}

.metric{
    text-align:right;
}

.metric strong{
    font-size:18px;
}

.chev{
    font-size:26px;
    color:var(--muted);
}


/* SEARCH */

.enterprise-tools{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 12px;
}

.enterprise-tools input,
.enterprise-tools select,
.search-box input,
.stack-form input,
.stack-form select,
.panel input,
.panel select{
    border:1px solid var(--line);
    background:var(--input);
    color:var(--text);
    border-radius:11px;
    padding:11px 12px;
    outline:none;
}

.enterprise-tools input:focus,
.enterprise-tools select:focus,
.stack-form input:focus,
.stack-form select:focus,
.panel input:focus,
.panel select:focus{
    border-color:var(--blue);
    box-shadow:
        0 0 0 3px
        rgba(47,125,246,.12);
}

.enterprise-tools input{
    min-width:320px;
}

.enterprise-tools .tool-count{
    color:var(--muted);
    font-size:11px;
    margin-left:auto;
}


/* CUSTOMER */

.back{
    display:inline-flex;
    color:var(--blue2);
    font-weight:800;
    font-size:13px;
    margin:0 0 18px;
}

.customer-hero{
    display:flex;
    align-items:center;
    gap:18px;
    border-radius:20px;
    padding:23px;
}

.customer-hero p{
    margin:0;
    color:var(--muted);
}

.tabs{
    display:flex;
    gap:6px;
    border-bottom:1px solid var(--line);
    margin-top:24px;
}

.tabs a{
    padding:12px 15px;
    color:var(--muted);
    font-weight:800;
    font-size:13px;
    border-bottom:2px solid transparent;
}

.tabs a.active{
    color:var(--blue2);
    border-color:var(--blue);
}


/* LICENSE */

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

.license-card{
    border-radius:17px;
    padding:19px;
}

.license-top{
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.license-top h3{
    margin:8px 0 4px;
    font-size:17px;
}

.license-top small{
    color:var(--muted);
    font-size:10px;
}

.provider-badge{
    display:inline-flex;
    font-size:10px;
    font-weight:900;
    color:var(--blue2);
    background:rgba(47,125,246,.12);
    border:1px solid rgba(47,125,246,.17);
    padding:5px 8px;
    border-radius:8px;
}

.qty{
    text-align:right;
    min-width:90px;
}

.qty strong,
.qty span{
    display:block;
}

.qty strong{
    font-size:28px;
}

.qty span{
    color:var(--muted);
    font-size:10px;
}

.license-meta{
    display:grid;
    grid-template-columns:
        repeat(
            6,
            1fr
        );
    gap:10px;
    margin-top:17px;
    padding-top:15px;
    border-top:1px solid var(--line);
}

.license-meta span,
.license-meta strong{
    display:block;
}

.license-meta span{
    color:var(--muted);
    font-size:10px;
    margin-bottom:5px;
}

.license-meta strong{
    font-size:12px;
}

.status.ok{
    color:var(--green);
}

.status.off{
    color:var(--red);
}

.empty{
    padding:30px;
    color:var(--muted);
    text-align:center;
}


/* ADMIN */

.admin-grid{
    display:grid;
    grid-template-columns:
        minmax(360px,.78fr)
        minmax(520px,1.22fr);
    gap:18px;
    align-items:start;
}

.panel{
    border-radius:18px;
    padding:21px;
}

.sticky-panel{
    position:sticky;
    top:20px;
}

.stack-form{
    display:grid;
    gap:13px;
}

.stack-form label,
.panel label{
    display:grid;
    gap:7px;
    font-size:12px;
    font-weight:800;
    color:var(--muted);
}

.stack-form input,
.stack-form select,
.panel input,
.panel select{
    width:100%;
}

.panel fieldset{
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px;
    margin:2px 0;
}

.panel legend{
    font-size:12px;
    font-weight:800;
    color:var(--text);
    padding:0 5px;
}

.panel legend small{
    color:var(--muted);
    font-weight:500;
}

.check-list{
    max-height:250px;
    overflow:auto;
    padding-right:4px;
}

.check{
    display:flex!important;
    align-items:center;
    gap:8px;
    margin:7px 0!important;
    color:var(--text)!important;
    font-weight:600!important;
}

.check input{
    width:auto!important;
}

.primary,
.secondary{
    border:0;
    border-radius:10px;
    padding:11px 14px;
    font-weight:850;
    cursor:pointer;
}

.primary{
    background:
        linear-gradient(
            135deg,
            var(--blue),
            #1e69e6
        );
    color:#fff;
    box-shadow:
        0 9px 25px
        rgba(47,125,246,.22);
}

.primary.xl{
    padding:14px 16px;
    font-size:14px;
}

.secondary{
    background:var(--panel3);
    color:var(--text);
    border:1px solid var(--line);
}

.compact{
    padding:8px 10px;
    font-size:11px;
}

.user-list{
    display:grid;
}

.user-row{
    display:grid;
    grid-template-columns:
        42px
        1fr
        auto;
    gap:12px;
    align-items:center;
    padding:13px 0;
    border-bottom:1px solid var(--line);
}

.user-row:last-child{
    border-bottom:0;
}

.user-avatar{
    width:42px;
    height:42px;
}

.user-info strong,
.user-info span,
.user-info small{
    display:block;
}

.user-info span{
    font-size:11px;
    color:var(--muted);
    margin-top:2px;
}

.user-info small{
    font-size:10px;
    color:var(--muted);
    margin-top:5px;
}

.user-actions{
    display:flex;
    gap:6px;
    align-items:center;
}

.user-actions form{
    margin:0;
}

.password-wrap{
    position:relative;
}

.password-wrap input{
    padding-right:78px!important;
}

.password-toggle{
    position:absolute;
    right:5px;
    top:50%;
    transform:translateY(-50%);
    border:0;
    background:transparent;
    color:var(--blue2);
    font-size:10px;
    font-weight:900;
    cursor:pointer;
}

.password-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.password-actions small{
    color:var(--muted);
    font-size:10px;
}

.search-box{
    display:flex;
    gap:8px;
}

.search-box input{
    min-width:260px;
}

.profile-grid{
    display:grid;
    grid-template-columns:
        .8fr
        1.2fr;
    gap:18px;
}

.detail-list{
    display:grid;
    gap:0;
}

.detail-list>div{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
}

.detail-list>div:last-child{
    border-bottom:0;
}

.detail-list span{
    color:var(--muted);
    font-size:12px;
}

.detail-list strong{
    font-size:12px;
    text-align:right;
}


/* ALERT */

.alert{
    padding:12px 14px;
    border-radius:11px;
    margin:12px 0;
    font-size:12px;
}

.alert.danger{
    background:rgba(255,107,114,.09);
    color:#ff8f95;
    border:1px solid rgba(255,107,114,.22);
}

.alert.success{
    background:rgba(44,207,150,.09);
    color:#5ce2b2;
    border:1px solid rgba(44,207,150,.22);
}


/* LOGIN */

.login-body{
    min-height:100vh;
    background:
        radial-gradient(
            circle at 18% 15%,
            rgba(47,125,246,.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(40,94,190,.12),
            transparent 32%
        ),
        var(--bg);
    display:grid;
    place-items:center;
    padding:26px;
}

.login-shell{
    width:min(1080px,100%);
    display:grid;
    grid-template-columns:
        minmax(380px,.92fr)
        minmax(420px,1.08fr);
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:28px;
    overflow:hidden;
    box-shadow:
        0 34px 90px
        rgba(0,0,0,.35);
}

.login-panel{
    padding:44px;
}

.login-brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:34px;
}

.login-kicker{
    color:var(--blue2);
    margin-bottom:9px;
}

.login-panel h1{
    font-size:34px;
    line-height:1.08;
    letter-spacing:-1.1px;
    margin:0 0 12px;
}

.login-copy{
    color:var(--muted);
    line-height:1.65;
    margin:0 0 26px;
}

.login-form{
    display:grid;
    gap:14px;
}

.login-form label{
    display:grid;
    gap:7px;
    font-size:11px;
    color:var(--muted);
    font-weight:800;
}

.login-form input{
    width:100%;
    border:1px solid var(--line);
    background:var(--input);
    color:var(--text);
    border-radius:11px;
    padding:13px;
    outline:none;
}

.login-form input:focus{
    border-color:var(--blue);
    box-shadow:
        0 0 0 3px
        rgba(47,125,246,.12);
}

.login-separator{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--muted);
    font-size:10px;
    margin:21px 0;
}

.login-separator:before,
.login-separator:after{
    content:"";
    height:1px;
    background:var(--line);
    flex:1;
}

.ms-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    background:var(--panel3);
    border:1px solid var(--line);
    border-radius:11px;
    padding:13px;
    font-weight:800;
    font-size:13px;
}

.ms-button:hover{
    background:var(--hover);
}

.ms-logo{
    width:17px;
    height:17px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2px;
}

.ms-logo i:nth-child(1){
    background:#f35325;
}

.ms-logo i:nth-child(2){
    background:#81bc06;
}

.ms-logo i:nth-child(3){
    background:#05a6f0;
}

.ms-logo i:nth-child(4){
    background:#ffba08;
}

.login-note{
    text-align:center;
    color:var(--muted);
    font-size:10px;
    line-height:1.5;
    margin-top:17px;
}

.login-visual{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
            145deg,
            #0d326e,
            #061b3d 72%
        );
    padding:50px;
    display:flex;
    align-items:flex-end;
    min-height:620px;
}

.visual-orb{
    position:absolute;
    width:430px;
    height:430px;
    border-radius:50%;
    top:-140px;
    right:-130px;
    background:
        radial-gradient(
            circle at 35% 35%,
            rgba(96,166,255,.7),
            rgba(47,125,246,.11) 48%,
            transparent 69%
        );
}

.visual-copy{
    position:relative;
    z-index:2;
    color:#fff;
}

.visual-copy>span{
    font-size:10px;
    font-weight:900;
    letter-spacing:.16em;
    color:#9fc3ff;
}

.visual-copy h2{
    font-size:32px;
    letter-spacing:-.8px;
    line-height:1.14;
    margin:10px 0 22px;
}

.visual-copy ul{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:12px;
    color:#c5d6f3;
    font-size:13px;
}

.visual-copy li:before{
    content:"✓";
    color:#5de3b5;
    margin-right:9px;
    font-weight:900;
}

.login-theme{
    position:fixed;
    top:20px;
    right:20px;
    border:1px solid var(--line);
    background:var(--panel);
    color:var(--text);
    width:40px;
    height:40px;
    border-radius:12px;
    cursor:pointer;
}


/* RESPONSIVE */

@media(max-width:1050px){

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

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

    .license-meta{
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }

    .admin-grid,
    .profile-grid{
        grid-template-columns:
            1fr;
    }

    .sticky-panel{
        position:static;
    }

    .login-shell{
        grid-template-columns:1fr;
        max-width:560px;
    }

    .login-visual{
        display:none;
    }
}


@media(max-width:820px){

    .sidebar{
        transform:translateX(-100%);
        transition:.22s;
    }

    .nav-open .sidebar{
        transform:translateX(0);
        box-shadow:
            25px 0 70px
            rgba(0,0,0,.35);
    }

    .portal-stage{
        margin-left:0;
    }

    .mobile-topbar{
        display:flex;
        position:sticky;
        top:0;
        z-index:30;
        height:66px;
        padding:0 14px;
        align-items:center;
        justify-content:space-between;
        background:rgba(8,19,33,.88);
        backdrop-filter:blur(14px);
        border-bottom:1px solid var(--line);
    }

    html[data-theme="light"]
    .mobile-topbar{
        background:rgba(255,255,255,.9);
    }

    .mobile-topbar strong,
    .mobile-topbar small{
        display:block;
    }

    .mobile-topbar small{
        font-size:10px;
        color:var(--muted);
    }

    .menu-button,
    .icon-button{
        border:1px solid var(--line);
        background:var(--panel);
        color:var(--text);
        width:38px;
        height:38px;
        border-radius:10px;
    }

    .shell{
        padding:22px 14px 44px;
    }

    .hero{
        display:block;
        padding:27px 22px;
    }

    .sync-pill{
        margin-top:20px;
        width:max-content;
    }

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

    .customer-row{
        grid-template-columns:
            44px
            1fr
            70px
            20px;
    }

    .customer-row
    .metric:first-of-type{
        display:none;
    }

    .enterprise-tools{
        flex-wrap:wrap;
    }

    .enterprise-tools input{
        min-width:0;
        flex:1 1 230px;
    }

    .enterprise-tools
    .tool-count{
        margin-left:0;
    }

    .page-head.split{
        display:block;
    }

    .search-box{
        margin-top:14px;
    }

    .search-box input{
        min-width:0;
        flex:1;
    }
}


@media(max-width:560px){

    .stats{
        grid-template-columns:
            1fr 1fr;
    }

    .stats strong{
        font-size:24px;
    }

    .customer-row{
        grid-template-columns:
            40px
            1fr
            54px
            18px;
        padding:13px 12px;
    }

    .customer-main strong{
        font-size:12px;
    }

    .metric strong{
        font-size:14px;
    }

    .license-top{
        display:block;
    }

    .qty{
        text-align:left;
        margin-top:12px;
    }

    .license-meta{
        grid-template-columns:
            1fr 1fr;
    }

    .login-body{
        padding:14px;
    }

    .login-panel{
        padding:28px 22px;
    }

    .login-panel h1{
        font-size:29px;
    }

    .page-head h1{
        font-size:28px;
    }

    .user-row{
        grid-template-columns:
            38px
            1fr;
    }

    .user-actions{
        grid-column:2;
        justify-content:flex-start;
    }
}


/* ========================================================================== */
/* TECHLEAD ION CONTROL CENTER                                                */
/* ========================================================================== */

.ion-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:20px;
}

.ion-warning{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:14px 16px;
    margin:16px 0;
    border:1px solid rgba(255,191,102,.24);
    background:rgba(255,191,102,.08);
    color:var(--amber);
    border-radius:13px;
    font-size:12px;
}

.ion-warning span{
    color:var(--muted);
}

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

.ion-subscription-card{
    padding:20px;
    border:1px solid var(--line);
    background:
        linear-gradient(
            180deg,
            var(--panel),
            var(--panel2)
        );
    border-radius:18px;
    box-shadow:var(--shadow);
}

.ion-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.ion-card-head h3{
    margin:9px 0 4px;
    font-size:17px;
}

.ion-card-head small{
    color:var(--muted);
    font-size:10px;
}

.ion-big-qty{
    text-align:right;
    min-width:85px;
}

.ion-big-qty strong{
    display:block;
    font-size:30px;
    line-height:1;
}

.ion-big-qty span{
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:10px;
}

.ion-summary{
    display:grid;
    grid-template-columns:
        repeat(
            3,
            1fr
        );
    gap:10px;
    border-top:1px solid var(--line);
    margin-top:18px;
    padding-top:15px;
}

.ion-summary span{
    color:var(--muted);
    font-size:10px;
}

.ion-summary strong{
    display:block;
    margin-top:4px;
    color:var(--text);
    font-size:12px;
}

.ion-card-footer{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    border-top:1px solid var(--line);
    margin-top:15px;
    padding-top:13px;
}

.ion-readonly{
    font-size:10px;
    font-weight:800;
    color:var(--muted);
    background:var(--panel3);
    border:1px solid var(--line);
    padding:7px 9px;
    border-radius:8px;
}

.ion-live-card{
    display:grid;
    grid-template-columns:
        repeat(
            6,
            minmax(0,1fr)
        );
    gap:1px;
    border:1px solid var(--line);
    background:var(--line);
    border-radius:16px;
    overflow:hidden;
    margin-bottom:20px;
}

.ion-live-card>div{
    padding:15px;
    background:var(--panel);
    min-width:0;
}

.ion-live-card span,
.ion-live-card strong{
    display:block;
}

.ion-live-card span{
    color:var(--muted);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.ion-live-card strong{
    margin-top:6px;
    font-size:11px;
    overflow-wrap:anywhere;
}

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

.ion-control-panel h2,
.ion-danger-panel h2{
    margin:6px 0 10px;
}

.ion-control-panel p,
.ion-danger-panel p{
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
}

.ion-action-pair{
    display:flex;
    gap:8px;
}

.ion-action-pair form{
    flex:1;
}

.ion-action-pair button{
    width:100%;
}

.ion-danger-panel{
    border:1px solid rgba(255,107,114,.28);
    background:
        linear-gradient(
            180deg,
            rgba(255,107,114,.07),
            var(--panel)
        );
    border-radius:18px;
    padding:21px;
}

.ion-danger-button{
    border:1px solid rgba(255,107,114,.42);
    background:rgba(255,107,114,.13);
    color:#ff8b91;
    padding:12px 14px;
    border-radius:10px;
    font-weight:900;
    cursor:pointer;
}

.ion-danger-button:hover{
    background:rgba(255,107,114,.2);
}

.ion-table-wrap{
    overflow:auto;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--panel);
}

.ion-table{
    width:100%;
    border-collapse:collapse;
    min-width:780px;
}

.ion-table th{
    color:var(--muted);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.1em;
    text-align:left;
    padding:12px 14px;
    border-bottom:1px solid var(--line);
}

.ion-table td{
    padding:13px 14px;
    font-size:11px;
    border-bottom:1px solid var(--line);
}

.ion-table tbody tr:last-child td{
    border-bottom:0;
}

.ion-table tbody tr:hover{
    background:var(--hover);
}

.ion-status{
    display:inline-flex;
    padding:5px 7px;
    background:var(--panel3);
    border:1px solid var(--line);
    border-radius:7px;
    font-size:9px;
    font-weight:900;
}

.ion-inline-form{
    display:flex;
    gap:6px;
    min-width:230px;
}

.ion-inline-form input{
    min-width:100px;
    width:110px;
    border:1px solid var(--line);
    background:var(--input);
    color:var(--text);
    padding:7px 8px;
    border-radius:8px;
    font-size:10px;
}

.ion-permission-user{
    display:block;
    padding:12px;
    border:1px solid transparent;
    border-bottom-color:var(--line);
}

.ion-permission-user:hover{
    background:var(--hover);
    border-radius:10px;
}

.ion-permission-user strong,
.ion-permission-user span{
    display:block;
}

.ion-permission-user span{
    color:var(--muted);
    font-size:10px;
    margin-top:3px;
}

.ion-permission-list{
    display:grid;
    gap:8px;
    margin-bottom:16px;
}

.ion-permission-item{
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-start;
    gap:11px!important;
    padding:11px;
    border:1px solid var(--line);
    background:var(--panel2);
    border-radius:11px;
    color:var(--text)!important;
}

.ion-permission-item input{
    width:auto!important;
    margin-top:2px;
}

.ion-permission-item strong,
.ion-permission-item small{
    display:block;
}

.ion-permission-item small{
    margin-top:3px;
    color:var(--muted);
    font-size:10px;
}

.ion-manage-button{
    margin-left:auto;
    white-space:nowrap;
}

code{
    background:var(--panel3);
    color:var(--blue2);
    border:1px solid var(--line);
    border-radius:6px;
    padding:2px 5px;
    font-size:11px;
}

@media(max-width:1100px){

    .ion-live-card{
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }

}

@media(max-width:850px){

    .ion-subscription-grid,
    .ion-control-grid{
        grid-template-columns:1fr;
    }

    .ion-live-card{
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }

    .ion-manage-button{
        margin-left:0;
        margin-top:14px;
    }

    .customer-hero{
        flex-wrap:wrap;
    }

}

@media(max-width:520px){

    .ion-summary{
        grid-template-columns:1fr;
    }

    .ion-live-card{
        grid-template-columns:1fr 1fr;
    }

}


/* TECHLEAD_DASHBOARD_FINAL_V3 */

.tl-dashboard-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:20px;
}

.tl-dashboard-head h1{
    margin:5px 0;
    font-size:30px;
    letter-spacing:-.7px;
}

.tl-dashboard-head p{
    margin:0;
    color:var(--muted);
    font-size:12px;
}

.tl-live-status{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 13px;
    border:1px solid var(--line);
    background:var(--panel);
    border-radius:12px;
}

.tl-live-status strong,
.tl-live-status small{
    display:block;
}

.tl-live-status strong{
    font-size:10px;
}

.tl-live-status small{
    color:var(--muted);
    font-size:9px;
}

.tl-live-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--green);
    box-shadow:
        0 0 0 5px
        rgba(44,207,150,.10);
}


.tl-kpi-grid{
    display:grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );
    gap:12px;
    margin-bottom:14px;
}

.tl-kpi-grid article{
    padding:18px;
    border:1px solid var(--line);
    border-radius:16px;
    background:
        linear-gradient(
            145deg,
            var(--panel),
            var(--panel2)
        );
    box-shadow:var(--shadow);
}

.tl-kpi-grid span,
.tl-kpi-grid strong,
.tl-kpi-grid small{
    display:block;
}

.tl-kpi-grid span{
    color:var(--muted);
    font-size:9px;
}

.tl-kpi-grid strong{
    margin:4px 0;
    font-size:25px;
}

.tl-kpi-grid small{
    color:var(--muted);
    font-size:8px;
}


.tl-dashboard-grid{
    display:grid;
    grid-template-columns:
        1.35fr
        .65fr;
    gap:14px;
    margin-bottom:14px;
}

.tl-widget{
    padding:17px;
    border:1px solid var(--line);
    border-radius:16px;
    background:
        linear-gradient(
            180deg,
            var(--panel),
            var(--panel2)
        );
    box-shadow:var(--shadow);
}

.tl-widget>header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}

.tl-widget>header h2{
    margin:0;
    font-size:13px;
}

.tl-widget>header small{
    display:block;
    color:var(--muted);
    font-size:8px;
    margin-top:3px;
}


.tl-chart{
    height:225px;
}

.tl-chart svg{
    width:100%;
    height:100%;
}

.tl-chart line{
    stroke:var(--line);
    stroke-width:1;
}

.tl-chart polyline{
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.tl-line-blue{
    stroke:#2484ff;
    stroke-width:4;
}

.tl-line-purple{
    stroke:#925df7;
    stroke-width:3;
}

.tl-chart-legend{
    display:flex;
    gap:14px;
    color:var(--muted);
    font-size:8px;
}

.tl-chart-legend span{
    display:flex;
    align-items:center;
    gap:5px;
}

.tl-chart-legend i{
    width:7px;
    height:7px;
    border-radius:50%;
}

.tl-chart-legend .blue{
    background:#2484ff;
}

.tl-chart-legend .purple{
    background:#925df7;
}


.tl-provider-list{
    display:grid;
    gap:13px;
}

.tl-provider-list>div{
    display:grid;
    grid-template-columns:
        1fr
        auto;
    gap:5px 10px;
}

.tl-provider-list strong,
.tl-provider-list small{
    display:block;
}

.tl-provider-list strong{
    font-size:10px;
}

.tl-provider-list small{
    margin-top:2px;
    color:var(--muted);
    font-size:8px;
}

.tl-provider-list b{
    font-size:11px;
}

.tl-progress{
    grid-column:1 / -1;
    height:5px;
    border-radius:999px;
    background:var(--panel3);
    overflow:hidden;
}

.tl-progress i{
    display:block;
    height:100%;
    border-radius:inherit;
    background:
        linear-gradient(
            90deg,
            #217df0,
            #925df7
        );
}


.tl-health{
    display:grid;
}

.tl-health>div{
    display:grid;
    grid-template-columns:
        9px
        1fr
        auto;
    gap:10px;
    align-items:center;
    padding:11px 0;
    border-bottom:1px solid var(--line);
}

.tl-health>div:last-child{
    border-bottom:0;
}

.tl-health p{
    margin:0;
}

.tl-health strong,
.tl-health small{
    display:block;
}

.tl-health strong{
    font-size:10px;
}

.tl-health small{
    margin-top:2px;
    color:var(--muted);
    font-size:8px;
}

.tl-health b{
    color:var(--green);
    font-size:9px;
}


.tl-bars{
    display:grid;
    gap:11px;
}

.tl-bars>div{
    display:grid;
    grid-template-columns:
        minmax(150px,240px)
        1fr
        35px;
    gap:11px;
    align-items:center;
}

.tl-bars a{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9px;
    font-weight:750;
}

.tl-bars span{
    height:8px;
    border-radius:999px;
    background:var(--panel3);
    overflow:hidden;
}

.tl-bars i{
    display:block;
    height:100%;
    border-radius:inherit;
    background:
        linear-gradient(
            90deg,
            #217df0,
            #398ffc
        );
}

.tl-bars b{
    text-align:right;
    font-size:9px;
}


.tl-license-widget{
    margin-top:14px;
}

.tl-table-tools{
    display:flex;
    gap:7px;
}

.tl-table-tools input,
.tl-table-tools select{
    padding:8px 9px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--input);
    color:var(--text);
    font-size:9px;
}

.tl-table-wrap{
    overflow:auto;
    border:1px solid var(--line);
    border-radius:11px;
}

.tl-table{
    width:100%;
    min-width:850px;
    border-collapse:collapse;
}

.tl-table th{
    padding:9px 11px;
    text-align:left;
    color:var(--muted);
    border-bottom:1px solid var(--line);
    font-size:8px;
    text-transform:uppercase;
}

.tl-table td{
    padding:11px;
    border-bottom:1px solid var(--line);
    font-size:9px;
}

.tl-table tbody tr:last-child td{
    border-bottom:0;
}

.tl-table tbody tr:hover{
    background:var(--hover);
}

.tl-provider,
.tl-state{
    display:inline-flex;
    padding:5px 7px;
    border-radius:7px;
    font-size:8px;
    font-weight:800;
}

.tl-provider{
    color:#91bdff;
    background:rgba(36,132,255,.10);
    border:1px solid rgba(36,132,255,.18);
}

.tl-state{
    color:#55deb0;
    background:rgba(44,207,150,.08);
    border:1px solid rgba(44,207,150,.18);
}

.tl-qty{
    font-size:13px!important;
    font-weight:850;
}

.tl-actions{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.tl-actions a{
    padding:5px 7px;
    border-radius:7px;
    color:#c8ddff;
    background:rgba(36,132,255,.10);
    border:1px solid rgba(36,132,255,.20);
    font-size:8px;
    font-weight:800;
}

.tl-actions a.upgrade{
    color:#d2c2ff;
    background:rgba(146,93,247,.10);
    border-color:rgba(146,93,247,.24);
}

.tl-actions a.subtle{
    color:var(--muted);
    background:var(--panel3);
    border-color:var(--line);
}


@media(max-width:1050px){

    .tl-dashboard-grid{
        grid-template-columns:1fr;
    }

    .tl-kpi-grid{
        grid-template-columns:
            1fr
            1fr;
    }

}


@media(max-width:650px){

    .tl-dashboard-head{
        display:block;
    }

    .tl-live-status{
        margin-top:14px;
        width:max-content;
        max-width:100%;
    }

    .tl-kpi-grid{
        grid-template-columns:
            1fr
            1fr;
    }

    .tl-table-tools{
        margin-top:10px;
        display:grid;
    }

    .tl-widget>header{
        align-items:flex-start;
        flex-direction:column;
    }

}


/* ========================================================================== */
/* TECHLEAD_LICENSEMANAGER_CENTER_V1                                          */
/* ========================================================================== */

.lm-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    margin-bottom:20px;
}

.lm-head h1{
    margin:5px 0 5px;
    font-size:30px;
    letter-spacing:-.7px;
}

.lm-head p{
    margin:0;
    color:var(--muted);
    font-size:11px;
}

.lm-graph-status{
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px 13px;
    border:1px solid var(--line);
    border-radius:13px;
    background:var(--panel);
}

.lm-graph-status strong,
.lm-graph-status small{
    display:block;
}

.lm-graph-status strong{
    font-size:10px;
}

.lm-graph-status small{
    margin-top:2px;
    color:var(--muted);
    font-size:8px;
}

.lm-online{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#2ed39a;
    box-shadow:
        0 0 0 5px
        rgba(46,211,154,.10);
}

.lm-status-good{
    margin-left:10px;
    padding:5px 7px;
    color:#5be3b4;
    border:1px solid rgba(46,211,154,.18);
    border-radius:7px;
    background:rgba(46,211,154,.07);
    font-size:8px;
    font-weight:850;
}

.lm-alert{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
    padding:12px 14px;
    border-radius:11px;
    border:1px solid var(--line);
    background:var(--panel);
    font-size:10px;
}

.lm-alert strong{
    white-space:nowrap;
}

.lm-alert span{
    color:var(--muted);
}

.lm-alert.success{
    border-color:rgba(46,211,154,.25);
    background:rgba(46,211,154,.055);
}

.lm-alert.error{
    border-color:rgba(244,93,93,.25);
    background:rgba(244,93,93,.055);
}

.lm-kpis{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
}

.lm-kpis article{
    padding:17px;
    border:1px solid var(--line);
    border-radius:15px;
    background:
        linear-gradient(
            145deg,
            var(--panel),
            var(--panel2)
        );
    box-shadow:var(--shadow);
}

.lm-kpis span,
.lm-kpis strong,
.lm-kpis small{
    display:block;
}

.lm-kpis span{
    color:var(--muted);
    font-size:9px;
    text-transform:uppercase;
}

.lm-kpis strong{
    margin:5px 0;
    font-size:26px;
}

.lm-kpis small{
    color:var(--muted);
    font-size:8px;
}

.lm-panel{
    margin-bottom:14px;
    padding:17px;
    border:1px solid var(--line);
    border-radius:16px;
    background:
        linear-gradient(
            180deg,
            var(--panel),
            var(--panel2)
        );
    box-shadow:var(--shadow);
}

.lm-panel>header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.lm-panel>header h2{
    margin:0;
    font-size:13px;
}

.lm-panel>header p{
    margin:3px 0 0;
    color:var(--muted);
    font-size:8px;
}

.lm-panel>header input{
    width:240px;
    padding:8px 10px;
    color:var(--text);
    background:var(--input);
    border:1px solid var(--line);
    border-radius:8px;
}

.lm-table-wrap{
    overflow:auto;
    border:1px solid var(--line);
    border-radius:11px;
}

.lm-table{
    width:100%;
    min-width:950px;
    border-collapse:collapse;
}

.lm-table th{
    padding:9px 11px;
    text-align:left;
    color:var(--muted);
    border-bottom:1px solid var(--line);
    background:rgba(0,0,0,.08);
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.lm-table td{
    padding:11px;
    border-bottom:1px solid var(--line);
    vertical-align:middle;
    font-size:9px;
}

.lm-table tbody tr:last-child td{
    border-bottom:0;
}

.lm-table tbody tr:hover{
    background:var(--hover);
}

.lm-table td strong,
.lm-table td small{
    display:block;
}

.lm-table td small{
    margin-top:3px;
    color:var(--muted);
    font-size:8px;
}

.lm-user-active,
.lm-user-disabled,
.lm-mail-status{
    display:inline-flex;
    padding:5px 7px;
    border-radius:7px;
    font-size:8px;
    font-weight:850;
}

.lm-user-active,
.lm-mail-status.success{
    color:#5be3b4;
    background:rgba(46,211,154,.07);
    border:1px solid rgba(46,211,154,.18);
}

.lm-user-disabled{
    color:var(--muted);
    background:var(--panel3);
    border:1px solid var(--line);
}

.lm-mail-status.error{
    color:#ff9494;
    background:rgba(244,93,93,.08);
    border:1px solid rgba(244,93,93,.20);
}

.lm-mail-status.never{
    color:#f3c56d;
    background:rgba(245,189,88,.07);
    border:1px solid rgba(245,189,88,.18);
}

.lm-error-text{
    max-width:230px;
}

.lm-actions{
    display:flex;
    align-items:center;
    gap:5px;
}

.lm-actions form{
    margin:0;
}

.lm-actions button,
.lm-actions a,
.lm-test-form button{
    display:inline-flex;
    min-height:29px;
    align-items:center;
    justify-content:center;
    padding:6px 9px;
    color:#cce0ff;
    background:rgba(45,127,249,.10);
    border:1px solid rgba(45,127,249,.22);
    border-radius:7px;
    cursor:pointer;
    font-size:8px;
    font-weight:850;
}

.lm-actions button:hover,
.lm-actions a:hover,
.lm-test-form button:hover{
    background:rgba(45,127,249,.18);
}

.lm-actions button:disabled{
    cursor:not-allowed;
    opacity:.4;
}

.lm-actions a.secondary{
    color:var(--muted);
    background:var(--panel3);
    border-color:var(--line);
}

.lm-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.lm-test-form{
    display:grid;
    gap:12px;
}

.lm-test-form label span{
    display:block;
    margin-bottom:5px;
    color:var(--muted);
    font-size:9px;
}

.lm-test-form input{
    width:100%;
    padding:10px;
    color:var(--text);
    background:var(--input);
    border:1px solid var(--line);
    border-radius:8px;
}

.lm-test-form button{
    width:max-content;
}

.lm-config-list{
    display:grid;
}

.lm-config-list>div{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:10px 0;
    border-bottom:1px solid var(--line);
}

.lm-config-list>div:last-child{
    border-bottom:0;
}

.lm-config-list span{
    color:var(--muted);
    font-size:9px;
}

.lm-config-list strong{
    font-size:9px;
}

@media(max-width:900px){

    .lm-head{
        display:block;
    }

    .lm-graph-status{
        width:max-content;
        max-width:100%;
        margin-top:14px;
    }

    .lm-kpis{
        grid-template-columns:
            1fr 1fr;
    }

    .lm-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:560px){

    .lm-kpis{
        grid-template-columns:
            1fr 1fr;
    }

    .lm-panel>header{
        align-items:flex-start;
        flex-direction:column;
    }

    .lm-panel>header input{
        width:100%;
    }

}


/* ========================================================================== */
/* TECHLEAD_COMMERCIAL_ENGINE_V1                                              */
/* ========================================================================== */

.commercial-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    margin-bottom:18px;
}

.commercial-head h1{
    margin:4px 0;
    font-size:29px;
    letter-spacing:-.6px;
}

.commercial-head p{
    margin:0;
    color:var(--muted);
    font-size:10px;
}

.commercial-gates{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.gate-off{
    padding:7px 9px;
    border:1px solid rgba(245,189,88,.2);
    border-radius:8px;
    background:rgba(245,189,88,.07);
    color:#efc56d;
    font-size:8px;
    font-weight:850;
}

.commercial-alert{
    margin-bottom:14px;
    padding:13px 15px;
    border:1px solid rgba(45,127,249,.22);
    border-radius:11px;
    background:rgba(45,127,249,.07);
    font-size:10px;
}

.commercial-kpis{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:11px;
    margin-bottom:14px;
}

.commercial-kpis article{
    padding:16px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--panel);
}

.commercial-kpis span,
.commercial-kpis strong{
    display:block;
}

.commercial-kpis span{
    color:var(--muted);
    font-size:8px;
    text-transform:uppercase;
}

.commercial-kpis strong{
    margin-top:6px;
    font-size:24px;
}

.commercial-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.commercial-panel{
    margin-bottom:14px;
    padding:17px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--panel);
}

.commercial-panel h2{
    margin:0 0 14px;
    font-size:14px;
}

.commercial-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}

.commercial-panel-head h2{
    margin:0;
}

.commercial-form{
    display:grid;
    gap:11px;
}

.commercial-form label>span{
    display:block;
    margin-bottom:5px;
    color:var(--muted);
    font-size:9px;
}

.commercial-form input,
.commercial-form select,
.commercial-search input,
.commercial-search select,
.commercial-panel select{
    width:100%;
    padding:9px 10px;
    color:var(--text);
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--input);
}

.commercial-check{
    display:flex!important;
    align-items:center;
    gap:8px;
}

.commercial-check input{
    width:auto!important;
}

.commercial-check span{
    margin:0!important;
}

.commercial-panel button,
.commercial-primary{
    padding:8px 11px;
    color:#d8e9ff;
    border:1px solid rgba(45,127,249,.25);
    border-radius:8px;
    background:rgba(45,127,249,.12);
    cursor:pointer;
    font-size:9px;
    font-weight:800;
}

.commercial-panel button:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.commercial-search{
    display:flex;
    gap:8px;
    margin-bottom:13px;
}

.commercial-policy-summary{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-top:13px;
    color:var(--muted);
    font-size:9px;
}

.commercial-policy-summary strong{
    color:var(--text);
}

.commercial-table-wrap{
    overflow:auto;
    border:1px solid var(--line);
    border-radius:10px;
}

.commercial-table-wrap table{
    width:100%;
    min-width:950px;
    border-collapse:collapse;
}

.commercial-table-wrap th{
    padding:9px 10px;
    text-align:left;
    color:var(--muted);
    border-bottom:1px solid var(--line);
    font-size:8px;
    text-transform:uppercase;
}

.commercial-table-wrap td{
    padding:10px;
    border-bottom:1px solid var(--line);
    font-size:9px;
    vertical-align:middle;
}

.commercial-table-wrap td small{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:7px;
}

.commercial-inline{
    display:flex;
    align-items:center;
    gap:6px;
}

.commercial-inline input[type=number]{
    width:70px;
}

.commercial-quote{
    max-width:720px;
    padding:25px;
    border:1px solid var(--line);
    border-radius:17px;
    background:var(--panel);
}

.commercial-quote h2{
    margin:0 0 6px;
}

.commercial-quote>p{
    color:var(--muted);
}

.quote-lines{
    margin:22px 0;
    border:1px solid var(--line);
    border-radius:11px;
    overflow:hidden;
}

.quote-lines>div{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:12px 14px;
    border-bottom:1px solid var(--line);
}

.quote-lines>div:last-child{
    border-bottom:0;
}

.quote-lines span{
    color:var(--muted);
    font-size:10px;
}

.quote-lines strong{
    font-size:11px;
}

.quote-total{
    background:rgba(45,127,249,.06);
}

.quote-total strong{
    font-size:16px;
}

.commercial-note{
    margin:16px 0;
    padding:13px;
    color:var(--muted);
    border:1px solid var(--line);
    border-radius:9px;
    font-size:9px;
    line-height:1.6;
}

@media(max-width:850px){

    .commercial-grid{
        grid-template-columns:1fr;
    }

    .commercial-kpis{
        grid-template-columns:1fr 1fr;
    }

    .commercial-head{
        display:block;
    }

    .commercial-gates{
        margin-top:12px;
    }

    .commercial-search{
        flex-direction:column;
    }
}