/* 方便传输 · design system v20261030light — restore coherent light theme (pre-Galaxy) */
:root {
  /* soft light utility — page canvas + white cards */
  --bg: #f0f2f5;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #e8ebf0;
  --surface-hover: #dde3ea;
  --border: #d1d5db;
  --border-strong: #9ca3af;
  --hairline: rgba(0,0,0,.06);

  --text: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;

  /* brand blue — restore Oct-23 light look */
  --accent: #1a56db;
  --accent-hover: #1648b8;
  --accent-deep: #123a96;
  --accent-muted: rgba(26, 86, 219, 0.12);
  --accent-glow: rgba(26, 86, 219, 0.28);
  --accent-ink: #ffffff;

  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.08);
  --danger-border: rgba(220, 38, 38, 0.35);
  --success: #059669;
  --success-bg: rgba(5, 150, 105, 0.10);
  --warn: #d97706;
  --warn-bg: rgba(217, 119, 6, 0.10);
  --info: #0284c7;
  --info-bg: rgba(2, 132, 199, 0.10);

  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --shadow-soft: 0 12px 40px rgba(15,23,42,.08);
  --shadow-card: 0 1px 0 var(--hairline), 0 4px 16px rgba(15,23,42,.06);
  --tap-min: 44px;
  --focus-ring: 0 0 0 3px var(--accent-muted);
  --content-max: 760px;
  --content-narrow: 640px;
  --content-login: 400px;

  /* legacy aliases */
  --brand: var(--accent);
  --brand-strong: var(--accent-hover);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body.fb-app, .fb-app {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  font-family: var(--font);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(26,86,219,.06), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(26,86,219,.04), transparent 50%),
    var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

/* buttons */
.fb-app .fb-btn,
.fb-app .btn,
.fb-app .logout,
.fb-app button.logout {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap-min); padding: 10px 18px;
  border-radius: var(--radius-md); font-family: inherit;
  font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.fb-app .fb-btn:disabled, .fb-app .btn:disabled { opacity: .45; cursor: not-allowed; }

/* From Uiverse.io by cssbuttons-io (weak-firefox-5) — remapped to --accent / --accent-ink */
.fb-app .fb-btn-primary, .fb-app .btn-primary,
.fb-app .panel button[type="submit"],
.fb-app .bulk-btn.primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
  background-image: none !important;
  box-shadow: 0 0 0 1px rgba(26,86,219,.2), 0 6px 20px rgba(26,86,219,.2);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.fb-app .fb-btn-primary::before, .fb-app .btn-primary::before,
.fb-app .panel button[type="submit"]::before,
.fb-app .bulk-btn.primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, transparent 0%, transparent 55%, rgba(0,0,0,.08));
  pointer-events: none;
  z-index: 1;
}
.fb-app .fb-btn-primary::after, .fb-app .btn-primary::after,
.fb-app .panel button[type="submit"]::after,
.fb-app .bulk-btn.primary::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  border-radius: 9999px;
  background: var(--accent-hover);
  transform: translate(-50%, -50%);
  transition: width .45s cubic-bezier(0,0,.2,1), height .45s cubic-bezier(0,0,.2,1);
  z-index: -1;
}
.fb-app .fb-btn-primary:hover:not(:disabled)::after,
.fb-app .btn-primary:hover:not(:disabled)::after,
.fb-app .panel button[type="submit"]:hover:not(:disabled)::after,
.fb-app .bulk-btn.primary:hover:not(:disabled)::after {
  width: 14em; height: 14em;
}
.fb-app .fb-btn-primary:hover:not(:disabled),
.fb-app .btn-primary:hover:not(:disabled),
.fb-app .panel button[type="submit"]:hover:not(:disabled),
.fb-app .bulk-btn.primary:hover:not(:disabled) {
  background: var(--accent) !important;
  box-shadow: 0 0 0 1px rgba(26,86,219,.28), 0 8px 24px var(--accent-glow);
}
.fb-app .fb-btn-primary:active:not(:disabled),
.fb-app .btn-primary:active:not(:disabled),
.fb-app .panel button[type="submit"]:active:not(:disabled),
.fb-app .bulk-btn.primary:active:not(:disabled) {
  transform: scale(0.97);
}

/* From Uiverse.io by cssbuttons-io (calm-tiger-42) — ghost fill wave → accent */
.fb-app .fb-btn-ghost, .fb-app .btn-ghost, .fb-app .btn-outline,
.fb-app .logout, .fb-app button.logout {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  padding: 8px 14px; font-size: 13px; font-weight: 500;
  box-shadow: none;
  z-index: 0;
  transition: color .2s ease-in, border-color .2s ease-in, background .2s;
}
.fb-app .fb-btn-ghost::before, .fb-app .btn-ghost::before, .fb-app .btn-outline::before,
.fb-app .logout::before, .fb-app button.logout::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%; height: 180%;
  background-color: var(--accent-muted);
  border-radius: 50%;
  transition: all .45s .05s cubic-bezier(.55,0,.1,1);
  z-index: -1;
}
.fb-app .fb-btn-ghost::after, .fb-app .btn-ghost::after, .fb-app .btn-outline::after,
.fb-app .logout::after, .fb-app button.logout::after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%; height: 190%;
  background-color: var(--accent);
  border-radius: 50%;
  transition: all .45s .05s cubic-bezier(.55,0,.1,1);
  z-index: -1;
}
.fb-app .fb-btn-ghost:hover:not(:disabled),
.fb-app .btn-ghost:hover:not(:disabled),
.fb-app .btn-outline:hover:not(:disabled),
.fb-app .logout:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: transparent;
}
.fb-app .fb-btn-ghost:hover:not(:disabled)::before,
.fb-app .btn-ghost:hover:not(:disabled)::before,
.fb-app .btn-outline:hover:not(:disabled)::before,
.fb-app .logout:hover::before {
  top: -35%;
  background-color: var(--accent);
  transform: translateX(-50%) scaleY(1.3) scaleX(.8);
}
.fb-app .fb-btn-ghost:hover:not(:disabled)::after,
.fb-app .btn-ghost:hover:not(:disabled)::after,
.fb-app .btn-outline:hover:not(:disabled)::after,
.fb-app .logout:hover::after {
  top: -45%;
  background-color: var(--accent);
  transform: translateX(-50%) scaleY(1.3) scaleX(.8);
}

.fb-app .fb-btn-success, .fb-app .btn-green {
  background: var(--success) !important;
  color: #042f1e !important;
  border-color: var(--success) !important;
  background-image: none !important;
}
.fb-app .fb-btn-danger, .fb-app .btn-danger {
  background: var(--danger) !important;
  color: #1a0505 !important;
  border-color: var(--danger) !important;
}

/* surfaces */
/* Cards/panels stay put on hover (user: 框体不要动); buttons may still lift */
.fb-app .fb-card, .fb-app .card, .fb-app .panel, .fb-app .note, .fb-app .box {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--hairline), 0 4px 16px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8);
  transition: border-color .25s ease, box-shadow .25s ease;
  position: relative;
  transform: none;
}
/* left accent bar removed (user: ugly cyan edge) — v20261025j/k */
.fb-app .fb-card::before, .fb-app .card::before {
  content: none;
  display: none;
}
.fb-app .fb-card:hover, .fb-app .card.fb-lift:hover, .fb-app .card:not(.receive-card):hover {
  transform: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--hairline), 0 6px 20px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.8);
}
.fb-app .fb-note, .fb-app .note {
  padding: 12px 14px; font-size: 12px; color: var(--text-secondary);
  line-height: 1.55; border-radius: var(--radius-md);
}
.fb-app .fb-note strong, .fb-app .note strong { color: var(--text); }
.fb-app .fb-err, .fb-app .err {
  background: var(--danger-bg); border: 1px solid var(--danger-border);
  color: var(--danger); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px;
}

