/* ==========================================================================
   GridElvo — skupni oblikovni sistem
   Ena datoteka za vse strani. Brez build koraka, brez odvisnosti.
   Svetla shema je privzeta; temna se vklopi z <html data-theme="dark">.
   Izbiro obiskovalca shrani shell.js in jo spoštuje ob vsakem obisku.
   ========================================================================== */

/* --- 1. Žetoni ----------------------------------------------------------- */

/* Javne strani so v enem, svetlem videzu; temna tema velja za nadzorne strani. */
:root[data-theme="dark"]:not(:has(body[data-ge-layout="public"])) {
  color-scheme: dark;

  /* Podlage: grafit z navy pridihom, brez čiste črne */
  --ge-bg:          #0A0F16;
  --ge-bg-2:        #0D131B;
  --ge-surface:     #121A24;
  --ge-surface-2:   #18222E;
  --ge-surface-3:   #1E2A38;
  --ge-line:        #23303F;
  --ge-line-soft:   #1A2430;
  --ge-line-input:  #566779;
  --ge-deep:        #0E1F1C;

  /* Besedilo */
  --ge-text:        #E9EFF5;
  --ge-text-2:      #9BABBC;
  /* Drobni napisi morajo tudi v temni shemi dosegati kontrast 4,5:1. */
  --ge-text-3:      #7E8FA0;

  /* Poudarek znamke */
  --ge-accent:      #2DD4A7;
  --ge-accent-2:    #3FBFD4;
  --ge-accent-ink:  #052018;
  --ge-accent-soft: rgba(45, 212, 167, .12);

  /* Pomenske barve energije — povsod isti pomen */
  --ge-grid:        #5B9DFF;   /* omrežje, trg, cene */
  --ge-grid-soft:   rgba(91, 157, 255, .14);
  --ge-pv:          #F5A524;   /* sonce, proizvodnja */
  --ge-pv-soft:     rgba(245, 165, 36, .14);
  --ge-batt:        #2DD4A7;   /* baterija, prihranek, dobiček */
  --ge-batt-soft:   rgba(45, 212, 167, .14);
  --ge-load:        #A78BFA;   /* odjem objekta */
  --ge-load-soft:   rgba(167, 139, 250, .14);

  /* Stanja */
  --ge-warn:        #E0A33E;
  --ge-warn-soft:   rgba(224, 163, 62, .14);
  --ge-danger:      #F4626F;   /* samo napake in izpadi */
  --ge-danger-soft: rgba(244, 98, 111, .14);
  --ge-neutral:     #7A8A9B;
  --ge-neutral-soft:rgba(122, 138, 155, .14);

  --ge-shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px -22px rgba(0,0,0,.8);
  --ge-shadow-lift: 0 2px 6px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.85);
}

/* Geometrija in pisave: enake v obeh temah. */
:root {
  --ge-r-sm: 3px;
  --ge-r:    4px;
  --ge-r-lg: 6px;
  --ge-sidebar: 236px;
  --ge-topbar: 56px;
  --ge-gap: 16px;
  --ge-focus: 0 0 0 2px var(--ge-bg), 0 0 0 4px var(--ge-accent);

  --ge-sans: "Inter", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --ge-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Toplo bela podlaga, skoraj črno besedilo, umirjen zelenomodri poudarek
     in temni pasovi (glava, noga, poudarjeni razdelki) v tonu naslovnice.
     Kontrast besedila je preverjen (≥ 4,5:1 na vseh podlagah), robovi
     vnosnih polj ≥ 3:1. */
  --ge-bg:          #F7F6F2;
  --ge-bg-2:        #FDFCFA;
  --ge-surface:     #FDFCFA;
  --ge-surface-2:   #F3F1EC;
  --ge-surface-3:   #EAE7E0;
  --ge-line:        #E4E1D9;
  --ge-line-soft:   #ECE9E3;
  --ge-line-input:  #8A867E;

  --ge-text:        #141617;
  --ge-text-2:      #4F5455;
  --ge-text-3:      #5E6363;

  --ge-accent:      #0F6E6A;
  --ge-accent-2:    #0E7490;
  --ge-accent-ink:  #FFFFFF;
  --ge-accent-soft: #E2EEEB;
  --ge-deep:        #0F151C;

  --ge-grid:        #2563EB;
  --ge-grid-soft:   rgba(37, 99, 235, .10);
  --ge-pv:          #B4690E;
  --ge-pv-soft:     rgba(180, 105, 14, .12);
  --ge-batt:        #168A86;
  --ge-batt-soft:   rgba(22, 138, 134, .12);
  --ge-load:        #6D5FA8;
  --ge-load-soft:   rgba(109, 95, 168, .10);

  --ge-warn:        #8A5900;
  --ge-warn-soft:   #F8F0E1;
  --ge-danger:      #B3261E;
  --ge-danger-soft: rgba(179, 38, 30, .08);
  --ge-neutral:     #64757F;
  --ge-neutral-soft:rgba(100, 117, 127, .10);

  --ge-shadow: 0 1px 2px rgba(40,32,18,.04);
  --ge-shadow-lift: 0 1px 2px rgba(40,32,18,.05), 0 24px 48px -32px rgba(40,32,18,.28);
}

/* --- 2. Osnova ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Atribut hidden mora premagati vsako lastno pravilo za prikaz.
   Brez tega ostane npr. .chart-empty{display:grid} viden čez narisan graf. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ge-bg);
  color: var(--ge-text);
  font-family: var(--ge-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 19px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }
p  { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

a { color: var(--ge-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ge-focus);
  border-radius: var(--ge-r-sm);
}

code, .ge-mono, .ge-num { font-family: var(--ge-mono); font-variant-numeric: tabular-nums; }

.ge-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- 3. Lupina: stranski meni + zgornja vrstica --------------------------- */

.ge-app {
  display: grid;
  grid-template-columns: var(--ge-sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

.ge-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 10px;
  background: var(--ge-bg-2);
  border-right: 1px solid var(--ge-line);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ge-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 14px;
  color: var(--ge-text);
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -.015em;
}
.ge-brand:hover { text-decoration: none; }
.ge-brand__mark {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 7px;
  background: linear-gradient(150deg, var(--ge-accent), var(--ge-accent-2));
  color: var(--ge-accent-ink);
  font-size: 14px;
  font-weight: 700;
}
.ge-brand__mark img, .ge-brand__mark svg { width: 100%; height: 100%; border-radius: inherit; display: block; }
.ge-brand em { font-style: normal; color: var(--ge-accent); }

.ge-navgroup {
  padding: 12px 10px 5px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ge-text-3);
}

.ge-nav {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: var(--ge-r-sm);
  color: var(--ge-text-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.ge-nav:hover { background: var(--ge-surface-2); color: var(--ge-text); text-decoration: none; }
.ge-nav svg { width: 15px; height: 15px; flex: none; stroke-width: 1.8; opacity: .85; }
.ge-nav[aria-current="page"] {
  background: var(--ge-accent-soft);
  color: var(--ge-text);
  box-shadow: inset 2px 0 0 var(--ge-accent);
}
.ge-nav[aria-current="page"] svg { color: var(--ge-accent); opacity: 1; }
.ge-nav__tag {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ge-text-3);
  border: 1px solid var(--ge-line);
  border-radius: 4px;
  padding: 1px 4px;
}

.ge-sidebar__foot {
  margin-top: auto;
  padding: 12px 10px 4px;
  border-top: 1px solid var(--ge-line-soft);
  font-size: 11px;
  color: var(--ge-text-3);
  line-height: 1.45;
}

.ge-main { display: flex; flex-direction: column; min-width: 0; }

.ge-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--ge-topbar);
  padding: 0 20px;
  background: color-mix(in srgb, var(--ge-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ge-line);
}
.ge-topbar__title { display: flex; flex-direction: column; min-width: 0; }
.ge-topbar__title h1 { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ge-topbar__title span { font-size: 11.5px; color: var(--ge-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ge-topbar__spacer { flex: 1 1 auto; min-width: 8px; }
.ge-topbar__meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--ge-text-3);
}

.ge-iconbtn {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border: 1px solid var(--ge-line);
  border-radius: var(--ge-r-sm);
  background: var(--ge-surface);
  color: var(--ge-text-2);
  cursor: pointer;
}
.ge-iconbtn:hover { color: var(--ge-text); border-color: var(--ge-text-3); }
.ge-iconbtn svg { width: 15px; height: 15px; stroke-width: 1.8; }

.ge-burger { display: none; }

.ge-content {
  padding: 20px;
  max-width: 1480px;
  width: 100%;
}
.ge-content > * + * { margin-top: var(--ge-gap); }

/* --- 4. Kartice ---------------------------------------------------------- */

.ge-card {
  background: var(--ge-surface);
  border: 1px solid var(--ge-line);
  border-radius: var(--ge-r);
  box-shadow: var(--ge-shadow);
  min-width: 0;
}
.ge-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ge-line-soft);
}
.ge-card__head h2, .ge-card__head h3 { font-size: 13px; font-weight: 600; }
.ge-card__head p { margin: 0; font-size: 11.5px; color: var(--ge-text-3); }
.ge-card__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ge-card__body { padding: 14px; }
.ge-card__body--flush { padding: 0; }
.ge-card__foot {
  padding: 10px 14px;
  border-top: 1px solid var(--ge-line-soft);
  font-size: 11.5px;
  color: var(--ge-text-3);
}

