:root{
  /* Branding v0.7 §7.3 / §9 – tryb jasny */
  --bg:#FFF8F1; --surface:#FFFFFF; --surface2:#F3E8DC; --ink:#1F1B3A; --ink2:#5B5770; --line:#EDE3D8; --border-strong:#8C8298;
  --pig:#C1121F; --pig-dark:#A50F1A; --on-primary:#FFFFFF; --pig-soft:#FFD6DA; --pig-ink:#C1121F;
  --coin:#FFC43D; --coin-dark:#E3A21A;
  --progress:#FFC43D; --progress-track:#FFE9C2; --progress-text:#8A5A00; --progress-pending:#E3A21A;
  --good:#0F7A60; --good-bg:#DDF5EE; --warn:#B8400C; --warn-bg:#FDE6D8; --bad:#B8400C; --bad-bg:#FDE6D8;
  --focus:#1F1B3A; --logo-ink:#1F1B3A; --splash-bg:#FFC43D; --splash-ink:#1F1B3A;
  --shadow:0 1px 0 rgba(31,27,58,.04),0 18px 40px -24px rgba(31,27,58,.35);
  --f-display:"Nunito",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease-drop:cubic-bezier(.55,0,.85,.36); --ease-gulp:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#15121F; --surface:#211D2E; --surface2:#2C2640; --ink:#F7F1EA; --ink2:#B3ACC4; --line:#342E45; --border-strong:#7A7190;
    --pig:#FF5A66; --pig-dark:#FF7A84; --on-primary:#15121F; --pig-soft:#3A1E28; --pig-ink:#FF8A93;
    --progress-track:#3A3120; --progress-text:#FFC43D; --progress-pending:#B8871F;
    --good:#3DDBB3; --good-bg:#12382F; --warn:#FF8A4C; --warn-bg:#3D2418; --bad:#FF8A4C; --bad-bg:#3D2418;
    --focus:#FFC43D; --logo-ink:#F7F1EA; --splash-bg:#15121F; --splash-ink:#F7F1EA;
    --shadow:0 1px 0 rgba(0,0,0,.2),0 18px 40px -24px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#15121F; --surface:#211D2E; --surface2:#2C2640; --ink:#F7F1EA; --ink2:#B3ACC4; --line:#342E45; --border-strong:#7A7190;
  --pig:#FF5A66; --pig-dark:#FF7A84; --on-primary:#15121F; --pig-soft:#3A1E28; --pig-ink:#FF8A93;
  --progress-track:#3A3120; --progress-text:#FFC43D; --progress-pending:#B8871F;
  --good:#3DDBB3; --good-bg:#12382F; --warn:#FF8A4C; --warn-bg:#3D2418; --bad:#FF8A4C; --bad-bg:#3D2418;
  --focus:#FFC43D; --logo-ink:#F7F1EA; --splash-bg:#15121F; --splash-ink:#F7F1EA;
  --shadow:0 1px 0 rgba(0,0,0,.2),0 18px 40px -24px rgba(0,0,0,.7);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{text-wrap:balance}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1120px;margin:0 auto;padding-inline:16px}
