/* ========== 基础变量（若已有保持一致，可根据你原文件合并） ========== */
:root {
  --color-bg: #0d1117;
  --color-bg-alt: #111823;
  --color-surface: #182230;
  --color-border: #223443;
  --color-text: #dbe2ec;
  --color-text-dim: #8a97a8;
  --color-accent: #0d6bff;
  --color-accent-grad: linear-gradient(120deg,#12aaff,#8a3dff);
  --panel-blur: 18px;
  --trans-fast: .18s;
  --gradient-border: linear-gradient(140deg,rgba(0,153,255,.35),rgba(138,61,255,.35));
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  color-scheme: dark light;
}

:root.light {
  --color-bg: #f1f4f8;
  --color-bg-alt: #e8edf3;
  --color-surface: #ffffff;
  --color-border: #ccd6e2;
  --color-text: #1f2833;
  --color-text-dim: #5a6775;
  --gradient-border: linear-gradient(140deg,rgba(13,107,255,.35),rgba(138,61,255,.35));
}

/* 全局布局 */
body,html {
  margin:0;
  padding:0;
  background:var(--color-bg);
  color:var(--color-text);
  -webkit-font-smoothing: antialiased;
}

#app-shell {
  display:flex;
  min-height:100vh;
}

#sidebar {
  width:250px;
  padding:1rem 1rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  background:linear-gradient(180deg,#131c27,#0d141c);
  border-right:1px solid #1d2c39;
}

:root.light #sidebar {
  background:linear-gradient(180deg,#ffffff,#eef3f8 52%,#e5ecf3);
  border-right:1px solid #d0dae5;
}

.sidebar-top {
  display:flex;
  gap:.75rem;
  align-items:center;
}

.brand-text {
  font-size:.95rem;
  letter-spacing:.5px;
  font-weight:600;
  background:var(--color-accent-grad);
  -webkit-background-clip:text;
  color:transparent;
}

.theme-toggle button {
  background:linear-gradient(145deg,var(--color-surface),var(--color-bg-alt));
  border:1px solid var(--color-border);
  color:var(--color-text);
  padding:.45rem .65rem;
  border-radius:10px;
  cursor:pointer;
  font-size:.8rem;
}

.search-box input {
  width:100%;
  background:linear-gradient(145deg,var(--color-surface),var(--color-bg-alt));
  border:1px solid var(--color-border);
  color:var(--color-text);
  padding:.55rem .75rem;
  border-radius:10px;
  font-size:.75rem;
  outline:none;
  transition:border-color var(--trans-fast), box-shadow var(--trans-fast);
}

.search-box input:focus {
  border-color:var(--color-accent);
  box-shadow:0 0 0 2px rgba(13,107,255,.25);
}

:root.light .search-box input {
  background:linear-gradient(145deg,#ffffff,#f0f4f8);
  border:1px solid #c8d3df;
  color:#1f2732;
}

#tool-groups {
  flex:1;
  overflow:auto;
  padding-right:.2rem;
}

.tool-group {
  margin-bottom:1rem;
}

.tool-group-header {
  display:flex;
  align-items:center;
  gap:.5rem;
  cursor:pointer;
  font-size:.7rem;
  letter-spacing:1px;
  text-transform:uppercase;
  opacity:.75;
  user-select:none;
}

.tool-group.collapsed .tool-list {
  display:none;
}
.tool-group-header .chevron {
  transition:transform .25s;
}
.tool-group.collapsed .chevron {
  transform:rotate(-90deg);
}