.ge-grid { display: grid; gap: var(--ge-gap); }
.ge-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ge-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ge-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ge-split {
  display: grid;
  gap: var(--ge-gap);
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  align-items: start;   /* kartice naj se ne raztegujejo v prazno */
}
.ge-split--stretch { align-items: stretch; }

/* --- 5. KPI -------------------------------------------------------------- */

.ge-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 14px 14px;
  background: var(--ge-surface);
  border: 1px solid var(--ge-line);
  border-radius: var(--ge-r);
  box-shadow: var(--ge-shadow);
  overflow: hidden;
  min-width: 0;
}
.ge-kpi::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 2px;
  background: var(--ge-kpi-color, var(--ge-accent));
}
.ge-kpi__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 550; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ge-text-3);
}
.ge-kpi__label svg { width: 13px; height: 13px; stroke-width: 1.9; color: var(--ge-kpi-color, var(--ge-accent)); }
.ge-kpi__value {
  font-family: var(--ge-mono);
  font-size: 24px;
  font-weight: 550;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ge-text);
  word-break: break-word;
}
.ge-kpi__value small { font-size: 13px; font-weight: 500; color: var(--ge-text-3); margin-left: 3px; }
.ge-kpi__note { font-size: 11.5px; color: var(--ge-text-3); }
.ge-kpi--grid { --ge-kpi-color: var(--ge-grid); }
.ge-kpi--pv   { --ge-kpi-color: var(--ge-pv); }
.ge-kpi--batt { --ge-kpi-color: var(--ge-batt); }
.ge-kpi--load { --ge-kpi-color: var(--ge-load); }
.ge-kpi--warn { --ge-kpi-color: var(--ge-warn); }
.ge-kpi--danger { --ge-kpi-color: var(--ge-danger); }
.ge-kpi--muted  { --ge-kpi-color: var(--ge-neutral); }
.ge-kpi--muted .ge-kpi__value { color: var(--ge-text-3); }

/* --- 6. Statusne značke -------------------------------------------------- */

.ge-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--ge-badge-line, var(--ge-line));
  background: var(--ge-badge-bg, var(--ge-neutral-soft));
  color: var(--ge-badge-fg, var(--ge-text-2));
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ge-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.ge-badge--plain::before { display: none; }
.ge-badge--online     { --ge-badge-bg: var(--ge-batt-soft);   --ge-badge-fg: var(--ge-batt);   --ge-badge-line: color-mix(in srgb, var(--ge-batt) 35%, transparent); }
.ge-badge--optimizing { --ge-badge-bg: var(--ge-accent-soft); --ge-badge-fg: var(--ge-accent-2); --ge-badge-line: color-mix(in srgb, var(--ge-accent-2) 35%, transparent); }
.ge-badge--shadow     { --ge-badge-bg: var(--ge-grid-soft);   --ge-badge-fg: var(--ge-grid);   --ge-badge-line: color-mix(in srgb, var(--ge-grid) 35%, transparent); }
.ge-badge--warning    { --ge-badge-bg: var(--ge-warn-soft);   --ge-badge-fg: var(--ge-warn);   --ge-badge-line: color-mix(in srgb, var(--ge-warn) 35%, transparent); }
.ge-badge--offline    { --ge-badge-bg: var(--ge-danger-soft); --ge-badge-fg: var(--ge-danger); --ge-badge-line: color-mix(in srgb, var(--ge-danger) 35%, transparent); }
.ge-badge--mock       { --ge-badge-bg: var(--ge-neutral-soft);--ge-badge-fg: var(--ge-neutral);--ge-badge-line: var(--ge-line); }
.ge-badge--live::before { animation: ge-pulse 2s ease-in-out infinite; }

@keyframes ge-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ge-badge--live::before { animation: none; } }

/* --- 7. Gumbi ------------------------------------------------------------ */

.ge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--ge-r-sm);
  border: 1px solid var(--ge-line);
  background: var(--ge-surface-2);
  color: var(--ge-text);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
}
.ge-btn:hover { background: var(--ge-surface-3); text-decoration: none; }
.ge-btn:disabled { opacity: .5; cursor: not-allowed; }
.ge-btn svg { width: 14px; height: 14px; stroke-width: 1.9; }
.ge-btn--primary {
  background: var(--ge-accent);
  border-color: var(--ge-accent);
  color: var(--ge-accent-ink);
}
.ge-btn--primary:hover { background: color-mix(in srgb, var(--ge-accent) 88%, #000); }
.ge-btn--ghost { background: transparent; }
.ge-btn--ghost:hover { background: var(--ge-surface-2); }
.ge-btn--sm { padding: 4px 9px; font-size: 12px; }
.ge-btn--danger { color: var(--ge-danger); border-color: color-mix(in srgb, var(--ge-danger) 40%, transparent); background: var(--ge-danger-soft); }

.ge-seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--ge-surface-2);
  border: 1px solid var(--ge-line);
  border-radius: var(--ge-r-sm);
}
.ge-seg button {
  padding: 4px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ge-text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
}
.ge-seg button:hover { color: var(--ge-text); }
.ge-seg button[aria-pressed="true"], .ge-seg button.is-active {
  background: var(--ge-surface);
  color: var(--ge-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* --- 8. Obrazci ---------------------------------------------------------- */

.ge-fields { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ge-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ge-field--full { grid-column: 1 / -1; }
.ge-field > label, .ge-label {
  font-size: 11.5px;
  font-weight: 550;
  color: var(--ge-text-2);
}
.ge-input, .ge-field input, .ge-field select, .ge-field textarea {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--ge-line);
  border-radius: var(--ge-r-sm);
  background: var(--ge-surface-2);
  color: var(--ge-text);
  font: inherit;
  font-size: 13px;
  font-family: var(--ge-mono);
}
.ge-field select { font-family: var(--ge-sans); }
.ge-field input:hover, .ge-field select:hover { border-color: var(--ge-text-3); }
.ge-unit { position: relative; display: flex; align-items: center; }
.ge-unit input { padding-right: 38px; }
.ge-unit span {
  position: absolute; right: 9px;
  font-size: 11px;
  color: var(--ge-text-3);
  pointer-events: none;
}
.ge-hint { font-size: 11.5px; color: var(--ge-text-3); }

fieldset.ge-set {
  margin: 0;
  padding: 0;
  border: 0;
}
.ge-set + .ge-set { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ge-line-soft); }
.ge-set > legend {
  padding: 0 0 8px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ge-text-3);
}

/* --- 9. Tabele ----------------------------------------------------------- */

.ge-tablewrap { width: 100%; overflow-x: auto; }
.ge-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.ge-table th, .ge-table td {
  padding: 7px 12px;
  text-align: right;
  border-bottom: 1px solid var(--ge-line-soft);
  white-space: nowrap;
}
.ge-table th:first-child, .ge-table td:first-child { text-align: left; }
.ge-table thead th {
  position: sticky;
  top: 0;
  background: var(--ge-surface-2);
  color: var(--ge-text-3);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ge-line);
}
.ge-table tbody tr:hover td { background: var(--ge-surface-2); }
.ge-table tbody tr:last-child td { border-bottom: 0; }
.ge-table td.ge-num, .ge-table td.num { font-family: var(--ge-mono); }
.ge-table tfoot td {
  font-weight: 650;
  background: var(--ge-surface-2);
  border-top: 1px solid var(--ge-line);
}
.ge-pos { color: var(--ge-batt); }
.ge-neg { color: var(--ge-danger); }

/* --- 10. Grafi ----------------------------------------------------------- */

.ge-chart { width: 100%; display: block; }
.ge-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 11.5px;
  color: var(--ge-text-2);
}
.ge-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ge-legend i {
  width: 9px; height: 9px;
  border-radius: 2px;
  background: currentColor;
  display: inline-block;
}
.ge-legend .pv   { color: var(--ge-pv); }
.ge-legend .batt { color: var(--ge-batt); }
.ge-legend .grid { color: var(--ge-grid); }
.ge-legend .load { color: var(--ge-load); }

