:root{
  --bg:#0a0b10;
  --bg-soft:#0e1017;
  --card:#12141e;
  --card-soft:#171a25;
  --edge:#2b2f45;
  --edge-soft:#353b56;
  --txt:#e9ecf7;
  --muted:#9aa3ba;
  --accent:#ff924d;
  --accent-2:#ff4d4d;
  --nav-accent:#85a8ff;
  --nav-accent-soft:rgba(133,168,255,.18);
  --ok:#2bc58e;
  --bad:#ff6b6b;
  --chip:#1a1e2c;
  --mono:ui-monospace, Menlo, Consolas, monospace;

  --sb-w: 292px;
  --sb-w-collapsed: 78px;
  --topbar-h: 68px;
  --shadow:0 24px 60px rgba(0,0,0,.26);
  --shadowLight:0 20px 50px rgba(10,18,60,.08);
}

body.light{
  --bg:#f6f7fb;
  --bg-soft:#ffffff;
  --card:#ffffff;
  --card-soft:#f3f5ff;
  --edge:#d9dcec;
  --edge-soft:#cfd5ef;
  --txt:#0e1320;
  --muted:#5a6277;
  --chip:#e8ecff;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  color:var(--txt);
  background:
    radial-gradient(1100px 520px at -15% -20%, rgba(255,77,77,.08), transparent),
    radial-gradient(1200px 600px at 120% 120%, rgba(255,146,77,.06), transparent),
    radial-gradient(1000px 500px at 50% -10%, rgba(123,172,255,.06), transparent),
    var(--bg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  transition:background 200ms ease, color 160ms ease;
}

body.no-scroll{overflow:hidden}

a{color:inherit}
button,input,textarea,select{font:inherit}

/* ===== layout ===== */
.app{
  display:grid;
  grid-template-columns: var(--sb-w) 1fr;
  min-height:100%;
  transition:grid-template-columns .2s ease;
}
.app.sb-collapsed{
  grid-template-columns: var(--sb-w-collapsed) 1fr;
}

.content{min-width:0}

/* ===== sidebar ===== */
.sidebar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    var(--bg-soft);
  border-right:1px solid var(--edge);
  padding:14px 12px 18px;
  position:sticky;
  top:0;
  /* 100vh on a phone counts the strip behind the browser's own bottom bar, so the last
     nav item sits under it and is almost untappable — adding My Nodes pushed Marketplace
     into exactly that zone. dvh follows the visible viewport, and the safe-area padding
     keeps the final item clear of the iOS home indicator too. vh stays as the fallback
     for anything that does not know dvh. */
  height:100vh;
  height:100dvh;
  overflow:auto;
  overscroll-behavior:contain;
  padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px) + 24px);
  width:100%;
}

.brand{
  margin-bottom:10px;
  padding:6px 6px 12px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
body.light .brand{border-bottom:1px solid rgba(10,18,60,.06)}

.brandTop{
  display:flex;
  align-items:center;
  gap:10px;
}
.brandLink{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  flex:1;
  min-width:0;
}
.brandTitleLink{
  display:block;
  text-decoration:none;
  color:inherit;
  margin-top:8px;
}
.brand h2{
  margin:0;
  font-size:18px;
  line-height:1.1;
  letter-spacing:.2px;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
}

.collapseBtn{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--edge);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.08));
  color:inherit;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.collapseBtn:hover{ border-color: var(--edge-soft); }

.logo-box.wide{
  background:none;
  box-shadow:none;
  width:100%;
  max-width:190px;
}
.logo-img{
  display:none;
  width:100%;
  height:auto;
  border-radius:10px;
}
body:not(.light) .logo-dark{display:block}
body.light .logo-light{display:block}

