/* SMAIL — sjednocený vzhled (brand: tmavé pozadí + cyan accent, font Inter). */
:root {
  --bg-0: #05060a;
  --bg-1: #0a0d14;
  --ink: #f4f7fb;
  --muted: #8a93a6;
  --accent: #38d6ee;
  --accent-soft: rgba(56, 214, 238, 0.55);
  --card: #0e131c;
  --line: #1e2733;
  color-scheme: dark;
}
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 50% 30%, var(--bg-1) 0%, var(--bg-0) 62%);
}

/* ---- login stránka ---- */
.auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 1rem;
}

.card {
  width: min(360px, 92vw);
  padding: 2rem;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  text-align: center;
}
h1 { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: .14em; }
.sub { margin: .35rem 0 1.5rem; color: var(--muted); font-size: .9rem; }

.login { display: grid; gap: .85rem; text-align: left; }
label { display: grid; gap: .3rem; font-size: .8rem; color: var(--muted); }
input {
  padding: .65rem .8rem; border-radius: 10px; border: 1px solid var(--line);
  background: #070b12; color: var(--ink); font: inherit;
  transition: border-color .2s, box-shadow .2s;
}
input::placeholder { color: #56607a; }
input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56, 214, 238, .22);
}
.remember {
  flex-direction: row; align-items: center; justify-content: center; gap: .5rem;
  color: #cbd5e1; font-size: .82rem;
}
.remember input { width: auto; accent-color: var(--accent); }

button {
  margin-top: .4rem; padding: .7rem; border: 0; border-radius: 10px;
  background: var(--accent); color: #04222a; font: inherit; font-weight: 700;
  letter-spacing: .02em; cursor: pointer;
  transition: filter .2s, box-shadow .2s;
}
button:hover { filter: brightness(1.08); box-shadow: 0 6px 20px rgba(56, 214, 238, .3); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.error {
  margin: 0 0 1rem; padding: .6rem .75rem; border-radius: 10px;
  background: rgba(127, 29, 29, .85); color: #fecaca; font-size: .85rem;
}
.note { margin-top: 1.25rem; font-size: .8rem; color: var(--muted); }

/* ---- vnitřek (inbox) ---- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .8rem 1.4rem; background: var(--bg-1); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; letter-spacing: .14em; }
.who { font-size: .85rem; color: var(--muted); }
.logout { color: var(--accent); text-decoration: none; transition: opacity .2s; }
.logout:hover { opacity: .8; }
.logout:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.content { padding: 2.5rem 1.4rem; max-width: 720px; margin: 0 auto; }
.content h1 { font-size: 1.5rem; letter-spacing: 0; }
.content .note { color: var(--muted); line-height: 1.6; }