:root {
  color-scheme: dark;
  --bg: #0d0d16;
  --panel: #151522;
  --panel2: #1c1c2d;
  --text: #f4f3ff;
  --muted: #a4a3bb;
  --line: rgba(174,169,224,.16);
  --purple: #8870ff;
  --blue: #5e8bff;
  --green: #54d8a0;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 15% -15%,rgba(117,84,255,.18),transparent 42%),
    radial-gradient(ellipse at 100% 5%,rgba(69,101,220,.12),transparent 38%),
    var(--bg);
  color: var(--text);
  font-family: Inter,Segoe UI,Arial,sans-serif;
  min-height: 100vh;
}
button,input,select { font: inherit; }
button,a,select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  min-height: 78px; display:flex; align-items:center; gap:28px;
  padding: 0 clamp(16px,4vw,62px); border-bottom:1px solid var(--line);
  background:rgba(13,13,22,.78); backdrop-filter:blur(16px);
  position:sticky; top:0; z-index:10;
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-size:20px; font-weight:800; letter-spacing:-.5px; }
.brand-mark {
  display:grid; place-items:center; width:36px; height:36px; border-radius:13px;
  background:linear-gradient(140deg,#9b7cff,#5378ff); color:white; font-size:21px;
  box-shadow:0 7px 22px rgba(111,89,255,.25);
}
.main-nav { display:flex; align-items:center; gap:6px; margin:0 auto; }
.main-nav a { text-decoration:none; color:var(--muted); padding:10px 13px; border-radius:11px; font-size:14px; font-weight:650; }
.main-nav a:hover { color:var(--text); background:rgba(150,145,210,.08); }
.main-nav a.active { color:#fff; background:rgba(136,112,255,.17); }
.top-actions { display:flex; align-items:center; gap:12px; }
.network-pill {
  display:flex; align-items:center; gap:8px; font-size:12px; color:#c7c5dd;
  padding:9px 12px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.025);
}
.dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px rgba(84,216,160,.5); }
.wallet-btn,.secondary-btn {
  border:1px solid rgba(150,140,230,.32); color:#fff; font-weight:700;
  padding:11px 16px; border-radius:12px; background:#222039; cursor:pointer;
}
.wallet-btn:hover,.secondary-btn:hover { background:#30294f; }
.main { width:100%; max-width:1120px; padding:52px 20px 34px; margin:0 auto; flex:1; }
.intro { margin:0 auto 28px; max-width:650px; text-align:center; }
.eyebrow { font-size:11px; color:#a89aff; letter-spacing:2.5px; font-weight:800; }
h1 { margin:11px 0 12px; font-size:clamp(29px,4vw,43px); letter-spacing:-1.5px; }
.intro p,.section-title p,.faucet-toolbar p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.card {
  background:linear-gradient(160deg,rgba(28,28,45,.97),rgba(19,19,31,.97));
  border:1px solid var(--line); border-radius:24px; padding:24px;
  box-shadow:0 25px 80px rgba(0,0,0,.25);
}
.swap-card,.liquidity-card { width:100%; max-width:560px; margin:0 auto; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.section-title h2,.faucet-toolbar h2 { font-size:19px; margin:0 0 5px; letter-spacing:-.4px; }
.icon-btn {
  width:38px; height:38px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel2); color:#d9d5ff; font-size:23px; cursor:pointer;
}
.amount-box { border:1px solid rgba(172,166,225,.13); background:rgba(5,5,12,.25); border-radius:17px; padding:15px; }
.amount-label { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; margin-bottom:12px; }
.amount-row { display:flex; align-items:center; gap:10px; }
.amount-row input {
  width:100%; min-width:0; outline:none; border:0; background:transparent;
  color:#fff; font-size:clamp(24px,4vw,30px); letter-spacing:-.7px;
}
.amount-row input::placeholder { color:#5e5d75; }
.token-select {
  max-width:158px; min-width:116px; border:1px solid var(--line); background:#26253b;
  color:#fff; border-radius:12px; padding:12px 8px; outline:none; cursor:pointer; font-size:14px; font-weight:700;
}
.flip-row { display:grid; place-items:center; height:32px; position:relative; z-index:1; }
.flip-btn {
  border:4px solid #171725; border-radius:12px; width:38px; height:38px; color:#c3b8ff;
  background:#292541; font-weight:800; cursor:pointer;
}
.quote-box { background:rgba(4,4,12,.2); border:1px solid var(--line); border-radius:15px; padding:13px 15px; margin:16px 0; }
.quote-line { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:12px; padding:7px 0; color:var(--muted); }
.quote-line strong { color:#f0efff; text-align:right; font-size:12px; font-weight:650; overflow-wrap:anywhere; }
.small-select { border:1px solid var(--line); color:#fff; background:#26253b; padding:7px 9px; border-radius:9px; }
.primary-btn {
  width:100%; min-height:49px; border:0; border-radius:14px; color:#fff; font-weight:800;
  cursor:pointer; background:linear-gradient(105deg,#876bff,#547fff);
  box-shadow:0 8px 25px rgba(104,94,255,.18); transition:filter .12s;
}
.primary-btn:hover { filter:brightness(1.12); }
.primary-btn:disabled { opacity:.5; cursor:wait; }
.status { color:var(--muted); font-size:12px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; margin-top:13px; }
.status.error { color:#ff999f; }
.status.success { color:var(--green); }
.tx-link { display:block; color:#b9adff; font-size:12px; margin-top:10px; text-decoration:none; }
.liquidity-link { display:grid; place-items:center; height:31px; }
.liquidity-link span { display:grid; place-items:center; background:#292541; border:4px solid #171725; border-radius:12px; width:37px; height:37px; color:#c3b8ff; font-size:20px; font-weight:800; }
.faucet-toolbar { display:flex; justify-content:space-between; align-items:center; gap:15px; margin:0 0 18px; }
.faucet-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.faucet-card { border:1px solid var(--line); border-radius:20px; padding:21px; background:linear-gradient(145deg,rgba(28,28,45,.96),rgba(18,18,30,.96)); min-width:0; }
.token-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:15px; background:linear-gradient(140deg,#866bff,#527dff); font-size:18px; font-weight:800; margin-bottom:17px; }
.faucet-card h3 { font-size:19px; margin:0 0 14px; }
.faucet-contract {
  margin:12px 0 14px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(10,10,20,.22);
}
.faucet-contract-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
}
.faucet-contract-label {
  color:var(--muted);
  font-size:11px;
  line-height:1;
  margin:0;
}
.faucet-contract-row {
  display:block;
  min-width:0;
  width:100%;
}
.faucet-contract-address {
  display:block;
  width:100%;
  min-width:0;
  color:#d8d2ff;
  font-size:10px;
  line-height:1.6;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  overflow-wrap:normal;
  word-break:normal;
  scrollbar-width:thin;
}
.faucet-copy-btn {
  display:grid;
  place-items:center;
  flex:0 0 22px;
  width:22px;
  height:22px;
  min-height:22px;
  padding:0;
  border-radius:6px;
  color:#d8d2ff;
}
.faucet-copy-btn svg {
  display:block;
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.faucet-copy-btn.copied {
  color:var(--green);
  border-color:var(--green);
}
.contract-copy-status {
  min-height:15px;
  margin-top:5px;
  color:var(--green);
  font-size:10px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.faucet-amount,.faucet-balance,.faucet-cooldown { color:var(--muted); font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.faucet-balance { color:#f0efff; margin-top:6px; }
.faucet-cooldown { min-height:40px; margin:7px 0 13px; }
.claim-status { color:var(--muted); font-size:12px; line-height:1.6; margin-top:10px; overflow-wrap:anywhere; }
.footer { text-align:center; padding:20px; color:#77758e; font-size:11px; border-top:1px solid rgba(174,169,224,.08); }
.load-error { max-width:650px; margin:15vh auto; padding:25px; color:#fff; }
.load-error p { color:#ff999f; overflow-wrap:anywhere; }
@media(max-width:850px) {
  .topbar { flex-wrap:wrap; gap:10px; padding-top:12px; padding-bottom:12px; }
  .brand { margin-right:auto; }
  .main-nav { order:3; width:100%; justify-content:center; }
  .top-actions { gap:8px; }
  .network-pill { display:none; }
  .main { padding-top:35px; }
  .faucet-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:520px) {
  .main-nav { gap:0; justify-content:space-between; }
  .main-nav a { padding:9px 10px; font-size:12px; }
  .wallet-btn { padding:10px 12px; font-size:12px; }
  .card { padding:17px; border-radius:20px; }
  .amount-box { padding:12px; }
  .token-select { min-width:104px; max-width:122px; font-size:12px; }
  .faucet-grid { grid-template-columns:1fr; }
  .faucet-card { padding:18px; }
}

.token-import-card {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 18px;
}
.token-import-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.token-import-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 13px;
  outline: none;
  background: rgba(5,5,12,.35);
  color: var(--text);
  font-size: 13px;
}
.token-import-row input:focus {
  border-color: rgba(136,112,255,.7);
}
.token-import-row .secondary-btn {
  white-space: nowrap;
  cursor: pointer;
}
.token-import-row .secondary-btn:disabled {
  opacity: .55;
  cursor: wait;
}
.token-import-card .status {
  margin-top: 11px;
}
@media(max-width:520px) {
  .token-import-row {
    flex-direction: column;
  }
  .token-import-row .secondary-btn {
    min-height: 43px;
  }
}

/* Compact Swap token import */
.swap-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.token-import-toggle {
  font-size: 20px;
  font-weight: 700;
}

.token-import-panel {
  margin: 0 0 16px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(4,4,12,.24);
}

.token-import-panel[hidden] {
  display: none;
}

.token-import-heading {
  margin-bottom: 12px;
}

.token-import-heading h3 {
  margin: 0 0 5px;
  font-size: 14px;
  color: var(--text);
}

.token-import-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.token-import-panel .status {
  margin-top: 10px;
}
/* Token Import Modal */
.swap-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.token-import-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.token-import-modal[hidden] {
  display: none !important;
}

.token-import-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,5,13,.78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.token-import-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 510px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #191827;
  box-shadow: 0 24px 90px rgba(0,0,0,.5);
}

.token-import-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.token-import-modal-header h3 {
  margin: 0 0 7px;
  color: var(--text);
  font-size: 19px;
  font-weight: 800;
}

.token-import-modal-header p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.token-import-close {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
}

.token-import-close:hover {
  background: rgba(255,255,255,.1);
}

.token-import-dialog .token-import-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.token-import-dialog .token-import-row input {
  flex: 1;
  min-width: 0;
}

.token-import-dialog .token-import-row .secondary-btn {
  min-height: 43px;
}

.token-import-dialog .status {
  margin-top: 13px;
}

body.token-import-modal-open {
  overflow: hidden;
}

@media(max-width:520px) {
  .token-import-dialog {
    padding: 18px;
  }

  .token-import-dialog .token-import-row {
    flex-direction: column;
  }

  .token-import-dialog .token-import-row .secondary-btn {
    width: 100%;
  }
}