.sidebar .sectionTitle{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  margin:18px 10px 8px;
  text-transform:uppercase;
}
.sidebar .nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sidebar .nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  margin:0 6px;
  border-radius:14px;
  color:var(--txt);
  text-decoration:none;
  border:1px solid transparent;
  background:transparent;
  position:relative;
}
.sidebar .nav a.active,
.sidebar .nav a:hover{
  background:var(--card-soft);
  border-color:var(--edge-soft);
}
.sidebar .nav a.active{
  box-shadow:
    inset 2px 0 0 var(--nav-accent),
    0 0 0 1px color-mix(in oklab, var(--nav-accent) 22%, transparent);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--nav-accent) 12%, var(--card-soft)), var(--card-soft));
  border-color: color-mix(in oklab, var(--nav-accent) 28%, var(--edge-soft));
}
.sidebar .nav a .label{
  font-size:14px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.1px;
}
.sidebar .nav a .ico{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.95;
  flex:0 0 auto;
}
.sidebar .nav a .ico svg{width:18px;height:18px}

/* collapsed */
.sidebar.collapsed .brand h2,
.sidebar.collapsed .sectionTitle,
.sidebar.collapsed .label{
  display:none !important;
}
.sidebar.collapsed .brand{
  padding-bottom:6px;
}
.sidebar.collapsed .nav a{
  justify-content:center;
  padding-left:10px;
  padding-right:10px;
}
.sidebar.collapsed .logo-box.wide{
  max-width:36px;
}
.sidebar.collapsed .brandTitleLink{
  display:none !important;
}

.sidebar.collapsed .nav a{
  position:relative;
}
.sidebar.collapsed .nav a::after{
  content: attr(title);
  position:absolute;
  left: calc(100% + 10px);
  top:50%;
  transform:translateY(-50%);
  background: rgba(10,12,18,.94);
  border:1px solid var(--edge);
  color:var(--txt);
  padding:7px 9px;
  border-radius:10px;
  font-size:12px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
body.light .sidebar.collapsed .nav a::after{
  background: rgba(255,255,255,.97);
}
.sidebar.collapsed .nav a:hover::after{
  opacity:1;
}

/* ===== topbar ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:var(--topbar-h);
  background:rgba(10,11,16,.62);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--edge);
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  flex-wrap:wrap;
}
body.light .topbar{
  background:rgba(255,255,255,.74);
}

.topbarLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:260px;
  flex:1 1 560px;
}
.topbarRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.topbrand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}
.topbar .logo-box.wide{
  max-width:172px;
}

.topSearch{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:15px;
  border:1px solid var(--edge);
  background: color-mix(in oklab, var(--bg-soft) 82%, transparent);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  min-width:260px;
  max-width:760px;
  flex:1 1 auto;
}
body.light .topSearch{
  box-shadow: 0 14px 34px rgba(10,18,60,.06);
}
.topSearch .sicon{
  width:18px;
  height:18px;
  opacity:.8;
  flex:0 0 auto;
}
.topSearch input{
  border:0;
  outline:none;
  background:transparent;
  color:var(--txt);
  width:100%;
  font-size:14px;
  line-height:1.2;
}
.topSearch input::placeholder{
  color: color-mix(in oklab, var(--muted) 80%, transparent);
}
.topSearch .slashHint{
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:12px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--edge);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  user-select:none;
}

.topbar .iconBtn{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  border:1px solid var(--edge);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.08));
  color:inherit;
  cursor:pointer;
}
.topbar .iconBtn:hover{ border-color: var(--edge-soft); }
.topbar .iconBtn svg{ width:18px; height:18px; opacity:.9; }
.topbar .iconBtn.connected{
  border-color: rgba(43,197,142,.55);
  box-shadow: 0 0 0 2px rgba(43,197,142,.15) inset;
}

/* Theme toggle: render both icons, show whichever matches the current mode.
   Dark mode = moon, light mode = sun. */
#btnTheme .themeIconSun{display:none}
body.light #btnTheme .themeIconMoon{display:none}
body.light #btnTheme .themeIconSun{display:inline-flex}

.topbar .iconBtn.mobileOnly{display:none}

.topbar .pill,
#me.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--edge);
  background:var(--chip);
  font-size:12px;
}
.topbar .pill.ok,
#me.pill.ok{
  color:var(--ok);
  border-color:rgba(43,197,142,.35);
  background:rgba(43,197,142,.08);
}
.topbar .pill.bad,
#me.pill.bad{
  color:var(--bad);
  border-color:rgba(255,107,107,.35);
  background:rgba(255,107,107,.08);
}

