/* Member pages: minimal light theme. White surfaces, thin gray borders, one orange accent. */
:root {
  --user-bg: #f6f6f7; --user-surface: #ffffff; --user-text: #1f2328;
  --user-muted: #6b7280; --user-border: #e3e5e8;
  --user-accent: #f78c12; --user-accent-hover: #e07b0a;
  --user-green: #1a7f37; --user-green-bg: #eaf6ec; --user-green-border: #b7e0c2;
  --user-red: #b3402f; --user-red-bg: #fdecea; --user-red-border: #f0c6c0;
}
.user-body {
  background: var(--user-bg);
  color: var(--user-text);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}
.user-body .ambient { display: none; }
.user-body .console-frame { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.user-body .user-auth-layout, .user-body .user-center-layout { background: transparent; color: var(--user-text); }
.user-body a:focus-visible, .user-body button:focus-visible,
.user-body input:focus-visible, .user-body select:focus-visible {
  outline: 2px solid var(--user-accent); outline-offset: 2px;
}

/* Header */
.user-body .user-auth-header, .user-body .user-center-header {
  background: var(--user-surface); border-bottom: 1px solid var(--user-border); backdrop-filter: none;
}
.user-body .user-auth-brand { color: var(--user-text); font-weight: 700; letter-spacing: 0.02em; gap: 10px; }
.user-body .user-brand-logo { width: 40px; height: 40px; object-fit: contain; }
.user-body .user-center-username { color: var(--user-muted); }
.user-body .user-auth-back, .user-body .user-center-logout {
  padding: 8px 14px; border: 1px solid var(--user-border); border-radius: 8px;
  background: var(--user-surface); color: var(--user-text); font-weight: 600; cursor: pointer;
}
.user-body .user-auth-back:hover, .user-body .user-center-logout:hover { background: var(--user-bg); }

/* Shared bits */
.user-body .user-auth-kicker { color: var(--user-muted) !important; letter-spacing: 0.08em; }
.user-body .user-auth-kicker span {
  width: 8px; height: 8px; border-radius: 2px; background: var(--user-accent); box-shadow: none;
}
.user-body .user-auth-copy h1, .user-body .user-center-intro h1 {
  color: var(--user-text); font-weight: 700; letter-spacing: -0.02em; text-shadow: none;
}
.user-body .user-auth-copy > p:not(.user-auth-kicker),
.user-body .user-center-intro > div > p:not(.user-auth-kicker) { color: var(--user-muted); }
.user-body .user-center-online {
  color: var(--user-green); background: var(--user-green-bg);
  border: 1px solid var(--user-green-border); border-radius: 999px; font-weight: 600;
}
.user-body .user-center-online span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--user-green); box-shadow: none;
}

/* Login page */
.user-body .user-auth-stage { position: relative; background: transparent; }
.user-body .user-deco { display: none; }
.user-body .user-auth-summary span {
  padding: 7px 12px; border: 1px solid var(--user-border); border-radius: 8px;
  background: var(--user-surface); color: var(--user-muted); font-weight: 500;
}
.user-body .user-auth-card {
  padding: 28px; border: 1px solid var(--user-border); border-radius: 14px;
  background: var(--user-surface); box-shadow: none;
}
.user-body .user-auth-card-heading h2 { color: var(--user-text); font-weight: 700; }
.user-body .user-auth-card-heading p, .user-body .user-auth-footnote { color: var(--user-muted); }
.user-body .user-auth-lock {
  border: 1px solid var(--user-border); border-radius: 10px;
  background: var(--user-bg); box-shadow: none;
}
.user-body .user-auth-lock::after {
  width: 8px; height: 8px; border-radius: 2px; background: var(--user-accent); box-shadow: none;
}