@media (min-width:720px){.wrap{padding-inline:28px}}
.muted{color:var(--ink2)}
.small{font-size:13px}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:10px;min-height:62px;flex-wrap:wrap;padding-block:8px}
.brand{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
.brand svg{width:46px;height:38px;flex:none}
.brand b{font-family:var(--f-display);font-weight:800;font-size:23px;letter-spacing:-.01em}
.brand span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);font-weight:600;line-height:1}
.brand .bt{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.top-r{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.top-r select{max-width:210px}

select,input,textarea{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 11px;min-height:40px;width:100%}
textarea{min-height:84px;resize:vertical;line-height:1.45}
.top-r select{width:auto}
@media (max-width:560px){#gswitch{display:none}.brand span{display:none}.top-r{gap:6px}.top-in{gap:8px}}
select:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;padding:9px 17px;font-weight:600;border:1px solid transparent;cursor:pointer;min-height:40px;white-space:nowrap;background:var(--surface2);color:var(--ink);transition:background .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--pig);color:var(--on-primary)}
.btn.primary:hover{background:var(--pig-dark)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{background:var(--surface2)}
.btn.soft:hover{background:color-mix(in srgb,var(--surface2) 70%,var(--line))}
.btn.danger{background:var(--warn);color:#fff}
.btn.good{background:var(--good);color:var(--surface)}
.btn.sm{padding:5px 12px;min-height:32px;font-size:13px}
.btn[disabled]{opacity:.55;cursor:default}
.btn svg{width:16px;height:16px;flex:none}
.linkbtn{background:none;border:0;padding:0;color:var(--pig-ink);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

.banner{border-radius:14px;padding:10px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px;margin-top:14px}
.banner.info{background:var(--pig-soft);color:var(--pig-ink)}
.banner.warn{background:var(--warn-bg);color:var(--warn)}
.banner .btn{margin-left:auto}
.banner strong{font-weight:700}

.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px}
.h2{font-family:var(--f-display);font-weight:800;font-size:19px;margin:0;letter-spacing:-.005em}
.card-h{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.eyebrow{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);font-weight:700}

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 9px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.p-good{background:var(--good-bg);color:var(--good)}
.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-bad{background:var(--bad-bg);color:var(--bad)}
.p-neutral{background:var(--surface2);color:var(--ink2)}
.p-pig{background:var(--pig-soft);color:var(--pig-ink)}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid var(--line);padding:3px 10px;font-size:12.5px;font-weight:600;color:var(--ink2);background:var(--surface)}

/* pig svg */
.pg-body{fill:var(--pig)} .pg-dark{fill:var(--pig-dark)} .pg-hi{fill:var(--pig-hi);opacity:.55}
.pg-snout{fill:var(--pig-snout)} .pg-eye{fill:var(--eye)} .pg-white{fill:#fff} .pg-cross{fill:#fff}
.pg-slot{fill:var(--pig-dark)} .pg-cheek{fill:var(--pig-cheek);opacity:.65}
.pg-line{fill:none;stroke:var(--eye);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.pg-tail{fill:none;stroke:var(--pig-dark);stroke-width:5.5;stroke-linecap:round}
.pg-shadow{fill:var(--ink);opacity:.09}
.pg-star{fill:var(--coin)}
.pg-coin{fill:var(--coin);stroke:var(--coin-dark);stroke-width:2}
.pig-bob{animation:bob 3.4s ease-in-out infinite;transform-origin:50% 90%}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-1deg)}}
.coin-drop{animation:drop 2.8s cubic-bezier(.5,0,.9,.4) infinite;opacity:0}
.coin-drop.d2{animation-delay:.95s}.coin-drop.d3{animation-delay:1.9s}
@keyframes drop{0%{transform:translateY(-70px);opacity:0}15%{opacity:1}70%{opacity:1}85%,100%{transform:translateY(0);opacity:0}}
@media (prefers-reduced-motion:reduce){.pig-bob,.coin-drop{animation:none}.coin-drop{opacity:0}}

/* home */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:center;padding-block:36px 24px}
.hero h1{font-family:var(--f-display);font-weight:900;font-size:clamp(36px,6vw,60px);line-height:1.02;letter-spacing:-.02em;margin:0 0 14px}
.hero h1 em{font-style:normal;color:var(--pig)}
.hero p.lead{font-size:17px;max-width:54ch;color:var(--ink2);margin:0 0 20px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.pts{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:8px}
.pts li{display:flex;gap:10px;align-items:flex-start}
.pts li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--coin);box-shadow:inset 0 0 0 2px var(--coin-dark);margin-top:4px}
.hero-pig{display:flex;justify-content:center}
.hero-pig svg{width:100%;max-width:380px;height:auto}
@media (max-width:760px){.hero{grid-template-columns:1fr;padding-block:20px}.hero-pig{order:-1}.hero-pig svg{max-width:250px}}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 0 12px}
.sec-h h2{font-family:var(--f-display);font-weight:800;font-size:22px;margin:0}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding-bottom:10px}
.gcard{text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,transform .15s}
.gcard:hover{border-color:var(--pig);transform:translateY(-2px)}
.gcard h3{font-family:var(--f-display);font-weight:800;font-size:19px;margin:0}
.gcard p{margin:0;color:var(--ink2);font-size:14px}
.gcard .row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px}

/* group header */
.ghead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-block:26px 6px}
.ghead h1{font-family:var(--f-display);font-weight:900;font-size:clamp(28px,4.4vw,42px);line-height:1.05;margin:6px 0 4px;letter-spacing:-.015em}
.ghead .goal{margin:0;color:var(--ink2);font-size:16px}
.ghead .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.backlink{background:none;border:0;padding:0;cursor:pointer;color:var(--ink2);font-weight:600;font-size:13px}
.backlink:hover{color:var(--pig-ink)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:14px 0 20px;overflow-x:auto;scrollbar-width:none}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;font-weight:600;color:var(--ink2);cursor:pointer;white-space:nowrap;display:flex;gap:6px;align-items:center}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--pig)}
.badge{background:var(--pig);color:var(--on-primary);border-radius:999px;font-size:11px;padding:1px 7px;font-weight:700}

