/* ============================================================
   导航页 · AnyDrop 视觉语言
   墨蓝 #172037 主文字 + #315ee8 蓝主色 + #f5f7fb 冷灰底
   与 AnyDrop 共用同一套 token 命名：ink / muted / line / paper / blue
   ============================================================ */

:root {
  /* 主色与派生 */
  --blue: #315ee8;
  --blue-dark: #173ea8;
  --blue-wash: #eaf0ff;
  --orange: #ff7a3d;
  --orange-dark: #c94716;
  --on-accent: #ffffff;

  /* 纸面 */
  --bg: #f5f7fb;
  --glow: radial-gradient(circle at 80% 0, #e7eeff 0, transparent 28rem);
  /* 背景图上的那层薄纱：压暗一点，保证标题压在照片上也读得清 */
  --bg-veil: rgba(245, 247, 251, 0.60);
  --topbar: rgba(245, 247, 251, 0.86);
  --paper: #ffffff;
  --paper-soft: #fafbfc;
  --line: #dfe4ec;
  --line-strong: #c3cbda;

  /* 文字 */
  --ink: #172037;
  --muted: #70798c;
  --eyebrow: #68738a;

  /* 阴影（冷调，不用纯黑）—— 卡片靠这层浮起来 */
  --sh-1: 0 1px 2px rgba(20, 34, 70, 0.05), 0 6px 16px -10px rgba(20, 34, 70, 0.12);
  --sh-2: 0 22px 50px -18px rgba(20, 34, 70, 0.26), 0 6px 16px -10px rgba(20, 34, 70, 0.14);

  --radius-lg: 20px;
  --radius-md: 11px;
  --radius-sm: 8px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue",
    Arial, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "DM Mono", Menlo, monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --blue: #4f76ec;
    --blue-dark: #9db4ff;
    --blue-wash: rgba(79, 118, 236, 0.18);
    --orange: #ff925c;
    --orange-dark: #ff7a3d;
    --on-accent: #ffffff;

    --bg: #0f141f;
    --glow: radial-gradient(circle at 80% 0, rgba(74, 112, 235, 0.20) 0, transparent 28rem);
    --bg-veil: rgba(15, 20, 31, 0.64);
    --topbar: rgba(15, 20, 31, 0.86);
    --paper: #1a2133;
    --paper-soft: #212a3f;
    --line: rgba(255, 255, 255, 0.10);
    --line-strong: rgba(255, 255, 255, 0.22);

    --ink: #e9edf6;
    --muted: #9aa5ba;
    --eyebrow: #8994a8;

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px -12px rgba(0, 0, 0, 0.6);
    --sh-2: 0 24px 54px -18px rgba(0, 0, 0, 0.7), 0 6px 16px -10px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }

/* hidden 属性兜底。
   .modal-backdrop / .deepseek-panel / .deepseek-empty 都显式设了 display，
   而作者样式永远优先于 UA 样式表里的 [hidden]{display:none}，
   结果就是这些元素设了 hidden 也照样显示、关不掉。这里显式声明一次。 */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  color: var(--ink);
  background: var(--glow), var(--bg);
  background-attachment: fixed;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------- 顶栏（对齐 AnyDrop 的 sticky topbar） ---------------- */

.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 max(24px, calc((100vw - 1000px) / 2));
  border-bottom: 1px solid var(--line);
  background: var(--topbar);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.wordmark span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
}

/* ---------------- 头部 ---------------- */

.wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(44px, 7vw, 76px) 24px 90px;
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eyebrow);
}

.head h1 {
  margin: 0;
  font-size: clamp(40px, 7vw, 66px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.02;
}

.head .sub {
  margin: 14px 0 0;
  font-size: 17px;
  color: var(--muted);
  max-width: 46ch;
}

.head { margin-bottom: clamp(32px, 5vw, 56px); }

/* ---------------- 卡片列表 ---------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--sh-1);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  /* 触摸设备长按时不弹系统菜单，否则会和拖拽手势抢 */
  -webkit-touch-callout: none;
  transition:
    transform 0.25s var(--ease),
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background 0.25s var(--ease);
}

/* 悬浮时从左上角渗出的冷光 */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px 160px at 0% 0%, rgba(49, 94, 232, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
  pointer-events: none;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--sh-2);
  background: var(--paper-soft);
}