.fb-app label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
/* From Uiverse.io by satyamchaudharydev (fast-dodo-69) — underline grow on focus */
.fb-app .fb-input,
.fb-app input[type="text"], .fb-app input[type="password"],
.fb-app input[type="email"], .fb-app input[type="search"],
.fb-app input[type="number"], .fb-app input:not([type]),
.fb-app select, .fb-app textarea {
  width: 100%; min-height: var(--tap-min); padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
  font-family: inherit; font-size: 15px; outline: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: border-color .15s, box-shadow .15s, background-color .2s, background-size .3s ease;
}
.fb-app input:hover:not(:disabled):not(:focus),
.fb-app textarea:hover:not(:disabled):not(:focus),
.fb-app select:hover:not(:disabled):not(:focus) {
  background-color: rgba(26,86,219,.06);
}
.fb-app input:focus, .fb-app select:focus, .fb-app textarea:focus {
  border-color: var(--accent);
  box-shadow: none;
  background-size: 100% 2px;
}
.fb-app input::placeholder, .fb-app textarea::placeholder { color: var(--text-muted); }

/* optional underline-only field (no full box border) */
.fb-app .fb-input-line {
  border: none; border-radius: 0; border-bottom: 1px solid var(--border);
  background-color: transparent; padding-inline: .5em; padding-block: .7em;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px; background-position: left bottom; background-repeat: no-repeat;
}
.fb-app .fb-input-line:focus { border-bottom-color: transparent; background-size: 100% 2px; box-shadow: none; }

.fb-app .bar { height: 6px; background: var(--surface-2); border-radius: var(--radius-full); overflow: hidden; }
.fb-app .bar > i {
  display: block; height: 100%; width: 0;
  background: var(--accent) !important; background-image: none !important;
  border-radius: var(--radius-full); transition: width .25s;
}
.fb-app .drop:hover, .fb-app .drop.drag {
  border-color: var(--accent) !important;
  background: var(--accent-muted) !important;
}

/* Dropzones: color change only — no translate (框体不动) v20261025k */
.fb-app .drop-zone, .fb-app .fb-drop {
  position: relative;
  border: 2px dashed rgba(26,86,219,.45);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(26,86,219,.08), rgba(26,86,219,.02));
  box-shadow: inset 0 0 0 1px rgba(26,86,219,.08);
  transition: border-color .2s, background .2s, box-shadow .25s;
  transform: none;
}
.fb-app .drop-zone::after, .fb-app .fb-drop::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed transparent;
  border-radius: calc(var(--radius-lg) - 4px);
  pointer-events: none;
  transition: border-color .25s;
}
.fb-app .drop-zone:hover, .fb-app .drop-zone.drag-over, .fb-app .drop-zone.drag,
.fb-app .fb-drop:hover {
  border-color: var(--accent);
  background: var(--accent-muted);
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(26,86,219,.15), 0 4px 14px rgba(15,23,42,.08);
}
.fb-app .drop-zone:hover::after, .fb-app .drop-zone.drag-over::after,
.fb-app .fb-drop:hover::after {
  border-color: var(--accent);
}

.fb-app .pill, .fb-pill {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 500;
  padding: 2px 10px; border-radius: var(--radius-full); white-space: nowrap;
}
.fb-app .idle { background: var(--surface-2); color: var(--text-secondary); }
.fb-app .working { background: var(--info-bg); color: var(--info); }
.fb-app .done { background: var(--success-bg); color: var(--success); }
.fb-app .fail { background: var(--danger-bg); color: var(--danger); }

.fb-footer, .footer {
  margin-top: auto; padding-top: var(--space-6);
  text-align: center; font-size: 12px; color: var(--text-muted);
}
.fb-footer a, .footer a { color: var(--text-muted); text-decoration: none; }
.fb-footer a:hover, .footer a:hover { color: var(--text-secondary); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }


/* ========== Uiverse Galaxy adaptations (preview · plain CSS · token remapped) ========== */

/* From Uiverse.io by Galahhad (breezy-wolverine-23) — search field */
.fb-app .fb-search {
  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-2);
  padding: 9px 12px;
  cursor: text;
  min-height: var(--tap-min);
  transition: border-color .15s, background .15s;
}
.fb-app .fb-search:hover { border-color: var(--border-strong); }
.fb-app .fb-search:focus-within {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  box-shadow: var(--focus-ring);
}
.fb-app .fb-search input {
  outline: none; width: 100%; border: none; background: none !important;
  background-image: none !important; box-shadow: none !important;
  color: var(--text-secondary); min-height: 0; padding: 0;
  font: inherit; font-size: 14px;
}
.fb-app .fb-search input::placeholder { color: var(--text-muted); }
.fb-app .fb-search .fb-search-kbd {
  flex-shrink: 0;
  margin-left: 8px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border-radius: 3px;
  text-align: center;
  box-shadow: inset 0 -1px 0 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.25);
  font-size: 11px; font-family: var(--font-mono);
  color: var(--text-muted);
  min-width: 18px; height: 18px; line-height: 16px;
  padding: 0 4px;
}
.fb-app .fb-search:focus-within .fb-search-kbd { display: none; }
.fb-app .fb-search .fb-search-ico {
  flex-shrink: 0; width: 14px; height: 14px; margin-right: 8px;
  color: var(--text-muted); display: none;
}
.fb-app .fb-search:focus-within .fb-search-ico,
.fb-app .fb-search:has(input:not(:placeholder-shown)) .fb-search-ico { display: block; }

/* From Uiverse.io by Yaya12085 (rude-mouse-79) — segmented tabs */
.fb-app .fb-seg,
.fb-app .tabs.fb-seg,
.fb-app .radio-inputs {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--border-strong), inset 0 1px 0 rgba(255,255,255,.8);
  padding: 4px;
  width: 100%;
  max-width: 100%;
  font-size: 14px;
  box-sizing: border-box;
  overflow: hidden;
}
/* share tabs: fit inside viewport (override width:100%+margin overflow) */
.fb-app .tabs.fb-seg {
  width: auto !important;
  max-width: none !important;
  margin: 8px 12px;
  align-self: stretch;
  overflow: hidden;
  box-sizing: border-box;
}
.fb-app .tabs.fb-seg > button {
  position: relative;
  overflow: hidden;
}
.fb-app .tabs.fb-seg > button .badge {
  position: absolute;
  top: 3px;
  right: 6px;
  margin: 0;
  z-index: 2;
  pointer-events: none;
}
.fb-app .fb-seg > button,
.fb-app .tabs.fb-seg > button,
.fb-app .radio-inputs .radio {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  position: relative;
}
.fb-app .fb-seg > button,
.fb-app .tabs.fb-seg > button {
  min-height: 36px;
  padding: 8px 10px;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--text-muted);
  font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: all .15s ease-in-out;
  box-shadow: none !important;
  white-space: nowrap;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.fb-app .fb-seg > button.active,
.fb-app .tabs.fb-seg > button.active,
.fb-app .fb-seg > button[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  font-weight: 650;
  box-shadow: 0 1px 0 var(--hairline), 0 1px 4px rgba(15,23,42,.08) !important;
}
.fb-app .radio-inputs .radio input { display: none; }
.fb-app .radio-inputs .radio .name {
  display: flex; cursor: pointer; align-items: center; justify-content: center;
  border-radius: calc(var(--radius-md) - 2px);
  padding: .5rem 0; color: var(--text-muted);
  transition: all .15s ease-in-out;
}
.fb-app .radio-inputs .radio input:checked + .name {
  background: var(--surface); color: var(--text); font-weight: 650;
  box-shadow: 0 1px 0 var(--hairline), 0 1px 4px rgba(15,23,42,.08);
}

/* receive sub-tabs as quiet segmented row */
.fb-app .receive-tabs {
  display: flex; gap: 0; padding: 4px; margin: 8px 12px 0;
  background: var(--surface-2); border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px var(--hairline);
}
.fb-app .receive-tab {
  flex: 1; padding: 10px; border: none; background: transparent;
  font-size: 13px; cursor: pointer; color: var(--text-muted);
  font-weight: 500; font-family: inherit;
  border-radius: calc(var(--radius-md) - 2px);
  transition: all .15s ease-in-out;
}
.fb-app .receive-tab.active {
  background: var(--surface); color: var(--text); font-weight: 650;
  box-shadow: 0 1px 0 var(--hairline), 0 1px 4px rgba(15,23,42,.08);
}

