:root {
  color-scheme: light dark;
  --bg:            light-dark(#f6f7fb, #0f1115);
  --surface:       light-dark(#ffffff, #151920);
  --text:          light-dark(#1f2937, #e5e7eb);
  --muted:         light-dark(#6b7280, #9ca3af);
  --primary:       #6750a4;           /* Material 3 vibes */
  --on-primary:    #ffffff;
  --danger:        #b42318;

  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html,body { height: 100%; margin: 0; }
body.surface { background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif; }

.card {
  max-width: 420px;
  margin: clamp(24px, 6vh, 72px) auto;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
}

.logo { width: 72px; height: 72px; display: block; margin: 0 auto 12px; opacity: .9; }
h1 { margin: 8px 0 16px; text-align: center; font-weight: 700; }

.form label { display: grid; gap: 6px; margin-bottom: 14px; }
.form input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--muted) 40%, transparent);
  background: transparent;
  color: var(--text);
  outline: none;
}
.form input:focus {
  border-color: color-mix(in oklab, var(--primary) 60%, var(--muted));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 20%, transparent);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; width: 100%; height: 44px; padding: 0 16px;
  border: 0; border-radius: 14px; cursor: pointer;
  background: color-mix(in oklab, var(--surface) 92%, var(--muted));
  color: var(--text);
}
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.danger  { background: var(--danger); color: #fff; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

.center { text-align: center; }
.muted  { color: var(--muted); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--surface); box-shadow: var(--shadow);
}
.topbar .brand { display: flex; align-items: center; gap: 10px; }
.topbar .brand img { width: 28px; height: 28px; }

.content { max-width: 1000px; margin: 32px auto; padding: 0 16px; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }