/* ===================== 全局变量 ===================== */
:root {
  --glass-alpha: 0.35;
  --glass-sat: 1.4;
  --glass-bg: rgba(255, 255, 255, var(--glass-alpha));
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 8px 32px rgba(255, 130, 170, 0.18);
  --blur: 18px;
  --bg-overlay: 0;
  --bg-blur: 0px;

  --text: #3b2a33;
  --text-soft: #6a4f5a;
  --text-faint: #9b828f;

  --accent: #ff8fab;
  --accent-2: #ffc2d6;
  --accent-soft: #ffe4ee;
  --accent-rgb: 255, 143, 171;

  --card-bg: rgba(255, 255, 255, 0.45);
  --card-hover: rgba(255, 255, 255, 0.72);

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --font-base: 15px;
  --gap: 18px;
  --card-size: 104px;

  --bg-gradient: radial-gradient(1200px 700px at 20% 10%, #ffd6e6 0%, transparent 60%),
                 radial-gradient(1000px 600px at 85% 85%, #c9e4ff 0%, transparent 60%),
                 linear-gradient(160deg, #fff1f6 0%, #f5e6ff 40%, #e3f0ff 100%);
}

[data-theme="dark"] {
  --glass-bg: rgba(30, 22, 34, calc(var(--glass-alpha) + 0.1));
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

  --text: #f6e8ef;
  --text-soft: #d5bfcb;
  --text-faint: #a48a98;

  --accent-soft: rgba(var(--accent-rgb), 0.18);

  --card-bg: rgba(40, 28, 44, 0.55);
  --card-hover: rgba(55, 38, 62, 0.78);

  --bg-gradient: radial-gradient(1200px 700px at 20% 10%, #3a1a2e 0%, transparent 60%),
                 radial-gradient(1000px 600px at 85% 85%, #1c2a4a 0%, transparent 60%),
                 linear-gradient(160deg, #1a0f1d 0%, #2a1433 50%, #0f1a2e 100%);
}

/* 视觉氛围：页面渐变与玻璃高光（主色仍由设置里的「主色调」控制） */
html[data-visual-theme="starlight"] {
  --glass-shadow: 0 8px 32px rgba(120, 150, 255, 0.2);
  --bg-gradient: radial-gradient(1100px 680px at 15% 12%, #e8eeff 0%, transparent 58%),
                 radial-gradient(900px 620px at 88% 82%, #d4e0ff 0%, transparent 55%),
                 linear-gradient(165deg, #f0f4ff 0%, #e8ecff 42%, #dfe8ff 100%);
}
[data-theme="dark"][data-visual-theme="starlight"] {
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.42);
  --bg-gradient: radial-gradient(1100px 680px at 15% 12%, #1c2240 0%, transparent 58%),
                 radial-gradient(900px 620px at 88% 82%, #152238 0%, transparent 55%),
                 linear-gradient(165deg, #0f1020 0%, #121a30 45%, #0a1428 100%);
}

html[data-visual-theme="sycamore"] {
  --glass-shadow: 0 8px 32px rgba(160, 120, 60, 0.16);
  --bg-gradient: radial-gradient(1100px 700px at 18% 8%, #f5ecd8 0%, transparent 56%),
                 radial-gradient(950px 600px at 82% 88%, #e8dcc4 0%, transparent 54%),
                 linear-gradient(158deg, #faf6ee 0%, #f0e8d8 40%, #e8e4dc 100%);
}
[data-theme="dark"][data-visual-theme="sycamore"] {
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.38);
  --bg-gradient: radial-gradient(1100px 700px at 18% 8%, #2a2418 0%, transparent 56%),
                 radial-gradient(950px 600px at 82% 88%, #1e2218 0%, transparent 54%),
                 linear-gradient(158deg, #1a1810 0%, #221c14 48%, #141a12 100%);
}

[data-density="compact"] { --card-size: 86px; --gap: 12px; }
[data-density="cozy"]    { --card-size: 120px; --gap: 22px; }
[data-density="tight"]   { --card-size: 64px; --gap: 8px; }
[data-density="tight"] .card .name {
  font-size: .72em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-density="tight"] .card .icon-slot {
  width: 36px;
  height: 36px;
}

[data-fontsize="small"]  { --font-base: 13px; }
[data-fontsize="large"]  { --font-base: 17px; }

[data-radius="square"]   { --radius-lg: 8px;  --radius-md: 6px;  --radius-sm: 4px; }
[data-radius="rounded"]  { --radius-lg: 30px; --radius-md: 22px; --radius-sm: 16px; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
               "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: var(--font-base);
  background: var(--bg-gradient) fixed;
  background-size: cover;
  overflow-x: hidden;
}

/* 背景层（双层淡入淡出） */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.4s ease;
  filter: blur(var(--bg-blur));
  transform: scale(1.04);
}
.bg-layer.active { opacity: 1; }

/* 视频背景层 */
.bg-video {
  position: fixed;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
  filter: blur(var(--bg-blur));
  transform: scale(1.04);
  pointer-events: none;
  background: transparent;
  display: none;
}
.bg-video.active { opacity: 1; display: block; }

.bg-mask {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--bg-overlay));
  transition: background 0.4s;
}

body.has-bg { background: transparent; }
[data-theme="dark"] body.has-bg,
body.has-bg {
  /* 有自定义背景时遮罩色调可调 */
}

/* ===================== 樱花画布 ===================== */
#sakura-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--particle-opacity, 0.9);
}

/* ===================== 主容器 ===================== */
.app {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 28px 80px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ===================== 玻璃材质 ===================== */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--glass-sat));
  border-radius: var(--radius-lg);
}

/* ===================== 顶栏 ===================== */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  gap: 20px;
}

.greet h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .greet h1 { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }

.greet p {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 14px;
  letter-spacing: 0.2px;
  opacity: 0.92;
}

.clock {
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: 0.95;
}

#clock-time {
  font-size: 34px;
  font-weight: 200;
  letter-spacing: 3px;
  color: var(--text);
  line-height: 1.1;
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.4),
    0 6px 18px rgba(var(--accent-rgb), 0.15);
  font-feature-settings: "tnum";
  transition: color 0.3s;
}
[data-theme="dark"] #clock-time {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 6px 18px rgba(var(--accent-rgb), 0.22);
}

#clock-date {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 4px;
  letter-spacing: 0.8px;
  opacity: 0.78;
}

/* ===================== 搜索 ===================== */
.search-box {
  padding: 16px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.search-box:focus-within {
  box-shadow: 0 8px 34px rgba(var(--accent-rgb), 0.22),
              0 0 0 1px rgba(var(--accent-rgb), 0.22) inset;
}

.engine-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.engine-tabs button {
  border: none;
  background: transparent;
  color: var(--text-soft);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.engine-tabs button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.3);
}

.engine-tabs button.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.35);
}

.search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
[data-theme="dark"] .search-form {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.search-form:focus-within {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);
}
[data-theme="dark"] .search-form:focus-within {
  background: rgba(255, 255, 255, 0.1);
}

.search-form input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--text);
  padding: 10px 4px;
  caret-color: var(--accent);
}

.search-form input::placeholder {
  color: var(--text-faint);
  opacity: 0.85;
  font-weight: 300;
  letter-spacing: 0.2px;
}

.search-form button {
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
}

.search-form button:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.5);
}
.search-form button:active { transform: scale(0.94); }

/* ===================== 工具栏 ===================== */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 6px;
}

.toolbar-left, .toolbar-right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.chip:hover {
  background: var(--card-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.14);
}

.icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  backdrop-filter: blur(10px);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s ease, box-shadow 0.25s ease;
}
.icon-btn:hover {
  transform: rotate(12deg) scale(1.08);
  background: var(--card-hover);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.18);
}

/* ===================== 分组 ===================== */
.groups { display: flex; flex-direction: column; gap: 22px; }

.group {
  padding: 18px 22px 22px;
}

.group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.group-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--group-color, var(--accent));
  box-shadow: 0 0 10px var(--group-color, var(--accent));
}

.group-name {
  font-size: 16px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text);
  outline: none;
  padding: 2px 4px;
  border-radius: 6px;
  min-width: 60px;
}
.group-name:focus { background: rgba(255, 255, 255, 0.3); }

.group-count {
  color: var(--text-faint);
  font-size: 12px;
}

.group-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.group-actions button {
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
}
.group-actions button:hover { color: var(--text); background: rgba(255, 255, 255, 0.25); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-size), 1fr));
  gap: var(--gap);
}

.card {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 6px;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.25s, background 0.25s, box-shadow 0.25s;
  overflow: hidden;
  backdrop-filter: blur(8px);
  isolation: isolate;
}

/* ===================== 卡片/分组自定义背景层 ===================== */
.card-bg, .group-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.card-bg > img, .card-bg > video,
.group-bg > img, .group-bg > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--bg-opacity, 1);
  filter: blur(var(--bg-blur, 0px)) brightness(var(--bg-brightness, 1));
  transition: opacity 0.2s;
}
.card-bg::after, .group-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--bg-mask, 0));
  pointer-events: none;
}
.card.has-bg { background: transparent; backdrop-filter: none; }
.card.has-bg > .icon-slot, .card.has-bg > .name {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.card.has-bg .name { color: #fff; }
.group.has-bg { position: relative; isolation: isolate; overflow: hidden; }
.group.has-bg > .group-head { position: relative; }

.link-group-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.link-group-field .input-with-btn {
  margin-top: 4px;
}
.link-group-field select {
  min-width: 0;
}
.inline-group-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.2);
}
.inline-group-create[hidden] {
  display: none;
}
.inline-group-create input[type="color"] {
  width: 44px;
  min-width: 44px;
  padding: 3px;
}
@media (max-width: 560px) {
  .inline-group-create {
    grid-template-columns: 1fr 44px;
  }
  .inline-group-create button {
    grid-column: span 2;
  }
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 60px at 50% 0%, rgba(255, 255, 255, 0.5), transparent 70%);
  pointer-events: none;
  opacity: 0.6;
}

.card:hover {
  transform: translateY(-4px);
  background: var(--card-hover);
  box-shadow: 0 14px 30px rgba(255, 143, 171, 0.25);
}

.card .icon-slot {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
  background: rgba(255,255,255,0.5);
  padding: 2px;
}

.card .fallback {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.card .name {
  font-size: 12px;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  word-break: break-all;
}

.card.dragging { opacity: 0.4; }
.card.drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; }

.card-add {
  background: transparent;
  border: 1.5px dashed var(--glass-border);
  color: var(--text-faint);
  font-size: 28px;
}
.card-add:hover { color: var(--accent); border-color: var(--accent); }

/* 编辑模式小删除按钮 */
body[data-edit="1"] .card .del {
  display: flex;
}

.card .del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 11px;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ===================== 底栏 ===================== */
.footer {
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
  padding: 20px 0;
}
.footer kbd {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--glass-border);
  font-size: 11px;
}

/* ===================== Dialog ===================== */
.glass-dialog {
  border: none;
  padding: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text);
  max-width: 460px;
  width: calc(100% - 32px);
  overflow: visible;
}
.glass-dialog::backdrop {
  background: rgba(40, 20, 30, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.3s ease;
}

.glass-dialog > form,
.glass-dialog > .dialog-form {
  background: var(--glass-bg);
  backdrop-filter: blur(35px) saturate(var(--glass-sat, 1.5));
  -webkit-backdrop-filter: blur(35px) saturate(var(--glass-sat, 1.5));
  border: 1px solid var(--glass-border);
  padding: 0;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  box-shadow: var(--glass-shadow);
  animation: dialog-appear 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow: hidden;
}

@keyframes dialog-appear {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dialog-header {
  padding: 20px 24px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
  background: linear-gradient(to bottom, rgba(var(--accent-rgb), 0.05), transparent);
}

.dialog-header h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.dialog-header h3 .ai-build-tag {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(214, 51, 108, 0.10);
  color: rgba(214, 51, 108, 0.85);
  border: 1px solid rgba(214, 51, 108, 0.18);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  user-select: text;
  cursor: text;
}
[data-theme="dark"] .dialog-header h3 .ai-build-tag {
  background: rgba(255, 122, 168, 0.12);
  color: rgba(255, 158, 188, 0.95);
  border-color: rgba(255, 122, 168, 0.22);
}

.dialog-body {
  padding: 20px 24px 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.2) transparent;
  /* 关键：作为 flex 子元素必须 flex: 1 + min-height: 0 才能正确收缩 + 触发 overflow-y 滚动；
     默认 flex: 0 1 auto 会按内容高度撑开，超出时被父级 form 的 overflow:hidden 截断（之前
     "添加网址 → 卡片背景媒体" 展开后下半段被遮的根因）。 */
  flex: 1 1 auto;
  min-height: 0;
}
.dialog-actions { flex: 0 0 auto; }
.dialog-header { flex: 0 0 auto; }
/* 弹窗里的 <details class="sec">（折叠节）必须 flex-shrink:0，否则 flex 会强行压缩它，
   配合 `.sec { overflow: hidden }` 把展开后的内容裁掉。同时让 details 自身 overflow 可见，
   依赖外层 .dialog-body 的滚动条。 */
.dialog-body > details.sec,
.dialog-body > .sec {
  flex-shrink: 0;
  overflow: visible;
}
.dialog-body::-webkit-scrollbar { width: 5px; }
.dialog-body::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.2); border-radius: 10px; }

.dialog-actions {
  padding: 14px 24px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.06);
  background: rgba(var(--accent-rgb), 0.02);
}

.close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 20px;
  line-height: 1;
}
[data-theme="dark"] .close-btn { background: rgba(255, 255, 255, 0.08); }
.close-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  transform: rotate(90deg);
}

.glass-dialog label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
}

.glass-dialog label.row {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* 字段栅格布局 */
.field-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: flex-end;
}
@media (max-width: 440px) {
  .field-grid { grid-template-columns: 1fr; }
}

.glass-dialog input[type="text"],
.glass-dialog input[type="url"],
.glass-dialog input[type="password"],
.glass-dialog input[type="number"],
.glass-dialog input[type="date"],
.glass-dialog input[type="time"],
.glass-dialog input[type="email"],
.glass-dialog input:not([type]),
.glass-dialog select,
.glass-dialog input[type="range"] {
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: all 0.25s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
[data-theme="dark"] .glass-dialog input[type="text"],
[data-theme="dark"] .glass-dialog input[type="url"],
[data-theme="dark"] .glass-dialog input[type="password"],
[data-theme="dark"] .glass-dialog input[type="number"],
[data-theme="dark"] .glass-dialog input[type="date"],
[data-theme="dark"] .glass-dialog input[type="time"],
[data-theme="dark"] .glass-dialog input[type="email"],
[data-theme="dark"] .glass-dialog input:not([type]),
[data-theme="dark"] .glass-dialog select {
  background: var(--card-bg);
  border-color: rgba(255, 255, 255, 0.12);
}

.glass-dialog input:hover,
.glass-dialog select:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: var(--card-hover);
}
[data-theme="dark"] .glass-dialog input:hover,
[data-theme="dark"] .glass-dialog select:hover {
  background: var(--card-hover);
}

.glass-dialog input:focus,
.glass-dialog select:focus {
  border-color: var(--accent);
  background: var(--glass-bg);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16);
}
[data-theme="dark"] .glass-dialog input:focus,
[data-theme="dark"] .glass-dialog select:focus {
  background: var(--glass-bg);
}

.glass-dialog input::placeholder {
  color: var(--text-faint);
  font-weight: 300;
  opacity: 0.75;
}

/* 图标选择器 */
.hint-inline { color: var(--text-faint); font-size: 11px; margin-left: 6px; font-weight: 400; }
.icon-picker {
  display: flex;
  gap: 12px;
  align-items: stretch;
  padding: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .icon-picker { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }
.icon-picker-preview {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.45);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--glass-border);
}
[data-theme="dark"] .icon-picker-preview { background: rgba(255, 255, 255, 0.08); }
.icon-picker-preview img {
  width: 100%; height: 100%; object-fit: contain;
  background: transparent;
}
.icon-picker-placeholder { font-size: 10px; color: var(--text-faint); }
.icon-picker-controls { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.icon-picker-controls input { flex: 1; }
.icon-picker-actions { display: flex; gap: 6px; }
.icon-picker-actions .mini-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
}
.btn-primary:hover { background: var(--accent-2); }

.btn-secondary {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--glass-border);
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
}
.btn-secondary:hover { color: var(--text); }

.hint { color: var(--text-soft); font-size: 13px; margin: 0; line-height: 1.6; }
.hint code { background: rgba(0,0,0,0.08); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

.import-preview {
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.25);
  color: var(--text-soft);
  line-height: 1.6;
  display: none;
}
.import-preview.show { display: block; }
.import-preview b { color: var(--text); }

/* ===================== 右键菜单 ===================== */
.ctx-menu {
  position: fixed;
  z-index: 999;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  min-width: 160px;
  gap: 2px;
}
.ctx-menu[hidden] { display: none; }
.ctx-menu button {
  border: none;
  background: transparent;
  color: var(--text);
  padding: 8px 12px;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.ctx-menu button:hover { background: var(--accent-soft); color: var(--accent); }

/* ===================== Toast ===================== */
.toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30, 20, 30, 0.85);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 1000;
  opacity: 0;
  transition: 0.3s;
  pointer-events: none;
  backdrop-filter: blur(10px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===================== 响应式 ===================== */
@media (max-width: 640px) {
  .app { padding: 20px 14px 60px; }
  .header-bar { flex-direction: column; text-align: center; align-items: center; }
  .clock { text-align: center; }
  #clock-time { font-size: 26px; }
  .greet h1 { font-size: 22px; }
  :root { --card-size: 82px; --gap: 12px; }
}

/* ===================== 登录层 ===================== */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 20, 30, 0.25);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  animation: fade-in 0.35s ease;
}

.login-overlay[hidden] { display: none; }

.login-card {
  width: min(380px, calc(100% - 40px));
  padding: 32px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: var(--radius-lg);
  animation: pop-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.login-logo {
  font-size: 44px;
  text-align: center;
  filter: drop-shadow(0 4px 8px rgba(255, 143, 171, 0.5));
  animation: float 3.5s ease-in-out infinite;
}

.login-card h2 {
  margin: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
}

.login-sub {
  margin: -4px 0 8px;
  text-align: center;
  color: var(--text-soft);
  font-size: 13px;
}

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-soft);
}

.login-card label.row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.login-card input[type="text"],
.login-card input[type="password"] {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="dark"] .login-card input[type="text"],
[data-theme="dark"] .login-card input[type="password"] {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

.login-card input::placeholder {
  color: var(--text-faint);
  font-weight: 300;
  opacity: 0.7;
}

.login-card input:hover { border-color: rgba(var(--accent-rgb), 0.35); }

.login-card input:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14);
  background: rgba(255, 255, 255, 0.8);
}
[data-theme="dark"] .login-card input:focus { background: rgba(255, 255, 255, 0.14); }

.login-msg {
  min-height: 18px;
  font-size: 12px;
  color: #e04e75;
  text-align: center;
}
.login-msg.ok { color: #4caf50; }

.login-btn {
  margin-top: 6px;
  padding: 12px;
  font-size: 15px;
  letter-spacing: 6px;
  border-radius: 12px;
  transition: 0.25s;
  box-shadow: 0 8px 20px rgba(255, 143, 171, 0.4);
}
.login-btn:hover { transform: translateY(-1px); }
.login-btn:disabled { opacity: 0.6; cursor: wait; }

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* 未登录时隐藏主界面，避免闪烁 */
body.pre-auth .app { visibility: hidden; }
body.pre-auth .ai-fab,
body.pre-auth #blog-panel,
body.pre-auth #ai-panel,
body.pre-auth #calendar-panel,
body.pre-auth #upcoming-card { display: none !important; }

/* ===================== 一言 ===================== */
.hitokoto {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-faint);
  max-width: 360px;
  line-height: 1.5;
  font-style: italic;
  opacity: 0.9;
  transition: opacity 0.4s;
}
.hitokoto[hidden] { display: none; }
.hitokoto:hover { color: var(--text-soft); }
.hitokoto .from { color: var(--accent); font-style: normal; margin-left: 6px; font-size: 11px; }

/* ===================== 卡片过滤框 ===================== */
.filter-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}

.filter-input {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.35);
  color: var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 8px 30px 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  outline: none;
  width: 200px;
  transition: width 0.3s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
[data-theme="dark"] .filter-input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.filter-input:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);
  width: 260px;
}
[data-theme="dark"] .filter-input:focus { background: rgba(255, 255, 255, 0.14); }
.filter-input::placeholder {
  color: var(--text-faint);
  font-weight: 300;
  opacity: 0.75;
}

.filter-clear {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 999px;
}
.filter-clear:hover { color: var(--text); background: rgba(255,255,255,0.2); }

/* 过滤状态下不匹配的卡片 */
.card.filtered-out { display: none; }
.group.group-empty-by-filter { display: none; }

