/* PROMPTBL Styles */
:root {
  --bg: #0f1115;
  --bg-alt:#161b22;
  --bg-soft:#1e2530;
  --fg: #f5f7fa;
  --fg-dim:#c9d2dc;
  --border:#232b37;
  --acc:#6366f1;
  --acc-glow: 210 100% 60%;
  --danger:#ef4444;
  --warn:#f59e0b;
  --radius: .85rem;
  --shadow: 0 4px 16px -4px rgba(0,0,0,.5);
  --transition: .18s cubic-bezier(.4,0,.2,1);
  --font-stack: system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  --grad: linear-gradient(135deg,#6366f1,#8b5cf6 55%,#ec4899);
}

html[data-theme='light'] {
  --bg: #ffffff;
  --bg-alt:#f7f9fc; /* lighter for panels */
  --bg-soft:#eef2f7; /* inputs */
  --fg:#0e1014; /* darker text */
  --fg-dim:#374151; /* higher contrast dim */
  --border:#cfd7e3; /* stronger border */
  --shadow: 0 2px 10px rgba(0,0,0,.10);
}

* { box-sizing: border-box; }
body { margin:0; font-family: var(--font-stack); line-height:1.5; background: var(--bg); color: var(--fg); }

h1,h2,h3 { line-height:1.15; font-weight:700; letter-spacing:-.02em; }
h1 { font-size: clamp(2.4rem,4.2vw,3.4rem); margin:.5rem 0 1rem; }
h2 { font-size: clamp(1.8rem,3.2vw,2.4rem); margin:0 0 1rem; }
h3 { font-size: clamp(1.2rem,2vw,1.4rem); margin:1.2rem 0 .5rem; }
.lead { font-size: clamp(1.05rem,1.4vw,1.25rem); max-width: 62ch; }
p { max-width: 70ch; }

.wrap { width: min(1200px,100% - clamp(1rem,4vw,3rem)); margin-inline:auto; }
.flex { display:flex; }
.between { justify-content: space-between; }
.center-v { align-items:center; }

.site-header { position:sticky; top:0; background:rgba(15,17,21,.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom:1px solid var(--border); z-index:50; }
html[data-theme='light'] .site-header { background:rgba(255,255,255,.9); }
.brand { font-weight:700; display:flex; align-items:center; gap:.4rem; font-size:1.15rem; letter-spacing:.5px; }
.brand .accent { color: var(--acc); }
.logo { font-size:1.4rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.wordmark { font-weight:800; }

nav ul { list-style:none; display:flex; gap:1.4rem; padding:0; margin:0; }
nav a { color: var(--fg-dim); text-decoration:none; font-weight:500; position:relative; }
nav a:hover, nav a:focus { color: var(--fg); }
nav a:after { content:""; position:absolute; inset:auto 0 -6px; height:2px; background:var(--acc); opacity:0; transform:translateY(4px); transition:var(--transition); }
nav a:hover:after, nav a:focus:after { opacity:1; transform:translateY(0); }

.nav-toggle { display:none; }
.header-actions { display:flex; gap:.75rem; align-items:center; }

/* Ensure nav dropdown positions relative to nav container */
.main-nav { position: relative; }

.hero { padding: clamp(3rem,10vw,6rem) 0 3rem; background: radial-gradient(circle at 65% 35%,rgba(99,102,241,.25),transparent 60%), linear-gradient(180deg,#0f1115,#0f1115 60%,#12151b); }
html[data-theme='light'] .hero { background:linear-gradient(180deg,#f5f7fa,#f5f7fa 60%,#eef2f7); }
.hero-inner { display:flex; flex-direction:column; gap:1.2rem; }
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; }
.benefits { display:flex; gap:1rem 2rem; flex-wrap:wrap; padding:0; list-style:none; font-size:.95rem; margin:1rem 0 0; color:var(--fg-dim); }

.categories { padding:3rem 0 1.5rem; }
.category-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); margin-top:1rem; }
.category-card { background:var(--bg-alt); padding:1rem .95rem; border:1px solid var(--border); border-radius:var(--radius); position:relative; display:flex; flex-direction:column; gap:.5rem; cursor:pointer; transition:var(--transition); color:var(--fg); }
.category-card:hover { box-shadow:var(--shadow); transform:translateY(-4px); }
.category-card h3 { margin:.2rem 0 .2rem; font-size:1rem; }
.category-card .count { font-size:.75rem; opacity:.8; text-transform:uppercase; letter-spacing:.5px; color:var(--fg-dim); }
.category-card.active { outline:2px solid var(--acc); }

.library { padding:3rem 0 3.5rem; background: linear-gradient(180deg,var(--bg-alt),var(--bg)); }
.library-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; }
.controls { margin:1.25rem 0 .5rem; display:flex; flex-direction:column; gap:.75rem; }
.control-row { display:flex; flex-wrap:wrap; gap:.75rem; }
.search-wrap { position:relative; flex:1 1 280px; }
.search-wrap input { width:100%; }
.icon-btn { position:absolute; top:50%; right:.5rem; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--fg-dim); font-size:.9rem; }
.select-wrap select, input, textarea { font:inherit; background:var(--bg-alt); color:var(--fg); border:1px solid var(--border); border-radius:calc(var(--radius) - 4px); padding:.65rem .75rem; line-height:1.2; }
html[data-theme='light'] .select-wrap select, html[data-theme='light'] input, html[data-theme='light'] textarea { background:var(--bg-soft); }
.select-wrap select:focus, input:focus, textarea:focus { outline:2px solid var(--acc); outline-offset:1px; }

.active-filters { display:flex; gap:.5rem; flex-wrap:wrap; min-height:1.5rem; }
.filter-chip { background:var(--bg-soft); padding:.35rem .65rem; border-radius:2rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; display:flex; align-items:center; gap:.4rem; border:1px solid var(--border); }
.filter-chip button { background:none; border:none; color:var(--fg-dim); cursor:pointer; font-size:.8rem; line-height:1; }
.filter-chip button:hover { color:var(--danger); }

.results-meta { font-size:.85rem; color:var(--fg-dim); margin:.25rem 0 .75rem; }

.prompt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.prompt-card { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:1rem .95rem 1.05rem; display:flex; flex-direction:column; gap:.75rem; position:relative; min-height:240px; }
.prompt-card h3 { margin:0 0 .15rem; font-size:1rem; font-weight:600; }
.prompt-card p.meta { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; opacity:.65; margin:0; display:flex; gap:.5rem; flex-wrap:wrap; }
.prompt-card pre { font:inherit; white-space:pre-wrap; background:var(--bg-soft); border:1px solid var(--border); padding:.75rem .75rem; border-radius:calc(var(--radius) - 4px); max-height:200px; overflow:auto; font-size:.8rem; line-height:1.35; }
.prompt-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:auto; }
.prompt-actions button { flex:1 1 auto; }
.tag-row { display:flex; gap:.3rem; flex-wrap:wrap; }
.tag { background:var(--bg-soft); color:var(--fg-dim); font-size:.65rem; padding:.25rem .5rem; border-radius:1rem; letter-spacing:.5px; }

.favorite { position:absolute; top:.45rem; right:.45rem; background:none; border:none; cursor:pointer; font-size:1.05rem; line-height:1; color:var(--fg-dim); transition:var(--transition); }
.favorite[aria-pressed='true'] { color:gold; filter:drop-shadow(0 0 6px rgba(255,215,0,.4)); }
.favorite:focus-visible { outline:2px solid var(--acc); border-radius:50%; }

.no-results { padding:2rem 1rem; text-align:center; font-weight:600; color:var(--fg-dim); }

.how { padding:3rem 0 2.5rem; }
.steps { max-width:800px; display:grid; gap:.85rem; counter-reset:step; padding-left:1.2rem; }
.steps li { background:var(--bg-alt); padding:1rem 1rem 1rem 1.2rem; border-radius:var(--radius); border:1px solid var(--border); position:relative; }
.steps li:before { counter-increment:step; content:counter(step); position:absolute; left:-.9rem; top:1rem; background:var(--acc); color:#fff; width:1.8rem; height:1.8rem; display:grid; place-items:center; border-radius:50%; font-size:.85rem; box-shadow:0 0 0 4px var(--bg); }

.submit { padding:2.5rem 0 3.5rem; }
.stack { display:flex; flex-direction:column; gap:.9rem; max-width:640px; }
.stack label { display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.stack input, .stack textarea, .stack select { margin-top:.15rem; }
.form-status { font-size:.8rem; min-height:1.2rem; }
.form-status.success { color:#10b981; }
.form-status.error { color:var(--danger); }

.subscribe { background:linear-gradient(135deg,#1e2530,#151b23); padding:3rem 0 3.5rem; }
html[data-theme='light'] .subscribe { background:linear-gradient(135deg,#eef2f7,#e9eef5); }
.sub-grid { display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start; }
.inline-form { display:flex; gap:.6rem; flex-wrap:wrap; margin:.75rem 0 0; }
.inline-form input { flex:1 1 220px; }
.mini-faq p { margin:0 0 1rem; font-size:.85rem; }

.site-footer { background:#0b0d10; padding:2.5rem 0 3rem; border-top:1px solid var(--border); font-size:.9rem; }
html[data-theme='light'] .site-footer { background:#f5f7fa; }
.footer-grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.footer-links { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.footer-links a { text-decoration:none; color:var(--fg-dim); }
.footer-links a:hover { color:var(--fg); }
.tagline { font-size:.85rem; color:var(--fg-dim); max-width:30ch; }
.legal { opacity:.7; }
.small { font-size:.8rem; }
.social-links { list-style:none; padding:0; margin:.5rem 0 0; display:grid; gap:.35rem; }
.social-links a { color: var(--fg-dim); text-decoration:none; }
.social-links a:hover { color: var(--fg); }

.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:static; width:auto; height:auto; background:var(--acc); color:#fff; padding:.5rem .75rem; border-radius:.5rem; }

.btn, .secondary, .outline { --btn-bg: var(--acc); --btn-fg:#fff; font:inherit; cursor:pointer; border:none; border-radius:calc(var(--radius) - 4px); padding:.7rem 1rem; font-weight:600; letter-spacing:.5px; display:inline-flex; gap:.45rem; align-items:center; justify-content:center; text-decoration:none; position:relative; overflow:hidden; }
.btn.primary { background:var(--grad); color:#fff; }
.btn.primary.xl { font-size:1.05rem; padding:.9rem 1.4rem; }
.btn:hover { filter:brightness(1.08); }
.secondary { background:var(--bg-soft); color:var(--fg); border:1px solid var(--border); }
.secondary:hover { color:var(--fg); }
.outline { background:transparent; border:1px solid var(--acc); color:var(--acc); }
.outline:hover { background:var(--acc); color:#fff; }
.small.btn, .secondary.small { padding:.45rem .65rem; font-size:.7rem; }

.toast { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%) translateY(20px); background:var(--bg-alt); border:1px solid var(--border); padding:.75rem 1.1rem; border-radius:var(--radius); font-size:.8rem; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:var(--transition); max-width:320px; z-index:300; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

#themeToggle { width:2.25rem; height:2.25rem; border-radius:50%; display:grid; place-items:center; font-size:1.05rem; }

.pagination { display:flex; gap:.5rem; align-items:center; justify-content:center; margin:1rem 0 0; }
.pagination #pageInfo { min-width:140px; text-align:center; color:var(--fg-dim); }

/* Responsive */
@media (max-width: 760px) {
  .nav-toggle { display:block; background:none; border:1px solid var(--border); width:2.4rem; height:2.4rem; border-radius:.65rem; cursor:pointer; }
  /* Limit mobile dropdown styles to the header nav list only */
  #nav-links { position:absolute; right:0; top:100%; background:var(--bg-alt); border:1px solid var(--border); padding:1rem; border-radius:var(--radius); flex-direction:column; align-items:flex-start; min-width:200px; box-shadow:var(--shadow); display:none; z-index:60; }
  #nav-links.show { display:flex; animation:fadeSlide .24s ease; }
  #nav-links a { padding:.25rem 0; }
  .header-actions { margin-left:auto; }
  .site-footer .footer-grid { align-items:start; }

  /* Prevent any action buttons from overlapping text near footer */
  .library { padding-bottom: 4.5rem; }
  .prompt-card pre { max-height: 200px; }
}

/* (removed sticky footer actions) */

@keyframes fadeSlide { from { opacity:0; transform:translateY(-6px);} to { opacity:1; transform:translateY(0);} }

/* Utilities */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Dark mode transitions */
body, .prompt-card, .category-card, .steps li, .toast { transition: background-color .4s ease, color .4s ease, border-color .4s ease; }

/* Modal */
.modal { position:fixed; inset:0; display:grid; place-items:center; z-index:200; }
.modal[hidden] { display:none; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.modal-content { position:relative; background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; width:min(720px, 100% - 2rem); box-shadow:var(--shadow); }
.modal-actions { display:flex; justify-content:flex-end; gap:.5rem; }

/* Admin */
.admin { padding:3rem 0; }
.admin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.panel { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; }
.submission-list { display:grid; gap:.6rem; max-height:420px; overflow:auto; }
.submission-item { background:var(--bg-soft); border:1px solid var(--border); border-radius:calc(var(--radius) - 4px); padding:.6rem; }
.admin-actions { display:flex; gap:.5rem; align-items:center; margin-top:.5rem; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.inline-controls { display:flex; gap:.6rem; align-items:center; }