@charset "UTF-8";
/* ==========================================================================
   个人网址导航系统 · app.css（唯一全局样式表）
   原生 CSS：设计 Token / 重置 / 布局 / 组件 / 响应式
   主题：<html data-theme="light|dark">（仅属性选择器，不用媒体查询切主题）
   断点：移动 <640px · 平板 640~1024px · 桌面 >1024px
   ========================================================================== */

/* ===== 设计 Token：浅色（默认） ===== */
:root {
  --primary: #6366F1;
  --primary-rgb: 99,102,241;
  --primary-soft: rgba(var(--primary-rgb), .12);
  --primary-text: var(--primary);
  --on-primary: #FFFFFF;

  --bg: #F7F8FA;
  --card: #FFFFFF;
  --text: #111827;
  --text-2: #6B7280;

  --border: rgba(17,24,39,.08);
  --input-border: rgba(17,24,39,.12);
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04);
  --shadow-hover: 0 2px 6px rgba(0,0,0,.08), 0 16px 40px rgba(0,0,0,.08);
  --shadow-modal: 0 24px 64px rgba(0,0,0,.18);
  --card-border-color: transparent;

  --glass-bg: rgba(255,255,255,.68);
  --glass-bg-strong: rgba(255,255,255,.86);
  --glass-blur: blur(18px) saturate(180%);
  --overlay: rgba(15,17,21,.42);
  --mask: rgba(15,17,21,.45);

  --ok: #16A34A;     --ok-rgb: 22,163,74;
  --warn: #D97706;   --warn-rgb: 217,119,6;
  --danger: #DC2626; --danger-rgb: 220,38,38;
  --info: var(--primary);

  --r-card: 16px; --r-ctl: 10px; --r-pill: 999px; --r-sm: 8px; --r-lg: 20px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fw-title: 600;

  --tr: .18s ease;
  --tr-slow: .26s cubic-bezier(.16,1,.3,1);

  --sidebar-w: 240px; --sidebar-w-collapsed: 64px; --topbar-h: 60px; --content-max: 1400px;

  /* 标签色板（12 色 · 浅色：柔和底 + 深色字） */
  --tag-0-bg: #EEF0FE;  --tag-0-fg: #4338CA;
  --tag-1-bg: #F5EEFE;  --tag-1-fg: #7E22CE;
  --tag-2-bg: #E8F1FE;  --tag-2-fg: #1D4ED8;
  --tag-3-bg: #E4F6FB;  --tag-3-fg: #0E7490;
  --tag-4-bg: #E3F7F3;  --tag-4-fg: #0F766E;
  --tag-5-bg: #E7F7EC;  --tag-5-fg: #15803D;
  --tag-6-bg: #F1F8DF;  --tag-6-fg: #4D7C0F;
  --tag-7-bg: #FDF3DA;  --tag-7-fg: #B45309;
  --tag-8-bg: #FEEEE0;  --tag-8-fg: #C2410C;
  --tag-9-bg: #FDEBEC;  --tag-9-fg: #B91C1C;
  --tag-10-bg: #FCEBF3; --tag-10-fg: #BE185D;
  --tag-11-bg: #EEF1F5; --tag-11-fg: #475569;

  color-scheme: light;
}

/* ===== 设计 Token：深色（细边框代替阴影） ===== */
:root[data-theme="dark"] {
  --primary-text: #818CF8;
  --primary-soft: rgba(var(--primary-rgb), .18);

  --bg: #0F1115;
  --card: #1A1D23;
  --text: #E5E7EB;
  --text-2: #9CA3AF;

  --border: rgba(255,255,255,.09);
  --input-border: rgba(255,255,255,.14);
  --shadow: none;
  --shadow-hover: none;
  --shadow-modal: 0 24px 64px rgba(0,0,0,.6);
  --card-border-color: rgba(255,255,255,.09);

  --glass-bg: rgba(26,29,35,.72);
  --glass-bg-strong: rgba(26,29,35,.88);
  --overlay: rgba(6,8,12,.62);
  --mask: rgba(6,8,12,.62);

  --ok: #4ADE80;     --ok-rgb: 74,222,128;
  --warn: #FBBF24;   --warn-rgb: 251,191,36;
  --danger: #F87171; --danger-rgb: 248,113,113;

  /* 标签色板（深色：低饱和深底 + 亮色字） */
  --tag-0-bg: rgba(99,102,241,.18);   --tag-0-fg: #A5B4FC;
  --tag-1-bg: rgba(168,85,247,.18);   --tag-1-fg: #D8B4FE;
  --tag-2-bg: rgba(59,130,246,.18);   --tag-2-fg: #93C5FD;
  --tag-3-bg: rgba(6,182,212,.18);    --tag-3-fg: #67E8F9;
  --tag-4-bg: rgba(20,184,166,.18);   --tag-4-fg: #5EEAD4;
  --tag-5-bg: rgba(34,197,94,.18);    --tag-5-fg: #86EFAC;
  --tag-6-bg: rgba(132,204,22,.18);   --tag-6-fg: #BEF264;
  --tag-7-bg: rgba(245,158,11,.18);   --tag-7-fg: #FCD34D;
  --tag-8-bg: rgba(249,115,22,.18);   --tag-8-fg: #FDBA74;
  --tag-9-bg: rgba(239,68,68,.18);    --tag-9-fg: #FCA5A5;
  --tag-10-bg: rgba(236,72,153,.18);  --tag-10-fg: #F9A8D4;
  --tag-11-bg: rgba(148,163,184,.18); --tag-11-fg: #CBD5E1;

  color-scheme: dark;
}

/* ===== 基础重置 ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: 14px; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-title); line-height: 1.3; }
a { color: var(--primary-text); text-decoration: none; }
a:hover { text-decoration: none; }
img, svg, video { max-width: 100%; }
img { display: block; border: 0; }

button, input, select, textarea {
  font: inherit; color: inherit; background: none; border: 0; border-radius: 0;
  appearance: none; -webkit-appearance: none; outline: none;
}

button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
ul, ol { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
hr { border: 0; border-top: 1px solid var(--border); }
mark { background: rgba(var(--primary-rgb), .18); color: inherit; border-radius: 3px; padding: 0 2px; }
::selection { background: rgba(var(--primary-rgb), .22); }

/* ===== 自定义滚动条 ===== */
* { scrollbar-width: thin; scrollbar-color: rgba(128,134,148,.45) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  background: rgba(128,134,148,.32); border: 3px solid transparent;
  border-radius: var(--r-pill); background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover { background: rgba(128,134,148,.55); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ===== 焦点可见性（不清除焦点样式） ===== */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ===== 关键帧动画 ===== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes modalOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.96); } }
@keyframes sheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheetOut { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-10px) scale(.96); } }
@keyframes shimmer { from { background-position: -160% 0; } to { background-position: 260% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounceDown { 0%, 100% { transform: translateY(0); opacity: .85; } 50% { transform: translateY(8px); opacity: 1; } }
@keyframes pulseSoft { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ===== 工具类 ===== */
.hidden { display: none !important; }
/* 注意：.only-mobile / .only-desktop 只负责「隐藏」某一断点下的元素，
   绝不能用 display: initial 来「显示」——那会覆盖 .btn / .icon-btn 的 inline-flex，
   导致图标与文字被拆成两行。显隐规则统一放在文件末尾的两个媒体查询里。 */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.glass {
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur); border-color: var(--glass-border, var(--border));
}

.muted { color: var(--text-2); }
.nowrap-ellipsis { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.divider { height: 1px; background: var(--border); border: 0; margin: var(--s4) 0; }

.badge {
  display: inline-flex; align-items: center; gap: var(--s1); height: 20px; padding: 0 8px;
  border-radius: var(--r-pill); background: rgba(var(--primary-rgb), .12);
  color: var(--primary-text); font-size: 11px; font-weight: 600; white-space: nowrap;
}

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); flex: none; }
.dot-ok { background: var(--ok); }
.dot-off { background: var(--text-2); opacity: .6; }

.kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 6px; border: 1px solid var(--input-border); border-bottom-width: 2px;
  background: var(--bg); color: var(--text-2); font-family: var(--font-mono); font-size: 11px; line-height: 1;
}

/* ===== 登录页 ===== */
body[data-view="login"] { background: var(--bg); }

.login-view {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--s5); min-height: 100vh; min-height: 100dvh;
  padding: var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom)); overflow: hidden;
}

