.embed-page{max-width:1100px;margin:0 auto;padding:2rem 1.5rem 4rem}.embed-page .breadcrumb{color:var(--text-muted,#64748b);margin-bottom:1.5rem;font-size:.875rem}.embed-page .breadcrumb a{color:var(--primary,#2563eb);text-decoration:none}.embed-page .breadcrumb a:hover{text-decoration:underline}.embed-page .breadcrumb .sep{color:var(--border,#cbd5e1);margin:0 .5rem}.embed-page .page-header{margin-bottom:2.5rem}.embed-page .page-header h1{color:var(--text,#1e293b);margin:0 0 .5rem;font-size:2rem;font-weight:800}.embed-page .page-header .subtitle{color:var(--text-muted,#64748b);max-width:680px;margin:0;font-size:1.1rem}.generator-layout{grid-template-columns:320px 1fr;gap:2rem;margin-bottom:3rem;display:grid}@media (width<=768px){.generator-layout{grid-template-columns:1fr}}.controls-panel{background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:12px;height:fit-content;padding:1.5rem}.control-group{margin-bottom:1.5rem}.control-group:last-child{margin-bottom:0}.control-group label{color:var(--text,#1e293b);margin-bottom:.5rem;font-size:.875rem;font-weight:600;display:block}.field-hint{color:var(--text-muted,#64748b);margin:.25rem 0 0;font-size:.75rem}.search-wrapper{position:relative}#store-search{border:1px solid var(--border,#e2e8f0);background:var(--bg,#f8fafc);width:100%;color:var(--text,#1e293b);box-sizing:border-box;border-radius:8px;outline:none;padding:.625rem .875rem;font-size:.9375rem;transition:border-color .15s}#store-search:focus{border-color:var(--primary,#2563eb);box-shadow:0 0 0 3px #2563eb1a}.store-dropdown{background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);z-index:50;border-radius:8px;max-height:240px;margin-top:4px;display:none;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 8px 24px #0000001f}.store-dropdown.open{display:block}.store-dropdown .dd-item{cursor:pointer;color:var(--text,#1e293b);justify-content:space-between;align-items:center;padding:.5rem .875rem;font-size:.875rem;display:flex}.store-dropdown .dd-item:hover,.store-dropdown .dd-item.highlighted{background:var(--hover,#f1f5f9)}.store-dropdown .dd-item .dd-cat{color:var(--text-muted,#64748b);font-size:.75rem}.toggle-group{border:1px solid var(--border,#e2e8f0);border-radius:8px;gap:0;display:flex;overflow:hidden}.toggle-btn{background:var(--bg,#f8fafc);color:var(--text-muted,#64748b);cursor:pointer;border:none;flex:1;padding:.5rem .75rem;font-size:.8125rem;font-weight:500;transition:all .15s}.toggle-btn+.toggle-btn{border-left:1px solid var(--border,#e2e8f0)}.toggle-btn.active{background:var(--primary,#2563eb);color:#fff}.preview-panel{background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:12px;padding:1.5rem}.preview-heading{color:var(--text,#1e293b);margin:0 0 1rem;font-size:1rem;font-weight:600}.widget-preview-container{justify-content:center;align-items:center;min-height:180px;display:flex}.placeholder-message{text-align:center;color:var(--text-muted,#64748b)}.placeholder-message svg{opacity:.5;margin-bottom:.75rem}.placeholder-message p{margin:0;font-size:.9375rem}.code-section{margin-bottom:3rem}.code-section.hidden{display:none}.code-section h2{color:var(--text,#1e293b);margin:0 0 .5rem;font-size:1.25rem;font-weight:700}.code-intro{color:var(--text-muted,#64748b);margin:0 0 1rem;font-size:.9375rem}.code-wrapper{background:var(--code-bg,#1e293b);border-radius:10px;position:relative;overflow:hidden}.copy-btn{color:#e2e8f0;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:6px;align-items:center;gap:.375rem;padding:.5rem .75rem;font-size:.8125rem;transition:background .15s;display:flex;position:absolute;top:.75rem;right:.75rem}.copy-btn:hover{background:#fff3}.copy-btn.copied{background:#16a34a;border-color:#16a34a}.embed-code{color:#e2e8f0;white-space:pre-wrap;word-break:break-all;max-height:300px;margin:0;padding:1.25rem;font-size:.8125rem;line-height:1.6;overflow-y:auto}.how-it-works{margin-bottom:3rem}.how-it-works h2{color:var(--text,#1e293b);margin:0 0 1.25rem;font-size:1.25rem;font-weight:700}.steps-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem;display:grid}@media (width<=640px){.steps-grid{grid-template-columns:1fr}}.step-card{background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:10px;padding:1.25rem}.step-number{background:var(--primary,#2563eb);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;margin-bottom:.75rem;font-size:.875rem;font-weight:700;display:flex}.step-card h3{color:var(--text,#1e293b);margin:0 0 .375rem;font-size:1rem;font-weight:600}.step-card p{color:var(--text-muted,#64748b);margin:0;font-size:.875rem;line-height:1.5}.faq-section{margin-bottom:3rem}.faq-section h2{color:var(--text,#1e293b);margin:0 0 1rem;font-size:1.25rem;font-weight:700}.faq-list details{border:1px solid var(--border,#e2e8f0);border-radius:8px;margin-bottom:.5rem;overflow:hidden}.faq-list summary{color:var(--text,#1e293b);cursor:pointer;padding:.875rem 1rem;font-size:.9375rem;font-weight:500}.faq-list summary:hover{background:var(--hover,#f8fafc)}.faq-list details[open] summary{border-bottom:1px solid var(--border,#e2e8f0)}.faq-list details p{color:var(--text-muted,#64748b);margin:0;padding:.875rem 1rem;font-size:.875rem;line-height:1.6}.faq-list code{background:var(--hover,#f1f5f9);border-radius:3px;padding:.125rem .375rem;font-size:.8125rem}.related-tools h2{color:var(--text,#1e293b);margin:0 0 1rem;font-size:1.25rem;font-weight:700}.tools-grid{grid-template-columns:repeat(4,1fr);gap:1rem;display:grid}@media (width<=768px){.tools-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=480px){.tools-grid{grid-template-columns:1fr}}.tool-link{background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:10px;padding:1rem;text-decoration:none;transition:border-color .15s,box-shadow .15s;display:block}.tool-link:hover{border-color:var(--primary,#2563eb);box-shadow:0 2px 8px #2563eb1a}.tool-link h3{color:var(--primary,#2563eb);margin:0 0 .25rem;font-size:.9375rem;font-weight:600}.tool-link p{color:var(--text-muted,#64748b);margin:0;font-size:.8125rem}[data-theme=dark] .embed-page .page-header h1,[data-theme=dark] .code-section h2,[data-theme=dark] .how-it-works h2,[data-theme=dark] .faq-section h2,[data-theme=dark] .related-tools h2,[data-theme=dark] .preview-heading,[data-theme=dark] .control-group label,[data-theme=dark] .step-card h3,[data-theme=dark] .faq-list summary{color:#f1f5f9}[data-theme=dark] .controls-panel,[data-theme=dark] .preview-panel,[data-theme=dark] .step-card,[data-theme=dark] .tool-link,[data-theme=dark] .faq-list details{background:#1e293b99;border-color:#64748b4d}[data-theme=dark] #store-search{color:#f1f5f9;background:#0f172a80;border-color:#64748b4d}[data-theme=dark] .store-dropdown{background:#1e293b;border-color:#64748b4d}[data-theme=dark] .store-dropdown .dd-item{color:#e2e8f0}[data-theme=dark] .store-dropdown .dd-item:hover{background:#33415580}[data-theme=dark] .toggle-btn{color:#94a3b8;background:#0f172a80;border-color:#64748b4d}[data-theme=dark] .toggle-btn+.toggle-btn{border-left-color:#64748b4d}[data-theme=dark] .toggle-group{border-color:#64748b4d}
