/* ===== Série N: skleněné karty (podle nové ukázky) =====
   Hlavička jako karta s nadpisem „Výsledky hlasování“, kruhové ukazatele, každá strana v průsvitné kartě
   s barevnou značkou vlevo, tenkým zaobleným pruhem a procentem v barvě strany. Pruh je ve skutečném měřítku 0–25 %. */
.eyebrow, .ring { display: none; }
.photo-mid.n { background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url(bg.jpg) center / cover no-repeat, #fff; }

.n { --mute: #4A5568; --vot: #3B4656; }
.n header { left: 64px; right: 64px; top: 46px; height: 172px; border: 0; background: rgba(255,255,255,.84); border-radius: 28px; box-shadow: 0 10px 30px rgba(20,30,50,.12); }
.n header::after { content: ""; position: absolute; left: 860px; top: 34px; bottom: 34px; width: 2px; background: #C9CFD8; }
.n .eyebrow { display: block; position: absolute; left: 62px; top: 26px; font-size: 22px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #3B4656; }
.n h1 { left: 62px; top: 50px; font-size: 76px; line-height: 1.1; }
.n .stats { left: 928px; right: auto; top: 38px; gap: 0; }
.n .stat { width: 396px; gap: 20px; }
.n .gauge { display: none; } .n .ring { display: block; width: 96px; height: 96px; flex: none; }
.n .ring circle { fill: none; stroke-width: 12; } .n .ring .rt { stroke: #D5DBE2; }
.n .ring .rf { stroke: #56616E; stroke-linecap: round; stroke-dasharray: 251.33; stroke-dashoffset: calc(251.33 * (1 - var(--f))); transform: rotate(-90deg); transform-origin: 50% 50%; }
.n .stat:nth-child(2) .ring .rf { stroke: #8B6B5C; }
.n .stat .v { font-size: 40px; } .n .stat .v small { font-size: 40px; } .n .stat .l { font-size: 26px; color: #4A5568; }

.n .rows { left: 64px; right: 64px; top: 250px; gap: 18px; }
.n .row:nth-child(1) { --d: #B84A0E; } .n .row:nth-child(2) { --d: #5B6570; } .n .row:nth-child(3) { --d: #4F31A8; } .n .row:nth-child(4) { --d: #1F6A9F; } .n .row:nth-child(5) { --d: #67707E; }
.n .row { height: 142px; background: rgba(255,255,255,.84); border-radius: 28px; box-shadow: 0 10px 30px rgba(20,30,50,.12); padding: 0 66px 0 62px; column-gap: 0;
  grid-template-columns: 177px 1fr auto; grid-template-rows: 1fr 1fr; grid-template-areas: "name name votes" "pct bar bar"; align-content: center; }
.n .row::before { content: ""; position: absolute; left: 22px; top: 26px; bottom: 26px; width: 6px; border-radius: 3px; background: var(--d); }
.n .no { display: none; } .n .name { grid-area: name; font-size: 40px; font-weight: 500; align-self: end; }
.n .votes { grid-area: votes; font-size: 27px; color: #4A5568; align-self: end; } .n .votes b { font-weight: 400; color: #4A5568; }
.n .pct { grid-area: pct; font-size: 28px; color: var(--d); align-self: center; } .n .pct .i { width: auto; } .n .pct .s { color: var(--d); font-size: 1em; margin-left: .25em; }
.n .bar { grid-area: bar; height: 28px; border-radius: 14px; background: #DDE2EA; align-self: center; }
.n .bar i { width: calc(var(--sh) / 25 * 100%); background: var(--d); border-radius: 14px; }

/* N02 – studiové písmo */
.n2 header { height: 190px; top: 36px; } .n2 h1 { font-size: 92px; top: 56px; } .n2 .eyebrow { font-size: 26px; top: 22px; } .n2 header::after { left: 800px; }
.n2 .stats { left: 850px; } .n2 .stat { width: 500px; } .n2 .ring { width: 110px; height: 110px; } .n2 .stat .v { font-size: 66px; } .n2 .stat .v small { font-size: 66px; } .n2 .stat .l { font-size: 44px; }
.n2 .rows { top: 246px; gap: 12px; }
.n2 .row { height: 156px; grid-template-columns: 260px 1fr auto; padding: 0 44px 0 62px; }
.n2 .name { font-size: 58px; } .n2 .votes { font-size: 46px; } .n2 .pct { font-size: 52px; } .n2 .bar { height: 44px; border-radius: 22px; } .n2 .bar i { border-radius: 22px; }
/* N03 – obří procento vlevo */
.n3 header { height: 190px; top: 36px; } .n3 h1 { font-size: 92px; top: 56px; } .n3 .eyebrow { font-size: 26px; top: 22px; } .n3 header::after { left: 800px; }
.n3 .stats { left: 850px; } .n3 .stat { width: 500px; } .n3 .ring { width: 110px; height: 110px; } .n3 .stat .v, .n3 .stat .v small { font-size: 66px; } .n3 .stat .l { font-size: 44px; }
.n3 .rows { top: 246px; gap: 12px; }
.n3 .row { height: 156px; grid-template-columns: 470px 1fr auto; padding: 0 44px 0 62px; }
.n3 .name { font-size: 58px; } .n3 .votes { font-size: 46px; } .n3 .bar { height: 44px; border-radius: 22px; } .n3 .bar i { border-radius: 22px; }
.n3 .pct { grid-area: pct; grid-row: 1 / 3; font-size: 108px; align-self: center; justify-self: start; } .n3 .pct .i { width: 1.4em; text-align: right; }
.n3 .row { grid-template-areas: "pct name votes" "pct bar bar"; }
.n3 .pct .s { font-size: .5em; }
/* N04 – černý štítek s procentem na konci pruhu */
.n4 header { height: 190px; top: 36px; } .n4 h1 { font-size: 92px; top: 56px; } .n4 .eyebrow { font-size: 26px; top: 22px; } .n4 header::after { left: 800px; }
.n4 .stats { left: 850px; } .n4 .stat { width: 500px; } .n4 .ring { width: 110px; height: 110px; } .n4 .stat .v, .n4 .stat .v small { font-size: 66px; } .n4 .stat .l { font-size: 44px; }
.n4 .rows { top: 246px; gap: 12px; }
.n4 .row { height: 156px; grid-template-columns: 1fr auto; grid-template-rows: 62px 26px 52px; grid-template-areas: "name votes" "pct pct" "bar bar"; padding: 0 44px 0 62px; align-content: center; }
.n4 .name { font-size: 58px; align-self: end; } .n4 .votes { font-size: 46px; align-self: end; } .n4 .bar { height: 40px; border-radius: 20px; align-self: start; margin-top: 4px; } .n4 .bar i { border-radius: 20px; --minw: 40px; }
.n4 .pct { grid-area: pct; justify-self: start; align-self: end; margin-left: calc(var(--sh) / 25 * 100%); transform: translateX(-100%); background: #000; color: #fff; font-size: 46px; padding: 0 16px 3px; border-radius: 10px; margin-bottom: 4px; position: relative; z-index: 2; } .n4 .pct .s { color: #fff; }
/* N04 – opravené umístění štítku (uvnitř pruhu na jeho konci) */
.n4 .row { grid-template-rows: 62px 70px; grid-template-areas: "name votes" "bar bar"; align-content: center; }
.n4 .bar { grid-area: bar; height: 66px; border-radius: 33px; align-self: start; margin-top: 4px; } .n4 .bar i { border-radius: 33px; }
.n4 .pct { grid-area: bar; align-self: center; margin: 0 0 0 var(--w); margin-left: calc(var(--sh) / 25 * 100%); transform: translateX(calc(-100% - 12px)); font-size: 46px; padding: 2px 18px 5px; margin-bottom: 0; }