:root {
  color-scheme: dark;
  --bg: #030605;
  --panel: rgba(8, 14, 11, 0.94);
  --panel-2: rgba(13, 21, 17, 0.96);
  --green: #39dd67;
  --green-soft: rgba(57, 221, 103, 0.15);
  --gold: #f4be3f;
  --red: #ff3f3f;
  --blue: #56c7ff;
  --line: rgba(244, 190, 63, 0.38);
  --muted: #93a49a;
  --white: #f6fff8;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body {
  color: var(--white);
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  background:
    radial-gradient(circle at 50% 35%, rgba(33, 91, 48, 0.13), transparent 34%),
    linear-gradient(rgba(28, 51, 39, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 51, 39, 0.08) 1px, transparent 1px),
    #030605;
  background-size: auto, 38px 38px, 38px 38px, auto;
  overflow: hidden;
}
button { font: inherit; }

.dashboard-shell { min-height: 100vh; height: 100vh; padding: 10px 12px 8px; display: grid; grid-template-rows: 84px minmax(0, 1fr) 42px; gap: 8px; }
.dashboard-header { position: relative; display: grid; grid-template-columns: 270px 1fr 300px; align-items: center; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(0,0,0,.96), rgba(8,14,11,.88), rgba(0,0,0,.96)); }
.dashboard-header::after { content: ""; position: absolute; inset: auto 0 -3px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), var(--green), var(--gold), transparent); box-shadow: 0 0 12px rgba(57,221,103,.5); }
.brand-block { display: flex; align-items: center; gap: 14px; height: 100%; padding-left: 12px; }
.brand-block img { width: 62px; height: 68px; object-fit: contain; filter: drop-shadow(0 0 9px rgba(255,255,255,.13)); }
.brand-block strong { display: block; color: var(--gold); font-size: 24px; letter-spacing: .06em; }
.brand-block span { color: var(--muted); font-size: 11px; letter-spacing: .25em; }
.title-block { text-align: center; line-height: 1; }
.title-block p { margin: 0 0 6px; color: var(--gold); letter-spacing: .22em; font-size: 12px; }
.title-block h1 { margin: 0; font-size: clamp(28px, 2.5vw, 45px); letter-spacing: .06em; text-shadow: 0 0 25px rgba(255,255,255,.12); }
.title-block > span { display: block; margin-top: 7px; color: #95af9d; font-size: 12px; letter-spacing: .35em; }
.live-block { justify-self: end; width: 282px; margin-right: 8px; padding: 8px 12px; border: 1px solid var(--line); background: rgba(5,9,7,.88); clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); }
.live-row, .clock-row { display: flex; align-items: center; gap: 8px; }
.live-row i, .status-pill i, .pulse-label i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 1.4s infinite; }
.live-row strong { color: var(--green); font-size: 13px; }
.signal-bars { display: flex; align-items: end; gap: 3px; margin-left: auto; height: 15px; }
.signal-bars b { width: 4px; background: var(--green); box-shadow: 0 0 5px rgba(57,221,103,.6); }
.signal-bars b:nth-child(1){height:5px}.signal-bars b:nth-child(2){height:8px}.signal-bars b:nth-child(3){height:11px}.signal-bars b:nth-child(4){height:15px}
.clock-row { margin-top: 5px; justify-content: space-between; color: #d5ded8; }
.clock-row time { font-size: 18px; letter-spacing: .08em; }
.clock-row span { color: var(--muted); font-size: 11px; }
#fullscreenBtn { position: absolute; right: 10px; bottom: -31px; z-index: 4; border: 1px solid rgba(57,221,103,.35); color: var(--green); background: #07100b; padding: 4px 9px; font-weight: 700; font-size: 10px; cursor: pointer; }
#fullscreenBtn small { color: var(--muted); }

.dashboard-grid { min-height: 0; display: grid; grid-template-columns: minmax(0, 28fr) minmax(0, 41fr) minmax(0, 31fr); grid-template-rows: minmax(0, 52fr) minmax(0, 48fr); gap: 8px; }
.data-panel { position: relative; min-width: 0; min-height: 0; padding: 12px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(10,17,13,.97), rgba(3,7,5,.96)); overflow: hidden; box-shadow: inset 0 0 35px rgba(57,221,103,.025); }
.data-panel::before, .data-panel::after { content: ""; position: absolute; width: 16px; height: 16px; border-color: var(--gold); pointer-events: none; }
.data-panel::before { left: -1px; top: -1px; border-left: 2px solid; border-top: 2px solid; }
.data-panel::after { right: -1px; bottom: -1px; border-right: 2px solid; border-bottom: 2px solid; }
.panel-heading { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; min-height: 42px; gap: 12px; }
.panel-heading h2 { margin: 0; color: var(--gold); font-size: 15px; letter-spacing: .05em; }
.panel-heading span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.panel-heading.compact { min-height: 35px; }
.status-pill { display: flex !important; align-items: center; gap: 6px; color: var(--green) !important; border: 1px solid rgba(57,221,103,.25); padding: 5px 7px; margin: 0 !important; }
.date-chip { color: var(--gold) !important; margin: 0 !important; border: 1px solid rgba(244,190,63,.25); padding: 5px 7px; }

