/* Voteum · teljes képernyős bemutató — a mélyebb jelenetek app-felületei.
   A demo.css alapjaira épül (ugyanazok a tokenek, ugyanaz a telefon- és
   kezelőfelület-váz); itt csak azok a képernyők élnek, amik a rövid landing-
   bemutatóban nem szerepelnek: a teljes hitelesítés, a bejelentés-felvétel, a
   segélyhívó, a közösségi költségvetés hét fázisa és a vezetői analitika.
   Minden osztály `d-` előtaggal, hogy a két bemutató sose lépjen egymásra. */

/* A rács `fr` sávjának alapértelmezett alsó határa `auto`, vagyis a tartalom
   min-content szélessége. Egy hosszabb feliratú menü vagy gombsor emiatt
   szétnyomja a saját hasábját, és a másik — ahol épp a lényeg van —
   összemegy a felére. A mélybemutató minden kétsávos elrendezése ezért
   nulla alsó határral megy. Csak ezt a lapot érinti: a deep.css-t a landing
   nem tölti be. */
.r-root .r-two{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);}

/* ── közös apróságok ─────────────────────────────────────── */
/* Az ikonkészlet 24×24-es rajzokat ad, méret nélkül; ahol nem szabunk neki
   határt, ott a nézetdoboz kitölti a szülőt — és egy 16 pixelesnek szánt jel
   féloldalas vízjelként ül a kártya közepén. Ez az alapértelmezés minden
   `d-` felületre. */
.d-assign>svg,.d-setrow>svg,.d-cat>svg,.d-ok>svg,.d-field>svg{width:16px;height:16px;flex:0 0 16px;}
.d-cat>svg{width:13px;height:13px;flex:0 0 13px;}
.d-field{display:flex;align-items:center;gap:8px;border-radius:9px;border:1px solid var(--line2);background:#fff;
  padding:12px 14px;font-size:14.5px;color:var(--ink);min-height:46px;}
.d-field.on{border-color:var(--ind2);box-shadow:0 0 0 3px rgba(91,127,210,.16);}
.d-field .m-ph{position:static;color:var(--muted);}
.d-lab{font:700 10.5px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:16px 0 6px;}
.d-lab:first-child{margin-top:0;}
.d-note{font-size:11.5px;line-height:1.55;color:var(--muted);margin-top:10px;}
.d-note b{color:var(--soft);font-weight:600;}
/* Gombok — kontraszt.
   A „még nem aktív" állapot korábban halvány szürke alapon halvány szürke
   szöveg volt: nem az derült ki belőle, hogy a gomb vár valamire, hanem az,
   hogy a felirat olvashatatlan. Az inaktív gomb mostantól ugyanolyan olvasható,
   csak halkabb: sötét tinta világos alapon, kerettel. */
.d-btn{display:block;width:100%;border-radius:9px;border:1px solid var(--line2);padding:13px;
  font-size:15px;font-weight:600;background:rgba(255,255,255,.72);color:var(--soft);
  transition:background .2s,color .2s,border-color .2s;}
.d-btn.ready{background:var(--ink);border-color:var(--ink);color:#fff;}
.d-btn.hit{transform:scale(.985);}
.d-ghost{display:block;width:100%;border-radius:9px;border:1px solid var(--line2);background:rgba(255,255,255,.72);
  padding:13px;font-size:14px;font-weight:600;color:var(--ink2);margin-top:10px;}
/* Fénykép: valódi feltöltés-gomb, nem álbélyegkép. */
.d-upload{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border-radius:9px;
  border:1.5px dashed var(--line2);background:rgba(255,255,255,.6);padding:15px;font-size:14px;font-weight:600;
  color:var(--deep);transition:border-color .2s,background .2s;}
.d-upload svg{width:17px;height:17px;flex:0 0 17px;}
.d-upload.hit{border-color:var(--ind2);background:var(--isoft);box-shadow:0 0 0 3px rgba(91,127,210,.18);}
.d-files{margin-top:9px;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s;}
.d-files.show{opacity:1;transform:none;}
.d-files span{display:inline-flex;align-items:center;gap:7px;border-radius:8px;background:var(--em50);
  border:1px solid var(--em300);padding:7px 11px;font-size:12.5px;color:#065F46;}
.d-files svg{width:14px;height:14px;flex:0 0 14px;stroke-width:2.4;color:var(--em);}
.d-ok{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--em);opacity:0;
  transform:translateY(4px);transition:opacity .3s,transform .3s;}
.d-ok.show{opacity:1;transform:none;}
.d-ok svg{width:15px;height:15px;stroke-width:2.4;}

/* ── 01 · hitelesítés ────────────────────────────────────── */
.m-pane.d-mid{display:flex;flex-direction:column;justify-content:center;}
.d-code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:4px;}
.d-code i{display:grid;place-items:center;height:56px;border-radius:9px;border:1px solid var(--line2);background:#fff;
  font:600 24px/1 var(--sans);font-style:normal;color:var(--ink);}
