:root{--color-bg:#f8f9ff;--color-surface:hsla(0,0%,100%,.7);--color-border:rgba(139,92,246,.15);--color-text:#1e1b4b;--color-muted:#6b7280;--color-accent:#6366f1;--color-success:#10b981;--color-error:#ef4444;--gradient-brand:linear-gradient(135deg,#6366f1,#8b5cf6 50%,#06b6d4);--blur-glass:blur(12px);--radius-card:16px;--radius-sm:8px;--shadow-card:0 4px 24px rgba(99,102,241,.08);--transition:.2s ease}.dark{--color-bg:#0f0e1a;--color-surface:hsla(0,0%,100%,.05);--color-border:rgba(139,92,246,.25);--color-text:#e2e0ff;--color-muted:#9ca3af;--shadow-card:0 4px 24px rgba(0,0,0,.4)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--color-bg);color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;min-height:100vh;transition:background-color var(--transition),color var(--transition)}a{color:inherit;text-decoration:none}button{font-family:inherit}.app-shell{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;margin:0 auto;max-width:1200px;padding:24px 20px;width:100%}.card{backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}.btn,.card{background:var(--color-surface)}.btn{align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;display:inline-flex;font-size:.875rem;gap:6px;padding:8px 16px;transition:all var(--transition);white-space:nowrap}.btn:hover{background:#6366f114;border-color:var(--color-accent)}.btn-primary{border:none;color:#fff}.btn-primary,.btn-primary:hover{background:var(--gradient-brand)}.btn-primary:hover{opacity:.9}.btn-sm{font-size:.75rem;padding:4px 10px}input.tool-input,textarea.tool-input{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.875rem;line-height:1.6;padding:12px;resize:vertical;transition:border-color var(--transition);width:100%}input.tool-input:focus,textarea.tool-input:focus{border-color:var(--color-accent);outline:none}input.tool-input.error,textarea.tool-input.error{border-color:var(--color-error)}select.tool-select{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;font-size:.875rem;padding:8px 12px;transition:border-color var(--transition)}select.tool-select:focus{border-color:var(--color-accent);outline:none}input[type=range]{accent-color:var(--color-accent);cursor:pointer}.split-pane{display:grid;gap:16px;grid-template-columns:1fr 1fr}@media(max-width:768px){.split-pane{grid-template-columns:1fr}.main-content{padding:16px}}.error-msg{color:var(--color-error)}.error-msg,.success-msg{font-size:.8rem;margin-top:4px}.success-msg{color:var(--color-success)}.mono-output{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-family:JetBrains Mono,Fira Code,monospace;font-size:.875rem;min-height:48px;padding:12px;word-break:break-all}.gradient-text{background:var(--gradient-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tab-list{border-bottom:1px solid var(--color-border);display:flex;gap:4px;margin-bottom:16px}.tab-btn{background:none;border:none;border-bottom:2px solid transparent;color:var(--color-muted);cursor:pointer;font-size:.875rem;margin-bottom:-1px;padding:8px 16px;text-transform:capitalize;transition:all var(--transition)}.tab-btn:hover{color:var(--color-text)}.tab-btn.active{border-bottom-color:var(--color-accent);color:var(--color-accent)}.drag-zone{border:2px dashed var(--color-border);border-radius:var(--radius-card);color:var(--color-muted);cursor:pointer;padding:48px 24px;text-align:center;transition:all var(--transition)}.drag-zone.drag-over,.drag-zone:hover{background:#6366f10a;border-color:var(--color-accent);color:var(--color-text)}.tool-page{max-width:100%}.tool-section-label{color:var(--color-muted);font-size:.75rem;font-weight:600;letter-spacing:.05em;margin-bottom:6px;text-transform:uppercase}