*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Kanit,Inter,system-ui,-apple-system,sans-serif;background:#faf9fa;color:#280d5f;min-width:320px;-webkit-font-smoothing:antialiased}#root,.page{min-height:100vh;display:flex;flex-direction:column}.header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 24px;background:#fff;border-bottom:1px solid #e7e3eb}.headerLeft{display:flex;align-items:center;gap:16px}.logo{display:flex;align-items:center}.headerBrand{font-size:20px;font-weight:700;color:#7645d9;letter-spacing:-.02em}.nav{display:flex;gap:4px;margin-left:8px}.navLink{border:none;background:none;font-size:15px;font-weight:600;color:#7a6eaa;padding:8px 16px;border-radius:16px;cursor:pointer;transition:all .15s}.navLink:hover{color:#280d5f}.navLink.active{background:#ede8f5;color:#7645d9}.headerRight{display:flex;align-items:center;gap:10px}.chainBadge{font-size:12px;font-weight:700;padding:6px 12px;border-radius:16px;background:#ede8f5;color:#7645d9}.walletBtn{border:none;font-size:14px;font-weight:600;padding:10px 20px;border-radius:16px;cursor:pointer;transition:all .15s;color:#fff;background:linear-gradient(135deg,#1fc7d4,#7645d9)}.walletBtn:hover{opacity:.9;transform:translateY(-1px)}.walletBtn.connected{background:#ede8f5;color:#7645d9;display:flex;align-items:center;gap:6px}.walletArrow{transition:transform .15s}.walletWrap{position:relative}.walletMenu{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:#fff;border-radius:16px;box-shadow:0 8px 32px #0000001f,0 0 0 1px #0000000a;padding:8px;z-index:100;animation:menuFadeIn .15s ease-out}@keyframes menuFadeIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.walletMenuAddr{font-size:12px;font-weight:600;color:#7a6eaa;padding:8px 12px 6px;border-bottom:1px solid #e7e3eb;margin-bottom:4px}.walletMenuItem{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;font-size:14px;font-weight:600;color:#280d5f;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .1s}.walletMenuItem:hover{background:#f3f0f7}.walletMenuItem.danger{color:#d63868}.walletMenuItem.danger:hover{background:#ffe6ef}.main{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:48px 16px 80px;background:radial-gradient(ellipse at 20% 0%,rgba(31,199,212,.08) 0%,transparent 60%),radial-gradient(ellipse at 80% 0%,rgba(118,69,217,.06) 0%,transparent 60%)}.card{width:100%;max-width:420px;background:#fff;border-radius:24px;padding:24px;box-shadow:0 4px 20px #0000000f,0 0 0 1px #00000008}.cardTitle{margin-bottom:20px}.cardTitle h2{font-size:20px;font-weight:700;color:#280d5f;margin:0}.subtitle{font-size:14px;color:#7a6eaa;margin:4px 0 0}.inputPanel{background:#f9f8fa;border:1px solid #e7e3eb;border-radius:16px;padding:14px 16px}.inputPanel.small{margin-bottom:10px}.inputHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.inputLabel{font-size:13px;font-weight:600;color:#7a6eaa}.inputBal{font-size:12px;color:#7a6eaa;cursor:pointer}.inputBal:hover{color:#7645d9}.inputRow{display:flex;align-items:center;gap:8px}.inputRow input,.inputPanel>input{flex:1;border:none;background:transparent;font-size:22px;font-weight:600;color:#280d5f;outline:none;min-width:0}.inputRow input::placeholder,.inputPanel>input::placeholder{color:#bdc2c4}.tokenSelect{border:none;background:#ede8f5;color:#7645d9;font-size:15px;font-weight:700;padding:8px 12px;border-radius:16px;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;min-width:80px;text-align:center}.tokenSelect:hover{background:#d7cdf0}.switchRow{display:flex;justify-content:center;margin:-8px 0;position:relative;z-index:1}.switchBtn{width:40px;height:40px;border:4px solid #faf9fa;border-radius:12px;background:#ede8f5;color:#7645d9;display:grid;place-items:center;cursor:pointer;transition:all .15s}.switchBtn:hover{background:#7645d9;color:#fff}.slippageRow{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#7a6eaa;margin-top:12px}.slippageBtns{display:flex;align-items:center;gap:4px}.slipBtn{border:none;font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;background:#f3f0f7;color:#7a6eaa;cursor:pointer;transition:all .1s}.slipBtn.active{background:#7645d9;color:#fff}.slipInput{width:48px;border:1px solid #e7e3eb;border-radius:8px;text-align:center;font-size:12px;font-weight:600;padding:5px 4px;outline:none;color:#280d5f;background:#fff}.slipInput:focus{border-color:#7645d9}.quoteInfo{display:flex;justify-content:space-between;font-size:13px;color:#7a6eaa;padding:10px 0;border-top:1px dashed #e7e3eb;margin-top:4px}.actionBtn{width:100%;border:none;padding:16px;border-radius:16px;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(135deg,#1fc7d4,#7645d9);cursor:pointer;margin-top:12px;transition:all .15s}.actionBtn:hover:not(:disabled){opacity:.9;transform:translateY(-1px);box-shadow:0 6px 16px #7645d94d}.actionBtn:disabled{opacity:.5;cursor:not-allowed;transform:none}.actionBtn.remove{background:linear-gradient(135deg,#ed4b9e,#7645d9)}.liqWrap{display:grid;gap:4px}.pairRow{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px}.pairPlus{font-size:20px;font-weight:700;color:#7a6eaa}.lpInfo{text-align:center;font-size:14px;color:#7a6eaa;margin-bottom:12px}.lpInfo strong{color:#280d5f}.liqForm h3{font-size:16px;font-weight:700;color:#280d5f;margin:8px 0 12px}.poolRateInfo{font-size:13px;font-weight:600;color:#7a6eaa;background:#f3f0f7;padding:10px 14px;border-radius:12px;margin-bottom:8px}.poolRateInfo.newPool{background:#fff8e7;color:#b68200}.divider{border:none;border-top:1px solid #e7e3eb;margin:16px 0}.toast{margin-top:16px;padding:12px 16px;border-radius:12px;font-size:13px;font-weight:600;word-break:break-all;background:#ede8f5;color:#7645d9}.toast.success{background:#d7f7e0;color:#1a9e3f}.toast.error{background:#ffe6ef;color:#d63868}.toast.pending{background:#e8f4fd;color:#1d8acf}@media(max-width:600px){.header{height:auto;padding:12px 16px;flex-direction:column;gap:10px}.headerLeft{flex-wrap:wrap;gap:10px}.nav{margin-left:0}.main{padding:24px 12px 60px}.card{padding:18px}.inputRow input{font-size:18px}.slippageRow{flex-direction:column;align-items:flex-start;gap:8px}.pairRow{flex-direction:column;gap:6px}}
