:root{
  --bg:#0c1b20;            /* deep teal */
  --card:#0f2427;          /* darker card */
  --text:#ecfff5;          /* soft white with slight green */
  --muted:#9bd3b3;         /* desaturated mint */
  --primary:#2bd96b;       /* TraderSensei green */
  --primary-700:#1fb257;   /* darker green */
  --border:#17413a;        /* teal border */
  --success:#2bd96b;
  --warning:#ffb020;
  --danger:#ff5a6a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji';
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #0b2a30, transparent), var(--bg);
}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace}
.small{font-size:.9rem}

.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:rgba(11,16,32,.85); backdrop-filter: blur(6px); z-index:50;
}
.brand{display:flex; align-items:center; gap:14px}
.brand-logo{width:88px; height:88px}
.brand-text h1{margin:0; font-size:1.25rem; letter-spacing:.04em}
.tagline{margin:2px 0 0; color:var(--muted); font-size:.9rem}

.container{max-width:980px; margin:24px auto; padding:0 16px}

.card{
  background:linear-gradient(180deg, rgba(22,28,54,.8), rgba(15,20,41,.8));
  border:1px solid var(--border);
  border-radius:16px; padding:18px; margin-bottom:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.card.shallow{padding:14px}

.hero{display:flex; align-items:center; gap:18px}
.hero-robot{width:86px; height:auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));}

