.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)}.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{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%)}.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}.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}}@keyframes spin{to{transform:rotate(360deg)}}.sg-root{gap:var(--space-5);padding-top:var(--space-2);flex-direction:column;display:flex}.sg-toasts{bottom:var(--space-6);right:var(--space-6);z-index:9999;gap:var(--space-2);pointer-events:none;flex-direction:column;display:flex;position:fixed}.sg-toast{align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-4);border-radius:var(--radius-lg);font-size:var(--font-sm);box-shadow:var(--shadow-lg);pointer-events:all;border:1px solid;max-width:340px;font-weight:500;display:flex}.sg-toast svg:first-child{flex-shrink:0;width:15px;height:15px}.sg-toast span{flex:1}.sg-toast button{cursor:pointer;color:inherit;opacity:.6;background:0 0;border:none;display:flex}.sg-toast button:hover{opacity:1}.sg-toast button svg{width:13px;height:13px}.sg-toast--success{color:#15803d;background:#f0fdf4;border-color:#86efac}.sg-toast--error{color:#dc2626;background:#fef2f2;border-color:#fca5a5}.sg-toast--warn{color:#d97706;background:#fef3c7;border-color:#fde68a}.sg-header{align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.sg-base-url-wrap{align-items:center;gap:var(--space-2);background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-md);min-width:220px;padding:var(--space-2)var(--space-3);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);flex:1;display:flex}.sg-base-url-wrap:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #ff6b351a}.sg-base-icon{width:16px;height:16px;color:var(--color-primary);flex-shrink:0}.sg-base-input{font-size:var(--font-sm);color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-family:SF Mono,Fira Code,monospace}.sg-base-input::placeholder{color:var(--text-tertiary)}.sg-header-btns{gap:var(--space-2);flex-wrap:wrap;display:flex}.sg-btn-ghost{align-items:center;gap:var(--space-1);padding:var(--space-2)var(--space-3);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;font-weight:500;display:inline-flex}.sg-btn-ghost svg{width:13px;height:13px}.sg-btn-ghost:hover{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.sg-btn-ghost--active{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary)}.sg-btn-ghost--danger:hover{border-color:var(--color-error);color:var(--color-error)}.sg-bulk-panel{border-radius:var(--radius-lg);border:1.5px solid var(--color-primary);overflow:hidden}.sg-bulk-inner{padding:var(--space-5);background:linear-gradient(135deg,var(--color-primary-light)0%,var(--bg-primary)100%);gap:var(--space-4);flex-direction:column;display:flex}.sg-bulk-top{justify-content:space-between;align-items:flex-start;gap:var(--space-4);flex-wrap:wrap;display:flex}.sg-bulk-title{align-items:center;gap:var(--space-2);font-size:var(--font-base);color:var(--text-primary);margin:0 0 var(--space-1);font-weight:700;display:flex}.sg-bulk-title svg{width:16px;height:16px;color:var(--color-primary)}.sg-bulk-hint{font-size:var(--font-sm);color:var(--text-secondary);margin:0;line-height:1.5}.sg-bulk-hint code{background:var(--bg-secondary);border-radius:var(--radius-sm);color:var(--color-primary);padding:1px 5px;font-family:SF Mono,Fira Code,monospace;font-size:.8em}.sg-bulk-count{background:var(--color-primary);color:var(--text-inverse);border-radius:var(--radius-full);font-size:var(--font-xs);white-space:nowrap;flex-shrink:0;align-items:center;padding:4px 12px;font-weight:700;display:inline-flex}.sg-bulk-textarea{width:100%;padding:var(--space-3)var(--space-4);background:var(--bg-primary);border:1.5px 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-fast);outline:none;font-family:SF Mono,Fira Code,monospace;line-height:1.7}.sg-bulk-textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #ff6b351a}.sg-bulk-textarea::placeholder{color:var(--text-tertiary)}.sg-bulk-actions{gap:var(--space-3);align-items:center;display:flex}.sg-btn-primary{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-5);background:var(--gradient-primary);color:var(--text-inverse);border-radius:var(--radius-md);font-size:var(--font-sm);cursor:pointer;transition:all var(--transition-fast);border:none;font-weight:600;display:inline-flex;box-shadow:0 2px 8px #ff6b3533}.sg-btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #ff6b3559}.sg-btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.sg-btn-primary svg{width:14px;height:14px}.sg-settings-panel{border-radius:var(--radius-lg);border:1.5px solid var(--border-secondary);overflow:hidden}.sg-settings-inner{padding:var(--space-5);background:var(--bg-secondary);gap:var(--space-4);flex-direction:column;display:flex}.sg-settings-title{align-items:center;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-primary);text-transform:uppercase;letter-spacing:.07em;margin:0;font-weight:700;display:flex}.sg-settings-title svg{width:14px;height:14px;color:var(--color-primary)}.sg-settings-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.sg-checkbox-row{align-items:center;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;padding:var(--space-2)var(--space-3);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);transition:border-color var(--transition-fast);display:flex}.sg-checkbox-row:hover{border-color:var(--color-primary)}.sg-checkbox-row input[type=checkbox]{appearance:none;border:2px solid var(--color-primary);cursor:pointer;background:var(--bg-primary);width:16px;height:16px;transition:background var(--transition-fast);border-radius:4px;flex-shrink:0;position:relative}.sg-checkbox-row input[type=checkbox]:checked{background:var(--color-primary)}.sg-checkbox-row input[type=checkbox]:checked:after{content:"✓";color:#fff;font-size:10px;position:absolute;top:-1px;left:2px}.sg-stats{align-items:center;gap:var(--space-4);padding:var(--space-3)var(--space-5);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.sg-stat{flex-direction:column;align-items:center;gap:2px;display:flex}.sg-stat-val{font-size:var(--font-xl);color:var(--text-primary);font-family:SF Mono,Fira Code,monospace;font-weight:800;line-height:1}.sg-stat-val--ok{color:var(--color-success)}.sg-stat-val--err{color:var(--color-error)}.sg-stat-val--warn{color:var(--color-warning)}.sg-stat-lbl{font-size:var(--font-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.07em}.sg-stat-div{background:var(--border-primary);flex-shrink:0;width:1px;height:28px}.sg-stat-warn{align-items:center;gap:var(--space-1);font-size:var(--font-xs);color:var(--color-warning);margin-left:auto;font-weight:600;display:flex}.sg-stat-warn svg{width:13px;height:13px}.sg-url-list{gap:var(--space-2);background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);flex-direction:column;display:flex;overflow:hidden}.sg-url-list-header{padding:var(--space-4)var(--space-5);border-bottom:1px solid var(--border-primary);background:var(--bg-secondary);justify-content:space-between;align-items:center;display:flex}.sg-url-list-title{align-items:center;gap:var(--space-2);font-size:var(--font-base);color:var(--text-primary);margin:0;font-weight:700;display:flex}.sg-url-list-title svg{width:16px;height:16px;color:var(--color-primary)}.sg-url-list-count{background:var(--color-primary);color:var(--text-inverse);border-radius:var(--radius-full);font-size:var(--font-xs);padding:1px 8px;font-weight:700}.sg-col-headers{align-items:center;gap:var(--space-3);padding:var(--space-2)var(--space-4);background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);display:flex}.sg-col-header{text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);font-size:.7rem;font-weight:700}.sg-col-url{flex:1}.sg-col-freq{text-align:center;width:80px}.sg-col-pri{text-align:center;width:70px}@media (max-width:640px){.sg-col-headers{display:none}}.sg-url-row{border-bottom:1px solid var(--border-primary);transition:background var(--transition-fast)}.sg-url-row:last-of-type{border-bottom:none}.sg-url-row:hover{background:var(--bg-secondary)}.sg-url-row--invalid{background:#fef2f2!important}.sg-url-row--dup{background:#fef3c7!important}.sg-url-compact{align-items:center;gap:var(--space-3);padding:var(--space-3)var(--space-4);display:flex}.sg-url-idx{background:var(--bg-secondary);border:1px solid var(--border-primary);width:24px;height:24px;color:var(--text-tertiary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.65rem;font-weight:700;display:flex}.sg-url-input-wrap{flex:1;align-items:center;min-width:0;display:flex;position:relative}.sg-url-input{width:100%;padding:var(--space-2)68px var(--space-2)var(--space-3);background:var(--bg-secondary);border:1.5px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);text-overflow:ellipsis;outline:none;font-family:SF Mono,Fira Code,monospace;overflow:hidden}.sg-url-input::placeholder{color:var(--text-tertiary)}.sg-url-input:focus{border-color:var(--color-primary);background:var(--bg-primary);box-shadow:0 0 0 3px #ff6b351a}.sg-url-input--invalid{border-color:var(--color-error)!important}.sg-url-input--dup{border-color:var(--color-warning)!important}.sg-validity{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;display:flex;position:absolute;right:36px}.sg-validity svg{width:11px;height:11px}.sg-validity--ok{color:#15803d;background:#dcfce7}.sg-validity--err{color:#dc2626;background:#fef2f2}.sg-dup-badge{color:#d97706;letter-spacing:.04em;background:#fef3c7;border:1px solid #fde68a;border-radius:4px;padding:1px 4px;font-size:.55rem;font-weight:800;position:absolute;right:6px}.sg-compact-freq{text-align:center;width:80px;font-size:var(--font-xs);color:var(--text-secondary);flex-shrink:0;font-weight:500}.sg-compact-pri{justify-content:center;align-items:center;gap:var(--space-1);width:70px;font-size:var(--font-xs);color:var(--text-secondary);flex-shrink:0;font-family:SF Mono,Fira Code,monospace;display:flex}.sg-priority-dot{border:1px solid #00000014;border-radius:50%;flex-shrink:0;width:10px;height:10px;display:inline-block}.sg-url-actions{flex-shrink:0;align-items:center;gap:2px;display:flex}.sg-icon-btn{border-radius:var(--radius-sm);width:28px;height:28px;color:var(--text-tertiary);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.sg-icon-btn svg{width:13px;height:13px}.sg-icon-btn:hover:not(:disabled){background:var(--bg-secondary);color:var(--text-primary)}.sg-icon-btn:disabled{opacity:.25;cursor:not-allowed}.sg-icon-btn--expand:hover:not(:disabled){color:var(--color-primary)}.sg-icon-btn--del:hover:not(:disabled){color:var(--color-error);background:#fef2f2}.sg-url-error,.sg-url-warn{align-items:center;gap:var(--space-1);font-size:var(--font-xs);padding:var(--space-1)var(--space-4)var(--space-2);margin:0;display:flex}.sg-url-error{color:#dc2626}.sg-url-warn{color:#d97706}.sg-url-error svg,.sg-url-warn svg{flex-shrink:0;width:12px;height:12px}.sg-url-expanded{overflow:hidden}.sg-expanded-grid{gap:var(--space-4);padding:var(--space-4)var(--space-4)var(--space-4)calc(var(--space-4) + 36px);background:var(--bg-secondary);border-top:1px solid var(--border-primary);grid-template-columns:repeat(3,1fr);display:grid}@media (max-width:640px){.sg-expanded-grid{padding-left:var(--space-4);grid-template-columns:1fr}}.sg-field{gap:var(--space-1);flex-direction:column;display:flex}.sg-field-label{align-items:center;gap:var(--space-1);font-size:var(--font-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-weight:600;display:flex}.sg-field-label svg{width:11px;height:11px;color:var(--color-primary)}.sg-field-input{padding:var(--space-2)var(--space-3);background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.sg-field-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #ff6b351a}.sg-priority-wrap{align-items:center;gap:var(--space-2);display:flex}.sg-priority-wrap .sg-field-input{flex:1}.sg-btn-add{align-items:center;gap:var(--space-1);padding:var(--space-2)var(--space-4);background:var(--gradient-primary);color:var(--text-inverse);border-radius:var(--radius-md);font-size:var(--font-sm);cursor:pointer;transition:all var(--transition-fast);border:none;font-weight:600;display:inline-flex;box-shadow:0 2px 8px #ff6b3533}.sg-btn-add:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff6b3559}.sg-btn-add svg{width:14px;height:14px}.sg-btn-add-inline{justify-content:center;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-3);border:none;border-top:1.5px dashed var(--border-primary);color:var(--color-primary);font-size:var(--font-sm);cursor:pointer;transition:background var(--transition-fast);background:0 0;font-weight:600;display:flex}.sg-btn-add-inline:hover{background:var(--color-primary-light)}.sg-btn-add-inline svg{width:14px;height:14px}.sg-actions{align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.sg-btn-generate{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-4)var(--space-12);background:var(--gradient-primary);color:var(--text-inverse);border-radius:var(--radius-lg);font-size:var(--font-lg);cursor:pointer;transition:all var(--transition-base);border:none;min-width:240px;font-weight:700;display:inline-flex;box-shadow:0 4px 16px #ff6b3540}.sg-btn-generate:hover:not(:disabled){box-shadow:0 6px 22px #ff6b3566}.sg-btn-generate:disabled{background:var(--bg-tertiary);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none}.sg-btn-generate--done{background:linear-gradient(135deg,#10b981,#059669)!important;box-shadow:0 4px 16px #10b9814d!important}.sg-btn-generate svg{width:20px;height:20px}.sg-post-actions{align-items:center;gap:var(--space-3);flex-wrap:wrap;justify-content:center;display:flex}.sg-btn-download{align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-5);background:var(--bg-primary);border:1.5px solid var(--color-primary);border-radius:var(--radius-lg);color:var(--color-primary);font-size:var(--font-sm);cursor:pointer;transition:all var(--transition-fast);font-weight:600;display:inline-flex}.sg-btn-download:hover{background:var(--color-primary);color:var(--text-inverse);box-shadow:0 4px 12px #ff6b3540}.sg-btn-download svg{width:15px;height:15px}.sg-btn-copy,.sg-btn-robots{align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);color:var(--text-secondary);font-size:var(--font-sm);cursor:pointer;transition:all var(--transition-fast);font-weight:500;display:inline-flex}.sg-btn-copy:hover,.sg-btn-robots:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.sg-btn-copy svg,.sg-btn-robots svg{width:14px;height:14px}.sg-xml-preview{border-radius:var(--radius-lg);border:1px solid var(--color-slate-700);box-shadow:var(--shadow-lg);overflow:hidden}.sg-xml-header{align-items:center;gap:var(--space-3);padding:var(--space-3)var(--space-4);background:var(--color-slate-800);border-bottom:1px solid var(--color-slate-700);display:flex}.sg-xml-dots{align-items:center;gap:6px;display:flex}.sg-xml-dot{border-radius:50%;width:12px;height:12px}.sg-xml-dot--red{background:#ef4444}.sg-xml-dot--yellow{background:#f59e0b}.sg-xml-dot--green{background:#10b981}.sg-xml-filename{font-size:var(--font-xs);color:var(--color-slate-400);text-align:center;flex:1;font-family:SF Mono,Fira Code,monospace}.sg-xml-close{color:var(--color-slate-400);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;padding:2px;display:flex}.sg-xml-close:hover{color:var(--color-slate-100)}.sg-xml-close svg{width:14px;height:14px}.sg-xml-code{background:var(--color-slate-900);color:var(--color-slate-300);padding:var(--space-5)var(--space-6);tab-size:2;max-height:480px;margin:0;font-family:SF Mono,Fira Code,Courier New,monospace;font-size:.8125rem;line-height:1.7;overflow:auto}.sg-xml-open-tag,.sg-xml-close-tag{color:#60a5fa}.sg-xml-decl{color:#a78bfa}.sg-xml-comment{color:#6b7280;font-style:italic}.sg-tips{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-5)var(--space-6)}.sg-tips-title{align-items:center;gap:var(--space-2);font-size:var(--font-sm);text-transform:uppercase;letter-spacing:.07em;color:var(--text-tertiary);margin:0 0 var(--space-4);font-weight:700;display:flex}.sg-tips-title svg{width:14px;height:14px;color:var(--color-primary)}.sg-tips-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));display:grid}.sg-tip{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);display:flex}.sg-tip:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.sg-tip-icon{border-radius:var(--radius-md);background:var(--color-primary-light);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.sg-tip-icon svg{width:16px;height:16px;color:var(--color-primary)}.sg-tip-title{font-size:var(--font-sm);color:var(--text-primary);margin:0 0 var(--space-1);font-weight:700;line-height:1.3}.sg-tip-body{font-size:var(--font-sm);color:var(--text-secondary);margin:0;line-height:1.55}@media (max-width:768px){.sg-header{flex-direction:column;align-items:stretch}.sg-base-url-wrap{min-width:unset}.sg-header-btns{flex-wrap:wrap;justify-content:flex-end}.sg-compact-freq,.sg-compact-pri{display:none}.sg-stats{gap:var(--space-3)}.sg-stat-warn{margin-left:0}.sg-post-actions{flex-direction:column;width:100%}.sg-btn-download,.sg-btn-copy,.sg-btn-robots{justify-content:center;width:100%}.sg-btn-generate{width:100%;padding:var(--space-4);min-width:unset}.sg-toasts{bottom:var(--space-4);right:var(--space-4);left:var(--space-4)}.sg-toast{max-width:100%}.sg-tips-grid{grid-template-columns:1fr}}@media (max-width:480px){.sg-url-compact{gap:var(--space-2);padding:var(--space-2)var(--space-3)}.sg-url-input{font-size:var(--font-xs)}.sg-xml-code{padding:var(--space-4);font-size:.7rem}}.wst-root{gap:var(--space-5);padding-top:var(--space-2);flex-direction:column;display:flex}.wst-input-card{gap:var(--space-3);padding:var(--space-5);background:linear-gradient(135deg,var(--color-primary-light)0%,var(--bg-primary)100%);border:2px solid var(--color-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);flex-wrap:wrap;align-items:center;display:flex}.wst-input-wrap{background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);min-width:240px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);flex:1;align-items:center;display:flex;position:relative}.wst-input-wrap:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #ff6b351a}.wst-input-icon{left:var(--space-4);width:18px;height:18px;color:var(--color-primary);pointer-events:none;position:absolute}.wst-input{padding:var(--space-4)var(--space-4)var(--space-4)calc(var(--space-4) + 26px);font-size:var(--font-base);color:var(--text-primary);background:0 0;border:none;outline:none;flex:1}.wst-input::placeholder{color:var(--text-tertiary)}.wst-input:disabled{opacity:.55;cursor:not-allowed}.wst-btn-test{align-items:center;gap:var(--space-2);padding:var(--space-4)var(--space-8);background:var(--gradient-primary);color:var(--text-inverse);border-radius:var(--radius-lg);font-size:var(--font-base);cursor:pointer;white-space:nowrap;transition:all var(--transition-base);border:none;font-weight:600;display:inline-flex;box-shadow:0 4px 14px #ff6b3540}.wst-btn-test:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary-hover));transform:translateY(-1px);box-shadow:0 6px 20px #ff6b3561}.wst-btn-test:disabled{background:var(--bg-tertiary);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none;transform:none}.wst-btn-test svg{width:16px;height:16px}.wst-spinner{border:2.5px solid #ffffff4d;border-top-color:#fff;border-radius:50%;flex-shrink:0;width:16px;height:16px;animation:.7s linear infinite wst-spin}@keyframes wst-spin{to{transform:rotate(360deg)}}.wst-error{align-items:center;gap:var(--space-3);padding:var(--space-4)var(--space-5);border-radius:var(--radius-lg);color:#dc2626;font-size:var(--font-sm);background:#fef2f2;border:1px solid #fecaca;display:flex}.wst-error svg{flex-shrink:0;width:18px;height:18px}.wst-loading{align-items:center;gap:var(--space-5);padding:var(--space-10)var(--space-6);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);text-align:center;flex-direction:column;display:flex}.wst-loading-ring{width:80px;height:80px;position:relative}.wst-loading-ring svg{width:80px;height:80px}.wst-loading-arc{transform-origin:50%;animation:1.4s linear infinite wst-arc-spin}@keyframes wst-arc-spin{to{transform:rotate(360deg)}}.wst-loading-timer{font-size:var(--font-sm);color:var(--color-primary);justify-content:center;align-items:center;font-family:SF Mono,monospace;font-weight:700;display:flex;position:absolute;inset:0}.wst-loading-steps{gap:var(--space-2);flex-direction:column;width:100%;max-width:280px;display:flex}.wst-loading-step{align-items:center;gap:var(--space-3);font-size:var(--font-sm);color:var(--text-tertiary);transition:color var(--transition-base);display:flex}.wst-loading-step-dot{background:var(--border-secondary);width:8px;height:8px;transition:background var(--transition-base);border-radius:50%;flex-shrink:0}.wst-loading-step--done{color:var(--color-success)}.wst-loading-step--done .wst-loading-step-dot{background:var(--color-success)}.wst-loading-step--active{color:var(--color-primary);font-weight:600}.wst-loading-step--active .wst-loading-step-dot{background:var(--color-primary);animation:1s ease-in-out infinite wst-pulse}@keyframes wst-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.4)}}.wst-loading-hint{font-size:var(--font-xs);color:var(--text-tertiary);margin:0}.wst-results{gap:var(--space-5);flex-direction:column;display:flex}.wst-card-header{justify-content:space-between;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.wst-card-title{align-items:center;gap:var(--space-2);font-size:var(--font-lg);color:var(--text-primary);margin:0;font-weight:700;display:flex}.wst-card-title svg{width:18px;height:18px;color:var(--color-primary)}.wst-card-subtitle{font-size:var(--font-xs);color:var(--text-tertiary);font-weight:500}.wst-score-card{gap:var(--space-8);padding:var(--space-6);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);align-items:center;display:flex}.wst-score-ring-wrap{flex-shrink:0;width:140px;height:140px;position:relative}.wst-score-svg{width:140px;height:140px}.wst-score-center{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.wst-score-num{font-size:2.5rem;font-weight:800;line-height:1}.wst-score-grade{font-size:var(--font-lg);color:var(--text-secondary);margin-top:var(--space-1);font-weight:700}.wst-score-detail{gap:var(--space-3);flex-direction:column;flex:1;min-width:0;display:flex}.wst-score-badge{border-radius:var(--radius-full);font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.06em;border:1px solid;align-self:flex-start;align-items:center;padding:4px 12px;font-weight:700;display:inline-flex}.wst-score-title{font-size:var(--font-xl);color:var(--text-primary);margin:0;font-weight:700}.wst-score-desc{font-size:var(--font-sm);color:var(--text-tertiary);margin:0}.wst-passed-pill{align-items:center;gap:var(--space-1);color:#15803d;border-radius:var(--radius-full);font-size:var(--font-xs);background:#dcfce7;border:1px solid #86efac;align-self:flex-start;padding:3px 10px;font-weight:600;display:inline-flex}.wst-passed-pill svg{width:12px;height:12px}.wst-score-delta{align-items:center;gap:var(--space-1);font-size:var(--font-sm);border-radius:var(--radius-full);align-self:flex-start;padding:3px 10px;font-weight:600;display:inline-flex}.wst-score-delta svg{width:13px;height:13px}.wst-score-delta--up{color:#15803d;background:#dcfce7;border:1px solid #86efac}.wst-score-delta--down{color:#dc2626;background:#fef2f2;border:1px solid #fca5a5}.wst-score-actions{gap:var(--space-3);flex-wrap:wrap;display:flex}.wst-btn-retest{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);background:var(--bg-primary);border:1.5px solid var(--color-primary);border-radius:var(--radius-md);color:var(--color-primary);font-size:var(--font-sm);cursor:pointer;transition:all var(--transition-fast);font-weight:600;display:inline-flex}.wst-btn-retest:hover{background:var(--color-primary);color:var(--text-inverse);box-shadow:0 3px 10px #ff6b3540}.wst-btn-retest svg{width:14px;height:14px}.wst-btn-copy{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-sm);cursor:pointer;transition:all var(--transition-fast);font-weight:500;display:inline-flex}.wst-btn-copy:hover{border-color:var(--color-primary);color:var(--color-primary)}.wst-btn-copy--done{color:#15803d!important;background:#dcfce7!important;border-color:#86efac!important}.wst-btn-copy svg{width:14px;height:14px}.wst-cwv-card{padding:var(--space-5)var(--space-6);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.wst-cwv-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));display:grid}.wst-cwv-item{padding:var(--space-4);border-radius:var(--radius-lg);gap:var(--space-1);border:1.5px solid;flex-direction:column;display:flex}.wst-cwv-item--good{background:linear-gradient(135deg,#f0fdf4 0%,var(--bg-primary)100%);border-color:#86efac}.wst-cwv-item--warning{background:linear-gradient(135deg,#fefce8 0%,var(--bg-primary)100%);border-color:#fde68a}.wst-cwv-item--poor{background:linear-gradient(135deg,#fef2f2 0%,var(--bg-primary)100%);border-color:#fca5a5}.wst-cwv-top{margin-bottom:var(--space-1);justify-content:space-between;align-items:center;display:flex}.wst-cwv-key{letter-spacing:.1em;color:var(--text-tertiary);font-family:SF Mono,monospace;font-size:.65rem;font-weight:800}.wst-cwv-chip{text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-full);padding:2px 7px;font-size:.6rem;font-weight:700}.wst-cwv-chip--good{color:#15803d;background:#dcfce7}.wst-cwv-chip--warning{color:#d97706;background:#fef3c7}.wst-cwv-chip--poor{color:#dc2626;background:#fee2e2}.wst-cwv-value{font-size:var(--font-2xl);color:var(--text-primary);margin:0;font-family:SF Mono,Fira Code,monospace;font-weight:800;line-height:1.1}.wst-cwv-label{font-size:var(--font-xs);color:var(--text-secondary);margin:0;font-weight:600;line-height:1.3}.wst-cwv-hint{color:var(--text-tertiary);margin:0;font-family:SF Mono,monospace;font-size:.65rem}.wst-metrics-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.wst-metric-card{gap:var(--space-3);padding:var(--space-4);background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);transition:box-shadow var(--transition-fast);flex-direction:column;display:flex}.wst-metric-card:hover{box-shadow:var(--shadow-md)}.wst-metric-card--good{background:linear-gradient(135deg,#f0fdf4 0%,var(--bg-primary)100%);border-color:#86efac}.wst-metric-card--warning{background:linear-gradient(135deg,#fefce8 0%,var(--bg-primary)100%);border-color:#fde68a}.wst-metric-card--poor{background:linear-gradient(135deg,#fef2f2 0%,var(--bg-primary)100%);border-color:#fca5a5}.wst-metric-top{align-items:center;gap:var(--space-3);display:flex}.wst-metric-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.wst-metric-icon svg{width:18px;height:18px}.wst-metric-icon--good{color:#15803d;background:#dcfce7}.wst-metric-icon--warning{color:#d97706;background:#fef3c7}.wst-metric-icon--poor{color:#dc2626;background:#fee2e2}.wst-metric-body{flex:1;min-width:0}.wst-metric-label{font-size:var(--font-xs);color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.wst-metric-value{font-size:var(--font-xl);color:var(--text-primary);margin:0;font-family:SF Mono,Fira Code,monospace;font-weight:800;line-height:1.2}.wst-metric-badge{text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius-full);flex-shrink:0;padding:2px 8px;font-size:.65rem;font-weight:700}.wst-metric-badge--good{color:#15803d;background:#dcfce7}.wst-metric-badge--warning{color:#d97706;background:#fef3c7}.wst-metric-badge--poor{color:#dc2626;background:#fee2e2}.wst-metric-hint{font-size:var(--font-xs);color:var(--text-tertiary);margin:0}.wst-gauge{width:100%}.wst-gauge-track{background:var(--bg-secondary);border-radius:99px;height:6px;display:flex;position:relative;overflow:visible}.wst-gauge-zone{border-radius:99px;height:100%;position:absolute}.wst-gauge-zone--good{background:#bbf7d0;left:0}.wst-gauge-zone--warn{background:#fde68a}.wst-gauge-zone--poor{background:#fecaca}.wst-gauge-marker{width:12px;height:12px;box-shadow:var(--shadow-sm);z-index:1;border:2px solid #fff;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.wst-gauge-marker--good{background:#10b981}.wst-gauge-marker--warning{background:#f59e0b}.wst-gauge-marker--poor{background:#ef4444}.wst-diag-card{padding:var(--space-5)var(--space-6);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.wst-diag-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(170px,1fr));display:grid}.wst-diag-item{align-items:flex-start;gap:var(--space-3);padding:var(--space-3)var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--border-primary);background:var(--bg-secondary);transition:border-color var(--transition-fast);display:flex}.wst-diag-item:hover{border-color:var(--color-primary)}.wst-diag-item--good{border-color:#86efac}.wst-diag-item--warning{border-color:#fde68a}.wst-diag-item--poor{border-color:#fca5a5}.wst-diag-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.wst-diag-icon svg{width:14px;height:14px}.wst-diag-icon--good{color:#15803d;background:#dcfce7}.wst-diag-icon--warning{color:#d97706;background:#fef3c7}.wst-diag-icon--poor{color:#dc2626;background:#fee2e2}.wst-diag-body{flex:1;min-width:0}.wst-diag-label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;margin:0 0 2px;font-weight:500;overflow:hidden}.wst-diag-value{font-size:var(--font-base);color:var(--text-primary);margin:0 0 2px;font-family:SF Mono,Fira Code,monospace;font-weight:800;line-height:1.2}.wst-diag-hint{color:var(--text-tertiary);margin:0;font-family:SF Mono,monospace;font-size:.65rem}.wst-resources-card{padding:var(--space-5)var(--space-6);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);gap:var(--space-4);flex-direction:column;display:flex}.wst-stacked-bar{border-radius:var(--radius-full);background:var(--bg-secondary);gap:2px;height:14px;display:flex;overflow:hidden}.wst-stacked-segment{border-radius:2px;min-width:2px;height:100%}.wst-stacked-segment--images{background:linear-gradient(90deg,#3b82f6,#60a5fa)}.wst-stacked-segment--scripts{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}.wst-stacked-segment--styles{background:linear-gradient(90deg,#ec4899,#f472b6)}.wst-stacked-segment--other{background:linear-gradient(90deg,#94a3b8,#cbd5e1)}.wst-resource-legend{gap:var(--space-3);flex-direction:column;display:flex}.wst-resource-row{align-items:center;gap:var(--space-3);grid-template-columns:140px 100px 1fr;display:grid}.wst-resource-row-left{align-items:center;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;display:flex}.wst-resource-row-left svg{width:13px;height:13px;color:var(--text-tertiary)}.wst-resource-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.wst-resource-dot--images{background:#3b82f6}.wst-resource-dot--scripts{background:#8b5cf6}.wst-resource-dot--styles{background:#ec4899}.wst-resource-dot--other{background:#94a3b8}.wst-resource-row-right{align-items:center;gap:var(--space-2);justify-content:flex-end;display:flex}.wst-resource-size{font-size:var(--font-sm);color:var(--text-primary);font-family:SF Mono,monospace;font-weight:700}.wst-resource-pct{font-size:var(--font-xs);color:var(--text-tertiary);text-align:right;min-width:40px;font-family:SF Mono,monospace}.wst-resource-bar-wrap{background:var(--bg-secondary);border-radius:99px;height:6px;overflow:hidden}.wst-resource-bar-fill{border-radius:99px;height:100%}.wst-resource-bar-fill--images{background:#3b82f6}.wst-resource-bar-fill--scripts{background:#8b5cf6}.wst-resource-bar-fill--styles{background:#ec4899}.wst-resource-bar-fill--other{background:#94a3b8}.wst-recs-card{padding:var(--space-5)var(--space-6);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);gap:var(--space-4);flex-direction:column;display:flex}.wst-recs-count{margin-left:var(--space-2);background:var(--color-primary);color:var(--text-inverse);border-radius:var(--radius-full);font-size:var(--font-xs);padding:1px 8px;font-weight:700}.wst-passed-inline{align-items:center;gap:var(--space-1);font-size:var(--font-xs);color:#15803d;border-radius:var(--radius-full);background:#dcfce7;border:1px solid #86efac;padding:3px 10px;font-weight:600;display:inline-flex}.wst-passed-inline svg{width:11px;height:11px}.wst-rec-summary{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.wst-rec-summary-pill{font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-full);border:1px solid;padding:3px 10px;font-weight:700}.wst-rec-summary-pill--critical{color:#dc2626;background:#fee2e2;border-color:#fca5a5}.wst-rec-summary-pill--warning{color:#d97706;background:#fef3c7;border-color:#fde68a}.wst-rec-summary-pill--info{color:#2563eb;background:#dbeafe;border-color:#bfdbfe}.wst-recs-list{gap:var(--space-3);flex-direction:column;display:flex}.wst-rec{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);transition:box-shadow var(--transition-fast);border-left:3px solid;display:flex}.wst-rec:hover{box-shadow:var(--shadow-sm)}.wst-rec--critical{background:#fef2f2;border-color:#ef4444}.wst-rec--warning{background:#fef3c7;border-color:#f59e0b}.wst-rec--info{background:#eff6ff;border-color:#3b82f6}.wst-rec-icon{flex-shrink:0;align-items:flex-start;width:22px;height:22px;margin-top:1px;display:flex}.wst-rec-icon svg{width:18px;height:18px}.wst-rec--critical .wst-rec-icon{color:#ef4444}.wst-rec--warning .wst-rec-icon{color:#f59e0b}.wst-rec--info .wst-rec-icon{color:#3b82f6}.wst-rec-body{flex:1}.wst-rec-title-row{align-items:center;gap:var(--space-2);margin-bottom:var(--space-1);flex-wrap:wrap;display:flex}.wst-rec-title{font-size:var(--font-sm);margin:0;font-weight:700}.wst-rec--critical .wst-rec-title{color:#991b1b}.wst-rec--warning .wst-rec-title{color:#92400e}.wst-rec--info .wst-rec-title{color:#1e40af}.wst-rec-savings{background:var(--color-primary);color:#fff;border-radius:var(--radius-full);white-space:nowrap;align-items:center;padding:1px 8px;font-family:SF Mono,monospace;font-size:.65rem;font-weight:700;display:inline-flex}.wst-rec-desc{font-size:var(--font-sm);margin:0;line-height:1.6}.wst-rec--critical .wst-rec-desc{color:#dc2626}.wst-rec--warning .wst-rec-desc{color:#d97706}.wst-rec--info .wst-rec-desc{color:#2563eb}.wst-rec-badge{text-transform:uppercase;letter-spacing:.07em;border-radius:var(--radius-full);flex-shrink:0;align-self:flex-start;padding:2px 7px;font-size:.6rem;font-weight:800}.wst-rec-badge--critical{color:#dc2626;background:#fee2e2}.wst-rec-badge--warning{color:#d97706;background:#fef3c7}.wst-rec-badge--info{color:#2563eb;background:#dbeafe}.wst-empty{padding:var(--space-6);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg)}.wst-empty-title{font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin:0 0 var(--space-4);font-weight:700}.wst-metrics-info-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.wst-metric-info-card{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);display:flex}.wst-metric-info-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.wst-metric-info-icon{border-radius:var(--radius-md);background:var(--color-primary-light);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.wst-metric-info-icon svg{width:16px;height:16px;color:var(--color-primary)}.wst-metric-info-label{font-size:var(--font-sm);color:var(--text-primary);margin:0 0 var(--space-1);font-weight:700}.wst-metric-info-range{font-size:var(--font-xs);color:var(--text-tertiary);margin:0 0 var(--space-1);font-family:SF Mono,monospace}.wst-metric-info-desc{font-size:var(--font-xs);color:var(--text-secondary);margin:0;line-height:1.5}@media (max-width:768px){.wst-input-card{flex-direction:column}.wst-input-wrap{min-width:unset;width:100%}.wst-btn-test{justify-content:center;width:100%}.wst-score-card{text-align:center;flex-direction:column;align-items:center}.wst-score-badge,.wst-passed-pill,.wst-score-delta{align-self:center}.wst-score-actions{justify-content:center}.wst-cwv-grid,.wst-metrics-grid,.wst-diag-grid{grid-template-columns:1fr 1fr}.wst-resource-row{grid-template-rows:auto auto;grid-template-columns:1fr 80px}.wst-resource-bar-wrap{grid-column:1/-1}.wst-card-header{flex-direction:column;align-items:flex-start}}@media (max-width:480px){.wst-score-ring-wrap,.wst-score-svg{width:110px;height:110px}.wst-score-num{font-size:2rem}.wst-cwv-grid,.wst-metrics-grid,.wst-diag-grid,.wst-metrics-info-grid{grid-template-columns:1fr}.wst-cwv-card,.wst-diag-card,.wst-recs-card,.wst-resources-card{padding:var(--space-4)}}.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%)}.ul-root{gap:var(--space-5);padding-top:var(--space-2);flex-direction:column;display:flex}.ul-dropzone{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-12)var(--space-8);background:var(--bg-secondary);border:2px dashed var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);-webkit-user-select:none;user-select:none;outline:none;flex-direction:column;display:flex}.ul-dropzone:hover,.ul-dropzone:focus-visible{border-color:var(--color-primary);background:var(--color-primary-light)}.ul-dropzone--active{background:var(--color-primary-light);border-style:solid;transform:scale(1.01);box-shadow:0 0 0 5px #ff6b3526}.ul-dropzone--compact{padding:var(--space-4)var(--space-5);cursor:default;border-style:solid;flex-direction:row}.ul-file-input{display:none}.ul-dropzone-icon{width:64px;height:64px;padding:var(--space-4);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-full);margin-bottom:var(--space-2);transition:transform var(--transition-base)}.ul-dropzone-icon:hover{transform:scale(1.1)rotate(5deg)}.ul-dropzone-icon svg{width:28px;height:28px}.ul-dropzone-text{text-align:center}.ul-dropzone-cta{font-size:var(--font-lg);color:var(--text-primary);margin:0;font-weight:700}.ul-dropzone-hint{font-size:var(--font-sm);color:var(--text-tertiary);margin:var(--space-1)0 0}.ul-file-row{align-items:center;gap:var(--space-4);flex-wrap:wrap;width:100%;display:flex}.ul-file-icon{border-radius:var(--radius-sm);background:#fef2f2;border:1.5px solid #fca5a5;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:1px;width:44px;height:52px;display:flex}.ul-file-icon svg{color:#ef4444;width:16px;height:16px}.ul-file-pdf-lbl{letter-spacing:.05em;color:#ef4444;font-size:.5rem;font-weight:800}.ul-file-info{flex:1;min-width:0}.ul-file-name{font-size:var(--font-sm);color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;margin:0;font-weight:600;overflow:hidden}.ul-file-meta{font-size:var(--font-xs);color:var(--text-tertiary);margin:2px 0 0;font-family:SF Mono,monospace}.ul-file-status{align-items:center;gap:var(--space-1);border-radius:var(--radius-full);font-size:var(--font-xs);color:#dc2626;white-space:nowrap;background:#fef2f2;border:1px solid #fca5a5;flex-shrink:0;padding:4px 12px;font-weight:600;display:inline-flex}.ul-file-status svg{width:13px;height:13px}.ul-file-status--ok{color:#15803d;background:#dcfce7;border-color:#86efac}.ul-btn-remove{border-radius:var(--radius-md);width:32px;height:32px;color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.ul-btn-remove:hover{color:var(--color-error);background:#fef2f2}.ul-btn-remove svg{width:15px;height:15px}.ul-form{gap:var(--space-4);padding:var(--space-5)var(--space-6);background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);flex-direction:column;display:flex}.ul-field{gap:var(--space-2);flex-direction:column;display:flex}.ul-label{align-items:center;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-primary);font-weight:700;display:flex}.ul-label svg{width:14px;height:14px;color:var(--color-primary)}.ul-label-hint{font-size:var(--font-xs);color:var(--text-tertiary);margin-left:auto;font-weight:400}.ul-input-wrap{background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);align-items:center;display:flex;position:relative}.ul-input-wrap:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #ff6b351a}.ul-input-wrap--err{border-color:var(--color-error)!important}.ul-input-wrap--err:focus-within{box-shadow:0 0 0 3px #ef44441a}.ul-input-wrap--ok{border-color:var(--color-success)}.ul-input{padding:var(--space-3)var(--space-4);font-size:var(--font-base);color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-family:SF Mono,Fira Code,Courier New,monospace}.ul-input::placeholder{color:var(--text-tertiary)}.ul-input:disabled{opacity:.55;cursor:not-allowed}.ul-eye-btn{padding:0 var(--space-3);color:var(--text-tertiary);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;flex-shrink:0;display:flex}.ul-eye-btn:hover{color:var(--color-primary)}.ul-eye-btn svg{width:16px;height:16px}.ul-field-hint{font-size:var(--font-xs);color:var(--text-tertiary);margin:0}.ul-error{align-items:center;gap:var(--space-3);padding:var(--space-3)var(--space-4);border-radius:var(--radius-lg);color:#dc2626;font-size:var(--font-sm);background:#fef2f2;border:1px solid #fecaca;display:flex}.ul-error svg:first-child{flex-shrink:0;width:16px;height:16px}.ul-error span{flex:1}.ul-error button{cursor:pointer;color:#dc2626;opacity:.6;transition:opacity var(--transition-fast);background:0 0;border:none;padding:0;display:flex}.ul-error button:hover{opacity:1}.ul-error button svg{width:14px;height:14px}.ul-btn-unlock{justify-content:center;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-4);color:var(--text-inverse);border-radius:var(--radius-lg);font-size:var(--font-lg);cursor:pointer;transition:all var(--transition-base);background:linear-gradient(135deg,#10b981,#059669);border:none;font-weight:700;display:flex;box-shadow:0 4px 16px #10b98140}.ul-btn-unlock:hover:not(:disabled){background:linear-gradient(135deg,#059669,#047857);box-shadow:0 6px 22px #10b98161}.ul-btn-unlock:disabled{background:var(--bg-tertiary);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none}.ul-btn-unlock--done{background:linear-gradient(135deg,#3b82f6,#2563eb)!important;box-shadow:0 4px 16px #3b82f64d!important}.ul-btn-unlock svg{width:20px;height:20px}.ul-privacy-note{justify-content:center;align-items:center;gap:var(--space-2);font-size:var(--font-xs);color:var(--text-tertiary);text-align:center;display:flex}.ul-privacy-note svg{width:12px;height:12px;color:var(--color-success)}.ul-features{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.ul-feature-card{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);display:flex}.ul-feature-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.ul-feature-icon{border-radius:var(--radius-md);background:var(--color-primary-light);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.ul-feature-icon svg{width:16px;height:16px;color:var(--color-primary)}.ul-feature-title{font-size:var(--font-sm);color:var(--text-primary);margin:0 0 2px;font-weight:700}.ul-feature-desc{font-size:var(--font-xs);color:var(--text-secondary);margin:0;line-height:1.55}@media (max-width:768px){.ul-file-status{display:none}.ul-form{padding:var(--space-4)}.ul-label-hint{display:none}.ul-features{grid-template-columns:1fr 1fr}}@media (max-width:480px){.ul-dropzone{padding:var(--space-8)var(--space-5)}.ul-features{grid-template-columns:1fr}}.pp-root{gap:var(--space-5);padding-top:var(--space-2);flex-direction:column;display:flex}.pp-dropzone{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-12)var(--space-8);background:var(--bg-secondary);border:2px dashed var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);-webkit-user-select:none;user-select:none;outline:none;flex-direction:column;display:flex}.pp-dropzone:hover,.pp-dropzone:focus-visible{border-color:var(--color-primary);background:var(--color-primary-light)}.pp-dropzone--active{background:var(--color-primary-light);border-style:solid;border-color:var(--color-primary);transform:scale(1.01);box-shadow:0 0 0 5px #ff6b3526}.pp-dropzone--compact{padding:var(--space-4)var(--space-5);cursor:default;border-style:solid;flex-direction:row}.pp-file-input{display:none}.pp-dropzone-icon{width:64px;height:64px;padding:var(--space-4);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-full);margin-bottom:var(--space-2);transition:transform var(--transition-base)}.pp-dropzone-icon:hover{transform:scale(1.1)rotate(5deg)}.pp-dropzone-icon svg{width:28px;height:28px}.pp-dropzone-text{text-align:center}.pp-dropzone-cta{font-size:var(--font-lg);color:var(--text-primary);margin:0;font-weight:700}.pp-dropzone-hint{font-size:var(--font-sm);color:var(--text-tertiary);margin:var(--space-1)0 0}.pp-file-row{align-items:center;gap:var(--space-4);flex-wrap:wrap;width:100%;display:flex}.pp-file-icon{border-radius:var(--radius-sm);background:#fef2f2;border:1.5px solid #fca5a5;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:1px;width:44px;height:52px;display:flex}.pp-file-icon svg{color:#ef4444;width:16px;height:16px}.pp-file-pdf-lbl{letter-spacing:.05em;color:#ef4444;font-size:.5rem;font-weight:800}.pp-file-info{flex:1;min-width:0}.pp-file-name{font-size:var(--font-sm);color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;margin:0;font-weight:600;overflow:hidden}.pp-file-meta{font-size:var(--font-xs);color:var(--text-tertiary);margin:2px 0 0;font-family:SF Mono,monospace}.pp-file-status{align-items:center;gap:var(--space-1);border-radius:var(--radius-full);font-size:var(--font-xs);background:var(--bg-secondary);border:1px solid var(--border-primary);color:var(--text-secondary);white-space:nowrap;flex-shrink:0;padding:4px 12px;font-weight:600;display:inline-flex}.pp-file-status svg{width:13px;height:13px}.pp-file-status--ok{color:#15803d;background:#dcfce7;border-color:#86efac}.pp-btn-remove{border-radius:var(--radius-md);width:32px;height:32px;color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.pp-btn-remove:hover{color:var(--color-error);background:#fef2f2}.pp-btn-remove svg{width:15px;height:15px}.pp-form{gap:var(--space-4);padding:var(--space-5)var(--space-6);background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);flex-direction:column;display:flex}.pp-field{gap:var(--space-2);flex-direction:column;display:flex}.pp-label{align-items:center;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-primary);font-weight:700;display:flex}.pp-label svg{width:14px;height:14px;color:var(--color-primary)}.pp-label-hint{font-size:var(--font-xs);color:var(--text-tertiary);margin-left:auto;font-weight:400}.pp-input-wrap{background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);align-items:center;display:flex;position:relative}.pp-input-wrap:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #ff6b351a}.pp-input-wrap--err{border-color:var(--color-error)!important}.pp-input-wrap--err:focus-within{box-shadow:0 0 0 3px #ef44441a}.pp-input-wrap--ok{border-color:var(--color-success)}.pp-input{padding:var(--space-3)var(--space-4);font-size:var(--font-base);color:var(--text-primary);background:0 0;border:none;outline:none;flex:1}.pp-input::placeholder{color:var(--text-tertiary)}.pp-eye-btn{padding:0 var(--space-3);color:var(--text-tertiary);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;flex-shrink:0;display:flex}.pp-eye-btn:hover{color:var(--color-primary)}.pp-eye-btn svg{width:16px;height:16px}.pp-input-check{padding:0 var(--space-3);color:var(--color-success);display:flex}.pp-input-x{padding:0 var(--space-3);color:var(--color-error);display:flex}.pp-input-check svg,.pp-input-x svg{width:16px;height:16px}.pp-field-err{font-size:var(--font-xs);color:var(--color-error);margin:0}.pp-strength{align-items:center;gap:var(--space-3);display:flex}.pp-strength-track{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:99px;flex:1;height:5px;overflow:hidden}.pp-strength-fill{height:100%;transition:background var(--transition-base);border-radius:99px}.pp-strength-label{font-size:var(--font-xs);text-align:right;min-width:44px;font-weight:700}.pp-strength-tip{font-size:var(--font-xs);color:var(--text-tertiary);margin:0}.pp-permissions{gap:var(--space-3);flex-direction:column;display:flex}.pp-permissions-title{align-items:center;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-primary);margin:0;font-weight:700;display:flex}.pp-permissions-title svg{width:14px;height:14px;color:var(--color-primary)}.pp-permissions-grid{gap:var(--space-3);grid-template-columns:repeat(3,1fr);display:grid}.pp-perm-card{align-items:center;gap:var(--space-3);padding:var(--space-3)var(--space-4);background:var(--bg-secondary);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;display:flex}.pp-perm-card:hover{border-color:var(--color-primary)}.pp-perm-card--on{background:var(--color-primary-light);border-color:var(--color-primary)}.pp-perm-checkbox{display:none}.pp-perm-icon{border-radius:var(--radius-md);background:var(--bg-primary);border:1px solid var(--border-primary);width:32px;height:32px;transition:all var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:flex}.pp-perm-icon svg{width:14px;height:14px;color:var(--text-tertiary)}.pp-perm-card--on .pp-perm-icon{background:var(--color-primary);border-color:var(--color-primary)}.pp-perm-card--on .pp-perm-icon svg{color:#fff}.pp-perm-text{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.pp-perm-label{font-size:var(--font-xs);color:var(--text-primary);font-weight:700}.pp-perm-desc{color:var(--text-tertiary);text-overflow:ellipsis;white-space:nowrap;font-size:.65rem;overflow:hidden}.pp-perm-toggle{background:var(--bg-primary);border:1.5px solid var(--border-secondary);width:20px;height:20px;transition:all var(--transition-fast);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.pp-perm-toggle svg{width:10px;height:10px;color:var(--text-tertiary)}.pp-perm-toggle--on{background:var(--color-primary);border-color:var(--color-primary)}.pp-perm-toggle--on svg{color:#fff}.pp-advanced{border:1px solid var(--border-primary);border-radius:var(--radius-lg);overflow:hidden}.pp-advanced-toggle{width:100%;padding:var(--space-3)var(--space-4);background:var(--bg-secondary);cursor:pointer;font-size:var(--font-sm);color:var(--text-secondary);transition:background var(--transition-fast);text-align:left;border:none;justify-content:space-between;align-items:center;font-weight:600;display:flex}.pp-advanced-toggle:hover{background:var(--bg-tertiary);color:var(--text-primary)}.pp-advanced-hint{font-size:var(--font-xs);color:var(--text-tertiary);font-weight:400}.pp-advanced-body{padding:var(--space-4);gap:var(--space-3);border-top:1px solid var(--border-primary);flex-direction:column;display:flex;overflow:hidden}.pp-advanced-note{align-items:flex-start;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);font-size:var(--font-xs);color:#92400e;background:#fef3c7;border:1px solid #fde68a;line-height:1.5;display:flex}.pp-advanced-note svg{flex-shrink:0;width:14px;height:14px;margin-top:1px}.pp-error{align-items:center;gap:var(--space-3);padding:var(--space-3)var(--space-4);border-radius:var(--radius-lg);color:#dc2626;font-size:var(--font-sm);background:#fef2f2;border:1px solid #fecaca;display:flex}.pp-error svg:first-child{flex-shrink:0;width:16px;height:16px}.pp-error span{flex:1}.pp-error button{cursor:pointer;color:#dc2626;opacity:.6;background:0 0;border:none;padding:0;display:flex}.pp-error button:hover{opacity:1}.pp-error button svg{width:14px;height:14px}.pp-btn-protect{justify-content:center;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-4);background:var(--gradient-primary);color:var(--text-inverse);border-radius:var(--radius-lg);font-size:var(--font-lg);cursor:pointer;transition:all var(--transition-base);border:none;font-weight:700;display:flex;box-shadow:0 4px 16px #ff6b3540}.pp-btn-protect:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary-hover));box-shadow:0 6px 22px #ff6b3561}.pp-btn-protect:disabled{background:var(--bg-tertiary);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none}.pp-btn-protect--done{background:linear-gradient(135deg,#10b981,#059669)!important;box-shadow:0 4px 16px #10b9814d!important}.pp-btn-protect svg{width:20px;height:20px}.pp-encrypt-badge{justify-content:center;align-items:center;gap:var(--space-2);font-size:var(--font-xs);color:var(--text-tertiary);text-align:center;display:flex}.pp-encrypt-badge svg{width:12px;height:12px;color:var(--color-success)}.pp-features{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.pp-feature-card{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);display:flex}.pp-feature-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.pp-feature-icon{border-radius:var(--radius-md);background:var(--color-primary-light);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.pp-feature-icon svg{width:16px;height:16px;color:var(--color-primary)}.pp-feature-title{font-size:var(--font-sm);color:var(--text-primary);margin:0 0 2px;font-weight:700}.pp-feature-desc{font-size:var(--font-xs);color:var(--text-secondary);margin:0;line-height:1.55}@media (max-width:768px){.pp-permissions-grid{grid-template-columns:1fr}.pp-file-status{display:none}.pp-form{padding:var(--space-4)}.pp-label-hint{display:none}.pp-features{grid-template-columns:1fr 1fr}}@media (max-width:480px){.pp-dropzone{padding:var(--space-8)var(--space-5)}.pp-perm-desc{white-space:normal}.pp-features{grid-template-columns:1fr}.pp-advanced-toggle{flex-direction:column;align-items:flex-start;gap:2px}}.mp-root{gap:var(--space-5);padding-top:var(--space-2);flex-direction:column;display:flex}.mp-dropzone{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-12)var(--space-8);background:var(--bg-secondary);border:3px dashed var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);-webkit-user-select:none;user-select:none;outline:none;flex-direction:column;display:flex;position:relative}.mp-dropzone:hover,.mp-dropzone:focus-visible{border-color:var(--color-primary);background:var(--color-primary-light)}.mp-dropzone--active{background:var(--color-primary-light);border-style:solid;border-color:var(--color-primary);transform:scale(1.01);box-shadow:0 0 0 5px #ff6b3526}.mp-dropzone--compact{padding:var(--space-5)var(--space-6);gap:var(--space-4);flex-direction:row;justify-content:flex-start}.mp-dropzone--compact .mp-dropzone-icon{width:40px;height:40px;font-size:1.2rem}.mp-dropzone--compact .mp-dropzone-cta{font-size:var(--font-sm);margin:0}.mp-file-input{display:none}.mp-dropzone-icon{background:var(--gradient-primary);color:#fff;width:64px;height:64px;box-shadow:var(--shadow-sm);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:1.75rem;display:flex}.mp-dropzone-icon svg{width:28px;height:28px}.mp-dropzone-text{align-items:center;gap:var(--space-1);text-align:center;flex-direction:column;display:flex}.mp-dropzone--compact .mp-dropzone-text{text-align:left;align-items:flex-start}.mp-dropzone-cta{font-size:var(--font-lg);color:var(--text-primary);margin:0;font-weight:700}.mp-dropzone-hint{font-size:var(--font-sm);color:var(--text-tertiary);margin:0}.mp-error{align-items:center;gap:var(--space-3);padding:var(--space-3)var(--space-4);border-radius:var(--radius-lg);color:#dc2626;font-size:var(--font-sm);background:#fef2f2;border:1px solid #fecaca;display:flex}.mp-error svg:first-child{flex-shrink:0;width:16px;height:16px}.mp-error span{flex:1}.mp-error button{cursor:pointer;color:#dc2626;opacity:.6;transition:opacity var(--transition-fast);background:0 0;border:none;padding:0;display:flex}.mp-error button:hover{opacity:1}.mp-error button svg{width:14px;height:14px}.mp-files-section{gap:var(--space-4);background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);flex-direction:column;display:flex}.mp-files-header{justify-content:space-between;align-items:center;gap:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-primary);flex-wrap:wrap;display:flex}.mp-files-header-left{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.mp-files-title{align-items:center;gap:var(--space-2);font-size:var(--font-base);color:var(--text-primary);font-weight:700;display:flex}.mp-files-title svg{width:16px;height:16px;color:var(--color-primary)}.mp-files-count{background:var(--color-primary);color:var(--text-inverse);border-radius:var(--radius-full);font-size:var(--font-xs);padding:1px 8px;font-weight:700}.mp-files-meta{font-size:var(--font-sm);color:var(--text-tertiary);font-family:SF Mono,monospace}.mp-files-header-right{align-items:center;gap:var(--space-3);display:flex}.mp-drag-hint{align-items:center;gap:var(--space-1);font-size:var(--font-xs);color:var(--text-tertiary);display:flex}.mp-drag-hint svg{width:12px;height:12px}.mp-btn-clear{align-items:center;gap:var(--space-1);padding:var(--space-1)var(--space-3);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-xs);cursor:pointer;transition:all var(--transition-fast);font-weight:500;display:inline-flex}.mp-btn-clear:hover{border-color:var(--color-error);color:var(--color-error)}.mp-btn-clear svg{width:12px;height:12px}.mp-col-labels{align-items:center;gap:var(--space-3);padding:0 var(--space-2);display:flex}.mp-col-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);font-size:.65rem;font-weight:700}.mp-col-pages{text-align:center;flex-shrink:0;width:52px}.mp-col-size{text-align:right;flex-shrink:0;width:72px}@media (max-width:540px){.mp-col-labels,.mp-col-size{display:none}}.mp-file-list{gap:var(--space-2);flex-direction:column;display:flex}.mp-file-card{align-items:center;gap:var(--space-3);padding:var(--space-3)var(--space-3);background:var(--bg-secondary);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);transition:all var(--transition-fast);cursor:grab;display:flex}.mp-file-card:hover{background:var(--bg-tertiary);border-color:var(--border-secondary);box-shadow:var(--shadow-sm)}.mp-file-card--dragging{opacity:.5;border-color:var(--color-primary);cursor:grabbing;box-shadow:0 0 0 2px #ff6b3533}.mp-file-card--invalid{background:#fef2f2;border-color:#fca5a5}.mp-file-order{background:var(--bg-primary);border:1px solid var(--border-primary);width:22px;height:22px;color:var(--text-tertiary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.65rem;font-weight:700;display:flex}.mp-file-icon{border-radius:var(--radius-sm);background:#fef2f2;border:1.5px solid #fca5a5;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:1px;width:36px;height:44px;display:flex}.mp-file-icon svg{color:#ef4444;width:14px;height:14px}.mp-file-pdf-label{letter-spacing:.05em;color:#ef4444;font-size:.5rem;font-weight:800;line-height:1}.mp-file-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.mp-file-name{font-size:var(--font-sm);color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;margin:0;font-weight:600;overflow:hidden}.mp-file-errmsg{font-size:var(--font-xs);color:#dc2626;margin:0}.mp-page-badge{background:var(--color-primary-light);color:var(--color-primary);border-radius:var(--radius-full);border:1px solid #ff6b3540;flex-shrink:0;justify-content:center;align-items:center;width:52px;padding:2px 7px;font-family:SF Mono,monospace;font-size:.7rem;font-weight:700;display:inline-flex}.mp-page-badge--na{background:var(--bg-secondary);color:var(--text-tertiary);border-color:var(--border-primary)}.mp-file-size{font-size:var(--font-xs);color:var(--text-tertiary);text-align:right;flex-shrink:0;width:72px;font-family:SF Mono,monospace}.mp-card-status{flex-shrink:0;width:16px;height:16px}.mp-card-status--ok{color:var(--color-success)}.mp-card-status--err{color:var(--color-error)}.mp-card-status--warn{color:var(--color-warning)}.mp-card-spinner{border:2px solid var(--border-primary);border-top-color:var(--color-primary);border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.7s linear infinite mp-spin}@keyframes mp-spin{to{transform:rotate(360deg)}}.mp-file-arrows{flex-direction:column;flex-shrink:0;gap:1px;display:flex}.mp-arrow-btn{border-radius:var(--radius-sm);width:22px;height:22px;color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.mp-arrow-btn svg{width:11px;height:11px}.mp-arrow-btn:hover:not(:disabled){background:var(--bg-primary);color:var(--color-primary)}.mp-arrow-btn:disabled{opacity:.2;cursor:not-allowed}.mp-drag-handle{color:var(--text-tertiary);cursor:grab;padding:var(--space-1);transition:color var(--transition-fast);flex-shrink:0;align-items:center;display:flex}.mp-drag-handle:hover{color:var(--color-primary)}.mp-drag-handle svg{width:14px;height:14px}.mp-btn-remove{border-radius:var(--radius-sm);width:28px;height:28px;color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.mp-btn-remove svg{width:14px;height:14px}.mp-btn-remove:hover:not(:disabled){color:var(--color-error);background:#fef2f2}.mp-btn-remove:disabled{opacity:.3;cursor:not-allowed}.mp-skel{background:linear-gradient(90deg,var(--color-slate-100)0%,var(--color-slate-200)50%,var(--color-slate-100)100%);border-radius:var(--radius-full);background-size:200% 100%;animation:1.4s infinite mp-shimmer;display:inline-block}.mp-skel--badge{width:48px;height:20px}@keyframes mp-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.mp-flow-hint{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-md);font-size:var(--font-xs);color:var(--text-secondary);display:flex}.mp-flow-icon{width:14px;height:14px;color:var(--color-primary);flex-shrink:0}.mp-output-row{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.mp-output-label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;font-weight:600}.mp-output-input-wrap{background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);align-items:center;gap:0;display:flex;overflow:hidden}.mp-output-input-wrap:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #ff6b351a}.mp-output-input{padding:var(--space-2)var(--space-3);font-size:var(--font-sm);color:var(--text-primary);background:0 0;border:none;outline:none;min-width:160px;font-family:SF Mono,Fira Code,monospace}.mp-output-input:disabled{opacity:.5;cursor:not-allowed}.mp-output-ext{padding:var(--space-2)var(--space-3)var(--space-2)0;font-size:var(--font-sm);color:var(--text-secondary);background:var(--bg-secondary);border-left:1px solid var(--border-primary);padding-left:var(--space-2);font-family:SF Mono,Fira Code,monospace;font-weight:600}.mp-merge-summary{align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.mp-summary-stat{flex-direction:column;align-items:center;gap:1px;display:flex}.mp-summary-val{font-size:var(--font-xl);color:var(--color-primary);font-family:SF Mono,monospace;font-weight:800;line-height:1}.mp-summary-lbl{font-size:var(--font-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em}.mp-summary-arrow{font-size:var(--font-lg);color:var(--text-tertiary);font-weight:700}.mp-summary-size{font-size:var(--font-sm);color:var(--text-secondary);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-full);margin-left:auto;padding:2px 10px;font-family:SF Mono,monospace}.mp-progress-wrap{gap:var(--space-2);flex-direction:column;display:flex;overflow:hidden}.mp-progress-label{font-size:var(--font-xs);color:var(--text-secondary);justify-content:space-between;font-weight:500;display:flex}.mp-progress-pct{color:var(--color-primary);font-family:SF Mono,monospace;font-weight:700}.mp-progress-track{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:99px;height:6px;overflow:hidden}.mp-progress-fill{background:var(--gradient-primary);border-radius:99px;height:100%;transition:width .4s}.mp-btn-merge{justify-content:center;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-4);background:var(--gradient-primary);color:var(--text-inverse);border-radius:var(--radius-lg);font-size:var(--font-lg);cursor:pointer;transition:all var(--transition-base);border:none;font-weight:700;display:flex;box-shadow:0 4px 16px #ff6b3540}.mp-btn-merge:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary-hover));box-shadow:0 6px 22px #ff6b3561}.mp-btn-merge:disabled{background:var(--bg-tertiary);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none}.mp-btn-merge--done{background:linear-gradient(135deg,#10b981,#059669)!important;box-shadow:0 4px 16px #10b9814d!important}.mp-btn-merge svg{width:20px;height:20px}.mp-spinner{border:2.5px solid #ffffff4d;border-top-color:#fff;border-radius:50%;flex-shrink:0;width:18px;height:18px;animation:.7s linear infinite mp-spin}.mp-merge-hint{align-items:center;gap:var(--space-2);font-size:var(--font-xs);color:var(--text-tertiary);justify-content:center;margin:0;display:flex}.mp-merge-hint svg{width:12px;height:12px}.mp-features{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.mp-feature-card{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);display:flex}.mp-feature-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.mp-feature-icon{border-radius:var(--radius-md);background:var(--color-primary-light);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.mp-feature-icon svg{width:16px;height:16px;color:var(--color-primary)}.mp-feature-label{font-size:var(--font-sm);color:var(--text-primary);margin:0 0 2px;font-weight:700}.mp-feature-desc{font-size:var(--font-xs);color:var(--text-secondary);margin:0;line-height:1.5}@media (max-width:768px){.mp-files-header{flex-direction:column;align-items:flex-start}.mp-files-header-right{justify-content:space-between;width:100%}.mp-drag-hint{display:none}.mp-merge-summary{gap:var(--space-2)}.mp-summary-size{text-align:center;justify-content:center;width:100%;margin-left:0}.mp-output-row{flex-direction:column;align-items:flex-start}.mp-output-input{min-width:120px}.mp-features{grid-template-columns:1fr 1fr}}@media (max-width:480px){.mp-dropzone{padding:var(--space-8)var(--space-5)}.mp-file-card{gap:var(--space-2);padding:var(--space-2)}.mp-file-order,.mp-file-size{display:none}.mp-features{grid-template-columns:1fr}.mp-files-section{padding:var(--space-4)}}.jc-root{gap:var(--space-5);padding-top:var(--space-2);flex-direction:column;display:flex}.jc-topbar{align-items:center;gap:var(--space-5);padding:var(--space-4)var(--space-5);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.jc-mode-switcher{align-items:center;gap:var(--space-2);background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);padding:4px;display:flex}.jc-mode-btn{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;background:0 0;border:none;font-weight:600;display:inline-flex}.jc-mode-btn svg{width:14px;height:14px}.jc-mode-btn:hover{color:var(--color-primary)}.jc-mode-btn--active{background:var(--gradient-primary);box-shadow:0 2px 8px #ff6b3540;color:var(--text-inverse)!important}.jc-mode-swap{background:var(--bg-secondary);border:1px solid var(--border-primary);cursor:pointer;width:32px;height:32px;color:var(--text-secondary);transition:all var(--transition-fast);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.jc-mode-swap:hover{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary)}.jc-mode-swap svg{width:14px;height:14px}.jc-options{align-items:center;gap:var(--space-5);flex-wrap:wrap;margin-left:auto;display:flex}.jc-option{align-items:center;gap:var(--space-2);display:flex}.jc-option-label{align-items:center;gap:var(--space-1);font-size:var(--font-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;font-weight:600;display:flex}.jc-option-label svg{width:11px;height:11px}.jc-option-select{padding:var(--space-1)var(--space-3);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;transition:border-color var(--transition-fast);outline:none}.jc-option-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px #ff6b351a}.jc-checkbox-row{align-items:center;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;white-space:nowrap;display:flex}.jc-checkbox-row input[type=checkbox]{appearance:none;border:2px solid var(--color-primary);cursor:pointer;background:var(--bg-primary);width:16px;height:16px;transition:background var(--transition-fast);border-radius:4px;flex-shrink:0;position:relative}.jc-checkbox-row input[type=checkbox]:checked{background:var(--color-primary)}.jc-checkbox-row input[type=checkbox]:checked:after{content:"✓";color:#fff;font-size:10px;position:absolute;top:-1px;left:2px}.jc-editors{gap:var(--space-4);grid-template-columns:1fr 1fr;align-items:start;display:grid}@media (max-width:768px){.jc-editors{grid-template-columns:1fr}}.jc-panel{background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);flex-direction:column;display:flex;overflow:hidden}.jc-panel-header{padding:var(--space-3)var(--space-4);background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.jc-panel-title{align-items:center;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-primary);text-transform:uppercase;letter-spacing:.06em;font-weight:700;display:flex}.jc-panel-title svg{width:14px;height:14px;color:var(--color-primary)}.jc-panel-actions{gap:var(--space-2);display:flex}.jc-btn-ghost{align-items:center;gap:var(--space-1);padding:var(--space-1)var(--space-3);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-xs);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;font-weight:500;display:inline-flex}.jc-btn-ghost svg{width:12px;height:12px}.jc-btn-ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}.jc-btn-ghost--danger:hover{border-color:var(--color-error);color:var(--color-error)}.jc-btn-ghost--done{color:#15803d!important;background:#dcfce7!important;border-color:#86efac!important}.jc-textarea{width:100%;min-height:320px;padding:var(--space-4);background:var(--bg-primary);color:var(--text-primary);resize:vertical;caret-color:var(--color-primary);border:none;outline:none;font-family:SF Mono,Fira Code,Courier New,monospace;font-size:.8125rem;line-height:1.7}.jc-textarea::placeholder{color:var(--text-tertiary);font-style:italic}.jc-input-stats{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);background:var(--bg-secondary);border-top:1px solid var(--border-primary);font-size:var(--font-xs);color:var(--text-tertiary);font-family:SF Mono,monospace;display:flex}.jc-stats-sep{opacity:.4}.jc-empty-output{justify-content:center;align-items:center;gap:var(--space-3);min-height:320px;padding:var(--space-8);text-align:center;background:var(--bg-secondary);flex-direction:column;display:flex}.jc-empty-icon{width:40px;height:40px;color:var(--text-tertiary);opacity:.4}.jc-empty-output p{font-size:var(--font-sm);color:var(--text-secondary);margin:0;font-weight:600}.jc-empty-output span{font-size:var(--font-xs);color:var(--text-tertiary)}.jc-output-code{background:var(--color-slate-900);max-height:320px;overflow:auto}.jc-output-code pre{padding:var(--space-4);color:var(--color-slate-300);margin:0;font-family:SF Mono,Fira Code,monospace;font-size:.8125rem;line-height:1.7}.jc-output-code code{font-family:inherit}.jc-key{color:#60a5fa}.jc-str{color:#86efac}.jc-num{color:#fbbf24}.jc-bool{color:#f472b6}.jc-null{color:#94a3b8;font-style:italic}.jc-output-stats{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);background:var(--color-slate-800);border-top:1px solid var(--color-slate-700);font-size:var(--font-xs);color:var(--color-slate-400);font-family:SF Mono,monospace;display:flex}.jc-error{align-items:center;gap:var(--space-3);padding:var(--space-3)var(--space-4);border-radius:var(--radius-lg);color:#dc2626;font-size:var(--font-sm);background:#fef2f2;border:1px solid #fecaca;display:flex}.jc-error svg{flex-shrink:0;width:16px;height:16px}.jc-btn-convert{justify-content:center;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-4);background:var(--gradient-primary);color:var(--text-inverse);border-radius:var(--radius-lg);font-size:var(--font-lg);cursor:pointer;transition:all var(--transition-base);border:none;font-weight:700;display:flex;box-shadow:0 4px 16px #ff6b3540}.jc-btn-convert:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary-hover));box-shadow:0 6px 22px #ff6b3561}.jc-btn-convert:disabled{background:var(--bg-tertiary);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none}.jc-btn-convert svg{width:20px;height:20px}.jc-spinner{border:2.5px solid #ffffff4d;border-top-color:#fff;border-radius:50%;flex-shrink:0;width:18px;height:18px;animation:.7s linear infinite jc-spin}@keyframes jc-spin{to{transform:rotate(360deg)}}.jc-preview{background:var(--bg-primary);border:1.5px solid var(--color-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden}.jc-preview-header{padding:var(--space-3)var(--space-5);background:linear-gradient(135deg,var(--color-primary-light)0%,var(--bg-secondary)100%);border-bottom:1px solid var(--border-primary);justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.jc-preview-title{align-items:center;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-primary);text-transform:uppercase;letter-spacing:.07em;font-weight:700;display:flex}.jc-preview-title svg{width:14px;height:14px;color:var(--color-primary)}.jc-preview-meta{font-size:var(--font-xs);color:var(--text-tertiary);font-family:SF Mono,monospace}.jc-table-wrap{-webkit-overflow-scrolling:touch;max-height:340px;overflow:auto}.jc-table{border-collapse:collapse;width:100%;font-size:var(--font-sm);white-space:nowrap}.jc-table thead tr{background:var(--color-slate-800);z-index:1;position:sticky;top:0}.jc-table thead th{padding:var(--space-2)var(--space-4);text-align:left;font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--color-slate-300);border-right:1px solid var(--color-slate-700);white-space:nowrap;font-weight:700}.jc-table thead th:last-child{border-right:none}.jc-table-rownum{font-variant-numeric:tabular-nums;width:42px;min-width:42px;text-align:center!important;color:var(--color-slate-500)!important;background:var(--color-slate-800)!important;border-right:1px solid var(--color-slate-700)!important}.jc-table tbody tr{border-bottom:1px solid var(--border-primary);transition:background var(--transition-fast)}.jc-table tbody tr:nth-child(2n){background:var(--bg-secondary)}.jc-table tbody tr:hover{background:var(--color-primary-light)}.jc-table tbody td{padding:var(--space-2)var(--space-4);color:var(--text-primary);border-right:1px solid var(--border-primary);text-overflow:ellipsis;max-width:280px;overflow:hidden}.jc-table tbody td:last-child{border-right:none}.jc-cell-num{color:#b45309;font-family:SF Mono,monospace;font-weight:600}.jc-cell-bool{color:#7c3aed;font-family:SF Mono,monospace;font-weight:600}.jc-cell-null{color:var(--text-tertiary);font-style:italic}.jc-preview-raw{background:var(--color-slate-900);max-height:300px;overflow:auto}.jc-preview-raw pre{padding:var(--space-4);color:var(--color-slate-300);margin:0;font-family:SF Mono,Fira Code,monospace;font-size:.8125rem;line-height:1.7}.jc-info-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.jc-info-card{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);display:flex}.jc-info-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.jc-info-icon{border-radius:var(--radius-md);background:var(--color-primary-light);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.jc-info-icon svg{width:16px;height:16px;color:var(--color-primary)}.jc-info-title{font-size:var(--font-sm);color:var(--text-primary);margin:0 0 var(--space-1);font-weight:700}.jc-info-desc{font-size:var(--font-xs);color:var(--text-secondary);margin:0;line-height:1.55}@media (max-width:768px){.jc-topbar{flex-direction:column;align-items:flex-start}.jc-options{width:100%;margin-left:0}.jc-mode-switcher{width:100%}.jc-mode-btn{flex:1;justify-content:center}.jc-table thead th,.jc-table tbody td{padding:var(--space-2)var(--space-3);font-size:var(--font-xs)}.jc-info-grid{grid-template-columns:1fr}}@media (max-width:480px){.jc-textarea{min-height:220px;font-size:.75rem}.jc-output-code{max-height:220px}.jc-preview-header{flex-direction:column;align-items:flex-start}.jc-table-wrap{max-height:260px}}.jf-root{gap:var(--space-4);padding-top:var(--space-2);flex-direction:column;display:flex}.jf-controls{align-items:center;gap:var(--space-4);padding:var(--space-3)var(--space-4);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.jf-mode-tabs{background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);align-items:center;gap:3px;padding:4px;display:flex}.jf-mode-tab{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;background:0 0;border:none;font-weight:600;display:inline-flex}.jf-mode-tab svg{width:13px;height:13px}.jf-mode-tab:hover{color:var(--color-primary)}.jf-mode-tab--active{background:var(--gradient-primary);box-shadow:0 2px 8px #ff6b3540;color:var(--text-inverse)!important}.jf-indent-wrap{align-items:center;gap:var(--space-2);display:flex;overflow:hidden}.jf-indent-label{font-size:var(--font-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;font-weight:600}.jf-indent-select{padding:var(--space-1)var(--space-3);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;transition:border-color var(--transition-fast);outline:none}.jf-indent-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px #ff6b351a}.jf-controls-right{align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-left:auto;display:flex}.jf-btn-ghost{align-items:center;gap:var(--space-1);padding:var(--space-2)var(--space-3);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-xs);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;font-weight:500;display:inline-flex}.jf-btn-ghost svg{width:12px;height:12px}.jf-btn-ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}.jf-btn-ghost--danger:hover{border-color:var(--color-error);color:var(--color-error)}.jf-btn-ghost--done{color:#15803d!important;background:#dcfce7!important;border-color:#86efac!important}.jf-panel{background:var(--bg-primary);border:1.5px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}.jf-panel-header{padding:var(--space-3)var(--space-4);background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.jf-panel-header--output{background:linear-gradient(135deg,var(--color-slate-800)0%,var(--color-slate-900)100%);border-bottom-color:var(--color-slate-700)}.jf-panel-title{align-items:center;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-primary);text-transform:uppercase;letter-spacing:.06em;font-weight:700;display:flex}.jf-panel-header--output .jf-panel-title{color:var(--color-slate-300)}.jf-panel-title svg{width:14px;height:14px;color:var(--color-primary)}.jf-panel-header-right{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.jf-panel-actions{gap:var(--space-2);display:flex}.jf-valid-badge{border-radius:var(--radius-full);font-size:var(--font-xs);border:1px solid;align-items:center;gap:5px;padding:3px 10px;font-weight:700;display:inline-flex}.jf-valid-badge svg{width:11px;height:11px}.jf-valid-badge--ok{color:#15803d;background:#dcfce7;border-color:#86efac}.jf-valid-badge--err{color:#dc2626;background:#fef2f2;border-color:#fca5a5}.jf-input-meta{font-size:var(--font-xs);color:var(--text-tertiary);font-family:SF Mono,monospace}.jf-textarea{width:100%;min-height:360px;padding:var(--space-5)var(--space-5);background:var(--bg-primary);color:var(--text-primary);resize:vertical;caret-color:var(--color-primary);tab-size:2;border:none;outline:none;font-family:SF Mono,Fira Code,Courier New,monospace;font-size:.8125rem;line-height:1.75}.jf-textarea::placeholder{color:var(--text-tertiary);font-style:italic}.jf-textarea--invalid{border-left:3px solid var(--color-error);background:#fef9f9}.jf-errors{background:#fef2f2;border-top:1px solid #fecaca;overflow:hidden}.jf-error-item{align-items:flex-start;gap:var(--space-3);padding:var(--space-3)var(--space-4);border-bottom:1px solid #fecaca;display:flex}.jf-error-item:last-child{border-bottom:none}.jf-error-item>svg{width:15px;height:15px;color:var(--color-error);flex-shrink:0;margin-top:1px}.jf-error-msg{font-size:var(--font-sm);color:#dc2626;margin:0;font-family:SF Mono,monospace;font-weight:500}.jf-error-loc{font-size:var(--font-xs);color:#ef4444;opacity:.8;margin:2px 0 0;font-family:SF Mono,monospace}.jf-stats{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);align-items:center;gap:0;display:flex;overflow:hidden}.jf-stat{padding:var(--space-3)var(--space-4);border-right:1px solid var(--border-primary);transition:background var(--transition-fast);flex-direction:column;flex:1;align-items:center;gap:2px;display:flex}.jf-stat:last-child{border-right:none}.jf-stat:hover{background:var(--color-primary-light)}.jf-stat-val{font-size:var(--font-xl);color:var(--color-primary);font-family:SF Mono,monospace;font-weight:800;line-height:1}.jf-stat-lbl{font-size:var(--font-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.07em}.jf-btn-format{justify-content:center;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-4);background:var(--gradient-primary);color:var(--text-inverse);border-radius:var(--radius-lg);font-size:var(--font-lg);cursor:pointer;transition:all var(--transition-base);border:none;font-weight:700;display:flex;box-shadow:0 4px 16px #ff6b3540}.jf-btn-format:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary-hover));box-shadow:0 6px 22px #ff6b3561}.jf-btn-format:disabled{background:var(--bg-tertiary);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none}.jf-btn-format svg{width:20px;height:20px}.jf-output-code{background:var(--color-slate-900);max-height:520px;overflow:auto}.jf-output-code pre{padding:var(--space-5);color:var(--color-slate-300);margin:0;font-family:SF Mono,Fira Code,Courier New,monospace;font-size:.8125rem;line-height:1.75}.jf-output-code code{font-family:inherit}.jf-key{color:#60a5fa}.jf-str{color:#86efac}.jf-num{color:#fbbf24}.jf-bool{color:#f472b6}.jf-null{color:#94a3b8;font-style:italic}.jf-size-compare{align-items:center;gap:var(--space-2);font-size:var(--font-xs);color:var(--color-slate-400);font-family:SF Mono,monospace;display:flex}.jf-size-arrow{opacity:.5}.jf-size-savings{color:#34d399;border-radius:var(--radius-full);background:#10b98126;border:1px solid #10b98140;padding:2px 8px;font-size:.65rem;font-weight:700}.jf-validate-ok{align-items:center;gap:var(--space-4);padding:var(--space-8)var(--space-6);background:linear-gradient(135deg,#f0fdf4 0%,var(--bg-primary)100%);display:flex}.jf-validate-icon{background:#dcfce7;border:1.5px solid #86efac;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;display:flex}.jf-validate-icon svg{color:#15803d;width:24px;height:24px}.jf-validate-title{font-size:var(--font-lg);color:#15803d;margin:0 0 var(--space-1);font-weight:700}.jf-validate-desc{font-size:var(--font-sm);color:#166534;opacity:.75;margin:0;font-family:SF Mono,monospace}@media (max-width:768px){.jf-controls{align-items:flex-start;gap:var(--space-3);flex-direction:column}.jf-controls-right{margin-left:0}.jf-mode-tabs{width:100%}.jf-mode-tab{font-size:var(--font-xs);padding:var(--space-2);flex:1;justify-content:center}.jf-stats{flex-wrap:wrap}.jf-stat{border-right:none;border-bottom:1px solid var(--border-primary);min-width:80px}.jf-panel-header{flex-direction:column;align-items:flex-start}.jf-panel-header-right{justify-content:space-between;width:100%}.jf-size-compare{display:none}}@media (max-width:480px){.jf-textarea{min-height:240px;font-size:.75rem}.jf-output-code{max-height:320px}.jf-output-code pre{padding:var(--space-4);font-size:.75rem}.jf-validate-ok{text-align:center;padding:var(--space-6);flex-direction:column}}