/* =========================================================================
   Prompt Vault — public site design system
   Consolidated from the four page mockups (index/library/category/prompt)
   into one cached stylesheet shared by every public page — one download,
   reused across navigations, instead of ~800 lines of inline <style>
   repeated per page. Matches the "extremely fast, lightweight" brief.
   ========================================================================= */

:root{
  --orange:#F2611A;
  --orange-dark:#D14E0F;
  --orange-soft:#FFE4D4;
  --amber:#F2A93B;
  --radius-lg: 16px;
  --radius-md: 10px;
}

:root, [data-theme="light"]{
  --bg-page:#FBF9F5;
  --bg-page-dim:#F1ECE3;
  --bg-surface:#FFFFFF;
  --bg-nav:#211A14;
  --bg-nav-soft:#2C231B;
  --text-primary:#211A14;
  --text-secondary:#6B6157;
  --text-muted:#9A9086;
  --text-on-nav:#F7F3ED;
  --text-on-nav-dim:rgba(247,243,237,0.62);
  --line:rgba(33,26,20,0.10);
  --line-nav:rgba(247,243,237,0.10);
  --code-bg:#170F09;
  --code-text:#D8D0C6;
  --shadow-card:0 16px 30px -14px rgba(33,26,20,0.14);
}

[data-theme="dark"]{
  --bg-page:#15120E;
  --bg-page-dim:#1C1712;
  --bg-surface:#211B15;
  --bg-nav:#0E0B08;
  --bg-nav-soft:#191410;
  --text-primary:#F3EEE7;
  --text-secondary:#B8AFA4;
  --text-muted:#847A6E;
  --text-on-nav:#F7F3ED;
  --text-on-nav-dim:rgba(247,243,237,0.6);
  --line:rgba(247,243,237,0.10);
  --line-nav:rgba(247,243,237,0.08);
  --code-bg:#0A0806;
  --code-text:#C9C0B4;
  --shadow-card:0 16px 30px -14px rgba(0,0,0,0.5);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-page);
  color:var(--text-primary);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}
