/*
 * 岚盾离线 2FA 验证器的主视觉样式模块。
 * 文件按“设计变量 → 基础规则 → 页面区块 → 组件 → 响应式与无障碍”的顺序组织，
 * 便于在不依赖预处理器或 UI 框架的情况下维护。
 */

/* ============================== 1. 设计变量 ============================== */

:root {
  /* 深色背景使用略带蓝绿的黑色，降低纯黑界面的视觉疲劳。 */
  --color-bg: #07110f;
  --color-bg-soft: #0b1714;
  --color-surface: rgba(16, 31, 27, 0.88);
  --color-surface-solid: #10201c;
  --color-surface-raised: #162a25;
  --color-border: rgba(178, 218, 204, 0.14);
  --color-border-strong: rgba(178, 218, 204, 0.26);
  /* 聚焦色使用低饱和橄榄绿，强化边界但不产生荧光感。 */
  --color-focus-border: rgba(151, 181, 80, 0.78);
  --color-text: #f4f8f6;
  --color-text-muted: #9eafa9;
  --color-text-dim: #71827c;
  --color-accent: #d7ff63;
  --color-accent-strong: #bfea43;
  --color-accent-ink: #172100;
  --color-positive: #80e3aa;
  --color-danger: #ff8d7d;
  --color-danger-soft: rgba(255, 105, 89, 0.12);
  --color-warning: #ffd27a;

  /* 统一控制圆角、阴影与页面宽度，使各组件保持同一视觉语言。 */
  --radius-small: 10px;
  --radius-medium: 16px;
  --radius-large: 24px;
  --shadow-card: 0 24px 80px rgba(0, 0, 0, 0.34);
  --shadow-button: 0 10px 30px rgba(200, 243, 84, 0.13);
  --page-width: 1180px;

  /* 使用系统字体栈，避免网络字体破坏离线能力。 */
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
    "PingFang SC", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* ============================== 2. 基础规则 ============================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--color-bg);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 8%, rgba(82, 143, 112, 0.12), transparent 28rem),
    linear-gradient(145deg, #07110f 0%, #081410 55%, #07100f 100%);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* 所有隐藏状态都使用 HTML hidden 属性，避免脚本与 CSS 状态不一致。 */
[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

button:not(:disabled),
label[for],
select {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

/* 统一使用高对比焦点环，确保键盘用户能明确看见当前位置。 */
:focus-visible {
  outline: 3px solid rgba(215, 255, 99, 0.72);
  outline-offset: 3px;
}

::selection {
  background: rgba(215, 255, 99, 0.28);
  color: var(--color-text);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3,
strong {
  font-weight: 690;
}

.site-shell {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#main-content {
  display: flex;
  width: 100%;
  flex: 1;
}

/* 背景光晕使用固定定位，pointer-events 禁止其遮挡任何交互。 */
.ambient,
.noise {
  position: fixed;
  z-index: 0;
  pointer-events: none;
}

.ambient {
  width: 32rem;
  height: 32rem;
  border-radius: 999px;
  filter: blur(110px);
  opacity: 0.11;
}

.ambient-one {
  top: -15rem;
  right: -8rem;
  background: var(--color-accent);
}

.ambient-two {
  bottom: -18rem;
  left: -12rem;
  background: #38a98a;
}

.noise {
  inset: 0;
  opacity: 0.025;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #ffffff 3px);
  background-size: 100% 4px;
}

/* ============================== 3. 顶部与底部 ============================== */

.site-header,
.site-footer {
  width: min(calc(100% - 48px), var(--page-width));
  margin-inline: auto;
}

.site-header {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--color-text);
  text-decoration: none;
}

.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: block;
  border-radius: 13px;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(215, 255, 99, 0.08));
}

.brand-copy {
  display: grid;
  gap: 1px;
}

.brand-copy strong {
  font-size: 19px;
  letter-spacing: 0.08em;
}

.brand-copy small {
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.17em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* 语言与主题按钮共享尺寸和表面质感，形成简洁统一的偏好控制组。 */
.theme-toggle,
.language-toggle {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: rgba(10, 24, 20, 0.66);
  color: var(--color-accent);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.theme-toggle:hover,
.language-toggle:hover {
  border-color: rgba(215, 255, 99, 0.38);
  background: rgba(215, 255, 99, 0.07);
}

.theme-toggle:hover {
  transform: rotate(8deg);
}

.language-toggle {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.language-toggle:hover {
  color: var(--color-accent);
  transform: translateY(-1px);
}

.theme-icon {
  position: relative;
  width: 11px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-shadow:
    0 -7px 0 -5px currentColor,
    0 7px 0 -5px currentColor,
    7px 0 0 -5px currentColor,
    -7px 0 0 -5px currentColor;
}

.theme-icon::before,
.theme-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 -8px 0 currentColor, 0 8px 0 currentColor;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.theme-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.offline-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(10, 24, 20, 0.66);
  color: var(--color-text-muted);
  font-size: 12px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-positive);
  box-shadow: 0 0 0 4px rgba(128, 227, 170, 0.1), 0 0 12px rgba(128, 227, 170, 0.46);
}

.site-footer {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-text-dim);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.footer-button {
  padding: 3px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(158, 175, 169, 0.35);
  text-underline-offset: 3px;
}

.footer-button:hover {
  color: var(--color-accent);
}

/* 网页版下载入口与现有页脚链接保持一致，并让分隔符和链接成为一个响应式整体。 */
.desktop-download-entry {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Electron 首屏脚本会在样式加载前写入 desktop 标记，桌面包内完全隐藏下载入口。 */
html[data-runtime="desktop"] .desktop-download-entry {
  display: none;
}

/* ============================== 4. 首次设置与解锁 ============================== */

.gate-view {
  display: grid;
  width: min(calc(100% - 48px), var(--page-width));
  margin: auto;
  padding-block: 34px 54px;
  place-items: center;
}

.gate-layout {
  display: grid;
  width: 100%;
  align-items: center;
  gap: clamp(48px, 8vw, 110px);
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.74fr);
}

.intro-panel {
  max-width: 610px;
  padding: 22px 0 20px 18px;
}

.eyebrow {
  margin-bottom: 13px;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.intro-panel h1 {
  max-width: 620px;
  margin-bottom: 23px;
  font-size: clamp(42px, 5.4vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.intro-panel h1 span {
  color: var(--color-accent);
}

/* 英文单词横向更长，略收紧标题字号与字距，避免宽屏双栏中出现突兀断行。 */
html[lang="en"] .intro-panel h1 {
  font-size: clamp(40px, 4.7vw, 64px);
  letter-spacing: -0.045em;
}

/* 仅放宽英文创建页；锁定页继续与中文共享同一固定卡片宽度。 */
html[lang="en"] #setup-view .gate-card {
  max-width: 490px;
}

html[lang="en"] .gate-card-heading h2 {
  letter-spacing: -0.025em;
}

.intro-copy {
  max-width: 510px;
  margin-bottom: 38px;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.8;
}

.feature-list {
  display: grid;
  max-width: 520px;
  margin: 0;
  padding: 0;
  gap: 1px;
  list-style: none;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--color-border);
}

.feature-number {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 10px;
}

.feature-list li > span:last-child {
  display: grid;
  gap: 2px;
}

.feature-list strong {
  font-size: 13px;
}

.feature-list small {
  color: var(--color-text-dim);
  font-size: 11px;
}

.gate-card,
.modal-card {
  border: 1px solid var(--color-border);
  background: linear-gradient(145deg, rgba(18, 35, 30, 0.94), rgba(11, 24, 20, 0.96));
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(24px);
}

.gate-card {
  width: 100%;
  max-width: 460px;
  padding: clamp(26px, 4vw, 39px);
  border-radius: var(--radius-large);
}

.compact-card {
  max-width: 520px;
  text-align: center;
}

.gate-card-heading {
  /* 标题区不再放置重复 Logo，因此保持单列并与下方表单左边缘严格对齐。 */
  margin-bottom: 16px;
}

.gate-card-heading .eyebrow {
  margin-bottom: 5px;
}

.gate-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid rgba(215, 255, 99, 0.22);
  border-radius: 15px;
  background: rgba(215, 255, 99, 0.08);
}

.gate-card h1,
.gate-card h2 {
  margin-bottom: 0;
  letter-spacing: -0.035em;
}

.gate-card h1 {
  font-size: 32px;
}

.gate-card h2 {
  font-size: 22px;
}

.gate-description {
  margin-bottom: 25px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.75;
}

.unlock-card {
  width: min(100%, 430px);
  max-width: 430px;
  text-align: center;
}

.unlock-card .eyebrow {
  margin-bottom: 9px;
}

.unlock-card h1 {
  margin-bottom: 9px;
  font-size: 38px;
}

.unlock-card .stack-form {
  text-align: left;
}

.unlock-actions,
.gate-footer-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 21px;
  color: var(--color-text-dim);
  font-size: 11px;
}

.gate-footer-action {
  padding-top: 17px;
  border-top: 1px solid var(--color-border);
}

/* ============================== 5. 表单与按钮 ============================== */

.stack-form {
  display: grid;
  gap: 17px;
}

.field-group {
  display: grid;
  gap: 7px;
}

.field-group label,
.uri-panel label {
  color: #d9e3df;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.025em;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  outline: 0;
  background: rgba(5, 15, 12, 0.72);
  color: var(--color-text);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

input,
textarea {
  padding: 10px 13px;
}

/*
 * 原生 select 只保留为表单数据源，并从视觉与焦点顺序中隐藏。
 * 这样既不会弹出无法控制颜色的系统菜单，也不会复制一份业务状态。
 */
.native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

/* 下拉容器建立定位上下文；打开时提高层级，确保菜单覆盖后续表单项。 */
.select-control {
  position: relative;
}

.select-control.is-open {
  z-index: 30;
}

/*
 * 触发按钮在关闭状态下与普通输入框保持完全相同的高度、边框和圆角；
 * 焦点只改变原有边框颜色，不额外增加外环，因此不会引起表单轻微抖动。
 */
.select-trigger {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px 10px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: rgba(5, 15, 12, 0.72);
  color: var(--color-text);
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease;
}

.select-trigger:hover {
  border-color: var(--color-border-strong);
  background: rgba(7, 18, 15, 0.84);
}

.select-trigger:focus-visible,
.select-control.is-open .select-trigger {
  border-color: var(--color-focus-border);
  outline: 0;
  outline-offset: 0;
  background: rgba(7, 18, 15, 0.9);
}

.select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 箭头使用 CSS 线条绘制，在不同缩放比例下仍与文字垂直居中。 */
.select-chevron {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-right: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--color-text-dim);
  transform: translateY(-2px) rotate(45deg);
  transition: color 160ms ease, transform 160ms ease;
}

.select-trigger:hover .select-chevron,
.select-trigger:focus-visible .select-chevron {
  color: var(--color-text-muted);
}

.select-control.is-open .select-chevron {
  color: var(--color-focus-border);
  transform: translateY(2px) rotate(225deg);
}

/*
 * 自绘菜单沿用页面表面色与品牌绿选中态，不再出现 Windows 原生蓝色高亮。
 * 菜单绝对定位，展开和收起都不会推挤下面的表单内容。
 */
.select-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  z-index: 40;
  display: grid;
  max-height: 210px;
  gap: 3px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-surface-solid);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transform-origin: top center;
  animation: select-menu-enter 130ms ease-out;
}

