:root{
  --bg: #070a10;
  --bg-panel: #0e131c;
  --bg-panel-raised: #131a26;
  --border: #202836;
  --border-soft: #1a2130;
  --cyan: #4fd8e8;
  --blue: #4a7ce8;
  --violet: #6a5bea;
  --grad: linear-gradient(135deg, var(--cyan), var(--blue) 55%, var(--violet));
  --grad-soft: linear-gradient(135deg, rgba(79,216,232,0.14), rgba(74,124,232,0.14) 55%, rgba(106,91,234,0.14));
  --text: #eef1f8;
  --text-dim: #8d97ac;
  --text-faint: #576079;
  --ok: #34d399;
  --ok-bg: rgba(52,211,153,0.10);
  --bad: #f4576b;
  --bad-bg: rgba(244,87,107,0.10);
  --warn: #f0b83b;
  --warn-bg: rgba(240,184,59,0.10);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-glow: 0 0 0 1px rgba(79,216,232,0.08), 0 20px 60px -20px rgba(74,124,232,0.35);
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; padding:0;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 12% -5%, rgba(74,124,232,0.16), transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(79,216,232,0.10), transparent 38%),
    radial-gradient(circle at 50% 110%, rgba(106,91,234,0.10), transparent 40%);
  color: var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  line-height:1.55;
  overflow-x:hidden;
}
.mono{ font-family:'JetBrains Mono',monospace; }
.display{ font-family:'Space Grotesk',sans-serif; }
::selection{ background: rgba(79,216,232,0.28); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------------- background scan grid ---------------- */
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.35;
  background-image:
    linear-gradient(rgba(79,216,232,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,216,232,0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, black, transparent 75%);
}
.bg-scanline{
  position:fixed; left:0; right:0; height:2px; z-index:1; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(79,216,232,0.5), transparent);
  animation: scan 7s linear infinite;
  opacity: 0.5;
}
@keyframes scan{ 0%{ top:-2%; } 100%{ top:102%; } }

