:root{
  --ink:#111111; --bg:#f3f1ec; --panel:#ffffff; --paper:#fffdf6;
  --kraft-ink:#2b1d0e; --tape:#f8b800; --stamp:#c8321e; --ok:#1f7a3a;
  --muted:#4d4d4d; --line:#dcdcd8;
  --cardboard:repeating-linear-gradient(90deg,rgba(43,29,14,.06) 0 2px,transparent 2px 7px),linear-gradient(160deg,#d4b089,#c39b6d);
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-sm:0 1px 2px rgba(17,17,17,.06),0 1px 1px rgba(17,17,17,.04);
  --sb-thumb:#c9c3b6;--sb-thumb-h:#a8a196;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--ink:#f3f3f1;--bg:#0e0e0e;--panel:#1a1a1a;--muted:#a8a8a8;--line:#2e2e2e;--ok:#4cc070;--stamp:#ff5a40;--sb-thumb:#3a3a3a;--sb-thumb-h:#555}
}
:root[data-theme="dark"]{--ink:#f3f3f1;--bg:#0e0e0e;--panel:#1a1a1a;--muted:#a8a8a8;--line:#2e2e2e;--ok:#4cc070;--stamp:#ff5a40;--sb-thumb:#3a3a3a;--sb-thumb-h:#555}

html{scroll-padding-top:5rem;scroll-behavior:smooth;scrollbar-color:var(--sb-thumb) var(--bg)}
*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
html{scrollbar-width:auto}
@supports not (scrollbar-color:auto){
  ::-webkit-scrollbar{width:12px;height:12px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--sb-thumb);border:3px solid transparent;border-radius:99px;background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background-color:var(--sb-thumb-h)}
  ::-webkit-scrollbar-corner{background:transparent}
}
::selection{background:var(--tape);color:#111}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--body);overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--tape);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.25rem}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0;letter-spacing:-.025em}
h2{font-size:clamp(2rem,5vw,3.2rem);font-weight:800}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--tape);color:#111;font:700 1rem var(--body);padding:.85rem 1.45rem;border-radius:12px;text-decoration:none;border:2px solid #111;box-shadow:0 3px 0 #111;cursor:pointer;transition:background-color .2s var(--ease),box-shadow .2s var(--ease),transform .08s var(--ease)}
.btn:hover{background:#ffc928;box-shadow:0 5px 0 #111}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 #111}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.btn.ghost:hover{background:var(--panel);box-shadow:0 5px 0 var(--ink)}

/* site header */
.site{position:sticky;top:0;z-index:50;padding:.9rem 0;background:#000;color:#fff}
.site .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.progress{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--tape);transform-origin:left;transform:scaleX(0)}
@supports (animation-timeline:scroll()){
  .progress{animation:prog linear both;animation-timeline:scroll(root)}
  @keyframes prog{to{transform:scaleX(1)}}
}
.logo{display:block;flex:none;width:clamp(150px,36vw,200px)}
.logo svg{display:block;width:100%;height:auto}
.footlogo{width:190px}
nav{display:flex;gap:.2rem;font-weight:500;font-size:.98rem}
nav a{position:relative;text-decoration:none;padding:.45rem .8rem;border-radius:8px;transition:color .2s var(--ease)}
nav a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.15rem;height:2px;border-radius:99px;background:var(--tape);transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ease)}
nav a:hover,nav a:focus-visible{color:var(--tape)}
nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1)}
nav a{white-space:nowrap}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* mobilní menu (tlačítko vkládá js/nav.js, pokud má hlavička víc odkazů) */
.menu-btn{display:none;align-items:center;gap:.45rem;padding:.45rem .75rem;border:2px solid #fff;border-radius:10px;transition:border-color .2s var(--ease),color .2s var(--ease);background:transparent;color:#fff;font:700 .9rem var(--body);cursor:pointer}
.menu-btn:hover{border-color:var(--tape);color:var(--tape)}
.menu-btn svg{display:block}
@media (max-width:980px){
  .site.has-menu .menu-btn{display:inline-flex;margin-left:auto}
  .site.has-menu nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;gap:0;padding:.4rem 1.25rem 1rem;background:#000;border-top:1px solid #222;border-bottom:3px solid var(--tape);box-shadow:0 12px 24px rgba(0,0,0,.35)}
  .site.has-menu.open nav{display:flex;animation:menu-in .22s var(--ease)}
  .site.has-menu nav a{padding:.85rem .2rem;border-bottom:1px solid #1f1f1f;font-size:1.05rem;border-radius:0}
  .site.has-menu nav a:last-child{border-bottom:0}
  .site.has-menu nav a::after{display:none}
  .site.has-menu .acct{margin-left:.5rem}
}

/* sekce a malé nadpisy (používá i účet a přihlášení) */
section{padding:5.5rem 0}
.kicker{font:700 .78rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.kicker::before{content:"■ ";color:var(--tape)}
/* čárový kód (přihlášení) */
.barcode{height:44px;background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 5px,#111 5px 6px,#fff 6px 9px,#111 9px 12px,#fff 12px 14px)}

/* formuláře v účtu */
.fm{display:grid;gap:2px;background:var(--ink);border:2px solid var(--ink);border-radius:6px;overflow:hidden;box-shadow:8px 8px 0 var(--tape)}
.fm-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:#111;color:var(--tape);padding:.85rem 1rem;font:700 .78rem var(--mono);letter-spacing:.14em;text-transform:uppercase}
.bc{flex:none;width:110px;height:26px;background:repeating-linear-gradient(90deg,var(--tape) 0 2px,transparent 2px 4px,var(--tape) 4px 5px,transparent 5px 8px,var(--tape) 8px 11px,transparent 11px 13px)}
.fm .row{display:grid;grid-template-columns:1fr 1fr;gap:2px}
@media (max-width:560px){.fm .row{grid-template-columns:1fr}}
.fm label{display:block;background:var(--panel);padding:.65rem .95rem .55rem;font:700 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fm label small{font-weight:400;text-transform:none;letter-spacing:0}
.fm label:focus-within{box-shadow:inset 0 0 0 3px var(--tape)}
.fm input,.fm textarea{display:block;width:100%;margin-top:.2rem;padding:.25rem 0;border:0;background:transparent;font:500 1.05rem var(--body);letter-spacing:0;text-transform:none;color:var(--ink)}
.fm input:focus,.fm textarea:focus{outline:none}
.fm textarea{min-height:110px;resize:vertical}
.fm .err{background:var(--panel);color:var(--stamp);font-weight:600;font-size:.95rem;padding:.6rem 1rem}
.fm .err:empty{padding:0}
.fm .btn{display:block;text-align:center;cursor:pointer;border:0;border-radius:0;box-shadow:none;padding:1.1rem;font-size:1.1rem}
.fm .btn:hover{transform:none;box-shadow:none;background:#ffcb2e}
.fm .btn:active{transform:none;background:#e6a900}
.fm .hint{background:var(--panel);color:var(--muted);font-size:.86rem;padding:.75rem 1rem}

/* footer */
footer{padding:3rem 0 1.4rem;background:#000;color:#e6e6e6;font-size:.95rem;border-top:6px solid var(--tape)}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:2rem 2.5rem}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:900px){.foot-grid>.foot-col:last-child{grid-column:1/-1}}
@media (max-width:520px){.foot-grid{gap:1.6rem 1.2rem}}
.foot-tag{margin-top:.5rem;font:500 .8rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#a8a8a8}
.foot-about{margin-top:.9rem;max-width:22rem;color:#bdbdbd;font-size:.92rem;line-height:1.55}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem}
.foot-h{margin:0 0 .6rem;font:700 .74rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tape)}
.foot-col>a{padding:.3rem 0;color:#e6e6e6;text-decoration:none}
.foot-col>a:hover,.foot-col>a:focus-visible{color:var(--tape);text-decoration:underline}
footer nav{display:flex;margin:0}
footer nav a{padding:.3rem 0;border-radius:0}
footer nav a::after{display:none}
footer nav a:active{transform:none;color:var(--tape)}
.foot-mail{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:#fff}
.foot-mail svg{color:var(--tape);flex:none}
.foot-note{margin-top:.6rem;max-width:16rem;color:#a8a8a8;font-size:.86rem;line-height:1.5}
.foot-note a{color:#e6e6e6}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid #262626;color:#8a8a8a;font-size:.85rem}
.foot-top{color:#bdbdbd;text-decoration:none}
.foot-top:hover{color:var(--tape)}
footer a{text-decoration-color:var(--tape);text-underline-offset:3px}

/* account link in header */
[hidden]{display:none!important}
.site nav{margin-left:auto}
.acct{flex:none;max-width:13rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 .9rem var(--body);color:var(--tape);background:transparent;border:2px solid var(--tape);border-radius:10px;transition:background-color .2s var(--ease),color .2s var(--ease);padding:.4rem .85rem;text-decoration:none;cursor:pointer}
.acct:hover{background:var(--tape);color:#111}
@media (max-width:480px){.acct{max-width:8.5rem;padding:.4rem .6rem}.site:not(.has-menu) .wrap:has(.acct) nav{display:none}.menu-btn .lbl{display:none}}

/* auth + account pages */
.two{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.5rem;align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.ah{font-size:clamp(2.2rem,5.5vw,3.6rem);font-weight:800;line-height:1}
.perks{list-style:none;margin:1.6rem 0 0;padding:0}
.perks li{position:relative;padding-left:1.7rem;margin:.5rem 0}
.perks li::before{content:"✓";position:absolute;left:0;font-weight:800;color:var(--ok)}
.fm .pane{display:grid;gap:2px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.tab{font:700 .8rem var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:.95rem;border:0;background:var(--panel);color:var(--muted);cursor:pointer}
.tab:hover{color:var(--ink)}
.tab[aria-pressed="true"]{background:var(--tape);color:#111}
.gwrap{display:grid;gap:.9rem;background:var(--panel);padding:1.1rem 1rem .8rem}
.gbtn{display:flex;align-items:center;justify-content:center;gap:.7rem;padding:.8rem 1rem;border:2px solid #111;border-radius:6px;background:#fff;color:#1f1f1f;font:600 1rem var(--body);text-decoration:none;box-shadow:3px 3px 0 #111}
.gbtn:hover{background:#f4f4f4}
.or{display:flex;align-items:center;gap:.8rem;font:700 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.linkbtn{background:var(--panel);border:0;padding:.8rem 1rem;font:500 .92rem var(--body);color:var(--ink);text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fm .msg{background:var(--panel);padding:.75rem 1rem;font-weight:600;font-size:.95rem}
.fm .msg:empty{padding:0}
.msg.ok{color:var(--ok)}
.msg.err{color:var(--stamp)}
.fm .btn:disabled{opacity:.6;cursor:wait}
.fm input[readonly]{color:var(--muted)}
.fm.danger .fm-head{background:var(--stamp);color:#fff}
.fm .btn.del{background:var(--stamp);color:#fff}
.fm .btn.del:hover{background:#a8291a}
.acct-hero{background:var(--cardboard);color:#111;padding:3.5rem 0;border-bottom:2px solid #111}
.acct-hero h1{font-size:clamp(2.2rem,6vw,4rem);font-weight:800}
.acct-hero .kicker{color:var(--kraft-ink)}
.meta{margin-top:.8rem;font:500 .85rem var(--mono);letter-spacing:.04em;overflow-wrap:anywhere}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.pill{font:700 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;background:#111;color:var(--tape);padding:.3rem .7rem;border-radius:99px}
.acct-grid{grid-template-columns:1.2fr .8fr}
@media (max-width:860px){.acct-grid{grid-template-columns:1fr}}
.stack{display:grid;gap:2rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}