:root{--afro-blue: var(--color-primary);--afro-dark: #0f1419}.tool-hero{background: linear-gradient(135deg,var(--afro-dark) 0%,#1a1f2e 100%);padding: 44px 0 36px;position: relative;overflow: hidden}.tool-hero::after{content: '';position: absolute;right: 5%;top: 50%;transform: translateY(-50%);font-size: 8rem;opacity: 0.06;pointer-events: none}.tool-hero-inner{max-width: 1200px;margin: 0 auto;padding: 0 24px;position: relative}.breadcrumb{font-size: 0.72rem;font-weight: 500;color: rgba(255,255,255,0.3);letter-spacing: 0.08em;text-transform: uppercase;margin-bottom: 14px}.breadcrumb a{color: rgba(255,255,255,0.3);text-decoration: none}.breadcrumb span{color: var(--afro-blue)}h1{font-size: clamp(1.6rem,4vw,2.4rem);font-weight: 800;color: #fff;letter-spacing: -0.02em;line-height: 1.1;margin-bottom: 10px}h1 em{color: var(--afro-blue);font-style: normal}.hero-sub{font-size: 0.88rem;color: rgba(255,255,255,0.45);line-height: 1.6;max-width: 560px;margin-bottom: 14px}.hero-badges{display: flex;flex-wrap: wrap;gap: 7px;margin-bottom: 6px}.badge{display: inline-flex;align-items: center;gap: 5px;padding: 4px 11px;border-radius: 4px;font-size: 0.68rem;font-weight: 700;letter-spacing: 0.05em}.b-green{background: rgba(0,113,227,0.18);color: var(--color-primary);border: 1px solid rgba(0,113,227,0.38)}.tool-main{padding: 28px 0 72px}.tool-main-inner{max-width: 1200px;margin: 0 auto;padding: 0 24px;display: grid;grid-template-columns: 1fr 360px;gap: 22px;align-items: start}.card{background: #fff;border: 1px solid #e5e7eb;border-radius: 10px;overflow: hidden;box-shadow: 0 1px 8px rgba(0,0,0,0.05)}.card+.card{margin-top: 18px}.card-head{padding: 15px 22px;border-bottom: 1px solid #EFF6FF;display: flex;align-items: center;justify-content: space-between;background: #F5F9FF}.card-title{font-size: 0.72rem;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: #0a4018}.card-body{padding: 22px}.drop-zone{border: 2px dashed #e5e7eb;border-radius: 8px;padding: 40px 20px;text-align: center;cursor: pointer;transition: all 0.2s;background: #EFF6FF}.drop-zone:hover{border-color: var(--afro-blue);background: #EFF6FF}.drop-zone.dragover{border-color: var(--afro-blue);background: #EFF6FF;box-shadow: 0 0 0 3px rgba(0,113,227,0.1)}.drop-icon{font-size: 2.4rem;margin-bottom: 8px}.drop-text{font-size: 0.85rem;color: #244d2c;font-weight: 600;margin-bottom: 4px}.drop-hint{font-size: 0.72rem;color: #6B8CAE}#fileInput{display: none}.field{margin-bottom: 18px}.f-label{display: flex;justify-content: space-between;align-items: center;margin-bottom: 6px}.f-label-text{font-size: 0.75rem;font-weight: 700;letter-spacing: 0.04em;color: #0d2813}.f-input{width: 100%;padding: 11px 13px;background: #EFF6FF;border: 1.5px solid #e5e7eb;border-radius: 7px;font-size: 1rem;font-weight: 600;color: #0d2813;outline: none;font-family: 'DM Sans',sans-serif}.f-input:focus{border-color: var(--afro-blue);background: #fff;box-shadow: 0 0 0 3px rgba(0,113,227,0.1)}.template-grid{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 8px;margin-bottom: 12px}.template-btn{padding: 10px 12px;background: #EFF6FF;border: 1.5px solid #BFDBFE;border-radius: 7px;cursor: pointer;transition: all 0.15s;font-size: 0.72rem;font-weight: 700;color: #244d2c;font-family: 'DM Sans',sans-serif}.template-btn:hover{border-color: var(--afro-blue)}.template-btn.active{border-color: var(--afro-blue);background: var(--afro-blue);color: #fff}.context-note{padding: 12px 14px;border-radius: 8px;background: #F5F9FF;border: 1px solid #dbeafe;color: #244d2c;font-size: 0.78rem;line-height: 1.6}.context-note strong{color: #0d2813}.slider-wrap{margin-bottom: 18px}.slider-row{display: flex;justify-content: space-between;align-items: center;margin-bottom: 8px}.slider-label{font-size: 0.75rem;font-weight: 700;color: #0d2813}.slider-val{font-size: 0.92rem;font-weight: 800;color: var(--afro-blue)}input[type=range]{-webkit-appearance: none;width: 100%;height: 5px;border-radius: 3px;outline: none;cursor: pointer;background: #e5e7eb}input[type=range]::-webkit-slider-thumb{-webkit-appearance: none;width: 18px;height: 18px;background: var(--afro-blue);border-radius: 50%;border: 2.5px solid #fff;box-shadow: 0 1px 6px rgba(0,113,227,0.35);cursor: pointer}input[type=range]::-moz-range-thumb{width: 18px;height: 18px;background: var(--afro-blue);border-radius: 50%;border: 2.5px solid #fff;box-shadow: 0 1px 6px rgba(0,113,227,0.35);cursor: pointer}.calc-btn{width: 100%;padding: 14px;background: var(--afro-blue);color: #fff;border: none;border-radius: 8px;font-size: 0.9rem;font-weight: 700;letter-spacing: 0.03em;cursor: pointer;transition: all 0.18s;margin-top: 8px;font-family: 'DM Sans',sans-serif}.calc-btn:hover:not(:disabled){background: #0059B3;transform: translateY(-1px);box-shadow: 0 6px 20px rgba(0,113,227,0.3)}.comparison{display: grid;grid-template-columns: 1fr 1fr;gap: 12px;margin-bottom: 18px}.comp-box{background: #F5F9FF;border: 1px solid #e5e7eb;border-radius: 8px;padding: 12px;text-align: center}.comp-label{font-size: 0.68rem;font-weight: 700;color: #0a4018;letter-spacing: 0.05em;text-transform: uppercase;margin-bottom: 8px}.comp-size{font-size: 1.2rem;font-weight: 800;color: #0d2813;margin-bottom: 4px}.comp-percent{font-size: 0.8rem;color: #2563EB;font-weight: 700}.preview-img{max-width: 100%;max-height: 300px;border-radius: 8px;border: 1px solid #e5e7eb;margin-bottom: 12px}.action-row{display: grid;grid-template-columns: 1fr;gap: 8px;padding: 0 22px 22px}.act-btn{padding: 10px;font-size: 0.72rem;font-weight: 700;border-radius: 6px;cursor: pointer;transition: all 0.15s;display: flex;align-items: center;justify-content: center;gap: 6px;font-family: 'DM Sans',sans-serif;background: rgba(0,113,227,0.1);border: 1.5px solid rgba(0,113,227,0.35);color: #1a5c3a}.act-btn:hover{background: rgba(0,113,227,0.2)}.sidebar{display: flex;flex-direction: column;gap: 16px}.info-card{background: #F5F9FF;border: 1px solid #e5e7eb;border-radius: 10px;padding: 16px}.info-title{font-size: 0.72rem;font-weight: 700;color: #0a4018;letter-spacing: 0.08em;text-transform: uppercase;margin-bottom: 10px}.info-text{font-size: 0.8rem;color: #244d2c;line-height: 1.6}.gold-workspace{display: grid;grid-template-columns: minmax(0,1fr) 370px;gap: 20px;align-items: start}.gold-stack{display: flex;flex-direction: column;gap: 18px;min-width: 0}.gold-panel{background: #fff;border: 1px solid #dbe5f2;border-radius: 12px;box-shadow: 0 12px 34px rgba(15,23,42,.06);overflow: hidden}.gold-panel-head{display: flex;gap: 14px;justify-content: space-between;align-items: flex-start;padding: 18px 20px;border-bottom: 1px solid #e7edf5;background: linear-gradient(180deg,#f8fbff,#ffffff)}.gold-eyebrow{display: block;margin-bottom: 5px;color: #b84315;font-size: .7rem;font-weight: 800;letter-spacing: .08em;text-transform: uppercase}.gold-panel-title{margin: 0;color: #0f172a;font-size: 1.08rem;line-height: 1.2;letter-spacing: -.02em}.gold-panel-copy{margin: 6px 0 0;color: #526173;font-size: .86rem;line-height: 1.55}.gold-status{min-height: 24px;padding: 5px 9px;border-radius: 999px;background: #fff7ec;color: #8a4d1e;font-size: .72rem;font-weight: 800;white-space: nowrap}.studio-drop{display: grid;grid-template-columns: minmax(0,1fr) auto;gap: 18px;align-items: center;padding: 24px;border: 2px dashed #c9d8ea;border-radius: 12px;background: linear-gradient(135deg,#f8fbff 0%,#fffaf2 100%);cursor: pointer;transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease}.studio-drop:hover,.studio-drop.dragover{border-color: #b84315;box-shadow: 0 16px 40px rgba(184,67,21,.1);transform: translateY(-1px)}.drop-main{display: flex;gap: 14px;align-items: center;min-width: 0}.drop-mark{display: grid;place-items: center;width: 48px;height: 48px;border-radius: 12px;background: #0f172a;color: #fff;font-size: 1.35rem;flex: 0 0 auto}.drop-main strong{display: block;color: #0f172a;font-size: 1rem}.drop-main span{display: block;margin-top: 4px;color: #526173;font-size: .84rem;line-height: 1.5}.drop-side{color: #64748b;font-size: .78rem;font-weight: 800;text-align: right}.preset-grid{display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 10px}.preset-card{padding: 13px;border: 1px solid #dbe5f2;border-radius: 10px;background: #fff;color: #0f172a;text-align: left;cursor: pointer;font-family: 'DM Sans',sans-serif;transition: border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.preset-card strong{display: block;font-size: .84rem;line-height: 1.2}.preset-card span{display: block;margin-top: 5px;color: #64748b;font-size: .72rem;line-height: 1.4}.preset-card.active{border-color: #b84315;background: #fff7ec;box-shadow: 0 10px 24px rgba(184,67,21,.1)}.control-grid{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 14px;padding: 18px 20px 20px}.control-wide{grid-column: 1 / -1}.control-field{display: flex;flex-direction: column;gap: 7px;min-width: 0}.control-label{color: #26364c;font-size: .75rem;font-weight: 800;letter-spacing: .04em;text-transform: uppercase}.control-input,.control-select{width: 100%;min-height: 42px;border: 1px solid #dbe5f2;border-radius: 8px;background: #fff;color: #0f172a;padding: 0 11px;font: 700 .88rem/1 'DM Sans',sans-serif}.control-input:focus,.control-select:focus{outline: 3px solid #bfdbfe;border-color: #2563eb}.control-help{color: #64748b;font-size: .74rem;line-height: 1.45}.range-wrap{display: grid;grid-template-columns: minmax(0,1fr) 56px;gap: 12px;align-items: center}.range-value{color: #b84315;font-size: .92rem;font-weight: 900;text-align: right}.toggle-row{display: flex;flex-wrap: wrap;gap: 10px}.toggle-pill{display: inline-grid;grid-template-columns: 18px minmax(0,1fr);gap: 8px;align-items: center;padding: 9px 11px;border: 1px solid #dbe5f2;border-radius: 999px;color: #26364c;font-size: .8rem;font-weight: 750}.toggle-pill input{width: 18px;height: 18px;margin: 0;accent-color: #b84315}.workspace-actions{display: flex;flex-wrap: wrap;gap: 10px;padding: 0 20px 20px}.gold-btn{min-height: 42px;padding: 0 14px;border: 1px solid #0f172a;border-radius: 9px;background: #0f172a;color: #fff;cursor: pointer;font: 800 .84rem/1 'DM Sans',sans-serif;display: inline-flex;align-items: center;justify-content: center;gap: 8px}.gold-btn.secondary{background: #fff;color: #0f172a;border-color: #dbe5f2}.gold-btn.warning{background: #fff7ec;color: #8a4d1e;border-color: #f0c8aa}.gold-btn:disabled{opacity: .52;cursor: not-allowed}.summary-grid{display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 10px;padding: 16px 20px;border-bottom: 1px solid #e7edf5}.metric{padding: 12px;border: 1px solid #e7edf5;border-radius: 10px;background: #f8fbff}.metric strong{display: block;color: #0f172a;font-size: 1.05rem}.metric span{display: block;margin-top: 4px;color: #64748b;font-size: .68rem;font-weight: 800;letter-spacing: .06em;text-transform: uppercase}.queue-list{display: grid;gap: 10px;padding: 18px 20px 20px}.queue-empty{padding: 24px;border: 1px dashed #c9d8ea;border-radius: 10px;color: #64748b;text-align: center;font-size: .86rem}.queue-card{display: grid;grid-template-columns: 72px minmax(0,1fr) auto;gap: 12px;align-items: center;padding: 10px;border: 1px solid #dbe5f2;border-radius: 10px;background: #fff}.queue-card.is-active{border-color: #b84315;box-shadow: 0 10px 24px rgba(184,67,21,.08)}.queue-thumb{width: 72px;height: 56px;border-radius: 8px;object-fit: cover;background: #eff6ff;border: 1px solid #e7edf5}.queue-name{margin: 0 0 4px;color: #0f172a;font-size: .88rem;font-weight: 850;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.queue-meta{color: #64748b;font-size: .74rem;line-height: 1.45}.queue-badge{display: inline-flex;align-items: center;min-height: 24px;padding: 0 8px;border-radius: 999px;background: #eef6ff;color: #1d4ed8;font-size: .68rem;font-weight: 850}.queue-badge.done{background: #edf7f0;color: #166534}.queue-badge.error{background: #fef2f2;color: #b91c1c}.queue-actions{display: flex;gap: 6px;align-items: center;justify-content: flex-end}.mini-btn{min-height: 32px;padding: 0 9px;border: 1px solid #dbe5f2;border-radius: 7px;background: #fff;color: #0f172a;cursor: pointer;font: 800 .72rem/1 'DM Sans',sans-serif}.mini-btn.primary{background: #0f172a;border-color: #0f172a;color: #fff}.compare-stage{padding: 18px 20px 20px}.compare-frame{position: relative;min-height: 360px;border: 1px solid #dbe5f2;border-radius: 12px;background: #101827;overflow: hidden;display: grid;place-items: center}.compare-frame img{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: contain;background: #101827}.compare-after{clip-path: inset(0 0 0 50%)}.compare-handle{position: absolute;inset: 0;width: 100%;opacity: 0;cursor: ew-resize;z-index: 4}.compare-line{position: absolute;top: 0;bottom: 0;left: 50%;width: 2px;background: #fff;box-shadow: 0 0 0 1px rgba(15,23,42,.18);z-index: 3;pointer-events: none}.compare-labels{position: absolute;inset: 12px 12px auto;display: flex;justify-content: space-between;gap: 10px;z-index: 5;pointer-events: none}.compare-labels span{min-height: 28px;padding: 7px 10px;border-radius: 999px;background: rgba(15,23,42,.72);color: #fff;font-size: .72rem;font-weight: 850}.compare-empty{color: rgba(255,255,255,.74);font-weight: 800;text-align: center;padding: 30px}.detail-grid{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 10px;margin-top: 12px}.detail-card{padding: 11px;border: 1px solid #e7edf5;border-radius: 9px;background: #f8fbff}.detail-card span{display: block;color: #64748b;font-size: .68rem;font-weight: 850;letter-spacing: .06em;text-transform: uppercase}.detail-card strong{display: block;margin-top: 4px;color: #0f172a;font-size: .95rem}.history-list{display: grid;gap: 8px;margin-top: 10px}.history-item{padding: 10px;border: 1px solid #dbe5f2;border-radius: 8px;background: #fff;color: #26364c;font-size: .78rem;line-height: 1.45}.feature-list{display: grid;gap: 9px;margin: 10px 0 0;padding: 0;list-style: none}.feature-list li{display: grid;grid-template-columns: 18px minmax(0,1fr);gap: 8px;color: #26364c;font-size: .8rem;line-height: 1.45}.feature-list li::before{content: "";width: 8px;height: 8px;margin-top: 6px;border-radius: 999px;background: #b84315}@media (max-width: 980px){.gold-workspace,.tool-main-inner{grid-template-columns: 1fr}.preset-grid,.summary-grid,.control-grid,.detail-grid{grid-template-columns: 1fr 1fr}}@media (max-width: 640px){.studio-drop,.queue-card,.preset-grid,.summary-grid,.control-grid,.detail-grid{grid-template-columns: minmax(0,1fr)}.preset-card{min-width: 0;width: 100%;overflow-wrap: anywhere}.tool-hero h1{overflow-wrap: anywhere}.drop-side{text-align: left}.compare-frame{min-height: 260px}.gold-panel-head{flex-direction: column}.gold-status{white-space: normal}}@media (prefers-reduced-motion: reduce){.studio-drop,.preset-card,.gold-btn,.mini-btn{transition: none !important}}.studio-drop:focus-visible,.preset-card:focus-visible,.gold-btn:focus-visible,.mini-btn:focus-visible{outline: 3px solid #2563eb;outline-offset: 3px}html[data-theme="dark"] body{background: #0b1220;color: #e5edf8}html[data-theme="dark"] .tool-hero{background: #0b1524 !important;color: #eef5ff !important}html[data-theme="dark"] .tool-hero h1{color: #eef5ff !important}html[data-theme="dark"] .tool-hero h1 em,html[data-theme="dark"] .breadcrumb a,html[data-theme="dark"] .breadcrumb span{color: #93c5fd !important}html[data-theme="dark"] .hero-sub{color: #b8c7dc !important}html[data-theme="dark"] .gold-eyebrow{color: #ffb58a}html[data-theme="dark"] .gold-panel,html[data-theme="dark"] .preset-card,html[data-theme="dark"] .control-input,html[data-theme="dark"] .control-select,html[data-theme="dark"] .queue-card,html[data-theme="dark"] .mini-btn,html[data-theme="dark"] .history-item{background: #111c2e;border-color: #33445d;color: #e5edf8}html[data-theme="dark"] .gold-panel-head,html[data-theme="dark"] .metric,html[data-theme="dark"] .detail-card{background: #152238;border-color: #33445d}html[data-theme="dark"] .studio-drop{background: #152238;border-color: #526986}html[data-theme="dark"] .gold-panel-title,html[data-theme="dark"] .drop-main strong,html[data-theme="dark"] .preset-card strong,html[data-theme="dark"] .control-input,html[data-theme="dark"] .control-select,html[data-theme="dark"] .metric strong,html[data-theme="dark"] .queue-name,html[data-theme="dark"] .detail-card strong{color: #f8fafc}html[data-theme="dark"] .gold-panel-copy,html[data-theme="dark"] .drop-main span,html[data-theme="dark"] .drop-side,html[data-theme="dark"] .preset-card span,html[data-theme="dark"] .control-help,html[data-theme="dark"] .queue-meta,html[data-theme="dark"] .metric span,html[data-theme="dark"] .detail-card span,html[data-theme="dark"] .feature-list li{color: #b8c6d9}html[data-theme="dark"] .control-label,html[data-theme="dark"] .toggle-pill{color: #dbe7f5}html[data-theme="dark"] .toggle-pill{border-color: #526986}html[data-theme="dark"] .preset-card.active{background: #392313;border-color: #f59e6b}html[data-theme="dark"] .gold-status{background: #392313;color: #ffd2ad}html[data-theme="dark"] .sw-image-compress-support .panel{background: #111c2e;border-color: #33445d}html[data-theme="dark"] .sw-image-compress-support .note{background: #152238;border-color: #60a5fa;color: #dbe7f5}html[data-theme="dark"] .sw-image-compress-support h2,html[data-theme="dark"] .sw-image-compress-support h3{color: #f8fafc}html[data-theme="dark"] .sw-image-compress-support p{color: #cbd8e8}html[data-theme="dark"] .sw-image-compress-support a{color: #93c5fd}details[open] summary svg{transform: rotate(180deg)}details summary::-webkit-details-marker{display: none}