.tabs{display:flex; gap:6px; margin:20px 0 12px}
.tab{
  background:transparent; color:var(--muted); border:1px solid var(--border);
  padding:10px 14px; border-radius:999px; cursor:pointer
}
.tab.active{background:var(--primary); color:#061222; border-color:transparent; font-weight:600}
.tab:hover{border-color:#294071}

.tab-panel{display:none}
.tab-panel.active{display:block}

.grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.grid-compact{grid-template-columns:1fr auto}

@media (max-width:700px){
  .grid{grid-template-columns:1fr}
}

.field{display:flex; flex-direction:column; gap:8px}
.field span{color:var(--muted); font-size:.9rem}
input{
  background:#0b1226; color:var(--text); border:1px solid var(--border);
  border-radius:12px; padding:12px 12px; outline:none;
}
input:focus{border-color:#2c4a84; box-shadow:0 0 0 3px rgba(22,163,255,.15)}

.actions{display:flex; gap:10px; flex-wrap:wrap}

.btn{
  border:none; background:var(--primary); color:#061222;
  padding:10px 14px; border-radius:12px; font-weight:600; cursor:pointer
}
.btn:hover{background:var(--primary-700)}
.btn-outline{
  background:transparent; color:var(--text); border:1px solid var(--border)
}
.btn-outline:hover{border-color:#3a5aa1}
.btn-ghost{background:transparent; color:var(--muted); border:1px dashed var(--border)}
.btn-ghost:hover{color:var(--text); border-color:#3a5aa1}

.output{
  background:#070c1a; border:1px solid #121a33; padding:12px; border-radius:12px;
  max-height:240px; overflow:auto; white-space:pre-wrap
}

.wallet-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}

.site-footer{border-top:1px solid var(--border); padding:20px; text-align:center; color:var(--muted)}

.btn.is-disabled,
button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.mmx-banner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 1rem;
}

.mmx-banner .muted {
  color: var(--muted);
}

.mmx-banner .btn-outline {
  padding: 8px 12px;
  font-size: .9rem;
}

@media (max-width:700px){
  .mmx-banner .actions .btn { padding:8px 10px; }
}

@media (max-width:700px){
  .mmx-banner .actions { gap: .5rem; display:flex; }
  .mmx-banner .actions .btn { padding: 8px 12px; }
}

.btn-blocked { opacity: .6; }
.btn-blocked:hover { opacity: .8; }

/* Hide the visible Yearn UI card, keep scripts working */
#yearnCard { display: none !important; }
/* Hide the quick-jump link to it */
a[href="#yearnCard"] { display: none !important; }

/* DeFi Scan — responsive controls */
.controls-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:.75rem;
}

/* Actions row becomes its own full-width row and wraps on small screens */
.controls-grid .actions{
  grid-column: 1 / -1;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

/* Tight phones */
@media (max-width:700px){
  .controls-grid { grid-template-columns: 1fr; }
}

/* Make buttons share the row nicely on very small screens */
@media (max-width:480px){
  .controls-grid .actions .btn{
    flex:1 1 33%;
    min-width:0;
  }
}

/* Match <select> visuals to inputs so they don’t overflow narrow columns */
select, textarea{
  background:#0b1226; color:var(--text); border:1px solid var(--border);
  border-radius:12px; padding:12px 12px; outline:none;
}
select:focus { border-color:#2c4a84; box-shadow:0 0 0 3px rgba(22,163,255,.15); }

/* Tweak the grid so fields wrap earlier on small phones */
.controls-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* was 160 */
  gap:.75rem;
}

/* Inline field layout (for checkbox row) */
.field.inline{
  flex-direction: row;
  align-items: center;
  gap:.5rem;
}

/* Remove number spinners to save width */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; }

/* Slightly tighter padding on very small screens */
@media (max-width:480px){
input, select{
    padding:10px 10px;
    font-size:.95rem;
  }
}

/* Landing specific */

.landing-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid var(--border);
  background:rgba(7,14,28,.9);
  position:sticky;
  top:0;
  z-index:40;
}
.nav-wrapper{position:relative;}
.nav-toggle{
  width:46px;
  height:36px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:none;
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:3px;
  background:var(--text);
  border-radius:2px;
}
.nav-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + .5rem);
  background:rgba(7,14,28,.95);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.6rem;
  display:none;
  min-width:220px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.nav-dropdown.open{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.nav-dropdown a{
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
}
.nav-dropdown a:hover{color:var(--text);}
.landing{margin-top:2rem;}

.badge{
  display:inline-block;
  padding:.2rem .65rem;
  border-radius:999px;
  background:rgba(43,217,107,.15);
  color:var(--primary);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.micro-label{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
  margin:0 0 .25rem;
}
.text-link{
  display:inline-block;
  margin-top:.35rem;
  color:var(--primary);
  text-decoration:none;
  font-weight:600;
}
.text-link:hover{opacity:.8;}

.hero-section{
  display:flex;
  gap:2rem;
  flex-wrap:wrap;
  align-items:stretch;
}
.hero-pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem;
  margin-top:1.25rem;
}
.hero-pillars article{
  background:rgba(6,14,22,.5);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem;
}
.hero-section h2{
  margin-top:.4rem;
  font-size:2rem;
}
.hero-actions{
  margin-top:1rem;
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}
.hero-side{
  flex:1;
  min-width:220px;
}
.hero-stats ul{
  padding-left:1.1rem;
  margin:.4rem 0 0;
  line-height:1.6;
}

.ecosystem-grid,
.pillars-grid,
.solutions-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  margin-top:1rem;
}
.ecosystem-grid article,
.pillars-grid article,
.solutions-grid article{
  background:rgba(6,14,22,.6);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem;
}
.ecosystem-grid article h4,
.pillars-grid article h4,
.solutions-grid article h4{
  margin-top:0;
}

