:root {
  color-scheme: light;
  color: #29251f;
  background: #fff5e2;
  font-family: Inter, "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --page: #fff5e2;
  --surface: #fffdfa;
  --surface-raised: #fffdfa;
  --surface-soft: #f5ead5;
  --control: #fffdfa;
  --control-hover: #fff0bc;
  --ink: #29251f;
  --ink-strong: #29251f;
  --muted: #5f5549;
  --subtle: #5f5549;
  --line: #d6c9b5;
  --line-strong: #29251f;
  --blue: #0b405f;
  --blue-strong: #0b405f;
  --focus: #075a9c;
  --success: #275e43;
  --warning: #765019;
  --danger: #933640;
  --sky: #70c8ff;
  --pink: #ff91bd;
  --yellow: #ffda45;
  --sky-soft: #e5f4ff;
  --radius-control: 10px;
  --radius-card: 22px;
  --shadow: 5px 5px 0 #29251f;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { min-width: 0; scroll-behavior: smooth; background: var(--page); }
body {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -16%, rgba(29, 103, 178, 0.18), transparent 38rem),
    linear-gradient(180deg, #020304 0%, #000 46rem);
}
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.012) 50%, transparent);
  content: "";
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; touch-action: manipulation; }
a { color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { text-wrap: balance; }

.visually-hidden,
.visually-hidden-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
}

.page-shell {
  width: min(1280px, calc(100% - 64px));
  margin-inline: auto;
  padding: 0 0 56px;
}
.site-header {
  position: sticky;
  z-index: 60;
  top: 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.88);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
