/* Ježíškovník – a winter-night village. Night indigo, snow, candle-yellow; berry red only for "over budget" and "delete". */
:root{
  --bg:#edf2f8; --card:#fff; --ink:#17233b; --mut:#586782; --line:#d6dfeb; --line2:#e7edf5;
  --night1:#101a33; --night2:#27395f; --candle:#f2b53f; --candle-soft:#fdf0d0; --candle-ink:#2a1d00;
  --pine:#2c7a5a; --berry:#b3343a; --focus:#2b6cdf;
  --vwall:#16264a; --vroof:#0d1832; --vtree:#0f2a2e; --vwin:#31446e;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sh:0 1px 2px rgba(16,26,51,.06),0 8px 22px -12px rgba(16,26,51,.22);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b1222; --card:#141f38; --ink:#e8eefb; --mut:#9aabc9; --line:#263451; --line2:#1c2844;
  --candle-soft:#3a3016; --pine:#6fd1a4; --berry:#ff8b90; --focus:#7fb0ff;
  --vwall:#0a1226; --vroof:#060b19; --vtree:#08191c; --vwin:#25365b;
  --sh:0 1px 2px rgba(0,0,0,.4),0 10px 26px -14px rgba(0,0,0,.7);
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h1,h2,h3{margin:0}
h3{font-size:1.05rem;margin:0 0 4px}
.muted{color:var(--mut);font-size:.85rem}.err{color:var(--berry)}
.wrap{max-width:1100px;margin:0 auto;padding:18px 16px 40px}

/* ---------- controls ---------- */
button,select,input,textarea{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
input,select,textarea{min-width:0}
button{cursor:pointer;transition:border-color .12s,background-color .12s}
button:hover{border-color:var(--mut)}
button.primary{background:var(--candle);border-color:var(--candle);color:var(--candle-ink);font-weight:650}
button.primary:hover{filter:brightness(1.05);border-color:var(--candle)}
button.danger{color:var(--berry);border-color:var(--berry)}
button.primary.danger{background:var(--berry);border-color:var(--berry);color:#fff}
textarea{resize:vertical}
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;padding:0;border:1.5px solid var(--mut);border-radius:6px;display:inline-grid;place-content:center;cursor:pointer;flex:none}
input[type=checkbox]::after{content:"";width:9px;height:5px;border-left:2.2px solid transparent;border-bottom:2.2px solid transparent;transform:rotate(-45deg) translate(1px,-1px)}
input[type=checkbox]:checked{border-color:transparent}
input[type=checkbox]:checked::after{border-color:#fff}
input[type=checkbox][data-f=buy]:checked,.chk input:checked{background:var(--candle)}
input[type=checkbox][data-f=buy]:checked::after,.chk input:checked::after{border-color:var(--candle-ink)}
input[type=checkbox][data-f=bought]:checked{background:var(--pine)}
@media (prefers-color-scheme:dark){input[type=checkbox][data-f=bought]:checked::after{border-color:#06241a}}

/* ---------- hero: the village ---------- */
.hero{position:relative;overflow:hidden;color:#eaf0fb;background:linear-gradient(180deg,var(--night1),var(--night2))}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(1.3px 1.3px at 8% 24%,#ffffffb0,transparent),radial-gradient(1px 1px at 22% 52%,#ffffff90,transparent),
  radial-gradient(1.5px 1.5px at 41% 16%,#ffffffc0,transparent),radial-gradient(1px 1px at 56% 44%,#ffffff80,transparent),
  radial-gradient(1.4px 1.4px at 71% 20%,#ffffffa0,transparent),radial-gradient(1px 1px at 86% 48%,#ffffff90,transparent),
  radial-gradient(1.3px 1.3px at 95% 14%,#ffffffb0,transparent)}
.snow{position:absolute;inset:0;pointer-events:none;opacity:.75;
  background-image:radial-gradient(2.4px 2.4px at 20px 30px,#fff,transparent),radial-gradient(2px 2px at 95px 125px,#ffffffd0,transparent),radial-gradient(3px 3px at 160px 70px,#fff,transparent),radial-gradient(1.8px 1.8px at 60px 185px,#ffffffc0,transparent)}
.snow.s1{background-size:220px 220px;animation:fall1 22s linear infinite}
.snow.s2{background-size:340px 340px;background-position:80px 0;opacity:.45;animation:fall2 38s linear infinite}
@keyframes fall1{to{background-position:0 220px}}
@keyframes fall2{from{background-position:80px 0}to{background-position:80px 340px}}
.hero-in{position:relative;max-width:1100px;margin:0 auto;padding:26px 16px 6px}
.ttl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
h1{font:italic 700 clamp(2rem,5.2vw,3.1rem)/1.05 var(--serif);letter-spacing:-.01em;color:#fff;overflow-wrap:anywhere}
.yr{padding:2px 11px;border:1px solid var(--candle);border-radius:999px;color:var(--candle);font:600 .95rem system-ui,sans-serif}
.count{margin:6px 0 0;font-size:1rem;color:#dbe5f8}
.who{margin:2px 0 0;font-size:.85rem;color:#a9b9d8}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 14px}
.hero button,.hero select{background:#ffffff14;border-color:#ffffff38;color:#eef3fc}
.hero select option{color:#17233b;background:#fff}
.hero button:hover{border-color:var(--candle);background:#ffffff22}
.hero button.primary{background:var(--candle);border-color:var(--candle);color:var(--candle-ink)}
.ground{position:relative;max-width:940px;margin:0 auto}
.ground svg{display:block;width:100%;height:auto}
.ground::after{content:"";position:absolute;left:-50vw;right:-50vw;bottom:0;height:clamp(7px,1.5vw,13px);background:var(--bg);border-radius:60% 60% 0 0/100% 100% 0 0}
.v-w{fill:var(--vwall)}.v-r{fill:var(--vroof)}.v-s{fill:#e8f0fb}.v-t{fill:var(--vtree)}
.v-win{fill:var(--vwin);transition:fill .5s}
.v-win.on{fill:var(--candle);filter:drop-shadow(0 0 3px rgba(242,181,63,.95))}

/* ---------- budget summary ---------- */
#sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:6px 0 18px}
.m{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--sh)}
.m b{font-weight:650}
.m .amt{display:block;margin-top:2px;font:700 1.35rem/1.2 var(--serif);font-variant-numeric:tabular-nums}
.m .of{font:400 .85rem system-ui,sans-serif;color:var(--mut)}
.meter{height:7px;background:var(--line2);border-radius:4px;margin:9px 0 7px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--pine);border-radius:4px;transition:width .35s}
.m.over .meter i{background:var(--berry)}
.m.over .left{color:var(--berry);font-weight:600}
.m small{display:block;color:var(--mut)}

/* ---------- help ---------- */
details.help{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 14px;margin:0 0 16px}
.help summary{cursor:pointer;font-weight:600}
.help ul{margin:8px 0 2px;padding-left:20px}.help li{margin:3px 0;color:var(--mut)}.help li b{color:var(--ink)}
.empty-state{background:var(--card);border:1px dashed var(--mut);border-radius:12px;padding:20px;text-align:center;margin:0 0 16px}
.empty-state p{margin:0 0 12px}

/* ---------- recipient cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--sh)}
.card h2{display:flex;align-items:center;gap:10px;margin-bottom:10px;font:700 1.15rem/1.2 var(--serif)}
.card h2 .nm{flex:1;min-width:0;overflow-wrap:anywhere}
.card h2 .tot{font:700 1rem system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.av{display:inline-grid;place-content:center;width:26px;height:26px;border-radius:50%;flex:none;font:700 .8rem system-ui,sans-serif;font-style:normal;color:#fff;background:var(--a,#2f5fb3)}
.card h2 .av{width:32px;height:32px;font-size:.95rem}
.av0{--a:#2f5fb3}.av1{--a:#b3343a}.av2{--a:#2c7a5a}.av3{--a:#7b3f8f}.av4{--a:#1d7480}.av5{--a:#9a5b13}.avoff{--a:#586782}.avnew{--a:var(--mut)}
.rowh,.row{display:grid;grid-template-columns:20px 20px minmax(0,1fr) 22px 86px 112px 30px 30px;gap:5px;align-items:center}
.rowh{font-size:.75rem;color:var(--mut);margin-bottom:3px;padding:0 2px}
.rowh span:nth-child(-n+2){text-align:center;cursor:help}
.rowh span:nth-child(5){text-align:right;padding-right:6px}
.row{padding:2px;margin:0 -2px 2px;border-radius:8px}
.row:hover{background:var(--line2)}
.row input:not([type=checkbox]),.row select{background:transparent;border-color:transparent;padding:5px 6px}
.row:hover input:not([type=checkbox]),.row:hover select{border-color:var(--line)}
.row input:not([type=checkbox]):focus,.row select:focus{background:var(--card);border-color:var(--focus)}
.row input[data-f=price]{text-align:right;font-variant-numeric:tabular-nums}
.row.done input[data-f=name]{text-decoration:line-through;color:var(--mut)}
.row a{display:grid;place-content:center;height:28px;text-decoration:none;color:var(--focus);font-weight:700;border-radius:6px}
.row a:hover{background:var(--line)}
.row button{padding:3px 0;width:28px;height:28px;border-color:transparent;background:transparent;color:var(--mut)}
.row button:hover{border-color:var(--line);color:var(--ink)}
.row button[data-a=del]:hover{color:var(--berry);border-color:var(--berry)}
.row .note{grid-column:1/-1;color:var(--mut);font-size:.82rem;padding:0 6px 4px 52px;white-space:pre-line}
.none{margin:2px 0 8px;color:var(--mut);font-size:.88rem}
button.addgift{display:block;width:100%;margin-top:8px;padding:9px;background:transparent;border:1.5px dashed var(--line);color:var(--mut);font-weight:600}
button.addgift:hover{border-color:var(--candle);color:var(--ink);background:var(--candle-soft)}

/* ---------- buyers / recipients management ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:22px}
.people>div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--sh)}
.people p.muted{margin:0 0 10px}
.row2{display:flex;gap:6px;margin-bottom:5px}.row2 input{flex:1}.row2 input[type=number]{flex:none;width:112px}
.row2 input{background:transparent;border-color:transparent}.row2:hover input{border-color:var(--line)}.row2 input:focus{background:var(--card);border-color:var(--focus)}
.row2 button{background:transparent;border-color:transparent;color:var(--mut)}.row2 button:hover{color:var(--berry);border-color:var(--berry)}
.people form{display:flex;gap:6px;margin-top:8px}.people form input{flex:1}.people form input[type=number]{flex:none;width:132px}

/* ---------- dialogs ---------- */
dialog{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:0;width:min(520px,94vw);max-height:92vh;box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(8,14,30,.62);backdrop-filter:blur(2px)}
dialog[open]{animation:pop .16s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}}
.dlg{display:flex;flex-direction:column;gap:14px;padding:20px 22px 18px}
.dlg h2{font:700 1.3rem/1.2 var(--serif);margin:0}
.dlg p{margin:0}
.fld{display:flex;flex-direction:column;gap:5px}
.fld>span,.fld>legend{font-weight:600;font-size:.9rem;padding:0}
fieldset.fld{border:0;margin:0;padding:0;min-width:0}
.fld input,.fld select,.fld textarea{width:100%}
.fld small{display:block}
.fld>span small{display:inline;font-weight:400}
.chk{display:flex;gap:10px;align-items:flex-start}.chk span{display:flex;flex-direction:column}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:2px}.sp{flex:1}
.inline{display:flex;gap:8px}.inline input{flex:1}.inline button{white-space:nowrap}

/* gift form */
.gift .actions{position:sticky;bottom:-18px;z-index:1;margin:2px -22px -18px;padding:12px 22px 14px;background:var(--card);border-top:1px solid var(--line2)}
.big{font-size:1.1rem;padding:10px 12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 5px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:.92rem}
.chip.plain span{padding-left:12px}
.chip input:checked+span{border-color:var(--candle);background:var(--candle-soft);font-weight:650}
.chip input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.chip:hover span{border-color:var(--mut)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg label{position:relative;display:block}
.seg label+label{border-left:1px solid var(--line)}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{display:block;text-align:center;padding:9px 4px;font-size:.92rem}
.seg input:checked+span{background:var(--candle);color:var(--candle-ink);font-weight:700}
.seg label:has(input[value=bought]) input:checked+span{background:var(--pine);color:#fff}
@media (prefers-color-scheme:dark){.seg label:has(input[value=bought]) input:checked+span{color:#06241a}}
.seg input:focus-visible+span{outline:2px solid var(--focus);outline-offset:-3px}
.pricebox{display:flex;align-items:center;gap:8px}
.pricebox input{width:140px;font-variant-numeric:tabular-nums;text-align:right}
.quick{display:flex;flex-wrap:wrap;gap:6px}
.quick button{padding:3px 10px;border-radius:999px;font-size:.85rem;color:var(--mut)}
.count-note{align-self:flex-end;margin-top:-2px}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#16233f;color:#fff;padding:10px 16px;border-radius:10px;z-index:99;max-width:90vw;box-shadow:0 6px 20px rgba(0,0,0,.3);border-left:4px solid var(--candle)}
.toast.err{background:var(--berry);color:#fff;border-left-color:#fff}
@media (prefers-color-scheme:dark){.toast.err{background:#5b1d22}}

/* ---------- sign in ---------- */
.authwrap .hero-in{padding-bottom:10px}
.auth{max-width:360px;margin:26px auto 40px;display:flex;flex-direction:column;gap:10px;background:var(--card);padding:24px;border-radius:14px;border:1px solid var(--line);box-shadow:var(--sh)}
.auth h2{font:700 1.3rem var(--serif)}
.auth>button{background:var(--candle);color:var(--candle-ink);border-color:var(--candle);font-weight:700;padding:9px}
.auth a{color:var(--focus)}

/* ---------- small screens ---------- */
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .rowh{display:none}
  .row{grid-template-columns:20px 20px minmax(0,1fr) minmax(0,1fr) 30px 30px;grid-template-areas:"b d n n e x" ". . p y y l";row-gap:2px}
  .row>[data-f=buy]{grid-area:b}.row>[data-f=bought]{grid-area:d}.row>[data-f=name]{grid-area:n}
  .row>[data-f=price]{grid-area:p}.row>[data-f=buyer]{grid-area:y}.row>[data-a=edit]{grid-area:e}.row>[data-a=del]{grid-area:x}.row>.lnk{grid-area:l}
  .row .note{padding-left:6px}
  .hero-in{padding-top:20px}
  .tools button,.tools select{flex:1 1 auto}
  .dlg{padding:18px 16px 16px}
  .gift .actions{margin:2px -16px -16px;padding:12px 16px 14px;bottom:-16px}
  .seg span{font-size:.85rem;padding:9px 2px}
  .people form{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .snow{animation:none}.meter i,.v-win{transition:none}dialog[open]{animation:none}
}