:root{
  --bg:#fffaf6; --card:#ffffff; --ink:#1f1b18; --muted:#6e6a67;
  --pill:#f2efe9; --border:#e6e0da; --blue:#2962ff;

  /* (Default variables; JS overrides --pair inline) */
  --c-riku-yushi:#218BB8;
  --c-riku-sion:#17a2a4;
  --c-riku-jaehee:#a06ce2;
  --c-yushi-sion:#4098ff;
  --c-yushi-jaehee:#ff5fa2;
  --c-sion-jaehee:#22c55e;

  --c-riku-yushi-jaehee:#6366f1;
  --c-riku-yushi-sion:#f59e0b;
  --c-riku-jaehee-sion:#9b59b6;
  --c-yushi-jaehee-sion:#00bcd4;
  --c-riku-yushi-jaehee-sion:#f43f5e;
}

/* base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
h1,h2,h3{margin:0 0 .5rem}
p{margin:.25rem 0 .75rem}

/* header */
.hero{max-width:1100px;margin:24px auto 12px;padding:0 16px;text-align:center}
.hero img{height:56px;width:auto}
.mascots{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;margin:8px 0 0}
.mascot{height:56px;width:auto;object-fit:contain;cursor:pointer}

/* controls */
.controls{
  max-width:1100px;margin:12px auto 18px;display:grid;gap:10px;align-items:center;padding:0 16px;
  grid-template-columns:1.2fr repeat(4, minmax(200px,1fr)) auto;
}
.controls input,.controls select,.btn-sm{border:1px solid var(--border);border-radius:10px;padding:.65rem .8rem;background:#fff;font-size:14px}
.btn-sm{cursor:pointer}
.btn-sm[aria-pressed="true"]{background:#1f2937;color:#fff}
@media (max-width:860px){ .controls{grid-template-columns:1fr} }

/* grid */
.prompt-list{
  max-width:1100px;margin:0 auto 40px;padding:0 16px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;
}

/* card */
.card{
  --pair: var(--border);
  background:var(--card);
  border:3px solid var(--pair, var(--border));
  border-radius:16px;
  padding:16px 16px 12px;
  position:relative;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--pair, var(--border)) 65%, transparent) inset,
    0 2px 10px rgba(0,0,0,.05);
}

/* tinted header inside the card */
.card-head{
  background: color-mix(in oklab, var(--pair, #ccc) 20%, #fff);
  border:1px solid color-mix(in oklab, var(--pair, #ccc) 55%, #fff);
  border-radius:12px;
  padding:8px 10px;
  margin:-4px 0 8px 0;
}
.card-head h3{font-size:1.2rem;margin:0}

.card .prompt-text{color:var(--ink);margin-bottom:.45rem}
.link-btn{border:0;background:none;color:var(--blue);text-decoration:underline;cursor:pointer;padding:0;font:inherit}
.link-btn:hover{text-decoration:none}

/* meta */
.meta{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:.45rem}
.meta-row{display:grid;grid-template-columns:135px 1fr;border-top:1px solid var(--border)}
.meta-row:first-child{border-top:none}
.meta-row b{background:#faf8f5;padding:.45rem .6rem}
.meta-row span{padding:.45rem .6rem}

/* chips / pills / actions */
.pill{display:inline-flex;gap:.4rem;align-items:center;padding:.35rem .6rem;background:var(--pill);
  border-radius:999px;border:1px solid var(--border);font-size:.92rem;margin:.35rem .3rem .1rem 0}
.actions{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.3rem}
.btn{border:1px solid var(--border);border-radius:10px;background:#fff;padding:.45rem .58rem;cursor:pointer}
.chips{display:flex;gap:.35rem;flex-wrap:wrap;margin:.25rem 0}
.chip{display:inline-flex;gap:.35rem;align-items:center;border:1px solid var(--border);background:#fff;border-radius:999px;padding:.28rem .55rem}
.chip button{border:0;background:none;cursor:pointer}

/* share */
.share-line{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.35rem}
.share-a{max-width:220px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--blue);text-decoration:none}

/* pair classes (fallback if JS not applied) */
.pair-riku-yushi{--pair:var(--c-riku-yushi)}
.pair-riku-sion{--pair:var(--c-riku-sion)}
.pair-riku-jaehee{--pair:var(--c-riku-jaehee)}
.pair-yushi-sion{--pair:var(--c-yushi-sion)}
.pair-yushi-jaehee{--pair:var(--c-yushi-jaehee)}
.pair-sion-jaehee{--pair:var(--c-sion-jaehee)}
.pair-riku-yushi-jaehee{--pair:var(--c-riku-yushi-jaehee)}
.pair-riku-yushi-sion{--pair:var(--c-riku-yushi-sion)}
.pair-riku-jaehee-sion{--pair:var(--c-riku-jaehee-sion, var(--c-riku-jaehee))}
.pair-yushi-jaehee-sion{--pair:var(--c-yushi-jaehee-sion, var(--c-yushi-jaehee))}
.pair-riku-yushi-jaehee-sion{--pair:var(--c-riku-yushi-jaehee-sion, var(--c-riku-yushi))}

/* preview */
#previewHost{ padding:8px; }
.preview-card{
  max-width:760px;width:calc(100% - 24px);
  border:3px solid var(--pair, #e5e5e5);
  background-color:#fff;
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  background-image:
    linear-gradient(0deg, color-mix(in oklab, var(--pair, #e5e5e5) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--pair, #e5e5e5) 12%, transparent) 1px, transparent 1px);
  background-size:20px 20px;
  background-position:-1px -1px;
}
.preview-card .pv-head{
  background:var(--pair, #111);
  color:#fff;
}
.preview-card .pv-head .btn{
  background:#fff; color:#111; border:1px solid rgba(0,0,0,.15);
}

/* Pulse effect */
.card.pulse{
  box-shadow:0 0 0 3px rgba(0,0,0,.06), 0 0 0 6px color-mix(in oklab, var(--pair, #111) 45%, #0000);
  transition:box-shadow .2s;
}