/* From Uiverse.io by TimTrayler (quiet-swan-35) — switch */
.fb-app .fb-switch {
  --fb-sw-track: var(--surface-2);
  --fb-sw-on: var(--accent-muted);
  --fb-sw-knob: var(--text-muted);
  --fb-sw-knob-on: var(--accent);
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.7em; height: 1.8em;
  vertical-align: middle;
}
.fb-app .fb-switch input {
  display: none; opacity: 0; width: 0; height: 0;
}
.fb-app .fb-switch .fb-switch-slider {
  position: absolute; cursor: pointer; inset: 0;
  background-color: var(--fb-sw-track);
  transition: .2s; border-radius: 30px;
  border: 1px solid var(--border);
}
.fb-app .fb-switch .fb-switch-slider::before {
  position: absolute; content: "";
  height: 1.4em; width: 1.4em; border-radius: 20px;
  left: 0.2em; bottom: 0.15em;
  background-color: var(--fb-sw-knob);
  transition: .35s;
}
.fb-app .fb-switch input:checked + .fb-switch-slider {
  background-color: var(--fb-sw-on);
  border-color: var(--accent);
}
.fb-app .fb-switch input:checked + .fb-switch-slider::before {
  background-color: var(--fb-sw-knob-on);
  transform: translateX(1.9em);
}
.fb-app .fb-switch input:focus-visible + .fb-switch-slider {
  box-shadow: var(--focus-ring);
}

/* From Uiverse.io by SelfMadeSystem (calm-cat-84) — checkbox, native-friendly */
.fb-app input[type="checkbox"].fb-check,
.fb-app .row-check input[type="checkbox"],
.fb-app .select-all-wrap input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25em; height: 1.25em;
  margin: 0;
  flex-shrink: 0;
  background-color: transparent;
  border: 1.5px solid var(--border-strong);
  border-radius: 0.25em;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background-color .2s, border-color .2s;
}
.fb-app input[type="checkbox"].fb-check:hover,
.fb-app .row-check input[type="checkbox"]:hover,
.fb-app .select-all-wrap input[type="checkbox"]:hover {
  border-color: var(--accent);
}
.fb-app input[type="checkbox"].fb-check:checked,
.fb-app .row-check input[type="checkbox"]:checked,
.fb-app .select-all-wrap input[type="checkbox"]:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.fb-app input[type="checkbox"].fb-check:checked::after,
.fb-app .row-check input[type="checkbox"]:checked::after,
.fb-app .select-all-wrap input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 0.34em; top: 0.1em;
  width: 0.28em; height: 0.55em;
  border: solid var(--accent-ink);
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}
.fb-app input[type="checkbox"].fb-check:focus-visible,
.fb-app .row-check input[type="checkbox"]:focus-visible,
.fb-app .select-all-wrap input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* optional explicit checkmark label pattern (calm-cat HTML structure) */
.fb-app .fb-check-wrap {
  display: inline-flex; align-items: center; gap: 8px;
  position: relative; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.fb-app .fb-check-wrap > input { position: absolute; opacity: 0; width: 0; height: 0; }
.fb-app .fb-check-wrap .checkmark {
  height: 1.3em; width: 1.3em; flex-shrink: 0;
  background-color: transparent;
  border: 1.5px solid var(--border-strong);
  border-radius: 0.25em;
  transition: all .25s;
  position: relative;
}
.fb-app .fb-check-wrap > input:checked ~ .checkmark {
  background-color: var(--accent);
  border-color: var(--accent);
}
.fb-app .fb-check-wrap .checkmark::after {
  content: ""; position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  border: 0.1em solid transparent;
  border-radius: 0.25em;
  transition: all .25s, border-width .1s;
  box-sizing: border-box;
}
.fb-app .fb-check-wrap > input:checked ~ .checkmark::after {
  left: 0.35em; top: 0.12em;
  width: 0.28em; height: 0.55em;
  border-color: transparent var(--accent-ink) var(--accent-ink) transparent;
  border-width: 0 0.15em 0.15em 0;
  border-radius: 0;
  transform: rotate(45deg);
}

/* hub featured rows — border only, no translate (框体不动) v20261025q */
.fb-app .feat a {
  transition: border-color .15s, background .15s, box-shadow .2s;
  transform: none;
}
.fb-app .feat a:hover, .fb-app .feat a:focus-visible {
  transform: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}

/* ========== share page Galaxy wiring v20261025j ========== */
/* row action chips → ghost language (visible border at rest) */
.fb-app .btn-copy,
.fb-app .btn-lock,
.fb-app .btn-del,
.fb-app .fb-chip {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-secondary);
  box-shadow: 0 1px 0 var(--hairline);
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
  z-index: 0;
}
.fb-app .btn-copy:hover,
.fb-app .btn-lock:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-muted);
  box-shadow: 0 0 0 1px rgba(26,86,219,.2);
}
.fb-app .btn-lock.locked {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(26,86,219,.25);
}
.fb-app .btn-del {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
}
.fb-app .btn-del:hover {
  border-color: var(--danger);
  background: rgba(255,107,107,.2);
}

/* bulk toolbar → fb-btn family */
.fb-app .bulk-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  box-shadow: 0 1px 0 var(--hairline);
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s, transform .15s;
}
.fb-app .bulk-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface-hover);
}
.fb-app .bulk-btn:disabled { opacity: .4; cursor: not-allowed; }
.fb-app .bulk-btn.lock {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent);
}
.fb-app .bulk-btn.danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}
.fb-app .bulk-btn.danger:hover:not(:disabled) {
  border-color: var(--danger);
  background: rgba(255,107,107,.2);
}

/* checkbox size lock for share rows (calm-cat + 44px touch) */
.fb-app .row-check input[type="checkbox"] {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
}
.fb-app .row-check input[type="checkbox"]:checked::after {
  left: 0.42em;
  top: 0.14em;
  width: 0.32em;
  height: 0.62em;
}
.fb-app .select-all-wrap input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
}

/* receive sub-tabs: match strengthened seg */
.fb-app .receive-tabs {
  box-shadow: 0 0 0 1px var(--border-strong), inset 0 1px 0 rgba(255,255,255,.8);
}

/* header nav → quiet ghost chips */
.fb-app .header-nav a,
.fb-app .header-nav button {
  border: 1px solid var(--border-strong) !important;
  background: var(--surface-2) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 1px 0 var(--hairline);
}
.fb-app .header-nav a:hover,
.fb-app .header-nav button:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-muted) !important;
}

/* primary/success stay loud at rest */
.fb-app .fb-btn-primary,
.fb-app .btn-primary,
.fb-app .bulk-btn.primary {
  box-shadow: 0 0 0 1px rgba(26,86,219,.28), 0 8px 22px rgba(26,86,219,.28) !important;
}
.fb-app .fb-btn-success,
.fb-app .btn-green {
  box-shadow: 0 0 0 1px rgba(61,214,140,.25), 0 6px 18px rgba(61,214,140,.22);
}


/* plain .drop (delogo etc.): never translate on hover v20261025k */
.fb-app .drop, .fb-app .drop:hover, .fb-app .drop.drag {
  transform: none !important;
}

/* ========== all-modules Galaxy wiring v20261025q ========== */
/* plain .drop → same visual language as .fb-drop (no translate) */
.fb-app .drop {
  position: relative;
  border: 2px dashed rgba(26,86,219,.45) !important;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(26,86,219,.08), rgba(26,86,219,.02));
  box-shadow: inset 0 0 0 1px rgba(26,86,219,.08);
  transition: border-color .2s, background .2s, box-shadow .25s;
  transform: none !important;
}
.fb-app .drop:hover, .fb-app .drop.drag {
  border-color: var(--accent) !important;
  background: var(--accent-muted) !important;
  transform: none !important;
  box-shadow: inset 0 0 0 1px rgba(26,86,219,.15), 0 4px 14px rgba(15,23,42,.08);
}

/* pick-btn → ghost chip */
.fb-app .pick-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-width: 140px;
  min-height: var(--tap-min);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-secondary);
  box-shadow: 0 1px 0 var(--hairline);
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.fb-app .pick-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-muted);
  box-shadow: 0 0 0 1px rgba(26,86,219,.2);
}

