:root {
  color-scheme: light;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: #f4f7f5;
  color: #16231f;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: #f4f7f5; }
button, input { font: inherit; }
button { letter-spacing: 0; }
a { color: #1f6751; text-underline-offset: 2px; }

.account-shell {
  width: min(980px, calc(100% - 40px));
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 410px);
  align-items: center;
  gap: 72px;
  padding: 48px 0;
}

.account-intro { min-width: 0; }
.account-intro h1 { margin: 8px 0 16px; font-size: 38px; line-height: 1.2; letter-spacing: 0; overflow-wrap: anywhere; }
.account-kicker { margin: 0; color: #276955; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.account-subtitle { max-width: 480px; margin: 0; color: #53635d; font-size: 16px; line-height: 1.7; }
.account-retention {
  margin: 24px 0 0;
  padding-left: 14px;
  border-left: 3px solid #d39b2a;
  color: #6b5524;
  font-size: 14px;
  line-height: 1.6;
}

.account-panel {
  width: 100%;
  min-width: 0;
  padding: 28px;
  border: 1px solid #d6dfdb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(19, 45, 36, 0.09);
}

.account-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 6px;
  background: #eef2f0;
}

.account-tabs button {
  min-width: 0;
  height: 38px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #53635d;
  cursor: pointer;
}

.account-tabs button.active {
  background: #ffffff;
  color: #1f5e4b;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(19, 45, 36, 0.11);
}

.account-heading { margin: 26px 0 22px; }
.account-heading h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.35; letter-spacing: 0; }
.account-heading p { margin: 0; color: #6c7974; font-size: 14px; line-height: 1.5; }
.account-notice {
  margin: -8px 0 18px;
  padding: 10px 12px;
  border-left: 3px solid #2f8065;
  background: #eef6f2;
  color: #31564a;
  font-size: 13px;
  line-height: 1.55;
}

#accountForm { display: grid; gap: 12px; }
.account-field { display: grid; min-width: 0; gap: 6px; }
.account-field > label { color: #34453f; font-size: 13px; font-weight: 600; }
#accountForm input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #bdcbc5;
  border-radius: 5px;
  outline: none;
  color: #16231f;
  background: #ffffff;
}

#accountForm input:not([type="checkbox"]):focus {
  border-color: #276955;
  box-shadow: 0 0 0 3px rgba(39, 105, 85, 0.13);
}

.account-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px;
  gap: 8px;
  min-width: 0;
}

.account-code-button,
.account-logout {
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #aabdb5;
  border-radius: 5px;
  background: #f8faf9;
  color: #245d4b;
  font-weight: 600;
  cursor: pointer;
}

.account-code-button:hover,
.account-logout:hover { background: #edf4f1; }
.account-code-button:disabled,
.account-logout:disabled { cursor: wait; opacity: 0.66; }
.account-field-status { min-height: 18px; margin: 0; color: #497064; font-size: 12px; line-height: 1.5; }

.account-consents {
  min-width: 0;
  margin: 2px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
  border: 0;
}

.account-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
  color: #43554f;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  cursor: pointer;
}

#accountForm .account-check input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: #276955;
}

.account-check span { min-width: 0; overflow-wrap: anywhere; }
.account-check a { margin: 0 2px; font-weight: 600; }
.account-error { min-height: 20px; margin: 0; color: #a23b36; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.account-submit {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 0;
  border-radius: 5px;
  background: #276955;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.account-submit:hover { background: #1f5747; }
.account-submit:disabled { cursor: wait; opacity: 0.65; }
.account-logout { width: 100%; }
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .account-shell {
    width: min(calc(100% - 28px), 440px);
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-content: center;
    padding: 32px 0;
  }
  .account-intro h1 { font-size: 30px; }
  .account-panel { padding: 22px; }
}

@media (max-width: 380px) {
  .account-shell { width: calc(100% - 20px); padding: 20px 0; }
  .account-panel { padding: 18px 16px; }
  .account-code-row { grid-template-columns: minmax(0, 1fr); }
  .account-code-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}