.cta-section{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.cta-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

@media (max-width:700px){
  .landing-header{
    flex-direction:column;
    align-items:flex-start;
    gap:.5rem;
    text-align:left;
  }
  .nav-dropdown{
    position:static;
    width:100%;
    margin-top:.5rem;
  }
  .hero-section{
    flex-direction:column;
  }
}

/* --- Label tooltips ("i" icon) --- */
.label-help{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.375rem;
  cursor:help;
}
.label-help::after{
  content:"i";
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; font-size:.75rem; font-weight:700;
  border-radius:50%; border:1px solid var(--border);
  color:var(--muted, #9aa7c7);
}
.label-help:hover::before,
.label-help:focus-visible::before{
  content: attr(data-help);
  position:absolute; left:0; top:calc(100% + 6px); z-index:50;
  max-width:260px; padding:.5rem .6rem; line-height:1.25;
  background:#0b1226; color:var(--text); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.3);
  white-space:normal;
}
.label-help:focus{ outline:none; }
small.pro-term{ opacity:.7; font-weight:500; margin-left:.25rem; }

@media (max-width:480px){
  .label-help:hover::before, .label-help:focus-visible::before{
    max-width: calc(100vw - 3rem);
  }
}

/* --- Label tooltips ("i" icon) --- */
.label-help{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.375rem;
  cursor:help;           /* becomes a button on mobile via JS */
}
.label-help::after{
  content:"i";
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; font-size:.75rem; font-weight:700;
  border-radius:50%; border:1px solid var(--border);
  color:var(--muted, #9aa7c7);
}

/* Popover + backdrop created by JS */
.help-pop-bg{
  position:fixed; inset:0; z-index:999; background:transparent;
}
.help-pop{
  position:fixed; z-index:1000;
  max-width:280px; padding:.55rem .65rem; line-height:1.25;
  background:#0b1226; color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
  pointer-events:auto;
}

/* Keep tooltips inside small screens */
@media (max-width:480px){
  .help-pop{ max-width: calc(100vw - 2rem); }
}

/* Only inside the collapsible About */
#about-collapsible .tab-panel,
#about-collapsible [hidden] {
  display: block !important;
}

/* --- Splash --- */
#ts-splash{
  position:fixed; inset:0; z-index:100000;
  display:grid; place-items:center;
  background: radial-gradient(1200px 800px at 20% -10%, #0b2a30, transparent), var(--bg);
  color:var(--text);
  transition: opacity .35s ease, visibility .35s ease;
}
#ts-splash[hidden]{ display:none; }                 /* initial */
#ts-splash.is-showing{ opacity:1; visibility:visible; }
#ts-splash.is-hiding{ opacity:0; visibility:hidden; pointer-events:none; }

.ts-splash-mark{
  width:148px; height:148px; border-radius:28px;
  display:grid; place-items:center; position:relative;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.35));
  animation: ts-pop .5s ease-out both;
}
.ts-splash-mark::before{
  content:""; position:absolute; inset:-12px;
  border-radius:36px; border:2px solid rgba(43,217,107,.25);
  box-shadow: 0 0 0 2px rgba(43,217,107,.08) inset;
  animation: ts-spin 1.2s linear infinite;
}
.ts-splash-mark img{
  width:128px; height:128px; border-radius:24px;
  animation: ts-pulse 1.4s ease-in-out infinite;
}
.ts-splash-text{
  margin-top:16px; color:var(--muted); font-size:.95rem;
  letter-spacing:.02em;
}