.tool-list {
  list-style:none;
  margin:.5rem 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.tool-list li button {
  width:100%;
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.55rem .7rem;
  background:linear-gradient(145deg,var(--color-surface),var(--color-bg-alt));
  border:1px solid var(--color-border);
  border-radius:10px;
  color:var(--color-text);
  cursor:pointer;
  font-size:.72rem;
  letter-spacing:.2px;
  transition:background .25s,border-color .2s,box-shadow .25s;
  text-align:left;
}

.tool-list li button .icon { font-size:.85rem; }

.tool-list li button.active,
.tool-list li button:hover {
  border-color:var(--color-accent);
  box-shadow:0 0 0 1px rgba(13,107,255,.5),0 0 0 4px rgba(13,107,255,.18);
}

:root.light .tool-list li button {
  background:linear-gradient(145deg,#ffffff,#f0f4f8);
  border:1px solid #c9d3de;
  color:#2b3440;
}
:root.light .tool-list li button.active,
:root.light .tool-list li button:hover {
  border-color:#0d6bff;
  box-shadow:0 0 0 1px #0d6bff,0 0 0 4px rgba(13,107,255,.18);
}

#main {
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

#topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.85rem 1.25rem .8rem;
  gap:1rem;
  border-bottom:1px solid #182635;
  background:linear-gradient(145deg,#121b26,#0d141c);
}

:root.light #topbar {
  border-bottom:1px solid #d2dde7;
  background:linear-gradient(145deg,#ffffff,#eff4f9);
}

.breadcrumbs {
  font-size:.7rem;
  letter-spacing:.6px;
  opacity:.85;
  display:flex;
  gap:.35rem;
  align-items:center;
  flex-wrap:wrap;
  max-width:55%;
}

.breadcrumbs .sep {
  opacity:.55;
}

.top-actions {
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.top-actions .ghost {
  background:linear-gradient(145deg,var(--color-surface),var(--color-bg-alt));
  border:1px solid var(--color-border);
  color:var(--color-text);
  padding:.45rem .75rem;
  border-radius:10px;
  font-size:.68rem;
  cursor:pointer;
  letter-spacing:.4px;
}

:root.light .top-actions .ghost {
  background:linear-gradient(145deg,#ffffff,#f0f4f8);
  border:1px solid #c9d3de;
  color:#2b3440;
}

.lang-select-inline select {
  background: linear-gradient(145deg,var(--color-surface),var(--color-bg-alt));
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: .5rem .7rem;
  font-size: .7rem;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: .5px;
  font-weight: 500;
  min-width: 86px;
  transition: border-color var(--trans-fast), background var(--trans-fast), box-shadow var(--trans-fast);
}
.lang-select-inline select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(0,153,255,.25);
}
:root.light .lang-select-inline select {
  background:linear-gradient(145deg,#ffffff,#f0f4f8);
  border:1px solid #c9d3de;
  color:#1f2732;
}

#workspace {
  padding:1.1rem 1.35rem 2.4rem;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}

/* 面板基础 */
.panel {
  background:linear-gradient(145deg,#16212e,#101922);
  border:1px solid #233444;
  border-radius:16px;
  padding:1.15rem 1.15rem 1.35rem;
  position:relative;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04);
}

.panel.glass {
  background:
    linear-gradient(150deg,rgba(25,35,50,.78),rgba(18,26,38,.78)) padding-box,
    var(--gradient-border) border-box;
  border:1px solid transparent;
  backdrop-filter:blur(var(--panel-blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--panel-blur)) saturate(150%);
}

:root.light .panel.glass {
  background:
    linear-gradient(150deg,rgba(255,255,255,.92),rgba(245,247,251,.92)) padding-box,
    var(--gradient-border) border-box;
  border:1px solid transparent;
  backdrop-filter:blur(var(--panel-blur)) saturate(165%);
  -webkit-backdrop-filter:blur(var(--panel-blur)) saturate(165%);
  box-shadow:0 6px 18px -10px rgba(0,0,0,.18),0 0 0 1px rgba(0,102,255,.08);
}

/* 合并后的 meta 区域（panel-input 顶部） */
#panel-input .panel-head.compact-meta {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.9rem;
  padding-bottom:.65rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
:root.light #panel-input .panel-head.compact-meta {
  border-bottom:1px solid #d7e1eb;
}
#panel-input .panel-head.compact-meta h1 {
  font-size:1.05rem;
  margin:0 0 .4rem;
  letter-spacing:.7px;
  background:var(--color-accent-grad);
  -webkit-background-clip:text;
  color:transparent;
  font-weight:700;
}
:root.light #panel-input .panel-head.compact-meta h1 {
  text-shadow:0 1px 1px rgba(0,0,0,.15);
}
#panel-input .panel-head.compact-meta .meta-inline-desc {
  margin:0;
  font-size:.72rem;
  line-height:1.52;
  opacity:.78;
  letter-spacing:.3px;
  max-width:68ch;
  text-wrap:pretty;
}
:root.light #panel-input .panel-head.compact-meta .meta-inline-desc {
  color:#4a5664;
  opacity:.9;
}
#panel-input .panel-head.compact-meta .badge {
  margin-top:.15rem;
  font-size:.55rem;
  letter-spacing:1px;
  background:linear-gradient(120deg,#0a74ff,#7c3dff);
  color:#fff;
  padding:.45rem .7rem;
  border-radius:10px;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.4);
}
:root.light #panel-input .panel-head.compact-meta .badge {
  box-shadow:0 3px 8px -3px rgba(0,0,0,.25);
}