.login-view::before {
  content: ""; position: fixed; inset: -20% -10% auto -10%; height: 70vh; pointer-events: none;
  background:
    radial-gradient(60% 60% at 30% 20%, rgba(var(--primary-rgb), .20), transparent 70%),
    radial-gradient(50% 50% at 78% 8%, rgba(var(--primary-rgb), .12), transparent 72%);
  filter: blur(6px);
}

.login-view::after {
  content: ""; position: fixed; inset: auto -10% -30% -10%; height: 55vh; pointer-events: none;
  background: radial-gradient(50% 60% at 70% 90%, rgba(var(--primary-rgb), .10), transparent 70%);
  filter: blur(8px);
}

.login-card {
  position: relative; z-index: 1; width: 400px; max-width: 100%;
  padding: var(--s6) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s5);
  border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--card-border-color);
  box-shadow: var(--shadow);
}

.login-card.glass { background: var(--glass-bg-strong); }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; }

.login-brand-logo {
  width: 44px; height: 44px; border-radius: 12px; object-fit: cover;
  background: rgba(var(--primary-rgb), .12); border: 1px solid var(--border);
}

.login-brand-title { font-size: 18px; font-weight: var(--fw-title); letter-spacing: .2px; }
.login-form { display: flex; flex-direction: column; gap: var(--s4); }

.login-hint {
  position: relative; padding: 10px 12px 10px 14px; border-radius: var(--r-sm);
  background: rgba(var(--primary-rgb), .08); color: var(--text-2); font-size: 12px; line-height: 1.6;
}

.login-hint::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: var(--r-pill); background: var(--primary);
}

.form-error {
  display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: var(--r-sm);
  background: rgba(var(--danger-rgb), .10); color: var(--danger); font-size: 12px;
  font-weight: 500; line-height: 1.5;
}

.form-error:empty { display: none; }

/* ===== 表单控件 ===== */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field-hint { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

.input, .textarea, .select {
  width: 100%; min-height: 38px; padding: 8px 12px; border-radius: var(--r-ctl);
  border: 1px solid var(--input-border); background-color: var(--bg); color: var(--text);
  font-size: 14px; line-height: 1.4; transition: all var(--tr);
}

/* 只能用 background-color：若用 background 简写，会把 .select 的
   background-repeat / position / size 一并重置，深色模式下箭头会平铺成好几个 */
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .textarea,
:root[data-theme="dark"] .select { background-color: rgba(255,255,255,.04); }

.input::placeholder, .textarea::placeholder { color: var(--text-2); opacity: .75; }
.input:hover, .textarea:hover, .select:hover { border-color: rgba(var(--primary-rgb), .35); }

.input:focus, .textarea:focus, .select:focus {
  background-color: var(--card); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .14);
}

.input:disabled, .textarea:disabled, .select:disabled { opacity: .55; cursor: not-allowed; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .12); }
.textarea { min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.6; }

.select {
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px 15px;
}

:root[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.select option { background: var(--card); color: var(--text); }
.input-affix { position: relative; display: block; width: 100%; }
.input-affix .input { padding-right: 44px; }

.affix-btn {
  position: absolute; right: 0; top: 0; bottom: 0; width: 44px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  color: var(--text-2); font-size: 16px; transition: all var(--tr);
}

.affix-btn:hover { color: var(--primary-text); background: rgba(var(--primary-rgb), .08); }
.affix-btn:active { transform: scale(.94); }
.input-group { display: flex; align-items: stretch; gap: var(--s2); width: 100%; }
.input-group .input { flex: 1; min-width: 0; }
.input-group .btn { flex: none; }

/* iOS 风格开关 */
.switch-label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; user-select: none; -webkit-user-select: none; }

.switch {
  position: relative; flex: none; width: 44px; height: 26px;
  border-radius: var(--r-pill); background: rgba(128,134,148,.35); transition: all var(--tr);
}

.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: all var(--tr);
}

.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: .5; cursor: not-allowed; }
.switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.switch-label > span { font-size: 14px; color: var(--text); }

/* 分段控件 */
.segmented {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-ctl);
  background: rgba(128,134,148,.14); border: 1px solid var(--border);
}

.segmented-item {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px;
  padding: 0 12px; border-radius: 7px; color: var(--text-2); font-size: 13px;
  font-weight: 600; white-space: nowrap; transition: all var(--tr);
}

.segmented-item:hover { color: var(--text); }

.segmented-item.is-active,
.segmented-item[aria-selected="true"] {
  background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
}

:root[data-theme="dark"] .segmented-item.is-active,
:root[data-theme="dark"] .segmented-item[aria-selected="true"] {
  background: rgba(255,255,255,.10); box-shadow: none; border: 1px solid var(--border);
}

/* 自定义复选框 / 单选框 */
.checkbox, .radio {
  position: relative; flex: none; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--input-border); background: var(--card); transition: all var(--tr); cursor: pointer;
}

.radio { border-radius: 50%; }
.checkbox:checked { background: var(--primary); border-color: var(--primary); }

.checkbox:checked::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px;
  border: solid var(--on-primary); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.radio:checked { border-color: var(--primary); border-width: 5px; }
.checkbox:hover, .radio:hover { border-color: var(--primary); }
.checkbox:disabled, .radio:disabled { opacity: .5; cursor: not-allowed; }

/* 颜色选择器 */
.color-input {
  width: 44px; height: 34px; padding: 0; border: 1px solid var(--input-border);
  border-radius: var(--r-ctl); background: var(--card); cursor: pointer; overflow: hidden; transition: all var(--tr);
}

.color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.color-input::-webkit-color-swatch { border: 0; border-radius: 7px; }
.color-input::-moz-color-swatch { border: 0; border-radius: 7px; }

/* 滑块 */
.range { width: 100%; height: 22px; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--r-pill); background: rgba(var(--primary-rgb), .22); }

.range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--card); box-shadow: 0 1px 4px rgba(0,0,0,.22); transition: transform var(--tr);
}

.range::-webkit-slider-thumb:hover { transform: scale(1.08); }
.range::-moz-range-track { height: 4px; border-radius: var(--r-pill); background: rgba(var(--primary-rgb), .22); }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--primary); border: 2px solid var(--card); }

/* 拖拽上传区 */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 120px; padding: var(--s5); border: 1.5px dashed var(--input-border);
  border-radius: var(--r-card); background: rgba(var(--primary-rgb), .03); color: var(--text-2);
  font-size: 13px; text-align: center; cursor: pointer; transition: all var(--tr);
}

.dropzone:hover, .dropzone.is-drag-over { border-color: var(--primary); background: rgba(var(--primary-rgb), .07); color: var(--text); }

/* ===== 按钮 ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px;
  padding: 0 14px; border-radius: var(--r-ctl); border: 1px solid transparent; background: transparent;
  color: var(--text); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
  text-align: center; user-select: none; -webkit-user-select: none; transition: all var(--tr);
}

.btn:active { transform: scale(.97); }
.btn:disabled, .btn[disabled] { opacity: .5; pointer-events: none; }
.btn .icon { flex: none; font-size: 18px; }

.btn-primary {
  background: linear-gradient(180deg, rgba(var(--primary-rgb), .92), var(--primary));
  color: var(--on-primary); border-color: rgba(0,0,0,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(var(--primary-rgb), .28);
}

.btn-primary:hover {
  background: linear-gradient(180deg, var(--primary), var(--primary)); filter: brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 14px rgba(var(--primary-rgb), .32);
}

.btn-ghost { color: var(--text-2); }
.btn-ghost:hover { background: rgba(128,134,148,.14); color: var(--text); }
.btn-outline { border-color: var(--input-border); background: var(--card); color: var(--text); }
.btn-outline:hover { border-color: rgba(var(--primary-rgb), .45); color: var(--primary-text); background: rgba(var(--primary-rgb), .05); }

.btn-danger {
  background: var(--danger); color: #FFFFFF; border-color: rgba(0,0,0,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.btn-danger:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 14px rgba(var(--danger-rgb), .3); }
.btn-sm { min-height: 32px; padding: 0 10px; font-size: 13px; border-radius: var(--r-sm); gap: 4px; }
.btn-sm .icon { font-size: 16px; }
.btn-lg { min-height: 46px; padding: 0 20px; font-size: 15px; border-radius: 12px; }
.btn-block { width: 100%; flex: 1 1 auto; }
.btn-text { min-height: 32px; padding: 0 6px; color: var(--primary-text); background: transparent; text-decoration: none; }
.btn-text:hover { background: rgba(var(--primary-rgb), .08); }
.btn-text.is-danger, .btn-text.is-danger:hover { color: var(--danger); }

/* 加载态 */
.spinner {
  width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid currentColor;
  border-top-color: transparent; border-right-color: transparent; opacity: .9; animation: spin .7s linear infinite;
}