/* dashboard */
.dash{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start;padding-bottom:30px}
.col{display:flex;flex-direction:column;gap:20px;min-width:0}
@media (max-width:880px){.dash{display:flex;flex-direction:column}.col{display:contents}.o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}}
.pigcard{background:var(--pig-soft);border-color:transparent;display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:18px;align-items:center}
.pigcard .pigbox svg{width:100%;height:auto;display:block}
@media (max-width:560px){.pigcard{grid-template-columns:1fr}.pigcard .pigbox{max-width:220px;margin:0 auto;width:100%}}
.bubble{position:relative;background:var(--surface);border-radius:18px;padding:13px 15px;font-size:15px;line-height:1.45;box-shadow:var(--shadow)}
.bubble::before{content:"";position:absolute;left:-7px;top:22px;width:14px;height:14px;background:var(--surface);transform:rotate(45deg);border-radius:3px}
@media (max-width:560px){.bubble::before{left:40px;top:-7px}}
.bubble .who{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--pig-ink);display:flex;justify-content:space-between;gap:8px;margin-bottom:3px;align-items:center}
.bubble p{margin:0}
.bubble b{font-weight:700}
.big{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,5vw,46px);line-height:1;letter-spacing:-.02em;color:var(--pig-ink)}
.kpi-main{margin-top:16px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.kpi{min-width:0}
.kpi .v{font-weight:700;font-size:16px;overflow-wrap:anywhere}
.kl{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);font-weight:700}
.bar{position:relative;height:14px;border-radius:99px;background:var(--surface);margin-top:16px;overflow:hidden}
.bar>i{position:absolute;inset:0 auto 0 0;background:var(--pig);border-radius:99px;min-width:4px}
.bar>s{position:absolute;top:3px;bottom:3px;width:2px;background:var(--line);border-radius:2px}
.bar-l{display:flex;justify-content:space-between;font-size:13px;margin-top:6px;color:var(--ink2);gap:10px}
.bar-l b{color:var(--ink)}

.me-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.me-big{font-family:var(--f-display);font-size:34px;font-weight:800;line-height:1.05;letter-spacing:-.015em}
.me-big small{font-family:var(--f-body);font-size:15px;color:var(--ink2);font-weight:500;letter-spacing:0}
.dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:14px 0;font-size:14px}
.dl dt{color:var(--ink2)} .dl dd{margin:0;text-align:right;font-weight:600}
.dl dd.bad{color:var(--bad)}
.note-pig{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:start;background:var(--surface2);border-radius:16px;padding:10px 12px;margin-bottom:14px;font-size:14px}
.note-pig svg{width:48px;height:40px}
.note-pig p{margin:0}
.actions{display:flex;gap:8px;flex-wrap:wrap}

.plist{display:flex;flex-direction:column}
.prow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.prow:first-child{border-top:0;padding-top:0}
.prow .t{font-weight:600;overflow-wrap:anywhere}
.prow .s{font-size:13px;color:var(--ink2)}
.prow .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

.av{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex:none;overflow:hidden;object-fit:cover}
.av.lg{width:36px;height:36px}

.feed{display:flex;flex-direction:column}
.fi{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.fi:first-child{border-top:0;padding-top:2px}
.fi .ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center}
.fi .ic svg{width:19px;height:19px}
.ic.dep{background:var(--good-bg);color:var(--good)}
.ic.wd{background:var(--warn-bg);color:var(--warn)}
.ic.pend{background:var(--surface2);color:var(--ink2)}
.ic.rej{background:var(--bad-bg);color:var(--bad)}
.ic.ms{background:var(--pig-soft);color:var(--pig-ink)}
.ic.join{background:var(--surface2);color:var(--ink2)}
.fi p{margin:0}
.fi b{font-weight:700}
.fi time{font-size:12.5px;color:var(--ink2)}
.reacts{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.react{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:2px 10px;font-size:13px;cursor:pointer;display:inline-flex;gap:5px;align-items:center}
.react[aria-pressed="true"]{border-color:var(--pig);background:var(--pig-soft);color:var(--pig-ink)}
.react[disabled]{cursor:default}

.wall .prow .line{font-size:13px;color:var(--ink2)}
.wall .amt{font-size:12.5px;color:var(--ink2);text-align:right;margin-top:3px}
.wall-r{display:flex;flex-direction:column;align-items:flex-end}

/* tables */
.tblw{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);text-align:left;padding:12px 12px;font-weight:700;white-space:nowrap;background:var(--surface2)}
.tbl td{padding:11px 12px;border-top:1px solid var(--line);vertical-align:middle}
.tbl td.r,.tbl th.r{text-align:right}
.tbl td.nw{white-space:nowrap}
.tbl .who{display:flex;gap:8px;align-items:center;white-space:nowrap}
.tbl .acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap}
.amt-in{color:var(--good);font-weight:700}
.amt-out{color:var(--warn);font-weight:700}
.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.seg{display:inline-flex;background:var(--surface2);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;border-radius:999px;padding:6px 13px;font-weight:600;font-size:13.5px;cursor:pointer;color:var(--ink2)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}