/* 表单字段 */
.field {
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin-bottom:1rem;
}
.field label {
  font-size:.62rem;
  letter-spacing:1.1px;
  font-weight:600;
  opacity:.85;
  text-transform:uppercase;
}

.field textarea,
.field input,
.field select {
  width:100%;
  background:linear-gradient(145deg,#141e29,#101820);
  border:1px solid #233444;
  color:var(--color-text);
  padding:.65rem .75rem .7rem;
  border-radius:10px;
  font-family:inherit;
  font-size:.75rem;
  resize:vertical;
  min-height:120px;
  line-height:1.45;
  outline:none;
  transition:border-color .18s, box-shadow .18s, background .25s;
}

.field input,
.field select {
  min-height:unset;
  height:40px;
}

.field textarea:focus,
.field input:focus,
.field select:focus {
  border-color:var(--color-accent);
  box-shadow:0 0 0 2px rgba(13,107,255,.35);
}

.actions-row {
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin:.25rem 0 1.15rem;
}

.actions-row button {
  border:1px solid #234055;
  background:linear-gradient(145deg,#1d2c3a,#182634 55%,#14202c);
  color:var(--color-text);
  padding:.55rem .85rem;
  font-size:.68rem;
  letter-spacing:.5px;
  border-radius:10px;
  cursor:pointer;
  font-weight:500;
  position:relative;
  transition:background .25s,border-color .22s,box-shadow .25s;
}

.actions-row button.primary {
  background:linear-gradient(140deg,#0d6bff,#7a3dff);
  border:1px solid #0d6bff;
  box-shadow:0 4px 14px -5px rgba(13,107,255,.55),0 0 0 1px rgba(255,255,255,.07);
}

.actions-row button.primary:hover {
  filter:brightness(1.1);
}

.actions-row button.minor {
  background:linear-gradient(145deg,#1a2733,#15212b);
}

.actions-row button:hover {
  border-color:var(--color-accent);
  box-shadow:0 0 0 1px var(--color-accent),0 0 0 4px rgba(13,107,255,.18);
}

.output-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin:0 0 .9rem;
}

.output-header .panel-title {
  font-size:.78rem;
  letter-spacing:.9px;
  text-transform:uppercase;
  opacity:.85;
  font-weight:600;
}

.output {
  width:100%;
  min-height:240px;
  background:linear-gradient(145deg,#141e29,#101820);
  border:1px solid #233444;
  color:var(--color-text);
  border-radius:12px;
  padding:.75rem .85rem;
  font-family:monospace, ui-monospace, 'SFMono-Regular', 'Cascadia Code';
  font-size:.74rem;
  line-height:1.5;
  resize:vertical;
  outline:none;
  transition:border-color .18s,background .25s,box-shadow .25s;
}

.output:focus {
  border-color:var(--color-accent);
  box-shadow:0 0 0 2px rgba(13,107,255,.32);
}

.status-row {
  margin-top:.55rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.65rem;
  opacity:.8;
}

.badge {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.55rem;
  letter-spacing:1px;
  font-weight:600;
  text-transform:uppercase;
  background:linear-gradient(120deg,#0a74ff,#7c3dff);
  color:#fff;
  padding:.45rem .75rem;
  border-radius:10px;
}

[data-copy-output].mini,
[data-download-output].mini {
  background:linear-gradient(145deg,#1a2733,#14202a);
  border:1px solid #234055;
  color:var(--color-text);
  padding:.45rem .75rem;
  font-size:.62rem;
  letter-spacing:.6px;
  border-radius:8px;
  cursor:pointer;
  transition:background .25s,border-color .22s,box-shadow .25s;
}
[data-copy-output].mini:hover,
[data-download-output].mini:hover {
  border-color:var(--color-accent);
  box-shadow:0 0 0 1px var(--color-accent),0 0 0 4px rgba(13,107,255,.18);
}

/* Light Theme：panel-input 方案 B */
:root.light #panel-input.panel.glass {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.95), rgba(238,243,249,0.95)) padding-box,
    var(--gradient-border) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(var(--panel-blur)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(170%);
  box-shadow:
    0 6px 18px -8px rgba(0,0,0,.18),
    0 0 0 1px rgba(0,102,255,.12);
}

:root.light #panel-input .field label {
  color: #4a5664;
  letter-spacing: .9px;
  opacity: .9;
}

:root.light #panel-input .field textarea,
:root.light #panel-input .field input,
:root.light #panel-input .field select {
  background: linear-gradient(145deg,#ffffff,#f0f4f8);
  border: 1px solid #c8d3df;
  color: #1d2430;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
  transition: border-color .15s, background .15s, box-shadow .25s;
}

:root.light #panel-input .field textarea:focus,
:root.light #panel-input .field input:focus,
:root.light #panel-input .field select:focus {
  border-color: #0d6bff;
  background: #ffffff;
  box-shadow:
    0 0 0 2px rgba(13,107,255,.20),
    0 4px 12px -4px rgba(13,107,255,.30);
  outline: none;
}

:root.light #panel-input .actions-row button.minor {
  background: linear-gradient(145deg,#f3f7fb,#e7edf4);
  color: #4c5b6a;
  border: 1px solid #c9d3de;
}
:root.light #panel-input .actions-row button.minor:hover {
  color:#1d2430;
  border-color:#0d6bff;
}
:root.light #panel-input .actions-row button.primary {
  filter:brightness(1.04);
}
:root.light #panel-input .actions-row button.primary:hover {
  filter:brightness(1.10);
}

/* Light Theme：panel-output 同步方案 B 风格 */
:root.light #panel-output.panel.glass {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.95), rgba(238,243,249,0.95)) padding-box,
    var(--gradient-border) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(var(--panel-blur)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(170%);
  box-shadow:
    0 6px 18px -8px rgba(0,0,0,.18),
    0 0 0 1px rgba(0,102,255,.12);
}

:root.light #panel-output .output-header {
  background: linear-gradient(145deg,#ffffff,#f2f6fa);
  border: 1px solid #d3dde7;
  border-radius: 10px;
  padding: .55rem .8rem;
  margin: 0 0 .85rem 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

:root.light #panel-output .output-header .panel-title {
  color: #445163;
  letter-spacing: .9px;
  font-weight: 600;
}

:root.light #panel-output .output-header .output-right button.mini {
  background: linear-gradient(145deg,#f3f7fb,#e7edf4);
  color: #4c5b6a;
  border: 1px solid #c9d3de;
  border-radius: 8px;
  padding: .35rem .65rem;
  font-size: .66rem;
  letter-spacing: .6px;
  transition: border-color .15s, background .15s, color .15s, box-shadow .25s;
}
:root.light #panel-output .output-header .output-right button.mini:hover {
  color:#1d2430;
  border-color:#0d6bff;
}
:root.light #panel-output .output-header .output-right button.mini:focus-visible {
  outline:none;
  box-shadow:0 0 0 2px rgba(13,107,255,.28);
}