/* Forms */
.user-body .field-group > span, .user-body .user-auth-card .field-group > span {
  color: var(--user-text); font-size: 14px; font-weight: 600;
}
.user-body .field-group input, .user-body .field-group select, .user-body .user-auth-card .field-group input {
  min-height: 46px; padding: 10px 12px; color: var(--user-text);
  background: var(--user-surface); border: 1px solid var(--user-border); border-radius: 8px; box-shadow: none;
}
.user-body .field-group input::placeholder { color: var(--user-muted); }
.user-body .field-group input:focus, .user-body .field-group select:focus,
.user-body .user-auth-card .field-group input:focus {
  border-color: var(--user-accent); box-shadow: 0 0 0 3px rgba(247, 140, 18, 0.18); outline: none;
}
.user-body .user-auth-submit, .user-body .user-center-layout .purchase-button {
  min-height: 48px; border: 1px solid var(--user-accent); border-radius: 8px;
  background: var(--user-accent); color: #fff; font-weight: 700; font-size: 15px;
  text-shadow: none; box-shadow: none; cursor: pointer;
}
.user-body .user-auth-submit:hover:not(:disabled),
.user-body .user-center-layout .purchase-button:hover:not(:disabled) {
  background: var(--user-accent-hover); border-color: var(--user-accent-hover);
}
.user-body .user-auth-submit:disabled, .user-body .user-center-layout .purchase-button:disabled {
  opacity: 1; background: var(--user-bg); color: var(--user-muted);
  border-color: var(--user-border); cursor: not-allowed;
}
.user-body button:disabled { cursor: not-allowed; }