@keyframes select-menu-enter {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.select-option {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  text-align: left;
  transition: border-color 130ms ease, background 130ms ease, color 130ms ease;
}

.select-option:hover,
.select-option:focus-visible {
  border-color: rgba(215, 255, 99, 0.08);
  outline: 0;
  background: rgba(215, 255, 99, 0.055);
  color: var(--color-text);
}

/* 选中项使用克制的半透明品牌色，并通过勾选图形提供第二重识别。 */
.select-option.is-selected {
  background: rgba(215, 255, 99, 0.1);
  color: var(--color-accent);
  font-weight: 650;
}

.select-option::after {
  width: 8px;
  height: 4px;
  flex: 0 0 8px;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  content: "";
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg);
}

.select-option.is-selected::after {
  opacity: 1;
}

input::placeholder,
textarea::placeholder {
  color: #5f716b;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-border-strong);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-focus-border);
  background: rgba(7, 18, 15, 0.9);
  /* 只加强原有单像素边框，不增加外环或内描边，粗细与默认状态完全一致。 */
  box-shadow: none;
}

/*
 * 表单控件使用自身的强化色边框表达键盘焦点，取消通用 outline 的外围第二圈；
 * 按钮与链接仍保留全局高对比焦点环，键盘可访问性不会因此丢失。
 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0;
  outline-offset: 0;
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 60px;
}

.reveal-button {
  position: absolute;
  top: 50%;
  right: 7px;
  padding: 6px 8px;
  background: transparent;
  color: var(--color-text-dim);
  font-size: 10px;
  transform: translateY(-50%);
}

.reveal-button:hover {
  color: var(--color-accent);
}

.password-meter {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(4, 1fr);
}

.password-meter span {
  height: 2px;
  border-radius: 2px;
  background: var(--color-border-strong);
  transition: background 180ms ease;
}

.password-meter[data-strength="1"] span:nth-child(-n + 1) {
  background: var(--color-danger);
}

.password-meter[data-strength="2"] span:nth-child(-n + 2) {
  background: var(--color-warning);
}

.password-meter[data-strength="3"] span:nth-child(-n + 3),
.password-meter[data-strength="4"] span:nth-child(-n + 4) {
  background: var(--color-positive);
}

.field-hint,
.uri-panel small {
  color: var(--color-text-dim);
  font-size: 10px;
}

.form-error {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(255, 141, 125, 0.2);
  border-radius: 8px;
  background: var(--color-danger-soft);
  color: #ffb3a7;
  font-size: 11px;
}

.primary-button,
.secondary-button,
.danger-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-small);
  font-size: 12px;
  font-weight: 680;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.primary-button {
  background: var(--color-accent);
  box-shadow: var(--shadow-button);
  color: var(--color-accent-ink);
}

.primary-button:hover:not(:disabled) {
  background: #e0ff86;
  transform: translateY(-1px);
}

.secondary-button {
  border: 1px solid var(--color-border);
  background: rgba(16, 33, 28, 0.7);
  color: var(--color-text-muted);
}

.secondary-button:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.danger-button {
  background: var(--color-danger);
  color: #2c0905;
}

.danger-button:hover:not(:disabled) {
  background: #ffa193;
  transform: translateY(-1px);
}

.full-button {
  width: 100%;
  justify-content: space-between;
  padding-inline: 18px;
}

.text-button {
  padding: 2px;
  background: transparent;
  color: var(--color-accent);
  font-size: inherit;
}

.text-button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.danger-text {
  color: var(--color-danger);
}

.align-self-start {
  justify-self: start;
}

.notice {
  display: grid;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: rgba(185, 226, 211, 0.04);
  color: var(--color-text-muted);
  gap: 10px;
  grid-template-columns: 20px 1fr;
}

.notice-symbol {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}

.notice p {
  margin: 0;
  font-size: 10px;
  line-height: 1.65;
}

.danger-notice {
  border-color: rgba(255, 141, 125, 0.16);
  background: var(--color-danger-soft);
}

.danger-notice .notice-symbol {
  border-color: rgba(255, 141, 125, 0.3);
  color: var(--color-danger);
}

/* ============================== 6. 验证器工作区 ============================== */

