/*
 * ujcegek.hu -- shared design system.
 *
 * Lifted from the approved UI concept (dev/plan/ui-latvanyterv/ujcegek-ui-koncepcio.html),
 * minus the mockup-only chrome: the demo banner, the Publikus/Alkalmazas mode switcher and
 * the .mode/.pubscreen/.screen display toggles that only existed to fake navigation in a
 * single static file. The real app navigates by URL, so those rules would only hide markup.
 *
 * Every ujcegek module styles against these tokens and primitives instead of shipping its own
 * palette -- the three feature tracks (data/export, billing, UI) have to look like one product.
 *
 * Palette: olive-green derived from the agendy visual language, with a deliberately TEAL
 * success colour (--ok) so a "delivered" webhook chip cannot be mistaken for the brand green.
 */

:root{
  --primary:#5b6e2f; --primary-dark:#3f4d1f; --primary-soft:#e7ecd6; --primary-ring:#a8bd76;
  --ink:#232a17; --ok:#0d8a72; --ok-soft:#d8f3ec; --ok-ink:#0a5c4c;
  --warn:#c98a1c; --warn-soft:#faf0d8; --warn-ink:#8a5c0e;
  --err:#c14343; --err-soft:#fbe4e4; --err-ink:#8f2d2d;
  --info:#3b7a9e; --info-soft:#e1eff5; --info-ink:#295a75;
  --n50:#f8f9f3; --n100:#f1f2e9; --n200:#e4e6da; --n300:#d3d6c4; --n500:#787c68; --n600:#575b49; --n900:#232a17;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --shadow-sm:0 1px 3px 0 rgba(35,42,23,.08);
  --shadow-md:0 4px 12px -2px rgba(35,42,23,.12);
  --font:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font); color:var(--n900); background:var(--n50);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--primary-soft);}
a{color:inherit;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}