/* tool-page logout / top brand nav → ghost */
.fb-app .top .logout,
.fb-app .top button.logout,
.fb-app .area-nav a,
.fb-app .area-nav button,
.fb-app .nav a,
.fb-app .nav button,
.fb-app .side-head a,
.fb-app .side-head button {
  border: 1px solid var(--border-strong) !important;
  background: var(--surface-2) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 1px 0 var(--hairline);
  transition: border-color .15s, color .15s, background .15s;
}
.fb-app .top .logout:hover,
.fb-app .area-nav a:hover,
.fb-app .area-nav button:hover,
.fb-app .nav a:hover,
.fb-app .nav button:hover,
.fb-app .side-head a:hover,
.fb-app .side-head button:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-muted) !important;
}

/* block primary (delogo / ab-audio start) keeps Galaxy fill */
.fb-app .btn.btn-primary,
.fb-app .fb-btn-primary.block {
  /* width comes from page layout */
}
.fb-app a.btn.btn-green,
.fb-app a.fb-btn-success {
  text-decoration: none;
}

/* outline alias already via btn-ghost; keep width:auto for reset */
.fb-app .btn.btn-outline,
.fb-app .actions .btn-outline {
  width: auto;
  margin-top: 0;
  min-height: 40px;
  padding: 10px 16px;
  font-size: 13px;
}

/* admin danger must be danger, not accent */
.fb-app .btn.danger,
.fb-app .fb-btn-danger {
  background: var(--danger) !important;
  color: #1a0505 !important;
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 1px rgba(255,107,107,.25), 0 6px 18px rgba(255,107,107,.18);
}
.fb-app .btn.ghost,
.fb-app .actions .btn.ghost {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-secondary) !important;
  box-shadow: 0 1px 0 var(--hairline);
}
.fb-app .btn.ghost:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-muted) !important;
}

/* checkboxes outside share rows */
.fb-app input[type="checkbox"].fb-check,
.fb-app .opt-row input[type="checkbox"].fb-check,
.fb-app .chk input[type="checkbox"].fb-check,
.fb-app .pick input[type="checkbox"].fb-check,
.fb-app .bar-tips input[type="checkbox"].fb-check {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25em; height: 1.25em;
  margin: 0;
  flex-shrink: 0;
  background-color: transparent;
  border: 1.5px solid var(--border-strong);
  border-radius: 0.25em;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  accent-color: unset;
  transition: background-color .2s, border-color .2s;
}
.fb-app input[type="checkbox"].fb-check:hover {
  border-color: var(--accent);
}
.fb-app input[type="checkbox"].fb-check:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.fb-app input[type="checkbox"].fb-check:checked::after {
  content: "";
  position: absolute;
  left: 0.34em; top: 0.1em;
  width: 0.28em; height: 0.55em;
  border: solid var(--accent-ink);
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

/* area map CTA */
.fb-app .btn-map {
  background: var(--success) !important;
  color: #042f1e !important;
  border: none !important;
  box-shadow: 0 0 0 1px rgba(61,214,140,.25), 0 6px 18px rgba(61,214,140,.22);
}
.fb-app .btn-map:hover { filter: brightness(0.96); }

/* chat composer send → primary language */
.fb-app .composer .send,
.fb-app .composer .fb-btn-primary {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: 1px solid var(--accent) !important;
  box-shadow: 0 0 0 1px rgba(26,86,219,.28), 0 8px 22px rgba(26,86,219,.28) !important;
}
.fb-app .composer .send:hover:not(:disabled) {
  background: var(--accent-hover) !important;
}

/* img-text-replace primary stays loud */
.fb-app header button.primary,
.fb-app #empty button.primary,
.fb-app #cropBar button.primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: 0 0 0 1px rgba(26,86,219,.28), 0 6px 18px rgba(26,86,219,.22);
}

/* media tiles / list: no translate */
.fb-app .media a,
.fb-app .media a:hover,
.fb-app .list a,
.fb-app .list a:hover {
  transform: none !important;
}

