/*
 * CSS Container Query Generator
 * Prefix: cqg-
 */

:root {
    --cqg-primary: #7c3aed;
    --cqg-primary-l: #a78bfa;
    --cqg-primary-light: #ede9fe;
    --cqg-bg: #f8fafc;
    --cqg-bg-card: #ffffff;
    --cqg-text: #1e293b;
    --cqg-text-muted: #64748b;
    --cqg-border: #e2e8f0;
    --cqg-code-bg: #0f172a;
    --cqg-code-text: #e2e8f0;
    --cqg-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --cqg-radius: 12px;
    --cqg-radius-sm: 8px;
    --cqg-transition: all .2s ease;
}

/* ═══════════════════════════════════════════
   Anchor Navigation
   ═══════════════════════════════════════════ */
.cqg-anchor-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cqg-anchor-nav>p,.cqg-anchor-nav>br{display:none!important}
.cqg-anchor-link{padding:6px 14px;border-radius:var(--cqg-radius-sm);background:var(--cqg-primary-light);color:var(--cqg-primary)!important;font-size:.82rem;font-weight:600;text-decoration:none!important;transition:var(--cqg-transition);white-space:nowrap}
.cqg-anchor-link:hover{background:var(--cqg-primary);color:#fff!important}

/* ═══════════════════════════════════════════
   Security / Feature Banner (3 columns)
   ═══════════════════════════════════════════ */
.cqg-security{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}
.cqg-security>p,.cqg-security>br{display:none!important}
.cqg-security-item{display:flex;align-items:flex-start;gap:10px;background:var(--cqg-bg-card);border:1px solid var(--cqg-border);border-radius:var(--cqg-radius);padding:14px;margin-top:0!important}
.cqg-security-item *{margin-top:0!important}
.cqg-security-item>span{font-size:1.5rem;flex-shrink:0;line-height:1}
.cqg-security-item p{font-size:.82rem!important;color:var(--cqg-text-muted);line-height:1.5!important;margin:0!important;padding:0!important}
.cqg-security-item strong{display:block;color:var(--cqg-text);font-size:.85rem;margin-bottom:2px}

/* ═══════════════════════════════════════════
   Form Controls
   ═══════════════════════════════════════════ */
.cqg-form{display:flex;flex-direction:column;gap:14px}
.cqg-form>p,.cqg-form>br{display:none!important}
.cqg-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cqg-row>p,.cqg-row>br{display:none!important}
.cqg-row *{margin-top:0!important}
.cqg-label{font-size:.82rem;font-weight:600;min-width:130px;color:var(--cqg-text)}
.cqg-input,.cqg-select{flex:1;min-width:120px;padding:8px 10px;border:1px solid var(--cqg-border);border-radius:var(--cqg-radius-sm);font-family:monospace;font-size:.85rem;background:#fff;color:var(--cqg-text)}
.cqg-select{cursor:pointer}

/* ═══════════════════════════════════════════
   Breakpoint Cards
   ═══════════════════════════════════════════ */
.cqg-bp-list{display:flex;flex-direction:column;gap:10px}
.cqg-bp-list>p,.cqg-bp-list>br{display:none!important}
.cqg-bp-card{background:var(--cqg-bg);border:1px solid var(--cqg-border);border-radius:var(--cqg-radius-sm);padding:12px;position:relative}
.cqg-bp-card *{margin-top:0!important}
.cqg-bp-card>p,.cqg-bp-card>br{display:none!important}
.cqg-bp-header{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.cqg-bp-header>p,.cqg-bp-header>br{display:none!important}
.cqg-bp-header *{margin-top:0!important}
.cqg-bp-num{background:var(--cqg-primary);color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}
.cqg-bp-select{padding:6px 8px;border:1px solid var(--cqg-border);border-radius:5px;font-size:.8rem;background:#fff;color:var(--cqg-text)}
.cqg-bp-val{width:80px;padding:6px 8px;border:1px solid var(--cqg-border);border-radius:5px;font-size:.8rem;font-family:monospace;text-align:center;background:#fff;color:var(--cqg-text)}
.cqg-bp-unit{padding:6px 8px;border:1px solid var(--cqg-border);border-radius:5px;font-size:.8rem;background:#fff;color:var(--cqg-text)}
.cqg-bp-del{margin-left:auto;background:none;border:none;color:#ef4444;font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:4px}
.cqg-bp-del:hover{background:rgba(239,68,68,.1)}
.cqg-bp-styles{width:100%;min-height:60px;padding:8px;border:1px solid var(--cqg-border);border-radius:5px;font-family:monospace;font-size:.8rem;resize:vertical;background:#fff;color:var(--cqg-text)}
.cqg-bp-styles::placeholder{color:var(--cqg-text-muted)}

.cqg-add-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:2px dashed var(--cqg-border);border-radius:var(--cqg-radius-sm);background:none;color:var(--cqg-primary);font-size:.85rem;cursor:pointer;font-weight:600;transition:var(--cqg-transition)}
.cqg-add-btn:hover{background:var(--cqg-primary-light);border-color:var(--cqg-primary)}

/* ═══════════════════════════════════════════
   Preset Buttons (Horizontal Scroll)
   ═══════════════════════════════════════════ */
.cqg-presets-wrapper{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:thin;margin-top:10px}
.cqg-presets-wrapper>p,.cqg-presets-wrapper>br{display:none!important}
.cqg-presets-wrapper::-webkit-scrollbar{height:4px}
.cqg-presets-wrapper::-webkit-scrollbar-thumb{background:var(--cqg-border);border-radius:2px}
.cqg-preset-btn{flex-shrink:0;padding:8px 16px;border:1px solid var(--cqg-border);border-radius:var(--cqg-radius-sm);background:var(--cqg-bg);color:var(--cqg-text);font-size:.82rem;font-weight:500;cursor:pointer;transition:var(--cqg-transition);white-space:nowrap}
.cqg-preset-btn:hover{border-color:var(--cqg-primary);color:var(--cqg-primary)}
.cqg-preset-btn.active{background:var(--cqg-primary-light);border-color:var(--cqg-primary);color:var(--cqg-primary);font-weight:600}

/* ═══════════════════════════════════════════
   Preview (inline + lightbox)
   ═══════════════════════════════════════════ */
.cqg-preview-wrap{position:relative;background:var(--cqg-bg);border:1px solid var(--cqg-border);border-radius:var(--cqg-radius);overflow:hidden;padding:16px}
.cqg-preview-wrap>p,.cqg-preview-wrap>br{display:none!important}
.cqg-preview-container{resize:horizontal;overflow:hidden;min-width:200px;max-width:100%;border:2px dashed var(--cqg-primary-l);border-radius:var(--cqg-radius-sm);padding:16px;background:#fff;position:relative;box-sizing:border-box}
.cqg-preview-container>p,.cqg-preview-container>br{display:none!important}
.cqg-preview-width{position:absolute;bottom:8px;right:12px;font-size:.75rem;color:var(--cqg-text-muted);font-family:monospace;background:rgba(255,255,255,.85);padding:2px 6px;border-radius:4px}
.cqg-preview-toolbar{display:flex;gap:8px;margin-bottom:10px;align-items:center}
.cqg-preview-toolbar>p,.cqg-preview-toolbar>br{display:none!important}
.cqg-preview-toolbar *{margin-top:0!important}
.cqg-fullscreen-btn{padding:6px 14px;border:1px solid var(--cqg-primary);border-radius:var(--cqg-radius-sm);background:#fff;color:var(--cqg-primary);font-size:.82rem;font-weight:600;cursor:pointer;transition:var(--cqg-transition);margin-left:auto}
.cqg-fullscreen-btn:hover{background:var(--cqg-primary);color:#fff}

/* Custom HTML input */
.cqg-html-input{width:100%;min-height:80px;padding:8px;border:1px solid var(--cqg-border);border-radius:var(--cqg-radius-sm);font-family:monospace;font-size:.8rem;resize:vertical;background:#fff;color:var(--cqg-text);margin-top:10px;box-sizing:border-box}
.cqg-html-input::placeholder{color:var(--cqg-text-muted)}

/* ═══════════════════════════════════════════
   Lightbox Modal (uses <dialog> top layer)
   ═══════════════════════════════════════════ */
dialog.cqg-modal-overlay{border:none;background:transparent;padding:20px;max-width:1200px;width:calc(100% - 40px);max-height:90vh;box-sizing:border-box;margin:auto}
dialog.cqg-modal-overlay::backdrop{background:rgba(0,0,0,.6)}
.cqg-modal{background:#fff;border-radius:var(--cqg-radius);width:100%;max-height:calc(90vh - 40px);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.cqg-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--cqg-border)}
.cqg-modal-header *{margin-top:0!important}
.cqg-modal-title{font-size:.95rem;font-weight:700;color:var(--cqg-text)}
.cqg-modal-close{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--cqg-text-muted);padding:4px 8px;border-radius:4px;line-height:1}
.cqg-modal-close:hover{background:var(--cqg-bg);color:var(--cqg-text)}
.cqg-modal-body{padding:20px;overflow:auto;flex:1}
.cqg-modal-preview-container{resize:horizontal;overflow:hidden;min-width:200px;max-width:100%;border:2px dashed var(--cqg-primary-l);border-radius:var(--cqg-radius-sm);padding:20px;background:#fff;position:relative;box-sizing:border-box}
.cqg-modal-width{position:absolute;bottom:10px;right:14px;font-size:.82rem;color:var(--cqg-text-muted);font-family:monospace;background:rgba(255,255,255,.85);padding:3px 8px;border-radius:4px}

/* ═══════════════════════════════════════════
   Code Output
   ═══════════════════════════════════════════ */
.cqg-output{background:var(--cqg-code-bg);border-radius:var(--cqg-radius);padding:20px;position:relative;box-shadow:var(--cqg-shadow)}
.cqg-output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.cqg-output-title{color:#94a3b8;font-size:.85rem;font-weight:bold;letter-spacing:.05em;font-family:monospace}
.cqg-copy-btn{background:var(--cqg-primary);color:#fff;border:none;border-radius:4px;padding:6px 14px;font-size:.85rem;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:background .2s}
.cqg-copy-btn:hover{background:var(--cqg-primary-l)}
.cqg-code{margin:0;padding:0;background:transparent;color:var(--cqg-code-text);font-family:'Consolas','Monaco',monospace;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-all;border:none}

/* ═══════════════════════════════════════════
   MQ Converter
   ═══════════════════════════════════════════ */
.cqg-converter{display:flex;gap:12px;flex-wrap:wrap}
.cqg-converter>p,.cqg-converter>br{display:none!important}
.cqg-converter *{margin-top:0!important}
.cqg-conv-col{flex:1;min-width:250px;display:flex;flex-direction:column;gap:6px}
.cqg-conv-col>p,.cqg-conv-col>br{display:none!important}
.cqg-conv-label{font-size:.8rem;font-weight:600;color:var(--cqg-text)}
.cqg-conv-textarea{width:100%;min-height:120px;padding:10px;border:1px solid var(--cqg-border);border-radius:var(--cqg-radius-sm);font-family:monospace;font-size:.82rem;resize:vertical;background:#fff;color:var(--cqg-text);box-sizing:border-box}
.cqg-conv-textarea.cqg-out{background:var(--cqg-code-bg);color:var(--cqg-code-text)}
.cqg-conv-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.cqg-conv-actions>p,.cqg-conv-actions>br{display:none!important}
.cqg-conv-actions *{margin-top:0!important}
.cqg-conv-btn{padding:8px 20px;background:var(--cqg-primary);color:#fff;border:none;border-radius:var(--cqg-radius-sm);cursor:pointer;font-size:.85rem;font-weight:600;transition:background .2s;align-self:flex-start}
.cqg-conv-btn:hover{background:#6d28d9}
.cqg-conv-btn--secondary{background:#64748b}
.cqg-conv-btn--secondary:hover{background:#475569}

/* ═══════════════════════════════════════════
   Unsupported banner
   ═══════════════════════════════════════════ */
.cqg-unsupported{display:none;background:#fef3c7;border:1px solid #fbbf24;color:#92400e;padding:12px 16px;border-radius:var(--cqg-radius-sm);font-size:.8rem;text-align:center;margin-bottom:12px}

/* ═══════════════════════════════════════════
   Toast
   ═══════════════════════════════════════════ */
.cqg-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background-color:var(--cqg-text);color:#fff;padding:12px 24px;border-radius:8px;font-size:.9rem;font-weight:bold;box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:100000}
.cqg-toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}

/* ═══════════════════════════════════════════
   SEO: How-to Steps
   ═══════════════════════════════════════════ */
.cqg-steps{display:grid;gap:12px;counter-reset:step}
.cqg-steps>p,.cqg-steps>br{display:none!important}
.cqg-step{display:flex;gap:14px;align-items:flex-start;margin-top:0!important}
.cqg-step *{margin-top:0!important}
.cqg-step::before{counter-increment:step;content:counter(step);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--cqg-primary);color:#fff;font-size:.85rem;font-weight:700;flex-shrink:0}
.cqg-step h4{font-size:.9rem!important;margin:0 0 4px 0!important;padding:0!important;color:var(--cqg-text)}
.cqg-step p{font-size:.82rem!important;color:var(--cqg-text-muted);margin:0!important;padding:0!important;line-height:1.5!important}

/* ═══════════════════════════════════════════
   SEO: FAQ (dl/dt/dd)
   ═══════════════════════════════════════════ */
.cqg-faq dt{font-weight:700;color:var(--cqg-text);margin-top:16px!important;font-size:.9rem}
.cqg-faq dt:first-child{margin-top:0!important}
.cqg-faq dd{color:var(--cqg-text-muted);font-size:.85rem;line-height:1.7;margin-left:0!important;padding-left:16px!important;border-left:3px solid var(--cqg-primary-light)}

/* ═══════════════════════════════════════════
   SEO: Use Cases
   ═══════════════════════════════════════════ */
.cqg-use-cases{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cqg-use-cases>p,.cqg-use-cases>br{display:none!important}
.cqg-use-case{display:flex;gap:12px;align-items:flex-start;padding:14px;background:var(--cqg-bg);border-radius:var(--cqg-radius);margin-top:0!important}
.cqg-use-case *{margin-top:0!important}
.cqg-use-case-icon{font-size:1.5rem;flex-shrink:0;line-height:1}
.cqg-use-case h4{font-size:.85rem!important;margin:0 0 4px 0!important;padding:0!important}
.cqg-use-case p{font-size:.8rem!important;color:var(--cqg-text-muted);margin:0!important;padding:0!important;line-height:1.5!important}

/* ═══════════════════════════════════════════
   SEO: Related Tools
   ═══════════════════════════════════════════ */
.cqg-related-tools{display:flex;gap:8px;flex-wrap:wrap}
.cqg-related-tools>p,.cqg-related-tools>br{display:none!important}
.cqg-related-tools *{margin-top:0!important}
.cqg-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;border:none;transition:var(--cqg-transition);text-decoration:none!important}
.cqg-btn--secondary{background:#fff;color:var(--cqg-primary)!important;border:1px solid var(--cqg-primary)}
.cqg-btn--secondary:hover{background:var(--cqg-primary-light)}
.cqg-btn--sm{padding:5px 10px;font-size:.78rem}

/* ═══════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════ */
@media (max-width: 640px) {
    .cqg-security { grid-template-columns: 1fr; gap: 8px; }
    .cqg-use-cases { grid-template-columns: 1fr; }
    .cqg-row { flex-direction: column; align-items: stretch; }
    .cqg-label { min-width: unset; }
    .cqg-converter { flex-direction: column; }
    .cqg-bp-header { flex-wrap: wrap; }
    .cqg-anchor-nav { gap: 4px; }
    .cqg-anchor-link { padding: 5px 10px; font-size: .75rem; }
    .cqg-modal { max-width: 100%; }
}