.btn.is-loading { opacity: .8; pointer-events: none; position: relative; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading > .spinner { visibility: visible; position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -8px; }

/* 图标按钮 */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  flex: none; border-radius: var(--r-ctl); border: 1px solid transparent; background: transparent;
  color: var(--text-2); font-size: 18px; transition: all var(--tr);
}

.icon-btn:hover { background: rgba(128,134,148,.14); color: var(--text); }
.icon-btn:active { transform: scale(.94); }
.icon-btn.is-active { background: rgba(var(--primary-rgb), .12); color: var(--primary-text); }
.icon-btn.is-danger:hover { background: rgba(var(--danger-rgb), .12); color: var(--danger); }
.icon-btn:disabled { opacity: .45; pointer-events: none; }
.icon-btn .icon { font-size: 18px; }

.icon {
  width: 1em; height: 1em; display: block; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.copy-btn.is-copied { color: #16A34A; }

/* ===== 应用主布局 ===== */
.app-view { display: flex; min-height: 100vh; width: 100%; }

.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column;
  width: var(--sidebar-w); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur); border-right: 1px solid var(--border);
  transition: width var(--tr), transform var(--tr); overflow: hidden;
}

.sidebar-head {
  display: flex; align-items: center; height: var(--topbar-h); flex: none;
  padding: 0 var(--s3) 0 var(--s4); border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; }

.brand-logo {
  width: 28px; height: 28px; flex: none; border-radius: var(--r-sm); object-fit: cover;
  background: rgba(var(--primary-rgb), .14); border: 1px solid var(--border);
}

.brand-title {
  font-size: 15px; font-weight: var(--fw-title); color: var(--text); min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: opacity var(--tr);
}

.cat-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--s2); display: flex; flex-direction: column; gap: 2px; }
.cat-group { display: flex; flex-direction: column; gap: 2px; }

.cat-item {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px;
  padding: 0 8px; border-radius: var(--r-ctl); color: var(--text-2); font-size: 14px;
  font-weight: 500; text-align: left; transition: all var(--tr);
}

.cat-item:hover { background: rgba(128,134,148,.12); color: var(--text); }
.cat-item.is-active { background: rgba(var(--primary-rgb), .12); color: var(--primary-text); font-weight: 600; }

.cat-item.is-active::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: var(--r-pill); background: var(--primary);
}

.cat-icon { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.cat-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.cat-count {
  flex: none; height: 18px; min-width: 20px; padding: 0 6px; border-radius: var(--r-pill);
  background: rgba(128,134,148,.16); color: var(--text-2); font-size: 11px; font-weight: 600;
  line-height: 18px; text-align: center;
}

.cat-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  margin-right: -4px; border-radius: 6px; color: var(--text-2); font-size: 14px;
  transition: transform var(--tr), background var(--tr), color var(--tr);
}

.cat-toggle:hover { background: rgba(128,134,148,.16); color: var(--text); }
.cat-toggle.is-open, .cat-item.is-open .cat-toggle { transform: rotate(90deg); }

.cat-sub {
  display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 17px;
  padding-left: 10px; border-left: 1px solid var(--border);
}

.cat-item.is-sub { min-height: 32px; font-size: 13px; font-weight: 400; }
.cat-item.is-sub.is-active { font-weight: 600; }
.cat-sub.is-collapsed, .cat-group.is-collapsed .cat-sub { display: none; }

.sidebar-foot {
  flex: none; padding: var(--s2); border-top: 1px solid var(--border); display: flex;
  flex-direction: column; gap: 2px; padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom));
}

.sidebar-foot .nav-item { min-height: 40px; }

.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 8px;
  border-radius: var(--r-ctl); color: var(--text-2); font-size: 14px; font-weight: 500;
  text-align: left; transition: all var(--tr);
}

.nav-item:hover { background: rgba(128,134,148,.12); color: var(--text); }
.nav-item.is-active { background: rgba(var(--primary-rgb), .12); color: var(--primary-text); font-weight: 600; }
.nav-item.is-danger:hover { background: rgba(var(--danger-rgb), .12); color: var(--danger); }
.nav-item .icon, .nav-item .cat-icon { font-size: 18px; }
.nav-item .nav-item-text, .nav-item .cat-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* 折叠态 */
body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }

body.sidebar-collapsed .brand-title,
body.sidebar-collapsed .cat-name,
body.sidebar-collapsed .nav-item-text,
body.sidebar-collapsed .cat-count,
body.sidebar-collapsed .cat-toggle { display: none; }

body.sidebar-collapsed .sidebar-head { padding: 0; justify-content: center; }
body.sidebar-collapsed .brand { justify-content: center; }
body.sidebar-collapsed .cat-item, body.sidebar-collapsed .nav-item { justify-content: center; gap: 0; padding: 0; }
body.sidebar-collapsed .cat-icon, body.sidebar-collapsed .nav-item .icon { width: 24px; height: 24px; font-size: 24px; }
body.sidebar-collapsed .cat-sub { display: none; }

/* 侧边栏遮罩（抽屉） */
.sidebar-mask {
  position: fixed; inset: 0; z-index: 45; background: var(--mask);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity var(--tr), visibility var(--tr);
}

body.drawer-open .sidebar-mask { opacity: 1; visibility: visible; }

/* 主区域 */
.main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); transition: margin-left var(--tr); display: flex; flex-direction: column; }
body.sidebar-collapsed .main { margin-left: var(--sidebar-w-collapsed); }

.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s3);
  height: var(--topbar-h); flex: none; padding: 0 20px; background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border); transition: box-shadow var(--tr), background var(--tr);
}

.topbar.is-scrolled {
  background: var(--glass-bg-strong);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.04);
}

:root[data-theme="dark"] .topbar.is-scrolled { box-shadow: none; border-bottom-color: var(--border); }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); margin-left: auto; flex: none; }
.topbar-title { font-size: 15px; font-weight: var(--fw-title); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.content {
  flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--s5);
  padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
}

/* ===== 搜索 ===== */
.search { position: relative; display: flex; align-items: center; flex: 1; max-width: 460px; min-width: 0; }

.search > .icon,
.search .search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px;
  color: var(--text-2); pointer-events: none; transition: color var(--tr);
}

.search-input {
  width: 100%; height: 38px; padding: 0 36px; border-radius: var(--r-pill);
  border: 1px solid var(--input-border); background-color: var(--bg); color: var(--text);
  font-size: 14px; transition: all var(--tr);
}

.search-input::placeholder { color: var(--text-2); }
.search-input:hover { border-color: rgba(var(--primary-rgb), .32); }

.search-input:focus,
.search.is-active .search-input {
  background-color: var(--card); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .14);
}

.search.is-active > .icon, .search.is-active .search-icon, .search:focus-within > .icon { color: var(--primary-text); }

.search-clear {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: none;
  align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(128,134,148,.18); color: var(--text-2); font-size: 13px; transition: all var(--tr);
}

.search-clear:hover { background: rgba(128,134,148,.3); color: var(--text); }
.search.is-active .search-clear, .search.has-value .search-clear, .search-input:not(:placeholder-shown) ~ .search-clear { display: inline-flex; }
.btn-cancel-search { flex: none; }

/* ===== 标签与筛选 ===== */
.tag {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px;
  border-radius: var(--r-pill); border: 1px solid transparent; background: rgba(128,134,148,.14);
  color: var(--text-2); font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; transition: all var(--tr);
}

