/* Customer account screens use the booking design tokens. */
body.slt-account {
  margin:0; min-height:100vh; color:var(--slt-ui-ink); background:var(--slt-ui-paper);
  font-family:var(--slt-font-body,"Inter","Segoe UI",sans-serif); line-height:1.6;
}
.slt-account * { box-sizing:border-box; }
.slt-account .account-shell { min-height:100vh; display:grid; place-items:center; padding:32px 16px; }
.slt-account :is(.account-card,.account-verify-card) {
  width:min(100%,560px); background:#fff; border:1px solid var(--slt-ui-line);
  border-radius:var(--slt-ui-radius-panel); box-shadow:0 8px 30px #192b3a0f; overflow:hidden;
}
.slt-account .account-head { padding:24px 26px; background:var(--slt-ui-ink); color:#fff; }
.slt-account .account-head a { display:inline-flex; align-items:center; min-height:44px; margin-bottom:12px; color:#dce6ed; text-underline-offset:4px; font-weight:500; }
.slt-account .account-head h1 { margin:0; font-size:clamp(1.6rem,5vw,2rem); line-height:1.2; letter-spacing:-.035em; color:#fff; font-weight:600; }
.slt-account .account-head p { margin:10px 0 0; color:#dce6ed; line-height:1.6; }
.slt-account .account-body { padding:26px; }
.slt-account .account-form,.slt-account .account-verify-card form { display:grid; gap:16px; }
.slt-account .account-form label span { display:block; margin-bottom:7px; font-weight:600; }
.slt-account .account-verify-card label { display:grid; gap:7px; font-weight:600; }
.slt-account input {
  width:100%; min-height:48px; border:1px solid #bdc6cd; border-radius:8px;
  padding:10px 12px; font:inherit; color:var(--slt-ui-ink); background:#fff;
}
.slt-account input:focus { border-color:var(--slt-ui-focus); box-shadow:0 0 0 3px #426a8b24; }
.slt-account :is(a,button,input):focus-visible { outline:3px solid var(--slt-ui-focus); outline-offset:4px; }
.slt-account .account-head a:focus-visible { outline-color:#dce6ed; }
.slt-account :is(.account-btn,.account-link,button,a.button) {
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  border:1px solid var(--slt-ui-ink); border-radius:8px; padding:10px 16px; font:inherit;
  font-weight:600; text-decoration:none; text-align:center; cursor:pointer;
}
.slt-account :is(.account-btn,button,a.button) { background:var(--slt-ui-ink); color:#fff; }
.slt-account :is(.account-btn,button,a.button):hover { background:#2c465c; color:#fff; }
.slt-account :is(.account-link,a.button.secondary) { border-color:var(--slt-ui-line); color:var(--slt-ui-ink); background:#fff; }
.slt-account :is(.account-link,a.button.secondary):hover { background:var(--slt-ui-soft); color:var(--slt-ui-ink); }
.slt-account :is(.account-actions,.actions) { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.slt-account :is(.account-note,.account-error,.account-success,.error) { padding:13px 14px; border-radius:12px; line-height:1.55; }
.slt-account .account-note { background:var(--slt-ui-soft); color:var(--slt-ui-muted); }
.slt-account :is(.account-error,.error) { background:#fff1ef; border:1px solid #efc4ba; color:#8a1212; }
.slt-account .account-success { background:#edf3f7; border:1px solid #c8d9e4; color:#203d52; }
.slt-account .account-verify-card { padding:30px; }
.slt-account .account-verify-card h1 { font-size:clamp(1.6rem,5vw,2rem); line-height:1.2; letter-spacing:-.035em; font-weight:600; margin:14px 0 12px; }
.slt-account .account-verify-card p { color:var(--slt-ui-muted); margin:0 0 24px; }
.slt-account .account-verify-card .error { color:#8a1212; }
.slt-account .badge { display:inline-flex; padding:6px 10px; border-radius:8px; background:var(--slt-ui-soft); color:var(--slt-ui-ink); font-weight:600; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; }
.slt-account .account-brand { display:block; margin-bottom:24px; color:var(--slt-ui-ink); font-size:.9rem; font-weight:600; text-underline-offset:4px; }
.slt-account .account-verify-card .help { font-size:.9rem; margin:0; }
@media(max-width:480px) {
  .slt-account :is(.account-head,.account-body,.account-verify-card) { padding:22px 18px; }
  .slt-account :is(.account-actions,.actions)>a { width:100%; }
}