/* ===== Prompt Library — Light Theme (matches your landing) ===== */
/* layout classes 그대로 사용：.app, aside, header, .grid, .card ... */

:root{
  --bg: #ffffff;
  --panel: #ffffff;
  --muted: #6b7280;            /* gray-500 */
  --text: #1f2937;             /* gray-800 */
  --brand: #f3c463;            /* your brand yellow */
  --brand-2: #eab54f;          /* hover/gradient mate */
  --card: #ffffff;
  --border: #eef2f7;           /* light border */
  --accent: #f7f9fc;           /* soft chip bg */
  --radius: 12px;
  --shadow-sm: 0 6px 16px rgba(0,0,0,.05);
  --shadow-md: 0 10px 30px rgba(0,0,0,.08);
}

/* base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font:16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, "Helvetica Neue", Arial;
  color:var(--text);
  background:
    radial-gradient(900px 400px at 10% -10%, #fff7e0 0, rgba(255,255,255,0) 60%),
    var(--bg);
}

/* shell */
.app{ display:grid; grid-template-columns:280px 1fr; height:100%; }
@media (max-width:880px){ .app{ grid-template-columns:1fr; } }

/* sidebar */
aside{
  border-right:1px solid var(--border);
  background:linear-gradient(180deg,#ffffff,#ffffff);
}
.cat-hd{ padding:14px; border-bottom:1px solid var(--border); }
.title{
  font-weight:800; letter-spacing:.3px; font-size:18px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip:text; color:transparent;
}
.sub{ color:var(--muted); font-size:12.5px; margin-top:4px; }

.catlist{ padding:14px; display:flex; flex-direction:column; gap:8px; }
.cat{
  all:unset; cursor:pointer;
  padding:10px 12px; border-radius:10px; color:var(--text);
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid var(--border); background:var(--accent);
  font-weight:700;
  transition:.2s ease;
}
.cat:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.cat.active{
  background: linear-gradient(135deg,#fff,#fffbe9);
  border-color: var(--brand);
}
.count{ color:var(--muted); font-size:12px; }

/* focus styles for accessibility */
.cat:focus, .btn:focus, .card:focus {
  outline: 3px solid rgba(243,196,99,0.25);
  outline-offset: 3px;
}

/* header */
main{ display:grid; grid-template-rows:auto 1fr; }
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--border);
  background:#ffffff; position:sticky; top:0; z-index:6;
}
.hdr-left{ display:flex; gap:12px; align-items:center; }

.lang{ display:flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.lang button{ all:unset; padding:8px 12px; cursor:pointer; color:var(--muted); font-weight:700; }
.lang button.active{ color:var(--text); background:var(--accent); }

.content{ padding:18px; overflow:auto; }

/* search */
.searchbar{
  display:flex; gap:8px; align-items:center;
  padding:10px 12px; border:1px solid var(--border);
  border-radius:999px; background:#fff; box-shadow:inset 0 1px 0 rgba(0,0,0,.02);
}
.searchbar input{ all:unset; color:var(--text); flex:1; font-size:15px; }
.searchbar kbd{ border:1px solid var(--border); padding:2px 6px; border-radius:6px; color:var(--muted); font-size:12px; }

/* grid + card */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
  margin-top:16px;
}

.card {
  display:flex;
  flex-direction:column;
  background: var(--card);
  color: var(--text);
  border-radius: var(--radius);
  border:1px solid var(--border);
  padding: 1rem;
  height: 380px; /* 固定高度，讓內容可滾動 */
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: .2s ease;
}

.card:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color: var(--brand);
}

.card h3 {
  margin:0 0 6px 0;
  font-size: 1.1rem;
  font-weight:800;
  color: var(--text);
}

.card .code {
  flex: 1;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
  padding: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13.5px;
  color: #111827;
  overflow-y: auto;        /* ✅ 可滾動 */
  white-space: pre-wrap;
  max-height: 220px;       /* ✅ 固定高度 */
  line-height: 1.5;
}

.card .btnrow {
  text-align: center;
  margin-top: 0.8rem;
}

.card .btnrow button {
  background: var(--brand);
  color: #111827;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  font-size: 13.5px;
  transition: background .2s ease;
}

.card .btnrow button:hover {
  background: var(--brand-2);
}

.card .btnrow button:active {
  transform: translateY(1px);
}

/* tags, small info */
.desc{ color:var(--text); opacity:.9; font-size:13.5px; }
.tags{ display:flex; gap:6px; flex-wrap:wrap; }
.tag{
  border:1px solid var(--border); padding:2px 8px; border-radius:999px;
  font-size:11.5px; color:#6b7280; background:var(--accent); font-weight:700;
}

/* buttons (global use) */
.btnrow{ display:flex; gap:8px; margin-top:2px; }
.btn{
  all:unset; cursor:pointer; padding:10px 14px; border-radius:999px;
  border:1px solid var(--border); background:#fff; color:#1f2937; font-weight:800; font-size:13.5px;
}
.btn.primary{ background: var(--brand); border-color: var(--brand); color:#111827; }
.btn.primary:hover{ background: var(--brand-2); border-color: var(--brand-2); }
.btn:active{ transform: translateY(1px); }

/* empty/footer */
.empty{
  color: var(--muted);
  border:1px dashed var(--border);
  padding:18px;
  border-radius:12px;
  margin-top:16px;
  background:#fff;
}
.footer{ color: var(--muted); font-size:12px; margin-top:10px; }

/* toast */
.fp-toast{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  border:1px solid var(--brand);
  padding:10px 14px;
  border-radius:12px;
  color:#111827;
  z-index:9999;
  box-shadow:var(--shadow-sm);
  font-weight:700;
}

/* mobile tweaks */
@media (max-width:880px){
  aside{ position:sticky; top:0; z-index:8; }
  .catlist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
}

.site-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}