.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{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}.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-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}.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-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}.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}.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}.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 p{color:var(--text-secondary);margin:0;font-size:1rem}.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}}.pdf-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}.file-name-input{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);background:#fff;flex:1;min-width:250px;max-width:400px;display:flex}.file-name-input svg{color:var(--color-primary);flex-shrink:0;width:18px;height:18px}.pdf-filename-field{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-size:.875rem}.pdf-filename-field::placeholder{color:var(--text-tertiary)}.file-extension{color:var(--text-secondary);font-size:.875rem;font-weight:500}.btn-sample,.btn-settings-toggle,.btn-clear-pdf{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-settings-toggle:hover,.btn-clear-pdf:hover{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.btn-settings-toggle svg,.btn-clear-pdf svg{width:14px;height:14px}.pdf-settings-panel{margin-top:var(--space-6);padding:var(--space-6);border:2px solid var(--color-primary);border-radius:var(--radius-lg);background:linear-gradient(135deg,#fff5f2 0%,#fff 100%);overflow:hidden}.pdf-settings-panel h3{align-items:center;gap:var(--space-2);color:var(--text-primary);margin-bottom:var(--space-6);font-size:1.25rem;font-weight:600;display:flex}.pdf-settings-panel h3 svg{color:var(--color-primary);width:22px;height:22px}.settings-grid{gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.setting-group{padding:var(--space-5);border:1px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff}.setting-group h4{color:var(--text-primary);margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:2px solid var(--bg-secondary);font-size:1rem;font-weight:600}.setting-item{gap:var(--space-2);margin-bottom:var(--space-4);flex-direction:column;display:flex}.setting-item:last-child{margin-bottom:0}.setting-item select,.setting-item input[type=number],.setting-item 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;font-size:.875rem;transition:all .2s}.setting-item select:focus,.setting-item input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.setting-item input[type=number]{width:100%}.margins-grid{gap:var(--space-3);grid-template-columns:repeat(2,1fr);display:grid}.setting-checkbox{align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);display:flex}.setting-checkbox:last-child{margin-bottom:var(--space-4)}.pdf-workspace{gap:var(--space-6);margin-top:var(--space-6);grid-template-columns:1fr 1fr;display:grid}@media (max-width:968px){.pdf-workspace{grid-template-columns:1fr}}.pdf-input-section,.pdf-preview-section{flex-direction:column;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}.pdf-text-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:#fff;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:1rem;line-height:1.6;transition:all .3s}.pdf-text-area:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.pdf-text-area::placeholder{color:var(--text-tertiary)}.pdf-stats{gap:var(--space-4);margin-top:var(--space-4);padding:var(--space-3);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.pdf-stats .stat-item{align-items:center;gap:var(--space-2);display:flex}.pdf-stats .stat-item.highlight{background:var(--color-primary-light);padding:var(--space-2)var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-primary)}.pdf-stats .stat-label{color:var(--text-secondary);font-size:.75rem;font-weight:500}.pdf-stats .stat-item.highlight .stat-label{color:var(--color-primary)}.pdf-stats .stat-value{color:var(--text-primary);font-family:monospace;font-size:.875rem;font-weight:700}.empty-preview{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-preview 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}.preview-info-card{border:2px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-5);background:#fff}.preview-info-item{padding:var(--space-3);border-bottom:1px solid var(--bg-secondary);justify-content:space-between;align-items:center;display:flex}.preview-info-item:last-of-type{margin-bottom:var(--space-4);border-bottom:none}.preview-info-item strong{color:var(--text-secondary);font-size:.875rem;font-weight:500}.preview-info-item span{color:var(--text-primary);font-family:monospace;font-size:.875rem;font-weight:600}.estimated-pages-card{align-items:center;gap:var(--space-4);padding:var(--space-4);background:var(--gradient-primary);border-radius:var(--radius-lg);color:#fff;margin-top:var(--space-4);display:flex}.estimated-pages-card svg{flex-shrink:0;width:40px;height:40px}.pages-count{font-size:2rem;font-weight:700;line-height:1}.pages-label{opacity:.9;margin-top:var(--space-1);font-size:.875rem}.pdf-action-section{margin-top:var(--space-6);align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.btn-generate-pdf{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-4)var(--space-10);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-lg);cursor:pointer;border:none;min-width:220px;font-size:1.125rem;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 12px #ff6b3533}.btn-generate-pdf:hover:not(:disabled){background:linear-gradient(135deg,#e55a2a 0%,#e8841a 100%);transform:translateY(-2px);box-shadow:0 6px 16px #ff6b354d}.btn-generate-pdf:disabled{background:var(--bg-secondary);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none}.btn-generate-pdf svg{width:22px;height:22px}.success-message{align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-5);color:#15803d;border-radius:var(--radius-lg);background:#dcfce7;border:1px solid #86efac;font-size:.875rem;font-weight:500;display:flex}.success-message svg{width:18px;height:18px}@media (max-width:968px){.pdf-top-controls{flex-direction:column;align-items:stretch}.file-name-input{max-width:100%}.control-buttons{justify-content:center}.settings-grid{grid-template-columns:1fr}}@media (max-width:640px){.control-buttons{flex-direction:column}.btn-sample,.btn-settings-toggle,.btn-clear-pdf{justify-content:center;width:100%}.pdf-stats{gap:var(--space-2);flex-direction:column}.pdf-stats .stat-item{justify-content:space-between;width:100%}.margins-grid{grid-template-columns:1fr}.btn-generate-pdf{width:100%}}.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}.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}.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}}.og-checker-input-section{margin-top:var(--space-6);padding:var(--space-6);border:2px solid var(--color-primary);border-radius:var(--radius-lg);background:linear-gradient(135deg,#fff5f2 0%,#fff 100%)}.url-input-form{gap:var(--space-4);flex-direction:column;display:flex}.url-input-wrapper{border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;align-items:center;transition:all .2s;display:flex;position:relative}.url-input-field{padding:var(--space-4)var(--space-12);color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-size:1rem}.url-input-field::placeholder{color:var(--text-tertiary)}.url-input-field:disabled{opacity:.6;cursor:not-allowed}.clear-url-btn{right:var(--space-3);width:32px;height:32px;color:var(--text-tertiary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute}.clear-url-btn:hover{background:var(--bg-secondary);color:var(--color-primary)}.clear-url-btn svg{width:18px;height:18px}.input-actions{gap:var(--space-3);flex-wrap:wrap;display:flex}.btn-check-og{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-8);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-lg);cursor:pointer;border:none;flex:1;min-width:200px;font-size:1rem;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 12px #ff6b3533}.btn-check-og:hover:not(:disabled){background:linear-gradient(135deg,#e55a2a 0%,#e8841a 100%);transform:translateY(-2px);box-shadow:0 6px 16px #ff6b354d}.btn-check-og:disabled{background:var(--bg-secondary);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none;transform:none}.btn-check-og svg{width:18px;height:18px}.btn-sample{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;background:#fff;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.btn-sample:hover{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.btn-clear-og{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;background:#fff;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.btn-clear-og:hover{background:var(--bg-secondary);color:#ef4444;border-color:#ef4444}.btn-clear-og svg{width:14px;height:14px}.spinner.large{border:4px solid var(--bg-secondary);border-top-color:var(--color-primary);width:48px;height:48px}.og-results-section{margin-top:var(--space-8)}.error-state{padding:var(--space-16);border-radius:var(--radius-lg);text-align:center;background:#fef2f2;border:2px solid #fecaca;flex-direction:column;justify-content:center;align-items:center;display:flex}.error-icon{color:#ef4444;width:64px;height:64px;margin-bottom:var(--space-4)}.error-state h3{color:#991b1b;margin-bottom:var(--space-2);font-size:1.5rem;font-weight:600}.error-state p{color:#dc2626;max-width:500px;font-size:1rem}.loading-state{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;display:flex}.loading-state p{margin-top:var(--space-4);color:var(--text-secondary);font-size:1rem}.og-score-card{gap:var(--space-8);padding:var(--space-6);border:2px solid var(--border-primary);border-radius:var(--radius-lg);margin-bottom:var(--space-6);background:#fff;display:flex}.score-circle{flex-shrink:0;position:relative}.score-svg{width:120px;height:120px;transform:rotate(-90deg)}.score-number{color:var(--text-primary);font-size:2rem;font-weight:700;line-height:1;display:block}.score-label{color:var(--text-secondary);margin-top:var(--space-1);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;display:block}.score-details{flex:1}.score-details h3{color:var(--text-primary);margin-bottom:var(--space-3);font-size:1.5rem;font-weight:600}.checked-url{align-items:center;gap:var(--space-2);color:var(--text-secondary);margin-bottom:var(--space-4);font-size:.875rem;display:flex}.checked-url svg{flex-shrink:0;width:14px;height:14px}.checked-url a{color:var(--color-primary);word-break:break-all;text-decoration:none}.checked-url a:hover{text-decoration:underline}.score-summary{gap:var(--space-2);flex-direction:column;display:flex}.summary-item{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-3);border-radius:var(--radius-md);font-size:.875rem;font-weight:500;display:flex}.summary-item svg{flex-shrink:0;width:16px;height:16px}.summary-item.success{color:#15803d;background:#dcfce7}.summary-item.error{color:#dc2626;background:#fef2f2}.summary-item.warning{color:#d97706;background:#fef3c7}.og-tabs{gap:var(--space-2);padding:var(--space-2);background:var(--bg-secondary);border-radius:var(--radius-lg);margin-bottom:var(--space-6);display:flex;overflow-x:auto}.og-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}.og-tab svg{width:16px;height:16px}.og-tab:hover{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.og-tab.active{background:var(--gradient-primary);border-color:var(--color-primary);color:#fff}.og-tab.active svg{color:#fff}.og-tab-content{border:2px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-6);background:#fff}.overview-content{gap:var(--space-6);flex-direction:column;display:flex}.issues-section,.warnings-section,.suggestions-section{padding:var(--space-5);border-radius:var(--radius-lg)}.issues-section{background:#fef2f2;border:1px solid #fecaca}.warnings-section{background:#fef3c7;border:1px solid #fde68a}.suggestions-section{background:#eff6ff;border:1px solid #bfdbfe}.issues-section h4,.warnings-section h4,.suggestions-section h4{align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);font-size:1.125rem;font-weight:600;display:flex}.issues-section h4{color:#991b1b}.warnings-section h4{color:#92400e}.suggestions-section h4{color:#1e40af}.issues-section h4 svg,.warnings-section h4 svg,.suggestions-section h4 svg{width:20px;height:20px}.issue-list{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.issue-list li{align-items:flex-start;gap:var(--space-2);padding-left:var(--space-5);font-size:.9375rem;line-height:1.6;display:flex;position:relative}.issue-list li:before{content:"•";font-size:1.25rem;font-weight:700;position:absolute;left:0}.issue-list.error li,.issue-list.error li:before{color:#dc2626}.issue-list.warning li,.issue-list.warning li:before{color:#d97706}.issue-list.suggestion li,.issue-list.suggestion li:before{color:#2563eb}.perfect-score{padding:var(--space-12);border-radius:var(--radius-lg);text-align:center;background:linear-gradient(135deg,#dcfce7 0%,#d1fae5 100%);border:2px solid #86efac;flex-direction:column;align-items:center;display:flex}.perfect-icon{color:#10b981;width:64px;height:64px;margin-bottom:var(--space-4)}.perfect-score h4{color:#065f46;margin-bottom:var(--space-2);font-size:1.5rem;font-weight:600}.perfect-score p{color:#047857;max-width:500px;font-size:1rem;line-height:1.6}.details-content{gap:var(--space-6);flex-direction:column;display:flex}.tag-group{background:var(--bg-secondary);padding:var(--space-5);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.tag-group h4{align-items:center;gap:var(--space-2);color:var(--text-primary);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:2px solid var(--border-primary);font-size:1.125rem;font-weight:600;display:flex}.tag-group h4 svg{width:20px;height:20px;color:var(--color-primary)}.tag-list{gap:var(--space-3);flex-direction:column;display:flex}.tag-item{align-items:flex-start;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);background:#fff;display:flex}.tag-status{flex-shrink:0;width:20px;height:20px;margin-top:2px}.tag-status.success{color:#10b981}.tag-status.error{color:#ef4444}.tag-status.warning{color:#f59e0b}.tag-info{gap:var(--space-1);flex-direction:column;flex:1;min-width:0;display:flex}.tag-info strong{color:var(--color-primary);font-size:.875rem;font-weight:600}.tag-info span{color:var(--text-secondary);word-break:break-word;font-size:.875rem}.tag-info .image-url{align-items:center;gap:var(--space-2);display:flex}.tag-info .image-url svg{flex-shrink:0;width:14px;height:14px}.btn-copy-tag{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:flex}.btn-copy-tag:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.btn-copy-tag svg{width:14px;height:14px}.preview-content{gap:var(--space-6);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)}.facebook-preview-og{margin:var(--space-4);border-radius:var(--radius-md);background:#fff;border:1px solid #e4e6eb;overflow:hidden}.facebook-preview-og .preview-image-og{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-8)var(--space-4);color:var(--text-tertiary);text-align:center;word-break:break-all;background:#f0f2f5;border-bottom:1px solid #e4e6eb;font-size:.8125rem;display:flex}.facebook-preview-og .preview-image-og svg{flex-shrink:0;width:40px;height:40px}.facebook-preview-og .preview-content-og{padding:var(--space-3);background:#f0f2f5}.facebook-preview-og .preview-url-og{color:#65676b;text-transform:uppercase;margin-bottom:var(--space-1);font-size:.75rem}.facebook-preview-og .preview-title-og{color:#050505;margin-bottom:var(--space-1);font-size:1rem;font-weight:600;line-height:1.3}.facebook-preview-og .preview-description-og{color:#65676b;font-size:.875rem;line-height:1.5}.twitter-preview-og{margin:var(--space-4);border-radius:var(--radius-lg);background:#fff;border:1px solid #cfd9de;overflow:hidden}.twitter-preview-og .preview-image-og{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-8)var(--space-4);color:var(--text-tertiary);text-align:center;word-break:break-all;background:#f7f9f9;border-bottom:1px solid #cfd9de;font-size:.8125rem;display:flex}.twitter-preview-og .preview-image-og.large{padding:var(--space-16)var(--space-4)}.twitter-preview-og .preview-image-og svg{flex-shrink:0;width:40px;height:40px}.twitter-preview-og .preview-content-og{padding:var(--space-3)}.twitter-preview-og .preview-title-og{color:#0f1419;margin-bottom:var(--space-1);font-size:.9375rem;font-weight:400;line-height:1.3}.twitter-preview-og .preview-description-og{color:#536471;margin-bottom:var(--space-2);font-size:.9375rem;line-height:1.5}.twitter-preview-og .preview-url-og{color:#536471;font-size:.8125rem}.linkedin-preview-og{margin:var(--space-4);border-radius:var(--radius-md);background:#fff;border:1px solid #e0e0e0;overflow:hidden}.linkedin-preview-og .preview-image-og{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-8)var(--space-4);color:var(--text-tertiary);text-align:center;word-break:break-all;background:#f3f2f0;border-bottom:1px solid #e0e0e0;font-size:.8125rem;display:flex}.linkedin-preview-og .preview-image-og svg{flex-shrink:0;width:40px;height:40px}.linkedin-preview-og .preview-content-og{padding:var(--space-3)}.linkedin-preview-og .preview-title-og{color:#000000e6;margin-bottom:var(--space-1);font-size:.875rem;font-weight:600;line-height:1.3}.linkedin-preview-og .preview-url-og{color:#0009;font-size:.75rem}@media (max-width:968px){.og-score-card{text-align:center;flex-direction:column}.score-circle{align-self:center}.input-actions{flex-direction:column}.btn-check-og{width:100%}.og-tabs{scrollbar-width:thin;overflow-x:scroll}}@media (max-width:640px){.url-input-field{padding:var(--space-3)var(--space-10);font-size:.875rem}.btn-sample,.btn-clear-og{justify-content:center;width:100%}.tag-item{gap:var(--space-2);flex-direction:column}.btn-copy-tag{align-self:flex-start}}.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}@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}}.redirect-input-section{margin-top:var(--space-6)}.url-input-wrapper{gap:var(--space-3);border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;align-items:center;margin:16px 0;padding:1rem 1rem 1rem 3rem;transition:all .3s;display:flex}.url-input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #ff6b351a}.input-icon{color:var(--color-primary);flex-shrink:0;width:24px;height:24px}.redirect-url-input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;min-width:0;font-size:1rem}.redirect-url-input::placeholder{color:var(--text-tertiary)}.btn-check-redirect{align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-6);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;border:none;font-size:1rem;font-weight:600;transition:all .3s;display:flex;box-shadow:0 2px 8px #ff6b3533}.btn-check-redirect:hover:not(:disabled){background:linear-gradient(135deg,#e55a2a 0%,#e8841a 100%);transform:translateY(-1px);box-shadow:0 4px 12px #ff6b354d}.btn-check-redirect:disabled{background:var(--bg-secondary);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none}.btn-check-redirect svg{width:18px;height:18px}.error-message{align-items:center;gap:var(--space-2);margin-top:var(--space-3);padding:var(--space-3)var(--space-4);color:#991b1b;border-radius:var(--radius-md);background:#fee2e2;border:1px solid #fecaca;font-size:.875rem;display:flex}.redirect-results{margin-top:var(--space-8)}.redirect-summary{gap:var(--space-4);margin-bottom:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.summary-card{align-items:center;gap:var(--space-4);padding:var(--space-5);border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;transition:all .3s;display:flex}.summary-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.summary-card.has-issues{background:#fffbeb;border-color:#fbbf24}.summary-card.no-issues{background:#ecfdf5;border-color:#10b981}.summary-icon{background:var(--gradient-primary);border-radius:var(--radius-md);color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.summary-card.has-issues .summary-icon{background:linear-gradient(135deg,#f59e0b 0%,#fbbf24 100%)}.summary-card.no-issues .summary-icon{background:linear-gradient(135deg,#10b981 0%,#34d399 100%)}.summary-icon svg{width:24px;height:24px}.summary-content{flex:1}.summary-label{color:var(--text-secondary);margin-bottom:var(--space-1);font-size:.875rem;font-weight:500}.summary-value{color:var(--text-primary);font-family:monospace;font-size:1.5rem;font-weight:700}.result-actions{gap:var(--space-3);margin-bottom:var(--space-6);flex-wrap:wrap;display:flex}.btn-action{align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-5);border:2px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;background:#fff;font-size:.875rem;font-weight:600;transition:all .2s;display:flex}.btn-action:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-action svg{width:16px;height:16px}.issues-alert{padding:var(--space-5);border-radius:var(--radius-lg);margin-bottom:var(--space-6);background:#fffbeb;border:2px solid #fbbf24}.issues-header{align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);display:flex}.issues-header svg{color:#f59e0b;width:22px;height:22px}.issues-header h3{color:#92400e;margin:0;font-size:1.125rem;font-weight:600}.issues-list{margin:0;padding:0;list-style:none}.issues-list li{padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-2);color:#92400e;background:#fff;border-left:4px solid #fbbf24;font-size:.875rem;line-height:1.6}.issues-list li:last-child{margin-bottom:0}.url-flow-section{margin-bottom:var(--space-8)}.section-title{align-items:center;gap:var(--space-2);color:var(--text-primary);margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:2px solid var(--border-primary);font-size:1.25rem;font-weight:600;display:flex}.section-title svg{color:var(--color-primary);width:24px;height:24px}.url-flow{gap:var(--space-3);flex-direction:column;display:flex}.flow-item{padding:var(--space-4);border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;transition:all .3s}.flow-item:hover{border-color:var(--color-primary);box-shadow:0 2px 8px #ff6b351a}.flow-item.original{background:#eff6ff;border-color:#3b82f6}.flow-item.redirect{background:#fffbeb;border-color:#f59e0b}.flow-item.final{background:#ecfdf5;border-color:#10b981}.flow-badge{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-2);font-size:.75rem;font-weight:600}.flow-url{font-size:.875rem}.flow-url a{align-items:center;gap:var(--space-2);color:var(--color-primary);word-break:break-all;font-weight:500;text-decoration:none;transition:color .2s;display:flex}.flow-url a:hover{color:#e55a2a;text-decoration:underline}.flow-url svg{flex-shrink:0;width:14px;height:14px}.flow-arrow{align-items:center;gap:var(--space-1);margin:var(--space-2)0;flex-direction:column;display:flex}.flow-arrow svg{color:var(--color-primary);width:20px;height:20px}.redirect-type-label{color:var(--text-secondary);background:var(--bg-secondary);padding:var(--space-1)var(--space-2);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600}.redirect-chain-section{margin-bottom:var(--space-8)}.redirect-chain{gap:var(--space-3);flex-direction:column;display:flex}.chain-item{border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;transition:all .3s;overflow:hidden}.chain-item:hover{border-color:var(--color-primary);box-shadow:0 2px 8px #ff6b351a}.chain-item.expanded{border-color:var(--color-primary)}.chain-header{padding:var(--space-4);cursor:pointer;justify-content:space-between;align-items:center;transition:background .2s;display:flex}.chain-header:hover{background:var(--bg-secondary)}.chain-step{align-items:center;gap:var(--space-4);flex:1;min-width:0;display:flex}.step-number{background:var(--gradient-primary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:.875rem;font-weight:700;display:flex}.step-info{flex:1;min-width:0}.step-url{color:var(--text-primary);word-break:break-all;margin-bottom:var(--space-2);font-size:.875rem;font-weight:500}.step-meta{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.status-badge{color:#fff;padding:var(--space-1)var(--space-3);border-radius:var(--radius-sm);white-space:nowrap;font-size:.75rem;font-weight:600}.response-time{align-items:center;gap:var(--space-1);color:var(--text-secondary);font-size:.75rem;font-weight:500;display:flex}.response-time svg{width:12px;height:12px}.expand-icon{color:var(--text-secondary);flex-shrink:0}.expand-icon svg{width:20px;height:20px}.chain-details{padding:0 var(--space-4)var(--space-4)var(--space-4);background:var(--bg-secondary);border-top:1px solid var(--border-primary)}.detail-item{padding:var(--space-3)0;border-bottom:1px solid var(--border-primary);font-size:.875rem;line-height:1.6}.detail-item:last-child{border-bottom:none}.detail-item strong{color:var(--text-secondary);margin-right:var(--space-2);font-weight:600}.detail-link{color:var(--color-primary);align-items:center;gap:var(--space-1);word-break:break-all;text-decoration:none;display:inline-flex}.detail-link:hover{text-decoration:underline}.detail-link svg{flex-shrink:0;width:12px;height:12px}.detail-headers{padding-top:var(--space-3)}.headers-list{margin-top:var(--space-2);border-radius:var(--radius-md);background:#fff;overflow:hidden}.header-row{padding:var(--space-2)var(--space-3);border-bottom:1px solid var(--bg-secondary);font-size:.8125rem;display:flex}.header-row:last-child{border-bottom:none}.header-key{color:var(--text-secondary);flex-shrink:0;min-width:140px;font-weight:600}.header-value{color:var(--text-primary);word-break:break-all;font-family:monospace}.seo-tips-section{margin-top:var(--space-8)}.tip-icon{border-radius:var(--radius-md);color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.125rem;font-weight:700;display:flex}.tip-icon.green{background:linear-gradient(135deg,#10b981 0%,#34d399 100%)}.tip-icon.orange{background:linear-gradient(135deg,#f59e0b 0%,#fbbf24 100%)}.tip-icon.red{background:linear-gradient(135deg,#ef4444 0%,#f87171 100%)}.tip-icon.blue{background:linear-gradient(135deg,#3b82f6 0%,#60a5fa 100%)}.empty-state{padding:var(--space-16)var(--space-8);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-icon{width:64px;height:64px;color:var(--text-tertiary);margin-bottom:var(--space-4)}.empty-state h3{color:var(--text-primary);margin:0 0 var(--space-2)0;font-size:1.5rem;font-weight:600}.empty-state>p{color:var(--text-secondary);max-width:500px;margin:0 0 var(--space-6)0;font-size:1rem;line-height:1.6}.example-urls{margin-top:var(--space-6)}.example-label{color:var(--text-secondary);margin-bottom:var(--space-3);font-size:.875rem;font-weight:500}.example-btn{padding:var(--space-2)var(--space-4);margin:0 var(--space-2)var(--space-2)0;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;font-family:monospace;font-size:.875rem;transition:all .2s;display:inline-block}.example-btn:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}@media (max-width:968px){.redirect-summary,.tips-grid{grid-template-columns:1fr}.url-input-wrapper{flex-direction:column;align-items:stretch}.btn-check-redirect{justify-content:center;width:100%}}@media (max-width:640px){.result-actions{flex-direction:column}.btn-action{justify-content:center;width:100%}.chain-step,.step-meta{align-items:flex-start;gap:var(--space-2);flex-direction:column}.tip-card{flex-direction:column}}.sitemap-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}.base-url-input{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);background:#fff;flex:1;min-width:250px;max-width:500px;display:flex}.base-url-input svg{color:var(--color-primary);flex-shrink:0;width:18px;height:18px}.sitemap-base-url-field{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-size:.875rem}.sitemap-base-url-field::placeholder{color:var(--text-tertiary)}.control-buttons{gap:var(--space-2);flex-wrap:wrap;display:flex}.btn-sample,.btn-bulk-add,.btn-settings-toggle,.btn-clear-sitemap{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-bulk-add:hover,.btn-settings-toggle:hover,.btn-clear-sitemap:hover{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.btn-sample svg,.btn-bulk-add svg,.btn-settings-toggle svg,.btn-clear-sitemap svg{width:14px;height:14px}.bulk-add-panel{margin-top:var(--space-6);padding:var(--space-6);border-radius:var(--radius-lg);background:linear-gradient(135deg,#eff6ff 0%,#fff 100%);border:2px solid #3b82f6;overflow:hidden}.bulk-add-panel h3{align-items:center;gap:var(--space-2);color:var(--text-primary);margin-bottom:var(--space-3);font-size:1.125rem;font-weight:600;display:flex}.bulk-add-panel h3 svg{color:#3b82f6;width:20px;height:20px}.bulk-add-hint{color:var(--text-secondary);margin-bottom:var(--space-4);font-size:.875rem;line-height:1.6}.bulk-add-textarea{width:100%;padding:var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);resize:vertical;margin-bottom:var(--space-4);background:#fff;font-family:monospace;font-size:.875rem;line-height:1.6}.bulk-add-textarea:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.bulk-add-actions{gap:var(--space-3);display:flex}.btn-bulk-add-apply,.btn-bulk-add-cancel{align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-5);border-radius:var(--radius-md);cursor:pointer;border:none;font-size:.875rem;font-weight:600;transition:all .2s;display:flex}.btn-bulk-add-apply{color:#fff;background:#3b82f6}.btn-bulk-add-apply:hover{background:#2563eb}.btn-bulk-add-cancel{background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-primary)}.btn-bulk-add-cancel:hover{background:#fff}.sitemap-settings-panel{margin-top:var(--space-6);padding:var(--space-6);border:2px solid var(--color-primary);border-radius:var(--radius-lg);background:linear-gradient(135deg,#fff5f2 0%,#fff 100%);overflow:hidden}.sitemap-settings-panel h3{align-items:center;gap:var(--space-2);color:var(--text-primary);margin-bottom:var(--space-5);font-size:1.125rem;font-weight:600;display:flex}.sitemap-settings-panel h3 svg{color:var(--color-primary);width:20px;height:20px}.settings-checkboxes{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));display:grid}.setting-checkbox{align-items:center;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--border-primary);border-radius:var(--radius-md);background:#fff;display:flex}.setting-checkbox input[type=checkbox]{cursor:pointer;width:18px;height:18px;accent-color:var(--color-primary)}.setting-checkbox label{color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:.875rem}.sitemap-stats{gap:var(--space-4);margin-top:var(--space-6);padding:var(--space-4);border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;flex-wrap:wrap;display:flex}.sitemap-stats .stat-item{align-items:center;gap:var(--space-3);flex:1;min-width:150px;display:flex}.stat-icon{width:40px;height:40px;padding:var(--space-2);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-md);flex-shrink:0}.stat-icon.valid{background:linear-gradient(135deg,#10b981 0%,#34d399 100%)}.stat-icon.invalid{background:linear-gradient(135deg,#ef4444 0%,#f87171 100%)}.stat-content{gap:var(--space-1);flex-direction:column;display:flex}.sitemap-stats .stat-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;font-weight:500}.sitemap-stats .stat-value{color:var(--text-primary);font-family:monospace;font-size:1.5rem;font-weight:700}.sitemap-url-list{margin-top:var(--space-6)}.url-list-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}.url-list-header h3{align-items:center;gap:var(--space-2);color:var(--text-primary);margin:0;font-size:1.125rem;font-weight:600;display:flex}.url-list-header h3 svg{color:var(--color-primary);width:20px;height:20px}.btn-add-url{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-url:hover{background:linear-gradient(135deg,#e55a2a 0%,#e8841a 100%);transform:translateY(-1px)}.btn-add-url svg{width:14px;height:14px}.url-items{gap:var(--space-4);flex-direction:column;display:flex}.url-item{padding:var(--space-5);border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;transition:all .3s}.url-item:hover{border-color:var(--color-primary);box-shadow:0 2px 8px #ff6b351a}.url-item.invalid{background:#fffbeb;border-color:#fbbf24}.url-item-header{margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-primary);justify-content:space-between;align-items:center;display:flex}.url-number{color:var(--color-primary);font-family:monospace;font-size:.875rem;font-weight:700}.btn-remove-url{color:#dc2626;border-radius:var(--radius-md);cursor:pointer;background:#fee2e2;border:none;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.btn-remove-url:hover{background:#fecaca;transform:scale(1.1)}.btn-remove-url svg{width:14px;height:14px}.url-item-fields{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.url-field{gap:var(--space-2);flex-direction:column;display:flex}.url-field.full-width{grid-column:1/-1}.url-field label{align-items:center;gap:var(--space-2);color:var(--text-secondary);font-size:.875rem;font-weight:600;display:flex}.url-field label svg{width:14px;height:14px;color:var(--color-primary)}.required{color:#ef4444}.url-field input,.url-field select{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}.url-field input:focus,.url-field select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.invalid-input{background:#fffbeb!important;border-color:#fbbf24!important}.field-error{color:#dc2626;font-size:.75rem;font-weight:500}.sitemap-actions{gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap;justify-content:center;display:flex}.btn-generate-sitemap,.btn-download-sitemap,.btn-copy-sitemap{align-items:center;gap:var(--space-2);padding:var(--space-4)var(--space-8);border-radius:var(--radius-lg);cursor:pointer;border:none;font-size:1rem;font-weight:600;transition:all .3s;display:flex}.btn-generate-sitemap{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 12px #ff6b3533}.btn-generate-sitemap:hover:not(:disabled){background:linear-gradient(135deg,#e55a2a 0%,#e8841a 100%);transform:translateY(-2px);box-shadow:0 6px 16px #ff6b354d}.btn-generate-sitemap:disabled{background:var(--bg-secondary);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none}.btn-download-sitemap{color:#fff;background:linear-gradient(135deg,#10b981 0%,#34d399 100%);box-shadow:0 4px 12px #10b98133}.btn-download-sitemap:hover{background:linear-gradient(135deg,#059669 0%,#10b981 100%);transform:translateY(-2px);box-shadow:0 6px 16px #10b9814d}.btn-copy-sitemap{color:var(--text-secondary);border:2px solid var(--border-primary);background:#fff}.btn-copy-sitemap:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-generate-sitemap svg,.btn-download-sitemap svg,.btn-copy-sitemap svg{width:18px;height:18px}.xml-preview-section{margin-top:var(--space-6);padding:var(--space-6);border-radius:var(--radius-lg);background:#1e293b;border:2px solid #334155}.xml-preview-header{margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid #334155;justify-content:space-between;align-items:center;display:flex}.xml-preview-header h3{align-items:center;gap:var(--space-2);color:#f1f5f9;margin:0;font-size:1.125rem;font-weight:600;display:flex}.xml-preview-header h3 svg{color:#34d399;width:20px;height:20px}.btn-close-preview{color:#94a3b8;border-radius:var(--radius-md);cursor:pointer;background:0 0;border:1px solid #334155;width:32px;height:32px;font-size:1.25rem;transition:all .2s}.btn-close-preview:hover{color:#f1f5f9;background:#334155}.xml-preview-code{padding:var(--space-4);border-radius:var(--radius-md);background:#0f172a;margin:0;overflow-x:auto}.xml-preview-code code{color:#34d399;font-family:Courier New,monospace;font-size:.875rem;line-height:1.6}.sitemap-tips{margin-top:var(--space-8);padding:var(--space-6);background:var(--bg-secondary);border-radius:var(--radius-lg)}.tips-title{align-items:center;gap:var(--space-2);color:var(--text-primary);margin-bottom:var(--space-5);font-size:1.25rem;font-weight:600;display:flex}.tips-title svg{color:var(--color-primary);width:24px;height:24px}.tips-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));display:grid}.tip-card{gap:var(--space-4);padding:var(--space-5);border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;transition:all .3s;display:flex}.tip-card:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.tip-icon{background:var(--gradient-primary);border-radius:var(--radius-md);color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.tip-icon svg{width:24px;height:24px}.tip-content h4{color:var(--text-primary);margin:0 0 var(--space-2)0;font-size:1rem;font-weight:600}.tip-content p{color:var(--text-secondary);margin:0;font-size:.875rem;line-height:1.6}@media (max-width:968px){.sitemap-top-controls{flex-direction:column;align-items:stretch}.base-url-input{max-width:100%}.control-buttons{justify-content:center}.sitemap-stats{flex-direction:column}.tips-grid,.url-item-fields{grid-template-columns:1fr}.url-field.full-width{grid-column:1}.sitemap-actions{flex-direction:column}.btn-generate-sitemap,.btn-download-sitemap,.btn-copy-sitemap{justify-content:center;width:100%}}@media (max-width:640px){.control-buttons{flex-direction:column}.btn-sample,.btn-bulk-add,.btn-settings-toggle,.btn-clear-sitemap{justify-content:center;width:100%}.settings-checkboxes{grid-template-columns:1fr}.bulk-add-actions{flex-direction:column}.btn-bulk-add-apply,.btn-bulk-add-cancel{justify-content:center;width:100%}}.speed-test-input-section{gap:var(--space-3);margin-top:var(--space-6);padding:var(--space-5);border:2px solid var(--color-primary);border-radius:var(--radius-lg);background:linear-gradient(135deg,#fff5f2 0%,#fff 100%);flex-wrap:wrap;align-items:center;display:flex}.input-wrapper{border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;flex:1;align-items:center;min-width:300px;transition:all .2s;display:flex;position:relative}.input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #ff6b351a}.input-icon{left:var(--space-4);width:20px;height:20px;color:var(--color-primary);pointer-events:none;position:absolute}.speed-url-input{padding:var(--space-4)var(--space-4)var(--space-4)var(--space-12);color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-size:1rem}.speed-url-input::placeholder{color:var(--text-tertiary)}.speed-url-input:disabled{opacity:.6;cursor:not-allowed}.btn-test-speed{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-4)var(--space-8);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-lg);cursor:pointer;white-space:nowrap;border:none;font-size:1rem;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 12px #ff6b3533}.btn-test-speed:hover:not(:disabled){background:linear-gradient(135deg,#e55a2a 0%,#e8841a 100%);transform:translateY(-2px);box-shadow:0 6px 16px #ff6b354d}.btn-test-speed:disabled{background:var(--bg-secondary);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none;transform:none}.btn-test-speed svg{width:18px;height:18px}.error-message-box{align-items:center;gap:var(--space-3);margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius-lg);color:#dc2626;background:#fef2f2;border:1px solid #fecaca;font-size:.9375rem;display:flex}.error-message-box svg{flex-shrink:0;width:20px;height:20px}.speed-results-section{margin-top:var(--space-8);gap:var(--space-6);flex-direction:column;display:flex}.score-section{gap:var(--space-8);padding:var(--space-6);border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;align-items:center;display:flex}.score-circle-container{flex-shrink:0;width:200px;height:200px;position:relative}.score-circle{width:100%;height:100%;transform:rotate(-90deg)}.score-text{text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.score-value{color:var(--text-primary);font-size:3rem;font-weight:700;line-height:1}.score-grade{color:var(--text-secondary);margin-top:var(--space-2);font-size:1.125rem;font-weight:600}.score-info h3{color:var(--text-primary);margin-bottom:var(--space-2);font-size:1.5rem;font-weight:600}.score-info p{color:var(--text-secondary);font-size:1rem;line-height:1.6}.metrics-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.metric-card{gap:var(--space-4);padding:var(--space-5);border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;transition:all .3s;display:flex}.metric-card.good{background:linear-gradient(135deg,#ecfdf5 0%,#fff 100%);border-color:#10b981}.metric-card.warning{background:linear-gradient(135deg,#fffbeb 0%,#fff 100%);border-color:#f59e0b}.metric-card.poor{background:linear-gradient(135deg,#fef2f2 0%,#fff 100%);border-color:#ef4444}.metric-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.metric-card.good .metric-icon{color:#10b981;background:#dcfce7}.metric-card.warning .metric-icon{color:#f59e0b;background:#fef3c7}.metric-card.poor .metric-icon{color:#ef4444;background:#fee2e2}.metric-icon svg{width:24px;height:24px}.metric-content{flex:1}.metric-label{color:var(--text-secondary);margin-bottom:var(--space-1);font-size:.875rem}.metric-value{color:var(--text-primary);margin-bottom:var(--space-1);font-size:1.5rem;font-weight:700}.metric-hint{color:var(--text-tertiary);font-size:.75rem}.resource-breakdown{padding:var(--space-6);border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff}.resource-breakdown h3{color:var(--text-primary);margin-bottom:var(--space-5);font-size:1.25rem;font-weight:600}.resource-bars{gap:var(--space-4);flex-direction:column;display:flex}.resource-item{gap:var(--space-2);flex-direction:column;display:flex}.resource-label{align-items:center;gap:var(--space-2);color:var(--text-secondary);font-size:.875rem;font-weight:500;display:flex}.resource-label svg{width:16px;height:16px;color:var(--color-primary)}.resource-size{color:var(--text-primary);margin-left:auto;font-weight:600}.resource-bar{background:var(--bg-secondary);border-radius:6px;width:100%;height:12px;overflow:hidden}.resource-fill{border-radius:6px;height:100%;transition:width .6s}.resource-fill.images{background:linear-gradient(90deg,#3b82f6,#60a5fa)}.resource-fill.scripts{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}.resource-fill.styles{background:linear-gradient(90deg,#ec4899,#f472b6)}.recommendations-section{padding:var(--space-6);border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff}.recommendations-section h3{align-items:center;gap:var(--space-2);color:var(--text-primary);margin-bottom:var(--space-5);font-size:1.25rem;font-weight:600;display:flex}.recommendations-section h3 svg{color:var(--color-primary);width:22px;height:22px}.recommendations-list{gap:var(--space-3);flex-direction:column;display:flex}.recommendation-item{gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);border-left:4px solid;display:flex}.recommendation-item.critical{background:#fef2f2;border-color:#ef4444}.recommendation-item.warning{background:#fef3c7;border-color:#f59e0b}.recommendation-item.info{background:#eff6ff;border-color:#3b82f6}.rec-icon{flex-shrink:0;justify-content:center;align-items:flex-start;width:24px;height:24px;display:flex}.recommendation-item.critical .rec-icon{color:#ef4444}.recommendation-item.warning .rec-icon{color:#f59e0b}.recommendation-item.info .rec-icon{color:#3b82f6}.rec-icon svg{width:20px;height:20px}.rec-content{flex:1}.rec-content h4{margin-bottom:var(--space-1);font-size:1rem;font-weight:600}.recommendation-item.critical .rec-content h4{color:#991b1b}.recommendation-item.warning .rec-content h4{color:#92400e}.recommendation-item.info .rec-content h4{color:#1e40af}.rec-content p{margin:0;font-size:.875rem;line-height:1.6}.recommendation-item.critical .rec-content p{color:#dc2626}.recommendation-item.warning .rec-content p{color:#d97706}.recommendation-item.info .rec-content p{color:#2563eb}.test-again-section{padding:var(--space-4);justify-content:center;display:flex}.btn-test-again{align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-6);border:2px solid var(--color-primary);border-radius:var(--radius-lg);color:var(--color-primary);cursor:pointer;background:#fff;font-size:1rem;font-weight:600;transition:all .3s;display:flex}.btn-test-again:hover{background:var(--color-primary);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #ff6b3533}.btn-test-again svg{width:18px;height:18px}.how-it-works{margin-top:var(--space-8);padding:var(--space-6);border-radius:var(--radius-lg);background:linear-gradient(135deg,#f0f9ff 0%,#fff 100%);border:2px solid #bfdbfe}.how-it-works h3{color:var(--text-primary);margin-bottom:var(--space-6);text-align:center;font-size:1.5rem;font-weight:600}.steps-grid{gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.step-item{text-align:center;padding:var(--space-4);flex-direction:column;align-items:center;display:flex}.step-number{background:var(--gradient-primary);color:#fff;width:48px;height:48px;margin-bottom:var(--space-3);border-radius:50%;justify-content:center;align-items:center;font-size:1.5rem;font-weight:700;display:flex}.step-item h4{color:var(--text-primary);margin-bottom:var(--space-2);font-size:1.125rem;font-weight:600}.step-item p{color:var(--text-secondary);margin:0;font-size:.875rem;line-height:1.6}@media (max-width:968px){.speed-test-input-section{flex-direction:column}.input-wrapper,.btn-test-speed{width:100%}.score-section{text-align:center;flex-direction:column}.metrics-grid,.steps-grid{grid-template-columns:1fr}}@media (max-width:640px){.speed-url-input{padding:var(--space-3)var(--space-3)var(--space-3)var(--space-10);font-size:.875rem}.score-circle-container{width:150px;height:150px}.score-value{font-size:2.5rem}.metric-card{text-align:center;flex-direction:column}.metric-icon{align-self:center}}.hash-workspace{gap:var(--space-6);grid-template-columns:1fr 1fr;display:grid}.hash-warning-box{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);margin-bottom:var(--space-6);background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);border:2px solid #fbbf24;display:flex}.hash-warning-box svg{color:#d97706;flex-shrink:0;width:20px;height:20px;margin-top:2px}.warning-content{font-size:var(--font-sm);color:#78350f;line-height:1.5}.warning-content strong{color:#92400e;font-weight:700}.hash-input-panel{gap:var(--space-5);flex-direction:column;display:flex}.hash-controls{padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-primary);justify-content:space-between;align-items:center;display:flex}.controls-left,.controls-right{gap:var(--space-2);display:flex}.btn-toggle-input,.btn-sample-hash,.btn-clear-hash{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-toggle-input:hover,.btn-sample-hash:hover,.btn-clear-hash:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-toggle-input svg,.btn-clear-hash svg{width:16px;height:16px}.input-section{padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.section-header{margin-bottom:var(--space-3);justify-content:space-between;align-items:center;display:flex}.char-count{font-size:var(--font-xs);color:var(--text-tertiary);font-family:Courier New,monospace;font-weight:600}.hash-input-area{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:all var(--transition-base);font-family:Courier New,monospace}.hash-input-area:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.hash-input-area.obscured{-webkit-text-security:disc;text-security:disc}.hmac-section{padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.hmac-toggle{align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--font-sm);color:var(--text-primary);font-weight:600;display:flex}.hmac-toggle input[type=checkbox]{cursor:pointer;width:18px;height:18px;accent-color:var(--color-primary)}.hmac-toggle span{align-items:center;gap:var(--space-2);display:flex}.hmac-toggle svg{width:16px;height:16px;color:var(--color-primary)}.hmac-key-input{margin-top:var(--space-3);overflow:hidden}.hmac-key-field{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);transition:all var(--transition-base);font-family:Courier New,monospace}.hmac-key-field:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.hmac-hint{margin-top:var(--space-2);font-size:var(--font-xs);color:var(--text-tertiary);display:block}.algorithm-section{padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.algorithm-section h3{align-items:center;gap:var(--space-2);font-size:var(--font-base);color:var(--text-primary);margin:0 0 var(--space-4)0;font-weight:700;display:flex}.algorithm-section h3 svg{width:18px;height:18px;color:var(--color-primary)}.algorithm-grid{gap:var(--space-2);flex-direction:column;display:flex}.algorithm-btn{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;position:relative}.algorithm-btn:hover{border-color:var(--color-primary);transform:translate(4px)}.algorithm-btn.active{border-color:var(--color-primary);background:var(--color-primary-light)}.algorithm-btn.insecure{border-color:#fbbf24}.algorithm-btn.insecure.active{background:#fffbeb;border-color:#f59e0b}.algo-icon{flex-shrink:0;font-size:24px}.algo-info{text-align:left;flex:1}.algo-name{font-size:var(--font-sm);color:var(--text-primary);margin-bottom:var(--space-1);font-weight:700}.algo-desc{font-size:var(--font-xs);color:var(--text-tertiary)}.algo-check{width:20px;height:20px;color:var(--color-primary)}.hash-results-panel{gap:var(--space-4);flex-direction:column;display:flex}.results-header h3 svg{width:18px;height:18px;color:var(--color-primary)}.results-count{font-size:var(--font-xs);color:var(--text-tertiary);padding:var(--space-1)var(--space-3);background:var(--bg-primary);border-radius:var(--radius-full);font-weight:600}.empty-results{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-results p{font-size:var(--font-base);color:var(--text-secondary);margin:0 0 var(--space-1)0;font-weight:600}.empty-results small{font-size:var(--font-sm);color:var(--text-tertiary)}.hash-results-list{gap:var(--space-3);flex-direction:column;display:flex}.hash-result-card{padding:var(--space-4);background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);transition:all var(--transition-base)}.hash-result-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}.result-header{margin-bottom:var(--space-3)}.result-algorithm{align-items:center;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-primary);font-family:Courier New,monospace;font-weight:700;display:flex}.hmac-badge{padding:var(--space-1)var(--space-2);color:#fff;font-size:var(--font-xs);border-radius:var(--radius-sm);background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%);font-weight:700}.result-length{font-size:var(--font-xs);color:var(--text-tertiary);font-family:Courier New,monospace;font-weight:600}.result-hash-container{padding:var(--space-3);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);margin-bottom:var(--space-3);overflow-x:auto}.result-hash{font-size:var(--font-sm);color:var(--color-primary);word-break:break-all;font-family:Courier New,monospace;display:block}.result-actions{gap:var(--space-2);display:flex}.btn-copy-hash{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-3);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-md);font-size:var(--font-xs);cursor:pointer;transition:all var(--transition-base);border:none;flex:1;font-weight:600;display:flex}.btn-copy-hash:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-copy-hash.secondary{background:var(--bg-primary);color:var(--text-secondary);border:2px solid var(--border-primary)}.btn-copy-hash.secondary:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-copy-hash svg{width:14px;height:14px}.hash-info-section{padding:var(--space-6);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);margin-top:var(--space-6)}.hash-info-section h3{font-size:var(--font-xl);color:var(--text-primary);margin:0 0 var(--space-5)0;text-align:center;font-weight:700}.info-card strong{color:var(--text-primary);font-weight:600}@media (max-width:1024px){.hash-workspace{grid-template-columns:1fr}}@media (max-width:640px){.hash-controls{flex-direction:column;align-items:stretch}.controls-left,.controls-right{justify-content:space-between;width:100%}.info-grid{grid-template-columns:1fr}.result-actions{flex-direction:column}}.base64-mode-section{gap:var(--space-4);margin-bottom:var(--space-6);flex-direction:column;display:flex}.mode-switcher{align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);display:flex}.mode-btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-5);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:1;font-weight:600;display:flex}.mode-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.mode-btn.active{background:var(--gradient-primary);color:#fff;border-color:var(--color-primary)}.mode-btn svg{width:18px;height:18px}.mode-switch-icon{background:var(--bg-primary);border:2px solid var(--border-primary);width:40px;height:40px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.mode-switch-icon:hover{border-color:var(--color-primary);color:var(--color-primary);transform:rotate(180deg)}.mode-switch-icon svg{width:18px;height:18px}.input-type-selector{gap:var(--space-2);padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);display:flex}.type-btn{justify-content:center;align-items:center;gap:var(--space-2);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);flex:1;font-weight:600;display:flex}.type-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.type-btn.active{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary)}.type-btn svg{width:16px;height:16px}.base64-workspace{gap:var(--space-6);grid-template-columns:1fr 1fr;display:grid}.base64-input-section,.base64-output-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-base);color:var(--text-primary);margin:0;font-weight:700;display:flex}.section-header h3 svg{width:18px;height:18px;color:var(--color-primary)}.header-actions{gap:var(--space-2);display:flex}.btn-sample-base64,.btn-clear-base64{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-xs);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);font-weight:600;display:flex}.btn-sample-base64:hover,.btn-clear-base64:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-clear-base64 svg{width:14px;height:14px}.file-upload-section{gap:var(--space-4);flex-direction:column;display:flex}.file-input-hidden{display:none}.file-upload-area{padding:var(--space-10);background:var(--bg-secondary);border:2px dashed var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.file-upload-area:hover{border-color:var(--color-primary);background:var(--color-primary-light)}.file-upload-area h4{font-size:var(--font-base);color:var(--text-primary);margin:0 0 var(--space-1)0;font-weight:600}.file-upload-area p{font-size:var(--font-sm);color:var(--text-tertiary);margin:0}.selected-file-info{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);display:flex}.file-icon{background:var(--color-primary-light);border-radius:var(--radius-md);width:48px;height:48px;color:var(--color-primary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.btn-remove-file{background:var(--bg-primary);border:2px solid var(--border-primary);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);border-radius:50%;justify-content:center;align-items:center;display:flex}.file-preview{padding:var(--space-4);background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-lg)}.file-preview img{border-radius:var(--radius-md);max-width:100%;height:auto;display:block}.base64-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-sm);color:var(--text-primary);resize:vertical;transition:all var(--transition-base);font-family:Courier New,monospace;line-height:1.6}.base64-input-area:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.error-message{align-items:center;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);color:#dc2626;font-size:var(--font-sm);background:#fef2f2;border:2px solid #fecaca;display:flex}.error-message svg{flex-shrink:0;width:16px;height:16px}.char-count-display{font-size:var(--font-xs);color:var(--text-tertiary);text-align:right;font-family:Courier New,monospace}.btn-process-base64,.btn-decode-file{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-5);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-lg);font-size:var(--font-base);cursor:pointer;transition:all var(--transition-base);border:none;font-weight:700;display:flex}.btn-process-base64:hover:not(:disabled),.btn-decode-file:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-process-base64:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-decode-file{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%)}.btn-process-base64 svg,.btn-decode-file svg{width:18px;height:18px}.btn-copy-base64,.btn-download-base64{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-xs);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);font-weight:600;display:flex}.btn-copy-base64:hover,.btn-download-base64:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-copy-base64 svg,.btn-download-base64 svg{width:14px;height:14px}.empty-output{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;min-height:300px;display:flex}.empty-icon{width:48px;height:48px;color:var(--text-tertiary);margin-bottom:var(--space-3);opacity:.5}.empty-output p{font-size:var(--font-base);color:var(--text-secondary);margin:0 0 var(--space-1)0;font-weight:600}.empty-output small{font-size:var(--font-sm);color:var(--text-tertiary)}.base64-output-display{padding:var(--space-4);background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);max-height:400px;overflow-y:auto}.base64-output-display pre{white-space:pre-wrap;word-break:break-all;margin:0}.base64-output-display code{font-size:var(--font-sm);color:var(--color-primary);font-family:Courier New,monospace;line-height:1.6}.output-stats{align-items:center;gap:var(--space-2);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-primary);font-size:var(--font-xs);color:var(--text-tertiary);font-family:Courier New,monospace;display:flex}.base64-info-section{padding:var(--space-6);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);margin-top:var(--space-6)}.base64-info-section h3{font-size:var(--font-xl);color:var(--text-primary);margin:0 0 var(--space-5)0;text-align:center;font-weight:700}.info-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.info-card{padding:var(--space-4);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);transition:all var(--transition-base)}.info-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.info-card h4{font-size:var(--font-base);color:var(--text-primary);margin:0 0 var(--space-2)0;font-weight:700}.info-card p{font-size:var(--font-sm);color:var(--text-secondary);margin:0;line-height:1.6}.info-card code{font-size:var(--font-xs);background:var(--bg-secondary);padding:var(--space-1)var(--space-2);border-radius:var(--radius-sm);color:var(--color-primary);word-break:break-all;margin-top:var(--space-2);font-family:Courier New,monospace;display:inline-block}@media (max-width:1024px){.base64-workspace{grid-template-columns:1fr}}@media (max-width:640px){.mode-switcher{flex-direction:column}.mode-switch-icon{transform:rotate(90deg)}.header-actions{flex-direction:column;width:100%}.btn-sample-base64,.btn-clear-base64{justify-content:center;width:100%}.info-grid{grid-template-columns:1fr}}.jwt-input-section{margin-top:var(--space-6);padding:var(--space-6);border:2px solid var(--color-primary);border-radius:var(--radius-lg);background:linear-gradient(135deg,#fff5f2 0%,#fff 100%)}.input-header{margin-bottom:var(--space-4);justify-content:space-between;align-items:center;display:flex}.input-header h3{align-items:center;gap:var(--space-2);color:var(--text-primary);margin:0;font-size:1.125rem;font-weight:600;display:flex}.input-header h3 svg{color:var(--color-primary);width:20px;height:20px}.input-actions{gap:var(--space-2);display:flex}.btn-sample-jwt,.btn-clear-jwt{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-jwt:hover,.btn-clear-jwt:hover{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.btn-clear-jwt svg{width:14px;height:14px}.jwt-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:#fff;min-height:120px;font-family:Monaco,Courier New,monospace;font-size:.875rem;line-height:1.6;transition:all .3s}.jwt-input-area:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.jwt-input-area::placeholder{color:var(--text-tertiary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.jwt-info-hint{align-items:center;gap:var(--space-2);margin-top:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);color:#1e40af;background:#eff6ff;border:1px solid #bfdbfe;font-size:.8125rem;display:flex}.jwt-info-hint svg{flex-shrink:0;width:16px;height:16px}.jwt-error-box{align-items:center;gap:var(--space-3);margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius-lg);color:#dc2626;background:#fef2f2;border:1px solid #fecaca;font-size:.9375rem;display:flex}.jwt-error-box svg{flex-shrink:0;width:20px;height:20px}.jwt-decoded-section{margin-top:var(--space-8);gap:var(--space-6);flex-direction:column;display:flex}.jwt-status-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));display:grid}.status-card{gap:var(--space-4);padding:var(--space-5);border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff;transition:all .3s;display:flex}.status-card.valid{background:linear-gradient(135deg,#ecfdf5 0%,#fff 100%);border-color:#10b981}.status-card.invalid{background:linear-gradient(135deg,#fef2f2 0%,#fff 100%);border-color:#ef4444}.status-card.active{background:linear-gradient(135deg,#ecfdf5 0%,#fff 100%);border-color:#10b981}.status-card.expired{background:linear-gradient(135deg,#fef3c7 0%,#fff 100%);border-color:#f59e0b}.status-card.info{background:linear-gradient(135deg,#eff6ff 0%,#fff 100%);border-color:#3b82f6}.status-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.status-card.valid .status-icon,.status-card.active .status-icon{color:#10b981;background:#dcfce7}.status-card.invalid .status-icon{color:#ef4444;background:#fee2e2}.status-card.expired .status-icon{color:#f59e0b;background:#fef3c7}.status-card.info .status-icon{color:#3b82f6;background:#dbeafe}.status-icon svg{width:24px;height:24px}.status-content{flex:1}.status-label{color:var(--text-secondary);margin-bottom:var(--space-1);font-size:.875rem}.status-value{color:var(--text-primary);font-size:1.25rem;font-weight:700}.jwt-tabs{gap:var(--space-2);padding:var(--space-2);background:var(--bg-secondary);border-radius:var(--radius-lg);display:flex;overflow-x:auto}.jwt-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}.jwt-tab svg{width:16px;height:16px}.jwt-tab:hover{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.jwt-tab.active{background:var(--gradient-primary);border-color:var(--color-primary);color:#fff}.jwt-tab.active svg{color:#fff}.jwt-tab-content{border:2px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-6);background:#fff}.jwt-section{gap:var(--space-4);flex-direction:column;display:flex}.section-header{padding-bottom:var(--space-3);border-bottom:2px solid var(--border-primary);justify-content:space-between;align-items:center;display:flex}.section-header h4{color:var(--text-primary);margin:0;font-size:1.125rem;font-weight:600}.btn-copy-section{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-section:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff6b3533}.btn-copy-section svg{width:14px;height:14px}.json-display{padding:var(--space-4);border-radius:var(--radius-lg);background:#1e293b;margin:0;overflow-x:auto}.json-display code{color:#e2e8f0;white-space:pre;font-family:Monaco,Courier New,monospace;font-size:.875rem;line-height:1.6}.field-descriptions{padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-md)}.field-descriptions h5{color:var(--text-primary);margin-bottom:var(--space-3);font-size:.9375rem;font-weight:600}.field-item{color:var(--text-secondary);margin-bottom:var(--space-2);font-size:.875rem;line-height:1.6}.field-item:last-child{margin-bottom:0}.field-item strong{color:var(--color-primary);font-family:monospace;font-weight:600}.signature-display{padding:var(--space-4);border-radius:var(--radius-lg);word-break:break-all;background:#1e293b;overflow-x:auto}.signature-display code{color:#e2e8f0;font-family:Monaco,Courier New,monospace;font-size:.875rem;line-height:1.8}.signature-info{gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);background:#eff6ff;border:1px solid #bfdbfe;display:flex}.signature-info>svg{color:#3b82f6;flex-shrink:0;width:20px;height:20px;margin-top:2px}.signature-info strong{color:#1e40af;margin-bottom:var(--space-2);font-size:.9375rem;display:block}.signature-info p{color:#2563eb;margin:0 0 var(--space-2)0;font-size:.875rem;line-height:1.6}.signature-info p:last-child{margin-bottom:0}.signature-info .warning{align-items:flex-start;gap:var(--space-2);margin-top:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);color:#92400e;background:#fef3c7;border:1px solid #fde68a;display:flex}.signature-info .warning svg{color:#f59e0b;flex-shrink:0;width:16px;height:16px;margin-top:2px}.jwt-visualization{padding:var(--space-6);border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff}.jwt-visualization h4{color:var(--text-primary);margin-bottom:var(--space-4);font-size:1.125rem;font-weight:600}.token-parts{padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-lg);align-items:center;gap:0;display:flex;overflow-x:auto}.token-part{min-width:150px;padding:var(--space-4);border-radius:var(--radius-md);text-align:center;flex:1}.token-part.header{background:#fef2f2;border:2px solid #fecaca}.token-part.payload{background:#dcfce7;border:2px solid #86efac}.token-part.signature{background:#dbeafe;border:2px solid #93c5fd}.part-label{text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-2);font-size:.75rem;font-weight:600}.token-part.header .part-label{color:#dc2626}.token-part.payload .part-label{color:#15803d}.token-part.signature .part-label{color:#2563eb}.part-content{color:var(--text-secondary);word-break:break-all;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-family:monospace;font-size:.75rem;display:-webkit-box;overflow:hidden}.token-separator{color:var(--text-tertiary);padding:0 var(--space-2);font-size:1.5rem;font-weight:700}.jwt-how-it-works{margin-top:var(--space-8);padding:var(--space-6);border-radius:var(--radius-lg);background:linear-gradient(135deg,#f0f9ff 0%,#fff 100%);border:2px solid #bfdbfe}.jwt-how-it-works h3{color:var(--text-primary);margin-bottom:var(--space-3);font-size:1.5rem;font-weight:600}.jwt-how-it-works>p{color:var(--text-secondary);margin-bottom:var(--space-6);font-size:1rem;line-height:1.7}.jwt-features-grid{gap:var(--space-4);margin-bottom:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));display:grid}.feature-card{padding:var(--space-5);border:1px solid var(--border-primary);border-radius:var(--radius-lg);text-align:center;background:#fff}.feature-icon{width:56px;height:56px;margin:0 auto var(--space-3);background:var(--gradient-primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;display:flex}.feature-icon svg{width:28px;height:28px}.feature-card h4{color:var(--text-primary);margin-bottom:var(--space-2);font-size:1.125rem;font-weight:600}.feature-card p{color:var(--text-secondary);margin:0;font-size:.875rem;line-height:1.6}.jwt-use-cases{padding:var(--space-5);border:1px solid var(--border-primary);border-radius:var(--radius-lg);background:#fff}.jwt-use-cases h4{color:var(--text-primary);margin-bottom:var(--space-3);font-size:1.125rem;font-weight:600}.jwt-use-cases ul{padding-left:var(--space-6);margin:0;list-style:outside}.jwt-use-cases li{color:var(--text-secondary);margin-bottom:var(--space-2);font-size:.9375rem;line-height:1.8}.jwt-use-cases li:last-child{margin-bottom:0}.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){.input-header{align-items:stretch;gap:var(--space-3);flex-direction:column}.input-actions{justify-content:stretch}.btn-sample-jwt,.btn-clear-jwt{flex:1;justify-content:center}.jwt-status-grid{grid-template-columns:1fr}.jwt-tabs{scrollbar-width:thin;overflow-x:scroll}.section-header{gap:var(--space-3);flex-direction:column;align-items:stretch}.btn-copy-section{justify-content:center;width:100%}.token-parts{flex-direction:column}.token-separator{margin:var(--space-2)0;transform:rotate(90deg)}.token-part{width:100%}}@media (max-width:640px){.jwt-input-area{font-size:.75rem}.status-card{text-align:center;flex-direction:column}.status-icon{align-self:center}.jwt-features-grid{grid-template-columns:1fr}}.heic-info-card{margin-bottom:var(--space-6);padding:var(--space-5);border-radius:var(--radius-lg);background:linear-gradient(135deg,#faf5ff 0%,#f3e8ff 100%);border:2px solid #e9d5ff}.heic-info-header{align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);display:flex}.heic-info-header h4{font-size:var(--font-lg);color:var(--text-primary);margin:0;font-weight:700}.apple-icon{color:#a855f7;width:28px;height:28px}.heic-info-content{gap:var(--space-3);flex-direction:column;display:flex}.heic-info-item{align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);background:#fff;display:flex}.heic-info-item .info-icon{width:20px;height:20px;color:var(--color-primary);flex-shrink:0}.heic-info-item span{font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;line-height:1.5}.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)}.format-btn{justify-content:center;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-md);font-size:var(--font-base);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);flex-direction:column;flex:1;font-weight:600;display:flex;position:relative}.format-btn .format-hint{font-size:var(--font-xs);color:var(--text-tertiary);opacity:.8;font-weight:500}.format-btn:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px)}.format-btn:hover .format-hint{color:var(--color-primary)}.format-btn.active{background:var(--gradient-primary);border-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-md)}.format-btn.active .format-hint{color:#ffffffe6;opacity:1}.preview-placeholder{justify-content:center;align-items:center;gap:var(--space-2);border-radius:var(--radius-md);background:linear-gradient(135deg,#f3f4f6 0%,#e5e7eb 100%);flex-direction:column;width:100%;height:100%;display:flex}.preview-placeholder svg{width:48px;height:48px;color:var(--text-tertiary)}.preview-placeholder span{font-size:var(--font-sm);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.1em;font-weight:700}.format-badge.heic{color:#fff;background:linear-gradient(135deg,#a855f7 0%,#9333ea 100%)}.conversion-badge.heic-conversion{color:#fff;font-size:var(--font-xs);padding:var(--space-1)var(--space-3);background:linear-gradient(135deg,#a855f7 0%,#10b981 100%);font-weight:700}@media (max-width:640px){.heic-info-content{gap:var(--space-2)}.heic-info-item{text-align:center;flex-direction:column}}.converter-mode-section{gap:var(--space-4);margin-bottom:var(--space-6);flex-direction:column;display:flex}.conversion-options{gap:var(--space-6);padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);flex-wrap:wrap;display:flex}.option-group{align-items:center;gap:var(--space-2);display:flex}.option-group label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;font-weight:600}.option-select{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;transition:all var(--transition-base)}.option-select:focus{border-color:var(--color-primary);outline:none}.checkbox-label{align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--font-sm);color:var(--text-primary);font-weight:600;display:flex}.checkbox-label input[type=checkbox]{cursor:pointer;width:18px;height:18px;accent-color:var(--color-primary)}.converter-workspace{gap:var(--space-6);grid-template-columns:1fr 1fr;display:grid}.converter-input-section,.converter-output-section{gap:var(--space-4);flex-direction:column;display:flex}.btn-sample-converter,.btn-clear-converter{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-xs);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);font-weight:600;display:flex}.btn-sample-converter:hover,.btn-clear-converter:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-clear-converter svg{width:14px;height:14px}.converter-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-sm);color:var(--text-primary);resize:vertical;transition:all var(--transition-base);font-family:Courier New,monospace;line-height:1.6}.converter-input-area:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.input-stats,.output-stats{align-items:center;gap:var(--space-2);font-size:var(--font-xs);color:var(--text-tertiary);font-family:Courier New,monospace;display:flex}.btn-convert{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-5);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-lg);font-size:var(--font-base);cursor:pointer;transition:all var(--transition-base);border:none;font-weight:700;display:flex}.btn-convert:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-convert:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-convert svg{width:18px;height:18px}.output-actions{gap:var(--space-2);display:flex}.btn-copy-converter,.btn-download-converter{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-xs);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);font-weight:600;display:flex}.btn-copy-converter:hover,.btn-download-converter:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-copy-converter svg,.btn-download-converter svg{width:14px;height:14px}.converter-output-display{padding:var(--space-4);background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);max-height:400px;overflow-y:auto}.converter-output-display pre{white-space:pre-wrap;word-break:break-all;margin:0}.converter-output-display code{font-size:var(--font-sm);color:var(--text-primary);font-family:Courier New,monospace;line-height:1.6}.preview-section{padding:var(--space-4);background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-lg)}.preview-section h4{font-size:var(--font-sm);color:var(--text-primary);margin:0 0 var(--space-3)0;font-weight:700}.preview-table-container{border-radius:var(--radius-md);border:1px solid var(--border-primary);overflow-x:auto}.preview-table{border-collapse:collapse;width:100%;font-size:var(--font-xs);font-family:Courier New,monospace}.preview-table tbody tr{border-bottom:1px solid var(--border-primary)}.preview-table tbody tr:last-child{border-bottom:none}.preview-table tbody tr:hover{background:var(--color-primary-light)}.preview-table td{padding:var(--space-2)var(--space-3);color:var(--text-primary);white-space:nowrap}.preview-table tbody tr:first-child td{background:var(--bg-primary);font-weight:700}.preview-json{padding:var(--space-3);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);max-height:300px;overflow-y:auto}.preview-json pre{margin:0}.preview-json code{font-size:var(--font-xs);color:var(--color-primary);font-family:Courier New,monospace;line-height:1.6}.converter-info-section{padding:var(--space-6);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);margin-top:var(--space-6)}.converter-info-section h3{font-size:var(--font-xl);color:var(--text-primary);margin:0 0 var(--space-5)0;text-align:center;font-weight:700}@media (max-width:1024px){.converter-workspace{grid-template-columns:1fr}}@media (max-width:640px){.conversion-options,.option-group{flex-direction:column;align-items:stretch}.option-select{width:100%}}.current-timestamp-section{margin-bottom:var(--space-6)}.current-timestamp-card{align-items:center;gap:var(--space-4);padding:var(--space-5);border-radius:var(--radius-lg);background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);border:2px solid #93c5fd;display:flex}.timestamp-icon{color:#fff;border-radius:var(--radius-md);background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);flex-shrink:0;justify-content:center;align-items:center;width:60px;height:60px;display:flex}.timestamp-icon svg{width:32px;height:32px}.timestamp-info{flex:1}.timestamp-label{font-size:var(--font-sm);color:#1e40af;margin-bottom:var(--space-1);font-weight:600}.timestamp-value{font-size:var(--font-2xl);color:#1e3a8a;margin-bottom:var(--space-1);font-family:Courier New,monospace;font-weight:700}.timestamp-date{font-size:var(--font-sm);color:#3b82f6}.btn-copy-current{border-radius:var(--radius-md);color:#3b82f6;cursor:pointer;width:44px;height:44px;transition:all var(--transition-base);background:#fff;border:2px solid #93c5fd;justify-content:center;align-items:center;display:flex}.btn-copy-current:hover{border-color:#3b82f6;transform:scale(1.1)}.btn-copy-current svg{width:20px;height:20px}.timestamp-mode-section{margin-bottom:var(--space-6)}.timestamp-workspace{gap:var(--space-6);grid-template-columns:1fr 1fr;display:grid}.timestamp-input-section{gap:var(--space-4);flex-direction:column;display:flex}.unit-selector{gap:var(--space-2);padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);display:flex}.unit-btn{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);flex:1;font-weight:600}.unit-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.unit-btn.active{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary)}.timestamp-input{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-lg);color:var(--text-primary);text-align:center;transition:all var(--transition-base);font-family:Courier New,monospace}.timestamp-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.date-time-inputs{gap:var(--space-4);padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);flex-direction:column;display:flex}.input-group{gap:var(--space-2);flex-direction:column;display:flex}.input-group label{font-size:var(--font-sm);color:var(--text-secondary);font-weight:600}.date-input,.time-input{padding:var(--space-3);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-base);color:var(--text-primary);cursor:pointer;transition:all var(--transition-base)}.date-input:focus,.time-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.btn-use-current{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--bg-secondary);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-use-current:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-use-current svg{width:16px;height:16px}.btn-convert-timestamp{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-5);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-lg);font-size:var(--font-base);cursor:pointer;transition:all var(--transition-base);border:none;font-weight:700;display:flex}.btn-convert-timestamp:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-convert-timestamp:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-convert-timestamp svg{width:18px;height:18px}.timestamp-results-section{gap:var(--space-4);flex-direction:column;display:flex}.btn-clear-timestamp{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-xs);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);font-weight:600;display:flex}.btn-clear-timestamp:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-clear-timestamp svg{width:14px;height:14px}.results-list{gap:var(--space-3);flex-direction:column;display:flex}.result-item{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);transition:all var(--transition-base);display:flex}.result-item:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.result-item.highlight{background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);border-color:#86efac}.result-content{flex:1}.result-label{font-size:var(--font-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-1);font-weight:700}.result-value{font-size:var(--font-base);color:var(--text-primary);margin-bottom:var(--space-1);word-break:break-all;font-family:Courier New,monospace;font-weight:600}.result-description{font-size:var(--font-xs);color:var(--text-tertiary)}.btn-copy-result{background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);flex-shrink:0;justify-content:center;align-items:center;display:flex}.btn-copy-result:hover{border-color:var(--color-primary);color:var(--color-primary);transform:scale(1.1)}.btn-copy-result svg{width:16px;height:16px}.result-breakdown{padding:var(--space-4);background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);margin-top:var(--space-3)}.result-breakdown h4{font-size:var(--font-sm);color:var(--text-primary);margin:0 0 var(--space-3)0;font-weight:700}.breakdown-grid{gap:var(--space-3);grid-template-columns:repeat(2,1fr);display:grid}.breakdown-item{padding:var(--space-2);background:var(--bg-primary);border-radius:var(--radius-sm);justify-content:space-between;align-items:center;display:flex}.breakdown-label{font-size:var(--font-xs);color:var(--text-secondary);font-weight:600}.breakdown-value{font-size:var(--font-xs);color:var(--text-primary);font-family:Courier New,monospace;font-weight:700}.timestamp-info-section{padding:var(--space-6);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);margin-top:var(--space-6)}.timestamp-info-section h3{font-size:var(--font-xl);color:var(--text-primary);margin:0 0 var(--space-5)0;text-align:center;font-weight:700}@media (max-width:1024px){.timestamp-workspace{grid-template-columns:1fr}}@media (max-width:640px){.current-timestamp-card{text-align:center;flex-direction:column}.breakdown-grid{grid-template-columns:1fr}.timestamp-value{font-size:var(--font-lg)}}.pdf-options-section{gap:var(--space-6);padding:var(--space-5);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);margin-bottom:var(--space-6);flex-wrap:wrap;display:flex}.option-group{flex:1;min-width:250px}.option-group>label{font-size:var(--font-sm);color:var(--text-primary);margin-bottom:var(--space-3);font-weight:700;display:block}.format-selector,.quality-selector{gap:var(--space-2);display:flex}.format-btn,.quality-btn{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:1;font-weight:600}.format-btn:hover,.quality-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.format-btn.active,.quality-btn.active{background:var(--gradient-primary);color:#fff;border-color:var(--color-primary)}.pdf-upload-section{margin-bottom:var(--space-6)}.pdf-upload-area{padding:var(--space-12);background:var(--bg-secondary);border:3px dashed var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.pdf-upload-area:hover{border-color:var(--color-primary);background:var(--color-primary-light)}.upload-icon{width:64px;height:64px;margin-bottom:var(--space-4)}.pdf-upload-area h3{font-size:var(--font-xl);color:var(--text-primary);margin:0 0 var(--space-2)0;font-weight:700}.pdf-upload-area p{font-size:var(--font-base);color:var(--text-secondary);margin:0 0 var(--space-3)0}.pdf-upload-area small{font-size:var(--font-sm);color:var(--text-tertiary)}.pdf-file-info{gap:var(--space-4);margin-bottom:var(--space-6);flex-direction:column;display:flex}.file-info-card{align-items:center;gap:var(--space-4);padding:var(--space-5);background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);display:flex}.file-icon{color:#fff;border-radius:var(--radius-md);background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;display:flex}.file-icon svg{width:28px;height:28px}.file-details{flex:1}.file-name{font-size:var(--font-base);color:var(--text-primary);margin-bottom:var(--space-1);font-weight:700}.file-size{font-size:var(--font-sm);color:var(--text-tertiary);font-family:Courier New,monospace}.btn-remove-file{background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);width:44px;height:44px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);justify-content:center;align-items:center;display:flex}.btn-remove-file:hover{color:#ef4444;border-color:#ef4444}.btn-remove-file svg{width:20px;height:20px}.btn-convert-pdf{justify-content:center;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-4)var(--space-6);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-lg);font-size:var(--font-lg);cursor:pointer;transition:all var(--transition-base);border:none;font-weight:700;display:flex}.btn-convert-pdf:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-convert-pdf svg{width:24px;height:24px}.conversion-progress{padding:var(--space-6);border-radius:var(--radius-lg);margin-bottom:var(--space-6);background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);border:2px solid #93c5fd}.progress-info{align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);display:flex}.progress-icon{color:#3b82f6;width:40px;height:40px}.progress-icon.spinning{animation:1s linear infinite spin}.progress-text{flex:1}.progress-label{font-size:var(--font-base);color:#1e40af;margin-bottom:var(--space-1);font-weight:700}.progress-pages{font-size:var(--font-sm);color:#3b82f6;font-family:Courier New,monospace}.progress-bar{border-radius:var(--radius-full);background:#bfdbfe;height:8px;overflow:hidden}.progress-fill{border-radius:var(--radius-full);background:linear-gradient(90deg,#3b82f6 0%,#2563eb 100%);height:100%;transition:width .3s}.converted-images-section{gap:var(--space-5);flex-direction:column;display:flex}.results-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}.results-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}.results-header h3 svg{color:#10b981;width:22px;height:22px}.btn-download-all{align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-5);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-md);font-size:var(--font-sm);cursor:pointer;transition:all var(--transition-base);border:none;font-weight:700;display:flex}.btn-download-all:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-download-all svg{width:18px;height:18px}.images-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.image-card{background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);transition:all var(--transition-base);overflow:hidden}.image-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-4px)}.image-preview{aspect-ratio:1;border-bottom:2px solid var(--border-primary);background:#f8fafc;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.image-preview img{object-fit:contain;max-width:100%;max-height:100%}.image-info{padding:var(--space-3);justify-content:space-between;align-items:center;display:flex}.image-meta{gap:var(--space-1);flex-direction:column;display:flex}.page-number{font-size:var(--font-sm);color:var(--text-primary);font-weight:700}.image-dimensions{font-size:var(--font-xs);color:var(--text-tertiary);font-family:Courier New,monospace}.btn-download-single{background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);width:40px;height:40px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);justify-content:center;align-items:center;display:flex}.btn-download-single:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-download-single svg{width:18px;height:18px}.conversion-actions{padding-top:var(--space-4);justify-content:center;display:flex}.btn-convert-another{padding:var(--space-3)var(--space-6);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-base);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);font-weight:600}.btn-convert-another:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.feature-highlights{gap:var(--space-4);margin-top:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.feature-item{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);display:flex}.feature-item svg{width:24px;height:24px;color:var(--color-primary);flex-shrink:0}.feature-item span{font-size:var(--font-sm);color:var(--text-primary);font-weight:600}@media (max-width:768px){.pdf-options-section{flex-direction:column}.images-grid{grid-template-columns:1fr}.results-header{gap:var(--space-3);flex-direction:column;align-items:stretch}.btn-download-all{justify-content:center;width:100%}}.pdf-creation-options{gap:var(--space-4);padding:var(--space-5);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);margin-bottom:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.orientation-selector{gap:var(--space-2);display:flex}.orientation-btn{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);flex:1;font-weight:600}.orientation-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.orientation-btn.active{background:var(--gradient-primary);color:#fff;border-color:var(--color-primary)}.jpg-upload-section{margin-bottom:var(--space-6)}.jpg-upload-area{padding:var(--space-10);background:var(--bg-secondary);border:3px dashed var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.jpg-upload-area:hover{border-color:var(--color-primary);background:var(--color-primary-light)}.jpg-upload-area h3{font-size:var(--font-xl);color:var(--text-primary);margin:0 0 var(--space-2)0;font-weight:700}.jpg-upload-area p{font-size:var(--font-base);color:var(--text-secondary);margin:0 0 var(--space-3)0}.jpg-upload-area small{font-size:var(--font-sm);color:var(--text-tertiary)}.images-preview-section{gap:var(--space-5);flex-direction:column;display:flex}.preview-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}.preview-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}.preview-header h3 svg{width:22px;height:22px;color:var(--color-primary)}.preview-actions{align-items:center;gap:var(--space-4);display:flex}.drag-hint{align-items:center;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-tertiary);font-weight:600;display:flex}.drag-hint svg{width:16px;height:16px}.btn-clear-images{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-images:hover{color:#ef4444;border-color:#ef4444}.btn-clear-images svg{width:16px;height:16px}.images-preview-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));display:grid}.preview-image-card{background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);cursor:move;transition:all var(--transition-base);position:relative;overflow:hidden}.preview-image-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-4px)}.preview-image-card.dragging{opacity:.5;transform:scale(.95)}.image-number{top:var(--space-2);left:var(--space-2);background:var(--gradient-primary);color:#fff;width:32px;height:32px;font-size:var(--font-sm);z-index:2;box-shadow:var(--shadow-sm);border-radius:50%;justify-content:center;align-items:center;font-weight:700;display:flex;position:absolute}.preview-image-wrapper{aspect-ratio:1;border-bottom:2px solid var(--border-primary);background:#f8fafc;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.preview-image-wrapper img{object-fit:contain;max-width:100%;max-height:100%}.preview-image-info{padding:var(--space-3)}.image-filename{font-size:var(--font-xs);color:var(--text-primary);margin-bottom:var(--space-1);white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.image-size{font-size:var(--font-xs);color:var(--text-tertiary);font-family:Courier New,monospace}.btn-remove-preview{top:var(--space-2);right:var(--space-2);border:2px solid var(--border-primary);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);z-index:2;background:#fff;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute}.btn-remove-preview:hover{color:#ef4444;background:#fef2f2;border-color:#ef4444}.btn-remove-preview svg{width:16px;height:16px}.conversion-section{padding:var(--space-5)0;justify-content:center;display:flex}.btn-create-pdf{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-4)var(--space-8);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-lg);font-size:var(--font-lg);cursor:pointer;transition:all var(--transition-base);border:none;min-width:280px;font-weight:700;display:flex}.btn-create-pdf:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-create-pdf:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-create-pdf svg{width:24px;height:24px}.spinner{border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@media (max-width:768px){.pdf-creation-options{grid-template-columns:1fr}.preview-header{gap:var(--space-3);flex-direction:column;align-items:stretch}.preview-actions{flex-direction:column;align-items:stretch}.btn-clear-images,.drag-hint{justify-content:center;width:100%}.images-preview-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.btn-create-pdf{width:100%}}@media (max-width:480px){.images-preview-grid{grid-template-columns:1fr 1fr}}.pdf-word-upload-section{margin-bottom:var(--space-6)}.pdf-word-upload-area{padding:var(--space-12);background:var(--bg-secondary);border:3px dashed var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.pdf-word-upload-area:hover{border-color:var(--color-primary);background:var(--color-primary-light)}.pdf-word-upload-area h3{font-size:var(--font-xl);color:var(--text-primary);margin:0 0 var(--space-2)0;font-weight:700}.pdf-word-upload-area p{font-size:var(--font-base);color:var(--text-secondary);margin:0 0 var(--space-3)0}.pdf-word-upload-area small{font-size:var(--font-sm);color:var(--text-tertiary)}.conversion-notice{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);margin-bottom:var(--space-6);background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);border:2px solid #fbbf24;display:flex}.conversion-notice svg{color:#d97706;flex-shrink:0;width:20px;height:20px;margin-top:2px}.notice-content{font-size:var(--font-sm);color:#78350f;line-height:1.6}.notice-content strong{color:#92400e;font-weight:700}.pdf-word-file-info{gap:var(--space-4);margin-bottom:var(--space-6);flex-direction:column;display:flex}.btn-convert-pdf-word{justify-content:center;align-items:center;gap:var(--space-2);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);background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);border:none;font-weight:700;display:flex}.btn-convert-pdf-word:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-convert-pdf-word svg{width:24px;height:24px}.conversion-info{padding:var(--space-5);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);margin-top:var(--space-6)}.conversion-info h4{font-size:var(--font-base);color:var(--text-primary);margin:0 0 var(--space-3)0;font-weight:700}.conversion-info h4:not(:first-child){margin-top:var(--space-5)}.info-list{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.info-list li{align-items:flex-start;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-secondary);line-height:1.5;display:flex}.check-icon{color:#10b981;flex-shrink:0;width:18px;height:18px;margin-top:2px}.warning-icon{color:#f59e0b;flex-shrink:0;width:18px;height:18px;margin-top:2px}.info-list.limitations li{color:var(--text-tertiary)}@media (max-width:640px){.conversion-info{padding:var(--space-4)}}.pdf-excel-upload-section{margin-bottom:var(--space-6)}.pdf-excel-upload-area{padding:var(--space-12);background:var(--bg-secondary);border:3px dashed var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.pdf-excel-upload-area:hover{border-color:var(--color-primary);background:var(--color-primary-light)}.pdf-excel-upload-area h3{font-size:var(--font-xl);color:var(--text-primary);margin:0 0 var(--space-2)0;font-weight:700}.pdf-excel-upload-area p{font-size:var(--font-base);color:var(--text-secondary);margin:0 0 var(--space-3)0}.pdf-excel-upload-area small{font-size:var(--font-sm);color:var(--text-tertiary)}.pdf-excel-file-info{gap:var(--space-4);margin-bottom:var(--space-6);flex-direction:column;display:flex}.btn-convert-pdf-excel{justify-content:center;align-items:center;gap:var(--space-2);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);background:linear-gradient(135deg,#10b981 0%,#059669 100%);border:none;font-weight:700;display:flex}.btn-convert-pdf-excel:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-convert-pdf-excel svg{width:24px;height:24px}.btn-convert-pdf-excel.excel-mode{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%)}.btn-convert-pdf-excel.excel-mode:hover{background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%)}.unlock-pdf-upload-section{margin-bottom:var(--space-6)}.unlock-pdf-upload-area{padding:var(--space-12);background:var(--bg-secondary);border:3px dashed var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.unlock-pdf-upload-area:hover{border-color:var(--color-primary);background:var(--color-primary-light)}.unlock-pdf-upload-area h3{font-size:var(--font-xl);color:var(--text-primary);margin:0 0 var(--space-2)0;font-weight:700}.unlock-pdf-upload-area p{font-size:var(--font-base);color:var(--text-secondary);margin:0 0 var(--space-3)0}.unlock-pdf-upload-area small{font-size:var(--font-sm);color:var(--text-tertiary)}.security-notice{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);margin-bottom:var(--space-6);background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);border:2px solid #93c5fd;display:flex}.security-notice svg{color:#3b82f6;flex-shrink:0;width:20px;height:20px;margin-top:2px}.unlock-pdf-file-section{gap:var(--space-4);margin-bottom:var(--space-6);flex-direction:column;display:flex}.file-meta{align-items:center;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-tertiary);display:flex}.protection-status{align-items:center;gap:var(--space-1);font-weight:600;display:flex}.protection-status.protected{color:#ef4444}.protection-status.unprotected{color:#10b981}.protection-status svg{width:14px;height:14px}.password-input-section{padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.password-input-section label{font-size:var(--font-sm);color:var(--text-primary);margin-bottom:var(--space-2);font-weight:700;display:block}.password-input-wrapper{align-items:center;display:flex;position:relative}.password-input{width:100%;padding:var(--space-3)var(--space-12)var(--space-3)var(--space-3);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-base);color:var(--text-primary);transition:all var(--transition-base);font-family:Courier New,monospace}.password-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #ff6b351a}.btn-toggle-password{right:var(--space-3);width:36px;height:36px;color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-base);background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:absolute}.btn-toggle-password:hover{color:var(--text-primary)}.btn-toggle-password svg{width:18px;height:18px}.password-hint{margin-top:var(--space-2);font-size:var(--font-xs);color:var(--text-tertiary);display:block}.btn-unlock-pdf{justify-content:center;align-items:center;gap:var(--space-2);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);background:linear-gradient(135deg,#10b981 0%,#059669 100%);border:none;font-weight:700;display:flex}.btn-unlock-pdf:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-unlock-pdf:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-unlock-pdf svg{width:24px;height:24px}.unlocking-status{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-lg);background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);border:2px solid #93c5fd;display:flex}.lock-icon{color:#3b82f6;width:32px;height:32px}.lock-icon.spinning{animation:1s linear infinite spin}.unlocking-status span{font-size:var(--font-base);color:#1e40af;font-weight:700}.unlock-info{padding:var(--space-5);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);margin-top:var(--space-6)}.unlock-info h4{font-size:var(--font-base);color:var(--text-primary);margin:0 0 var(--space-3)0;font-weight:700}.unlock-info h4:not(:first-child){margin-top:var(--space-5)}@media (max-width:640px){.file-meta{flex-direction:column;align-items:flex-start}}.protect-pdf-upload-section{margin-bottom:var(--space-6)}.protect-pdf-upload-area{padding:var(--space-12);background:var(--bg-secondary);border:3px dashed var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.protect-pdf-upload-area:hover{border-color:var(--color-primary);background:var(--color-primary-light)}.protect-pdf-upload-area h3{font-size:var(--font-xl);color:var(--text-primary);margin:0 0 var(--space-2)0;font-weight:700}.protect-pdf-upload-area p{font-size:var(--font-base);color:var(--text-secondary);margin:0 0 var(--space-3)0}.protect-pdf-upload-area small{font-size:var(--font-sm);color:var(--text-tertiary)}.protection-notice{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);margin-bottom:var(--space-6);background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border:2px solid #fbbf24;display:flex}.protection-notice svg{color:#d97706;flex-shrink:0;width:20px;height:20px;margin-top:2px}.protect-pdf-file-section{gap:var(--space-4);margin-bottom:var(--space-6);flex-direction:column;display:flex}.password-protection-section{gap:var(--space-4);padding:var(--space-5);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);flex-direction:column;display:flex}.password-input-group{gap:var(--space-2);flex-direction:column;display:flex}.password-input-group label{font-size:var(--font-sm);color:var(--text-primary);font-weight:700}.password-match-icon{right:var(--space-12);color:#10b981;position:absolute;top:50%;transform:translateY(-50%)}.password-match-icon svg{width:20px;height:20px}.password-error{color:#ef4444;font-size:var(--font-xs)}.password-strength{align-items:center;gap:var(--space-3);margin-top:var(--space-2);display:flex}.strength-bar-container{background:var(--bg-primary);border-radius:var(--radius-full);flex:1;height:6px;overflow:hidden}.strength-bar{border-radius:var(--radius-full);height:100%;transition:all .3s}.strength-label{font-size:var(--font-xs);white-space:nowrap;font-weight:700}.btn-protect-pdf{justify-content:center;align-items:center;gap:var(--space-2);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);background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);border:none;font-weight:700;display:flex}.btn-protect-pdf:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-protect-pdf:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-protect-pdf svg{width:24px;height:24px}.protecting-status{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-lg);background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);border:2px solid #93c5fd;display:flex}.shield-icon{color:#3b82f6;width:32px;height:32px}.shield-icon.spinning{animation:1s linear infinite spin}.protecting-status span{font-size:var(--font-base);color:#1e40af;font-weight:700}.protection-info{padding:var(--space-5);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary);margin-top:var(--space-6)}.protection-info h4{font-size:var(--font-base);color:var(--text-primary);margin:0 0 var(--space-3)0;font-weight:700}.protection-info h4:not(:first-child){margin-top:var(--space-5)}.protection-info strong{color:var(--text-primary)}@media (max-width:640px){.password-strength{flex-direction:column;align-items:stretch}.strength-label{text-align:center}}