/* Member center cards */
.user-body .membership-card, .user-body .user-center-layout .membership-purchase,
.user-body .user-center-layout .membership-orders {
  border: 1px solid var(--user-border); border-radius: 14px;
  background: var(--user-surface); box-shadow: none;
}
.user-body .membership-card > h2, .user-body .user-center-layout .membership-purchase h2,
.user-body .user-center-layout .membership-orders h2 {
  color: var(--user-text); font-weight: 700;
}
.user-body .user-center-layout .membership-purchase p,
.user-body .user-center-layout .membership-checkout p,
.user-body .user-center-layout .membership-orders p { color: var(--user-muted); }
.user-body .membership-heading { background: transparent; border-bottom: 0; }
.user-body .membership-info-title { margin: 0; padding: 22px 28px 14px; border-bottom: 0; }
.user-body .membership-grid { padding: 0 28px 26px; }
.user-body .membership-avatar {
  color: #fff; background: var(--user-accent); border: 0; border-radius: 10px;
  box-shadow: none; font-weight: 700;
}
.user-body .membership-identity p, .user-body .membership-item dt,
.user-body .user-center-layout .membership-orders li span { color: var(--user-muted); }
.user-body .membership-identity h2, .user-body .membership-item dd { color: var(--user-text); overflow-wrap: anywhere; }
.user-body .membership-item {
  border: 1px solid var(--user-border); border-radius: 10px; background: var(--user-bg);
}
.user-body .tier-chip, .user-body .membership-state {
  border-radius: 999px; border: 1px solid var(--user-green-border);
  color: var(--user-green); background: var(--user-green-bg); font-weight: 600;
}
.user-body .tier-chip-pro { color: var(--user-accent-hover); border-color: #f5cf9e; background: #fdf1e0; }
.user-body .tier-chip-free, .user-body .membership-state-free {
  color: var(--user-muted); border-color: var(--user-border); background: var(--user-bg);
}
.user-body .membership-state-expired {
  color: var(--user-red); border-color: var(--user-red-border); background: var(--user-red-bg);
}

/* Purchase */
.user-body .purchase-layout { display: grid; gap: 24px; margin-top: 16px; }
.user-body .purchase-checkout {
  padding: 20px; border: 1px solid var(--user-border); border-radius: 12px;
  background: var(--user-bg); text-align: center;
}
.user-body .purchase-checkout h3 { margin: 0 0 10px; color: var(--user-text); font-size: 16px; font-weight: 700; }
.user-body .purchase-checkout p { margin: 6px 0; }
.user-body .purchase-checkout .purchase-button { width: 100%; margin-top: 14px; }
@media (min-width: 821px) {
  .user-body .purchase-layout-checkout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}
.user-body .user-center-layout .membership-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.user-body .user-center-layout .membership-plan {
  position: relative; cursor: pointer;
  border: 1px solid var(--user-border); border-radius: 12px;
  background: var(--user-surface); box-shadow: none;
}
.user-body .membership-plan-radio {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.user-body .user-center-layout .membership-plan:hover {
  border-color: var(--user-accent); box-shadow: none; transform: none;
}
.user-body .user-center-layout .membership-plan-selected {
  border-color: var(--user-accent); background: #fdf4e6;
  box-shadow: 0 0 0 1px var(--user-accent);
}
.user-body .user-center-layout .membership-plan:has(.membership-plan-radio:focus-visible) {
  outline: 2px solid var(--user-accent); outline-offset: 2px;
}
.user-body .user-center-layout .membership-plan strong { color: var(--user-text); }
.user-body .user-center-layout .membership-price {
  color: var(--user-accent); font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.user-body .user-center-layout .membership-plan > span:last-child:not(.membership-price) { color: var(--user-muted); }
.user-body .user-center-layout .purchase-availability {
  background: var(--user-bg); color: var(--user-muted); border: 1px solid var(--user-border);
  border-radius: 8px; padding: 10px 14px; font-weight: 600;
}
.user-body .user-center-layout .purchase-error { color: var(--user-red); font-weight: 600; }
.user-body .user-center-layout .payment-frame {
  border: 1px solid var(--user-border); border-radius: 12px;
  box-shadow: none; background: #fff;
  width: 264px; max-width: 100%; margin: 20px auto;
}
.user-body .membership-checkout > button:not(.purchase-button), .user-body .membership-orders button {
  padding: 9px 14px; border: 1px solid var(--user-border); border-radius: 8px;
  color: var(--user-text); background: var(--user-surface); font-weight: 600;
  box-shadow: none; cursor: pointer; margin-left: 8px;
}
.user-body .membership-checkout > button:not(.purchase-button):hover, .user-body .membership-orders button:hover {
  background: var(--user-bg);
}
.user-body .user-center-layout .membership-orders li { border-bottom: 1px solid var(--user-border); }

/* Flash */
.user-body .flash {
  border: 1px solid var(--user-border); border-radius: 10px;
  background: var(--user-surface); color: var(--user-text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); font-weight: 600;
}
.user-body .flash-error { border-color: var(--user-red-border); color: var(--user-red); }

/* Layout helpers kept from the previous theme */
.user-body .user-settings { padding-top: 28px; gap: 24px; }
.user-body .user-center-intro .user-auth-kicker { margin-bottom: 8px !important; }
.user-body .user-center-layout #membership-purchase-form > p { margin: 0; line-height: 1.5; }
.user-body .user-center-layout .membership-plans { margin-block: 4px; }
@media (max-width: 820px) {
  .user-body .user-auth-stage { padding-block: 46px; gap: 32px; }
  .user-body .user-settings { padding-top: 36px; }
}
@media (max-width: 600px) {
  .user-body .user-center-layout .membership-plans { grid-template-columns: 1fr; gap: 12px; }
  .user-body .user-center-layout .membership-plan { padding: 14px 12px; }
  .user-body .user-center-layout .membership-price { font-size: 26px; }
}
@media (max-width: 520px) {
  .user-body .user-auth-header, .user-body .user-center-header { padding-inline: 16px; }
  .user-body .user-auth-brand { font-size: 14px; gap: 8px; }
  .user-body .user-brand-logo { width: 36px; height: 36px; }
  .user-body .user-auth-back, .user-body .user-center-logout { padding: 7px 10px; font-size: 12px; }
  .user-body .user-settings { width: calc(100% - 32px); gap: 24px; padding-top: 24px; }
  .user-body .user-center-intro h1 { font-size: 30px; }
  .user-body .user-center-layout .membership-purchase,
  .user-body .user-center-layout .membership-checkout,
  .user-body .user-center-layout .membership-orders { padding: 22px 18px; }
  .user-body .user-center-layout .membership-purchase h2 { font-size: 22px; }
  .user-body .membership-info-title { padding: 16px; }
  .user-body .membership-checkout > button { margin-block: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .user-body .user-auth-back, .user-body .user-center-logout,
  .user-body .user-auth-submit, .user-body .user-center-layout .purchase-button,
  .user-body .membership-plan, .user-body .membership-checkout > button, .user-body .membership-orders button {
    transition: none;
  }
}