.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;padding-bottom:30px;align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.codebox{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--pig-soft);border-radius:16px;padding:14px}
.code{font-family:var(--f-display);font-weight:800;font-size:28px;letter-spacing:.14em;color:var(--pig-ink)}
.rules-dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;font-size:14.5px}
.rules-dl dt{color:var(--ink2)} .rules-dl dd{margin:0;font-weight:600}
.rules-text{white-space:pre-wrap;background:var(--surface2);border-radius:14px;padding:12px 14px;margin-top:14px;font-size:14.5px}
.sched{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sched li{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.sched li:first-child{border-top:0}
.dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--line)}
.dot.paid{background:var(--good);border-color:var(--good)}
.dot.part{background:linear-gradient(90deg,var(--good) 50%,transparent 50%);border-color:var(--good)}
.dot.late{background:var(--bad);border-color:var(--bad)}
.dot.today{border-color:var(--pig)}

/* modal */
[hidden]{display:none!important}
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}
.scrim{position:absolute;inset:0;background:rgba(25,8,12,.5)}
.dlg{position:relative;background:var(--surface);border-radius:22px;width:min(580px,100%);max-height:calc(100% - 24px);display:flex;flex-direction:column;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);border:1px solid var(--line)}
.dlg header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 8px;gap:10px}
.dlg header h2{font-family:var(--f-display);font-weight:800;font-size:22px;margin:0}
.dlg .x{background:var(--surface2);border:0;border-radius:50%;width:34px;height:34px;font-size:20px;line-height:1;cursor:pointer;color:var(--ink2)}
.dlg-b{overflow:auto;padding:6px 20px 12px;display:flex;flex-direction:column;gap:14px}
.dlg footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld label{font-weight:600;font-size:13.5px}
.fld .hint{margin:0;font-size:12.5px;color:var(--ink2)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:480px){.grid2{grid-template-columns:1fr}}
.err{background:var(--bad-bg);color:var(--bad);border-radius:12px;padding:9px 12px;margin:0;font-size:14px;font-weight:600}
.infobox{background:var(--surface2);border-radius:14px;padding:10px 12px;font-size:13.5px;color:var(--ink2);margin:0}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:600;z-index:80;box-shadow:var(--shadow);max-width:calc(100% - 32px);text-align:center}
footer.foot{border-top:1px solid var(--line);margin-top:10px;padding-block:18px 28px;color:var(--ink2);font-size:13px;display:flex;gap:10px;align-items:center}
footer.foot .foot-buzka svg{flex:none}
.empty{text-align:center;padding:26px 10px;color:var(--ink2)}
.empty svg{width:110px;height:90px;display:block;margin:0 auto 8px}
.loading{display:grid;place-items:center;padding:80px 16px;color:var(--ink2);gap:10px;text-align:center}
.loading svg{width:140px;height:112px}