.tag:hover { transform: scale(1.04); }
.tag.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .18); }
.tag-more { background: rgba(128,134,148,.16); color: var(--text-2); }
.tag-more:hover { transform: none; }
.tag-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.tag-c0  { background: var(--tag-0-bg);  color: var(--tag-0-fg); }
.tag-c1  { background: var(--tag-1-bg);  color: var(--tag-1-fg); }
.tag-c2  { background: var(--tag-2-bg);  color: var(--tag-2-fg); }
.tag-c3  { background: var(--tag-3-bg);  color: var(--tag-3-fg); }
.tag-c4  { background: var(--tag-4-bg);  color: var(--tag-4-fg); }
.tag-c5  { background: var(--tag-5-bg);  color: var(--tag-5-fg); }
.tag-c6  { background: var(--tag-6-bg);  color: var(--tag-6-fg); }
.tag-c7  { background: var(--tag-7-bg);  color: var(--tag-7-fg); }
.tag-c8  { background: var(--tag-8-bg);  color: var(--tag-8-fg); }
.tag-c9  { background: var(--tag-9-bg);  color: var(--tag-9-fg); }
.tag-c10 { background: var(--tag-10-bg); color: var(--tag-10-fg); }
.tag-c11 { background: var(--tag-11-bg); color: var(--tag-11-fg); }

.filter-bar {
  position: sticky; top: var(--topbar-h); z-index: 25; display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--s2); padding: 10px 24px; background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border);
}

.filter-bar-label { flex: none; font-size: 12px; font-weight: 600; color: var(--text-2); }

.filter-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px;
  border-radius: var(--r-pill); border: 1px solid rgba(var(--primary-rgb), .28);
  background: rgba(var(--primary-rgb), .10); color: var(--primary-text); font-size: 12px;
  font-weight: 600; white-space: nowrap; transition: all var(--tr);
}

.filter-chip:hover { background: rgba(var(--primary-rgb), .16); }
.filter-chip .icon-btn, .filter-chip .chip-x { width: 18px; height: 18px; border-radius: 50%; font-size: 12px; color: inherit; }
.filter-chip .icon-btn:hover { background: rgba(var(--primary-rgb), .2); color: var(--primary-text); }
.filter-bar-clear { margin-left: auto; flex: none; font-size: 12px; font-weight: 600; color: var(--text-2); background: none; transition: color var(--tr); }
.filter-bar-clear:hover { color: var(--danger); }

/* ===== 网址卡片网格 ===== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-items: stretch; }
.cat-section { margin-bottom: 40px; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.cat-section:last-child { margin-bottom: var(--s5); }
.cat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; scroll-margin-top: calc(var(--topbar-h) + 16px); }

.cat-title {
  position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 20px;
  font-weight: var(--fw-title); color: var(--text); scroll-margin-top: calc(var(--topbar-h) + 16px);
}

/* 分类图标（与侧边栏一致，用图标本身作为视觉标记，不再需要左侧的装饰竖条） */
.cat-title-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; font-size: 24px; color: var(--primary-text);
}

.cat-title-name { min-width: 0; }

.cat-head .cat-count, .cat-title .cat-count {
  height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: rgba(128,134,148,.14);
  color: var(--text-2); font-size: 12px; font-weight: 600; line-height: 20px;
}

.cat-empty { padding: var(--s5); border: 1px dashed var(--input-border); border-radius: var(--r-card); color: var(--text-2); font-size: 13px; text-align: center; }
/* 二级分类：并排按钮（Tab）切换 */
.subcat-tabs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px;
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}

.subcat-tab {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--input-border); background: var(--card);
  color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; transition: all var(--tr);
}

.subcat-tab:hover { border-color: rgba(var(--primary-rgb), .45); color: var(--text); }
.subcat-tab:active { transform: scale(.97); }

/* 二级分类按钮前的图标 */
.subcat-tab-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 16px; height: 16px; font-size: 16px;
}

.subcat-tab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.subcat-tab.is-active {
  background: rgba(var(--primary-rgb), .12); border-color: rgba(var(--primary-rgb), .48);
  color: var(--primary-text); box-shadow: 0 1px 2px rgba(var(--primary-rgb), .16);
}

:root[data-theme="dark"] .subcat-tab.is-active { background: rgba(var(--primary-rgb), .2); box-shadow: none; }
.subcat-tab.is-dim { opacity: .42; }

.subcat-tab .cat-count {
  height: 18px; min-width: 20px; padding: 0 6px; font-size: 11px; line-height: 18px;
  background: rgba(128,134,148,.16);
}

.subcat-tab.is-active .cat-count { background: rgba(var(--primary-rgb), .18); color: var(--primary-text); }
.subcat-pane { scroll-margin-top: calc(var(--topbar-h) + 16px); }

/* 卡片 */
.site-card {
  position: relative; border-radius: var(--r-card); background: var(--card);
  border: 1px solid var(--card-border-color); box-shadow: var(--shadow); overflow: hidden;
  transition: transform var(--tr), box-shadow var(--tr), opacity var(--tr), border-color var(--tr);
  will-change: transform;
}

@media (hover: hover) {
  .site-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--border); }
  :root[data-theme="dark"] .site-card:hover { box-shadow: none; border-color: rgba(255,255,255,.18); }
}

.card-swipe-bg {
  position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; padding: 0 18px; border-radius: var(--r-card); color: #FFFFFF;
  font-size: 13px; font-weight: 600; pointer-events: none;
}

.card-swipe-bg .icon { font-size: 18px; }

/* 去掉整块红底后，白色的删除提示在白色卡片上几乎看不见，
   这里只补一层极淡的红色渐变 + 危险色文字，保持「无红条」的观感又看得清。
   想彻底透明的话删掉下面这一条即可。 */
.card-swipe-bg {
  background: linear-gradient(90deg, rgba(var(--danger-rgb), 0) 45%, rgba(var(--danger-rgb), .16) 100%);
  color: var(--danger);
}

.card-inner {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 16px; background: var(--card); border-radius: var(--r-card); touch-action: pan-y;
  transition: transform var(--tr), background var(--tr);
}

.site-card.is-swiping .card-inner, .site-card.is-swiping { transition: none; }
.site-card.is-deleting { opacity: 0; transform: scale(.9); pointer-events: none; }
.site-card.is-hidden { display: none; }
.card-top { display: flex; align-items: flex-start; gap: 10px; }

.site-logo {
  width: 40px; height: 40px; flex: none; border-radius: 10px; object-fit: cover;
  background: var(--bg); border: 1px solid var(--border);
}

.site-logo-fallback {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  flex: none; border-radius: 10px; background: rgba(var(--primary-rgb), .12);
  color: var(--primary-text); font-size: 17px; font-weight: 600; text-transform: uppercase;
  user-select: none; -webkit-user-select: none;
}

.site-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.site-title { font-size: 14px; font-weight: var(--fw-title); color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.site-title a { color: inherit; text-decoration: none; transition: color var(--tr); }
.site-title a:hover { color: var(--primary-text); }

.site-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.5em); font-size: 12px; line-height: 1.5; color: var(--text-2); word-break: break-word;
}

.card-more { position: absolute; right: 8px; top: 8px; opacity: 0; transition: opacity var(--tr), background var(--tr), color var(--tr); }
.site-card:hover .card-more, .card-more:focus-visible { opacity: 1; }
.card-more.is-active { opacity: 1; }
.card-url { font-size: 11px; color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.site-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: auto; overflow: hidden; max-height: 24px; }

/* 骨架屏 */
.card-skeleton {
  height: 108px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--card);
  background-image: linear-gradient(100deg, rgba(128,134,148,.06) 20%, rgba(128,134,148,.16) 40%, rgba(128,134,148,.06) 60%);
  background-size: 220% 100%; background-repeat: no-repeat; animation: shimmer 1.4s ease-in-out infinite;
}

.cat-section-skeleton { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }

.cat-section-skeleton .skeleton-title {
  width: 140px; height: 20px; border-radius: var(--r-sm);
  background: rgba(128,134,148,.14); animation: pulseSoft 1.4s ease-in-out infinite;
}

/* 空状态 */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3);
  padding: var(--s7) var(--s5); text-align: center; color: var(--text-2);
}

.empty-state .icon, .empty-state .empty-icon { font-size: 44px; color: var(--text-2); opacity: .55; }
.empty-state-title { font-size: 16px; font-weight: var(--fw-title); color: var(--text); }
.empty-state-desc { max-width: 360px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.empty-state .btn { margin-top: var(--s2); }
.cat-section.is-filtered-out .site-card.is-hidden { display: none; }
.cat-section.is-empty { display: none; }

/* ===== 弹窗 / 抽屉 / 底部面板 ===== */
.modal-root { position: fixed; inset: 0; z-index: 100; pointer-events: none; }

.modal-overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  pointer-events: auto; animation: fadeIn .18s ease;
}