.vault-view {
  width: min(calc(100% - 48px), var(--page-width));
  margin: 0 auto;
  padding: 38px 0 52px;
}

.vault-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 30px;
}

.vault-toolbar .eyebrow {
  margin-bottom: 7px;
}

.vault-toolbar h1 {
  margin-bottom: 4px;
  font-size: clamp(34px, 4vw, 49px);
  line-height: 1.1;
  letter-spacing: -0.045em;
}

.toolbar-subtitle {
  margin: 0;
  color: var(--color-text-dim);
  font-size: 12px;
}

.toolbar-actions,
.settings-buttons {
  display: flex;
  align-items: center;
  gap: 9px;
}

/*
 * 顶部次级操作合并为一个精致的控制组，主操作保持独立高亮。
 * 所有图标均由几何边框绘制，不受操作系统字体中的符号字形影响。
 */
.toolbar-secondary-group {
  display: flex;
  height: 46px;
  min-height: 46px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(19, 39, 33, 0.84), rgba(12, 27, 23, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 12px 30px rgba(0, 0, 0, 0.12);
}

.toolbar-quiet-button {
  display: inline-flex;
  height: 44px;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}

.toolbar-quiet-button + .toolbar-quiet-button {
  border-left: 1px solid var(--color-border);
}

.toolbar-quiet-button:hover {
  background: rgba(215, 255, 99, 0.055);
  color: var(--color-text);
}

.toolbar-quiet-button:hover .action-icon {
  color: var(--color-accent);
  transform: translateY(-1px);
}

.toolbar-primary-button {
  height: 46px;
  min-height: 46px;
  padding-inline: 18px;
  border-radius: 13px;
  white-space: nowrap;
}

.action-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: currentColor;
  transition: color 160ms ease, transform 160ms ease;
}

/* 保险库图标以“保险箱门 + 转盘”表达本地密钥保险库。 */
.vault-action-icon {
  border: 1.5px solid currentColor;
  border-radius: 5px;
}

.vault-action-icon::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.vault-action-icon::after {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 4px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  transform: rotate(-35deg);
  transform-origin: left center;
}

/* 锁定图标由锁梁与锁体构成，线宽和保险库图标保持一致。 */
.lock-action-icon::before {
  position: absolute;
  top: 1px;
  left: 4px;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  content: "";
}

.lock-action-icon::after {
  position: absolute;
  right: 1px;
  bottom: 0;
  left: 1px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  background: rgba(215, 255, 99, 0.035);
  content: "";
}

/* 添加图标使用留白更充足的圆环，与亮色主按钮形成稳定视觉中心。 */
.add-action-icon {
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.add-action-icon::before,
.add-action-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

.add-action-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.vault-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 19px;
}

