/* ================================================================
   KB STUDIOS — společné styly členské sekce (login, members, install)
   Tokeny a typografie navazují na index.html.
   ================================================================ */
:root{
  --bg:#0b0c11; --bg2:#10121a; --panel:#161923; --panel2:#1c2030;
  --ink:#ece9e2; --ink2:#cfccc4; --muted:#9a978f;
  --line:rgba(236,233,226,.13); --line2:rgba(236,233,226,.26);
  --blue:#4fc3ff; --pink:#ff4fa3; --violet:#9a6cff; --green:#5ee0a0; --amber:#ffc65c; --red:#ff5c5c;
  --acc:var(--blue);
  --acc-soft:color-mix(in srgb,var(--acc) 14%,transparent);
  --acc-bord:color-mix(in srgb,var(--acc) 55%,transparent);
  --font-d:'Oswald',system-ui,sans-serif;
  --font-b:'Archivo',system-ui,sans-serif;
  --font-m:'JetBrains Mono',ui-monospace,monospace;
  --pad:clamp(18px,3vw,36px);
  --ease:cubic-bezier(.16,1,.3,1);
  --t-press:.16s; --t-ui:.2s; --t-move:.3s;
  --r:4px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-gutter:stable}
body{background:var(--bg);color:var(--ink);font-family:var(--font-b);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(255,255,255,.014) 9px 10px)}
::selection{background:var(--blue);color:#0b0c11}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2b2d36;border-radius:9px}
a{color:inherit}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* typografie */
h1{font:700 clamp(2rem,5vw,3.2rem)/.95 var(--font-d);text-transform:uppercase;letter-spacing:.004em}
h2{font:600 clamp(1.4rem,2.4vw,1.9rem)/1 var(--font-d);text-transform:uppercase;letter-spacing:.01em}
h3{font:600 1.05rem/1.1 var(--font-d);text-transform:uppercase;letter-spacing:.03em}
.mono{font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.logo{font:700 1.2rem var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;display:inline-flex;align-items:baseline;gap:6px}
.logo b{color:var(--blue)}
.muted{color:var(--muted)}

/* tlačítka */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:500 12.5px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;
  padding:13px 20px;border:1px solid var(--acc);background:var(--acc);color:#0b0c11;text-decoration:none;white-space:nowrap;border-radius:var(--r);
  transition:transform var(--t-press) var(--ease),filter var(--t-ui),background-color var(--t-ui),border-color var(--t-ui),color var(--t-ui)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn.sm{padding:9px 13px;font-size:11px}
.btn.icon{padding:9px;width:36px;height:36px}
.btn svg{width:15px;height:15px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:active:not(:disabled){transform:scale(.97);filter:none}
@media (hover:hover) and (pointer:fine){
  .btn:hover:not(:disabled){filter:brightness(1.06)}
  .btn.ghost:hover:not(:disabled){border-color:var(--acc);background:var(--acc-soft);color:var(--ink);filter:none}
}

/* formuláře */
.fg{display:flex;flex-direction:column;gap:6px}
.fg label{font-family:var(--font-m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.fg input,.fg select,.fg textarea{background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--ink);font:inherit;padding:11px 12px;outline:0;border-radius:var(--r);transition:border-color var(--t-ui),background-color var(--t-ui);width:100%}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue);background:rgba(255,255,255,.05)}
.fg input::placeholder,.fg textarea::placeholder{color:var(--muted);opacity:.7}
.fg select option{background:var(--panel)}
.fg textarea{min-height:110px;resize:vertical}
input[type=date]{color-scheme:dark}

/* panel / karta */
.card{background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line);border-radius:6px;padding:clamp(16px,2vw,24px);position:relative}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-head h3{display:flex;align-items:center;gap:10px}
.card-head h3::before{content:"";width:18px;height:1px;background:var(--acc)}

/* štítky */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--line);border-radius:3px;color:var(--ink2);white-space:nowrap}
.tag.new{color:var(--blue);border-color:var(--acc-bord);background:var(--acc-soft)}
.tag.answered{color:var(--green);border-color:color-mix(in srgb,var(--green) 50%,transparent)}
.tag.archived{color:var(--muted)}
.tag.high{color:var(--pink);border-color:color-mix(in srgb,var(--pink) 50%,transparent)}
.tag.normal{color:var(--ink2)}
.tag.low{color:var(--muted)}
.tag.over{color:var(--red);border-color:color-mix(in srgb,var(--red) 50%,transparent)}

/* hláška */
.alert{border:1px solid var(--line2);border-left:2px solid var(--acc);padding:12px 14px;border-radius:var(--r);background:var(--acc-soft);color:var(--ink);font-size:.95rem}
.alert.err{--acc:var(--red)}
.alert.ok{--acc:var(--green)}

/* toast */
.toast{position:fixed;left:50%;bottom:22px;z-index:500;translate:-50% 0;padding:11px 16px;background:var(--ink);color:#0b0c11;font:500 12px var(--font-d);letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r);
  opacity:0;transform:translateY(8px);transition:opacity var(--t-ui) ease,transform var(--t-ui) var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0s!important}
  .toast{transform:none}
}