:root.light #panel-output #tool-output.output {
  background: linear-gradient(145deg,#ffffff,#f0f4f8);
  border: 1px solid #c8d3df;
  color: #1d2430;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
  transition: border-color .15s, background .15s, box-shadow .25s;
}
:root.light #panel-output #tool-output.output:focus {
  border-color:#0d6bff;
  background:#ffffff;
  box-shadow:
    0 0 0 2px rgba(13,107,255,.20),
    0 4px 12px -4px rgba(13,107,255,.25);
  outline:none;
}

:root.light #panel-output .status-row .status-text {
  color:#4a5664;
  opacity:.92;
  font-size:.68rem;
  letter-spacing:.6px;
}

/* 辅助：隐藏仅用于语义的标题（屏幕阅读器保留） */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

#footer {
  padding:1.2rem 1.35rem 2rem;
  font-size:.62rem;
  letter-spacing:.6px;
  opacity:.7;
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  justify-content:flex-start;
  border-top:1px solid #182635;
  background:linear-gradient(155deg,#0f151c,#121c26);
}

:root.light #footer {
  border-top:1px solid #d4dee8;
  background:linear-gradient(155deg,#ffffff,#eef3f8);
  color:#4a5664;
}

#footer a {
  color:var(--color-accent);
  text-decoration:none;
  font-weight:500;
  opacity:.9;
}
#footer a:hover {
  text-decoration:underline;
}