/* ===================== chip 下拉菜单（导出） ===================== */
.chip-menu {
  position: relative;
  padding: 0;
  overflow: visible;
}
.chip-menu > button {
  border: none;
  background: transparent;
  color: inherit;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.chip-menu-pop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background: var(--glass-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 4px;
  flex-direction: column;
  gap: 2px;
  z-index: 20;
  box-shadow: var(--glass-shadow);
}
.chip-menu.open .chip-menu-pop { display: flex; }
.chip-menu-pop button {
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.chip-menu-pop button:hover { background: var(--accent-soft); color: var(--accent); }

/* ===================== 设置分区 ===================== */
.settings-dialog {
  max-width: 540px;
}

/* 设置弹窗专用：避免 .sec 的 overflow/入场动画在部分浏览器下裁切或“卡住”表单项；
 * 同时让 range 不再套用文本框的厚 padding（否则像多条灰条、标签像消失） */
.settings-dialog .sec {
  overflow: visible;
}
.settings-dialog .sec > *:not(summary) {
  animation: none;
  opacity: 1;
  transform: none;
}
.settings-dialog .sec > summary {
  color: var(--text);
  font-size: 14px;
}
.settings-dialog .sec > label {
  min-width: 0;
}
.settings-dialog input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 100%;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  box-shadow: none;
  background: rgba(0, 0, 0, 0.12);
  flex: 1 1 auto;
  min-width: 0;
}
[data-theme="dark"] .settings-dialog input[type="range"] {
  background: rgba(255, 255, 255, 0.2);
}
.settings-dialog input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.settings-dialog input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.settings-dialog label.row {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.settings-dialog label.row > input[type="range"] {
  flex: 1 1 140px;
}

.settings-dialog > .dialog-form {
  max-height: 85vh;
  overflow-y: auto;
}

.storage-inspector {
  margin-top: 8px;
  max-height: min(420px, 50vh);
  overflow: auto;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .storage-inspector {
  background: rgba(0, 0, 0, 0.15);
}
.storage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.storage-table th,
.storage-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--glass-border);
  vertical-align: top;
  text-align: left;
}
.storage-table thead th {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 600;
}
.storage-subh {
  margin: 14px 0 8px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
}
.storage-sum {
  font-size: 12px;
  color: var(--text-soft);
  max-width: 14rem;
  word-break: break-word;
}

.sec {
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--card-bg);
  padding: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  margin-bottom: 2px;
}
[data-theme="dark"] .sec { background: var(--card-bg); }

.sec:hover {
  border-color: rgba(var(--accent-rgb), 0.25);
  background: var(--card-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08);
}
[data-theme="dark"] .sec:hover { background: var(--card-hover); }

.sec > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
  transition: background 0.2s;
}
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary::after {
  content: "→";
  margin-left: auto;
  transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--text-faint);
  font-size: 14px;
  opacity: 0.6;
}
.sec[open] > summary::after { transform: rotate(90deg); color: var(--accent); opacity: 1; }

.sec[open] {
  background: var(--card-hover);
  border-color: rgba(var(--accent-rgb), 0.2);
  margin-bottom: 12px;
}
[data-theme="dark"] .sec[open] { background: var(--card-hover); }

.sec > *:not(summary) {
  padding: 4px 18px 18px;
  animation: sec-fade-in 0.3s ease-out;
}

@keyframes sec-fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.sec textarea {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  resize: vertical;
  width: 100%;
  transition: all 0.2s;
}
[data-theme="dark"] .sec textarea { background: rgba(255, 255, 255, 0.08); }
.sec textarea:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
[data-theme="dark"] .sec textarea:focus { background: rgba(255, 255, 255, 0.12); }

.bg-panel { display: none; padding-bottom: 10px; flex-direction: column; gap: 10px; }
.bg-panel.show { display: flex; }

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

.mini-btn {
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-soft);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: 0.2s;
}
.mini-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ===================== 分组折叠 ===================== */
.group.collapsed .cards { display: none; }
.group-head { cursor: grab; }
.group-head:active { cursor: grabbing; }
.group.dragging { opacity: 0.5; }
.group.drag-over { outline: 2px dashed var(--accent); outline-offset: 4px; }

/* 分组拖拽手柄（明显指示） */
.group-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1;
  color: var(--text-faint);
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
  transition: color 0.2s, background 0.2s;
}
.group-head:hover .group-handle { color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
.group-head:active .group-handle { cursor: grabbing; }

.group-toggle {
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  transition: 0.2s;
}
.group-toggle:hover { color: var(--text); }
.group.collapsed .group-toggle { transform: rotate(-90deg); }

/* ===================== 响应式调整 ===================== */
@media (max-width: 640px) {
  .filter-input { width: 100%; }
  .filter-wrap { flex: 1 1 100%; }
  .settings-dialog { max-width: 94vw; }
}

/* ===================== AI 浮动按钮 ===================== */
.ai-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  font-size: 24px;
  box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.5), 0 0 0 1px rgba(255,255,255,0.4) inset;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ai-fab:hover { transform: scale(1.08) rotate(-6deg); }
.ai-fab:active { transform: scale(0.95); }
.ai-fab.hidden { display: none; }

/* 新消息红点 */
.ai-fab.has-new::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3366;
  box-shadow: 0 0 0 2px white;
}

/* ===================== AI 聊天面板 ===================== */
.ai-panel {
  position: fixed;
  top: 16px;
  right: 16px;
  /* bottom 不再写死，改成显式 height，让 resize:both 能改高度；
     拖动后 JS 会切换到 top/left 定位（去掉 right）。 */
  width: 420px;
  height: calc(100vh - 32px);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  min-width: 320px;
  min-height: 360px;
  resize: both;       /* 浏览器原生右下角拖动手柄 */
  overflow: hidden;   /* resize 必须配合 overflow != visible */
  display: flex;
  flex-direction: column;
  padding: 0;
  z-index: 600;
  border-radius: var(--radius-lg);
  animation: ai-slide 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* 容器查询：让顶栏按钮根据自己面板宽度而不是视口宽度做响应 */
  container-type: inline-size;
  container-name: aipanel;
}
.ai-panel[hidden] { display: none; }
/* 标题栏鼠标悬浮时变"移动"光标，但点击区是按钮 / select / input 不要变 */
.ai-panel .ai-head { cursor: move; user-select: none; }
.ai-panel .ai-head button,
.ai-panel .ai-head select,
.ai-panel .ai-head input,
.ai-panel .ai-head label,
.ai-panel .ai-head .ai-tool-btn,
.ai-panel .ai-head .ai-model-status {
  cursor: pointer;
}
.ai-panel .ai-head .ai-tool-btn { cursor: pointer; }
.ai-panel.ai-dragging,
.ai-panel.ai-dragging * { user-select: none !important; cursor: move !important; }

@keyframes ai-slide {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.ai-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--glass-border);
  gap: 8px;
}
.ai-head-left, .ai-head-right { display: flex; align-items: center; gap: 6px; }
.ai-head-left { min-width: 0; }
.ai-head-right {
  min-width: 0;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.ai-logo { font-size: 18px; }

.ai-head select {
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  font-size: 12px;
  color: var(--text);
  min-width: 0;
  max-width: 100%;
  outline: none;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.45) 50%),
    linear-gradient(135deg, rgba(0,0,0,0.45) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 2px),
    calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
[data-theme="dark"] .ai-head select {
  background: rgba(255,255,255,0.06);
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.6) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.6) 50%, transparent 50%);
}
.ai-head select:hover { border-color: rgba(var(--accent-rgb), 0.35); }
.ai-head select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* 头栏布局：允许窄屏折行，保证图标按钮永远完整可见 */
.ai-head { flex-wrap: wrap; row-gap: 6px; }
.ai-head-left, .ai-head-right { min-width: 0; }
.ai-head-left  { flex: 0 1 auto; }
.ai-head-right { flex: 1 1 auto; }
#ai-persona-select { flex: 0 1 160px; min-width: 80px; max-width: 160px; }
/* 关键：模型下拉极窄也可缩，永远把右侧的图标按钮（含 ✕）留在屏幕内 */
#ai-model-select { flex: 1 1 80px; width: auto; min-width: 60px; max-width: 260px; }
.ai-head-right > .icon-btn { flex: 0 0 auto; }

/* 输入框右侧的小按钮（供应商弹窗「获取模型」等） */
.input-with-btn {
  display: flex;
  gap: 6px;
  align-items: stretch;
  margin-top: 2px;
}
.input-with-btn > input {
  flex: 1 1 auto;
  min-width: 0;
}
.btn-inline {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 8px;
}
.btn-inline[disabled] { opacity: .55; cursor: wait; }

#provider-fetch-msg.err { color: #d74e6b; }
#provider-fetch-msg.ok { color: #2f9a5a; }

/* ===================== 卡片/分组背景编辑器 ===================== */
.bg-editor-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.bg-editor-preview {
  width: 108px;
  height: 108px;
  flex: 0 0 108px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.08);
  border: 1px dashed rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
[data-theme="dark"] .bg-editor-preview { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); }
.bg-editor-preview > img,
.bg-editor-preview > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--bg-opacity, 1);
  filter: blur(var(--bg-blur, 0px));
}
.bg-editor-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--bg-mask, 0));
  pointer-events: none;
}
.bg-editor-controls {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.bg-editor-controls .input-with-btn { flex-wrap: wrap; }
.bg-slider {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--text-faint);
}
.bg-slider > span { display: flex; justify-content: space-between; }
.bg-slider > span b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.bg-slider > input[type=range] { width: 100%; }

.icon-btn.small { width: 28px; height: 28px; font-size: 13px; }

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

.ai-empty {
  text-align: center;
  color: var(--text-faint);
  padding: 20px 10px;
}
.ai-empty-logo { font-size: 48px; margin-bottom: 10px; animation: float 3.5s ease-in-out infinite; }
.ai-empty p { margin: 8px 0 16px; font-size: 13px; line-height: 1.6; }
.ai-suggestions { display: flex; flex-direction: column; gap: 8px; }
.ai-suggestions button {
  border: 1px dashed var(--glass-border);
  background: transparent;
  color: var(--text-soft);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  cursor: pointer;
  transition: 0.2s;
}
.ai-suggestions button:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* 消息气泡 */
.ai-msg {
  display: flex;
  gap: 8px;
  animation: fade-in 0.25s;
}
.ai-msg .ai-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
}
.ai-msg .ai-bubble {
  background: var(--card-bg);
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  max-width: 80%;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  word-break: break-word;
  border: 1px solid var(--glass-border);
  overflow-wrap: anywhere;
}
.ai-msg.user { flex-direction: row-reverse; }
.ai-msg.user .ai-avatar { background: rgba(255,255,255,0.5); color: var(--text); }
[data-theme="dark"] .ai-msg.user .ai-avatar { background: rgba(255,255,255,0.12); }
.ai-msg.user .ai-bubble {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  border: none;
  border-radius: 14px 14px 4px 14px;
}
.ai-msg .ai-bubble p { margin: 0 0 6px; }
.ai-msg .ai-bubble p:last-child { margin-bottom: 0; }
.ai-msg .ai-bubble h1, .ai-msg .ai-bubble h2, .ai-msg .ai-bubble h3 {
  margin: 6px 0 4px; font-size: 14px;
}
.ai-msg .ai-bubble ul { padding-left: 18px; margin: 4px 0; }
.ai-msg .ai-bubble code {
  background: rgba(0,0,0,0.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
}
.ai-msg.user .ai-bubble code { background: rgba(255,255,255,0.2); }
.ai-msg .ai-bubble pre {
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 12px;
  margin: 6px 0;
}
.ai-msg .ai-bubble pre code { background: transparent; color: inherit; padding: 0; }
.ai-msg .ai-bubble a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ai-msg.user .ai-bubble a { color: #fff; text-decoration-color: rgba(255,255,255,0.6); }

/* 思考中：assistant 气泡里的三点动画 */
.ai-thinking {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 2px;
  min-height: 18px;
}
.ai-thinking span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #ff8fab);
  display: inline-block;
  opacity: 0.45;
  animation: ai-thinking-bounce 1.2s infinite ease-in-out both;
}
.ai-thinking span:nth-child(1) { animation-delay: -0.32s; }
.ai-thinking span:nth-child(2) { animation-delay: -0.16s; }
.ai-thinking span:nth-child(3) { animation-delay: 0s; }
@keyframes ai-thinking-bounce {
  0%, 80%, 100% {
    transform: translateY(0) scale(0.65);
    opacity: 0.45;
  }
  40% {
    transform: translateY(-3px) scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-thinking span { animation: ai-thinking-pulse 1.4s infinite ease-in-out; transform: none !important; }
  @keyframes ai-thinking-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
  }
}

/* ===== 生图卡片（借鉴 ChatGpt-Image-Studio 的 conversation-turns 设计）===== */
.ai-img-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: -2px 0;
}
.ai-img-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
}
.ai-img-pill {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-soft, #6b6b6b);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ai-img-pill.running {
  background: rgba(56, 139, 253, 0.12);
  color: #2563eb;
  animation: ai-img-pulse 1.6s ease-in-out infinite;
}
.ai-img-pill.err {
  background: rgba(244, 63, 94, 0.12);
  color: #be123c;
}
.ai-img-pill.muted {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}
[data-theme="dark"] .ai-img-pill {
  background: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
}
[data-theme="dark"] .ai-img-pill.running { color: #93c5fd; background: rgba(96, 165, 250, 0.18); }
[data-theme="dark"] .ai-img-pill.err     { color: #fda4af; background: rgba(244, 63, 94, 0.18); }

@keyframes ai-img-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.ai-img-summary {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
}
.ai-img-summary.running { background: rgba(56, 139, 253, 0.10); color: #2563eb; }
.ai-img-summary.ok      { background: rgba(34, 197, 94, 0.12);  color: #15803d; }
.ai-img-summary.err     { background: rgba(244, 63, 94, 0.10);  color: #be123c; }
.ai-img-summary.partial { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.ai-img-summary.muted   { background: rgba(107, 114, 128, 0.10); color: #6b7280; }
[data-theme="dark"] .ai-img-summary { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .ai-img-summary.running { background: rgba(96,165,250,0.18); color: #93c5fd; }
[data-theme="dark"] .ai-img-summary.ok      { background: rgba(34,197,94,0.18); color: #86efac; }
[data-theme="dark"] .ai-img-summary.err     { background: rgba(244,63,94,0.20); color: #fda4af; }
[data-theme="dark"] .ai-img-summary.partial { background: rgba(245,158,11,0.20); color: #fcd34d; }

.ai-img-grid {
  display: grid;
  gap: 12px;
}
.ai-img-grid.one  { grid-template-columns: 1fr; }
.ai-img-grid.many { grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) {
  .ai-img-grid.many { grid-template-columns: 1fr; }
}

.ai-img-card {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ai-img-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10); }
.ai-img-card.error    { background: rgba(244, 63, 94, 0.06); border-color: rgba(244, 63, 94, 0.25); }
.ai-img-card.cancelled { background: rgba(107, 114, 128, 0.06); border-color: rgba(107, 114, 128, 0.25); }
.ai-img-card.loading  { background: rgba(0, 0, 0, 0.03); border-style: dashed; }
[data-theme="dark"] .ai-img-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .ai-img-card.error    { background: rgba(244,63,94,0.10); border-color: rgba(244,63,94,0.30); }
[data-theme="dark"] .ai-img-card.cancelled { background: rgba(107,114,128,0.10); }
[data-theme="dark"] .ai-img-card.loading  { background: rgba(255,255,255,0.04); }

.ai-img-thumb {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.03);
  cursor: zoom-in;
}
.ai-img-revised {
  font-size: 11px;
  padding: 8px 12px;
  color: var(--text-soft, #6b6b6b);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
  line-height: 1.5;
  font-style: italic;
}
[data-theme="dark"] .ai-img-revised { border-color: rgba(255,255,255,0.08); background: rgba(0,0,0,0.20); }

.ai-img-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.ai-img-card.error    .ai-img-actions { border-top-color: rgba(244, 63, 94, 0.18); }
[data-theme="dark"] .ai-img-actions { border-top-color: rgba(255,255,255,0.08); }

.ai-img-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-soft, #555);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ai-img-act:hover { background: rgba(0, 0, 0, 0.05); color: var(--text); border-color: rgba(0, 0, 0, 0.16); }
[data-theme="dark"] .ai-img-act { background: rgba(255,255,255,0.06); color: #d1d5db; border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .ai-img-act:hover { background: rgba(255,255,255,0.12); color: #fff; }

.ai-img-err-text {
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
  color: #be123c;
  background: rgba(244, 63, 94, 0.04);
  border-radius: 16px 16px 0 0;
}
.ai-img-cancel-text {
  padding: 28px 18px;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}

.ai-img-spinner-wrap {
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: var(--text-soft, #6b6b6b);
}
.ai-img-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--accent, #ff8fab);
  border-radius: 50%;
  animation: ai-img-spin 0.9s linear infinite;
}
[data-theme="dark"] .ai-img-spinner { border-color: rgba(255,255,255,0.15); border-top-color: var(--accent); }
@keyframes ai-img-spin {
  to { transform: rotate(360deg); }
}
.ai-img-spinner-title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.ai-img-spinner-sub {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-soft, #888);
}

@media (prefers-reduced-motion: reduce) {
  .ai-img-spinner { animation-duration: 2s; }
  .ai-img-pill.running { animation: none; }
}

.ai-inline-img, .ai-inline-video {
  max-width: 100%;
  max-height: 260px;
  border-radius: 10px;
  display: block;
  margin: 6px 0;
  cursor: zoom-in;
  background: rgba(0,0,0,0.04);
}
.ai-inline-video, .ai-inline-audio { cursor: default; }
.ai-inline-audio { width: 100%; margin: 6px 0; }

/* 指令卡片 */
.ai-action-card {
  margin: 10px 0 4px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(255,255,255,0.5);
  padding: 10px 12px;
  font-size: 12px;
}
[data-theme="dark"] .ai-action-card { background: rgba(255,255,255,0.06); }
.ai-action-card h5 {
  margin: 0 0 8px; font-size: 12px; color: var(--accent);
  display: flex; align-items: center; gap: 6px;
}
.ai-action-card ol { margin: 0; padding-left: 18px; line-height: 1.6; color: var(--text-soft); }
.ai-action-card ol li { margin: 2px 0; }
.ai-action-card .badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent);
  color: white;
  margin-right: 4px;
}
.ai-action-card .op-add { background: #4caf50; }
.ai-action-card .op-delete { background: #e04e75; }
.ai-action-card .op-rename, .ai-action-card .op-move { background: #2196f3; }
.ai-action-card .ai-action-apply {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}
.ai-action-card button { flex: 1; padding: 6px; font-size: 12px; border-radius: 8px; border: none; cursor: pointer; }
.ai-action-card .btn-apply { background: var(--accent); color: #fff; }
.ai-action-card .btn-ignore { background: transparent; color: var(--text-faint); border: 1px solid var(--glass-border); }
.ai-action-card.applied { opacity: 0.55; }
.ai-action-card.applied .ai-action-apply { display: none; }

/* 输入栏 */
.ai-foot {
  border-top: 1px solid var(--glass-border);
  padding: 10px 12px 12px;
}
.ai-attach-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.ai-attach-preview:empty { display: none; }
.ai-attach-item {
  position: relative;
  padding: 4px 6px 4px 8px;
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 140px;
}
[data-theme="dark"] .ai-attach-item { background: rgba(255,255,255,0.08); }
.ai-attach-item img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
}
.ai-attach-item .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-attach-item .x {
  border: none; background: transparent;
  color: var(--text-faint); cursor: pointer;
  font-size: 12px; padding: 0 2px;
}
.ai-attach-item .x:hover { color: #e04e75; }

.ai-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.ai-attach-btn {
  cursor: pointer;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--text-soft);
  transition: 0.2s;
}
.ai-attach-btn:hover { color: var(--accent); border-color: var(--accent); }
#ai-input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255,255,255,0.55);
  color: var(--text);
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 13px;
  outline: none;
  resize: none;
  overflow-y: hidden;
  min-height: 40px;
  max-height: 140px;
  line-height: 1.55;
  font-family: inherit;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
[data-theme="dark"] #ai-input {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
#ai-input::placeholder { color: var(--text-faint); font-weight: 300; opacity: 0.75; }
#ai-input:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);
}
[data-theme="dark"] #ai-input:focus { background: rgba(255, 255, 255, 0.12); }
#ai-send, #ai-stop {
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
.ai-tip {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 6px;
  min-height: 14px;
}
.ai-tip.err { color: #e04e75; }

/* ===================== AI 设置 ===================== */
.ai-dialog {
  max-width: 600px;
}

.ai-dialog .dialog-body {
  padding: 20px 24px 24px;
  gap: 14px;
  min-height: 0;
  max-height: calc(90vh - 140px);
  overscroll-behavior: contain;
}

/* 展开某一节不再挤压其他节；由 dialog-body 自己产生滚动条 */
.ai-dialog .dialog-body > details.sec {
  flex-shrink: 0;
}

/* 让 summary 本身有统一内边距 */
.ai-dialog .sec > summary {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  padding: 16px 20px;
}

/* 展开后 summary 与正文之间多留一条分隔空白 */
.ai-dialog .sec[open] > summary {
  padding-bottom: 10px;
}

/* 所有正文放进 .sec-body，由外层统一提供四周内边距，
   内部 button/textarea 不再作为直接子元素被生效的 padding 撑大 */
.ai-dialog .sec > .sec-body {
  padding: 4px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 按钮行：不再与边缘相贴；按钮保持小尺寸 */
.ai-dialog .sec-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-dialog .sec > .sec-body .hint {
  margin: 0 0 16px 2px;
  font-size: 12px;
}

/* ===================== AI 子弹窗（供应商 / 角色） ===================== */
.ai-subdialog {
  max-width: 520px;
}

.ai-subdialog .dialog-header h3 {
  font-size: 1.05rem;
}

.ai-subdialog .dialog-body {
  padding: 22px 26px 8px;
  gap: 16px;
  min-height: 0;
  max-height: calc(90vh - 140px);
}

.ai-subdialog .dialog-body > label {
  gap: 8px;
  font-weight: 500;
  color: var(--text-soft);
}

.ai-subdialog .dialog-body > label > input,
.ai-subdialog .dialog-body > label > textarea {
  width: 100%;
}

.ai-subdialog .dialog-body textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 200px;
  padding: 16px 18px;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.2px;
  color: var(--text);
  border-radius: 20px;
  background:
    linear-gradient(180deg,
      rgba(var(--accent-rgb), 0.05),
      rgba(var(--accent-rgb), 0.02) 40%,
      rgba(255, 255, 255, 0.55));
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  outline: none;
  resize: vertical;
  caret-color: var(--accent);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(var(--accent-rgb), 0.06);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.35) transparent;
}

.ai-subdialog .dialog-body textarea::-webkit-scrollbar { width: 6px; }
.ai-subdialog .dialog-body textarea::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.3);
  border-radius: 10px;
}
.ai-subdialog .dialog-body textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.5);
}

.ai-subdialog .dialog-body textarea::placeholder {
  color: var(--text-faint);
  opacity: 0.75;
  font-style: italic;
}

.ai-subdialog .dialog-body textarea:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.ai-subdialog .dialog-body textarea:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow:
    0 0 0 4px var(--accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 4px 14px rgba(var(--accent-rgb), 0.15);
}

[data-theme="dark"] .ai-subdialog .dialog-body textarea {
  background:
    linear-gradient(180deg,
      rgba(var(--accent-rgb), 0.1),
      rgba(var(--accent-rgb), 0.04) 40%,
      rgba(255, 255, 255, 0.04));
  border-color: rgba(var(--accent-rgb), 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .ai-subdialog .dialog-body textarea:focus {
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 0 4px var(--accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 14px rgba(var(--accent-rgb), 0.25);
}

.ai-subdialog .dialog-body .hint {
  font-size: 11.5px;
  margin: 4px 0 0;
  min-height: 1em;
  padding-left: 2px;
}

.ai-subdialog .dialog-actions {
  padding: 14px 26px 20px;
}

.ai-providers-list, .ai-personas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.ai-provider-item, .ai-persona-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  font-size: 13px;
  transition: all 0.2s ease;
}

[data-theme="dark"] .ai-provider-item,
[data-theme="dark"] .ai-persona-item { 
  background: rgba(255, 255, 255, 0.05); 
}

.ai-provider-item:hover, .ai-persona-item:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(var(--accent-rgb), 0.3);
  transform: translateX(2px);
}

.ai-provider-item.active, .ai-persona-item.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.ai-provider-item .name, .ai-persona-item .name { 
  font-weight: 600; 
  color: var(--text); 
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.ai-provider-item .meta, .ai-persona-item .meta { 
  color: var(--text-faint); 
  font-size: 11.5px; 
  flex: 1; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
  opacity: 0.85;
  display: flex;
  align-items: center;
}

.ai-provider-item .actions, .ai-persona-item .actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.ai-provider-item .actions button, .ai-persona-item .actions button {
  border: none;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-soft);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

[data-theme="dark"] .ai-provider-item .actions button,
[data-theme="dark"] .ai-persona-item .actions button {
  background: rgba(255, 255, 255, 0.08);
}

.ai-provider-item .actions button:hover, 
.ai-persona-item .actions button:hover {
  color: var(--accent); 
  background: rgba(var(--accent-rgb), 0.15);
}

.ai-dialog textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  outline: none;
  resize: vertical;
  transition: all 0.25s;
}

[data-theme="dark"] .ai-dialog textarea { 
  background: rgba(255, 255, 255, 0.08); 
}

.ai-dialog textarea:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px var(--accent-soft);
}


/* ===================== 图片灯箱（预览） ===================== */
.ai-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  cursor: zoom-out;
  animation: fade-in 0.2s;
}
.ai-lightbox[hidden] { display: none; }
.ai-lightbox img {
  max-width: 94vw;
  max-height: 94vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  cursor: default;
}
.ai-lightbox-toolbar {
  position: absolute;
  top: 18px;
  right: 22px;
  display: flex;
  gap: 8px;
  z-index: 2001;
}
.ai-lightbox-toolbar .ai-lb-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: #222;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  transition: transform 0.15s, background 0.15s;
}
.ai-lightbox-toolbar .ai-lb-btn:hover {
  background: #fff;
  transform: scale(1.06);
}

/* ===================== 内联图片悬浮工具条（下载 / 新窗口） ===================== */
.ai-img-figure {
  position: relative;
  display: inline-block;
  margin: 6px 0;
  max-width: 100%;
}
.ai-img-figure > img.ai-inline-img { margin: 0; }
.ai-img-tools {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
}
.ai-img-figure:hover .ai-img-tools,
.ai-img-figure:focus-within .ai-img-tools {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ai-img-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s, transform 0.15s;
}
.ai-img-btn:hover {
  background: rgba(0,0,0,0.78);
  transform: scale(1.08);
}
/* 触屏设备没有 hover，常驻显示 */
@media (hover: none) {
  .ai-img-tools { opacity: 1; transform: none; pointer-events: auto; }
}

/* ===================== 错误气泡里的重试按钮 ===================== */
.ai-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.ai-error-actions button {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.6);
  color: var(--text);
  cursor: pointer;
  transition: 0.18s;
}
[data-theme="dark"] .ai-error-actions button { background: rgba(255,255,255,0.08); }
.ai-error-actions .btn-retry-ai {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
.ai-error-actions .btn-retry-ai:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.ai-error-actions .btn-clear-cooldown:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* fallback 头部提示（前一个模型不可用，已切换到下一个模型继续） */
.ai-route-note {
  margin: 0 0 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}
.ai-route-note code {
  background: rgba(0,0,0,0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
}

/* 探测按钮的旋转动画：现在按钮带文字了，只让图标自转，避免整个按钮翻滚 */
@keyframes ai-spin { to { transform: rotate(360deg); } }
#ai-find-model.spinning {
  pointer-events: none;
  opacity: 0.7;
}
#ai-find-model.spinning .ai-tool-ico {
  display: inline-block;
  animation: ai-spin 0.9s linear infinite;
}

/* 生图模式开关高亮 */
#ai-image-mode.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25);
}
#ai-image-mode.active .ai-tool-txt,
#ai-image-mode.active .ai-tool-ico { color: #fff; }

/* ===== 模型选择框右侧的可用性徽章 ===== */
.ai-model-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  cursor: help;
  user-select: none;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ai-model-status .ai-model-status-ico { font-size: 12px; line-height: 1; font-weight: 600; }
.ai-model-status .ai-model-status-txt { font-size: 11px; line-height: 1; }

.ai-model-status[data-kind="ok"] {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.30);
}
.ai-model-status[data-kind="cold"] {
  background: rgba(56, 139, 253, 0.12);
  color: #2563eb;
  border-color: rgba(56, 139, 253, 0.30);
}
.ai-model-status[data-kind="error"] {
  background: rgba(244, 63, 94, 0.12);
  color: #be123c;
  border-color: rgba(244, 63, 94, 0.30);
}
.ai-model-status[data-kind="unknown"] {
  background: rgba(107, 114, 128, 0.12);
  color: #6b7280;
  border-color: rgba(107, 114, 128, 0.25);
}
[data-theme="dark"] .ai-model-status[data-kind="ok"]      { background: rgba(34,197,94,0.20);  color: #86efac; border-color: rgba(34,197,94,0.35); }
[data-theme="dark"] .ai-model-status[data-kind="cold"]    { background: rgba(96,165,250,0.20); color: #93c5fd; border-color: rgba(96,165,250,0.35); }
[data-theme="dark"] .ai-model-status[data-kind="error"]   { background: rgba(244,63,94,0.20);  color: #fda4af; border-color: rgba(244,63,94,0.35); }
[data-theme="dark"] .ai-model-status[data-kind="unknown"] { background: rgba(255,255,255,0.08); color: #d1d5db; border-color: rgba(255,255,255,0.16); }

@media (max-width: 480px) {
  .ai-model-status .ai-model-status-txt { display: none; }
  .ai-model-status { padding: 0 6px; }
}

/* ===== AI 面板工具栏按钮（图标 + 中文标签）===== */
.ai-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.ai-tool-btn:hover {
  background: var(--card-hover);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
}
.ai-tool-btn:active { transform: scale(0.97); }
.ai-tool-ico { font-size: 13px; line-height: 1; }
.ai-tool-txt { font-size: 11px; line-height: 1; }

/* 让 .ai-attach-btn 也支持新的 icon+txt 结构 */
.ai-attach-btn { display: inline-flex; align-items: center; gap: 3px; }
.ai-attach-btn .ai-tool-ico { font-size: 14px; }
.ai-attach-btn .ai-tool-txt { font-size: 11px; }
#ai-send, #ai-stop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
#ai-send .ai-tool-ico, #ai-stop .ai-tool-ico { font-size: 13px; }
#ai-send .ai-tool-txt, #ai-stop .ai-tool-txt { font-size: 12px; }

/* 头部工具行：允许换行避免在 420px 面板里溢出 */
.ai-head-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }

/* 极窄视口（手机弹起 AI 面板时）：自动隐藏文字，回退成纯图标，保证一行能放下 */
@media (max-width: 480px) {
  .ai-head-right .ai-tool-txt { display: none; }
  .ai-tool-btn { padding: 0 8px; }
}

/* 生图控件条 */
.ai-image-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 14px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(var(--accent-rgb), 0.06);
}
.ai-image-controls[hidden] { display: none; }
.ai-image-controls .ai-imgctl-tag {
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.4px;
}
.ai-image-controls label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-soft);
}
.ai-image-controls select,
.ai-image-controls input[type="number"] {
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.7);
  color: var(--text);
  max-width: 220px;
}
[data-theme="dark"] .ai-image-controls select,
[data-theme="dark"] .ai-image-controls input[type="number"] {
  background: rgba(255,255,255,0.08);
}
.ai-image-controls .ai-imgctl-custom input { width: 70px; }
.ai-image-controls .ai-imgctl-custom[hidden] { display: none; }

/* ===================== 博客面板 ===================== */
.blog-panel {
  position: fixed;
  inset: 0;
  z-index: 700;
  padding: 30px;
  overflow-y: auto;
  background: rgba(255, 241, 246, 0.7);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  animation: fade-in 0.3s;
}
[data-theme="dark"] .blog-panel { background: rgba(26, 15, 29, 0.78); }
.blog-panel[hidden] { display: none; }

.blog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  margin-bottom: 18px;
}
.blog-head-left { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.blog-head-left h2 { margin: 0; font-size: 20px; font-weight: 600; }
.blog-head-left #blog-search { flex: 1; max-width: 360px; }
.blog-head-right { display: flex; gap: 8px; align-items: center; }

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.blog-tag {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-soft);
  font-size: 12px;
  cursor: pointer;
  transition: 0.2s;
}
.blog-tag:hover { color: var(--accent); border-color: var(--accent); }
.blog-tag.active { background: var(--accent); color: white; border-color: var(--accent); }

.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  max-width: 1280px;
  margin: 0 auto;
}
.blog-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  cursor: pointer;
  transition: 0.25s;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--glass-shadow);
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(var(--accent-rgb), 0.2); }
.blog-card .cover {
  width: calc(100% + 40px);
  height: 140px;
  margin: -18px -20px 0;
  background-size: cover;
  background-position: center;
  background-color: var(--accent-soft);
}
.blog-card h3 { margin: 0; font-size: 16px; font-weight: 600; }
.blog-card .excerpt {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: auto;
}
.blog-card .tags { display: flex; gap: 4px; flex-wrap: wrap; }
.blog-card .tags span {
  padding: 1px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 10px;
}
.blog-card .draft-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #aaa;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
}