/* ========== light theme polish v20261030light ========== */
/* Hub / tool sticky headers → brand blue with white text (Oct-23 memory) */
.fb-app .fb-head,
.fb-app header.fb-head {
  background: var(--accent) !important;
  border-bottom-color: var(--accent-deep) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.12), 0 4px 14px rgba(26,86,219,.25) !important;
  color: #fff;
}
.fb-app .fb-head .brand,
.fb-app .fb-head .brand strong,
.fb-app .fb-head .who {
  color: #fff !important;
}
.fb-app .fb-head::after {
  background: rgba(255,255,255,.85) !important;
}
.fb-app .fb-head .logout,
.fb-app .fb-head .fb-btn-ghost {
  border-color: rgba(255,255,255,.45) !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.fb-app .fb-head .logout:hover,
.fb-app .fb-head .fb-btn-ghost:hover {
  border-color: #fff !important;
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
}

/* Share / tool .header bars → blue */
.fb-app .header {
  background: var(--accent) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--accent-deep) !important;
}
.fb-app .header h1,
.fb-app .header .sub,
.fb-app .header-inner h1 {
  color: #fff !important;
}
.fb-app .header::after {
  background: linear-gradient(90deg, rgba(255,255,255,.9), transparent 70%) !important;
}
.fb-app .header-nav a,
.fb-app .header-nav button {
  border-color: rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.fb-app .header-nav a:hover,
.fb-app .header-nav button:hover {
  border-color: #fff !important;
  color: #fff !important;
  background: rgba(255,255,255,.22) !important;
}

/* img-text-replace <header> */
.fb-app header:not(.fb-head) {
  background: var(--accent);
  color: #fff;
  border-bottom: 1px solid var(--accent-deep);
}
.fb-app header:not(.fb-head) h1,
.fb-app header:not(.fb-head) a.home {
  color: #fff !important;
}
.fb-app header:not(.fb-head) a.home,
.fb-app header:not(.fb-head) .fb-btn-ghost {
  border-color: rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

/* soft card borders on light */
.fb-app .fb-card, .fb-app .card, .fb-app .panel, .fb-app .note, .fb-app .box {
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}
.fb-app .fb-card:hover, .fb-app .card.fb-lift:hover, .fb-app .card:not(.receive-card):hover {
  box-shadow: 0 1px 0 var(--hairline), 0 8px 24px rgba(15,23,42,.10);
}

/* active seg tabs: blue underline feel */
.fb-app .fb-seg > button.active,
.fb-app .tabs.fb-seg > button.active,
.fb-app .fb-seg > button[aria-selected="true"],
.fb-app .receive-tab.active,
.fb-app .radio-inputs .radio input:checked + .name {
  color: var(--accent);
  box-shadow: 0 1px 0 var(--hairline), 0 1px 3px rgba(15,23,42,.08) !important;
}

/* ========== action button spacing v20261030light ========== */
/* User preference: adjacent action buttons must keep ≥8px visible gap (never flush). */
.fb-app .fb-actions,
.fb-app .file-item .actions,
.fb-app .msg-actions,
.fb-app .msg-item .actions,
.fb-app .right-actions,
.fb-app .acts,
.fb-app .header-nav,
.fb-app .receive-toolbar .left,
.fb-app .receive-toolbar .right,
.fb-app .composer .tools,
.fb-app .side-head > div,
.fb-app .actions:not(.receive-card) {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.fb-app .file-item .actions,
.fb-app .msg-actions,
.fb-app .receive-toolbar .left,
.fb-app .receive-toolbar .right,
.fb-app .header-nav,
.fb-app .composer .tools,
.fb-app .side-head > div,
.fb-app .acts {
  display: flex; /* full-row clusters */
}
.fb-app .receive-toolbar {
  gap: 10px;
}
.fb-app .msg-actions {
  justify-content: flex-end;
  margin-top: 6px;
}
/* icon+label inside a single button stays tight; gap above is between buttons */
@media (max-width: 480px) {
  .fb-app .file-item .actions,
  .fb-app .msg-actions,
  .fb-app .receive-toolbar .right {
    gap: 8px;
  }
}

/* ============================================================
   移动端可点区域与动效修正 · v20261030m
   ------------------------------------------------------------
   背景：幽灵按钮的"波浪填充"是两层 140%/160% 的椭圆从底部滑上来，
   由 :hover 驱动。手机没有 hover，点一下会卡在 hover 态（蓝色波浪
   停在半路），而且两层 .45s 同时移动，观感是糊的。
   做法：触屏一律不跑这套装饰，改用即时按压反馈。
   ============================================================ */

/* 1. 触屏 / 粗指针：关掉悬停装饰层 */
@media (hover: none), (pointer: coarse) {
  .fb-app .fb-btn-ghost::before,
  .fb-app .fb-btn-ghost::after,
  .fb-app .btn-ghost::before,
  .fb-app .btn-ghost::after,
  .fb-app .btn-outline::before,
  .fb-app .btn-outline::after,
  .fb-app .logout::before,
  .fb-app .logout::after,
  .fb-app .fb-btn-primary::after,
  .fb-app .btn-primary::after {
    display: none !important;
  }

  /* 即时按压反馈：60ms 内到位，不拖尾 */
  .fb-app .fb-btn:active:not(:disabled),
  .fb-app .btn:active:not(:disabled),
  .fb-app .logout:active:not(:disabled),
  .fb-app .tabs button:active,
  .fb-app .pick-btn:active,
  .fb-app a.fb-btn:active {
    transform: scale(.975);
    transition-duration: .06s;
  }
}

/* 2. 窄屏：可点区域高度下限
   ------------------------------------------------------------
   实测发现的问题：share/chat 顶栏的 <a class="fb-btn-ghost">首页</a>
   没有配 .fb-btn，所以完全没有 min-height，只有 36px；qr/huoke 的分段
   控件用的是 .fb-seg 而不是 .tabs；area 的页脚是裸 <footer> + 行内样式；
   login 的页脚是 <p class="foot">。下面按真实类名逐个兜底。 */
@media (max-width: 640px) {
  /* 顶栏按钮（含未挂 .fb-btn 的裸 .fb-btn-ghost） */
  .fb-app .logout,
  .fb-app button.logout,
  .fb-app .fb-btn-ghost,
  .fb-app .btn-ghost {
    min-height: 44px;
  }

  /* 分段切换控件 */
  .fb-app .tabs button,
  .fb-app .tabs.fb-seg > button,
  .fb-app .fb-seg button,
  .fb-app .fb-seg a,
  .fb-app .seg button {
    min-height: 44px;
  }

  /* 页脚备案链接：行内 <a> 撑出可点区 */
  .fb-app .fb-foot a,
  .fb-app .footer a,
  .fb-app footer a,
  .fb-app .foot a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 2px;
  }

  /* 返回 / 品牌链接 */
  .fb-app .brand a,
  .fb-app a.brand,
  .fb-app header a.home,
  .fb-app .side-head a,
  .fb-app .side-head button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    height: auto;
  }
}

/* 3. 尊重系统"减少动态效果" */
@media (prefers-reduced-motion: reduce) {
  .fb-app *,
  .fb-app *::before,
  .fb-app *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   视觉秩序修正 · v20261030t
   ------------------------------------------------------------
   依据《UI 设计军规》审计，只改三个根因，不动组件结构：
   规则 03/14（层级与对比）+ 规则 19（慎用边框）+ 规则 09（间距亲疏）
   ============================================================ */

/* 【规则 03 · 层级靠颜色，不能靠"薄雾"】
   实测：--text-muted #9ca3af 在白底对比度仅 2.54:1，远低于 WCAG AA 的 4.5，
   而全站有 211 处引用它做辅助文字（提示、上限、页脚、时间）。
   结果就是"次要信息一律看不清"，层级只能靠字号硬撑。
   #6f7783 = 4.52:1，白底达标；页面底 #f0f2f5 上也有 4.03:1。 */
:root {
  --text-muted: #6f7783;
  /* 分隔线同步降噪：1.47:1 → 1.23:1，只做暗示不抢视线 */
  --border: #e4e8ee;
}

/* 【规则 19 · 慎用边框】
   原来卡片是「1px #9ca3af 实线 + 内阴影 + 外阴影」三层叠加，
   在白底页面上等于给每块内容套了个深灰相框——这正是"Excel 感"的来源。
   改成只靠"白底浮起 + 柔和投影"，分区交给背景色差和留白。 */
.fb-app .fb-card,
.fb-app .card,
.fb-app .panel,
.fb-app .note,
.fb-app .box {
  border-color: transparent !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .06);
}

/* 【规则 09 · 间距的"亲疏"之别】
   组间距必须大于组内间距。原来卡片间距 12–14px，而卡片内边距 16–20px，
   属于"组与组比组内还挤"，眼睛分不清哪些内容是一伙的。
   卡片间距统一拉到 22px。 */
.fb-app .fb-card,
.fb-app .card {
  margin-bottom: 22px;
}

/* 【规则 11 · 中文正文行高】
   全局 1.5 对中文偏紧（西文 1.5 够，中文笔画密需要 1.6+）。
   只放开正文容器，按钮等控件维持紧凑。 */
.fb-app {
  line-height: 1.62;
}
.fb-app .fb-btn,
.fb-app .btn,
.fb-app .logout,
.fb-app .tabs button,
.fb-app .fb-seg button {
  line-height: 1.2;
}

/* 【规则 25 ② · 状态切换要有来路】
   分段切换原来瞬间变色，没有任何过渡，点完不知道发生了什么。
   补 180ms 颜色过渡（只过渡颜色与底色，不位移，避免抖动）。 */
.fb-app .fb-seg button,
.fb-app .tabs button {
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

/* ============================================================
   独立评审修正 · v20261030u
   来源：隔离上下文的评审者（只看 390px 截图，不给源码），整体 6/10
   只采纳"有客观依据 + 不违反既有约束"的条目，其余写进报告不动手。
   ============================================================ */

/* 【禁用态：不能用品牌色的浅调】
   原来 :disabled 走 opacity:.45，蓝底变 #97B2EE、绿底变 #8ECFBB。
   评审原话："取色是浅蓝，所以视觉语义是'看着可点但其实是禁用'。"
   禁用就该一眼是禁用：中性灰底 + 灰字 + 去阴影。 */
.fb-app .fb-btn:disabled,
.fb-app .btn:disabled,
.fb-app button:disabled {
  opacity: 1 !important;
  background: #e7eaee !important;
  background-image: none !important;
  color: #8b93a1 !important;
  border-color: #e7eaee !important;
  box-shadow: none !important;
}

/* 【卡片阴影：别停在中间态】
   上一版把描边删了、阴影又留得极淡，评审指出"既没浮起也没边界"。
   白卡压在 #f0f2f5 上本身只有 1.07:1 的色差，必须靠投影把层次做实。 */
.fb-app .fb-card,
.fb-app .card,
.fb-app .panel,
.fb-app .note,
.fb-app .box {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .07);
}

/* ============================================================
   全站视觉换代 · v20261031a「白顶栏 · 墨蓝 · 扁平」
   ------------------------------------------------------------
   换的是气质不是功能：
   · 顶栏 实心蓝横条 → 白底 + 1px 细线（读起来更像工具，不像门户）
   · 主色 #1a56db 亮蓝 → #1e3a8a 墨蓝（更沉，压低"塑料感"）
   · 卡片 白底+柔和阴影 → 纯白 + 1px 细线 + 无阴影（扁平编辑风）
   · 圆角 14/12/10 → 10/9/8（更硬朗）
   · 字阶 标题加大、字重加重，靠体量而不是颜色拉层级
   ============================================================ */

:root {
  /* —— 底色：更亮更干净，让白卡靠细线而非阴影立起来 —— */
  --bg: #f6f7f9;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --surface-hover: #e9ecf1;

  --border: #e5e8ee;
  --border-strong: #d3d8e0;
  --hairline: rgba(16, 24, 40, .07);

  /* —— 主色：墨蓝，比原来的亮蓝沉两档 —— */
  --accent: #1e3a8a;
  --accent-hover: #16306f;
  --accent-deep: #102454;
  --accent-muted: rgba(30, 58, 138, .10);
  --accent-glow: rgba(30, 58, 138, .22);
  --accent-ink: #ffffff;

  /* —— 圆角收硬 —— */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* —— 阴影基本退场，扁平 —— */
  --shadow-soft: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-card: none;
}

/* ---------- 顶栏：蓝横条 → 白底细线 ---------- */
.fb-app .fb-head,
.fb-app header.fb-head,
.fb-app .header,
.fb-app .side-head {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
.fb-app .fb-head::after,
.fb-app .header::after { display: none !important; }

/* 白底上文字必须转深色 */
.fb-app .fb-head .brand,
.fb-app .fb-head .brand strong,
.fb-app .fb-head .who,
.fb-app .header h1,
.fb-app .header .sub,
.fb-app .header-inner h1 {
  color: var(--text) !important;
}
.fb-app .fb-head .logout,
.fb-app .fb-head .fb-btn-ghost {
  border-color: var(--border-strong) !important;
  background: #fff !important;
  color: var(--text-secondary) !important;
}

/* ---------- 卡片：细线 + 无阴影 ---------- */
.fb-app .fb-card,
.fb-app .card,
.fb-app .panel,
.fb-app .note,
.fb-app .box {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}

/* ---------- 按钮：收圆角、去浮起 ---------- */
.fb-app .fb-btn,
.fb-app .btn,
.fb-app .logout,
.fb-app button.logout {
  border-radius: var(--radius-md);
  box-shadow: none;
}
.fb-app .fb-btn-primary,
.fb-app .btn-primary {
  box-shadow: none !important;
}
.fb-app .fb-btn-primary:hover:not(:disabled),
.fb-app .btn-primary:hover:not(:disabled) {
  box-shadow: none !important;
}

/* ---------- 字阶：靠体量拉层级 ---------- */
.fb-app h1,
.fb-app .fb-intro h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.fb-app .fb-card h2,
.fb-app .card h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

/* ---------- 白顶栏补丁：所有"为蓝底写的白字"必须转回深色 ----------
   换白顶栏时漏掉了这一组：design.css 有三段专为蓝底写死
   `color:#fff !important` 的规则（.header-nav、裸 <header> 的 a.home），
   白底白字 = 按钮直接消失，用户就"回不去首页"了。
   凡是底色反转，必须把所有反色/半透明白的控件一起翻过来。 */
.fb-app .header-nav a,
.fb-app .header-nav button,
.fb-app header:not(.fb-head) a.home,
.fb-app header:not(.fb-head) .fb-btn-ghost,
.fb-app .side-head a,
.fb-app .side-head button {
  border-color: var(--border-strong) !important;
  background: var(--surface-2) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}
.fb-app .header-nav a:hover,
.fb-app .header-nav button:hover,
.fb-app header:not(.fb-head) a.home:hover,
.fb-app header:not(.fb-head) .fb-btn-ghost:hover,
.fb-app .side-head a:hover,
.fb-app .side-head button:hover {
  border-color: var(--accent) !important;
  background: var(--accent-muted) !important;
  color: var(--accent) !important;
}
/* img-text-replace 用的是裸 <header>，底色也要跟着转白 */
.fb-app header:not(.fb-head) {
  background: #ffffff !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.fb-app header:not(.fb-head) h1,
.fb-app header:not(.fb-head) .sub {
  color: var(--text) !important;
}

/* ============================================================
   统一动效系统 · v20261031c
   ------------------------------------------------------------
   改前的问题：三套语言并存——
     桌面端幽灵按钮跑"两层椭圆波浪"、主按钮跑"圆形爆散"；
     触屏端被我上几轮改成了缩放；还有一批按钮（.link-btn / .retry-btn
     / 页头导航）压根没有反馈。同一个按钮在手机和电脑上长得不一样。
   现在收敛成一条规则：
     按下 → 缩放 110ms（全设备一致）
     悬停 → 只变颜色，不位移（仅精确指针设备）
     进入 → 卡片淡入上移 220ms（只在首次绘制）
   ============================================================ */

:root {
  --dur-press: 110ms;
  --dur-state: 180ms;
  --dur-enter: 220ms;
  --ease-std: cubic-bezier(.22, .7, .3, 1);
  --ease-press: cubic-bezier(.3, 0, .2, 1);
  --press-scale: .975;
}

/* 1. 拆掉波浪与爆散：这两套在触屏上会"卡在中间态"，是乱的根源 */
.fb-app .fb-btn-ghost::before,
.fb-app .fb-btn-ghost::after,
.fb-app .btn-ghost::before,
.fb-app .btn-ghost::after,
.fb-app .btn-outline::before,
.fb-app .btn-outline::after,
.fb-app .logout::before,
.fb-app .logout::after,
.fb-app .fb-btn-primary::after,
.fb-app .btn-primary::after {
  display: none !important;
}

/* 2. 所有可点元素共用一套过渡曲线与时长 */
.fb-app .fb-btn,
.fb-app .btn,
.fb-app .logout,
.fb-app .tabs button,
.fb-app .fb-seg button,
.fb-app .pick-btn,
.fb-app .link-btn,
.fb-app .retry-btn,
.fb-app .bulk-btn,
.fb-app .header-nav a,
.fb-app .header-nav button,
.fb-app .file-list a,
.fb-app a.home {
  transition:
    transform var(--dur-press) var(--ease-press),
    background-color var(--dur-state) var(--ease-std),
    border-color var(--dur-state) var(--ease-std),
    color var(--dur-state) var(--ease-std),
    box-shadow var(--dur-state) var(--ease-std);
}

/* 3. 按压：全设备一致（原来只有触屏有，桌面没有） */
.fb-app .fb-btn:active:not(:disabled),
.fb-app .btn:active:not(:disabled),
.fb-app .logout:active:not(:disabled),
.fb-app .tabs button:active,
.fb-app .fb-seg button:active,
.fb-app .pick-btn:active:not(:disabled),
.fb-app .link-btn:active,
.fb-app .retry-btn:active:not(:disabled),
.fb-app .header-nav a:active,
.fb-app .header-nav button:active:not(:disabled) {
  transform: scale(var(--press-scale));
}

/* 4. 悬停：只换色，不位移。波浪没了以后，原来"变白字"的悬停必须改写，
   否则会变成白字压浅底 */
@media (hover: hover) and (pointer: fine) {
  .fb-app .fb-btn-ghost:hover:not(:disabled),
  .fb-app .btn-ghost:hover:not(:disabled),
  .fb-app .btn-outline:hover:not(:disabled),
  .fb-app .logout:hover:not(:disabled) {
    background: var(--accent-muted) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
  }
  .fb-app .link-btn:hover { color: var(--accent-hover) !important; }
}

/* 5. 首次进入：卡片淡入上移一次 */
@keyframes fbRiseIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.fb-app .fb-card,
.fb-app .card {
  animation: fbRiseIn var(--dur-enter) var(--ease-std) both;
}

/* 6. 系统开了"减少动态效果"就全部直接到位 */
@media (prefers-reduced-motion: reduce) {
  .fb-app .fb-card,
  .fb-app .card { animation: none !important; }
  .fb-app .fb-btn:active,
  .fb-app .btn:active { transform: none !important; }
}

/* ============================================================
   按钮辨识度 + 深色残留清理 · v20261031d
   ============================================================ */

/* 【按钮不明显】
   上一版把幽灵按钮做成"浅底 + 浅灰字"，和禁用态几乎分不出来。
   次级按钮应该是"白底 + 明确描边 + 深色字"，靠填充区分主次，不靠变淡。 */
.fb-app .fb-btn-ghost:not(:disabled),
.fb-app .btn-ghost:not(:disabled),
.fb-app .btn-outline:not(:disabled) {
  background: #ffffff !important;
  border-color: #c3cad6 !important;
  color: var(--text) !important;
  font-weight: 600;
}

/* 【深色残留】qr 页的 .cta-bar 原本是给深色主题写的渐变，
   在新浅色主题下变成底部一条脏灰带。改成向页面底色淡出。 */
.fb-app .cta-bar {
  background: linear-gradient(180deg, rgba(246, 247, 249, 0), var(--bg) 32%) !important;
  backdrop-filter: none !important;
}
.fb-app .cta-bar .tip { color: var(--text-muted); }

/* 【禁用态别再糊成一片】#e7eaee 底 + 浅灰字在手机上几乎看不见，
   保留"不可点"的观感，但文字要读得出来。 */
.fb-app .fb-btn:disabled,
.fb-app .btn:disabled,
.fb-app button:disabled {
  background: #edf0f4 !important;
  border-color: #dfe4ea !important;
  color: #6b7280 !important;
}

/* ============================================================
   动作区改左右结构 · v20261031f
   ------------------------------------------------------------
   用户明确要求：下载 / 再传 不要上下堆，要左右并排。
   三页（去水印 / AB 音频 / 音视频转文字）的动作区都是 id="actions"，
   用 id + .fb-app 前缀（1,1,0）可以压过各页面自己的 #actions（1,0,0），
   一处改完三页生效。
   左宽右窄（1.4 : 1）：主操作是下载，再传是次要动作，不该平分。
   ============================================================ */
.fb-app #actions {
  display: none;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
  margin-top: 16px;
  align-items: stretch;
}
.fb-app #actions.show { display: grid; }
.fb-app #actions .btn {
  margin-top: 0;
  width: 100%;
  min-height: 46px;
  padding: 0 10px;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   深色主题 · v20261031g
   ------------------------------------------------------------
   做法：所有颜色都走 CSS 变量，深色只覆盖变量 + 少数几处硬编码白。
   开关由 /js/theme.js 注入，选择存 localStorage，默认跟随系统。
   ============================================================ */

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0f1319;
  --bg-elevated: #161b22;
  --surface: #161b22;
  --surface-2: #1d232c;
  --surface-hover: #232a34;

  --border: #262d38;
  --border-strong: #39424f;
  --hairline: rgba(255, 255, 255, .07);

  --text: #e6e9ef;
  --text-secondary: #a2abb9;
  --text-muted: #8a94a2;

  /* 深色下品牌色要提亮，否则压在 #0f1319 上看不清 */
  --accent: #7c96f7;
  --accent-hover: #95aafa;
  --accent-deep: #5b74d6;
  --accent-muted: rgba(124, 150, 247, .16);
  --accent-glow: rgba(124, 150, 247, .26);
  --accent-ink: #0c1220;

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .4);
}