h1,h2,h3,h4,.display-font{ font-family:'Space Grotesk',sans-serif; letter-spacing:-0.01em; }
.mono{ font-family:'JetBrains Mono', monospace; }
a{ text-decoration:none; }
::selection{ background:var(--orange); color:#fff; }

/* ===== Top utility bar ===== */
.topbar{ background:var(--bg-nav); color:rgba(255,255,255,0.65); font-size:0.8rem; padding:6px 0; }
.topbar a{ color:rgba(255,255,255,0.85); }
.topbar a:hover{ color:#fff; }

/* ===== Navbar ===== */
.navbar-pv{
  background:var(--bg-nav); padding:14px 0; border-bottom:1px solid var(--line-nav);
  position:sticky; top:0; z-index:1000; transition:box-shadow .2s ease;
}
.navbar-pv.is-scrolled{ box-shadow:0 8px 24px -12px rgba(0,0,0,0.35); }
.navbar-pv .brand{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.4rem; color:#fff;
  display:flex; align-items:center; gap:8px;
}
.navbar-pv .brand .bracket{ color:var(--orange); }
.navbar-pv .nav-link{ color:rgba(255,255,255,0.75); font-weight:500; font-size:0.92rem; padding:8px 14px !important; }
.navbar-pv .nav-link:hover, .navbar-pv .nav-link.active{ color:#fff; }
.navbar-pv .nav-link.active{ position:relative; }
.navbar-pv .nav-link.active::after{
  content:''; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  background:var(--orange); border-radius:2px;
}
.search-pill{
  background:rgba(255,255,255,0.07); border:1px solid var(--line-nav); border-radius:999px;
  padding:8px 16px; display:flex; align-items:center; gap:8px; min-width:220px;
}
.search-pill input{ background:transparent; border:none; outline:none; color:#fff; font-size:0.9rem; width:100%; }
.search-pill input::placeholder{ color:rgba(255,255,255,0.4); }
.search-pill i{ color:rgba(255,255,255,0.45); }
.btn-signin{ border:1px solid var(--line-nav); color:#fff; border-radius:999px; padding:8px 18px; font-size:0.88rem; font-weight:500; }
.btn-signin:hover{ background:rgba(255,255,255,0.08); color:#fff; }
.theme-toggle{
  width:38px; height:38px; border-radius:999px; border:1px solid var(--line-nav);
  background:rgba(255,255,255,0.06); color:var(--text-on-nav);
  display:flex; align-items:center; justify-content:center; font-size:0.92rem; flex:0 0 auto;
}
.theme-toggle:hover{ background:rgba(255,255,255,0.12); }

.btn-orange{
  background:var(--orange); color:#fff; border:none; border-radius:10px; padding:13px 26px;
  font-weight:600; font-size:0.95rem; display:inline-flex; align-items:center; gap:8px;
}
.btn-orange:hover{ background:var(--orange-dark); color:#fff; }
.navbar-pv .btn-orange, footer .btn-orange, .toolbar .btn-orange{ padding:9px 20px; font-size:0.9rem; }
.btn-outline-light-pv{
  border:1px solid rgba(255,255,255,0.22); color:#fff; border-radius:10px;
  padding:13px 24px; font-weight:600; font-size:0.95rem;
}
.btn-outline-light-pv:hover{ background:rgba(255,255,255,0.08); color:#fff; }

/* ===== Scroll to top ===== */
.scroll-top-btn{
  position:fixed; right:24px; bottom:24px; width:46px; height:46px; border-radius:50%;
  background:var(--orange); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  font-size:1rem; box-shadow:0 10px 24px -8px rgba(242,97,26,0.55);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease, background .15s;
  z-index:999;
}
.scroll-top-btn.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.scroll-top-btn:hover{ background:var(--orange-dark); }

/* ===== Breadcrumb ===== */
.breadcrumb-bar{ background:var(--bg-surface); border-bottom:1px solid var(--line); padding:14px 0; }
.breadcrumb-bar ol{ margin:0; background:transparent; padding:0; font-size:0.84rem; }
.breadcrumb-bar a{ color:var(--text-secondary); }
.breadcrumb-bar a:hover{ color:var(--orange-dark); }
.breadcrumb-bar .active{ color:var(--text-primary); font-weight:500; }
.breadcrumb-item + .breadcrumb-item::before{ color:var(--text-muted); }

/* ===== Hero (homepage) ===== */
.hero{ background:var(--bg-nav); padding:76px 0 90px; position:relative; overflow:hidden; }
.hero::before{
  content:''; position:absolute; top:-140px; right:-140px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(242,97,26,0.25), transparent 70%); pointer-events:none;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; background:rgba(242,97,26,0.14);
  border:1px solid rgba(242,97,26,0.35); color:#FFD2BC; font-size:0.78rem; font-weight:600;
  padding:6px 14px; border-radius:999px; margin-bottom:22px; letter-spacing:0.02em;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--amber); display:inline-block; }
.hero h1{ color:#fff; font-size:3rem; font-weight:700; line-height:1.12; margin-bottom:20px; }
.hero h1 .hl{ color:var(--orange); }
.hero p.lead{ color:rgba(255,255,255,0.62); font-size:1.08rem; max-width:490px; margin-bottom:30px; line-height:1.65; }
.hero-stats{ display:flex; gap:34px; margin-top:36px; }
.hero-stats .stat-num{ font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:700; color:#fff; }
.hero-stats .stat-label{ font-size:0.78rem; color:rgba(255,255,255,0.5); }

.prompt-demo{
  background:var(--bg-nav-soft); border:1px solid var(--line-nav); border-radius:var(--radius-lg);
  padding:0; box-shadow:0 30px 60px -20px rgba(0,0,0,0.55); overflow:hidden;
}
.prompt-demo-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line-nav); }
.prompt-demo-head .dots{ display:flex; gap:6px; }
.prompt-demo-head .dots span{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dots span:nth-child(1){ background:#E2564F; }
.dots span:nth-child(2){ background:#F2B33D; }
.dots span:nth-child(3){ background:#3FBF6F; }
.prompt-demo-head .badge-cat{ background:rgba(242,97,26,0.18); color:#FFD2BC; font-size:0.72rem; font-weight:600; padding:4px 10px; border-radius:999px; }
.prompt-demo-body{ padding:20px 20px 16px; }
.prompt-demo-body .ptitle{ color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.02rem; margin-bottom:12px; }
.prompt-demo-code{
  background:var(--code-bg); border:1px solid var(--line-nav); border-radius:var(--radius-md);
  padding:16px 18px; font-size:0.83rem; line-height:1.7; color:var(--code-text);
}
.prompt-demo-code .var{ color:var(--amber); background:rgba(242,169,59,0.12); padding:1px 5px; border-radius:4px; }
.prompt-demo-code .cursor{ display:inline-block; width:7px; height:15px; background:var(--orange); vertical-align:middle; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.prompt-demo-actions{ display:flex; align-items:center; gap:8px; padding:14px 20px 20px; flex-wrap:wrap; }
.prompt-demo-stats{ display:flex; gap:18px; padding:0 20px 18px; color:rgba(255,255,255,0.45); font-size:0.76rem; }
.prompt-demo-stats span{ display:flex; align-items:center; gap:5px; }

/* ===== Category chip rail (homepage) ===== */
.chip-rail{ background:var(--bg-surface); border-bottom:1px solid var(--line); padding:16px 0; }
.chip-rail-track{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.chip-rail-track::-webkit-scrollbar{ display:none; }
.pill-cat{
  flex:0 0 auto; background:var(--bg-page); border:1px solid var(--line); color:var(--text-primary);
  font-size:0.85rem; font-weight:500; padding:9px 18px; border-radius:999px; white-space:nowrap; cursor:pointer;
  font-family:'Inter',sans-serif;
}
.pill-cat:hover{ border-color:var(--orange); color:var(--orange-dark); }
.pill-cat.active{ background:var(--orange); border-color:var(--orange); color:#fff; }

/* ===== Section headers ===== */
.section{ padding:64px 0; }
.section-tight{ padding:48px 0; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px; flex-wrap:wrap; gap:16px; }
.sec-eyebrow{ font-size:0.78rem; font-weight:700; color:var(--orange-dark); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; display:block; }
.sec-head h2{ font-size:1.9rem; font-weight:700; margin:0; color:var(--text-primary); }
.sec-sub{ color:var(--text-secondary); font-size:0.95rem; max-width:520px; }
.link-all{ color:var(--text-primary); font-weight:600; font-size:0.9rem; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.link-all i{ font-size:0.78rem; transition:transform .15s; }
.link-all:hover i{ transform:translateX(3px); }
.link-all:hover{ color:var(--orange-dark); }

/* ===== Category tiles (homepage) ===== */
.cat-tile{
  background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 22px; height:100%; transition:transform .15s, box-shadow .15s, border-color .15s, background .2s;
  display:block; color:var(--text-primary);
}
.cat-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:transparent; color:var(--text-primary); }
.cat-tile .icon-wrap{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:16px; }
.cat-tile h5{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.08rem; margin-bottom:4px; }
.cat-tile .count{ color:var(--text-secondary); font-size:0.84rem; }

.bg-orange-tint{ background:rgba(242,97,26,0.12); color:var(--orange-dark); }
.bg-amber-tint{ background:rgba(242,169,59,0.16); color:#9C6A16; }
.bg-teal-tint{ background:rgba(20,150,120,0.12); color:#0F6E56; }
.bg-coral-tint{ background:rgba(216,90,48,0.12); color:#993C1D; }
.bg-pink-tint{ background:rgba(212,83,126,0.12); color:#993556; }
.bg-blue-tint{ background:rgba(55,138,221,0.12); color:#185FA5; }

/* ===== Prompt cards (grid) — shared by home/library/category ===== */
.prompt-card{
  background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; height:100%; transition:transform .15s, box-shadow .15s, background .2s;
  display:flex; flex-direction:column;
}
.prompt-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.prompt-card .pc-media{ position:relative; background:var(--code-bg); padding:18px 18px 14px; }
.prompt-card .pc-cat{ font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:#FFD2BC; margin-bottom:8px; display:block; }
.prompt-card .pc-snippet{
  font-family:'JetBrains Mono',monospace; font-size:0.74rem; color:#B7BAC4; line-height:1.6;
  height:72px; overflow:hidden; position:relative;
}
.prompt-card .pc-snippet::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:28px; background:linear-gradient(transparent, var(--code-bg)); }
.prompt-card .pc-badge-new{
  position:absolute; top:14px; right:14px; background:var(--amber); color:#412402;
  font-size:0.68rem; font-weight:700; padding:4px 9px; border-radius:6px; display:flex; align-items:center; gap:4px;
}
.prompt-card .pc-media.has-image{ padding:0; aspect-ratio:16/10; overflow:hidden; }
.prompt-card .pc-media.has-image img{
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease;
}
.prompt-card:hover .pc-media.has-image img{ transform:scale(1.04); }
.prompt-card .pc-media.has-image .pc-cat-overlay{
  position:absolute; top:14px; left:14px; z-index:2; font-size:0.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; color:#fff; background:rgba(20,15,10,0.55); padding:4px 10px; border-radius:6px; backdrop-filter:blur(3px);
}
.prompt-card .pc-media.has-image .pc-media-fade{
  position:absolute; left:0; right:0; bottom:0; height:46%; background:linear-gradient(transparent, rgba(10,7,4,0.75)); z-index:1;
}
.prompt-card .pc-media.has-image .media-type-icon{
  position:absolute; bottom:12px; right:12px; z-index:2; width:26px; height:26px; border-radius:50%;
  background:rgba(20,15,10,0.6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.72rem; backdrop-filter:blur(3px);
}
.prompt-card .pc-body{ padding:16px 18px 18px; flex:1; display:flex; flex-direction:column; }
.prompt-card h6{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.98rem; margin-bottom:8px; color:var(--text-primary); }
.prompt-card .pc-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.pc-tag{ font-size:0.7rem; color:var(--text-secondary); background:var(--bg-page); padding:3px 9px; border-radius:6px; }
.pc-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--line); }
.pc-meta{ display:flex; gap:12px; color:var(--text-secondary); font-size:0.76rem; }
.pc-meta span{ display:flex; align-items:center; gap:4px; }
.pc-copy-btn{
  width:32px; height:32px; border-radius:8px; background:var(--bg-page); border:none;
  display:flex; align-items:center; justify-content:center; color:var(--text-primary); font-size:0.85rem;
}
.pc-copy-btn:hover{ background:var(--orange); color:#fff; }
.pc-type-tag{
  position:absolute; top:14px; left:14px; z-index:2; background:rgba(20,15,10,0.55); color:#fff;
  font-size:0.68rem; font-weight:600; padding:3px 9px; border-radius:6px; display:flex; align-items:center; gap:4px; backdrop-filter:blur(3px);
}
.prompt-card .pc-media:not(.has-image) .pc-type-tag{ display:none; }

/* ===== Prompt cards (list view) — library ===== */
.prompt-row{
  background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:16px; display:flex; gap:16px; align-items:center; margin-bottom:12px; transition:box-shadow .15s, transform .15s;
}
.prompt-row:hover{ box-shadow:var(--shadow-card); transform:translateY(-2px); }
.prompt-row .pr-thumb{
  width:96px; height:64px; border-radius:9px; background:var(--code-bg); flex:0 0 auto;
  overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center;
}
.prompt-row .pr-thumb img{ width:100%; height:100%; object-fit:cover; }
.prompt-row .pr-thumb i{ color:var(--text-muted); font-size:1.1rem; }
.prompt-row .pr-body{ flex:1; min-width:0; }
.prompt-row .pr-cat{ font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--orange-dark); }
.prompt-row h6{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.95rem; margin:2px 0 4px; color:var(--text-primary); }
.prompt-row .pr-snippet{ font-size:0.82rem; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prompt-row .pr-meta{ display:flex; gap:14px; color:var(--text-muted); font-size:0.78rem; flex:0 0 auto; white-space:nowrap; }
.prompt-row .pr-meta span{ display:flex; align-items:center; gap:4px; }
.prompt-row .pr-copy{
  width:36px; height:36px; border-radius:9px; background:var(--bg-page); border:none; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:var(--text-primary);
}
.prompt-row .pr-copy:hover{ background:var(--orange); color:#fff; }

/* ===== Feature strip (homepage) ===== */
.feature-strip{ background:var(--bg-surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.feature-item{ padding:36px 24px; text-align:center; border-right:1px solid var(--line); }
.feature-item:last-child{ border-right:none; }
.feature-item i{ font-size:1.5rem; color:var(--orange); margin-bottom:14px; }
.feature-item h6{ font-family:'Space Grotesk',sans-serif; font-weight:600; margin-bottom:6px; font-size:0.95rem; color:var(--text-primary); }
.feature-item p{ color:var(--text-secondary); font-size:0.83rem; margin:0; line-height:1.55; }

/* ===== SEO content blocks ===== */
.seo-block{ background:var(--bg-surface); border-top:1px solid var(--line); }
.seo-block h2{ font-size:1.7rem; font-weight:700; margin-bottom:14px; color:var(--text-primary); }
.seo-block h3{ font-size:1.15rem; font-weight:600; margin:26px 0 10px; color:var(--text-primary); }
.seo-block p{ color:var(--text-secondary); font-size:0.94rem; line-height:1.75; }
.seo-tag-cloud{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.seo-tag-cloud a{ font-size:0.8rem; color:var(--text-primary); background:var(--bg-page); padding:6px 12px; border-radius:8px; }
.seo-tag-cloud a:hover{ background:var(--orange); color:#fff; }

.cat-seo-block{ background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 28px; margin-top:44px; }
.cat-seo-block h2{ font-size:1.25rem; font-weight:700; margin-bottom:12px; }
.cat-seo-block p{ color:var(--text-secondary); font-size:0.92rem; line-height:1.75; margin-bottom:0; }

/* ===== Newsletter CTA (homepage) ===== */
.cta-band{ background:var(--bg-nav); border-radius:24px; padding:56px 48px; position:relative; overflow:hidden; }
.cta-band::after{
  content:''; position:absolute; bottom:-120px; left:-60px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(242,169,59,0.16), transparent 70%);
}
.cta-band h2{ color:#fff; font-size:1.8rem; font-weight:700; margin-bottom:10px; }
.cta-band p{ color:rgba(255,255,255,0.6); font-size:0.95rem; margin-bottom:0; }
.cta-form{ display:flex; gap:10px; }
.cta-form input{
  background:rgba(255,255,255,0.08); border:1px solid var(--line-nav); color:#fff; border-radius:10px;
  padding:13px 16px; font-size:0.9rem; flex:1; outline:none;
}
.cta-form input::placeholder{ color:rgba(255,255,255,0.4); }

/* ===== Footer ===== */
footer{ background:var(--bg-nav); color:rgba(255,255,255,0.55); padding:60px 0 24px; margin-top:20px; }
footer h6{ color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.92rem; margin-bottom:16px; }
footer .f-brand{ color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.3rem; margin-bottom:12px; display:block; }
footer p.f-desc{ font-size:0.86rem; line-height:1.65; max-width:280px; }
footer ul{ list-style:none; padding:0; margin:0; }
footer ul li{ margin-bottom:10px; }
footer ul li a{ color:rgba(255,255,255,0.55); font-size:0.86rem; }
footer ul li a:hover{ color:#fff; }
.f-social{
  width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,0.07);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; margin-right:8px; font-size:0.85rem;
}
.f-social:hover{ background:var(--orange); }
.f-bottom{ border-top:1px solid var(--line-nav); margin-top:44px; padding-top:22px; font-size:0.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.f-bottom a{ color:rgba(255,255,255,0.5); margin-left:18px; }
.f-bottom a:hover{ color:#fff; }

/* ===== Library: filter sidebar ===== */
.library-header{ padding:36px 0 24px; }
.library-header h1{ font-size:1.9rem; font-weight:700; margin-bottom:8px; }
.library-header p{ color:var(--text-secondary); font-size:0.96rem; max-width:620px; margin:0; }
.library-body{ padding-bottom:70px; }

.filter-panel{
  background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; position:sticky; top:88px;
}
.filter-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.filter-panel-head h5{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1rem; margin:0; display:flex; align-items:center; gap:8px; }
.filter-panel-head h5 i{ color:var(--orange); font-size:0.9rem; }
.clear-filters-link{ font-size:0.78rem; color:var(--text-secondary); display:none; align-items:center; gap:4px; }
.clear-filters-link.visible{ display:inline-flex; }
.clear-filters-link:hover{ color:var(--orange-dark); }

.filter-group{ border-top:1px solid var(--line); padding:16px 0; }
.filter-group:first-of-type{ border-top:none; padding-top:14px; }
.filter-group-title{
  display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  font-weight:600; font-size:0.88rem; color:var(--text-primary); margin-bottom:10px; user-select:none;
}
.filter-group-title i{ font-size:0.78rem; color:var(--text-muted); transition:transform .2s; }
.filter-group.collapsed .filter-group-title i{ transform:rotate(-90deg); }
.filter-group.collapsed .filter-group-body{ display:none; }

.filter-check{ display:flex; align-items:center; gap:9px; padding:5px 0; cursor:pointer; font-size:0.87rem; color:var(--text-secondary); position:relative; }
.filter-check:hover{ color:var(--text-primary); }
.filter-check input{ accent-color:var(--orange); width:15px; height:15px; cursor:pointer; }
.filter-check .fc-count{ margin-left:auto; color:var(--text-muted); font-size:0.78rem; }
.filter-check.checked{ color:var(--text-primary); font-weight:500; }
.filter-subcats{ margin-left:23px; margin-top:2px; }

.tag-pills-filter{ display:flex; flex-wrap:wrap; gap:7px; }
.tag-pill-filter{ font-size:0.78rem; color:var(--text-secondary); background:var(--bg-page); border:1px solid var(--line); padding:5px 11px; border-radius:999px; cursor:pointer; }
.tag-pill-filter:hover{ border-color:var(--orange); color:var(--orange-dark); }
.tag-pill-filter.active{ background:var(--orange); border-color:var(--orange); color:#fff; }

.radio-check{ display:flex; align-items:center; gap:9px; padding:5px 0; cursor:pointer; font-size:0.87rem; color:var(--text-secondary); position:relative; }
.radio-check:hover{ color:var(--text-primary); }
.radio-check input{ accent-color:var(--orange); width:15px; height:15px; cursor:pointer; }

.mobile-filter-btn{
  display:none; align-items:center; gap:8px; background:var(--bg-surface); border:1px solid var(--line);
  border-radius:10px; padding:10px 16px; font-weight:600; font-size:0.88rem; color:var(--text-primary); width:100%;
}
.mobile-filter-badge{ background:var(--orange); color:#fff; font-size:0.7rem; font-weight:700; padding:1px 7px; border-radius:999px; margin-left:auto; }

/* ===== Toolbar: result count, search, sort ===== */
.toolbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.result-count{ font-size:0.9rem; color:var(--text-secondary); }
.result-count b{ color:var(--text-primary); font-weight:700; }
.toolbar-search{
  flex:1; min-width:180px; display:flex; align-items:center; gap:8px;
  background:var(--bg-surface); border:1px solid var(--line); border-radius:10px; padding:9px 14px;
}
.toolbar-search i{ color:var(--text-muted); font-size:0.85rem; }
.toolbar-search input{ border:none; outline:none; background:transparent; font-size:0.88rem; color:var(--text-primary); width:100%; }
.toolbar-search input::placeholder{ color:var(--text-muted); }
.sort-select-wrap{ display:flex; align-items:center; gap:8px; background:var(--bg-surface); border:1px solid var(--line); border-radius:10px; padding:9px 14px; }
.sort-select-wrap i{ color:var(--text-muted); font-size:0.85rem; }
.sort-select-wrap select{ border:none; outline:none; background:transparent; font-size:0.86rem; font-weight:600; color:var(--text-primary); cursor:pointer; }
[data-theme="dark"] .sort-select-wrap select{ color-scheme:dark; }
.browse-all-link{ font-size:0.86rem; font-weight:600; color:var(--text-secondary); display:inline-flex; align-items:center; gap:6px; }
.browse-all-link:hover{ color:var(--orange-dark); }

.view-toggle{ display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.view-toggle button{ background:var(--bg-surface); border:none; padding:9px 12px; color:var(--text-secondary); font-size:0.9rem; }
.view-toggle button.active{ background:var(--orange); color:#fff; }

.active-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.active-chip{
  display:inline-flex; align-items:center; gap:7px; background:var(--orange-soft); color:var(--orange-dark);
  font-size:0.8rem; font-weight:600; padding:6px 8px 6px 12px; border-radius:999px;
}
[data-theme="dark"] .active-chip{ background:rgba(242,97,26,0.16); color:#FF9D6E; }
.active-chip a{ color:inherit; }
.active-chip .chip-x{
  background:rgba(0,0,0,0.12); border:none; color:inherit; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:0.65rem;
}
.active-chip-clear{ font-size:0.8rem; color:var(--text-secondary); font-weight:600; padding:6px 4px; }
.active-chip-clear:hover{ color:var(--orange-dark); }

.empty-results{ text-align:center; padding:70px 20px; }
.empty-results i{ font-size:2.4rem; color:var(--text-muted); margin-bottom:16px; }
.empty-results h5{ font-family:'Space Grotesk',sans-serif; font-weight:600; margin-bottom:8px; }
.empty-results p{ color:var(--text-secondary); font-size:0.9rem; max-width:400px; margin:0 auto 18px; }

.pv-pagination{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:36px; flex-wrap:wrap; }
.pv-pagination a, .pv-pagination span{
  min-width:38px; height:38px; border-radius:9px; border:1px solid var(--line);
  background:var(--bg-surface); color:var(--text-primary); font-size:0.86rem; font-weight:600;
  padding:0 8px; display:inline-flex; align-items:center; justify-content:center;
}
.pv-pagination a:hover{ border-color:var(--orange); color:var(--orange-dark); }
.pv-pagination .active{ background:var(--orange); border-color:var(--orange); color:#fff; }
.pv-pagination .disabled{ opacity:0.4; pointer-events:none; }

@media (max-width: 991px){
  .filter-panel{ position:static; margin-bottom:20px; display:none; }
  .filter-panel.open{ display:block; }
  .mobile-filter-btn{ display:flex; }
  .prompt-row{ flex-wrap:wrap; }
  .prompt-row .pr-meta{ width:100%; justify-content:flex-start; padding-top:8px; border-top:1px solid var(--line); }
}

/* ===== Category page ===== */
.category-hero{ background:var(--bg-nav); padding:44px 0 40px; position:relative; overflow:hidden; }
.category-hero::after{
  content:''; position:absolute; top:-100px; right:-100px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(242,97,26,0.18), transparent 70%);
}
.category-hero-inner{ display:flex; align-items:center; gap:20px; position:relative; z-index:1; flex-wrap:wrap; }
.category-icon-badge{
  width:64px; height:64px; border-radius:16px; background:rgba(242,97,26,0.16);
  display:flex; align-items:center; justify-content:center; font-size:1.7rem; color:#FF9D6E; flex:0 0 auto;
}
.category-hero h1{ color:#fff; font-size:1.9rem; font-weight:700; margin-bottom:6px; }
.category-hero .cat-count{ color:var(--text-on-nav-dim); font-size:0.92rem; }
.category-hero p.desc{ color:var(--text-on-nav-dim); font-size:0.94rem; max-width:640px; margin:14px 0 0; line-height:1.65; }

.subcat-rail{ background:var(--bg-surface); border-bottom:1px solid var(--line); padding:16px 0; }
.subcat-track{ display:flex; gap:10px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.subcat-track::-webkit-scrollbar{ display:none; }
.subcat-pill{
  flex:0 0 auto; background:var(--bg-page); border:1px solid var(--line); color:var(--text-primary);
  font-size:0.85rem; font-weight:500; padding:9px 18px; border-radius:999px; white-space:nowrap;
}
.subcat-pill:hover{ border-color:var(--orange); color:var(--orange-dark); }
.subcat-pill.active{ background:var(--orange); border-color:var(--orange); color:#fff; }

.category-body{ padding:32px 0 70px; }

.other-cats{ margin-top:40px; }
.other-cats h3{ font-size:1.1rem; font-weight:700; margin-bottom:16px; }
.other-cat-chip{
  display:inline-flex; align-items:center; gap:8px; background:var(--bg-surface); border:1px solid var(--line);
  border-radius:999px; padding:8px 16px 8px 10px; font-size:0.85rem; font-weight:500; color:var(--text-primary); margin:0 8px 8px 0;
}
.other-cat-chip:hover{ border-color:var(--orange); color:var(--orange-dark); }
.other-cat-chip .oc-icon{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:0.72rem; background:var(--orange-soft); color:var(--orange-dark);
}
[data-theme="dark"] .other-cat-chip .oc-icon{ background:rgba(242,97,26,0.16); color:#FF9D6E; }

/* ===== Prompt detail page ===== */
.prompt-header{ padding:40px 0 8px; }
.cat-pill{
  display:inline-flex; align-items:center; gap:6px; background:var(--orange-soft); color:var(--orange-dark);
  font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
[data-theme="dark"] .cat-pill{ background:rgba(242,97,26,0.16); color:#FF9D6E; }
.mode-pill{
  display:inline-flex; align-items:center; gap:6px; background:var(--bg-page-dim); color:var(--text-secondary);
  font-size:0.76rem; font-weight:600; padding:5px 12px; border-radius:999px; margin-bottom:14px; margin-left:8px;
}
.prompt-header h1{ font-size:2.1rem; font-weight:700; margin-bottom:10px; line-height:1.2; }
.prompt-header .sub{ color:var(--text-secondary); font-size:1rem; max-width:640px; margin-bottom:18px; }
.prompt-meta-row{ display:flex; gap:20px; flex-wrap:wrap; color:var(--text-secondary); font-size:0.85rem; margin-bottom:6px; }
.prompt-meta-row span{ display:flex; align-items:center; gap:6px; }
.tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.tag-pill{ font-size:0.78rem; color:var(--text-secondary); background:var(--bg-page-dim); padding:5px 12px; border-radius:8px; }
.tag-pill:hover{ background:var(--orange-soft); color:var(--orange-dark); }

.prompt-layout{ padding:32px 0 70px; }
.panel{ background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; margin-bottom:24px; }
.panel-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.02rem; display:flex; align-items:center; gap:8px; margin-bottom:18px; }
.panel-title i{ color:var(--orange); font-size:0.95rem; }

.gallery-lead{ position:relative; width:100%; aspect-ratio:16/10; border-radius:var(--radius-lg); overflow:hidden; background:var(--code-bg); margin-bottom:12px; }
.gallery-lead img, .gallery-lead video{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; }
.gallery-lead .media-type-badge{
  position:absolute; top:14px; left:14px; background:rgba(20,15,10,0.7); color:#fff; font-size:0.72rem; font-weight:600;
  padding:5px 11px; border-radius:999px; display:flex; align-items:center; gap:6px; backdrop-filter:blur(4px);
}
.gallery-lead .media-caption{
  position:absolute; left:0; right:0; bottom:0; padding:28px 18px 14px;
  background:linear-gradient(transparent, rgba(10,7,4,0.82)); color:#F3EEE7; font-size:0.84rem;
}
.gallery-thumbs{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
.gallery-thumb{ position:relative; flex:0 0 auto; width:88px; height:64px; border-radius:9px; overflow:hidden; cursor:pointer; border:2px solid transparent; background:var(--code-bg); }
.gallery-thumb.active{ border-color:var(--orange); }
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumb .thumb-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,7,4,0.35); color:#fff; font-size:0.9rem; }
.gallery-note{ font-size:0.78rem; color:var(--text-muted); margin-top:10px; display:flex; align-items:center; gap:6px; }

.var-field{ margin-bottom:16px; }
.var-field label{ display:flex; align-items:center; gap:6px; font-size:0.84rem; font-weight:600; color:var(--text-primary); margin-bottom:6px; }
.var-field label .req{ color:var(--orange); }
.var-field label .type-hint{
  font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; color:var(--text-muted);
  background:var(--bg-page-dim); padding:2px 7px; border-radius:5px; margin-left:auto;
}
.var-field .help{ font-size:0.78rem; color:var(--text-muted); margin-top:4px; }
.var-field input[type="text"], .var-field select, .var-field textarea{
  width:100%; background:var(--bg-page); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; font-size:0.9rem; color:var(--text-primary); font-family:'Inter',sans-serif; outline:none; transition:border-color .15s;
}
.var-field input[type="text"]:focus, .var-field select:focus, .var-field textarea:focus{ border-color:var(--orange); }
.var-field textarea{ resize:vertical; min-height:60px; }
.var-field select{ cursor:pointer; }
.var-field .error-msg{ display:none; color:#C4441F; font-size:0.78rem; margin-top:5px; align-items:center; gap:5px; }
.var-field.has-error input[type="text"], .var-field.has-error select, .var-field.has-error textarea{ border-color:#C4441F; }
.var-field.has-error .error-msg{ display:flex; }

.reset-link{ font-size:0.82rem; color:var(--text-secondary); display:inline-flex; align-items:center; gap:5px; }
.reset-link:hover{ color:var(--orange-dark); }

.output-code{
  background:var(--code-bg); border:1px solid var(--line-nav); border-radius:var(--radius-md);
  padding:18px 20px; font-family:'JetBrains Mono',monospace; font-size:0.85rem; line-height:1.75;
  color:var(--code-text); white-space:pre-wrap; word-break:break-word; min-height:100px;
}
.output-code .filled{ color:#FFB48A; font-weight:500; }
.output-code .empty-var{ color:#6B6157; font-style:italic; }

.run-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.chip-ai{
  display:inline-flex; align-items:center; gap:7px; background:var(--bg-page-dim); border:1px solid var(--line); color:var(--text-primary);
  font-size:0.84rem; font-weight:500; padding:9px 16px; border-radius:9px; cursor:pointer;
}
.chip-ai:hover{ background:var(--bg-page); border-color:var(--orange); }
.chip-ai.copy{ background:var(--orange); border-color:var(--orange); color:#fff; margin-left:auto; }
.chip-ai.copy:hover{ background:var(--orange-dark); }
.chip-ai.copy.copied{ background:#2E8B57; border-color:#2E8B57; }
.chip-custom{ border-style:dashed; }
.chip-ai.small{ padding:7px 13px; font-size:0.8rem; }

.stat-row{ display:flex; gap:22px; margin-top:16px; color:var(--text-muted); font-size:0.8rem; flex-wrap:wrap; }
.stat-row span{ display:flex; align-items:center; gap:5px; }

.customize-divider{ display:flex; align-items:center; gap:12px; margin:26px 0 18px; }
.customize-divider::before, .customize-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.customize-divider span{ display:flex; align-items:center; gap:7px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.88rem; color:var(--text-primary); white-space:nowrap; }
.customize-divider i{ color:var(--orange); font-size:0.85rem; }

.step-list{ counter-reset:step; }
.step-block{ border:1px solid var(--line); border-radius:var(--radius-lg); margin-bottom:18px; overflow:hidden; background:var(--bg-surface); }
.step-block:last-child{ margin-bottom:0; }
.step-block-head{ display:flex; align-items:center; gap:12px; padding:16px 20px; cursor:pointer; user-select:none; background:var(--bg-page-dim); }
.step-number{ width:30px; height:30px; border-radius:50%; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; flex:0 0 auto; }
.step-block-head h6{ margin:0; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.96rem; flex:1; }
.step-block-head .step-sub{ font-size:0.78rem; color:var(--text-muted); font-weight:400; display:block; margin-top:2px; }
.step-toggle-icon{ color:var(--text-muted); transition:transform .2s; }
.step-block.collapsed .step-toggle-icon{ transform:rotate(-90deg); }
.step-block-body{ padding:20px; }
.step-block.collapsed .step-block-body{ display:none; }
.step-done-badge{
  display:none; align-items:center; gap:5px; font-size:0.72rem; font-weight:700;
  background:rgba(46,139,87,0.14); color:#2E8B57; padding:3px 9px; border-radius:999px; margin-left:8px;
}
.step-block.marked-done .step-done-badge{ display:flex; }
.step-block.marked-done .step-number{ background:#2E8B57; }
.mark-done-link{ font-size:0.8rem; color:var(--text-secondary); display:inline-flex; align-items:center; gap:5px; margin-top:12px; cursor:pointer; }
.mark-done-link:hover{ color:#2E8B57; }
.mark-done-link.is-done{ color:#2E8B57; }

.step-progress{ display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.step-progress-track{ flex:1; height:6px; border-radius:999px; background:var(--bg-page-dim); overflow:hidden; }
.step-progress-fill{ height:100%; background:var(--orange); border-radius:999px; width:0%; transition:width .3s ease; }
.step-progress-label{ font-size:0.78rem; color:var(--text-secondary); white-space:nowrap; font-weight:600; }

.faq-item{ border-bottom:1px solid var(--line); padding:16px 0; }
.faq-item:last-child{ border-bottom:none; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:600; font-size:0.94rem; color:var(--text-primary); }
.faq-q i{ color:var(--text-muted); transition:transform .2s; font-size:0.85rem; }
.faq-item.open .faq-q i{ transform:rotate(45deg); }
.faq-a{ display:none; color:var(--text-secondary); font-size:0.88rem; margin-top:10px; line-height:1.65; }
.faq-item.open .faq-a{ display:block; }

.side-panel{ background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; margin-bottom:20px; }
.side-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.9rem; margin-bottom:14px; }
.related-item{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.related-item:last-child{ border-bottom:none; }
.related-thumb{
  width:40px; height:40px; border-radius:8px; background:var(--code-bg); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:0.9rem; overflow:hidden;
}
.related-thumb img{ width:100%; height:100%; object-fit:cover; }
.related-item h6{ font-size:0.84rem; font-weight:600; margin:0 0 3px; color:var(--text-primary); }
.related-item p{ font-size:0.74rem; color:var(--text-muted); margin:0; }
.related-item:hover h6{ color:var(--orange-dark); }

.creator-card{ display:flex; align-items:center; gap:12px; }
.creator-avatar{
  width:42px; height:42px; border-radius:50%; background:var(--orange-soft); color:var(--orange-dark);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem;
}
[data-theme="dark"] .creator-avatar{ background:rgba(242,97,26,0.18); color:#FF9D6E; }
.creator-card h6{ font-size:0.86rem; font-weight:600; margin:0; color:var(--text-primary); }
.creator-card p{ font-size:0.76rem; color:var(--text-muted); margin:0; }

.checklist{ list-style:none; padding:0; margin:0; }
.checklist li{ display:flex; gap:8px; font-size:0.82rem; color:var(--text-secondary); margin-bottom:10px; align-items:flex-start; }
.checklist li i{ color:var(--orange); margin-top:2px; font-size:0.8rem; }

@media (max-width: 991px){
  .hero h1{ font-size:2.2rem; }
  .feature-item{ border-right:none; border-bottom:1px solid var(--line); }
  .prompt-header h1{ font-size:1.6rem; }
}
@media (max-width: 767px){
  .category-hero h1{ font-size:1.5rem; }
}