*{box-sizing:border-box}
:root{--bg:#080d1a;--card:#111a2d;--card2:#0c1425;--border:#263450;--muted:#91a0bd;--text:#eef3ff;--primary:#5b7cff;--primary2:#496cf5;--success:#42d392}
body{margin:0;background:radial-gradient(circle at top,#111b33 0,#080d1a 48%,#060a14 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}.app{max-width:1120px;margin:auto;padding:30px 18px 70px}.topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:22px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:800;opacity:.72}h1{margin:5px 0;font-size:34px;line-height:1.15}h2{margin:0;font-size:20px}h3{margin:0;font-size:18px}.muted{color:var(--muted);margin:7px 0 0}.card{background:linear-gradient(180deg,rgba(18,27,47,.98),rgba(13,21,38,.98));border:1px solid var(--border);border-radius:20px;padding:22px;box-shadow:0 18px 45px rgba(0,0,0,.24)}.primary{border:0;border-radius:12px;padding:13px 19px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-weight:800;cursor:pointer;transition:.2s}.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.compact-heading{margin-bottom:16px}.section-kicker{font-size:10px;letter-spacing:1.8px;font-weight:800;color:#7f8eaa;margin-bottom:5px}.network-badge,.status-dot{font-size:12px;padding:7px 10px;border-radius:999px;background:rgba(91,124,255,.1);border:1px solid rgba(91,124,255,.25);color:#b7c5ff;white-space:nowrap}.status-dot{background:rgba(145,160,189,.08);border-color:rgba(145,160,189,.18);color:#aab6cf}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#0a1120;border:1px solid #26334d;padding:5px;border-radius:13px;margin-bottom:22px}.tab{border:0;background:transparent;color:#91a0bd;border-radius:9px;padding:11px 12px;font-weight:800;cursor:pointer}.tab.active{background:#24355e;color:#fff;box-shadow:inset 0 0 0 1px rgba(91,124,255,.28)}.tab-panel[hidden]{display:none}.panel-title-row{margin-bottom:16px}.panel-title-row p{margin:5px 0 0;color:var(--muted);font-size:13px}label,.detail-label{font-size:12px;color:#91a0bd}.amount-availability{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-7px 2px 12px;color:#7f8da8;font-size:12px}.amount-availability strong{color:#cbd6ef;font-weight:800}.max-btn{border:1px solid #344566;background:#15213a;color:#dce6ff;border-radius:7px;padding:5px 10px;font-size:10px;font-weight:900;letter-spacing:.5px;cursor:pointer}.max-btn:hover{background:#203154;border-color:#4c6592}.max-btn:disabled{opacity:.45;cursor:not-allowed}.input-row{display:flex;align-items:center;background:#090f1d;border:1px solid #2a3957;border-radius:13px;padding:0 15px;margin:8px 0 17px}.large-input input{width:100%;background:none;border:0;outline:0;color:#fff;font-size:25px;padding:16px 0}.input-row span{font-weight:800;color:#aeb9d2}.quote-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07)}.quote-row span{color:#9aa8c2}.quote-row strong{font-weight:800;text-align:right}.slippage-control{margin:15px 0;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.025)}.slippage-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.slippage-head label{margin:0}.slippage-head span{font-size:11px;color:#aebbd5}.slippage-row{display:flex;align-items:center;gap:8px}.slippage-row input{width:100%;box-sizing:border-box;background:#080e1b;color:#fff;border:1px solid #2a3957;border-radius:9px;padding:10px 11px;outline:none}.slippage-row input:focus{border-color:#5b7cff}.slippage-row input:disabled{opacity:.55;cursor:not-allowed}.slippage-row>span{opacity:.8}.slippage-control small{display:block;margin-top:7px;color:#71809b;font-size:11px}.full{width:100%;font-size:16px;margin-top:16px}.wallet-address-box{background:#0a1120;border:1px solid #24324b;border-radius:14px;padding:14px;margin-bottom:16px}.address-row{display:flex;align-items:center;gap:10px;margin-top:8px}.address-row strong{font-size:12px;line-height:1.5;word-break:break-all;color:#dce5fa;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600}.copy-btn{flex:0 0 auto;border:1px solid #33415e;background:#18233b;color:#cbd6ef;border-radius:9px;padding:7px 10px;font-size:11px;font-weight:800;cursor:pointer}.copy-btn:hover{background:#223152}.balance-list{display:flex;flex-direction:column;gap:10px}.balance-item{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:13px;border:1px solid rgba(255,255,255,.065);background:rgba(255,255,255,.018);border-radius:13px}.token-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;font-weight:900;color:#fff}.tusdt-icon{background:#147f73}.hill-icon{background:#5b4bd7}.bnb-icon{background:#b68116}.balance-meta{display:flex;flex-direction:column;gap:3px;min-width:0}.balance-meta span{font-size:13px;font-weight:800}.balance-meta small{font-size:10px;color:#74829d}.balance-item>strong{font-size:14px;text-align:right;max-width:150px;word-break:break-word}.wallet-network{display:flex;justify-content:space-between;gap:14px;padding-top:15px;margin-top:15px;border-top:1px solid rgba(255,255,255,.07);font-size:12px}.wallet-network span{color:#7e8da8}.wallet-network strong{color:#dbe4f7;text-align:right}.status-card{margin-top:18px}.status-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.status-grid div{display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:12px;background:rgba(255,255,255,.018);border:1px solid rgba(255,255,255,.05)}.status-grid span{font-size:11px;color:#8291ad}.status-grid strong{font-size:13px;word-break:break-word}.message{position:fixed;right:18px;bottom:18px;z-index:20;max-width:420px;padding:14px 17px;border-radius:12px;background:#17223a;border:1px solid #34415d;display:none;box-shadow:0 15px 40px rgba(0,0,0,.35)}.message.show{display:block}@media(max-width:900px){.dashboard-grid{grid-template-columns:1fr}.status-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.app{padding:18px 12px 55px}.topbar{align-items:flex-start;flex-direction:column}h1{font-size:27px}.topbar .primary{width:100%}.card{padding:17px}.status-grid{grid-template-columns:1fr}.balance-item>strong{max-width:120px}.address-row{align-items:flex-start}.copy-btn{margin-top:1px}}


/* =========================================================
   HILL WORLD — International Swap UI visual system
   Functional JS/contract behavior intentionally unchanged.
   ========================================================= */
:root{
  --buy:#22c58b;
  --buy-dark:#0f9f70;
  --buy-soft:rgba(34,197,139,.12);
  --sell:#ff6b6b;
  --sell-dark:#ef4444;
  --sell-soft:rgba(255,107,107,.12);
  --glass:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.09);
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 520px at 8% -10%,rgba(91,124,255,.20),transparent 62%),
    radial-gradient(720px 500px at 95% 15%,rgba(34,197,139,.10),transparent 65%),
    radial-gradient(650px 420px at 55% 105%,rgba(124,92,255,.10),transparent 68%),
    #060a14;
}
.app{max-width:1180px;padding-top:34px}
.topbar{padding:4px 2px 8px}
.eyebrow{color:#9eafff;letter-spacing:3px;font-size:11px}
h1{font-size:clamp(30px,4vw,42px);letter-spacing:-1.4px;background:linear-gradient(90deg,#fff 0%,#cdd8ff 55%,#94a9ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar .muted{font-size:14px;color:#8291b1}
.topbar .primary{box-shadow:0 10px 30px rgba(91,124,255,.25),inset 0 1px 0 rgba(255,255,255,.18);border:1px solid rgba(151,168,255,.28)}
.card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(20,30,52,.94),rgba(10,17,31,.97));
  border:1px solid rgba(111,133,177,.22);
  box-shadow:0 24px 65px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(18px);
}
.card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 28%,transparent 72%,rgba(255,255,255,.018))}
.swap-card{padding:24px}
.wallet-card-new{padding:24px}
.card-heading,.panel-title-row,.tabs,.input-row,.quote-row,.slippage-control,.wallet-address-box,.balance-list,.wallet-network,.status-grid{position:relative;z-index:1}
.section-kicker{color:#8495bb;letter-spacing:2.2px}
.swap-card .card-heading h2,.wallet-card-new .card-heading h2{letter-spacing:-.35px}
.network-badge{background:rgba(91,124,255,.10);border-color:rgba(126,150,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}

/* Buy / Sell segmented control */
.tabs{
  position:relative;
  padding:4px;
  gap:4px;
  border-radius:16px;
  background:rgba(5,10,20,.74);
  border:1px solid rgba(111,133,177,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.tab{
  min-height:46px;
  position:relative;
  border:1px solid transparent;
  border-radius:12px;
  color:#8391ac;
  font-size:13px;
  letter-spacing:.1px;
  transition:all .22s ease;
}
.tab:hover{color:#eaf0ff;background:rgba(255,255,255,.035)}
.tab.active{color:#fff;box-shadow:0 7px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.14)}
#buyTab.active{background:linear-gradient(135deg,#1bb981,#0f8e67);border-color:rgba(83,239,183,.30);box-shadow:0 8px 25px rgba(34,197,139,.20),inset 0 1px 0 rgba(255,255,255,.17)}
#sellTab.active{background:linear-gradient(135deg,#ff7474,#e74747);border-color:rgba(255,165,165,.28);box-shadow:0 8px 25px rgba(255,82,82,.18),inset 0 1px 0 rgba(255,255,255,.16)}

/* Direction-specific panel accents */
.buy-panel,.sell-panel{animation:panelIn .18s ease-out}
@keyframes panelIn{from{opacity:.65;transform:translateY(3px)}to{opacity:1;transform:none}}
.buy-panel .panel-title-row h3{color:#dffcf1}
.sell-panel .panel-title-row h3{color:#ffe4e4}
.buy-panel .input-row:focus-within{border-color:rgba(34,197,139,.55);box-shadow:0 0 0 4px rgba(34,197,139,.08),0 12px 28px rgba(0,0,0,.15)}
.sell-panel .input-row:focus-within{border-color:rgba(255,107,107,.55);box-shadow:0 0 0 4px rgba(255,107,107,.08),0 12px 28px rgba(0,0,0,.15)}
.large-input{background:linear-gradient(145deg,rgba(7,13,25,.94),rgba(11,19,34,.94));border-color:rgba(103,124,165,.24)}
.large-input input::placeholder{color:#4f5e79}
.quote-row{border-bottom-color:rgba(255,255,255,.055)}
.quote-row strong{color:#eef4ff}
.slippage-control{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.07)}
.buy-panel .slippage-control{box-shadow:inset 3px 0 0 rgba(34,197,139,.58)}
.sell-panel .slippage-control{box-shadow:inset 3px 0 0 rgba(255,107,107,.58)}
.buy-panel .slippage-row input:focus{border-color:rgba(34,197,139,.60);box-shadow:0 0 0 3px rgba(34,197,139,.07)}
.sell-panel .slippage-row input:focus{border-color:rgba(255,107,107,.60);box-shadow:0 0 0 3px rgba(255,107,107,.07)}

/* BUY / SELL action buttons */
.swap-action{
  display:flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:14px;padding:15px 18px;
  color:#fff;font-weight:900;letter-spacing:.15px;
  cursor:pointer;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 12px 28px rgba(0,0,0,.22);
}
.buy-action{background:linear-gradient(135deg,#24c98f 0%,#0f9f70 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 30px rgba(34,197,139,.20)}
.sell-action{background:linear-gradient(135deg,#ff7373 0%,#e74747 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 30px rgba(255,82,82,.18)}
.swap-action:hover{filter:brightness(1.08);transform:translateY(-2px)}
.swap-action:active{transform:translateY(0)}
.swap-action:disabled{opacity:.55;filter:grayscale(.25);cursor:not-allowed;transform:none;box-shadow:none}
.action-arrow{font-size:18px;line-height:1;transition:transform .2s ease}
.swap-action:hover .action-arrow{transform:translate(2px,-2px)}

/* Wallet card */
.wallet-address-box{background:linear-gradient(145deg,rgba(7,13,25,.72),rgba(14,23,41,.66));border-color:rgba(111,133,177,.18)}
.copy-btn{border-color:rgba(132,153,198,.22);background:rgba(255,255,255,.045);transition:.18s ease}
.copy-btn:hover{background:rgba(255,255,255,.085);border-color:rgba(159,178,221,.35);transform:translateY(-1px)}
.balance-item{border-color:rgba(111,133,177,.14);background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));transition:.18s ease}
.balance-item:hover{transform:translateY(-1px);border-color:rgba(135,157,205,.25);background:rgba(255,255,255,.045)}
.token-icon{box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 8px 18px rgba(0,0,0,.20)}
.tusdt-icon{background:linear-gradient(145deg,#1b9d8c,#0b6c60)}
.hill-icon{background:linear-gradient(145deg,#7864f4,#5140c9)}
.bnb-icon{background:linear-gradient(145deg,#e1ad45,#9b6810)}

/* Status */
.status-card{background:linear-gradient(145deg,rgba(15,24,43,.88),rgba(8,14,27,.94))}
.status-grid div{border-color:rgba(111,133,177,.13);background:rgba(255,255,255,.025)}
.status-grid strong{color:#e8efff}
#buySlippage{color:#63e5b3}
#sellSlippage{color:#ff9292}

@media(max-width:620px){
  .app{padding-top:20px}
  .swap-card,.wallet-card-new{padding:17px}
  .tab{min-height:44px}
  .large-input input{font-size:22px}
}

/* Header wallet actions */
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.secondary-action{border:1px solid rgba(91,124,255,.30);border-radius:12px;padding:13px 17px;background:linear-gradient(145deg,rgba(91,124,255,.14),rgba(91,124,255,.06));color:#dfe6ff;font-weight:800;cursor:pointer;transition:.2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.secondary-action:hover{background:linear-gradient(145deg,rgba(91,124,255,.23),rgba(91,124,255,.10));border-color:rgba(126,150,255,.50);transform:translateY(-1px)}
.secondary-action:disabled{opacity:.6;cursor:wait;transform:none}
@media(max-width:620px){.header-actions{width:100%;flex-direction:column}.header-actions button{width:100%}}

/* Connected wallet header state */
#connectBtn.wallet-connected{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:150px;
  background:linear-gradient(135deg,#1c2a48,#142039);
  border:1px solid rgba(126,150,255,.38);
  color:#e8eeff;
  box-shadow:0 10px 28px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.08);
}
#connectBtn.wallet-connected:hover{
  background:linear-gradient(135deg,#25365b,#182642);
  border-color:rgba(151,168,255,.58);
}
.disconnect-icon,.connect-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:rgba(255,255,255,.08);
  font-size:15px;
  line-height:1;
}
.disconnect-icon{color:#ff9b9b}
.connect-icon{color:#b8c7ff}
.wallet-short-address{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1px;
}

/* Multi-wallet connection picker */
.wallet-picker-backdrop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,7,18,.72);backdrop-filter:blur(8px);z-index:9999;padding:20px}
.wallet-picker-backdrop.show{display:flex}
.wallet-picker{width:min(420px,100%);background:#101a2d;border:1px solid rgba(255,255,255,.12);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.45);padding:20px}
.wallet-picker-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:#f5f7ff}.wallet-picker-head strong{display:block;font-size:20px}.wallet-picker-head small{display:block;margin-top:4px;color:#91a0bb}.wallet-picker-close{border:0;background:rgba(255,255,255,.07);color:#fff;width:34px;height:34px;border-radius:10px;font-size:22px;cursor:pointer}
.wallet-picker-list{display:grid;gap:10px}.wallet-option{display:flex;align-items:center;gap:12px;width:100%;border:1px solid rgba(255,255,255,.09);background:#0b1324;color:#f5f7ff;border-radius:14px;padding:13px 14px;cursor:pointer;text-align:left;font:inherit}.wallet-option:hover{border-color:rgba(95,130,255,.65);background:#121e35}.wallet-option-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#26365d;font-weight:800}.wallet-option-arrow{margin-left:auto;color:#8ea1c4;font-size:24px}.wallet-empty{padding:15px;color:#a9b5cb;line-height:1.5;background:#0b1324;border-radius:12px}.wallet-picker-note{display:block;margin-top:14px;color:#7f8da7;line-height:1.45}

.wallet-option-image{width:36px;height:36px;border-radius:10px;object-fit:cover;background:#26365d;flex:0 0 36px}

.network-switch-label{display:flex;align-items:center;gap:8px;color:var(--muted,#9aa4b2);font-size:12px;font-weight:700}
.network-switch{min-height:40px;padding:0 12px;border:1px solid var(--border,#2a3445);border-radius:10px;background:var(--card,#101827);color:inherit;font:inherit;cursor:pointer}
@media(max-width:760px){.network-switch-label{width:100%;justify-content:space-between}.network-switch{flex:1;max-width:180px}}