/* 博客详情 */
.blog-detail {
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 44px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
}
.blog-detail[hidden] { display: none; }
.blog-detail .back-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-soft);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  margin-bottom: 18px;
  font-size: 12px;
}
.blog-detail .back-btn:hover { color: var(--accent); border-color: var(--accent); }
.blog-detail h1:first-of-type { margin-top: 6px; }
.blog-detail pre { background: rgba(0,0,0,0.6); color: #fff; padding: 14px 16px; border-radius: 10px; overflow-x: auto; }
.blog-detail img { max-width: 100%; border-radius: 10px; }
.blog-detail code { background: rgba(0,0,0,0.08); padding: 1px 6px; border-radius: 4px; font-size: 0.9em; }
.blog-detail a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.blog-detail blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 14px;
  margin: 12px 0;
  color: var(--text-soft);
}

/* 博客编辑器 */
.post-dialog { max-width: 720px; }
.post-dialog form { gap: 10px; }
.post-dialog textarea {
  width: 100%;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: ui-monospace, Menlo, Consolas, "PingFang SC", monospace;
  font-size: 13px;
  color: var(--text);
  outline: none;
  resize: vertical;
  line-height: 1.6;
}
[data-theme="dark"] .post-dialog textarea { background: rgba(255,255,255,0.06); }
.post-dialog textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.post-preview-toggle {
  display: flex;
  gap: 8px;
  margin-top: -4px;
}
.post-preview {
  border: 1px dashed var(--glass-border);
  border-radius: 10px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.3);
  max-height: 260px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.7;
}
.post-preview[hidden] { display: none; }
[data-theme="dark"] .post-preview { background: rgba(255,255,255,0.04); }

@media (max-width: 640px) {
  .ai-panel {
    top: 8px;
    right: 8px;
    left: auto;
    bottom: 8px;
    width: calc(100vw - 16px);
    height: auto;
    resize: none;  /* 手机上禁用拖动手柄，回到旧的全屏占位 */
  }
  .blog-panel { padding: 16px; }
  .blog-detail { padding: 24px 22px; }
  .ai-fab { right: 14px; bottom: 14px; }
}

/* ===================== 日历按钮角标 ===================== */
.icon-btn { position: relative; }
.icon-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #ff3366;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--bg-header, rgba(255,255,255,0.5));
  font-weight: 600;
}

/* ===================== 首页"即将到来"卡片 ===================== */
.upcoming-card {
  padding: 14px 18px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg);
}
.upcoming-card[hidden] { display: none; }
.upcoming-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.upcoming-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-soft); }
.upcoming-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upcoming-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.35);
  border-left: 4px solid var(--accent);
  cursor: pointer;
  transition: 0.2s;
}
[data-theme="dark"] .upcoming-item { background: rgba(255,255,255,0.05); }
.upcoming-item:hover { transform: translateX(2px); background: rgba(255,255,255,0.5); }
[data-theme="dark"] .upcoming-item:hover { background: rgba(255,255,255,0.1); }
.upcoming-item .u-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.upcoming-item .u-count {
  font-size: 12px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.upcoming-item.overdue { border-left-color: #e04e75; opacity: 0.85; }
.upcoming-item.overdue .u-count { color: #e04e75; }
.upcoming-item.soon .u-count { color: var(--accent); }
.upcoming-item.done { opacity: 0.45; text-decoration: line-through; }
.upcoming-empty { color: var(--text-faint); font-size: 13px; text-align: center; padding: 6px 0; }

/* ===================== 日历面板 ===================== */
.calendar-panel {
  --cal-cell-min-height: 74px;
  position: fixed;
  inset: 0;
  z-index: 700;
  padding: 24px;
  background: rgba(255, 241, 246, 0.7);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  animation: fade-in 0.3s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 防止内部滚到边界时把滚动事件穿透到主页 body */
  overscroll-behavior: contain;
}
.calendar-panel *,
.calendar-panel .cal-body,
.calendar-panel .cal-grid,
.calendar-panel .cal-day-list,
.calendar-panel .cal-list-view {
  overscroll-behavior: contain;
}
[data-theme="dark"] .calendar-panel { background: rgba(26, 15, 29, 0.78); }
.calendar-panel[hidden] { display: none; }

.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
  margin-bottom: 16px;
}
.cal-head-left, .cal-head-right { display: flex; align-items: center; gap: 10px; }
.cal-head-left h2 { margin: 0; font-size: 20px; font-weight: 600; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-title { font-size: 16px; font-weight: 500; min-width: 130px; text-align: center; color: var(--text); }
.cal-view-switch { display: flex; gap: 4px; padding: 2px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.cal-view-switch .chip { border: none; padding: 3px 12px; }
.cal-view-switch .chip.active { background: var(--accent); color: white; }
.cal-head-right > .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  white-space: nowrap;
}

.cal-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  min-height: 0;
}
@media (max-width: 900px) {
  .cal-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
    padding-right: 4px;
  }
  .cal-month-view {
    min-height: calc(6 * var(--cal-cell-min-height) + 5 * 6px + 50px);
  }
  .cal-day-panel { max-height: 40vh; }
}

/* 月视图 */
.cal-month-view {
  padding: 14px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.cal-month-view[hidden] { display: none; }
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 500;
}
.cal-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, minmax(var(--cal-cell-min-height), 1fr));
  gap: 6px;
  min-height: calc(6 * var(--cal-cell-min-height) + 5 * 6px);
}
.cal-cell {
  background: rgba(255,255,255,0.35);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: var(--cal-cell-min-height);
  overflow: hidden;
  position: relative;
}
[data-theme="dark"] .cal-cell { background: rgba(255,255,255,0.05); }
.cal-cell.out { opacity: 0.35; }
.cal-cell:hover { background: rgba(255,255,255,0.55); }
[data-theme="dark"] .cal-cell:hover { background: rgba(255,255,255,0.1); }
.cal-cell.today { background: var(--accent-soft); border-color: var(--accent); }
.cal-cell.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.3); }
.cal-cell .day-num { font-size: 13px; font-weight: 500; }
.cal-cell .day-num.sun { color: #e04e75; }
.cal-cell .day-num.sat { color: #3b7fc9; }
.cal-cell .day-tasks { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: hidden; }
.cal-cell .day-task {
  font-size: 10px;
  line-height: 14px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--task-color, var(--accent));
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-cell .day-task.done { opacity: 0.5; text-decoration: line-through; }
.cal-cell .more { font-size: 10px; color: var(--text-faint); }

/* 列表视图 */
.cal-list-view {
  padding: 18px;
  overflow-y: auto;
  min-height: 0;
  grid-column: 1 / -1;
}
.cal-list-view[hidden] { display: none; }
.cal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}
.cal-list-group {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
}
.cal-list-group h4 { margin: 0 0 10px; font-size: 14px; color: var(--text-soft); }

/* 右侧当日任务面板 */
.cal-day-panel {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.cal-day-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 10px;
}
.cal-day-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.cal-day-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal-day-list:empty::after {
  content: "没有任务，享受空闲的一天 🌸";
  display: block;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
  padding: 30px 0;
}
.cal-day-item {
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.4);
  border-left: 4px solid var(--task-color, var(--accent));
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-theme="dark"] .cal-day-item { background: rgba(255,255,255,0.05); }
.cal-day-item:hover { transform: translateX(2px); }
.cal-day-item.done { opacity: 0.45; }
.cal-day-item.done .task-title { text-decoration: line-through; }
.cal-day-item .task-title { font-size: 13px; font-weight: 500; }
.cal-day-item .task-meta { font-size: 11px; color: var(--text-soft); display: flex; gap: 8px; align-items: center; }
.cal-day-item .task-meta .countdown {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.cal-day-item .task-meta .countdown.overdue { color: #e04e75; }
.cal-day-item .task-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.cal-day-item .task-actions button {
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.5);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-soft);
}
[data-theme="dark"] .cal-day-item .task-actions button { background: rgba(255,255,255,0.08); }
.cal-day-item .task-actions button:hover { color: var(--accent); border-color: var(--accent); }
.cal-day-item .task-repeat {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
}

/* 任务编辑器 */
.task-dialog { max-width: 520px; }
.task-dialog form { gap: 0; }
.task-dialog .dialog-body {
  padding: 18px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overscroll-behavior: contain;
}
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.task-time-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.task-time-row input[type="time"] { flex: 1; min-width: 0; }
.task-allday {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
  white-space: nowrap;
  cursor: pointer;
}
.task-allday input { width: 14px; height: 14px; flex: 0 0 14px; accent-color: var(--accent); }

.task-color-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.task-color-row label {
  position: relative;
  cursor: pointer;
  display: inline-flex !important;
  flex-direction: row !important;
}
.task-color-row input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.task-color-row span {
  display: block; width: 32px; height: 32px; border-radius: 50%;
  box-shadow: 0 0 0 2px transparent, 0 2px 6px rgba(0,0,0,0.10);
  transition: 0.15s;
}
.task-color-row input:checked + span {
  box-shadow: 0 0 0 2px var(--text), 0 4px 10px rgba(0,0,0,0.15);
  transform: scale(1.10);
}

.repeat-box {
  border: 1px dashed rgba(var(--accent-rgb), 0.30);
  background: rgba(var(--accent-rgb), 0.04);
  border-radius: 12px;
  padding: 8px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
[data-theme="dark"] .repeat-box { background: rgba(255,255,255,0.03); }
.repeat-box legend {
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.05em;
  background: var(--glass-bg, rgba(255,255,255,0.85));
  border-radius: 999px;
}
.repeat-box .repeat-interval,
.repeat-box .repeat-until {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-soft);
}
.repeat-box .repeat-interval input[type="number"] {
  width: 70px;
  text-align: center;
  padding: 6px 8px;
}
.repeat-box .repeat-until input[type="date"] { flex: 1; min-width: 0; }
.weekdays-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.weekdays-picker label {
  padding: 4px 0;
  width: 36px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.10);
  cursor: pointer;
  font-size: 12px;
  background: rgba(255,255,255,0.55);
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.10s;
}
.weekdays-picker label:hover { background: rgba(var(--accent-rgb), 0.10); border-color: rgba(var(--accent-rgb), 0.30); }
[data-theme="dark"] .weekdays-picker label { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
.weekdays-picker label input { display: none; }
.weekdays-picker label:has(input:checked) {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.30);
}
/* 重复下拉前面"重复" label + select 横排，跟其它字段标签对齐 */
.repeat-box > label:first-of-type {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px;
}

/* 任务弹窗中的输入框样式微调，与其他 dialog 一致 */
.task-dialog .dialog-body input[type="text"],
.task-dialog .dialog-body input[type="date"],
.task-dialog .dialog-body input[type="time"],
.task-dialog .dialog-body input[type="number"],
.task-dialog .dialog-body select,
.task-dialog .dialog-body textarea {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.85);
  font-size: 13px;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}
[data-theme="dark"] .task-dialog .dialog-body input,
[data-theme="dark"] .task-dialog .dialog-body select,
[data-theme="dark"] .task-dialog .dialog-body textarea {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
.task-dialog .input-with-voice {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.task-dialog .input-with-voice input { flex: 1; min-width: 0; }
.task-dialog .input-with-voice .voice-btn {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.70);
  cursor: pointer;
  font-size: 15px;
}

@media (max-width: 640px) {
  .calendar-panel {
    --cal-cell-min-height: 54px;
    padding: 12px;
  }
  .cal-head { flex-wrap: wrap; padding: 10px 14px; }
  .cal-title { min-width: auto; }
  .cal-month-view { padding: 10px; }
  .cal-weekdays { gap: 4px; margin-bottom: 6px; }
  .cal-grid { gap: 4px; min-height: calc(6 * var(--cal-cell-min-height) + 5 * 4px); }
  .cal-cell { border-radius: 8px; padding: 4px 5px; gap: 2px; }
  .cal-cell .day-task { font-size: 9px; line-height: 12px; padding: 0 4px; }
  .row-2 { grid-template-columns: 1fr; }
}

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.25s ease;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.55); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-color: rgba(var(--accent-rgb), 0.35) transparent; scrollbar-width: thin; }

