/* 闲时 · 轻松自在 / 阳光手绘 */
:root {
  --bg: #fff8e8;
  --bg-elev: #fffdf6;
  --ink: #2f4a3a;
  --muted: #6e8575;
  --line: rgba(47,74,58,.18);
  --accent: #f0b429;
  --accent-soft: rgba(240,180,41,.2);
  --danger: #c45c4a;
  --radius: 20px;
  --shadow: 0 10px 0 rgba(47,74,58,.06);
  --font: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --display: "KaiTi", "STKaiti", "楷体", "Palatino Linotype", serif;
  --glow-a: rgba(240,180,41,.14);
  --glow-b: rgba(90,150,120,.1);
  --sketch: #2f4a3a;
}
html[data-theme="dark"] {
  --bg: #162019;
  --bg-elev: #1f2c24;
  --ink: #e8f2ea;
  --muted: #9bb5a5;
  --line: rgba(232,242,234,.14);
  --accent: #e6c15a;
  --accent-soft: rgba(230,193,90,.16);
  --shadow: 0 10px 0 rgba(0,0,0,.25);
  --glow-a: rgba(230,193,90,.08);
  --glow-b: rgba(60,100,80,.15);
  --sketch: #cfe0d4;
}

body.skin-leisure {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--glow-a), transparent 55%),
    radial-gradient(circle at 90% 20%, var(--glow-b), transparent 35%),
    repeating-linear-gradient(
      -8deg,
      transparent,
      transparent 11px,
      rgba(47,74,58,.03) 11px,
      rgba(47,74,58,.03) 12px
    ),
    var(--bg);
}

body.skin-leisure .brand {
  border-bottom: 3px solid var(--accent);
  padding-bottom: .18rem;
  align-items: flex-end;
}
body.skin-leisure .brand-domain {
  letter-spacing: .2em;
  color: color-mix(in srgb, var(--muted) 75%, var(--accent));
}

body.skin-leisure .hero-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.skin-leisure .logo-hero {
  position: relative;
  display: inline-block;
  /* 避免与 slogan-live(inline-block) 挤在同一行 */
  margin: 0 auto;
}
body.skin-leisure .logo-hero::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 6%;
  bottom: .08em;
  height: 10px;
  background:
    radial-gradient(circle at 10% 50%, var(--accent) 0 2px, transparent 2.5px) 0 0 / 14px 10px repeat-x,
    linear-gradient(180deg, transparent 4px, color-mix(in srgb, var(--accent) 55%, transparent) 5px 7px, transparent 8px);
  pointer-events: none;
  opacity: .85;
}

body.skin-leisure .slogan {
  display: block;
  width: 100%;
  max-width: 22em;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
body.skin-leisure .slogan-live {
  display: block;
}

body.skin-leisure .mag-card {
  border: 2.5px solid var(--sketch);
  border-radius: 28px 18px 30px 20px;
  box-shadow:
    6px 8px 0 var(--accent-soft),
    0 0 0 4px var(--bg);
  outline: 1.5px dashed color-mix(in srgb, var(--sketch) 35%, transparent);
  outline-offset: 5px;
}

body.skin-leisure .btn {
  border: 2px solid var(--sketch);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--accent);
  font-weight: 600;
}
body.skin-leisure .btn:not(.ghost) {
  background: var(--ink);
  color: var(--bg);
}
body.skin-leisure .btn.ghost {
  background: transparent;
  box-shadow: 2px 2px 0 var(--accent-soft);
}

body.skin-leisure .card-title {
  line-height: 1.4;
}
body.skin-leisure .card-cat {
  color: var(--ink);
  background: var(--accent-soft);
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 999px;
  border: 1.5px solid var(--sketch);
}

body.skin-leisure .ext-link {
  border-bottom: 2px dotted var(--accent);
  text-decoration: none;
}

body.skin-leisure .tags a {
  border: 1.5px solid var(--line);
  background: var(--bg);
}

body.skin-leisure .reader-hint {
  letter-spacing: .12em;
}

body.skin-leisure .ad-slot,
body.skin-leisure .profile-card,
body.skin-leisure .mini-card {
  border: 2px solid var(--line);
  border-radius: 24px 16px 22px 18px;
}