.search-box {
  display: flex;
  /* 默认宽度复用三列卡片的首列计算，视觉上与下方第一张卡片严格对齐。 */
  width: calc((100% - 28px) / 3);
  align-items: center;
  gap: 9px;
  padding-left: 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: rgba(8, 19, 16, 0.65);
  color: var(--color-text-dim);
}

/* 搜索图标用圆环和斜线绘制，避免原字符图标在 Windows 下显得过细。 */
.search-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.search-icon::after {
  position: absolute;
  right: -3px;
  bottom: -2px;
  width: 5px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  transform: rotate(45deg);
}

.search-box:focus-within {
  border-color: var(--color-focus-border);
  box-shadow: none;
}

.search-box input {
  min-height: 40px;
  padding-left: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.clock-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-dim);
  font-size: 10px;
}

.clock-symbol {
  position: relative;
  width: 13px;
  height: 13px;
  border: 1px solid var(--color-text-dim);
  border-radius: 50%;
}

.clock-symbol::before {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 1px;
  height: 4px;
  background: var(--color-text-dim);
  content: "";
}

.clock-symbol::after {
  position: absolute;
  top: 6px;
  left: 5px;
  width: 3px;
  height: 1px;
  background: var(--color-text-dim);
  content: "";
}

.account-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: linear-gradient(150deg, rgba(19, 37, 32, 0.88), rgba(10, 23, 19, 0.92));
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.022);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.account-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transform: translateY(-2px);
}

.card-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: rgba(215, 255, 99, 0.06);
}

.card-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  box-shadow: 0 0 10px rgba(215, 255, 99, 0.45);
  transform-origin: left;
}

.account-card-main {
  padding: 19px 19px 15px;
}

.account-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  margin-bottom: 21px;
}

.issuer-avatar {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  place-items: center;
  border: 1px solid rgba(215, 255, 99, 0.12);
  border-radius: 12px;
  background: rgba(215, 255, 99, 0.07);
  color: var(--color-accent);
  font-size: 15px;
  font-weight: 720;
}

.account-identity {
  min-width: 0;
  flex: 1;
}

.account-identity strong,
.account-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-identity strong {
  margin-bottom: 2px;
  font-size: 13px;
}

.account-identity small {
  color: var(--color-text-dim);
  font-size: 10px;
}

.card-menu-button {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-dim);
}

/* 三个像素级圆点围绕真实几何中心排列，不再受文字基线影响。 */
.menu-dots {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: -7px 0 0 currentColor, 7px 0 0 currentColor;
}

.card-menu-button:hover,
.card-menu-button[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
}

.card-menu {
  position: absolute;
  z-index: 5;
  top: 54px;
  right: 15px;
  display: grid;
  min-width: 118px;
  padding: 5px;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  background: #14241f;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}

.card-menu button {
  padding: 8px 10px;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 11px;
  text-align: left;
}

.card-menu button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
}

.card-menu .delete-account-button {
  color: var(--color-danger);
}

.otp-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.otp-code {
  display: block;
  max-width: 100%;
  padding: 2px 3px 2px 0;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--color-text);
  cursor: copy;
  font-family: var(--font-mono);
  font-size: clamp(25px, 2.45vw, 31px);
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  letter-spacing: 0.055em;
  line-height: 1;
  text-overflow: clip;
  text-align: left;
  white-space: nowrap;
  transition: color 150ms ease, text-shadow 150ms ease;
}

.otp-code:hover {
  color: var(--color-accent);
  text-shadow: 0 0 18px rgba(215, 255, 99, 0.17);
}

.otp-code.pending-code {
  color: var(--color-text-dim);
  letter-spacing: 0.12em;
}

.copy-code-button {
  display: inline-flex;
  min-width: 65px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--color-text-muted);
  font-size: 10px;
}

.copy-code-button:hover {
  border-color: rgba(215, 255, 99, 0.24);
  color: var(--color-accent);
}

/* 复制图标使用两张错位纸片，不再依赖方块字符。 */
.copy-icon {
  position: relative;
  width: 12px;
  height: 13px;
  flex: 0 0 12px;
  border: 1.3px solid currentColor;
  border-radius: 2px;
}

.copy-icon::before {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 8px;
  height: 9px;
  border-top: 1.3px solid currentColor;
  border-left: 1.3px solid currentColor;
  border-radius: 2px 0 0;
  content: "";
}

/*
 * 下一验证码区域使用低对比度面板，不与当前有效验证码争夺注意力；
 * 验证码本身是可复制按钮，倒计时文案仍明确说明其尚未生效。
 */
.next-otp-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 17px;
  padding: 12px 13px;
  border: 1px solid rgba(178, 218, 204, 0.09);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.018), rgba(215, 255, 99, 0.025));
}

