/* MONETRA – verejná identita. Biela, čierna, sivá. Typografia a voľný priestor. */
:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --ink-2: #3c3c3f;
  --mute: #75757a;
  --line: #e8e8e8;
  --field: #f3f3f3;
  --field-hover: #ededed;
  --err: #b3261e;
  --ok: #1f6f43;
  --sel: rgba(10, 10, 10, .12);
  --font: "Helvetica Neue", "Neue Haas Grotesk Text", Helvetica, "Inter", "Segoe UI", Arial, sans-serif;
  --pad: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.2, .6, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0c; --ink: #f2f2ef; --ink-2: #c9c9c5; --mute: #8b8b90; --line: #222224;
    --field: #18181a; --field-hover: #1e1e21; --err: #ff8a80; --ok: #7fd1a1; --sel: rgba(242, 242, 239, .16); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0b0c; --ink: #f2f2ef; --ink-2: #c9c9c5; --mute: #8b8b90; --line: #222224;
  --field: #18181a; --field-hover: #1e1e21; --err: #ff8a80; --ok: #7fd1a1; --sel: rgba(242, 242, 239, .16); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.pub {
  margin: 0; min-height: 100vh; min-height: 100svh; background: var(--bg); color: var(--ink);
  font: 400 15px/1.6 var(--font); letter-spacing: .005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  transition: background-color .4s var(--ease), color .4s var(--ease);
  display: flex; flex-direction: column;
}
::selection { background: var(--sel); }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 400; }
strong { font-weight: 600; color: var(--ink); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; padding: 8px 12px; background: var(--ink); color: var(--bg); font-size: 13px; z-index: 10; }
.skip:focus { top: 16px; }

/* Interakcie: nikdy nepodčiarkovať, iba jemná zmena sýtosti */
.wm, .mark-word, .mark-tag, .quiet-link, .foot a, .mat-home { text-decoration: none; transition: opacity .35s var(--ease), color .35s var(--ease); }
.wm:hover, .mark-word:hover, .mark-tag:hover, .quiet-link:hover, .mat-home:hover { opacity: .55; }

/* Wordmark */
.wm { display: inline-flex; align-items: center; gap: .85em; color: var(--ink); line-height: 1; }
.wm-ic { height: 15px; width: auto; flex: none; }
.wm-word { font-weight: 600; font-size: 14px; letter-spacing: .42em; margin-right: -.42em; text-transform: uppercase; }

/* Prepínač režimu */
.theme {
  position: fixed; top: 14px; right: 14px; z-index: 5;
  width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--mute);
  cursor: pointer; border-radius: 50%; transition: color .3s var(--ease);
}
.theme:hover { color: var(--ink); }
.theme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.theme .t-sun { display: none; }
:root[data-theme="dark"] .theme .t-sun { display: block; }
:root[data-theme="dark"] .theme .t-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .t-sun { display: block; }
  :root:not([data-theme="light"]) .theme .t-moon { display: none; }
}

@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Úvod: jeden typografický celok v strede */
.hero { flex: 1; display: grid; place-items: center; padding: var(--pad); }
.mark { display: inline-flex; align-items: center; gap: 22px; animation: rise .9s var(--ease) both; }
.mark-word { display: inline-flex; align-items: center; gap: 14px; font-weight: 600; font-size: clamp(15px, 1.2vw, 17px); letter-spacing: .42em; margin-right: -.42em; color: var(--ink); line-height: 1; padding: 8px 0; }
.mark-rule { width: 1px; height: 22px; background: var(--ink); opacity: .35; flex: none; }
.mark-ic { height: 1.15em; width: auto; flex: none; }
.mark-tag { font-size: clamp(13px, 1vw, 14.5px); letter-spacing: .05em; color: var(--ink-2); line-height: 1; padding: 8px 0; }
.foot { padding: 0 var(--pad) 24px; font-size: 11px; letter-spacing: .14em; color: var(--mute); text-align: center; }
@media (max-width: 560px) {
  .mark { flex-direction: column; gap: 16px; text-align: center; }
  .mark-word { margin-right: 0; }
  .mark-rule { width: 22px; height: 1px; }
  .mark-tag { font-size: 13.5px; }
}