#toast-container {
  position:fixed;
  bottom:1.2rem;
  right:1.1rem;
  display:flex;
  flex-direction:column;
  gap:.65rem;
  z-index:500;
  pointer-events:none;
}

.toast {
  min-width:220px;
  max-width:340px;
  background:linear-gradient(145deg,#16212e,#101922);
  border:1px solid #234055;
  color:var(--color-text);
  padding:.75rem .95rem .8rem;
  border-radius:14px;
  font-size:.68rem;
  letter-spacing:.4px;
  box-shadow:0 10px 32px -12px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05);
  animation:toast-in .4s cubic-bezier(.4,.1,.2,1);
  position:relative;
  pointer-events:auto;
}
.toast.success { border-color:#0d6bff; }
.toast.error { border-color:#ff3d3d; }
.toast .close {
  position:absolute;
  top:4px;
  right:4px;
  background:transparent;
  border:none;
  color:inherit;
  cursor:pointer;
  font-size:.7rem;
  opacity:.6;
}
.toast .close:hover { opacity:1; }
.toast .title {
  font-weight:600;
  margin-bottom:.25rem;
  letter-spacing:.5px;
  font-size:.7rem;
}
.toast .body {
  line-height:1.4;
}

@keyframes toast-in {
  from { transform:translateY(8px) scale(.97); opacity:0; }
  to { transform:translateY(0) scale(1); opacity:1; }
}
@keyframes toast-out {
  to { transform:translateY(6px) scale(.96); opacity:0; }
}

@media (max-width: 960px) {
  #sidebar { width:220px; }
  #workspace { padding:1rem 1rem 2rem; }
}

@media (max-width: 760px) {
  #app-shell { flex-direction:column; }
  #sidebar { width:100%; border-right:none; border-bottom:1px solid #1d2c39; }
  :root.light #sidebar { border-bottom:1px solid #d0dae5; }
  #main { flex:1; }
  .top-actions { max-width:100%; }
  .breadcrumbs { max-width:100%; }
}

@media (max-width: 640px) {
  #panel-input .panel-head.compact-meta h1 { font-size:.98rem; }
  #panel-input .panel-head.compact-meta .meta-inline-desc { font-size:.68rem; }
  .output { min-height:200px; }
  .field textarea, .field input { font-size:.72rem; }
  [data-copy-output].mini,[data-download-output].mini { font-size:.6rem; padding:.4rem .6rem; }
}

/* Toast Readability – 方案 A (Minimal) */
#toast-container .toast {
  background: #16212a; /* 更纯色，减少脏渐变 */
  border: 1px solid #254155;
  color: #e3eaf1;
  font-size: .72rem;          /* +0.04rem */
  line-height: 1.55;          /* 提升行高 */
  letter-spacing: .35px;
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
}
:root.light #toast-container .toast {
  background: #ffffff;
  border: 1px solid #c8d4df;
  color: #1f2933;
  box-shadow: 0 8px 28px -12px rgba(0,0,0,.18), 0 2px 5px -2px rgba(0,0,0,.12);
}
#toast-container .toast .title {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .5px;
  margin-bottom: .35rem;
  color: #fff;
}
:root.light #toast-container .toast .title {
  color: #1f2933;
}
#toast-container .toast .close {
  opacity: .8;
  font-size: .75rem;
}
#toast-container .toast .close:hover {
  opacity: 1;
}

