/* Shared geometry for both styles: switching never rebuilds the login form. */
.login-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.login-header .mark { margin-bottom: 0; }
.appearance { position: relative; flex: none; font-size: 13px; }
.appearance summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--ink); background: var(--card); list-style: none; }
.appearance summary::-webkit-details-marker { display: none; }
.appearance summary::after { content: '⌄'; font-size: 16px; }
.appearance-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 208px; box-sizing: border-box; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 8px 28px #0003; }
.appearance-panel label { margin: 0 0 5px; color: var(--ink); font-size: 13px; }
.appearance-panel label:not(:first-child) { margin-top: 12px; }
.appearance-panel select { box-sizing: border-box; font-size: 16px; min-height: 44px; padding: 8px; }

/* Ink outlines and small printed accents; no extra illustration space. */
html[data-login-style="illustrated"] {
  --bg: #f4eee7; --card: #fffdf9; --field: #fffdf9; --ink: #30272a; --sub: #675960;
  --line: #a59797; --hover: #f3e9e4; --chip: #eeded7;
  --brand: #b91c3d; --brand-dark: #991431; --brand-soft: #fae5e8; --brand-ring: #b91c3d;
  --illustration-shadow: #d5b4ac; --illustration-dot: #d5b4ac;
}
html[data-login-style="illustrated"][data-theme="dark"] {
  --bg: #201b21; --card: #2b242b; --field: #241e25; --ink: #fff3ef; --sub: #c7b6bd;
  --line: #95808c; --hover: #3d3038; --chip: #4b3540;
  --brand: #b91c3d; --brand-dark: #a21636; --brand-soft: #442831; --brand-ring: #ffb0bd;
  --illustration-shadow: #100e13; --illustration-dot: #55404b;
}
html[data-login-style="illustrated"] body { background-image: radial-gradient(var(--illustration-dot) .75px, transparent .75px); background-size: 18px 18px; }
html[data-login-style="illustrated"] .login { border-color: var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--illustration-shadow); }
html[data-login-style="illustrated"] .login input,
html[data-login-style="illustrated"] .login select { border-radius: 8px; }
html[data-login-style="illustrated"] .login button { border-radius: 9px; }
html[data-login-style="illustrated"] .login .method { box-shadow: 2px 2px 0 var(--illustration-shadow); }
html[data-login-style="illustrated"] .method .icon,
html[data-login-style="illustrated"] .chosen .icon { border-radius: 8px 12px 7px 10px; outline: 1px solid var(--line); color: var(--ink); }
html[data-login-style="illustrated"] .done-mark { border: 1px solid currentColor; box-shadow: 3px 3px 0 var(--illustration-shadow); }
html[data-login-style="illustrated"][data-theme="dark"] .login button.link { color: #ffb0bd; }
html[data-login-style="illustrated"][data-theme="dark"] .devices li button.link { color: var(--err); }
@media (max-width: 520px) {
  .login-header .mark { margin-bottom: 0; }
  .login-header { margin-bottom: 16px; }
  html[data-login-style="illustrated"] .login { border-radius: 0; box-shadow: none; }
}
@media (forced-colors: active) {
  html[data-login-style="illustrated"] .login,
  html[data-login-style="illustrated"] .login .method { box-shadow: none; }
}