:root{
  /* Brand + accents */
  --brand:#35d07f;             /* primary brand green */
  --accent:#4ea8de;            /* bright blue accent */
  --ok:#38d9a9;                /* status: OK */

  /* Text */
  --text:#e6edf7;              /* primary text */
  --muted:#8791a7;             /* secondary text */

  /* Backgrounds (dark gradient theme) */
  --bg1:#0b1020;
  --bg2:#0e1730;
  --bg3:#0d1321;

  /* Surfaces */
  --panelA:#0f1830;
  --panelB:#0c1427;

  /* Cards */
  --k-grad: radial-gradient(120% 120% at 0% 0%, #0e1a36 0%, #0b1429 65%);
  --chart-bg:#0e1730;
  --token-grad: radial-gradient(120% 120% at 100% 0%, #10365a 0%, #0b1e36 70%);

  /* Lines */
  --hdr-border:#1f2a46;
  --btn-border:#2b3a61;
  --panel-border:#1a2746;
  --table-bg:#0c152a;
  --th-bg:#0d1935;
  --row-border:#152446;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.5 Inter,system-ui,Segoe UI,Roboto,Arial;
  background:linear-gradient(180deg,var(--bg1),var(--bg2) 25%,var(--bg3));
  color:var(--text);
}

/* Header */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px; position:sticky; top:0;
  background:rgba(13,19,33,.6); border-bottom:1px solid var(--hdr-border);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.dot{width:12px;height:12px;border-radius:50%;background:var(--brand);box-shadow:0 0 18px var(--brand)}
.sub{color:var(--muted); font-weight:600; font-size:12px}
.cluster{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Panels + cards */
.panel{
  background:linear-gradient(180deg,var(--panelA) 0%,var(--panelB) 80%);
  border:1px solid var(--panel-border); border-radius:16px; padding:14px;
}
.panel h2{margin:4px 0 12px;font-size:15px;letter-spacing:.2px;color:#bcd2ff}

/* Generic utilities */
.row{display:flex; gap:10px; align-items:center}
.row > *{flex:1}
.price{font-size:22px; font-weight:800; color:#a9ffcf}
.muted{color:var(--muted)}
.pill{display:inline-block;background:#12385a;border:1px solid #205a92;color:#b7d7ff;padding:4px 8px;border-radius:999px;font-size:12px}
.sep{height:1px;background:#18315a;margin:6px 0}
.mini{font-size:12px; color:var(--muted)}
.stat{font-size:14px; margin:6px 0}

/* Inputs + buttons */
input[type="search"], input[type="number"], input[type="text"], select{
  background:var(--table-bg); border:1px solid #1d2a48; color:#ddecff; border-radius:10px; padding:10px 12px; width:100%;
}
.btn{
  border:1px solid var(--btn-border); color:#ddecff; background:#0f1830; padding:10px 12px; border-radius:10px; font-weight:700; cursor:pointer;
  transition:all .2s ease; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{background:#172445}
.btn.brand{background:linear-gradient(135deg,#1a774c,var(--brand) 80%); color:#05120d; border:0}
.btn.small{padding:6px 8px; font-size:13px}

/* Tables */
.table{overflow-x:auto; border-radius:12px; border:1px solid var(--panel-border); background:var(--table-bg)}
table{width:100%; border-collapse:collapse; min-width:600px}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--row-border)}
th{position:sticky; top:0; background:var(--th-bg); z-index:1; font-size:12px; color:#94a7d6}

/* Status */
.status{display:inline-flex;align-items:center;gap:6px}
.dot2{width:8px;height:8px;border-radius:50%}
.dot2.ok{background:var(--ok); box-shadow:0 0 10px var(--ok)}
.dot2.off{background:#777}

/* Token & charts cards */
.token-box{display:grid; grid-template-columns:1fr; gap:10px;}
.token-card{background: var(--token-grad); border:1px solid #1f3c66; border-radius:14px; padding:12px;}
.k{background: var(--k-grad); border:1px solid #1a2a4b; padding:12px; border-radius:14px;}
.k strong{display:block; font-size:18px}
.chart-card{background:var(--chart-bg);border:1px solid var(--panel-border);border-radius:14px;padding:10px}

/* Progress (used in defi) */
.progress{border-radius:6px;overflow:hidden;height:10px;background:var(--table-bg);border:1px solid var(--panel-border)}
.progress-bar{height:100%;background:var(--brand)}

/* Toasts */
.toast{position:fixed; right:14px; bottom:14px; padding:12px 14px; border-radius:12px; background:#0f1f40; border:1px solid #224078; color:#ddecff; display:none;}
.toast-inline{margin-top:8px;background:#111;color:#fff;padding:10px 12px;border-radius:8px}

/* ================== GRID LAYOUT ================== */
.grid {
  display: grid;
  grid-template-columns: 360px 1fr 420px;
  gap: 16px;
  padding: 16px;
  margin: 0 auto;
  max-width: 1600px;
}
.panel {min-width:0}

/* ============= RESPONSIVE BREAKPOINTS ============= */

/* Tablet: collapse right panel */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: 280px 1fr;
  }
  .grid > section:last-child {
    grid-column: 1 / -1;
  }
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
  header {flex-direction: column; align-items: flex-start; gap: 8px;}
  header .cluster {flex-wrap: wrap; gap: 6px;}
  .tools {flex-direction: column; gap: 8px;}
  .tools input, .tools select {width: 100%;}
}

/* Phones */
@media (max-width: 480px) {
  body {font-size: 13px}
  .btn {font-size: 13px; padding: 6px 10px}
  h2 {font-size: 1rem}
}