/* Rozcestník: stejné barvy a prvky jako pokladna (eet-app/public/style.css) */
:root {
  --ink: #0f1a2a; --muted: #5b6878; --paper: #eef2f8; --paper-2: #e3e9f3; --card: #ffffff; --field: #f4f7fb; --line: #d6dde8;
  --accent: #2552e0; --accent-soft: #e6edff; --bad: #b42318; --bad-soft: #fde4e1;
  --shadow: 0 1px 2px rgb(15 26 42 / .06), 0 8px 24px rgb(15 26 42 / .07); --shadow-btn: 0 6px 16px rgb(37 82 224 / .28);
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e9eff7; --muted: #9aa8ba; --paper: #0b121d; --paper-2: #0f1827; --card: #141e2d; --field: #0f1826; --line: #263448;
    --accent: #6f95ff; --accent-soft: #1b2a4d; --bad: #ff8f86; --bad-soft: #3d1715;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px rgb(0 0 0 / .35); --shadow-btn: 0 6px 18px rgb(74 115 240 / .35); }
}
* { box-sizing: border-box; }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1200px 500px at 85% -10%, var(--accent-soft), transparent 60%), linear-gradient(var(--paper), var(--paper-2)) fixed; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.auth { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 1rem; padding: 1.5rem 1rem; }
.card { width: min(420px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 2rem 1.5rem 1.5rem; box-shadow: var(--shadow); }
.brand { display: flex; justify-content: center; margin-bottom: 1rem; }
.logo { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #3b6cf6, #1f3fae); box-shadow: 0 4px 12px rgb(37 82 224 / .35); }
.logo svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
h1 { margin: 0 0 .25rem; text-align: center; font-size: 1.45rem; letter-spacing: -.01em; }
.sub { margin: 0 0 1.25rem; text-align: center; color: var(--muted); }

label { display: block; font-size: .88rem; color: var(--muted); margin-top: .85rem; }
.addr { display: flex; align-items: center; margin-top: .3rem; border: 2px solid var(--line); border-radius: 12px; background: var(--field); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.addr:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.addr input { flex: 1; min-width: 0; padding: .75rem .25rem; border: 0; background: none; font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--ink); outline: none; }
.pre, .suf { color: var(--muted); font-size: .92rem; white-space: nowrap; }
.pre { padding-left: .8rem; }
.suf { padding-right: .8rem; }
@media (max-width: 380px) { .pre { display: none; } .addr input { padding-left: .8rem; } }
.remember { display: flex; align-items: center; gap: .45rem; color: var(--ink); }
.remember input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; margin: 0; }

.msg { margin: .75rem 0 0; min-height: 0; }
.msg:not(:empty) { padding: .6rem .8rem; border-radius: 10px; color: var(--bad); background: var(--bad-soft); font-weight: 600; }
button.primary { width: 100%; margin-top: 1.1rem; padding: .9rem 1rem; font: inherit; font-weight: 700; color: #fff; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, #3b6cf6, #1f3fae); box-shadow: var(--shadow-btn); transition: filter .15s, transform .1s; }
button.primary:hover { filter: brightness(1.06); }
button.primary:active { transform: translateY(1px); }
button.primary[disabled] { opacity: .6; cursor: progress; }

.recent { margin-bottom: .5rem; }
.recent h2 { margin: 0 0 .4rem; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.recent li { display: flex; gap: .4rem; }
.pick { flex: 1; display: flex; align-items: baseline; gap: 0; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--accent-soft);
  color: var(--accent); font: inherit; text-align: left; cursor: pointer; }
.pick span { color: var(--muted); font-size: .9rem; }
.pick:hover { border-color: var(--accent); }
.forget { width: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--muted); font-size: 1.3rem; cursor: pointer; }
.forget:hover { color: var(--bad); border-color: var(--bad); }
.foot { margin: 0; color: var(--muted); font-size: .85rem; text-align: center; }