/* ===================== 减少动画（无障碍） ===================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #sakura-canvas { display: none !important; }
  .bg-video { display: none !important; }
}

/* ===================== 上传背景面板 ===================== */
.bg-upload-drop {
  position: relative;
  display: block;
  border: 1.5px dashed rgba(var(--accent-rgb), 0.4);
  border-radius: 14px;
  padding: 22px 18px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  min-height: 132px;
  text-align: center;
  overflow: hidden;
}
[data-theme="dark"] .bg-upload-drop { background: rgba(255, 255, 255, 0.04); }
.bg-upload-drop:hover,
.bg-upload-drop.dragover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  transform: translateY(-1px);
}

.bg-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
}
.bg-upload-icon { font-size: 30px; opacity: 0.75; }
.bg-upload-title { font-size: 14px; font-weight: 500; color: var(--text); letter-spacing: 0.3px; }
.bg-upload-hint { font-size: 11px; color: var(--text-faint); line-height: 1.6; }

.bg-upload-drop.has-file .bg-upload-placeholder { display: none; }
.bg-upload-current {
  display: none;
  align-items: center;
  gap: 12px;
}
.bg-upload-drop.has-file .bg-upload-current { display: flex; }
.bg-upload-current .thumb {
  width: 96px;
  height: 60px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  border: 1px solid var(--glass-border);
  overflow: hidden;
  position: relative;
}
.bg-upload-current .thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg-upload-current .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  min-width: 0;
}
.bg-upload-current .info .name {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bg-upload-current .info .meta {
  font-size: 11px;
  color: var(--text-faint);
}
.bg-upload-current .badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  margin-right: 4px;
}

/* ===================== 顶部并列双栏 ===================== */
.top-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.top-row > section { margin: 0 !important; }
.top-row:has(#starred-card[hidden]):has(#recent-card[hidden]):has(#weather-card[hidden]) { display: none; }
@media (max-width: 900px) {
  .top-row { grid-template-columns: 1fr; }
}

/* ===================== 天气卡 ===================== */
body.pre-auth #weather-card { display: none !important; }
.weather-card {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.weather-card[hidden] { display: none; }
[data-theme="dark"] .weather-card { background: rgba(20, 15, 25, 0.55); border-color: rgba(255, 255, 255, 0.08); }

.weather-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.weather-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-soft); letter-spacing: 0.3px; }
.weather-head-actions { display: flex; align-items: center; gap: 8px; }
.w-active-name {
  font-size: 12px;
  color: var(--text-soft);
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
}

/* 城市切换 tab 行 */
.weather-cities {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}
.weather-cities::-webkit-scrollbar { height: 4px; }
.w-city-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
  flex-shrink: 0;
  scroll-snap-align: start;
  transition: transform 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}
[data-theme="dark"] .w-city-tab { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); }
.w-city-tab:hover { background: rgba(255, 255, 255, 0.65); transform: translateY(-1px); }
[data-theme="dark"] .w-city-tab:hover { background: rgba(255, 255, 255, 0.12); }
.w-city-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.35);
}
.w-city-tab .t-temp { font-weight: 600; opacity: 0.9; }
.w-city-tab .t-emoji { font-size: 14px; line-height: 1; }
.w-city-tab.active .t-temp { opacity: 1; }
.w-city-tab.loading::after {
  content: "…";
  animation: ellipsis 1.2s infinite steps(3, end);
  font-size: 11px;
  opacity: 0.6;
}
@keyframes ellipsis {
  0% { content: "·"; }
  33% { content: "··"; }
  66% { content: "···"; }
}

.weather-main {
  display: flex;
  align-items: center;
  gap: 14px;
}
.w-icon { font-size: 42px; line-height: 1; }
.w-main-info { flex: 1; min-width: 0; }
.w-temp { font-size: 30px; font-weight: 300; line-height: 1; letter-spacing: 1px; }
.w-meta { font-size: 12.5px; opacity: 0.78; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.weather-daily {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  overflow-x: auto;
}
.weather-day {
  text-align: center;
  padding: 8px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.45);
  font-size: 12px;
}
[data-theme="dark"] .weather-day { background: rgba(255, 255, 255, 0.05); }
.weather-day .wd-date { opacity: 0.75; }
.weather-day .wd-emoji { font-size: 20px; line-height: 1.4; }
.weather-day .wd-temp { font-weight: 600; }

/* 日历单元格天气角标 */
.cal-cell-weather {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 12px;
  opacity: 0.8;
  pointer-events: none;
}

/* ===================== v1.19.4 节日 / 节假日 badge ===================== */
.cal-cell-fest {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 2px 0 0;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10.5px;
  line-height: 1.4;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid transparent;
  letter-spacing: 0.02em;
  align-self: flex-start;
}
.cal-cell-fest.kind-cn-holiday {
  background: linear-gradient(135deg, #ff6b8a, #ff8fab);
  color: #fff;
  border-color: rgba(255,107,138,0.50);
  box-shadow: 0 1px 3px rgba(255,107,138,0.30);
}
.cal-cell-fest.kind-cn-traditional {
  background: rgba(255,107,138,0.12);
  color: #d93a6a;
  border-color: rgba(255,107,138,0.30);
}
.cal-cell-fest.kind-cn {
  background: rgba(14,165,233,0.10);
  color: #0284c7;
  border-color: rgba(14,165,233,0.25);
}
.cal-cell-fest.kind-west {
  background: rgba(124,131,250,0.12);
  color: #6366f1;
  border-color: rgba(124,131,250,0.30);
}
[data-theme="dark"] .cal-cell-fest.kind-cn-traditional { background: rgba(255,107,138,0.18); color: #ffb3c6; }
[data-theme="dark"] .cal-cell-fest.kind-cn { background: rgba(14,165,233,0.18); color: #93cefb; }
[data-theme="dark"] .cal-cell-fest.kind-west { background: rgba(124,131,250,0.20); color: #c7caff; }

/* 法定节假日的 cell 整体上色：日期数字变粉、背景柔和高光 */
.cal-cell.has-holiday {
  background: rgba(255,107,138,0.06);
  border-color: rgba(255,107,138,0.20);
}
.cal-cell.has-holiday .day-num {
  color: #d93a6a;
  font-weight: 600;
}
[data-theme="dark"] .cal-cell.has-holiday {
  background: rgba(255,107,138,0.12);
  border-color: rgba(255,107,138,0.30);
}
[data-theme="dark"] .cal-cell.has-holiday .day-num { color: #ffb3c6; }

/* 右栏当天节日横条 */
.cal-day-fests {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(255,107,138,0.06), rgba(124,131,250,0.06));
  border: 1px dashed rgba(255,107,138,0.25);
  border-radius: 10px;
}
.cal-day-fest {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}
.cal-day-fest.kind-cn-holiday {
  background: linear-gradient(135deg, #ff6b8a, #ff8fab);
  color: #fff;
}
.cal-day-fest.kind-cn-traditional {
  background: rgba(255,107,138,0.15);
  color: #d93a6a;
  border-color: rgba(255,107,138,0.30);
}
.cal-day-fest.kind-cn {
  background: rgba(14,165,233,0.12);
  color: #0284c7;
  border-color: rgba(14,165,233,0.25);
}
.cal-day-fest.kind-west {
  background: rgba(124,131,250,0.14);
  color: #6366f1;
  border-color: rgba(124,131,250,0.28);
}
[data-theme="dark"] .cal-day-fests { background: linear-gradient(135deg, rgba(255,107,138,0.10), rgba(124,131,250,0.10)); }
[data-theme="dark"] .cal-day-fest.kind-cn-traditional { background: rgba(255,107,138,0.20); color: #ffb3c6; }
[data-theme="dark"] .cal-day-fest.kind-cn { background: rgba(14,165,233,0.22); color: #93cefb; }
[data-theme="dark"] .cal-day-fest.kind-west { background: rgba(124,131,250,0.24); color: #c7caff; }

/* 小屏窄 cell：节日 badge 字号更小，避免溢出 */
@media (max-width: 900px) {
  .cal-cell-fest { font-size: 9.5px; padding: 0 5px; }
}

/* ===================== 统计视图 ===================== */
.cal-stats-view {
  padding: 18px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cal-stats-view[hidden] { display: none; }
.cal-day-panel[hidden] { display: none; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.stat-tile {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
[data-theme="dark"] .stat-tile { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); }
.stat-label { font-size: 12px; opacity: 0.7; }
.stat-value { font-size: 28px; font-weight: 700; margin: 6px 0; color: var(--accent); }
.stat-sub { font-size: 12px; opacity: 0.7; }
.stats-chart-wrap { display: flex; flex-direction: column; gap: 8px; }
.stats-chart-title { font-size: 13px; opacity: 0.8; }
#stats-chart {
  width: 100%;
  height: 160px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
}
[data-theme="dark"] #stats-chart { background: rgba(255, 255, 255, 0.05); }
#stats-chart .bar-total { fill: rgba(255, 143, 171, 0.22); }
#stats-chart .bar-done { fill: var(--accent); }
#stats-chart text { fill: currentColor; opacity: 0.65; font-size: 9px; }

/* ===================== 语音按钮 ===================== */
.voice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  font-size: 18px;
  line-height: 1;
  border-radius: 8px;
  transition: background 0.2s;
  color: inherit;
}
.voice-btn:hover { background: rgba(255, 143, 171, 0.15); }
.voice-btn.recording { color: #ff3b3b; animation: mic-pulse 1s ease-in-out infinite; }
@keyframes mic-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.input-with-voice { position: relative; display: flex; align-items: center; gap: 4px; }
.input-with-voice input { flex: 1; }
.input-with-voice .voice-btn.inline { font-size: 16px; padding: 4px 6px; }

/* ===================== 音乐播放器 ===================== */
/* 浮动入口始终可用；层级高于登录层 (2000)，未登录时也可打开播放器 */
.music-fab {
  position: fixed;
  left: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #ffd6e6, #ff8fab);
  color: white;
  font-size: 24px;
  box-shadow: 0 10px 25px rgba(255, 143, 171, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 樱花主题 (默认/Sakura) 暗色适配 */
[data-theme="dark"] .music-fab {
  background: linear-gradient(135deg, #4a1a2e, #8c4a63);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

/* 星光主题 (Starlight) */
html[data-visual-theme="starlight"] .music-fab {
  background: linear-gradient(135deg, #a2c4ff, #4b6cb7);
  box-shadow: 0 10px 25px rgba(75, 108, 183, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}
[data-theme="dark"][data-visual-theme="starlight"] .music-fab {
  background: linear-gradient(135deg, #152238, #2c3e50);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

/* 梧桐叶主题 (Sycamore) */
html[data-visual-theme="sycamore"] .music-fab {
  background: linear-gradient(135deg, #f5ecd8, #d4a373);
  box-shadow: 0 10px 25px rgba(212, 163, 115, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}
[data-theme="dark"][data-visual-theme="sycamore"] .music-fab {
  background: linear-gradient(135deg, #2a2418, #4a3f2c);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

html[data-visual-theme="q-anime"] .music-fab {
  background: linear-gradient(135deg, #ffc4d6, #c4a8e8 55%, #a8c8ff);
  box-shadow: 0 10px 25px rgba(196, 168, 232, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.45) inset;
}
[data-theme="dark"][data-visual-theme="q-anime"] .music-fab {
  background: linear-gradient(135deg, #3b274f, #5e4a88 58%, #243a68);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

html[data-visual-theme="dark-minimal"] .music-fab {
  background: linear-gradient(135deg, #2a303a, #8da4c0);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

html[data-visual-theme="paper"] .music-fab {
  background: linear-gradient(135deg, #f5e8c7, #b07c4f);
  box-shadow: 0 10px 25px rgba(176, 124, 79, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.36) inset;
}
[data-theme="dark"][data-visual-theme="paper"] .music-fab {
  background: linear-gradient(135deg, #2c241a, #7a5634);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.music-fab:hover {
  transform: scale(1.1) rotate(8deg);
}
.music-fab:active { transform: scale(0.92); }

/* 激活状态统一使用主色渐变，以示区分 */
.music-fab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}
.music-fab-icon { position: relative; z-index: 2; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }

.music-fab-wave {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  display: none;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}
.music-fab.active .music-fab-wave { display: flex; }
.music-fab-wave i {
  display: block;
  width: 2px; height: 6px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  animation: mwave 0.9s ease-in-out infinite;
}
.music-fab-wave i:nth-child(1) { animation-delay: 0s; }
.music-fab-wave i:nth-child(2) { animation-delay: 0.15s; }
.music-fab-wave i:nth-child(3) { animation-delay: 0.3s; }
.music-fab-wave i:nth-child(4) { animation-delay: 0.45s; }
@keyframes mwave { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1.4); } }

.music-panel {
  position: fixed;
  top: 16px;
  bottom: 16px;
  left: 16px;
  width: 420px;
  max-width: calc(100vw - 32px);
  z-index: 2100;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0;
  animation: mslide 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.music-panel[hidden] { display: none; }
@keyframes mslide { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
.music-panel.drag-in {
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
}

.music-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--glass-border);
  gap: 10px;
}
.music-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.music-logo {
  font-size: 20px;
  flex-shrink: 0;
}
.music-head-title { min-width: 0; flex: 1; }
.music-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-head-right { display: flex; gap: 4px; }

.music-list-count {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 400;
  margin-left: 4px;
}

/* 舞台：歌词 + 频谱 */
.music-stage {
  position: relative;
  height: 240px;
  flex-shrink: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--glass-border);
  background:
    radial-gradient(400px 200px at 50% 100%, rgba(var(--accent-rgb), 0.18), transparent 70%),
    rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .music-stage { background:
  radial-gradient(400px 200px at 50% 100%, rgba(var(--accent-rgb), 0.22), transparent 70%),
  rgba(0, 0, 0, 0.2); }

.music-visualizer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70%;
  width: 100%;
  pointer-events: none;
  opacity: 0.7;
}

.music-lyrics {
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding: 40px 22px;
  scroll-behavior: smooth;
  text-align: center;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
.music-lyrics::-webkit-scrollbar { width: 0; }
.lyric-line {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-soft);
  padding: 2px 0;
  transition: color 0.3s, transform 0.3s, font-size 0.3s, opacity 0.3s;
  opacity: 0.6;
  letter-spacing: 0.3px;
}
.lyric-line.active {
  color: var(--accent);
  font-size: 16px;
  font-weight: 600;
  opacity: 1;
  transform: scale(1.04);
  text-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.35);
}
.lyric-empty {
  color: var(--text-faint);
  font-size: 13px;
  padding-top: 70px;
  font-style: italic;
}
.lyric-plain-line {
  opacity: 0.92;
}
.lyric-plain-hint {
  margin-top: 18px;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-faint);
  text-align: center;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

/* 控制区 */
.music-controls {
  padding: 12px 18px 14px;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.music-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.music-time {
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: center;
}
.music-progress {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(to right,
    var(--accent) 0%,
    var(--accent) calc(var(--val, 0) * 1%),
    rgba(255, 255, 255, 0.3) calc(var(--val, 0) * 1%),
    rgba(255, 255, 255, 0.3) 100%);
}
[data-theme="dark"] .music-progress { background: rgba(255, 255, 255, 0.1); }
.music-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.4);
  cursor: pointer;
  transition: transform 0.15s;
}
.music-progress::-webkit-slider-thumb:hover { transform: scale(1.25); }
.music-progress::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

.music-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.music-btn {
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.3);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
}
[data-theme="dark"] .music-btn { background: rgba(255, 255, 255, 0.06); }
.music-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  transform: translateY(-1px);
}
.music-btn.active { background: var(--accent-soft); color: var(--accent); }
.music-btn.primary {
  width: 48px; height: 48px;
  font-size: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border: none;
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.45);
}
.music-btn.primary:hover { transform: scale(1.08); }
.music-btn.primary:active { transform: scale(0.94); }

.music-volume-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 13px;
  color: var(--text-faint);
}
.music-volume {
  width: 80px;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.25);
  outline: none;
}
.music-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.music-volume::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

/* 播放列表 */
.music-playlist {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.music-pl-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 18px 4px;
}
.music-pl-head h4 { margin: 0; font-size: 13px; color: var(--text-soft); font-weight: 600; }
.music-list {
  margin: 0;
  padding: 4px 8px 14px;
  list-style: none;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.music-empty {
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
  padding: 36px 20px;
  line-height: 1.8;
  border: 1px dashed var(--glass-border);
  border-radius: 12px;
  margin: 10px;
}
.music-track {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.music-track:hover { background: rgba(255, 255, 255, 0.35); transform: translateX(2px); }
[data-theme="dark"] .music-track:hover { background: rgba(255, 255, 255, 0.08); }
.music-track.active { background: var(--accent-soft); }
.music-track.active .mt-name { color: var(--accent); font-weight: 600; }
.mt-num {
  width: 22px;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.mt-main { flex: 1; min-width: 0; }
.mt-name {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mt-sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mt-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.music-track:hover .mt-actions { opacity: 1; }
.mt-actions button {
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 6px;
}
.mt-actions button:hover { background: rgba(0, 0, 0, 0.06); color: var(--accent); }
[data-theme="dark"] .mt-actions button:hover { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 640px) {
  .music-panel { top: 8px; bottom: 8px; left: 8px; width: calc(100vw - 16px); }
  .music-fab { left: 14px; bottom: 14px; }
  .music-search-fab { left: 14px; bottom: 76px; }
  .music-stage { height: 220px; }
}

/* ===================== 城市搜索（天气） ===================== */
.city-search-wrap { position: relative; margin-top: 6px; }
.city-search-results {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 4px;
  z-index: 20;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.city-search-results[hidden] { display: none; }
.city-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.15s;
}
.city-search-item:hover,
.city-search-item.active { background: var(--accent-soft); color: var(--accent); }
.city-search-item .cs-name { font-weight: 500; }
.city-search-item .cs-sub { font-size: 11px; color: var(--text-faint); margin-left: auto; }
.city-search-item.empty { color: var(--text-faint); cursor: default; font-style: italic; }

.city-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0 4px;
  min-height: 28px;
}
.city-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
[data-theme="dark"] .city-chip { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); }
.city-chip:hover { background: rgba(255, 255, 255, 0.65); transform: translateY(-1px); }
[data-theme="dark"] .city-chip:hover { background: rgba(255, 255, 255, 0.12); }
.city-chip.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.35);
}
.city-chip .star { opacity: 0.7; font-size: 11px; }
.city-chip.active .star { opacity: 1; }
.city-chip .x {
  border: none;
  background: rgba(0, 0, 0, 0.1);
  color: inherit;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.city-chip .x:hover { background: rgba(0, 0, 0, 0.25); }
.city-chip.active .x { background: rgba(255, 255, 255, 0.25); }
.city-chip.active .x:hover { background: rgba(255, 255, 255, 0.45); }

/* ===================== 设置：天气 / 同步 分区 ===================== */
.settings-lead {
  margin: 0 0 14px;
  line-height: 1.55;
  font-size: 13px;
}
.settings-section-title {
  margin: 14px 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-section-title::before {
  content: "";
  display: block;
  width: 4px;
  height: 14px;
  background: var(--accent);
  border-radius: 2px;
}
.settings-section-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.45;
}
.settings-toggle-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.glass-dialog .row-tight {
  margin: 0;
  align-items: center;
}
.glass-dialog .row-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 0 0 10px;
}
.settings-dialog label.row-block {
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}
.settings-dialog label.row-block > input,
.settings-dialog label.row-block > select {
  width: 100%;
  box-sizing: border-box;
}
.glass-dialog .row-block:last-child { margin-bottom: 0; }
.settings-field-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}
.settings-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.settings-field-label input {
  margin-top: 4px;
  font-weight: 400;
}
.settings-select-wide {
  width: 100%;
  max-width: 100%;
}
.settings-inline-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .settings-inline-pair { grid-template-columns: 1fr; }
}
.settings-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}
.settings-btn-row--equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .settings-btn-row--equal { grid-template-columns: 1fr; }
}
.settings-file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  margin: 0;
  min-height: 40px;
  box-sizing: border-box;
}
.settings-sync-status {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  min-height: 1.2em;
}
.settings-sync-status.success { color: #3aa56f; }
[data-theme="dark"] .settings-sync-status.success { color: #5ecf8f; }
.settings-sync-status.error { color: #d0434a; }
[data-theme="dark"] .settings-sync-status.error { color: #ff7a7a; }

/* 旧 class 兼容 */
.settings-section .row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
#sync-status { font-size: 12px; }
#sync-status.success { color: #3aa56f; }
#sync-status.error { color: #d0434a; }

/* ===================== 卡片置顶星标 ===================== */
.card .pin {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  color: var(--accent);
  padding: 0;
}
.card:hover .pin, .card .pin.pinned { opacity: 1; }
.card .pin.pinned { color: #ffb600; text-shadow: 0 0 6px rgba(255, 182, 0, 0.5); }
.card .pin:hover { transform: scale(1.3); }
.card.pinned { box-shadow: 0 0 0 1.5px rgba(255, 182, 0, 0.35) inset; }

/* ===================== 最近使用 卡 ===================== */
body.pre-auth #starred-card,
body.pre-auth #recent-card { display: none !important; }
.recent-card {
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recent-card[hidden] { display: none; }
[data-theme="dark"] .recent-card { background: rgba(20, 15, 25, 0.5); border-color: rgba(255, 255, 255, 0.08); }
.recent-head { display: flex; align-items: center; justify-content: space-between; }
.recent-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-soft); letter-spacing: 0.3px; }
.recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}
.recent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  color: inherit;
  font-size: 13px;
  transition: transform 0.15s, background 0.15s;
}
.recent-item:hover { transform: translateY(-2px); background: rgba(255, 143, 171, 0.2); }
[data-theme="dark"] .recent-item { background: rgba(255, 255, 255, 0.05); }
/* 共用尺寸/形状 */
.recent-item img,
.recent-item .recent-fb {
  width: 22px; height: 22px;
  border-radius: 5px;
  flex-shrink: 0;
}
/* 真实图标：透明背景 + 等比收缩（大量网站的 favicon 是透明 logo，
   以前这里给了粉底会透出来变成"异常粉红" —— 修好分离 img 与 fallback） */
.recent-item img {
  object-fit: contain;
  background: rgba(255, 255, 255, 0.55);
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
[data-theme="dark"] .recent-item img {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
}
/* 没图标时才显示字母粉底占位 */
.recent-item .recent-fb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  font-weight: 600;
  font-size: 11px;
}
.recent-item .recent-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===================== 搜索联想下拉 ===================== */
.search-form { position: relative; }
.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  max-height: 340px;
  overflow-y: auto;
  border-radius: 12px;
  padding: 6px;
  z-index: 40;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.search-suggest[hidden] { display: none; }
.sugg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 14px;
}
.sugg-item:hover, .sugg-item.active { background: rgba(255, 143, 171, 0.22); }
.sugg-item .sugg-icon { flex-shrink: 0; width: 18px; text-align: center; opacity: 0.7; }
.sugg-item .sugg-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg-item .sugg-sub { font-size: 11px; opacity: 0.6; flex-shrink: 0; }
.sugg-group-title {
  font-size: 11px;
  opacity: 0.55;
  padding: 6px 10px 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===================== AI TTS 按钮 ===================== */
.ai-msg .tts-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 6px;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s;
  color: inherit;
}
.ai-msg:hover .tts-btn { opacity: 1; }
.ai-msg .tts-btn:hover { background: rgba(255, 143, 171, 0.2); }
.ai-msg .tts-btn.playing { color: var(--accent); opacity: 1; animation: mic-pulse 1.4s ease-in-out infinite; }

/* ===================== 任务天气提示 ===================== */
.task-weather-tip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(120, 170, 255, 0.2);
  color: #3a6fd0;
  margin-left: 6px;
}
[data-theme="dark"] .task-weather-tip { background: rgba(120, 170, 255, 0.15); color: #a7c8ff; }
.task-weather-tip.warn { background: rgba(255, 180, 80, 0.22); color: #c67d00; }
.task-weather-tip.hot { background: rgba(255, 90, 90, 0.22); color: #d04343; }
[data-theme="dark"] .task-weather-tip.hot { color: #ff9a9a; }

/* ===================== 通用进度覆盖层 ===================== */
.nav-progress {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 20px;
}
.nav-progress.show { opacity: 1; }
.nav-progress-card {
  width: min(460px, 100%);
  padding: 22px 24px 18px;
  border-radius: 18px;
  color: var(--text-color, #333);
}
.nav-progress-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.nav-progress-label {
  font-size: 13px;
  opacity: 0.78;
  margin-bottom: 12px;
  min-height: 1.2em;
  word-break: break-all;
}
.nav-progress-bar {
  position: relative;
  height: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  overflow: hidden;
}
[data-theme="dark"] .nav-progress-bar { background: rgba(255, 255, 255, 0.1); }
.nav-progress-bar-inner {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent, #ff8fab), #ffc6d9);
  border-radius: 999px;
  transition: width 0.2s ease;
}
.nav-progress-bar.success .nav-progress-bar-inner {
  background: linear-gradient(90deg, #66c28a, #9fe3b8);
}
.nav-progress-bar.error .nav-progress-bar-inner {
  background: linear-gradient(90deg, #e05454, #ff9c9c);
  width: 100% !important;
}
.nav-progress-bar.indeterminate .nav-progress-bar-inner {
  width: 40% !important;
  animation: nav-progress-slide 1.2s linear infinite;
}
@keyframes nav-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.nav-progress-log {
  margin-top: 12px;
  max-height: 120px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.55);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  padding: 8px 10px;
}
[data-theme="dark"] .nav-progress-log { color: rgba(255, 255, 255, 0.62); background: rgba(255, 255, 255, 0.06); }
.nav-progress-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.nav-progress-actions .btn-secondary { padding: 6px 14px; font-size: 13px; }

/* ===================== Hero 紧凑模式 ===================== */
html[data-hero-mode="compact"] .header-bar .greet {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
html[data-hero-mode="compact"] .header-bar .greet h1 {
  display: inline;
  font-size: 1.2em;
  margin: 0;
}
html[data-hero-mode="compact"] .header-bar .greet #sub-greet {
  display: none;
}
html[data-hero-mode="compact"] .header-bar .greet #hitokoto {
  font-size: .9em;
  color: var(--text-soft);
  margin: 0;
}
html[data-hero-mode="compact"] .header-bar .clock {
  text-align: right;
}
html[data-hero-mode="compact"] .header-bar .clock #clock-date {
  display: none;
}

html[data-hero-mode="hidden"] .header-bar .greet,
html[data-hero-mode="hidden"] .header-bar .clock {
  display: none;
}

/* ===================== 分组 tab 条 ===================== */
.group-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  margin: 8px 0 12px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 8px;
  z-index: 50;
  scrollbar-width: none;
}
.group-tabs[hidden] { display: none; }
.group-tabs::-webkit-scrollbar { display: none; }
.group-tab {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font-size: .9em;
  font-family: inherit;
  transition: all .15s;
}
.group-tab:hover { color: var(--text); border-color: var(--accent); }
.group-tab.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ===================== 移动端 ≤768px ===================== */
@media (max-width: 768px) {
  .header-bar { padding: 10px 12px; gap: 6px; }
  .header-bar .greet h1 { font-size: 1em; }

  .group-tabs { top: 4px; padding: 6px 8px; }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  [data-density="tight"] .cards {
    grid-template-columns: repeat(3, 1fr);
  }

  dialog.glass-dialog.settings-dialog {
    margin: 0 auto;
    width: 100vw;
    max-width: 100vw;
    height: 86vh;
    max-height: 86vh;
    bottom: 0;
    top: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  :root { --blur: 10px; }

  .recent-grid { gap: 6px; }
}

/* ====================================================================
 * v1.18.1 AI 面板视觉统一层
 * 这一段写在最末，覆盖前面零散的 .ai-* 规则。原则：
 *   - 统一节奏：4/8/12/16 spacing scale
 *   - 圆角节奏：button=10px, chip=999px, bubble=18px, panel=24px
 *   - 配色用 var(--accent) / --glass-* / --text-* 跟主题一起呼吸
 *   - 同一类元素（按钮、select、input）的高度全部对齐到 30px / 36px / 40px
 * ==================================================================== */

/* ---- 面板外壳 ---- */
.ai-panel {
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    0 28px 80px -32px rgba(15,23,42,0.35),
    0 8px 24px -12px rgba(15,23,42,0.18),
    inset 0 1px 0 rgba(255,255,255,0.85);
}
[data-theme="dark"] .ai-panel {
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    0 28px 80px -28px rgba(0,0,0,0.55),
    0 8px 24px -12px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
/* 给浏览器原生 resize 手柄一个可见的提示 */
.ai-panel::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.18) 50%, rgba(0,0,0,0.18) 60%, transparent 60%, transparent 70%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0.18) 80%, transparent 80%);
  opacity: 0.5;
  border-radius: 0 0 10px 0;
}
[data-theme="dark"] .ai-panel::after {
  background:
    linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.22) 60%, transparent 60%, transparent 70%, rgba(255,255,255,0.22) 70%, rgba(255,255,255,0.22) 80%, transparent 80%);
}

/* ---- 头部：把整片紧凑成两行，减少视觉噪音 ---- */
.ai-head {
  padding: 10px 12px;
  gap: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.20));
  backdrop-filter: blur(6px);
}
[data-theme="dark"] .ai-head {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-bottom-color: rgba(255,255,255,0.08);
}
.ai-head-left, .ai-head-right { gap: 6px; }
.ai-head .ai-logo { font-size: 18px; opacity: 0.85; }
#ai-persona-select { flex: 0 1 130px; min-width: 90px; max-width: 150px; }
#ai-model-select  { flex: 1 1 110px; min-width: 90px;  max-width: 200px; }
.ai-head select {
  height: 30px;
  padding: 0 26px 0 10px;
  font-size: 12px;
  border-radius: 8px;
  background-color: rgba(255,255,255,0.7);
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
[data-theme="dark"] .ai-head select { background-color: rgba(255,255,255,0.07); }

/* ---- 工具按钮：统一胶囊式，高度 28px，行高居中 ---- */
.ai-tool-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.06);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
}
.ai-tool-btn:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
}
[data-theme="dark"] .ai-tool-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .ai-tool-btn:hover { background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.45); }
.ai-tool-btn .ai-tool-ico { font-size: 12px; }
.ai-tool-btn .ai-tool-txt { font-size: 11px; line-height: 1; }

/* 模型可用性徽章稍微对齐到工具按钮 */
.ai-model-status {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
}

/* ---- 生图控件：2 列网格，整齐对齐 ---- */
.ai-image-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  padding: 10px 14px 12px;
  font-size: 12px;
  background: rgba(var(--accent-rgb), 0.05);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}
[data-theme="dark"] .ai-image-controls {
  background: rgba(var(--accent-rgb), 0.10);
  border-bottom-color: rgba(var(--accent-rgb), 0.25);
}
.ai-image-controls .ai-imgctl-field {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
}
.ai-image-controls .ai-imgctl-field > span:first-child {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.ai-image-controls select,
.ai-image-controls input[type="number"] {
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.08);
  color: var(--text);
  width: 100%;
  max-width: none;
}
[data-theme="dark"] .ai-image-controls select,
[data-theme="dark"] .ai-image-controls input[type="number"] {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}
.ai-image-controls .ai-imgctl-custom { grid-column: 1 / -1; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 6px; }
.ai-image-controls .ai-imgctl-custom .ai-imgctl-custom-row { display: inline-flex; align-items: center; gap: 6px; }
.ai-image-controls .ai-imgctl-custom .ai-imgctl-custom-row em {
  font-style: normal; color: var(--text-faint); font-size: 11px;
}
.ai-image-controls .ai-imgctl-custom input { width: 84px; }

/* ---- 消息容器节奏 ---- */
.ai-messages {
  padding: 14px 14px 8px;
}

/* ---- 气泡：圆角更柔，添加细边和轻微阴影 ---- */
.ai-msg .ai-avatar {
  width: 30px; height: 30px;
  font-size: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  box-shadow: 0 2px 6px rgba(15,23,42,0.10);
  flex: 0 0 auto;
}
.ai-msg.assistant .ai-avatar {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.06));
  color: var(--accent);
}
.ai-msg .ai-bubble {
  padding: 11px 14px;
  border-radius: 18px 18px 18px 6px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.05);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
  font-size: 13.5px;
  line-height: 1.65;
}
[data-theme="dark"] .ai-msg .ai-bubble {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
.ai-msg.user .ai-bubble {
  border-radius: 18px 18px 6px 18px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, #fff));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.22);
}
[data-theme="dark"] .ai-msg.user .ai-bubble {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
}

/* ---- 输入区：更整洁的胶囊 ---- */
.ai-foot {
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(0,0,0,0.05);
  background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.55));
}
[data-theme="dark"] .ai-foot {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06));
  border-top-color: rgba(255,255,255,0.08);
}
.ai-input-row {
  align-items: flex-end;
  gap: 6px;
}
.ai-attach-btn {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.7);
  border-color: rgba(0,0,0,0.06);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
