:root{
    --ine-bg:#F5F7FA;
    --ine-surface:#FFFFFF;
    --ine-navy:#0B1628;
    --ine-navy-700:#172340;
    --ine-primary:#E96A24;
    --ine-primary-100:#FFF2EB;
    --ine-text:#0B1628;
    --ine-muted:#5A6578;
    --ine-border:#E8ECF2;
    --ine-success:#16A34A;
    --ine-success-100:#E8F9EE;
    --ine-warning:#F59E0B;
    --ine-danger:#DC2626;
    --ine-radius:16px;
    --ine-radius-sm:10px;
    --ine-shadow:0 2px 8px rgba(11,22,40,.05),0 12px 40px rgba(11,22,40,.08);
    --ine-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

* { box-sizing:border-box; }
html { font-size:16px; }
body{
    margin:0; font-family:var(--ine-font); background:var(--ine-bg); color:var(--ine-text);
    line-height:1.55; -webkit-font-smoothing:antialiased;
}

.ine-dashboard{ max-width:1320px; margin:0 auto; padding:24px; }

.ine-header{
    display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px;
    padding-bottom:20px; border-bottom:1px solid var(--ine-border);
}
.ine-eyebrow{ font-size:.72rem; font-weight:800; color:var(--ine-primary); text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; display:block; }
.ine-header h1{ margin:0 0 6px; font-size:2rem; font-weight:800; letter-spacing:-.03em; color:var(--ine-navy); }
.ine-meta{ margin:0; color:var(--ine-muted); font-size:.95rem; font-weight:500; }
.ine-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--ine-success); margin:0 6px; box-shadow:0 0 0 3px var(--ine-success-100); }
.ine-dot.offline{ background:var(--ine-danger); box-shadow:0 0 0 3px #FDE8E8; }

.ine-toolbar{
    display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:28px;
}
.ine-filters{ display:flex; background:var(--ine-surface); border:1px solid var(--ine-border); border-radius:999px; padding:4px; box-shadow:var(--ine-shadow); }
.ine-cargo{
    padding:10px 18px; border-radius:999px; font-weight:600; font-size:.88rem;
    color:var(--ine-muted); text-decoration:none; transition:all .15s;
}
.ine-cargo:hover{ color:var(--ine-navy); }
.ine-cargo.active{ background:var(--ine-navy); color:#fff; }

.ine-state-wrap{ display:flex; flex-direction:column; gap:4px; }
.ine-state-wrap label{ font-size:.72rem; font-weight:700; color:var(--ine-muted); text-transform:uppercase; letter-spacing:.04em; }
.ine-state-wrap select{
    padding:10px 14px; border:1px solid var(--ine-border); border-radius:var(--ine-radius-sm);
    background:#fff; font-size:.95rem; color:var(--ine-text); min-width:120px;
}

.ine-metrics{
    display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-bottom:28px;
}
.ine-metric{
    background:var(--ine-surface); border:1px solid var(--ine-border); border-radius:var(--ine-radius);
    padding:22px 20px; box-shadow:var(--ine-shadow); position:relative; overflow:hidden;
}
.ine-metric::after{
    content:''; position:absolute; top:0; right:0; width:80px; height:80px; border-radius:50%;
    background:radial-gradient(circle,rgba(233,106,36,.08) 0%,rgba(255,255,255,0) 70%);
    transform:translate(25%,-25%);
}
.ine-metric__value{ font-size:1.85rem; font-weight:800; color:var(--ine-navy); letter-spacing:-.02em; }
.ine-metric__label{ font-size:.72rem; font-weight:700; color:var(--ine-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }

.ine-content{ display:grid; grid-template-columns:1.6fr 1fr; gap:24px; }
.ine-main, .ine-charts{ background:var(--ine-surface); border:1px solid var(--ine-border); border-radius:var(--ine-radius); padding:28px; box-shadow:var(--ine-shadow); }
.ine-title{ margin:0 0 6px; font-size:1.15rem; font-weight:700; color:var(--ine-navy); }
.ine-title + p{ color:var(--ine-muted); font-size:.88rem; margin:0 0 22px; }

.ine-progress{ margin-bottom:24px; }
.ine-progress__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.ine-progress__value{ font-size:1.6rem; font-weight:800; color:var(--ine-primary); }
.ine-progress__label{ font-size:.85rem; color:var(--ine-muted); font-weight:500; }
.ine-progress__bar{ height:10px; background:#EDF0F5; border-radius:5px; overflow:hidden; }
.ine-progress__bar div{ height:100%; background:linear-gradient(90deg,var(--ine-primary),#FF8A4C); border-radius:5px; transition:width .6s ease; }

.ine-ranking{ display:flex; flex-direction:column; gap:14px; }
.ine-card{
    display:grid; grid-template-columns:64px 1fr 90px; align-items:center; gap:16px;
    padding:18px; border:1px solid var(--ine-border); border-radius:var(--ine-radius-sm);
    transition:transform .15s,box-shadow .15s;
}
.ine-card:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(11,22,40,.08); border-color:transparent; }
.ine-rank{ font-size:.85rem; font-weight:800; color:var(--ine-muted); text-align:center; width:24px; }
.ine-photo{ width:52px; height:52px; border-radius:50%; object-fit:cover; background:#E8ECF2; }
.ine-info{ min-width:0; }
.ine-info h3{ margin:0 0 4px; font-size:1rem; font-weight:700; color:var(--ine-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ine-party{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ine-muted); margin:0; }
.ine-party strong{ font-weight:700; color:var(--ine-text); }
.ine-badge{
    padding:3px 8px; border-radius:999px; background:var(--ine-success-100); color:var(--ine-success);
    font-size:.65rem; font-weight:800; text-transform:uppercase;
}
.ine-bar-wrap{ height:6px; background:#EDF0F5; border-radius:3px; overflow:hidden; margin-top:10px; }
.ine-bar{ height:100%; background:var(--ine-primary); border-radius:3px; transition:width .4s; }
.ine-votes{ text-align:right; }
.ine-votes strong{ font-size:1.35rem; font-weight:800; color:var(--ine-navy); display:block; }
.ine-votes span{ font-size:.78rem; color:var(--ine-muted); }

.ine-charts h3{ margin:0 0 12px; font-size:.88rem; font-weight:700; color:var(--ine-muted); text-transform:uppercase; letter-spacing:.05em; }
.ine-charts canvas{ margin-bottom:28px; max-height:240px; }

.ine-empty{ padding:40px; text-align:center; color:var(--ine-muted); border:1px dashed var(--ine-border); border-radius:var(--ine-radius); background:#FAFBFC; }

@media (max-width:980px){
    .ine-content{ grid-template-columns:1fr; }
    .ine-metrics{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
    .ine-dashboard{ padding:18px; }
    .ine-header{ flex-direction:column; align-items:flex-start; gap:10px; }
    .ine-metrics{ grid-template-columns:1fr 1fr; }
    .ine-card{ grid-template-columns:64px 1fr; gap:12px; }
    .ine-votes{ grid-column:span 2; text-align:left; padding-left:76px; }
    .ine-cargo{ padding:8px 12px; font-size:.8rem; }
}