.widget-guide{display:flex;flex-direction:column;gap:var(--space-3xl);padding-top:var(--space-md);border-top:1px solid var(--border)}.guide-education{display:grid;gap:var(--space-lg)}@media(width>=768px){.guide-education{grid-template-columns:1fr 1fr}}.education-card{padding:var(--space-lg);border-radius:var(--radius-xl);border:1px solid}.education-oembed{background:color-mix(in srgb,var(--accent) 5%,transparent);border-color:color-mix(in srgb,var(--accent) 20%,transparent)}.education-iframe{background:var(--bg-subtle);border-color:var(--border-subtle)}.education-title{display:flex;align-items:center;gap:var(--space-sm);font-size:1rem;font-weight:700;color:var(--text-main);margin:0 0 var(--space-base)}.education-icon{width:1.25rem;height:1.25rem;color:var(--accent)}.education-icon-muted{color:var(--text-muted)}.education-desc{font-size:.875rem;color:var(--text-muted);line-height:1.6;margin:0 0 var(--space-md)}.education-tags{display:flex;gap:var(--space-sm)}.tag{display:inline-flex;align-items:center;padding:var(--space-2xs) var(--space-base);border-radius:var(--radius-full);font-size:.75rem;font-weight:500}.tag-green{background:color-mix(in srgb,var(--color-success) 20%,transparent);color:var(--color-success)}.tag-indigo{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}.tag-blue{background:color-mix(in srgb,var(--color-blue-tag) 20%,transparent);color:var(--color-blue-tag)}.tag-gray{background:var(--bg-subtle);color:var(--text-muted)}.platforms-section{display:flex;flex-direction:column;gap:var(--space-lg)}.section-heading{display:flex;align-items:center;gap:var(--space-sm);font-size:1.125rem;font-weight:700;color:var(--text-main);margin:0}.section-heading-icon{width:1.5rem;height:1.5rem;color:var(--accent)}.wp-icon{color:var(--color-wp-blue)}.platforms-grid{display:grid;gap:var(--space-md);grid-template-columns:1fr 1fr}@media(width>=1024px){.platforms-grid{grid-template-columns:repeat(4,1fr)}}.platform-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-md-lg);display:flex;flex-direction:column;gap:var(--space-base);transition:border-color .2s}.platform-card:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}.platform-title{display:flex;align-items:center;gap:var(--space-sm);font-size:.875rem;font-weight:700;color:var(--text-main)}.platform-icon{width:1.25rem;height:1.25rem;color:var(--color-wp-blue)}.platform-icon-dark{color:var(--text-main)}.platform-desc{font-size:.75rem;color:var(--text-muted);line-height:1.6;margin:0;font-weight:500}.wp-guide{display:flex;flex-direction:column;gap:var(--space-lg)}.wp-grid{display:grid;gap:var(--space-lg);background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-lg)}@media(width>=768px){.wp-grid{grid-template-columns:1fr 1fr}}.wp-option{display:flex;flex-direction:column;gap:var(--space-base)}.option-label{display:flex;align-items:center;gap:var(--space-sm);font-size:.875rem;color:var(--text-main)}.option-badge{width:1.5rem;height:1.5rem;border-radius:var(--radius-full);background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}.option-badge-pro{background:color-mix(in srgb,var(--accent) 15%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent)}.option-desc{font-size:.875rem;color:var(--text-muted);margin:0;line-height:1.6}.alert{display:flex;gap:var(--space-base);padding:var(--space-base) var(--space-md);border-radius:var(--radius-base);font-size:.75rem;line-height:1.6;border:1px solid}.alert-warning{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:var(--color-warning);border-color:var(--color-warning)}.alert-success{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:var(--color-success);border-color:var(--color-success)}.alert-icon{width:1.25rem;height:1.25rem;flex-shrink:0}.alert-icon-success{color:var(--color-success)}.option-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-base)}.option-steps li{display:flex;gap:var(--space-base);font-size:.875rem;color:var(--text-muted);align-items:flex-start}.step-icon{width:1.25rem;height:1.25rem;flex-shrink:0;color:var(--text-muted)}.benefits-section{border-top:1px solid var(--border);padding-top:var(--space-3xl);display:flex;flex-direction:column;align-items:center;gap:var(--space-2xl);text-align:center}.benefits-title{font-size:2rem;font-weight:900;letter-spacing:-.04em;color:var(--text-main);margin:0}.benefits-desc{font-size:1rem;color:var(--text-muted);max-width:36rem;line-height:1.6;margin:0}.benefits-grid{display:grid;gap:var(--space-2xl);width:100%;text-align:left}@media(width>=640px){.benefits-grid{grid-template-columns:repeat(3,1fr)}}.benefit{display:flex;flex-direction:column;gap:var(--space-base)}.benefit-icon-wrap{width:2.5rem;height:2.5rem;background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:var(--radius-base);display:flex;align-items:center;justify-content:center;color:var(--accent)}.benefit-icon{width:1.5rem;height:1.5rem}.benefit-title{font-size:1rem;font-weight:700;color:var(--text-main);margin:0}.benefit-desc{font-size:.875rem;color:var(--text-muted);line-height:1.6;margin:0}.platforms-label{font-size:1rem;font-weight:700;color:var(--text-main);margin:0}.platforms-logos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);width:100%}@media(width>=640px){.platforms-logos{grid-template-columns:repeat(4,1fr)}}.platform-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);font-size:.75rem;font-weight:700;color:var(--text-muted);transition:border-color .2s}.platform-logo:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}.logo-icon{width:2rem;height:2rem;color:var(--text-main)}.widgets-layout{display:flex;flex-direction:column;min-height:calc(100vh - 60px);overflow:hidden}@media(width>=1024px){.widgets-layout{flex-direction:row}}.widgets-sidebar{width:100%;border-bottom:1px solid var(--border);background:var(--bg-card);display:flex;flex-direction:column;z-index:30;flex-shrink:0}@media(width>=1024px){.widgets-sidebar{width:20rem;border-bottom:none;border-right:1px solid var(--border)}}.sidebar-header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border-subtle)}.sidebar-title{font-size:1.25rem;font-weight:900;letter-spacing:-.02em;color:var(--accent);display:flex;align-items:center;gap:var(--space-sm);margin:0}.sidebar-icon{width:1.5rem;height:1.5rem}.sidebar-subtitle{font-size:.625rem;color:var(--text-muted);margin-top:var(--space-2xs);text-transform:uppercase;letter-spacing:.2em;font-weight:700}.sidebar-search-wrap{margin-top:var(--space-lg);position:relative}.sidebar-search{width:100%;padding:var(--space-base) var(--space-md) var(--space-base) var(--space-2-5xl);background:var(--bg-subtle);border:none;border-radius:var(--radius-lg);font-size:.875rem;font-weight:500;color:var(--text-main);outline:none;transition:box-shadow .2s;box-sizing:border-box}.sidebar-search:focus{box-shadow:0 0 0 2px var(--accent)}.search-icon{position:absolute;left:var(--space-base);top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;color:var(--text-muted);pointer-events:none}.sidebar-nav{flex:1;overflow-y:auto;padding:var(--space-md) var(--space-md) var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm)}.category-group{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:all .3s}.category-group.is-open{border-color:color-mix(in srgb,var(--accent) 30%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent)}.category-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);background:var(--bg-subtle);border:none;cursor:pointer;transition:background .2s}.category-toggle:hover{background:color-mix(in srgb,var(--accent) 8%,var(--bg-subtle))}.category-label{font-size:.6875rem;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.15em}.category-toggle:hover .category-label{color:var(--accent)}.chevron{width:1rem;height:1rem;color:var(--text-muted);transition:transform .3s}.chevron.rotated{transform:rotate(180deg)}.category-content{background:var(--bg-card);padding:var(--space-sm);display:flex;flex-direction:column;gap:var(--space-2xs)}.category-content.hidden{display:none}.utility-btn{width:100%;text-align:left;padding:var(--space-base) var(--space-md);border-radius:var(--radius-base);font-size:.75rem;font-weight:700;color:var(--text-muted);background:none;border:none;cursor:pointer;display:flex;text-transform:uppercase;letter-spacing:.05em;transition:all .15s}.utility-btn:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent)}.utility-btn.active-tool{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}.sidebar-suggest{margin-top:var(--space-md);padding:var(--space-md);background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.suggest-icon-wrap{width:2.5rem;height:2.5rem;background:color-mix(in srgb,var(--accent) 15%,transparent);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;color:var(--accent)}.suggest-icon{width:1.25rem;height:1.25rem}.suggest-title{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-main);margin:0}.suggest-desc{font-size:.625rem;color:var(--text-muted);line-height:1.5;margin:0}.suggest-cta{display:block;width:100%;padding:var(--space-sm);background:var(--accent);color:var(--color-brand-white);border-radius:var(--radius-base);font-size:.75rem;font-weight:800;text-decoration:none;text-align:center;transition:opacity .2s}.suggest-cta:hover{opacity:90%}.widgets-main{flex:1;display:flex;flex-direction:column;overflow-y:auto}.widgets-toolbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg-main) 90%,transparent);backdrop-filter:blur(12px);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:var(--space-md)}@media(width>=640px){.widgets-toolbar{flex-direction:row;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-2-5xl)}}.toolbar-info{min-width:0}.category-badge{display:inline-block;padding:var(--space-2xs) var(--space-sm);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-size:.5625rem;font-weight:800;text-transform:uppercase;letter-spacing:.2em;border-radius:var(--radius-base);margin-bottom:var(--space-sm);transition:opacity .2s}.category-badge.hidden{display:none}.toolbar-title{font-size:1.25rem;font-weight:900;letter-spacing:-.03em;color:var(--text-main);margin:0;line-height:1.2}@media(width>=1024px){.toolbar-title{font-size:1.875rem}}.toolbar-desc{font-size:.875rem;color:var(--text-muted);margin:var(--space-2xs) 0 0}.toolbar-controls{display:flex;align-items:center;gap:var(--space-base);flex-shrink:0;flex-wrap:wrap}.control-group{display:flex;align-items:center;gap:var(--space-3xs);background:var(--bg-card);padding:var(--space-3xs);border-radius:var(--radius-lg);border:1px solid var(--border)}.control-label{font-size:.5625rem;font-weight:800;text-transform:uppercase;letter-spacing:.2em;color:var(--text-muted);padding:0 .375rem}.widget-theme-btn{width:2rem;height:2rem;border-radius:var(--radius-base);display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--text-muted);cursor:pointer;transition:all .15s}.widget-theme-btn:hover{background:var(--bg-subtle)}.widget-theme-btn.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}.bg-toggle{width:2.25rem;height:2.25rem;border-radius:var(--radius-base);border:1px solid var(--border);cursor:pointer;transition:all .15s;flex-shrink:0}.bg-toggle.bg-white{background:var(--color-brand-white)}.bg-toggle.bg-black{background:var(--color-brand-dark);border-color:var(--text-muted)}.bg-toggle.bg-grid{background:var(--bg-muted);background-image:linear-gradient(to right,color-mix(in srgb,var(--text-main) 13%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--text-main) 13%,transparent) 1px,transparent 1px);background-size:4px 4px}.bg-toggle.active-bg{outline:2px solid var(--accent);outline-offset:2px}.btn-icon-sm{width:1rem;height:1rem}.widgets-content{padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-2xl);max-width:64rem;width:100%;margin:0 auto;box-sizing:border-box}@media(width>=1024px){.widgets-content{padding:var(--space-2-5xl)}}.preview-section{display:flex;flex-direction:column;gap:var(--space-md)}.section-label{display:flex;align-items:center;gap:var(--space-sm);font-size:.625rem;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.2em;padding:0 var(--space-sm)}.label-icon{width:1rem;height:1rem}.preview-canvas{border-radius:var(--radius-2xl);min-height:18rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);box-shadow:var(--shadow-light);transition:all .5s;overflow:hidden;padding:0}@media(width>=640px){.preview-canvas{padding:2.5rem}}.preview-canvas.preview-white{background:var(--color-brand-white);border-color:var(--border-base)}.preview-canvas.preview-black{background:var(--color-brand-dark);border-color:var(--text-muted)}.preview-canvas.preview-grid{background:var(--bg-muted);background-image:linear-gradient(to right,color-mix(in srgb,var(--text-main) 7%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--text-main) 7%,transparent) 1px,transparent 1px);background-size:14px 24px;border-color:var(--border-base)}.canvas-inner{width:100%}.empty-canvas{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-3xl) var(--space-5xl);gap:var(--space-md)}.empty-icon-wrap{width:5rem;height:5rem;background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}.empty-icon{width:2.5rem;height:2.5rem;color:var(--accent)}.empty-text{color:var(--text-muted);font-style:italic;font-size:.875rem;margin:0}.embed-section.hidden{display:none}.embed-grid{display:grid;gap:var(--space-xl)}@media(width>=1024px){.embed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.embed-card{background:var(--bg-surface);border:1px solid var(--border-base);border-radius:var(--radius-2xl);padding:var(--space-1-5xl);display:flex;flex-direction:column;gap:var(--space-lg);transition:all .3s ease;box-shadow:var(--shadow-sm)}.embed-card-header{display:flex;align-items:center;justify-content:space-between}.embed-card-title{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.2rem;color:var(--accent);margin:0}.embed-card-icon{width:1.25rem;height:1.25rem;color:var(--text-muted);opacity:30%}.embed-card-desc{font-size:.6875rem;color:var(--text-muted);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-style:italic;margin:calc(var(--space-sm) * -1) 0 0;opacity:70%}.oembed-wrapper{display:flex;align-items:center;gap:var(--space-md);width:100%}.embed-code-row{flex:1;min-width:0}.embed-code{width:100%;background:var(--bg-muted);padding:var(--space-md) var(--space-md-lg);border-radius:var(--radius-lg);font-size:.75rem;color:var(--text-main);border:1px solid var(--border-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;font-style:italic;opacity:80%}.embed-iframe-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle);background:var(--bg-muted)}.embed-iframe-code{padding:var(--space-md-lg);font-size:.6875rem;color:var(--text-main);border:none;white-space:pre-wrap;word-break:break-all;max-height:12rem;overflow-y:auto;margin:0;line-height:1.6;opacity:80%}.copy-btn{border-radius:var(--radius-lg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.copy-btn:active{transform:scale(.95)}.copy-btn-square{width:3.5rem;height:3.5rem;background:var(--accent);color:var(--color-brand-white);box-shadow:0 4px 15px color-mix(in srgb,var(--accent) 25%,transparent);flex-shrink:0}.copy-icon-lg{width:1.25rem;height:1.25rem}.copy-btn-full{width:100%;padding:var(--space-md-lg);background:var(--text-main);color:var(--bg-main);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.15rem;gap:var(--space-base);box-shadow:var(--shadow-sm)}.copy-btn-full:hover{opacity:90%;transform:translateY(-2px)}@media(width<=1024px){.embed-grid{grid-template-columns:1fr}}