[data-theme="dark"] .ai-attach-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}
#ai-input {
  border-radius: 14px;
  padding: 9px 14px;
  font-size: 13px;
  min-height: 36px;
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.08);
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.04);
}
[data-theme="dark"] #ai-input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}
#ai-send, #ai-stop {
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#ai-send {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, #fff));
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.30);
}
#ai-send:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.36); }
#ai-stop {
  background: rgba(244, 63, 94, 0.10);
  color: #be123c;
  border: 1px solid rgba(244, 63, 94, 0.30);
}
[data-theme="dark"] #ai-stop { background: rgba(244,63,94,0.18); color: #fda4af; }

/* ---- 空状态更宽敞 ---- */
.ai-empty {
  padding: 36px 24px;
  text-align: center;
}
.ai-empty-logo { font-size: 56px; }
.ai-empty p {
  margin: 12px auto 18px;
  font-size: 13.5px;
  color: var(--text-soft);
  max-width: 280px;
  line-height: 1.7;
}
.ai-suggestions { display: flex; flex-direction: column; gap: 8px; max-width: 280px; margin: 0 auto; }
.ai-suggestions button {
  width: 100%;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.7);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ai-suggestions button:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
  transform: translateY(-1px);
}
[data-theme="dark"] .ai-suggestions button {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}

/* ---- AI 设置弹窗：每个 section 内呼吸更舒服 ---- */
.ai-dialog .dialog-body { padding: 18px 22px 20px; }
.ai-dialog .dialog-body > details.sec { margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; }
.ai-dialog .dialog-body > details.sec > summary {
  font-weight: 600; font-size: 13.5px; padding: 6px 4px;
}
.ai-dialog .sec-body, .ai-dialog .sec-btn-row { padding-top: 8px; }
.ai-providers-list .ai-provider-item,
.ai-personas-list .ai-persona-item {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.6);
}
.ai-providers-list .ai-provider-item.active,
.ai-personas-list .ai-persona-item.active {
  border-color: rgba(var(--accent-rgb), 0.40);
  background: rgba(var(--accent-rgb), 0.06);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
[data-theme="dark"] .ai-providers-list .ai-provider-item,
[data-theme="dark"] .ai-personas-list .ai-persona-item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.ai-providers-list .ai-provider-item .actions,
.ai-personas-list .ai-persona-item .actions {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ai-providers-list .ai-provider-item .actions button,
.ai-personas-list .ai-persona-item .actions button {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 11.5px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ai-providers-list .ai-provider-item .actions button:hover,
.ai-personas-list .ai-persona-item .actions button:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
}
[data-theme="dark"] .ai-providers-list .ai-provider-item .actions button,
[data-theme="dark"] .ai-personas-list .ai-persona-item .actions button {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: var(--text);
}

/* ---- 供应商编辑表单里的"禁用反代"复选框：横排，复选框不要被父 label 的 column 布局拆出去 ---- */
.provider-proxy-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 10px;
  margin: 6px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
}
[data-theme="dark"] .provider-proxy-row {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
/* !important 是因为 .ai-subdialog .dialog-body > label > input { width: 100% } 比这条更具体，会把
   checkbox 撑成全宽，挤掉右边的说明文字。 */
.provider-proxy-row > input[type="checkbox"] {
  flex: 0 0 16px !important;
  margin-top: 2px;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
  accent-color: var(--accent);
}
.provider-proxy-row > span {
  flex: 1 1 auto;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.55;
}
.provider-proxy-row > span > .hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-soft);
}
.provider-proxy-row > span > .hint code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0,0,0,0.06);
  font-size: 10.5px;
}
[data-theme="dark"] .provider-proxy-row > span > .hint code { background: rgba(255,255,255,0.08); }

/* ---- 主页顶部工具栏：图标+中文胶囊，跟 AI 面板风格统一 ---- */
.topbar-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  backdrop-filter: blur(8px);
}
.topbar-btn:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.40);
  color: var(--accent);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15);
  transform: translateY(-1px);
}
.topbar-btn:active { transform: translateY(0); }
.topbar-btn .topbar-ico { font-size: 15px; line-height: 1; }
.topbar-btn .topbar-txt { font-size: 12px; line-height: 1; letter-spacing: 0.02em; }
.topbar-btn .icon-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 720px) {
  .topbar-btn .topbar-txt { display: none; }
  .topbar-btn { height: 36px; width: 36px; padding: 0; justify-content: center; }
  .topbar-btn .topbar-ico { font-size: 16px; }
}
[data-theme="dark"] .topbar-btn { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .topbar-btn:hover { background: rgba(var(--accent-rgb), 0.20); }

/* ---- 无分组时的引导卡片 ---- */
.groups-empty {
  padding: 48px 32px 44px;
  text-align: center;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: fade-in 0.35s ease;
}
.groups-empty .ge-icon {
  font-size: 56px;
  line-height: 1;
  filter: drop-shadow(0 6px 16px rgba(var(--accent-rgb), 0.30));
}
.groups-empty .ge-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.groups-empty .ge-sub {
  margin: 0;
  color: var(--text-soft);
  font-size: 13.5px;
  max-width: 480px;
  line-height: 1.7;
}
.groups-empty .ge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}
.groups-empty .ge-actions button {
  padding: 9px 16px;
  font-size: 13px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.65);
  color: var(--text);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.groups-empty .ge-actions .btn-primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, #fff));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.30);
}
.groups-empty .ge-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.36);
}
.groups-empty .ge-actions .btn-secondary:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
  transform: translateY(-1px);
}
[data-theme="dark"] .groups-empty .ge-actions button {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .groups-empty .ge-actions .btn-primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
}
.groups-empty .ge-tip {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--text-faint);
}
.groups-empty .ge-tip kbd {
  padding: 2px 6px;
  margin: 0 2px;
  font-size: 10.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
  border-bottom-width: 2px;
  border-radius: 4px;
}
[data-theme="dark"] .groups-empty .ge-tip kbd {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.14);
}

/* ---- 主页底部快捷键提示：纯文字 -> 胶囊式 kbd 组 ---- */
.footer {
  text-align: center;
}
.footer > span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(0,0,0,0.05);
  color: var(--text-soft);
  font-size: 12px;
  backdrop-filter: blur(6px);
}
[data-theme="dark"] .footer > span {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.footer kbd {
  padding: 2px 7px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.08);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text);
}
[data-theme="dark"] .footer kbd {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
}

/* ===================================================================
 * v1.18.4 数据管理面板 — 把"挤在 4 列表格里的 SQLite key/媒体文件"重新组织成卡片行
 * ===================================================================*/
.storage-inspector {
  padding: 6px 10px 10px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.40);
  border-radius: 14px;
}
[data-theme="dark"] .storage-inspector {
  background: rgba(0,0,0,0.20);
  border-color: rgba(255,255,255,0.08);
}
.storage-subh {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.storage-subh:first-child { margin-top: 4px; }
.storage-subh .hint {
  font-weight: 400;
  font-size: 11.5px;
  color: var(--text-soft);
}

/* 把 <table> 转成卡片网格行 */
.storage-table { display: block; width: 100%; border: 0; }
.storage-table thead { display: none; }
.storage-table tbody { display: flex; flex-direction: column; gap: 6px; }
.storage-table tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.05);
  background: rgba(255,255,255,0.55);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.storage-table tr:hover {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.20);
}
[data-theme="dark"] .storage-table tr {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .storage-table tr:hover { background: rgba(var(--accent-rgb), 0.14); }

.storage-table td {
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-size: 12.5px;
  line-height: 1.5;
  min-width: 0;
}
/* 第 1 列：键名 + 描述 + 技术 key */
.storage-table td:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.storage-table td:nth-child(1) strong {
  display: inline-block;
  font-size: 13px;
  color: var(--text);
  margin-right: 6px;
}
.storage-table td:nth-child(1) code {
  font-size: 10.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  color: var(--text-soft);
  margin-left: 4px;
  vertical-align: middle;
  word-break: break-all;
}
[data-theme="dark"] .storage-table td:nth-child(1) code { background: rgba(255,255,255,0.08); }
.storage-table td:nth-child(1) .hint {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-soft);
}
/* 第 2 列：体积，胶囊 */
.storage-table td:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--text-soft);
  background: rgba(0,0,0,0.05);
  padding: 2px 8px;
  border-radius: 999px;
  justify-self: end;
  white-space: nowrap;
}
[data-theme="dark"] .storage-table td:nth-child(2) { background: rgba(255,255,255,0.10); }
/* 第 3 列：摘要文本，跨第二行左半 */
.storage-table td:nth-child(3) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  font-size: 12px;
  color: var(--text-soft);
  word-break: break-word;
}
.storage-table td:nth-child(3):empty::after,
.storage-table td.storage-sum:empty::after { content: "—"; opacity: 0.3; }
/* 第 4 列：动作按钮组，跨第二行右半 */
.storage-table td:nth-child(4) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-self: end;
  min-width: 0 !important;  /* 覆盖原来的 min-width:140px */
}
.storage-table td:nth-child(4) .mini-btn,
.storage-table td:nth-child(4) a.mini-btn {
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
}

/* 媒体文件表（4 列：文件名 / 体积 / 时间 / 操作）— 对齐到同一卡片样式，但文件名独占第一行 */
.storage-table tr.is-media,
.storage-subh + .storage-table tr {
  /* 媒体表头那张 storage-table 没有 thead，这条 fallback 专门处理 */
}
/* 整个数据管理 section 的工具按钮行 */
#dialog-settings details.sec .row {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#dialog-settings details.sec .row > button {
  height: 32px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 把 storage-inspector 的滚动条调细一点 */
.storage-inspector { max-height: min(460px, 55vh); }
.storage-inspector::-webkit-scrollbar { width: 6px; }
.storage-inspector::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.25);
  border-radius: 999px;
}

/* ---- 提示：4K 渲染较慢 ---- */
.ai-image-controls::after {
  content: "";
}
.ai-image-controls[data-warn="4k"]::after {
  content: "⏱ 4K 渲染通常需要 3-5 分钟，期间请保持耐心";
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
  padding: 6px 10px;
  border-radius: 8px;
  text-align: center;
}

/* ===================================================================
 * v1.18.6 快捷键速查弹窗 + 离线提示横幅
 * ===================================================================*/
