:root {
  --pl-bg: #f6f5f2; --pl-surface: #ffffff; --pl-text: #1c1b19; --pl-muted: #5c5a55; --pl-border: #d9d6cf;
  --pl-accent: #1f4f8f; --pl-accent-text: #ffffff; --pl-danger: #9b1c1c; --pl-notice: #1e5c3a; --pl-focus: #b25e00;
  --pl-radius: 10px; --pl-space: 16px; --pl-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --pl-bg: #151513; --pl-surface: #1f1e1b; --pl-text: #f2f0eb; --pl-muted: #b3afa6; --pl-border: #3a3833;
    --pl-accent: #8db4ea; --pl-accent-text: #0e1726; --pl-danger: #f2a3a3; --pl-notice: #9fd8b5; --pl-focus: #ffb35c; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--pl-bg); color: var(--pl-text); font: 16px/1.5 var(--pl-font); }
.card { max-width: 420px; margin: 48px auto; padding: 32px var(--pl-space); background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: var(--pl-radius); }
.card.wide { max-width: 760px; }
.brand { font-weight: 600; color: var(--pl-muted); margin: 0 0 8px; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 12px; }
h2 { font-size: 1.15rem; margin: 28px 0 8px; }
label { display: block; font-weight: 600; margin: 16px 0 6px; }
input[type=email], input[type=text] { width: 100%; min-height: 44px; padding: 10px 12px; font-size: 1rem; color: var(--pl-text); background: var(--pl-surface); border: 1px solid var(--pl-muted); border-radius: 8px; }
button { min-height: 44px; padding: 10px 16px; font-size: 1rem; border-radius: 8px; cursor: pointer; width: 100%; margin-top: 16px; }
button.primary { background: var(--pl-accent); color: var(--pl-accent-text); border: 1px solid var(--pl-accent); font-weight: 600; }
button.secondary { background: transparent; color: var(--pl-text); border: 1px solid var(--pl-muted); }
button.link, form.inline button { background: none; border: 0; color: var(--pl-accent); text-decoration: underline; width: auto; padding: 8px 0; }
button.small { width: auto; min-height: 36px; padding: 6px 12px; margin: 0; }
:focus-visible { outline: 3px solid var(--pl-focus); outline-offset: 2px; }
a { color: var(--pl-accent); }
.muted { color: var(--pl-muted); }
.alert { padding: 10px 12px; border-radius: 8px; border: 1px solid currentColor; }
.alert.error { color: var(--pl-danger); }
.alert.notice { color: var(--pl-notice); }
.or { display: flex; align-items: center; gap: 12px; color: var(--pl-muted); margin: 20px 0 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--pl-border); }
ul.list { list-style: none; padding: 0; margin: 0; }
ul.list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--pl-border); }
ul.list li form { margin: 0; }
code.secret { display: block; word-break: break-all; padding: 8px; border: 1px dashed var(--pl-border); }
table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px 4px; border-bottom: 1px solid var(--pl-border); }
@media (max-width: 480px) { .card { margin: 0; border: 0; border-radius: 0; min-height: 100vh; } }