/* --- 11. Prazna stanja in obvestila -------------------------------------- */

.ge-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 16px;
  border: 1px dashed var(--ge-line);
  border-radius: var(--ge-r);
  background: var(--ge-surface-2);
  color: var(--ge-text-3);
  font-size: 12.5px;
}
.ge-empty strong { color: var(--ge-text-2); font-size: 13px; font-weight: 600; }
.ge-empty svg { width: 18px; height: 18px; stroke-width: 1.7; opacity: .7; }

.ge-note {
  display: flex;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--ge-r-sm);
  border: 1px solid var(--ge-line);
  background: var(--ge-surface-2);
  font-size: 12.5px;
  color: var(--ge-text-2);
}
.ge-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; stroke-width: 1.9; }
.ge-note--warn   { border-color: color-mix(in srgb, var(--ge-warn) 35%, transparent);   background: var(--ge-warn-soft); }
.ge-note--danger { border-color: color-mix(in srgb, var(--ge-danger) 35%, transparent); background: var(--ge-danger-soft); }
.ge-note--info   { border-color: color-mix(in srgb, var(--ge-grid) 30%, transparent);   background: var(--ge-grid-soft); }
.ge-note--warn svg   { color: var(--ge-warn); }
.ge-note--danger svg { color: var(--ge-danger); }
.ge-note--info svg   { color: var(--ge-grid); }

/* --- 12. Zavihki --------------------------------------------------------- */

.ge-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--ge-line);
  overflow-x: auto;
}
.ge-tabs button {
  padding: 8px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ge-text-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
}
.ge-tabs button:hover { color: var(--ge-text); }
.ge-tabs button[aria-selected="true"] { color: var(--ge-text); border-bottom-color: var(--ge-accent); }

/* --- 13. Cevovod (napoved → optimizacija → urnik → Edge → naprava) -------- */

.ge-pipeline {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.ge-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--ge-line);
  border-radius: var(--ge-r-sm);
  background: var(--ge-surface-2);
  min-width: 0;
}
.ge-step__n {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ge-text-3);
}
.ge-step__n svg { width: 13px; height: 13px; stroke-width: 1.9; }
.ge-step__v { font-size: 13px; font-weight: 600; }
.ge-step__s { font-size: 11.5px; color: var(--ge-text-3); }
.ge-step.is-ok      { border-color: color-mix(in srgb, var(--ge-batt) 40%, transparent); }
.ge-step.is-ok .ge-step__n svg { color: var(--ge-batt); }
.ge-step.is-wait    { border-style: dashed; }
.ge-step.is-problem { border-color: color-mix(in srgb, var(--ge-danger) 40%, transparent); background: var(--ge-danger-soft); }
.ge-step.is-problem .ge-step__n svg { color: var(--ge-danger); }

/* --- 14. Odzivnost (namizje prvo) ---------------------------------------- */

.ge-scrim { display: none; }

@media (max-width: 1080px) {
  .ge-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .ge-app { grid-template-columns: minmax(0, 1fr); }
  .ge-sidebar {
    position: fixed;
    z-index: 60;
    top: 0; left: 0; bottom: 0;
    width: var(--ge-sidebar);
    transform: translateX(-100%);
    transition: transform .18s ease;
  }
  .ge-app.is-open .ge-sidebar { transform: none; }
  .ge-app.is-open .ge-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0,0,0,.5);
  }
  .ge-burger { display: grid; }
  .ge-content { padding: 14px; }
  .ge-topbar { padding: 0 14px; }
  .ge-topbar__meta .ge-hide-sm { display: none; }
  .ge-topbar__title span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ge-sidebar { transition: none; }
}

@media print {
  .ge-sidebar, .ge-topbar, .ge-scrim { display: none !important; }
  .ge-app { display: block; }
  .ge-content { max-width: none; padding: 0; }
}

/* --- 15. Javna predstavitev ----------------------------------------------
   Strani, ki jih odpre obiskovalec (domov, cene, simulatorja), nosijo zgornjo
   navigacijo namesto administrativnega stranskega menija. Postavitev je bolj
   zračna, pisava večja: to so strani za branje in odločanje, ne nadzorna soba.
   Vklopi jih shell.js z atributom data-ge-layout="public" na <body>.
-------------------------------------------------------------------------- */

.ge-pub {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Vrstica administratorja na javnih straneh (shell.js, le za prijavljene). */
.ge-adminbar {
  position: fixed; left: 12px; bottom: 12px; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  max-width: calc(100vw - 24px); padding: 8px 16px;
  background: #141617; color: #f3f1ec; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28); font: 500 13px/1.3 var(--ge-sans, system-ui, sans-serif);
}
.ge-adminbar__stanje { color: #FFD34D; }
.ge-adminbar a { color: #f3f1ec; text-decoration: underline; text-underline-offset: 2px; }
.ge-adminbar a:focus-visible { outline: 2px solid #FFD34D; outline-offset: 2px; }

body.ge-public {
  font-size: 16px;
  line-height: 1.6;
}
body.ge-public h1 { font-size: 30px; letter-spacing: -.022em; line-height: 1.15; }
body.ge-public h2 { font-size: 22px; letter-spacing: -.015em; line-height: 1.25; }
body.ge-public h3 { font-size: 17px; line-height: 1.3; }

/* Preskok na vsebino: viden šele, ko pride vanj tipkovnica. */
.ge-skip {
  position: absolute;
  left: -9999px;
}
.ge-skip:focus {
  position: fixed;
  left: 12px; top: 12px;
  z-index: 80;
  padding: 10px 14px;
  background: var(--ge-surface);
  border: 1px solid var(--ge-accent);
  border-radius: var(--ge-r-sm);
  color: var(--ge-text);
  box-shadow: var(--ge-shadow-lift);
}

.ge-top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ge-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ge-line);
}
.ge-top__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: var(--ge-pub-max, 1200px);
  margin: 0 auto;
  padding: 11px 24px;
}
.ge-top .ge-brand { padding: 0; font-size: 17px; flex: none; }
.ge-top .ge-brand__mark { width: 28px; height: 28px; font-size: 15px; }

.ge-topnav { display: flex; align-items: center; gap: 2px; margin-left: 14px; }
.ge-topnav a {
  padding: 8px 12px;
  border-radius: var(--ge-r-sm);
  color: var(--ge-text-2);
  font-size: 15px;
  font-weight: 550;
}
.ge-topnav a:hover { background: var(--ge-surface-3); color: var(--ge-text); text-decoration: none; }
.ge-topnav a[aria-current] { background: var(--ge-accent-soft); color: var(--ge-accent); }

.ge-top__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ge-top__burger { display: none; }

.ge-topmenu { display: none; border-top: 1px solid var(--ge-line-soft); background: var(--ge-surface); }
.ge-topmenu.is-open { display: block; }
.ge-topmenu__inner { max-width: var(--ge-pub-max, 1200px); margin: 0 auto; padding: 8px 20px 18px; }
.ge-topmenu a {
  display: block;
  padding: 13px 4px;
  color: var(--ge-text);
  font-size: 16px;
  font-weight: 550;
  border-bottom: 1px solid var(--ge-line-soft);
}
.ge-topmenu a:hover { color: var(--ge-accent); text-decoration: none; }
.ge-topmenu .ge-btn { margin-top: 14px; width: 100%; }

.ge-pubmain { flex: 1 1 auto; width: 100%; min-width: 0; }

/* Simulatorja imata obrazec in rezultat drug ob drugem in zato rabita več
   širine kot besedilne strani. */
body[data-ge-page="sim-annual"], body[data-ge-page="sim-day"] { --ge-pub-max: 1240px; }

.ge-pub .ge-content {
  max-width: var(--ge-pub-max, 1200px);
  margin: 0 auto;
  padding: 26px 24px 72px;
}
.ge-pub .ge-content > * + * { margin-top: 22px; }

/* Zgornja vrstica je lepljiva, zato se sidro ne sme ustaviti pod njo. */
.ge-pub [id] { scroll-margin-top: 84px; }

.ge-pagehead {
  max-width: var(--ge-pub-max, 1200px);
  margin: 0 auto;
  padding: 34px 24px 0;
}
.ge-pagehead p {
  margin: 9px 0 0;
  font-size: 17px;
  color: var(--ge-text-2);
  max-width: 68ch;
}

/* Gumbi javnih strani so večji: na dotik in na prvi pogled. */
.ge-btn--lg {
  padding: 12px 20px;
  font-size: 16px;
  border-radius: var(--ge-r);
  min-height: 46px;
}
body.ge-public .ge-btn { font-size: 15px; padding: 9px 15px; border-radius: var(--ge-r-sm); }
body.ge-public .ge-btn--lg { padding: 12px 20px; font-size: 16px; border-radius: var(--ge-r); }
.ge-btn--primary:active { background: color-mix(in srgb, var(--ge-accent) 86%, #000); }

.ge-pubfoot {
  border-top: 1px solid var(--ge-line);
  background: var(--ge-bg-2);
}
.ge-pubfoot__inner {
  max-width: var(--ge-pub-max, 1200px);
  margin: 0 auto;
  padding: 22px 24px 34px;
  display: flex;
  gap: 10px 26px;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ge-text-3);
}

@media (max-width: 900px) {
  .ge-topnav, .ge-top__cta { display: none; }
  .ge-top__burger { display: grid; }
  .ge-top__inner { padding: 10px 16px; }
  .ge-pub .ge-content { padding: 20px 16px 56px; }
  .ge-pagehead { padding: 24px 16px 0; }
  .ge-pubfoot__inner { padding: 20px 16px 30px; }
  body.ge-public h1 { font-size: 26px; }
  body.ge-public h2 { font-size: 20px; }
}

/* Dotik: gumbi in povezave v navigaciji dovolj veliki za prst. */
@media (pointer: coarse) {
  .ge-topmenu a { padding: 15px 4px; }
  .ge-iconbtn { width: 40px; height: 40px; }
}

@media print {
  .ge-top, .ge-topmenu, .ge-skip, .ge-pubfoot { display: none !important; }
  .ge-pub .ge-content { max-width: none; padding: 0; }
}

/* --- 16. Znanje in nasveti: kartice člankov in stran članka ---------------
   Kartice se uporabljajo na domači strani in na pregledu /blog, stran članka
   ima ožji stolpec besedila, ker se dolgo besedilo bere lažje v ~70 znakih.
   -------------------------------------------------------------------------- */

.ge-artgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ge-artcard {
  display: flex;
  flex-direction: column;
  background: var(--ge-surface);
  border: 1px solid var(--ge-line);
  border-radius: var(--ge-r-lg);
  box-shadow: var(--ge-shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.ge-artcard:hover,
.ge-artcard:focus-visible {
  border-color: var(--ge-accent);
  transform: translateY(-2px);
  box-shadow: var(--ge-shadow-lg, var(--ge-shadow));
}

.ge-artcard__ill {
  background: var(--ge-surface-2);
  border-bottom: 1px solid var(--ge-line-soft);
  padding: 14px 16px 10px;
}

.ge-artcard__ill svg { display: block; width: 100%; height: auto; }

.ge-artcard__body {
  padding: 15px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.ge-artcard__cat {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ge-accent);
}

.ge-artcard h3 {
  margin: 0;
  font-family: var(--ge-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ge-text);
}

.ge-artcard p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ge-text-2);
}

.ge-artcard__meta {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--ge-text-3);
}

.ge-draft {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--ge-warn);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ge-warn);
}