/* === Textarea Width Overflow Fix (推荐组合) === */
:root, *, *::before, *::after { box-sizing: border-box; }

.field textarea,
.field input,
#tool-output.output {
  width: 100%;
  max-width: 100%;
  display: block;
  min-width: 0;
}

/* 日常文本/JSON 建议可换行 */
#tool-output.output,
#panel-input .field textarea {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow-x: hidden;
}

/* 如需代码保持原格式，改为：
#tool-output.output { white-space: pre; overflow-x:auto; overflow-wrap: normal; word-break: normal; }
*/

/* 防止面板被撑宽（若需要再启用）
#panel-input, #panel-output { overflow: hidden; }
*/

/* === Placeholder Same Font (方案 B) === */
.field textarea::placeholder,
.field input::placeholder,
#tool-output.output::placeholder {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  color: rgba(142,160,178,.55);
  font-weight: 500;
  letter-spacing: .3px;
  font-size: .72rem;
  opacity: 1;
}
:root.light .field textarea::placeholder,
:root.light .field input::placeholder,
:root.light #tool-output.output::placeholder {
  color: rgba(74,86,100,.55);
}

/* === Primary Button Light Theme Readability Patch (方案 A) === */
:root.light .actions-row button.primary {
  /* 保留原背景渐变（来自暗色主题通用规则），这里仅调整文本与可读性 */
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
  font-weight: 600;
  letter-spacing: .45px;
  filter: none;
}

:root.light .actions-row button.primary:hover {
  filter: none;
  /* 轻微升亮渐变（避免用 brightness 造成泛白） */
  background: linear-gradient(135deg,#1a79ff,#8a4dff);
}

:root.light .actions-row button.primary:active {
  background: linear-gradient(135deg,#0a5cd1,#6a35ff);
  transform: translateY(1px);
}

:root.light .actions-row button.primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(13,107,255,.35),
    0 0 0 6px rgba(13,107,255,.18),
    0 0 0 1px #0d6bff inset;
}

:root.light .actions-row button.primary:disabled,
:root.light .actions-row button.primary[disabled] {
  background: linear-gradient(135deg,#b9d8ff,#d6c9ff);
  border-color: #b0c6e0;
  color: #5d6a78;
  text-shadow: none;
  box-shadow: none;
  cursor: not-allowed;
  opacity: .85;
  transform: none;
}

/* === Theme Mode Badge for Toggle Button (Optional) === */
#btn-theme {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
}
#btn-theme .theme-mode-badge {
  font-size: .55rem;
  line-height: 1;
  padding: .15rem .35rem;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  color: #fff;
  letter-spacing: .6px;
  font-weight: 600;
  transition: background .25s;
}
:root.light #btn-theme .theme-mode-badge {
  background: rgba(0,0,0,.08);
  color: #1f2732;
}
#btn-theme:hover .theme-mode-badge {
  background: rgba(255,255,255,.18);
}
:root.light #btn-theme:hover .theme-mode-badge {
  background: rgba(0,0,0,.14);
}
/* 区分 auto 模式颜色 */
#btn-theme[data-mode="auto"] .theme-mode-badge {
  background: linear-gradient(120deg,#0d6bff,#7a3dff);
  color: #fff;
}
:root.light #btn-theme[data-mode="auto"] .theme-mode-badge {
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
}

