/* Web 4.0 DEX look with hard logo constraints */
:root{
  --bg:#05080f; --fg:#eaf3ff; --muted:#9fb1c9; --card:rgba(12,18,28,.75); --stroke:rgba(255,255,255,.08);
  --brand1:#14f195; --brand2:#7c3bff;
  --jupiter-plugin-primary:20,241,149; --jupiter-plugin-background:5,8,15; --jupiter-plugin-primaryText:234,243,255;
  --jupiter-plugin-warning:251,191,36; --jupiter-plugin-interactive:17,23,34; --jupiter-plugin-module:12,18,28;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:400 16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:var(--brand1);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:16px}

.topbar{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--stroke);backdrop-filter:blur(8px) saturate(130%);background:linear-gradient(180deg,rgba(5,8,15,.85),rgba(5,8,15,.6))}
.brand{display:flex;gap:12px;align-items:center;color:var(--fg)}
.logo-img{
  width:28px;height:28px;max-width:28px;max-height:28px;
  aspect-ratio:1/1;object-fit:contain;border-radius:8px;display:block
}
/* Guard-rails: NEVER allow huge header images even if CSS elsewhere goes wild */
.topbar img:not(.logo-img){display:none}
@media (min-width:768px){ .logo-img{ width:32px;height:32px;max-width:32px;max-height:32px } }
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand strong{font-size:1.05rem}
.brand small{color:var(--muted)}
.nav{display:flex;gap:14px;margin-left:auto}
.nav-link{color:var(--fg);opacity:.9}.nav-link:hover{opacity:1}

.main{padding:20px 16px}
.bg{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(900px 420px at 70% -10%, rgba(124,59,255,.25), transparent 60%),
  radial-gradient(700px 380px at 0% 20%, rgba(20,241,149,.18), transparent 60%),
  linear-gradient(180deg, #05080f, #070b12);
}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:18px;padding:16px 16px}
.glass{backdrop-filter:blur(8px) saturate(180%)}
.hero{display:grid;grid-template-columns:1fr;align-items:center;min-height:180px}
.hero h1{font-size:2rem;margin:8px 0 6px}.subtitle{color:var(--muted);margin:0 0 12px}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg,var(--brand1),var(--brand2));color:#05080f;font-weight:700;border:1px solid transparent}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--brand2)}
.btn.small{padding:8px 12px;font-weight:600}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.muted{color:var(--muted)}
.plugin-shell{width:100%;min-height:660px;border-radius:16px;overflow:hidden;border:1px solid var(--stroke);background:rgba(0,0,0,.2)}

.grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:720px){ .grid{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .grid{grid-template-columns:repeat(3,1fr)} }
.tool{background:rgba(255,255,255,.02);border:1px solid var(--stroke);border-radius:16px;padding:14px}
.tool h3{margin:4px 0 6px}
.tool-actions{margin-top:10px}

.history-controls{display:flex;gap:10px;flex-wrap:wrap}
input[type=text]{min-width:280px;background:#0b121c;border:1px solid var(--stroke);border-radius:12px;padding:10px 12px;color:var(--fg)}
.table table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--stroke);padding:8px 6px;text-align:left}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}

.foot{border-top:1px solid var(--stroke);color:var(--muted);padding:28px 0;margin-top:20px}