/* Motion-friendly defaults; respect reduced-motion */
@keyframes ts-spin { to { transform: rotate(360deg); } }
@keyframes ts-pulse { 0%{ transform: scale(1); } 100%{ transform: scale(1.04); } }
@keyframes ts-pop   { from{ transform: translateY(6px); opacity:.001; } to{ transform:none; opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .ts-splash-mark::before, .ts-splash-mark img{ animation: none !important; }
}

/* --- Mobile polish & layout --- */
@media (max-width: 640px) {
  .card { padding: 14px; border-radius: 14px; }
  .card.hero h2 { font-size: 1.35rem; }
  .card h3 { font-size: 1.05rem; }
  .muted { font-size: .95rem; }
}

/* Tabs: scrollable on mobile */
nav.tabs {
  display: flex; gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 4px;
  scrollbar-width: none;
}
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs .tab {
  flex: 0 0 auto;
  padding: 8px 12px;
  min-height: 36px;
  border-radius: 999px;
}

/* Collapsibles: bigger touch target */
details > summary { list-style: none; cursor: pointer; user-select: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary h3 { display: inline; }

/* Form controls: avoid iOS zoom & too-small targets */
input, select, button { font-size: 16px; min-height: 44px; }

/* Wallet balance list: fits small screens nicely */
.asset-list .asset-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.asset-list .asset-row:last-child { border-bottom: 0; }
.asset-list .asset-row span:first-child {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Splash screen: scale down on phones */
#ts-splash { padding: 0 16px; }
.ts-splash-mark { width: 124px; height: 124px; border-radius: 24px; }
.ts-splash-mark img { width: 108px; height: 108px; border-radius: 20px; }

/* Toast: width/safe-area & wrap */
.ts-toast{
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: min(92vw, 520px);
  text-align: center;
  line-height: 1.2;
  padding: 12px 14px;
  word-break: break-word;
}

/* Footer badge: wrap cleanly on small screens */
.site-footer small { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#apiHealth { white-space: nowrap; }

/* Responsive scroll area: never too tall, scrolls smoothly on mobile */
.scroll-y {
  max-height: clamp(220px, 45svh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; /* iOS momentum */
  padding-right: .25rem; /* prevent text under scrollbar */
}

/* Optional: keep section headers visible while scrolling */
.sticky-summary {
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 1;
  padding: .25rem 0;
}

.help-accordion {
  border:1px solid var(--border, rgba(255,255,255,.12));
  border-radius:12px;
  background:var(--card, #0f1b2d);
  margin-left:1rem; /* space it away from the title */
  flex:1;
}
.help-accordion > summary {
  cursor:pointer;
  outline:none;
  list-style:none;
}
.help-accordion > summary::-webkit-details-marker { display:none; }
.help-body {
  margin-top:.5rem;
  max-height:240px;      /* limit height */
  overflow-y:auto;       /* scroll when more */
  padding-right:.5rem;   /* space for scrollbar */
}

/* Scoped to the bridge accordion ONLY */
.help-accordion .table { display:grid; grid-template-columns: 140px 120px 1fr 180px; gap:.25rem .5rem; }
.help-accordion .tr { display:contents; }
.help-accordion .tr > div { padding:.35rem .4rem; border-bottom:1px solid var(--border, rgba(255,255,255,.08)); }
.help-accordion .tr.head > div { font-weight:700; color:var(--muted, #9fb3c8); border-bottom:1px solid var(--border, rgba(255,255,255,.14)); }
.help-accordion .highlight > div { background:rgba(255, 196, 0, .08); }

@media (max-width: 720px){
  .help-accordion .table { grid-template-columns: 1fr; }
}

/* Preset collapsible (applies at all sizes) */
.preset-collapsible summary {
  display:flex; align-items:center; gap:.5rem; cursor:pointer; user-select:none;
}
.preset-collapsible summary::-webkit-details-marker { display:none; }
.preset-collapsible[open] { padding-bottom:.5rem; }

/* --- Sensei Strategies: Belt pills & badges --- */
.belt-pill{font-size:.8rem;padding:.2rem .5rem;border-radius:999px;border:1px solid #2a2a2a;background:#0f151a}
.belt-pill.active{border-color:#3b82f6;box-shadow:0 0 0 1px rgba(59,130,246,.25) inset}
.belt-white{color:#e5e7eb;border-color:#374151}
.belt-green{color:#bbf7d0;border-color:#14532d;background:#052e1a}
.belt-black{color:#f5f5f5;border-color:#262626;background:#0b0b0b}
.pill-soon{font-size:.7rem;margin-left:.35rem;padding:.05rem .35rem;border-radius:.35rem;background:#222}
.ts-badge-belt{font-size:.7rem;padding:.1rem .4rem;border-radius:.35rem;margin-left:.4rem}
.ts-badge-white{background:#0e1a21;border:1px solid #1a2530;color:#e5e7eb}
.ts-badge-green{background:#0b2a1a;border:1px solid #1c4d2e;color:#bbf7d0}
.ts-badge-black{background:#0b0b0b;border:1px solid #222;color:#f5f5f5}

/* Mobile polish for belt UI */
@media (max-width:700px){
  .belt-pill{ display:inline-flex; align-items:center; line-height:1; min-height:36px; }
}

.start-small__btn{
    padding:.45rem .7rem;border:0;border-radius:.5rem;
    font-weight:600;background:#22c55e;color:#04131a;
    box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
  }
  .start-small__btn:hover{filter:brightness(1.05)}
  .tiny.muted{opacity:.8}



  .belt-pill.belt-black { background:#111; color:#fff; }
  .belt-pill.active { outline:2px solid #888; }