/* ===== v1.0-web: dodatki ===== */
:root{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0}
[hidden]{display:none!important}
:lang(hu) .btn,:lang(hu) .pill,:lang(hu) h1,:lang(hu) h2,:lang(hu) .tabs button{hyphens:auto;-webkit-hyphens:auto}
.btn{white-space:normal;text-align:center}
.pill{white-space:normal}
a.gcard:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hero .card .fld input{font-size:16px}
input,select,textarea{font-size:16px}
@media (min-width:720px){input,select,textarea{font-size:15px}}
footer.foot a{color:inherit}
.chip svg{width:14px;height:14px}
.dlg{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
.dlg-b{min-height:0;flex:1 1 auto}
@media (max-width:560px){
  .prow:has(.acts .btn){grid-template-columns:30px minmax(0,1fr)}
  .prow:has(.acts .btn) .acts{grid-column:1 / -1;justify-content:flex-start;padding-left:40px}
}

/* ======================= v1.1 ======================= */
body{background:var(--bg);color:var(--ink);font-family:var(--f-body)}
.voice{font-family:var(--f-display);font-weight:700}
.num{font-variant-numeric:tabular-nums}
/* nagłówek z logo (D-026) */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-logo{width:128px;height:auto;display:block}
.brand .tagline{font-family:var(--f-display);font-weight:800;font-size:13px;color:var(--ink2)}
@media (max-width:560px){.brand .tagline{display:none}.brand-logo{width:120px}}
.btn.icon{font-size:18px;min-width:40px;padding:6px 10px}
.btn.big{min-height:48px;padding:12px 24px;font-size:16px}
.btn.primary{color:var(--on-primary)}
.btn[aria-busy="true"]{opacity:.8;pointer-events:none}
.btn.sel{outline:2px solid var(--ink);outline-offset:-2px}
.hot{color:var(--warn)}
.okline{color:var(--good);font-weight:700;margin:10px 0 0}
.infobox.warnbox,.warnbox{background:var(--warn-bg);color:var(--warn)}
.warnbox-card{border-color:var(--warn)}
.card.conf{border-color:var(--progress-pending)}
.foot-buzka svg{width:28px;height:28px;border-radius:8px;display:block}
footer.foot a{color:var(--pig-ink)}
.code{font-family:var(--f-display);font-weight:900;font-size:28px;letter-spacing:.14em;color:var(--ink)}
.badge.dot{width:8px;height:8px;padding:0;border-radius:50%;display:inline-block;margin-left:6px}
.wrapgap{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin-top:6px}
.check input{width:20px;height:20px;min-height:0;margin:2px 0 0;accent-color:var(--pig)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;background:var(--surface)}
.seg button{border:0;background:none;border-radius:999px;padding:7px 14px;font-weight:600;cursor:pointer;color:var(--ink2)}
.seg button[aria-checked="true"]{background:var(--ink);color:var(--bg)}
.hint.ok{color:var(--good);font-weight:600}.hint.bad{color:var(--warn);font-weight:600}
.settings{display:grid;gap:18px;max-width:720px;padding-bottom:30px}
.settings .row{display:flex;gap:8px}
/* Pigi */
.pigi{display:block;overflow:visible}
.pigi.big{width:100%;max-width:240px;height:auto;margin:0 auto}
.pigi.mid{width:140px;height:auto;margin:0 auto}
.pigi.mini{width:64px;height:auto}
.pigi.tiny{width:44px;height:auto}
.hero-pig .pigi{max-width:320px}
.bob .pigi-body,.pigi.bob .pigi-body{animation:pgbob 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes pgbob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.pigi-coin{animation:pgcoin 2.6s var(--ease-drop) infinite}
@keyframes pgcoin{0%,60%{transform:translateY(0)}80%{transform:translateY(-10px)}100%{transform:translateY(0)}}
.pigcard .pigbox{display:grid;place-items:center}
.pigcard{background:var(--pig-soft);color:var(--ink)}
.bubble{background:var(--surface);color:var(--ink)}
.bubble::before{background:var(--surface)}
.bubble .who{color:var(--pig-ink)}
.big{color:var(--ink)}
.note-pig{grid-template-columns:48px 1fr}
.np-pig{display:grid;place-items:center}
/* pasek w trzech warstwach (FN-O01) */
.pbar{display:grid;gap:6px;margin-top:14px}
.pbar-track{position:relative;height:14px;border-radius:999px;background:var(--progress-track);overflow:visible}
.pbar.compact .pbar-track{height:10px}
.pbar-track .pb-done{position:absolute;inset:0 auto 0 0;background:var(--progress);border-radius:999px;min-width:4px}
.pbar-track .pb-pend{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(-45deg,var(--progress-pending) 0 4px,var(--progress-track) 4px 8px);border-radius:0 999px 999px 0}
.pbar-track u{position:absolute;top:3px;bottom:3px;width:2px;margin-left:-1px;background:var(--surface);opacity:.8;border-radius:2px}
.pbar-track .pb-plan{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;background:var(--ink);border-radius:2px}
.pbar-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--ink2)}
.pbar-meta .pct{color:var(--progress-text)}
/* tempo i statusy – nigdy sam kolor: ikona + tekst */
.tchip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 11px;font-size:13px;font-weight:700;white-space:nowrap}
.tchip.good{background:var(--good-bg);color:var(--good)}
.tchip.pend{background:var(--progress-track);color:var(--progress-text)}
.tchip.alert{background:var(--warn-bg);color:var(--warn)}
.tchip.neutral{background:var(--surface2);color:var(--ink2)}
.p-bad{background:var(--warn-bg);color:var(--warn)}
/* frekwencja */
.att{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:13.5px;color:var(--ink2)}
.dots{display:inline-flex;gap:4px;flex-wrap:wrap}
.dots i{width:11px;height:11px;border-radius:50%;border:2px solid var(--progress-pending);display:inline-block}
.dots .d-full{background:var(--progress-pending)}
.dots .d-half{background:linear-gradient(90deg,var(--progress-pending) 50%,transparent 50%)}
/* moja część */
.me-top{display:flex;gap:14px;align-items:center}
.ring{width:64px;height:64px;flex:none}
.ring-bg{fill:none;stroke:var(--progress-track);stroke-width:7}
.ring-fg{fill:none;stroke:var(--progress);stroke-width:7;stroke-linecap:round}
.ring text{font:700 13px var(--f-body);fill:var(--ink)}
/* karty zbiórek */
.gcard{text-decoration:none;color:inherit}
.boxcard .bc-mid{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center}
.boxcard .row{flex-wrap:wrap}
.bc-info{display:grid;gap:6px}
.bc-info .pbar{margin-top:0}
/* odznaki */
.bline{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.bchip{display:inline-flex;gap:4px;align-items:center;border-radius:999px;padding:2px 9px;font-size:12.5px;font-weight:600;background:var(--progress-track);color:var(--progress-text)}
.bchip.priv{background:var(--surface2);color:var(--ink2)}
/* podsumowanie */
.digest{margin:0;padding-left:18px;display:grid;gap:8px}
.digest ul{margin:4px 0 0;padding-left:16px;color:var(--ink2);font-size:14px}
/* splash (Splash z systemu marki) */
.pg-splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;align-content:center;gap:24px;background:var(--splash-bg);color:var(--splash-ink);transition:opacity .2s}
.pg-splash.out{opacity:0}
.pg-splash .logo{width:78%;max-width:340px;overflow:visible}
.pg-splash__tag{margin:0;font:800 20px/26px var(--f-display);color:var(--splash-ink);opacity:0;animation:pg-fade-up 380ms var(--ease-out) 900ms forwards}
.pg-splash .pg-drop-coin{animation:pg-splash-drop 520ms var(--ease-drop) 120ms both}
.pg-splash .pg-pig-body{transform-box:fill-box;transform-origin:50% 100%;animation:pg-gulp 420ms var(--ease-gulp) 620ms both}
.pg-splash--loop .pg-drop-coin{animation:pg-loop-drop 1400ms var(--ease-drop) infinite}
.pg-splash--loop .pg-pig-body{animation:pg-loop-gulp 1400ms var(--ease-gulp) infinite}
.pg-splash .line{margin:0;font:700 16px/24px var(--f-display);min-height:24px}
.pg-splash .slow{margin:0;font:500 14px var(--f-body)}
@keyframes pg-splash-drop{0%{transform:translateY(-260px)}100%{transform:translateY(0)}}
@keyframes pg-gulp{0%{transform:scale(1,1)}40%{transform:scale(1.06,.94)}100%{transform:scale(1.03,1)}}
@keyframes pg-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pg-loop-drop{0%{transform:translateY(-260px);opacity:0}10%{opacity:1}45%,100%{transform:translateY(0)}}
@keyframes pg-loop-gulp{0%,44%{transform:scale(1,1)}56%{transform:scale(1.05,.95)}72%,100%{transform:scale(1,1)}}
/* ======================= wprowadzenie ======================= */
.onb{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}
.onb-note{background:var(--progress-track);color:var(--progress-text);text-align:center;font-weight:700;font-size:13px;padding:6px 12px}
.onb-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:14px 16px;max-width:1120px;width:100%;margin:0 auto}
.onb-top > :last-child{justify-self:end}
.onb-logo{width:120px;height:auto;display:block}
.onb-dots{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.onb-dots li{width:9px;height:9px;border-radius:50%;background:var(--line)}
.onb-dots li.done{background:var(--progress-pending)}
.onb-dots li.cur{background:var(--pig);width:26px;border-radius:999px}
.onb-main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:8px 16px 28px}
.onb h1{font-family:var(--f-display);font-weight:900;font-size:clamp(28px,5vw,44px);line-height:1.08;margin:6px 0 14px;outline:none}
.onb .lead{font-size:17px;color:var(--ink2);margin:0 0 18px;max-width:62ch}
.onb-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;position:sticky;bottom:0;z-index:5;padding:12px 0;background:var(--bg);box-shadow:0 -1px 0 var(--line)}
.onb-welcome,.onb-id,.onb-inv,.onb-done{max-width:640px;margin:0 auto}
.onb-hero{display:grid;justify-items:center;gap:8px;padding:18px 0 6px}
.onb-biglogo{width:min(360px,86%);height:auto}
.onb-tag{margin:0;font-size:20px;color:var(--ink)}
.onb-pig{display:grid;place-items:center;margin-top:10px}
.onb .pts li{font-size:16px}
/* karuzela języków: telefon – jedna opcja naraz; desktop – obok siebie */
.lang-car{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:6px}
.lang-viewport{overflow:hidden;touch-action:pan-y}
.lang-track{display:flex;transition:transform .25s var(--ease-out);transform:translateX(calc(var(--i) * -100%))}
.lang-opt{flex:0 0 100%;display:grid;gap:4px;text-align:left;border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:16px;padding:16px 18px;cursor:pointer;font:inherit}
.lang-opt b{font-size:18px}
.lang-opt span{color:var(--ink2);font-size:15px}
.lang-opt[aria-checked="true"]{border-color:var(--pig);box-shadow:0 0 0 3px var(--pig-soft)}
.car-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:22px;cursor:pointer;color:var(--ink)}
.car-dots{display:flex;justify-content:center;gap:6px;list-style:none;padding:0;margin:10px 0 0}
.car-dots li{width:7px;height:7px;border-radius:50%;background:var(--line)}
.car-dots li.cur{background:var(--pig)}
@media (min-width:760px){
  .lang-car{grid-template-columns:1fr}.car-arrow,.car-dots{display:none}
  .lang-track{transform:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .lang-opt{flex:auto}
}
/* „prawdziwy widok” z numerami i opisami */
.onb-split{position:relative;display:grid;gap:18px}
@media (min-width:900px){.onb-split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}}
.onb-stage-wrap{position:relative;overflow:hidden;border:2px dashed var(--border-strong);border-radius:20px;background:var(--bg)}
.onb-stage{transform-origin:0 0;pointer-events:none;padding:12px}
.onb-stage .dash{display:flex;flex-direction:column;gap:14px}
.onb-stage .col{display:contents}
.onb-stage .o4,.onb-stage .o5,.onb-stage .conf,.onb-stage .warnbox-card,.onb-stage [data-onb=pay]{display:none}
.onb-stage .pigcard{grid-template-columns:120px minmax(0,1fr)}
.onb-stage .top{position:static}
.onb-stage .wrap{padding-inline:14px}
.ex-badge{position:absolute;bottom:10px;left:10px;z-index:3;background:var(--ink);color:var(--bg);font-weight:800;font-size:11px;letter-spacing:.12em;padding:4px 10px;border-radius:999px}
.num-marker{position:absolute;z-index:4;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--pig);color:var(--on-primary);font:800 14px/26px var(--f-body);text-align:center;box-shadow:0 0 0 3px var(--bg)}
.onb-callouts{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.onb-callouts li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;font-size:15.5px}
.num-badge{width:26px;height:26px;border-radius:50%;background:var(--pig);color:var(--on-primary);font:800 14px/26px var(--f-body);text-align:center}
.onb-lines{position:absolute;inset:0;pointer-events:none;overflow:visible}
.onb-lines polyline{fill:none;stroke:var(--pig);stroke-width:1.5;stroke-dasharray:4 4;opacity:.75}
@media (prefers-reduced-motion:reduce){
  .bob .pigi-body,.pigi.bob .pigi-body,.pigi-coin,.lang-track,.pg-splash .pg-drop-coin,.pg-splash .pg-pig-body,.pg-splash__tag{animation:none!important;transition:none!important}
  .pg-splash__tag{opacity:1}
}