.next-otp-meta {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.next-otp-label {
  color: var(--color-text-muted);
  font-size: 9px;
  font-weight: 680;
  letter-spacing: 0.04em;
}

.next-otp-hint {
  overflow: hidden;
  color: var(--color-text-dim);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.next-otp-code {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgba(215, 255, 99, 0.72);
  cursor: copy;
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.055em;
  white-space: nowrap;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.next-otp-code:hover {
  border-color: rgba(215, 255, 99, 0.18);
  background: rgba(215, 255, 99, 0.045);
  color: rgba(215, 255, 99, 0.92);
}

.next-otp-code.pending-code {
  color: var(--color-text-dim);
  letter-spacing: 0.08em;
}

.account-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 19px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 9px;
}

.countdown-value {
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.empty-state {
  display: grid;
  min-height: 390px;
  place-items: center;
  align-content: center;
  padding: 54px 20px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-large);
  background: rgba(12, 25, 21, 0.42);
  text-align: center;
}

.empty-orbit {
  position: relative;
  width: 88px;
  height: 88px;
  margin-bottom: 22px;
  border: 1px solid rgba(215, 255, 99, 0.16);
  border-radius: 50%;
}

.empty-orbit::before,
.empty-orbit::after {
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(215, 255, 99, 0.09);
  border-radius: 50%;
  content: "";
}

.empty-orbit::after {
  inset: 29px;
  background: rgba(215, 255, 99, 0.08);
}

.empty-orbit span {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 12px rgba(215, 255, 99, 0.4);
  transform: translateX(-50%);
}

.empty-state h2 {
  margin-bottom: 8px;
  font-size: 22px;
}

.empty-state p {
  max-width: 390px;
  margin-bottom: 22px;
  color: var(--color-text-muted);
  font-size: 12px;
}

/* ============================== 7. 弹窗与设置 ============================== */

.modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(10px, 2vh, 24px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  background: transparent;
  color: var(--color-text);
}

.modal[open] {
  display: grid;
  /* 内容放得下时居中；高度不足时自动从顶部开始，由 dialog 外层负责滚动。 */
  align-items: safe center;
  justify-items: center;
}

.modal::backdrop {
  background: rgba(1, 8, 6, 0.79);
  backdrop-filter: blur(7px);
}

.modal-card {
  width: min(100%, 620px);
  max-height: none;
  overflow: visible;
  /* 高分屏缩放会显著压缩 CSS 视口高度，垂直内边距随高度收缩可避免临界滚动条。 */
  padding: clamp(20px, 2.5vh, 32px) clamp(22px, 3.5vw, 32px);
  border-radius: var(--radius-large);
}

.account-modal-card {
  width: min(100%, 660px);
}

.settings-modal-card {
  width: min(100%, 720px);
}

.import-modal-card {
  width: min(100%, 540px);
}

.about-modal-card {
  width: min(100%, 760px);
}

.about-modal-card .modal-header {
  margin-bottom: 14px;
}

.about-identity {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}

.about-identity img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

.about-identity strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}

.about-identity p {
  margin: 0;
  color: var(--color-text-dim);
  font-size: 11px;
}

.about-detail-grid,
.about-runtime-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.about-detail-card {
  display: grid;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: rgba(5, 15, 12, 0.32);
  gap: 4px;
}

.about-detail-card span,
.about-meta-list dt,
.about-runtime-grid dt {
  color: var(--color-text-dim);
  font-size: 9px;
  letter-spacing: 0.04em;
}

.about-detail-card strong {
  font-size: 10px;
  line-height: 1.45;
}

.about-meta-list {
  display: grid;
  margin: 12px 0 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.about-meta-list > div {
  display: grid;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: rgba(5, 15, 12, 0.24);
  gap: 3px;
}

.about-meta-list dd,
.about-runtime-grid dd {
  min-width: 0;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.about-desktop-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-strong);
}

.about-desktop-details h3 {
  margin-bottom: 8px;
  font-size: 12px;
}

.about-runtime-grid > div {
  display: grid;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(5, 15, 12, 0.28);
  gap: 3px;
}

.about-runtime-path {
  grid-column: 1 / -1;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}

.modal-header .eyebrow {
  margin-bottom: 5px;
}

.modal-header h2 {
  margin-bottom: 0;
  font-size: 25px;
  letter-spacing: -0.035em;
}

.close-button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text-dim);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}

.close-button:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text);
}

.uri-panel {
  display: grid;
  margin-bottom: 22px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: rgba(5, 15, 12, 0.42);
  gap: 7px;
}

.uri-input-row {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto;
}

.uri-input-row .secondary-button {
  min-height: 44px;
}

.form-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.full-span {
  grid-column: 1 / -1;
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 23px;
}

.vault-health {
  display: grid;
  margin-bottom: 25px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  grid-template-columns: repeat(3, 1fr);
}

.vault-health > div {
  display: grid;
  padding: 15px 17px;
  gap: 3px;
}

.vault-health > div + div {
  border-left: 1px solid var(--color-border);
}

.health-label {
  color: var(--color-text-dim);
  font-size: 9px;
}

.vault-health strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 21px 0;
  border-top: 1px solid var(--color-border);
}

.settings-copy h3 {
  margin-bottom: 5px;
  font-size: 14px;
}

.settings-copy p {
  max-width: 390px;
  margin-bottom: 0;
  color: var(--color-text-dim);
  font-size: 10px;
  line-height: 1.6;
}

.password-section {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(180px, 0.75fr) minmax(260px, 1fr);
}

.settings-modal-card > .notice {
  margin-top: 5px;
}

.file-drop {
  position: relative;
  margin-bottom: 15px;
}

.file-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.file-drop label {
  display: grid;
  min-height: 140px;
  place-items: center;
  align-content: center;
  padding: 20px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-medium);
  background: rgba(5, 15, 12, 0.42);
  text-align: center;
  transition: border-color 160ms ease, background 160ms ease;
}

.file-drop input:focus-visible + label,
.file-drop label:hover {
  border-color: var(--color-focus-border);
  background: rgba(215, 255, 99, 0.035);
}

.file-drop input:focus-visible + label {
  box-shadow: none;
}

.file-icon {
  display: grid;
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  color: var(--color-accent);
  font-size: 18px;
}

.file-drop strong {
  margin-bottom: 3px;
  font-size: 12px;
}

.file-drop small {
  color: var(--color-text-dim);
  font-size: 9px;
}

.file-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(128, 227, 170, 0.18);
  border-radius: 10px;
  background: rgba(128, 227, 170, 0.06);
  color: var(--color-positive);
}

.file-summary div {
  display: grid;
  min-width: 0;
}

.file-summary strong,
.file-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-summary strong {
  color: var(--color-text);
  font-size: 11px;
}

.file-summary small {
  color: var(--color-text-dim);
  font-size: 9px;
}

.confirm-card {
  width: min(100%, 400px);
  text-align: center;
}

.confirm-card .gate-icon {
  margin: 0 auto 16px;
}

.warning-icon {
  border-color: rgba(255, 141, 125, 0.22);
  background: rgba(255, 141, 125, 0.08);
  color: var(--color-danger);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
}

.confirm-card h2 {
  margin-bottom: 8px;
  font-size: 22px;
}

.confirm-card > p {
  margin-bottom: 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.7;
}

.centered-actions {
  justify-content: center;
}

/* ============================== 8. 反馈与加载状态 ============================== */

.toast-region {
  position: fixed;
  z-index: 100;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: min(calc(100% - 44px), 350px);
  gap: 9px;
  pointer-events: none;
}

.toast {
  display: grid;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: 11px;
  background: #172923;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34);
  color: var(--color-text);
  font-size: 11px;
  gap: 10px;
  grid-template-columns: 18px 1fr;
  animation: toast-in 180ms ease both;
}

