/* Theme: Sunset Wave — warm orange-to-pink gradient hero with SVG wave divider,
   cream body, coral buttons, soft warm shadows, gradient stats band. */

:root {
  --bg:#fffaf5; --text:#7c5a4e; --head:#431407; --muted:#a78b78;
  --link:#ea580c; --link-hover:#db2777; --accent:#f97316; --accent-dark:#ea580c; --accent2:#ec4899;
  --surface:#ffffff; --border:#f5e3d7; --border-soft:#faede2; --border-line:#faede2;
  --shadow:0 8px 26px rgba(249,115,22,.13);
  --bar-bg:#431407; --bar-border:#7c2d12; --bar-link:#fed7aa;
  --band:#fff4ea; --band-border:#f5e3d7;
  --tip-bg:#fff7ed; --tip-border:#fdba74; --tip-text:#9a3412;
  --info-bg:#fff7ed; --info-text:#9a3412;
  --th-bg:#fff4ea; --input-border:#e7c4ae; --input-shadow:0 1px 2px rgba(67,20,7,.06);
  --ok-bg:#f0fdf4; --ok-text:#15803d; --ok-border:#bbf7d0;
  --mid-bg:#fefce8; --mid-text:#a16207; --mid-border:#fde68a;
  --bad-bg:#fef2f2; --bad-text:#b91c1c; --bad-border:#fecaca;
  --kw-bg:#fff4ea; --kw-border:#f5e3d7;
  --card-border:#f5e3d7; --card-sub:#7c5a4e; --card-title:#431407; --card-date:#a78b78;
  --num:#ea580c;
  --hx-grad: linear-gradient(125deg,#7c2d12 0%,#c2410c 30%,#f97316 62%,#ec4899 100%);
}
[data-theme="dark"] {
  --bg:#1c1008; --text:#d6b8a4; --head:#fff7ed; --muted:#a78b78;
  --link:#fb923c; --link-hover:#fda4af;
  --surface:#26150a; --border:#472912; --border-soft:#361d0d; --border-line:#361d0d;
  --shadow:0 10px 30px rgba(0,0,0,.5);
  --bar-bg:#120a04; --bar-border:#472912;
  --band:#201107; --band-border:#472912;
  --th-bg:#2d1a0c; --input-border:#5a361c; --input-shadow:none;
  --kw-bg:#2d1a0c; --kw-border:#472912;
  --card-border:#472912; --card-sub:#d6b8a4; --card-title:#fff7ed; --card-date:#a78b78;
  --num:#fb923c;
}

body { font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
#content > div { border: 0; box-shadow: none; background: transparent; border-radius: 0; }
#content .wrapper { padding: 30px 0 40px; }
#content .left { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 20px; padding: 34px 40px; box-shadow: var(--shadow); }
h1, h2, h3, h4 { color: var(--head); }

/* header */
#header { background: var(--bar-bg); border-bottom: 0; }
#header li a:hover { color: #fb923c !important; }
#logo a { color: var(--head); }
#logo a .logo-accent { color: var(--accent); }
#search { background: var(--surface); }
#search form input[type=submit] { background: linear-gradient(120deg,#f97316,#ec4899); border: 0; text-shadow: none; font-weight: 800; box-shadow: var(--shadow); }
.rec-strip { background: #fff7ed; border-bottom: 2px solid #fdba74; }
.rec-strip a { color: var(--accent); }

/* wave hero */
.hx-hero--wave { background: var(--hx-grad); padding: 76px 0 118px; color: #fff; text-align: center; }
.hx-hero--wave .hx-kicker { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.32); }
.hx-hero--wave h1 { color: #fff; text-shadow: 0 2px 24px rgba(124,45,18,.4); }
.hx-hero--wave h1 em { font-style: normal; color: #fde68a; }
.hx-hero--wave .hx-sub { color: rgba(255,255,255,.9); margin-inline: auto; }
.hx-hero--wave .hx-search { margin-inline: auto; }
.hx-hero--wave .hx-search input[type=text] { background: rgba(255,255,255,.96); border-color: transparent; color: #431407; box-shadow: 0 12px 34px rgba(67,20,7,.35); }
.hx-hero--wave .hx-search input[type=submit] { background: #431407; box-shadow: 0 12px 30px rgba(67,20,7,.4); }
.hx-hero--wave .hx-search input[type=submit]:hover { background: #5c1f0b; }
.hx-hero--wave .hx-chip { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
.hx-wave { position: absolute; inset-inline: 0; bottom: -1px; z-index: 1; display: block; width: 100%; height: 74px; }

/* warm sections */
.hx-stats--4 .hx-stat { border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(150deg,#fff,#fff7ed); box-shadow: var(--shadow); }
.hx-stats--4 .hx-stat b { color: var(--accent); }
.hx-stats--4 .hx-stat:nth-child(2) b { color: #ec4899; }
.hx-stats--4 .hx-stat:nth-child(3) b { color: #d97706; }
.hx-stats--4 .hx-stat:nth-child(4) b { color: #db2777; }
.hx-feat { border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--border); background: var(--surface); }
.hx-feat:hover { transform: translateY(-3px); }
.hx-tool { border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 3px 14px rgba(249,115,22,.08); }
.hx-tool:hover { border-color: var(--accent); }
.hx-tool .hx-ico { border-radius: 12px; }
.hx-topcard { border-radius: 18px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.hx-topcard .hx-rank { background: linear-gradient(120deg,#f97316,#ec4899); color: #fff; border-radius: 12px; }
.hx-recent a { border: 1px solid var(--border); box-shadow: 0 3px 12px rgba(249,115,22,.09); }

/* CTA gradient */
.hx-cta { background: var(--hx-grad); color: #fff; border-radius: 22px; max-width: 1152px; margin-inline: auto; box-shadow: var(--shadow); }
.hx-cta h2, .hx-cta p { color: #fff; }
.hx-cta .hx-btn { background: #fff; color: #c2410c; }

/* inner pages */
button[type=submit], .btn { background: linear-gradient(120deg,#f97316,#ec4899); border: 0; border-radius: 12px; text-shadow: none; font-weight: 700; }
.styled th, .table th { background: #fff4ea; color: #9a3412; }
.styled, .table { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.blog-card { border-radius: 18px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.big-stat { background: linear-gradient(120deg,#f97316,#ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
#footer { background: var(--bar-bg); }
#footer a { color: #fed7aa; }