/* ============================================================
   橙壹 · 装扮样式（2026-10-16）
   1) 装扮面板 UI
   2) 侧栏「浅色 / 品牌色」风格适配
   3) 界面密度档位
   4) 背景氛围
   5) 暗色主题的细节修正
   依赖 theme.js 注入的 CSS 变量，单独引用无效
   ============================================================ */

/* ---------- 1) 装扮面板 ---------- */
.ts-modal { max-width: 620px; width: 92vw; }
.theme-studio { max-height: 68vh; overflow-y: auto; }

.ts-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .4px;
  margin: 18px 0 9px;
}
.theme-studio .ts-label:first-child { margin-top: 2px; }

/* 模板网格 */
.ts-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 9px;
}
.ts-preset {
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 10px 8px 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color .15s, transform .1s, box-shadow .15s;
  position: relative;
}
.ts-preset:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ts-preset.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.ts-preset.active::after {
  content: "✓";
  position: absolute;
  top: 5px; right: 7px;
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
}
.ts-dots { display: flex; gap: 4px; }
.ts-dot {
  width: 15px; height: 15px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.ts-preset-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.ts-preset-tag { font-size: 10.5px; color: var(--muted); }

/* 主色色板 */
.ts-colors { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ts-color {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
  transition: transform .1s;
  position: relative;
}
.ts-color:hover { transform: scale(1.12); }
.ts-color.active {
  border-color: var(--text);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.ts-color-pick {
  width: 30px; height: 30px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.ts-reset-color {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
.ts-reset-color.active { border-color: var(--primary); color: var(--primary); font-weight: 600; }

/* 选项组（侧栏 / 圆角 / 密度 / 背景） */
.ts-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ts-option {
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 9px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: border-color .15s, background .15s;
}
.ts-option:hover { border-color: var(--border-strong); }
.ts-option.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 2px var(--primary-glow);
}
.ts-option-label { font-size: 13px; font-weight: 600; color: var(--text); }
.ts-option-desc { font-size: 10.5px; color: var(--muted); }

.ts-foot-hint { font-size: 11.5px; color: var(--muted); margin-right: auto; margin-left: 4px; }

/* 窄屏：选项组两列 */
@media (max-width: 560px) {
  .ts-options { grid-template-columns: repeat(2, 1fr); }
  .ts-presets { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

/* ---------- 2) 侧栏风格适配（把硬编码的半透明白换成变量） ---------- */
.sidebar { background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%); }
.sidebar-foot { border-top: 1px solid var(--sidebar-line); }
.side-btn {
  background: var(--sidebar-btn-bg);
  border-color: var(--sidebar-btn-border);
}
.side-btn:hover { background: var(--sidebar-btn-hover); }
.nav-item.active { color: var(--sidebar-active-text); box-shadow: 0 4px 14px var(--primary-glow); }
.brand-logo {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 4px 12px var(--primary-glow);
}
.topbar h1::before { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); }
.topbar { background: var(--topbar-bg); }

/* 浅色侧栏：底部的按钮分隔线与文字对比度 */
html[data-sidebar="light"] .brand-logo { box-shadow: 0 4px 12px var(--primary-glow); }
html[data-sidebar="brand"] .nav-item.active { box-shadow: none; }
html[data-sidebar="brand"] .side-btn:hover { color: #fff; }

/* ---------- 3) 界面密度 ---------- */
html[data-density="compact"] .content { padding: 16px 20px 40px; }
html[data-density="compact"] .topbar { height: 54px; padding: 0 20px; }
html[data-density="compact"] .card { padding: 14px 16px; }
html[data-density="compact"] .card-title { margin-bottom: 10px; font-size: 14px; }
html[data-density="compact"] .table th,
html[data-density="compact"] .table td { padding: 7px 11px; }
html[data-density="compact"] .nav-item { padding: 8px 13px; font-size: 13px; }
html[data-density="compact"] .brand { padding: 18px 22px 13px; font-size: 17px; }
html[data-density="compact"] .stat { padding: 12px 14px; }
html[data-density="compact"] .stat-value { font-size: 22px; }

html[data-density="cozy"] .content { padding: 34px 36px 60px; }
html[data-density="cozy"] .topbar { height: 70px; padding: 0 36px; }
html[data-density="cozy"] .card { padding: 26px 28px; }
html[data-density="cozy"] .table th,
html[data-density="cozy"] .table td { padding: 15px 16px; }
html[data-density="cozy"] .table { font-size: 14px; }
html[data-density="cozy"] .nav-item { padding: 12.5px 14px; font-size: 14.5px; }
html[data-density="cozy"] .brand { padding: 28px 22px 22px; }
html[data-density="cozy"] .stat { padding: 22px 20px; }
html[data-density="cozy"] .stat-value { font-size: 30px; }

/* ---------- 4) 背景氛围 ---------- */
html[data-bgstyle="gradient"] body {
  background:
    radial-gradient(1200px 620px at 8% -8%, var(--primary-soft), transparent 62%),
    radial-gradient(900px 520px at 102% 4%, var(--primary-soft), transparent 58%),
    var(--bg);
  background-attachment: fixed;
}
/* 渐变氛围下，内容区卡片要保留自己的底色才不糊 */
html[data-bgstyle="gradient"] .main { background: transparent; }
html[data-bgstyle="gradient"] .content { background: transparent; }
html[data-bgstyle="gradient"] .card { background: var(--surface); }

html[data-bgstyle="grid"] body {
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 26px 26px;
  background-attachment: fixed;
}
html[data-bgstyle="grid"] .card { background: var(--surface); }

/* ---------- 5) 暗色主题细节修正 ---------- */
html[data-dark="1"] img { filter: brightness(.92); }
html[data-dark="1"] ::-webkit-scrollbar-thumb { background: #464a52; }
html[data-dark="1"] ::-webkit-scrollbar-thumb:hover { background: #5a5f68; }
html[data-dark="1"] html,
html[data-dark="1"] { scrollbar-color: #464a52 transparent; }
html[data-dark="1"] .modal-overlay { background: rgba(0,0,0,.55); }
html[data-dark="1"] .table tr:hover td { background: var(--bg-hover); }
html[data-dark="1"] .topbar { border-bottom-color: var(--border); }
/* 暗色下提示条用面板色，避免和深背景糊在一起 */
html[data-dark="1"] .toast:not(.success):not(.error) {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
html[data-dark="1"] input::placeholder,
html[data-dark="1"] textarea::placeholder { color: var(--muted); opacity: .85; }
/* 暗色下代码块/引用块不刺眼 */
html[data-dark="1"] code { background: var(--surface-2); color: var(--text); }
/* 暗色下橙色描边/浅底块自动跟随变量，无需额外处理 */

/* ---------- 6) 装扮入口按钮 ---------- */
.side-btn .ts-entry-emoji { margin-right: 2px; }