/* prompt-library.css — krueng.ai Prompt Library
   Dark theme matching the main site (--bg-abyss / cyan accents). */

:root{
  --bg-abyss:#040a12;
  --bg-deep:#081420;
  --bg-card:#0c1c30;
  --bg-card-hover:#112844;
  --cyan:#00ddb8;
  --cyan-dim:#007a66;
  --coral:#ff6b6b;
  --sapphire:#4a7aff;
  --violet:#a855f7;
  --seafoam:#34d399;
  --amber:#f59e0b;
  --rose:#f472b6;
  --text:#c0d8e8;
  --text-dim:#6a8aa0;
  --border:rgba(0,221,184,0.10);
  --border-bright:rgba(0,221,184,0.28);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg-abyss);
  color:var(--text);
  line-height:1.65;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
.main{flex:1;padding:24px 24px 60px}

a{color:var(--cyan);text-decoration:none}
a:hover{color:#40f0d0;text-decoration:underline}

/* === HEADER === */
.site-header{
  background:linear-gradient(180deg,var(--bg-deep) 0%,var(--bg-abyss) 100%);
  border-bottom:1px solid var(--border);
  padding:14px 0;
  position:sticky;top:0;z-index:10;backdrop-filter:blur(8px);
}
.site-header .wrap{display:flex;justify-content:space-between;align-items:center}
.brand{font-family:'Syne',sans-serif;font-weight:800;font-size:1.4em;color:#fff;letter-spacing:-0.02em;text-decoration:none}
.brand span{color:var(--cyan)}
.brand:hover{text-decoration:none}
.site-nav{display:flex;gap:22px}
.site-nav a{color:var(--text-dim);font-weight:500;font-size:0.95em}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--cyan);text-decoration:none}

/* === LANGUAGE TOGGLE === */
.lang-bar{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:14px 0 0;flex-wrap:wrap}
.lang-bar-label{color:var(--text-dim);font-size:0.85em;margin-right:4px}
.lang-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);padding:6px 14px;border-radius:999px;font-size:0.85em;font-family:inherit;cursor:pointer;transition:all .15s}
.lang-btn:hover{border-color:var(--border-bright);color:var(--text)}
.lang-btn.active{background:var(--cyan);color:var(--bg-abyss);border-color:var(--cyan);font-weight:600}

/* Language-aware visibility: hide all .t spans/divs by default, show only the active one */
.t{display:none}
html[data-lang="en"] .t[data-lang="en"]{display:inline}
html[data-lang="th"] .t[data-lang="th"]{display:inline}
html[data-lang="zh"] .t[data-lang="zh"]{display:inline}
/* Block-level for divs (e.g., the "How to use" content blocks) */
html[data-lang="en"] div.t[data-lang="en"]{display:block}
html[data-lang="th"] div.t[data-lang="th"]{display:block}
html[data-lang="zh"] div.t[data-lang="zh"]{display:block}

/* === HERO === */
.hero{padding:50px 0 30px;text-align:center}
.hero h1{font-family:'Syne',sans-serif;font-size:clamp(2em,5vw,3.4em);font-weight:800;color:#fff;letter-spacing:-0.02em;line-height:1.1;margin-bottom:14px}
.hero-sub{font-size:1.15em;color:var(--text-dim);max-width:680px;margin:0 auto 22px}
.hero-stats{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;font-size:0.95em;color:var(--text-dim)}
.hero-stats strong{color:var(--cyan);font-weight:700}
.hero-link{margin-top:16px;text-align:center;font-size:1em}
.hero-link a{color:var(--cyan);text-decoration:none;border-bottom:1px dashed var(--cyan-dim);padding-bottom:2px}
.hero-link a:hover{color:#40f0d0;border-bottom-color:var(--cyan)}

/* === SEARCH === */
.search-bar{display:flex;align-items:center;gap:14px;margin:18px 0 22px;flex-wrap:wrap}
#search-input{
  flex:1;min-width:260px;
  background:var(--bg-card);border:1px solid var(--border-bright);color:var(--text);
  padding:14px 18px;border-radius:12px;font-size:1em;font-family:inherit;
  outline:none;transition:border-color .15s, box-shadow .15s;
}
#search-input::placeholder{color:var(--text-dim)}
#search-input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,221,184,0.15)}
.search-count{color:var(--text-dim);font-size:0.9em;white-space:nowrap}

/* === FACETS === */
.facets{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.facet{
  background:var(--bg-card);border:1px solid var(--border);color:var(--text);
  padding:8px 14px;border-radius:999px;font-size:0.88em;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:all .15s;
}
.facet:hover{border-color:var(--border-bright);background:var(--bg-card-hover)}
.facet.active{background:var(--cyan);color:var(--bg-abyss);border-color:var(--cyan);font-weight:600}
.facet.active .facet-count{background:rgba(0,0,0,0.18)}
.facet-count{background:rgba(255,255,255,0.06);padding:1px 8px;border-radius:999px;font-size:0.85em}

/* === CARD GRID === */
.prompt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin-bottom:50px}
.card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  padding:20px;text-decoration:none;color:var(--text);
  transition:transform .15s, border-color .15s, background .15s;
}
.card:hover{transform:translateY(-3px);border-color:var(--border-bright);background:var(--bg-card-hover);text-decoration:none}
.card.hidden{display:none}
.card-cat{align-self:flex-start}
.card-title{font-family:'Syne',sans-serif;font-size:1.15em;font-weight:700;color:#fff;line-height:1.3;letter-spacing:-0.01em}
.card-summary{font-size:0.92em;color:var(--text-dim);line-height:1.55}

/* === CHIPS / CATEGORY COLORS === */
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-size:0.78em;font-weight:600;letter-spacing:0.02em;text-transform:uppercase;background:rgba(255,255,255,0.04);border:1px solid var(--border)}
.chip-coding{color:var(--sapphire);border-color:rgba(74,122,255,0.3)}
.chip-email{color:var(--seafoam);border-color:rgba(52,211,153,0.3)}
.chip-marketing{color:var(--coral);border-color:rgba(255,107,107,0.3)}
.chip-writing{color:var(--amber);border-color:rgba(245,158,11,0.3)}
.chip-productivity{color:var(--cyan);border-color:var(--border-bright)}
.chip-learning{color:var(--violet);border-color:rgba(168,85,247,0.3)}
.chip-business{color:var(--rose);border-color:rgba(244,114,182,0.3)}
.chip-data{color:var(--sapphire);border-color:rgba(74,122,255,0.3)}
.chip-creative{color:var(--rose);border-color:rgba(244,114,182,0.3)}
.chip-career{color:var(--seafoam);border-color:rgba(52,211,153,0.3)}