/* --- stran članka --------------------------------------------------------- */

body[data-ge-page="clanek"] { --ge-pub-max: 1040px; }

.ge-article {
  max-width: 720px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.72;
  color: var(--ge-text-2);
}

.ge-article > p, .ge-article > ul, .ge-article > ol { margin: 0 0 18px; }

.ge-article h1 {
  font-family: var(--ge-sans);
  font-size: clamp(27px, 3.2vw, 37px);
  font-weight: 640;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ge-text);
  margin: 6px 0 14px;
  text-wrap: balance;
}

.ge-article h2 {
  font-family: var(--ge-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ge-text);
  margin: 34px 0 12px;
}

.ge-article h3 {
  font-family: var(--ge-sans);
  font-size: 17.5px;
  font-weight: 600;
  color: var(--ge-text);
  margin: 24px 0 8px;
}

.ge-article strong { color: var(--ge-text); font-weight: 600; }
.ge-article a { color: var(--ge-accent); }
/* Gumbi in kartice znotraj članka obdržijo svoje barve, sicer bi jih
   pobarvala zgornja vrstica in napis na poudarjenem gumbu bi izginil. */
.ge-article a.ge-btn { color: var(--ge-text); }
.ge-article a.ge-btn--primary { color: var(--ge-accent-ink); }
.ge-article a.ge-artcard { color: inherit; }

.ge-article .lead {
  font-size: 19.5px;
  line-height: 1.6;
  color: var(--ge-text);
}

.ge-article ul, .ge-article ol { padding-left: 22px; }
.ge-article li { margin: 0 0 7px; }

.ge-artkicker {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ge-text-3);
  margin: 0 0 4px;
}

.ge-artkicker a { color: var(--ge-text-3); }
.ge-artkicker .cat { font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ge-accent); }

.ge-artdates {
  margin: 0 0 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ge-line);
  font-size: 13.5px;
  color: var(--ge-text-3);
}

.artfig {
  margin: 24px 0 22px;
  padding: 16px 16px 12px;
  background: var(--ge-surface);
  border: 1px solid var(--ge-line);
  border-radius: var(--ge-r-lg);
}

.artfig svg { display: block; width: 100%; height: auto; }

.artfig figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ge-text-3);
}

/* Slike v člankih uporabljajo barve teme. */
.artfig .ax, .ge-artcard__ill .ax { stroke: var(--ge-line); stroke-width: 1; fill: none; }
.artfig .ln-pv, .ge-artcard__ill .ln-pv { stroke: var(--ge-pv); stroke-width: 2; fill: none; stroke-linejoin: round; }
.artfig .ln-load, .ge-artcard__ill .ln-load { stroke: var(--ge-load); stroke-width: 2; fill: none; stroke-linejoin: round; }
.artfig .fill-a, .ge-artcard__ill .fill-a { fill: var(--ge-batt-soft); stroke: none; }
.artfig .fill-a2, .ge-artcard__ill .fill-a2 { fill: var(--ge-batt-soft); stroke: var(--ge-batt); stroke-width: 1.2; }
.artfig .fill-b, .ge-artcard__ill .fill-b { fill: var(--ge-load-soft); stroke: none; }
.artfig .box, .ge-artcard__ill .box { fill: var(--ge-surface-2); stroke: var(--ge-line); stroke-width: 1.5; }
.artfig .dash, .ge-artcard__ill .dash { stroke: var(--ge-text-3); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.artfig .pipe, .ge-artcard__ill .pipe { fill: var(--ge-grid-soft); stroke: var(--ge-grid); stroke-width: 1.5; }
.artfig .pipe.thin, .ge-artcard__ill .pipe.thin { fill: var(--ge-grid-soft); }
.artfig .arw, .ge-artcard__ill .arw { stroke: var(--ge-grid); stroke-width: 1.8; fill: none; }
.artfig .bar, .ge-artcard__ill .bar { fill: var(--ge-neutral-soft); stroke: var(--ge-line); stroke-width: 1; }
.artfig .bar.cheap, .ge-artcard__ill .bar.cheap { fill: var(--ge-batt-soft); stroke: var(--ge-batt); }
.artfig .bar.exp, .ge-artcard__ill .bar.exp { fill: var(--ge-warn-soft); stroke: var(--ge-warn); }
.artfig .seg, .ge-artcard__ill .seg { stroke: var(--ge-line); stroke-width: 1; }
.artfig .seg.s1, .ge-artcard__ill .seg.s1 { fill: var(--ge-grid-soft); }
.artfig .seg.s2, .ge-artcard__ill .seg.s2 { fill: var(--ge-neutral-soft); }
.artfig .seg.s3, .ge-artcard__ill .seg.s3 { fill: var(--ge-batt-soft); stroke: var(--ge-batt); }
.artfig .t, .ge-artcard__ill .t { font-family: var(--ge-sans); font-size: 12px; fill: var(--ge-text-3); }
.artfig .t.lab, .ge-artcard__ill .t.lab { font-size: 12.5px; fill: var(--ge-text-2); }
.artfig .t.big, .ge-artcard__ill .t.big { font-family: var(--ge-mono); font-size: 22px; fill: var(--ge-text); }

.ge-artcta {
  margin: 30px 0 8px;
  padding: 20px 22px;
  background: var(--ge-accent-soft);
  border: 1px solid var(--ge-accent);
  border-radius: var(--ge-r-lg);
  display: flex;
  gap: 14px 20px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.ge-artcta p { margin: 0; font-size: 15.5px; color: var(--ge-text); max-width: 42ch; }

ul.artsrc { list-style: none; padding-left: 0; }
ul.artsrc li {
  margin: 0 0 10px;
  padding-left: 15px;
  position: relative;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ge-text-3);
}
ul.artsrc li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ge-line);
}

