:root{--tool-bg:#f8f9fc;--tool-card-bg:#fff;--tool-card-border:#e5e7eb;--tool-card-shadow:0 4px 6px -1px #0000001a;--tool-accent:#8b5cf6;--tool-accent-light:#a78bfa;--tool-accent-dark:#7c3aed;--tool-text:#1f2937;--tool-text-muted:#6b7280;--tool-upload-border:#c4b5fd;--tool-upload-bg:#faf5ff;--tool-button-gradient:linear-gradient(135deg,#8b5cf6 0%,#a78bfa 100%);--tool-button-shadow:0 4px 14px 0 #8b5cf666}.dark{--tool-bg:#0f0f1a;--tool-card-bg:#1a1a2e;--tool-card-border:#8b5cf64d;--tool-card-shadow:0 4px 20px -1px #8b5cf626;--tool-accent:#a855f7;--tool-accent-light:#c084fc;--tool-accent-dark:#9333ea;--tool-text:#fff;--tool-text-muted:#9ca3af;--tool-upload-border:#7c3aed;--tool-upload-bg:#8b5cf60d;--tool-button-gradient:linear-gradient(135deg,#9333ea 0%,#c084fc 100%);--tool-button-shadow:0 4px 20px 0 #8b5cf680}.tool-page{background:var(--tool-bg);min-height:100vh;color:var(--tool-text)}.tool-card{background:var(--tool-card-bg);border:1px solid var(--tool-card-border);box-shadow:var(--tool-card-shadow);border-radius:1rem;padding:1.5rem;transition:all .3s}.tool-card:hover{box-shadow:0 8px 25px -5px #8b5cf633}.dark .tool-card{background:linear-gradient(145deg,var(--tool-card-bg),#1a1a2ecc);border:1px solid var(--tool-card-border)}.tool-card-glow{position:relative}.tool-card-glow:before{content:"";-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(135deg,#8b5cf680,#a855f733);border-radius:1rem;padding:1px;position:absolute;inset:-1px;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.tool-upload-area{border:2px dashed var(--tool-upload-border);background:var(--tool-upload-bg);cursor:pointer;border-radius:.75rem;flex-direction:column;justify-content:center;align-items:center;min-height:20rem;max-height:24rem;transition:all .3s;display:flex;position:relative;overflow:hidden}.tool-upload-area:hover{border-color:var(--tool-accent);background:#8b5cf614}.tool-upload-area.dragging{border-color:var(--tool-accent);background:#8b5cf626;box-shadow:inset 0 0 30px #8b5cf61a}.tool-upload-area img{object-fit:contain;border-radius:.5rem;width:100%;height:100%;max-height:22rem}.tool-model-grid{grid-template-columns:repeat(2,1fr);gap:.75rem;display:grid}.tool-model-button{cursor:pointer;color:#4b5563;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:1rem;justify-content:center;align-items:center;gap:.5rem;padding:1rem;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.tool-model-button:hover{border-color:var(--tool-accent-light);background:#e5e7eb}.tool-model-button.active{background:var(--tool-accent);color:#fff;border-color:var(--tool-accent);box-shadow:0 2px 8px #8b5cf666}.dark .tool-model-button{color:#9ca3af;background:#151520;border-color:#2e2e3d}.dark .tool-model-button:hover{background:#ffffff1a;border-color:#8b5cf680}.dark .tool-model-button.active{color:#fff;background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%);border-color:#0000;box-shadow:0 4px 12px #8b5cf64d}.tool-detail-slider{flex-direction:column;gap:.75rem;display:flex}.tool-detail-track{align-items:center;height:2rem;display:flex;position:relative}.tool-detail-bar{background:#e5e7eb;border-radius:9999px;width:100%;height:.375rem;position:relative}.dark .tool-detail-bar{background:#ffffff1a}.tool-detail-fill{background:var(--tool-accent);border-radius:9999px;height:100%;transition:width .2s;position:absolute;top:0;left:0}.tool-detail-thumb{border:3px solid var(--tool-accent);cursor:pointer;background:#fff;border-radius:50%;width:1.25rem;height:1.25rem;transition:all .2s;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #00000026}.tool-detail-thumb:hover{transform:translate(-50%,-50%)scale(1.1)}.tool-detail-labels{color:var(--tool-text-muted);justify-content:space-between;font-size:.75rem;display:flex}.tool-detail-labels span.active{color:var(--tool-accent);font-weight:600}.tool-generate-button{color:#fff;background:var(--tool-button-gradient);cursor:pointer;width:100%;box-shadow:var(--tool-button-shadow);border:none;border-radius:.75rem;justify-content:center;align-items:center;gap:.5rem;padding:1rem 1.5rem;font-size:1rem;font-weight:600;transition:all .3s;display:flex}.tool-generate-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #8b5cf680}.tool-generate-button:active:not(:disabled){transform:translateY(0)}.tool-generate-button:disabled{opacity:.6;cursor:not-allowed}.tool-result-card{background:var(--tool-card-bg);border:1px solid var(--tool-card-border);border-radius:1rem;margin-top:1.5rem;padding:1.5rem}.dark .tool-result-card{background:linear-gradient(145deg,#1a1a2e,#151525)}.tool-result-content{color:var(--tool-text);background:#8b5cf60d;border-radius:.5rem;margin-bottom:1rem;padding:1rem;font-family:ui-monospace,monospace;font-size:.875rem;line-height:1.6}.dark .tool-result-content{background:#0000004d}.tool-result-actions{justify-content:center;gap:.75rem;display:flex}.tool-result-button{cursor:pointer;color:#4b5563;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:.5rem;align-items:center;gap:.375rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.tool-result-button:hover{background:#e5e7eb}.dark .tool-result-button{color:#d1d5db;background:#ffffff0d;border:1px solid #ffffff1a}.dark .tool-result-button:hover{background:#ffffff1a}.tool-quota{color:var(--tool-text-muted);align-items:center;gap:.5rem;margin-top:1rem;font-size:.875rem;display:flex}.tool-quota-bar{background:#e5e7eb;border-radius:9999px;flex:1;height:.375rem;overflow:hidden}.dark .tool-quota-bar{background:#ffffff1a}.tool-quota-fill{background:linear-gradient(90deg,#22c55e,#4ade80);border-radius:9999px;height:100%;transition:width .3s}.tool-quota-fill.low{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.tool-quota-fill.empty{background:linear-gradient(90deg,#ef4444,#f87171)}