/* ============================================================
   EncyWorthTraffic Pro v3.5 — Theme: Paper Sketch (paper)  [NEW]
   Hand-drawn notebook: dashed ink borders, marker highlights,
   tilted sticky cards, graph-paper texture.
   ============================================================ */

:root {
  --bg:#fffdf5; --text:#4a4a44; --head:#1f2430; --muted:#92907f;
  --link:#1d4ed8; --link-hover:#f59e0b;
  --accent:#f59e0b; --accent-dark:#d97706; --accent2:#1d4ed8;
  --surface:#ffffff; --surface-solid:#ffffff;
  --border:#d9d4c5; --border-soft:#e8e4d8; --border-line:#e8e4d8;
  --shadow:3px 3px 0 rgba(31,36,48,.16);
  --bar-bg:#1f2430; --bar-border:#000000; --bar-link:#e3e0d3;
  --band:#fef9c3; --band-border:#d9d4c5;
  --tip-bg:#fef9c3; --tip-border:#eab308; --tip-text:#713f12;
  --info-bg:#fffbeb; --info-text:#713f12;
  --th-bg:#fdf6e3; --input-border:#c9c3b0; --input-shadow:none;
  --foot-border:#d9d4c5; --foot-text:#92907f;
  --kw-bg:#fef9c3; --kw-border:#e8e4d8;
  --card-border:#1f2430; --card-sub:#4a4a44; --card-title:#1f2430; --card-date:#92907f;
  --num:#1f2430;
  --ok-bg:#ecfccb; --ok-text:#3f6212; --ok-border:#a3a835;
  --bad-bg:#fee2e2; --bad-text:#b91c1c; --bad-border:#fca5a5;
  --hx-btn-text:#1f2430;
  --hx-ico-bg:#fef9c3;
  --hx-cta-bg:#1d4ed8;
  --hx-cta-text:#ffffff;
  --hx-soft:#fdf6e3;
}
[data-theme="dark"] {
  --bg:#20222b; --text:#c2c1b4; --head:#f4f2e7; --muted:#8b8a7c;
  --link:#93b4ff; --link-hover:#fbbf24;
  --surface:#2a2d38; --border:#45485a; --border-soft:#363a48; --border-line:#363a48;
  --bar-bg:#181a22; --bar-border:#363a48; --bar-link:#c2c1b4;
  --band:#262933; --band-border:#45485a; --card-border:#45485a;
  --card-title:#f4f2e7; --card-sub:#c2c1b4; --card-date:#8b8a7c; --num:#f4f2e7; --th-bg:#30333f;
  --kw-bg:#30333f; --kw-border:#45485a; --info-bg:#2a2d38; --tip-bg:#30333f; --tip-border:#45485a;
  --shadow:3px 3px 0 rgba(0,0,0,.4);
}

/* ---------- global identity: handwriting feel ---------- */
body.theme-paper { font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", "Trebuchet MS", "Segoe UI", sans-serif; }
body.theme-paper h1, body.theme-paper h2, body.theme-paper h3, body.theme-paper .hx-title { letter-spacing: .01em; }
body.theme-paper a { color: var(--link); }

/* header */
body.theme-paper #header { background: var(--bar-bg); border-bottom: 2px dashed var(--accent); }
body.theme-paper #header li a { font-weight: 700; }
body.theme-paper #header li a:hover { color: #fde047; text-decoration: none; }

/* search: notebook paper strip */
body.theme-paper #search {
  background:
    linear-gradient(90deg, rgba(29,78,216,.08) 1px, transparent 1px),
    linear-gradient(rgba(29,78,216,.05) 1px, transparent 1px),
    var(--bg);
  background-size: 26px 26px, 26px 26px, auto;
  border-bottom: 2px dashed var(--accent2);
}
body.theme-paper #logo a { color: var(--head); font-weight: 800; }
body.theme-paper #logo a .logo-accent { background: linear-gradient(180deg, transparent 55%, #fde047 55%); }
body.theme-paper #search form input[type=text] {
  border: 2px dashed var(--input-border); border-radius: 8px 8px 8px 0; background: #fffef8; transform: rotate(-.4deg);
}
body.theme-paper #search form input[type=text]:focus { border-color: var(--accent2); transform: rotate(0deg); }
body.theme-paper #search form input[type=submit] {
  background: var(--accent); border: 2px solid var(--head); border-radius: 8px 8px 8px 0; box-shadow: var(--shadow); font-weight: 800; color: var(--head);
}
body.theme-paper #search form input[type=submit]:hover { transform: translate(1px,1px); box-shadow: 2px 2px 0 rgba(31,36,48,.16); }

