:root {
  --ink: #172331;
  --muted: #687687;
  --surface: #ffffff;
  --canvas: #f3f6f8;
  --line: #dce2e8;
  --brand: #1769e0;
  --brand-strong: #0f56bd;
  --red: #b13d37;
  --green: #14744c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
button, input { font: inherit; }
button { cursor: pointer; }

.auth-page { display: grid; min-height: 100vh; background: #f5f5f7; }
.auth-shell { width: min(100% - 48px, 1180px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(380px, 420px); gap: 92px; align-items: center; margin: auto; padding: 48px 0; }
.agi-visual { position: relative; min-height: 620px; overflow: hidden; isolation: isolate; border: 1px solid #e3e5e8; border-radius: 18px; background: radial-gradient(circle at 50% 45%, #ffffff 0, #f8f9fa 52%, #f1f2f4 100%); box-shadow: 0 18px 50px rgba(30, 35, 42, .07); }
.agi-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.agi-visual-label { position: absolute; left: 28px; right: 28px; bottom: 24px; display: flex; align-items: center; gap: 9px; color: #727983; font: 650 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; }
.agi-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #1677ff; box-shadow: 0 0 0 3px rgba(22, 119, 255, .12); animation: agi-pulse 2.4s ease-in-out infinite; }
.agi-status-text { margin-left: auto; color: #1677ff; }
@keyframes agi-pulse { 50% { opacity: .35; transform: scale(.7); } }
.auth-panel { overflow: hidden; background: transparent; border: 0; border-radius: 0; }
.auth-brand { min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 0; color: #1d1d1f; background: transparent; border: 0; }
.auth-brand-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: #1d1d1f; border-radius: 50%; font: 700 15px/1 -apple-system, BlinkMacSystemFont, sans-serif; }
.auth-brand p { margin: 0 0 2px; color: #86868b; font-size: 9px; letter-spacing: .08em; }
.auth-brand strong { font-size: 16px; font-weight: 650; }
.auth-heading { padding: 74px 0 0; }
.auth-heading h1 { margin: 0; font-size: 34px; font-weight: 650; letter-spacing: 0; }
.auth-heading p { margin: 7px 0 0; color: var(--muted); }
.auth-form { display: grid; gap: 17px; padding: 30px 0 27px; }
.auth-form label > span { display: block; margin-bottom: 7px; color: #465463; font-size: 13px; font-weight: 650; }
.auth-form input { width: 100%; height: 43px; padding: 0 12px; color: var(--ink); background: #fff; border: 1px solid #c8d1da; border-radius: 6px; outline: none; }
.auth-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(23, 105, 224, .12); }
.trust-option { display: flex; align-items: flex-start; gap: 10px; }
.trust-option input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); }
.trust-option > span { margin: 0 !important; }
.trust-option strong, .trust-option small { display: block; }
.trust-option small { margin-top: 3px; color: var(--muted); font-weight: 400; line-height: 1.45; }
.auth-primary { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: #1677ff; border: 1px solid #1677ff; border-radius: 10px; font-weight: 650; }
.auth-primary:hover { background: #0066e6; }
.auth-primary:disabled { cursor: wait; opacity: .58; }
.auth-primary svg { width: 18px; height: 18px; }
.auth-error { margin: -3px 0 0; padding: 10px 12px; color: #972f2a; background: #fff1ef; border: 1px solid #ecc7c3; border-radius: 5px; }
.auth-notice { display: flex; align-items: flex-start; gap: 9px; padding: 16px 0; color: #86868b; background: transparent; border-top: 1px solid #dfe1e5; font-size: 12px; }
.auth-notice svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--green); }

.security-main { width: min(100% - 36px, 1440px); margin: 24px auto 52px; }
.security-intro { min-height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 23px 26px; background: #fff; border: 1px solid var(--line); border-radius: 7px; }
.security-intro h2 { margin-top: 3px; font-size: 22px; }
.security-intro p:last-child { margin-top: 6px; color: var(--muted); }
.security-setup-notice { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 13px 15px; color: #775915; background: #fffaf0; border: 1px solid #e6ce91; border-radius: 7px; }
.security-setup-notice svg { width: 20px; height: 20px; flex: 0 0 auto; color: #a17008; }
.security-setup-notice strong { color: #5e4610; }
.security-setup-notice p { margin: 3px 0 0; color: #806b3d; font-size: 12px; line-height: 1.45; }
.security-account { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 11px; color: #dce7f2; background: #1d3551; border: 1px solid #35516f; border-radius: 6px; }
.security-account svg { width: 17px; height: 17px; color: #55d08b; }
.security-section { margin-top: 20px; padding: 22px 24px 0; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 7px; }
.security-heading-actions { align-items: center; }
.security-help { max-width: 620px; margin: 0; color: var(--muted); font-size: 13px; text-align: right; }
.security-help-block { max-width: none; margin-top: 9px; text-align: left; }
.security-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#passwordDialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
#passwordForm { display: grid; gap: 12px; }
#passwordForm .dialog-heading, #passwordForm .dialog-actions { margin: 0; }
#passwordForm label { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; font-size: 13px; color: var(--muted); }
#passwordForm input { box-sizing: border-box; min-width: 0; width: 100%; }
#passwordError { margin: 0; color: #b42318; overflow-wrap: anywhere; }
.password-policy { margin: 0; color: #536271; font-size: 13px; line-height: 1.6; }
.security-table-wrap { margin: 18px -24px 0; overflow-x: auto; border-top: 1px solid var(--line); }
.security-table { min-width: 980px; }
.security-table th, .security-table td { padding: 14px 18px; }
.security-table th:nth-child(n) { width: auto; }
.security-table strong { display: inline-block; margin-right: 8px; }
.security-table code { color: #45576a; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.current-chip, .key-status { display: inline-flex; min-height: 23px; align-items: center; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 750; }
.current-chip { color: #1761b6; background: #e8f2ff; }
.key-status.active { color: var(--green); background: #e6f5ed; }
.key-status.revoked { color: var(--red); background: #f9e8e6; }
.row-subtitle { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.security-empty { min-height: 130px; display: grid; place-items: center; color: var(--muted); }
.security-empty[hidden] { display: none; }
.table-icon-button.danger { color: var(--red); border-color: #e5c3bf; }
.scope-field { display: grid; gap: 9px; margin: 16px 0 0; padding: 13px 14px; border: 1px solid #d8dee5; border-radius: 6px; }
.scope-field legend { padding: 0 5px; color: #4b5665; font-size: 13px; font-weight: 700; }
.scope-field label { display: flex; align-items: center; gap: 8px; }
.scope-field input { width: 17px; height: 17px; accent-color: var(--brand); }
.one-time-secret { display: flex; align-items: center; gap: 9px; padding: 13px; background: #f4f7fa; border: 1px solid #d8e0e7; border-radius: 6px; }
.one-time-secret code { min-width: 0; flex: 1; color: #173b65; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.icon-button.light { flex: 0 0 auto; color: #3c536b; background: #fff; border-color: #c7d1da; }
.secret-warning { display: flex; align-items: flex-start; gap: 8px; margin: 13px 0 0; color: #8b4a17; font-size: 12px; }
.secret-warning svg { width: 16px; height: 16px; flex: 0 0 auto; }
.enrollment-fields { display: contents; }
#activationDialog { width: min(680px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
#activationForm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 18px; }
#activationForm .dialog-heading, #activationForm .dialog-actions { grid-column: 1 / -1; }
#activationForm > label, #activationForm .enrollment-fields > label { margin: 0; min-width: 0; }
#activationForm select { width: 100%; min-height: 42px; padding: 8px 10px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; font: inherit; }
.key-status.pending { color: #8a620f; background: #fff5d8; }
.key-status.activated { color: var(--green); background: #e6f5ed; }
.key-status.expired { color: var(--muted); background: #eef1f4; }

@media (max-width: 700px) {
  #activationForm { grid-template-columns: minmax(0, 1fr); }
  .auth-shell { width: min(100% - 22px, 460px); grid-template-columns: 1fr; gap: 16px; }
  .agi-visual { min-height: 290px; max-height: 38vh; }
  .auth-brand, .auth-heading, .auth-form { padding-left: 20px; padding-right: 20px; }
  .security-main { width: min(100% - 24px, 1440px); }
  .security-intro, .section-heading.security-heading-actions { align-items: flex-start; flex-direction: column; }
  .security-intro .secondary-button, .security-actions { width: 100%; }
  .security-actions button { flex: 1; }
  .security-help { text-align: left; }
}
.device-pairing-details { min-width: 0; border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.device-pairing-details[hidden] { display: none; }
.device-pairing-details dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; margin: 0 0 8px; font-size: 14px; }
.device-pairing-details dt { color: #637083; }
.device-pairing-details dd { margin: 0; overflow-wrap: anywhere; }
#devicePairingError { color: #b42318; font-size: 14px; }
#devicePairingDialog input[name="userCode"] { text-transform: uppercase; letter-spacing: 0; }