/* === Ad Slots Styling === */
.ad-container {
  position: relative;
  margin: 1rem 0 1.2rem;
  padding: .65rem .65rem .55rem;
  border: 1px solid #233444;
  border-radius: 14px;
  background: linear-gradient(145deg,#16212e,#101922);
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  overflow: hidden;
}

.ad-container .ad-label {
  font-size: .55rem;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: .55;
  pointer-events: none;
}

.ad-container .ad-slot,
.ad-container ins.adsbygoogle {
  width: 100%;
  min-height: 90px;
  display: block;
  border-radius: 8px;
}

/* Skeleton before ads load */
.ad-container .ad-slot.skeleton {
  position: relative;
  background:
    linear-gradient(120deg,#1d2a37 0%,#253748 40%,#1d2a37 80%);
  background-size: 300% 300%;
  animation: ad-skeleton 2.2s ease-in-out infinite;
}
@keyframes ad-skeleton {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* When blocked or failed, show message */
.ad-container .ad-slot.ad-fallback {
  background: #202e3c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.6rem;
  color:#8fa2b4;
  text-align:center;
  padding:.6rem;
}

/* Light theme overrides */
:root.light .ad-container {
  background: linear-gradient(145deg,#ffffff,#f2f6fa);
  border: 1px solid #c8d3df;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.15), 0 0 0 1px rgba(0,102,255,.07);
}
:root.light .ad-container .ad-slot.skeleton {
  background:
    linear-gradient(120deg,#e3e9f0 0%,#f0f5fa 40%,#e3e9f0 80%);
}
:root.light .ad-container .ad-slot.ad-fallback {
  background:#e6edf4;
  color:#5a6a79;
}

/* Layout specific tweaks */
.sidebar-ad { margin-top:auto; }
.mid-ad { margin: 1rem 0 1.4rem; }
.footer-ad { margin-top:1.8rem; }

/* Responsive hide some ads if narrow */
@media (max-width: 760px) {
  .sidebar-ad { display:none; }
  .mid-ad { margin: .85rem 0 1rem; }
}

/* === 在文件末尾追加：主题切换按钮移到 top-actions 的覆盖样式 === */

/* 隐藏侧边栏原占位（也可删除 index.html 里的 .theme-toggle 节点） */
.sidebar-top .theme-toggle { display:none !important; }

/* 新位置按钮样式 */
.top-actions #btn-theme.topbar-theme-btn {
  background:linear-gradient(145deg,var(--color-surface),var(--color-bg-alt));
  border:1px solid var(--color-border);
  color:var(--color-text);
  padding:0 .85rem;
  height:40px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  cursor:pointer;
  font-size:.72rem;
  position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
  transition:border-color .18s, box-shadow .18s, background .25s, color .25s;
}
.top-actions #btn-theme.topbar-theme-btn:hover {
  border-color:var(--color-accent);
  box-shadow:0 0 0 1px var(--color-accent),0 0 0 4px rgba(13,107,255,.18);
}
:root.light .top-actions #btn-theme.topbar-theme-btn {
  background:linear-gradient(145deg,#ffffff,#f0f4f8);
  border:1px solid #c9d3de;
  color:#1f2732;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
:root.light .top-actions #btn-theme.topbar-theme-btn:hover {
  border-color:#0d6bff;
  box-shadow:0 0 0 1px #0d6bff,0 0 0 4px rgba(13,107,255,.20);
  background:#ffffff;
}

/* 徽章沿用 (若原来已定义 #btn-theme .theme-mode-badge 可以删除旧的那段，保留下面一套) */
.top-actions #btn-theme .theme-mode-badge {
  font-size:.55rem;
  line-height:1;
  padding:.15rem .35rem;
  border-radius:6px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:600;
  letter-spacing:.6px;
  transition:background .25s;
}
:root.light .top-actions #btn-theme .theme-mode-badge {
  background:rgba(0,0,0,.08);
  color:#1f2732;
}
.top-actions #btn-theme:hover .theme-mode-badge {
  background:rgba(255,255,255,.18);
}
:root.light .top-actions #btn-theme:hover .theme-mode-badge {
  background:rgba(0,0,0,.14);
}
.top-actions #btn-theme[data-mode="auto"] .theme-mode-badge {
  background:linear-gradient(120deg,#0d6bff,#7a3dff);
  color:#fff;
}
:root.light .top-actions #btn-theme[data-mode="auto"] .theme-mode-badge {
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
}

