body{
    background:
      radial-gradient(1100px 620px at 82% -8%, rgba(59,123,255,.14), transparent 60%),
      linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 46%, var(--navy-950) 100%);
    min-height:100vh;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:var(--ink-0);
    display:flex; align-items:center; justify-content:center;
    /*padding:40px 16px;*/
     overflow: hidden;
  }
  .stage{ width:100%; max-width:412px; }
 .frame{
    position:relative;
    background:linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
    border:1px solid var(--line);
    /*border-radius:28px;*/
    box-shadow:0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset;
    overflow:hidden;
    display:flex; flex-direction:column;
    height: 100vh;
    min-height: 100dvh;
    
  }
  
   .exchange-select-btn{
    display:flex; align-items:center; gap:8px; cursor:pointer;
    background:var(--surface); border:1px solid var(--line); border-radius:100px;
    padding:7px 12px 7px 8px;
  }
 .exchange-select-btn b{ font-size:12px; font-weight:700; }
  .exchange-select-btn .ns-chev{ width:12px; height:12px; color:var(--ink-2); }

    .menu-topbar{ padding:16px 18px 12px; justify-content:flex-start; }
  .menu-topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px 4px;
  }
  .menu-topbar > span{ font-size:17px; font-weight:800; }
  .menu-topbar .icon-btn{ position:relative; }
  .topbar{ flex:none; display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px; }
  .brand{ display:flex; align-items:center; gap:8px; }
  .logo{ width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg, var(--blue-400), var(--blue-600)); display:flex; align-items:center; justify-content:center; flex:none; }
  .logo svg{ width:14px; height:14px; }
  .brand-text{ line-height:1.1; }
  .brand-name{ font-size:15px; font-weight:800; }
  .brand-tag{ font-size:8.5px; color:var(--blue-400); font-weight:600; }
  .icon-btn{ width:32px; height:32px; border-radius:10px; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-1); cursor:pointer; flex:none; position:relative; }
  .icon-btn svg{ width:15px; height:15px; }
  .badge{ position:absolute; top:-4px; right:-4px; background:var(--red); color:#fff; font-size:8px; font-weight:800; min-width:14px; height:14px; border-radius:100px; display:flex; align-items:center; justify-content:center; padding:0 3px; border:2px solid var(--navy-800); }

  .exchange-select{ position:relative; }
  
  .ex-dot{ width:20px; height:20px; border-radius:100px; display:flex; align-items:center; justify-content:center; flex:none; background:rgba(240,185,11,.18); color:#f0b90b; }
  .ex-dot svg{ width:11px; height:11px; }
 
  .chev{ width:12px; height:12px; color:var(--ink-2); transition:transform .15s ease; }
  .exchange-select.open .chev{ transform:rotate(180deg); }
  .exchange-menu{
    position:absolute; top:calc(100% + 6px); left:0; width:200px; z-index:20;
    background:var(--navy-800); border:1px solid var(--line-strong); border-radius:13px; padding:6px;
    box-shadow:0 20px 40px -14px rgba(0,0,0,.6);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .15s ease, transform .15s ease, visibility .15s;
  }
  .exchange-select.open .exchange-menu{ opacity:1; visibility:visible; transform:translateY(0); }
  .exchange-item{ display:flex; align-items:center; gap:10px; padding:9px; border-radius:9px; cursor:pointer; }
  .exchange-item:hover{ background:var(--surface-hi); }
  .exchange-item b{ font-size:12px; font-weight:700; display:block; }
  .exchange-item .check{ width:13px; height:13px; color:var(--blue-400); margin-left:auto; opacity:0; }
  .exchange-item.active .check{ opacity:1; }

  .algo-tabs{ display:flex; gap:16px; padding:2px 18px 12px;; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
  .algo-tabs::-webkit-scrollbar{ display:none; }
  .algo-tabs span{ font-size:12px; font-weight:700; color:var(--ink-2); cursor:pointer; padding-bottom:10px; white-space:nowrap; position:relative; flex:none; }
  .algo-tabs span.active{ color:var(--ink-0); }
  .algo-tabs span.active::after{ content:""; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--blue-500); border-radius:2px; }

  .scroll{ flex:1; overflow-y:auto; padding:2px 18px 20px; scrollbar-width:none; }
  .scroll::-webkit-scrollbar{ display:none; }

  .sub-tabs{ display:flex; gap:4px; background:rgba(255,255,255,.03); border-radius:11px; padding:3px; margin:14px 0 12px; }
  .sub-tabs span{ flex:1; text-align:center; font-size:11px; font-weight:700; color:var(--ink-2); padding:9px 0; border-radius:9px; cursor:pointer; }
  .sub-tabs span.active{ background:var(--blue-500); color:#fff; }
  .subtab-panel{ display:none; }
  .subtab-panel.active{ display:block; }

  .toolbar-row{ display:flex; gap:8px; margin-bottom:16px; }
  .search-box{ flex:1; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
  .search-box svg{ width:14px; height:14px; color:var(--ink-2); flex:none; }
  .search-box input{ flex:1; background:transparent; border:0; outline:0; color:var(--ink-0); font-size:12px; font-family:inherit; min-width:0; }
  .search-box input::placeholder{ color:var(--ink-2); }

  .strat-card{ background:var(--surface); border:1px solid var(--line); border-radius:17px; padding:15px; margin-bottom:12px; }
  .strat-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:8px; }
  .strat-title-row{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
  .strat-title-row b{ font-size:14px; font-weight:800; }
  .type-tag{ font-size:8.5px; font-weight:800; padding:2px 8px; border-radius:100px; }
  .type-tag.hedge{ background:rgba(168,109,255,.16); color:var(--purple); }
  .type-tag.grid{ background:rgba(232,184,75,.16); color:var(--gold); }
  .type-tag.futures{ background:rgba(59,123,255,.16); color:var(--blue-400); }
  .status-dot{ display:flex; align-items:center; gap:5px; font-size:9.5px; font-weight:700; color:var(--green); }
  .status-dot i{ width:6px; height:6px; border-radius:100px; background:var(--green); }

  .creator-row{ display:flex; align-items:center; gap:6px; margin-bottom:4px; }
  .creator-row span{ font-size:10.5px; color:var(--ink-1); }
  .creator-row svg{ width:12px; height:12px; color:var(--blue-400); }

  .portfolio-row{ display:flex; align-items:center; gap:6px; margin-bottom:12px; }
  .portfolio-row span{ font-size:9.5px; color:var(--ink-2); font-family:'IBM Plex Mono',monospace; }
  .portfolio-row svg{ width:12px; height:12px; color:var(--ink-2); cursor:pointer; flex:none; }

  .strat-stats{ display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:12px; }
  .strat-stat{ text-align:left; }
  .strat-stat small{ font-size:8.5px; color:var(--ink-2); display:block; margin-bottom:4px; }
  .strat-stat b{ font-size:12px; font-weight:800; }
  .strat-stat b.green{ color:var(--green); }

  .strat-actions{ display:flex; gap:9px; }
  .strat-actions button{ flex:1; padding:10px; border-radius:11px; font-size:11.5px; font-weight:700; font-family:inherit; cursor:pointer; }
  .btn-view{ background:rgba(59,123,255,.12); border:1px solid rgba(59,123,255,.35); color:var(--blue-400); }
  .btn-unfollow{ background:rgba(239,90,111,.08); border:1px solid rgba(239,90,111,.3); color:var(--red); }

  .empty-state{ text-align:center; font-size:12px; color:var(--ink-2); padding:40px 0; }

  .bottom-nav{ flex:none; display:flex; align-items:center; justify-content:space-around; padding:10px 8px 14px; border-top:1px solid var(--line); background:rgba(10,18,38,.9); }
  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--ink-2); }
  .nav-item svg{ width:19px; height:19px; }
  .nav-item span{ font-size:9.5px; font-weight:600; }
  .nav-item.active{ color:var(--blue-400); }

  .toast{
    position:absolute; left:50%; bottom:78px; transform:translateX(-50%) translateY(12px);
    background:var(--navy-700); border:1px solid var(--line-strong); color:var(--ink-0);
    font-size:12px; font-weight:600; padding:10px 16px; border-radius:100px;
    box-shadow:0 16px 32px -12px rgba(0,0,0,.6); opacity:0; visibility:hidden;
    transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:60; white-space:nowrap;
    display:flex; align-items:center; gap:7px;
  }
  .toast.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .toast svg{ width:13px; height:13px; color:var(--blue-400); flex:none; }