:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-card:#1a1a2e;--bg-input:#0f0f1a;--border:#2a2a3e;--border-focus:#6c63ff;--text-primary:#e8e8f0;--text-secondary:#8888a0;--text-muted:#556;--accent:#6c63ff;--accent-hover:#7b73ff;--accent-glow:#6c63ff26;--success:#4ade80;--error:#f87171;--radius:12px;--font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh}#root,.app{flex-direction:column;min-height:100vh;display:flex}.header{border-bottom:1px solid var(--border);background:var(--bg-secondary);padding:1.5rem 2rem}.header-inner{justify-content:space-between;align-items:center;max-width:900px;margin:0 auto;display:flex}.logo{color:var(--text-primary);letter-spacing:-.02em;font-size:1.25rem;font-weight:700}.logo span{color:var(--accent)}.tabs{background:var(--bg-primary);border-radius:10px;gap:.25rem;padding:4px;display:flex}.tab{color:var(--text-secondary);cursor:pointer;font-size:.875rem;font-weight:500;font-family:var(--font);background:0 0;border:none;border-radius:8px;padding:.5rem 1.25rem;transition:all .2s}.tab:hover{color:var(--text-primary)}.tab.active{background:var(--accent);color:#fff}.main{flex:1;width:100%;max-width:900px;margin:0 auto;padding:2.5rem 2rem}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}.card h2{letter-spacing:-.02em;margin-bottom:.5rem;font-size:1.5rem;font-weight:700}.card p.subtitle{color:var(--text-secondary);margin-bottom:1.75rem;font-size:.9rem}.input-group{gap:.75rem;margin-bottom:1.5rem;display:flex}.input-group input{background:var(--bg-input);border:1px solid var(--border);color:var(--text-primary);font-size:.95rem;font-family:var(--font);border-radius:8px;outline:none;flex:1;padding:.75rem 1rem;transition:border-color .2s}.input-group input::placeholder{color:var(--text-muted)}.input-group input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow)}.btn{background:var(--accent);color:#fff;cursor:pointer;font-size:.95rem;font-weight:600;font-family:var(--font);white-space:nowrap;border:none;border-radius:8px;padding:.75rem 1.5rem;transition:all .2s}.btn:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-outline{border:1px solid var(--border);color:var(--text-primary);background:0 0}.btn-outline:hover{border-color:var(--accent);background:var(--accent-glow)}.qr-output{background:var(--bg-input);border-radius:var(--radius);border:1px solid var(--border);flex-direction:column;align-items:center;gap:1.25rem;padding:2rem;display:flex}.qr-canvas-wrapper{background:#fff;border-radius:8px;padding:1.25rem}.qr-actions{gap:.75rem;display:flex}.result-box{background:var(--bg-input);border:1px solid var(--border);border-radius:8px;align-items:center;gap:.75rem;margin-top:.5rem;padding:1rem 1.25rem;display:flex}.result-box .short-url{color:var(--accent);word-break:break-all;flex:1;font-size:1.05rem;font-weight:600}.result-box .copy-btn{padding:.5rem 1rem;font-size:.85rem}.status{margin-top:.75rem;font-size:.85rem}.status.success{color:var(--success)}.status.error{color:var(--error)}.footer{text-align:center;color:var(--text-muted);border-top:1px solid var(--border);padding:1.5rem 2rem;font-size:.8rem}.footer a{color:var(--text-secondary);text-decoration:none}.footer a:hover{color:var(--accent)}@media (width<=600px){.header-inner{flex-direction:column;gap:1rem}.input-group{flex-direction:column}.main{padding:1.5rem 1rem}.card{padding:1.5rem}}