/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:#0a0a0b;color:#e4e4e7;line-height:1.6;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== Header ===== */
.site-header{text-align:center;padding:3rem 1.5rem 1.5rem}
.site-header-bar{max-width:80rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;background:linear-gradient(135deg,#7c3aed,#3b82f6,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tagline{color:#71717a;font-size:.875rem;margin-top:.5rem}
.language-switch{display:inline-flex;align-items:center;justify-content:center;padding:.45rem .9rem;border-radius:999px;border:1px solid #27272a;background:#18181b;color:#d4d4d8;font-size:.8125rem;transition:all .2s}
.language-switch:hover{border-color:#3b82f6;color:#fafafa}

/* ===== Search & Filter ===== */
.controls{max-width:56rem;margin:0 auto 2rem;padding:0 1.5rem}
.search-box{width:100%;padding:.75rem 1rem .75rem 2.75rem;background:#18181b;border:1px solid #27272a;border-radius:.75rem;color:#e4e4e7;font-size:.9375rem;outline:none;transition:border-color .2s}
.search-box:focus{border-color:#3b82f6}
.search-wrap{position:relative}
.search-wrap svg{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:#52525b;pointer-events:none}
.filter-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;justify-content:center}
.filter-tag{padding:.375rem .875rem;border-radius:2rem;border:1px solid #27272a;background:transparent;color:#a1a1aa;font-size:.8125rem;cursor:pointer;transition:all .2s}
.filter-tag:hover,.filter-tag.active{background:#7c3aed;border-color:#7c3aed;color:#fff}
.result-count{text-align:center;color:#52525b;font-size:.8125rem;margin-top:.75rem}

/* ===== Card Grid ===== */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem;max-width:80rem;margin:0 auto;padding:0 1.5rem 4rem}

/* ===== Style Card ===== */
.style-card{background:#18181b;border:1px solid #27272a;border-radius:1rem;padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;transition:border-color .25s,transform .25s;position:relative;overflow:hidden}
.style-card:hover{border-color:#3b82f6;transform:translateY(-2px)}
.card-colors{display:flex;gap:.375rem}
.color-dot{width:1.25rem;height:1.25rem;border-radius:50%;border:2px solid #27272a;flex-shrink:0}
.card-name{font-size:1.25rem;font-weight:700;color:#fafafa}
.card-desc{font-size:.875rem;color:#a1a1aa;line-height:1.5;flex:1}
.card-tags{display:flex;flex-wrap:wrap;gap:.375rem}
.card-tag{font-size:.6875rem;padding:.1875rem .5rem;border-radius:2rem;background:#27272a;color:#71717a}
.card-category{position:absolute;top:1rem;right:1rem;font-size:.6875rem;padding:.25rem .625rem;border-radius:2rem;background:rgba(124,58,237,.15);color:#a78bfa}
.card-actions{display:flex;gap:.5rem;margin-top:.25rem}
.card-btn{flex:1;padding:.5rem;border-radius:.5rem;border:1px solid #27272a;background:transparent;color:#a1a1aa;font-size:.8125rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.375rem}
.card-btn:hover{background:#27272a;color:#fafafa}
.card-btn.primary{background:#7c3aed;border-color:#7c3aed;color:#fff}
.card-btn.primary:hover{background:#6d28d9}

/* ===== Detail Page ===== */
.detail{max-width:48rem;margin:0 auto;padding:0 1.5rem 4rem}
.detail-back{display:inline-flex;align-items:center;gap:.375rem;color:#71717a;font-size:.875rem;margin-bottom:2rem;transition:color .2s}
.detail-back:hover{color:#e4e4e7}
.detail-header{margin-bottom:2rem}
.detail-name{font-size:2.25rem;font-weight:800;color:#fafafa;margin-bottom:.5rem}
.detail-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1rem}
.detail-category{font-size:.75rem;padding:.25rem .75rem;border-radius:2rem;background:rgba(124,58,237,.15);color:#a78bfa}
.detail-colors{display:flex;gap:.375rem}
.detail-desc{font-size:1.0625rem;color:#a1a1aa;line-height:1.7;margin-bottom:2rem}
.section-heading{color:#a1a1aa;font-size:.875rem;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.05em}

.prompt-block{background:#18181b;border:1px solid #27272a;border-radius:1rem;padding:1.5rem;position:relative;margin-bottom:2rem}
.prompt-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#52525b;margin-bottom:.75rem}
.prompt-text{font-size:.9375rem;line-height:1.8;color:#d4d4d8;white-space:pre-wrap}
.copy-btn{position:absolute;top:1rem;right:1rem;padding:.5rem .875rem;border-radius:.5rem;border:1px solid #27272a;background:#27272a;color:#a1a1aa;font-size:.8125rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.375rem}
.copy-btn:hover{background:#3f3f46;color:#fafafa}
.copy-btn.copied{background:#059669;border-color:#059669;color:#fff}

.detail-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.detail-tag{font-size:.8125rem;padding:.375rem .75rem;border-radius:2rem;background:#27272a;color:#71717a}

.color-palette{display:flex;gap:.75rem;margin-bottom:2rem;flex-wrap:wrap}
.palette-item{display:flex;flex-direction:column;align-items:center;gap:.375rem}
.palette-swatch{width:3.5rem;height:3.5rem;border-radius:.75rem;border:2px solid #27272a}
.palette-hex{font-size:.6875rem;font-family:monospace;color:#71717a}

.detail-link{display:inline-flex;align-items:center;gap:.375rem;padding:.625rem 1.25rem;border-radius:.5rem;background:#7c3aed;color:#fff;font-size:.875rem;font-weight:600;transition:background .2s}
.detail-link:hover{background:#6d28d9}

/* ===== Footer ===== */
.site-footer{padding:0 1.5rem 2.5rem}
.site-footer-note,.site-footer-source{max-width:48rem;margin:0 auto;text-align:center;color:#71717a}
.site-footer-note{padding-top:.25rem;font-size:.9375rem;line-height:1.8}
.site-footer-source{margin-top:.75rem;font-size:.8125rem}
.site-footer a{color:#a1a1aa;text-decoration:underline;text-underline-offset:2px}
.site-footer a:hover{color:#e4e4e7}

/* ===== Responsive ===== */
@media(max-width:640px){
  .site-header{padding:2rem 1rem 1rem}
  .site-header-bar{align-items:flex-start;flex-direction:column}
  .logo{font-size:1.375rem}
  .card-grid{grid-template-columns:1fr;padding:0 1rem 3rem}
  .detail-name{font-size:1.75rem}
  .copy-btn{position:static;margin-top:1rem}
  .site-footer{padding:0 1rem 2rem}
  .site-footer-note{font-size:.875rem;line-height:1.75}
}

/* ===== Transition for cards show/hide ===== */
.style-card[data-hidden="true"]{display:none}