:root {
  --buyer-ink: #121722;
  --buyer-blue: #2155d9;
  --buyer-bg: #f6f7f9;
  --buyer-line: #dfe3e9;
  --buyer-soft-line: #edf0f3;
  --buyer-muted: #667085;
  --buyer-green: #16794b;
  --buyer-red: #b42318;
}

.buyer-control-dialog {
  width: min(960px, calc(100vw - 40px));
  height: min(700px, calc(100vh - 40px));
  max-width: none;
  max-height: none;
  padding: 0;
  color: var(--buyer-ink);
  background: #fff;
  border: 1px solid var(--buyer-line);
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(16,24,40,.22);
  overflow: hidden;
}

.buyer-control-dialog[open] { animation: buyer-dialog-in .18s cubic-bezier(.2,.8,.2,1); }

.buyer-control-dialog::backdrop { background: rgba(13,18,28,.58); backdrop-filter: blur(3px); }

.buyer-control-shell { height: 100%; display: grid; grid-template-rows: 78px minmax(0,1fr); font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; }

.buyer-control-head { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 18px; align-items: center; padding: 0 24px; border-bottom: 1px solid var(--buyer-line); }
.buyer-control-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.buyer-control-identity > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: var(--buyer-ink); border-radius: 50%; font-weight: 750; }
.buyer-control-identity > div { min-width: 0; display: grid; gap: 2px; }
.buyer-control-identity small { color: var(--buyer-muted); font-size: 10px; }
.buyer-control-identity h2 { margin: 0; overflow: hidden; font-size: 18px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.buyer-account-status { min-height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; color: #344054; background: #fff; border: 1px solid var(--buyer-line); border-radius: 999px; font-size: 11px; }
.buyer-account-status i { width: 7px; height: 7px; background: #98a2b3; border-radius: 50%; }
.buyer-account-status.active i { background: #22a06b; box-shadow: 0 0 0 3px #e7f6ef; }
.buyer-control-close { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; color: #475467; background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.buyer-control-close:hover { color: var(--buyer-ink); background: #f2f4f7; }
.buyer-control-close svg { fill: none; stroke: currentColor; stroke-width: 1.7; }

.buyer-control-layout { min-height: 0; display: grid; grid-template-columns: 190px minmax(0,1fr); }
.buyer-control-nav { padding: 18px 12px; background: #171b24; }
.buyer-control-nav button { width: 100%; min-height: 46px; display: flex; align-items: center; padding: 0 12px; color: #c9ced8; background: transparent; border: 0; border-radius: 10px; font-size: 12px; text-align: left; cursor: pointer; }
.buyer-control-nav button:hover, .buyer-control-nav button.active { color: #fff; background: rgba(255,255,255,.09); }

.buyer-control-content { min-height: 0; overflow: auto; background: #fff; }
.buyer-account-panel { min-height: 100%; padding: 30px 36px 36px; }
.buyer-account-panel.active { animation: buyer-panel-in .16s ease-out; }
.buyer-account-panel:not(.active) { display: none; }
.buyer-account-panel > header { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.buyer-account-panel > header > div { display: flex; align-items: center; }
.buyer-account-panel h3 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.buyer-account-panel > header small { color: var(--buyer-muted); font-size: 11px; }
.buyer-panel-copy { margin: -8px 0 22px; color: var(--buyer-muted); font-size: 12px; line-height: 1.7; }

.buyer-quiet-button, .buyer-quiet-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; color: #344054; background: #fff; border: 1px solid #cfd5dd; border-radius: 10px; font-size: 11px; font-weight: 650; text-decoration: none; cursor: pointer; }
.buyer-quiet-button:hover, .buyer-quiet-link:hover { color: var(--buyer-blue); border-color: #9db2e9; background: #eef3ff; }
.buyer-quiet-button:disabled { opacity: .5; cursor: not-allowed; }

.buyer-identity-ledger { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--buyer-line); }
.buyer-identity-ledger > div { min-width: 0; padding: 20px 0; border-bottom: 1px solid var(--buyer-soft-line); }
.buyer-identity-ledger > .split-left { padding-right: 24px; border-right: 1px solid var(--buyer-soft-line); }
.buyer-identity-ledger > .split-right { padding-left: 24px; }
.buyer-identity-ledger > .wide { grid-column: 1/-1; }
.buyer-identity-ledger dt { margin-bottom: 8px; color: var(--buyer-muted); font-size: 11px; }
.buyer-identity-ledger dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 650; }
.buyer-identity-ledger code { padding: 3px 6px; color: #344054; background: #f2f4f7; border-radius: 4px; font-size: 11px; }

.buyer-security-note { margin-bottom: 20px; padding: 16px 18px; background: #f7f9fd; border: 1px solid var(--buyer-line); box-shadow: inset 0 3px 0 var(--buyer-blue); }
.buyer-security-note strong { font-size: 12px; }
.buyer-security-note p { margin: 6px 0 0; color: #475467; font-size: 11px; line-height: 1.7; }
.buyer-password-form { max-width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.buyer-password-form label { display: grid; align-content: start; gap: 7px; color: #344054; font-size: 11px; font-weight: 650; }
.buyer-password-form label:first-child { grid-column: 1/-1; }
.buyer-password-form input { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--buyer-ink); background: #fff; border: 1px solid #cfd5dd; border-radius: 10px; outline: 0; }
.buyer-password-form input:focus { border-color: var(--buyer-blue); box-shadow: 0 0 0 3px rgba(33,85,217,.12); }
.buyer-password-form label small { color: var(--buyer-muted); font-size: 10px; font-weight: 450; }
.buyer-primary-button { min-height: 44px; padding: 0 17px; color: #fff; background: var(--buyer-blue); border: 1px solid var(--buyer-blue); border-radius: 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.buyer-primary-button:hover { background: #1948bd; }
.buyer-primary-button:disabled { opacity: .55; cursor: wait; }
.buyer-form-state { align-self: center; margin: 0; color: var(--buyer-muted); font-size: 10px; line-height: 1.6; }
.buyer-form-state.good { color: var(--buyer-green); }
.buyer-form-state.bad { color: var(--buyer-red); }

.buyer-device-list { border-top: 1px solid var(--buyer-line); }
.buyer-device-row { min-height: 76px; display: grid; grid-template-columns: minmax(150px,1fr) minmax(140px,.8fr) auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--buyer-soft-line); }
.buyer-device-name, .buyer-device-meta { display: grid; gap: 5px; }
.buyer-device-name strong { font-size: 12px; }
.buyer-device-name span, .buyer-device-meta span { color: var(--buyer-muted); font-size: 10px; }
.buyer-current-label { width: max-content; display: inline-flex; align-items: center; gap: 5px; color: var(--buyer-green) !important; font-weight: 700; }
.buyer-current-label::before { content: ""; width: 6px; height: 6px; background: #22a06b; border-radius: 50%; }
.buyer-revoke-device { min-height: 44px; padding: 0 11px; color: var(--buyer-red); background: #fff; border: 1px solid #e5c4c0; border-radius: 10px; font-size: 10px; cursor: pointer; }
.buyer-revoke-device:hover { background: #fff3f2; }
.buyer-loading-row, .buyer-empty-row, .buyer-error-row { margin: 0; padding: 22px 0; color: var(--buyer-muted); font-size: 11px; text-align: center; }
.buyer-error-row { color: var(--buyer-red); }
.buyer-retry-button { min-height: 44px; margin-top: 10px; padding: 0 13px; color: var(--buyer-blue); background: #fff; border: 1px solid #cdd8f2; border-radius: 10px; font-size: 10px; font-weight: 700; cursor: pointer; }
.buyer-log-heading { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 8px; }
.buyer-log-heading h4 { margin: 0; font-size: 12px; }
.buyer-log-heading span { color: var(--buyer-muted); font-size: 9px; }
.buyer-security-log { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--buyer-soft-line); }
.buyer-security-log li:not(.buyer-loading-row) { position: relative; min-height: 52px; display: grid; grid-template-columns: minmax(110px,.75fr) minmax(140px,1fr) auto; gap: 14px; align-items: center; padding: 10px 0 10px 18px; border-bottom: 1px solid var(--buyer-soft-line); }
.buyer-security-log li:not(.buyer-loading-row)::before { content: ""; position: absolute; left: 1px; width: 6px; height: 6px; background: #98a2b3; border-radius: 50%; }
.buyer-security-log strong { font-size: 11px; }
.buyer-security-log span, .buyer-security-log time { color: var(--buyer-muted); font-size: 9px; }

.buyer-order-tabs { display: flex; gap: 4px; margin-bottom: 4px; padding: 4px; background: #f2f4f7; border-radius: 10px; }
.buyer-order-tabs button { min-height: 38px; flex: 1; padding: 0 13px; color: var(--buyer-muted); background: transparent; border: 0; border-radius: 8px; font-size: 11px; font-weight: 650; cursor: pointer; }
.buyer-order-tabs button.active { color: var(--buyer-ink); background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.1); }
.buyer-order-tabs span { margin-left: 4px; color: var(--buyer-blue); }
.buyer-order-panel { border-top: 1px solid var(--buyer-line); }
.buyer-order-row { padding: 18px 0; border-bottom: 1px solid var(--buyer-soft-line); }
.buyer-order-primary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.buyer-order-primary > div { min-width: 0; display: grid; gap: 5px; }
.buyer-order-primary strong, .buyer-order-amount { font-size: 12px; }
.buyer-order-primary code { color: var(--buyer-muted); font-size: 9px; overflow-wrap: anywhere; }
.buyer-order-amount { flex: 0 0 auto; font-weight: 750; }
.buyer-order-meta { display: flex; flex-wrap: wrap; gap: 6px 15px; margin-top: 9px; color: var(--buyer-muted); font-size: 9px; }
.buyer-order-status { color: #344054; font-weight: 700; }
.buyer-order-status.paid, .buyer-order-status.verified { color: var(--buyer-green); }
.buyer-order-codes { display: grid; gap: 6px; margin-top: 11px; }
.buyer-order-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; background: #f7f9fc; border: 1px solid #e8ecf2; border-radius: 10px; }
.buyer-order-code code { color: #1d2939; font-size: 10px; overflow-wrap: anywhere; }
.buyer-order-code-actions { flex: 0 0 auto; display: flex; gap: 5px; }
.buyer-order-code button, .buyer-order-code a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 11px; color: var(--buyer-blue); background: #fff; border: 1px solid #cdd8f2; border-radius: 8px; font-size: 9px; text-decoration: none; cursor: pointer; }

@keyframes buyer-dialog-in {
  from { transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes buyer-panel-in {
  from { transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 680px) {
  .buyer-control-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .buyer-control-shell { grid-template-rows: 68px 48px minmax(0,1fr); }
  .buyer-control-head { grid-row: 1; padding: 0 15px; gap: 10px; }
  .buyer-account-status { display: none; }
  .buyer-control-layout { min-height: 0; display: contents; }
  .buyer-control-nav { grid-row: 2; display: flex; gap: 0; padding: 0 7px; overflow-x: auto; scrollbar-width: none; }
  .buyer-control-nav::-webkit-scrollbar { display: none; }
  .buyer-control-nav button { min-width: max-content; min-height: 48px; padding: 0 10px; border-radius: 0; }
  .buyer-control-nav button.active { background: transparent; box-shadow: inset 0 -2px #84a5ff; }
  .buyer-control-content { grid-row: 3; }
  .buyer-account-panel { padding: 24px 18px 30px; }
  .buyer-account-panel > header { margin-bottom: 18px; }
  .buyer-account-panel > header small { display: none; }
  .buyer-identity-ledger { grid-template-columns: 1fr; }
  .buyer-identity-ledger > div, .buyer-identity-ledger > .split-left, .buyer-identity-ledger > .split-right { padding: 15px 0; border-right: 0; }
  .buyer-identity-ledger > .wide { grid-column: auto; }
  .buyer-password-form { grid-template-columns: 1fr; }
  .buyer-password-form label:first-child { grid-column: auto; }
  .buyer-device-row { grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
  .buyer-device-meta { grid-column: 1/-1; grid-row: 2; display: flex; gap: 12px; }
  .buyer-security-log li:not(.buyer-loading-row) { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .buyer-security-log li:not(.buyer-loading-row) span { grid-column: 1/-1; }
  .buyer-order-code { align-items: flex-start; flex-direction: column; }
  .buyer-order-code-actions { width: 100%; }
  .buyer-order-code button, .buyer-order-code a { flex: 1; justify-content: center; }
  .buyer-order-tabs button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .buyer-control-dialog::backdrop { backdrop-filter: none; }
  .buyer-control-dialog[open], .buyer-account-panel.active { animation: none; }
}

.referral-ledger-summary code { font-size:1rem; letter-spacing:.08em; }
.referral-rules { margin-top:18px; }
.buyer-account-panel[data-account-panel="referrals"] .buyer-password-form { margin-top:18px; }