.toast::before {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: rgba(128, 227, 170, 0.1);
  color: var(--color-positive);
  content: "✓";
  font-size: 9px;
}

.toast.error-toast::before {
  background: rgba(255, 141, 125, 0.1);
  color: var(--color-danger);
  content: "!";
}

.toast.toast-leaving {
  animation: toast-out 160ms ease both;
}

.busy-overlay {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 9, 7, 0.82);
  backdrop-filter: blur(6px);
}

.busy-card {
  display: grid;
  width: min(100%, 350px);
  place-items: center;
  padding: 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface-solid);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.busy-card strong {
  margin-bottom: 5px;
  font-size: 14px;
}

.busy-card small {
  color: var(--color-text-dim);
  font-size: 9px;
}

.spinner {
  width: 34px;
  height: 34px;
  margin-bottom: 15px;
  border: 2px solid rgba(215, 255, 99, 0.12);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ============================== 9. 响应式布局 ============================== */

@media (max-width: 960px) {
  .gate-layout {
    max-width: 620px;
    gap: 40px;
    grid-template-columns: 1fr;
  }

  .intro-panel {
    max-width: none;
    padding-left: 0;
    text-align: center;
  }

  .intro-panel h1,
  .intro-copy,
  .feature-list {
    margin-inline: auto;
  }

  .gate-card {
    margin-inline: auto;
  }

  .account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 两列布局下，搜索框继续与第一列验证码卡片保持等宽。 */
  .search-box {
    width: calc((100% - 14px) / 2);
  }

  .vault-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 680px) {
  .site-header,
  .site-footer,
  .gate-view,
  .vault-view {
    width: min(calc(100% - 28px), var(--page-width));
  }

  .site-header {
    min-height: 76px;
  }

  .brand-copy small {
    display: none;
  }

  /* 窄屏完全移除离线状态胶囊，为语言和主题按钮保留稳定的点击空间。 */
  .offline-pill {
    display: none;
  }

  .gate-view {
    padding-block: 20px 36px;
  }

  .intro-panel h1 {
    font-size: clamp(37px, 12vw, 54px);
  }

  .gate-card {
    padding: 24px 19px;
  }

  .vault-view {
    padding-top: 24px;
  }

  .toolbar-actions {
    width: 100%;
    align-items: stretch;
    flex-wrap: nowrap;
  }

  /*
   * 次级按钮组略宽于主按钮，确保三个中文字符与图标始终处于同一行；
   * 两侧都固定为 46px 高，视觉边线不会因文字换行而错位。
   */
  .toolbar-secondary-group {
    min-width: 0;
    flex: 1.2 1 0;
  }

  .toolbar-actions .primary-button {
    min-width: 0;
    flex: 1 1 0;
  }

  .toolbar-quiet-button {
    min-width: 0;
    flex: 1;
    gap: 7px;
    justify-content: center;
    padding-inline: 9px;
  }

  .vault-meta-row {
    align-items: stretch;
    flex-direction: column;
  }

  .search-box {
    width: 100%;
  }

  .account-grid {
    grid-template-columns: 1fr;
  }

  .otp-code {
    font-size: 30px;
  }

  .next-otp-panel {
    padding-inline: 12px;
  }

  .form-grid,
  .password-section {
    grid-template-columns: 1fr;
  }

  .about-detail-grid,
  .about-runtime-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-runtime-path {
    grid-column: 1 / -1;
  }

  .about-meta-list {
    grid-template-columns: 1fr;
  }

  .about-meta-list > div {
    gap: 3px;
    grid-template-columns: 1fr;
  }

  .settings-section {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-buttons {
    width: 100%;
  }

  .settings-buttons button {
    flex: 1;
  }

  .vault-health {
    grid-template-columns: 1fr;
  }

  .vault-health > div + div {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .uri-input-row {
    grid-template-columns: 1fr;
  }

  .modal {
    padding: 12px;
  }

  .modal-card {
    padding: 22px 17px;
  }

  .site-footer {
    flex-wrap: wrap;
    padding-block: 17px;
  }
}

/*
 * 用户开启“减少动态效果”后关闭非必要位移动画；
 * 仅保留加载转圈，因为它传达正在进行中的必要状态。
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .spinner {
    animation-duration: 800ms !important;
    animation-iteration-count: infinite !important;
  }
}

/* 高对比模式下使用系统颜色强化边框，避免半透明色失去可见性。 */
@media (forced-colors: active) {
  .gate-card,
  .modal-card,
  .account-card,
  input,
  select,
  .select-trigger,
  .select-menu,
  .primary-button,
  .secondary-button,
  .danger-button {
    border: 1px solid CanvasText;
  }

  .select-option.is-selected {
    border-color: Highlight;
    color: Highlight;
  }

  .status-dot,
  .card-progress span {
    background: Highlight;
  }
}

/* ============================== 10. 独立算法自检页 ============================== */

/*
 * tests/index.html 复用主站的配色与组件，下列规则只描述测试报告布局，
 * 不影响 index.html 中的任何业务视图。
 */
.test-page {
  width: min(calc(100% - 48px), 900px);
  margin: 0 auto;
  padding: 42px 0 70px;
}

.test-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.test-heading h1 {
  margin-bottom: 6px;
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -0.05em;
}

.test-heading p:last-child {
  max-width: 590px;
  margin-bottom: 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

.test-summary {
  display: grid;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  grid-template-columns: repeat(3, 1fr);
}

.test-summary > div {
  display: grid;
  padding: 17px 20px;
  gap: 2px;
}

.test-summary > div + div {
  border-left: 1px solid var(--color-border);
}

.test-summary span {
  color: var(--color-text-dim);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.test-summary strong {
  font-family: var(--font-mono);
  font-size: 22px;
}

.test-progress {
  height: 3px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-border);
}

.test-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  transition: width 180ms ease;
}

.test-results {
  display: grid;
  gap: 8px;
}

.test-result {
  display: grid;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: rgba(13, 28, 23, 0.72);
  gap: 10px;
  grid-template-columns: 24px 1fr auto;
}

.test-result-icon {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: rgba(158, 175, 169, 0.08);
  color: var(--color-text-dim);
  font-size: 10px;
}

.test-result[data-status="passed"] .test-result-icon {
  background: rgba(128, 227, 170, 0.1);
  color: var(--color-positive);
}

.test-result[data-status="failed"] {
  border-color: rgba(255, 141, 125, 0.28);
  background: var(--color-danger-soft);
}

.test-result[data-status="failed"] .test-result-icon {
  background: rgba(255, 141, 125, 0.1);
  color: var(--color-danger);
}

.test-result strong {
  font-size: 11px;
}

.test-result small {
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 9px;
}

.manual-checks {
  margin-top: 25px;
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: rgba(13, 28, 23, 0.55);
}

.manual-checks h2 {
  margin-bottom: 9px;
  font-size: 16px;
}

.manual-checks p,
.manual-checks li {
  color: var(--color-text-muted);
  font-size: 10px;
  line-height: 1.75;
}

.manual-checks ol {
  margin: 0;
  padding-left: 20px;
}

@media (max-width: 680px) {
  .test-page {
    width: min(calc(100% - 28px), 900px);
    padding-top: 26px;
  }

  .test-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .test-summary {
    grid-template-columns: 1fr;
  }

  .test-summary > div + div {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .test-result {
    align-items: start;
    grid-template-columns: 24px 1fr;
  }

  .test-result small {
    grid-column: 2;
  }
}

/* ============================== 11. 浅色主题 ============================== */

/*
 * 浅色主题仍保留深绿色品牌语义，但提高白底上的文字、边框和强调色对比度。
 * 主题只通过 data-theme 属性切换，不需要重新加载页面或替换任何资源。
 */
html[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f1f5ef;
  --color-bg-soft: #e8efe9;
  --color-surface: rgba(255, 255, 255, 0.88);
  --color-surface-solid: #ffffff;
  --color-surface-raised: #f4f8f3;
  --color-border: rgba(29, 64, 52, 0.14);
  --color-border-strong: rgba(29, 64, 52, 0.26);
  --color-focus-border: rgba(77, 105, 24, 0.64);
  --color-text: #14251f;
  --color-text-muted: #53665f;
  --color-text-dim: #7a8b84;
  --color-accent: #668800;
  --color-accent-strong: #547200;
  --color-accent-ink: #ffffff;
  --color-positive: #198251;
  --color-danger: #c84f40;
  --color-danger-soft: rgba(200, 79, 64, 0.09);
  --color-warning: #a76a00;
  --shadow-card: 0 24px 70px rgba(34, 66, 54, 0.13);
  --shadow-button: 0 10px 28px rgba(88, 119, 0, 0.15);
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 15% 8%, rgba(111, 151, 75, 0.13), transparent 28rem),
    linear-gradient(145deg, #f4f7f2 0%, #edf3ed 58%, #f6f8f4 100%);
}

html[data-theme="light"] .ambient-two {
  background: #85c3ad;
}

html[data-theme="light"] .noise {
  opacity: 0.018;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #18392d 3px);
}

html[data-theme="light"] .brand-mark {
  filter: drop-shadow(0 8px 18px rgba(71, 102, 0, 0.12));
}

html[data-theme="light"] .primary-button:hover:not(:disabled) {
  background: #769b0d;
}

html[data-theme="light"] .offline-pill,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .language-toggle {
  background: rgba(255, 255, 255, 0.76);
}

/* 浅色主题下按钮改为月牙，提示用户可切回深色。 */
html[data-theme="light"] .theme-icon {
  width: 15px;
  height: 15px;
  border: 0;
  background: currentColor;
  box-shadow: none;
}

html[data-theme="light"] .theme-icon::before {
  top: -2px;
  left: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: none;
  transform: none;
}

html[data-theme="light"] .theme-icon::after {
  display: none;
}

/*
 * “跟随系统”模式使用显示器轮廓，不与浅色/月亮、深色/太阳图形混淆。
 * 本规则放在浅色覆盖之后，确保系统当前为浅色时仍显示系统图标。
 */
html[data-theme-mode="system"] .theme-icon {
  width: 15px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
}

html[data-theme-mode="system"] .theme-icon::before {
  top: 13px;
  left: 50%;
  width: 7px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 -2px 0 -0.25px currentColor;
  content: "";
  transform: translateX(-50%);
}

html[data-theme-mode="system"] .theme-icon::after {
  display: none;
}

html[data-theme-mode="system"] .theme-toggle:hover {
  transform: translateY(-1px);
}

html[data-theme="light"] .gate-card,
html[data-theme="light"] .modal-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 246, 0.96));
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .field-group label,
html[data-theme="light"] .uri-panel label {
  color: #31463e;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: rgba(244, 248, 244, 0.9);
  color: var(--color-text);
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
  background: rgba(252, 254, 252, 0.96);
}

/* 浅色主题使用柔和的白色表面与橄榄绿选中态，避免系统蓝色造成视觉割裂。 */
html[data-theme="light"] .select-trigger {
  background: rgba(244, 248, 244, 0.9);
}

html[data-theme="light"] .select-trigger:hover {
  background: rgba(248, 251, 248, 0.96);
}

html[data-theme="light"] .select-trigger:focus-visible,
html[data-theme="light"] .select-control.is-open .select-trigger {
  background: rgba(252, 254, 252, 0.96);
}

html[data-theme="light"] .select-menu {
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(35, 66, 55, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .select-option:hover,
html[data-theme="light"] .select-option:focus-visible {
  border-color: rgba(82, 112, 0, 0.08);
  background: rgba(102, 136, 0, 0.055);
}

html[data-theme="light"] .select-option.is-selected {
  background: rgba(102, 136, 0, 0.1);
  color: #506d00;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #9aa7a1;
}

html[data-theme="light"] .secondary-button,
html[data-theme="light"] .toolbar-secondary-group,
html[data-theme="light"] .search-box {
  background: rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] .toolbar-quiet-button:hover,
html[data-theme="light"] .secondary-button:hover:not(:disabled),
html[data-theme="light"] .card-menu-button:hover,
html[data-theme="light"] .card-menu-button[aria-expanded="true"] {
  background: rgba(102, 136, 0, 0.075);
}

html[data-theme="light"] .account-card {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 245, 0.94));
  box-shadow: 0 16px 42px rgba(36, 72, 59, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .account-card:hover {
  box-shadow: 0 20px 50px rgba(36, 72, 59, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .issuer-avatar {
  border-color: rgba(102, 136, 0, 0.18);
  background: rgba(102, 136, 0, 0.08);
}

html[data-theme="light"] .next-otp-code {
  color: rgba(71, 99, 0, 0.88);
}

html[data-theme="light"] .next-otp-code:hover {
  border-color: rgba(82, 112, 0, 0.24);
  background: rgba(102, 136, 0, 0.07);
  color: #496700;
}

html[data-theme="light"] .card-menu {
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(35, 66, 55, 0.18);
}

html[data-theme="light"] .card-menu button:hover {
  background: rgba(102, 136, 0, 0.07);
}

html[data-theme="light"] .copy-code-button,
html[data-theme="light"] .notice,
html[data-theme="light"] .next-otp-panel,
html[data-theme="light"] .uri-panel,
html[data-theme="light"] .file-drop label,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .about-detail-card,
html[data-theme="light"] .about-meta-list > div,
html[data-theme="light"] .about-runtime-grid > div,
html[data-theme="light"] .test-result,
html[data-theme="light"] .manual-checks {
  background: rgba(255, 255, 255, 0.52);
}

/* 浅色主题提高复制按钮的边界和文字对比，同时保持低饱和避免抢夺验证码焦点。 */
html[data-theme="light"] .copy-code-button {
  border-color: rgba(29, 64, 52, 0.2);
  background: rgba(248, 251, 248, 0.92);
  color: #52665e;
}

html[data-theme="light"] .copy-code-button:hover {
  border-color: rgba(82, 112, 0, 0.38);
  background: rgba(102, 136, 0, 0.075);
  color: #506d00;
}

html[data-theme="light"] .toast,
html[data-theme="light"] .busy-card {
  background: #ffffff;
}

html[data-theme="light"] .danger-notice,
html[data-theme="light"] .test-result[data-status="failed"] {
  background: var(--color-danger-soft);
}

/* ============================== 12. 大屏免滚动首次设置 ============================== */

/*
 * 宽屏且高度足够时把首次设置、解锁和兼容提示约束在一屏内。
 * 小屏或低矮窗口仍保留正常滚动，避免内容被强行裁切。
 */
@media (min-width: 961px) and (min-height: 700px) {
  body[data-view="setup"],
  body[data-view="unlock"],
  body[data-view="compatibility"] {
    height: 100vh;
    overflow-y: hidden;
  }

  body[data-view="setup"] .site-shell,
  body[data-view="unlock"] .site-shell,
  body[data-view="compatibility"] .site-shell {
    height: 100vh;
    min-height: 0;
  }

  body[data-view="setup"] #main-content,
  body[data-view="unlock"] #main-content,
  body[data-view="compatibility"] #main-content {
    min-height: 0;
  }

  body[data-view="setup"] .site-header,
  body[data-view="unlock"] .site-header,
  body[data-view="compatibility"] .site-header {
    min-height: 76px;
  }

  body[data-view="setup"] .site-footer,
  body[data-view="unlock"] .site-footer,
  body[data-view="compatibility"] .site-footer {
    min-height: 44px;
  }

  body[data-view="setup"] .gate-view,
  body[data-view="unlock"] .gate-view,
  body[data-view="compatibility"] .gate-view {
    min-height: 0;
    padding-block: 8px 14px;
  }

  body[data-view="setup"] .intro-panel {
    padding-block: 0;
  }

  body[data-view="setup"] .intro-panel h1 {
    margin-bottom: 18px;
    font-size: clamp(44px, 4.5vw, 62px);
  }

  html[lang="en"] body[data-view="setup"] .intro-panel h1 {
    font-size: clamp(39px, 4vw, 56px);
  }

  body[data-view="setup"] .intro-copy {
    margin-bottom: 24px;
  }

  body[data-view="setup"] .feature-list li {
    padding-block: 11px;
  }

  body[data-view="setup"] .gate-card {
    padding: 27px 31px;
  }

  body[data-view="setup"] .gate-description {
    margin-bottom: 18px;
  }

  body[data-view="setup"] .stack-form {
    gap: 13px;
  }

  body[data-view="setup"] .gate-footer-action {
    margin-top: 15px;
    padding-top: 13px;
  }

  /*
   * 保险库主视图使用一屏弹性布局：页面外层不滚动，卡片超过可用空间时
   * 仅 account-grid 内部滚动，空状态则自动填满剩余高度。
   */
  body[data-view="vault"] {
    height: 100vh;
    overflow: hidden;
  }

  body[data-view="vault"] .site-shell {
    height: 100vh;
    min-height: 0;
  }

  body[data-view="vault"] .site-header {
    min-height: 76px;
  }

  body[data-view="vault"] #main-content {
    min-height: 0;
  }

  body[data-view="vault"] .vault-view {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    padding-block: 14px 10px;
  }

  body[data-view="vault"] .vault-toolbar {
    flex: 0 0 auto;
    margin-bottom: 18px;
  }

  body[data-view="vault"] .vault-meta-row {
    flex: 0 0 auto;
    margin-bottom: 14px;
  }

  body[data-view="vault"] .empty-state {
    min-height: 0;
    flex: 1;
  }

  body[data-view="vault"] .account-grid {
    min-height: 0;
    flex: 1;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    /* 水平方向不再附加内边距，首列卡片可与上方搜索框使用同一宽度基准。 */
    padding: 2px 0 8px;
    overscroll-behavior: contain;
    scrollbar-color: var(--color-border-strong) transparent;
    scrollbar-width: thin;
  }

  body[data-view="vault"] .account-grid::-webkit-scrollbar {
    width: 6px;
  }

  body[data-view="vault"] .account-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--color-border-strong);
  }

  body[data-view="vault"] .account-grid::-webkit-scrollbar-track {
    background: transparent;
  }

  body[data-view="vault"] .site-footer {
    min-height: 40px;
  }
}