#footer-hotkey-hint {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
#footer-hotkey-hint:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.30);
  transform: translateY(-1px);
}
#footer-hotkey-hint:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.shortcuts-dialog {
  max-width: 600px;
}
.shortcuts-dialog form {
  width: min(560px, 92vw);
  max-height: 85vh;
}
.shortcuts-dialog .dialog-body {
  padding: 18px 22px 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.shortcut-section {
  border-radius: 12px;
  padding: 12px 14px 10px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
}
[data-theme="dark"] .shortcut-section {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.shortcut-section h4 {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.shortcut-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr;
  align-items: center;
  gap: 12px;
  padding: 5px 2px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.10);
  font-size: 13px;
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  color: var(--text);
  font-size: 12px;
}
.shortcut-desc {
  color: var(--text-soft);
  line-height: 1.5;
}
.shortcuts-dialog kbd {
  padding: 2px 7px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.10);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text);
}
[data-theme="dark"] .shortcuts-dialog kbd {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}
.shortcut-foot-tip {
  margin: 4px 4px 4px;
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.6;
}
.shortcut-foot-tip kbd {
  padding: 1px 5px;
  font-size: 10.5px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 3px;
  margin: 0 1px;
}

/* ---- 离线提示横幅（顶部 fixed） ---- */
#offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  padding: 9px 16px;
  text-align: center;
  font-size: 12.5px;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  box-shadow: 0 4px 14px rgba(239,68,68,0.30);
  transform: translateY(-100%);
  transition: transform 0.30s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#offline-banner.is-visible { transform: translateY(0); }
#offline-banner .ob-icon { font-size: 14px; }
#offline-banner .ob-msg { letter-spacing: 0.02em; }
#offline-banner .ob-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.40);
  color: #fff;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease;
}
#offline-banner .ob-close:hover { background: rgba(255,255,255,0.20); }
@media (max-width: 540px) {
  #offline-banner { font-size: 11.5px; padding: 7px 10px; }
  #offline-banner .ob-close { display: none; }
}

/* ===================================================================
 * v1.18.7 页面显示优化补丁
 *  · AI 顶栏按钮按面板自身宽度自动收起文字（容器查询）
 *  · 离线横幅可见时给主页腾出空间，避免遮挡顶栏
 *  · 快捷键弹窗：标题与底部按钮区做 sticky，长内容滚动更顺畅
 *  · 生图卡片在窄面板下避免横向溢出
 *  · 通用：dialog footer 增加上分隔线 + 更稳定的按钮间距
 * ===================================================================*/

/* AI 面板按钮：用容器查询代替之前固定 480px 视口断点。
   panel 默认 420px，所以默认就走"窄"分支：仅图标 + 紧凑边距。
   用户拉宽到 ≥ 560px 时再展开成图标 + 文字。 */
@container aipanel (max-width: 559px) {
  .ai-head-right .ai-tool-txt { display: none; }
  .ai-head-right .ai-tool-btn {
    padding: 0 8px;
    min-width: 30px;
    justify-content: center;
  }
  .ai-head-right .ai-tool-ico { font-size: 13px; }
  /* 模型下拉同样收紧 */
  .ai-head-right select#ai-model-select { max-width: 130px; }
}
/* 容器查询不支持的兜底：保持原有视口断点行为 */
@supports not (container-type: inline-size) {
  @media (max-width: 720px) {
    .ai-head-right .ai-tool-txt { display: none; }
    .ai-head-right .ai-tool-btn { padding: 0 8px; min-width: 30px; justify-content: center; }
  }
}

/* 离线横幅出现时：让主内容腾出 38px，避免顶栏按钮被压在横幅下面 */
body.has-offline-banner #app-root,
body.has-offline-banner main.app {
  padding-top: 42px;
  transition: padding-top 0.30s ease;
}
body.has-offline-banner #ai-panel { top: 56px; }

/* 快捷键弹窗：滚动时标题/底部按钮区粘住，体验更稳 */
.shortcuts-dialog form {
  display: flex;
  flex-direction: column;
}
.shortcuts-dialog .dialog-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--glass-bg, rgba(255,255,255,0.85));
  backdrop-filter: blur(8px);
}
.shortcuts-dialog .dialog-actions {
  position: sticky;
  bottom: 0;
  background: var(--glass-bg, rgba(255,255,255,0.85));
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 12px 22px;
  margin-top: 4px;
}
[data-theme="dark"] .shortcuts-dialog .dialog-header,
[data-theme="dark"] .shortcuts-dialog .dialog-actions {
  background: rgba(28,28,32,0.85);
  border-color: rgba(255,255,255,0.08);
}
/* 让两栏在极窄屏自然换行 */
@media (max-width: 480px) {
  .shortcut-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .shortcut-row .shortcut-keys { order: 2; }
  .shortcut-row .shortcut-desc { order: 1; font-size: 12.5px; }
}

/* 生图卡片：图片网格在窄面板下用更小的最小尺寸，避免被裁 */
@container aipanel (max-width: 480px) {
  .ai-img-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 6px;
  }
  .ai-img-card-wrap .ai-img-pill { font-size: 10.5px; padding: 1px 6px; }
}

/* 通用 dialog-actions 加柔和分隔线（之前有几个弹窗按钮直接贴在内容上） */
.glass-dialog .dialog-actions {
  border-top: 1px solid rgba(0,0,0,0.05);
  padding-top: 12px;
}
[data-theme="dark"] .glass-dialog .dialog-actions {
  border-top-color: rgba(255,255,255,0.08);
}

/* 底部 footer hotkey hint 在悬浮时阴影更明显，反馈感更强 */
#footer-hotkey-hint:hover {
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.18);
}

/* 主页 topbar 按钮：聚焦/激活态 outline 与按钮主题色一致 */
.topbar-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ai-tool-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===================================================================
 * v1.20.0 ✅ 提醒事项（Mac Reminders 风格）
 * 双栏：sidebar + main，可选 detail 滑出
 * ===================================================================*/
.reminders-dialog { max-width: 1100px; }
.reminders-dialog form {
  width: min(1080px, 96vw);
  max-height: 92vh;
  padding: 0 !important;
  background: var(--glass-bg, rgba(255,255,255,0.92));
}
.reminders-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: min(720px, 92vh);
  min-height: 540px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
@media (max-width: 720px) {
  .reminders-shell { grid-template-columns: 1fr; height: 92vh; }
  .rem-sidebar { display: none; }
}

/* ---- Sidebar ---- */
.rem-sidebar {
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.025);
  border-right: 1px solid rgba(0,0,0,0.06);
  padding: 12px 10px 10px;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
[data-theme="dark"] .rem-sidebar {
  background: rgba(255,255,255,0.025);
  border-right-color: rgba(255,255,255,0.06);
}
.rem-sb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.rem-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.rem-close {
  background: rgba(0,0,0,0.05) !important;
  border-radius: 50% !important;
  width: 24px; height: 24px !important;
  font-size: 14px !important;
  line-height: 24px;
}
.rem-search {
  position: relative;
  display: flex;
  align-items: center;
}
.rem-search-icon { position: absolute; left: 8px; font-size: 12px; opacity: 0.55; pointer-events: none; }
#rem-search {
  width: 100%;
  padding: 7px 10px 7px 28px;
  border-radius: 9px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.85);
  font-size: 13px;
  color: var(--text);
  box-sizing: border-box;
}
[data-theme="dark"] #rem-search { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); }
#rem-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* 智能列表 2x3 网格 */
.rem-smart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.rem-smart-tile {
  padding: 8px 10px 7px;
  border-radius: 11px;
  border: 1px solid rgba(0,0,0,0.05);
  background: rgba(255,255,255,0.70);
  cursor: pointer;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  transition: background 0.15s, border-color 0.15s;
}
.rem-smart-tile:hover { background: rgba(var(--accent-rgb), 0.08); }
.rem-smart-tile.is-active {
  background: color-mix(in srgb, var(--tile-color, var(--accent)) 14%, transparent);
  border-color: color-mix(in srgb, var(--tile-color, var(--accent)) 35%, transparent);
}
.rem-smart-icon {
  grid-row: 1 / 3;
  font-size: 24px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tile-color, #999) 14%, transparent);
  color: var(--tile-color, #555);
}
.rem-smart-count { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1; }
.rem-smart-name { font-size: 11.5px; color: var(--text-soft); line-height: 1; }
[data-theme="dark"] .rem-smart-tile { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }

/* 用户列表 */
.rem-sb-section { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; }
.rem-sb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rem-mini-btn {
  width: 22px; height: 22px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.rem-mini-btn:hover { background: rgba(var(--accent-rgb), 0.10); color: var(--accent); }
.rem-list-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rem-list-row {
  width: 100%;
  display: grid;
  grid-template-columns: 10px auto 1fr auto;
  align-items: center;
  column-gap: 8px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  transition: background 0.12s;
}
.rem-list-row:hover { background: rgba(var(--accent-rgb), 0.08); }
.rem-list-row.is-active { background: color-mix(in srgb, var(--row-color, var(--accent)) 16%, transparent); }
.rem-list-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--row-color, var(--accent)); }
.rem-list-emoji { font-size: 14px; }
.rem-list-name {
  font-size: 13.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rem-list-ring {
  flex: 0 0 14px;
  color: var(--row-color, var(--accent));
}
.rem-list-count {
  font-size: 11px;
  color: var(--text-faint);
  padding: 0 6px;
  height: 18px;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
  display: inline-flex; align-items: center;
}
[data-theme="dark"] .rem-list-count { background: rgba(255,255,255,0.06); }

/* 列表行多一列：dot / emoji / name / ring / count */
.rem-list-row { grid-template-columns: 10px auto 1fr auto auto; }

/* sidebar 多按钮 actions */
.rem-sb-actions { display: inline-flex; gap: 2px; }

/* 标签区 */
.rem-tag-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rem-tag-row {
  width: 100%;
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  column-gap: 6px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text);
  text-align: left;
}
.rem-tag-row:hover { background: rgba(var(--accent-rgb), 0.08); }
.rem-tag-row.is-active { background: rgba(124,131,250,0.16); }
.rem-tag-hash { color: #7c83fa; font-weight: 600; }
.rem-tag-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 模板选择弹窗 */
.rem-tpl-dialog { max-width: 580px; }
.rem-tpl-dialog form { width: min(560px, 92vw); }
.rem-tpl-tip { margin: 0 0 8px; font-size: 12px; color: var(--text-soft); line-height: 1.6; }
.rem-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.rem-tpl-card {
  padding: 14px 12px;
  border-radius: 12px;
  border: 1.5px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.75);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.rem-tpl-card:hover {
  transform: translateY(-2px);
  border-color: var(--tpl-color, var(--accent));
  background: color-mix(in srgb, var(--tpl-color, var(--accent)) 10%, transparent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--tpl-color, var(--accent)) 25%, transparent);
}
.rem-tpl-emoji { font-size: 32px; line-height: 1; }
.rem-tpl-name { font-size: 13px; font-weight: 600; color: var(--text); }
.rem-tpl-cnt { font-size: 11px; color: var(--text-soft); }
[data-theme="dark"] .rem-tpl-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }

/* AI 生成弹窗 */
.rem-ai-dialog { max-width: 560px; }
.rem-ai-dialog form { width: min(540px, 92vw); }
.rem-ai-tip { margin: 0; font-size: 12.5px; color: var(--text-soft); line-height: 1.6; }
.rem-ai-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px;
  margin-top: 8px;
}
.rem-ai-field > span { font-size: 12px; color: var(--text-soft); }
.rem-ai-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.88);
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
  box-sizing: border-box;
}
.rem-ai-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
[data-theme="dark"] .rem-ai-field textarea {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}
.rem-ai-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.rem-ai-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  border: 1px solid rgba(var(--accent-rgb), 0.20);
  transition: background 0.15s, transform 0.10s;
}
.rem-ai-chip:hover {
  background: rgba(var(--accent-rgb), 0.18);
  transform: translateY(-1px);
}
.rem-ai-status {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(var(--accent-rgb), 0.06);
  font-size: 12.5px;
  color: var(--text-soft);
}

/* ---- Main ---- */
.rem-main {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 12px;
  gap: 10px;
  overflow: hidden;
  min-width: 0;
}
.rem-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 2px;
}
.rem-main-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.rem-main-emoji {
  font-size: 22px;
  filter: saturate(1.2);
}
.rem-main-actions { display: flex; gap: 6px; }

.rem-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.025);
  border: 1px solid rgba(0,0,0,0.05);
}
[data-theme="dark"] .rem-add-row { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.rem-add-plus {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--text-soft);
  flex: 0 0 22px;
}
[data-theme="dark"] .rem-add-plus { border-color: rgba(255,255,255,0.20); }
#rem-add-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
  outline: none;
}
#rem-add-input::placeholder { color: var(--text-faint); }
#rem-add-input:disabled { color: var(--text-faint); }

/* 项目列表 */
.rem-items {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rem-item {
  display: grid;
  grid-template-columns: 26px 1fr 28px;
  align-items: start;
  column-gap: 10px;
  padding: 9px 4px 9px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background 0.12s;
}
.rem-item:hover { background: rgba(var(--accent-rgb), 0.04); }
.rem-item:hover .rem-info { opacity: 1; }
[data-theme="dark"] .rem-item { border-bottom-color: rgba(255,255,255,0.06); }
.rem-item.is-done .rem-item-text { color: var(--text-faint); text-decoration: line-through; }
.rem-item.is-overdue .rem-due { color: #ff453a; }
.rem-item.is-flagged .rem-item-row1::after {
  content: "";
  width: 4px; height: 4px;
}

/* 圆形 radio（priority 色） */
.rem-radio {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.30);
  background: transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
  flex: 0 0 20px;
  margin-top: 2px;
  transition: background 0.15s, border-color 0.15s;
}
.rem-radio[data-priority="1"] { border-color: #0a84ff; }
.rem-radio[data-priority="2"] { border-color: #ff9f0a; }
.rem-radio[data-priority="3"] { border-color: #ff453a; }
.rem-radio:hover { border-width: 2px; }
.rem-item.is-done .rem-radio,
.rem-sub-item.is-done .rem-radio {
  background: var(--accent);
  border-color: var(--accent);
}
.rem-item.is-done .rem-radio::after,
.rem-sub-item.is-done .rem-radio::after {
  content: "";
  position: absolute;
  left: 5px; top: 2px;
  width: 6px; height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.rem-item-main { min-width: 0; }
.rem-item-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rem-item-text {
  font-size: 14px;
  color: var(--text);
  outline: none;
  word-break: break-word;
}
.rem-item-text[contenteditable="true"] {
  background: rgba(var(--accent-rgb), 0.10);
  border-radius: 4px;
  padding: 0 4px;
}
.rem-flag { font-size: 12px; }
.rem-from-list { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,0.04); }
[data-theme="dark"] .rem-from-list { background: rgba(255,255,255,0.06); }
.rem-item-notes {
  font-size: 12px;
  color: var(--text-soft);
  white-space: pre-line;
  margin-top: 2px;
}
.rem-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-soft);
}
.rem-due {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.04);
}
.rem-due.is-overdue {
  background: rgba(255,69,58,0.12);
  color: #ff453a;
  font-weight: 500;
}
.rem-url { color: #0a84ff; text-decoration: none; }
.rem-url:hover { text-decoration: underline; }
.rem-cal-tag { padding: 1px 7px; border-radius: 999px; background: rgba(58,166,110,0.12); color: #2c8c4f; }
.rem-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rem-tag {
  font-size: 10.5px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--accent);
}

.rem-info {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.04);
  cursor: pointer;
  color: var(--text-soft);
  font-size: 15px;
  align-self: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.10s;
}
.rem-info:hover {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.35);
  transform: scale(1.05);
}
[data-theme="dark"] .rem-info {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.10);
}

/* 子任务 */
.rem-sub { list-style: none; padding: 4px 0 0 4px; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.rem-sub-item { display: grid; grid-template-columns: 20px 1fr 24px; align-items: center; gap: 8px; font-size: 13px; }
.rem-sub-item.is-done .rem-sub-text { text-decoration: line-through; color: var(--text-faint); }
.rem-x {
  width: 22px; height: 22px; border-radius: 50%; border: none; background: transparent; cursor: pointer; color: var(--text-soft);
}
.rem-x:hover { background: rgba(220,38,38,0.12); color: #dc2626; }

.rem-empty {
  margin: 30px auto;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

/* ---- 详情独立 dialog（v1.20.1） ----
 *  避开了原嵌入式 sidebar 太窄 + 时间选择器被遮的问题；
 *  字段按"基础信息 / 时间 / 优先级 / 标记 / 链接标签 / 所属列表"分卡片组。 */
.rem-detail-dialog { max-width: 560px; }
.rem-detail-dialog form { width: min(540px, 92vw); max-height: 90vh; }
.rem-detail-dialog .dialog-body {
  padding: 18px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overscroll-behavior: contain;
}

.rem-d-card {
  border-radius: 14px;
  background: rgba(0,0,0,0.025);
  border: 1px solid rgba(0,0,0,0.05);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-theme="dark"] .rem-d-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.rem-d-card-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rem-d-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px;
  font-size: 12px;
  color: var(--text-soft);
}
.rem-d-field > span {
  font-weight: 500;
  letter-spacing: 0.02em;
}
.rem-d-field input,
.rem-d-field textarea,
.rem-d-field select {
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.88);
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rem-d-field input:focus,
.rem-d-field textarea:focus,
.rem-d-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.rem-d-field textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
[data-theme="dark"] .rem-d-field input,
[data-theme="dark"] .rem-d-field textarea,
[data-theme="dark"] .rem-d-field select {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}

.rem-d-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .rem-d-row { grid-template-columns: 1fr; } }

.rem-d-priority { display: flex; gap: 8px; }
.rem-p {
  flex: 1;
  padding: 10px 8px;
  border-radius: 9px;
  border: 1.5px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.75);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-soft);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.10s;
}
.rem-p:hover { transform: translateY(-1px); border-color: rgba(0,0,0,0.20); }
.rem-p.p-1.is-on { background: #0a84ff; color: #fff; border-color: #0a84ff; box-shadow: 0 3px 10px rgba(10,132,255,0.30); }
.rem-p.p-2.is-on { background: #ff9f0a; color: #fff; border-color: #ff9f0a; box-shadow: 0 3px 10px rgba(255,159,10,0.30); }
.rem-p.p-3.is-on { background: #ff453a; color: #fff; border-color: #ff453a; box-shadow: 0 3px 10px rgba(255,69,58,0.30); }
.rem-p.p-0.is-on { background: rgba(0,0,0,0.08); color: var(--text); border-color: rgba(0,0,0,0.20); }
[data-theme="dark"] .rem-p { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .rem-p.p-0.is-on { background: rgba(255,255,255,0.15); }

.rem-d-toggles { display: flex; flex-direction: column; gap: 8px; }
.rem-d-toggle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.05);
  transition: background 0.15s, border-color 0.15s;
}
.rem-d-toggle:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.20);
}
[data-theme="dark"] .rem-d-toggle { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
.rem-d-toggle input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--accent); cursor: pointer; }

.rem-d-danger { color: #dc2626 !important; border-color: rgba(220,38,38,0.30) !important; }
.rem-d-danger:hover { background: rgba(220,38,38,0.10) !important; border-color: rgba(220,38,38,0.50) !important; }

/* 列表编辑子弹窗：颜色选择 */
.rem-list-colors { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.rem-color-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.rem-color-swatch.is-on { border-color: var(--text); transform: scale(1.10); }

/* 旧 todo 样式残留 — 兼容旧 todo-badge */
.todo-dialog,
.todo-list,
.todo-item,
.todo-add-bar,
.todo-tip,
.todo-empty,
.todo-count { display: none !important; }
.todo-dialog .dialog-body {
  padding: 18px 22px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overscroll-behavior: contain;
}
.todo-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint);
  margin-left: 6px;
}
.todo-add-bar {
  display: grid;
  grid-template-columns: 1fr 130px auto auto;
  gap: 8px;
  align-items: center;
}
.todo-add-bar input[type="text"],
.todo-add-bar input[type="date"] {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.85);
  font-size: 13px;
  color: var(--text);
}
.todo-sync-label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-soft);
  user-select: none;
  cursor: pointer;
  padding: 0 6px;
}
.todo-sync-label input { width: 14px; height: 14px; flex: 0 0 14px; accent-color: var(--accent); }
[data-theme="dark"] .todo-add-bar input[type="text"],
[data-theme="dark"] .todo-add-bar input[type="date"] {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.todo-item {
  display: grid;
  grid-template-columns: 24px 1fr auto auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.05);
  cursor: grab;
  transition: background 0.15s, border-color 0.15s, transform 0.10s;
}
.todo-item:hover { background: rgba(var(--accent-rgb), 0.06); border-color: rgba(var(--accent-rgb), 0.20); }
.todo-item.is-dragging { opacity: 0.5; transform: scale(0.98); }
[data-theme="dark"] .todo-item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.todo-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  width: 20px; height: 20px;
}
.todo-check input {
  position: absolute; inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.todo-check-box {
  width: 18px; height: 18px;
  border-radius: 6px;
  border: 1.5px solid rgba(0,0,0,0.20);
  background: rgba(255,255,255,0.80);
  transition: background 0.15s, border-color 0.15s, transform 0.10s;
  display: flex; align-items: center; justify-content: center;
}
.todo-check input:checked + .todo-check-box {
  background: var(--accent);
  border-color: var(--accent);
}
.todo-check input:checked + .todo-check-box::after {
  content: "✓";
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.todo-text {
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
  line-height: 1.5;
  cursor: text;
  outline: none;
}
.todo-item.is-done .todo-text {
  text-decoration: line-through;
  color: var(--text-faint);
}
.todo-due {
  font-size: 11px;
  color: var(--text-soft);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.04);
  white-space: nowrap;
}
[data-theme="dark"] .todo-due { background: rgba(255,255,255,0.06); }
.todo-item.is-overdue .todo-due {
  background: rgba(220,38,38,0.12);
  color: #dc2626;
}
.todo-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.todo-btn:hover { background: rgba(var(--accent-rgb), 0.10); border-color: rgba(var(--accent-rgb), 0.30); color: var(--accent); }
.todo-btn.is-on { background: rgba(var(--accent-rgb), 0.15); border-color: rgba(var(--accent-rgb), 0.40); color: var(--accent); }
.todo-del:hover { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.30); color: #dc2626; }
.todo-empty {
  margin: 24px 0;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}
.todo-tip {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.6;
}

@media (max-width: 540px) {
  .todo-add-bar { grid-template-columns: 1fr; }
  .todo-item { grid-template-columns: 24px 1fr auto auto auto auto; gap: 6px; padding: 6px 8px; }
  .todo-text { font-size: 13px; }
}

/* ===================================================================
 * v1.19.0 🍵 茶话会模式 — 多代理对话
 * ===================================================================*/
/* ---- 弹窗滚动穿透防护（v1.19.3） ----
   .glass-dialog 的 form 自身有 max-height + overflow:hidden；body 才滚。
   overscroll-behavior: contain 让 body 滚到顶/底时不把滚动事件传递给 document。 */
.glass-dialog .dialog-body {
  overscroll-behavior: contain;
}

/* ---- "添加网址" 弹窗的"更多设置"折叠区（v1.19.1） ---- */
.link-more {
  margin-top: 6px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.02);
  padding: 6px 12px 4px;
  transition: background 0.15s, border-color 0.15s;
}
[data-theme="dark"] .link-more {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
.link-more > summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.link-more > summary::-webkit-details-marker { display: none; }
.link-more > summary::after {
  content: "▾";
  font-size: 11px;
  margin-left: auto;
  color: var(--text-soft);
  transition: transform 0.18s ease;
}
.link-more[open] > summary::after { transform: rotate(180deg); }
.link-more > summary:hover {
  background: rgba(var(--accent-rgb), 0.06);
  border-radius: 8px;
}
.link-more > summary .hint-inline {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-faint);
}
.link-more[open] > summary {
  border-bottom: 1px dashed rgba(0,0,0,0.06);
  margin-bottom: 8px;
}
[data-theme="dark"] .link-more[open] > summary {
  border-bottom-color: rgba(255,255,255,0.08);
}
.link-more > label,
.link-more > details { margin-top: 8px; }
.link-more > label:first-of-type { margin-top: 4px; }

