.gv7-page{
    padding:18px 18px 24px;
    background:#eef3f8;
    min-height:100%;
    color:#17212b;
}

.gv7-topline{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:10px;
}

.gv7-breadcrumb{
    font-size:13px;
    color:#536471;
    font-weight:700;
}

.gv7-breadcrumb span{
    margin:0 6px;
    color:#8aa0b5;
}

.gv7-topline-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.gv7-gateway-pill{
    height:42px;
    padding:0 15px;
    border-radius:14px;
    background:#f6fbf8;
    border:1px solid #dce9e1;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:700;
    color:#334155;
    box-shadow:0 8px 20px rgba(15,23,42,.03);
}

.gv7-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#1fa463;
}

.gv7-refresh-btn{
    height:42px;
    padding:0 16px;
    border:none;
    border-radius:14px;
    background:#1fa463;
    color:#fff;
    font-weight:800;
    cursor:pointer;
}

.gv7-header{
    margin-bottom:14px;
}

.gv7-title{
    margin:0;
    font-size:28px;
    line-height:1.04;
    font-weight:800;
    letter-spacing:-0.02em;
    color:#101828;
}

.gv7-subtitle{
    margin:5px 0 0;
    font-size:14px;
    color:#667085;
}

.gv7-error{
    margin-bottom:14px;
    padding:12px 14px;
    border-radius:14px;
    background:#fff4e5;
    color:#8a5a00;
    border:1px solid #f2c98c;
}

.gv7-filter-card,
.gv7-kpi-card,
.gv7-chart-card,
.gv7-side-card,
.gv7-bottom-card{
    background:#ffffff;
    border:1px solid #dde5ee;
    border-radius:20px;
    box-shadow:0 12px 28px rgba(15,23,42,.04);
}

.gv7-filter-card{
    padding:16px;
    margin-bottom:14px;
}

.gv7-filter-grid{
    display:grid;
    grid-template-columns:1fr 1.4fr 1.2fr;
    gap:14px;
}

.gv7-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.gv7-field label{
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#667085;
}

.gv7-field select{
    height:46px;
    border:1px solid #d9e3ec;
    border-radius:14px;
    background:#f9fbfd;
    padding:0 14px;
    font-size:14px;
    color:#1f2937;
    outline:none;
}

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

.gv7-kpi-card{
    padding:16px 16px 14px;
    min-height:138px;
    display:flex;
    flex-direction:column;
}

.gv7-kpi-label{
    font-size:11px;
    font-weight:800;
    color:#667085;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:10px;
}

.gv7-kpi-main{
    display:flex;
    align-items:flex-end;
    gap:6px;
    min-height:46px;
}

.gv7-kpi-value{
    font-size:24px;
    line-height:1;
    font-weight:800;
    letter-spacing:-0.03em;
}

