:root{
  --bg:#F9F7F4; --ink:#0E0E0E; --muted:#B0B0B0; --card:#EDE5DA;
  --accent:#D85A28; --focus:#2F6FED;
}
/* genre themes */
:root[data-theme="romance"]{ --accent:#C45A6A; }
:root[data-theme="fantasy"]{ --accent:#B65ACF; }
:root[data-theme="scifi"]{ --accent:#2AA6C8; }
:root[data-theme="horror"]{ --accent:#A33A5B; }
:root[data-theme="litrpg"]{ --accent:#3AA67A; }
:root[data-theme="nonfiction"]{ --accent:#D1873A; }

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 Inter, system-ui;}
header,main,footer{max-width:1000px;margin:0 auto;padding:1.25rem}
nav a{margin-right:1rem;text-decoration:none;color:var(--ink)}
h1,h2,h3{font-family:"Cormorant Garamond",serif;line-height:1.2;margin:.6rem 0}
.hero{padding:2rem 1.25rem 1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:var(--card);border:1px solid var(--muted);border-radius:14px;padding:1rem}
.btn{display:inline-block;padding:.8rem 1rem;border-radius:12px;text-decoration:none;font-weight:600}
.btn-primary{background:var(--accent);color:#fff}
.btn-secondary{border:1px solid var(--muted);color:var(--ink);background:transparent}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.toast{position:fixed;bottom:20px;right:20px;background:var(--ink);color:#fff;padding:.6rem .8rem;border-radius:10px;opacity:0;transform:translateY(8px);transition:.2s}
.toast.show{opacity:1;transform:translateY(0)}
.guide{position:fixed;bottom:20px;left:20px;max-width:320px;background:#fff;border:1px solid var(--muted);border-radius:12px;padding:.75rem 1rem;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.guide h4{margin:.2rem 0 .4rem 0}
.guide small{display:block;color:#555;margin-top:.4rem}
.controls{display:flex;gap:.5rem;align-items:center}
.progress{height:4px;background:var(--card);border-radius:999px;overflow:hidden;margin:.5rem 0 1rem}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),transparent)}
.form-row{margin:.75rem 0}
label{display:block;margin-bottom:.25rem}
input,select,textarea{width:100%;padding:.6rem;border:1px solid var(--muted);border-radius:10px;background:#fff;color:var(--ink)}
.copy-btn{cursor:pointer;border:1px solid var(--muted);background:#fff;border-radius:10px;padding:.4rem .6rem}
footer{color:#444;font-size:.9rem}
.badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;background:var(--card);border:1px solid var(--muted);font-size:.8rem}
/* =========================================
   EVERDRAFT — LEATHER TOME AESTHETIC v2
   Drop-in theme polish (no HTML changes)
   ========================================= */

/* Palette */
:root{
  --ink: #221a16;
  --ink-soft:#3a2c25;
  --gold:#c9a34a;
  --gold-deep:#8c6e2b;
  --parchment:#f4ecd8;
  --parchment-ink:#2a221d;
  --parchment-edge:#e2d6bb;
  --shadow-900: rgba(0,0,0,.55);
  --shadow-700: rgba(0,0,0,.35);
  --shadow-500: rgba(0,0,0,.2);
}

/* Leather background + vignette */
html, body {
  color: var(--parchment);
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  background:
    radial-gradient(1200px 800px at 50% 30%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)),
    url("/img/leather.jpg");
  background-size: cover, 100% 100%, cover;
  background-attachment: fixed, fixed, fixed;
  background-position: center center, center center, center center;
  min-height: 100dvh;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 800px at 50% 40%, rgba(0,0,0,0) 50%, rgba(0,0,0,.40) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px);
  mix-blend-mode:multiply;
}

/* Engraved nav */
header nav { display:flex; gap:.8rem; padding:.8rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.4);
  position:relative; z-index:2;
}
header nav a{
  color:#f1e9d6; text-decoration:none; text-transform: lowercase;
  letter-spacing:.06em; padding:.25rem .55rem; border-radius:.3rem;
}
header nav a:hover{
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.45);
}

/* Page container keeps the “book page” centered */
main.hero{ position:relative; z-index:1; max-width:1000px; margin:2rem auto; }

/* Parchment cards with depth */
.card{
  background:
    radial-gradient(800px 600px at 50% 20%, rgba(255,255,255,.35), rgba(255,255,255,.06)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 2px),
    var(--parchment);
  color: var(--parchment-ink);
  border-radius: 16px;
  border: 1px solid var(--parchment-edge);
  box-shadow:
    0 2px 0 rgba(255,255,255,.7) inset,
    0 0 0 1px rgba(0,0,0,.05) inset,
    0 10px 30px var(--shadow-900),
    0 2px 8px var(--shadow-700);
  padding:1.1rem 1.2rem;
  position:relative;
  overflow:clip;
}

/* Decorative corner flourishes (SVG data-URI) */
.card::after{
  content:"";
  position:absolute; inset:10px;
  pointer-events:none;
  border-radius:12px;
  background:
    /* top-left */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><path fill='none' stroke='%238c6e2b' stroke-width='1.2' d='M60 12c-12 0-20 8-20 20M52 12c-8 0-16 8-16 16'/></svg>") no-repeat 0 0 / 72px 72px,
    /* top-right */
    url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><path fill='none' stroke='%238c6e2b' stroke-width='1.2' d='M12 12c12 0 20 8 20 20M20 12c8 0 16 8 16 16'/></svg>\") no-repeat right 0 / 72px 72px,
    /* bottom-left */
    url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><path fill='none' stroke='%238c6e2b' stroke-width='1.2' d='M60 60c-12 0-20-8-20-20M52 60c-8 0-16-8-16-16'/></svg>\") no-repeat 0 100% / 72px 72px,
    /* bottom-right */
    url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><path fill='none' stroke='%238c6e2b' stroke-width='1.2' d='M12 60c12 0 20-8 20-20M20 60c8 0 16-8 16-16'/></svg>\") no-repeat 100% 100% / 72px 72px;
  opacity:.55;
}

/* Subtle page curl on hover */
.card:hover{
  transform: translateY(-1px);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow:
    0 2px 0 rgba(255,255,255,.7) inset,
    0 0 0 1px rgba(0,0,0,.05) inset,
    0 14px 36px var(--shadow-900),
    0 4px 12px var(--shadow-700);
}
.card::before{
  content:"";
  position:absolute; right:0; bottom:0; width:80px; height:80px;
  background: radial-gradient(80px 80px at 100% 100%, rgba(0,0,0,.25), transparent 60%);
  opacity:.8;
}

/* Headings — gold foil shimmer on hover */
h1, h2, h3{
  font-family: "IM Fell English", ui-serif, Georgia, serif;
  letter-spacing:.02em;
  color:#f6f1e6;
  text-shadow: 1px 1px 0 rgba(0,0,0,.55), -1px -1px 0 rgba(255,255,255,.07);
  position:relative;
}
h1:hover, h2:hover, h3:hover{
  background: linear-gradient(90deg, #f3e7bf 0%, #c9a34a 20%, #8c6e2b 40%, #c9a34a 60%, #f3e7bf 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 8px rgba(201,163,74,.25));
  background-size:200% 100%; animation: foil 2.2s linear infinite;
}
@keyframes foil{ to{ background-position:200% 0; } }

/* Inputs — parchment ink look */
label{ color:var(--ink-soft); font-weight:600; }
textarea, select, input[type="text"]{
  background: rgba(255,255,255,.88);
  border: 1px solid #d7cdb6;
  color: #2b241f;
  border-radius: 10px;
  padding:.65rem .75rem;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
textarea::placeholder{ color:#7a6d5b; }

/* Buttons — aged brass */
.btn, button, .copy-btn{
  font-family: "IM Fell English", ui-serif, Georgia, serif;
  letter-spacing:.03em;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  color:#1b140e; border:1px solid #5b4615; border-radius:12px;
  padding:.55rem .9rem; cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 6px 14px rgba(0,0,0,.35);
}
.btn:hover, button:hover, .copy-btn:hover{ filter:brightness(1.06); }
.btn.btn-secondary{
  background: linear-gradient(180deg, #b6b1a5 0%, #8f8a7f 100%);
  border-color:#5e5a52; color:#1b140e;
}

/* Badges — ribbon feel */
.badge{
  background: rgba(0,0,0,.35);
  color:#f2eada; border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  padding:.25rem .55rem; border-radius:999px;
}

/* Layout niceties */
.grid{ gap:.9rem; }
.form-row{ margin:.65rem 0; }
.controls{ display:flex; gap:.5rem; align-items:center; }

/* Custom selection + scrollbars */
::selection{ background:#c9a34a; color:#1b140e; }
*{ scrollbar-width:thin; scrollbar-color:#8c6e2b rgba(0,0,0,.25); }
*::-webkit-scrollbar{ height:10px; width:10px; }
*::-webkit-scrollbar-thumb{ background:#8c6e2b; border-radius:8px; border:2px solid rgba(0,0,0,.25); }
*::-webkit-scrollbar-track{ background: rgba(0,0,0,.25); border-radius:8px; }

/* Footer */
footer{
  color: rgba(255,255,255,.78);
  text-align:center; padding:1.25rem 0;
  border-top:1px solid rgba(255,255,255,.08);
}
/* --- Dark bronze headers on parchment cards --- */
.card h1,
.card h2,
.card h3 {
  color: #5c3b14;               /* deep bronze */
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.25),
    0 0 4px rgba(0, 0, 0, 0.25);
}

/* Slightly lighter hover shimmer */
.card h1:hover,
.card h2:hover,
.card h3:hover {
  background: linear-gradient(90deg, #a8792b, #c9a34a 40%, #8c6e2b 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(201,163,74,0.25));
}