/* 茶话会按钮激活态 */
.ai-tool-btn#ai-council.is-active {
  background: linear-gradient(135deg, rgba(255,107,138,0.18), rgba(124,131,250,0.18));
  border-color: rgba(255,107,138,0.45);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(255,107,138,0.20) inset, 0 4px 10px rgba(255,107,138,0.18);
}
/* 茶话会启用时，单代理的模型/角色下拉变灰显示"被茶话会接管" */
.ai-head select.council-overridden {
  opacity: 0.55;
  cursor: not-allowed;
  background: repeating-linear-gradient(135deg, rgba(255,107,138,0.06), rgba(255,107,138,0.06) 6px, transparent 6px, transparent 12px);
}
.ai-head select.council-overridden:hover {
  border-color: rgba(255,107,138,0.30);
}

/* ---- 配置弹窗 ---- */
.council-dialog { max-width: 640px; }
.council-dialog form {
  width: min(620px, 92vw);
  max-height: 90vh;
}
.council-dialog .dialog-body {
  padding: 18px 22px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 父规则 .glass-dialog label 强制 flex-direction: column；这里要横排，提高一级特异性 */
.glass-dialog label.council-toggle,
.council-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  cursor: pointer;
  font-size: 13px;
}
.council-toggle span { flex: 1; }
.council-toggle input { flex: 0 0 16px; }
.council-toggle input { width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--accent); }
.council-toggle b { color: var(--accent); }

/* 模式选择卡片 */
.council-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.council-tab {
  padding: 10px 10px 12px;
  border-radius: 11px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.council-tab:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.25);
  transform: translateY(-1px);
}
.council-tab.is-active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.08));
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.20);
}
.council-tab .ico { font-size: 22px; line-height: 1; }
.council-tab .ttl { font-weight: 600; font-size: 13px; color: var(--text); }
.council-tab .sub { font-size: 11px; color: var(--text-soft); line-height: 1.4; }
[data-theme="dark"] .council-tab { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .council-tab:hover { background: rgba(var(--accent-rgb), 0.16); }

/* 模式提示 */
.council-mode-row {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.03);
  border: 1px dashed rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* hidden 属性兜底：自定义 display 会覆盖浏览器默认的 [hidden]{display:none}，必须显式还原 */
.council-mode-row[hidden],
.council-section[hidden],
.council-members-list[hidden],
#offline-banner[hidden] { display: none !important; }
[data-theme="dark"] .council-mode-row { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); }
.council-mode-row .council-tip { margin: 0; font-size: 11.5px; color: var(--text-soft); line-height: 1.5; }
.council-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-soft); }
.council-field input, .council-field select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.85);
  font-size: 13px;
  color: var(--text);
}
[data-theme="dark"] .council-field input,
[data-theme="dark"] .council-field select {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

/* 成员区 */
.council-section { display: flex; flex-direction: column; gap: 8px; }
.council-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}
.council-sec-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
}
.council-members-list { display: flex; flex-direction: column; gap: 8px; }

.council-member-row {
  display: grid;
  grid-template-columns: 44px 1fr 32px;
  gap: 10px;
  align-items: center;
  padding: 10px 10px 10px 6px;
  border-radius: 11px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  border-left: 4px solid var(--member-color, #ff6b8a);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.council-member-row:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
[data-theme="dark"] .council-member-row {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.council-member-color {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--member-color, #ff6b8a);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.council-member-color:hover { transform: scale(1.05); box-shadow: 0 4px 10px var(--member-color, rgba(0,0,0,0.20)); }

.council-member-fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.council-member-label {
  width: 100%;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
[data-theme="dark"] .council-member-label { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); }
.council-member-row2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.council-mini-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.council-mini-field span { font-size: 10.5px; color: var(--text-soft); padding-left: 2px; letter-spacing: 0.04em; }
.council-mini-field select {
  width: 100%;
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.85);
  font-size: 11.5px;
  color: var(--text);
  text-overflow: ellipsis;
}
[data-theme="dark"] .council-mini-field select { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }

.council-member-del {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.council-member-del:hover { background: rgba(220,38,38,0.10); color: #dc2626; border-color: rgba(220,38,38,0.30); }

/* ---- 茶话会消息气泡（多代理回答） ---- */
.ai-msg.assistant.is-council {
  /* 父消息容器与普通 assistant 一致，但 avatar/bubble 用成员色覆盖 */
}
.ai-msg.is-council .ai-avatar {
  background: var(--member-color, #ff6b8a);
  color: #fff;
  font-size: 16px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.50), 0 2px 6px var(--member-color, rgba(0,0,0,0.25));
}
[data-theme="dark"] .ai-msg.is-council .ai-avatar {
  box-shadow: 0 0 0 2px rgba(28,28,32,0.50), 0 2px 6px var(--member-color, rgba(0,0,0,0.40));
}
.ai-msg.is-council .ai-bubble {
  border-left: 3px solid var(--member-color, #ff6b8a);
  background: linear-gradient(180deg, color-mix(in srgb, var(--member-color, #ff6b8a) 8%, var(--bubble-bg, rgba(255,255,255,0.65))), var(--bubble-bg, rgba(255,255,255,0.55)));
  position: relative;
}
.ai-council-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--member-color, #ff6b8a);
  letter-spacing: 0.02em;
}
.ai-council-tag .acl-meta {
  font-weight: 400;
  opacity: 0.85;
  font-size: 10.5px;
}
.ai-council-round-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 4px 8px;
  font-size: 11px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ai-msg-divider { display: block !important; padding: 0 !important; }
.ai-msg-divider .ai-avatar { display: none; }
.ai-council-round-divider::before,
.ai-council-round-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.10), transparent);
}
[data-theme="dark"] .ai-council-round-divider::before,
[data-theme="dark"] .ai-council-round-divider::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
}

@media (max-width: 540px) {
  .council-mode-tabs { grid-template-columns: 1fr; }
  .council-member-row2 { grid-template-columns: 1fr; }
  .council-member-row { grid-template-columns: 40px 1fr 28px; }
}

/* =====================================================================
   AI 面板 · v2 视觉优化
   - 顶栏按钮分组 + 视觉分隔
   - 用户气泡更柔和
   - 生图参数行更紧凑、有层级
   - 生图卡片：横排图标按钮 + "改写"可折叠 + 大图优先
   - 输入框聚焦更明显，发送中视觉反馈
   ===================================================================== */

/* —— 顶栏分组：组内紧贴，组间留出小间距，关闭按钮单独划分 —— */
.ai-head-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .ai-head-group {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.ai-head-group .ai-tool-btn {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.ai-head-group .ai-tool-btn:hover {
  background: rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .ai-head-group .ai-tool-btn:hover {
  background: rgba(255, 255, 255, 0.10);
}
.ai-head-group .ai-tool-btn.is-active,
.ai-head-group .ai-tool-btn[aria-pressed="true"] {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
}
/* 关闭按钮：与组拉开距离，使用更克制的样式（默认无背景）*/
.ai-close-btn {
  margin-left: 4px;
  opacity: 0.7;
}
.ai-close-btn:hover { opacity: 1; color: #e04e75; }

/* 窄面板时折叠到只显示图标，组的间距同步收窄 */
@container aipanel (max-width: 460px) {
  .ai-head-group { padding: 1px; gap: 0; }
  .ai-head-right { gap: 4px; }
}

/* —— 用户消息气泡：降低对比，让生成结果成为视觉主角 —— */
.ai-msg.user .ai-bubble {
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.92),
    rgba(var(--accent-rgb), 0.78));
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.18);
}
[data-theme="dark"] .ai-msg.user .ai-bubble {
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.55),
    rgba(var(--accent-rgb), 0.42));
}

/* —— 生图参数行：更紧凑、视觉成组，警告色带 —— */
.ai-image-controls {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 8px 10px !important;
  margin: 8px 12px 0 !important;
  gap: 8px !important;
}
[data-theme="dark"] .ai-image-controls {
  background: rgba(255, 255, 255, 0.04);
}
.ai-image-controls label {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--text-faint);
}
.ai-image-controls label > span:first-child {
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.7;
}
.ai-image-controls select {
  padding: 4px 8px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

/* —— 生图结果卡片：图片更大，"改写"默认收起，操作改图标按钮 —— */
.ai-img-thumb {
  max-height: 480px;        /* 原 360 → 给图本身更多空间 */
  border-radius: 12px 12px 0 0;
}
.ai-img-grid.one .ai-img-thumb { max-height: 560px; }

/* "改写提示词" 折叠成 details，节省纵向空间 */
.ai-img-revised {
  font-size: 11px;
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.015);
}
[data-theme="dark"] .ai-img-revised {
  border-color: rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
}
.ai-img-revised > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 12px;
  color: var(--text-faint);
  font-style: normal;
  display: flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}
.ai-img-revised > summary::-webkit-details-marker { display: none; }
.ai-img-revised > summary::before {
  content: "▸";
  font-size: 10px;
  transition: transform 0.2s;
}
.ai-img-revised[open] > summary::before { transform: rotate(90deg); }
.ai-img-revised > summary:hover { color: var(--accent); }
.ai-img-revised .ai-img-revised-body {
  padding: 0 12px 8px 22px;
  color: var(--text-soft);
  line-height: 1.55;
  font-style: italic;
}

/* 操作行：单图模式横排成图标按钮 */
.ai-img-actions {
  padding: 6px 8px;
  gap: 4px;
  justify-content: flex-end;
}
.ai-img-act {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 8px;          /* 不再纯圆形，更克制 */
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-faint);
}
.ai-img-act:hover {
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.18);
}
[data-theme="dark"] .ai-img-act { background: transparent; color: #9ca3af; }
[data-theme="dark"] .ai-img-act:hover {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
}

/* —— 输入框：聚焦更明显，发送中给整张面板一个柔和提示 —— */
.ai-foot { padding: 8px 12px 12px; }
.ai-input-row {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.ai-input-row:focus-within {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.10);
}
[data-theme="dark"] .ai-input-row {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .ai-input-row:focus-within {
  background: rgba(255, 255, 255, 0.08);
}
/* 输入框自身去掉重复边框（容器已经接管）*/
.ai-input-row #ai-input {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.ai-input-row #ai-input:focus {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
/* 附件/语音按钮在新容器里去掉外框 */
.ai-input-row .ai-attach-btn {
  background: transparent;
  border-color: transparent;
}
.ai-input-row .ai-attach-btn:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: transparent;
  color: var(--accent);
}

/* 发送中：整张面板加一道顶部进度光带 */
.ai-panel.is-sending::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--accent),
    transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: ai-progress-slide 1.4s linear infinite;
  z-index: 10;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
@keyframes ai-progress-slide {
  from { background-position: -50% 0; }
  to   { background-position: 150% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-panel.is-sending::before { animation-duration: 3s; }
}

/* =====================================================================
   茶话会 v2 · 借鉴 grok2api multi-agent 思路
   - 进度卡：顶部紧凑横向胶囊，显示 N/T 完成、失败、换模型、平均耗时
   - 深度研究按钮：高亮 + 闪光
   - 并发上限输入：内嵌 council-section
   ===================================================================== */

/* 进度卡片本体（system 消息，按 .ai-msg-progress 渲染） */
.ai-msg-progress {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
}
.ai-msg-progress .ai-avatar { display: none; }
.ai-council-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 4px 4px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--glass-border);
  font-size: 12px;
  color: var(--text-soft);
  flex-wrap: wrap;
}
[data-theme="dark"] .ai-council-progress {
  background: rgba(255, 255, 255, 0.06);
}
.ai-council-progress.done {
  background: linear-gradient(90deg,
    rgba(var(--accent-rgb), 0.10),
    rgba(var(--accent-rgb), 0.04));
}
.ai-council-progress .acp-ico {
  font-size: 16px;
  line-height: 1;
}
.ai-council-progress .acp-bar {
  flex: 1 1 120px;
  min-width: 80px;
  max-width: 240px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
[data-theme="dark"] .ai-council-progress .acp-bar {
  background: rgba(255, 255, 255, 0.10);
}
.ai-council-progress .acp-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  border-radius: inherit;
  transition: width 0.3s ease;
}
.ai-council-progress.running .acp-bar-fill {
  background-image: linear-gradient(90deg,
    var(--accent) 0%,
    var(--accent) 50%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0.5) 100%);
  background-size: 24px 100%;
  animation: ai-council-progress-stripe 0.9s linear infinite;
}
@keyframes ai-council-progress-stripe {
  from { background-position: 0 0; }
  to   { background-position: 24px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-council-progress.running .acp-bar-fill { animation-duration: 2.4s; }
}
.ai-council-progress .acp-stat {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .ai-council-progress .acp-stat {
  background: rgba(255, 255, 255, 0.06);
}
.ai-council-progress .acp-stat.err {
  color: #be123c;
  background: rgba(244, 63, 94, 0.10);
}
.ai-council-progress .acp-stat.warn {
  color: #b45309;
  background: rgba(245, 158, 11, 0.10);
}
.ai-council-progress .acp-stat.muted {
  color: var(--text-faint);
  background: transparent;
}
.ai-council-progress .acp-stat b {
  font-weight: 600;
  color: var(--text);
}

/* 茶话会 section 顶部一行：标题 + 两个按钮 */
.council-sec-actions {
  display: inline-flex;
  gap: 6px;
}
#council-deep-research {
  position: relative;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.22),
    rgba(var(--accent-rgb), 0.10));
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
  font-weight: 500;
}
#council-deep-research:hover {
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.32),
    rgba(var(--accent-rgb), 0.18));
  border-color: var(--accent);
}
#council-deep-research::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: ai-shine 3.6s ease-in-out infinite;
  animation-delay: 1.2s;
}
@keyframes ai-shine {
  0%, 70%, 100% { left: -120%; }
  85%           { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  #council-deep-research::after { animation: none; }
}

/* 并发上限字段：跟其它 council-field 风格一致，但独立成一行 */
.council-concurrency {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  margin: 6px 0 8px;
  font-size: 12px;
}
[data-theme="dark"] .council-concurrency {
  background: rgba(255, 255, 255, 0.04);
}
.council-concurrency > span:first-child {
  color: var(--text-soft);
  font-weight: 500;
  min-width: 64px;
}
.council-concurrency #council-concurrency {
  width: 56px;
  text-align: center;
  padding: 4px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .council-concurrency #council-concurrency {
  background: rgba(255, 255, 255, 0.08);
}
.council-tip-inline {
  color: var(--text-faint);
  font-size: 11px;
  margin: 0;
}

/* 16 个成员时的紧凑列表：减少行高，避免列表把弹窗撑爆 */
.council-members-list .council-member-row {
  /* 已有定义就不再覆盖，仅在含 16+ 成员时给一个紧凑提示边 */
}
.council-members-list:has(> .council-member-row:nth-child(8)) {
  /* 8 人及以上时列表自带滚动 */
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

/* =====================================================================
   历史归档 · 多会话弹窗 + 图库弹窗
   ===================================================================== */

/* ---------- 多会话弹窗 ---------- */
.sessions-dialog { max-width: 560px; width: 92vw; }
.sessions-dialog .dialog-body {
  padding: 16px 20px 20px;
  max-height: calc(85vh - 90px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sessions-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}
.sessions-toolbar input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
}
[data-theme="dark"] .sessions-toolbar input[type="search"] {
  background: rgba(255, 255, 255, 0.06);
}
.sessions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.session-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  transition: background 0.15s, border-color 0.15s;
}
[data-theme="dark"] .session-row { background: rgba(255, 255, 255, 0.04); }
.session-row:hover { background: rgba(255, 255, 255, 0.50); }
[data-theme="dark"] .session-row:hover { background: rgba(255, 255, 255, 0.08); }
.session-row.is-current {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.08);
}
.session-pin {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  width: 28px; height: 28px;
  border-radius: 6px;
  opacity: 0.65;
}
.session-pin:hover { opacity: 1; background: rgba(0, 0, 0, 0.05); }
.session-info { min-width: 0; }
.session-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-acts {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.session-acts .mini-btn { padding: 3px 8px; font-size: 11px; }
.session-acts .mini-btn.danger { color: #e04e75; }
.session-acts .mini-btn.danger:hover { background: rgba(244, 63, 94, 0.10); border-color: rgba(244, 63, 94, 0.30); }
.session-cur-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}
.sessions-empty {
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
  padding: 30px 10px;
}

/* ---------- 图库弹窗 ---------- */
.gallery-dialog { max-width: 920px; width: 94vw; }
.gallery-dialog .dialog-body {
  padding: 14px 20px 20px;
  max-height: calc(85vh - 90px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gallery-stat {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint);
  margin-left: 6px;
}
.gallery-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gallery-filters {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
}
[data-theme="dark"] .gallery-filters { background: rgba(255, 255, 255, 0.04); }
.gallery-filter {
  border: none;
  background: transparent;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
  transition: 0.15s;
}
.gallery-filter:hover { background: rgba(255, 255, 255, 0.45); }
[data-theme="dark"] .gallery-filter:hover { background: rgba(255, 255, 255, 0.08); }
.gallery-filter.is-active {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}
.gallery-toolbar input[type="search"] {
  flex: 1;
  min-width: 160px;
  padding: 6px 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text);
}
[data-theme="dark"] .gallery-toolbar input[type="search"] {
  background: rgba(255, 255, 255, 0.06);
}
.gallery-danger {
  color: #e04e75;
  border-color: rgba(244, 63, 94, 0.30) !important;
}
.gallery-danger:hover { background: rgba(244, 63, 94, 0.10); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.gallery-card {
  position: relative;
  margin: 0;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
[data-theme="dark"] .gallery-card { background: rgba(255, 255, 255, 0.04); }
.gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  border-color: rgba(var(--accent-rgb), 0.35);
}
.gallery-card.is-fav {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.20);
}
.gallery-card img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.04);
}
.gallery-cap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 11px;
  color: var(--text-soft);
}
.gallery-tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
  flex-shrink: 0;
}
.gallery-tag.generated { background: rgba(var(--accent-rgb), 0.18); color: var(--accent); }
.gallery-tag.uploaded  { background: rgba(96, 165, 250, 0.20); color: #2563eb; }
[data-theme="dark"] .gallery-tag.uploaded { color: #93c5fd; }
.gallery-cap-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gallery-acts {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.15s;
}
.gallery-card:hover .gallery-acts { opacity: 1; }
.gallery-acts .mini-btn {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.10);
  padding: 4px 7px;
  font-size: 11px;
  min-width: 26px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .gallery-acts .mini-btn {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f3f4f6;
}
.gallery-acts .mini-btn.danger { color: #e04e75; }
.gallery-acts .mini-btn.danger:hover { background: rgba(244, 63, 94, 0.10); }
.gallery-empty {
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
  padding: 40px 10px;
}

@media (max-width: 540px) {
  .gallery-toolbar { flex-direction: column; align-items: stretch; }
  .gallery-toolbar input[type="search"] { width: 100%; }
  .gallery-card img { height: 130px; }
}

/* 服务端 URL 同步状态徽章 */
.gallery-url-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.18);
  color: #15803d;
  margin-left: auto;
  flex-shrink: 0;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.gallery-url-badge.pending {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
  animation: gallery-url-pending 1.6s ease-in-out infinite;
}
[data-theme="dark"] .gallery-url-badge { background: rgba(34,197,94,0.22); color: #86efac; }
[data-theme="dark"] .gallery-url-badge.pending { background: rgba(245,158,11,0.22); color: #fcd34d; }

@keyframes gallery-url-pending {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-url-badge.pending { animation: none; }
}

/* 复制 URL 按钮高亮（用户最关心的操作） */
.gallery-acts [data-act="copy-url"] {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.35);
}
.gallery-acts [data-act="copy-url"]:hover {
  background: rgba(var(--accent-rgb), 0.30);
}

/* ===================== 图库选择模式（背景轮播来源）===================== */

/* "☑ 选择" 按钮处于激活态时的样式 */
.mini-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.mini-btn.primary:hover {
  background: var(--accent);
  filter: brightness(1.08);
}

/* 选中工具栏：进入选择模式后显示在 toolbar 下面 */
.gallery-selbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(90deg,
    rgba(var(--accent-rgb), 0.10),
    rgba(var(--accent-rgb), 0.04));
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 10px;
  font-size: 12px;
  flex-wrap: wrap;
}
[data-theme="dark"] .gallery-selbar {
  background: linear-gradient(90deg,
    rgba(var(--accent-rgb), 0.18),
    rgba(var(--accent-rgb), 0.06));
}
.gallery-selbar-info {
  color: var(--text-soft);
}
.gallery-selbar-info b {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.gallery-selbar #gallery-use-bg:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 间隔输入 */
.gallery-sel-interval {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 11px;
  color: var(--text-soft);
}
.gallery-sel-interval input {
  width: 56px;
  padding: 3px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
[data-theme="dark"] .gallery-sel-interval input {
  background: rgba(255, 255, 255, 0.08);
}

/* 卡片：进入选择模式后让整张卡可点（覆盖默认 zoom-in 光标） */
.gallery-grid.is-selecting .gallery-card {
  cursor: pointer;
}
.gallery-grid.is-selecting .gallery-card img {
  cursor: pointer;
}
.gallery-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.20);
}
.gallery-card.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--accent-rgb), 0.08);
  pointer-events: none;
}

