*{box-sizing:border-box}
body{margin:0;font-family:Arial,"Segoe UI",sans-serif;background:#f1f6ff;color:#061329}
.app{display:flex;min-height:100vh}
.sidebar{width:247px;flex-shrink:0;background:linear-gradient(180deg,#061223,#09162d);color:white;display:flex;flex-direction:column;padding:32px 17px}
.brand{padding:0 11px;margin-bottom:30px}
.brand strong{display:block;font-size:20px}
.brand small{display:block;color:#7999bc;font-size:11px;margin-top:5px}
.sidebar nav{display:flex;flex-direction:column;gap:4px}
.nav{display:block;width:100%;padding:14px;border:0;border-radius:12px;background:transparent;color:#91b5dd;text-align:left;font-size:13px;text-decoration:none}
.nav.active{background:linear-gradient(90deg,#1664f5,#00b9dc);color:white;font-weight:bold;box-shadow:0 6px 14px #0868b955}
.nav.disabled{opacity:.7;cursor:default}
.sidebar-bottom{margin-top:auto}
.content{flex:1;min-width:0;padding:32px 36px 45px;max-width:1500px}
.control-label{display:inline-block;background:linear-gradient(90deg,#1765ff,#00bedc);color:white;border-radius:25px;padding:9px 15px;font-size:12px;font-weight:bold}
h1{font-size:30px;margin:12px 0}
header p{color:#6880a5;font-size:14px;margin:0 0 26px}
.demo-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;background:white;border:1px solid #dce9fa;border-radius:16px;padding:16px 20px;margin-bottom:20px}
.demo-controls strong{display:block;font-size:14px}
.demo-controls small{display:block;color:#7189aa;margin-top:5px}
.scenario-buttons{display:flex;flex-wrap:wrap;gap:8px}
.scenario-buttons button{background:#f1f6ff;border:1px solid #cbdcf2;border-radius:9px;padding:10px 13px;color:#18365b;cursor:pointer;font-size:12px}
.scenario-buttons button.active{background:#087de9;color:white;border-color:#087de9}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
.metric{background:#fff;border:1px solid #d9e8fb;border-radius:22px;padding:21px 20px;min-height:130px;box-shadow:0 9px 18px #183a6415}
.metric.highlight{background:linear-gradient(110deg,#fff,#edf8ff)}
.metric-label{font-size:11px;font-weight:bold;color:#6882ab}
.metric-value{font-size:25px;font-weight:bold;margin:11px 0;color:#061329}
.metric-note{font-size:12px;color:#6882ab}
.main-grid{display:grid;grid-template-columns:1.05fr 1.9fr;gap:18px}
.forecast-card{background:linear-gradient(115deg,#081d42,#075b8b);color:white;border:1px solid #2483b6;border-radius:23px;padding:24px;box-shadow:0 12px 22px #102b4d33}
.forecast-card h2,.action-card h2,.health-card h2{margin:0 0 17px;font-size:19px}
.forecast-card p{font-size:13px;color:#d0e8ff;line-height:1.4}
.forecast-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0}
.forecast-values small{display:block;color:#b8dcf8;font-size:11px;margin-bottom:8px}
.forecast-values strong{display:block;font-size:21px}
.forecast-note{font-size:12px!important;margin-top:18px}
.action-card{background:#fff;border:1px solid #d8e8fa;border-radius:23px;padding:24px;box-shadow:0 9px 20px #15395e18}
.action-badge{display:inline-block;background:#ffedf0;color:#d51c3c;border-radius:20px;padding:7px 12px;font-size:11px;font-weight:bold;margin-bottom:15px}
.action-title{font-size:22px;font-weight:bold;margin:0 0 16px}
.action-card p{font-size:13px;line-height:1.5;color:#5c7396}
.action-next{color:#173052!important}
.health-card{background:linear-gradient(100deg,#fff,#eaf7ff);border:1px solid #c8e7ff;border-radius:23px;padding:22px 24px;margin-top:24px;box-shadow:0 9px 20px #15395e10}
.health-card h2{font-size:16px;margin-bottom:10px}
.health-badge{display:inline-block;background:#fff4d8;color:#aa6600;padding:6px 12px;border-radius:20px;font-size:11px;font-weight:bold}
.health-badge.stable{background:#e2f8ec;color:#147747}
.health-badge.high{background:#ffe8ec;color:#bd2342}
.health-card p{font-size:13px;color:#6782a8;margin-bottom:0}
footer{font-size:11px;color:#7187a6;margin-top:35px;line-height:1.6}
@media(max-width:1100px){.metrics{grid-template-columns:repeat(2,1fr)}.main-grid{grid-template-columns:1fr}}
@media(max-width:700px){.app{display:block}.sidebar{width:100%;padding:17px}.sidebar nav{display:none}.sidebar-bottom{display:none}.brand{margin-bottom:0}.content{padding:22px 15px}.metrics{grid-template-columns:1fr}.forecast-values strong{font-size:17px}}
/* LIQENTRA P7.6 – DEMO NAVIGATION */
.sidebar button.nav{cursor:pointer;font-family:inherit}
.sidebar button.nav:hover:not(.active){background:#142b49;color:white}
.detail-view{margin-top:12px}
.detail-view[hidden],#overview-view[hidden]{display:none!important}
.detail-heading{font-size:27px;margin:0 0 10px}
.detail-description{font-size:14px;color:#6880a5;margin-bottom:25px}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.detail-panel{background:white;border:1px solid #d8e8fa;border-radius:22px;padding:24px;box-shadow:0 9px 20px #15395e12}
.detail-panel h3{font-size:18px;margin:0 0 16px}
.detail-panel p{font-size:14px;color:#567398;line-height:1.6}
.detail-value{font-size:28px;font-weight:bold;color:#061329}
.detail-list{padding-left:22px;line-height:2;color:#254466;font-size:14px}
.detail-badge{display:inline-block;background:#e9f3ff;color:#1767bf;border-radius:20px;padding:7px 12px;font-size:12px;font-weight:bold}
.detail-bars{display:flex;align-items:flex-end;gap:12px;height:180px;margin-top:25px;border-bottom:1px solid #cbdcf0}
.detail-bar{flex:1;background:linear-gradient(180deg,#08b9dc,#1765f5);border-radius:7px 7px 0 0;min-height:5px}
.detail-caption{font-size:12px;color:#6880a5;margin-top:12px}
@media(max-width:700px){
.sidebar nav{display:flex;flex-direction:row;flex-wrap:wrap;margin-top:15px}
.sidebar button.nav{width:auto;padding:10px}
.detail-grid{grid-template-columns:1fr}
}