.page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.card{width:100%;max-width:520px;background:#fff;border-radius:20px;padding:40px 32px;box-shadow:0 20px 60px #00000040;text-align:center}.title{font-size:32px;font-weight:700;color:#4f46e5;margin-bottom:8px}.subtitle{font-size:14px;color:#6b7280;margin-bottom:28px}.input-row{display:flex;gap:10px;flex-wrap:wrap}.url-input{flex:1;min-width:220px;padding:14px 16px;font-size:15px;border:2px solid #e5e7eb;border-radius:12px;outline:none;transition:border-color .2s}.url-input:focus{border-color:#6366f1}.generate-btn{padding:14px 24px;font-size:15px;font-weight:600;color:#fff;background:#6366f1;border:none;border-radius:12px;cursor:pointer;transition:background .2s,transform .1s;white-space:nowrap}.generate-btn:hover:not(:disabled){background:#4f46e5}.generate-btn:active:not(:disabled){transform:scale(.97)}.generate-btn:disabled{background:#a5a6f6;cursor:not-allowed}.error-text{color:#dc2626;font-size:13px;margin-top:12px;text-align:left}.result-box{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#eef2ff;border:2px solid #c7d2fe;border-radius:12px;padding:14px 16px}.short-url{color:#4338ca;font-weight:600;font-size:15px;text-decoration:none;word-break:break-all;text-align:left}.short-url:hover{text-decoration:underline}.copy-btn{flex-shrink:0;padding:8px 16px;font-size:13px;font-weight:600;color:#4f46e5;background:#fff;border:2px solid #4f46e5;border-radius:8px;cursor:pointer;transition:background .2s,color .2s}.copy-btn:hover{background:#4f46e5;color:#fff}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#1e1b2e}