.d-code i.on{border-color:var(--ind2);}
.d-why{border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.66);padding:18px;margin-top:6px;}
.d-why h5{margin:0 0 12px;font-size:16px;font-weight:600;letter-spacing:-.01em;}
.d-wrow{display:flex;gap:11px;align-items:flex-start;padding:9px 0;opacity:0;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s ease;}
.d-wrow.in{opacity:1;transform:none;}
.d-wrow+.d-wrow{border-top:1px solid var(--line);}
.d-wrow span{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:8px;
  background:var(--isoft);color:var(--deep);}
.d-wrow span svg{width:16px;height:16px;}
.d-wrow b{display:block;font-size:13.5px;font-weight:600;}
.d-wrow em{display:block;font-style:normal;font-size:12px;line-height:1.55;color:var(--muted);margin-top:2px;}

/* okmány-beolvasás — a kártya nem szürke csíkhalom, hanem felismerhetően egy
   személyazonosító igazolvány: fejléc, arckép, mezőnevek, chip, és alul a
   gépi olvasású (MRZ) zóna, amit a rendszer az előlappal összevet. */
.d-scan{position:relative;border-radius:10px;background:linear-gradient(#171d29,#0d1119);overflow:hidden;
  height:214px;margin-top:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);}
.d-scan::after{content:"";position:absolute;inset:14px;border-radius:8px;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.26);clip-path:polygon(0 0,32% 0,32% 3%,3% 3%,3% 22%,0 22%,
    0 78%,3% 78%,3% 97%,32% 97%,32% 100%,0 100%,
    100% 100%,68% 100%,68% 97%,97% 97%,97% 78%,100% 78%,
    100% 22%,97% 22%,97% 3%,68% 3%,68% 0,100% 0);}