.modal-overlay.is-closing { animation: fadeOut .18s ease forwards; }

.modal {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px;
  max-height: calc(100vh - 96px); background: var(--card); border: 1px solid var(--card-border-color);
  border-radius: var(--r-lg); box-shadow: var(--shadow-modal); overflow: hidden;
  animation: modalIn .2s cubic-bezier(.16,1,.3,1);
}

.modal.is-closing { animation: modalOut .18s ease forwards; }
.modal.modal-sm { max-width: 420px; }
.modal.modal-lg { max-width: 760px; }
.modal.modal-xl { max-width: 980px; }

.modal-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--s3);
  flex: none; padding: 18px 20px; background: var(--card); border-bottom: 1px solid var(--border);
}

.modal-title { flex: 1; min-width: 0; font-size: 16px; font-weight: var(--fw-title); color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.modal-sub { font-size: 12px; font-weight: 400; color: var(--text-2); margin-top: 2px; }
.modal-close { margin-left: auto; flex: none; }
.modal-body { flex: 1; min-height: 0; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: var(--s4); }
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb { background: rgba(128,134,148,.3); border: 2px solid transparent; background-clip: content-box; border-radius: var(--r-pill); }

.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); flex: none;
  padding: 14px 20px; border-top: 1px solid var(--border); background: var(--card);
}

.modal-foot .btn { min-width: 84px; }

/* 网址详情：居中弹窗内的顶部信息区 */
.detail-hero { display: flex; align-items: flex-start; gap: var(--s3); }

.detail-hero .site-logo,
.detail-hero .site-logo-fallback { width: 48px; height: 48px; border-radius: 12px; font-size: 20px; }

.detail-hero-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.detail-hero-title {
  font-size: 17px; font-weight: var(--fw-title); color: var(--text);
  line-height: 1.35; word-break: break-word;
}

/* 长按动作面板 */
.action-sheet {
  display: flex; flex-direction: column; width: 100%; max-width: 560px; background: var(--card);
  border-radius: var(--r-lg); overflow: hidden; animation: sheetIn .26s cubic-bezier(.16,1,.3,1);
}

.action-sheet-title { padding: 14px var(--s4); border-bottom: 1px solid var(--border); color: var(--text-2); font-size: 12px; font-weight: 600; text-align: center; }

.action-item {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 48px; padding: 0 var(--s4);
  color: var(--text); font-size: 14px; font-weight: 500; text-align: left;
  border-bottom: 1px solid var(--border); transition: background var(--tr), color var(--tr);
}

.action-item:last-child { border-bottom: 0; }
.action-item:hover { background: rgba(128,134,148,.1); }
.action-item .icon { font-size: 18px; color: var(--text-2); }
.action-item.is-danger { color: var(--danger); }
.action-item.is-danger .icon { color: var(--danger); }
.action-item.is-danger:hover { background: rgba(var(--danger-rgb), .1); }

.action-sheet-cancel {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px;
  margin-top: 6px; border-radius: var(--r-ctl); background: var(--card); color: var(--text-2);
  font-size: 14px; font-weight: 600; transition: all var(--tr);
}

.action-sheet-cancel:hover { color: var(--text); }

/* ===== Toast 提示 ===== */
.toast-root {
  position: fixed; z-index: 200; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  pointer-events: none; max-width: calc(100vw - 32px);
}

.toast {
  display: inline-flex; align-items: center; gap: var(--s2); max-width: 100%; padding: 10px 16px;
  border-radius: var(--r-pill); background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border); box-shadow: var(--shadow-hover); color: var(--text);
  font-size: 13px; font-weight: 500; line-height: 1.4; animation: toastIn .22s ease; pointer-events: auto;
}

:root[data-theme="dark"] .toast { box-shadow: none; }
.toast .icon { flex: none; font-size: 16px; }
.toast.is-out { animation: toastOut .2s ease forwards; }
.toast-success { color: var(--ok); }
.toast-error { color: var(--danger); }
.toast-info { color: var(--primary-text); }
.toast-warn { color: var(--warn); }
.toast-success, .toast-error, .toast-info, .toast-warn { border-color: currentColor; }
.toast .toast-text { color: var(--text); }

/* ===== 设置页 ===== */
.settings { display: flex; align-items: flex-start; gap: var(--s5); width: 100%; }

.settings-nav {
  display: flex; flex-direction: column; gap: 2px; flex: none; width: 180px;
  position: sticky; top: calc(var(--topbar-h) + 16px);
}

.settings-tab {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px;
  border-radius: var(--r-ctl); color: var(--text-2); font-size: 14px; font-weight: 500;
  text-align: left; transition: all var(--tr);
}

.settings-tab:hover { background: rgba(128,134,148,.12); color: var(--text); }
.settings-tab.is-active { background: rgba(var(--primary-rgb), .12); color: var(--primary-text); font-weight: 600; }
.settings-tab .icon { font-size: 18px; }
.settings-pane { flex: 1; min-width: 0; }
.set-section { margin-bottom: 28px; }
.set-section:last-child { margin-bottom: 0; }
.set-section-title { font-size: 14px; font-weight: var(--fw-title); color: var(--text); margin-bottom: 6px; }
.set-section-desc { font-size: 12px; color: var(--text-2); margin-bottom: var(--s3); line-height: 1.6; }

.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 12px 0; border-bottom: 1px solid var(--border);
}

.set-row:last-child { border-bottom: 0; }
.set-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-row-label { font-size: 14px; color: var(--text); }
.set-row-desc { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.set-row-ctl { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); flex: none; min-width: 200px; }
.set-row-ctl .input, .set-row-ctl .select { min-width: 180px; }

/* 分类管理 */
.cat-manage-list { display: flex; flex-direction: column; gap: var(--s2); }

.cat-manage-row {
  display: flex; align-items: center; gap: var(--s2); padding: 8px 10px; border-radius: var(--r-ctl);
  border: 1px solid var(--border); background: var(--card); transition: all var(--tr);
}

.cat-manage-row:hover { border-color: rgba(var(--primary-rgb), .3); }
.cat-manage-row .input { min-height: 34px; background: transparent; border-color: transparent; }
.cat-manage-row .input:hover { border-color: var(--input-border); }
.cat-manage-row .input:focus { background: var(--bg); }

.drag-handle {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 34px;
  flex: none; color: var(--text-2); font-size: 15px; letter-spacing: -2px; cursor: grab;
  border-radius: var(--r-sm); transition: all var(--tr);
}

.drag-handle:hover { background: rgba(128,134,148,.14); color: var(--text); }
.drag-handle:active { cursor: grabbing; }
.row-actions { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
.row-actions .icon-btn { width: 32px; height: 32px; font-size: 16px; }

.cat-manage-children {
  display: flex; flex-direction: column; gap: var(--s2); margin: var(--s2) 0 0 20px;
  padding-left: var(--s3); border-left: 1px solid var(--border);
}

/* Token 列表 */
.token-list { display: flex; flex-direction: column; gap: var(--s2); }

.token-row {
  display: flex; align-items: center; gap: var(--s2); padding: 8px 10px;
  border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--card);
}

.token-value {
  flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; user-select: all; -webkit-user-select: all;
}

.token-row .icon-btn { width: 32px; height: 32px; font-size: 16px; }

/* API 文档 */
.api-docs { display: flex; flex-direction: column; gap: var(--s3); }

.api-docs .endpoint {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: 8px 10px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card);
  font-family: var(--font-mono); font-size: 12px; color: var(--text);
}

.method {
  display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 8px;
  border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; flex: none;
}

