/* SafeCookie Themes page — additions on top of style.css (same design language) */

/* theme cards: square boxes */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.theme-card{position:relative;display:flex;flex-direction:column;aspect-ratio:1/1;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--soft);transition:border-color .25s,transform .25s}
.theme-card:hover{border-color:var(--mute);transform:translateY(-3px)}
.theme-shot{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--ink)}
.theme-shot .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--mute);font-size:.88rem;
 background:repeating-radial-gradient(ellipse 120% 90% at 60% 55%,rgba(255,255,255,.07) 0 2px,transparent 2px 15px)}
.theme-shot img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.theme-card.contain .theme-shot img{object-fit:contain}
.theme-tag{position:absolute;z-index:2;top:14px;right:14px;border:1px solid var(--paper);border-radius:var(--r);padding:3px 13px;font-size:.78rem;background:rgba(14,14,15,.82);backdrop-filter:blur(8px)}
.theme-info{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 18px;border-top:1px solid var(--line);background:var(--ink)}
.theme-info h3{font-size:1.05rem;letter-spacing:-.01em;margin:0}
.theme-info small{display:block;color:var(--mute);font-size:.82rem;line-height:1.35;margin-top:2px}
.theme-dl{flex:none;padding:9px 18px;font-size:.9rem}

/* little theme swatch (used in the mock windows) */
.chip-sw{position:relative;flex:none;width:46px;height:32px;border-radius:8px;border:1px solid var(--mute);background:var(--a);overflow:hidden}
.chip-sw i{position:absolute;border-radius:3px}
.chip-sw i:nth-child(1){left:3px;top:3px;bottom:3px;width:10px;background:var(--b)}
.chip-sw i:nth-child(2){left:16px;right:3px;top:4px;height:10px;background:var(--c)}
.chip-sw i:nth-child(3){left:16px;width:18px;bottom:4px;height:8px;background:var(--d)}

/* theme creator mock rows */
.sw{flex:none;width:30px;height:30px;border-radius:9px;border:1.5px solid var(--paper)}
.hex{font:600 .85rem 'Courier New',monospace;color:var(--mute);letter-spacing:.04em}
.mock-cta{display:flex;justify-content:flex-end;padding-top:16px;border-top:1px solid var(--line)}
.mock-cta .btn{pointer-events:none}
.creator-win .window-body{display:block;min-height:0}

/* how-to cards */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.how-card{display:block;border:1px solid var(--line);border-radius:22px;padding:30px}
.how-card .icon{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--paper);display:grid;place-items:center;font-size:1.2rem;font-weight:700}
.how-card h3{font-size:1.25rem;margin:18px 0 8px}.how-card p{color:var(--mute);font-size:.95rem}
.how-card b{color:var(--paper)}

.cta-band{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.page-note{margin-top:30px;color:var(--mute);font-size:.92rem}
@media(max-width:900px){.how-grid{grid-template-columns:1fr}}
@media(max-width:420px){.theme-grid{grid-template-columns:1fr}}