:root {
  color-scheme: light;
  --canvas: #f3f5f6;
  --surface: #ffffff;
  --text: #172329;
  --muted: #56666e;
  --line: #c8d1d6;
  --faint: #e4e9eb;
  --accent: #006c90;
  --accent-fill: #006c90;
  --on-accent: #ffffff;
  --success: #216443;
  --warning: #805515;
  --danger: #b53444;
  --icon-filter: none;
  --primary-icon-filter: invert(1);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  background: var(--canvas);
  color: var(--text);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101314;
  --surface: #181d1f;
  --text: #e9f1f4;
  --muted: #a1afb5;
  --line: #35434a;
  --faint: #252d31;
  --accent: #6cd5fa;
  --accent-fill: #6cd5fa;
  --on-accent: #102027;
  --success: #84d4ac;
  --warning: #e5bc77;
  --danger: #ff8b99;
  --icon-filter: invert(1);
  --primary-icon-filter: none;
}
* {box-sizing: border-box; letter-spacing: 0;}
body {margin: 0; min-width: 280px;}
button, input {font: inherit;}
button, a, input, summary { -webkit-tap-highlight-color: transparent;}
button {cursor: pointer;}
button:disabled {cursor: not-allowed; opacity: .48;}
button, input, a {touch-action: manipulation;}
:focus-visible {outline: 2px solid var(--accent); outline-offset: 4px;}
h1:focus, [role="alert"]:focus {outline: none;}
#app {min-height: 100svh; display: flex; flex-direction: column;}
.topbar {min-height: 86px; padding: 22px 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line);}
.brand {display: flex; align-items: center; gap: 18px; min-width: 0;}
.logo {display: block; width: 58px; height: auto; aspect-ratio: 374/222; flex: none;}
.logo-dark {display: none;}
[data-theme="dark"] .logo-light {display: none;}
[data-theme="dark"] .logo-dark {display: block;}
.brand-name {font-size: 20px; font-weight: 600; white-space: nowrap;}
.themes {display: flex; gap: 2px; border-left: 1px solid var(--line); padding-left: 18px; flex: none;}
.themes .tool[aria-pressed="true"] {background: var(--faint); box-shadow: inset 0 -2px var(--accent);}
.main {width: min(100%, 1024px); padding: 0 40px 64px; margin: 0 auto; flex: 1;}
.navigation {min-height: 81px; display: flex; align-items: stretch; justify-content: center; gap: 24px; border-bottom: 1px solid var(--line);}
.button.nav span {min-width: 0; overflow-wrap: anywhere;}
.pager {display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-height: 44px;}
.button {border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 6px; min-height: 44px; padding: 11px 17px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; text-decoration: none; line-height: 1.5; transition: background-color 130ms, border-color 130ms, transform 130ms;}
.button:hover:not(:disabled) {background: var(--faint); border-color: var(--muted);}
.button:active:not(:disabled) {transform: translateY(1px);}
.button.primary {background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); font-weight: 600; width: 100%;}
.button.primary:hover:not(:disabled) {filter: brightness(1.08);}
.button.primary .icon {filter: var(--primary-icon-filter);}
.button.danger {border-color: var(--danger); color: var(--danger);}
.button.nav {position: relative; border: 0; border-radius: 0; color: var(--muted); padding: 18px 8px; min-width: 104px;}
.button.nav.active {color: var(--text);}
.button.nav.active::after {content: ""; position: absolute; bottom: -1px; height: 2px; background: var(--accent); left: 8px; right: 8px;}
.button.nav:hover:not(:disabled) {background: none; color: var(--text);}
.button.text {border-color: transparent; color: var(--accent); padding: 10px 8px;}
.button.tool {width: 40px; height: 40px; min-height: 40px; padding: 10px; border: 0; flex: none;}
.icon {width: 20px; height: 20px; object-fit: contain; flex: none; filter: var(--icon-filter);}
.workspace {width: min(100%, 440px); margin: 62px auto 0; display: flex; flex-direction: column; align-items: stretch; gap: 20px;}
.workspace.devices {width: min(100%, 600px);}
.resume {margin-top: 16px;}
.resume + .workspace {margin-top: 28px;}
.signal {width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; position: relative; margin-bottom: 2px;}
.signal::before {content: ""; position: absolute; inset: -5px; border: 2px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent); border-radius: 50%; transform: rotate(-35deg);}
.signal .icon {width: 30px; height: 30px;}
.signal.complete::before {border-top-color: var(--success); border-right-color: var(--success);}
.signal.working::before {animation: signal-spin 1.6s linear infinite;}
h1 {font-size: 28px; line-height: 1.35; margin: 2px 0 4px; font-weight: 600; overflow-wrap: anywhere;}
h2 {font-size: 17px; line-height: 1.5; margin: 0; font-weight: 600;}
p {margin: 0; line-height: 1.75;}
.lede, .subtle {color: var(--muted); font-size: 13px; line-height: 1.65;}
.login-command {min-height: 52px; margin-top: 10px;}
.entry-links {display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; gap: 10px;}
.form {display: flex; flex-direction: column; gap: 22px;}
.field {display: flex; flex-direction: column; gap: 9px; min-width: 0;}
.field-label {font-size: 12px; color: var(--muted); font-weight: 600;}
input:not([type="checkbox"]) {width: 100%; min-width: 0; border-radius: 5px; border: 1px solid var(--line); background: var(--surface); color: var(--text); min-height: 46px; padding: 11px 13px; font-size: 16px;}
input:not([type="checkbox"]):focus {border-color: var(--accent);}
.segments {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); gap: 8px; margin-bottom: 2px;}
.segments button {padding: 12px 8px; background: none; color: var(--muted); border: 0; border-bottom: 2px solid transparent; min-height: 44px;}
.segments button.selected {color: var(--text); border-bottom-color: var(--accent);}
.note {display: flex; gap: 10px; color: var(--muted); font-size: 12px; line-height: 1.8; align-items: flex-start;}
.note .icon {width: 17px; height: 17px; margin-top: 2px;}
.note.warning {color: var(--warning);}
.facts {margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 0;}
.fact {display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 15px; padding: 11px 0; align-items: baseline;}
.fact dt {font-size: 12px; color: var(--muted);}
.fact dd {font-size: 13px; margin: 0; overflow-wrap: anywhere; line-height: 1.6;}
.mono, code {font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; font-variant-numeric: tabular-nums;}
.secret-block {border: 1px solid var(--line); border-left: 2px solid var(--accent); background: var(--surface); border-radius: 4px; padding: 12px 15px 18px;}
.secret-toolbar {display: flex; align-items: center; gap: 4px; margin-bottom: 8px;}
.secret-toolbar .field-label {flex: 1;}
.secret {display: block; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; user-select: all;}
.checkbox {display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.6; cursor: pointer;}
.checkbox input {width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none;}
.request-id {display: flex; align-items: center; gap: 8px; padding: 14px 0; border-block: 1px solid var(--line); margin-top: -12px;}
.request-id code {flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.8; font-size: 14px;}
.offline-entry {border-top: 1px solid var(--line); padding-top: 6px;}
.offline-entry summary {padding: 12px 0; color: var(--muted); cursor: pointer; min-height: 44px;}
.offline-entry .form {padding-top: 16px;}
.section-title {display: flex; align-items: center; justify-content: space-between; margin-bottom: -16px;}
.device-list {padding: 0; margin: 0; list-style: none;}
.device {padding: 17px 0; border-bottom: 1px solid var(--line); display: flex; gap: 16px; align-items: center;}
.device-copy {display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 5px;}
.device-copy code {font-size: 11px; color: var(--muted); overflow-wrap: anywhere;}
.device-copy strong {font-size: 14px; font-weight: 500;}
.device-meta {color: var(--muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere;}
.device.revoked {opacity: .65;}
.error {display: flex; align-items: flex-start; gap: 11px; border-top: 1px solid var(--danger); padding-top: 16px; color: var(--danger); font-size: 13px;}
.error .icon {margin-top: 2px;}
.footer {padding: 22px 40px; border-top: 1px solid var(--line); min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 11px;}
.status {display: flex; gap: 8px; align-items: center; min-width: 95px;}
.status-dot {width: 6px; height: 6px; background: var(--muted); display: block;}
.authenticated .status-dot {background: var(--success);}
.status.working .status-dot {background: var(--accent);}
.origin {overflow-wrap: anywhere; text-align: right;}
.dialog {width: min(460px, calc(100% - 32px)); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 25px; box-shadow: 0 18px 65px #0003;}
.dialog::backdrop {background: #0008;}
.dialog p {margin: 18px 0 25px; overflow-wrap: anywhere; color: var(--muted);}
.actions {display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap;}
.boot {padding: 40px;}
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;}
@keyframes signal-spin {to {transform: rotate(325deg);}}
@media (min-width: 1400px) {.workspace {margin-top: 80px;}}
@media (max-width: 600px) {
  .topbar {padding: 18px 20px; min-height: 75px; gap: 8px;}
  .brand {gap: 12px;}
  .brand-name {font-size: 17px;}
  .logo {width: 45px;}
  .themes {padding-left: 8px; gap: 0;}
  .themes .tool {width: 34px; min-height: 40px; padding: 8px;}
  .main {padding: 0 24px 44px;}
  .navigation {gap: 8px; min-height: 70px;}
  .button.nav {min-width: 0; flex: 1; font-size: 12px; gap: 7px; padding: 16px 3px;}
  .button.nav .icon {width: 17px; height: 17px;}
  .workspace {margin-top: 44px; gap: 20px;}
  h1 {font-size: 25px;}
  .footer {padding: 18px 24px;}
}
@media (max-width: 359px) {
  .topbar {padding: 16px 12px;}
  .brand {gap: 8px;}
  .brand-name {font-size: 16px;}
  .logo {width: 34px;}
  .themes {padding-left: 4px;}
  .themes .tool {width: 30px;}
  .main {padding-inline: 18px;}
  .entry-links {flex-wrap: wrap;}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {animation: none !important; transition: none !important;}
}