/* === ABOUT / EMPTY === */
.about{margin:30px 0 50px;padding:28px;background:var(--bg-card);border:1px solid var(--border);border-radius:16px}
.about h2{font-family:'Syne',sans-serif;color:#fff;margin-bottom:14px;font-size:1.35em;font-weight:700}
.about ol{padding-left:22px;color:var(--text-dim)}
.about ol li{margin-bottom:8px}
.about strong{color:var(--text)}
.empty-state{text-align:center;padding:40px;color:var(--text-dim)}
.empty-state.hidden{display:none}
.hidden{display:none}

/* === PROMPT DETAIL PAGE === */
.crumbs{margin:8px 0 24px;font-size:0.9em;color:var(--text-dim)}
.crumbs a{color:var(--text-dim)}
.crumbs a:hover{color:var(--cyan)}
.crumbs span[aria-current]{color:var(--text)}
.crumbs span[aria-hidden]{margin:0 8px;color:var(--text-dim);opacity:0.5}

.prompt-page{max-width:880px;margin:0 auto}
.prompt-header{margin-bottom:30px}
.prompt-header h1{font-family:'Syne',sans-serif;font-size:clamp(1.8em,4vw,2.6em);font-weight:800;color:#fff;line-height:1.15;letter-spacing:-0.02em;margin:14px 0 10px}
.prompt-header .lead{font-size:1.1em;color:var(--text-dim);line-height:1.6}

.prompt-section{margin-bottom:32px;padding-bottom:30px;border-bottom:1px solid var(--border)}
.prompt-section:last-of-type{border-bottom:none}
.prompt-section h2{font-family:'Syne',sans-serif;font-size:1.35em;font-weight:700;color:#fff;margin-bottom:14px;letter-spacing:-0.01em}

.prompt-block-wrap{background:var(--bg-card);padding:22px;border-radius:14px;border:1px solid var(--border-bright)}
.prompt-block-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.prompt-block-head h2{margin:0}
.copy-btn{background:var(--cyan);color:var(--bg-abyss);border:none;padding:8px 16px;border-radius:8px;font-family:inherit;font-size:0.88em;font-weight:600;cursor:pointer;transition:background .15s}
.copy-btn:hover{background:#40f0d0}
.copy-btn.copied{background:var(--seafoam)}
.prompt-text{background:var(--bg-abyss);color:var(--text);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;font-size:0.92em;padding:18px;border-radius:10px;line-height:1.55;border:1px solid var(--border);overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}
.prompt-text code{font-family:inherit;color:inherit;background:none;padding:0}
.expected-output{color:var(--text-dim);white-space:pre-wrap;line-height:1.65}

/* English-learning callout (the SEO-magnet hook) */
.english-lessons{background:linear-gradient(135deg,rgba(0,221,184,0.05),rgba(74,122,255,0.05));padding:24px;border-radius:14px;border:1px solid var(--border)}
.lesson-intro{color:var(--text-dim);margin-bottom:16px;font-size:0.95em}
.lesson-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px}
.lesson-list li{padding:12px 14px;background:rgba(0,0,0,0.18);border-left:3px solid var(--cyan);border-radius:6px}
.lesson-phrase{display:block;font-family:'JetBrains Mono',monospace;color:var(--cyan);font-size:0.92em;margin-bottom:4px}
.lesson-note{display:block;color:var(--text);font-size:0.92em;line-height:1.55}

.variations{padding-left:22px;color:var(--text-dim);line-height:1.7}
.variations strong{color:var(--text)}

/* Related prompts */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.related-card{display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--text);transition:all .15s}
.related-card:hover{border-color:var(--border-bright);background:var(--bg-card-hover);text-decoration:none;transform:translateY(-2px)}
.related-cat{font-size:0.74em;text-transform:uppercase;color:var(--text-dim);font-weight:600;letter-spacing:0.05em}
.related-title{font-family:'Syne',sans-serif;font-weight:700;color:#fff;font-size:1.02em;line-height:1.3}
.related-summary{font-size:0.86em;color:var(--text-dim);line-height:1.5}

.back{margin-top:30px;text-align:center}
.back a{color:var(--text-dim);font-size:0.95em}
.back a:hover{color:var(--cyan)}

/* === FOOTER === */
.site-footer{border-top:1px solid var(--border);padding:24px 0;color:var(--text-dim);font-size:0.88em;text-align:center;margin-top:auto}

/* === RESPONSIVE === */
@media (max-width:640px){
  .wrap{padding:0 16px}
  .hero{padding:30px 0 20px}
  .hero-stats{gap:14px}
  .prompt-section{padding-bottom:22px;margin-bottom:22px}
  .prompt-block-head{flex-direction:column;align-items:flex-start;gap:10px}
}