/* ---- app shell ---- */
.shell{display:flex; min-height:calc(100vh - 34px);}
.side{
  flex:0 0 240px; background:var(--ink); color:#fff;
  display:flex; flex-direction:column; padding:22px 16px; gap:22px;
}
.side_head{display:flex; flex-direction:column; gap:2px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.12);}
.logo{display:flex; align-items:center; gap:9px; font-size:18px; font-weight:800; letter-spacing:-.3px;}
.logo_mark{
  width:28px; height:28px; border-radius:7px;
  background:linear-gradient(135deg, #8ba33f, var(--primary));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:11.5px; font-weight:800;
  flex:none;
}
.logo_img{width:28px; height:28px; object-fit:contain; flex:none;}
.side .logo{color:#fff;}
.workspace{font-size:12.5px; color:#c7cdb2; margin-top:4px;}
nav.mainnav{display:flex; flex-direction:column; gap:3px;}
.navitem{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-md);
  text-decoration:none; color:#d3d8c1; font-size:14px; font-weight:500; cursor:pointer; border:none; background:none;
  width:100%; text-align:left;
}
.navitem:hover{background:rgba(255,255,255,.06);}
.navitem.active{background:rgba(255,255,255,.12); color:#fff;}
.navitem .ic{width:18px; text-align:center; flex:none; font-size:14px;}
.navitem .cnt{
  margin-left:auto; font-size:11px; font-weight:700; background:rgba(255,255,255,.14); color:#fff;
  border-radius:999px; padding:1px 7px; min-width:8px; text-align:center;
}
.navitem.active .cnt{background:var(--primary-ring); color:var(--ink);}
.side_foot{margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:#b7bd9e;}
.side_foot a{text-decoration:none; color:#b7bd9e;}
.side_foot a:hover{color:#fff;}

.main{flex:1 1 auto; min-width:0; padding:28px 36px 60px; max-width:1080px;}
.pagehead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px;}
h1{font-size:23px; margin:0 0 4px; letter-spacing:-.2px; font-weight:700;}
h2,h3{font-weight:700;}
.sub{color:var(--n500); font-size:13.5px; margin:0;}

.statrow{display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap;}
.stat{
  background:#fff; border:1px solid var(--n200); border-radius:var(--radius-md);
  padding:10px 14px; display:flex; flex-direction:column; gap:2px; min-width:130px;
}
.stat .num{font-size:19px; font-weight:800; font-variant-numeric:tabular-nums;}
.stat .lbl{font-size:11.5px; color:var(--n500); text-transform:uppercase; letter-spacing:.3px;}
.stat.ok .num{color:var(--ok-ink);}
.stat.warn .num{color:var(--warn-ink);}

.card{
  background:#fff; border:1px solid var(--n200); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.panel{padding:20px 22px;}
.panel + .panel{margin-top:16px;}
.panel_title{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--n500);
  margin:0 0 12px;
}

.split{display:grid; grid-template-columns:1.05fr .95fr; gap:20px; align-items:start;}
@media (max-width:880px){ .split{grid-template-columns:1fr;} }
/* Grid items default to min-width:auto, i.e. their content's min-content size -- an
   unbreakable-line child (webhook page: .codeblock's longest sample-payload/signature
   line, ~834px) then forces that track to blow out to fit it, squeezing the other
   track far past its fr share (measured: 1fr/2fr rendered as 156px/880px instead of
   316px/632px). .codeblock's own overflow-x:auto does not rescue this -- the auto-min
   -> 0 optimization only applies to the scrolling box itself, not an ancestor grid
   item two levels up. min-width:0 here restores the intended fr ratio and lets the
   long line scroll inside .codeblock instead of stretching the column. */
.split > div{min-width:0;}

/* 1/3-2/3 variant (webhook page: config form narrower, sample payload wider) -- a
   modifier, not a change to .split itself, so Profile/Export's near-even .split is
   untouched. */
.split--1-2{grid-template-columns:1fr 2fr;}
@media (max-width:880px){ .split--1-2{grid-template-columns:1fr;} }

/* ---- key/value settings rows ---- */
.kvrow{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--n100);}
.kvrow:last-child{border-bottom:none;}
.kvrow .kvl{font-size:13.5px; color:var(--n600);}
.kvrow .kvv{font-size:13.5px; font-weight:600; text-align:right;}

.fgroup{margin-bottom:14px;}
.fgroup label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--n600);}
.fgroup .hint{font-weight:400; color:var(--n500);}
.finput,select.finput{
  width:100%; padding:10px 12px; font-size:14px; border:1px solid var(--n300); border-radius:8px; background:#fff;
  font-family:inherit; color:var(--n900);
}
.finput:focus{border-color:var(--primary);}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.grid3{display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:12px;}

.actions{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
.btn{
  padding:9px 15px; border-radius:var(--radius-md); border:1px solid var(--n300); background:#fff; cursor:pointer;
  font-weight:600; font-size:13.5px; color:var(--n900); display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{background:var(--n50);}
.btn--primary{background:var(--primary); border-color:var(--primary); color:#fff;}
.btn--primary:hover{background:var(--primary-dark); border-color:var(--primary-dark);}
.btn--danger{border-color:var(--err); color:var(--err-ink); background:#fff;}
.btn--danger:hover{background:var(--err-soft);}
.btn--ghost{border-color:transparent; color:var(--n600);}
.btn--ghost:hover{background:var(--n100);}
.btn--sm{padding:6px 11px; font-size:12.5px;}
.btn--lg{padding:13px 22px; font-size:15px; border-radius:10px;}

.toggle{
  width:38px; height:22px; border-radius:999px; background:var(--n300); position:relative; flex:none; cursor:pointer;
}
.toggle.on{background:var(--ok);}
.toggle::after{
  content:""; position:absolute; width:18px; height:18px; border-radius:999px; background:#fff; top:2px; left:2px;
  transition:left .15s;
}
.toggle.on::after{left:18px;}

.statuschip{font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; display:inline-block;}
.statuschip--ok{background:var(--ok-soft); color:var(--ok-ink);}
.statuschip--wait{background:var(--warn-soft); color:var(--warn-ink);}
.statuschip--err{background:var(--err-soft); color:var(--err-ink);}
.statuschip--none{background:var(--n100); color:var(--n500); font-weight:500;}
.statuschip--current{background:var(--primary-soft); color:var(--primary-dark);}

/* Full-width inline notice for form results (auth flows, profile saves, ...) --
   reuses the status colour tokens so an error/success box matches the chips. */
.formmsg{padding:11px 14px; border-radius:var(--radius-md); font-size:13px; margin-bottom:16px;}
.formmsg--err{background:var(--err-soft); color:var(--err-ink);}
.formmsg--ok{background:var(--ok-soft); color:var(--ok-ink);}
.formmsg--info{background:var(--info-soft); color:var(--info-ink);}
.formmsg--warn{background:var(--warn-soft); color:var(--warn-ink);}

.secretfield{display:flex; align-items:center; gap:8px;}
.secretval{
  flex:1 1 auto; padding:8px 10px; border:1px solid var(--n300); border-radius:8px; background:var(--n50);
  font-size:13.5px; letter-spacing:1.5px; color:var(--n500); font-family:ui-monospace,Consolas,monospace;
  overflow-x:auto; white-space:nowrap;
}

.dtable{width:100%; border-collapse:collapse; font-size:13.5px;}
.dtable th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:var(--n500);
  padding:8px 10px; border-bottom:2px solid var(--n200);
}
.dtable td{padding:11px 10px; border-bottom:1px solid var(--n100); vertical-align:middle;}
.dtable tr:last-child td{border-bottom:none;}
.dtable td.num{text-align:right; font-variant-numeric:tabular-nums;}

.meter{height:9px; border-radius:999px; background:var(--n200); overflow:hidden; margin:8px 0;}
.meter_fill{height:100%; background:var(--primary); border-radius:999px;}

.checklist{display:flex; flex-direction:column; gap:10px; margin-top:4px;}
.checkrow{display:flex; align-items:center; gap:10px; font-size:13.5px;}
.checkrow .ci{
  width:20px; height:20px; border-radius:999px; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:#fff; font-weight:700;
}
.ci.ok{background:var(--ok);}
.ci.warn{background:var(--warn);}
.ci.err{background:var(--err);}
.checkrow .txt strong{display:block; font-size:13.5px;}
.checkrow .txt span{font-size:12px; color:var(--n500);}

.jsonbox{
  background:var(--n900); color:#dfe6c9; border-radius:var(--radius-md); padding:14px 16px;
  font-family:ui-monospace,Consolas,monospace; font-size:12.5px; line-height:1.6; overflow-x:auto; white-space:pre;
}
.jsonbox .k{color:#a8bd76;}
.jsonbox .s{color:#f0d999;}
.jsonbox .n{color:#8fc7e0;}

/* ---- pill sub-nav (public pages) ---- */
.pillnav{display:flex; gap:6px; margin-bottom:22px;}
.pillitem{
  padding:8px 16px; border-radius:999px; border:1px solid var(--n200); background:#fff;
  font-size:13px; font-weight:600; color:var(--n600); cursor:pointer;
}
.pillitem:hover{background:var(--n50);}
.pillitem.active{background:var(--primary-soft); border-color:var(--primary-soft); color:var(--primary-dark);}

/* ---- auth cards ---- */
.authwrap{display:flex; justify-content:center; padding:48px 16px;}
.authcard{width:100%; max-width:440px; padding:32px;}
.authhead{text-align:center; margin-bottom:26px;}
.authhead h1{font-size:24px; margin:0 0 6px;}
.authhead p{color:var(--n500); font-size:13.5px; margin:0;}
.authdiv{display:flex; align-items:center; gap:10px; color:var(--n500); font-size:12.5px; margin:18px 0;}
.authdiv::before, .authdiv::after{content:""; flex:1; height:1px; background:var(--n200);}
.authfoot{text-align:center; margin-top:18px; font-size:13px; color:var(--n500);}
.authfoot a{color:var(--primary); font-weight:700; text-decoration:none;}

.planpick{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px;}
.planopt{
  border:2px solid var(--n200); border-radius:8px; padding:12px; cursor:pointer; text-align:center;
}
.planopt.active{border-color:var(--primary); background:var(--primary-soft);}
.planopt .pn{font-size:13px; font-weight:700; display:block;}
.planopt .pp{font-size:11px; color:var(--n500); display:block; margin-top:2px;}

/* ---- public navbar + landing ---- */
.pubnav{
  display:flex; align-items:center; gap:16px; padding:16px 40px; border-bottom:1px solid var(--n200); background:#fff;
}
.pubnav .logo{margin-right:auto; color:var(--n900); cursor:pointer;}
.pubnav .logo:hover{opacity:.82;}
/* Below ~480px the 40px side padding + full-size logo + two full-size buttons ("Belépés" +
   "Regisztráció") no longer fit in the viewport -- the CTA button ran off-screen, clipped
   (measured: 408px of required width in a 320-390px viewport). Narrower padding/gap/button
   size close that gap without hiding either nav action. */
@media (max-width:480px){
  .pubnav{padding:12px 16px; gap:8px;}
  .pubnav .logo{font-size:15px;}
  .pubnav .logo_img{width:22px; height:22px;}
  .pubnav > div:last-child{gap:6px;}
  .pubnav .btn{padding:7px 10px; font-size:12px;}
}
.pubwrap{max-width:1120px; margin:0 auto; padding:0 40px 80px;}

.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:60px 0 52px;}
@media (max-width:900px){ .hero{grid-template-columns:1fr; padding:40px 0;} }
.eyebrow{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.4px;
  color:var(--primary-dark); background:var(--primary-soft); padding:5px 12px; border-radius:999px; margin-bottom:18px;
}
.hero h1{
  font-size:40px; line-height:1.14; letter-spacing:-.7px; margin:0 0 18px; font-weight:800;
  text-wrap:balance;
}
.hero h1 em{color:var(--primary); font-style:normal;}
.hero_lede{font-size:16.5px; line-height:1.55; color:var(--n600); margin:0 0 28px; max-width:52ch;}
.hero_cta{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.hero_note{font-size:12.5px; color:var(--n500);}

.heroshot{
  background:#fff; border:1px solid var(--n200); border-radius:16px; box-shadow:var(--shadow-md);
  padding:16px; transform:rotate(.6deg);
}
.heroshot_bar{display:flex; gap:6px; margin-bottom:12px;}
.heroshot_bar span{width:9px; height:9px; border-radius:999px; background:var(--n200);}
.companyrow{display:flex; align-items:flex-start; gap:12px; padding:10px 4px;}
.companyrow .cicon{
  width:34px; height:34px; border-radius:8px; background:var(--primary-soft); color:var(--primary-dark);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex:none;
}
.companyrow .cname{font-weight:700; font-size:13.5px;}
.companyrow .cmeta{font-size:11.5px; color:var(--n500); margin-top:2px;}

.painrow{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:32px 0;}
@media (max-width:760px){ .painrow{grid-template-columns:1fr;} }
.paincard{padding:22px 20px;}
.paincard .pic{font-size:22px; margin-bottom:10px; display:block;}
.paincard h3{font-size:15.5px; margin:0 0 6px;}
.paincard p{font-size:13.5px; color:var(--n500); margin:0; line-height:1.5;}

.sectionhead{max-width:58ch; margin:0 auto 32px; text-align:center;}
.sectionhead h2{font-size:25px; margin:0 0 8px; letter-spacing:-.3px;}
.sectionhead p{color:var(--n500); font-size:14.5px; margin:0;}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:16px 0 40px;}
@media (max-width:760px){ .steps{grid-template-columns:1fr;} }
.step{position:relative; padding:24px 20px 20px;}
.step_no{
  width:30px; height:30px; border-radius:999px; background:var(--ink); color:#fff; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.step h3{font-size:15px; margin:0 0 6px;}
.step p{font-size:13.5px; color:var(--n500); margin:0; line-height:1.5;}

.diffrow{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:8px 0 44px;}
@media (max-width:760px){ .diffrow{grid-template-columns:1fr;} }
.diffcard{padding:20px; border-left:3px solid var(--primary);}
.diffcard h3{font-size:14.5px; margin:0 0 6px;}
.diffcard p{font-size:13px; color:var(--n500); margin:0; line-height:1.5;}

.pricerow{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; padding:8px 0 24px; max-width:760px; margin:0 auto; align-items:stretch;}
@media (max-width:640px){ .pricerow{grid-template-columns:1fr;} }

/* Subscription status card (ticket 6843/2) -- sits above the package picker, either an
   empty-state ("no active subscription") or the current package's details. Reuses
   .panel_title/.kvrow/.statuschip/.formmsg rather than introducing its own vocabulary. */
.substatus{margin-bottom:20px; max-width:760px; margin-left:auto; margin-right:auto;}
.pricecard{padding:26px 22px; display:flex; flex-direction:column; gap:14px;}
.pricecard.hi{border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-soft), var(--shadow-md);}
/* "Kiválasztva" -- which package the subscriber actually CLICKED on the onboarding
   screen (ujcegekSubscription/javascript/public.js), separate from .hi ("ajánlott",
   static per-package flag from is_webhook_enabled that never moves). Teal (--ok), not
   the primary olive .hi uses -- same deliberate separation the design system already
   uses for the webhook "delivered" chip, so a click-selection can never be mistaken
   for the always-on recommended badge (Roland, ticket 7036: "az aktív mező mintha nem
   lenne jó" -- no selection feedback existed at all before this). */
.pricecard.chosen{border-color:var(--ok); box-shadow:0 0 0 2px var(--ok-soft), var(--shadow-md);}
.pricecard.chosen .ucsub_choose{background:var(--ok); border-color:var(--ok);}
.pricecard.chosen .ucsub_choose:hover{background:var(--ok-ink); border-color:var(--ok-ink);}
.pricecard .pname{font-size:15px; font-weight:800;}
.pricecard .pfor{font-size:12.5px; color:var(--n500);}
.pricecard .pprice{font-size:28px; font-weight:800; letter-spacing:-.5px; font-variant-numeric:tabular-nums;}
.pricecard .pprice small{font-size:13px; font-weight:600; color:var(--n500);}
.pricecard ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px;}
.pricecard li{font-size:13px; color:var(--n600); display:flex; gap:7px;}
.pricecard li::before{content:"✓"; color:var(--ok); font-weight:800; flex:none;}
/* Grid stretch (align-items:stretch, now explicit rather than relied-on-as-default) makes
   every .pricecard in a row the same outer height; this pins the CTA to the bottom of
   that stretched height instead of leaving it wherever the (possibly shorter) bullet list
   ends -- otherwise two cards can be the same height but visually look uneven because
   their buttons sit at different vertical positions. */
.pricecard > .btn{margin-top:auto;}

.retrobox{max-width:760px; margin:0 auto 48px; padding:26px 28px;}
.retrobox_head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; flex-wrap:wrap;}
.retrobox_head h3{font-size:16.5px; margin:0;}
.retrobox p.desc{font-size:13px; color:var(--n500); margin:0 0 18px;}
.retrotiers{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px;}
.retrotier{
  flex:1 1 90px; text-align:center; padding:9px 6px; border-radius:8px; background:var(--n50); border:1px solid var(--n200);
}
.retrotier.active{background:var(--primary-soft); border-color:var(--primary);}
.retrotier .rt_lbl{font-size:10.5px; color:var(--n500); text-transform:uppercase; letter-spacing:.3px;}
.retrotier .rt_price{font-size:14.5px; font-weight:800; margin-top:2px;}
.retrorow{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:14px; border-top:1px dashed var(--n200);}
.retrorow select{flex:0 0 220px;}
.retrosum{margin-left:auto; text-align:right; font-size:13px; color:var(--n600);}
.retrosum strong{display:block; font-size:19px; color:var(--n900); font-variant-numeric:tabular-nums;}

.ctaband{
  text-align:center; padding:48px 32px; border-radius:20px;
  background:linear-gradient(135deg, var(--ink), #3a4523); color:#fff; margin-bottom:56px;
}
.ctaband h2{font-size:26px; margin:0 0 10px; color:#fff;}
.ctaband p{color:#d3d8c1; font-size:14.5px; margin:0 0 22px;}

.pubfoot{text-align:center; padding:24px 0 4px; color:var(--n500); font-size:12.5px; border-top:1px solid var(--n200);}

/* Sample payload/response blocks (webhook config page) -- monospace, scrolls horizontally
   instead of wrapping/overflowing on a long signature line or JSON key. */
.codeblock{
  background:var(--n900); color:#d3d8c1; border-radius:var(--radius-md);
  padding:14px 16px; font-size:12px; line-height:1.6; overflow-x:auto;
  font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  margin:0;
}
.codeblock code{color:inherit; background:none; padding:0;}

/* Data table (invoices list, webhook delivery log) -- unstyled <table class="ucinv_table">
   markup rendered as a bare browser table with no CSS anywhere in this file (tars,
   round-37 verify finding: a styled .kvrow list got replaced with this class, a visual
   regression). Same row-separator/muted-label visual language as .kvrow, just in a real
   <table> since these lists have more than one value column. No column-alignment rule
   here on purpose -- this table serves a 4-column list (invoices: date/item/amount/link)
   and a 2-column one (webhook log: time/status) with different columns needing
   right-alignment in each, so that stays each caller's own inline/cell choice. */
.ucinv_table{width:100%; border-collapse:collapse; font-size:13.5px;}
.ucinv_table th{
  text-align:left; font-weight:600; color:var(--n500); font-size:12px;
  text-transform:uppercase; letter-spacing:.3px; padding:0 16px 10px 0; border-bottom:1px solid var(--n200);
}
.ucinv_table td{padding:13px 16px 13px 0; border-bottom:1px solid var(--n100); color:var(--n900);}
.ucinv_table tr:last-child td{border-bottom:none;}
/* Zero horizontal padding was the original intent (flush-left first column, flush-right
   panel edge) -- but with zero gap BETWEEN columns too, adjacent header labels visually run
   together ("ÖSSZEGSZÁMLA") and a status chip + wrapped detail text in the last column reads
   as cramped against the amount column next to it (found verifying a real failed-invoice
   row, tars msg 14653 flagged the missing render check that surfaced this). Right-padding
   everything then zeroing it back out on the last cell keeps both original goals. */
.ucinv_table th:last-child, .ucinv_table td:last-child{padding-right:0;}

/* Invoices page only: 3rd column (Összeg/Amount) right-aligned + tabular-nums so a run of
   HUF amounts lines up vertically -- a per-page choice, not a .ucinv_table default (see
   the comment above: the webhook delivery log uses the same base class with a different
   column layout that this rule would misalign). white-space:nowrap so a shorter amount
   column doesn't wrap "24 900 Ft" onto two lines next to the wider status column. */
.ucinv_table--amount-right th:nth-child(3), .ucinv_table--amount-right td:nth-child(3){
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* Failed invoice-issuance status detail (ujcegekInvoices/javascript/public.js) -- the
   status itself uses the shared .statuschip--err badge (same visual language as the
   webhook delivery log's failed/dead chips); this is just the optional error_reason line
   underneath it, which had zero styling before. */
.ucinv_failed_reason{color:var(--n500); font-size:11.5px; margin-top:3px;}
/* Guest retro-data-pack purchase widget (landing page, below the informational .retrobox --
   that box just shows the price tiers, this is the actual checkout). Reuses .card/.fgroup/
   .finput/.kvrow/.formmsg rather than introducing a parallel form language. */
.retropurchase{margin-top:18px; max-width:560px; margin-left:auto; margin-right:auto; text-align:left;}
.retropurchase .kvrow .kvv{font-variant-numeric:tabular-nums;}

/* Stripe Elements card-number mount point -- .finput-matching border/radius so the card
   field doesn't look like raw, unstyled browser chrome next to every other input on the
   page (Roland, msg 14204: "a KARTYASZAM-mezo RENDES formazassal, most csupasz input").
   Shared between the retro-purchase widget and the Subscription card-entry box -- was named
   .rp_cardel (retro-purchase-only) before Subscription needed the identical treatment. */
.cardel{padding:10px 12px; border:1px solid var(--n300); border-radius:var(--radius-sm); background:#fff;}
.cardel.StripeElement--focus{border-color:var(--primary);}
.cardel.StripeElement--invalid{border-color:var(--err);}