/* content */
body.theme-paper #content > div { border: 0; background: transparent; box-shadow: none; }
body.theme-paper #content .right { background: var(--surface); border: 2px dashed var(--border); border-radius: 4px 26px 4px 26px; margin: 12px 0; }
body.theme-paper .rec-strip { background: var(--tip-bg); border-bottom: 2px dashed var(--tip-border); }
body.theme-paper table.styled { border: 2px dashed var(--border); border-radius: 4px; background: #fffef8; }
body.theme-paper .calc-form input[type=text], body.theme-paper .calc-form select, body.theme-paper .calc-form input[type=number] {
  border: 2px dashed var(--input-border); border-radius: 8px 8px 8px 0; background: #fffef8;
}
body.theme-paper .calc-form button, body.theme-paper .btn-orange {
  background: var(--accent); color: var(--head); border: 2px solid var(--head); border-radius: 8px 8px 8px 0; box-shadow: var(--shadow); font-weight: 800;
}
body.theme-paper .calc-form button:hover { transform: translate(1px,1px); box-shadow: 2px 2px 0 rgba(31,36,48,.16); }
body.theme-paper .blog-card, body.theme-paper .feature-link, body.theme-paper .tool-link {
  border: 2px solid var(--card-border); border-radius: 4px 22px 4px 22px; box-shadow: var(--shadow); background: var(--surface);
}
body.theme-paper #footer { background: var(--bg); border-top: 2px dashed var(--accent2); }
body.theme-paper ::selection { background: #fde047; color: #1f2430; }

/* ---------- homepage: sketch hero ---------- */
body.theme-paper .hx-hero { padding: 76px 0 60px; }
body.theme-paper .hx-kicker {
  display: inline-flex; background: #fde047; color: #1f2430; padding: 5px 14px; transform: rotate(-1.4deg);
  border-radius: 2px 12px 2px 12px; box-shadow: var(--shadow); text-transform: none; letter-spacing: .02em;
}
body.theme-paper .hx-kicker::before { display: none; }
body.theme-paper .hx-title .hx-marker {
  background: linear-gradient(180deg, transparent 58%, #a5f3fc 58%, #a5f3fc 92%, transparent 92%);
  padding: 0 .1em;
}
body.theme-paper .hx-title .hx-marker-2 {
  background: linear-gradient(180deg, transparent 58%, #fda4af 58%, #fda4af 92%, transparent 92%);
  padding: 0 .1em;
}
body.theme-paper .hx-sub { font-weight: 600; }
body.theme-paper .hx-search input[type=text] { height: 56px; }
body.theme-paper .hx-search input[type=submit] { height: 56px; }
body.theme-paper .hx-chip { border: 2px dashed var(--border); border-radius: 14px 3px 14px 3px; background: #fffef8; }
body.theme-paper .hx-chip:hover { border-color: var(--accent); border-style: solid; }
body.theme-paper .hx-stat, body.theme-paper .hx-feat, body.theme-paper .hx-tool, body.theme-paper .hx-topcard {
  border: 2px solid var(--card-border); border-radius: 6px 20px 6px 20px; box-shadow: var(--shadow); background: var(--surface);
}
body.theme-paper .hx-stat:nth-child(odd) { transform: rotate(-.5deg); }
body.theme-paper .hx-stat:nth-child(even) { transform: rotate(.5deg); }
body.theme-paper .hx-stat:hover, body.theme-paper .hx-feat:hover, body.theme-paper .hx-tool:hover { transform: rotate(0deg) translateY(-3px); }
body.theme-paper .hx-stat .hx-num { font-weight: 800; }
body.theme-paper .hx-ico { border: 2px dashed var(--head); border-radius: 10px 3px 10px 3px; background: var(--hx-ico-bg); }
body.theme-paper .hx-rank { border-radius: 50% 6px 50% 6px; background: var(--accent); color: var(--head); border: 2px solid var(--head); }
body.theme-paper .hx-tops--table { border: 2px dashed var(--border); border-radius: 6px; }
body.theme-paper .hx-cta { border: 2px solid var(--hx-cta-bg); border-radius: 8px 30px 8px 30px; box-shadow: 6px 6px 0 rgba(29,78,216,.25); }
body.theme-paper .hx-cta .hx-btn { border: 2px solid #fff; border-radius: 8px 16px 8px 16px; background: #fde047; color: #1f2430; }