.brand {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: Inter, "Segoe UI Variable Display", "Segoe UI", sans-serif;
  font-size: 19px;
  letter-spacing: -0.055em;
  text-decoration: none;
}
.brand img { width: 26px; height: 26px; display: block; object-fit: contain; }
.brand b { font-weight: 700; }
.account-nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.account-nav__link,
.account-nav__button,
.language-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0 11px;
  color: #aeb6bd;
  background: transparent;
  font-size: 12px;
  font-weight: 680;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms var(--ease);
}
.account-nav__link:hover,
.account-nav__button:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.055); }
.account-nav__link--active { color: #fff; background: rgba(255, 255, 255, 0.07); }
.account-nav__link--active::after { display: none; }
.language-toggle {
  min-width: 76px;
  gap: 5px;
  border-color: rgba(255, 255, 255, 0.13);
  color: #8f989f;
  background: #151719;
}
.language-toggle .is-active { color: #fff; }
.language-toggle:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.25); color: #b9c2c9; background: #202326; }

#mainContent { min-width: 0; }
.hero { display: none; }

.session-bootstrap {
  width: min(540px, 100%);
  margin: 34px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px;
  color: #d7dee3;
  background: linear-gradient(155deg, #121416, #0b0d0f);
  box-shadow: var(--shadow);
}
.session-bootstrap strong { display: block; color: #fff; font-size: 17px; font-weight: 620; }
.session-bootstrap p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }

.auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 4px 0 18px;
}
.auth-grid.auth-grid--single {
  width: min(460px, 100%);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(96px, 13vh, 140px);
  margin-inline: auto;
}
.panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-card);
  padding: clamp(22px, 2.2vw, 28px);
  background:
    radial-gradient(circle at 100% 0, rgba(31, 102, 171, 0.1), transparent 18rem),
    linear-gradient(155deg, #121416 0%, #0c0e10 72%);
  box-shadow: var(--shadow);
}
.panel-heading { min-height: 116px; }
.auth-grid--single .panel-heading { min-height: 0; }
.auth-grid--single .panel {
  gap: 11px;
  border-radius: 18px;
  padding: 22px 24px 24px;
}
.auth-grid--single .panel h2 { font-size: clamp(25px, 2.4vw, 29px); }
.auth-grid--single .panel-heading p:last-child { margin-top: 6px; line-height: 1.45; }
.auth-grid--single .panel > label,
.auth-grid--single .form-field { gap: 6px; }
.auth-grid--single input,
.auth-grid--single .password-toggle { min-height: 44px; }
.eyebrow,
.step,
.identity-label {
  margin: 0 0 9px;
  color: var(--blue-strong);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.panel h2,
.identity-card h2,
.connect-card__heading h2,
.connected-section h2,
.modal-heading h3 {
  font-family: Inter, "Segoe UI Variable Display", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  font-weight: 540;
  letter-spacing: -0.04em;
}
.panel h2 { margin: 0; color: #fff; font-size: clamp(27px, 2.8vw, 32px); line-height: 1.08; }
html:lang(zh-CN) .panel h2 { line-height: 1.16; }
.panel h3 { margin: 0; font-size: 20px; }
.panel-heading p:last-child,
.helper,
.availability-note,
.key-warning,
.devices-note { color: var(--muted); line-height: 1.65; }
.panel-heading p:last-child { margin: 10px 0 0; font-size: 13px; }
label { display: grid; gap: 8px; color: #d9dfe4; font-size: 13px; font-weight: 650; }
label small { color: #89939b; font-size: 11.5px; font-weight: 450; line-height: 1.55; }
.form-field { display: grid; gap: 8px; }
.password-field { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; }
input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-control);
  padding: 10px 13px;
  color: #f7f9fa;
  caret-color: var(--focus);
  background: #090b0d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
input:hover { border-color: rgba(255, 255, 255, 0.26); background: #0c0f11; }
input::placeholder { color: #657079; font-weight: 450; opacity: 1; }
.password-field input::placeholder { color: #89939b; letter-spacing: 0.18em; }
.password-field input:focus::placeholder { color: transparent; }
input[aria-invalid="true"] { border-color: rgba(238, 143, 126, 0.85); box-shadow: 0 0 0 3px rgba(238, 143, 126, 0.1); }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus { -webkit-text-fill-color: #f7f9fa; box-shadow: 0 0 0 1000px #0c0f11 inset; caret-color: var(--focus); }

button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  padding: 10px 15px;
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
  transition: border-color 170ms ease, color 170ms ease, background 170ms ease, box-shadow 170ms ease, transform 170ms var(--ease);
}
button:hover:not(:disabled) { transform: translateY(-1px); }
.primary-button {
  color: #080a0b;
  background: #f4f5f6;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.primary-button:hover:not(:disabled) { color: #000; background: #fff; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34); }
.quiet-button { border-color: var(--line-strong); color: #e3e8eb; background: var(--control); }
.quiet-button:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.26); color: #fff; background: var(--control-hover); }
.text-button { min-width: 44px; min-height: 44px; border: 0; padding: 6px 5px; color: var(--blue-strong); background: transparent; }
.text-button:hover:not(:disabled) { color: #8ac6f8; background: rgba(88, 173, 242, 0.06); }
.password-toggle {
  width: 46px;
  min-width: 46px;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.14);
  color: #c6d5df;
  background: #14171a;
}
.password-toggle:hover:not(:disabled) { border-color: rgba(111, 180, 255, 0.45); background: #1b2024; }
.password-toggle img,
.eye-button img { width: 18px; height: 18px; display: block; margin: auto; filter: brightness(0) invert(1); opacity: 0.74; }
.password-toggle[aria-pressed="true"] { border-color: rgba(111, 180, 255, 0.48); background: rgba(22, 136, 230, 0.11); }
.form-validation {
  margin: -2px 0 0;
  border: 1px solid rgba(238, 143, 126, 0.3);
  border-radius: 10px;
  padding: 10px 12px;
  color: #ffc0b5;
  background: rgba(126, 45, 33, 0.16);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.48;
}
.danger-button { border-color: rgba(238, 143, 126, 0.28); color: #ffb1a3; background: rgba(122, 45, 34, 0.14); }
.danger-button:hover:not(:disabled) { border-color: rgba(238, 143, 126, 0.46); color: #ffc6bc; background: rgba(143, 51, 38, 0.22); }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.account-panel { width: min(1184px, 100%); min-width: 0; margin-inline: auto; padding-top: 0; }
.account-section-nav { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 14px; }
.account-section-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 14px;
  color: #b9c2c9;
  background: rgba(21, 23, 25, 0.82);
  font-size: 12px;
  font-weight: 680;
  text-decoration: none;
  transition: border-color 170ms ease, color 170ms ease, background 170ms ease, transform 170ms var(--ease);
}
.account-section-nav a:hover { border-color: rgba(111, 180, 255, 0.38); color: #fff; background: #1c2024; transform: translateY(-1px); }
#account,
#devices,
#keys { scroll-margin-top: 78px; }
.delegate-name-field { margin-top: 17px; }
.account-primary-grid { display: grid; grid-template-columns: minmax(310px, 0.82fr) minmax(520px, 1.18fr); gap: 22px; }
.identity-card,
.connect-card,
.device-item,
.add-client-card,
.binding-keys-card,
.devices-card,
.modal-card { min-width: 0; }
.identity-card {
  position: relative;
  min-height: 470px;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(104, 169, 226, 0.18);
  border-radius: var(--radius-card);
  padding: clamp(32px, 4vw, 44px);
  color: #f7fbff;
  background:
    radial-gradient(circle at 86% 86%, rgba(36, 128, 211, 0.2), transparent 19rem),
    linear-gradient(155deg, #111b25 0%, #090d11 72%);
  box-shadow: var(--shadow);
}
.identity-card > div { position: relative; z-index: 1; }
.identity-card__mark { position: absolute; right: -42px; bottom: -34px; width: 230px; height: 230px; opacity: 0.08; object-fit: contain; pointer-events: none; }
.identity-card .eyebrow,
.identity-label { color: #63b6f8; }
.identity-card h2 { margin: 9px 0 0; color: #fff; font-size: clamp(32px, 3.4vw, 43px); line-height: 1.05; }
html:lang(zh-CN) .identity-card h2 { line-height: 1.14; }
.identity-copy { max-width: 310px; margin: 20px 0 0; color: #b7c4cd; font-size: 13px; line-height: 1.62; }
.hellolynk-id { max-width: 100%; display: block; margin-top: 13px; overflow-wrap: anywhere; color: #fff; font: 680 clamp(15px, 1.7vw, 19px)/1.55 ui-monospace, "SFMono-Regular", Consolas, monospace; }
.connection-state { margin: 14px 0 0; color: #899ba8; font-size: 11.5px; line-height: 1.55; }

.connect-card {
  min-height: 470px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(26px, 3vw, 34px);
  background: linear-gradient(155deg, #121416, #0c0e10);
  box-shadow: var(--shadow);
}
.connect-card__heading h2,
.connected-section h2 { margin: 0; color: #fff; font-size: clamp(27px, 3vw, 36px); line-height: 1.08; }
html:lang(zh-CN) .connect-card__heading h2,
html:lang(zh-CN) .connected-section h2 { line-height: 1.16; }
.connect-card__heading p { margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.client-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.client-choice {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: var(--line);
  border-radius: 11px;
  padding: 8px 9px;
  color: #cbd3d9;
  background: #111315;
  box-shadow: none;
  font-size: 11px;
  white-space: nowrap;
}
.client-choice:hover:not(:disabled) { border-color: rgba(111, 180, 255, 0.35); color: #fff; background: #181c20; }
.client-choice--selected { border-color: rgba(88, 173, 242, 0.78); color: #fff; background: rgba(22, 136, 230, 0.12); box-shadow: 0 0 0 1px rgba(88, 173, 242, 0.25); }
.client-choice__icon { width: 27px; height: 27px; display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; background: #f1f3f4; }
.client-choice__icon img { width: 24px; height: 24px; display: block; object-fit: contain; }
.connection-form {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(280px, 1.22fr);
  gap: 9px 18px;
  align-items: center;
  margin-top: 18px;
}
.connection-form label { min-width: 0; }
.connection-form label strong { display: block; color: #eef2f5; font-size: 13px; }
.connection-form label span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 450; line-height: 1.5; }
.connection-form input { min-height: 44px; }
.host-id-help { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: center; min-width: 0; }
.host-id-help p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.host-id-help .text-button { padding-inline: 0; font-size: 11px; font-weight: 650; text-align: right; }
.host-id-help #hostIdPromptStatus, .host-id-help details { grid-column: 1 / -1; }
.host-id-help #hostIdPromptStatus[data-tone="success"] { color: #b8ebd2; }
.host-id-help #hostIdPromptStatus[data-tone="error"] { color: #ffc0b5; }
.host-id-help details { width: 100%; }
.host-id-help summary { min-height: 44px; display: flex; align-items: center; color: var(--blue-strong); font-size: 11px; font-weight: 650; cursor: pointer; }
.host-id-help textarea { width: 100%; min-height: 110px; resize: vertical; border: 1px solid var(--line-strong); border-radius: var(--radius-control); padding: 10px 12px; color: #f7f9fa; background: #090b0d; font-family: inherit; font-size: 12px; line-height: 1.55; }
.connect-button { width: min(100%, 210px); min-height: 46px; display: block; margin: 16px 0 0 auto; font-size: 12px; white-space: nowrap; }

.account-control-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.profile-control-card,
.delegate-control-card,
.relationship-control-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  background: linear-gradient(150deg, #121416, #0e1012);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}
.profile-control-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.profile-control-card h3,
.delegate-control-card h3,
.relationship-control-card__heading h3 { margin: 0; color: #f4f7fa; font-size: 17px; font-weight: 650; }
.profile-control-card p:not(.step),
.delegate-control-card__heading p,
.relationship-control-card__heading p { margin: 8px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.62; }
.profile-display-name { overflow-wrap: anywhere; }
.profile-control-card__body { min-width: 0; flex: 1; }
.profile-name-form { display: grid; gap: 10px; margin-top: 20px; }
.profile-name-form label { font-weight: 650; }
.profile-name-form small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.profile-name-form button { justify-self: start; }
.profile-name-status:empty { display: none; }
.profile-control-card .profile-name-status[data-tone="error"] { color: #a02b2b; }
.profile-control-card .profile-name-status[data-tone="success"] { color: #246545; }
.switch-button { flex: 0 0 auto; min-width: 74px; border-color: var(--line-strong); color: #aeb7bd; background: #181b1e; box-shadow: none; }
.switch-button[aria-checked="true"] { border-color: rgba(105, 201, 158, 0.38); color: #91dfbb; background: rgba(57, 145, 105, 0.14); }
.delegate-control-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.delegate-control-card__heading > p { max-width: 330px; text-align: right; }
.delegate-list,
.relationship-list,
.binding-key-list { display: grid; gap: 11px; margin: 17px 0 0; padding: 0; list-style: none; }
.delegate-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 16px;
  background: #0c0e10;
}
.delegate-summary { min-width: 0; }
.delegate-name,
.device-name,
.binding-key-name,
.relationship-person__name { margin: 0; color: #f1f4f6; font-size: 15px; font-weight: 680; line-height: 1.42; }
.delegate-meta { display: flex; gap: 7px 12px; flex-wrap: wrap; margin: 7px 0 0; color: #828d95; font-size: 10.5px; line-height: 1.55; }
.delegate-state,
.device-state,
.binding-key-state,
.relationship-state { width: fit-content; display: inline-block; margin-top: 8px; border-radius: 999px; padding: 5px 9px; color: #8ed6b4; background: rgba(54, 139, 101, 0.15); font-size: 10.5px; font-weight: 680; }
.delegate-state[data-state="paused"],
.delegate-state[data-state="pending_binding"] { color: #e5bd79; background: rgba(157, 105, 28, 0.16); }
.delegate-state[data-state="revoked"],
.device-state[data-state="revoked"],
.device-state[data-state="expired"],
.binding-key-state[data-state="expired"],
.relationship-state[data-state="ended"] { color: #b7aaa4; background: rgba(118, 95, 84, 0.17); }
.delegate-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.client-management { grid-column: 1 / -1; min-width: 0; }
.client-management > summary { min-height: 36px; display: flex; align-items: center; color: var(--blue-strong); font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
.client-management > summary::-webkit-details-marker { display: none; }
.client-management[open] { border-top: 1px solid var(--line); padding-top: 8px; }
.client-management .delegate-actions { margin-top: 14px; justify-content: flex-start; }
.client-device-list { display: grid; gap: 8px; margin: 10px 0; padding: 0; list-style: none; }
.client-device-list .device-item { min-height: 0; padding: 12px; box-shadow: none; }
.client-device-list .device-main { align-items: center; justify-content: space-between; gap: 12px; }
.client-device-list .device-name { font-size: 13px; }
.delegate-empty,
.relationship-empty,
.devices-empty,
.binding-keys-empty {
  margin: 17px 0 0;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 15px;
  padding: 16px;
  color: #929ca3;
  background: rgba(10, 12, 14, 0.68);
  font-size: 12px;
  line-height: 1.58;
}

.connected-section { margin-top: 46px; }
.connected-section__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.connected-section__actions { display: flex; align-items: center; gap: 16px; }
.connected-section__actions p { max-width: 480px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; text-align: right; }
.connected-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.device-list { display: contents; margin: 0; padding: 0; list-style: none; }
.device-item,
.add-client-card { min-height: 176px; border: 1px solid var(--line); border-radius: 19px; padding: 23px 25px; background: linear-gradient(150deg, #121416, #0d0f11); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); }
.device-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 22px; align-items: center; }
.device-main { min-width: 0; display: flex; align-items: center; gap: 18px; }
.device-visual,
.add-client-card__visual { width: 68px; height: 68px; display: grid; flex: 0 0 68px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: #0a0c0e; }
.device-visual img,
.add-client-card__visual img { width: 46px; height: 46px; display: block; object-fit: contain; }
.device-summary { min-width: 0; }
.device-name { font-size: 18px; }
.device-meta,
.binding-key-meta { display: grid; gap: 3px; margin: 10px 0 0; color: #7f8991; font-size: 10.5px; line-height: 1.55; }
.device-details { min-width: 114px; }
.device-details > summary { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; color: var(--blue-strong); font-size: 11px; font-weight: 720; text-align: right; cursor: pointer; list-style: none; }
.device-details > summary::-webkit-details-marker { display: none; }
.device-details[open] { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 15px; }
.device-details[open] > summary { margin-bottom: 11px; text-align: left; }
.device-details .danger-button { margin-top: 13px; }
.add-client-card { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; gap: 18px; color: var(--ink); text-decoration: none; transition: border-color 170ms ease, background 170ms ease, transform 170ms var(--ease); }
.add-client-card:hover { border-color: rgba(111, 180, 255, 0.32); background: linear-gradient(150deg, #15191c, #0f1215); transform: translateY(-1px); }
.add-client-card__copy { min-width: 0; display: grid; gap: 7px; }
.add-client-card strong { font-size: 16px; }
.add-client-card small { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.add-client-card__action { color: var(--blue-strong); font-size: 11.5px; font-weight: 720; }

.relationship-section__note { max-width: 780px; margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.62; }
.relationship-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.relationship-item { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 15px; padding: 16px; background: #0c0e10; }
.relationship-person { min-width: 0; }
.relationship-person__id { display: block; margin-top: 5px; overflow-wrap: anywhere; color: #7f8991; font: 600 11px/1.55 ui-monospace, "SFMono-Regular", Consolas, monospace; }
.relationship-state { margin-top: 0; }
.relationship-state[data-state="blocked"] { color: #ffb1a3; background: rgba(143, 51, 38, 0.2); }
.relationship-meta { margin: 0; color: #7f8991; font-size: 10.5px; line-height: 1.5; }
.relationship-item__actions { display: flex; justify-content: flex-end; }

.binding-keys-card,
.devices-card { border: 1px solid var(--line); border-radius: 17px; padding: 21px; background: #0a0c0e; }
.binding-keys-heading,
.binding-key-item,
.devices-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.binding-keys-note,
.devices-note { margin: 12px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.65; }
.binding-key-item { border: 1px solid var(--line); border-radius: 15px; padding: 16px; background: #111315; }
.binding-key-summary { min-width: 0; }
.binding-key-secret { margin: 10px 0 0; overflow-wrap: anywhere; color: #8c979e; font: 600 11px/1.58 ui-monospace, "SFMono-Regular", Consolas, monospace; }
.binding-key-secret[data-visible="true"] { border: 1px solid rgba(105, 201, 158, 0.28); border-radius: 10px; padding: 10px; color: #d8f4e7; background: rgba(54, 139, 101, 0.1); }
.binding-key-secret[data-state="loading"] { color: #b0c4b9; }
.binding-key-secret[data-state="unavailable"] { color: #dca99e; font-family: inherit; font-weight: 620; }
.binding-key-actions { display: flex; flex: 0 0 auto; gap: 8px; flex-wrap: wrap; }
.eye-button { width: 44px; min-width: 44px; padding: 0; border-color: var(--line-strong); color: #d8e2e8; background: #181b1e; }
.key-copy-button { min-width: 68px; }
.host-credential-recovery { margin-top: 14px; border: 1px solid rgba(238, 143, 126, 0.28); border-radius: 13px; padding: 14px; background: rgba(122, 45, 34, 0.13); }
.host-credential-recovery .devices-note { margin: 0 0 10px; color: #e4b2a8; }

.modal {
  width: min(calc(100% - 28px), 620px);
  max-height: min(86vh, 720px);
  overflow: auto;
  border: 0;
  border-radius: var(--radius-card);
  padding: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.68);
}
.modal::backdrop { background: rgba(0, 0, 0, 0.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-card { border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: clamp(22px, 4vw, 33px); background: linear-gradient(155deg, #151719, #0d0f11); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.modal-heading h3 { margin: 0; color: #fff; font-size: 27px; line-height: 1.12; }
.modal-description { margin: 13px 0 21px; color: var(--muted); font-size: 13px; line-height: 1.65; }
#createKeyStatus[data-tone="error"] { color: #ffc0b5; }
#createKeyStatus[data-tone="success"] { color: #b8ebd2; }
.icon-button { width: 44px; flex: 0 0 auto; padding: 8px; border-color: var(--line-strong); color: #cbd3d9; background: #1a1d20; font-size: 22px; line-height: 1; }
.binding-key { max-width: 100%; display: block; margin: 17px 0 0; overflow-wrap: anywhere; word-break: break-word; border: 1px solid rgba(105, 201, 158, 0.28); border-radius: 13px; padding: 15px; color: #dcf5e9; background: rgba(54, 139, 101, 0.1); font: 680 13px/1.7 ui-monospace, "SFMono-Regular", Consolas, monospace; }
.created-key-name { margin: 17px 0 0; color: #b6dcc9; font-size: 13px; }
.key-created-at { margin: 9px 2px 0; color: #89958d; font-size: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 21px; }
.key-warning { margin: 16px 0 0; color: #c6b5a6; font-size: 12px; line-height: 1.66; }
.status {
  position: fixed;
  z-index: 120;
  right: 24px;
  bottom: 24px;
  width: min(420px, calc(100% - 48px));
  min-height: 44px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  padding: 12px 14px;
  color: #d5dce1;
  background: #171a1d;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.55;
}
.status:empty { width: 0; min-height: 0; overflow: hidden; border: 0; padding: 0; background: transparent; box-shadow: none; pointer-events: none; }
.status[data-tone="success"] { border-color: rgba(105, 201, 158, 0.28); color: #b8ebd2; background: #101b16; }
.status[data-tone="error"] { border-color: rgba(238, 143, 126, 0.3); color: #ffc0b5; background: #211412; }

:where(a, button, input, select, textarea, summary, #account, #devices, #keys):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
input:focus-visible,
select:focus-visible { border-color: rgba(111, 180, 255, 0.72); background: #0d1114; box-shadow: 0 0 0 3px rgba(111, 180, 255, 0.09); }

@media (max-width: 980px) {
  .account-primary-grid,
  .account-control-grid { grid-template-columns: 1fr; }
  .identity-card { min-height: 350px; }
  .connect-card { min-height: 0; }
  .connected-section__heading { align-items: flex-start; flex-direction: column; }
  .connected-section__actions { width: 100%; justify-content: space-between; }
  .connected-section__actions p { text-align: left; }
}

@media (max-width: 760px) {
  .page-shell { width: min(1184px, calc(100% - 32px)); padding-bottom: 44px; }
  .site-header { min-height: 0; flex-wrap: wrap; gap: 6px 12px; padding: 10px 0 12px; }
  .account-nav { width: 100%; justify-content: space-between; gap: 6px; }
  .account-nav__link,
  .account-nav__button { padding-inline: 8px; font-size: 11.5px; }
  .language-toggle { min-width: 72px; padding-inline: 8px; }
  .account-page:not(.account-page--signed-in) .auth-grid--single { margin-top: clamp(48px, 8vh, 72px); }
  .auth-grid { padding: 8px 0 20px; }
  .auth-grid,
  .connected-grid,
  .relationship-control-grid { grid-template-columns: 1fr; }
  .panel-heading { min-height: 0; }
  .panel { border-radius: 20px; }
  .identity-card { min-height: 320px; border-radius: 20px; }
  .connect-card { border-radius: 20px; padding: 24px 20px; }
  .client-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connection-form { grid-template-columns: 1fr; }
  .host-id-help { grid-column: 1; }
  .connect-button { width: 100%; }
  .account-section-nav { justify-content: stretch; }
  .account-section-nav a { flex: 1 1 0; }
  .profile-control-card,
  .delegate-control-card__heading { align-items: stretch; flex-direction: column; }
  .switch-button { width: 100%; }
  .delegate-control-card__heading > p { max-width: none; text-align: left; }
  .delegate-item { grid-template-columns: 1fr; }
  .delegate-actions { justify-content: stretch; }
  .delegate-actions button { flex: 1 1 auto; }
  .connected-section { margin-top: 36px; }
  .connected-section__actions { align-items: flex-start; flex-direction: column; gap: 6px; }
  .device-item,
  .add-client-card { grid-template-columns: 1fr; align-items: stretch; min-height: 0; padding: 21px; }
  .device-main { align-items: flex-start; }
  .device-details { min-width: 0; }
  .device-details > summary { justify-content: flex-start; text-align: left; }
  .device-details .danger-button { width: 100%; }
  .add-client-card__visual { width: 64px; height: 64px; }
  .binding-keys-heading,
  .binding-key-item,
  .devices-heading { align-items: stretch; flex-direction: column; }
  .relationship-item__actions .danger-button { width: 100%; }
  .binding-keys-heading .primary-button,
  .devices-heading .quiet-button,
  .binding-key-actions { width: 100%; }
  .binding-key-actions button { flex: 1 1 auto; }
  .modal { width: calc(100% - 20px); max-height: 92vh; }
  .modal-card { border-radius: 19px; }
  .modal-actions { display: grid; grid-template-columns: 1fr; }
  .modal-actions button { width: 100%; }
}

@media (max-width: 620px) {
  .brand b { display: none; }
  .site-header { min-height: 64px; }
  .account-section-nav a { min-width: 0; padding-inline: 8px; }
}

@media (max-width: 390px) {
  .page-shell { width: calc(100% - 24px); }
  .account-nav__link,
  .account-nav__button { padding-inline: 6px; font-size: 11px; }
  .language-toggle { min-width: 68px; padding-inline: 6px; font-size: 11px; }
  .panel { padding: 22px 19px; }
  .identity-card { padding: 27px 22px; }
  .profile-control-card,
  .delegate-control-card,
  .relationship-control-card { padding: 19px; }
  .device-main { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  button:hover:not(:disabled),
  .account-section-nav a:hover,
  .add-client-card:hover { transform: none; }
}

@media (forced-colors: active) {
  .client-choice--selected,
  input[aria-invalid="true"],
  .switch-button[aria-checked="true"] { border: 2px solid Highlight; }
  :where(a, button, input, select, textarea, summary, #account, #devices, #keys):focus-visible { outline-color: Highlight; }
}

/* Signed-in account center: selected dark sidebar direction, scaled to the public homepage. */
.account-nav__guide img,
.account-nav__logout img {
  width: 17px;
  height: 17px;
  display: block;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
  opacity: 0.66;
}
.account-nav__guide,
.account-nav__logout { gap: 9px; }

.account-page--signed-in {
  background: #000;
}
.account-page--signed-in::before { display: none; }
.account-page--signed-in .page-shell {
  width: 100%;
  margin: 0;
  padding: 0;
}
.account-page--signed-in .site-header {
  position: fixed;
  z-index: 80;
  inset: 0 auto 0 0;
  width: 250px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 38px 10px 24px;
  background: #050609;
  overflow-y: auto;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.account-page--signed-in .brand {
  width: fit-content;
  margin: 0 24px 32px;
}
.account-page--signed-in .account-section-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  gap: 5px;
  margin: 0;
}
.account-page--signed-in .account-section-nav a {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  display: flex;
  justify-content: flex-start;
  gap: 13px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 8px;
  padding: 0 16px;
  color: #929ba2;
  background: transparent;
  font-size: 13px;
  font-weight: 620;
  letter-spacing: -0.01em;
  transform: none;
}
.account-page--signed-in .account-section-nav a:hover {
  color: #e7ebee;
  background: rgba(255, 255, 255, 0.045);
  transform: none;
}
.account-page--signed-in .account-section-nav a[aria-current="page"] {
  color: #fff;
  border-left-color: #168cf4;
  background: rgba(255, 255, 255, 0.075);
}
.account-page--signed-in .account-section-nav img {
  width: 19px;
  height: 19px;
  display: block;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
  opacity: 0.58;
}
.account-page--signed-in .account-section-nav a[aria-current="page"] img { opacity: 0.96; }
.account-page--signed-in .account-nav {
  width: 100%;
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  gap: 5px;
  margin-top: auto;
}
.account-page--signed-in .account-nav__link,
.account-page--signed-in .account-nav__button,
.account-page--signed-in .language-toggle {
  width: 100%;
  min-height: 44px;
  justify-content: flex-start;
  border: 0;
  padding: 0 16px;
  color: #8f989f;
  background: transparent;
  font-size: 12px;
}
.account-page--signed-in .language-toggle { gap: 5px; }
.account-page--signed-in .account-nav__link:hover,
.account-page--signed-in .account-nav__button:hover:not(:disabled),
.account-page--signed-in .language-toggle:hover:not(:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  transform: none;
}
.account-page--signed-in #mainContent {
  min-width: 0;
  min-height: 100vh;
  margin-left: 250px;
}
.account-page--signed-in .account-panel {
  width: min(1040px, calc(100% - 80px));
}
.account-page--signed-in .account-panel {
  margin-inline: auto;
  padding: 28px 0 48px;
}
.account-page--signed-in .status { font-size: 11.5px; }

.account-page--signed-in .account-view,
.account-page--signed-in .account-controls-section,
.account-page--signed-in .relationship-section {
  min-width: 0;
  scroll-margin-top: 24px;
}
.account-page--signed-in .account-view:focus-visible {
  outline: none;
}
.account-page--signed-in .account-view:focus-visible > .account-view-heading::before {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: -14px;
  width: 2px;
  border-radius: 999px;
  background: #168cf4;
  content: "";
}
.account-page--signed-in .account-view-heading { position: relative; margin-bottom: 20px; }
.account-page--signed-in .account-view-heading--with-action {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.account-page--signed-in .account-view-heading .step { margin-bottom: 7px; }
.account-page--signed-in .account-view-heading h2 {
  margin: 0;
  color: #f7f9fa;
  font-family: Inter, "Segoe UI Variable Display", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  font-size: clamp(26px, 2.4vw, 30px);
  font-weight: 560;
  letter-spacing: -0.045em;
  line-height: 1.08;
}
.account-page--signed-in .account-view-heading p:not(.step):last-child {
  max-width: 620px;
  margin: 10px 0 0;
  color: #89939a;
  font-size: 13px;
  line-height: 1.55;
}

.account-page--signed-in .identity-card {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  row-gap: 8px;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 18px 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}
.account-page--signed-in .identity-card__summary {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: block;
}
.account-page--signed-in .identity-card__mark,
.account-page--signed-in .identity-card__summary .identity-label,
.account-page--signed-in .identity-copy { display: none; }
.account-page--signed-in .identity-card h3 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 620;
  letter-spacing: -0.035em;
  line-height: 1.18;
}
.account-page--signed-in .identity-card__identifier {
  display: contents;
}
.account-page--signed-in .identity-card__identifier > div {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
.account-page--signed-in .hellolynk-id {
  display: block;
  margin-top: 0;
  color: #eef2f4;
  font-size: 13px;
  font-weight: 620;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.account-page--signed-in .connection-state {
  margin: 7px 0 0;
  color: #7f8a91;
  font-size: 11px;
}
.account-page--signed-in .connection-state[data-state="available"] {
  color: #62c994;
  font-weight: 620;
}
.account-page--signed-in .connect-button,
.account-page--signed-in .binding-keys-heading .primary-button {
  position: relative;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  padding: 0 16px;
  color: #fff;
  background: #0877d6;
  box-shadow: none;
  font-size: 13px;
}
.account-page--signed-in .connect-button::before,
.account-page--signed-in .binding-keys-heading .primary-button::before {
  position: absolute;
  inset: -4px 0;
  content: "";
}
.account-page--signed-in .connect-button:hover:not(:disabled),
.account-page--signed-in .binding-keys-heading .primary-button:hover:not(:disabled) {
  color: #fff;
  background: #0566b8;
  box-shadow: none;
}

.account-page--signed-in .account-overview { margin-top: 24px; }
.account-page--signed-in .account-overview > h3 {
  margin: 0 0 6px;
  color: #eef2f4;
  font-size: 14px;
  font-weight: 650;
}
.account-page--signed-in .account-overview__row {
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.account-page--signed-in .account-overview__row:last-child { border-bottom: 1px solid var(--line); }
.account-page--signed-in .account-overview__label {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.account-page--signed-in .account-overview__label > img {
  width: 20px;
  height: 20px;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.63;
}
.account-page--signed-in .account-overview__label > div { display: grid; gap: 0; }
.account-page--signed-in .account-overview__label strong {
  color: #e8ecef;
  font-size: 14px;
  font-weight: 610;
}
.account-page--signed-in .account-overview__label span {
  display: none;
}
.account-page--signed-in .account-overview__value {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
.account-page--signed-in .account-overview__value > strong {
  min-width: 0;
  flex: 1 1 auto;
  color: #f5f7f8;
  font-size: 13px;
  font-weight: 620;
  overflow-wrap: anywhere;
  text-align: right;
}
.account-page--signed-in .account-overview__value a,
.account-page--signed-in .account-overview__value .text-button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  color: #58adf2;
  background: transparent;
  font-size: 12px;
  font-weight: 680;
  text-decoration: none;
}

.account-page--signed-in .account-controls-section,
.account-page--signed-in .relationship-section { margin-top: 0; border-top: 0; }
.account-page--signed-in .account-control-grid,
.account-page--signed-in .relationship-control-grid {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
}
.account-page--signed-in .profile-control-card,
.account-page--signed-in .delegate-control-card,
.account-page--signed-in .relationship-control-card {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 16px 0;
  background: transparent;
  box-shadow: none;
}
.account-page--signed-in .profile-control-card h3,
.account-page--signed-in .delegate-control-card h3,
.account-page--signed-in .relationship-control-card__heading h3 {
  font-size: 14px;
  font-weight: 620;
}
.account-page--signed-in .delegate-control-card__heading > p { max-width: 420px; }
.account-page--signed-in .delegate-item,
.account-page--signed-in .relationship-item,
.account-page--signed-in .binding-key-item {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  padding: 15px 0;
  background: transparent;
}
.account-page--signed-in .delegate-name,
.account-page--signed-in .device-name,
.account-page--signed-in .binding-key-name,
.account-page--signed-in .relationship-person__name { font-size: 14px; }
.account-page--signed-in .relationship-section__note {
  max-width: 760px;
  margin: 12px 0 0;
  font-size: 12px;
}

.account-page--signed-in .connect-card,
.account-page--signed-in .binding-keys-card,
.account-page--signed-in .host-advanced-card {
  min-height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.account-page--signed-in .connect-card__static-heading,
.account-page--signed-in .host-advanced-card__heading {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 0;
}
.account-page--signed-in .host-advanced-card__heading > span { display: grid; gap: 5px; }
.account-page--signed-in .connect-card__static-heading strong,
.account-page--signed-in .host-advanced-card__heading strong {
  color: #eef2f4;
  font-size: 14px;
  font-weight: 620;
}
.account-page--signed-in .connect-card__body,
.account-page--signed-in .host-advanced-card__content {
  border-top: 1px solid var(--line);
  padding: 18px 0 22px;
}
.account-page--signed-in #connectNewClient .connect-card__body { border-top: 0; }
.account-page--signed-in .connect-card__heading h3 {
  margin: 0;
  color: #f4f7fa;
  font-size: 18px;
  font-weight: 590;
  letter-spacing: -0.025em;
}
.account-page--signed-in .connect-card__heading p {
  margin: 8px 0 0;
  color: #7f8991;
  font-size: 12px;
}
.account-page--signed-in .connected-section { margin-top: 20px; }
.account-page--signed-in #connectNewClient { margin-top: 28px; }
.account-page--signed-in .connected-section__heading {
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 13px;
}
.account-page--signed-in .connected-section__heading h3 {
  margin: 0;
  color: #eef2f4;
  font-size: 18px;
  font-weight: 590;
  letter-spacing: -0.025em;
}
.account-page--signed-in .connected-section__heading p {
  margin: 7px 0 0;
  color: #7f8991;
  font-size: 12px;
  line-height: 1.55;
}
.account-page--signed-in .connected-grid {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
}
.account-page--signed-in .connected-grid .delegate-list { display: grid; }
.account-page--signed-in #unmatchedConnectionsTitle { margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.account-page--signed-in #unmatchedConnectionsTitle[hidden] { display: none; }
.account-page--signed-in .device-list { display: grid; }
.account-page--signed-in .device-item {
  min-height: 76px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 13px 0;
  background: transparent;
  box-shadow: none;
}
.account-page--signed-in .device-main { gap: 14px; }
.account-page--signed-in .device-visual {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 10px;
}
.account-page--signed-in .device-visual img { width: 28px; height: 28px; }
.account-page--signed-in .devices-empty,
.account-page--signed-in .binding-keys-empty,
.account-page--signed-in .delegate-empty,
.account-page--signed-in .relationship-empty {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 0;
  background: transparent;
}

.account-page--signed-in .binding-keys-card { padding: 18px 0 8px; }
.account-page--signed-in .binding-keys-heading { align-items: center; }
.account-page--signed-in .binding-keys-heading h3 {
  margin: 0;
  color: #eef2f4;
  font-size: 15px;
  font-weight: 620;
}
.account-page--signed-in .binding-keys-heading .binding-keys-note { margin: 6px 0 0; }
.account-page--signed-in .binding-keys-note,
.account-page--signed-in .devices-note { max-width: 760px; font-size: 11.5px; }
.account-page--signed-in .binding-key-list { gap: 0; }
.account-page--signed-in .host-advanced-card { margin-top: 24px; }
.account-page--signed-in .host-advanced-card .step { margin: 0; }
.account-page--signed-in .host-advanced-card__content { display: grid; gap: 15px; }
.account-page--signed-in .host-recovery-field { max-width: 620px; }
.account-page--signed-in .host-advanced-card__content > .quiet-button { width: fit-content; }

@media (min-width: 901px) {
  .account-page--signed-in .account-view-heading--with-action > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 14px;
  }
  .account-page--signed-in .account-view-heading--with-action .step { grid-column: 1 / -1; }
  .account-page--signed-in .account-view-heading--with-action h2 { grid-column: 1; }
  .account-page--signed-in .account-view-heading--with-action p:not(.step):last-child {
    grid-column: 2;
    margin: 0;
  }
  .account-page--signed-in .connect-card__heading,
  .account-page--signed-in .connected-section__heading > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
  }
  .account-page--signed-in .connect-card__heading p,
  .account-page--signed-in .connected-section__heading p { margin: 0; }
  .account-page--signed-in .devices-empty { margin-top: 0; }
}

@media (max-width: 900px) {
  .account-page--signed-in .site-header {
    inset: 0 0 auto;
    width: auto;
    min-height: 0;
    flex-flow: row wrap;
    align-items: center;
    gap: 6px 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 18px 8px;
    overflow-y: visible;
  }
  .account-page--signed-in .brand { margin: 0; }
  .account-page--signed-in .account-nav {
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin: 0 0 0 auto;
  }
  .account-page--signed-in .account-nav__link,
  .account-page--signed-in .account-nav__button,
  .account-page--signed-in .language-toggle { width: auto; padding-inline: 10px; }
  .account-page--signed-in .account-section-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
    padding-bottom: 0;
  }
  .account-page--signed-in .account-section-nav a {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding-inline: 10px;
  }
  .account-page--signed-in #mainContent {
    margin-left: 0;
    padding-top: 170px;
  }
  .account-page--signed-in .account-view,
  .account-page--signed-in .account-controls-section,
  .account-page--signed-in .relationship-section { scroll-margin-top: 184px; }
  .account-page--signed-in .account-panel { width: min(calc(100% - 64px), 1080px); }
  .account-page--signed-in .identity-card { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 12px; }
  .account-page--signed-in .identity-card__summary {
    grid-column: 1;
    grid-row: 1;
  }
  .account-page--signed-in .identity-card__identifier > div {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-width: 620px) {
  .account-page--signed-in .site-header { padding-inline: 12px; }
  .account-page--signed-in .brand b { display: none; }
  .account-page--signed-in .account-nav__guide span,
  .account-page--signed-in .account-nav__logout span { display: none; }
  .account-page--signed-in .account-nav__guide,
  .account-page--signed-in .account-nav__logout {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .account-page--signed-in .language-toggle { min-width: 70px; }
  .account-page--signed-in .account-section-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-page--signed-in .account-section-nav a { min-width: 0; gap: 6px; padding-inline: 8px; font-size: 10.5px; }
  .account-page--signed-in .account-section-nav img { width: 16px; height: 16px; }
  .account-page--signed-in #mainContent { padding-top: 220px; }
  .account-page--signed-in .account-view,
  .account-page--signed-in .account-controls-section,
  .account-page--signed-in .relationship-section { scroll-margin-top: 234px; }
  .account-page--signed-in .account-panel { width: calc(100% - 32px); }
  .account-page--signed-in .account-panel { padding-top: 32px; }
  .account-page--signed-in .account-view-heading { margin-bottom: 18px; }
  .account-page--signed-in .account-view-heading--with-action { align-items: flex-start; flex-direction: column; }
  .account-page--signed-in .identity-card { padding: 18px 0; }
  .account-page--signed-in .identity-card__identifier { grid-template-columns: 1fr; gap: 18px; }
  .account-page--signed-in .account-overview__row { grid-template-columns: 1fr; gap: 8px; }
  .account-page--signed-in .account-overview__value { justify-content: space-between; }
  .account-page--signed-in .account-overview__value > strong { text-align: left; }
  .account-page--signed-in .profile-control-card,
  .account-page--signed-in .delegate-control-card__heading,
  .account-page--signed-in .binding-keys-heading,
  .account-page--signed-in .binding-key-item { align-items: stretch; flex-direction: column; }
  .account-page--signed-in .delegate-control-card__heading > p { max-width: none; text-align: left; }
  .account-page--signed-in .switch-button { width: 100%; }
  .account-page--signed-in .client-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-page--signed-in .connection-form { grid-template-columns: 1fr; }
  .account-page--signed-in .host-id-help { grid-column: 1; }
  .account-page--signed-in .connect-button { width: 100%; }
  .account-page--signed-in .device-item { grid-template-columns: 1fr; }
  .account-page--signed-in .device-details > summary { justify-content: flex-start; }
  .account-page--signed-in .binding-keys-heading .primary-button,
  .account-page--signed-in .host-advanced-card__content > .quiet-button { width: 100%; }
  .status { right: 16px; bottom: 16px; width: calc(100% - 32px); }
}

@media (max-width: 390px) {
  .auth-grid--single .panel { padding: 20px 18px; }
}

.connection-instruction {
  margin: 0 0 16px;
  max-width: 760px;
  overflow-wrap: anywhere;
  color: #eef2f4;
  font-size: 15px;
  line-height: 1.65;
  user-select: text;
}
.device-authorization.panel {
  width: min(580px, 100%);
  margin: 28px auto 20px;
  box-sizing: border-box;
  gap: 18px;
}
.device-authorization .panel-heading { min-height: 0; }
.device-authorization h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.2; }
.device-authorization__summary { display: grid; gap: 14px; margin: 0; }
.device-authorization__summary > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; }
.device-authorization__summary dt { color: var(--muted); font-size: 13px; }
.device-authorization__summary dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 14px; }
.device-authorization__status { margin: 0; color: #bbc3cb; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.device-authorization__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.device-authorization__actions > button { min-width: 0; max-width: 100%; white-space: normal; }
.account-page--device-confirmation:not(.account-page--signed-in) .auth-grid--single { margin-top: 0; }
.account-page--signed-in .device-authorization { width: min(580px, calc(100% - 64px)); }
.account-page--signed-in #manualClientConnection h3 { margin: 0 0 18px; font-size: 16px; }
@media (max-width: 900px) {
  .account-page--device-confirmation.account-page--signed-in #mainContent { padding-top: 80px; }
}
@media (max-width: 620px) {
  .account-page--signed-in .device-authorization { width: calc(100% - 32px); }
  .device-authorization.panel { padding: 20px 18px; }
  .device-authorization__summary > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* Public account portal: the same paper, outlines and color accents as the site. */
body.account-page { color: var(--ink); background: var(--page); font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei UI', sans-serif; }
body.account-page::before { display: none; }
body.account-page :is(h1,h2,h3) { color: var(--ink); font-family: ui-rounded, 'Arial Rounded MT Bold', 'Trebuchet MS', 'Microsoft YaHei UI', sans-serif; font-weight: 800; letter-spacing: -.035em; line-height: 1.25; }
body.account-page :is(.panel-heading,.account-view-heading,.identity-card,.connected-section__heading,.binding-keys-heading,.relationship-control-card__heading,.modal-heading) :is(h2,h3) { color: var(--ink); font-family: ui-rounded, 'Trebuchet MS', 'Microsoft YaHei UI', sans-serif; font-weight: 800; }
body.account-page .site-header { border-color: var(--line); background: var(--page); backdrop-filter: none; }
body.account-page .brand { color: var(--ink); font-size: 25px; }
body.account-page .brand img { width: 34px; height: 34px; }
body.account-page :is(.account-nav__link,.account-nav__button,.language-toggle) { border: 1.5px solid transparent; color: var(--ink); background: transparent; font-size: 13px; }
body.account-page :is(.account-nav__link,.account-nav__button,.language-toggle):hover:not(:disabled) { color: var(--ink); border-color: var(--ink); background: var(--surface); }
body.account-page .language-toggle { border: 1.5px solid var(--ink); border-radius: 999px; background: var(--surface); transition: background-color 160ms ease; }
body.account-page .language-toggle:hover:not(:disabled) { background: var(--sky-soft); }
body.account-page .language-toggle:active:not(:disabled) { background: var(--sky); }
body.account-page .language-toggle .is-active { color: var(--blue); }
body.account-page :is(.account-nav__guide,.account-nav__logout,.account-section-nav,.account-overview__label,.password-toggle,.eye-button) img { filter: brightness(0); opacity: .8; }
body.account-page :is(.session-bootstrap,.panel,.modal-card) { border: 2px solid var(--ink); border-radius: 22px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
body.account-page .host-id-help #hostIdPromptStatus[data-tone="success"] { color: #275e43; }
body.account-page .host-id-help #hostIdPromptStatus[data-tone="error"] { color: #933640; }
body.account-page .host-id-help textarea { border-color: var(--ink); color: var(--ink); background: var(--surface); }
body.account-page .session-bootstrap strong { color: var(--ink); }
body.account-page .auth-grid--single { width: min(500px,100%); margin-top: clamp(32px,7vh,80px); }
body.account-page .auth-grid--single .panel { padding: 32px; gap: 17px; border-radius: 26px; overflow: visible; }
body.account-page #loginForm { border-top: 4px solid var(--sky); }
body.account-page #registerForm { border-top: 4px solid var(--pink); }
body.account-page .auth-grid--single .panel h2 { font-size: clamp(28px,3vw,35px); }
body.account-page .registration-email-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; align-items: stretch; }
body.account-page .registration-email-row .quiet-button { min-width: 104px; padding-inline: 12px; }
body.account-page #registerEmailStatus { min-height: 1.4em; line-height: 1.45; }
body.account-page :is(label,.form-field) > span { color: var(--ink); }
body.account-page :is(input,select) { min-width: 0; min-height: 48px; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--surface); font-size: 16px; }
body.account-page input::placeholder { color: var(--muted); opacity: 1; }
body.account-page label { color: var(--ink); }
body.account-page label small { color: var(--muted); }
body.account-page input:hover { border-color: var(--ink); background: var(--surface); }
body.account-page input:-webkit-autofill,
body.account-page input:-webkit-autofill:hover,
body.account-page input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--surface) inset; }
body.account-page input:focus { border-color: var(--blue); box-shadow: 3px 3px 0 var(--sky); }
body.account-page input[aria-invalid="true"] { border-color: var(--danger); background: #fff0f3; }
body.account-page :is(.primary-button,.quiet-button,.danger-button,.icon-button,.password-toggle,.eye-button,.switch-button) { min-height: 44px; border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--surface); box-shadow: 3px 3px 0 var(--ink); font-size: 13px; line-height: 1.4; white-space: normal; transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease; }
body.account-page :is(.primary-button,.connect-button,.binding-keys-heading .primary-button) { border: 2px solid var(--ink); color: var(--ink); background: var(--sky); box-shadow: 3px 3px 0 var(--ink); }
body.account-page :is(.connect-button,.binding-keys-heading .primary-button)::before { display: none; }
body.account-page :is(.primary-button,.quiet-button,.password-toggle,.eye-button,.icon-button):hover:not(:disabled) { border-color: var(--ink); color: var(--ink); background: var(--yellow); box-shadow: 3px 4px 0 var(--ink); }
body.account-page :is(.primary-button,.quiet-button,.danger-button,.password-toggle,.eye-button,.icon-button):active:not(:disabled) { transform: translate(3px,3px); box-shadow: none; }
body.account-page .danger-button { color: #7f2d39; background: #ffe0eb; }
body.account-page .danger-button:hover:not(:disabled) { color: #7f2d39; border-color: #7f2d39; background: var(--pink); }
body.account-page .password-toggle { min-width: 46px; border-radius: 12px; }
body.account-page .password-toggle[aria-pressed="true"] { border-color: var(--ink); background: var(--sky); }
body.account-page .icon-button { font-size: 24px; }
body.account-page .text-button { color: var(--blue); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
body.account-page .text-button:hover:not(:disabled) { color: var(--ink); background: #e2f2ff; }
body.account-page .form-validation { border: 1.5px solid #933640; color: #7f2d39; background: #ffe5eb; font-size: 13px; }
body.account-page #createKeyStatus[data-tone="error"] { color: #933640; }
body.account-page #createKeyStatus[data-tone="success"] { color: #275e43; }
body.account-page :is(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
body.account-page button:disabled { opacity: .58; transform: none; box-shadow: none; }
body.account-page :is(.helper,.panel-heading p:last-child,.panel small,.auth-route-copy,.auth-switch,.modal-description,.device-authorization__status,.connection-state,.identity-copy,.identity-label,.step,.eyebrow) { color: var(--muted); }
body.account-page .account-panel { padding-bottom: 48px; }
body.account-page .account-view-heading h2 { font-size: clamp(28px,3vw,37px); }
body.account-page :is(.account-view-heading p:not(.step):last-child,.relationship-section__note,.connected-section__heading p,.binding-keys-note,.devices-note) { color: var(--muted); font-size: 13px; line-height: 1.65; }
body.account-page :is(.identity-card,.profile-control-card,.delegate-control-card,.relationship-control-card,.connect-card,.binding-keys-card,.host-advanced-card) { border: 2px solid var(--ink); border-radius: 22px; padding: 26px; color: var(--ink); background: var(--surface); box-shadow: 4px 4px 0 var(--ink); }
body.account-page .identity-card { padding: 30px; background: var(--sky-soft); }
body.account-page .identity-card :is(h3,.hellolynk-id,.connection-state) { color: var(--ink); }
body.account-page .identity-card .identity-label { color: var(--muted); }
body.account-page .identity-card__summary .identity-label, body.account-page .identity-copy { display: block; }
body.account-page .identity-copy { margin-top: 12px; color: var(--muted); }
body.account-page .account-overview { padding: 22px 26px; border: 2px solid var(--ink); border-radius: 22px; background: var(--surface); box-shadow: 4px 4px 0 var(--ink); }
body.account-page .account-overview :is(h3,strong) { color: var(--ink); }
body.account-page .account-overview__value > strong { font-size: 17px; }
body.account-page .account-control-grid, body.account-page .relationship-control-grid { gap: 24px; }
body.account-page :is(.profile-control-card h3,.delegate-control-card h3,.host-advanced-card__heading strong,.connect-card__static-heading strong,.connection-form label strong) { color: var(--ink); }
body.account-page .profile-control-card p:not(.step), body.account-page .delegate-control-card__heading p, body.account-page .relationship-control-card__heading p { font-size: 13px; }
body.account-page .switch-button[aria-checked="true"] { border-color: var(--ink); color: #275e43; background: #e4f1dd; }
body.account-page :is(.delegate-list,.relationship-list,.binding-key-list,.device-list) { gap: 12px; }
body.account-page :is(.delegate-item,.relationship-item,.binding-key-item,.device-item) { border: 1.5px solid var(--ink); border-radius: 16px; padding: 18px; color: var(--ink); background: var(--surface); box-shadow: none; }
body.account-page .delegate-item { grid-template-columns: minmax(0,1fr) auto; gap: 12px 18px; border: 2px solid var(--ink); border-radius: 22px; background: var(--surface); box-shadow: 4px 4px 0 var(--ink); }
body.account-page .client-management:not([open]) { grid-column: 2; grid-row: 1; }
body.account-page .delegate-summary, body.account-page .client-device-list .device-name { overflow-wrap: anywhere; }
body.account-page .client-management > summary { width: fit-content; max-width: 100%; min-height: 44px; gap: 10px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 9px 16px; color: var(--ink); background: var(--surface); box-shadow: 3px 3px 0 var(--ink); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; transition: background-color 120ms ease, box-shadow 120ms ease; }
body.account-page .client-management > summary::after { width: 7px; height: 7px; flex: 0 0 7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); content: ""; }
body.account-page .client-management > summary:hover { background: var(--page); box-shadow: 3px 4px 0 var(--ink); }
body.account-page .client-management[open] { border-top: 1.5px solid var(--ink); padding-top: 12px; }
body.account-page .client-management[open] > summary { background: var(--sky); }
body.account-page .client-management[open] > summary::after { transform: rotate(225deg); }
body.account-page .client-device-list { gap: 10px; margin: 16px 0 0; }
body.account-page .client-device-list .device-item { min-height: 0; padding: 12px; background: var(--page); box-shadow: none; gap: 10px; }
body.account-page .client-device-list .device-main { flex-direction: row; flex-wrap: wrap; }
body.account-page .client-device-list .device-name { min-width: 0; flex: 1 1 auto; }
body.account-page .client-device-list .device-name { font-size: 13px; }
body.account-page .client-management .delegate-actions { margin-top: 16px; gap: 10px; }
body.account-page .delegate-actions button { min-width: 0; max-width: 100%; }
body.account-page .relationship-item { background: #fff0f5; }
body.account-page :is(.delegate-name,.device-name,.binding-key-name,.relationship-person__name) { color: var(--ink); font-size: 15px; }
body.account-page :is(.delegate-meta,.device-meta,.binding-key-meta,.relationship-meta,.relationship-person__id,.binding-key-secret,.key-created-at,.created-key-name,.key-warning) { color: var(--muted); font-size: 12px; }
body.account-page :is(.delegate-state,.device-state,.binding-key-state,.relationship-state,.connection-state[data-state="available"]) { border: 1px solid #275e43; color: #275e43; background: #e4f1dd; font-size: 11px; }
body.account-page .identity-card .connection-state { display: inline-block; width: fit-content; max-width: 100%; padding: 5px 10px; border: 1px solid var(--muted); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 12px; line-height: 1.5; }
body.account-page .identity-card .connection-state[data-state="available"] { border-color: #275e43; color: #275e43; background: #e4f1dd; }
body.account-page .identity-card .connection-state[data-state="unavailable"] { border-color: #765019; color: #765019; background: #fff0bc; }
body.account-page :is(.delegate-state[data-state="paused"],.delegate-state[data-state="pending_binding"]) { border-color: #765019; color: #765019; background: #fff0bc; }
body.account-page :is(.delegate-state[data-state="revoked"],.device-state[data-state="revoked"],.device-state[data-state="expired"],.binding-key-state[data-state="expired"],.relationship-state[data-state="ended"]) { border-color: var(--muted); color: var(--muted); background: #eee7dc; }
body.account-page .device-state[data-state="expired"] { border-color: #765019; color: #765019; background: #fff0bc; }
body.account-page .relationship-state[data-state="blocked"] { border-color: #933640; color: #933640; background: #ffe0eb; }
body.account-page :is(.delegate-empty,.relationship-empty,.devices-empty,.binding-keys-empty) { border: 1.5px dashed #928571; border-radius: 16px; padding: 24px; color: var(--muted); background: var(--page); font-size: 14px; line-height: 1.65; }
body.account-page .device-visual { border: 1.5px solid var(--ink); background: var(--page); }
body.account-page .client-choice { color: var(--ink); border: 1.5px solid var(--ink); background: var(--surface); font-size: 13px; }
body.account-page .client-choice:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); background: #ffe0eb; }
body.account-page .client-choice--selected { color: var(--ink); background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
body.account-page .connection-instruction { color: var(--ink); font-size: 16px; }
body.account-page :is(.connect-card__body,.host-advanced-card__content) { padding-bottom: 0; }
body.account-page .binding-key-secret[data-visible="true"], body.account-page .binding-key { border: 1.5px solid #275e43; color: #275e43; background: #e4f1dd; }
body.account-page .binding-key-secret[data-state="loading"] { color: var(--muted); }
body.account-page .binding-key-secret[data-state="unavailable"] { color: #933640; }
body.account-page .host-credential-recovery { border-color: #933640; background: #ffe5eb; }
body.account-page .host-credential-recovery .devices-note { color: #7f2d39; }
body.account-page .modal { max-height: calc(100dvh - 40px); overflow: auto; border-radius: 24px; box-shadow: 6px 6px 0 var(--ink); }
body.account-page .modal::backdrop { background: #29251f70; }
body.account-page .modal-card { box-shadow: none; }
body.account-page .status:not(:empty) { border: 1.5px solid var(--ink); border-radius: 16px; color: var(--ink); background: var(--surface); box-shadow: 4px 4px 0 var(--ink); font-size: 13px; }
body.account-page .status[data-tone="success"] { color: #275e43; background: #e4f1dd; }
body.account-page .status[data-tone="error"] { color: #7f2d39; background: #ffe5eb; }
body.account-page.account-page--signed-in .site-header { border-right: 2px solid var(--ink); padding-inline: 16px; background: #fff0d4; }
body.account-page .account-section-nav { gap: 10px; }
body.account-page .account-section-nav a { min-height: 48px; border: 1.5px solid transparent; border-radius: 14px; color: var(--muted); background: transparent; }
body.account-page .account-section-nav a:hover { border-color: var(--ink); color: var(--ink); background: var(--surface); }
body.account-page .account-section-nav a[aria-current="page"] { border-color: var(--ink); color: var(--ink); background: var(--sky); box-shadow: 3px 3px 0 var(--ink); }
body.account-page .account-section-nav a[aria-current="page"] img { opacity: .85; }
@media (max-width: 900px) {
  body.account-page.account-page--signed-in .site-header { position: relative; inset: auto; min-height: 0; border-right: 0; border-bottom: 2px solid var(--ink); padding: 14px 20px; }
  body.account-page.account-page--signed-in #mainContent { padding-top: 0; }
  body.account-page .account-section-nav { margin-top: 8px; gap: 8px; }
  body.account-page .account-section-nav a { font-size: 12px; }
  body.account-page .account-view, body.account-page .account-controls-section, body.account-page .relationship-section { scroll-margin-top: 20px; }
}
@media (max-width: 620px) {
  body.account-page .registration-email-row { grid-template-columns: minmax(0,1fr); }
  body.account-page .registration-email-row .quiet-button { justify-self: start; }
  body.account-page .page-shell { width: calc(100% - 36px); }
  body.account-page.account-page--signed-in .page-shell { width: 100%; }
  body.account-page .site-header { gap: 12px; min-height: 80px; }
  body.account-page .brand { font-size: 22px; }
  body.account-page .brand img { width: 28px; height: 28px; }
  body.account-page .auth-grid--single .panel { padding: 26px 22px; }
  body.account-page.account-page--signed-in .account-panel { padding-top: 26px; }
  body.account-page.account-page--signed-in .account-section-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.account-page :is(.identity-card,.profile-control-card,.delegate-control-card,.relationship-control-card,.connect-card,.binding-keys-card,.host-advanced-card,.account-overview) { padding: 20px; border-radius: 18px; }
  body.account-page .identity-card { gap: 20px; }
  body.account-page .account-view-heading--with-action { gap: 10px; }
  body.account-page .delegate-item { grid-template-columns: minmax(0,1fr); }
  body.account-page .client-management:not([open]) { grid-column: 1; grid-row: auto; }
  body.account-page .delegate-actions, body.account-page .relationship-item__actions { justify-content: flex-start; }
  body.account-page .connection-form { grid-template-columns: minmax(0,1fr); }
  body.account-page .client-picker { gap: 10px; }
  body.account-page .client-choice { min-width: 0; white-space: normal; font-size: 12px; }
  body.account-page .modal { width: calc(100% - 32px); max-height: calc(100dvh - 32px); }
  body.account-page .modal-actions { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  body.account-page .status:not(:empty) { max-height: 40dvh; overflow: auto; }
}
@media (max-height: 600px) {
  body.account-page .auth-grid--single { margin-top: 24px; }
  body.account-page .modal { max-height: calc(100dvh - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  body.account-page *, body.account-page *::before, body.account-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  body.account-page button:hover:not(:disabled), body.account-page button:active:not(:disabled) { transform: none; }
}

/* Reviewed website redesign: existing business DOM and actions retained. */

body.account-page.account-page--signed-in{
  --paper:#fff5e2; --card:#fffdfa; --ink:#29251f; --muted:#5f5549; --faint:#b3a794; --line:#e6dac5;
  --sky:#70c8ff; --pink:#ff91bd; --yellow:#ffda45; --mint:#8fe3c0; --peach:#ffb38a; --lilac:#d7d2ff;
  --sky-soft:#e5f4ff; --pink-soft:#fff0f6; --yellow-soft:#fff7da; --mint-soft:#e6f8ef; --peach-soft:#fff0e6;
  --deep:#155d87; --focus:#075a9c; --danger:#933640; --success:#275e43;
  --round:ui-rounded,'SF Pro Rounded','Arial Rounded MT Bold','PingFang SC','Microsoft YaHei UI',sans-serif;
  --mono:ui-monospace,'Cascadia Code','SFMono-Regular',Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --side:252px;
  interpolate-size:allow-keywords;
}
body.account-page.account-page--signed-in *{box-sizing:border-box}
body.account-page.account-page--signed-in{margin:0;min-height:100vh;color:var(--ink);background:var(--paper);font-family:'Segoe UI','PingFang SC','Microsoft YaHei UI',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;
  background-image:radial-gradient(rgb(41 37 31 / .07) 1px,transparent 1.3px);background-size:22px 22px}
body.account-page.account-page--signed-in h1,body.account-page.account-page--signed-in h2,body.account-page.account-page--signed-in h3,body.account-page.account-page--signed-in h4,body.account-page.account-page--signed-in p,body.account-page.account-page--signed-in dl,body.account-page.account-page--signed-in dd,body.account-page.account-page--signed-in ul{margin:0}
body.account-page.account-page--signed-in ul{padding:0;list-style:none}
body.account-page.account-page--signed-in a{color:inherit}
body.account-page.account-page--signed-in button,body.account-page.account-page--signed-in input{font:inherit;color:inherit}
body.account-page.account-page--signed-in [hidden]{display:none!important}
body.account-page.account-page--signed-in :is(a,button,summary,input):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
body.account-page.account-page--signed-in .visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body.account-page.account-page--signed-in svg.i{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- sidebar (same nodes as the live header) ---------- */
body.account-page.account-page--signed-in .site-header{position:fixed;z-index:60;inset:0 auto 0 0;width:var(--side);display:flex;flex-direction:column;padding:28px 14px 18px;border-right:2px solid var(--ink);background:var(--card);overflow-y:auto}
body.account-page.account-page--signed-in .brand{display:inline-flex;align-items:center;gap:10px;margin:0 10px 30px;text-decoration:none;font:800 24px/1 var(--round);letter-spacing:-.06em}
body.account-page.account-page--signed-in .brand svg{width:34px;height:34px;transition:transform .35s var(--spring)}
body.account-page.account-page--signed-in .brand:hover svg{transform:rotate(-8deg) scale(1.08)}
body.account-page.account-page--signed-in .account-section-nav{position:relative;display:grid;gap:6px}
body.account-page.account-page--signed-in .account-section-nav a{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-height:46px;padding:0 14px;border-radius:14px;color:var(--muted);font-size:14px;font-weight:700;text-decoration:none;transition:color .25s,background-color .2s}
body.account-page.account-page--signed-in .account-section-nav a:hover:not([aria-current]){background:var(--yellow-soft);color:var(--ink)}
body.account-page.account-page--signed-in .account-section-nav a[aria-current=page]{color:var(--ink)}
body.account-page.account-page--signed-in .account-section-nav a svg.i{transition:transform .35s var(--spring)}
body.account-page.account-page--signed-in .account-section-nav a[aria-current=page] svg.i{transform:scale(1.12) rotate(-6deg)}
body.account-page.account-page--signed-in .nav-ind{position:absolute;z-index:0;left:0;top:0;width:var(--w,0);height:var(--h,0);transform:translate(var(--x,0),var(--y,0));border:2px solid var(--ink);border-radius:14px;background:var(--sky);box-shadow:3px 3px 0 var(--ink);transition:transform .45s var(--spring),width .45s var(--ease),height .45s var(--ease)}
body.account-page.account-page--signed-in .account-nav{display:grid;gap:6px;margin-top:auto;padding-top:20px}
body.account-page.account-page--signed-in .account-nav__link,body.account-page.account-page--signed-in .account-nav__button{display:flex;align-items:center;gap:12px;min-height:42px;padding:0 14px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:13px;font-weight:650;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s}
body.account-page.account-page--signed-in .account-nav__link:hover,body.account-page.account-page--signed-in .account-nav__button:hover{background:var(--yellow-soft);color:var(--ink)}
body.account-page.account-page--signed-in .account-nav__logout:hover{background:var(--pink-soft);color:var(--danger)}
body.account-page.account-page--signed-in .account-nav__logout:hover svg.i{animation:account-nudge .5s ease}
@keyframes account-nudge{50%{transform:translateX(-3px)}}
body.account-page.account-page--signed-in .language-toggle{position:relative;display:inline-flex;align-self:start;width:max-content;margin:4px 14px;padding:3px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);font-size:12px;font-weight:750;cursor:pointer}
body.account-page.account-page--signed-in .language-toggle span{position:relative;z-index:1;padding:4px 10px;border-radius:999px}
body.account-page.account-page--signed-in .language-toggle i{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--yellow);transition:transform .3s var(--spring)}
body.account-page.account-page--signed-in .language-toggle[data-locale=en] i{transform:translateX(100%)}
body.account-page.account-page--signed-in .language-toggle span[aria-hidden]{display:none}

/* ---------- main ---------- */
body.account-page.account-page--signed-in #mainContent{min-width:0;min-height:100vh;margin-left:var(--side);padding:40px clamp(24px,4vw,56px) 40px}
body.account-page.account-page--signed-in .account-panel,body.account-page.account-page--signed-in .mocknote{width:min(1000px,100%);margin-inline:auto}
body.account-page.account-page--signed-in .account-view{scroll-margin-top:24px}
body.account-page.account-page--signed-in .account-view:focus{outline:none}
body.account-page.account-page--signed-in .account-view-heading{margin-bottom:22px}
body.account-page.account-page--signed-in .account-view-heading--with-action{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
body.account-page.account-page--signed-in .account-view-heading h2{font:800 clamp(28px,3vw,38px)/1.15 var(--round);letter-spacing:-.04em}
body.account-page.account-page--signed-in .account-view-heading h2 em{font-style:normal;background:linear-gradient(var(--mk,var(--yellow)),var(--mk,var(--yellow))) no-repeat 0 92%/0% 30%}
body.account-page.account-page--signed-in .account-view.enter .account-view-heading h2 em{animation:account-mark .7s var(--ease) .25s forwards}
body.account-page.account-page--signed-in .account-view:not(.enter) .account-view-heading h2 em{background-size:100% 30%}
@keyframes account-mark{from{background-size:0% 30%}to{background-size:100% 30%}}
body.account-page.account-page--signed-in .account-view-heading p{max-width:620px;margin-top:8px;color:var(--muted);font-size:14px}
body.account-page.account-page--signed-in .account-view.enter>*{animation:account-rise .6s var(--ease) both calc(var(--i,0) * 70ms)}
@keyframes account-rise{from{opacity:0;transform:translateY(14px)}}
body.account-page.account-page--signed-in .text-button{text-decoration:none;display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 15px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background-color .2s,transform .15s var(--ease),box-shadow .15s var(--ease)}
body.account-page.account-page--signed-in .text-button:hover:not(:disabled){background:var(--yellow-soft);transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink)}
body.account-page.account-page--signed-in .text-button:disabled{opacity:.55;cursor:default}
body.account-page.account-page--signed-in .text-button svg.i{width:16px;height:16px}
body.account-page.account-page--signed-in .text-button.spin svg.i{animation:account-spin .8s var(--ease)}
@keyframes account-spin{to{transform:rotate(360deg)}}
body.account-page.account-page--signed-in .card{position:relative;border:2px solid var(--ink);border-radius:26px;background:var(--card);box-shadow:5px 5px 0 var(--ink);padding:26px}
body.account-page.account-page--signed-in .card h3{font:800 20px/1.3 var(--round);letter-spacing:-.02em}
body.account-page.account-page--signed-in .card-sub{margin-top:4px;color:var(--muted);font-size:13.5px}
body.account-page.account-page--signed-in .chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);font-size:12px;font-weight:750;white-space:nowrap}
body.account-page.account-page--signed-in .chip::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
body.account-page.account-page--signed-in .chip[data-state=active]{background:var(--mint-soft);color:var(--success)}
body.account-page.account-page--signed-in .chip[data-state=active]::before{animation:account-ping 2.4s ease-out 2}
@keyframes account-ping{0%{box-shadow:0 0 0 0 rgb(39 94 67 / .45)}70%,100%{box-shadow:0 0 0 7px rgb(39 94 67 / 0)}}
body.account-page.account-page--signed-in .chip[data-state=paused]{background:var(--yellow-soft);color:#7a5a00}
body.account-page.account-page--signed-in .chip:is([data-state=pending_binding],[data-state=expired]){background:var(--peach-soft);color:#8a3f12}
body.account-page.account-page--signed-in .chip:is([data-state=ended],[data-state=revoked]){background:#f1ebe0;color:var(--muted);border-style:dashed}
body.account-page.account-page--signed-in .chip[data-state=blocked]{background:var(--pink-soft);color:var(--danger)}

/* buttons */
body.account-page.account-page--signed-in .primary-button,body.account-page.account-page--signed-in .quiet-button,body.account-page.account-page--signed-in .danger-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 20px;border:2px solid var(--ink);border-radius:999px;font-size:14px;font-weight:750;cursor:pointer;white-space:nowrap;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background-color .2s}
body.account-page.account-page--signed-in .primary-button{background:var(--sky);box-shadow:3px 3px 0 var(--ink)}
body.account-page.account-page--signed-in .quiet-button{background:var(--card);box-shadow:3px 3px 0 var(--ink)}
body.account-page.account-page--signed-in .danger-button{min-height:38px;padding:6px 15px;border-width:1.5px;background:var(--card);color:var(--danger);font-size:13px}
body.account-page.account-page--signed-in :is(.primary-button,.quiet-button):hover:not(:disabled){transform:translate(-1px,-2px);box-shadow:4px 5px 0 var(--ink)}
body.account-page.account-page--signed-in .quiet-button:hover:not(:disabled){background:var(--yellow-soft)}
body.account-page.account-page--signed-in .danger-button:hover:not(:disabled){background:var(--pink-soft);border-color:var(--danger)}
body.account-page.account-page--signed-in :is(.primary-button,.quiet-button,.danger-button):active:not(:disabled){transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
body.account-page.account-page--signed-in :is(.primary-button,.quiet-button,.danger-button):disabled{cursor:default;opacity:.6;box-shadow:none;border-style:dashed}
body.account-page.account-page--signed-in .primary-button.busy:disabled,body.account-page.account-page--signed-in .quiet-button.busy:disabled,body.account-page.account-page--signed-in .danger-button.busy:disabled{opacity:1;cursor:progress;background-image:repeating-linear-gradient(-45deg,rgb(255 255 255 / .5) 0 10px,transparent 10px 20px);background-size:28px 28px;animation:account-barber .8s linear infinite}
@keyframes account-barber{to{background-position:28px 0}}
body.account-page.account-page--signed-in .eye-button{display:grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--ink);border-radius:12px;background:var(--card);cursor:pointer;transition:background-color .2s}
body.account-page.account-page--signed-in .eye-button:hover:not(:disabled){background:var(--sky-soft)}
body.account-page.account-page--signed-in .eye-button[aria-pressed=true]{background:var(--sky-soft)}
body.account-page.account-page--signed-in .eye-button svg{width:20px;height:20px;animation:account-flip .35s var(--spring)}
@keyframes account-flip{from{transform:rotateX(90deg) scale(.6)}}
body.account-page.account-page--signed-in input.field{width:100%;min-height:48px;padding:11px 15px;border:2px solid var(--ink);border-radius:15px;background:#fff;font-size:15px;outline:none;transition:border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease)}
body.account-page.account-page--signed-in input.field::placeholder{color:var(--faint)}
body.account-page.account-page--signed-in input.field:focus{border-color:var(--focus);box-shadow:4px 4px 0 var(--sky);transform:translate(-2px,-2px)}
body.account-page.account-page--signed-in input.field[aria-invalid=true]{border-color:var(--danger);background:#fff4f6;box-shadow:4px 4px 0 var(--pink);animation:account-shake .42s ease}
body.account-page.account-page--signed-in input.field:disabled{background:#f6efe2;border-style:dashed}
@keyframes account-shake{20%{translate:-7px 0}40%{translate:6px 0}60%{translate:-4px 0}80%{translate:2px 0}}
body.account-page.account-page--signed-in input.mono{font-family:var(--mono);font-size:14px}

/* ---------- overview ---------- */
body.account-page.account-page--signed-in .identity-card{--rx:0deg;--ry:0deg;--mx:50%;padding:0;overflow:hidden;background:var(--sky-soft);transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease);will-change:transform}
body.account-page.account-page--signed-in .identity-card.tilting{transition:transform .08s linear}
body.account-page.account-page--signed-in .identity-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgb(41 37 31 / .09) 1.2px,transparent 1.5px) 0 0/18px 18px}
body.account-page.account-page--signed-in .identity-card::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgb(255 255 255 / .55) 45%,rgb(255 145 189 / .18) 52%,rgb(112 200 255 / .2) 58%,transparent 70%) var(--mx) 0/250% 100% no-repeat;mix-blend-mode:soft-light;opacity:.9}
body.account-page.account-page--signed-in .identity-card__summary{position:relative;display:flex;align-items:center;gap:26px;padding:30px 32px 26px}
body.account-page.account-page--signed-in .identity-card__mark{position:relative;inset:auto;opacity:1;width:118px;height:118px;flex:0 0 118px;filter:drop-shadow(4px 5px 0 rgb(41 37 31 / .9));animation:account-bob 4.5s ease-in-out infinite}
@keyframes account-bob{50%{transform:translateY(-6px) rotate(-3deg)}}
body.account-page.account-page--signed-in .identity-card__mark .lid{transform-box:fill-box;transform-origin:center;transition:transform .16s ease}
body.account-page.account-page--signed-in .identity-card__mark.blink .lid{transform:scaleY(.1)}
body.account-page.account-page--signed-in .identity-label{display:inline-block;padding:2px 10px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);font-size:11px;font-weight:800;letter-spacing:.1em}
body.account-page.account-page--signed-in #identityTitle{margin:10px 0 6px;font:800 clamp(38px,5vw,54px)/1 var(--round);letter-spacing:-.04em}
body.account-page.account-page--signed-in .identity-copy{color:var(--muted);font-size:14px}
body.account-page.account-page--signed-in .identity-card__identifier{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 32px 24px;border-top:2px dashed rgb(41 37 31 / .35);background:var(--card)}
body.account-page.account-page--signed-in .identity-card__identifier::before,body.account-page.account-page--signed-in .identity-card__identifier::after{content:'';position:absolute;top:-15px;width:28px;height:28px;border:2px solid var(--ink);border-radius:50%;background:var(--paper)}
body.account-page.account-page--signed-in .identity-card__identifier::before{left:-16px}body.account-page.account-page--signed-in .identity-card__identifier::after{right:-16px}
body.account-page.account-page--signed-in .hellolynk-id{display:inline-block;margin-top:8px;font:700 clamp(17px,2vw,22px)/1.3 var(--mono);letter-spacing:-.01em;overflow-wrap:anywhere}
body.account-page.account-page--signed-in .identity-copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px;min-width:0}
body.account-page.account-page--signed-in .identity-copy-row .hellolynk-id{min-width:0;margin:0;white-space:normal;user-select:all}
body.account-page.account-page--signed-in #copyHelloLynkIdButton{flex-shrink:0}
body.account-page.account-page--signed-in #hellolynkIdHelp{max-width:620px;font-size:15px;font-weight:650;line-height:1.6}
body.account-page.account-page--signed-in .hellolynk-id .ty{display:inline-block;vertical-align:bottom}
body.account-page.account-page--signed-in .typing .hellolynk-id .ty{max-width:calc(var(--n,25) * 1ch + 1px);overflow:hidden;white-space:nowrap;animation:account-typing 1.3s steps(var(--n,25)) .45s both}
body.account-page.account-page--signed-in .typing .hellolynk-id::after{content:'';display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-3px;background:var(--ink);animation:account-caret .8s steps(1) 4 1.5s both}
@keyframes account-typing{from{max-width:0}}
@keyframes account-caret{0%{opacity:1}50%{opacity:0}100%{opacity:0}}
body.account-page.account-page--signed-in .connection-state{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border:1.5px solid var(--ink);border-radius:16px;background:var(--mint-soft);color:var(--success);font-size:13px;font-weight:750;max-width:260px}
body.account-page.account-page--signed-in .connection-state::before{content:'';width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:currentColor;animation:account-ping 2.4s ease-out 2}
body.account-page.account-page--signed-in .account-overview{margin-top:26px}
body.account-page.account-page--signed-in .account-overview h3{margin-bottom:14px}
body.account-page.account-page--signed-in .account-overview__row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1.5px solid var(--ink);border-radius:18px;background:var(--yellow-soft)}
body.account-page.account-page--signed-in .account-overview__label{display:flex;align-items:center;gap:14px;font-size:15px}
body.account-page.account-page--signed-in .tile-ico{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:2px solid var(--ink);border-radius:14px;background:var(--card);box-shadow:2px 2px 0 var(--ink)}
body.account-page.account-page--signed-in .account-overview__value{display:flex;align-items:center;gap:14px}
body.account-page.account-page--signed-in .face-stack{display:flex}
body.account-page.account-page--signed-in .face-stack b{display:grid;place-items:center;width:34px;height:34px;margin-left:-8px;border:2px solid var(--ink);border-radius:11px;background:var(--c);font:800 11px/1 var(--round);box-shadow:2px 2px 0 var(--ink);animation:account-rise .5s var(--spring) both calc(var(--k) * 80ms + .4s)}
body.account-page.account-page--signed-in #clientCount{font:800 40px/1 var(--round);font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* ---------- settings ---------- */
body.account-page.account-page--signed-in .profile-control-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start}
body.account-page.account-page--signed-in .profile-control-card__body>p#nicknameSearchDescription{margin-top:6px;color:var(--muted);font-size:14px;max-width:560px}
body.account-page.account-page--signed-in .profile-display-name{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:6px 14px;border:1.5px dashed rgb(41 37 31 / .45);border-radius:12px;background:var(--yellow-soft);font-size:14px}
body.account-page.account-page--signed-in .profile-display-name strong{font:800 16px/1 var(--round)}
body.account-page.account-page--signed-in .profile-display-name strong.bump{animation:account-bump .5s var(--spring)}
@keyframes account-bump{40%{transform:scale(1.25) rotate(-4deg)}}
body.account-page.account-page--signed-in .profile-name-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;margin-top:20px;max-width:620px}
body.account-page.account-page--signed-in .profile-name-form label{grid-column:1/-1;font-size:13px;font-weight:750}
body.account-page.account-page--signed-in .profile-name-form small{grid-column:1/-1;grid-row:3;color:var(--muted);font-size:12.5px}
body.account-page.account-page--signed-in .profile-name-form .quiet-button{min-height:48px}
body.account-page.account-page--signed-in .profile-name-status{grid-column:1/-1;font-size:13px;font-weight:650}
body.account-page.account-page--signed-in .profile-name-status:empty{display:none}
body.account-page.account-page--signed-in .profile-name-status[data-tone=error]{color:var(--danger)}
body.account-page.account-page--signed-in .profile-name-status[data-tone=success]{color:var(--success)}
body.account-page.account-page--signed-in .switch-button{position:relative;display:inline-flex;align-items:center;min-width:118px;min-height:44px;padding:0 16px 0 50px;border:2px solid var(--ink);border-radius:999px;background:#efe6d6;box-shadow:3px 3px 0 var(--ink);font-size:13.5px;font-weight:800;cursor:pointer;transition:background-color .3s,padding .35s var(--ease)}
body.account-page.account-page--signed-in .switch-button::after{content:'';position:absolute;left:5px;top:50%;width:32px;height:32px;margin-top:-16px;border:2px solid var(--ink);border-radius:50%;background:var(--card);transition:left .45s var(--spring),background-color .3s}
body.account-page.account-page--signed-in .switch-button[aria-checked=true]{padding:0 50px 0 16px;background:var(--mint)}
body.account-page.account-page--signed-in .switch-button[aria-checked=true]::after{left:calc(100% - 37px);background:#fff}
body.account-page.account-page--signed-in .switch-button:disabled{cursor:progress;opacity:.7}
body.account-page.account-page--signed-in .switch-button.pop::after{animation:account-knob .5s var(--spring)}
@keyframes account-knob{40%{transform:scale(1.2)}}

/* ---------- relationships: contact list ---------- */
body.account-page.account-page--signed-in .relationship-section__note{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding:12px 16px;border:1.5px solid var(--ink);border-radius:16px;background:var(--sky-soft);font-size:14px;font-weight:600}
body.account-page.account-page--signed-in .relationship-section__note svg.i{color:var(--deep)}
body.account-page.account-page--signed-in .people-card{padding:0;overflow:hidden}
body.account-page.account-page--signed-in .people-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:16px 20px}
body.account-page.account-page--signed-in .people-tabs{display:inline-flex;padding:4px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper)}
body.account-page.account-page--signed-in .people-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--muted);font-size:13.5px;font-weight:750;cursor:pointer;transition:background-color .2s,color .2s}
body.account-page.account-page--signed-in .people-tabs button:hover:not([aria-selected=true]){color:var(--ink)}
body.account-page.account-page--signed-in .people-tabs button[aria-selected=true]{background:var(--ink);color:var(--paper)}
body.account-page.account-page--signed-in .people-tabs .count{min-width:24px;padding:1px 7px;border-radius:999px;background:rgb(41 37 31 / .08);font:750 11.5px/1.5 var(--round);font-variant-numeric:tabular-nums;text-align:center}
body.account-page.account-page--signed-in .people-tabs [aria-selected=true] .count{background:rgb(255 255 255 / .2)}
body.account-page.account-page--signed-in .people-search{position:relative;flex:1 1 240px;max-width:380px}
body.account-page.account-page--signed-in .people-search svg{position:absolute;left:14px;top:50%;width:17px;height:17px;margin-top:-8.5px;color:var(--muted);pointer-events:none}
body.account-page.account-page--signed-in .people-search input{width:100%;min-height:42px;padding:8px 14px 8px 40px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;font-size:14px;outline:none;transition:box-shadow .2s,border-color .2s}
body.account-page.account-page--signed-in .people-search input::placeholder{color:var(--faint)}
body.account-page.account-page--signed-in .people-search input:focus{border-color:var(--focus);box-shadow:3px 3px 0 var(--sky)}
body.account-page.account-page--signed-in .people-search input::-webkit-search-cancel-button{cursor:pointer}
body.account-page.account-page--signed-in .people-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;min-height:46px;padding:7px 20px;border-block:1.5px solid var(--line);background:var(--paper);color:var(--muted);font-size:12.5px}
body.account-page.account-page--signed-in .people-filters{display:flex;flex-wrap:wrap;gap:6px}
body.account-page.account-page--signed-in .people-filters button{min-height:30px;padding:0 12px;border:1.5px solid rgb(41 37 31 / .22);border-radius:999px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:700;cursor:pointer;transition:background-color .2s,border-color .2s}
body.account-page.account-page--signed-in .people-filters button:hover{border-color:var(--ink)}
body.account-page.account-page--signed-in .people-filters button[aria-pressed=true]{border-color:var(--ink);background:var(--yellow)}
body.account-page.account-page--signed-in .people-filters b{margin-left:5px;color:var(--muted);font-variant-numeric:tabular-nums}
body.account-page.account-page--signed-in .people-total{font-variant-numeric:tabular-nums}
body.account-page.account-page--signed-in .people-body{display:grid;grid-template-columns:minmax(0,1fr) auto}
body.account-page.account-page--signed-in .people-scroll{position:relative;min-height:220px;max-height:clamp(320px,calc(100vh - 380px),600px);overflow:auto;overscroll-behavior:contain}
body.account-page.account-page--signed-in .people-scroll:focus-visible{outline-offset:-3px}
body.account-page.account-page--signed-in .rel-group{contain:style}
body.account-page.account-page--signed-in .group-head{position:sticky;top:0;z-index:1;padding:3px 20px;border-bottom:1px solid var(--line);background:rgb(255 248 233 / .94);backdrop-filter:blur(4px);color:var(--muted);font:800 12px/1.7 var(--round);letter-spacing:.08em}
body.account-page.account-page--signed-in .relationship-list{margin:0}
body.account-page.account-page--signed-in .relationship-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;grid-template-areas:"av who meta act";align-items:center;gap:0 14px;min-height:58px;padding:8px 20px;border-bottom:1px solid var(--line);transition:background-color .15s}
body.account-page.account-page--signed-in .relationship-item:hover,body.account-page.account-page--signed-in .relationship-item:focus-within{background:var(--yellow-soft)}
body.account-page.account-page--signed-in .relationship-item .av{grid-area:av;display:grid;place-items:center;width:34px;height:34px;border:1.5px solid var(--ink);border-radius:50%;background:var(--c);font:800 14px/1 var(--round)}
body.account-page.account-page--signed-in .relationship-item[data-state=ended] .av,body.account-page.account-page--signed-in .relationship-item[data-state=blocked] .av{filter:grayscale(1);opacity:.55}
body.account-page.account-page--signed-in .relationship-person{grid-area:who;min-width:0}
body.account-page.account-page--signed-in .relationship-person__name{display:flex;align-items:center;gap:8px;min-width:0;font-size:14.5px;font-weight:750;line-height:1.35}
body.account-page.account-page--signed-in .relationship-person__name .nm{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.account-page.account-page--signed-in .relationship-person__id{display:block;overflow:hidden;color:var(--muted);font:12px/1.4 var(--mono);white-space:nowrap;text-overflow:ellipsis}
body.account-page.account-page--signed-in .relationship-item .relationship-state{flex:0 0 auto;padding:0 8px;font-size:11px}
body.account-page.account-page--signed-in .relationship-item[data-state=ended] .relationship-person__name .nm{color:var(--muted)}
body.account-page.account-page--signed-in .relationship-meta{grid-area:meta;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
body.account-page.account-page--signed-in .relationship-item__actions{grid-area:act;display:flex;justify-content:flex-end;min-width:86px}
body.account-page.account-page--signed-in .relationship-item__actions .danger-button{min-height:30px;padding:2px 12px;font-size:12px;opacity:0;transition:opacity .15s,background-color .2s}
body.account-page.account-page--signed-in .relationship-item:is(:hover,:focus-within) .danger-button,body.account-page.account-page--signed-in .relationship-item .danger-button.busy{opacity:1}
@media (hover:none),(max-width:600px){body.account-page.account-page--signed-in .relationship-item__actions .danger-button{opacity:1}}
body.account-page.account-page--signed-in mark{padding:0 1px;border-radius:3px;background:var(--yellow);color:inherit}
body.account-page.account-page--signed-in .az{display:flex;flex-direction:column;justify-content:center;padding:6px 5px;border-left:1px solid var(--line)}
body.account-page.account-page--signed-in .az button{flex:0 1 19px;min-height:11px;width:22px;padding:0;border:0;border-radius:6px;background:none;color:var(--ink);font:800 10.5px/1 var(--round);cursor:pointer}
body.account-page.account-page--signed-in .az button:disabled{color:rgb(41 37 31 / .2);cursor:default}
body.account-page.account-page--signed-in .az button:hover:not(:disabled){background:var(--sky-soft)}
body.account-page.account-page--signed-in .az button.cur{background:var(--ink);color:var(--paper)}
body.account-page.account-page--signed-in .people-empty{margin:28px 20px;padding:22px;border:2px dashed rgb(41 37 31 / .3);border-radius:18px;color:var(--muted);text-align:center;font-size:14px}
body.account-page.account-page--signed-in .devices-empty,body.account-page.account-page--signed-in .delegate-empty,body.account-page.account-page--signed-in .binding-keys-empty{padding:22px;border:2px dashed rgb(41 37 31 / .3);border-radius:18px;color:var(--muted);text-align:center;font-size:14px}

/* ---------- clients ---------- */
body.account-page.account-page--signed-in .connected-section__heading{margin-bottom:18px}
body.account-page.account-page--signed-in .delegate-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
body.account-page.account-page--signed-in .delegate-item{padding:16px 18px;border:1.5px solid var(--ink);border-radius:20px;background:#fff;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
body.account-page.account-page--signed-in .delegate-item:hover{transform:translateY(-2px);box-shadow:3px 4px 0 var(--ink)}
body.account-page.account-page--signed-in .delegate-summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ico name state" "ico meta meta";gap:4px 12px;align-items:center}
body.account-page.account-page--signed-in .client-ico{grid-area:ico;align-self:start;display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--ink);border-radius:14px;background:var(--c);box-shadow:2px 2px 0 var(--ink);font:800 13px/1 var(--round)}
body.account-page.account-page--signed-in .delegate-item:has([data-state=paused]) .client-ico{filter:saturate(.35)}
body.account-page.account-page--signed-in .delegate-name{grid-area:name;min-width:0;font-weight:800;font-size:15px;overflow-wrap:anywhere}
body.account-page.account-page--signed-in .delegate-state{grid-area:state}
body.account-page.account-page--signed-in .delegate-meta,body.account-page.account-page--signed-in .binding-key-meta,body.account-page.account-page--signed-in .device-meta{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);font-size:12.5px}
body.account-page.account-page--signed-in .delegate-meta{grid-area:meta}
body.account-page.account-page--signed-in details>summary{list-style:none;cursor:pointer}
body.account-page.account-page--signed-in details>summary::-webkit-details-marker{display:none}
body.account-page.account-page--signed-in .client-management{margin-top:12px;border-top:1.5px dashed rgb(41 37 31 / .25)}
body.account-page.account-page--signed-in .client-management>summary{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:750;transition:background-color .2s}
body.account-page.account-page--signed-in .client-management>summary:hover{background:var(--yellow-soft)}
body.account-page.account-page--signed-in .client-management>summary::after,body.account-page.account-page--signed-in .device-details>summary::after{content:'';width:9px;height:9px;margin-left:2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--spring)}
body.account-page.account-page--signed-in .client-management[open]>summary::after,body.account-page.account-page--signed-in .device-details[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
body.account-page.account-page--signed-in details::details-content{block-size:0;overflow:hidden;transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}
body.account-page.account-page--signed-in details[open]::details-content{block-size:auto}
body.account-page.account-page--signed-in .client-device-list{display:grid;gap:10px;margin-top:12px}
body.account-page.account-page--signed-in .device-item{padding:12px 14px;border:1.5px solid rgb(41 37 31 / .25);border-radius:14px;background:var(--paper)}
body.account-page.account-page--signed-in .device-main{display:flex;align-items:center;justify-content:space-between;gap:10px}
body.account-page.account-page--signed-in .device-name{display:flex;align-items:center;gap:8px;font-weight:750;font-size:14px}
body.account-page.account-page--signed-in .device-details>summary{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:var(--muted);font-size:12.5px;font-weight:700}
body.account-page.account-page--signed-in .device-details .device-meta{display:grid;gap:2px;margin:8px 0 10px}
body.account-page.account-page--signed-in .device-details .device-meta span{font-family:var(--mono);font-size:12px}
body.account-page.account-page--signed-in .client-management .device-meta:only-of-type{margin-top:10px}
body.account-page.account-page--signed-in .delegate-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:14px}
body.account-page.account-page--signed-in .delegate-actions .quiet-button{min-height:38px;padding:6px 15px;border-width:1.5px;font-size:13px;box-shadow:2px 2px 0 var(--ink)}
body.account-page.account-page--signed-in .connect-card{margin-top:24px}
body.account-page.account-page--signed-in .connect-card__body{display:flex;flex-direction:column;align-items:stretch;gap:18px;border-top:0;padding:0}
body.account-page.account-page--signed-in #connectionInstructionTitle{font:800 clamp(21px,2.4vw,26px)/1.3 var(--round)}
body.account-page.account-page--signed-in .connect-card__purpose{margin:0;color:var(--ink);font-size:16px;line-height:1.6}
body.account-page.account-page--signed-in .connection-next-steps{display:grid;gap:12px;margin:0;padding:20px 20px 20px 46px;border:2px solid var(--ink);border-radius:18px;background:var(--yellow-soft);color:var(--ink);font-size:clamp(17px,2vw,20px);line-height:1.55}
body.account-page.account-page--signed-in .connection-next-steps li{padding-left:4px}
body.account-page.account-page--signed-in .connection-next-steps li::marker{color:#9c3425;font-weight:850}
body.account-page.account-page--signed-in .connection-next-steps strong{font-weight:800}
body.account-page.account-page--signed-in #copyConnectionInstructionButton{white-space:normal;text-align:center;line-height:1.45}
body.account-page.account-page--signed-in .connection-instruction{grid-area:say;position:relative;padding:18px 20px;border:2px solid var(--ink);border-radius:22px 22px 22px 6px;background:var(--yellow-soft);font:700 15.5px/1.6 var(--round)}
body.account-page.account-page--signed-in .connection-instruction code{padding:1px 6px;border-radius:7px;background:#fff;font:700 13.5px var(--mono);box-shadow:inset 0 0 0 1.5px rgb(41 37 31 / .2)}
body.account-page.account-page--signed-in .connection-instruction::before{content:'';position:absolute;left:-2px;bottom:-12px;width:18px;height:12px;background:var(--ink);clip-path:polygon(0 0,100% 0,0 100%)}
body.account-page.account-page--signed-in #copyConnectionInstructionButton{grid-area:btn}
body.account-page.account-page--signed-in .connect-card .devices-note{grid-area:note;display:flex;align-items:center;gap:10px;margin-top:4px;color:var(--muted);font-size:13px}
body.account-page.account-page--signed-in .flow{display:flex;align-items:center;gap:6px}
body.account-page.account-page--signed-in .flow b{display:grid;place-items:center;width:30px;height:30px;border:1.5px solid var(--ink);border-radius:10px;background:var(--c);font:800 10px/1 var(--round)}
body.account-page.account-page--signed-in .flow i{width:26px;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 4px,transparent 4px 8px);animation:account-dash 1s linear 4}
@keyframes account-dash{to{background-position:8px 0}}
body.account-page.account-page--signed-in .copied{animation:account-copied .6s var(--spring)}
@keyframes account-copied{40%{transform:scale(1.06) rotate(-1.5deg)}}

/* ---------- advanced ---------- */
body.account-page.account-page--signed-in .client-picker{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:18px 0 22px}
body.account-page.account-page--signed-in .client-choice{display:grid;justify-items:center;gap:8px;padding:12px 6px 10px;border:1.5px solid var(--ink);border-radius:18px;background:#fff;font-size:12.5px;font-weight:750;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s}
body.account-page.account-page--signed-in .client-choice:hover{transform:translateY(-2px)}
body.account-page.account-page--signed-in .client-choice__icon{display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--ink);border-radius:13px;background:var(--c);font:800 12px/1 var(--round);transition:transform .35s var(--spring)}
body.account-page.account-page--signed-in .client-choice[aria-checked=true]{border-width:2px;background:var(--sky-soft);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-2px)}
body.account-page.account-page--signed-in .client-choice[aria-checked=true] .client-choice__icon{transform:rotate(-8deg) scale(1.08)}
body.account-page.account-page--signed-in .connection-form{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%;max-width:none;margin-top:0}
body.account-page.account-page--signed-in .connection-form label{display:grid;gap:2px}
body.account-page.account-page--signed-in .connection-form label strong{font-size:14px}
body.account-page.account-page--signed-in .connection-form label span,body.account-page.account-page--signed-in .host-id-help p{color:var(--muted);font-size:12.5px}
body.account-page.account-page--signed-in .host-id-help{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
body.account-page.account-page--signed-in .host-id-help .text-button{min-height:32px;padding:4px 12px;font-size:12.5px}
body.account-page.account-page--signed-in #hostIdPromptStatus{flex-basis:100%;color:var(--success);font-weight:650}
body.account-page.account-page--signed-in #hostIdPromptStatus:empty{display:none}
body.account-page.account-page--signed-in .connect-button{margin-top:18px}
body.account-page.account-page--signed-in .binding-keys-card{margin-top:24px}
body.account-page.account-page--signed-in .binding-keys-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}
body.account-page.account-page--signed-in .binding-keys-note{margin-top:4px;color:var(--muted);font-size:13px;max-width:560px}
body.account-page.account-page--signed-in .binding-key-list{display:grid;gap:12px}
body.account-page.account-page--signed-in .binding-key-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 18px;align-items:center;padding:16px 18px;border:1.5px solid var(--ink);border-radius:18px;background:#fff}
body.account-page.account-page--signed-in .binding-key-summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center}
body.account-page.account-page--signed-in .binding-key-name{font-weight:800;font-size:15px}
body.account-page.account-page--signed-in .binding-key-state{justify-self:start}
body.account-page.account-page--signed-in .binding-key-meta{grid-column:1/-1}
body.account-page.account-page--signed-in .binding-key-meta span{font-size:12.5px}
body.account-page.account-page--signed-in .binding-key-secret{grid-column:1/-1;margin-top:6px;padding:9px 12px;border-radius:12px;background:var(--paper);font:600 13px/1.5 var(--mono);color:var(--muted);overflow-wrap:anywhere;letter-spacing:.02em}
body.account-page.account-page--signed-in .binding-key-secret[data-visible=true]{background:#29251f;color:#ffe9a8;box-shadow:inset 0 0 0 2px var(--ink)}
body.account-page.account-page--signed-in .binding-key-actions{display:flex;align-items:center;gap:8px}
body.account-page.account-page--signed-in .key-copy-button{min-height:40px!important;padding:6px 14px!important;border-width:1.5px!important;font-size:13px!important;box-shadow:2px 2px 0 var(--ink)!important}
body.account-page.account-page--signed-in .host-advanced-card{margin-top:24px;border-style:dashed;box-shadow:none;background:transparent}
body.account-page.account-page--signed-in .host-advanced-card__heading{display:flex;align-items:center;gap:10px;margin-bottom:14px;font:800 18px/1.3 var(--round)}
body.account-page.account-page--signed-in .host-advanced-card__heading .tile-ico{width:36px;height:36px;flex-basis:36px;border-radius:11px;background:var(--peach-soft);box-shadow:none}
body.account-page.account-page--signed-in .host-advanced-card__content{display:grid;gap:12px;max-width:640px}
body.account-page.account-page--signed-in .host-recovery-field{display:grid;gap:6px}
body.account-page.account-page--signed-in .host-recovery-field>span{font-size:13px;font-weight:750}
body.account-page.account-page--signed-in .host-recovery-field small{color:var(--muted);font-size:12.5px}
body.account-page.account-page--signed-in .host-advanced-card .devices-note{color:var(--muted);font-size:13px}
body.account-page.account-page--signed-in .host-advanced-card .quiet-button{justify-self:start}
body.account-page.account-page--signed-in .host-credential-recovery{display:grid;justify-items:start;gap:10px;padding:14px 16px;border:1.5px solid var(--danger);border-radius:16px;background:var(--pink-soft)}
body.account-page.account-page--signed-in .host-advanced-card .host-credential-recovery .devices-note{color:var(--ink)}
body.account-page.account-page--signed-in .visually-hidden-select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
body.account-page.account-page--signed-in #hostIdPromptFallback{flex-basis:100%;border:1.5px dashed rgb(41 37 31 / .3);border-radius:14px;background:var(--paper)}
body.account-page.account-page--signed-in #hostIdPromptFallback summary{padding:8px 12px;font-size:12.5px;font-weight:750;cursor:pointer}
body.account-page.account-page--signed-in #hostIdPromptFallback textarea{display:block;width:calc(100% - 20px);margin:0 10px 10px;padding:10px 12px;border:1.5px solid var(--ink);border-radius:12px;background:#fff;font:12.5px/1.55 var(--mono);color:var(--ink);resize:vertical}

/* ---------- dialogs ---------- */
body.account-page.account-page--signed-in .modal{width:min(480px,calc(100% - 32px));padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
body.account-page.account-page--signed-in .modal::backdrop{background:rgb(41 37 31 / .35);backdrop-filter:blur(3px)}
body.account-page.account-page--signed-in .modal[open]{animation:account-pop .45s var(--spring)}
body.account-page.account-page--signed-in .modal[open]::backdrop{animation:account-fade .3s ease}
@keyframes account-pop{from{opacity:0;transform:translateY(16px) scale(.94)}}
@keyframes account-fade{from{opacity:0}}
body.account-page.account-page--signed-in .modal-card{display:grid;gap:14px;padding:26px;border:2px solid var(--ink);border-radius:26px;background:var(--card);box-shadow:6px 6px 0 var(--ink)}
body.account-page.account-page--signed-in .modal-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
body.account-page.account-page--signed-in .modal-heading h3{font:800 22px/1.25 var(--round)}
body.account-page.account-page--signed-in .modal .step{display:inline-block;margin-bottom:6px;padding:2px 10px;border:1.5px solid var(--ink);border-radius:999px;background:var(--yellow);font-size:11.5px;font-weight:800}
body.account-page.account-page--signed-in .icon-button{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border:1.5px solid var(--ink);border-radius:50%;background:var(--card);font-size:20px;line-height:1;cursor:pointer;transition:transform .3s var(--spring),background-color .2s}
body.account-page.account-page--signed-in .icon-button:hover{background:var(--pink-soft);transform:rotate(90deg)}
body.account-page.account-page--signed-in .modal-description{color:var(--muted);font-size:13.5px}
body.account-page.account-page--signed-in .modal label{display:grid;gap:6px;font-size:13px;font-weight:750}
body.account-page.account-page--signed-in .modal-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:4px}
body.account-page.account-page--signed-in .binding-key{display:block;padding:14px 16px;border:2px solid var(--ink);border-radius:16px;background:#29251f;color:#ffe9a8;font:600 14px/1.6 var(--mono);overflow-wrap:anywhere}
body.account-page.account-page--signed-in .created-key-name,body.account-page.account-page--signed-in .key-created-at{font-size:13px;color:var(--muted)}
body.account-page.account-page--signed-in .key-warning{padding:10px 14px;border-radius:12px;background:var(--yellow-soft);font-size:13px;font-weight:650}
body.account-page.account-page--signed-in #createKeyStatus{color:var(--danger);font-weight:650}

/* ---------- device confirmation ---------- */
body.account-page.account-page--signed-in .device-authorization{width:min(560px,100%);margin:clamp(24px,7vh,72px) auto 0;padding:30px 32px 28px;border:2px solid var(--ink);border-radius:30px;background:var(--card);box-shadow:6px 6px 0 var(--ink);animation:account-pop .5s var(--spring)}
body.account-page.account-page--signed-in .link-art{display:flex;align-items:center;justify-content:center;gap:0;margin:2px 0 22px}
body.account-page.account-page--signed-in .link-art .node{display:grid;place-items:center;width:76px;height:76px;border:2px solid var(--ink);border-radius:24px;background:var(--sky-soft);box-shadow:3px 3px 0 var(--ink)}
body.account-page.account-page--signed-in .link-art .node svg{width:40px;height:40px}
body.account-page.account-page--signed-in .link-art .node--me{background:var(--yellow-soft)}
body.account-page.account-page--signed-in .link-art .wire{position:relative;width:min(150px,28vw);height:4px;margin:0 -2px;background:repeating-linear-gradient(90deg,var(--ink) 0 7px,transparent 7px 13px);animation:account-dash 1s linear 4 forwards}
body.account-page.account-page--signed-in .link-art .wire::after{content:'';position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
body.account-page.account-page--signed-in .link-art .ok{z-index:1;position:absolute;left:50%;top:50%;display:grid;place-items:center;width:34px;height:34px;margin:-17px;border:2px solid var(--ink);border-radius:50%;background:var(--mint);transform:scale(0);transition:transform .5s var(--spring) .55s}
body.account-page.account-page--signed-in .link-art .ok svg{width:18px;height:18px}
body.account-page.account-page--signed-in .device-authorization.done .wire{animation:none}
body.account-page.account-page--signed-in .device-authorization.done .wire::after{transform:scaleX(1)}
body.account-page.account-page--signed-in .device-authorization.done .ok{transform:scale(1)}
body.account-page.account-page--signed-in .device-authorization.done .node{animation:account-bump .6s var(--spring) .6s}
body.account-page.account-page--signed-in .device-authorization h2{text-align:center;font:800 clamp(24px,3vw,30px)/1.2 var(--round);letter-spacing:-.03em}
body.account-page.account-page--signed-in .device-authorization__summary{display:grid;gap:0;margin:20px 0 16px;border:1.5px solid var(--ink);border-radius:18px;background:#fff;overflow:hidden}
body.account-page.account-page--signed-in .device-authorization__summary>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px 16px}
body.account-page.account-page--signed-in .device-authorization__summary>div+div{border-top:1.5px dashed rgb(41 37 31 / .25)}
body.account-page.account-page--signed-in .device-authorization__summary dt{color:var(--muted);font-size:13px}
body.account-page.account-page--signed-in .device-authorization__summary dd{min-width:0;font-weight:700;font-size:14px;overflow-wrap:anywhere}
body.account-page.account-page--signed-in #deviceAuthorizationAccount{font-family:var(--mono);font-size:13px}
body.account-page.account-page--signed-in .device-authorization__status{display:flex;gap:10px;padding:12px 14px;border-radius:14px;background:var(--yellow-soft);font-size:13.5px;line-height:1.6}
body.account-page.account-page--signed-in .device-authorization__status::before{content:'!';display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;margin-top:1px;border-radius:50%;background:var(--ink);color:var(--yellow);font-weight:900;font-size:12px}
body.account-page.account-page--signed-in .device-authorization.done .device-authorization__status{background:var(--mint-soft);color:var(--success);font-weight:700}
body.account-page.account-page--signed-in .device-authorization.done .device-authorization__status::before{content:'✓';background:var(--success);color:#fff}
body.account-page.account-page--signed-in .device-authorization__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:20px}
body.account-page.account-page--signed-in .device-authorization__actions .primary-button{min-width:170px;min-height:50px}

/* ---------- bootstrap, status, mock ---------- */
body.account-page.account-page--signed-in .session-bootstrap{display:grid;justify-items:center;gap:10px;width:min(420px,100%);margin:clamp(40px,14vh,140px) auto 0;padding:34px 28px;border:2px solid var(--ink);border-radius:26px;background:var(--card);box-shadow:5px 5px 0 var(--ink);text-align:center}
body.account-page.account-page--signed-in .session-bootstrap svg{width:64px;height:64px;animation:account-bob 1.2s ease-in-out infinite}
body.account-page.account-page--signed-in .session-bootstrap strong{font:800 18px/1.3 var(--round)}
body.account-page.account-page--signed-in .session-bootstrap p{font-size:13px;color:var(--muted)}
body.account-page.account-page--signed-in .shimmer{width:180px;height:8px;margin-top:6px;border-radius:4px;background:linear-gradient(90deg,#efe4d1 0 30%,var(--yellow) 45%,#efe4d1 60% 100%) 0 0/300% 100%;animation:account-shim 1.1s linear infinite}
@keyframes account-shim{from{background-position:100% 0}to{background-position:-50% 0}}
body.account-page.account-page--signed-in .status{position:sticky;z-index:20;bottom:20px;display:flex;justify-content:center;margin-top:26px;pointer-events:none}
body.account-page.account-page--signed-in .status span{display:inline-flex;align-items:center;gap:9px;max-width:min(640px,100%);padding:9px 18px 9px 10px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);box-shadow:3px 3px 0 var(--ink);font-size:13.5px;font-weight:700;animation:account-drop .45s var(--spring)}
@keyframes account-drop{from{opacity:0;transform:translateY(10px) scale(.96)}}
body.account-page.account-page--signed-in .status span::before{content:'';width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2329251f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.6 2.4L12 5.5'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:inset 0 0 0 1.5px var(--ink)}
body.account-page.account-page--signed-in .status span[data-tone=error]{background:#fff0f3;color:#7a1f2b}
body.account-page.account-page--signed-in .status span[data-tone=error]::before{content:'!';display:grid;place-items:center;background:var(--danger);color:#fff;font-weight:900;font-size:12px;box-shadow:none}
body.account-page.account-page--signed-in .status span[data-tone=busy]::before{background:conic-gradient(var(--ink) 0 25%,transparent 0);-webkit-mask:radial-gradient(circle,transparent 5px,#000 5.5px);mask:radial-gradient(circle,transparent 5px,#000 5.5px);box-shadow:none;animation:account-spin .8s linear infinite}
body.account-page.account-page--signed-in .mocknote{margin-top:20px;color:var(--muted);font-size:12px;text-align:center}

/* device confirmation hides the section sidebar, like the live page */
body.account-page.account-page--signed-in .account-page--device-confirmation .site-header{inset:0 0 auto;width:auto;flex-direction:row;align-items:center;padding:14px clamp(16px,4vw,48px);border-right:0;border-bottom:2px solid var(--ink)}
body.account-page.account-page--signed-in .account-page--device-confirmation .brand{margin:0}
body.account-page.account-page--signed-in .account-page--device-confirmation .account-nav{display:flex;align-items:center;margin:0 0 0 auto;padding:0}
body.account-page.account-page--signed-in .account-page--device-confirmation .language-toggle{margin:0 6px}
body.account-page.account-page--signed-in .account-page--device-confirmation #mainContent{margin-left:0;padding-top:96px}

body.account-page.account-page--signed-in.calm *,body.account-page.account-page--signed-in.calm *::before,body.account-page.account-page--signed-in.calm *::after{animation:none!important;transition:none!important}

@media (max-width:1100px){
  body.account-page.account-page--signed-in .client-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:980px){
  body.account-page.account-page--signed-in .delegate-list{grid-template-columns:1fr}
}
@media (max-width:900px){
  body.account-page.account-page--signed-in .site-header{position:sticky;inset:0 auto auto;width:auto;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px 12px;padding:10px 16px 10px;border-right:0;border-bottom:2px solid var(--ink);overflow:visible}
  body.account-page.account-page--signed-in .brand{margin:0;font-size:21px}body.account-page.account-page--signed-in .brand svg{width:30px;height:30px}
  body.account-page.account-page--signed-in .account-nav{grid-row:1;grid-column:2;display:flex;align-items:center;justify-content:flex-end;gap:2px;margin:0;padding:0}
  body.account-page.account-page--signed-in .account-nav__link,body.account-page.account-page--signed-in .account-nav__button{min-height:38px;padding:0 10px}
  body.account-page.account-page--signed-in .account-nav__link span,body.account-page.account-page--signed-in .account-nav__button span{display:none}
  body.account-page.account-page--signed-in .language-toggle{margin:0 4px;align-self:center}
  body.account-page.account-page--signed-in .account-section-nav{grid-row:2;grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  body.account-page.account-page--signed-in .account-section-nav a{flex-direction:column;justify-content:center;gap:3px;min-height:54px;padding:4px 2px;font-size:11.5px;text-align:center;line-height:1.2}
  body.account-page.account-page--signed-in #mainContent{min-height:0;margin-left:0;padding:24px 16px 96px}
  body.account-page.account-page--signed-in .account-page--device-confirmation .site-header{display:flex}
  body.account-page.account-page--signed-in .account-page--device-confirmation #mainContent{padding-top:24px}
}
@media (max-width:640px){
  body.account-page.account-page--signed-in .people-toolbar{padding:14px}
  body.account-page.account-page--signed-in .people-tabs{width:100%}body.account-page.account-page--signed-in .people-tabs button{flex:1;justify-content:center;padding:0 8px}
  body.account-page.account-page--signed-in .people-search{max-width:none}
  body.account-page.account-page--signed-in .people-sub{padding:7px 14px}
  body.account-page.account-page--signed-in .people-scroll{max-height:clamp(360px,calc(100vh - 330px),560px)}
  body.account-page.account-page--signed-in .group-head{padding-inline:14px}
  body.account-page.account-page--signed-in .relationship-item{grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"av who act" "av meta act";gap:0 10px;padding:8px 14px}
  body.account-page.account-page--signed-in .relationship-item__actions{min-width:0}
  body.account-page.account-page--signed-in .relationship-meta{font-size:11.5px}
  body.account-page.account-page--signed-in .az button{width:18px;font-size:9.5px}
  body.account-page.account-page--signed-in .account-view-heading--with-action{align-items:flex-start}
  body.account-page.account-page--signed-in .account-view-heading h2{font-size:27px}
  body.account-page.account-page--signed-in .card{padding:20px;border-radius:22px}
  body.account-page.account-page--signed-in .identity-card{padding:0}
  body.account-page.account-page--signed-in .identity-card__summary{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 20px 20px}
  body.account-page.account-page--signed-in .identity-card__mark{position:absolute;right:16px;top:16px;width:78px;height:78px}
  body.account-page.account-page--signed-in .identity-card__identifier{flex-direction:column;align-items:flex-start;padding:20px}
  body.account-page.account-page--signed-in .connection-state{max-width:none}
  body.account-page.account-page--signed-in .account-overview__row{flex-wrap:wrap}
  body.account-page.account-page--signed-in .face-stack{display:none}
  body.account-page.account-page--signed-in .profile-control-card{grid-template-columns:1fr}
  body.account-page.account-page--signed-in .profile-control-card .switch-button{grid-row:1;justify-self:start}
  body.account-page.account-page--signed-in .profile-name-form{grid-template-columns:1fr}
  body.account-page.account-page--signed-in .profile-name-form small{grid-row:auto}
  body.account-page.account-page--signed-in .connect-card__body{grid-template-columns:1fr;grid-template-areas:"say" "btn" "note"}
  body.account-page.account-page--signed-in .connect-card .devices-note{flex-direction:column;align-items:flex-start}
  body.account-page.account-page--signed-in .binding-keys-heading{flex-direction:column}
  body.account-page.account-page--signed-in .binding-key-item{grid-template-columns:1fr}
  body.account-page.account-page--signed-in .binding-key-actions{justify-content:flex-end}
  body.account-page.account-page--signed-in .client-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  body.account-page.account-page--signed-in .client-choice{font-size:11px;padding:10px 2px 8px}
  body.account-page.account-page--signed-in .device-authorization{padding:24px 18px}
  body.account-page.account-page--signed-in .device-authorization__summary>div{grid-template-columns:76px minmax(0,1fr)}
}
body.account-page.account-page--signed-in .logo{display:block;width:70%;height:70%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none}
body.account-page.account-page--signed-in :where(*):has(>.logo){background:#fff!important}


body.account-page:not(.account-page--signed-in){
  --paper:#fff5e2; --card:#fffdfa; --ink:#29251f; --muted:#5f5549; --faint:#b3a794; --line:#d9cdb8;
  --sky:#70c8ff; --pink:#ff91bd; --yellow:#ffda45; --mint:#8fe3c0; --peach:#ffb38a;
  --sky-soft:#e5f4ff; --pink-soft:#fff0f6; --yellow-soft:#fff7da; --mint-soft:#e6f8ef;
  --deep:#155d87; --focus:#075a9c; --danger:#933640; --success:#275e43;
  --round:ui-rounded,'SF Pro Rounded','Arial Rounded MT Bold','PingFang SC','Microsoft YaHei UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
body.account-page:not(.account-page--signed-in) *{box-sizing:border-box}
body.account-page:not(.account-page--signed-in){margin:0;min-height:100vh;color:var(--ink);background:var(--paper);font-family:'Segoe UI','PingFang SC','Microsoft YaHei UI',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;
  background-image:radial-gradient(rgb(41 37 31 / .07) 1px,transparent 1.3px);background-size:22px 22px}
body.account-page:not(.account-page--signed-in) h2,body.account-page:not(.account-page--signed-in) p{margin:0}
body.account-page:not(.account-page--signed-in) a{color:inherit}
body.account-page:not(.account-page--signed-in) button,body.account-page:not(.account-page--signed-in) input{font:inherit;color:inherit}
body.account-page:not(.account-page--signed-in) [hidden]{display:none!important}
body.account-page:not(.account-page--signed-in) :is(a,button):focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ---------- header (same structure as the live account header) ---------- */
body.account-page:not(.account-page--signed-in) .site-header{display:flex;align-items:center;gap:20px;width:min(1120px,calc(100% - 64px));min-height:80px;margin-inline:auto}
body.account-page:not(.account-page--signed-in) .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 25px/1 var(--round);letter-spacing:-.06em}
body.account-page:not(.account-page--signed-in) .brand svg{width:34px;height:34px}
body.account-page:not(.account-page--signed-in) .account-nav{display:flex;align-items:center;gap:8px;margin-left:auto}
body.account-page:not(.account-page--signed-in) .account-nav__link{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 15px;border:1.5px solid transparent;border-radius:999px;font-size:14px;font-weight:700;text-decoration:none;transition:background-color .2s,transform .2s var(--ease),box-shadow .2s var(--ease)}
body.account-page:not(.account-page--signed-in) .account-nav__link:hover{background:rgb(41 37 31 / .06)}
body.account-page:not(.account-page--signed-in) .account-nav__link svg{width:17px;height:17px}
body.account-page:not(.account-page--signed-in) .account-nav__link--active{border-color:var(--ink);background:var(--sky);box-shadow:2px 2px 0 var(--ink)}
body.account-page:not(.account-page--signed-in) .account-nav__link--active:hover{background:var(--sky);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
body.account-page:not(.account-page--signed-in) .language-toggle{position:relative;display:inline-flex;padding:3px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);font-size:12px;font-weight:750;cursor:pointer}
body.account-page:not(.account-page--signed-in) .language-toggle span{position:relative;z-index:1;padding:4px 10px;border-radius:999px}
body.account-page:not(.account-page--signed-in) .language-toggle i{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--yellow);transition:transform .3s var(--spring)}
body.account-page:not(.account-page--signed-in) .language-toggle[data-locale=en] i{transform:translateX(100%)}
body.account-page:not(.account-page--signed-in) .language-toggle span[aria-hidden]{display:none}

/* ---------- page ---------- */
body.account-page:not(.account-page--signed-in) .stage{width:min(1120px,calc(100% - 64px));margin:clamp(12px,3vh,36px) auto 72px}
body.account-page:not(.account-page--signed-in) .auth-grid{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:40px;align-items:stretch}

/* decorative art (aria-hidden) */
body.account-page:not(.account-page--signed-in) .auth-art{position:relative;display:grid;place-items:center;min-height:560px;border:2px solid var(--ink);border-radius:32px;background:var(--sky-soft);box-shadow:6px 6px 0 var(--ink);overflow:hidden;transition:background-color .5s}
body.account-page:not(.account-page--signed-in) .auth-art[data-route=signin]{background:var(--yellow-soft)}
body.account-page:not(.account-page--signed-in) .auth-art::before{content:'';position:absolute;inset:0;background:radial-gradient(rgb(41 37 31 / .1) 1.2px,transparent 1.5px) 0 0/20px 20px;-webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent)}
body.account-page:not(.account-page--signed-in) .blob{position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(44px);opacity:.55;animation:auth-drift 14s ease-in-out infinite alternate}
body.account-page:not(.account-page--signed-in) .blob--a{left:-90px;top:-70px;background:var(--pink)}
body.account-page:not(.account-page--signed-in) .blob--b{right:-110px;bottom:-90px;background:var(--yellow);animation-delay:-7s}
body.account-page:not(.account-page--signed-in) .auth-art[data-route=signin] .blob--b{background:var(--sky)}
@keyframes auth-drift{to{transform:translate(40px,30px) scale(1.12)}}
body.account-page:not(.account-page--signed-in) .orbit{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border:2px dashed rgb(41 37 31 / .28);border-radius:50%;animation:auth-spin var(--t) linear infinite}
body.account-page:not(.account-page--signed-in) .orbit--1{--d:330px;--t:46s}
body.account-page:not(.account-page--signed-in) .orbit--2{--d:450px;--t:70s;animation-direction:reverse;border-color:rgb(41 37 31 / .14)}
@keyframes auth-spin{to{transform:rotate(360deg)}}
body.account-page:not(.account-page--signed-in) .sat{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;transform:rotate(var(--a)) translate(calc(var(--d) / 2)) rotate(calc(var(--a) * -1))}
body.account-page:not(.account-page--signed-in) .sat b{display:grid;place-items:center;width:100%;height:100%;border:2px solid var(--ink);border-radius:14px;background:var(--c);box-shadow:2px 2px 0 var(--ink);font:800 13px/1 var(--round);animation:auth-spin var(--t) linear infinite reverse}
body.account-page:not(.account-page--signed-in) .orbit--2 .sat b{animation-direction:normal}
body.account-page:not(.account-page--signed-in) .mascot{position:relative;z-index:2;width:200px;height:200px;animation:auth-bob 4.5s ease-in-out infinite}
@keyframes auth-bob{50%{transform:translateY(-10px) rotate(-2deg)}}
body.account-page:not(.account-page--signed-in) .mascot.shake{animation:auth-headshake .5s ease}
body.account-page:not(.account-page--signed-in) .auth-art.still :is(.blob,.orbit,.sat b,.spark),body.account-page:not(.account-page--signed-in) .auth-art.still .mascot:not(.shake):not(.joy){animation-play-state:paused}
@keyframes auth-headshake{20%{transform:translateX(-9px) rotate(-5deg)}40%{transform:translateX(8px) rotate(4deg)}60%{transform:translateX(-5px) rotate(-2deg)}80%{transform:translateX(3px)}}
body.account-page:not(.account-page--signed-in) .mascot.joy{animation:auth-joy .7s var(--spring)}
@keyframes auth-joy{40%{transform:translateY(-26px) scale(1.06)}}
body.account-page:not(.account-page--signed-in) .mascot svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(5px 6px 0 rgb(41 37 31 / .9))}
body.account-page:not(.account-page--signed-in) .mascot .look{transition:transform .25s var(--ease)}
body.account-page:not(.account-page--signed-in) .mascot .lid{transform-box:fill-box;transform-origin:center;transition:transform .18s ease}
body.account-page:not(.account-page--signed-in) .mascot.blink .lid,body.account-page:not(.account-page--signed-in) .mascot.shut .lid{transform:scaleY(.08)}
body.account-page:not(.account-page--signed-in) .mascot.peek .lid{transform:scale(1.18)}
body.account-page:not(.account-page--signed-in) .mascot .cheek{opacity:0;transition:opacity .3s}
body.account-page:not(.account-page--signed-in) .mascot.shut .cheek,body.account-page:not(.account-page--signed-in) .mascot.joyful .cheek{opacity:1}
body.account-page:not(.account-page--signed-in) .mascot .smile{opacity:0;transition:opacity .2s}
body.account-page:not(.account-page--signed-in) .mascot.joyful .smile{opacity:1}
body.account-page:not(.account-page--signed-in) .mascot.joyful .lid{transform:scaleY(0)}
body.account-page:not(.account-page--signed-in) .spark{position:absolute;z-index:1;width:16px;height:16px;color:var(--ink);animation:auth-twinkle 2.6s ease-in-out infinite var(--sd,0s)}
@keyframes auth-twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.35}50%{transform:scale(1) rotate(45deg);opacity:1}}

/* ---------- form card: class names match the live page ---------- */
body.account-page:not(.account-page--signed-in) .panel{position:relative;display:grid;align-content:start;gap:0;padding:34px 34px 30px;border:2px solid var(--ink);border-radius:28px;background:var(--card);box-shadow:6px 6px 0 var(--ink)}
body.account-page:not(.account-page--signed-in) .panel>*+*{margin-top:16px}
body.account-page:not(.account-page--signed-in) .panel-heading h2{font:800 clamp(28px,3vw,34px)/1.2 var(--round);letter-spacing:-.035em}
body.account-page:not(.account-page--signed-in) .panel-heading h2 em{font-style:normal;background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 90%/0% 32%;animation:auth-mark .7s var(--ease) .45s forwards}
body.account-page:not(.account-page--signed-in) #loginForm .panel-heading h2 em{background-image:linear-gradient(var(--sky),var(--sky))}
@keyframes auth-mark{to{background-size:100% 32%}}
body.account-page:not(.account-page--signed-in) .panel-heading p{margin-top:8px;font-size:14px;color:var(--muted)}
body.account-page:not(.account-page--signed-in) .panel>label,body.account-page:not(.account-page--signed-in) .form-field{display:grid;gap:7px}
body.account-page:not(.account-page--signed-in) .panel>label>span,body.account-page:not(.account-page--signed-in) .form-field>label{font-size:13px;font-weight:750}
body.account-page:not(.account-page--signed-in) .panel input{width:100%;min-height:50px;padding:12px 16px;border:2px solid var(--ink);border-radius:16px;background:#fff;font-size:15px;outline:none;transition:border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease),background-color .2s}
body.account-page:not(.account-page--signed-in) .panel input::placeholder{color:var(--faint)}
body.account-page:not(.account-page--signed-in) .panel input:hover{background:#fffaf0}
body.account-page:not(.account-page--signed-in) .panel input:focus{border-color:var(--focus);background:#fff;box-shadow:4px 4px 0 var(--sky);transform:translate(-2px,-2px)}
body.account-page:not(.account-page--signed-in) .panel input[aria-invalid=true]{border-color:var(--danger);background:#fff4f6;box-shadow:4px 4px 0 var(--pink);animation:auth-shake .42s ease}
@keyframes auth-shake{20%{translate:-7px 0}40%{translate:6px 0}60%{translate:-4px 0}80%{translate:2px 0}}
body.account-page:not(.account-page--signed-in) .registration-email-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
body.account-page:not(.account-page--signed-in) .quiet-button{min-width:112px;min-height:50px;padding:8px 16px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow);box-shadow:3px 3px 0 var(--ink);font-size:14px;font-weight:750;font-variant-numeric:tabular-nums;cursor:pointer;white-space:nowrap;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background-color .2s}
body.account-page:not(.account-page--signed-in) .quiet-button:hover:not(:disabled){transform:translate(-1px,-2px);box-shadow:4px 5px 0 var(--ink)}
body.account-page:not(.account-page--signed-in) .quiet-button:active:not(:disabled){transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
body.account-page:not(.account-page--signed-in) .quiet-button:disabled{border-style:dashed;background:#f4ecdc;box-shadow:none;color:var(--muted);cursor:default}
body.account-page:not(.account-page--signed-in) #registerEmailStatus{display:flex;align-items:center;gap:7px;min-height:0;font-size:12.5px;font-weight:650;color:var(--success)}
body.account-page:not(.account-page--signed-in) #registerEmailStatus:empty{display:none}
body.account-page:not(.account-page--signed-in) #registerEmailStatus::before{content:'';width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2329251f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.6 2.4L12 5.5'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:inset 0 0 0 1.5px var(--ink);animation:auth-pop .45s var(--spring)}
@keyframes auth-pop{from{transform:scale(.3);opacity:0}}
/* six-cell code: the real single <input> stays; cells only mirror it */
body.account-page:not(.account-page--signed-in) .code-field{position:relative;display:block}
body.account-page:not(.account-page--signed-in) .code-field input{position:relative;z-index:1;color:transparent;caret-color:transparent;background:transparent!important;border-color:transparent!important;box-shadow:none!important;transform:none!important;letter-spacing:2em;cursor:text}
body.account-page:not(.account-page--signed-in) .code-field input::placeholder{color:transparent}
body.account-page:not(.account-page--signed-in) .code-field input::selection{background:transparent}
body.account-page:not(.account-page--signed-in) .cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;pointer-events:none}
body.account-page:not(.account-page--signed-in) .cells i{display:grid;place-items:center;border:2px solid var(--ink);border-radius:14px;background:#fff;font:800 20px/1 var(--round);font-style:normal;font-variant-numeric:tabular-nums;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s,background-color .2s}
body.account-page:not(.account-page--signed-in) .cells i:empty::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--line)}
body.account-page:not(.account-page--signed-in) .cells i.f{animation:auth-pop .3s var(--spring)}
body.account-page:not(.account-page--signed-in) .code-field input:focus+.cells i.cur{border-color:var(--focus);box-shadow:3px 3px 0 var(--sky);transform:translate(-1px,-2px)}
body.account-page:not(.account-page--signed-in) .code-field input:focus+.cells i.cur:empty::after{width:2px;height:22px;border-radius:1px;background:var(--ink);animation:auth-caret 1s steps(1) infinite}
@keyframes auth-caret{50%{opacity:0}}
body.account-page:not(.account-page--signed-in) .code-field input[aria-invalid=true]+.cells i{border-color:var(--danger);background:#fff4f6;animation:auth-shake .42s ease}
body.account-page:not(.account-page--signed-in) .cells.done i{background:var(--mint-soft)}
/* code field stays collapsed until the first "send code" (display only; same input, same checks) */
body.account-page:not(.account-page--signed-in) .panel>.primary-button{margin-top:20px}
body.account-page:not(.account-page--signed-in) .panel>.code-slot{display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;visibility:hidden;transition:grid-template-rows .45s var(--ease),margin-top .45s var(--ease),opacity .3s ease,visibility 0s .45s}
body.account-page:not(.account-page--signed-in) .panel>.code-slot.open{grid-template-rows:1fr;margin-top:16px;opacity:1;visibility:visible;transition:grid-template-rows .45s var(--ease),margin-top .45s var(--ease),opacity .3s ease .1s,visibility 0s}
body.account-page:not(.account-page--signed-in) .code-slot__inner{min-height:0;overflow:hidden;margin:-4px -8px -8px -4px;padding:4px 8px 8px 4px;transition:padding .45s var(--ease),margin .45s var(--ease)}
body.account-page:not(.account-page--signed-in) .code-slot:not(.open) .code-slot__inner{margin-block:0;padding-block:0}
body.account-page:not(.account-page--signed-in) .code-slot label{display:grid;gap:7px}
body.account-page:not(.account-page--signed-in) .code-slot label>span:first-child{font-size:13px;font-weight:750}
body.account-page:not(.account-page--signed-in) .enter .panel>.code-slot{animation:none}
body.account-page:not(.account-page--signed-in) .cells.pop-in i{animation:auth-pop .42s var(--spring) both calc(var(--k) * 45ms + .12s)}
body.account-page:not(.account-page--signed-in) .password-field{position:relative;display:block}
body.account-page:not(.account-page--signed-in) .password-field input{padding-right:58px}
body.account-page:not(.account-page--signed-in) .password-toggle{position:absolute;z-index:2;right:7px;top:50%;display:grid;place-items:center;width:38px;height:38px;margin-top:-19px;border:1.5px solid transparent;border-radius:12px;background:transparent;cursor:pointer;transition:background-color .2s,border-color .2s}
body.account-page:not(.account-page--signed-in) .password-toggle:hover{border-color:var(--ink);background:var(--yellow-soft)}
body.account-page:not(.account-page--signed-in) .password-toggle[aria-pressed=true]{border-color:var(--ink);background:var(--sky-soft)}
body.account-page:not(.account-page--signed-in) .password-toggle svg{width:21px;height:21px;animation:auth-flip .35s var(--spring)}
@keyframes auth-flip{from{transform:rotateX(90deg) scale(.6)}}
body.account-page:not(.account-page--signed-in) .form-validation{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border:1.5px solid var(--danger);border-radius:14px;background:#fff0f3;color:#7a1f2b;font-size:13px;font-weight:650;line-height:1.5;animation:auth-drop .4s var(--spring)}
body.account-page:not(.account-page--signed-in) .form-validation::before{content:'!';display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:var(--danger);color:#fff;font-weight:900;font-size:12px}
@keyframes auth-drop{from{opacity:0;transform:translateY(-8px) scale(.97)}}
body.account-page:not(.account-page--signed-in) .primary-button{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;border:2px solid var(--ink);border-radius:999px;background:var(--sky);box-shadow:4px 4px 0 var(--ink);font-size:16px;font-weight:800;cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
body.account-page:not(.account-page--signed-in) #loginForm .primary-button{background:var(--yellow)}
body.account-page:not(.account-page--signed-in) .primary-button::after{content:'';width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s var(--ease)}
body.account-page:not(.account-page--signed-in) .primary-button::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / .65) 46%,transparent 62%);transform:translateX(-120%)}
body.account-page:not(.account-page--signed-in) .primary-button:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
body.account-page:not(.account-page--signed-in) .primary-button:hover:not(:disabled)::after{transform:translateX(4px)}
body.account-page:not(.account-page--signed-in) .primary-button:hover:not(:disabled)::before{transform:translateX(120%);transition:transform .75s var(--ease)}
body.account-page:not(.account-page--signed-in) .primary-button:active:not(:disabled){transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
body.account-page:not(.account-page--signed-in) .primary-button:disabled{cursor:progress;background-image:repeating-linear-gradient(-45deg,rgb(255 255 255 / .45) 0 12px,transparent 12px 24px);background-size:34px 34px;animation:auth-barber .8s linear infinite}
body.account-page:not(.account-page--signed-in) .primary-button:disabled::after{display:none}
@keyframes auth-barber{to{background-position:34px 0}}

/* field stagger when the card appears */
body.account-page:not(.account-page--signed-in) .enter .auth-art{animation:auth-inL .8s var(--ease) both}
body.account-page:not(.account-page--signed-in) .enter .panel{animation:auth-inR .8s var(--ease) both .08s}
body.account-page:not(.account-page--signed-in) .enter .panel>*{animation:auth-rise .6s var(--ease) both calc(var(--i,0) * 55ms + .2s)}
@keyframes auth-inL{from{opacity:0;transform:translateX(-30px) rotate(-1.5deg)}}
@keyframes auth-inR{from{opacity:0;transform:translateX(30px) rotate(1.5deg)}}
@keyframes auth-rise{from{opacity:0;transform:translateY(12px)}}

/* status + bootstrap */
body.account-page:not(.account-page--signed-in) .status{display:flex;justify-content:center;margin-top:22px}
body.account-page:not(.account-page--signed-in) .status span{display:inline-flex;align-items:center;gap:9px;padding:9px 18px 9px 10px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);box-shadow:3px 3px 0 var(--ink);font-size:14px;font-weight:700;animation:auth-drop .45s var(--spring)}
body.account-page:not(.account-page--signed-in) .status span::before{content:'';width:20px;height:20px;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2329251f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.6 2.4L12 5.5'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:inset 0 0 0 1.5px var(--ink)}
body.account-page:not(.account-page--signed-in) .status span.busy::before{background:conic-gradient(var(--ink) 0 25%,transparent 0) ;-webkit-mask:radial-gradient(circle,transparent 5px,#000 5.5px);mask:radial-gradient(circle,transparent 5px,#000 5.5px);box-shadow:none;animation:auth-spin .8s linear infinite}
body.account-page:not(.account-page--signed-in) .session-bootstrap{display:grid;justify-items:center;gap:10px;width:min(420px,100%);margin:clamp(40px,12vh,120px) auto 0;padding:34px 28px;border:2px solid var(--ink);border-radius:26px;background:var(--card);box-shadow:5px 5px 0 var(--ink);text-align:center;animation:auth-drop .4s var(--spring)}
body.account-page:not(.account-page--signed-in) .session-bootstrap svg{width:64px;height:64px;animation:auth-bob 1.2s ease-in-out infinite}
body.account-page:not(.account-page--signed-in) .session-bootstrap strong{font:800 18px/1.3 var(--round)}
body.account-page:not(.account-page--signed-in) .session-bootstrap p{font-size:13px;color:var(--muted)}
body.account-page:not(.account-page--signed-in) .shimmer{width:180px;height:8px;margin-top:6px;border-radius:4px;background:linear-gradient(90deg,#efe4d1 0 30%,var(--yellow) 45%,#efe4d1 60% 100%) 0 0/300% 100%;animation:auth-shim 1.1s linear infinite}
@keyframes auth-shim{from{background-position:100% 0}to{background-position:-50% 0}}

/* mock bar */
body.account-page:not(.account-page--signed-in) .mocknote{margin-top:14px;font-size:12px;color:var(--muted);text-align:center}

/* calm */
body.account-page:not(.account-page--signed-in).calm *,body.account-page:not(.account-page--signed-in).calm *::before,body.account-page:not(.account-page--signed-in).calm *::after{animation:none!important;transition:none!important}
body.account-page:not(.account-page--signed-in).calm .panel-heading h2 em{background-size:100% 32%}

@media (max-width:960px){
  body.account-page:not(.account-page--signed-in) .auth-grid{grid-template-columns:1fr;gap:0;width:min(520px,100%);margin-inline:auto}
  body.account-page:not(.account-page--signed-in) .auth-art{min-height:0;height:170px;margin-bottom:-30px;border-radius:26px 26px 0 0;border-bottom:0;box-shadow:none}
  body.account-page:not(.account-page--signed-in) .orbit--1{--d:250px}body.account-page:not(.account-page--signed-in) .orbit--2{display:none}
  body.account-page:not(.account-page--signed-in) .sat{width:36px;height:36px;margin:-18px}
  body.account-page:not(.account-page--signed-in) .sat b{border-radius:11px;font-size:11px}
  body.account-page:not(.account-page--signed-in) .mascot{width:104px;height:104px;margin-top:-14px}
  body.account-page:not(.account-page--signed-in) .spark{display:none}
  body.account-page:not(.account-page--signed-in) .panel{z-index:1}
  body.account-page:not(.account-page--signed-in) .enter .auth-art{animation-name:auth-rise}body.account-page:not(.account-page--signed-in) .enter .panel{animation-name:auth-rise}
}
@media (max-width:640px){
  body.account-page:not(.account-page--signed-in) .site-header{width:calc(100% - 32px);min-height:68px;gap:10px}
  body.account-page:not(.account-page--signed-in) .brand{font-size:22px}body.account-page:not(.account-page--signed-in) .brand svg{width:30px;height:30px}
  body.account-page:not(.account-page--signed-in) .account-nav{gap:4px}
  body.account-page:not(.account-page--signed-in) .account-nav__link{padding:5px 11px;font-size:13px}
  body.account-page:not(.account-page--signed-in) .account-nav__guide span{display:none}
  body.account-page:not(.account-page--signed-in) .stage{width:calc(100% - 32px);margin-top:6px}
  body.account-page:not(.account-page--signed-in) .panel{padding:26px 20px 22px;border-radius:24px}
  body.account-page:not(.account-page--signed-in) .registration-email-row{grid-template-columns:1fr}
  body.account-page:not(.account-page--signed-in) .quiet-button{width:100%}
  body.account-page:not(.account-page--signed-in) .cells{gap:6px}
  body.account-page:not(.account-page--signed-in) .stage{margin-bottom:96px}
}
body.account-page:not(.account-page--signed-in) .logo{display:block;width:70%;height:70%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none}
body.account-page:not(.account-page--signed-in) :where(*):has(>.logo){background:#fff!important}

/* Keep the existing shell, live IDs, status text, and dialogs. */
.account-page .page-shell{width:auto;max-width:none;margin:0;padding:0}
.account-page .brand img{width:34px;height:34px}
.account-page .account-nav__link img,.account-page .account-nav__button img,.account-page .account-section-nav img{width:20px;height:20px;object-fit:contain}
.account-page .language-toggle .is-active{background:var(--yellow);color:var(--ink)}
.account-page .language-toggle{height:auto;gap:0}
body.account-page.account-page--signed-in .site-header{height:100vh;min-height:0;border-radius:0;box-shadow:none;align-items:stretch;gap:0;margin:0}
body.account-page.account-page--signed-in .account-section-nav{width:100%;margin:0;overflow:visible;padding:0;border:0;background:none;box-shadow:none;border-radius:0}
body.account-page.account-page--signed-in .account-section-nav a[aria-current=page]{background:var(--sky);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
body.account-page.account-page--signed-in .account-nav{flex-wrap:nowrap;align-items:stretch;margin-left:0;width:auto}
body.account-page.account-page--signed-in .account-panel{display:block;padding:0;background:none;border:0;box-shadow:none}
body.account-page.account-page--signed-in .account-view{padding:0;margin:0;max-width:none}
body.account-page.account-page--signed-in .account-view-heading h2{display:inline;background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 95%/100% 28%}
body.account-page.account-page--signed-in #relationships .account-view-heading h2{background-image:linear-gradient(var(--pink),var(--pink))}
body.account-page.account-page--signed-in .identity-card{border:2px solid var(--ink);border-radius:26px;box-shadow:5px 5px 0 var(--ink);display:block}
body.account-page.account-page--signed-in .identity-card__identifier>div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;width:100%}
body.account-page.account-page--signed-in .identity-card__identifier .identity-label{display:none}
body.account-page.account-page--signed-in .identity-card__identifier .connection-state{margin:0}
body.account-page.account-page--signed-in .account-overview__label>img{width:44px;height:44px;border:2px solid var(--ink);border-radius:14px;background:var(--card);padding:8px}
body.account-page.account-page--signed-in .account-control-grid{display:block}
body.account-page.account-page--signed-in .profile-name-form{grid-template-columns:minmax(0,1fr) auto}
body.account-page.account-page--signed-in input:not([type=checkbox]){color:var(--ink);border:2px solid var(--ink);border-radius:15px;background:white;min-height:46px;padding:10px 14px}
body.account-page.account-page--signed-in input:focus{outline:3px solid var(--focus);outline-offset:2px}
body.account-page.account-page--signed-in .people-card{padding:0}
body.account-page.account-page--signed-in .people-search input{padding-left:16px;border-width:1.5px;border-radius:999px;min-height:42px}
body.account-page.account-page--signed-in .relationship-item{margin:0;border-radius:0;background:transparent;box-shadow:none}
body.account-page.account-page--signed-in .relationship-person{display:block}
body.account-page.account-page--signed-in .relationship-person__name{margin:0;min-height:20px}
body.account-page.account-page--signed-in .relationship-person__id{margin:0}
body.account-page.account-page--signed-in .relationship-meta{margin:0;font-size:11px}
body.account-page.account-page--signed-in .relationship-item .danger-button:disabled{opacity:.7}
body.account-page.account-page--signed-in .avatar-0{--c:var(--sky)}body.account-page.account-page--signed-in .avatar-1{--c:var(--pink)}body.account-page.account-page--signed-in .avatar-2{--c:var(--yellow)}body.account-page.account-page--signed-in .avatar-3{--c:var(--mint)}body.account-page.account-page--signed-in .avatar-4{--c:var(--peach)}body.account-page.account-page--signed-in .avatar-5{--c:var(--lilac)}
body.account-page.account-page--signed-in .host-advanced-card,body.account-page.account-page--signed-in .binding-keys-card{margin-top:26px}
body.account-page.account-page--signed-in .host-advanced-card__content{margin-top:18px}
body.account-page:not(.account-page--signed-in) .site-header{position:relative;inset:auto;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;flex-wrap:wrap}
body.account-page:not(.account-page--signed-in) #mainContent{width:min(1120px,calc(100% - 64px));margin:28px auto 72px;padding:0}
body.account-page:not(.account-page--signed-in) .auth-grid{width:auto;max-width:none;grid-template-columns:minmax(0,1fr) 470px;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}
body.account-page:not(.account-page--signed-in) .panel{width:auto;max-width:none;margin:0}
body.account-page:not(.account-page--signed-in) .auth-grid:has(#loginForm:not([hidden])) .auth-art{background:var(--yellow-soft)}
.account-page .auth-art .mascot{object-fit:contain;filter:drop-shadow(5px 6px 0 rgb(41 37 31 / .3))}
.account-page .auth-art .logo{width:70%;height:70%;object-fit:contain}
.account-page .sat-codex{--a:0deg;--d:330px;--c:var(--sky)}.account-page .sat-claude{--a:60deg;--d:330px;--c:var(--peach)}.account-page .sat-openclaw{--a:120deg;--d:330px;--c:white}.account-page .sat-workbuddy{--a:180deg;--d:330px;--c:var(--sky)}.account-page .sat-trae{--a:240deg;--d:330px;--c:var(--mint)}.account-page .sat-dsh{--a:300deg;--d:330px;--c:var(--yellow)}
body.account-page:not(.account-page--signed-in) .panel-heading h2{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 95%/100% 25%;width:fit-content}
body.account-page:not(.account-page--signed-in) .password-toggle img{width:21px;height:21px}
body.account-page:not(.account-page--signed-in) .password-field{margin:0}
body.account-page:not(.account-page--signed-in) #registerEmailStatus::before{display:none}
body.account-page:not(.account-page--signed-in) .code-slot label{margin:0}
body.account-page:not(.account-page--signed-in) .cells{margin:0}
.account-page .device-authorization{max-width:700px;margin-inline:auto}
.account-page--device-confirmation .site-header{position:relative;height:auto;width:100%;border:0;flex-direction:row;align-items:center}
.account-page--device-confirmation #mainContent{margin-left:0}
@media(max-width:1100px){body.account-page.account-page--signed-in{--side:220px}}
@media(max-width:960px){body.account-page:not(.account-page--signed-in) .auth-grid{grid-template-columns:1fr;max-width:520px;margin:auto}.account-page .sat{--d:250px}body.account-page:not(.account-page--signed-in) .auth-art{height:170px;min-height:0}}
@media(max-width:900px){body.account-page.account-page--signed-in .site-header{position:sticky;top:0;height:auto;width:100%;flex-direction:row;flex-wrap:wrap;padding:12px 16px;border-bottom:2px solid var(--ink);border-right:0;gap:10px}body.account-page.account-page--signed-in .brand{margin:0}body.account-page.account-page--signed-in .account-nav{display:flex;flex-direction:row;align-items:center;margin:0 0 0 auto;padding:0;gap:4px}body.account-page.account-page--signed-in .account-section-nav{display:flex;order:3;overflow:auto;gap:6px;padding:4px}body.account-page.account-page--signed-in .account-section-nav a{flex-shrink:0;white-space:nowrap;min-height:40px;padding:0 10px}body.account-page.account-page--signed-in #mainContent{margin-left:0;padding:24px 20px}body.account-page.account-page--signed-in .language-toggle{margin:0}body.account-page.account-page--signed-in .account-nav__button,body.account-page.account-page--signed-in .account-nav__link{padding:0 8px}body.account-page.account-page--signed-in .profile-control-card{padding:20px}}
@media(max-width:640px){body.account-page:not(.account-page--signed-in) #mainContent{width:calc(100% - 32px);margin-top:6px}body.account-page.account-page--signed-in .relationship-item{min-height:72px;grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:'av who act' 'av meta act';gap:0 10px;padding:8px 14px}body.account-page.account-page--signed-in .relationship-item__actions{min-width:0}body.account-page.account-page--signed-in .relationship-item__actions .danger-button{opacity:1}body.account-page.account-page--signed-in .relationship-meta{white-space:normal}body.account-page.account-page--signed-in .profile-control-card{display:block}body.account-page.account-page--signed-in .switch-button{margin-top:16px}body.account-page.account-page--signed-in .profile-name-form{grid-template-columns:1fr}body.account-page.account-page--signed-in .profile-name-form small{grid-row:auto}body.account-page.account-page--signed-in .identity-card__summary{padding:22px 20px;gap:16px}body.account-page.account-page--signed-in .identity-card__mark{width:78px;height:78px;flex-basis:78px}body.account-page.account-page--signed-in .identity-card__identifier{padding:20px}body.account-page.account-page--signed-in .people-toolbar{padding:12px}body.account-page.account-page--signed-in .people-tabs{width:100%;justify-content:center}body.account-page.account-page--signed-in .people-tabs button{padding:0 10px}body.account-page.account-page--signed-in .people-sub{padding:8px 12px}body.account-page.account-page--signed-in .account-nav__guide span,body.account-page.account-page--signed-in .account-nav__logout span{display:none}}
@media(prefers-reduced-motion:reduce){.account-page *,.account-page *::before,.account-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

body.account-page.account-page--signed-in .identity-card{padding:0}
body.account-page.account-page--signed-in .identity-card__mark{display:block;object-fit:contain}
body.account-page.account-page--signed-in .identity-card__summary{grid-area:auto}
body.account-page.account-page--signed-in .identity-label{display:inline-block;width:auto}
body.account-page.account-page--signed-in .account-overview{padding:0;border:0;border-radius:0;box-shadow:none;background:none}
body.account-page.account-page--signed-in .account-overview__label>img{filter:none}
body.account-page:not(.account-page--signed-in) .site-header{flex-wrap:nowrap}
body.account-page:not(.account-page--signed-in) .brand{min-width:0;width:auto;flex-shrink:0}
body.account-page:not(.account-page--signed-in) .brand b{display:block;font-size:22px}
body.account-page:not(.account-page--signed-in) .account-nav{width:auto;flex-wrap:nowrap;justify-content:flex-end;margin-left:auto}
body.account-page:not(.account-page--signed-in) .password-toggle{position:absolute;right:7px;top:50%;width:38px;height:38px;min-width:0;min-height:0;margin-top:-19px;padding:0;box-shadow:none;transform:none;background:transparent}
body.account-page:not(.account-page--signed-in) .password-field input{padding-right:50px}
@media(max-width:420px){body.account-page:not(.account-page--signed-in) .brand b{font-size:18px}body.account-page:not(.account-page--signed-in) .brand{gap:5px}body.account-page:not(.account-page--signed-in) .brand img{width:27px;height:27px}body.account-page:not(.account-page--signed-in) .account-nav__link{padding-inline:8px}body.account-page:not(.account-page--signed-in) .language-toggle span{padding:4px 7px}}
/* Keep the five real destinations readable in both languages on narrow screens. */
@media(max-width:900px){
  body.account-page.account-page--signed-in .account-section-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;overflow:visible;gap:4px}
  body.account-page.account-page--signed-in .account-section-nav a{min-width:0;white-space:normal;min-height:62px;padding:4px 2px;font-size:10.5px;line-height:1.15}
  body.account-page.account-page--signed-in .account-section-nav a span{max-width:100%;overflow-wrap:anywhere}
  html:lang(en) body.account-page.account-page--signed-in .account-section-nav{grid-template-columns:1fr 1fr 1.4fr 1fr 1.15fr}
  html:lang(en) body.account-page.account-page--signed-in .account-section-nav a span{overflow-wrap:normal}
  body.account-page.account-page--signed-in .account-view,body.account-page.account-page--signed-in #keys{scroll-margin-top:175px}
}

/* Align the existing account controls with their real DOM, including narrow layouts. */
body.account-page.account-page--signed-in .account-view-heading--with-action>div{display:block;min-width:0}
body.account-page.account-page--signed-in .account-view-heading--with-action p:not(.step):last-child{margin:10px 0 0}
body.account-page.account-page--signed-in .account-view:focus-visible>.account-view-heading::before{display:none}
body.account-page.account-page--signed-in .account-view:focus-visible>.account-view-heading h2{outline:2px solid var(--deep,#155d87);outline-offset:5px;border-radius:4px;width:fit-content}
body.account-page.account-page--signed-in .connected-section__heading{display:block}
body.account-page.account-page--signed-in .connected-section__heading>div{display:block;margin:0;text-align:left}
body.account-page.account-page--signed-in .connected-section__heading p{margin:8px 0 0}
body.account-page.account-page--signed-in .identity-card__summary>div{min-width:0}
body.account-page.account-page--signed-in .identity-card__mark.still{animation-play-state:paused}
@media(max-width:640px){body.account-page.account-page--signed-in .identity-card__summary{flex-direction:row;align-items:center}body.account-page.account-page--signed-in .identity-card__mark{position:relative;inset:auto;width:56px;height:56px;flex:0 0 56px}body.account-page.account-page--signed-in #identityTitle{font-size:30px}}
body.account-page.account-page--signed-in .identity-card__identifier .identity-label{display:block;width:fit-content}
body.account-page.account-page--signed-in .identity-card__identifier>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
body.account-page.account-page--signed-in .connection-form input{width:100%;min-width:0}
body.account-page.account-page--signed-in .connect-button{align-self:flex-start;margin:0}
body.account-page.account-page--signed-in .status{left:auto;right:auto;transform:none;width:fit-content;max-width:100%;margin-inline:0;justify-content:flex-start}
body.account-page :is(h1,h2,h3){text-wrap:balance}