/* ==== Base / reset ==== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color: #0f1221;
  background: #0b0f1e;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* === theme (green / "salat") === */
:root{
  --pri-1:#34d399; /* light */
  --pri-2:#10b981; /* main */
  --pri-3:#059669; /* dark */
  --ink-1:#ffffff;
  --ink-2:#cdd3ff;
  --bg-1:#0f1530;
  --bg-2:#0b1028;
  --line:rgba(255,255,255,.08);
}
.button-gradient{
  background: linear-gradient(180deg,var(--pri-1),var(--pri-2));
  box-shadow: 0 6px 18px rgba(16,185,129,.25);
}

/* ==== Layout ==== */
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
.header { position: sticky; top:0; z-index:50; background: rgba(6, 10, 24, 0.8); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.header-inner { display:flex; align-items:center; gap:14px; padding:12px 20px; }
.header .brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.header .brand img { width: 28px; height: 28px; border-radius: 6px; }
.header .brand span { color:#fff; font-weight:700; letter-spacing:.2px; }
.nav { margin-left:16px; display:flex; gap:10px; }
.nav a { color:#cdd3ff; text-decoration:none; padding:8px 10px; border-radius:10px; }
.nav a.active, .nav a:hover { background:#151a33; color:#fff; }
.header-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.header-right .link-x{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:8px 10px; border-radius:10px; color:#cdd3ff; border:1px solid var(--line); }
.header-right .link-x:hover { background:#151a33; color:#fff; }
.btn, .btn-wallet { appearance:none; border:0; cursor:pointer; padding:10px 14px; border-radius:12px; font-weight:600; color:var(--ink-1); }
.btn, .btn-wallet { composes: button-gradient; background: linear-gradient(180deg,var(--pri-1),var(--pri-2)); box-shadow: 0 6px 18px rgba(16,185,129,.25); }
.btn-outline { background:transparent; color:#cdd3ff; border:1px solid var(--line); }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; color:#b9ffc9; background:#132a22; border:1px solid rgba(16,185,129,.25); }

/* ==== Grids / cards ==== */
.grid { display:grid; gap:16px; grid-template-columns: repeat(12, 1fr); }
.card { grid-column: span 12; background: var(--bg-1); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.card-head { display:flex; gap:14px; align-items:center; padding:16px; border-bottom:1px solid var(--line); }
.token-logo { width:48px; height:48px; border-radius:8px; object-fit:cover; background:#111730; }
.card-title { color:#fff; font-weight:700; letter-spacing:.2px; }
.card-sub { color:#a5adff; font-size:13px; }
.card-body { padding:16px; color:#d8dcff; }
.card-rows { display:grid; gap:10px; }
.row { display:flex; align-items:center; gap:10px; justify-content:space-between; background:var(--bg-2); border:1px solid rgba(255,255,255,.04); padding:10px 12px; border-radius:12px; }

/* progress bar now green */
.progress { height:10px; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.progress > span { display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--pri-2), var(--pri-1)); }

/* ==== Forms ==== */
.form { display:grid; gap:14px; grid-template-columns: repeat(12, 1fr); }
.form .field { grid-column: span 12; display:flex; flex-direction:column; gap:8px; }
.form label { color:#cdd3ff; font-size:14px; }
.form input[type="text"], .form input[type="number"], .form input[type="url"], .form input[type="file"], .form textarea {
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--line); background:#0b1028; color:#e9ecff; outline:none;
}
.form textarea { min-height:110px; resize:vertical; }
.form .row2 { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.form .hint { font-size:12px; color:#9aa3ff; }

/* ==== Preview card (stable layout) ==== */
.preview {
  background: var(--bg-1);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
}
.preview-grid {
  display:grid;
  grid-template-columns: 72px 1fr 200px; /* logo | text | right facts */
  gap:14px;
  align-items:center;
}
.preview-logo {
  width:72px; height:72px; border-radius:12px; object-fit:cover; background:#111730; border:1px solid var(--line);
}
.preview-name { color:#fff; font-weight:700; }
.preview-ticker { margin-left:8px; }
.preview-desc { color:#cfd6ff; font-size:14px; margin-top:6px; max-width: 100%; }
.preview-right { color:#cfd6ff; font-size:14px; line-height:1.5; }
@media (max-width: 820px){
  .preview-grid { grid-template-columns: 56px 1fr; }
  .preview-right { grid-column: 1 / -1; }
}

/* ==== Table-like sections ==== */
.table-rows { display:grid; gap:10px; }
.table-rows .trow { display:flex; gap:10px; justify-content:space-between; align-items:center; padding:12px; border:1px solid var(--line); background:#0b1028; border-radius:12px; color:#d8dcff; }

/* ==== Footer ==== */
.footer { padding: 28px 20px; color:#8f97d9; text-align:center; border-top:1px solid var(--line); margin-top: 26px; }

/* ==== Wallet popover & modal (green accent) ==== */
.wallet-pop { position:absolute; min-width:240px; background:#0f1530; border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.4); padding:10px; transform-origin: top left; opacity:0; pointer-events:none; transform: translateY(-6px) scale(.98); transition:.15s ease; }
.wallet-pop.is-open { opacity:1; pointer-events:auto; transform: translateY(0) scale(1); }
.wallet-pop__row { display:flex; align-items:center; gap:10px; color:#cdd3ff; }
.wallet-pop__actions { margin-top:10px; display:flex; justify-content:flex-end; }
.wallet-pop .btn-disconnect { background:#142b22; border:1px solid rgba(16,185,129,.3); color:#b9ffc9; padding:8px 10px; border-radius:10px; cursor:pointer; }

/* Modal */
.modal { position:fixed; inset:0; display:none; }
.modal.is-open { display:block; }
.modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); }
.modal__card { position:relative; z-index:10; width:min(480px, 92vw); margin: 8vh auto; background:#0f1530; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.modal__header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); }
.modal__title { color:#fff; margin:0; font-size:18px; }
.modal__close { background:transparent; border:0; color:#cdd3ff; font-size:20px; cursor:pointer; }
.modal__body { padding:16px; color:#cdd3ff; }
.wallet-list { display:grid; gap:10px; }
.wallet-item { display:flex; align-items:center; gap:12px; width:100%; background:#0b1028; border:1px solid var(--line); color:#e9ecff; padding:12px 14px; border-radius:12px; cursor:pointer; }
.wallet-item.is-loading { opacity:.7; pointer-events:none; }
.wallet-item__icon { display:grid; place-items:center; width:28px; height:28px; background:#132a22; border:1px solid rgba(16,185,129,.25); border-radius:8px; }
.modal__hint { margin-top:8px; font-size:12px; color:#8f97d9; }
.modal__error { margin-top:10px; color:#ff6b6b; }

label .req { color:#8ff7c5; font-weight:700; margin-left:4px; }
input[type="checkbox"] { width:16px; height:16px; }
hr.sep { border:0; border-top:1px solid var(--line); margin:10px 0; }