.method-get { background: rgba(59,130,246,.14); color: #2563EB; }
.method-post { background: rgba(34,197,94,.14); color: #15803D; }
.method-put { background: rgba(245,158,11,.16); color: #B45309; }
.method-delete { background: rgba(var(--danger-rgb), .14); color: var(--danger); }
:root[data-theme="dark"] .method-get { color: #93C5FD; }
:root[data-theme="dark"] .method-post { color: #86EFAC; }
:root[data-theme="dark"] .method-put { color: #FCD34D; }

/* 代码块 */
.code-block {
  position: relative; border-radius: 12px; background: #0F1115; color: #E5E7EB;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.65; padding: 14px; overflow: auto;
}

:root[data-theme="dark"] .code-block { background: #0B0D11; }

.code-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  margin: -14px -14px 12px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--font); font-size: 12px; color: #9CA3AF;
}

.code-block-head .copy-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border-radius: var(--r-sm); color: #9CA3AF; font-size: 12px; transition: all var(--tr);
}

.code-block-head .copy-btn:hover { background: rgba(255,255,255,.08); color: #E5E7EB; }

pre {
  border-radius: 12px; background: #0F1115; color: #E5E7EB; font-family: var(--font-mono);
  font-size: 13px; line-height: 1.65; padding: 14px; overflow: auto;
}

:root[data-theme="dark"] pre { background: #0B0D11; }
pre code { background: none; color: inherit; padding: 0; font-size: inherit; border-radius: 0; }

/* Markdown 渲染容器 */
.md-body { font-size: 14px; line-height: 1.7; color: var(--text); word-break: break-word; }
.md-body > *:first-child { margin-top: 0; }
.md-body > *:last-child { margin-bottom: 0; }

.md-body h1, .md-body h2, .md-body h3,
.md-body h4, .md-body h5, .md-body h6 { margin: 1.6em 0 .6em; font-weight: var(--fw-title); line-height: 1.35; }

.md-body h1 { font-size: 22px; }
.md-body h2 { font-size: 19px; }
.md-body h3 { font-size: 16px; }
.md-body h4 { font-size: 15px; }
.md-body h5 { font-size: 14px; }
.md-body h6 { font-size: 13px; color: var(--text-2); }
.md-body p { margin: .8em 0; }
.md-body ul, .md-body ol { margin: .8em 0; padding-left: 1.5em; }
.md-body ul { list-style: disc; }
.md-body ol { list-style: decimal; }
.md-body li { margin: .3em 0; }
.md-body li > ul, .md-body li > ol { margin: .3em 0; }

.md-body code {
  padding: 2px 5px; border-radius: 5px; background: rgba(var(--primary-rgb), .10);
  color: var(--primary-text); font-family: var(--font-mono); font-size: .9em;
}

.md-body pre { margin: 1em 0; }
.md-body pre code { background: none; color: inherit; padding: 0; }
.md-body blockquote { margin: 1em 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--primary); color: var(--text-2); }
.md-body a { color: var(--primary-text); text-decoration: none; }
.md-body a:hover { text-decoration: underline; }
.md-body hr { margin: 1.6em 0; border-top: 1px solid var(--border); }
.md-body img { border-radius: 12px; margin: .6em 0; }

.md-body table {
  width: 100%; margin: 1em 0; border: 1px solid var(--border); border-radius: 12px;
  border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 13px;
}

.md-body thead th { background: rgba(128,134,148,.10); color: var(--text-2); font-weight: 600; text-align: left; }
.md-body th, .md-body td { padding: 8px 12px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.md-body th:last-child, .md-body td:last-child { border-right: 0; }
.md-body tbody tr:last-child td { border-bottom: 0; }

.md-body kbd {
  display: inline-flex; align-items: center; padding: 1px 5px; border: 1px solid var(--input-border);
  border-bottom-width: 2px; border-radius: 5px; background: var(--bg); font-family: var(--font-mono); font-size: 12px;
}

/* 导入导出与统计 */
.import-export { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.data-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: var(--s4); }

.stat-card {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--r-card);
  border: 1px solid var(--card-border-color); background: var(--card); box-shadow: var(--shadow);
}

:root[data-theme="dark"] .stat-card { border-color: var(--border); box-shadow: none; }
.stat-card .stat-value, .stat-value { font-size: 24px; font-weight: var(--fw-title); line-height: 1.2; color: var(--text); }
.stat-card .stat-label, .stat-label { font-size: 12px; color: var(--text-2); }

/* 添加到主屏幕引导 */
.install-guide { display: flex; flex-direction: column; gap: var(--s3); }
.install-step { display: flex; align-items: flex-start; gap: var(--s3); font-size: 13px; line-height: 1.6; color: var(--text-2); }

.install-step .step-index,
.step-index {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  flex: none; border-radius: 50%; background: rgba(var(--primary-rgb), .12);
  color: var(--primary-text); font-size: 12px; font-weight: 600;
}

.install-step .icon, .install-step .ios-share-icon { vertical-align: -3px; font-size: 15px; color: var(--primary-text); }

/* ===== 安装引导浮层 ===== */
.install-banner {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 150; display: flex; align-items: center; gap: var(--s3); padding: 12px;
  border-radius: var(--r-card); border: 1px solid var(--border); background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-hover); animation: slideUp .3s ease;
}

:root[data-theme="dark"] .install-banner { box-shadow: none; }

.install-banner .install-icon,
.install-banner .install-app-icon {
  width: 40px; height: 40px; flex: none; border-radius: 10px; object-fit: cover;
  background: rgba(var(--primary-rgb), .14); border: 1px solid var(--border);
}

.install-banner .install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.install-banner .install-title { font-size: 14px; font-weight: var(--fw-title); color: var(--text); }
.install-banner .install-desc { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.install-banner .btn, .install-banner .icon-btn { flex: none; }

.ios-guide {
  position: fixed; inset: 0; z-index: 210; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; padding: 24px 16px calc(80px + env(safe-area-inset-bottom));
  background: rgba(15,17,21,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: fadeIn .2s ease;
}

.ios-guide-card {
  width: 100%; max-width: 420px; padding: var(--s5); border-radius: var(--r-lg); background: var(--card);
  border: 1px solid var(--card-border-color); box-shadow: var(--shadow-modal); animation: slideUp .3s ease;
}

.ios-guide-card .ios-guide-title { font-size: 16px; font-weight: var(--fw-title); margin-bottom: var(--s3); text-align: center; }
.ios-guide-arrow { font-size: 26px; line-height: 1; color: #FFFFFF; animation: bounceDown 1.2s ease-in-out infinite; }

/* ============================================================
   响应式 · 平板 640px ~ 1024px
   ============================================================ */
@media (min-width: 640px) and (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-nav { width: 160px; }
  .modal.modal-xl { max-width: 760px; }
}

/* ============================================================
   响应式 · 平板与移动端：侧边栏改抽屉
   ============================================================ */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; z-index: 50; }
  body.drawer-open .sidebar { transform: translateX(0); }
  body.sidebar-collapsed .sidebar { width: var(--sidebar-w) !important; }

  body.sidebar-collapsed .brand-title,
  body.sidebar-collapsed .cat-name,
  body.sidebar-collapsed .nav-item-text,
  body.sidebar-collapsed .cat-count { display: block; }

  body.sidebar-collapsed .cat-toggle { display: inline-flex; }
  body.sidebar-collapsed .cat-item, body.sidebar-collapsed .nav-item { justify-content: flex-start; gap: 10px; padding: 0 8px; }
  body.sidebar-collapsed .cat-sub { display: flex; }
  .main, body.sidebar-collapsed .main { margin-left: 0; }
  .set-row-ctl { min-width: 180px; }
}

/* 抽屉 / 弹窗打开时锁定背景滚动 */
body.drawer-open, body.modal-open { overflow: hidden; }

/* ============================================================
   响应式 · 移动端 <640px
   ============================================================ */
@media (max-width: 639px) {
  /* 输入类控件 16px，避免 iOS 聚焦缩放 */
  .input, .textarea, .select, .search-input { font-size: 16px; }

  .topbar { padding: 0 12px; gap: var(--s2); }
  .topbar-actions { gap: 4px; }
  .content { padding: var(--s4) var(--s3); padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom)); }

  /* 搜索：全屏覆盖 + 展开动画 */
  body.search-open .topbar > :not(.search):not(.btn-cancel-search) { display: none; }

  body.search-open .search {
    position: fixed; left: 0; right: 0; top: 0; max-width: none; height: var(--topbar-h);
    z-index: 60; padding: 0 12px; gap: var(--s2); background: var(--card);
    border-bottom: 1px solid var(--border); animation: slideDown .2s ease;
  }

  body.search-open .search-input { height: 40px; padding-right: 72px; }

  .btn-cancel-search {
    position: fixed; right: 6px; top: 0; height: var(--topbar-h); z-index: 61; display: inline-flex;
    align-items: center; padding: 0 10px; color: var(--primary-text); font-size: 14px; font-weight: 600;
  }

  /* 筛选栏 */
  .filter-bar { padding: 10px 12px; gap: 6px; }
  .filter-bar-clear { margin-left: 0; }

  /* 卡片网格：严格一行 2 个 */
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-section { margin-bottom: var(--s6); }
  .cat-title { font-size: 18px; }
  .cat-title-icon { width: 20px; height: 20px; font-size: 20px; }
  .subcat-tab-icon { width: 14px; height: 14px; font-size: 14px; }
  .site-card:hover { transform: none; }
  .card-inner { padding: 12px; gap: 8px; }
  .site-logo { width: 40px; height: 40px; }
  .site-logo-fallback { width: 40px; height: 40px; font-size: 16px; }
  .site-title { font-size: 13px; }
  .site-desc { font-size: 11px; }

  .card-more { opacity: 1; right: 4px; top: 4px; width: 44px; height: 44px; font-size: 16px; }
  .site-tags { max-height: 22px; }
  .site-tags .tag { height: 20px; font-size: 10px; padding: 0 7px; }
  .data-stats { grid-template-columns: repeat(2, 1fr); }

  /* 弹窗 → 底部面板 */
  .modal-overlay { align-items: flex-end; padding: 0; }

  .modal {
    max-width: 100%; width: 100%; border-radius: 20px 20px 0 0; max-height: 92vh; border-bottom: 0;
    animation: sheetIn .26s cubic-bezier(.16,1,.3,1); padding-bottom: env(safe-area-inset-bottom);
  }

  .modal.modal-sm, .modal.modal-lg, .modal.modal-xl { max-width: 100%; }
  .modal.is-closing { animation: sheetOut .22s ease forwards; }
  .modal-head { padding: 14px 16px; }
  .modal-body { padding: 16px; }
  .modal-foot { padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); gap: var(--s2); }
  .modal-foot .btn { flex: 1; min-width: 0; }

  /* Toast 移到安全区上方 */
  .toast-root { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); flex-direction: column-reverse; }

  /* 设置页：横向可滚动 tab 条 */
  .settings { flex-direction: column; gap: var(--s4); }

  .settings-nav {
    position: static; flex-direction: row; width: 100%; gap: 6px; overflow-x: auto; overflow-y: hidden;
    padding-bottom: 6px; -webkit-overflow-scrolling: touch;
  }

  .settings-tab { width: auto; flex: none; min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(128,134,148,.10); white-space: nowrap; }
  .settings-tab .icon { font-size: 16px; }
  .settings-tab.is-active { background: rgba(var(--primary-rgb), .14); }
  .set-row { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .set-row-ctl { min-width: 0; justify-content: flex-start; flex-wrap: wrap; }
  .set-row-ctl .input, .set-row-ctl .select { min-width: 0; width: 100%; }
  .set-row-ctl .segmented { width: 100%; }
  .segmented-item { flex: 1; }

  /* 表单与管理行 */
  .field-row { grid-template-columns: 1fr; }
  .cat-manage-row { flex-wrap: wrap; }
  .cat-manage-row .input { flex: 1 1 120px; }
  .action-item { min-height: 52px; }

  /* 触摸目标 ≥44×44 */
  .icon-btn { width: 44px; height: 44px; font-size: 20px; }
  .icon-btn .icon { font-size: 20px; }
  .cat-toggle { width: 44px; height: 44px; margin-right: -12px; font-size: 16px; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  .search-clear { width: 32px; height: 32px; right: 8px; }
  .cat-item { min-height: 44px; }
  .nav-item { min-height: 48px; }
  .row-actions .icon-btn, .token-row .icon-btn { width: 40px; height: 40px; }
  .switch-label { min-height: 48px; }
  .empty-state { padding: var(--s6) var(--s4); }
  .install-banner { left: 8px; right: 8px; padding: 10px; }
  .install-banner .btn { min-height: 40px; }
}

/* 仅移动端 / 仅桌面端元素：只隐藏，不改动元素自身的 display 类型 */
@media (min-width: 640px) {
  .only-mobile { display: none !important; }
}

@media (max-width: 639px) {
  .only-desktop { display: none !important; }
}

/* ============================================================
   大屏优化
   ============================================================ */
@media (min-width: 1440px) {
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ============================================================
   降低动效偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .site-card:hover { transform: none; }
  .tag:hover { transform: none; }
  .ios-guide-arrow { animation: none; }
}

/* ============================================================
   补充组件样式（与前端脚本生成的 DOM 配套）
   ============================================================ */

/* 弹窗标题容器：标题 + 副标题 */
.modal-head-text { flex: 1; min-width: 0; }
.confirm-text { font-size: 14px; line-height: 1.7; color: var(--text-2); }

/* 卡片右上角「…」按钮避让，避免与标题文字重叠 */
.card-top { padding-right: 26px; }
.textarea-sm { min-height: 64px; }

/* 过滤时隐藏空网格 / 空二级分类 */
.card-grid.is-empty { display: none; }
.cat-empty { grid-column: 1 / -1; }

/* 点击卡片直接打开网址 */
.site-card .card-inner { cursor: pointer; }

/* 侧边栏标签云 */
.sidebar-tags {
  flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--border);
  max-height: 34vh; overflow-y: auto; overflow-x: hidden;
}

.sidebar-tags-title {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 11px; font-weight: 600; color: var(--text-2); letter-spacing: .4px;
}

.sidebar-tags-title .icon { font-size: 13px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-cloud .tag { height: 24px; padding: 0 10px; font-size: 11px; cursor: pointer; }
.tag-cloud .tag:hover { transform: translateY(-1px); }
.tag-cloud .tag.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .18); }
.tag-cloud-empty { font-size: 12px; color: var(--text-2); }
body.sidebar-collapsed .sidebar-tags { display: none; }

@media (max-width: 1024px) {
  body.sidebar-collapsed .sidebar-tags { display: block; }
}

/* 移动端抽屉侧边栏改用实色背景：毛玻璃叠在遮罩上会发灰 */
@media (max-width: 1024px) {
  .sidebar {
    background: var(--card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
  }

  :root[data-theme="dark"] .sidebar { box-shadow: none; }
}

/* 默认密码安全提示条 */
.security-banner {
  display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); padding: 12px 14px;
  border-radius: var(--r-card); border: 1px solid rgba(var(--warn-rgb), .35);
  background: rgba(var(--warn-rgb), .08); font-size: 13px; line-height: 1.6;
}

.security-banner .icon { flex: none; font-size: 18px; color: var(--warn); }
.security-banner > div { flex: 1; min-width: 0; }
.security-banner .btn { flex: none; }

/* 标签编辑器 */
.tag-editor {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 5px 8px;
  border: 1px solid var(--input-border); border-radius: var(--r-ctl); background: var(--bg); transition: all var(--tr);
}

:root[data-theme="dark"] .tag-editor { background: rgba(255,255,255,.04); }
.tag-editor:hover { border-color: rgba(var(--primary-rgb), .35); }

.tag-editor:focus-within {
  background: var(--card); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .14);
}