.ge-artrel { margin: 38px 0 0; padding-top: 26px; border-top: 1px solid var(--ge-line); }
.ge-artrel h2 { margin-top: 0; font-size: 19px; }
.ge-artrel .ge-artgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .ge-artgrid { grid-template-columns: 1fr; gap: 14px; }
  .ge-artrel .ge-artgrid { grid-template-columns: 1fr; }
  .ge-article { font-size: 16.5px; }
  .ge-article .lead { font-size: 18px; }
  .ge-article h2 { font-size: 20px; }
  .artfig { padding: 12px 12px 10px; }
  .ge-artcta { padding: 16px 18px; }
}

/* Pregled /blog: opomba pod seznamom in stanje brez objavljenih člankov. */
.ge-artnote {
  max-width: 74ch;
  margin: 26px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ge-text-3);
}

.ge-blogempty {
  padding: 26px 24px;
  border: 1px dashed var(--ge-line);
  border-radius: var(--ge-r-lg);
  background: var(--ge-surface-2);
  max-width: 62ch;
}

.ge-blogempty p { margin: 0 0 12px; font-size: 16px; color: var(--ge-text-2); }
.ge-blogempty p:first-child { color: var(--ge-text); font-weight: 600; }
.ge-blogempty p:last-child { margin: 18px 0 0; }

/* Razčlenitev razlike cen: v HTML, ne v sliki, da se besedilo na telefonu
   ne pomanjša skupaj z risbo. Deleži so ponazoritev in so zapisani v članku. */
.decomp__t { margin: 0 0 10px; font-size: 14.5px; font-weight: 600; color: var(--ge-text-2); }

.decomp__bar {
  display: flex;
  height: 30px;
  border: 1px solid var(--ge-line);
  border-radius: var(--ge-r);
  overflow: hidden;
}

.decomp__bar span { display: block; height: 100%; }
.decomp__key {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 14px;
  color: var(--ge-text-2);
}
.decomp__key li { display: flex; align-items: center; gap: 7px; margin: 0; }
.decomp__key i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--ge-line); }

.decomp__bar span + span { border-left: 1px solid var(--ge-surface); }
.decomp .l1 { background: var(--ge-neutral); }
.decomp .l2 { background: var(--ge-grid); }
.decomp .l3 { background: var(--ge-warn); }
.decomp .l4 { background: var(--ge-batt); }

/* Na ozkem zaslonu se risba pomanjša, napisi v njej pa morajo ostati berljivi. */
@media (max-width: 700px) {
  .artfig .t { font-size: 19px; }
  .artfig .t.lab { font-size: 20px; }
  .artfig .t.big { font-size: 34px; }
}

/* --- 17. Javni obrazci in skupni gradniki predstavitve --------------------
   Javne strani imajo enoten obrazec: 16 px besedilo, enaka višina vnosov,
   robovi z zadostnim kontrastom, oznaka nad poljem. Vnosi niso v pisavi za
   kodo; števke so poravnane z font-variant-numeric. Administrativne strani
   ohranijo zgoščeno obliko iz razdelka 8.
   -------------------------------------------------------------------------- */

body.ge-public .ge-fields { gap: 16px 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
body.ge-public .ge-field { gap: 6px; }
body.ge-public .ge-field > label,
body.ge-public .ge-label { font-size: 15px; font-weight: 600; color: var(--ge-text); line-height: 1.35; }
body.ge-public .ge-field > label .ge-opt { font-weight: 400; color: var(--ge-text-3); }
body.ge-public .ge-input,
body.ge-public .ge-field input,
body.ge-public .ge-field select,
body.ge-public .ge-field textarea {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--ge-line-input);
  border-radius: var(--ge-r-sm);
  background: var(--ge-surface);
  color: var(--ge-text);
  font-family: var(--ge-sans);
  font-size: 16px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
body.ge-public .ge-field textarea { min-height: 120px; resize: vertical; }
body.ge-public .ge-field input:hover,
body.ge-public .ge-field select:hover,
body.ge-public .ge-field textarea:hover { border-color: var(--ge-text-2); }
body.ge-public .ge-field input:focus,
body.ge-public .ge-field select:focus,
body.ge-public .ge-field textarea:focus {
  outline: none;
  border-color: var(--ge-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ge-accent) 22%, transparent);
}
body.ge-public .ge-field [aria-invalid="true"] { border-color: var(--ge-danger); }
body.ge-public .ge-unit input { padding-right: 64px; }
body.ge-public .ge-unit span { right: 12px; font-size: 14px; color: var(--ge-text-2); }
body.ge-public .ge-hint { font-size: 14px; line-height: 1.5; color: var(--ge-text-2); }
body.ge-public .ge-field__err { font-size: 14px; line-height: 1.45; color: var(--ge-danger); }

body.ge-public .ge-card__head { padding: 16px 20px; }
body.ge-public .ge-card__head h2,
body.ge-public .ge-card__head h3 { font-size: 18px; letter-spacing: -.012em; }
body.ge-public .ge-card__head p { margin-top: 3px; font-size: 14.5px; color: var(--ge-text-2); }
body.ge-public .ge-card__body { padding: 18px 20px 20px; }

/* Gumb za izbiro datotek: slovenski napis, dostopen s tipkovnico. */
.ge-filebtn { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ge-filebtn input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ge-filebtn input[type="file"]:focus-visible + .ge-btn { box-shadow: var(--ge-focus); }
.ge-filebtn__name { font-size: 15px; color: var(--ge-text-2); }

/* Besedilni bloki in razdelki predstavitvenih strani. */
.ge-prose { max-width: 70ch; color: var(--ge-text-2); font-size: 17px; line-height: 1.65; }
.ge-prose p { margin: 0 0 14px; }
.ge-prose strong { color: var(--ge-text); }

.ge-sec { padding-top: 34px; }
.ge-sec__head { max-width: 720px; margin-bottom: 20px; }
body.ge-public .ge-sec__head h2 { font-size: clamp(23px, 2.4vw, 28px); letter-spacing: -.02em; line-height: 1.2; }
.ge-sec__head p { margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: var(--ge-text-2); }
.ge-eyebrow { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ge-accent); }

.ge-tile { padding: 22px 24px; background: var(--ge-surface); border: 1px solid var(--ge-line);
  border-radius: var(--ge-r-lg); box-shadow: var(--ge-shadow); }
body.ge-public .ge-tile h3 { font-size: 18.5px; letter-spacing: -.012em; margin-bottom: 8px; }
.ge-tile p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; color: var(--ge-text-2); }
.ge-tile p:last-child { margin-bottom: 0; }
.ge-tiles { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ge-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ge-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ge-check li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.55; color: var(--ge-text-2); }
.ge-check li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 14px; height: 8px;
  border-left: 2.5px solid var(--ge-accent); border-bottom: 2.5px solid var(--ge-accent); transform: rotate(-45deg); }
.ge-check--muted li::before { border-color: var(--ge-text-3); width: 10px; height: 0; border-left: 0; transform: none; top: .8em; }

.ge-steps-row { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: korak; }
.ge-steps-row li { list-style: none; position: relative; padding: 22px 22px 22px 70px; background: var(--ge-surface);
  border: 1px solid var(--ge-line); border-radius: var(--ge-r-lg); box-shadow: var(--ge-shadow); counter-increment: korak; }
.ge-steps-row li::before { content: counter(korak); position: absolute; left: 22px; top: 20px; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--ge-accent-soft); color: var(--ge-accent); font-weight: 650; font-size: 16px; }
.ge-steps-row { margin: 0; padding: 0; }
.ge-steps-row b { display: block; font-size: 17px; color: var(--ge-text); margin-bottom: 4px; }
.ge-steps-row span { font-size: 15.5px; line-height: 1.55; color: var(--ge-text-2); }

.ge-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center;
  padding: 24px 26px; background: var(--ge-accent-soft); border: 1px solid color-mix(in srgb, var(--ge-accent) 30%, var(--ge-line));
  border-radius: var(--ge-r-lg); }
body.ge-public .ge-callout h3 { font-size: 19px; margin-bottom: 6px; }
.ge-callout p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ge-text-2); max-width: 64ch; }
.ge-callout__go { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.ge-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 650; letter-spacing: .02em; background: var(--ge-warn-soft); color: var(--ge-warn);
  border: 1px solid color-mix(in srgb, var(--ge-warn) 30%, transparent); }