/* （可选）让 sidebar-top 视觉与 search-box 对齐 */
#sidebar .sidebar-top {
  background:linear-gradient(145deg,var(--color-surface),var(--color-bg-alt));
  border:1px solid var(--color-border);
  border-radius:10px;
  padding:.55rem .75rem;
  box-shadow:0 0 0 1px rgba(255,255,255,.04);
  justify-content:flex-start;
}
:root.light #sidebar .sidebar-top {
  background:linear-gradient(145deg,#ffffff,#f0f4f8);
  border:1px solid #c8d3df;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}

/* === Unify Theme Button Size With Language Select === */
.top-actions #btn-theme.topbar-theme-btn {
  /* 与 .lang-select-inline select 对齐的尺寸与视觉 */
  font: inherit;
  font-size: .7rem;
  line-height: 1.2;
  height: auto;            /* 由 padding 控制高度 */
  padding: .5rem .7rem;    /* 和 select 一致 */
  border-radius: 10px;
  min-width: 86px;         /* 可选：与 select 最小宽度相同，若不想固定可删 */
  background: linear-gradient(145deg,var(--color-surface),var(--color-bg-alt));
  border: 1px solid var(--color-border);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  cursor: pointer;
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast), background .25s, color .25s;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}

:root.light .top-actions #btn-theme.topbar-theme-btn {
  background: linear-gradient(145deg,#ffffff,#f0f4f8);
  border: 1px solid #c9d3de;
  color: #1f2732;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

.top-actions #btn-theme.topbar-theme-btn:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent),0 0 0 4px rgba(13,107,255,.18);
}
:root.light .top-actions #btn-theme.topbar-theme-btn:hover {
  border-color:#0d6bff;
  box-shadow:0 0 0 1px #0d6bff,0 0 0 4px rgba(13,107,255,.20);
  background:#ffffff;
}

/* 徽章和图标字号微调，使整体高度与 select 保持一致不“撑高” */
.top-actions #btn-theme.topbar-theme-btn .theme-mode-badge {
  font-size: .55rem;
  padding: .2rem .4rem;
  line-height: 1;
}

/* 让内部 emoji 不撑破高度；统一 line-height */
.top-actions #btn-theme.topbar-theme-btn .icon {
  font-size: .95em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* Focus 可及性（与 select focus 边框光环一致） */
.top-actions #btn-theme.topbar-theme-btn:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(13,107,255,.25);
}
:root.light .top-actions #btn-theme.topbar-theme-btn:focus-visible {
  border-color:#0d6bff;
  box-shadow:0 0 0 2px rgba(13,107,255,.25);
}

/* 保留自动模式徽章的渐变 */
.top-actions #btn-theme.topbar-theme-btn[data-mode="auto"] .theme-mode-badge {
  background: linear-gradient(120deg,#0d6bff,#7a3dff);
  color:#fff;
}

/* === Logo 样式（追加到文件末尾） === */
.brand {
  display:flex;
  align-items:center;
  gap:.65rem;
  min-width:0;
}

.logo-symbol {
  width:42px;
  height:42px;
  flex-shrink:0;
  display:block;
  /* 让整个 SVG 在深色下更清晰 */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

:root.light .logo-symbol {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.15));
}

/* 在非常窄的视口可以只显示图标（可选） */
@media (max-height: 500px) {
  .brand-text { display:none; }
}

/* 微动画：加载时火花淡入 */
.logo-spark-1, .logo-spark-2 {
  animation: spark-in .9s ease both;
}
.logo-spark-2 { animation-delay:.15s; }

@keyframes spark-in {
  from { transform:scale(.4); opacity:0; }
  60% { opacity:1; transform:scale(1.15); }
  to { opacity:1; transform:scale(1); }
}

/* 可选：悬停轻微浮动 */
.brand:hover .logo-symbol {
  transform:translateY(-1px);
  transition:transform .35s cubic-bezier(.4,.1,.2,1);
}