/* 顶栏：白底 → 深底 */
[data-theme="dark"] .fb-app .fb-head,
[data-theme="dark"] .fb-app header.fb-head,
[data-theme="dark"] .fb-app .header,
[data-theme="dark"] .fb-app .side-head,
[data-theme="dark"] .fb-app header:not(.fb-head) {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}

/* 次级按钮：白底 → 深底 */
[data-theme="dark"] .fb-app .fb-btn-ghost:not(:disabled),
[data-theme="dark"] .fb-app .btn-ghost:not(:disabled),
[data-theme="dark"] .fb-app .btn-outline:not(:disabled),
[data-theme="dark"] .fb-app .header-nav a,
[data-theme="dark"] .fb-app .header-nav button {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

/* 禁用态 */
[data-theme="dark"] .fb-app .fb-btn:disabled,
[data-theme="dark"] .fb-app .btn:disabled,
[data-theme="dark"] .fb-app button:disabled {
  background: #1b2028 !important;
  border-color: #242b34 !important;
  color: #6b7684 !important;
}

/* 图标：深色下统一转白（原图是墨蓝线条，压深底等于看不见） */
[data-theme="dark"] .ico img,
[data-theme="dark"] .feat .ico img,
[data-theme="dark"] .media .ico img,
[data-theme="dark"] .list .ico img,
[data-theme="dark"] .fb-head .brand img,
[data-theme="dark"] .drop .icon img {
  filter: brightness(0) invert(1);
}

/* 首页主卡的白色渐变 */
[data-theme="dark"] .fb-app .feat a,
[data-theme="dark"] .feat a {
  background: var(--surface) !important;
}

/* 二维码页吸底条的浅色渐变 */
[data-theme="dark"] .fb-app .cta-bar {
  background: linear-gradient(180deg, rgba(15, 19, 25, 0), var(--bg) 32%) !important;
}

/* 进度条轨道 */
[data-theme="dark"] .fb-app .bar { background: var(--surface-2); }

/* ---------- 主题开关按钮 ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-state, .18s) ease,
              border-color var(--dur-state, .18s) ease,
              color var(--dur-state, .18s) ease,
              transform var(--dur-press, 110ms) ease;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { display: block; }
.theme-toggle .ic-sun { display: none; }
[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun { display: block; }

@media (max-width: 640px) {
  .theme-toggle { width: 44px; height: 44px; }
}

/* ---------- 主题开关接入后的两处布局修正 ---------- */

/* .top 原本是 space-between 两个子元素（品牌 + 退出），
   插入开关后变三个，开关会被顶到正中间。改成品牌占满左侧，右侧两个贴在一起。 */
.fb-app .top { justify-content: flex-start; }
.fb-app .top .brand { margin-right: auto; }

/* 首页顶栏多了 44px 开关后会被挤到第二行。
   早期做法是窄屏直接隐藏用户名——用户反馈"看不到自己是谁了"，不行。
   改成：顶栏永不换行，品牌保持原宽，用户名自动压缩并显示省略号。 */
@media (max-width: 640px) {
  .fb-app .fb-head {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .fb-app .fb-head .brand { flex: 0 0 auto; }
  .fb-app .fb-head .who {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    text-align: right;
    font-size: 12px;
  }
  .fb-app .fb-head .logout {
    flex: 0 0 auto;
    padding: 0 10px;
    font-size: 12.5px;
  }
  .fb-app .fb-head .theme-toggle {
    flex: 0 0 auto;
    width: 38px; height: 38px;
  }
}

/* 登录页左侧品牌面板：深色模式下 #1a56db→#123a96 的渐变是一大块亮蓝，
   在深色页面里非常刺眼。压暗到接近墨蓝的深调，保留层次但不发光。 */
[data-theme="dark"] .hero,
[data-theme="dark"] .stage .brand-side,
[data-theme="dark"] .brand-side {
  background-image: linear-gradient(165deg, #1b2a5e 0%, #16234c 55%, #101a38 100%)
    !important;
}

/* ============================================================
   深色主题调优 · v20261031j
   ------------------------------------------------------------
   用户反馈"深色感觉不太好"。量化后的真因：
     底色 #0f1319 → 卡片 #161b22 对比只有 **1.08:1**
   这在感知上等于没有分层——整片糊成一块。正文对比 14:1 是够的，
   所以问题不在字，而在"块与块之间没有台阶"。
   改法：底色压到接近黑，卡片抬亮，对比提到 1.28:1；再补一道
   内侧高光（inset 0 1px 0 rgba(255,255,255,.035)）让卡片"浮起来"。
   ============================================================ */

[data-theme="dark"] {
  --bg: #090b10;
  --bg-elevated: #1d2531;
  --surface: #1d2531;
  --surface-2: #242e3b;
  --surface-hover: #2a3543;

  --border: #313c4b;
  --border-strong: #435063;
  --hairline: rgba(255, 255, 255, .08);

  --text: #eef2f8;
  --text-secondary: #aab5c4;
  --text-muted: #8e9aab;

  --accent: #6f97f5;
  --accent-hover: #8aa9f8;
  --accent-deep: #4e73d4;
  --accent-muted: rgba(111, 151, 245, .16);
  --accent-glow: rgba(111, 151, 245, .26);
  --accent-ink: #08111f;
}

/* 深色下卡片必须有"抬起感"：底色差 + 内侧顶部高光 + 极轻投影 */
[data-theme="dark"] .fb-app .fb-card,
[data-theme="dark"] .fb-app .card,
[data-theme="dark"] .fb-app .panel,
[data-theme="dark"] .fb-app .note,
[data-theme="dark"] .fb-app .box {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 1px 3px rgba(0, 0, 0, .45) !important;
}

/* 顶栏作为独立一层，比卡片再深一点，靠下边缘分开 */
[data-theme="dark"] .fb-app .fb-head,
[data-theme="dark"] .fb-app .header,
[data-theme="dark"] .fb-app .side-head,
[data-theme="dark"] .fb-app header:not(.fb-head) {
  background: #121821 !important;
  border-bottom-color: var(--border) !important;
}

/* 首页主卡在深色下用比普通卡更亮一档，保持"主次" */
[data-theme="dark"] .feat a {
  background: #232e3c !important;
}

/* 页面底色上的径向光晕在深色下会显脏，关掉 */
[data-theme="dark"] .fb-app {
  background: var(--bg) !important;
}

/* ============================================================
   深色主题 · 重做「Midnight」v20261031k
   ------------------------------------------------------------
   用户评价上一版：「样式只做了反向」——确实如此：
   那版只是把浅色的"白底深字"翻成"深底浅字"，卡片形态、层次手段、
   按钮质感全部照搬，只是颜色取反，所以看着像滤镜。
   这一版按"为深色重新设计"来做，四条原则：
     ① 层次用「细边 + 内侧高光」表达，不用投影（深色下投影几乎不可见）
     ② 次级按钮改透明底 + 描边（深色下填充底会显得笨重）
     ③ 主按钮做微渐变 + 深色字（浅色是纯色块 + 白字，深色不能照搬）
     ④ 页面底色加一层极淡的顶部光晕，给画面纵深，避免整片死黑
   本节写在文件最后，特异性与之前的深色规则相同但顺序更后，整体覆盖。
   ============================================================ */

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0e14;
  --bg-elevated: #12171f;
  --surface: #12171f;
  --surface-2: #1a212b;
  --surface-hover: #222a35;

  --border: #212935;
  --border-strong: #33404f;
  --hairline: rgba(255, 255, 255, .06);

  --text: #dfe6f0;
  --text-secondary: #9aa7b8;
  --text-muted: #6f7c8e;

  --accent: #7a9cf7;
  --accent-hover: #93b0f9;
  --accent-deep: #4f6fd0;
  --accent-muted: rgba(122, 156, 247, .14);
  --accent-glow: rgba(122, 156, 247, .28);
  --accent-ink: #0a1020;

  --shadow-soft: none;
  --shadow-card: none;
}

/* ④ 页面底色：顶部一层极淡光晕，给画面纵深 */
[data-theme="dark"] .fb-app {
  background:
    radial-gradient(900px 420px at 50% -140px, rgba(122, 156, 247, .10), transparent 70%),
    var(--bg) !important;
}

/* ① 卡片：细边 + 内侧顶部高光，完全不投影 */
[data-theme="dark"] .fb-app .fb-card,
[data-theme="dark"] .fb-app .card,
[data-theme="dark"] .fb-app .panel,
[data-theme="dark"] .fb-app .note,
[data-theme="dark"] .fb-app .box {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

/* 顶栏：比卡片再深半档，靠一条亮线分开（不用投影） */
[data-theme="dark"] .fb-app .fb-head,
[data-theme="dark"] .fb-app header.fb-head,
[data-theme="dark"] .fb-app .header,
[data-theme="dark"] .fb-app .side-head,
[data-theme="dark"] .fb-app header:not(.fb-head) {
  background: rgba(11, 14, 20, .92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* ② 次级按钮：透明底 + 描边，不填充 */
[data-theme="dark"] .fb-app .fb-btn-ghost:not(:disabled),
[data-theme="dark"] .fb-app .btn-ghost:not(:disabled),
[data-theme="dark"] .fb-app .btn-outline:not(:disabled),
[data-theme="dark"] .fb-app .header-nav a,
[data-theme="dark"] .fb-app .header-nav button,
[data-theme="dark"] .fb-app .side-head a,
[data-theme="dark"] .fb-app .side-head button,
[data-theme="dark"] .theme-toggle {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .fb-app .fb-btn-ghost:hover:not(:disabled),
[data-theme="dark"] .fb-app .btn-ghost:hover:not(:disabled),
[data-theme="dark"] .fb-app .header-nav a:hover,
[data-theme="dark"] .fb-app .header-nav button:hover {
  background: var(--accent-muted) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ③ 主按钮：微渐变 + 深色字（深色下纯色块会显得"贴"在背景上） */
[data-theme="dark"] .fb-app .fb-btn-primary,
[data-theme="dark"] .fb-app .btn-primary {
  background-image: linear-gradient(180deg, #8dacfa 0%, #6d8ef2 100%) !important;
  background-color: #6d8ef2 !important;
  color: var(--accent-ink) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 2px 10px rgba(109, 142, 242, .22) !important;
}

/* 成功色（下载）：深色下同样做渐变，避免一大块死绿 */
[data-theme="dark"] .fb-app .fb-btn-success,
[data-theme="dark"] .fb-app .btn-green {
  background-image: linear-gradient(180deg, #34d399 0%, #10b981 100%) !important;
  background-color: #10b981 !important;
  color: #04231a !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset !important;
}

/* 禁用态：深色下"更暗 + 更灰"，不是把浅色灰翻过来 */
[data-theme="dark"] .fb-app .fb-btn:disabled,
[data-theme="dark"] .fb-app .btn:disabled,
[data-theme="dark"] .fb-app button:disabled {
  background: #151b24 !important;
  background-image: none !important;
  border-color: #232b36 !important;
  color: #5c6775 !important;
  box-shadow: none !important;
}

/* 输入框 / 下拉：深色下用"更深的内陷"而不是亮块 */
[data-theme="dark"] .fb-app input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] .fb-app textarea,
[data-theme="dark"] .fb-app select {
  background: #0e131a !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

/* 分段控件 / chips：半透明底，不用实心灰块 */
[data-theme="dark"] .fb-app .tabs.fb-seg,
[data-theme="dark"] .fb-app .fb-seg {
  background: rgba(255, 255, 255, .04) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .limits .chip,
[data-theme="dark"] .fb-app .chip {
  background: rgba(255, 255, 255, .05) !important;
  color: var(--text-secondary) !important;
}

/* 分组标题的分隔线：用带蓝调的细线，不是中性灰 */
[data-theme="dark"] .sec-h::after {
  background: linear-gradient(90deg, var(--border), transparent) !important;
  opacity: 1 !important;
}

/* 首页主卡：与普通卡同色，只保留内侧高光。
   曾在左侧加过一道 2px 蓝色强调条（::before），用户反馈"多了块颜色"已删除；
   若以后想恢复，把下面这段注释解开即可。 */
[data-theme="dark"] .feat a {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}
[data-theme="dark"] .feat a::before {
  display: none !important;
}
/*
[data-theme="dark"] .feat a::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--accent), transparent);
  opacity: .55;
}
[data-theme="dark"] .feat a:hover::before { opacity: 1; }
*/

/* 进度条底槽 */
[data-theme="dark"] .fb-app .bar { background: rgba(255, 255, 255, .07); }

/* 二维码页吸底条 */
[data-theme="dark"] .fb-app .cta-bar {
  background: linear-gradient(180deg, rgba(11, 14, 20, 0), var(--bg) 32%) !important;
}

/* 登录页品牌面板 */
[data-theme="dark"] .hero {
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(122, 156, 247, .16), transparent 58%),
    linear-gradient(165deg, #16203a 0%, #101728 55%, #0b1120 100%) !important;
}

/* ============================================================
   修两处深色下的分段条问题 · v20261031n
   ============================================================ */

/* ① 白线来源：分段条上沿的内高光
   浅色主题里 `.tabs.fb-seg` / `.receive-tabs` 用
   `box-shadow: 0 0 0 1px border, inset 0 1px 0 rgba(255,255,255,.8)`
   做"玻璃反光"——80% 的白，在浅色下只是微光，压到深色底上就是一道刺眼白线，
   正好在按钮上沿。深色下换成中性描边，不要高光。 */
[data-theme="dark"] .fb-app .tabs.fb-seg,
[data-theme="dark"] .fb-app .receive-tabs,
[data-theme="dark"] .fb-app .fb-seg,
[data-theme="dark"] .fb-app .seg {
  box-shadow: 0 0 0 1px var(--border) !important;
}

/* ② 接收视图「全部/文本/文件」条与下方工具栏原本零间距（margin-bottom:0），
   同样底色的两块贴在一起，看起来像下沿被切掉了。给 10px 呼吸。 */
.fb-app .receive-tabs {
  margin-bottom: 10px !important;
}