#me{ display:none !important; }

/* ===== generic page helpers ===== */
.wrap{
  width:min(1280px,100%);
  margin:0 auto;
  padding:18px 18px 28px;
}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid var(--edge);
  border-radius:18px;
  padding:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
body.light .card{
  box-shadow:0 28px 60px rgba(10,18,60,.08);
}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.hidden{display:none}

/* ===== toasts ===== */
.status{
  position:fixed;
  right:14px;
  bottom:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:3500;
}
.toast{
  background:#0b0f26;
  border:1px solid #26305c;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  transition:opacity .18s ease;
}
.toast.ok{
  border-color:rgba(43,197,142,.45);
}
.toast.bad{
  border-color:rgba(255,107,107,.45);
}
body.light .toast{
  background:#eef2ff;
  border-color:#c4cff8;
  color:#142046;
}

/* ===== sidebar mobile drawer ===== */
.sb-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
  z-index:30;
}
.sb-backdrop.show{
  opacity:1;
  pointer-events:auto;
}

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

  /* Hamburger is the single nav opener on mobile: pinned to the far right
     of the topbar with a comfortable >=48x48px tap target. The icon stays
     ~22px; the button just grows its hit area + sits last in topbarRight. */
  .topbar .iconBtn.mobileOnly{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:48px;
    min-height:48px;
    margin-left:4px;
    flex:0 0 auto;
  }
  .topbar .iconBtn.mobileOnly svg{ width:24px; height:24px; opacity:1; }

  /* Keep the bar on one line and let the search section absorb the slack so
     the right-side controls (incl. the hamburger) stay flush to the edge
     instead of overflowing the viewport. */
  .topbar{ flex-wrap:nowrap; }
  .topbarLeft{ flex:1 1 auto; min-width:0; }
  .topSearch{ min-width:0; }
  .topbarRight{ gap:8px; flex:0 0 auto; }

  .sidebar{
    display:block !important;
    position:fixed;
    top:0;
    left:0;
    /* The drawer sets its own height, which overrode the dvh fix in the base rule and
       left the last nav item half-hidden behind the browser's bottom bar. Fix it where
       it is actually applied, and keep the scroll padding so the final item clears the
       home indicator as well. */
    height:100vh;
    height:100dvh;
    overflow:auto;
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px) + 28px);
    width:min(86vw, 340px);
    z-index:50;
    transform:translateX(-105%);
    transition:transform .18s ease;
    box-shadow:0 18px 60px rgba(0,0,0,.55);
  }

  .app.sb-open .sidebar{
    transform:translateX(0);
  }

  .topbar{
    background:var(--bg-soft);
    backdrop-filter:none;
  }

  .topbar .topbrand{
    display:flex !important;
  }

  .collapseBtn{
    display:none;
  }
}

@media (min-width:1101px){
  .topbar .topbrand{
    display:none !important;
  }
}

@media (max-width:560px){
  .topSearch{min-width:0}
  .topbarLeft{min-width:0}
  .wrap{padding:12px 12px 24px}
}

/* ===== Active-tab pulse =====
   Subtle breathing halo around the currently selected tab, to make "you are
   here" obvious on pages with workspace-style tab rows. Uses box-shadow only
   so it never conflicts with per-page background/border styling of the
   active state. Opt-out via prefers-reduced-motion. */
@keyframes tabActivePulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(255,146,77, 0),
      0 0 0 0 rgba(255,146,77, 0);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(255,146,77, 0.18),
      0 0 18px 2px rgba(255,146,77, 0.22);
  }
}
.workspaceTab.active,
.tabBtn.active,
.tabbtn.active,
.walletTab.active,
.dTab.active,
.modeTab.active,
.tab-mini.active,
.tab.active {
  animation: tabActivePulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .workspaceTab.active,
  .tabBtn.active,
  .tabbtn.active,
  .walletTab.active,
  .dTab.active,
  .modeTab.active,
  .tab-mini.active,
  .tab.active {
    animation: none;
  }
}