.province-panel { grid-row: 1 / span 2; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; }
.map-stage { position: relative; min-height: 0; margin: 2px 0 8px; overflow: hidden; background: radial-gradient(circle at 53% 48%, rgba(57,221,103,.1), transparent 45%); }
.map-stage::before { content: "N"; position: absolute; top: 7px; right: 12px; color: var(--gold); font-weight: 700; font-size: 11px; }
.map-stage::after { content: ""; position: absolute; top: 24px; right: 15px; width: 1px; height: 28px; background: var(--gold); box-shadow: 0 0 8px rgba(244,190,63,.7); }
.map-grid-lines { position: absolute; inset: 0; opacity: .18; background: linear-gradient(rgba(57,221,103,.23) 1px,transparent 1px), linear-gradient(90deg,rgba(57,221,103,.23) 1px,transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle,#000,transparent 78%); }
#provinceMapCanvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; }
.map-empty { position: absolute; z-index: 3; inset: 42% 0 auto; text-align: center; color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.map-empty small { letter-spacing: .1em; }
.map-summary { display: grid; grid-template-columns: .75fr 1.4fr .7fr; border: 1px solid rgba(57,221,103,.22); background: rgba(5,14,8,.76); }
.map-summary div { min-width: 0; padding: 8px 9px; border-right: 1px solid rgba(57,221,103,.18); }
.map-summary div:last-child { border: 0; }
.map-summary span { display: block; color: var(--muted); font-size: 8px; }
.map-summary strong { display: block; margin-top: 4px; color: var(--green); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.structure-strip { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 8px; border-top: 1px solid rgba(244,190,63,.23); }
.structure-strip div { padding: 9px 8px 1px; border-right: 1px solid rgba(244,190,63,.14); }
.structure-strip div:last-child { border: 0; }
.structure-strip span, .structure-strip em { display: block; color: var(--muted); font-style: normal; font-size: 8px; }
.structure-strip strong { display: inline-block; margin: 3px 5px 0 0; color: var(--gold); font-size: 22px; }

.hero-panel { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.hero-content { display: grid; grid-template-columns: 24% 52% 24%; align-items: center; min-height: 0; overflow: hidden; }
.hero-side { display: grid; gap: 12px; min-height: 0; }
.big-stat { min-height: 0; padding: 10px 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.22); overflow: hidden; }
.big-stat span, .big-stat small { display: block; color: #dbe6de; font-size: 10px; }
.big-stat small { color: var(--muted); margin-top: 2px; }
.big-stat strong { display: block; margin-top: 5px; font-size: clamp(28px,3vw,50px); line-height: 1; }
.big-stat.green strong{color:var(--green)}.big-stat.gold strong{color:var(--gold)}.big-stat.red strong{color:var(--red)}.big-stat.blue strong{color:var(--blue)}
.gauge-wrap { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; aspect-ratio: 1; place-self: center; height: 100%; width: auto; max-width: 95%; max-height: 300px; }
.gauge-halo { position: absolute; inset: 3%; border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0 8px,rgba(57,221,103,.035) 9px 10px); border: 1px solid rgba(57,221,103,.13); animation: rotate 18s linear infinite; }
.gauge { position: relative; width: 76%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) 0deg, var(--gold) 0deg, rgba(255,255,255,.07) 0); box-shadow: 0 0 25px rgba(57,221,103,.16); transition: background .55s ease; }
.gauge::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #07100b; }
.gauge-inner { position: relative; z-index: 2; width: 80%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle,rgba(24,55,31,.45),#030604 69%); border: 1px solid rgba(57,221,103,.25); }
.gauge-inner span { font-size: 10px; letter-spacing: .08em; }
.gauge-inner small { margin-top: 3px; color: var(--muted); }
.gauge-inner strong { margin-top: 6px; color: var(--gold); font-size: clamp(38px,4.2vw,69px); line-height: 1; }
.gauge-inner em { margin-top: 7px; color: var(--green); font-style: normal; font-size: 10px; }
.progress-row { display: grid; grid-template-columns: 1fr 1.7fr; align-items: center; gap: 12px; padding-top: 7px; border-top: 1px solid rgba(244,190,63,.18); }
.progress-row > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.progress-row span { color: var(--muted); font-size: 9px; }.progress-row span small{color:#6d7b72}.progress-row strong{color:var(--gold);font-size:17px}
.progress-track { height: 8px; background: rgba(255,255,255,.08); overflow: hidden; }
.progress-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--green),var(--gold)); box-shadow: 0 0 8px var(--green); transition: width .55s ease; }

.right-stack { min-height: 0; display: grid; grid-template-rows: minmax(0, 54fr) minmax(0, 46fr); gap: 8px; }
.trend-panel, .ranking-panel { display: grid; grid-template-rows: auto minmax(0,1fr); }
.rate-value { color: var(--green); font-size: 27px; line-height: 1; }.rate-value small{color:var(--muted);font-size:10px}
.chart-wrap { position: relative; min-height: 0; }
.chart-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rank-list { display: grid; align-content: space-evenly; min-height: 0; }
.rank-row { display: grid; grid-template-columns: 90px minmax(0,1fr) 42px 42px; align-items: center; gap: 8px; font-size: 10px; }
.rank-row > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #d9e3dc; }
.rank-track { height: 9px; background: rgba(255,255,255,.06); }
.rank-track i { display: block; height: 100%; background: linear-gradient(90deg,#178d3c,var(--green)); box-shadow: 0 0 6px rgba(57,221,103,.3); }
.rank-row strong { text-align: right; color: #eaffee; }.rank-row em{color:var(--muted);font-style:normal;text-align:right}
.rank-empty, .list-empty { color: var(--muted); text-align: center; align-self: center; font-size: 11px; }

.live-list-panel { display: grid; grid-template-rows: auto auto minmax(0,1fr); }
.pulse-label { display: flex !important; align-items: center; gap: 6px; color: var(--green) !important; }
.live-table-head, .live-row-item { display: grid; grid-template-columns: 64px 1.3fr 1fr .7fr 72px; gap: 8px; align-items: center; }
.live-table-head { padding: 7px 8px; color: var(--muted); background: rgba(255,255,255,.035); font-size: 8px; }
.live-table { min-height: 0; overflow: hidden; }
.live-row-item { height: calc(100% / 8); min-height: 30px; padding: 0 8px; border-bottom: 1px solid rgba(255,255,255,.055); font-size: 10px; animation: reveal .35s ease; }
.live-row-item time { color: var(--muted); }.live-row-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.live-row-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b7c6bc}
.type-tag { color: var(--gold) !important; }.ok-tag{color:var(--green)!important;text-align:right}.ok-tag::before{content:"●";margin-right:5px;font-size:7px}

.profile-panel { display: grid; grid-template-rows: auto minmax(0,1fr) 62px; }
.profile-grid { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 0; overflow: hidden; }
.profile-grid section { min-width: 0; min-height: 0; padding: 7px 10px; border-right: 1px solid rgba(244,190,63,.14); overflow: hidden; }
.profile-grid section:last-child { border: 0; }
.profile-grid h3 { margin: 0 0 8px; color: var(--muted); font-size: 9px; letter-spacing: .08em; }.profile-grid h3 small{color:#68766d}
.donut-row { height: calc(100% - 18px); min-height: 0; display: grid; grid-template-columns: minmax(64px,38%) minmax(0,1fr); align-items: center; gap: 10px; overflow: hidden; }
.mini-donut { width: auto; height: min(100%, 104px); max-width: 104px; aspect-ratio: 1; justify-self: center; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) 0deg,var(--gold) 0); position: relative; }
.mini-donut::before { content:"";position:absolute;inset:10px;border-radius:50%;background:#07100b; }
.mini-donut span { position: relative; z-index: 1; color: var(--green); font-size: 20px; font-weight: 700; }
.legend-list { display: grid; gap: 7px; font-size: 9px; }
.legend-item { display:grid;grid-template-columns:8px 1fr auto;gap:6px;align-items:center;color:var(--muted)}.legend-item i{width:7px;height:7px;border-radius:50%}.legend-item strong{color:#e5efe8}
.age-bars { height: calc(100% - 18px); min-height: 0; display: grid; align-content: space-evenly; gap: 3px; overflow: hidden; }
.age-row { display: grid; grid-template-columns: 44px minmax(0,1fr) 26px; align-items: center; gap: 6px; font-size: 8px; color: var(--muted); }
.age-row div { height: 6px; background: rgba(255,255,255,.06); }.age-row i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--green))}.age-row strong{text-align:right;color:#dce8df}
.participation-row { min-height: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid rgba(244,190,63,.18); overflow: hidden; }
.participation-row div { min-width: 0; padding: 8px 9px 0; border-right: 1px solid rgba(244,190,63,.12); overflow: hidden; }.participation-row div:last-child{border:0}
.participation-row span{display:block;color:var(--muted);font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.participation-row strong{display:block;margin-top:3px;color:var(--green);font-size:22px;line-height:1}

.dashboard-footer { display: flex; align-items: center; gap: 22px; padding: 0 12px; border: 1px solid rgba(244,190,63,.26); background: linear-gradient(90deg,rgba(116,8,10,.72),rgba(8,14,11,.95) 22%,rgba(8,14,11,.95)); color: #cbd5ce; font-size: 9px; white-space: nowrap; overflow: hidden; }
.dashboard-footer strong { color: #fff; font-size: 11px; }.green-dot{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.footer-message { flex: 1; overflow: hidden; text-overflow: ellipsis; color: var(--gold); }
#lastUpdate { color: var(--muted); }

@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}
@keyframes rotate{to{transform:rotate(360deg)}}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}}

@media (min-width: 1251px) and (max-height: 920px) {
  .dashboard-shell { padding: 6px 8px; grid-template-rows: 72px minmax(0, 1fr) 34px; gap: 6px; }
  .dashboard-header { grid-template-columns: 235px 1fr 275px; }
  .brand-block img { width: 52px; height: 58px; }
  .brand-block strong { font-size: 21px; }
  .brand-block span { font-size: 9px; }
  .title-block p { margin-bottom: 4px; font-size: 10px; }
  .title-block h1 { font-size: clamp(27px, 2.25vw, 39px); }
  .title-block > span { margin-top: 5px; font-size: 9px; }
  .live-block { width: 260px; padding: 6px 10px; }
  .clock-row { margin-top: 3px; }
  .clock-row time { font-size: 16px; }
  .data-panel { padding: 9px; }
  .panel-heading { min-height: 32px; }
  .panel-heading.compact { min-height: 28px; }
  .panel-heading h2 { font-size: 14px; }
  .hero-content { grid-template-columns: 22% 56% 22%; }
  .hero-side { gap: 8px; }
  .big-stat { padding: 7px 6px; }
  .big-stat strong { margin-top: 3px; font-size: clamp(27px, 2.5vw, 42px); }
  .gauge-wrap { max-height: 235px; }
  .gauge-inner strong { margin-top: 4px; font-size: clamp(36px, 3.35vw, 58px); }
  .gauge-inner em { margin-top: 5px; font-size: 9px; }
  .progress-row { gap: 9px; padding-top: 4px; }
  .progress-row strong { font-size: 14px; }
  .map-summary div { padding: 5px 7px; }
  .map-summary strong { margin-top: 2px; font-size: 13px; }
  .structure-strip { margin-top: 5px; }
  .structure-strip div { padding: 5px 6px 0; }
  .structure-strip strong { margin-top: 2px; font-size: 18px; }
  .live-table-head { padding: 5px 7px; }
  .profile-panel { grid-template-rows: auto minmax(0,1fr) 50px; }
  .profile-grid section { padding: 4px 8px; }
  .profile-grid h3 { margin-bottom: 3px; }
  .donut-row { height: calc(100% - 12px); gap: 7px; }
  .mini-donut { height: min(100%, 82px); max-width: 82px; }
  .mini-donut::before { inset: 8px; }
  .mini-donut span { font-size: 17px; }
  .legend-list { gap: 4px; }
  .age-bars { height: calc(100% - 12px); gap: 2px; }
  .participation-row div { padding: 5px 7px 0; }
  .participation-row strong { margin-top: 2px; font-size: 18px; }
  .dashboard-footer { gap: 16px; padding: 0 9px; }
}

@media (max-width: 1250px) {
  body { overflow: auto; }
  .dashboard-shell { height: auto; min-height: 100vh; grid-template-rows: auto auto auto; }
  .dashboard-header { grid-template-columns: 210px 1fr 240px; min-height: 84px; }
  .live-block { width: 230px; }
  .dashboard-grid { grid-template-columns: 38% 62%; grid-template-rows: 520px 390px 380px; }
  .province-panel { grid-row: 1 / span 2; }
  .right-stack { grid-column: 2; grid-row: 2; }
  .live-list-panel { grid-column: 1; grid-row: 3; }
  .profile-panel { grid-column: 2; grid-row: 3; }
}

@media (max-width: 760px) {
  .dashboard-shell { padding: 6px; display: block; }
  .dashboard-header { grid-template-columns: 70px 1fr; padding: 8px 0; }
  .brand-block { padding-left: 4px; }.brand-block img{width:52px}.brand-block div{display:none}
  .title-block { text-align: left; }.title-block p{font-size:8px;letter-spacing:.08em}.title-block h1{font-size:18px}.title-block>span{font-size:9px;letter-spacing:.08em}
  .live-block { grid-column: 1 / -1; width: 100%; margin: 7px 0 0; }.dashboard-header{min-height:145px}.live-row{display:none}#fullscreenBtn{display:none}
  .dashboard-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: none; margin-top: 8px; }
  .province-panel,.hero-panel,.right-stack,.live-list-panel,.profile-panel { grid-column: 1; grid-row: auto; }
  .province-panel{height:650px}.hero-panel{height:460px}.right-stack{height:650px}.live-list-panel{height:430px}.profile-panel{height:430px}
  .dashboard-footer { margin-top: 8px; height: 42px; }.dashboard-footer span:not(.footer-message){display:none}
  .hero-content{grid-template-columns:22% 56% 22%}.big-stat{padding:6px 3px}.big-stat strong{font-size:25px}.big-stat span{font-size:8px}.big-stat small{font-size:8px}
  .live-table-head,.live-row-item{grid-template-columns:52px 1.2fr .9fr 58px}.live-table-head span:nth-child(4),.live-row-item .type-tag{display:none}
}