.ge-tag--accent { background: var(--ge-accent-soft); color: var(--ge-accent); border-color: color-mix(in srgb, var(--ge-accent) 30%, transparent); }

/* Primerjalna tabela storitev; na telefonu se pomika vodoravno, prvi stolpec ostane viden. */
.ge-cmpwrap { overflow-x: auto; border: 1px solid var(--ge-line); border-radius: var(--ge-r-lg); background: var(--ge-surface); }
.ge-cmptbl { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15.5px; }
.ge-cmptbl th, .ge-cmptbl td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ge-line-soft); }
.ge-cmptbl thead th { font-size: 14px; font-weight: 650; color: var(--ge-text); background: var(--ge-surface-2); border-bottom: 1px solid var(--ge-line); }
.ge-cmptbl tbody th { font-weight: 600; color: var(--ge-text); width: 26%; position: sticky; left: 0; background: var(--ge-surface); }
.ge-cmptbl td { color: var(--ge-text-2); }
.ge-cmptbl tr:last-child th, .ge-cmptbl tr:last-child td { border-bottom: 0; }
.ge-cmptbl .is-main { background: color-mix(in srgb, var(--ge-accent-soft) 60%, var(--ge-surface)); }

/* Pogosta vprašanja */
.ge-faq { display: grid; gap: 10px; max-width: 860px; }
.ge-faq details { background: var(--ge-surface); border: 1px solid var(--ge-line); border-radius: var(--ge-r); }
.ge-faq summary { cursor: pointer; padding: 15px 18px; font-size: 16.5px; font-weight: 600; color: var(--ge-text); list-style-position: outside; }
.ge-faq details[open] summary { border-bottom: 1px solid var(--ge-line-soft); }
.ge-faq details > div { padding: 14px 18px 16px; font-size: 16px; line-height: 1.6; color: var(--ge-text-2); }
.ge-faq details > div p { margin: 0 0 10px; }

/* Obvestila obrazca: uspeh šele po potrditvi strežnika, napaka ohrani vnos. */
.ge-alert { padding: 14px 16px; border-radius: var(--ge-r); border: 1px solid var(--ge-line); font-size: 16px; line-height: 1.55; }
.ge-alert--ok { background: var(--ge-accent-soft); border-color: color-mix(in srgb, var(--ge-accent) 35%, transparent); color: var(--ge-text); }
.ge-alert--err { background: var(--ge-danger-soft); border-color: color-mix(in srgb, var(--ge-danger) 40%, transparent); color: var(--ge-text); }
.ge-alert--info { background: var(--ge-surface-2); color: var(--ge-text-2); }
.ge-alert--warn { background: var(--ge-warn-soft); border-color: color-mix(in srgb, var(--ge-warn) 35%, transparent); color: var(--ge-text); }
.ge-alert b { color: var(--ge-text); }

/* Skupna noga javnih strani (izriše jo shell.js). */
.ge-pubfoot__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 22px 34px; width: 100%; }
.ge-pubfoot__brand { font-size: 15px; color: var(--ge-text-2); max-width: 46ch; line-height: 1.55; }
.ge-pubfoot__brand b { display: block; color: var(--ge-text); font-size: 16px; margin-bottom: 4px; }
.ge-pubfoot nav { display: flex; flex-direction: column; gap: 8px; }
.ge-pubfoot nav b { font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--ge-text-3); }
.ge-pubfoot nav a { font-size: 15px; color: var(--ge-text-2); }
.ge-pubfoot nav a:hover { color: var(--ge-accent); }
.ge-pubfoot__legal { width: 100%; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--ge-line-soft); font-size: 14px; color: var(--ge-text-3); }

@media (max-width: 960px) {
  .ge-tiles, .ge-steps-row { grid-template-columns: minmax(0, 1fr); }
  .ge-tiles--2 { grid-template-columns: minmax(0, 1fr); }
  .ge-callout { grid-template-columns: minmax(0, 1fr); }
  .ge-callout__go { justify-content: flex-start; }
  .ge-pubfoot__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ge-pubfoot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ge-callout__go .ge-btn { width: 100%; }
  .ge-sec { padding-top: 26px; }
}

/* --- 18. Javna lupina: glava, gumbi in noga -----------------------------
   Mirnejša glava (prosojna, brez okvirjev v navigaciji), zaobljeni gumbi
   enake višine na vseh javnih straneh in noga s preklopom teme.
   -------------------------------------------------------------------------- */

body.ge-public .ge-top { background: color-mix(in srgb, var(--ge-bg) 84%, transparent); border-bottom-color: var(--ge-line); }
body.ge-public .ge-top__inner { max-width: 1200px; padding: 12px 24px; }
body.ge-public .ge-topnav { gap: 4px; margin-left: 22px; }
body.ge-public .ge-topnav a { padding: 8px 12px; font-size: 15px; font-weight: 500; color: var(--ge-text-2); border-radius: 999px; }
body.ge-public .ge-topnav a:hover { background: transparent; color: var(--ge-text); }
body.ge-public .ge-topnav a[aria-current] { background: transparent; color: var(--ge-text); font-weight: 600; }

body.ge-public .ge-btn { border-radius: 999px; padding: 9px 18px; font-weight: 600;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease; }
body.ge-public .ge-btn:active { transform: scale(.98); }
body.ge-public .ge-btn--lg { padding: 12px 24px; font-size: 16px; border-radius: 999px; min-height: 48px; }
body.ge-public .ge-btn--xl { padding: 15px 30px; font-size: 17px; border-radius: 999px; min-height: 54px; }
body.ge-public .ge-btn:not(.ge-btn--primary) { background: var(--ge-surface); border-color: var(--ge-line); }
body.ge-public .ge-btn:not(.ge-btn--primary):hover { border-color: var(--ge-text-3); background: var(--ge-surface); }
body.ge-public .ge-top__cta { padding: 8px 18px; font-size: 14.5px; min-height: 0; }
@media (prefers-reduced-motion: reduce) { body.ge-public .ge-btn { transition: none; } body.ge-public .ge-btn:active { transform: none; } }

.ge-pubfoot__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.ge-pubfoot__legal p { margin: 0; max-width: 80ch; }
.ge-themetoggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--ge-line);
  border-radius: 999px; background: var(--ge-surface); color: var(--ge-text-2); font: inherit; font-size: 14px; cursor: pointer; }
.ge-themetoggle:hover { color: var(--ge-text); border-color: var(--ge-text-3); }
.ge-themetoggle svg { width: 15px; height: 15px; stroke-width: 1.8; }

/* Ilustracije člankov: enak slog na karticah — tanke črte, sans napisi,
   tok energije iz baterije v barvi baterije. */
.ge-artcard__ill .pipe, .ge-artcard__ill .pipe.thin { fill: var(--ge-batt-soft); stroke: var(--ge-batt); }
.ge-artcard__ill .arw { stroke: var(--ge-batt); }
.ge-artcard__ill .t.big { font-family: var(--ge-sans); font-weight: 600; }
/* Ilustracije na karticah člankov v enotni paleti: poraba v sivini besedila,
   sončna proizvodnja in baterija v zelenomodrem, draga ura v toplem odtenku
   (ista pomenska barva kot strošek ali negativna vrednost v grafih). */