.card:hover::after,
.card:focus-visible::after { opacity: 1; }

.card:active { transform: translateY(-1px); }

.card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.mono {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--tone-wash, var(--blue-wash));
  color: var(--tone, var(--blue-dark));
  font-size: 19px;
  font-weight: 600;
  border: 1px solid var(--tone-line, rgba(49, 94, 232, 0.3));
  transition: transform 0.28s var(--ease);
}

.card:hover .mono { transform: scale(1.05) rotate(-2deg); }

.cbody { min-width: 0; flex: 1; }

.ctitle {
  display: block;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cdesc {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carrow {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  font-size: 13px;
  background: transparent;
  transition: transform 0.28s var(--ease), background 0.28s var(--ease), color 0.28s var(--ease);
}

.card:hover .carrow {
  transform: translateX(2px);
  background: var(--ink);
  color: var(--paper);
}

/* 入场 */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card {
  animation: riseIn 0.5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* ---------------- 长按拖拽排序 ---------------- */

/* 被拎起来的那张：克隆体跟手、浮在最上层，不吃指针事件 */
.card-ghost {
  position: fixed;
  z-index: 55;
  pointer-events: none;
  animation: none;
  transition: none;
  box-shadow: var(--sh-2);
  border-color: var(--line-strong);
  transform: scale(1.02) rotate(-0.6deg);
}

/* 原位留个淡影，指明它会落到哪 */
.card.dragging-source {
  opacity: 0.28;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}
.card.dragging-source::after { opacity: 0; }

/* FLIP 位移靠 inline transform，而 .card 的入场动画（fill-mode: both）
   优先级高于 inline 样式，会把位移整个盖掉 —— 所以这两个阶段必须关掉动画 */
body.card-dragging .card,
.grid.sorted .card { animation: none; }

body.card-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.card-dragging .card { cursor: grabbing; }

@media (max-width: 560px) {
  .topbar { padding: 0 18px; }
  .wrap { padding: 40px 18px 56px; }
  .grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   DS 对话浮层 —— 视觉与交互对齐 AnyDrop
   ============================================================ */
.deepseek-dock{position:fixed;right:24px;bottom:24px;z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.deepseek-trigger{width:58px;height:58px;border:0;border-radius:18px;background:var(--ink);color:white;box-shadow:0 16px 38px rgba(23,32,55,.28);transition:transform .18s,box-shadow .18s}
.deepseek-trigger:hover{transform:translateY(-2px)}
.deepseek-trigger:active{transform:scale(.97)}
.deepseek-trigger span,.deepseek-brand{font:700 13px "DM Mono",monospace}
/* 面板打开时压暗背景。z-index 低于 .deepseek-dock(45)，高于顶栏(20)；
   这层只做视觉，不绑任何点击事件 —— 点它不会关闭面板（刻意如此）。 */
body.ds-open::before{content:"";position:fixed;inset:0;z-index:44;background:rgba(15,20,31,.45);animation:ds-veil-in .18s ease-out}
body.ds-open{overflow:hidden}
/* 尺寸全用视口单位，不设像素上限，这样任何屏幕上都稳定占 85% */
.deepseek-panel{position:fixed;inset:0;margin:auto;width:85vw;height:85dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;background:#fff;border:1px solid #d9dfeb;border-radius:20px;overflow:hidden;box-shadow:0 28px 80px rgba(23,32,55,.24);transform-origin:center center;animation:deepseek-in .18s ease-out}
.deepseek-head{min-height:68px;padding:13px 14px 13px 16px;border-bottom:1px solid #e8ebf1;display:flex;align-items:center;justify-content:space-between}
.deepseek-head>div:first-child{display:flex;align-items:center;gap:10px}
.deepseek-brand{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--ink);color:white}
.deepseek-head strong,.deepseek-head small{display:block}
.deepseek-head strong{font-size:14px}
.deepseek-head small{color:#8992a3;font-size:10px;margin-top:3px}
.deepseek-head-actions{display:flex;align-items:center;gap:4px}
.deepseek-head-actions button{border:0;background:transparent;color:#677185;border-radius:8px;padding:7px 8px;font-size:12px}
.deepseek-head-actions button:last-child{font-size:21px;line-height:1}
.deepseek-head-actions button:hover{background:#f0f2f6}
.deepseek-head-actions button:disabled{opacity:.35}
.deepseek-feed{overflow-y:auto;padding:clamp(14px,1.6vw,26px) clamp(14px,1.8vw,30px);scroll-behavior:smooth}
.deepseek-empty{height:100%;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#7a8496}
.deepseek-empty>span{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:#edf0f5;color:var(--ink);font-weight:700}
.deepseek-empty strong{color:#354057;font-size:18px;margin-top:16px}
.deepseek-empty p{max-width:240px;font-size:12px;line-height:1.6;margin:7px 0}
/* 消息列占满对话区，气泡各自贴向两侧；单条宽度随视口缩放（v 为单位），
   只有超宽屏才由 900px 兜底，免得一行字太长不好读 */
.chat-message{width:100%;margin-bottom:16px;display:flex;flex-direction:column;align-items:flex-start}
.chat-message.user{align-items:flex-end}
.chat-bubble{max-width:min(78%,46vw,900px);padding:11px 13px;border-radius:14px;background:#eff2f7;color:#29344a;white-space:pre-wrap;line-height:1.65;font-size:13px}
.chat-message.user .chat-bubble{background:var(--blue);color:white}
.chat-thinking{display:flex;align-items:center;gap:4px;color:#7b8597;font-size:11px;padding:8px 4px}
.chat-thinking i{width:5px;height:5px;border-radius:50%;background:#8d96a7;animation:deepseek-dot 1s infinite}
.chat-thinking i:nth-child(2){animation-delay:.15s}
.chat-thinking i:nth-child(3){animation-delay:.3s}
.chat-thinking span{margin-left:5px}
.deepseek-error{margin:0;padding:8px 16px;background:#fff0ef;color:#a93a32;font-size:11px}
.deepseek-error[data-tone="warn"]{background:#fff8ed;color:#b45309}
.deepseek-composer{padding:12px;background:#fafbfc;display:flex;flex-direction:column;min-height:0}
.deepseek-composer textarea{display:block;width:100%;flex:1 1 auto;min-height:0;resize:none;border:1px solid #dce1ea;border-radius:12px;padding:10px 12px;background:white;outline:none;font-size:13px;line-height:1.5}
.deepseek-composer textarea:focus{border-color:#7e9cff;box-shadow:0 0 0 3px rgba(49,94,232,.1)}
.deepseek-composer>div{display:flex;align-items:center;gap:10px;margin-top:8px}
.deepseek-composer>div>small{margin-left:auto;color:#929aaa;font-size:10px}
.deepseek-composer>div>small[data-tone="warn"]{color:#b45309}
.deepseek-composer button{border:0;border-radius:9px;background:var(--ink);color:white;padding:8px 15px;font-weight:700;font-size:12px}
.deepseek-composer button:disabled{opacity:.4;cursor:not-allowed}
@keyframes deepseek-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ds-veil-in{from{opacity:0}to{opacity:1}}
@keyframes deepseek-dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.deepseek-panel,.chat-thinking i,body.ds-open::before{animation:none}.deepseek-feed{scroll-behavior:auto}.deepseek-trigger{transition:none}}
/* 窄屏：面板近似满屏，气泡按比例放宽（否则 46vw 会把手机上的气泡压得很窄） */
@media(max-width:640px){.deepseek-dock{right:12px;bottom:12px}.deepseek-panel{width:calc(100vw - 20px);height:calc(100dvh - 40px);border-radius:16px}.deepseek-trigger{width:52px;height:52px;border-radius:15px}.chat-bubble{max-width:88%}.deepseek-composer>div>small{display:none}}
/* ---------- 对话区 / 输入区 的分隔条：拖动它调整输入区高度 ---------- */
.deepseek-splitter{height:9px;flex:0 0 auto;display:grid;place-items:center;cursor:row-resize;touch-action:none;background:#fafbfc;border-top:1px solid #e8ebf1}
.deepseek-splitter>span{width:46px;height:3px;border-radius:2px;background:#d3d9e4;transition:background .15s}
.deepseek-splitter:hover>span,.deepseek-splitter:focus-visible>span,.deepseek-splitter.dragging>span{background:#8e9bb5}
.deepseek-splitter:focus-visible{outline:none}
body.ds-resizing,body.ds-resizing *{cursor:row-resize !important;-webkit-user-select:none !important;user-select:none !important}

/* ============================================================
   账号入口：右上角按钮 / 登录弹层 / 设置弹层
   ============================================================ */
.topbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.ghost-button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:var(--radius-md);padding:8px 14px;font-size:13px;font-weight:500;transition:border-color .2s var(--ease),background .2s var(--ease)}
.ghost-button:hover{border-color:var(--line-strong);background:var(--paper-soft)}

.modal-backdrop{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:rgba(15,20,31,.55);backdrop-filter:blur(6px)}
.sheet{width:min(420px,100%);max-height:88vh;overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-2);padding:26px}
.sheet.wide{width:min(520px,100%)}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.sheet h2{margin:0;font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.sheet .eyebrow{margin-bottom:8px}
.sheet-section+.sheet-section{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.sheet-section h3{margin:0 0 6px;font-size:14px;font-weight:650}
.icon-button{border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;padding:4px 8px;border-radius:var(--radius-sm)}
.icon-button:hover{background:var(--paper-soft);color:var(--ink)}

.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-sm);background:var(--ink);color:var(--paper);font-weight:700;font-size:15px;margin-bottom:14px}
.sheet .muted{margin:0 0 18px;color:var(--muted);font-size:13px}
.sheet .muted[data-tone="warn"],.panel .muted[data-tone="warn"]{color:#b45309;background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.35);border-radius:var(--radius-sm);padding:10px 12px}
.sheet .muted[data-tone="ok"],.panel .muted[data-tone="ok"]{color:#15803d;background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.32);border-radius:var(--radius-sm);padding:10px 12px}
.stacked{display:grid;gap:14px}
.setting-field{display:grid;gap:6px}
.setting-field>span{font-size:12px;color:var(--muted)}
.setting-field input{width:100%;border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 12px;background:var(--paper);color:var(--ink);font-size:14px;outline:none}
.setting-field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
.error{margin:0;color:#b4392f;font-size:12px}
.inline-note{margin-top:10px;font-size:12px;color:var(--muted)}
.inline-note.bad{color:#b4392f}
.dialog-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.dialog-actions.end{justify-content:flex-end}
.primary{border:0;border-radius:var(--radius-md);background:var(--blue);color:var(--on-accent);padding:11px 18px;font-size:14px;font-weight:600}
.primary:disabled{opacity:.5;cursor:not-allowed}
.cancel-button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:var(--radius-md);padding:11px 18px;font-size:14px}
.cancel-button:hover{border-color:var(--line-strong);color:var(--ink)}
.cancel-button:disabled{opacity:.45;cursor:not-allowed}

/* ---------------- 站点管理 ---------------- */
.swatches{display:flex;flex-wrap:wrap;gap:6px}
.swatch{width:26px;height:26px;padding:0;border-radius:8px;cursor:pointer;border:1px solid var(--tone-line,var(--line));background:var(--tone-wash,var(--paper-soft));transition:transform .18s var(--ease),border-color .18s var(--ease)}
.swatch:hover{transform:translateY(-1px);border-color:var(--tone,var(--line-strong))}
.swatch.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--tone,var(--line-strong))}
.swatch.auto{width:auto;padding:0 10px;font-size:12px;color:var(--muted);background:transparent;border-style:dashed}
.swatch.auto.on{color:var(--ink);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--line-strong)}

.site-extra{display:grid;gap:12px}
.site-extra summary{list-style:none;cursor:pointer;font-size:12px;color:var(--muted);padding:2px 0}
.site-extra summary::-webkit-details-marker{display:none}
.site-extra summary::before{content:"+ ";font-weight:700}
.site-extra[open] summary::before{content:"– "}

.site-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer}
.site-check input{accent-color:var(--blue)}

.site-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper-soft)}
.site-row.empty{justify-content:center;border-style:dashed;background:transparent;color:var(--muted);font-size:13px}
.site-row-body{flex:1;min-width:0;display:grid;gap:2px}
.site-row-body strong{font-size:13.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-row-url{font-family:var(--font-num);font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-tag{justify-self:start;font-size:10.5px;color:var(--blue-dark);background:var(--blue-wash);border-radius:5px;padding:1px 6px}
.site-row .ghost-button{padding:4px 10px;font-size:12px;flex:none}
.ghost-button.danger{color:#b4392f}
.ghost-button.danger:hover{border-color:rgba(180,57,47,.42);background:rgba(180,57,47,.08)}
.mono.small{width:32px;height:32px;border-radius:9px;font-size:14px}

@media(prefers-color-scheme:dark){
  .ghost-button.danger{color:#ef8d7f}
  .ghost-button.danger:hover{border-color:rgba(239,141,127,.42);background:rgba(239,141,127,.10)}
}

.skill-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#5b6478;white-space:nowrap}
.skill-toggle input{accent-color:var(--blue)}

@media(max-width:560px){
  .sheet{padding:20px}
  .sheet h2{font-size:22px}
}

/* ============================================================
   路由：导航页（/）与设置页（/settings）
   两屏共用同一个 HTML（/settings 由静态容器回落到 index.html），
   页面在 <head> 里按 location.pathname 给 <html> 挂上 route-settings，
   显隐全在这里决定 —— 不靠 JS 摆弄 DOM，也就不会先闪一下导航页。
   ============================================================ */
#settingsView{display:none}
html.route-settings #navView{display:none}
html.route-settings #settingsView{display:block}
html.route-settings .deepseek-dock{display:none}

/* ---------------- 导航页背景图（多张时一天换一张） ----------------
   三层叠：右上角的冷光 → 一层同色薄纱（保证大标题和副标题压在图上也读得清）
   → 照片本身。变量由 settings.js 设到 <html> 上，没图时整层自动失效。 */
body.has-bg{
  background-image:var(--glow),linear-gradient(var(--bg-veil),var(--bg-veil)),var(--nav-bg-img,none);
  background-size:auto,auto,cover;
  background-position:center top,center,center;
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-attachment:fixed,fixed,fixed;
}

/* ---------------- 设置页：卡片式分区 ---------------- */
#settingsView .head{margin-bottom:clamp(24px,4vw,40px)}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-1);padding:22px 24px;margin-bottom:16px}
.panel h2{margin:0 0 8px;font-size:17px;font-weight:650;letter-spacing:-.01em}
.panel .muted{margin:0 0 16px;font-size:13px;color:var(--muted);line-height:1.65}
.panel .muted strong{color:var(--ink)}
.panel .setting-field input{max-width:420px}
.panel .dialog-actions{margin-top:16px}
.ds-prompt-list,.ds-skill-list{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.ds-prompt-row{padding:14px 16px;border-top:1px solid var(--line)}
.ds-prompt-row:first-child,.ds-skill-row:first-child{border-top:0}
.ds-prompt-heading{display:flex;align-items:center;gap:10px;font-size:14px}
.ds-prompt-heading span{font-size:11px;color:var(--muted);background:var(--paper-soft);border-radius:12px;padding:2px 8px}
.ds-prompt-preview{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:8px 0}
.ds-prompt-editor{margin-top:12px}
.ds-prompt-editor[hidden]{display:none}
.ds-prompt-editor textarea{display:block;width:100%;min-height:260px;padding:12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);font:13px/1.6 var(--font-num);resize:vertical}
.ds-prompt-editor>div,.ds-skill-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ds-skill-actions{margin-bottom:16px}
.ds-skill-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-top:1px solid var(--line);font-size:13px}
.ds-skill-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-skill-row small{color:var(--muted)}
.ds-skill-row a{color:var(--blue-dark);text-decoration:none}

/* 上传区（可点可拖） */
.bg-drop{border:1px dashed var(--line-strong);border-radius:var(--radius-md);background:var(--paper-soft);padding:20px;display:grid;justify-items:center;gap:10px;text-align:center;transition:border-color .2s var(--ease),background .2s var(--ease)}
.bg-drop.over{border-color:var(--blue);background:var(--blue-wash)}
.bg-drop small{color:var(--muted);font-size:11.5px;line-height:1.6}

/* 背景图清单：一张一格，正在用的那张标「今日」 */
.bg-grid{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.bg-item{position:relative;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--paper-soft);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.bg-item img{display:block;width:100%;height:110px;object-fit:cover;background:var(--line)}
.bg-item.today{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
.bg-meta{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:11.5px;color:var(--muted)}
.bg-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:500}
.bg-size{flex:none;font-family:var(--font-num)}
.bg-today{flex:none;color:var(--blue-dark);background:var(--blue-wash);border-radius:5px;padding:1px 6px}
.bg-meta .icon-button{font-size:16px;padding:0 6px;line-height:1}
.bg-empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:var(--radius-md);padding:18px;text-align:center;color:var(--muted);font-size:13px}

@media(max-width:560px){
  .panel{padding:18px}
  .bg-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .bg-item img{height:88px}
}

/* ============================================================
   站点管理弹窗：两栏
   左栏是新增/编辑表单，右栏是清单。清单平时就压在表单这一栏下面 ——
   弹窗 overflow:hidden 把它裁掉，DOM 一直在，只是看不见。
   点开时弹窗从 520 变宽到 1040、左栏顺势往左让位，右栏就从表单右边
   「抽」出来；收起是反过来。位置全由 CSS 决定，一行 DOM 都不用重建。

   关键是两栏的宽度写死成 520（不再按 1:1 分摊），所以变宽这一下只换了
   弹窗的裁切窗口，栏里的输入框、列表一个字都不会重排 —— 这才是它顺的原因。
   两栏各自内部滚动，站点再多也不会让整个弹窗拖出一条长滚动条。
   ============================================================ */
a.ghost-button{display:inline-flex;align-items:center;text-decoration:none;line-height:1.35}

/* 这个弹窗故意不画 border，改用 inset outline 描那 1px 轮廓：
   border 会占掉左右各 1px，收起（520）和展开（1040）时栏的可用宽度就差了 2px，
   动画头几帧栏里的输入框会跟着挪 2px。outline 不占布局，两种状态下栏宽一模一样。 */
.sheet.sites-sheet{display:flex;align-items:stretch;width:min(520px,100%);padding:0;border:0;outline:1px solid var(--line);outline-offset:-1px;overflow:hidden;transition:width .34s var(--ease)}
/* 展开 = 再多一栏：1040 = 520 × 2。左栏像素宽不变，只是被整体推到了左边 */
.sheet.sites-sheet.expanded{width:min(1040px,100%)}

/* flex:0 0 520px 是这版的重点：宽度钉死，弹窗再宽再窄都不重排里面的东西；
   max-width:100% 只在窄屏弹窗比 520 还窄时兜底，免得内容被裁掉。 */
.sites-pane{flex:0 0 520px;width:520px;max-width:100%;min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:26px;background:var(--paper)}
/* 细一点的滚动条：Firefox 与 WebKit 两套写法都要给 */
.sites-pane{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.sites-pane::-webkit-scrollbar{width:12px}
.sites-pane::-webkit-scrollbar-track{background:transparent}
.sites-pane::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:4px solid transparent;background-clip:content-box}
.sites-pane::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box}

/* 右栏：自己不吃左右 padding（留给清单条目），只跟左栏之间画一条分隔线 */
.sites-list-pane{position:relative;border-left:1px solid var(--line);padding:22px 0 24px;transition:transform .34s var(--ease)}
.sites-list-pane .sheet-head{padding:0 24px;margin-bottom:12px}
.sites-list-pane .sheet-head h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em}
/* 清单比面板窄一点：两侧留白，条目不至于贴着边缘 */
.sites-list-pane .site-list{max-width:460px;margin:0 auto;padding:2px 24px 0}

.sites-expand{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.sites-expand .cancel-button{display:block;width:100%}

/* 屏幕放不下两栏（2 × 520 + 左右各 24 的内边距 ≈ 1088）时换一种抽法：
   弹窗宽度原地不动，整栏清单平移过来盖住表单 —— 窄屏本来就并排不下，
   硬挤只会把两栏都压变形。 */
@media(max-width:1090px){
  .sheet.sites-sheet.expanded{width:min(520px,100%)}
  .sheet.sites-sheet.expanded .sites-list-pane{transform:translateX(-100%);z-index:2}
  .sites-pane{padding:20px}
  .sites-list-pane{border-left:0;padding:20px 0 22px}
  .sites-list-pane .sheet-head{padding:0 18px}
  .sites-list-pane .site-list{padding:2px 16px 0}
}