/* Piik 主题美化 v1 · 2026-10-19
   由 Caddy 注入到站点首页；不改动 Piik 本体，删掉本文件与 index.html 中的 link 即还原。 */

/* ---------- 浅色：冷调纸面 + 靛蓝主色 ---------- */
:root {
  --wall: #f4f6fb;
  --wall-2: #e4e9f5;
  --paper: #ffffff;
  --ink: #1a2332;
  --primary: #4f6bf5;
  --action: #4f6bf5;
  --action-deep: #3a50d6;
  --action-text: #3a50d6;
  --control-hover: #eef1ff;
  --control-selected: #e2e7ff;
  --control-selected-ink: #26349b;
  --surface-shade: #1b2a451c;
  --surface-glaze: linear-gradient(165deg, #ffffffd9, transparent 62%, #4f6bf509);
}

/* ---------- 深色：更深的空间感 + 更亮的主色 ---------- */
:root[data-theme="dark"],
:root.dark {
  --wall: #11161f;
  --wall-2: #19212f;
  --paper: #222b3a;
  --ink: #eef3fb;
  --primary: #7b93ff;
  --control-hover: #2c3648;
  --control-selected: #38456b;
  --control-selected-ink: #e4e9ff;
  --surface-rim: #cfe0ff1c;
  --surface-shade: #00050f70;
  --surface-glaze: linear-gradient(165deg, #ffffff0a, transparent 62%, #7b93ff0d);
}
html[data-theme="dark"] {
  --frame: #0e131b;
  --stage: #0a0d13;
}

/* ---------- 环境光：极淡的双色氛围，不干扰内容 ---------- */
body {
  background-image:
    radial-gradient(1100px 620px at 6% -12%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 58%),
    radial-gradient(820px 520px at 104% 112%, color-mix(in srgb, #22d3ee 14%, transparent), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
:root[data-theme="dark"] body,
:root.dark body {
  background-image:
    radial-gradient(1100px 620px at 6% -12%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 56%),
    radial-gradient(820px 520px at 104% 112%, color-mix(in srgb, #22d3ee 16%, transparent), transparent 60%),
    radial-gradient(150% 110% at 50% -10%, transparent 42%, #00000059 100%);
}

/* ---------- 排版：标题收紧字距，正文更稳 ---------- */
h1, h2, h3 {
  letter-spacing: -0.012em;
}
.lr-cap, .lr-chip {
  -webkit-font-smoothing: antialiased;
}

/* ---------- 面板与舞台：更柔和的层次 ---------- */
.lr-sharing-panel {
  box-shadow:
    inset 0 1px 0 var(--surface-rim),
    0 2px 0 var(--surface-shade),
    0 30px 64px -30px color-mix(in srgb, var(--surface-shade) 85%, transparent);
}
.viewer-stage {
  box-shadow:
    0 40px 90px -52px #000c,
    inset 0 0 0 1px #ffffff0a;
}
.lr-tv-screen {
  box-shadow:
    inset 0 0 0 1px #ffffff10,
    inset 0 42px 90px -60px #ffffff1f,
    inset 0 -40px 90px -70px #000000cc;
}

/* ---------- 交互细节 ---------- */
::selection {
  background: color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--ink);
}
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 70%, transparent);
  outline-offset: 2px;
}

/* ---------- 细滚动条 ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 26%, transparent) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink) 36%, transparent);
  background-clip: content-box;
}

/* ---------- 主行动按钮：渐变 + 光晕 ---------- */
#host-start-share {
  background-image: linear-gradient(158deg,
    color-mix(in srgb, var(--primary) 82%, white) 0%,
    var(--primary) 52%,
    color-mix(in srgb, var(--primary) 78%, black) 100%);
  box-shadow:
    inset 0 1px 0 #ffffff4d,
    0 10px 28px -12px color-mix(in srgb, var(--primary) 78%, transparent),
    0 2px 0 color-mix(in srgb, var(--primary) 55%, black);
}
#host-start-share:is(:hover, :focus-visible):not(:disabled) {
  box-shadow:
    inset 0 1px 0 #ffffff59,
    0 16px 36px -14px color-mix(in srgb, var(--primary) 88%, transparent),
    0 2px 0 color-mix(in srgb, var(--primary) 55%, black);
}