/* Spoločný stredový stĺpec: prihlásenie, overenie, kontakt, chyby */
.center-col { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px var(--pad) 36px; }
.auth { width: 100%; max-width: 340px; animation: rise .7s var(--ease) both; }
.auth-wide { max-width: 440px; }
.auth-wide .auth-mark { margin-bottom: clamp(28px, 5vh, 48px); }
.auth-wide .back-row { margin-top: 24px; }
.auth-mark { text-align: center; margin-bottom: clamp(36px, 6vh, 60px); }
.auth-mark .wm-word { margin-right: 0; }
.auth-h { font-size: 19px; font-weight: 400; letter-spacing: .01em; text-align: center; margin-bottom: 28px; }
.auth-p { color: var(--mute); font-size: 13.5px; line-height: 1.7; text-align: center; margin: -12px 0 26px; }
.center { text-align: center; }
.back-row { margin-top: 32px; text-align: center; }
.err-num { font-size: 12px; letter-spacing: .3em; color: var(--mute); margin-bottom: 10px; text-align: center; }

/* Formuláre */
.lf { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }
.lf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .lf-row { grid-template-columns: 1fr; gap: 16px; } }
.lf label { font-size: 11px; letter-spacing: .06em; color: var(--mute); }
.lf input, .lf textarea, .lf select {
  width: 100%; font: 400 15px/1.45 var(--font); color: var(--ink); background: var(--field);
  border: 1px solid transparent; border-radius: 2px; padding: 11px 13px; min-height: 44px;
  transition: background-color .25s var(--ease), border-color .25s var(--ease); -webkit-appearance: none; appearance: none;
}
.lf textarea { resize: vertical; min-height: 104px; max-height: 50vh; line-height: 1.55; }
.lf input:hover, .lf textarea:hover, .lf select:hover { background: var(--field-hover); }
.lf input:focus, .lf textarea:focus, .lf select:focus { outline: none; border-color: var(--ink); background: var(--bg); }
.lf [aria-invalid="true"] { border-color: var(--err); }
.lf input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 40px var(--field) inset; transition: background-color 9999s; }
.sel { position: relative; }
.sel::after { content: ""; position: absolute; right: 16px; top: 50%; width: 6px; height: 6px; border-right: 1px solid var(--mute); border-bottom: 1px solid var(--mute); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.lf select { padding-right: 38px; cursor: pointer; }
.lf select:invalid { color: var(--mute); }
.lf option { color: var(--ink); background: var(--bg); }
.f-err { font-size: 12px; color: var(--err); }
.form-alert { font-size: 13px; line-height: 1.55; color: var(--err); text-align: center; margin: -8px 0 20px; }
.form-alert.ok { color: var(--ok); }
.form-alert.soft { color: var(--ink-2); }
.fine { font-size: 12px; line-height: 1.6; color: var(--mute); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pw { position: relative; }
.pw input { padding-right: 84px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--mute); font: 400 11px var(--font); letter-spacing: .06em; cursor: pointer; padding: 8px 10px; transition: color .3s var(--ease); }
.pw-toggle:hover { color: var(--ink); }
.otp { font-size: 22px !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }

.btn-solid, .btn-line {
  font: 500 11px var(--font); letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
  min-height: 44px; padding: 0 24px; border-radius: 2px; margin-top: 6px;
  transition: opacity .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.btn-solid { width: 100%; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); }
.btn-solid:hover { opacity: .82; }
.btn-line { display: block; margin: 0 auto; border: 1px solid var(--ink); background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--bg); }
.btn-solid[disabled], .btn-line[disabled] { opacity: .5; cursor: progress; }

.quiet-link { display: inline-flex; gap: .5em; align-items: center; font-size: 13px; letter-spacing: .03em; color: var(--ink); }
.quiet-link.back { color: var(--mute); font-size: 12px; }
.quiet-link.back:hover { color: var(--ink); opacity: 1; }

.notice { text-align: center; color: var(--ink-2); line-height: 1.7; font-size: 14px; }
.notice:focus { outline: none; }
.notice-t { color: var(--ink); font-size: 16px; margin-bottom: 8px; }

/* O MONETRE – text ako obraz v paspartu */
.mat { flex: 1; display: flex; align-items: center; justify-content: center; padding: 64px var(--pad) 56px; }
.mat-inner { width: 100%; max-width: 590px; animation: rise .8s var(--ease) both; }
.mat-head { text-align: center; margin-bottom: clamp(32px, 5.5vh, 52px); }
.mat-title { font-size: 15px; font-weight: 600; line-height: 1; }
.mat-home { display: inline-flex; align-items: center; gap: .85em; letter-spacing: .42em; }
.mat-home .wm-ic { height: 15px; }
.mat-sub { margin-top: 14px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.mat-text p { font-size: 14.5px; line-height: 1.85; color: var(--ink-2); margin: 0 0 1.05em; }
.mat-text p:last-child { margin-bottom: 0; }
@media (min-width: 720px) { .mat-text p { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } }
.mat-cta { margin-top: clamp(28px, 5vh, 44px); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print { .theme, .skip { display: none; } }