.d-idcard{position:absolute;left:32px;right:32px;top:36px;height:142px;border-radius:7px;overflow:hidden;
  background:linear-gradient(152deg,#eef2fa 0%,#dbe3f2 46%,#cdd7ec 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.6);
  transform:scale(.93) rotate(-1.4deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.d-scan.lock .d-idcard{transform:none;}
/* fejléc-sáv az ország nevével */
.d-idhead{position:absolute;left:0;right:0;top:0;height:19px;background:linear-gradient(90deg,#2c3a63,#4a5c8d);
  display:flex;align-items:center;padding:0 9px;
  font:600 7px/1 'JetBrains Mono','IBM Plex Mono',monospace;letter-spacing:.2em;color:rgba(255,255,255,.88);}
.d-idhead i{margin-left:auto;display:block;width:16px;height:8px;border-radius:1px;font-style:normal;
  background:linear-gradient(#cf2b3a 33%,#f4f1ea 33% 66%,#2f7a43 66%);}
/* arckép: egy halk vonalas fej, nem szürke doboz */
.d-idphoto{position:absolute;left:11px;top:27px;width:41px;height:52px;border-radius:3px;overflow:hidden;
  background:linear-gradient(#c3ccdf,#aab6cf);box-shadow:inset 0 0 0 1px rgba(30,39,71,.2);}
.d-idphoto::before{content:"";position:absolute;left:50%;top:9px;width:19px;height:22px;margin-left:-9.5px;
  border-radius:50% 50% 46% 46%;background:rgba(44,58,99,.42);}
.d-idphoto::after{content:"";position:absolute;left:50%;bottom:-3px;width:33px;height:22px;margin-left:-16.5px;
  border-radius:50% 50% 0 0;background:rgba(44,58,99,.42);}
/* mezők: név-cimke vékony vonal, alatta az „érték" vastagabb */
.d-idfields{position:absolute;left:60px;right:11px;top:27px;}
.d-idfields u{display:block;height:3px;border-radius:2px;background:rgba(44,58,99,.26);margin-bottom:4px;}
.d-idfields b{display:block;height:6px;border-radius:2px;background:rgba(30,39,71,.48);margin-bottom:9px;}
.d-idfields u.s{width:30%;} .d-idfields b.s{width:54%;}
.d-idfields u.m{width:38%;} .d-idfields b.m{width:72%;}
.d-idchip{position:absolute;left:12px;bottom:26px;width:26px;height:19px;border-radius:3px;
  background:linear-gradient(135deg,#e8c56a,#b8902f);box-shadow:inset 0 0 0 .5px rgba(90,70,20,.5);}
.d-idchip::before,.d-idchip::after{content:"";position:absolute;left:3px;right:3px;height:.5px;
  background:rgba(90,70,20,.55);}
.d-idchip::before{top:6px;} .d-idchip::after{top:12px;}
/* gépi olvasású zóna */
.d-idmrz{position:absolute;left:0;right:0;bottom:0;height:24px;background:rgba(255,255,255,.62);
  border-top:1px solid rgba(44,58,99,.18);padding:4px 10px;
  font:500 6.5px/9px 'JetBrains Mono','IBM Plex Mono',monospace;letter-spacing:.22em;color:rgba(30,39,71,.62);
  white-space:nowrap;overflow:hidden;}
/* hologram-csillanás */
.d-idcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.5) 46%,transparent 56%);}
.d-scanline{position:absolute;left:14px;right:14px;height:2px;
  background:linear-gradient(90deg,transparent,#8FE3C6,transparent);
  box-shadow:0 0 14px 3px rgba(143,227,198,.45);opacity:0;}
.d-scan.busy .d-scanline{opacity:1;}
.d-scanbadge{position:absolute;left:0;right:0;bottom:0;padding:9px 14px;font:600 12px var(--sans);color:#E6EAF5;
  background:linear-gradient(transparent,rgba(8,11,18,.86));display:flex;align-items:center;gap:7px;z-index:2;}
.d-scanbadge svg{width:14px;height:14px;color:#8FE3C6;opacity:0;stroke-width:2.4;}
.d-scan.done .d-scanbadge svg{opacity:1;}
.d-flip{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,11,18,.66);color:#fff;
  font:600 14px var(--sans);opacity:0;transition:opacity .3s;z-index:3;}
.d-scan.flip .d-flip{opacity:1;}

/* élő arckép — vonalas mellkép, nem kitöltött folt: ugyanaz a rajzstílus,
   mint az app ikonjaié. */
.d-face{position:relative;height:250px;border-radius:10px;background:linear-gradient(#171d29,#0d1119);
  overflow:hidden;margin-top:6px;}
.d-bust{position:absolute;left:50%;top:18px;width:166px;height:214px;margin-left:-83px;
  transition:transform .35s ease;}
/* A rajz színét és vonalvastagságát ITT kell megadni, nem az SVG attribútumain:
   a demo.css `.m-root svg{stroke:currentColor;stroke-width:1.6}` szabálya
   ugyanazt az elemet célozza, és a CSS mindig veri a prezentációs attribútumot
   — emiatt a mellkép a sötét dobozon sötét tintával, vagyis láthatatlanul
   rajzolódott ki. */
.d-bust svg{width:100%;height:100%;display:block;fill:none;stroke:#E2E8F6;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;}
.d-bust svg circle{fill:#E2E8F6;stroke:none;}
.d-ring{position:absolute;left:50%;top:10px;width:194px;height:230px;margin-left:-97px;}
.d-ring ellipse{fill:none;stroke:rgba(255,255,255,.18);stroke-width:2.5;}
.d-ring ellipse.p{stroke:#8FE3C6;stroke-linecap:round;}
.d-face .d-scanbadge{background:linear-gradient(transparent,rgba(8,11,18,.9));}

/* DÁP-sor az okmányválasztón: ami hamarosan jön, de már most elmondható */
.d-soon{display:flex;align-items:center;gap:12px;border-radius:12px;border:1px dashed var(--ind2);
  background:rgba(228,233,247,.5);padding:14px 16px;margin-top:4px;}
.d-soon>span{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:9px;
  background:var(--ind2);color:#fff;}
.d-soon>span svg{width:18px;height:18px;}
.d-soon b{display:block;font-size:14.5px;font-weight:600;color:var(--deep);}
.d-soon em{display:block;font-style:normal;font-size:12px;line-height:1.55;color:var(--soft);margin-top:2px;}
.d-soon i{margin-left:auto;flex:none;font-style:normal;font:700 9.5px var(--mono);text-transform:uppercase;
  letter-spacing:.1em;color:#fff;background:var(--deep);border-radius:7px;padding:4px 9px;}

/* kiolvasott adatok + lakcím */
.d-frow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);opacity:0;transform:translateY(5px);transition:opacity .35s,transform .35s;}
.d-frow.in{opacity:1;transform:none;}
.d-frow span{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);}
.d-frow b{font-size:14px;font-weight:600;text-align:right;}
.d-frow.ask{border-bottom-color:var(--ind2);}
.d-frow.ask span{color:var(--deep);}
.d-dist{display:flex;align-items:center;gap:10px;border-radius:10px;background:var(--isoft);color:var(--deep);
  padding:13px 15px;margin-top:14px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;}
.d-dist.show{opacity:1;transform:none;}
.d-dist svg{width:18px;height:18px;flex:0 0 18px;}
.d-dist b{display:block;font-size:14px;font-weight:600;}
.d-dist em{display:block;font-style:normal;font-size:11.5px;color:var(--deep);opacity:.78;}

/* várakozás + eredmény */
.d-wait{text-align:center;padding:10px 0;}
.d-clock{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 16px;border-radius:50%;
  background:var(--isoft);color:var(--deep);}
.d-clock svg{width:28px;height:28px;}
.d-badge{display:grid;place-items:center;width:74px;height:74px;margin:0 auto 16px;border-radius:50%;
  background:var(--em100);color:var(--em);box-shadow:0 0 0 8px var(--em50);}
.d-badge svg{width:34px;height:34px;stroke-width:2;}

/* jegyzői oldal: hitelesítési kérelmek */
.d-vrow{display:grid;grid-template-columns:34px 1fr auto auto;align-items:center;gap:13px;padding:13px 16px;
  border:1px solid var(--line);border-radius:9px;background:#fff;margin-bottom:9px;transition:border-color .25s,background .25s;}
.d-vrow.hit{border-color:var(--ind2);box-shadow:0 0 0 3px rgba(91,127,210,.16);}
.d-vrow.ok{border-color:var(--em300);background:var(--em50);}
.d-vav{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--isoft);
  color:var(--deep);font:700 12px var(--sans);}
.d-vrow>div b{display:block;font-size:13.5px;font-weight:600;}
.d-vrow>div span{display:block;font-size:11.5px;color:var(--muted);}
.d-vchip{font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:4px 8px;border-radius:7px;
  background:rgba(18,26,46,.06);color:var(--soft);}
.d-vchip.ok{background:var(--em100);color:var(--em);}
.d-vbtns{display:flex;gap:7px;}
.d-vbtns button{border-radius:7px;border:1px solid var(--line2);background:#fff;padding:7px 12px;font-size:12px;
  font-weight:600;color:var(--soft);}
.d-vbtns button.y{border-color:var(--em);background:var(--em);color:#fff;}
.d-vbtns button.y.hit{box-shadow:0 0 0 4px var(--em100);}
.d-match{display:flex;align-items:center;gap:9px;border-radius:9px;padding:11px 14px;background:var(--em50);
  border:1px solid var(--em300);color:var(--em);font-size:12.5px;font-weight:600;margin:12px 0;}
.d-match svg{width:16px;height:16px;stroke-width:2.2;}

/* ── 02 · hibabejelentés ─────────────────────────────────── */
.d-urg{display:flex;flex-direction:column;gap:11px;margin-top:4px;}
.d-ucard{border-radius:12px;border:1.5px solid var(--line2);background:rgba(255,255,255,.75);padding:16px;
  transition:border-color .2s,box-shadow .2s,transform .2s;}
.d-ucard.alert{border-color:var(--rose300);background:var(--rose50);}
.d-ucard b{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:600;}
.d-ucard b svg{width:17px;height:17px;}
.d-ucard.alert b{color:var(--wine);}
.d-ucard span{display:block;margin-top:5px;font-size:12.5px;line-height:1.6;color:var(--muted);}
.d-ucard.hit{border-color:var(--ind2);transform:translateY(-1px);box-shadow:0 0 0 3px rgba(91,127,210,.2);}
.d-ucard.alert.hit{border-color:var(--wine);box-shadow:0 0 0 3px rgba(162,58,87,.2);}
.d-cat{display:inline-flex;align-items:center;gap:7px;border-radius:8px;background:var(--isoft);color:var(--deep);
  padding:5px 10px;font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;}
/* Utcatérkép. Nem négy vonal: van úthierarchia (főút — gyűjtő — lakóutca),
   háztömb-kontúr, zöldterület, vízfolyás és vasút, utcanevekkel. Ez ugyanaz a
   kép, amit a lakos a telefonján lát, amikor a bejelentés helyét megerősíti,
   ezért nem elég jelzésértékűnek lennie.
   A rétegek sorrendje számít: felület → tömb → út-szegély → úttest → sín →
   felirat → jelölő. */
.d-loc{position:relative;border-radius:11px;overflow:hidden;border:1px solid var(--line2);margin-top:8px;
  background:#F1EEE6;height:150px;}
.d-loc svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
/* ⚠️ Minden térképelemnek KI kell kapcsolnia a vonalat. A demo.css
   `.m-root svg,.r-root svg{stroke:currentColor;stroke-width:1.6}` szabálya az
   ikonkészletnek szól, de az SVG minden gyerekére öröklődik: enélkül a
   feliratok és a felületek 1,6 pixeles tintakontúrt kapnak, és az egész térkép
   durva, „kihúzott" lesz. */
.d-loc svg text,.d-map svg text{stroke:none;}
.d-loc .mp-green{fill:#DDE6D1;stroke:none;}
.d-loc .mp-water{fill:none;}
.d-loc .mp-block{fill:#E9E4D8;stroke:#DCD5C6;stroke-width:.5;}
.d-loc .mp-case{stroke:#D8D0BE;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.d-loc .mp-road{stroke:#FCFBF7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.d-loc .mp-main-case{stroke:#DCC79A;} .d-loc .mp-main{stroke:#FBF0D8;}
.d-loc .mp-rail{stroke:#BFB8A8;stroke-width:2.4;fill:none;}
.d-loc .mp-rail2{stroke:#F1EEE6;stroke-width:1.6;stroke-dasharray:3 4;fill:none;}
.d-loc .mp-lab{font:400 5.6px 'Instrument Sans',system-ui,sans-serif;fill:#938A78;letter-spacing:.03em;stroke:none;}
.d-loc .mp-lab-b{font:500 6.2px 'Instrument Sans',system-ui,sans-serif;fill:#7A7160;letter-spacing:.02em;stroke:none;}
.d-pin{position:absolute;width:18px;height:18px;margin:-21px 0 0 -9px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg) scale(0);background:var(--wine);box-shadow:0 3px 7px rgba(0,0,0,.32);
  transition:transform .45s cubic-bezier(.2,1.5,.4,1);z-index:2;}
.d-pin::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;
  border-radius:50%;background:#fff;}
.d-pin.show{transform:rotate(-45deg) scale(1);}
.d-loctxt{position:absolute;left:0;right:0;bottom:0;padding:8px 11px;font-size:12px;font-weight:600;color:var(--ink);
  background:rgba(253,252,249,.92);border-top:1px solid var(--line);z-index:3;}
.d-photos{display:flex;gap:8px;margin-top:10px;}
.d-photo{width:64px;height:64px;border-radius:9px;background:linear-gradient(150deg,#b9b0a0,#8d857a);position:relative;
  overflow:hidden;opacity:0;transform:scale(.9);transition:opacity .35s,transform .35s;}
.d-photo.in{opacity:1;transform:none;}
.d-photo::after{content:"";position:absolute;left:12%;bottom:18%;width:46%;height:16%;border-radius:50%;
  background:rgba(30,26,20,.55);}
.d-photo.add{background:none;border:1.5px dashed var(--line2);display:grid;place-items:center;color:var(--muted);
  opacity:1;transform:none;font-size:22px;font-weight:300;}
/* a bejelentés státusz-idővonala a lakosnál */
.d-tl{margin-top:4px;}
.d-tlrow{display:grid;grid-template-columns:22px 1fr;gap:12px;position:relative;padding-bottom:16px;}
.d-tlrow::before{content:"";position:absolute;left:10px;top:20px;bottom:0;width:2px;background:var(--line2);}
.d-tlrow:last-child::before{display:none;}
.d-tldot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);background:#fff;display:grid;
  place-items:center;color:transparent;z-index:1;transition:border-color .3s,background .3s,color .3s;}
.d-tldot svg{width:12px;height:12px;stroke-width:3;}
.d-tlrow.done .d-tldot{border-color:var(--ind2);background:var(--ind2);color:#fff;}
.d-tlrow.cur .d-tldot{border-color:var(--ind2);box-shadow:0 0 0 4px var(--isoft);}
.d-tlrow b{display:block;font-size:13.5px;font-weight:600;color:var(--muted);}
.d-tlrow.done b,.d-tlrow.cur b{color:var(--ink);}
.d-tlrow em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:1px;}
.d-tlrow p{margin:7px 0 0;font-size:12.5px;line-height:1.6;color:var(--soft);border-left:2px solid var(--line2);
  padding-left:10px;}

/* jegyzői oldal: bejelentés-kezelés */
.d-stat{display:flex;gap:6px;margin:14px 0;}
.d-stat button{flex:1;border-radius:8px;border:1px solid var(--line2);background:#fff;padding:9px 6px;font-size:11.5px;
  font-weight:600;color:var(--muted);transition:all .2s;}
.d-stat button.on{border-color:var(--deep);background:var(--isoft);color:var(--deep);}
.d-stat button.hit{box-shadow:0 0 0 3px rgba(91,127,210,.2);}
.d-assign{display:flex;align-items:center;gap:9px;border-radius:9px;border:1px solid var(--line2);background:#fff;
  padding:11px 14px;margin-top:10px;font-size:13px;}
.d-assign b{margin-left:auto;font-weight:600;}

/* ── 03 · azonnali veszély ───────────────────────────────── */
.m-pane.d-emg{background:linear-gradient(180deg,#FFF1F2 0%,#FDF7F3 42%,transparent 78%);}
.d-emghead{display:flex;align-items:center;gap:11px;padding:20px 0 4px;}
.d-emghead i{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  background:var(--rose100);color:var(--wine);}
.d-emghead i svg{width:24px;height:24px;stroke-width:2.2;}
.d-emghead b{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--wine);line-height:1.2;}
.d-emgwhy{margin:10px 0 14px;border-radius:9px;background:rgba(162,58,87,.07);padding:11px 13px;font-size:12.5px;
  line-height:1.6;color:var(--wine);}
.d-no{display:flex;align-items:center;gap:13px;border-radius:12px;border:1px solid var(--rose300);background:#fff;
  padding:14px;margin-bottom:10px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;}
.d-no.in{opacity:1;transform:none;}
.d-no>b{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;border-radius:12px;background:var(--wine);
  color:#fff;font:700 19px/1 var(--sans);}
.d-no div{min-width:0;flex:1;}
.d-no div b{display:block;font-size:14px;font-weight:600;}
.d-no div span{display:block;font-size:11.5px;line-height:1.5;color:var(--muted);margin-top:2px;}
.d-call{border-radius:9px;background:var(--wine);color:#fff;border:0;padding:10px 15px;font-size:13px;font-weight:600;
  white-space:nowrap;}
.d-call.hit{box-shadow:0 0 0 4px rgba(162,58,87,.22);}
/* a sürgős ügy a konzol áttekintésén */
.d-hot{display:flex;align-items:center;gap:12px;border-radius:9px;border:1px solid var(--rose300);background:var(--rose50);
  padding:13px 16px;margin-bottom:9px;opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .4s;}
.d-hot.in{opacity:1;transform:none;}
.d-hot i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--wine);color:#fff;}
.d-hot i svg{width:16px;height:16px;stroke-width:2.2;}
.d-hot b{font-size:13.5px;font-weight:600;}
.d-hot span{font-size:11.5px;color:var(--wine);}
.d-hot em{margin-left:auto;font-style:normal;font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.08em;
  color:#fff;background:var(--wine);padding:4px 9px;border-radius:7px;}

/* ── 04 · javaslat és támogatás ──────────────────────────── */
.d-dup{border-radius:11px;border:1px solid var(--line2);background:rgba(255,255,255,.8);padding:14px;margin-top:10px;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .35s,max-height .45s ease;}
.d-dup.show{opacity:1;max-height:280px;}
.d-dup>b{display:block;font-size:13px;font-weight:600;margin-bottom:9px;}
.d-ditem{border-radius:9px;border:1px solid var(--line);background:#fff;padding:11px 13px;margin-bottom:8px;}
.d-ditem b{display:block;font-size:13px;font-weight:600;line-height:1.35;}
.d-ditem span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;}
.d-resp{border-radius:11px;border:1px solid var(--line2);background:#fff;padding:14px;margin-top:12px;}
.d-resp label{display:block;font:700 10.5px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  margin-bottom:6px;}
.d-resp .r-field{min-height:64px;align-items:flex-start;}

/* ── 05 · közösségi költségvetés ─────────────────────────── */
/* A hét fázis sávja. A feliratok korábban egymás alá/egymásra csúsztak, mert
   hét név nem fér ki egy telefon szélességében: mostantól CSAK az aktuális
   fázis neve látszik teljesen, a többi pont marad — a nevek úgyis ott állnak
   alatta, egy sorban, a fázis és a teendő mellett. */
.d-kkphases{display:flex;align-items:center;gap:0;margin:16px 0 2px;padding:0 2px;}
.d-kkph{flex:1;text-align:center;position:relative;min-width:0;}
.d-kkph i{display:block;height:2px;background:rgba(18,26,46,.12);margin:0;}
.d-kkph:first-child i{margin-left:50%;} .d-kkph:last-child i{margin-right:50%;}
.d-kkph.done i,.d-kkph.cur i{background:var(--ind2);}
.d-kkph b{display:grid;place-items:center;width:18px;height:18px;margin:-10px auto 0;border-radius:50%;
  border:1px solid var(--line2);background:#fff;font:700 9px/1 var(--sans);color:var(--muted);position:relative;z-index:1;}
.d-kkph.done b{border-color:var(--deep);background:var(--ind2);color:#fff;}
.d-kkph.cur b{border-color:var(--deep);color:var(--deep);box-shadow:0 0 0 3px var(--isoft);}
.d-kkph span{display:none;}
.d-kkph.cur span{display:block;position:absolute;left:50%;top:24px;transform:translateX(-50%);
  white-space:nowrap;font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--deep);}
.d-kkphases{margin-bottom:24px;}
/* a folyamban álló KK-kártya státusz-sávja (a termék 2026-09-18-i igazítása) */
.d-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:13px;}
.d-spill{display:inline-flex;align-items:center;gap:6px;border-radius:7px;padding:4px 9px;
  font:700 10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;background:rgba(18,26,46,.06);color:var(--soft);}
.d-spill.act{background:var(--isoft);color:var(--deep);}
.d-spill.act i{width:6px;height:6px;border-radius:50%;background:var(--ind2);}
.d-spill.done{color:var(--muted);}
.d-since{font-size:11.5px;color:var(--muted);}
.d-cd{margin-left:auto;font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--soft);}
/* tervek és szavazólap */
.d-plan{border-radius:11px;border:1px solid var(--line2);background:rgba(255,255,255,.72);padding:15px;margin-bottom:11px;
  transition:border-color .2s,box-shadow .2s;}
.d-plan.pick{border-color:var(--ind2);background:#fff;box-shadow:0 0 0 3px rgba(91,127,210,.18);}
.d-plan .d-ptop{display:flex;align-items:center;gap:9px;}
.d-pcode{font:700 11px var(--mono);letter-spacing:.1em;color:var(--deep);background:var(--isoft);padding:3px 8px;
  border-radius:6px;}
.d-pcost{margin-left:auto;font-size:13px;font-weight:700;}
.d-plan h5{margin:9px 0 0;font-size:14.5px;font-weight:600;line-height:1.35;}
.d-plan p{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted);}
.d-pbox{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line2);display:grid;place-items:center;
  color:transparent;background:#fff;flex:0 0 22px;}
.d-pbox svg{width:13px;height:13px;stroke-width:3;}
.d-plan.pick .d-pbox{border-color:var(--ind2);background:var(--ind2);color:#fff;}
.d-meter{position:sticky;bottom:0;border-radius:11px;border:1px solid var(--line2);background:rgba(255,255,255,.95);
  padding:13px 15px;margin-top:6px;backdrop-filter:blur(8px);}
.d-meter .d-mtop{display:flex;align-items:baseline;justify-content:space-between;font-size:12.5px;color:var(--muted);}
.d-meter .d-mtop b{font-size:14px;font-weight:700;color:var(--ink);}
.d-mbar{height:8px;border-radius:5px;background:rgba(18,26,46,.08);margin-top:9px;overflow:hidden;}
.d-mbar u{display:block;height:100%;background:var(--ind2);border-radius:5px;transition:width .4s ease;}
.d-mbar u.over{background:var(--wine);}
/* eredmény és megvalósítás */
.d-win{border-radius:12px;border:1px solid var(--em300);background:var(--em50);padding:16px;margin-top:4px;}
.d-win .d-wk{font:700 10.5px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--em);}
.d-win h5{margin:6px 0 0;font-size:16px;font-weight:600;line-height:1.3;}
.d-win p{margin:7px 0 0;font-size:12.5px;line-height:1.6;color:var(--soft);}
.d-mile{display:grid;grid-template-columns:20px 1fr auto;gap:11px;align-items:center;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:13px;}
.d-mile i{width:20px;height:20px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;
  color:transparent;}
.d-mile i svg{width:11px;height:11px;stroke-width:3;}
.d-mile.ok i{border-color:var(--em);background:var(--em);color:#fff;}
.d-mile em{font-style:normal;font-size:11.5px;color:var(--muted);}

/* konzol: KK indítás és vezérlés */
.d-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;}
.d-setrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:13px;color:var(--soft);}
.d-setrow b{font-weight:600;color:var(--ink);}
.d-setrow.in{animation:dRow .45s ease both;}
@keyframes dRow{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
.d-therm{margin-top:10px;}
.d-thbar{position:relative;height:26px;border-radius:7px;background:rgba(18,26,46,.07);overflow:hidden;}
.d-thbar u{display:block;height:100%;background:linear-gradient(90deg,#8FB0F0,var(--ind2));border-radius:7px;}
.d-thbar u.ok{background:linear-gradient(90deg,#6EE7B7,var(--em));}
.d-thmark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--wine);}
.d-thmark::after{content:attr(data-l);position:absolute;left:6px;top:-2px;font:700 9.5px var(--mono);
  text-transform:uppercase;letter-spacing:.06em;color:var(--wine);white-space:nowrap;}
.d-funnel{display:flex;flex-direction:column;gap:7px;margin-top:6px;}
.d-fstep{display:flex;align-items:center;gap:11px;font-size:12.5px;}
.d-fstep u{display:block;height:26px;border-radius:5px;background:var(--ind);position:relative;transition:width .5s ease;}
.d-fstep:nth-child(1) u{background:var(--ind2);}
.d-fstep:nth-child(2) u{background:#7C97DB;}
.d-fstep:nth-child(3) u{background:#9FB1E4;}
.d-fstep:nth-child(4) u{background:#BFCBEF;}
.d-fstep b{font-weight:600;min-width:34px;}
.d-fstep span{color:var(--muted);}

/* csatolmányok a javaslat alatt */
.d-att{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;}
.d-att span{display:inline-flex;align-items:center;gap:5px;border-radius:7px;border:1px solid var(--line2);
  background:rgba(255,255,255,.75);padding:5px 9px;font:500 11px var(--mono);color:var(--soft);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.d-att svg{width:12px;height:12px;flex:0 0 12px;color:var(--deep);}

/* ── 06 · analitika ──────────────────────────────────────── */
.d-dash{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;}
.d-dash .r-card{margin:0;}
.d-heat{display:grid;grid-template-columns:96px repeat(4,1fr);gap:4px;font-size:10.5px;}
.d-heat span{display:flex;align-items:center;color:var(--muted);font:600 10px var(--mono);letter-spacing:.05em;
  text-transform:uppercase;}
.d-heat u{display:grid;place-items:center;height:28px;border-radius:5px;color:#fff;font:700 11px var(--sans);
  background:rgba(91,127,210,.16);color:var(--soft);transition:background .4s;}
.d-heat u.l1{background:rgba(91,127,210,.3);color:var(--deep);}
.d-heat u.l2{background:rgba(91,127,210,.55);color:#fff;}
.d-heat u.l3{background:var(--ind2);color:#fff;}
.d-heat u.l4{background:var(--deep);color:#fff;}
.d-cmp{margin-top:4px;}
.d-crow{display:grid;grid-template-columns:78px 1fr;gap:11px;align-items:center;padding:6px 0;font-size:12px;}
.d-crow>span{color:var(--soft);}
.d-cbars{display:flex;flex-direction:column;gap:3px;}
.d-cbars i{display:block;height:9px;border-radius:3px;background:var(--ind2);transition:width .5s ease;}
.d-cbars i.b{background:rgba(18,26,46,.16);}
.d-legend{display:flex;gap:16px;font-size:11px;color:var(--muted);margin-top:9px;}
.d-legend em{display:inline-flex;align-items:center;gap:6px;font-style:normal;}
.d-legend em::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--ind2);}
.d-legend em.b::before{background:rgba(18,26,46,.16);}
.d-gauge{display:flex;align-items:center;gap:16px;margin-top:4px;}
.d-gauge svg{width:104px;height:60px;flex:0 0 104px;}
.d-gauge svg path{fill:none;stroke-width:9;stroke-linecap:round;}
.d-gauge svg path.b{stroke:rgba(18,26,46,.09);}
.d-gauge svg path.v{stroke:var(--ind2);}
.d-gauge div b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;}
.d-gauge div span{display:block;font-size:11.5px;color:var(--muted);line-height:1.5;}
/* Körzettérkép: a település valódi alakú négy választókörzete, a főúttal, a
   patakkal és a vasúttal együtt — egy négyzetrácsból nem derül ki, melyik
   körzet hol van, és pont ez a kérdés, amire ez a kártya válaszol. */
.d-map{position:relative;height:200px;border-radius:9px;overflow:hidden;background:#F1EEE6;border:1px solid var(--line);}
.d-map svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.d-map .z{transition:fill-opacity .5s ease;stroke:#FDFCF9;stroke-width:1.8;}
.d-map .mp-green{fill:#DDE6D1;stroke:none;}
.d-map .mp-water{stroke:#C8D8E6;stroke-width:4;fill:none;stroke-linecap:round;}
.d-map .mp-case{stroke:#D8D0BE;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.d-map .mp-road{stroke:#FCFBF7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.d-map .mp-main-case{stroke:#DCC79A;} .d-map .mp-main{stroke:#FBF0D8;}
.d-map .mp-rail{stroke:#BFB8A8;stroke-width:2.2;fill:none;}
.d-map .mp-rail2{stroke:#F1EEE6;stroke-width:1.4;stroke-dasharray:3 4;fill:none;}
.d-map .mz-n{font:500 7.5px 'IBM Plex Mono',monospace;fill:#6E6555;letter-spacing:.08em;stroke:none;}
.d-map .mz-v{font:700 16px 'Instrument Sans',system-ui,sans-serif;fill:#1F2A46;stroke:none;}
.d-anon{display:flex;align-items:flex-start;gap:9px;border-radius:9px;background:rgba(18,26,46,.045);padding:11px 13px;
  margin-top:12px;font-size:11.5px;line-height:1.6;color:var(--soft);}
.d-anon svg{width:15px;height:15px;flex:0 0 15px;margin-top:1px;color:var(--deep);}

@media (max-width:880px){
  .d-two,.d-dash{grid-template-columns:1fr;}
}

/* ── gomb-kontraszt a demo.css-ből örökölt felületeken ───── */
/* A `.m-send` és a `.m-qnav .m-dark` alapállapota szürke alapon szürke felirat
   volt. A várakozó gomb legyen halkabb — de olvasható. */
.m-root .m-send{background:rgba(255,255,255,.8);border:1px solid var(--line2);color:var(--soft);}
.m-root .m-send.ready{background:var(--ink);border-color:var(--ink);color:#fff;}
.m-root .m-qnav .m-dark{background:rgba(255,255,255,.8);border:1px solid var(--line2);color:var(--soft);}
.m-root .m-qnav .m-dark.ready{background:var(--deep);border-color:var(--deep);color:#fff;}
.m-root .m-light{color:var(--ink2);}
/* A kezelőfelület elsődleges gombjai: tömör tinta-kék, TISZTA fehér felirattal.
   A simított kis betű sötét alapon vékonyabbnak látszik, mint amilyen — a
   félkövér nélkül a fehér is szürkének olvasódik. */
.r-root .r-submit,.r-root .r-ai{background:var(--deep);color:#fff;font-weight:700;}
.r-root .r-ai svg{color:#fff;opacity:.9;}
.m-root .m-dark{color:#fff;font-weight:700;}
.d-btn.ready,.d-upload.hit{font-weight:700;}
.r-root .r-inline-btn{background:rgba(255,255,255,.85) !important;border:1px solid var(--line2);color:var(--soft);}
.r-root .r-inline-btn.ready{background:var(--deep) !important;border-color:var(--deep);color:#fff;}
.r-root .r-ghost{color:var(--ink2);}
.r-root .r-plain{color:var(--soft);}