/* checkbox 覆盖在左上角 */
.gallery-check {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  z-index: 2;
  font-weight: 700;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: 0.15s;
}
[data-theme="dark"] .gallery-check {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.20);
}
.gallery-check.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.05);
}

@media (max-width: 540px) {
  .gallery-selbar { font-size: 11px; }
  .gallery-sel-interval { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ===================== 选择栏：多行布局（abcd 扩展）===================== */

/* selbar 改为多行 grid */
.gallery-selbar {
  flex-direction: column;
  align-items: stretch;
}
.gallery-selbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gallery-selbar-row + .gallery-selbar-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.18);
}

/* shuffle 开关 */
.gallery-sel-shuffle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
}
.gallery-sel-shuffle input {
  accent-color: var(--accent);
}

/* 缩略图条 */
.gallery-selbar-row-thumbs {
  align-items: flex-start;
}
.gallery-thumbs-label {
  font-size: 11px;
  color: var(--text-faint);
  flex-shrink: 0;
  padding-top: 6px;
}
.gallery-sel-thumb-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-height: 56px;
  padding: 4px 0;
}
.gallery-sel-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  cursor: grab;
  border: 2px solid transparent;
  background: rgba(0, 0, 0, 0.04);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.gallery-sel-thumb:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}
.gallery-sel-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.gallery-sel-thumb.dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.gallery-sel-thumb.drop-before {
  box-shadow: -3px 0 0 0 var(--accent);
}
.gallery-sel-thumb.drop-after {
  box-shadow: 3px 0 0 0 var(--accent);
}
.gallery-sel-thumb-idx {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.gallery-sel-thumb-x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.gallery-sel-thumb:hover .gallery-sel-thumb-x {
  opacity: 1;
}
.gallery-sel-thumb-x:hover {
  background: #e04e75;
}

/* 预设栏 */
.gallery-selbar-row-presets {
  font-size: 11px;
}
.gallery-preset-label {
  color: var(--text-soft);
  flex-shrink: 0;
}
#gallery-preset-select {
  flex: 1;
  min-width: 140px;
  max-width: 280px;
  padding: 4px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  color: var(--text);
}
[data-theme="dark"] #gallery-preset-select {
  background: rgba(255, 255, 255, 0.08);
}
.gallery-selbar-row-presets .mini-btn {
  padding: 3px 10px;
  font-size: 11px;
}
.gallery-selbar-row-presets .mini-btn.danger {
  color: #e04e75;
  border-color: rgba(244, 63, 94, 0.30) !important;
}
.gallery-selbar-row-presets .mini-btn.danger:hover {
  background: rgba(244, 63, 94, 0.10);
}

@media (max-width: 540px) {
  .gallery-sel-thumb { width: 44px; height: 44px; }
  .gallery-thumbs-label { width: 100%; padding-top: 0; }
}

/* =====================================================================
   AI 面板 v3 视觉翻修 —— 解决 v2 之后多个反馈问题
   - 顶栏 3 行变 1-2 行（按钮变纯图标，组容器变虚化背景）
   - 用户气泡用主题无关的柔粉，不再受 --accent 主题色干扰
   - 生图参数：单行紧凑 chip
   - 生图卡片：操作按钮加底色，卡片白边缩小
   - 底部输入：附件/语音/输入/发送 一条完整玻璃带
   ===================================================================== */

/* ---------- 顶栏：紧凑化 ---------- */
.ai-head {
  padding: 8px 10px !important;
  gap: 6px !important;
}
.ai-head-left { gap: 4px !important; }
.ai-head-right { gap: 4px !important; }

/* 组容器：去掉重背景，只保留 hover 时的分组视觉 */
.ai-head-group {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  gap: 0 !important;
  border-radius: 8px;
  position: relative;
}
.ai-head-group::after {
  /* 组与组之间的细分隔线，比整块背景更克制 */
  content: "";
  position: absolute;
  right: -3px;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .ai-head-group::after { background: rgba(255, 255, 255, 0.10); }
.ai-head-group:last-of-type::after { display: none; }

/* 单个按钮：固定方形，纯图标 */
.ai-head-right .ai-tool-btn {
  width: 30px;
  height: 30px;
  padding: 0 !important;
  min-width: 30px;
  justify-content: center;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px;
  box-shadow: none !important;
  transition: background 0.15s, color 0.15s;
}
.ai-head-right .ai-tool-btn:hover {
  background: rgba(var(--accent-rgb), 0.12) !important;
  color: var(--accent);
}
.ai-head-right .ai-tool-btn .ai-tool-txt {
  display: none !important;  /* 永远只显示图标，title 给完整文字 */
}
.ai-head-right .ai-tool-btn .ai-tool-ico {
  font-size: 14px;
  line-height: 1;
}

/* 激活态（生图 / 茶话会）— 实色 accent */
.ai-head-right #ai-image-mode.is-active,
.ai-head-right #ai-council.is-active,
.ai-head-right #ai-image-mode[aria-pressed="true"],
.ai-head-right #ai-council[aria-pressed="true"] {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* 关闭按钮稍微独立 */
.ai-close-btn {
  margin-left: 4px !important;
  opacity: 0.65;
}
.ai-close-btn:hover {
  opacity: 1 !important;
  background: rgba(244, 63, 94, 0.12) !important;
  color: #e04e75 !important;
}

/* 模型下拉更紧凑 */
.ai-head select#ai-model-select,
.ai-head select#ai-persona-select {
  padding: 4px 24px 4px 8px !important;
  font-size: 11px !important;
  height: 30px;
  min-width: 0;
  max-width: 160px !important;
}

/* 容器查询：窄面板更紧凑 */
@container aipanel (max-width: 480px) {
  .ai-head-right .ai-tool-btn { width: 28px; height: 28px; }
  .ai-head select#ai-model-select { max-width: 110px !important; }
}

/* ---------- 用户气泡：主题无关的柔粉玻璃 ---------- */
.ai-msg.user .ai-bubble {
  /* 用一个温和的粉色玻璃，文字保持深色，可读性最强 */
  background: linear-gradient(135deg,
    rgba(255, 184, 199, 0.55),
    rgba(255, 154, 178, 0.45)) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 3px 12px rgba(255, 143, 171, 0.18) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .ai-msg.user .ai-bubble {
  background: linear-gradient(135deg,
    rgba(255, 143, 171, 0.30),
    rgba(255, 110, 150, 0.22)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f9d2dc !important;
}
.ai-msg.user .ai-bubble a {
  color: var(--accent) !important;
}

/* ---------- 生图参数：单行紧凑 chip ---------- */
.ai-image-controls {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  padding: 6px 10px !important;
  margin: 6px 10px 0 !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.30) !important;
  border-radius: 10px !important;
}
[data-theme="dark"] .ai-image-controls {
  background: rgba(255, 255, 255, 0.04) !important;
}
.ai-image-controls label {
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  padding: 2px 4px 2px 8px;
  font-size: 11px;
  color: var(--text-soft);
}
[data-theme="dark"] .ai-image-controls label {
  background: rgba(255, 255, 255, 0.06);
}
.ai-image-controls label > span:first-child {
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
  color: var(--text-faint);
}
.ai-image-controls select {
  height: 24px !important;
  padding: 0 18px 0 4px !important;
  font-size: 11px !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  min-width: 80px;
}
.ai-image-controls .ai-imgctl-custom-row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ai-image-controls .ai-imgctl-custom input {
  height: 24px;
  width: 60px;
  padding: 2px 4px;
  font-size: 11px;
  text-align: center;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .ai-image-controls .ai-imgctl-custom input {
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- 生图卡片：紧凑 + 操作按钮有底色 ---------- */
.ai-img-card-wrap {
  padding: 0 !important;
}
.ai-img-pills {
  padding: 4px 0 !important;
  gap: 4px !important;
}
.ai-img-pill {
  font-size: 10px !important;
  padding: 2px 7px !important;
  font-weight: 500;
}
.ai-img-summary {
  margin: 4px 0 !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
}
.ai-img-thumb {
  max-height: 420px !important;
  border-radius: 10px 10px 0 0 !important;
}
.ai-img-grid.one .ai-img-thumb { max-height: 480px !important; }

.ai-img-revised > summary {
  padding: 5px 10px !important;
  font-size: 11px !important;
}
.ai-img-revised .ai-img-revised-body {
  padding: 0 10px 6px 22px !important;
  font-size: 11px;
}

/* 操作按钮加底色 + 紧凑 */
.ai-img-actions {
  padding: 4px 6px !important;
  gap: 3px !important;
  background: rgba(255, 255, 255, 0.30);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .ai-img-actions {
  background: rgba(0, 0, 0, 0.18);
}
.ai-img-act {
  width: 30px;
  height: 30px;
  padding: 0 !important;
  min-width: 30px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: var(--text-soft) !important;
}
[data-theme="dark"] .ai-img-act {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #d1d5db !important;
}
.ai-img-act:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* ---------- 底部输入：一条完整玻璃带 ---------- */
.ai-foot {
  padding: 8px 10px 10px !important;
  border-top-color: rgba(0, 0, 0, 0.05) !important;
}
.ai-input-row {
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 22px !important;
  padding: 4px 4px 4px 8px !important;
  gap: 4px !important;
  align-items: center !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}
[data-theme="dark"] .ai-input-row {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
.ai-input-row:focus-within {
  border-color: rgba(var(--accent-rgb), 0.45) !important;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.10) !important;
}

/* 附件/语音按钮：变成纯圆形小图标 */
.ai-input-row .ai-attach-btn {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent !important;
  border: none !important;
  color: var(--text-faint);
  flex-shrink: 0;
}
.ai-input-row .ai-attach-btn:hover {
  background: rgba(var(--accent-rgb), 0.12) !important;
  color: var(--accent);
}
.ai-input-row .ai-attach-btn .ai-tool-txt {
  display: none !important;  /* 永远只显示图标 */
}
.ai-input-row .ai-attach-btn .ai-tool-ico {
  font-size: 16px;
}

/* 输入框：扁平嵌入玻璃带 */
.ai-input-row #ai-input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 8px !important;
  min-height: 32px !important;
  box-shadow: none !important;
  font-size: 13px;
}
.ai-input-row #ai-input:focus {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 发送 / 停止：圆形主色按钮 */
#ai-send, #ai-stop {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  min-width: 36px;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent) !important;
  color: #fff !important;
  flex-shrink: 0;
  transition: transform 0.15s, background 0.15s;
}
#ai-send:hover { transform: scale(1.06); filter: brightness(1.05); }
#ai-stop {
  background: #e04e75 !important;
}
#ai-stop:hover { transform: scale(1.06); }
#ai-send .ai-tool-txt, #ai-stop .ai-tool-txt {
  display: none !important;
}
#ai-send .ai-tool-ico, #ai-stop .ai-tool-ico {
  font-size: 14px;
}

/* 防止 .ai-input-row 子项把行撑高 */
.ai-input-row { min-height: 44px; }

/* ai-tip 顶到一行内的小提示 */
.ai-tip { margin-top: 4px !important; font-size: 10px !important; }

/* =====================================================================
   生图 · Responses API 模式（借鉴 Image-Studio）
   - API 模式 select 高亮 Responses 状态
   - partial 半成品卡片视觉区分（黄边 + 标签）
   ===================================================================== */

/* API 模式选择器：Responses 模式时给整个参数行加一道琥珀色描边，提示用户走的是 SSE 保活 */
.ai-image-controls label[title*="Responses"] select#ai-image-api-mode {
  min-width: 130px !important;
}

/* Responses 模式的"文本驱动"输入框 */
.ai-imgctl-driver[hidden] { display: none !important; }
.ai-imgctl-driver input#ai-image-driver {
  width: 130px;
  height: 24px;
  padding: 2px 6px;
  font-size: 11px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .ai-imgctl-driver input#ai-image-driver {
  background: rgba(255, 255, 255, 0.08);
}
.ai-imgctl-driver input#ai-image-driver::placeholder {
  color: var(--text-faint);
  font-style: italic;
}
.ai-image-controls:has(#ai-image-api-mode[value="responses"]),
.ai-image-controls:has(#ai-image-api-mode option[value="responses"]:checked) {
  border-color: rgba(245, 158, 11, 0.35) !important;
  background: linear-gradient(90deg,
    rgba(245, 158, 11, 0.05),
    rgba(255, 255, 255, 0.30)) !important;
}
[data-theme="dark"] .ai-image-controls:has(#ai-image-api-mode[value="responses"]),
[data-theme="dark"] .ai-image-controls:has(#ai-image-api-mode option[value="responses"]:checked) {
  background: linear-gradient(90deg,
    rgba(245, 158, 11, 0.10),
    rgba(255, 255, 255, 0.04)) !important;
}

/* partial 卡片：金黄色边 + 半透明覆盖（与最终图区分） */
.ai-img-card.partial {
  border-color: rgba(245, 158, 11, 0.45) !important;
  background: rgba(245, 158, 11, 0.04) !important;
  position: relative;
}
[data-theme="dark"] .ai-img-card.partial {
  border-color: rgba(245, 158, 11, 0.50) !important;
  background: rgba(245, 158, 11, 0.08) !important;
}
.ai-img-card.partial .ai-img-thumb {
  /* 给半成品图轻微降饱和提示用户它还在生成 */
  filter: saturate(0.92);
  opacity: 0.96;
}
.ai-img-partial-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.92);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference) {
  .ai-img-card.partial .ai-img-thumb {
    animation: ai-img-partial-pulse 2.4s ease-in-out infinite;
  }
}
@keyframes ai-img-partial-pulse {
  0%, 100% { opacity: 0.96; }
  50%      { opacity: 0.78; }
}

/* =====================================================================
   图像编辑器（image-editor.js） · 借鉴 Image-Studio
   ===================================================================== */
.image-editor-dialog {
  max-width: 96vw;
  width: 96vw;
  max-height: 96vh;
  height: 96vh;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 14px;
}
.image-editor-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.editor-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card-bg);
}

/* 顶部 */
.editor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--glass-border);
}
.editor-head h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}
.editor-head-acts {
  display: inline-flex;
  gap: 6px;
}
.editor-head-acts .mini-btn { padding: 5px 14px; font-size: 12px; }

/* 工具栏 */
.editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.30);
  font-size: 12px;
}
[data-theme="dark"] .editor-toolbar { background: rgba(255, 255, 255, 0.04); }
.editor-tool-group {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.40);
  border: 1px solid var(--glass-border);
}
[data-theme="dark"] .editor-tool-group {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
}
.editor-tool {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: 0.15s;
}
.editor-tool:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}
.editor-tool:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.editor-tool.is-active {
  background: var(--accent);
  color: #fff;
}

/* 画笔参数 */
.editor-brush-params {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.editor-param {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-soft);
}
.editor-param input[type="range"] {
  width: 80px;
  accent-color: var(--accent);
}
.editor-param input[type="color"] {
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.editor-param-val {
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  color: var(--text);
  text-align: right;
}
.editor-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-faint);
}

/* canvas 容器：占满剩余高度，棋盘背景表示透明 */
.editor-canvas-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background-color: #2a2a2a;
  background-image:
    linear-gradient(45deg, #383838 25%, transparent 25%),
    linear-gradient(-45deg, #383838 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #383838 75%),
    linear-gradient(-45deg, transparent 75%, #383838 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
[data-theme="light"] .editor-canvas-wrap {
  background-color: #d4d4d4;
  background-image:
    linear-gradient(45deg, #e8e8e8 25%, transparent 25%),
    linear-gradient(-45deg, #e8e8e8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e8e8e8 75%),
    linear-gradient(-45deg, transparent 75%, #e8e8e8 75%);
}
#editor-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

@media (max-width: 720px) {
  .editor-toolbar { padding: 6px 10px; gap: 6px; }
  .editor-brush-params { gap: 6px; }
  .editor-param input[type="range"] { width: 60px; }
  .editor-hint { display: none; }
}

/* ===================== 图库：生图 / 图库 标签页 ===================== */
.gallery-tabs {
  display: flex;
  gap: 6px;
  padding: 0 4px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  margin-bottom: 12px;
}
[data-theme="dark"] .gallery-tabs { border-bottom-color: rgba(255,255,255,0.10); }
.gallery-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.gallery-tab:hover { color: var(--text); background: rgba(0,0,0,0.04); }
[data-theme="dark"] .gallery-tab:hover { background: rgba(255,255,255,0.06); }
.gallery-tab.is-active {
  color: var(--text);
  background: rgba(246,165,192,0.16);
  border-color: rgba(246,165,192,0.45);
}
.gallery-tabpanel[hidden] { display: none !important; }

/* ---------- 生图面板 ---------- */
.gen-panel { display: flex; flex-direction: column; gap: 12px; }
.gen-modebar { display: flex; gap: 6px; }
.gen-mode-btn {
  appearance: none;
  flex: 1;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.6);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
[data-theme="dark"] .gen-mode-btn { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.gen-mode-btn.is-active {
  color: #fff;
  background: linear-gradient(135deg, #f6a5c0, #c98bb8);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(201,139,184,0.35);
}

/* 参考图区 */
.gen-refs {
  border: 1px dashed rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.4);
}
[data-theme="dark"] .gen-refs { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.03); }
.gen-refs.dragover { border-color: #f6a5c0; background: rgba(246,165,192,0.12); }
.gen-refs-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-soft); }
.gen-refs-head small { color: var(--text-soft); opacity: 0.8; }
.gen-refs-head .mini-btn { cursor: pointer; }
.gen-ref-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gen-ref-thumb { position: relative; width: 72px; height: 72px; border-radius: 9px; overflow: hidden; border: 1px solid rgba(0,0,0,0.10); }
.gen-ref-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gen-ref-thumb button {
  position: absolute; top: 2px; right: 2px;
  width: 20px; height: 20px; line-height: 18px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff;
  font-size: 13px; cursor: pointer; padding: 0;
}
.gen-ref-hint { margin: 8px 0 0; font-size: 12px; color: var(--text-soft); line-height: 1.5; }

/* 提示词 */
.gen-prompt {
  width: 100%;
  resize: vertical;
  min-height: 64px;
  border-radius: 11px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.85);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}
[data-theme="dark"] .gen-prompt { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.gen-prompt:focus { outline: none; border-color: #f6a5c0; box-shadow: 0 0 0 3px rgba(246,165,192,0.22); }

/* 配置网格 */
.gen-config {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.gen-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-soft); min-width: 0; }
.gen-field > span { font-weight: 600; letter-spacing: 0.02em; }
.gen-field select,
.gen-field input[type="text"],
.gen-field input[type="number"] {
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.85);
  font-size: 13px;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}
[data-theme="dark"] .gen-field select,
[data-theme="dark"] .gen-field input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.gen-custom-row { display: flex; align-items: center; gap: 6px; }
.gen-custom-row em { color: var(--text-soft); font-style: normal; }
.gen-field[hidden] { display: none !important; }

/* 操作区 */
.gen-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gen-actions .btn-primary { padding: 9px 22px; font-size: 14px; }
.gen-status { font-size: 12.5px; color: var(--text-soft); line-height: 1.4; }
.gen-status.err { color: #d6336c; }

/* 结果卡片 */
.gen-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.gen-results:empty { display: none; }
.gen-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.5);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="dark"] .gen-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
.gen-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gen-card.is-loading,
.gen-card.is-error { font-size: 12px; color: var(--text-soft); text-align: center; padding: 10px; }
.gen-card .gen-spin {
  width: 26px; height: 26px;
  border: 3px solid rgba(246,165,192,0.35);
  border-top-color: #f6a5c0;
  border-radius: 50%;
  animation: gen-spin 0.8s linear infinite;
  margin-bottom: 8px;
}
@keyframes gen-spin { to { transform: rotate(360deg); } }
.gen-card .gen-card-msg { display: flex; flex-direction: column; align-items: center; }
.gen-card.is-partial::after {
  content: "预览";
  position: absolute; top: 6px; left: 6px;
  font-size: 10px; padding: 1px 6px; border-radius: 6px;
  background: rgba(0,0,0,0.55); color: #fff;
}
.gen-card-acts {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 4px; justify-content: center;
  padding: 6px;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  opacity: 0; transition: opacity 0.15s;
}
.gen-card:hover .gen-card-acts { opacity: 1; }
.gen-card-acts .mini-btn,
.gen-card-acts a.mini-btn {
  background: rgba(255,255,255,0.92); color: #333;
  padding: 3px 7px; font-size: 12px; border-radius: 7px;
  text-decoration: none; border: none; cursor: pointer;
}
.gen-card-retry {
  appearance: none; border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.9); color: var(--text);
  padding: 5px 12px; border-radius: 8px; font-size: 12px; cursor: pointer;
  margin-top: 6px;
}

@media (max-width: 720px) {
  .gen-config { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .gen-results { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}