.gv7-kpi-green{color:#1fa463;}
.gv7-kpi-gold{color:#c58a00;}
.gv7-kpi-blue{color:#2563eb;}
.gv7-kpi-cyan{color:#0f6fbf;}
.gv7-kpi-orange{color:#e26d2d;}

.gv7-kpi-hint{
    margin-top:6px;
    min-height:18px;
    font-size:12px;
    color:#667085;
}

.gv7-kpi-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:flex-start;
    min-width:96px;
    padding:10px 14px;
    border-radius:999px;
    background:#eef7f1;
    color:#1fa463;
    font-size:13px;
    font-weight:800;
}

.gv7-kpi-badge.is-normal{
    background:#eef7f1;
    color:#1fa463;
}

.gv7-kpi-badge.is-alerta{
    background:#fff6e6;
    color:#c77700;
}

.gv7-kpi-badge.is-critico{
    background:#fff0f0;
    color:#d92d20;
}

.gv7-kpi-spark{
    margin-top:auto;
    height:28px;
    border-radius:14px;
    position:relative;
    overflow:hidden;
    opacity:1;
}

.gv7-kpi-spark::before{
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    top:6px;
    bottom:6px;
    border-radius:12px;
    background-repeat:no-repeat;
    background-size:100% 100%;
    opacity:.95;
}

.gv7-spark-green::before{
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24'>\
<path d='M0 16 C8 6,16 22,24 12 S40 4,48 14 S64 20,72 10 S88 6,100 14' fill='none' stroke='%231fa463' stroke-width='2.2' stroke-linecap='round'/>\
</svg>");
}

.gv7-spark-gold::before{
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24'>\
<path d='M0 14 C10 20,18 6,28 13 S45 21,54 10 S70 7,78 14 S92 18,100 11' fill='none' stroke='%23c58a00' stroke-width='2.2' stroke-linecap='round'/>\
</svg>");
}

.gv7-spark-blue::before{
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24'>\
<path d='M0 15 C9 8,18 16,27 9 S42 18,52 10 S68 5,79 14 S92 18,100 9' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round'/>\
</svg>");
}

.gv7-spark-cyan::before{
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24'>\
<path d='M0 16 C8 10,15 20,24 8 S40 5,50 15 S66 22,76 10 S90 6,100 14' fill='none' stroke='%230f6fbf' stroke-width='2.2' stroke-linecap='round'/>\
</svg>");
}

.gv7-spark-orange::before{
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24'>\
<path d='M0 14 C10 8,20 19,30 10 S44 5,56 14 S70 18,82 9 S94 6,100 13' fill='none' stroke='%23e26d2d' stroke-width='2.2' stroke-linecap='round'/>\
</svg>");
}

.gv7-main-grid{
    display:grid;
    grid-template-columns:minmax(0,2.45fr) minmax(300px,.85fr);
    gap:16px;
    align-items:start;
}

.gv7-chart-card{
    overflow:hidden;
    padding:0;
}

.gv7-tabs{
    display:flex;
    gap:10px;
    padding:16px 16px 0;
    flex-wrap:wrap;
}

.gv7-tab{
    border:none;
    background:#edf2f7;
    color:#475467;
    padding:11px 16px;
    border-radius:14px;
    font-weight:800;
    cursor:pointer;
    font-size:14px;
}

.gv7-tab.active{
    background:#1fa463;
    color:#fff;
}

.gv7-tab-panel{
    display:none;
    padding:16px;
}

.gv7-tab-panel.active{
    display:block;
}

.gv7-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    margin-bottom:10px;
}

.gv7-panel-title{
    font-size:16px;
    font-weight:800;
    color:#101828;
}

.gv7-panel-subtitle{
    margin-top:3px;
    font-size:12px;
    color:#667085;
}

.gv7-wave-tools{
    display:flex;
    gap:8px;
    margin-bottom:10px;
}

.gv7-tool-pill{
    width:42px;
    height:18px;
    border-radius:999px;
    background:#eef2f6;
    border:1px solid #dfe6ed;
}

.gv7-tool-pill.active{
    background:#e7f5ec;
    border-color:#cce7d5;
}

.gv7-chart-wrap{
    height:350px;
    background:#fbfdff;
    border:1px solid #e7edf3;
    border-radius:18px;
    padding:12px;
    position:relative;
}

canvas{
    display:block;
    max-width:100% !important;
}

.gv7-chart-footer{
    margin-top:10px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:#667085;
    font-size:12px;
    padding:0 4px;
}

.gv7-table-wrap{
    overflow:auto;
    background:#fbfdff;
    border:1px solid #e7edf3;
    border-radius:18px;
}

.gv7-table{
    width:100%;
    min-width:820px;
    border-collapse:collapse;
}

.gv7-table th,
.gv7-table td{
    padding:10px 8px;
    text-align:left;
    border-bottom:1px solid #edf2f7;
    font-size:12px;
}

.gv7-table th{
    background:#f8fafc;
    font-weight:800;
    color:#475467;
}

.gv7-side-card{
    padding:18px;
    position:sticky;
    top:18px;
}

.gv7-side-title{
    font-size:15px;
    font-weight:800;
    color:#101828;
    margin-bottom:6px;
}

.gv7-side-section{
    margin-top:14px;
}

.gv7-side-label{
    font-size:11px;
    font-weight:800;
    color:#667085;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.gv7-side-value{
    margin-top:6px;
    font-size:15px;
    font-weight:800;
    color:#101828;
    word-break:break-word;
    line-height:1.35;
}

.gv7-side-subvalue{
    margin-top:4px;
    font-size:12px;
    color:#667085;
    line-height:1.45;
}

.gv7-side-status{
    margin-top:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 13px;
    border-radius:999px;
    background:#eef7f1;
    color:#1fa463;
    font-weight:800;
    font-size:13px;
}

.gv7-side-status.is-normal{
    background:#eef7f1;
    color:#1fa463;
}

.gv7-side-status.is-alerta{
    background:#fff6e6;
    color:#c77700;
}

.gv7-side-status.is-critico{
    background:#fff0f0;
    color:#d92d20;
}

.gv7-side-divider{
    height:1px;
    background:#edf2f7;
    margin:14px 0;
}

.gv7-side-metric-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:14px;
}

.gv7-side-metric{
    background:#f8fafc;
    border:1px solid #edf2f7;
    border-radius:16px;
    padding:12px;
}

.gv7-side-metric span{
    display:block;
    font-size:11px;
    font-weight:800;
    color:#667085;
    text-transform:uppercase;
}

.gv7-side-metric strong{
    display:block;
    margin-top:6px;
    font-size:16px;
    color:#101828;
}

.gv7-bottom-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:16px;
}

.gv7-bottom-card{
    padding:18px;
}

.gv7-bottom-title{
    font-size:15px;
    font-weight:800;
    color:#101828;
}

.gv7-bottom-subtitle{
    margin-top:3px;
    font-size:12px;
    color:#667085;
    margin-bottom:14px;
}

.gv7-summary-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.gv7-summary-item{
    background:#f8fafc;
    border:1px solid #edf2f7;
    border-radius:16px;
    padding:12px;
}

.gv7-summary-item span{
    display:block;
    font-size:11px;
    font-weight:800;
    color:#667085;
    text-transform:uppercase;
}

.gv7-summary-item strong{
    display:block;
    margin-top:6px;
    font-size:14px;
    color:#101828;
}

.gv7-reading-title{
    font-size:22px;
    line-height:1.08;
    font-weight:800;
    color:#101828;
}

.gv7-reading-text{
    margin-top:10px;
    color:#475467;
    line-height:1.65;
    font-size:14px;
}

.gv7-footer-status{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.gv7-footer-status span{
    padding:8px 12px;
    border-radius:999px;
    background:#ffffff;
    border:1px solid #dde5ee;
    font-size:12px;
    font-weight:700;
    color:#475467;
}

@media (max-width:1400px){
    .gv7-kpi-row{
        grid-template-columns:repeat(3, minmax(0,1fr));
    }
}

@media (max-width:1180px){
    .gv7-main-grid{
        grid-template-columns:1fr;
    }

    .gv7-side-card{
        position:relative;
        top:auto;
    }

    .gv7-bottom-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:920px){
    .gv7-filter-grid{
        grid-template-columns:1fr;
    }

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

@media (max-width:720px){
    .gv7-page{
        padding:12px;
    }

    .gv7-topline{
        flex-direction:column;
        align-items:flex-start;
    }

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

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

    .gv7-chart-wrap{
        height:260px;
    }
}