.ge-artcard__ill .ln-load { stroke: var(--ge-text-2); }
.ge-artcard__ill .ln-pv { stroke: var(--ge-accent); }
.ge-artcard__ill .fill-a { fill: var(--ge-batt-soft); }
.ge-artcard__ill .bar { fill: var(--ge-surface-3); stroke: none; }
.ge-artcard__ill .bar.cheap { fill: var(--ge-batt-soft); stroke: var(--ge-batt); }
.ge-artcard__ill .bar.exp { fill: rgba(180, 83, 42, .12); stroke: #B4532A; }
:root[data-theme="dark"]:not(:has(body[data-ge-layout="public"])) .ge-artcard__ill .bar.exp { fill: rgba(232, 140, 100, .16); stroke: #E08C64; }
/* Enak bočni odmik glave, vsebine in noge na vseh javnih straneh. */
@media (max-width: 900px) {
  body.ge-public .ge-pub .ge-content { padding-left: 24px; padding-right: 24px; }
  body.ge-public .ge-pagehead { padding-left: 24px; padding-right: 24px; }
  body.ge-public .ge-pubfoot__inner { padding: 24px 24px 32px; }
}
@media (max-width: 640px) {
  body.ge-public .ge-top__inner { padding: 10px 18px; }
  body.ge-public .ge-pub .ge-content { padding-left: 18px; padding-right: 18px; }
  body.ge-public .ge-pagehead { padding-left: 18px; padding-right: 18px; }
  body.ge-public .ge-pubfoot__inner { padding: 22px 18px 30px; }
}

/* --- 19. Enotna tema javnih strani ----------------------------------------
   Isti videz kot naslovnica: temna glava v tonu fotografije, naslov strani v
   temnem pasu, toplo belo nadaljevanje, ena pisava (Inter z optično
   velikostjo), oglati gumbi, kartice z robom brez senc in temna noga.
   Podatkovne barve grafov ostanejo iste. Nadzorne strani tega ne dobijo.
   -------------------------------------------------------------------------- */

body.ge-public {
  --pub-max: 1264px;
  --pub-gut: 40px;
  --pub-dark: #0F151C;
  --pub-dark-ink: #FFFFFF;
  --pub-dark-ink-2: #B3BDC5;
  --pub-dark-ink-3: #8E99A3;
  --pub-dark-line: rgba(255, 255, 255, .12);
  --ge-pub-max: calc(var(--pub-max) + 2 * var(--pub-gut));
  --ge-focus: 0 0 0 2px #F7F6F2, 0 0 0 4px #0F6E6A;
  color-scheme: light;
  font-optical-sizing: auto;
  font-variant-numeric: normal;
  font-size: 17px;
}
body[data-ge-page="clanek"] { --ge-pub-max: 1040px; }

/* Glava: temna, logotip z besedo, navigacija na sredini, obrobljen gumb. */
body.ge-public .ge-top { background: var(--pub-dark); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--pub-dark-ink); }
body.ge-public .ge-top__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  max-width: calc(var(--pub-max) + 2 * var(--pub-gut)); padding: 14px var(--pub-gut); }
body.ge-public .ge-top .ge-brand { grid-column: 1; justify-self: start; gap: 0; color: #fff; font-size: 23px; font-weight: 600; letter-spacing: -.025em; }
body.ge-public .ge-top .ge-brand:hover { text-decoration: none; }
body.ge-public .ge-top .ge-brand__mark { display: none; }
body.ge-public .ge-top .ge-brand__logo { display: block; height: 32px; width: auto; }
body.ge-public .ge-top .ge-brand em { font-style: normal; color: inherit; }
body.ge-public .ge-topnav { grid-column: 2; gap: 40px; margin: 0; }
body.ge-public .ge-topnav a { padding: 6px 0; border-radius: 0; border-bottom: 1px solid transparent; background: transparent;
  color: rgba(255, 255, 255, .82); font-size: 15.5px; font-weight: 400; transition: color .2s ease, border-color .2s ease; }
body.ge-public .ge-topnav a:hover { background: transparent; color: #fff; border-bottom-color: rgba(255, 255, 255, .55); text-decoration: none; }
body.ge-public .ge-topnav a[aria-current] { background: transparent; color: #fff; font-weight: 400; border-bottom-color: #fff; }
body.ge-public .ge-top__end { grid-column: 3; justify-self: end; margin: 0; }
body.ge-public .ge-btn.ge-top__cta { min-height: 44px; padding: 0 22px; background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 6px; font-size: 15px; font-weight: 400; }
body.ge-public .ge-btn.ge-top__cta:hover { background: #fff; color: var(--ge-text); border-color: #fff; }
body.ge-public .ge-top__burger { color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .5); border-radius: 6px; }
body.ge-public .ge-top__burger:hover { background: rgba(255, 255, 255, .08); color: #fff; }
body.ge-public .ge-topmenu { background: var(--pub-dark); border-top: 1px solid var(--pub-dark-line); }
body.ge-public .ge-topmenu__inner { padding: 6px var(--pub-gut) 20px; }
body.ge-public .ge-topmenu a { color: #fff; font-weight: 400; border-bottom-color: var(--pub-dark-line); }
body.ge-public .ge-topmenu a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
body.ge-public .ge-topmenu .ge-btn { background: #F8F7F3; color: var(--ge-text); border-color: #F8F7F3; }
body.ge-public .ge-pub [id] { scroll-margin-top: 96px; }

/* Naslov strani v temnem pasu, ki nadaljuje glavo. */
body.ge-public .ge-pagehead { max-width: none; margin: 0; background: var(--pub-dark); color: var(--pub-dark-ink);
  padding: clamp(48px, 6vw, 96px) max(var(--pub-gut), calc((100% - var(--pub-max)) / 2)) clamp(52px, 6vw, 96px); }
body.ge-public .ge-pagehead h1 { max-width: 18em; margin: 0; color: #fff; font-size: clamp(38px, 4.8vw, 66px); font-weight: 650;
  line-height: 1.02; letter-spacing: -.032em; text-wrap: balance; }
body.ge-public .ge-pagehead p { margin: 22px 0 0; max-width: 46em; color: var(--pub-dark-ink-2); font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; }

/* Vsebina: poravnana z glavo, več zraka. */
body.ge-public .ge-pub .ge-content { max-width: var(--ge-pub-max); padding: clamp(40px, 5vw, 72px) var(--pub-gut) clamp(72px, 8vw, 120px); }
body.ge-public .ge-pub .ge-content > * + * { margin-top: 28px; }
body.ge-public h2 { font-size: clamp(25px, 2.3vw, 32px); font-weight: 600; letter-spacing: -.024em; line-height: 1.15; }
body.ge-public h3 { font-weight: 600; letter-spacing: -.01em; }
body.ge-public .ge-sec { padding-top: clamp(40px, 5vw, 72px); }
body.ge-public .ge-sec__head { margin-bottom: 28px; }
body.ge-public .ge-sec__head h2 { font-size: clamp(28px, 3vw, 42px); font-weight: 650; letter-spacing: -.032em; line-height: 1.08; }
body.ge-public .ge-sec__head p { font-size: 18px; }
body.ge-public .ge-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .26em; color: var(--ge-text-2); }
body.ge-public .ge-prose { font-size: 17.5px; }
body.ge-public .ge-prose a, body.ge-public .ge-hint a, body.ge-public .ge-tile p a, body.ge-public .ge-card p a {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Gumbi: rahlo zaobljeni; glavni temen, drugi obrobljen. */
body.ge-public .ge-btn { border-radius: 6px; font-weight: 500; }
body.ge-public .ge-btn--lg, body.ge-public .ge-btn--xl { border-radius: 6px; }
body.ge-public .ge-btn--primary { background: var(--ge-text); border-color: var(--ge-text); color: #fff; }
body.ge-public .ge-btn--primary:hover { background: #2A2E30; border-color: #2A2E30; color: #fff; }
body.ge-public .ge-btn--primary:active { background: #000; }
body.ge-public .ge-btn:not(.ge-btn--primary):not(.ge-top__cta) { background: transparent; border-color: #C9C4BA; color: var(--ge-text); }
body.ge-public .ge-btn:not(.ge-btn--primary):not(.ge-top__cta):hover { background: transparent; border-color: var(--ge-text); }
body.ge-public .ge-btn:active { transform: translateY(1px); }

/* Kartice, ploščice, koraki, obvestila: rob brez sence, zadržana zaobljenost. */
body.ge-public .ge-card, body.ge-public .ge-tile, body.ge-public .ge-steps-row li, body.ge-public .ge-artcard {
  box-shadow: none; border-color: var(--ge-line); border-radius: 4px; }
body.ge-public .ge-artcard:hover, body.ge-public .ge-artcard:focus-visible { transform: none; box-shadow: none; border-color: var(--ge-text); }
body.ge-public .ge-steps-row li::before { border-radius: 2px; background: var(--ge-text); color: #fff; font-weight: 500; }
body.ge-public .ge-tag { border-radius: 2px; }
body.ge-public .ge-callout { border-radius: 4px; background: var(--ge-surface-2); border-color: var(--ge-line); }
body.ge-public .ge-seg { border-radius: 4px; }
body.ge-public .ge-seg button { border-radius: 3px; }
body.ge-public .ge-seg button[aria-pressed="true"], body.ge-public .ge-seg button.is-active { background: var(--ge-text); color: #fff; }
body.ge-public .ge-tabs button[aria-selected="true"] { border-bottom-color: var(--ge-text); }
body.ge-public .ge-check li::before { border-color: var(--ge-accent); }

/* Članek: naslov v istem merilu kot naslovi strani, širši stolpec za branje. */
body.ge-public .ge-article { padding-top: clamp(16px, 3vw, 40px); }
body.ge-public .ge-article h1 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 650; line-height: 1.04; letter-spacing: -.036em; margin: 14px 0 22px; }
body.ge-public .ge-article h2 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.024em; margin: 48px 0 14px; }
body.ge-public .ge-article .lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--ge-text-2); }
body.ge-public .ge-article a:not(.ge-btn):not(.ge-artcard) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.ge-public .ge-artkicker .cat { letter-spacing: .14em; }

/* Ilustracije (kartice in slike v člankih) v istem pomenu barv kot graf na naslovnici:
   sončna elektrarna jantarna, odjem in baterija zelenomodra, poraba temno siva. */
body.ge-public .ge-artcard__ill .ln-pv, body.ge-public .artfig .ln-pv { stroke: #C98612; }
body.ge-public .ge-artcard__ill .fill-a, body.ge-public .artfig .fill-a { fill: rgba(246, 190, 85, .34); }
body.ge-public .ge-artcard__ill .ln-load, body.ge-public .artfig .ln-load { stroke: #4F5455; }
body.ge-public .artfig .fill-b { fill: rgba(22, 138, 134, .20); }
body.ge-public .artfig { border-radius: 4px; }
body.ge-public .op-toc a { border-radius: 2px; }
/* Starejši ovoj simulatorja in strani cen ima na ozkem zaslonu svoj odmik; rob določa lupina. */
body.ge-public .ge-content > .wrap { padding: 0; }

/* Noga: temna, zaključi stran tako kot jo glava začne. */
body.ge-public .ge-pubfoot { background: var(--pub-dark); border-top: 0; color: var(--pub-dark-ink-2);
  --ge-text: #FFFFFF; --ge-text-2: #C9D1D7; --ge-text-3: var(--pub-dark-ink-3); --ge-line: var(--pub-dark-line);
  --ge-line-soft: var(--pub-dark-line); --ge-accent: #FFFFFF; --ge-surface: transparent; }
body.ge-public .ge-pubfoot__inner { max-width: calc(var(--pub-max) + 2 * var(--pub-gut)); padding: clamp(48px, 6vw, 80px) var(--pub-gut) 36px; }
body.ge-public .ge-pubfoot__brand { color: var(--pub-dark-ink-2); }
body.ge-public .ge-pubfoot__brand b { display: block; margin-bottom: 10px; color: #fff; font-size: 23px; font-weight: 600; letter-spacing: -.025em; }
.ge-pubfoot__logo { display: block; height: 34px; width: auto; margin-bottom: 16px; }
body.ge-public .ge-pubfoot nav b { color: var(--pub-dark-ink-3); font-weight: 500; letter-spacing: .2em; font-size: 12px; }
body.ge-public .ge-pubfoot nav a { color: #DDE3E7; }
body.ge-public .ge-pubfoot nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
body.ge-public .ge-pubfoot__legal { margin-top: 32px; padding-top: 22px; color: var(--pub-dark-ink-3); }
body.ge-public .ge-pubfoot__legal a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ge-pubfoot__mail { display: block; width: fit-content; margin-top: 14px; }
body.ge-public .ge-pubfoot__mail { color: #fff; font-size: 15.5px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
body.ge-public .ge-themetoggle { display: none; }
body.ge-public .ge-pubfoot :focus-visible, body.ge-public .ge-top :focus-visible, body.ge-public .ge-pagehead :focus-visible {
  outline: 2px solid #fff; outline-offset: 3px; box-shadow: none; }

/* Umirjen pojav vsebine ob pomikanju (shell.js). Skrije se samo tisto, kar je
   ob nalaganju pod robom zaslona; brez JavaScripta ali ob zmanjšanem gibanju
   je vse vidno. */
.ge-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--ge-reveal-delay, 0ms); }
.ge-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ge-reveal { opacity: 1; transform: none; transition: none; } }
@media print { .ge-reveal { opacity: 1 !important; transform: none !important; } }

@media (max-width: 1100px) {
  body.ge-public .ge-topnav { gap: 28px; }
}
@media (max-width: 900px) {
  body.ge-public { --pub-gut: 28px; }
  body.ge-public .ge-top__inner { grid-template-columns: 1fr auto; }
  body.ge-public .ge-top__end { grid-column: 2; }
  body.ge-public .ge-pub .ge-content { padding-left: var(--pub-gut); padding-right: var(--pub-gut); }
  body.ge-public .ge-pubfoot__inner { padding-left: var(--pub-gut); padding-right: var(--pub-gut); }
}
@media (max-width: 640px) {
  body.ge-public { --pub-gut: 20px; font-size: 16px; }
  body.ge-public .ge-top__inner { padding: 12px var(--pub-gut); }
  body.ge-public .ge-pagehead { padding-left: var(--pub-gut); padding-right: var(--pub-gut); }
  body.ge-public .ge-pagehead h1 { font-size: clamp(34px, 9.6vw, 42px); }
  body.ge-public .ge-top .ge-brand__logo { height: 28px; }
}

/* --- 20. Uporabniška pot in Moj energetski načrt -----------------------------
   Vrstica poti (cilj in koraki: orodje → načrt → strokovna preveritev), oznake
   izvora vrednosti (izmerjeno / vneseno / ocena / predpostavka) in gradniki
   strani /moj-energetski-nacrt. Podatki so v projekt.js.
   -------------------------------------------------------------------------- */

.ge-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* min-width 0: v mreži (npr. stran Potencial) vrstica ne razširi stolpca; koraki se na telefonu pomikajo vodoravno. */
.ge-pot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 0 22px; padding: 12px 16px; min-width: 0; max-width: 100%;
  background: var(--ge-surface); border: 1px solid var(--ge-line); border-radius: var(--ge-r-lg); }
.ge-pot[hidden] { display: none; }
.ge-pot__cilj { margin: 0; font-size: 15px; font-weight: 600; color: var(--ge-text); }
.ge-pot__cilj span { display: block; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ge-text-3); }
.ge-pot__koraki { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; flex: 1 1 auto; min-width: 0; }
.ge-pot__koraki li { display: flex; align-items: center; }
.ge-pot__koraki li + li::before { content: ""; width: 18px; height: 1px; margin-right: 6px; background: var(--ge-line); }
.ge-pot__koraki a, .ge-pot__koraki li > span { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px;
  border-radius: 999px; font-size: 14.5px; color: var(--ge-text-2); text-decoration: none; }
.ge-pot__koraki a:hover { background: var(--ge-surface-2); color: var(--ge-text); }
.ge-pot__st { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: 650;
  background: var(--ge-surface-2); color: var(--ge-text-2); border: 1px solid var(--ge-line); }
.ge-pot__koraki .is-trenutno > span { color: var(--ge-text); font-weight: 600; background: var(--ge-accent-soft); }
.ge-pot__koraki .is-trenutno .ge-pot__st { background: var(--ge-accent); color: #fff; border-color: var(--ge-accent); }
.ge-pot__koraki .is-opravljeno .ge-pot__st { background: var(--ge-accent-soft); color: var(--ge-accent); border-color: transparent; }
.ge-pot__menjaj { font-size: 14px; color: var(--ge-text-2); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .ge-pot { gap: 8px; padding: 10px 12px; }
  .ge-pot__cilj { flex: 1 1 auto; }
  .ge-pot__koraki { order: 3; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding-bottom: 2px; scrollbar-width: none; width: 100%; }
  .ge-pot__koraki li + li::before { width: 10px; margin-right: 4px; }
  .ge-pot__koraki a, .ge-pot__koraki li > span { white-space: nowrap; font-size: 14px; }
  .ge-pot__menjaj { margin-left: auto; }
}
@media print { .ge-pot { display: none; } }

/* Oznaka izvora vrednosti. */
.ge-izvor { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .01em; white-space: nowrap; border: 1px solid var(--ge-line); background: var(--ge-surface-2); color: var(--ge-text-2); }
.ge-izvor--izmerjeno { background: var(--ge-accent-soft); color: var(--ge-accent); border-color: color-mix(in srgb, var(--ge-accent) 30%, transparent); }
.ge-izvor--vneseno { background: var(--ge-surface); color: var(--ge-text); }
.ge-izvor--ocena { background: color-mix(in srgb, var(--ge-pv) 12%, var(--ge-surface)); color: color-mix(in srgb, var(--ge-pv) 80%, var(--ge-text));
  border-color: color-mix(in srgb, var(--ge-pv) 30%, transparent); }
.ge-izvor--predpostavka { background: var(--ge-warn-soft); color: var(--ge-warn); border-color: color-mix(in srgb, var(--ge-warn) 30%, transparent); }

/* Povezava »Moj načrt« v glavi, ko ima zavihek shranjen izračun. */
body.ge-public .ge-topnav a.ge-topplan, body.ge-public .ge-topmenu a.ge-topplan { color: var(--ge-accent); font-weight: 600; }