/* ---------------- topbar ---------------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top:0; z-index: 30;
  background: rgba(7,10,16,0.72);
  backdrop-filter: blur(14px) saturate(140%);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ width:28px; height:28px; object-fit:contain; filter: drop-shadow(0 0 10px rgba(79,216,232,0.35)); }
.brand-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; letter-spacing:0.6px; }
.brand-tag{ font-size:10px; color: var(--text-faint); letter-spacing:1.6px; text-transform:uppercase; margin-top:1px; }
.topbar-right{ display:flex; align-items:center; gap:10px; }
.wallet-pill{
  font-family:'JetBrains Mono',monospace; font-size:12px;
  background: var(--bg-panel-raised); border:1px solid var(--border);
  padding:6px 12px; border-radius:100px; color: var(--text-dim);
  display:flex; align-items:center; gap:8px;
}
.dot{ width:6px; height:6px; border-radius:50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }

.source-badge{ font-family:'JetBrains Mono',monospace; font-size:10px; padding:4px 9px; border-radius:100px; border:1px solid var(--border); letter-spacing:0.5px; }
.source-badge.live{ color: var(--ok); border-color: rgba(52,211,153,0.3); background: var(--ok-bg); }
.source-badge.mock{ color: var(--warn); border-color: rgba(240,184,59,0.3); background: var(--warn-bg); }

/* ---------------- buttons ---------------- */
.btn{
  font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px;
  border-radius: 9px; border:1px solid transparent; cursor:pointer;
  padding: 11px 20px; transition: transform .15s var(--ease), filter .15s ease, background .15s ease, box-shadow .2s ease, border-color .15s ease;
  position:relative;
}
.btn:active{ transform: scale(0.96); }
.btn-primary{ background: var(--grad); color:#04101a; box-shadow: 0 8px 24px -8px rgba(74,124,232,0.55); }
.btn-primary:hover{ filter: brightness(1.1); box-shadow: 0 10px 30px -8px rgba(74,124,232,0.75); transform: translateY(-1px); }
.btn-outline{ background: rgba(255,255,255,0.02); border-color: var(--border); color: var(--text); }
.btn-outline:hover{ border-color: var(--cyan); color: var(--cyan); background: rgba(79,216,232,0.06); }
.btn-ghost{ background: var(--bg-panel-raised); color: var(--text-dim); border-color: var(--border); }
.btn-ghost:hover{ color: var(--text); border-color: #2a3346; }
.btn-sm{ padding:7px 13px; font-size:12.5px; border-radius:8px; }
.btn:disabled{ opacity:0.4; cursor:not-allowed; }

/* ---------------- shells ---------------- */
.hidden{ display:none !important; }
.fade-in{ animation: fadeIn .5s var(--ease) both; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
.view-transition{ animation: viewIn .55s var(--ease) both; }
@keyframes viewIn{ from{ opacity:0; transform: translateY(16px) scale(0.99); } to{ opacity:1; transform:none; } }

/* ---------------- landing ---------------- */
.landing{
  position:relative; z-index:2;
  min-height: calc(100vh - 60px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 60px 20px;
}
.logo-orbit{ position:relative; width:110px; height:110px; margin-bottom:26px; }
.logo-orbit img{
  width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 0 40px rgba(79,216,232,0.35));
  animation: float 5s ease-in-out infinite;
}
.logo-orbit::after{
  content:''; position:absolute; inset:-18px; border-radius:50%;
  border:1px dashed rgba(79,216,232,0.18);
  animation: spin 22s linear infinite;
}
@keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }
@keyframes spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

.landing .eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color: var(--cyan); margin-bottom:16px; display:flex; align-items:center; gap:8px;
}
.landing .eyebrow::before, .landing .eyebrow::after{ content:''; width:22px; height:1px; background: rgba(79,216,232,0.4); }
.landing h1{ font-family:'Space Grotesk',sans-serif; font-size: clamp(28px, 5vw, 46px); font-weight:700; margin:0 0 12px; letter-spacing:0.2px; max-width:780px; }
.landing h1 span{ background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.landing p.sub{ color: var(--text-dim); font-size: clamp(14px,2vw,16px); max-width:540px; margin:0 0 36px; }
.connect-options{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.landing-foot{ margin-top:50px; font-size:11.5px; color: var(--text-faint); font-family:'JetBrains Mono',monospace; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

.trust-row{ display:flex; gap:22px; margin-top:44px; flex-wrap:wrap; justify-content:center; }
.trust-item{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.trust-item .n{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; color: var(--text); }
.trust-item .l{ font-size:10.5px; color: var(--text-faint); letter-spacing:1px; text-transform:uppercase; }

/* ---------------- app grid ---------------- */
.app-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 300px 1fr; gap:18px;
  padding: 20px 24px 80px; max-width: 1220px; margin:0 auto;
}
@media (max-width: 900px){ .app-grid{ grid-template-columns: 1fr; padding: 16px 14px 100px; } }

.panel{
  background: linear-gradient(180deg, var(--bg-panel), rgba(14,19,28,0.6));
  border:1px solid var(--border-soft); border-radius: var(--radius);
  padding: 18px; backdrop-filter: blur(6px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.panel:hover{ border-color: #26304a; }
.panel + .panel{ margin-top:16px; }
.panel-title{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
  color: var(--text-faint); margin:0 0 14px; display:flex; align-items:center; justify-content:space-between; gap:8px;
}

.cvi-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px dashed var(--border-soft); font-size:13px; }
.cvi-row:last-child{ border-bottom:none; }
.cvi-label{ color: var(--text-dim); }
.cvi-val{ font-family:'JetBrains Mono',monospace; font-weight:600; }
.tier-badge{ display:inline-block; padding:3px 10px; border-radius:6px; font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:600; letter-spacing:0.3px; }
.tier-0{ background: var(--bad-bg); color: var(--bad); }
.tier-1{ background: var(--warn-bg); color: var(--warn); }
.tier-2{ background: var(--ok-bg); color: var(--ok); }
.status-active{ color: var(--ok); }
.status-revoked{ color: var(--bad); }

@keyframes shimmer{ 0%{ background-position: -200px 0; } 100%{ background-position: 200px 0; } }
.skeleton{ display:inline-block; height:14px; width:64px; border-radius:5px; background: linear-gradient(90deg, #161d29 25%, #212a3c 37%, #161d29 63%); background-size: 400px 100%; animation: shimmer 1.3s linear infinite; }

select.demo-select{
  width:100%; background: var(--bg-panel-raised); color: var(--text); border:1px solid var(--border);
  border-radius:8px; padding:10px 11px; font-family:'Inter',sans-serif; font-size:13px; margin-top:6px;
  cursor:pointer; transition: border-color .15s ease;
}
select.demo-select:focus{ outline:none; border-color: var(--cyan); }
.demo-note{ font-size:11px; color: var(--text-faint); margin-top:8px; line-height:1.6; }

.quick-actions{ display:flex; flex-direction:column; gap:8px; }
.quick-actions .btn{ text-align:left; display:flex; align-items:center; gap:8px; }

/* ---------------- chat column ---------------- */
.chat-col{ display:flex; flex-direction:column; min-height:600px; }
.chat-scroll{ flex:1; overflow-y:auto; padding:6px 4px 10px; display:flex; flex-direction:column; gap:16px; max-height:64vh; scroll-behavior:smooth; }

.msg{ display:flex; gap:10px; max-width:94%; animation: msgIn .4s var(--ease) both; }
@keyframes msgIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
.msg.user{ align-self:flex-end; flex-direction:row-reverse; }
.avatar{ width:28px; height:28px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; }
.avatar.ai{ background: var(--grad); color:#04101a; box-shadow: 0 4px 14px -4px rgba(74,124,232,0.6); }
.avatar.user{ background: var(--bg-panel-raised); border:1px solid var(--border); color: var(--text-dim); }
.bubble{ background: var(--bg-panel-raised); border:1px solid var(--border-soft); border-radius: var(--radius-sm); padding:12px 14px; font-size:13.6px; }
.msg.user .bubble{ background: rgba(74,124,232,0.10); border-color: rgba(74,124,232,0.28); }

.typing-dots{ display:inline-flex; gap:4px; align-items:center; }
.typing-dots span{ width:5px; height:5px; border-radius:50%; background: var(--cyan); animation: bounce 1.2s infinite ease-in-out; }
.typing-dots span:nth-child(2){ animation-delay:.15s; }
.typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{ 0%,60%,100%{ transform: translateY(0); opacity:.5; } 30%{ transform: translateY(-4px); opacity:1; } }

/* result terminal card */
.result-card{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--border-soft); background:#0a0e15; font-family:'JetBrains Mono',monospace; box-shadow: var(--shadow-glow); }
.result-head{ display:flex; align-items:center; justify-content:space-between; padding:9px 14px; border-bottom:1px solid var(--border-soft); background: rgba(255,255,255,0.02); }
.result-head .tag{ font-size:10px; color: var(--text-faint); letter-spacing:1px; }
.status-line{ padding:15px 14px; display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; letter-spacing:0.4px; }
.status-line.ALLOWED{ color: var(--ok); }
.status-line.BLOCKED{ color: var(--bad); }
.status-line.CONDITIONAL{ color: var(--warn); }
.status-line .chip{ padding:3px 10px; border-radius:6px; font-size:12px; }
.status-line.ALLOWED .chip{ background: var(--ok-bg); box-shadow: 0 0 16px -4px var(--ok); }
.status-line.BLOCKED .chip{ background: var(--bad-bg); box-shadow: 0 0 16px -4px var(--bad); }
.status-line.CONDITIONAL .chip{ background: var(--warn-bg); box-shadow: 0 0 16px -4px var(--warn); }
.result-body{ padding:0 14px 14px; font-family:'Inter',sans-serif; }
.result-section{ margin-top:11px; animation: fadeIn .4s var(--ease) both; }
.result-section .k{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color: var(--text-faint); margin-bottom:5px; }
.result-section .v{ font-size:13.5px; color: var(--text); }
.result-section ul{ margin:4px 0 0; padding-left:18px; font-size:13.5px; }
.result-section li{ margin-bottom:4px; }
.result-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.cursor-blink{ display:inline-block; width:7px; height:13px; background: var(--cyan); margin-left:3px; animation: blink 1.1s step-end infinite; vertical-align:-2px; }
@keyframes blink{ 50%{ opacity:0; } }

/* composer */
.composer{ margin-top:14px; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.chip-btn{ font-family:'Inter',sans-serif; font-size:12px; color: var(--text-dim); background: var(--bg-panel-raised); border:1px solid var(--border); border-radius:100px; padding:6px 13px; cursor:pointer; transition: all .15s ease; }
.chip-btn:hover{ border-color: var(--cyan); color: var(--cyan); transform: translateY(-1px); }
.composer-row{ display:flex; gap:8px; }
.composer-row input{ flex:1; background: var(--bg-panel-raised); border:1px solid var(--border); border-radius:9px; padding:13px 15px; color: var(--text); font-family:'Inter',sans-serif; font-size:13.8px; transition: border-color .15s ease; }
.composer-row input:focus{ outline:none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(79,216,232,0.12); }
.composer-row input::placeholder{ color: var(--text-faint); }

/* modal */
.modal-overlay{ position:fixed; inset:0; background: rgba(4,6,10,0.75); backdrop-filter: blur(4px); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; animation: fadeIn .2s ease both; }
.modal{ background: var(--bg-panel); border:1px solid var(--border-soft); border-radius: var(--radius); max-width:560px; width:100%; padding:24px; max-height:80vh; overflow-y:auto; animation: viewIn .3s var(--ease) both; box-shadow: var(--shadow-glow); }
.modal h3{ font-family:'Space Grotesk',sans-serif; margin:0 0 4px; font-size:19px; }
.modal .modal-sub{ color: var(--text-faint); font-size:12px; margin-bottom:16px; font-family:'JetBrains Mono',monospace; }
.modal pre{ background:#0a0e15; border:1px solid var(--border-soft); border-radius:9px; padding:14px; font-family:'JetBrains Mono',monospace; font-size:12px; color: var(--text-dim); overflow-x:auto; white-space:pre-wrap; word-break:break-word; }
.modal-actions{ display:flex; gap:8px; margin-top:16px; justify-content:flex-end; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius:8px; }
::-webkit-scrollbar-track{ background: transparent; }

.badge-inline{ font-family:'JetBrains Mono',monospace; font-size:10px; padding:3px 8px; border-radius:6px; background: var(--bg-panel-raised); color: var(--text-faint); border:1px solid var(--border); }

/* focus visibility for a11y */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline: 2px solid var(--cyan); outline-offset: 2px;
}

@media (max-width: 560px){
  .landing h1{ font-size: 26px; }
  .trust-row{ gap:16px; }
  .composer-row{ flex-direction:column; }
  .composer-row .btn{ width:100%; }
  .topbar{ padding: 12px 14px; }
  .brand-tag{ display:none; }
}

/* ---------------- chain select (compact, inline in a cvi-row) ---------------- */
.chain-select{
  background: var(--bg-panel-raised); color: var(--text); border:1px solid var(--border);
  border-radius:6px; padding:4px 8px; font-family:'JetBrains Mono',monospace; font-size:12px; cursor:pointer;
}
.chain-select:focus{ outline:none; border-color: var(--cyan); }

/* ---------------- pool status grid ---------------- */
.pool-status-grid{ display:flex; flex-direction:column; gap:8px; }
.pool-status-card{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: var(--bg-panel-raised); border:1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding:10px 12px; transition: border-color .15s ease;
}
.pool-status-card:hover{ border-color: #2a3346; }
.pool-status-card .name{ font-size:12.5px; color: var(--text); line-height:1.4; }
.pool-status-card .name .tag-live{ font-family:'JetBrains Mono',monospace; font-size:9.5px; color: var(--text-faint); display:block; margin-top:2px; }
.pool-badge{ font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:6px; flex-shrink:0; letter-spacing:0.3px; }
.pool-badge.ALLOWED{ background: var(--ok-bg); color: var(--ok); }
.pool-badge.BLOCKED{ background: var(--bad-bg); color: var(--bad); }
.pool-badge.CONDITIONAL{ background: var(--warn-bg); color: var(--warn); }
.pool-badge.loading{ background: var(--bg-panel); color: var(--text-faint); }

/* ---------------- tracked wallets ---------------- */
.tracked-wallet-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background: var(--bg-panel-raised); border:1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding:9px 11px; margin-bottom:8px; font-family:'JetBrains Mono',monospace; font-size:12.5px;
}
.tracked-wallet-row .addr{ color: var(--text); }
.tracked-wallet-row .addr .you-tag{ font-family:'Inter',sans-serif; font-size:9.5px; color: var(--cyan); border:1px solid rgba(79,216,232,0.3); border-radius:100px; padding:1px 7px; margin-left:6px; letter-spacing:0.3px; }
.tracked-wallet-row .actions{ display:flex; gap:6px; }
.tracked-wallet-row .icon-btn{
  background:none; border:1px solid var(--border); color: var(--text-faint); border-radius:6px; padding:4px 8px; cursor:pointer; font-size:11px;
  font-family:'Inter',sans-serif; transition: all .15s ease;
}
.tracked-wallet-row .icon-btn:hover{ color: var(--cyan); border-color: var(--cyan); }
.tracked-wallet-row .icon-btn.danger:hover{ color: var(--bad); border-color: var(--bad); }

/* ---------------- verify / form fields ---------------- */
.form-field{ margin-bottom:12px; }
.form-field label{ display:block; font-size:11.5px; color: var(--text-dim); margin-bottom:5px; }
.form-field label .optional{ color: var(--text-faint); }
.form-field input, .form-field select{
  width:100%; background: var(--bg-panel-raised); color: var(--text); border:1px solid var(--border);
  border-radius:8px; padding:9px 11px; font-family:'Inter',sans-serif; font-size:13px;
}
.form-field input:focus, .form-field select:focus{ outline:none; border-color: var(--cyan); }
.verify-status{ font-size:12.5px; padding:10px 12px; border-radius:8px; margin-top:6px; margin-bottom:6px; }
.verify-status.ok{ background: var(--ok-bg); color: var(--ok); }
.verify-status.err{ background: var(--bad-bg); color: var(--bad); }
.verify-status.pending{ background: var(--bg-panel-raised); color: var(--text-dim); }

/* ---------------- transaction list ---------------- */
.tx-list{ max-height:50vh; overflow-y:auto; }
.tx-row{
  display:flex; flex-direction:column; gap:3px;
  border-bottom:1px dashed var(--border-soft); padding:10px 2px; font-family:'JetBrains Mono',monospace; font-size:11.5px;
}
.tx-row:last-child{ border-bottom:none; }
.tx-row .tx-top{ display:flex; justify-content:space-between; color: var(--text); }
.tx-row .tx-bottom{ color: var(--text-faint); font-size:10.5px; }
.tx-type{ text-transform:uppercase; letter-spacing:0.5px; color: var(--cyan); }

/* button inside chat result for real verification CTA */
.result-actions .btn-verify-cta{ background: var(--grad); color:#04101a; border:none; }