:root{
  /* BRAND FARBY – uprav podľa webu */
  --brand: #8b5e3c;              /* hlavná hnedá (ako header) */
  --bg: #eef1f5;                 /* farba pozadia stránky */
  --card: #f4f6fa;               /* farba karty */
  --text: #1b1b1b;

  /* NEUMORPHIC TIENE – jemné, mäkké */
  --shadow-dark: rgba(0,0,0,.15);
  --shadow-light: rgba(255,255,255,.9);
}

.auth-wrap{
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(80% 80% at 20% 10%, #ffffff 0, var(--bg) 60%, #e4e7ec 100%);
}

.auth-card{
  width: min(92vw, 420px);
  background: var(--card);
  border-radius: 24px;
  padding: 28px 26px;
  box-shadow:
     18px 18px 32px var(--shadow-dark),
    -18px -18px 32px var(--shadow-light);
}

.auth-title{
  margin: 0 0 18px;
  font: 700 28px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  text-align: center;
  letter-spacing:.2px;
}

.auth-form{ display: grid; gap: 14px; }

.neo-input{
  width: 100%;
  padding: 14px 14px;
  border: none;
  outline: none;
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  box-shadow:
    inset 8px 8px 16px var(--shadow-dark),
    inset -8px -8px 16px var(--shadow-light);
  transition: box-shadow .2s, transform .06s;
}
.neo-input::placeholder{ color:#8d95a3; }
.neo-input:focus{
  box-shadow:
    inset 6px 6px 12px rgba(0,0,0,.18),
    inset -6px -6px 12px rgba(255,255,255,.95),
    0 0 0 2px color-mix(in oklab, var(--brand) 28%, #fff);
}

.row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }

.neo-btn{
  appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 700;
  width: 100%;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  box-shadow:
     8px 8px 18px var(--shadow-dark),
    -8px -8px 18px var(--shadow-light);
  transition: transform .06s ease-in, box-shadow .2s ease;
}
.neo-btn:hover{
  transform: translateY(-1px);
}
.neo-btn:active{
  transform: translateY(1px);
  box-shadow:
     inset 8px 8px 18px var(--shadow-dark),
     inset -8px -8px 18px var(--shadow-light);
}

/* primárne tlačidlo (brand) */
.neo-btn.primary{
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 94%, #fff 6%),
      color-mix(in oklab, var(--brand) 86%, #000 14%));
  color: #fff;
  box-shadow:
    10px 10px 22px rgba(0,0,0,.22),
    -10px -10px 22px rgba(255,255,255,.6);
}
.neo-btn.primary:active{
  box-shadow:
     inset 8px 8px 18px rgba(0,0,0,.25),
     inset -8px -8px 18px rgba(255,255,255,.35);
}

.help, .muted{ color:#667085; font-size:.92rem; }
.err{ color:#b42318; background:#fee4e2; border:1px solid #fecdca; padding:8px 10px; border-radius:10px; }
.ok { color:#05603a; background:#d1fadf; border:1px solid #abefc6; padding:8px 10px; border-radius:10px; }

/* malý „switch“ pre odber */
.switch{
  --h: 20px; --w: 40px;
  position: relative; display:inline-block; width: var(--w); height: var(--h);
}
.switch input{ display:none; }
.slider{
  position:absolute; inset:0; border-radius:999px; background:var(--card);
  box-shadow: inset 6px 6px 10px var(--shadow-dark), inset -6px -6px 10px var(--shadow-light);
  transition: background .2s, box-shadow .2s;
}
.slider:before{
  content:""; position:absolute; height: calc(var(--h) - 6px); width: calc(var(--h) - 6px);
  left:3px; top:3px; border-radius:50%;
  background: #fff; box-shadow: 4px 4px 8px rgba(0,0,0,.25), -4px -4px 8px rgba(255,255,255,.8);
  transition: transform .2s;
}
.switch input:checked + .slider{ background: color-mix(in oklab, var(--brand) 18%, var(--card)); }
.switch input:checked + .slider:before{ transform: translateX(calc(var(--w) - var(--h))); }