.tag-editor .tag { height: 24px; padding-right: 4px; gap: 2px; }

.tag-editor .tag-remove {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; color: inherit; opacity: .7; transition: all var(--tr);
}

.tag-editor .tag-remove:hover { opacity: 1; background: rgba(0,0,0,.12); }
:root[data-theme="dark"] .tag-editor .tag-remove:hover { background: rgba(255,255,255,.16); }
.tag-editor .tag-remove .icon { font-size: 11px; }
.tag-editor input { flex: 1; min-width: 96px; height: 26px; font-size: 13px; background: none; }
.tag-editor input::placeholder { color: var(--text-2); opacity: .75; }

/* 备用链接重复行 */
.link-repeater { display: flex; flex-direction: column; gap: var(--s2); }
.link-row { display: flex; align-items: center; gap: var(--s2); }
.link-row .input { flex: 1; min-width: 0; }
.link-row .input.link-name { flex: 0 0 150px; }

/* 网址详情（居中弹窗） */
.detail-url-row {
  display: flex; align-items: center; gap: var(--s2); padding: 10px 12px;
  border-radius: var(--r-ctl); background: rgba(128,134,148,.10);
}

.detail-url {
  flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

.detail-url:hover { color: var(--primary-text); }
.detail-links { display: flex; flex-direction: column; gap: 6px; }

.detail-link {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px;
  border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--card); transition: all var(--tr);
}

