.ai-model-loading{margin-bottom:var(--space-6);padding:var(--space-5);border-radius:var(--radius-lg);background:linear-gradient(135deg,#ede9fe 0%,#ddd6fe 100%);border:2px solid #c4b5fd}.model-loading-content{align-items:center;gap:var(--space-4);display:flex}.model-icon{color:#8b5cf6;flex-shrink:0;width:48px;height:48px}.model-icon.spinning{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.model-loading-content h4{font-size:var(--font-lg);color:var(--text-primary);margin:0 0 var(--space-1)0;font-weight:700}.model-loading-content p{font-size:var(--font-sm);color:var(--text-secondary);margin:0}.bg-options-section{margin-bottom:var(--space-6);padding:var(--space-5);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.bg-options-label{align-items:center;gap:var(--space-2);font-size:var(--font-base);color:var(--text-primary);margin-bottom:var(--space-4);font-weight:600;display:flex}.bg-options-label svg{width:20px;height:20px;color:var(--color-primary)}.bg-options-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(120px,1fr));display:grid}.bg-option-btn{align-items:center;gap:var(--space-2);padding:var(--space-4);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);flex-direction:column;display:flex}.bg-option-btn:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.bg-option-btn.active{border-color:var(--color-primary);background:var(--color-primary-light);box-shadow:var(--shadow-md)}.bg-preview{border-radius:var(--radius-md);border:2px solid var(--border-primary);width:60px;height:60px}.transparent-bg{background-image:linear-gradient(45deg,#e5e7eb 25%,#0000 25%),linear-gradient(-45deg,#e5e7eb 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e5e7eb 75%),linear-gradient(-45deg,#0000 75%,#e5e7eb 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.white-bg{background:#fff}.black-bg{background:#000}.blur-bg{filter:blur(2px);background:linear-gradient(135deg,#f3f4f6 0%,#9ca3af 100%)}.bg-option-btn span{font-size:var(--font-sm);color:var(--text-primary);font-weight:600}.bg-option-btn small{font-size:var(--font-xs);color:var(--text-tertiary)}.edge-blur-section{margin-bottom:var(--space-6);padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.edge-blur-label{font-size:var(--font-sm);color:var(--text-primary);margin-bottom:var(--space-3);font-weight:600;display:block}.edge-blur-slider{border-radius:var(--radius-full);background:var(--color-primary-light);-webkit-appearance:none;cursor:pointer;outline:none;width:100%;height:6px}.edge-blur-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-primary);cursor:pointer;width:20px;height:20px;box-shadow:var(--shadow-sm);border-radius:50%}.edge-blur-slider::-moz-range-thumb{background:var(--color-primary);cursor:pointer;width:20px;height:20px;box-shadow:var(--shadow-sm);border:none;border-radius:50%}.edge-blur-hints{margin-top:var(--space-2);font-size:var(--font-xs);color:var(--text-tertiary);justify-content:space-between;display:flex}.ai-info-card{align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-6);padding:var(--space-4);border-radius:var(--radius-md);background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);border-left:4px solid #3b82f6;display:flex}.ai-info-icon{color:#3b82f6;flex-shrink:0;width:24px;height:24px;margin-top:2px}.ai-info-content p{font-size:var(--font-sm);color:var(--text-secondary);margin:0;line-height:1.6}.ai-info-content strong{color:var(--text-primary)}.btn-ai{background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%);border-color:#8b5cf6}.btn-ai:hover:not(:disabled){background:linear-gradient(135deg,#7c3aed 0%,#6d28d9 100%)}.ai-progress{background:linear-gradient(90deg,#8b5cf6 0%,#7c3aed 100%)}.before-after-grid{gap:var(--space-6);margin:var(--space-6)0;flex-direction:column;display:flex}.before-after-item{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-4);border:1px solid var(--border-primary)}.comparison-container{gap:var(--space-4);grid-template-columns:1fr auto 1fr;align-items:center;display:grid}.comparison-side{gap:var(--space-2);flex-direction:column;display:flex}.comparison-label{font-size:var(--font-sm);color:var(--text-secondary);text-align:center;text-transform:uppercase;letter-spacing:.05em;font-weight:600}.comparison-img-wrapper{border-radius:var(--radius-md);border:2px solid var(--border-primary);overflow:hidden}.comparison-img-wrapper.checkered-bg{background-image:linear-gradient(45deg,#e5e7eb 25%,#0000 25%),linear-gradient(-45deg,#e5e7eb 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e5e7eb 75%),linear-gradient(-45deg,#0000 75%,#e5e7eb 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.comparison-img{border-radius:var(--radius-md);border:2px solid var(--border-primary);width:100%;height:auto;display:block}.comparison-divider{background:var(--gradient-primary);color:#fff;width:48px;height:48px;box-shadow:var(--shadow-md);border-radius:50%;justify-content:center;align-items:center;display:flex}.comparison-divider svg{width:24px;height:24px}.comparison-filename{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-primary);font-size:var(--font-sm);color:var(--text-secondary);text-align:center;font-weight:500}.checkered-bg{background-image:linear-gradient(45deg,#e5e7eb 25%,#0000 25%),linear-gradient(-45deg,#e5e7eb 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e5e7eb 75%),linear-gradient(-45deg,#0000 75%,#e5e7eb 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}@media (max-width:768px){.comparison-container{gap:var(--space-3);grid-template-columns:1fr}.comparison-divider{transform:rotate(90deg)}.bg-options-grid{grid-template-columns:repeat(2,1fr)}}.webp-benefits-card{margin-bottom:var(--space-6);padding:var(--space-5);border-radius:var(--radius-lg);background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%);border:2px solid #bae6fd}.benefits-header{align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);display:flex}.benefits-header h4{font-size:var(--font-lg);color:var(--text-primary);margin:0;font-weight:700}.benefits-icon{color:#0ea5e9;width:24px;height:24px}.benefits-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.benefit-item{align-items:center;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);background:#fff;display:flex}.benefit-emoji{font-size:var(--font-xl);flex-shrink:0}.benefit-text{font-size:var(--font-sm);color:var(--text-secondary);font-weight:500}.webp-quality-settings{margin-bottom:var(--space-6);padding:var(--space-5);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.quality-header{margin-bottom:var(--space-4);justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.lossless-toggle{align-items:center;display:flex}.lossless-toggle label{align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;display:flex}.lossless-toggle input[type=checkbox]{cursor:pointer;width:18px;height:18px;accent-color:var(--color-primary)}.quality-slider-container{margin-bottom:var(--space-4)}.quality-info{align-items:flex-start;gap:var(--space-2);padding:var(--space-3);background:var(--color-primary-light);border-left:4px solid var(--color-primary);border-radius:var(--radius-sm);display:flex}.quality-info .info-icon{width:18px;height:18px;color:var(--color-primary);flex-shrink:0;margin-top:2px}.quality-info span{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.5}.format-badge{top:var(--space-2);left:var(--space-2);padding:var(--space-1)var(--space-2);background:var(--color-info);color:#fff;font-size:var(--font-xs);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);font-weight:700;position:absolute}.conversion-badge{top:var(--space-2);left:var(--space-2);padding:var(--space-1)var(--space-2);color:#fff;font-size:var(--font-xs);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#10b981 0%,#059669 100%);font-weight:700;position:absolute}.savings-badge{top:var(--space-2);right:var(--space-2);padding:var(--space-1)var(--space-2);background:var(--color-success);color:#fff;font-size:var(--font-xs);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);font-weight:700;position:absolute}@media (max-width:640px){.benefits-grid{grid-template-columns:1fr}.quality-header{flex-direction:column;align-items:flex-start}}.format-info-grid{margin-bottom:var(--space-6);padding:var(--space-5);border-radius:var(--radius-lg);background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);border:2px solid #bbf7d0}.format-info-header{align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);display:flex}.format-info-header svg{color:#10b981;width:24px;height:24px}.format-info-header h4{font-size:var(--font-lg);color:var(--text-primary);margin:0;font-weight:700}.format-cards{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));display:grid}.format-card-mini{align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);transition:all var(--transition-base);background:#fff;display:flex}.format-card-mini:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}.format-icon{flex-shrink:0;font-size:24px}.format-details{gap:var(--space-1);flex-direction:column;display:flex}.format-details strong{font-size:var(--font-sm);color:var(--text-primary);font-weight:700}.format-details small{font-size:var(--font-xs);color:var(--text-tertiary)}.universal-format-selector{margin-bottom:var(--space-6);padding:var(--space-5);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.format-selector-label{align-items:center;gap:var(--space-2);font-size:var(--font-base);color:var(--text-primary);margin-bottom:var(--space-4);font-weight:600;display:flex}.format-selector-label svg{width:20px;height:20px;color:var(--color-primary)}.format-options-universal{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.format-option-btn{align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);text-align:left;display:flex}.format-option-btn:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.format-option-btn.active{border-color:var(--color-primary);background:var(--color-primary-light);box-shadow:var(--shadow-md)}.format-icon-large{flex-shrink:0;font-size:32px}.format-info{gap:var(--space-1);flex-direction:column;display:flex}.format-info strong{font-size:var(--font-base);color:var(--text-primary);font-weight:700}.format-info small{font-size:var(--font-xs);color:var(--text-tertiary);line-height:1.4}.conversion-settings{margin-bottom:var(--space-6);padding:var(--space-5);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);gap:var(--space-4);flex-direction:column;display:flex}.quality-control{gap:var(--space-3);flex-direction:column;display:flex}.transparency-option{gap:var(--space-2);padding:var(--space-3);background:var(--bg-primary);border-radius:var(--radius-md);border:1px solid var(--border-primary);flex-direction:column;display:flex}.checkbox-label{align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--font-sm);color:var(--text-primary);font-weight:500;display:flex}.checkbox-label input[type=checkbox]{cursor:pointer;width:18px;height:18px;accent-color:var(--color-primary)}.option-hint{font-size:var(--font-xs);color:var(--text-tertiary);margin-left:var(--space-6)}.format-note{align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--color-primary-light);border-left:4px solid var(--color-primary);border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--text-secondary);display:flex}.format-note svg{width:18px;height:18px;color:var(--color-primary);flex-shrink:0}.webp-note{background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);border-left-color:#3b82f6}.webp-note svg{color:#3b82f6}.format-badge-universal{top:var(--space-2);left:var(--space-2);padding:var(--space-1)var(--space-2);color:#fff;font-size:var(--font-xs);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);font-weight:700;position:absolute}.conversion-badge-universal{top:var(--space-2);left:var(--space-2);padding:var(--space-1)var(--space-3);color:#fff;font-size:var(--font-xs);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#10b981 0%,#059669 100%);font-weight:700;position:absolute}.btn-universal{background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);border-color:#6366f1}.btn-universal:hover:not(:disabled){background:linear-gradient(135deg,#4f46e5 0%,#4338ca 100%)}.universal-progress{background:linear-gradient(90deg,#6366f1 0%,#4f46e5 100%)}.conversion-stats-grid{gap:var(--space-4);margin:var(--space-6)0;padding:var(--space-5);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));display:grid}@media (max-width:768px){.format-cards,.format-options-universal,.conversion-stats-grid{grid-template-columns:1fr}}.favicon-workspace{gap:var(--space-6);flex-direction:column;display:flex}.favicon-preview-section{gap:var(--space-6);padding:var(--space-5);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);grid-template-columns:300px 1fr;display:grid}.favicon-source-preview{gap:var(--space-3);flex-direction:column;display:flex;position:relative}.source-image{object-fit:contain;border-radius:var(--radius-lg);border:3px solid var(--border-primary);width:100%;height:auto;max-height:300px;box-shadow:var(--shadow-md);background-color:#0000;background-image:linear-gradient(45deg,#e5e7eb 25%,#0000 25%),linear-gradient(-45deg,#e5e7eb 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e5e7eb 75%),linear-gradient(-45deg,#0000 75%,#e5e7eb 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:20px 20px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box}.btn-change-image{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);font-weight:600;display:flex}.btn-change-image:hover{border-color:var(--color-primary);color:var(--color-primary)}.favicon-info-card{padding:var(--space-5);border-radius:var(--radius-lg);background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);border:2px solid #93c5fd}.favicon-info-card h3{font-size:var(--font-lg);color:var(--text-primary);margin:0 0 var(--space-3)0;font-weight:700}.favicon-info-card ul{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.favicon-info-card li{font-size:var(--font-sm);color:var(--text-secondary);font-weight:500}.size-selection-section{padding:var(--space-5);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.size-selection-header{margin-bottom:var(--space-5);justify-content:space-between;align-items:center;display:flex}.size-selection-header h3{font-size:var(--font-xl);color:var(--text-primary);margin:0;font-weight:700}.btn-toggle-all{padding:var(--space-2)var(--space-4);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);font-weight:600}.btn-toggle-all:hover{border-color:var(--color-primary);color:var(--color-primary)}.platform-group{margin-bottom:var(--space-5)}.platform-header{align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:2px solid var(--border-primary);display:flex}.platform-header svg{width:20px;height:20px;color:var(--color-primary)}.platform-header h4{font-size:var(--font-base);color:var(--text-primary);margin:0;font-weight:700}.sizes-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));display:grid}.size-checkbox-card{align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);display:flex}.size-checkbox-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.size-checkbox-card.selected{border-color:var(--color-primary);background:var(--color-primary-light);box-shadow:var(--shadow-sm)}.size-checkbox-card input[type=checkbox]{cursor:pointer;width:20px;height:20px;accent-color:var(--color-primary)}.size-info{gap:var(--space-1);flex-direction:column;flex:1;display:flex}.size-dimension{font-size:var(--font-base);color:var(--text-primary);font-family:Courier New,monospace;font-weight:700}.size-desc{font-size:var(--font-xs);color:var(--text-tertiary)}.btn-generate-favicons{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-4)var(--space-6);color:#fff;border-radius:var(--radius-lg);font-size:var(--font-lg);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md);background:linear-gradient(135deg,#10b981 0%,#059669 100%);border:none;font-weight:700;display:flex}.btn-generate-favicons:hover:not(:disabled){box-shadow:var(--shadow-lg);background:linear-gradient(135deg,#059669 0%,#047857 100%);transform:translateY(-2px)}.btn-generate-favicons:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-generate-favicons svg{width:24px;height:24px}.favicon-progress{background:linear-gradient(90deg,#10b981 0%,#059669 100%)}.generated-favicons-section{padding:var(--space-6);background:var(--bg-secondary);border-radius:var(--radius-lg);border:2px solid var(--color-success)}.generated-header{text-align:center;margin-bottom:var(--space-6)}.success-icon-large{width:48px;height:48px;color:var(--color-success);margin:0 auto var(--space-3)}.generated-header h3{font-size:var(--font-2xl);color:var(--text-primary);margin:0 0 var(--space-2)0;font-weight:700}.generated-header p{font-size:var(--font-base);color:var(--text-secondary);margin:0}.favicon-preview-grid{gap:var(--space-4);margin-bottom:var(--space-6);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));display:grid}.favicon-preview-card{background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);transition:all var(--transition-base);flex-direction:column;display:flex;position:relative;overflow:hidden}.favicon-preview-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.favicon-preview-image-container{padding:var(--space-4);background-color:#0000;background-image:linear-gradient(45deg,#f3f4f6 25%,#0000 25%),linear-gradient(-45deg,#f3f4f6 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f3f4f6 75%),linear-gradient(-45deg,#0000 75%,#f3f4f6 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:16px 16px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;justify-content:center;align-items:center;min-height:120px;display:flex}.favicon-preview-image{max-width:100%;height:auto;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.favicon-preview-info{padding:var(--space-3);gap:var(--space-1);border-top:2px solid var(--border-primary);flex-direction:column;display:flex}.favicon-size-label{font-size:var(--font-sm);color:var(--text-primary);font-family:Courier New,monospace;font-weight:700}.favicon-name{font-size:var(--font-xs);color:var(--text-tertiary);word-break:break-all}.btn-download-single{top:var(--space-2);right:var(--space-2);border:2px solid var(--border-primary);border-radius:var(--radius-md);cursor:pointer;opacity:0;width:32px;height:32px;transition:all var(--transition-base);box-shadow:var(--shadow-sm);background:#fff;justify-content:center;align-items:center;display:flex;position:absolute}.favicon-preview-card:hover .btn-download-single{opacity:1}.btn-download-single:hover{border-color:var(--color-primary);color:var(--color-primary);transform:scale(1.1)}.btn-download-single svg{width:16px;height:16px}.btn-download-all-favicons{justify-content:center;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-4)var(--space-6);color:#fff;border-radius:var(--radius-lg);font-size:var(--font-lg);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md);background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);border:none;font-weight:700;display:flex}.btn-download-all-favicons:hover{box-shadow:var(--shadow-lg);background:linear-gradient(135deg,#4f46e5 0%,#4338ca 100%);transform:translateY(-2px)}.btn-download-all-favicons svg{width:24px;height:24px}@media (max-width:768px){.favicon-preview-section,.sizes-grid{grid-template-columns:1fr}.favicon-preview-grid{grid-template-columns:repeat(2,1fr)}}.qr-generator-workspace{gap:var(--space-6);grid-template-columns:450px 1fr;display:grid}.qr-settings-panel{gap:var(--space-5);flex-direction:column;display:flex}.qr-section{padding:var(--space-5);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.qr-section-title{align-items:center;gap:var(--space-2);font-size:var(--font-lg);color:var(--text-primary);margin:0 0 var(--space-4)0;font-weight:700;display:flex}.qr-section-title svg{width:20px;height:20px;color:var(--color-primary)}.data-type-grid{gap:var(--space-2);grid-template-columns:repeat(2,1fr);display:grid}.data-type-btn{align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);flex-direction:column;font-weight:600;display:flex}.data-type-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.data-type-btn.active{border-color:var(--color-primary);background:var(--color-primary-light);color:var(--color-primary)}.data-type-btn svg{width:20px;height:20px}.emoji-icon{font-size:20px}.qr-content-input{width:100%;padding:var(--space-3);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-primary);resize:vertical;transition:border-color var(--transition-base);font-family:inherit}.qr-content-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.input-hint{margin-top:var(--space-2);font-size:var(--font-xs);color:var(--text-tertiary);display:block}.logo-upload-area{padding:var(--space-4);background:var(--bg-primary);border:2px dashed var(--border-primary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);justify-content:center;align-items:center;display:flex}.logo-upload-area:hover,.logo-upload-area.drag-active{border-color:var(--color-primary);background:var(--color-primary-light)}.logo-file-input{display:none}.logo-upload-label{align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--font-sm);color:var(--text-secondary);font-weight:600;display:flex}.logo-upload-label svg{width:18px;height:18px}.logo-preview-container{align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);display:flex}.logo-preview{object-fit:contain;border-radius:var(--radius-sm);width:60px;height:60px}.btn-remove-logo{align-items:center;gap:var(--space-1);padding:var(--space-2)var(--space-3);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);font-size:var(--font-xs);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);font-weight:600;display:flex}.btn-remove-logo:hover{border-color:var(--color-error);color:var(--color-error)}.logo-size-control{margin-top:var(--space-3)}.logo-size-control label{font-size:var(--font-sm);color:var(--text-primary);margin-bottom:var(--space-2);font-weight:600;display:block}.logo-size-slider{border-radius:var(--radius-full);background:var(--color-primary-light);-webkit-appearance:none;cursor:pointer;outline:none;width:100%;height:6px}.logo-size-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-primary);cursor:pointer;width:18px;height:18px;box-shadow:var(--shadow-sm);border-radius:50%}.logo-size-slider::-moz-range-thumb{background:var(--color-primary);cursor:pointer;width:18px;height:18px;box-shadow:var(--shadow-sm);border:none;border-radius:50%}.logo-size-hints{margin-top:var(--space-1);font-size:var(--font-xs);color:var(--text-tertiary);justify-content:space-between;display:flex}.color-presets{gap:var(--space-2);margin-bottom:var(--space-4);grid-template-columns:repeat(6,1fr);display:grid}.color-preset-btn{aspect-ratio:1;border:2px solid var(--border-primary);border-radius:var(--radius-md);cursor:pointer;width:100%;transition:all var(--transition-base);background:0 0;padding:0;overflow:hidden}.color-preset-btn:hover{border-color:var(--color-primary);transform:scale(1.1)}.preset-color-swatch{width:100%;height:100%}.color-pickers{gap:var(--space-3);grid-template-columns:1fr 1fr;display:inline-table}.color-picker-item label{font-size:var(--font-sm);color:var(--text-primary);margin-bottom:var(--space-2);font-weight:600;display:block}.color-picker-wrapper{gap:var(--space-2);display:flex}.color-picker{border:2px solid var(--border-primary);border-radius:var(--radius-md);cursor:pointer;width:50px;height:40px}.color-hex-input{padding:var(--space-2);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-primary);flex:1;font-family:Courier New,monospace}.color-hex-input:focus{border-color:var(--color-primary);outline:none}.advanced-settings{gap:var(--space-4);flex-direction:column;display:flex}.setting-item label{font-size:var(--font-sm);color:var(--text-primary);margin-bottom:var(--space-2);font-weight:600;display:block}.setting-select{width:100%;padding:var(--space-2)var(--space-3);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-primary);cursor:pointer}.setting-hint{margin-top:var(--space-2);font-size:var(--font-xs);color:var(--text-tertiary);line-height:1.4;display:block}.setting-slider{border-radius:var(--radius-full);background:var(--color-primary-light);-webkit-appearance:none;cursor:pointer;outline:none;width:100%;height:6px}.setting-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-primary);cursor:pointer;width:18px;height:18px;box-shadow:var(--shadow-sm);border-radius:50%}.setting-slider::-moz-range-thumb{background:var(--color-primary);cursor:pointer;width:18px;height:18px;box-shadow:var(--shadow-sm);border:none;border-radius:50%}.setting-hints{margin-top:var(--space-1);font-size:var(--font-xs);color:var(--text-tertiary);justify-content:space-between;display:flex}.qr-preview-panel{top:var(--space-6);height:fit-content;position:sticky}.qr-preview-section{padding:var(--space-6);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.qr-preview-title{font-size:var(--font-xl);color:var(--text-primary);margin:0 0 var(--space-5)0;text-align:center;font-weight:700}.qr-preview-container{gap:var(--space-4);flex-direction:column;display:flex}.qr-preview-wrapper{padding:var(--space-6);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background:#fff;justify-content:center;align-items:center;display:flex}.qr-preview-image{max-width:100%;height:auto;display:block}.qr-download-buttons{gap:var(--space-2);flex-direction:column;display:flex}.btn-download-qr{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-4);color:#fff;border-radius:var(--radius-md);font-size:var(--font-sm);cursor:pointer;transition:all var(--transition-base);background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);border:none;font-weight:600;display:flex}.btn-download-qr:hover{box-shadow:var(--shadow-md);background:linear-gradient(135deg,#4f46e5 0%,#4338ca 100%);transform:translateY(-2px)}.btn-download-qr.secondary{background:var(--bg-primary);color:var(--text-primary);border:2px solid var(--border-primary)}.btn-download-qr.secondary:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.qr-info-box{padding:var(--space-4);border-radius:var(--radius-md);background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%);border:2px solid #6ee7b7}.qr-info-box h4{font-size:var(--font-base);color:#047857;margin:0 0 var(--space-2)0;font-weight:700}.qr-info-box ul{font-size:var(--font-sm);color:#065f46;margin:0;padding:0;list-style:none}.qr-info-box li{padding:var(--space-1)0}.qr-preview-placeholder{padding:var(--space-10);text-align:center;color:var(--text-tertiary)}.placeholder-icon{width:64px;height:64px;margin:0 auto var(--space-4);opacity:.3}.qr-preview-placeholder h4{font-size:var(--font-lg);color:var(--text-secondary);margin:0 0 var(--space-2)0;font-weight:600}.qr-preview-placeholder p{font-size:var(--font-sm);color:var(--text-tertiary);margin:0}@media (max-width:1024px){.qr-generator-workspace{grid-template-columns:1fr}.qr-preview-panel{position:static}}@media (max-width:640px){.data-type-grid{grid-template-columns:1fr}.color-presets{grid-template-columns:repeat(3,1fr)}.color-pickers{grid-template-columns:1fr}}.color-picker-workspace{gap:var(--space-6);flex-direction:column;display:flex}.color-picker-controls{gap:var(--space-3);padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);flex-wrap:wrap;display:flex}.btn-eyedropper,.btn-extract-palette,.btn-reset-picker{align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-5);border-radius:var(--radius-md);font-size:var(--font-sm);border:2px solid var(--border-primary);cursor:pointer;transition:all var(--transition-base);font-weight:600;display:flex}.btn-eyedropper{color:#fff;background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%);border-color:#8b5cf6}.btn-eyedropper:hover{box-shadow:var(--shadow-md);background:linear-gradient(135deg,#7c3aed 0%,#6d28d9 100%);transform:translateY(-2px)}.btn-eyedropper.active{background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-color:#10b981;animation:2s infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 #10b981b3}50%{box-shadow:0 0 0 8px #10b98100}}.btn-extract-palette{color:#fff;background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);border-color:#f59e0b}.btn-extract-palette:hover:not(:disabled){box-shadow:var(--shadow-md);background:linear-gradient(135deg,#d97706 0%,#b45309 100%);transform:translateY(-2px)}.btn-extract-palette:disabled{opacity:.6;cursor:not-allowed}.btn-reset-picker{background:var(--bg-primary);color:var(--text-secondary)}.btn-reset-picker:hover{border-color:var(--color-primary);color:var(--color-primary)}.spinner-small{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.6s linear infinite spin}.image-picker-container{border-radius:var(--radius-lg);border:2px solid var(--border-primary);background:var(--bg-secondary);position:relative;overflow:hidden}.image-picker-container.picking{cursor:crosshair}.picker-image{object-fit:contain;width:100%;height:auto;max-height:600px;display:block}.zoom-preview{pointer-events:none;z-index:10;border:3px solid #fff;border-radius:50%;width:110px;height:110px;position:absolute;overflow:hidden;box-shadow:0 4px 12px #0000004d,0 0 0 2px #000}.zoom-preview img{width:100%;height:100%;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.picked-color-section,.palette-section{padding:var(--space-6);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.section-header{align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);display:flex}.section-header svg{width:24px;height:24px}.section-header h3{font-size:var(--font-xl);color:var(--text-primary);margin:0;font-weight:700}.palette-count{font-size:var(--font-sm);color:var(--text-tertiary);margin-left:auto;font-weight:500}.color-display-grid{gap:var(--space-6);grid-template-columns:200px 1fr;align-items:start;display:grid}.color-swatch-large{border-radius:var(--radius-lg);border:3px solid var(--border-primary);width:200px;height:200px;box-shadow:var(--shadow-lg);padding:var(--space-3);justify-content:center;align-items:flex-end;display:flex;position:relative;overflow:hidden}.swatch-label{font-size:var(--font-lg);color:#fff;text-shadow:0 2px 4px #00000080;padding:var(--space-2)var(--space-3);border-radius:var(--radius-sm);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000004d;font-weight:700}.color-codes{gap:var(--space-4);flex-direction:column;display:flex}.color-code-item{gap:var(--space-2);flex-direction:column;display:flex}.color-code-item label{font-size:var(--font-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.code-value{gap:var(--space-2);display:flex}.code-value input{padding:var(--space-3);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-primary);flex:1;font-family:Courier New,monospace;font-weight:600}.code-value input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.btn-copy-code,.btn-copy-palette{padding:var(--space-3);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);justify-content:center;align-items:center;display:flex}.btn-copy-code:hover,.btn-copy-palette:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light);transform:translateY(-2px)}.btn-copy-code svg,.btn-copy-palette svg{width:18px;height:18px}.palette-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));display:grid}.palette-color-card{background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);transition:all var(--transition-base);cursor:pointer;flex-direction:column;display:flex;overflow:hidden}.palette-color-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.palette-swatch{border-bottom:2px solid var(--border-primary);width:100%;height:100px}.palette-info{padding:var(--space-3);gap:var(--space-1);flex-direction:column;display:flex}.palette-hex{font-size:var(--font-sm);color:var(--text-primary);font-family:Courier New,monospace;font-weight:700}.palette-percentage{font-size:var(--font-xs);color:var(--text-tertiary);font-weight:600}.btn-copy-palette{margin:0 var(--space-3)var(--space-3)}@media (max-width:768px){.color-picker-controls{flex-direction:column}.btn-eyedropper,.btn-extract-palette,.btn-reset-picker{justify-content:center;width:100%}.color-display-grid{grid-template-columns:1fr}.color-swatch-large{width:100%;height:150px}.palette-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:1024px){.text-tool-workspace{grid-template-columns:1fr}.text-stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.text-stats-grid,.case-options-grid{grid-template-columns:1fr}.output-header{align-items:flex-start;gap:var(--space-3);flex-direction:column}.output-actions{width:100%}.btn-copy-output,.btn-download-output{flex:1}}.text-tool-workspace{gap:var(--space-6);grid-template-columns:1fr 1fr;display:grid}.text-input-section{gap:var(--space-4);flex-direction:column;display:flex}.section-header{padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);justify-content:space-between;align-items:center;display:flex}.section-header h3{align-items:center;gap:var(--space-2);font-size:var(--font-lg);color:var(--text-primary);margin:0;font-weight:700;display:flex}.section-header h3 svg{width:20px;height:20px;color:var(--color-primary)}.btn-clear-text{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-3);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);font-weight:600;display:flex}.btn-clear-text:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-clear-text svg{width:16px;height:16px}.text-input-area{width:100%;padding:var(--space-4);background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);font-size:var(--font-base);color:var(--text-primary);resize:vertical;min-height:300px;transition:all var(--transition-base);font-family:inherit;line-height:1.6}.text-input-area:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.text-input-area::placeholder{color:var(--text-tertiary)}.text-stats-grid{gap:var(--space-3);grid-template-columns:repeat(4,1fr);display:grid;overflow:hidden}.stat-card{padding:var(--space-4);background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);text-align:center;transition:all var(--transition-base)}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-card.primary{border-color:var(--color-primary);color:#fff;background:linear-gradient(135deg,#ff6b35 0%,#f7931e 100%)}.stat-card.primary .stat-value,.stat-card.primary .stat-label{color:#fff}.stat-card.accent{background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);border-color:#93c5fd}.stat-value{font-size:var(--font-2xl);color:var(--text-primary);margin-bottom:var(--space-1);font-variant-numeric:tabular-nums;font-weight:700}.stat-label{font-size:var(--font-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.case-converter-section{gap:var(--space-4);flex-direction:column;display:flex}.empty-state{padding:var(--space-10);background:var(--bg-secondary);border:2px dashed var(--border-primary);border-radius:var(--radius-lg);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-icon{width:48px;height:48px;color:var(--text-tertiary);margin-bottom:var(--space-3);opacity:.5}.empty-state p{font-size:var(--font-base);color:var(--text-tertiary);margin:0}.case-options-grid{gap:var(--space-3);grid-template-columns:repeat(2,1fr);display:grid}.case-option-btn{align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);text-align:left;cursor:pointer;transition:all var(--transition-base);display:flex}.case-option-btn:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.case-option-btn.active{border-color:var(--color-primary);background:var(--color-primary-light);box-shadow:var(--shadow-md)}.case-icon{background:var(--bg-primary);border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:24px;display:flex}.case-info{gap:var(--space-1);flex-direction:column;flex:1;display:flex}.case-label{font-size:var(--font-sm);color:var(--text-primary);font-weight:700}.case-example{font-size:var(--font-xs);color:var(--text-tertiary);font-family:Courier New,monospace}.converted-output-section{padding:var(--space-5);background:var(--bg-secondary);border:2px solid var(--color-success);border-radius:var(--radius-lg)}.output-header{margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:2px solid var(--border-primary);justify-content:space-between;align-items:center;display:flex}.output-header h4{font-size:var(--font-base);color:var(--text-primary);margin:0;font-weight:700}.btn-copy-output,.btn-download-output{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-3);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);font-weight:600;display:flex}.btn-copy-output:hover,.btn-download-output:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-copy-output svg,.btn-download-output svg{width:16px;height:16px}.converted-text-display{padding:var(--space-4);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-base);color:var(--text-primary);white-space:pre-wrap;word-break:break-word;max-height:400px;line-height:1.6;overflow-y:auto}@media (max-width:1024px){.text-tool-workspace{grid-template-columns:1fr}.text-stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.text-stats-grid,.case-options-grid{grid-template-columns:1fr}.output-header{align-items:flex-start;gap:var(--space-3);flex-direction:column}.output-actions{width:100%}.btn-copy-output,.btn-download-output{flex:1}}.json-controls-section{justify-content:space-between;align-items:center;gap:var(--space-4);margin-top:var(--space-6);padding:var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.controls-left,.controls-right{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.json-mode-selector{gap:var(--space-2);padding:var(--space-1);border-radius:var(--radius-md);border:1px solid var(--border-primary);background:#fff;display:flex}.mode-btn{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;background:0 0;border:none;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.mode-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.mode-btn.active{background:var(--gradient-primary);color:#fff}.mode-btn svg{width:16px;height:16px}.indent-selector{align-items:center;gap:var(--space-2);display:flex}.indent-selector label{color:var(--text-secondary);font-size:.875rem;font-weight:500}.indent-select{padding:var(--space-2)var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;background:#fff;font-size:.875rem;transition:all .2s}.indent-select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.btn-sample,.btn-clear-json{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;background:#fff;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.btn-sample:hover,.btn-clear-json:hover{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.btn-clear-json svg{width:14px;height:14px}.json-workspace{gap:var(--space-6);margin-top:var(--space-6);grid-template-columns:1fr 1fr;display:grid}@media (max-width:968px){.json-workspace{grid-template-columns:1fr}}.json-input-section,.json-output-section{flex-direction:column;display:flex}.section-header{margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:2px solid var(--border-primary);justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.section-header h3{color:var(--text-primary);align-items:center;gap:var(--space-2);font-size:1.125rem;font-weight:600;display:flex}.section-header h3 svg{color:var(--color-primary);width:20px;height:20px}.validation-badge{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-3);border-radius:var(--radius-md);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;font-weight:600;display:flex}.validation-badge.valid{color:#15803d;background:#dcfce7;border:1px solid #86efac}.validation-badge.invalid{color:#dc2626;background:#fee2e2;border:1px solid #fca5a5}.validation-badge svg{width:14px;height:14px}.json-input-area{width:100%;padding:var(--space-4);border:2px solid var(--border-primary);border-radius:var(--radius-lg);color:var(--text-primary);resize:vertical;background:#fafafa;min-height:400px;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,Courier New,monospace;font-size:.875rem;line-height:1.6;transition:all .3s}.json-input-area:focus{border-color:var(--color-primary);background:#fff;outline:none;box-shadow:0 0 0 3px #ff6b351a}.json-input-area.invalid{background:#fef2f2;border-color:#dc2626}.json-input-area::placeholder{color:var(--text-tertiary)}.error-messages{margin-top:var(--space-4);border-radius:var(--radius-lg);padding:var(--space-4);background:#fef2f2;border:1px solid #fca5a5;overflow:hidden}.error-item{gap:var(--space-3);align-items:flex-start;display:flex}.error-item svg{color:#dc2626;flex-shrink:0;width:20px;height:20px;margin-top:2px}.error-details{flex:1}.error-message{color:#dc2626;margin-bottom:var(--space-1);font-size:.875rem;font-weight:500}.error-location{color:#991b1b;font-family:monospace;font-size:.75rem}.json-stats-grid{gap:var(--space-4);margin-top:var(--space-4);padding:var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;flex-wrap:wrap;display:flex}.stat-item{align-items:center;gap:var(--space-2);display:flex}.stat-label{color:var(--text-secondary);font-size:.75rem;font-weight:500}.stat-value{color:var(--text-primary);font-family:monospace;font-size:.875rem;font-weight:700}.output-actions{gap:var(--space-2);display:flex}.btn-copy-json,.btn-download-json{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);border-radius:var(--radius-md);cursor:pointer;border:none;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.btn-copy-json{background:var(--color-primary);color:#fff}.btn-copy-json:hover{background:#e55a2a;transform:translateY(-1px);box-shadow:0 4px 12px #ff6b354d}.btn-download-json{color:var(--text-primary);border:1px solid var(--border-primary);background:#fff}.btn-download-json:hover{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.btn-copy-json svg,.btn-download-json svg{width:14px;height:14px}.empty-output{padding:var(--space-16);background:var(--bg-secondary);border:2px dashed var(--border-primary);border-radius:var(--radius-lg);text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:400px;display:flex}.empty-icon{width:48px;height:48px;color:var(--text-tertiary);margin-bottom:var(--space-4)}.empty-output p{color:var(--text-secondary);margin:0;font-size:1rem}.empty-hint{color:var(--text-tertiary)!important;margin-top:var(--space-2)!important;font-size:.875rem!important}.json-output-display{border:2px solid var(--color-primary);border-radius:var(--radius-lg);padding:var(--space-4);background:#1e1e1e;min-height:400px;max-height:600px;overflow:auto}.json-output-display pre{margin:0;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,Courier New,monospace;font-size:.875rem;line-height:1.6}.json-output-display code,.json-output-display pre{color:#d4d4d4}.json-output-display::-webkit-scrollbar{width:10px;height:10px}.json-output-display::-webkit-scrollbar-track{border-radius:var(--radius-sm);background:#2d2d2d}.json-output-display::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:var(--radius-sm)}.json-output-display::-webkit-scrollbar-thumb:hover{background:#e55a2a}.json-action-section{margin-top:var(--space-6);align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.btn-format-json{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-4)var(--space-8);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-lg);cursor:pointer;border:none;min-width:200px;font-size:1rem;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 12px #ff6b3533}.btn-format-json:hover:not(:disabled){background:linear-gradient(135deg,#e55a2a 0%,#e8841a 100%);transform:translateY(-2px);box-shadow:0 6px 16px #ff6b354d}.btn-format-json:disabled{background:var(--bg-secondary);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none}.btn-format-json svg{width:20px;height:20px}.size-comparison{align-items:center;gap:var(--space-4);padding:var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);flex-wrap:wrap;justify-content:center;display:flex}.size-item{align-items:center;gap:var(--space-2);display:flex}.size-label{color:var(--text-secondary);font-size:.875rem;font-weight:500}.size-value{color:var(--text-primary);padding:var(--space-1)var(--space-2);border-radius:var(--radius-sm);border:1px solid var(--border-primary);background:#fff;font-family:monospace;font-size:.875rem;font-weight:700}.size-arrow{color:var(--color-primary);font-size:1.25rem;font-weight:700}.size-savings{color:#15803d;padding:var(--space-2)var(--space-3);border-radius:var(--radius-md);background:#dcfce7;border:1px solid #86efac;font-size:.875rem;font-weight:600}@media (max-width:968px){.json-controls-section{flex-direction:column;align-items:stretch}.controls-left,.controls-right{justify-content:center}.json-mode-selector{justify-content:center;width:100%}}@media (max-width:640px){.json-mode-selector{flex-direction:column}.mode-btn{justify-content:center;width:100%}.output-actions{flex-direction:column;width:100%}.btn-copy-json,.btn-download-json{justify-content:center;width:100%}.size-comparison{flex-direction:column;align-items:stretch}.size-item{justify-content:space-between}.size-arrow{text-align:center}}.t2p-root{gap:var(--space-4);flex-direction:column;font-family:Georgia,Times New Roman,serif;display:flex;position:relative}.t2p-toasts{bottom:var(--space-6);right:var(--space-6);z-index:9999;gap:var(--space-2);pointer-events:none;flex-direction:column;display:flex;position:fixed}.t2p-toast{align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-4);border-radius:var(--radius-lg);pointer-events:all;max-width:360px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.875rem;font-weight:500;display:flex;box-shadow:0 8px 24px #00000026}.t2p-toast--success{color:#15803d;background:#f0fdf4;border:1px solid #86efac}.t2p-toast--error{color:#dc2626;background:#fef2f2;border:1px solid #fca5a5}.t2p-toast svg:first-child{flex-shrink:0;width:16px;height:16px}.t2p-toast span{flex:1}.t2p-toast button{cursor:pointer;color:inherit;opacity:.6;background:0 0;border:none;padding:0;line-height:1;display:flex}.t2p-toast button:hover{opacity:1}.t2p-header{align-items:center;gap:var(--space-3);padding:var(--space-3)var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.t2p-filename-wrap{align-items:center;gap:var(--space-2);border:1.5px solid var(--border-primary);border-radius:var(--radius-md);min-width:220px;padding:var(--space-2)var(--space-3);background:#fff;flex:1;transition:border-color .2s;display:flex}.t2p-filename-wrap:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #ff6b351a}.t2p-filename-icon{color:var(--color-primary);flex-shrink:0;width:16px;height:16px}.t2p-filename-input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;min-width:0;font-family:Georgia,serif;font-size:.9rem}.t2p-filename-input::placeholder{color:var(--text-tertiary)}.t2p-filename-ext{color:var(--text-secondary);font-family:monospace;font-size:.875rem;font-weight:600}.t2p-filesize{color:var(--text-tertiary);white-space:nowrap;background:var(--bg-secondary);border-radius:4px;padding:2px 6px;font-family:monospace;font-size:.75rem}.t2p-header-actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.t2p-btn-ghost{align-items:center;gap:var(--space-1);padding:var(--space-2)var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;white-space:nowrap;background:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.8125rem;font-weight:500;transition:all .18s;display:inline-flex}.t2p-btn-ghost svg{width:13px;height:13px}.t2p-btn-ghost:hover{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.t2p-btn-ghost.t2p-btn-active{background:var(--color-primary-light,#fff5f2);border-color:var(--color-primary);color:var(--color-primary)}.t2p-btn-ghost.t2p-btn-danger:hover{color:#ef4444;border-color:#ef4444}.t2p-presets{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.t2p-presets-label{color:var(--text-tertiary);white-space:nowrap;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.8rem}.t2p-preset-btn{align-items:center;gap:var(--space-1);padding:var(--space-1)var(--space-3);border:1.5px solid var(--border-primary);color:var(--text-secondary);cursor:pointer;background:#fff;border-radius:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.8125rem;font-weight:500;transition:all .18s;display:inline-flex}.t2p-preset-btn:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light,#fff5f2)}.t2p-preset-btn--active{background:var(--color-primary)!important;border-color:var(--color-primary)!important;color:#fff!important}.t2p-settings{border-radius:var(--radius-lg);border:1.5px solid var(--color-primary);overflow:hidden}.t2p-settings-inner{padding:var(--space-5);gap:0;gap:var(--space-5);background:linear-gradient(135deg,#fff8f5 0%,#fff 100%);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.t2p-setting-group{border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-4);gap:var(--space-3);background:#fff;flex-direction:column;display:flex}.t2p-setting-group-title{text-transform:uppercase;letter-spacing:.08em;color:var(--color-primary);padding-bottom:var(--space-2);border-bottom:1px solid var(--bg-secondary);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.75rem;font-weight:700}.t2p-setting-row{flex-direction:column;gap:4px;display:flex}.t2p-setting-row label{color:var(--text-secondary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.75rem;font-weight:500}.t2p-setting-row select,.t2p-setting-row input[type=text]{padding:var(--space-2)var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);background:#fff;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.8125rem;transition:all .18s}.t2p-setting-row select:focus,.t2p-setting-row input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.t2p-checkbox-row{align-items:center;gap:var(--space-2);color:var(--text-secondary);cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.8125rem;display:flex}.t2p-checkbox-row input[type=checkbox]{appearance:none;border:2px solid var(--color-primary);cursor:pointer;background:#fff;border-radius:4px;flex-shrink:0;width:16px;height:16px;transition:background .15s;position:relative}.t2p-checkbox-row input[type=checkbox]:checked{background:var(--color-primary)}.t2p-checkbox-row input[type=checkbox]:checked:after{content:"✓";color:#fff;font-size:10px;position:absolute;top:-1px;left:2px}.t2p-margins-visual{padding:var(--space-2)0;justify-content:center;display:flex}.t2p-margin-outer{align-items:center;gap:var(--space-2);flex-direction:column;width:100%;display:flex}.t2p-margin-middle{align-items:center;gap:var(--space-2);width:100%;display:flex}.t2p-margin-page{aspect-ratio:3/4;border:1.5px solid var(--border-primary);color:var(--text-tertiary);background:#f8f8f8;border-radius:4px;flex:1;justify-content:center;align-items:center;min-height:60px;display:flex}.t2p-margin-page svg{width:20px;height:20px}.t2p-margin-top,.t2p-margin-bottom,.t2p-margin-left,.t2p-margin-right{border:1px solid var(--border-primary);border-radius:var(--radius-md);width:50px;color:var(--text-primary);text-align:center;background:#fff;padding:4px 6px;font-family:monospace;font-size:.8rem;transition:border-color .18s}.t2p-margin-top,.t2p-margin-bottom{width:60px}.t2p-margin-top:focus,.t2p-margin-bottom:focus,.t2p-margin-left:focus,.t2p-margin-right:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 2px #ff6b351f}.t2p-workspace{gap:var(--space-4);flex-direction:column;display:flex}.t2p-editor-panel{border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 1px 6px #0000000a}.t2p-toolbar{padding:var(--space-2)var(--space-3);background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);flex-wrap:wrap;align-items:center;gap:2px;display:flex;overflow-x:auto}.t2p-toolbar-group{align-items:center;gap:1px;display:flex}.t2p-toolbar-divider{background:var(--border-primary);width:1px;height:20px;margin:0 var(--space-1);flex-shrink:0}.t2p-toolbar-spacer{flex:1}.t2p-toolbar-select{border:1px solid var(--border-primary);color:var(--text-secondary);cursor:pointer;background:#fff;border-radius:6px;outline:none;padding:3px 6px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.8rem;transition:border-color .15s}.t2p-toolbar-select:focus{border-color:var(--color-primary)}.rte-btn{width:28px;height:28px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.8125rem;line-height:1;transition:all .15s;display:inline-flex}.rte-btn:hover{color:var(--text-primary);background:#fff;box-shadow:0 1px 3px #00000014}.rte-btn--active{border:1px solid #ff6b3540;background:var(--color-primary-light,#fff5f2)!important;color:var(--color-primary)!important}.t2p-editor-body{flex:1;min-height:560px;overflow-y:auto}.t2p-editor-content{height:100%}.t2p-editor-content .ProseMirror{padding:var(--space-6)var(--space-8);min-height:560px;color:var(--text-primary);caret-color:var(--color-primary);outline:none;max-width:860px;margin:0 auto;font-family:Georgia,Times New Roman,serif;font-size:1rem;line-height:1.75}.t2p-editor-content .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--text-tertiary);pointer-events:none;float:left;height:0;font-style:italic}.t2p-editor-content .ProseMirror h1{color:var(--text-primary);border-bottom:2px solid var(--bg-secondary);margin:1.5rem 0 .75rem;padding-bottom:.4rem;font-size:1.9rem;font-weight:700;line-height:1.2}.t2p-editor-content .ProseMirror h2{color:var(--text-primary);margin:1.25rem 0 .6rem;font-size:1.45rem;font-weight:700;line-height:1.3}.t2p-editor-content .ProseMirror h3{color:var(--text-primary);margin:1rem 0 .5rem;font-size:1.175rem;font-weight:600;line-height:1.4}.t2p-editor-content .ProseMirror p{margin:0 0 .75rem}.t2p-editor-content .ProseMirror ul,.t2p-editor-content .ProseMirror ol{margin:.5rem 0 .75rem;padding-left:1.5rem}.t2p-editor-content .ProseMirror li{margin:.2rem 0;line-height:1.65}.t2p-editor-content .ProseMirror blockquote{border-left:3px solid var(--color-primary);padding-left:var(--space-4);margin:var(--space-4)0;color:var(--text-secondary);font-style:italic}.t2p-editor-content .ProseMirror code{background:var(--bg-secondary);border-radius:4px;padding:2px 6px;font-family:Courier New,monospace;font-size:.875em}.t2p-editor-content .ProseMirror pre{color:#d4d4d4;padding:var(--space-4);border-radius:var(--radius-md);margin:var(--space-4)0;background:#1e1e1e;overflow-x:auto}.t2p-editor-content .ProseMirror pre code{color:inherit;background:0 0;padding:0;font-size:.875rem}.t2p-editor-content .ProseMirror hr{border:none;border-top:1.5px solid var(--border-primary);margin:var(--space-5)0}.t2p-editor-content .ProseMirror mark{background:#fef9c3;border-radius:2px;padding:0 2px}.t2p-editor-content .ProseMirror a{color:var(--color-primary);text-decoration:underline}.t2p-editor-footer{padding:var(--space-2)var(--space-4);border-top:1px solid var(--border-primary);background:var(--bg-secondary);gap:var(--space-1);flex-direction:column;display:flex}.t2p-stats{align-items:center;gap:var(--space-2);color:var(--text-tertiary);font-family:monospace;font-size:.75rem;display:flex}.t2p-stats-sep{opacity:.4}.t2p-stat-warn{color:#d97706;font-weight:600}.t2p-stat-danger{color:#dc2626;font-weight:600}.t2p-limit-bar{background:var(--border-primary);border-radius:99px;height:3px;overflow:hidden}.t2p-limit-fill{background:var(--color-primary);border-radius:99px;height:100%;transition:width .3s}.t2p-limit-fill--warn{background:#d97706}.t2p-limit-fill--danger{background:#dc2626}.t2p-limit-msg{align-items:center;gap:var(--space-1);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.75rem;display:flex}.t2p-limit-msg svg{flex-shrink:0;width:12px;height:12px}.t2p-limit-msg--warn{color:#d97706}.t2p-limit-msg--danger{color:#dc2626}.t2p-summary-strip{align-items:center;gap:var(--space-4);padding:var(--space-3)var(--space-4);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;flex-wrap:wrap;display:flex}.t2p-summary-thumb-wrap{background:#e5e7eb;border-radius:4px;flex-shrink:0;padding:5px}.t2p-summary-thumb{background:#fff;border-radius:2px;width:36px;position:relative;overflow:hidden;box-shadow:0 2px 8px #0000001f}.t2p-summary-thumb-area{flex-direction:column;gap:1.5px;display:flex;position:absolute;overflow:hidden}.t2p-summary-thumb-line{background:#d1d5db;border-radius:1px;height:1.5px}.t2p-summary-stats{align-items:center;gap:var(--space-3);flex-shrink:0;display:flex}.t2p-summary-stat{flex-direction:column;align-items:center;gap:1px;display:flex}.t2p-summary-stat-val{color:var(--color-primary);font-family:Georgia,serif;font-size:1.1rem;font-weight:700;line-height:1}.t2p-summary-stat-lbl{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.65rem}.t2p-summary-divider{background:var(--border-primary);flex-shrink:0;width:1px;height:28px}.t2p-summary-pills{align-items:center;gap:var(--space-2);flex-wrap:wrap;flex:1;justify-content:flex-end;display:flex}.t2p-summary-pill{background:var(--bg-secondary);border:1px solid var(--border-primary);color:var(--text-secondary);white-space:nowrap;border-radius:99px;align-items:center;padding:3px 10px;font-family:monospace;font-size:.75rem;display:inline-flex}.t2p-summary-pill--accent{background:var(--color-primary-light,#fff5f2);color:var(--color-primary);border-color:#ff6b354d}@media (max-width:640px){.t2p-summary-strip{gap:var(--space-3)}.t2p-summary-pills{justify-content:flex-start}.t2p-summary-stats{gap:var(--space-2)}}.t2p-action{align-items:center;gap:var(--space-3);padding-top:var(--space-2);flex-direction:column;display:flex}.t2p-action-hint{align-items:center;gap:var(--space-2);color:var(--text-tertiary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.75rem;display:flex}.t2p-action-hint svg{width:12px;height:12px}.t2p-action-hint kbd{background:var(--bg-secondary);border:1px solid var(--border-primary);color:var(--text-secondary);border-radius:4px;padding:1px 6px;font-family:monospace;font-size:.7rem;display:inline-block}.t2p-btn-generate{padding:var(--space-4)var(--space-12,3rem);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-lg);cursor:pointer;border:none;justify-content:center;align-items:center;min-width:220px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:1.0625rem;font-weight:600;transition:box-shadow .2s,background .2s;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 4px 16px #ff6b3540}.t2p-btn-generate:hover:not(:disabled){background:linear-gradient(135deg,#e55a2a 0%,#e8841a 100%);box-shadow:0 6px 20px #ff6b3559}.t2p-btn-generate:disabled{background:var(--bg-secondary);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none}.t2p-generating-inner{align-items:center;gap:var(--space-2);z-index:1;display:inline-flex;position:relative}.t2p-generating-inner svg{width:20px;height:20px}.t2p-btn-progress{border-radius:var(--radius-lg);z-index:0;background:#ffffff26;height:100%;transition:width .3s;position:absolute;top:0;left:0}.t2p-spinner{border:2.5px solid #ffffff59;border-top-color:#fff;border-radius:50%;flex-shrink:0;width:18px;height:18px;animation:.7s linear infinite t2p-spin}@keyframes t2p-spin{to{transform:rotate(360deg)}}@media (max-width:768px){.t2p-header{flex-direction:column;align-items:stretch}.t2p-filename-wrap{min-width:unset;max-width:100%}.t2p-header-actions{justify-content:flex-end}.t2p-settings-inner{grid-template-columns:1fr}.t2p-action-hint{display:none}.t2p-btn-generate{width:100%}.t2p-toasts{bottom:var(--space-4);right:var(--space-4);left:var(--space-4)}.t2p-toast{max-width:100%}}@media (max-width:480px){.t2p-presets{padding-bottom:var(--space-1);flex-wrap:nowrap;overflow-x:auto}.t2p-preset-btn{flex-shrink:0}.t2p-editor-content .ProseMirror{padding:var(--space-4);font-size:.9375rem}.t2p-preview-stats{grid-template-columns:repeat(3,1fr)}}.meta-top-controls{justify-content:space-between;align-items:center;gap:var(--space-4);margin-top:var(--space-6);padding:var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.control-buttons{gap:var(--space-2);flex-wrap:wrap;display:flex}.btn-sample,.btn-clear-meta{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;background:#fff;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.btn-sample:hover,.btn-clear-meta:hover{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.btn-clear-meta svg{width:14px;height:14px}.preview-toggle{border:1px solid var(--border-primary);border-radius:var(--radius-md);background:#fff;gap:0;display:flex;overflow:hidden}.preview-btn{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);color:var(--text-secondary);cursor:pointer;border:none;border-right:1px solid var(--border-primary);background:#fff;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.preview-btn:last-child{border-right:none}.preview-btn svg{width:14px;height:14px}.preview-btn.active{background:var(--color-primary);color:#fff}.preview-btn:not(.active):hover{background:var(--bg-secondary)}.meta-tabs{gap:var(--space-2);margin-top:var(--space-6);padding:var(--space-2);background:var(--bg-secondary);border-radius:var(--radius-lg);display:flex;overflow-x:auto}.meta-tab{align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-5);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;white-space:nowrap;background:#fff;font-size:.9375rem;font-weight:500;transition:all .2s;display:flex}.meta-tab svg{width:16px;height:16px}.meta-tab:hover{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.meta-tab.active{background:var(--gradient-primary);border-color:var(--color-primary);color:#fff}.meta-tab.active svg{color:#fff}.meta-content{margin-top:var(--space-6);border:2px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-6);background:#fff}.meta-form{gap:var(--space-5);flex-direction:column;display:flex}.form-group{gap:var(--space-2);flex-direction:column;display:flex}.form-group label{color:var(--text-primary);align-items:center;gap:var(--space-1);font-size:.9375rem;font-weight:600;display:flex}.required{color:#ef4444;font-size:1.125rem}.form-group input[type=text],.form-group input[type=url],.form-group textarea,.form-group select{width:100%;padding:var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);background:#fff;font-family:inherit;font-size:.9375rem;transition:all .2s}.form-group textarea{resize:vertical;min-height:80px;line-height:1.6}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-tertiary)}.form-row{gap:var(--space-4);grid-template-columns:repeat(2,1fr);display:grid}@media (max-width:768px){.form-row{grid-template-columns:1fr}}.char-count{color:var(--text-secondary);justify-content:space-between;align-items:center;gap:var(--space-2);font-size:.8125rem;display:flex}.char-count .over-limit{color:#ef4444;font-weight:600}.char-count .warning{color:#f59e0b;align-items:center;gap:var(--space-1);font-size:.75rem;display:flex}.help-text{color:var(--text-tertiary);font-size:.8125rem;font-style:italic}.info-box{gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-4);background:#eff6ff;border:1px solid #3b82f6;display:flex}.info-box svg{color:#3b82f6;flex-shrink:0;width:24px;height:24px;margin-top:2px}.info-box strong{color:var(--text-primary);margin-bottom:var(--space-1);font-size:.9375rem;display:block}.info-box p{color:var(--text-secondary);margin:0;font-size:.875rem;line-height:1.5}.color-input-group{gap:var(--space-2);align-items:center;display:flex}.color-input-group input[type=color]{border:1px solid var(--border-primary);border-radius:var(--radius-md);cursor:pointer;width:60px;height:42px;padding:2px}.color-input-group input[type=text]{flex:1}.meta-preview-section{margin-top:var(--space-8);border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;overflow:hidden}.preview-header{padding:var(--space-4)var(--space-5);background:var(--bg-secondary);border-bottom:2px solid var(--border-primary);justify-content:space-between;align-items:center;display:flex}.preview-header h3{color:var(--text-primary);align-items:center;gap:var(--space-2);margin:0;font-size:1.125rem;font-weight:600;display:flex}.preview-header h3 svg{color:var(--color-primary);width:20px;height:20px}.btn-copy{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;font-size:.875rem;font-weight:600;transition:all .2s;display:flex}.btn-copy:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff6b3533}.btn-copy svg{width:14px;height:14px}.code-preview{padding:var(--space-5);background:#1e293b;max-height:500px;overflow-y:auto}.visual-preview{padding:var(--space-6);gap:var(--space-6);background:#f8fafc;flex-direction:column;display:flex}.preview-card{border:1px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;overflow:hidden}.preview-card h4{align-items:center;gap:var(--space-2);color:var(--text-primary);padding:var(--space-3)var(--space-4);background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);margin:0;font-size:1rem;font-weight:600;display:flex}.preview-card h4 svg{width:18px;height:18px;color:var(--color-primary)}.google-preview{padding:var(--space-4)}.google-url{color:#1a0dab;margin-bottom:var(--space-1);font-size:.875rem}.google-title{color:#1a0dab;margin-bottom:var(--space-2);cursor:pointer;font-size:1.25rem;font-weight:400;line-height:1.3}.google-title:hover{text-decoration:underline}.google-description{color:#4d5156;font-size:.875rem;line-height:1.6}.facebook-preview{margin:var(--space-4);border-radius:var(--radius-md);background:#fff;border:1px solid #e4e6eb;overflow:hidden}.facebook-preview .preview-image{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-8)var(--space-4);color:var(--text-tertiary);text-align:center;background:#f0f2f5;border-bottom:1px solid #e4e6eb;font-size:.8125rem;display:flex}.facebook-preview .preview-image svg{width:40px;height:40px}.facebook-preview .preview-content{padding:var(--space-3);background:#f0f2f5}.facebook-preview .preview-url{color:#65676b;text-transform:uppercase;margin-bottom:var(--space-1);font-size:.75rem}.facebook-preview .preview-title{color:#050505;margin-bottom:var(--space-1);font-size:1rem;font-weight:600;line-height:1.3}.facebook-preview .preview-description{color:#65676b;font-size:.875rem;line-height:1.5}.twitter-preview{margin:var(--space-4);border-radius:var(--radius-lg);background:#fff;border:1px solid #cfd9de;overflow:hidden}.twitter-preview .preview-image{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-8)var(--space-4);color:var(--text-tertiary);text-align:center;background:#f7f9f9;border-bottom:1px solid #cfd9de;font-size:.8125rem;display:flex}.twitter-preview .preview-image.large{padding:var(--space-16)var(--space-4)}.twitter-preview .preview-image svg{width:40px;height:40px}.twitter-preview .preview-content{padding:var(--space-3)}.twitter-preview .preview-title{color:#0f1419;margin-bottom:var(--space-1);font-size:.9375rem;font-weight:400;line-height:1.3}.twitter-preview .preview-description{color:#536471;margin-bottom:var(--space-2);font-size:.9375rem;line-height:1.5}.twitter-preview .preview-url{color:#536471;font-size:.8125rem}@media (max-width:968px){.meta-top-controls{flex-direction:column;align-items:stretch}.control-buttons{justify-content:center}.preview-toggle{width:100%}.preview-btn{flex:1;justify-content:center}.meta-tabs{scrollbar-width:thin;overflow-x:scroll}.preview-header{gap:var(--space-3);flex-direction:column;align-items:stretch}.btn-copy{justify-content:center;width:100%}}@media (max-width:640px){.control-buttons{flex-direction:column}.btn-sample,.btn-clear-meta{justify-content:center;width:100%}.color-input-group{flex-direction:column}.color-input-group input[type=color]{width:100%;height:50px}}.ogc-root{gap:var(--space-5);flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex;position:relative}.ogc-input-card{background:linear-gradient(135deg,var(--color-primary-light)0%,var(--bg-primary)100%);border:2px solid var(--color-primary);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-md)}.ogc-form{gap:var(--space-4);flex-direction:column;display:flex}.ogc-input-row{gap:var(--space-3);align-items:stretch;display:flex}.ogc-input-wrap{flex:1;align-items:center;display:flex;position:relative}.ogc-input-icon{width:18px;height:18px;color:var(--color-primary);pointer-events:none;z-index:1;position:absolute;left:16px}.ogc-input{background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);width:100%;font-size:var(--font-base);color:var(--text-primary);transition:border-color var(--transition-base),box-shadow var(--transition-base);caret-color:var(--color-primary);outline:none;padding:14px 48px 14px 46px;font-family:SF Mono,Fira Code,Courier New,monospace}.ogc-input::placeholder{color:var(--text-tertiary)}.ogc-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #ff6b351f}.ogc-input:disabled{opacity:.5;cursor:not-allowed;background:var(--bg-secondary)}.ogc-input-clear{color:var(--text-tertiary);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;padding:4px;display:flex;position:absolute;right:12px}.ogc-input-clear:hover{color:var(--color-primary)}.ogc-input-clear svg{width:18px;height:18px}.ogc-btn-check{align-items:center;gap:var(--space-2);padding:0 var(--space-6);background:var(--gradient-primary);color:var(--text-inverse);border-radius:var(--radius-lg);font-size:var(--font-base);cursor:pointer;white-space:nowrap;transition:all var(--transition-base);border:none;min-height:52px;font-weight:600;display:inline-flex;box-shadow:0 4px 14px #ff6b3540}.ogc-btn-check:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary-hover));transform:translateY(-1px);box-shadow:0 6px 20px #ff6b3566}.ogc-btn-check:disabled{background:var(--bg-tertiary);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none;transform:none}.ogc-btn-check svg{width:16px;height:16px}.ogc-form-footer{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.ogc-btn-ghost{align-items:center;gap:var(--space-1);padding:var(--space-1)var(--space-3);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-sm);cursor:pointer;transition:all var(--transition-fast);display:inline-flex}.ogc-btn-ghost:hover{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.ogc-btn-ghost--danger:hover{border-color:var(--color-error);color:var(--color-error);background:#fef2f2}.ogc-btn-ghost svg{width:13px;height:13px}.ogc-hint{font-size:var(--font-xs);color:var(--text-tertiary);margin-left:auto}.ogc-hint kbd{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);color:var(--text-secondary);padding:1px 5px;font-family:monospace;font-size:.7rem}.ogc-recent-dropdown{background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-lg);z-index:50;box-shadow:var(--shadow-xl);position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:hidden}.ogc-recent-label{align-items:center;gap:var(--space-1);padding:var(--space-2)var(--space-4);text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);border-bottom:1px solid var(--border-primary);margin:0;font-size:.7rem;display:flex}.ogc-recent-label svg{width:11px;height:11px}.ogc-recent-item{align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2)var(--space-4);color:var(--text-secondary);font-size:var(--font-sm);cursor:pointer;text-align:left;transition:background var(--transition-fast),color var(--transition-fast);text-overflow:ellipsis;white-space:nowrap;background:0 0;border:none;font-family:SF Mono,Fira Code,monospace;display:flex;overflow:hidden}.ogc-recent-item:hover{background:var(--bg-secondary);color:var(--color-primary)}.ogc-recent-arrow{width:12px;height:12px;color:var(--text-tertiary);flex-shrink:0}.ogc-spinner{border:2.5px solid #ffffff59;border-top-color:#fff;border-radius:50%;flex-shrink:0;width:16px;height:16px;animation:.7s linear infinite ogc-spin}@keyframes ogc-spin{to{transform:rotate(360deg)}}.ogc-results{gap:var(--space-4);flex-direction:column;display:flex}.ogc-error-card{align-items:flex-start;gap:var(--space-4);padding:var(--space-5)var(--space-6);border-radius:var(--radius-lg);background:#fef2f2;border:1px solid #fecaca;display:flex}.ogc-error-icon-wrap{background:#fee2e2;border:1.5px solid #fca5a5;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.ogc-error-icon-wrap svg{width:22px;height:22px;color:var(--color-error)}.ogc-error-card h3{font-size:var(--font-lg);color:#991b1b;margin:0 0 4px;font-weight:600}.ogc-error-card p{font-size:var(--font-sm);color:#dc2626;margin:0;line-height:1.5}.ogc-skeleton{gap:var(--space-4);flex-direction:column;display:flex}.ogc-skeleton-score{gap:var(--space-5);padding:var(--space-6);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);align-items:center;display:flex}.ogc-skeleton-score-right{flex-direction:column;flex:1;gap:0;display:flex}.ogc-skeleton-tabs{gap:var(--space-2);display:flex}.ogc-skeleton-rows{gap:var(--space-3);padding:var(--space-5);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);flex-direction:column;display:flex}.ogc-skel{background:linear-gradient(90deg,var(--color-slate-100)0%,var(--color-slate-200)50%,var(--color-slate-100)100%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.6s infinite ogc-shimmer}.ogc-skel--circle{border-radius:50%;flex-shrink:0;width:100px;height:100px}.ogc-skel--line{height:16px}.ogc-skel--pill{border-radius:var(--radius-full);width:160px;height:28px}.ogc-skel--tab{border-radius:var(--radius-md);width:100px;height:40px}.ogc-skel--row{height:14px}@keyframes ogc-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.ogc-score-hero{gap:var(--space-6);padding:var(--space-6);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);align-items:center;display:flex}.ogc-ring-wrap{flex-shrink:0;width:110px;height:110px;position:relative}.ogc-ring-svg{width:110px;height:110px}.ogc-ring-track{stroke:var(--color-slate-200)}.ogc-ring-progress{transition:stroke-dasharray 1s cubic-bezier(.4,0,.2,1)}.ogc-ring-center{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ogc-ring-num{font-size:1.875rem;font-weight:800;line-height:1}.ogc-ring-denom{color:var(--text-tertiary);margin-top:2px;font-size:.65rem}.ogc-score-detail{gap:var(--space-3);flex-direction:column;flex:1;min-width:0;display:flex}.ogc-score-badge{align-items:center;gap:var(--space-1);border-radius:var(--radius-full);font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.06em;border:1px solid;align-self:flex-start;padding:4px 12px;font-weight:700;display:inline-flex}.ogc-score-badge svg{width:12px;height:12px}.ogc-score-title{font-size:var(--font-xl);color:var(--text-primary);margin:0;font-weight:700}.ogc-score-url{align-items:center;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-tertiary);transition:color var(--transition-fast);text-overflow:ellipsis;white-space:nowrap;font-family:SF Mono,Fira Code,monospace;text-decoration:none;display:inline-flex;overflow:hidden}.ogc-score-url:hover{color:var(--color-primary)}.ogc-score-url svg{flex-shrink:0;width:12px;height:12px}.ogc-favicon{object-fit:contain;border-radius:2px;flex-shrink:0;width:14px;height:14px}.ogc-score-meta-title{font-size:var(--font-sm);color:var(--text-tertiary);text-overflow:ellipsis;white-space:nowrap;margin:0;font-style:italic;overflow:hidden}.ogc-summary-pills{gap:var(--space-2);flex-wrap:wrap;display:flex}.ogc-pill{border-radius:var(--radius-full);font-size:var(--font-xs);border:1px solid;align-items:center;gap:5px;padding:4px 10px;font-weight:600;display:inline-flex}.ogc-pill svg{width:12px;height:12px}.ogc-pill--success{color:#15803d;background:#dcfce7;border-color:#86efac}.ogc-pill--error{color:#dc2626;background:#fef2f2;border-color:#fca5a5}.ogc-pill--warn{color:#d97706;background:#fef3c7;border-color:#fde68a}.ogc-pill--info{color:#2563eb;background:#eff6ff;border-color:#bfdbfe}.ogc-coverage{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-4)var(--space-5)}.ogc-coverage-title{font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin:0 0 var(--space-3);font-weight:700}.ogc-coverage-grid{gap:var(--space-2);flex-wrap:wrap;display:flex}.ogc-tag-pill{border-radius:var(--radius-full);transition:transform var(--transition-fast);border:1px solid;align-items:center;gap:5px;padding:4px 10px;font-family:SF Mono,Fira Code,monospace;font-size:.7rem;font-weight:500;display:inline-flex}.ogc-tag-pill:hover{transform:translateY(-1px)}.ogc-tag-pill svg{width:10px;height:10px}.ogc-tag-pill--found{color:#15803d;background:#dcfce7;border-color:#86efac}.ogc-tag-pill--missing{color:#dc2626;background:#fef2f2;border-color:#fca5a5}.ogc-tag-pill--warning{color:#d97706;background:#fef3c7;border-color:#fde68a}.ogc-tabs{gap:var(--space-2);padding:var(--space-2);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);scrollbar-width:thin;display:flex;overflow-x:auto}.ogc-tab{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;flex:1;font-weight:500;display:inline-flex}.ogc-tab svg{width:14px;height:14px}.ogc-tab:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.ogc-tab--active{box-shadow:0 2px 8px #ff6b3540;background:var(--gradient-primary)!important;border-color:var(--color-primary)!important;color:var(--text-inverse)!important}.ogc-tab-body{background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);overflow:hidden}.ogc-overview{padding:var(--space-5);gap:var(--space-4);flex-direction:column;display:flex}.ogc-perfect{text-align:center;padding:var(--space-12)var(--space-8);align-items:center;gap:var(--space-3);border-radius:var(--radius-lg);background:linear-gradient(135deg,#dcfce7 0%,#d1fae5 100%);border:2px solid #86efac;flex-direction:column;display:flex}.ogc-perfect-icon{background:#f0fdf4;border:1.5px solid #86efac;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}.ogc-perfect-icon svg{width:26px;height:26px;color:var(--color-success)}.ogc-perfect h4{font-size:var(--font-xl);color:#065f46;margin:0;font-weight:700}.ogc-perfect p{font-size:var(--font-base);color:#047857;max-width:440px;margin:0;line-height:1.6}.ogc-section{border-radius:var(--radius-lg);border:1px solid;overflow:hidden}.ogc-section--error{background:#fef2f2;border-color:#fecaca}.ogc-section--warn{background:#fef3c7;border-color:#fde68a}.ogc-section--info{background:#eff6ff;border-color:#bfdbfe}.ogc-section-title{align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-4);font-size:var(--font-sm);border-bottom:1px solid #0000000f;margin:0;font-weight:700;display:flex}.ogc-section--error .ogc-section-title{color:#991b1b}.ogc-section--warn .ogc-section-title{color:#92400e}.ogc-section--info .ogc-section-title{color:#1e40af}.ogc-section-title svg{width:14px;height:14px}.ogc-section-count{border-radius:var(--radius-full);color:inherit;opacity:.7;background:#00000014;margin-left:auto;padding:1px 8px;font-size:.7rem}.ogc-list{padding:var(--space-3)var(--space-4);gap:var(--space-2);flex-direction:column;margin:0;list-style:none;display:flex}.ogc-list-item{font-size:var(--font-sm);padding-left:var(--space-5);line-height:1.6;position:relative}.ogc-list-item:before{content:"›";font-size:1rem;font-weight:700;line-height:1.4;position:absolute;left:4px}.ogc-list-item--error{color:#dc2626}.ogc-list-item--error:before{color:var(--color-error)}.ogc-list-item--warn{color:#d97706}.ogc-list-item--warn:before{color:var(--color-warning)}.ogc-list-item--info{color:#2563eb}.ogc-list-item--info:before{color:var(--color-info)}.ogc-details{padding:var(--space-4);gap:var(--space-4);flex-direction:column;display:flex}.ogc-details-header{justify-content:space-between;align-items:center;gap:var(--space-3);padding:0 var(--space-1);display:flex}.ogc-details-hint{font-size:var(--font-sm);color:var(--text-tertiary);margin:0}.ogc-btn-copy-all{align-items:center;gap:var(--space-1);padding:var(--space-2)var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-sm);cursor:pointer;transition:all var(--transition-fast);display:inline-flex}.ogc-btn-copy-all:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.ogc-btn-copy-all--done{color:#15803d!important;background:#dcfce7!important;border-color:#86efac!important}.ogc-btn-copy-all svg{width:13px;height:13px}.ogc-tag-group{gap:var(--space-1);flex-direction:column;display:flex}.ogc-tag-group-title{font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.1em;padding:var(--space-1)var(--space-2);border-radius:var(--radius-sm);margin:0 0 var(--space-1);color:var(--text-tertiary);background:var(--bg-secondary);align-self:flex-start;font-weight:700;display:inline-flex}.ogc-tag-group-title--og{color:var(--color-info);background:#eff6ff}.ogc-tag-group-title--tw{color:var(--color-slate-600);background:var(--color-slate-100)}.ogc-tag-row{align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);transition:background var(--transition-fast),border-color var(--transition-fast);display:flex}.ogc-tag-row:hover{background:var(--bg-tertiary);border-color:var(--border-secondary)}.ogc-tag-row--missing{opacity:.6;border-style:dashed}.ogc-tag-row-icon{color:var(--text-tertiary);text-align:center;flex-shrink:0;width:14px;font-size:.65rem}.ogc-tag-row-body{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.ogc-tag-row-prop{font-size:var(--font-xs);color:var(--color-primary);font-family:SF Mono,Fira Code,monospace;font-weight:600}.ogc-tag-row-val{font-size:var(--font-sm);color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ogc-tag-row-missing{font-size:var(--font-sm);color:var(--color-error);opacity:.7;font-style:italic}.ogc-tag-row-status{flex-shrink:0}.ogc-status-icon{width:15px;height:15px}.ogc-status-icon--found{color:var(--color-success)}.ogc-status-icon--missing{color:var(--color-error)}.ogc-status-icon--warn{color:var(--color-warning)}.ogc-tag-copy-btn{background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);width:28px;height:28px;color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:flex}.ogc-tag-copy-btn:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--text-inverse)}.ogc-tag-copy-btn svg{width:12px;height:12px}.ogc-previews{padding:var(--space-5);gap:var(--space-4);grid-template-columns:repeat(3,1fr);display:grid}@media (max-width:900px){.ogc-previews{grid-template-columns:1fr}}.ogc-preview-block{gap:var(--space-2);flex-direction:column;display:flex}.ogc-preview-label{align-items:center;gap:var(--space-2);font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);font-weight:700;display:flex}.ogc-preview-platform-dot{border-radius:50%;width:8px;height:8px}.ogc-preview-platform-dot--fb{background:#1877f2}.ogc-preview-platform-dot--tw{background:#000}.ogc-preview-platform-dot--li{background:#0a66c2}.ogc-img-fallback{justify-content:center;align-items:center;gap:var(--space-1);color:var(--color-slate-400);flex-direction:column;width:100%;height:100%;font-size:.7rem;display:flex;position:absolute;top:0;left:0}.ogc-img-fallback svg{width:20px;height:20px}.ogc-fb-card{background:#242526;border:1px solid #3a3b3c;border-radius:8px;overflow:hidden}.ogc-fb-image{background:#3a3b3c;padding-top:52.5%;position:relative}.ogc-fb-image img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.ogc-fb-body{background:#3a3b3c;border-top:1px solid #4a4b4c;padding:10px 12px}.ogc-fb-domain{text-transform:uppercase;color:#b0b3b8;letter-spacing:.04em;margin-bottom:3px;font-size:.65rem;display:block}.ogc-fb-title{font-size:var(--font-sm);color:#e4e6eb;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0 0 4px;font-weight:700;line-height:1.3;display:-webkit-box;overflow:hidden}.ogc-fb-desc{font-size:var(--font-xs);color:#b0b3b8;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;line-height:1.4;display:-webkit-box;overflow:hidden}.ogc-tw-card{background:#000;border:1px solid #2f3336;border-radius:14px;overflow:hidden}.ogc-tw-image{background:#1a1a1a;padding-top:52.5%;position:relative}.ogc-tw-image img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.ogc-tw-body{padding:12px}.ogc-tw-title{font-size:var(--font-sm);color:#e7e9ea;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:0 0 3px;font-weight:700;line-height:1.3;display:-webkit-box;overflow:hidden}.ogc-tw-desc{color:#71767b;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0 0 6px;font-size:.8125rem;line-height:1.4;display:-webkit-box;overflow:hidden}.ogc-tw-domain{font-size:var(--font-xs);color:#71767b;align-items:center;gap:5px;display:flex}.ogc-tw-domain svg{width:12px;height:12px}.ogc-li-card{background:#fff;border:1px solid #e0e0e0;border-radius:2px;overflow:hidden}.ogc-li-image{background:#f3f2f0;padding-top:52.5%;position:relative}.ogc-li-image img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.ogc-li-image .ogc-img-fallback{color:var(--color-slate-400)}.ogc-li-body{background:#f3f2f0;border-top:1px solid #e0e0e0;padding:8px 12px}.ogc-li-title{font-size:var(--font-sm);color:#000000e6;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0 0 3px;font-weight:600;line-height:1.3;display:-webkit-box;overflow:hidden}.ogc-li-domain{color:#0009;font-size:.7rem}.ogc-toast{bottom:var(--space-6);right:var(--space-6);align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-5);color:#15803d;border-radius:var(--radius-lg);font-size:var(--font-sm);box-shadow:var(--shadow-lg);z-index:9999;background:#dcfce7;border:1px solid #86efac;font-weight:600;display:flex;position:fixed}.ogc-toast svg{width:16px;height:16px}@media (max-width:768px){.ogc-input-row{flex-direction:column}.ogc-btn-check{justify-content:center;min-height:48px}.ogc-score-hero{text-align:center;flex-direction:column;align-items:center}.ogc-score-badge{align-self:center}.ogc-score-url,.ogc-summary-pills{justify-content:center}.ogc-tabs{scrollbar-width:thin;overflow-x:auto}.ogc-tab{padding:var(--space-2)var(--space-3);font-size:var(--font-xs);flex:none}.ogc-toast{bottom:var(--space-4);right:var(--space-4);left:var(--space-4)}.ogc-hint{display:none}}@media (max-width:480px){.ogc-input-card{padding:var(--space-4)}.ogc-coverage-grid{gap:var(--space-1)}.ogc-tag-pill{padding:3px 8px;font-size:.65rem}.ogc-tag-row{padding:var(--space-2)}.ogc-tag-row-val{font-size:var(--font-xs)}.ogc-previews{padding:var(--space-3)}}.robots-top-controls{justify-content:space-between;align-items:center;gap:var(--space-4);margin-top:var(--space-6);padding:var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.preset-buttons{gap:var(--space-2);flex-wrap:wrap;display:flex}.btn-preset{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;background:#fff;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.btn-preset:hover{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.btn-preset svg{width:14px;height:14px}.btn-clear-robots{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;background:#fff;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.btn-clear-robots:hover{background:var(--bg-secondary);color:#ef4444;border-color:#ef4444}.btn-clear-robots svg{width:14px;height:14px}.robots-tabs{gap:var(--space-2);margin-top:var(--space-6);padding:var(--space-2);background:var(--bg-secondary);border-radius:var(--radius-lg);display:flex;overflow-x:auto}.robots-tab{align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-5);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;white-space:nowrap;background:#fff;font-size:.9375rem;font-weight:500;transition:all .2s;display:flex}.robots-tab svg{width:16px;height:16px}.robots-tab:hover{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.robots-tab.active{background:var(--gradient-primary);border-color:var(--color-primary);color:#fff}.robots-tab.active svg{color:#fff}.robots-content{margin-top:var(--space-6);border:2px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-6);background:#fff}.builder-content{gap:var(--space-6);flex-direction:column;display:flex}.robots-section{padding:var(--space-5);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg)}.section-header{margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:2px solid var(--border-primary);justify-content:space-between;align-items:center;display:flex}.section-header h3{color:var(--text-primary);margin:0;font-size:1.25rem;font-weight:600}.btn-add{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;font-size:.875rem;font-weight:600;transition:all .2s;display:flex}.btn-add:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff6b3533}.btn-add svg{width:14px;height:14px}.user-agent-card{padding:var(--space-5);border:1px solid var(--border-primary);border-radius:var(--radius-lg);margin-bottom:var(--space-4);background:#fff}.user-agent-card:last-child{margin-bottom:0}.user-agent-header{justify-content:space-between;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--bg-secondary);display:flex}.user-agent-select-group{gap:var(--space-2);flex-direction:column;flex:1;display:flex}.user-agent-select-group label{color:var(--text-primary);font-size:.875rem;font-weight:600}.user-agent-select-group select{padding:var(--space-2)var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;background:#fff;font-size:.9375rem;transition:all .2s}.user-agent-select-group select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.custom-ua-input{padding:var(--space-2)var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);background:#fff;font-size:.875rem;transition:all .2s}.custom-ua-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.btn-remove{border-radius:var(--radius-md);color:#dc2626;cursor:pointer;background:#fef2f2;border:1px solid #fecaca;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.btn-remove:hover{background:#fee2e2;border-color:#dc2626}.btn-remove svg{width:16px;height:16px}.rules-section{margin-bottom:var(--space-4)}.rules-section:last-child{margin-bottom:0}.rules-section h4{color:var(--text-primary);margin-bottom:var(--space-3);font-size:1rem;font-weight:600}.rule-hint{color:var(--text-tertiary);margin-bottom:var(--space-3);font-size:.8125rem;font-style:italic}.common-paths{gap:var(--space-2);margin-bottom:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);background:#eff6ff;border:1px solid #bfdbfe;flex-wrap:wrap;align-items:center;display:flex}.common-paths-label{color:#1e40af;font-size:.8125rem;font-weight:600}.path-chip{padding:var(--space-1)var(--space-3);border-radius:var(--radius-md);color:#2563eb;cursor:pointer;background:#fff;border:1px solid #3b82f6;font-family:monospace;font-size:.8125rem;font-weight:500;transition:all .2s}.path-chip:hover:not(:disabled){color:#fff;background:#3b82f6}.path-chip.added{color:#15803d;cursor:not-allowed;opacity:.7;background:#dcfce7;border-color:#86efac}.path-chip:disabled{cursor:not-allowed}.rules-list{gap:var(--space-2);margin-bottom:var(--space-3);flex-direction:column;display:flex}.rule-item{padding:var(--space-2)var(--space-3);border-radius:var(--radius-md);background:#fef2f2;border:1px solid #fecaca;justify-content:space-between;align-items:center;display:flex}.rule-item.allow{background:#dcfce7;border-color:#86efac}.rule-item code{color:#dc2626;font-family:monospace;font-size:.875rem;font-weight:500}.rule-item.allow code{color:#15803d}.btn-remove-rule{border-radius:var(--radius-md);color:#dc2626;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:28px;height:28px;transition:all .2s;display:flex}.btn-remove-rule:hover{background:#dc26261a}.btn-remove-rule svg{width:14px;height:14px}.add-rule-input{gap:var(--space-2);display:flex}.add-rule-input input{padding:var(--space-2)var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);background:#fff;flex:1;font-size:.875rem;transition:all .2s}.add-rule-input input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.btn-add-rule{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;border:none;font-size:.875rem;font-weight:600;transition:all .2s;display:flex}.btn-add-rule:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #ff6b3533}.btn-add-rule:disabled{background:var(--bg-secondary);color:var(--text-tertiary);cursor:not-allowed}.btn-add-rule svg{width:14px;height:14px}.sitemap-list{gap:var(--space-2);margin-bottom:var(--space-3);flex-direction:column;display:flex}.sitemap-item{padding:var(--space-2)var(--space-3);border-radius:var(--radius-md);background:#eff6ff;border:1px solid #bfdbfe;justify-content:space-between;align-items:center;display:flex}.sitemap-item code{color:#1e40af;word-break:break-all;font-family:monospace;font-size:.875rem}.add-sitemap-input{gap:var(--space-2);display:flex}.add-sitemap-input input{padding:var(--space-2)var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);background:#fff;flex:1;font-size:.875rem;transition:all .2s}.add-sitemap-input input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.advanced-settings{gap:var(--space-4);grid-template-columns:repeat(2,1fr);display:grid}.setting-item{gap:var(--space-2);flex-direction:column;display:flex}.setting-item label{color:var(--text-primary);font-size:.9375rem;font-weight:600}.label-hint{color:var(--text-tertiary);margin-top:var(--space-1);font-size:.75rem;font-weight:400;display:block}.setting-item input{padding:var(--space-2)var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);background:#fff;font-size:.9375rem;transition:all .2s}.setting-item input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.code-content{gap:var(--space-4);flex-direction:column;display:flex}.code-preview-header{padding-bottom:var(--space-3);border-bottom:2px solid var(--border-primary);justify-content:space-between;align-items:center;display:flex}.code-preview-header h3{align-items:center;gap:var(--space-2);color:var(--text-primary);margin:0;font-size:1.125rem;font-weight:600;display:flex}.code-preview-header h3 svg{color:var(--color-primary);width:20px;height:20px}.code-actions{gap:var(--space-2);display:flex}.btn-copy-code,.btn-download{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;font-size:.875rem;font-weight:600;transition:all .2s;display:flex}.btn-copy-code:hover,.btn-download:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff6b3533}.btn-copy-code svg,.btn-download svg{width:14px;height:14px}.code-preview{padding:var(--space-5);border-radius:var(--radius-lg);background:#1e293b;max-height:500px;overflow-y:auto}.code-preview pre{margin:0;font-family:Monaco,Courier New,monospace;font-size:.875rem;line-height:1.6}.code-preview code{color:#e2e8f0;white-space:pre-wrap;word-wrap:break-word}.usage-instructions{padding:var(--space-5);border-radius:var(--radius-lg);background:#eff6ff;border:1px solid #bfdbfe}.usage-instructions h4{align-items:center;gap:var(--space-2);color:#1e40af;margin-bottom:var(--space-3);font-size:1rem;font-weight:600;display:flex}.usage-instructions h4 svg{width:18px;height:18px}.usage-instructions ol{padding-left:var(--space-5);color:var(--text-primary);margin:0}.usage-instructions li{margin-bottom:var(--space-2);font-size:.9375rem;line-height:1.8}.usage-instructions code{color:#1e40af;background:#fff;border:1px solid #bfdbfe;border-radius:4px;padding:2px 6px;font-family:monospace;font-size:.875rem}.usage-instructions a{color:var(--color-primary);font-weight:500;text-decoration:none}.usage-instructions a:hover{text-decoration:underline}.help-content{gap:var(--space-6);flex-direction:column;display:flex}.help-section{padding:var(--space-5);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg)}.help-section h3{color:var(--text-primary);margin-bottom:var(--space-3);font-size:1.25rem;font-weight:600}.help-section p{color:var(--text-secondary);margin:0;font-size:.9375rem;line-height:1.7}.syntax-examples{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));display:grid}.syntax-item{padding:var(--space-4);border:1px solid var(--border-primary);border-radius:var(--radius-md);background:#fff}.syntax-item h4{color:var(--text-primary);margin-bottom:var(--space-2);font-size:.9375rem;font-weight:600}.syntax-item code{padding:var(--space-2)var(--space-3);color:#e2e8f0;border-radius:var(--radius-md);margin-bottom:var(--space-2);background:#1e293b;font-family:monospace;font-size:.875rem;display:block}.syntax-item p{color:var(--text-secondary);margin:0;font-size:.875rem;line-height:1.6}.pattern-list{gap:var(--space-3);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.pattern-list li{padding:var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);background:#fff;font-size:.9375rem;line-height:1.7}.pattern-list code{color:#e2e8f0;background:#1e293b;border-radius:4px;padding:2px 6px;font-family:monospace;font-size:.875rem}.example-cards{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.example-card{padding:var(--space-4);border:1px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff}.example-card h4{color:var(--text-primary);margin-bottom:var(--space-3);font-size:1rem;font-weight:600}.example-card pre{padding:var(--space-3);border-radius:var(--radius-md);background:#1e293b;margin:0;overflow-x:auto}.example-card code{color:#e2e8f0;font-family:monospace;font-size:.875rem;line-height:1.6}.best-practices-list{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.best-practices-list li{align-items:flex-start;gap:var(--space-2);padding:var(--space-2);color:var(--text-secondary);font-size:.9375rem;line-height:1.7;display:flex}.best-practices-list svg{flex-shrink:0;width:18px;height:18px;margin-top:2px}.best-practices-list li svg:first-child{color:#10b981}.best-practices-list li:has(svg[class*=FiAlertCircle]) svg{color:#f59e0b}.success-toast{bottom:var(--space-6);right:var(--space-6);align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-5);color:#15803d;border-radius:var(--radius-lg);z-index:1000;background:#dcfce7;border:1px solid #86efac;font-size:.875rem;font-weight:500;display:flex;position:fixed;box-shadow:0 4px 12px #0000001a}.success-toast svg{width:18px;height:18px}@media (max-width:968px){.robots-top-controls{flex-direction:column;align-items:stretch}.preset-buttons{justify-content:stretch}.btn-preset{flex:1;justify-content:center}.robots-tabs{scrollbar-width:thin;overflow-x:scroll}.advanced-settings{grid-template-columns:1fr}.code-preview-header{gap:var(--space-3);flex-direction:column;align-items:stretch}.code-actions{justify-content:stretch}.btn-copy-code,.btn-download{flex:1;justify-content:center}}@media (max-width:640px){.user-agent-header{flex-direction:column}.btn-remove{align-self:flex-start}.common-paths{flex-direction:column;align-items:stretch}.path-chip{text-align:center}.add-rule-input,.add-sitemap-input{flex-direction:column}.btn-add-rule{justify-content:center;width:100%}.syntax-examples,.example-cards{grid-template-columns:1fr}}