:root {
  color-scheme: light;
  --blue-950: #052a66;
  --blue-700: #075ed8;
  --blue-600: #0876f9;
  --blue-100: #e8f3ff;
  --ink: #102442;
  --ink-soft: #405574;
  --muted: #60728b;
  --border: #d8e7f7;
  --surface: #fff;
  --success: #15734b;
  --success-soft: #edf9f3;
  --warning: #8a5200;
  --warning-soft: #fff8e9;
  --danger: #a63232;
  --danger-soft: #fff3f3;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 20rem; }
body { min-width: 20rem; min-height: 100vh; margin: 0; overflow-x: clip; color: var(--ink); background: #f5f9fe; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(8, 118, 249, .48); outline-offset: 3px; }
h1, h2, p { margin-top: 0; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 1000; padding: .7rem 1rem; color: #fff; background: var(--ink); border-radius: .55rem; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.site-shell { width: min(calc(100% - 3rem), 75rem); margin-inline: auto; }
.bind-shell { width: min(calc(100% - 3rem), 47.5rem); margin-inline: auto; }
.site-header { height: 4.25rem; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; height: 100%; align-items: center; gap: .9rem; }
.brand { display: inline-flex; min-height: 2.75rem; align-items: center; gap: .65rem; font-size: 1.18rem; font-weight: 760; }
.brand img { display: block; }
.header-divider { width: 1px; height: 1.3rem; background: #bdd9f7; }
.page-name { color: var(--ink-soft); font-size: .98rem; }
.header-nav { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.header-nav a { display: inline-flex; min-height: 2.75rem; align-items: center; font-size: .93rem; font-weight: 640; }
.console-link { min-height: 2.55rem !important; padding-inline: .95rem; color: #fff; background: var(--blue-600); border-radius: .62rem; }
.intro { padding: clamp(2.4rem, 4vw, 3.25rem) 0 2rem; background: #f0f7ff; border-bottom: 1px solid var(--border); }
.eyebrow { margin-bottom: .65rem; color: var(--blue-700); font-size: .7rem; font-weight: 800; letter-spacing: .16em; }
.intro h1 { margin-bottom: .85rem; font-size: clamp(1.85rem, calc(1.63rem + .8vw), 2.35rem); line-height: 1.22; }
.intro p:last-child { max-width: 42rem; margin-bottom: 0; color: var(--ink-soft); }
.workspace { min-height: 31rem; padding: 2rem 0 4.5rem; }
.status-panel { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1rem; align-items: start; padding: 1.2rem; background: var(--blue-100); border: 1px solid #c7e2ff; border-radius: 1rem; }
.status-panel[data-tone="success"] { color: var(--success); background: var(--success-soft); border-color: #bfe6d3; }
.status-panel[data-tone="warning"] { color: var(--warning); background: var(--warning-soft); border-color: #f0d9aa; }
.status-panel[data-tone="danger"] { color: var(--danger); background: var(--danger-soft); border-color: #efc8c8; }
.status-mark { width: .75rem; height: .75rem; margin-top: .55rem; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 .32rem rgba(8,118,249,.12); }
.status-label { margin-bottom: .2rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.status-panel h2 { margin-bottom: .35rem; color: currentColor; font-size: 1.25rem; line-height: 1.35; }
.status-panel p:last-child { margin-bottom: 0; color: var(--ink-soft); }
.identity-section { margin-top: 1.8rem; }
.identity-section h2 { margin-bottom: .25rem; font-size: 1.18rem; }
.section-copy { margin-bottom: 1rem; color: var(--muted); }
.identity-list { border-block: 1px solid var(--border); }
.identity-row { display: grid; grid-template-columns: 9rem minmax(0,1fr) auto; gap: 1rem; align-items: center; min-height: 5.5rem; padding: 1rem 0; }
.identity-row + .identity-row { border-top: 1px solid var(--border); }
.identity-provider { color: var(--muted); font-size: .9rem; font-weight: 700; }
.identity-row div { min-width: 0; }
.identity-row strong, .identity-row div span { display: block; overflow-wrap: anywhere; }
.identity-row div span { color: var(--muted); font-size: .9rem; }
.identity-state { color: var(--success); font-size: .82rem; font-weight: 750; }
.binding-notice { margin-top: 1.25rem; padding: 1rem 1.1rem; color: var(--ink-soft); background: var(--surface); border-left: 3px solid var(--blue-600); }
.binding-notice p { margin: .2rem 0 0; }
.action-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.button { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: .7rem 1.1rem; border: 1px solid transparent; border-radius: .68rem; font-weight: 720; }
.button.primary { color: #fff; background: var(--blue-600); }
.button.primary:hover { background: #0648ad; }
.button.secondary { color: var(--blue-950); background: #fff; border-color: var(--border); }
.button[hidden] { display: none; }
.button[disabled] { cursor: wait; opacity: .66; }
.action-help { min-height: 1.6rem; margin: .65rem 0 0; color: var(--muted); font-size: .88rem; }
.site-footer { border-top: 1px solid var(--border); background: #fff; }
.footer-inner { display: flex; min-height: 6rem; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); }
.footer-inner nav { display: flex; gap: 1rem; }

@media (max-width: 40rem) {
  .site-shell, .bind-shell { width: min(calc(100% - 2rem), 47.5rem); }
  .site-header { height: auto; min-height: 4.25rem; }
  .header-inner { flex-wrap: wrap; padding-block: .7rem; }
  .header-nav { width: 100%; margin-left: 0; border-top: 1px solid var(--border); padding-top: .4rem; }
  .header-nav a { flex: 1; justify-content: center; }
  .intro { padding-top: 2rem; }
  .workspace { padding-top: 1.35rem; }
  .identity-row { grid-template-columns: 1fr; gap: .25rem; }
  .identity-state { justify-self: start; }
  .action-row { flex-direction: column; }
  .button { width: 100%; }
  .footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; }
}

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