.detail-link:hover { border-color: rgba(var(--primary-rgb), .4); background: rgba(var(--primary-rgb), .05); }
.detail-link .icon { flex: none; font-size: 16px; color: var(--text-2); }
.detail-link-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }

.detail-link-url {
  flex: 1; min-width: 0; font-size: 11px; color: var(--text-2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

.detail-link .icon-btn { width: 30px; height: 30px; font-size: 15px; }

/* 其它细节 */
.token-meta { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.form-actions-inline { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.doc-note { font-size: 12px; color: var(--text-2); line-height: 1.6; }
.api-docs .md-body h1 { font-size: 19px; }
.api-docs .md-body h2 { font-size: 16px; }

@media (max-width: 639px) {
  .card-top { padding-right: 30px; }
  .link-row { flex-wrap: wrap; }
  .link-row .input.link-name { flex: 1 1 100%; }
  .link-row .input.link-url { flex: 1 1 55%; }
  .detail-link-name { max-width: 42%; overflow: hidden; text-overflow: ellipsis; }
  .security-banner { flex-wrap: wrap; }
}

/* 脚本生成的组件 */
.action-sheet-overlay { align-items: flex-end; padding: 0; }

.color-presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.color-swatch {
  width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--input-border); transition: all var(--tr);
}

.color-swatch:hover { transform: scale(1.12); }
.color-swatch.is-active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary); }

.cat-manage-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  flex: none; color: var(--text-2); font-size: 16px;
}

.settings-loading { padding: var(--s5); text-align: center; color: var(--text-2); font-size: 13px; }
.site-form { display: flex; flex-direction: column; gap: var(--s4); }

.token-new {
  display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); padding: 10px 12px;
  border-radius: var(--r-ctl); border: 1px dashed rgba(var(--primary-rgb), .45);
  background: rgba(var(--primary-rgb), .06);
}

.token-new code {
  flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px; word-break: break-all;
}

/* 移动端：网格轨道允许收缩到 0，避免 nowrap 标题撑破一行 2 列 */
.site-card { min-width: 0; }

/* 移动端「取消」按钮只在搜索展开时出现，避免遮挡顶部栏按钮 */
@media (max-width: 639px) {
  .btn-cancel-search { display: none; }
  body.search-open .btn-cancel-search { display: inline-flex; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   新增组件 + 移动端体验修正
   ============================================================ */

/* Logo 预览（新增/编辑网址表单） */
.logo-group { align-items: center; }

.logo-preview {
  width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center;
  justify-content: center; overflow: hidden; border-radius: var(--r-ctl);
  border: 1px solid var(--input-border); background: var(--bg);
  color: var(--text-2); font-size: 16px; transition: all var(--tr);
}

.logo-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.logo-preview.is-failed { border-color: var(--danger); color: var(--danger); }

/* 图标代码对照表 */
.icon-ref-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px;
  max-height: 264px; overflow-y: auto; padding: 2px;
}

.icon-ref {
  display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 8px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card);
  color: var(--text-2); font-family: var(--font-mono); font-size: 11px; transition: all var(--tr);
}

.icon-ref:hover { border-color: rgba(var(--primary-rgb), .45); color: var(--primary-text); }
.icon-ref .icon { flex: none; font-size: 16px; }
.icon-ref span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.icon-ref.is-copied { border-color: var(--ok); color: var(--ok); }

/* 分类管理：图标直接填代码 */
.cat-manage-icon { color: var(--primary-text); }
.cat-icon-input { flex: 0 0 116px; font-family: var(--font-mono); }

/* 拖拽排序：手柄必须禁用浏览器手势，否则触摸设备拖不动 */
.drag-handle { cursor: grab; touch-action: none; }

.cat-manage-row.is-dragging {
  opacity: .6; border-color: var(--primary); box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

:root[data-theme="dark"] .cat-manage-row.is-dragging { box-shadow: none; }
.cat-manage-row.is-dragging .input { pointer-events: none; }
body.is-sorting { cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* 网址卡片拖动排序（桌面端鼠标） */
.site-card.is-dragging {
  opacity: .55; z-index: 5; cursor: grabbing;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16); border-color: var(--primary);
}

:root[data-theme="dark"] .site-card.is-dragging { box-shadow: none; border-color: rgba(255, 255, 255, .28); }
body.is-sorting .site-card .card-inner { cursor: grabbing; }

/* Logo 候选图（识别元数据后可选） */
.logo-candidates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.logo-candidate {
  width: 52px; height: 52px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: var(--r-ctl); border: 1px solid var(--input-border);
  background: var(--bg); transition: all var(--tr);
}

.logo-candidate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo-candidate:hover { border-color: rgba(var(--primary-rgb), .55); transform: translateY(-1px); }
.logo-candidate.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .22); }
.logo-candidate.is-failed { opacity: .45; }
.logo-candidate.is-failed img { display: none; }

/* 新增网址时内联创建分类 */
.inline-create { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.inline-create .input { flex: 1 1 88px; min-width: 0; }
.inline-create .select { flex: 0 1 112px; }
.inline-create .btn { padding: 0 10px; }

/* 阿里云 iconfont 图标库预览 */
.iconfont-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ============================================================
   移动端专项
   ============================================================ */
@media (max-width: 639px) {
  /* 1) 刘海 / 状态栏：把安全区高度并入顶部栏高度，
        内容区上下留白、筛选栏吸顶位置、锚点偏移都会自动跟着走 */
  :root { --topbar-h: calc(60px + env(safe-area-inset-top)); }

  .topbar { padding-top: env(safe-area-inset-top); }
  .sidebar-head { padding-top: env(safe-area-inset-top); }
  .login-view { padding-top: calc(var(--s5) + env(safe-area-inset-top)); }
  body.search-open .search { top: 0; height: var(--topbar-h); padding-top: env(safe-area-inset-top); }
  .btn-cancel-search { top: env(safe-area-inset-top); height: 60px; }

  /* 2) 禁止缩放：双击与双指 */
  html { touch-action: pan-x pan-y; }

  /* 3) 输入控件一律 16px，避免 iOS 聚焦时自动放大页面 */
  .input, .textarea, .select, .search-input, .tag-editor input { font-size: 16px; }

  /* 4) 设置页更紧凑 */
  .settings { gap: var(--s3); }

  .settings-nav {
    gap: 4px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }

  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-tab { min-height: 32px; padding: 0 10px; font-size: 12px; gap: 5px; }
  .settings-tab .icon { font-size: 14px; }
  .set-section { margin-bottom: var(--s4); }
  .set-section-title { font-size: 13px; margin-bottom: 3px; }
  .set-section-desc { font-size: 11px; margin-bottom: var(--s2); line-height: 1.5; }
  .set-row { padding: 8px 0; gap: var(--s2); }
  .set-row-label { font-size: 13px; }
  .set-row-desc { font-size: 11px; line-height: 1.45; }
  .modal-head { padding: 12px 14px; }
  .modal-body { padding: 12px 14px; gap: var(--s3); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .site-form { gap: var(--s3); }
  .field { gap: 4px; }
  .field-label, .field-hint, .doc-note { font-size: 11px; }
  .cat-manage-list { gap: 6px; }
  .cat-manage-row { padding: 6px 8px; gap: 6px; row-gap: 6px; flex-wrap: wrap; }
  .cat-manage-children { margin-left: 10px; padding-left: 8px; gap: 6px; }
  .drag-handle { width: 40px; height: 38px; }

  /* 分类行排成两行：手柄 + 图标预览 + 名称 / 图标代码 + 操作按钮 */
  .cat-manage-row .drag-handle { order: 0; }
  .cat-manage-row .cat-manage-icon { order: 1; }
  .cat-manage-row .input:not(.cat-icon-input) { order: 2; flex: 1 1 58%; }
  .cat-manage-row .cat-icon-input { order: 3; flex: 1 1 42%; }
  .cat-manage-row .row-actions { order: 4; margin-left: auto; }
  .token-row { padding: 6px 8px; }
  .data-stats { gap: 8px; margin-bottom: var(--s3); }
  .stat-card { padding: 10px 12px; gap: 2px; }
  .stat-value { font-size: 20px; }
  .api-docs { gap: 8px; }
  .api-docs .endpoint { padding: 6px 8px; font-size: 11px; }
  .icon-ref-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); max-height: 210px; }
  .md-body { font-size: 13px; }
}