:root{--bg:#0b0906;--panel:#15110b;--panel2:#100d09;--line:#3a2c18;--line2:#2d2417;--gold:#ffd66b;--gold2:#d99a29;--text:#fff8ea;--muted:#9b9387;--soft:#21180b}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,#2a1b08 0,#0b0906 42%,#090806 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
main{width:min(100%,560px);margin:auto;padding:28px 16px 42px}
.hero{text-align:center;margin:4px 0 22px}
.hero h1{margin:0;font-size:38px;line-height:1.05;letter-spacing:-1.8px;font-weight:850;color:#fff}
.hero h1 span{color:var(--gold)}
.hero p{margin:10px auto 16px;max-width:430px;color:var(--muted);font-size:14px;line-height:1.5}
.wallet-wrap{position:relative;display:flex;justify-content:center}
.wallet{border:1px solid #ffe29a;background:linear-gradient(135deg,#e6aa32,#ffd66b);color:#171109;padding:12px 18px;border-radius:14px;font-weight:850;box-shadow:0 8px 24px rgba(217,154,41,.16)}
.wallet:hover{filter:brightness(1.04)}
.wallet-menu{display:none;position:absolute;top:calc(100% + 8px);right:50%;transform:translateX(50%);width:190px;background:#17120c;border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 18px 45px #0008;z-index:50}
.wallet-menu.open{display:block}.wallet-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--text);padding:11px;border-radius:10px}.wallet-menu button:hover{background:var(--soft);color:var(--gold)}
.swap-card{position:relative;background:linear-gradient(180deg,#17120c,#110e09);border:1px solid var(--line);border-radius:28px;padding:12px;box-shadow:0 24px 70px #0008}
.token-box{background:#0f0c08;border:1px solid var(--line2);border-radius:21px;padding:16px 16px 14px;transition:border-color .15s,box-shadow .15s}
.token-box:focus-within{border-color:#6b4b20;box-shadow:0 0 0 2px #ffd66b12}
.line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.muted{color:var(--muted);font-size:12px;font-weight:750}.line #balance{max-width:58%;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amount-row{display:flex;align-items:center;gap:9px}.amount-row input{min-width:0;flex:1;width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:34px;line-height:1.15;font-weight:800;padding:0}.amount-row input::placeholder{color:#5f584e}.amount-row input[readonly]{color:#eee6d8}
.max-button{flex:0 0 auto;border:1px solid #5d451e;background:#21180b;color:var(--gold);border-radius:10px;padding:8px 9px;font-size:11px;font-weight:900}.max-button:hover{background:#30220e}
.token-select{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-width:112px;max-width:155px;border:1px solid #4a3518;background:#1a150d;color:var(--text);border-radius:15px;padding:7px 9px;font-weight:850}.token-select:hover{border-color:#70501f;background:#21180b}.token-select img{width:31px;height:31px;border-radius:50%;object-fit:cover;background:#eee}.token-select b{overflow:hidden;text-overflow:ellipsis}.token-select span{color:#a99d89;margin-left:auto}
.usd-value{margin-top:8px;padding-left:1px;min-height:16px;color:#8f877b;font-size:11px;font-weight:650}
.flip-wrap{height:0;position:relative;z-index:3}.flip{position:absolute;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:15px;border:4px solid #f8f1e5;background:#15110b;color:var(--gold);box-shadow:0 8px 22px #0009;font-size:20px;font-weight:900}.flip:hover{background:#21180b}
.settings-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 4px 5px}.settings-line button{border:1px solid #4a3518;background:#21180b;color:var(--gold);padding:9px 12px;border-radius:11px;font-weight:800}.settings-line button:hover{background:#30220e}.settings-line>span{color:#8f877b;font-size:11px}.settings-line b,.fee-line b{color:var(--gold)}
.fee-line{display:flex;justify-content:space-between;align-items:center;padding:0 4px 12px;color:#8f877b;font-size:11px}.fee-line:before{content:"Network fee";color:#6f675b}
.swap-button{width:100%;border:0;border-radius:17px;padding:17px 16px;background:linear-gradient(135deg,#d99a29,#ffd66b);color:#171109;font-size:16px;font-weight:900;box-shadow:0 10px 25px rgba(217,154,41,.14);transition:transform .12s,filter .12s}.swap-button:hover{filter:brightness(1.05)}.swap-button:active{transform:scale(.995)}
.info{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 6px 3px;color:#71695e;font-size:11px}.info b{color:#a79d8d;font-weight:750}
.history-under-card{display:block;width:100%;margin:12px auto 0;border:1px solid #4a3518;background:#15110b;color:var(--gold);border-radius:15px;padding:13px 16px;font-size:13px;font-weight:850}.history-under-card:hover{background:#21180b}
.modal{display:none;position:fixed;inset:0;background:#000b;backdrop-filter:blur(7px);align-items:flex-end;justify-content:center;padding:12px;z-index:100}.modal.open{display:flex}.modal-card{width:min(100%,520px);max-height:84vh;overflow:auto;background:#15110b;border:1px solid var(--line);border-radius:24px;padding:17px;box-shadow:0 25px 80px #000b}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.modal-head b{font-size:16px}.close{border:1px solid var(--line);background:#21180b;color:var(--text);border-radius:10px;width:35px;height:35px;font-size:21px}.modal-card>input{width:100%;border:1px solid var(--line);background:#0f0c08;color:var(--text);border-radius:12px;padding:12px;outline:0;margin-bottom:8px}.modal-card>input::placeholder{color:#71695e}
.token-list{max-height:55vh;overflow:auto}.token-item{width:100%;display:flex;align-items:center;gap:11px;padding:11px 8px;border:0;border-bottom:1px solid #292117;background:transparent;color:var(--text);text-align:left}.token-item:hover{background:#21180b}.token-item img{width:39px;height:39px;border-radius:50%;object-fit:cover;background:#ddd}.token-item strong{display:block}.token-item small{display:block;color:#8f877b;margin-top:2px;line-height:1.35;overflow-wrap:anywhere}.tag{margin-left:auto;background:#30220e;color:var(--gold);padding:5px 7px;border-radius:7px;font-size:10px;font-weight:850;white-space:nowrap}.note{color:#8f877b;font-size:11px;line-height:1.5}
.slip-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:10px 0}.slip-grid button,.custom button{border:1px solid var(--line);background:#21180b;color:var(--text);border-radius:10px;padding:9px 4px;font-weight:800}.slip-grid button.active{background:#3a2910;border-color:#8a6327;color:var(--gold)}.custom{display:flex;gap:7px}.custom input{width:100%;border:1px solid var(--line);background:#0f0c08;color:var(--text);border-radius:10px;padding:10px;outline:0}.custom button{background:var(--gold2);color:#fff;border:0;padding:0 14px}.setting{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #2b2318;margin-top:14px;padding-top:13px;font-size:13px}.setting b{color:var(--gold)}.setting select{border:1px solid var(--line);border-radius:9px;padding:8px;background:#21180b;color:var(--text)}
.history-list{display:grid;gap:9px}.history-empty{padding:22px 8px;text-align:center;color:var(--muted);font-size:13px}.history-item{border:1px solid var(--line);background:#100d09;border-radius:15px;padding:12px}.history-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.history-pair{font-weight:850;font-size:14px}.history-date{margin-top:4px;font-size:10px;color:#8f877b}.history-values{margin-top:7px;font-size:12px;line-height:1.55}.history-values b{color:#d9cfbd}.history-link{display:inline-block;margin-top:8px;color:var(--gold);font-weight:800;font-size:11px;text-decoration:none}.history-status{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.35px;line-height:1}.history-status.success{background:#173322;color:#6ee7a1}.history-status.failed{background:#3b1717;color:#ff8c8c}.history-failed{border-color:#6d2929}.history-error{margin-top:7px;font-size:11px;color:#ff8c8c;line-height:1.4}
#toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;background:#ffd66b;color:#171109;padding:12px 15px;border-radius:12px;font-size:12px;font-weight:750;transition:.2s;z-index:130;max-width:calc(100% - 30px);text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:700px){main{padding:24px 12px 34px}.hero{margin-bottom:18px}.hero h1{font-size:32px}.hero p{font-size:13px;margin-top:9px}.swap-card{padding:9px;border-radius:24px}.token-box{padding:15px 14px 13px}.amount-row input{font-size:31px}.token-select{min-width:108px;padding:7px 8px}.token-select img{width:29px;height:29px}.max-button{padding:7px 8px}.info{font-size:10px}.modal{padding:9px}.modal-card{border-radius:21px}.slip-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:390px){.amount-row{gap:6px}.amount-row input{font-size:27px}.token-select{min-width:101px;max-width:120px}.token-select b{font-size:12px}.max-button{font-size:10px;padding:7px}.line{margin-bottom:6px}.wallet{padding:11px 15px}}