@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{font-family:'Inter',sans-serif;background:#0f0f13;color:#e4e4e7;min-height:100vh;line-height:1.6}

.container{max-width:900px;margin:0 auto;padding:0 1.5rem}

/* Header */
.site-header{border-bottom:1px solid rgba(255,255,255,.06);padding:1rem 0}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#e4e4e7;font-weight:700;font-size:1.15rem}
.logo-icon{font-size:1.5rem;background:linear-gradient(135deg,#f87171,#ef4444,#dc2626);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
nav{display:flex;gap:1.5rem}
nav a{color:#a1a1aa;text-decoration:none;font-size:.875rem;font-weight:500;transition:color .2s}
nav a:hover{color:#f87171}

/* Hero */
.hero{text-align:center;padding:3rem 0 2rem}
.hero h1{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#f87171,#ef4444,#dc2626);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}
.hero p{color:#a1a1aa;font-size:1.05rem;max-width:550px;margin:0 auto}

/* Ad Slots */
.ad-slot{background:#1a1a2e;border:1px dashed rgba(255,255,255,.08);border-radius:1rem;min-height:90px;display:flex;align-items:center;justify-content:center;color:#52525b;font-size:.8rem;margin:1.5rem 0}

/* Card */
.card{background:#1a1a2e;border:1px solid rgba(255,255,255,.06);border-radius:1.25rem;padding:2rem;margin-bottom:1.5rem}

/* Color Preview */
.color-preview-wrap{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem;flex-wrap:wrap}
.color-preview{width:160px;height:160px;border-radius:1.25rem;border:2px solid rgba(255,255,255,.1);background:#ef4444;flex-shrink:0;transition:background .15s}
.color-picker-wrap{display:flex;flex-direction:column;gap:.75rem}
.color-picker-wrap label{font-weight:600;font-size:.9rem;color:#a1a1aa}
input[type="color"]{width:60px;height:40px;border:none;border-radius:.5rem;cursor:pointer;background:transparent}
input[type="color"]::-webkit-color-swatch-wrapper{padding:2px}
input[type="color"]::-webkit-color-swatch{border:none;border-radius:.4rem}

/* Action Buttons */
.action-row{display:flex;gap:.75rem;margin-bottom:2rem;flex-wrap:wrap}
.btn{padding:.6rem 1.2rem;border-radius:.75rem;border:none;font-family:'Inter',sans-serif;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .2s}
.btn-primary{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}
.btn-primary:hover{opacity:.9;transform:translateY(-1px)}
.btn-secondary{background:rgba(255,255,255,.06);color:#e4e4e7;border:1px solid rgba(255,255,255,.1)}
.btn-secondary:hover{background:rgba(255,255,255,.1)}

/* Format Groups */
.format-group{margin-bottom:1.5rem}
.format-group:last-child{margin-bottom:0}
.format-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.format-label h3{font-size:.95rem;font-weight:700;color:#f87171}
.btn-copy{background:none;border:1px solid rgba(255,255,255,.1);color:#a1a1aa;padding:.3rem .7rem;border-radius:.5rem;font-size:.75rem;font-family:'Inter',sans-serif;font-weight:500;cursor:pointer;transition:all .2s}
.btn-copy:hover{border-color:#f87171;color:#f87171}
.btn-copy.copied{border-color:#4ade80;color:#4ade80}
.format-inputs{display:flex;gap:.5rem;flex-wrap:wrap}
.format-inputs input{flex:1;min-width:60px;background:#0f0f13;border:1px solid rgba(255,255,255,.1);border-radius:.75rem;padding:.65rem .85rem;color:#e4e4e7;font-family:'JetBrains Mono',monospace;font-size:.9rem;outline:none;transition:border-color .2s}
.format-inputs input:focus{border-color:#f87171}
.format-inputs .input-label{font-size:.7rem;color:#71717a;font-weight:600;text-transform:uppercase;display:block;margin-bottom:.25rem}
.input-col{display:flex;flex-direction:column;flex:1;min-width:60px}
.hex-input{max-width:200px}

/* Read-only display */
.format-value{background:#0f0f13;border:1px solid rgba(255,255,255,.1);border-radius:.75rem;padding:.65rem .85rem;color:#e4e4e7;font-family:'JetBrains Mono',monospace;font-size:.9rem;width:100%;user-select:all}

/* SEO Content */
.content-section{padding:2rem 0 3rem}
.content-section h2{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,#f87171,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}
.content-section h3{font-size:1.1rem;font-weight:700;color:#e4e4e7;margin:1.5rem 0 .5rem}
.content-section p{color:#a1a1aa;margin-bottom:.75rem;line-height:1.7}
.content-section details{background:#1a1a2e;border:1px solid rgba(255,255,255,.06);border-radius:.75rem;padding:1rem 1.25rem;margin-bottom:.75rem}
.content-section summary{font-weight:600;cursor:pointer;color:#e4e4e7}
.content-section summary:hover{color:#f87171}
.content-section details p{margin-top:.75rem}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:2rem 0;margin-top:2rem}
.site-footer .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.site-footer p{color:#52525b;font-size:.8rem}
.site-footer nav{display:flex;gap:1.25rem}
.site-footer nav a{color:#52525b;text-decoration:none;font-size:.8rem;transition:color .2s}
.site-footer nav a:hover{color:#f87171}

.hidden{display:none!important}

@media(max-width:640px){
    .hero h1{font-size:1.75rem}
    .card{padding:1.25rem}
    .color-preview-wrap{flex-direction:column;align-items:stretch}
    .color-preview{width:100%;height:100px}
    .format-inputs{flex-direction:column}
    .hex-input{max-width:100%}
    .site-header .container{flex-direction:column;gap:.75rem}
    .site-footer .container{flex-direction:column;text-align:center}
}