.brand svg.brand-logo{width:140px;height:auto}
.brand .tagline{display:block;text-transform:none;letter-spacing:0;font-size:13px;line-height:1.2}
@media (max-width:560px){.brand svg.brand-logo{width:120px}}
.onb-top .btn{white-space:nowrap}

/* ===== P1b (v1.2): uproszczony interfejs (D-029) i rozliczenie (D-030–D-034) ===== */
.sbox{display:grid;gap:14px;max-width:640px;padding-bottom:30px}
.sbox .card{margin:0}
.ps-card{display:flex;gap:12px;align-items:flex-start;background:var(--surface2);border-radius:16px;padding:12px 14px}
.ps-card .ps-pig{flex:0 0 auto;width:44px;height:44px}.ps-card .ps-pig svg{width:44px;height:44px}
.ps-card .ps-who{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--ink2);margin-bottom:2px}
.ps-card .voice{margin:0;font-size:15px;line-height:1.4}
.ps-card.small-card{padding:10px 12px}.ps-card.small-card .voice{font-size:13.5px}
.pigrow{display:flex;gap:14px;align-items:center}.pigrow .pigbox{flex:0 0 auto}.pigrow .pigi.mid{width:96px;height:auto}.pigrow .ps-card{flex:1}
.scard{display:block;color:inherit;text-decoration:none;padding:14px 16px}
.scard .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.scard .sc-name{font-size:17px;font-family:var(--f-display)}
.scard .pbar{margin-top:8px;margin-bottom:6px}
.scard.hot{border-color:var(--pig)}
.sentence{font-size:15px;margin-top:10px}
.sentence b{font-family:var(--f-display);font-size:18px}
.mypart{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--surface2);font-size:14px}
.mypart.ok{background:var(--good-bg,rgba(22,101,52,.08))}.mypart.wait{background:var(--warn-bg)}
.mypart b{font-size:15px}
.card.mine{border-color:var(--pig)}
.card.mine .mypart{margin-top:0}
.card.mine .why{margin-bottom:10px}
.payval{font-size:18px;font-weight:700;font-family:var(--f-display)}
.card.conf{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.btn.wide{width:100%}.btn.good.big{min-height:48px;font-size:16px}
.clist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.clist .card{margin:0}
.clist .row{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.center{text-align:center}
details.feed-d summary,details.closed-list summary,details.more summary,details.why summary{cursor:pointer;font-weight:700;color:var(--ink2);font-size:14px;list-style:none;display:flex;align-items:center;gap:6px}
details summary::-webkit-details-marker{display:none}
details.feed-d summary::before,details.closed-list summary::before,details.more summary::before,details.why summary::before{content:'▸';font-size:12px;transition:transform .15s}
details[open].feed-d summary::before,details[open].closed-list summary::before,details[open].more summary::before,details[open].why summary::before{transform:rotate(90deg)}
details.feed-d .feed{margin-top:10px}
details.closed-list{margin-top:8px}details.closed-list .gcards{margin-top:10px}
details.more{margin-top:6px}details.more .more-in{display:grid;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
details.why{margin-top:8px}.why .why-p{padding:8px 0;border-top:1px solid var(--line)}.why .why-p .row{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}
.why .topup{color:var(--warn);font-weight:700}.why .refund{color:var(--good);font-weight:700}
.wl{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:3px 0}.wl.muted{color:var(--ink2)}.wl.total{border-top:1px dashed var(--line);margin-top:4px;padding-top:6px;font-weight:700}
.wl .num.ok{color:var(--good)}.wl .num.bad{color:var(--warn)}
.note-q{font-size:13.5px;color:var(--ink2);font-style:italic;margin:6px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip.check{cursor:pointer;margin-top:0;gap:6px;padding:6px 12px}
.chip.check input{width:16px;height:16px;margin:0}
.chip.check.on{background:var(--pig);color:var(--on-primary);border-color:var(--pig)}
.chip.check.dis{opacity:.5;cursor:not-allowed}
.settle .extra{background:var(--surface2);margin-top:10px}
.settle .sum{border-color:var(--pig)}
.bd .row{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.bd-ico{font-size:28px;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--surface2);flex:0 0 auto}
.bd.dark{background:var(--ink);color:var(--surface)}.bd.dark .bchip{background:rgba(255,255,255,.14);color:var(--surface)}.bd.dark .small{color:rgba(255,255,255,.75)}
.bd.sheep{background:var(--surface2)}
.bottomnav{position:sticky;bottom:0;z-index:20;display:flex;justify-content:space-around;background:var(--surface);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom));margin-top:10px}
.bottomnav .nb{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;font-weight:700;color:var(--ink2);text-decoration:none;padding:4px 14px;border-radius:12px;min-width:84px}
.bottomnav .nb .nb-ic{width:22px;height:22px;display:block}.bottomnav .nb .nb-ic svg{width:22px;height:22px}
.bottomnav .nb.on{color:var(--pig);background:var(--surface2)}
@media(min-width:800px){.bottomnav{position:static;max-width:640px;margin:10px auto 0;border:1px solid var(--line);border-radius:16px}}
.onb-stage .bottomnav{position:static}
.onb-stage .feed-d,.onb-stage .footer-short{display:none}
.scard .sentence{font-size:13.5px;margin-top:4px}.scard .sentence b{font-size:15px}
.settle .card > .row,.bd .row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.bd .row{justify-content:flex-start;align-items:center}

/* v0.8 (7.2): złote koło pod dużym Pigim tylko na jasnym (kremowym) tle */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pigi-ground{display:none} }
:root[data-theme="dark"] .pigi-ground{display:none}

/* ===== BETA + stopka marki ===== */
.beta{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--progress-track);color:var(--progress-text);font:800 11px/1 var(--f-display);letter-spacing:.08em;vertical-align:middle;flex:none}
.brand .beta{margin-left:-2px}
.beta-line{margin:0 0 10px;font-size:13.5px;color:var(--ink2);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pg-splash__beta{position:absolute;right:18px;top:calc(18px + env(safe-area-inset-top));padding:4px 10px;border-radius:999px;background:var(--splash-ink);color:var(--splash-bg);font:800 11px/1 var(--f-display);letter-spacing:.1em;opacity:.85}
footer.foot{border-top:1px solid var(--line);margin-top:22px;padding:0;color:var(--ink2);font-size:13px;display:block;background:var(--surface2)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:14px 24px;align-items:center;padding-block:20px 22px}
.foot-brand{display:flex;gap:12px;align-items:center}.foot-brand > div{display:flex;flex-direction:column;gap:2px}
.foot-brand .voice{font-size:15px;color:var(--ink)}
.foot-buzka svg{width:40px;height:40px;border-radius:11px;flex:none;display:block}
.foot-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-self:end}
.foot-meta .foot-beta-hint{flex-basis:100%;text-align:right}
.foot-links{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:12px;border-top:1px dashed var(--line)}
footer.foot .foot-links a{color:var(--ink2);text-decoration:none;font-weight:600}footer.foot .foot-links a:hover{color:var(--link);text-decoration:underline}
.foot-coin{width:8px;height:8px;border-radius:50%;background:var(--progress);display:inline-block}
@media(max-width:600px){.foot-in{grid-template-columns:1fr}.foot-meta{justify-self:start}.foot-meta .foot-beta-hint{text-align:left}}
.onb-stage footer.foot{display:none}
@media (max-width:560px){.brand span.beta{display:inline-flex}}