/* ==========================================================================
   MACRO/TERMINAL platform skin for Alien Algo.
   All rules are scoped under #aaMacroTerminal so they can never leak into the
   underlying Alien Algo app. Keyframes are mt_ prefixed to avoid clashing with
   the app's own animations. Generated from the uploaded macroterminal.html;
   the ONLY hand-authored part is the "Alien Algo chart bridge" block at the end.
   ========================================================================== */

  #aaMacroTerminal{
    --bg:#0A0E14;
    --bg-2:#0D1219;
    --panel:#121822;
    --panel-2:#161D28;
    --border:#232C3A;
    --border-soft:#1A222E;
    --text:#E7ECF3;
    --text-dim:#8B96A8;
    --text-faint:#586172;
    --accent:#4FA8E8;
    --accent-dim:rgba(79,168,232,.14);
    --bull:#34D399;
    --bull-dim:rgba(52,211,153,.13);
    --bear:#FB6B6B;
    --bear-dim:rgba(251,107,107,.13);
    --neutral:#E8B84B;
    --neutral-dim:rgba(232,184,75,.13);
    --font-display:'Space Grotesk',system-ui,-apple-system,sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
    --radius:10px;
    --border-strong:#2C3849;
    --chrome-bg:rgba(13,18,25,.9);
    --float-bg:rgba(13,18,25,.94);
    --shadow:rgba(0,0,0,.5);
    --glow-1:rgba(79,168,232,.06);
    --glow-2:rgba(52,211,153,.045);
  }

  /* Light theme — the whole platform follows the device / OS colour scheme */
  @media (prefers-color-scheme: light){
    #aaMacroTerminal{
      --bg:#F3F6FA;
      --bg-2:#E9EEF5;
      --panel:#FFFFFF;
      --panel-2:#EEF2F8;
      --border:#D5DDE8;
      --border-soft:#E4EAF1;
      --text:#141B26;
      --text-dim:#51607A;
      --text-faint:#8A94A6;
      --accent:#2E7DD1;
      --accent-dim:rgba(46,125,209,.12);
      --bull:#0F9D53;
      --bull-dim:rgba(15,157,83,.13);
      --bear:#D8443F;
      --bear-dim:rgba(216,68,63,.13);
      --neutral:#B5820A;
      --neutral-dim:rgba(181,130,10,.14);
      --border-strong:#BFC9D8;
      --chrome-bg:rgba(247,249,252,.88);
      --float-bg:rgba(255,255,255,.95);
      --shadow:rgba(60,72,96,.16);
      --glow-1:rgba(46,125,209,.05);
      --glow-2:rgba(15,157,83,.045);
    }}
  #aaMacroTerminal, #aaMacroTerminal *{box-sizing:border-box;}
  #aaMacroTerminal, #aaMacroTerminal{margin:0;padding:0;height:100%;}
  #aaMacroTerminal{
    background:
      radial-gradient(circle at 15% 0%, var(--glow-1), transparent 45%),
      radial-gradient(circle at 85% 8%, var(--glow-2), transparent 40%),
      var(--bg);
    color:var(--text);
    font-family:var(--font-display);
    /* Base platform text bumped from the app's 12px root to 16px for a larger, cleaner read.
       Scoped to the terminal so the AlienAlgo chart engine's rem-based geometry (12px root) is
       untouched; only inherited/em text inside the terminal scales up. */
    font-size:16px;
    -webkit-font-smoothing:antialiased;
    height:100vh; height:100dvh;
    display:flex; flex-direction:row;
    overflow:hidden;
  }
  #aaMacroTerminal a{color:var(--accent);}
  #aaMacroTerminal ::selection{background:var(--accent-dim);color:var(--text);}

  /* ---------- Topbar ---------- */
  #aaMacroTerminal .topbar{
    display:flex; align-items:center; flex-wrap:wrap; gap:14px 22px;
    padding:16px 24px;
    background:var(--chrome-bg);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border-soft);
    animation:mt_fadeDown .5s ease both;
  }
  /* Left navigation rail — icon-only by default, expands to icons + labels on hover */
  #aaMacroTerminal .nav-rail{
    flex:0 0 auto; position:relative; z-index:40; width:56px;
    display:flex; flex-direction:column; gap:6px; padding:14px 8px;
    background:var(--bg-2); border-right:1px solid var(--border);
    overflow:hidden; transition:width .2s cubic-bezier(.4,0,.2,1);
  }
  #aaMacroTerminal .nav-rail:hover{width:194px;} /* pushes the stage; chart/watchlist resize with it */
  #aaMacroTerminal .rail-brand{font-family:var(--font-mono); font-weight:700; font-size:1rem; letter-spacing:.02em; padding:2px 10px 12px; white-space:nowrap;}
  #aaMacroTerminal .rail-brand .slash{color:var(--accent);}
  #aaMacroTerminal .rail-btn{
    display:flex; align-items:center; gap:12px; white-space:nowrap; overflow:hidden;
    font-family:var(--font-mono); font-size:.76rem; font-weight:600; text-align:left; letter-spacing:.01em;
    padding:10px 8px; border-radius:9px; border:1px solid transparent; cursor:pointer;
    background:transparent; color:var(--text-dim); transition:background .15s ease, color .15s ease;
  }
  #aaMacroTerminal .rail-btn:hover{color:var(--text); background:var(--panel-2);}
  #aaMacroTerminal .rail-btn.active{background:var(--accent); color:#06121C;}
  #aaMacroTerminal .rail-ico{flex:0 0 auto; width:22px; height:22px; display:flex; align-items:center; justify-content:center;}
  #aaMacroTerminal .rail-ico svg{width:18px; height:18px;}
  #aaMacroTerminal .rail-label{opacity:0; transition:opacity .12s ease;}
  #aaMacroTerminal .nav-rail:hover .rail-label{opacity:1;}
  /* sub-groups only appear when the rail is expanded (hovered) AND their view is active */
  #aaMacroTerminal .rail-sub{display:none; flex-direction:column; gap:4px; margin:0 0 2px 12px; padding-left:9px; border-left:1px solid var(--border);}
  #aaMacroTerminal .rail-sub[hidden]{display:none;}
  #aaMacroTerminal .nav-rail:hover .rail-sub:not([hidden]){display:flex;}
  #aaMacroTerminal .rail-subbtn{
    font-family:var(--font-mono); font-size:.7rem; font-weight:600; text-align:left; white-space:nowrap;
    padding:8px 10px; border-radius:7px; border:none; cursor:pointer;
    background:transparent; color:var(--text-faint); transition:background .15s ease, color .15s ease;
  }
  #aaMacroTerminal .rail-subbtn:hover{color:var(--text);}
  #aaMacroTerminal .rail-subbtn.active{background:var(--accent-dim); color:var(--accent);}
  #aaMacroTerminal .rail-clock{margin-top:auto; padding:8px 10px; font-family:var(--font-mono); font-size:.62rem; color:var(--text-faint); white-space:nowrap; opacity:0; transition:opacity .12s ease;}
  #aaMacroTerminal .nav-rail:hover .rail-clock{opacity:1;}

  #aaMacroTerminal .main-col{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:0;}
  #aaMacroTerminal .sticky-top{flex:0 0 auto; position:relative; z-index:25;}
  #aaMacroTerminal .stage{flex:1 1 auto; min-height:0; display:flex; gap:12px; padding:8px 12px 10px;}
  #aaMacroTerminal .topbar{display:none;}
  #aaMacroTerminal .brand{display:flex; align-items:baseline; gap:10px; margin-right:auto;}
  #aaMacroTerminal .brand-mark{font-family:var(--font-mono); font-weight:700; font-size:1.15rem; letter-spacing:.02em;}
  #aaMacroTerminal .brand-mark .slash{color:var(--accent);}
  #aaMacroTerminal .brand-sub{font-size:.72rem; color:var(--text-faint); font-family:var(--font-mono); letter-spacing:.02em;}
  #aaMacroTerminal .controls{display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px 16px;}
  #aaMacroTerminal .field{display:flex; flex-direction:column; gap:4px;}
  #aaMacroTerminal .field label{font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-weight:600;}
  #aaMacroTerminal .field-cap{font-size:.63rem; color:var(--text-faint); max-width:220px;}
  #aaMacroTerminal .key-wrap{position:relative; display:flex;}
  #aaMacroTerminal input[type="password"], #aaMacroTerminal input[type="text"], #aaMacroTerminal input[type="number"], #aaMacroTerminal select{
    background:var(--panel-2); color:var(--text); border:1px solid var(--border);
    border-radius:7px; padding:8px 10px; font-family:var(--font-mono); font-size:.8rem;
    outline:none; transition:border-color .15s ease, box-shadow .15s ease;
  }
  #aaMacroTerminal input:focus, #aaMacroTerminal select:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim);}
  #aaMacroTerminal #apiKey{width:230px; padding-right:34px;}
  #aaMacroTerminal .key-toggle{
    position:absolute; right:4px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--text-faint); cursor:pointer;
    font-family:var(--font-mono); font-size:.65rem; padding:4px 6px; letter-spacing:.03em;
  }
  #aaMacroTerminal .key-toggle:hover{color:var(--text);}
  #aaMacroTerminal #modelSelect{width:172px;}
  #aaMacroTerminal #intervalInput{width:70px;}
  #aaMacroTerminal .btn{
    font-family:var(--font-mono); font-size:.78rem; font-weight:600; letter-spacing:.02em;
    padding:9px 16px; border-radius:7px; border:1px solid var(--border); cursor:pointer;
    background:var(--panel-2); color:var(--text); transition:all .15s ease; white-space:nowrap;
  }
  #aaMacroTerminal .btn:hover{border-color:var(--accent); color:var(--accent);}
  #aaMacroTerminal .btn.primary{background:var(--accent); color:#06121C; border-color:var(--accent);}
  #aaMacroTerminal .btn.primary:hover{filter:brightness(1.08); color:#06121C;}
  #aaMacroTerminal .btn.primary.active{background:var(--bear); border-color:var(--bear);}
  #aaMacroTerminal .btn.primary.active:hover{filter:brightness(1.08); color:#06121C;}
  #aaMacroTerminal .btn-row{display:flex; gap:8px;}

  #aaMacroTerminal .status-strip{
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    padding:9px 24px; font-family:var(--font-mono); font-size:.72rem; color:var(--text-dim);
    border-bottom:1px solid var(--border-soft); background:var(--bg-2);
  }
  #aaMacroTerminal .status-item{display:flex; align-items:center; gap:6px;}
  #aaMacroTerminal .live-dot{width:7px; height:7px; border-radius:50%; background:var(--text-faint); flex-shrink:0;}
  #aaMacroTerminal .live-dot.on{background:var(--bull);}
  #aaMacroTerminal .live-dot.pulse{background:var(--accent); animation:mt_pulse 1.1s ease-in-out infinite;}
  #aaMacroTerminal .status-text.status-error{color:var(--bear);}
  #aaMacroTerminal #logLine{color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:520px;}

  /* ---------- Ticker ---------- */
  #aaMacroTerminal .ticker{
    overflow:hidden; white-space:nowrap; border-bottom:1px solid var(--border-soft);
    background:var(--bg); padding:7px 0;
  }
  #aaMacroTerminal .ticker-track{
    display:inline-block; font-family:var(--font-mono); font-size:.73rem; color:var(--text-faint);
    padding-left:100%; animation:mt_scrollTicker 55s linear infinite;
  }
  #aaMacroTerminal .tk-id{font-weight:700; color:var(--text);}
  #aaMacroTerminal .tk-id.bullish{color:var(--bull);} #aaMacroTerminal .tk-id.bearish{color:var(--bear);} #aaMacroTerminal .tk-id.neutral{color:var(--neutral);}
  #aaMacroTerminal .tk-title{color:var(--text-dim);}
  #aaMacroTerminal .tk-sep{color:var(--accent); margin:0 16px;}
  #aaMacroTerminal .ticker:hover .ticker-track{animation-play-state:paused;}

  /* ---------- Main ---------- */
  #aaMacroTerminal main{max-width:1400px; margin:0 auto; padding:28px 24px 60px;}
  #aaMacroTerminal .category{margin-bottom:38px; animation:mt_fadeUp .5s ease both;}
  #aaMacroTerminal .category:nth-of-type(2){animation-delay:.05s;}
  #aaMacroTerminal .category:nth-of-type(3){animation-delay:.1s;}
  #aaMacroTerminal .category:nth-of-type(4){animation-delay:.15s;}
  #aaMacroTerminal .category-head{position:sticky; top:0; z-index:5; background:var(--bg); display:flex; align-items:baseline; gap:10px; margin-bottom:14px; padding:14px 0 9px; border-bottom:1px solid var(--border-soft);}
  #aaMacroTerminal .cat-eyebrow{
    font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:.12em;
    color:var(--accent); background:var(--accent-dim); padding:3px 8px; border-radius:4px;
  }
  #aaMacroTerminal .category-title{font-size:1.02rem; font-weight:600; margin:0; color:var(--text);}
  #aaMacroTerminal .cat-count{font-family:var(--font-mono); font-size:.7rem; color:var(--text-faint); margin-left:auto;}

  #aaMacroTerminal .card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:14px;}
  #aaMacroTerminal .card{
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
    padding:16px; display:flex; flex-direction:column; gap:10px;
    transition:border-color .2s ease, transform .2s ease;
  }
  #aaMacroTerminal .card:hover{border-color:var(--border-strong);}
  #aaMacroTerminal .card[data-state="error"]{border-color:rgba(251,107,107,.4);}
  #aaMacroTerminal .card[data-state="stale"]{border-color:rgba(232,184,75,.35);}
  #aaMacroTerminal .card[data-state="loading"] .driver{position:relative; color:transparent; border-radius:4px;
    background:linear-gradient(90deg,var(--panel-2) 25%,var(--border) 37%,var(--panel-2) 63%);
    background-size:400% 100%; animation:mt_shimmer 1.4s ease infinite;}

  #aaMacroTerminal .card-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
  #aaMacroTerminal .card-id{font-family:var(--font-mono); font-weight:700; font-size:1.05rem; letter-spacing:.02em;}
  #aaMacroTerminal .card-name{font-size:.72rem; color:var(--text-faint); text-align:right;}

  #aaMacroTerminal .bias-row{display:flex; align-items:center; justify-content:space-between;}
  #aaMacroTerminal .bias-badge{
    font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.08em;
    padding:3px 9px; border-radius:20px; border:1px solid var(--border); color:var(--text-faint);
  }
  #aaMacroTerminal .bias-badge.bullish{color:var(--bull); background:var(--bull-dim); border-color:rgba(52,211,153,.3);}
  #aaMacroTerminal .bias-badge.bearish{color:var(--bear); background:var(--bear-dim); border-color:rgba(251,107,107,.3);}
  #aaMacroTerminal .bias-badge.neutral{color:var(--neutral); background:var(--neutral-dim); border-color:rgba(232,184,75,.3);}
  #aaMacroTerminal .score{font-family:var(--font-mono); font-weight:700; font-size:1rem; color:var(--text-faint);}
  #aaMacroTerminal .score.bullish{color:var(--bull);} #aaMacroTerminal .score.bearish{color:var(--bear);} #aaMacroTerminal .score.neutral{color:var(--neutral);}

  #aaMacroTerminal .meter{position:relative; height:6px; border-radius:4px; background:var(--panel-2); overflow:hidden;}
  #aaMacroTerminal .meter-fill{position:absolute; top:0; left:0; height:100%; width:50%; background:var(--text-faint); border-radius:4px; transition:width .7s cubic-bezier(.4,0,.2,1), background .3s ease;}
  #aaMacroTerminal .meter-fill.bullish{background:var(--bull);} #aaMacroTerminal .meter-fill.bearish{background:var(--bear);} #aaMacroTerminal .meter-fill.neutral{background:var(--neutral);}
  #aaMacroTerminal .meter-zero{position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--border);}

  #aaMacroTerminal .driver{font-size:.83rem; font-weight:500; line-height:1.4; min-height:2.4em;}

  #aaMacroTerminal details.detail{font-size:.78rem;}
  #aaMacroTerminal details.detail summary{
    cursor:pointer; color:var(--text-faint); list-style:none; display:flex; align-items:center; gap:6px;
    font-family:var(--font-mono); font-size:.68rem; letter-spacing:.03em; padding:2px 0;
  }
  #aaMacroTerminal details.detail summary::-webkit-details-marker{display:none;}
  #aaMacroTerminal details.detail summary::before{content:"▸"; font-size:.62rem; transition:transform .15s ease; color:var(--accent);}
  #aaMacroTerminal details.detail[open] summary::before{transform:rotate(90deg);}
  #aaMacroTerminal details.detail summary:hover{color:var(--text);}
  #aaMacroTerminal .rationale{color:var(--text-dim); line-height:1.55; margin:8px 0 6px;}
  #aaMacroTerminal .risk{color:var(--text-faint); line-height:1.5; margin:0 0 8px; font-style:italic;}
  #aaMacroTerminal .sources{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--border-soft); padding-top:8px;}
  #aaMacroTerminal .sources li{display:flex; flex-direction:column; gap:1px;}
  #aaMacroTerminal .sources a{color:var(--text); text-decoration:none; font-size:.74rem; line-height:1.35;}
  #aaMacroTerminal .sources a:hover{color:var(--accent); text-decoration:underline;}
  #aaMacroTerminal .sources .src{font-family:var(--font-mono); font-size:.63rem; color:var(--text-faint);}

  #aaMacroTerminal .card-foot{display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:.63rem; color:var(--text-faint); padding-top:2px;}
  #aaMacroTerminal .confidence.low{opacity:.55;} #aaMacroTerminal .confidence.medium{opacity:.8;} #aaMacroTerminal .confidence.high{opacity:1; color:var(--text-dim);}

  #aaMacroTerminal footer{max-width:1400px; margin:0 auto; padding:10px 24px 40px; color:var(--text-faint); font-size:.72rem; font-family:var(--font-mono); line-height:1.7;}
  #aaMacroTerminal footer a{color:var(--text-faint); text-decoration:underline;}

  /* Pair breakdown legs */
  #aaMacroTerminal .pair-legs{display:flex; flex-direction:column; gap:7px; margin:2px 0 10px;}
  #aaMacroTerminal .leg{display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:.72rem;}
  #aaMacroTerminal .leg-id{font-weight:700; width:46px; color:var(--text); flex-shrink:0;}
  #aaMacroTerminal .leg-bar{position:relative; flex:1; height:5px; border-radius:3px; background:var(--panel-2); overflow:hidden;}
  #aaMacroTerminal .leg-bar::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--border);}
  #aaMacroTerminal .leg-fill{position:absolute; top:0; height:100%; border-radius:3px; background:var(--text-faint);}
  #aaMacroTerminal .leg-fill.bullish{background:var(--bull);} #aaMacroTerminal .leg-fill.bearish{background:var(--bear);} #aaMacroTerminal .leg-fill.neutral{background:var(--neutral);}
  #aaMacroTerminal .leg-score{width:40px; text-align:right; color:var(--text-dim); flex-shrink:0;}
  #aaMacroTerminal .leg-score.bullish{color:var(--bull);} #aaMacroTerminal .leg-score.bearish{color:var(--bear);} #aaMacroTerminal .leg-score.neutral{color:var(--neutral);}

  /* ---------- App frame (screen-in-screen) ---------- */
  #aaMacroTerminal .app-frame{
    flex:1 1 auto; min-width:0; min-height:0;
    padding:5px; display:flex; overflow:hidden;
    background:linear-gradient(180deg, var(--panel-2), var(--bg-2));
    border:1px solid var(--border); border-radius:14px;
    box-shadow:0 20px 60px var(--shadow), inset 0 1px 0 rgba(255,255,255,.03);
  }
  /* Inner card: the ONLY scroll region. The frame fills the stage; only this
     content scrolls, section headers sticking as you go. */
  #aaMacroTerminal .frame-scroll{
    flex:1 1 auto; min-height:0; width:100%;
    overflow-y:auto; overflow-x:hidden;
    background:var(--bg); border:1px solid var(--border-soft); border-radius:10px;
  }
  #aaMacroTerminal .frame-scroll > main{ max-width:none; margin:0; padding:22px 18px 26px; }
  #aaMacroTerminal .frame-scroll > footer{ margin-top:6px; }

  #aaMacroTerminal .top-actions{display:flex; align-items:center; gap:10px; margin-left:auto;}

  /* ---------- Settings view ---------- */
  #aaMacroTerminal .settings-panel{max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:20px;}
  #aaMacroTerminal .settings-title{font-size:1.1rem; font-weight:600; margin:0; letter-spacing:.01em;}
  #aaMacroTerminal .settings-panel .field{gap:6px;}
  #aaMacroTerminal .settings-panel .field label{font-size:.72rem;}
  #aaMacroTerminal .settings-panel input[type="password"], #aaMacroTerminal .settings-panel input[type="text"], #aaMacroTerminal .settings-panel input[type="number"], #aaMacroTerminal .settings-panel select, #aaMacroTerminal .settings-panel #apiKey, #aaMacroTerminal .settings-panel .key-wrap{width:100%;}
  #aaMacroTerminal .settings-panel .field-cap{max-width:none;}
  #aaMacroTerminal .settings-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  #aaMacroTerminal .settings-panel .btn-row{margin-top:4px;}
  #aaMacroTerminal .settings-panel .btn{flex:1;}
  #aaMacroTerminal .settings-note{font-size:.7rem; color:var(--text-faint); line-height:1.6; border-top:1px solid var(--border-soft); padding-top:14px; margin:0;}
  #aaMacroTerminal .settings-chart{display:flex; flex-direction:column; gap:14px; border-top:1px solid var(--border-soft); padding-top:16px;}
  #aaMacroTerminal .settings-subhead{font-size:.82rem; font-weight:600; margin:0; color:var(--text);}
  #aaMacroTerminal .settings-panel input[type="color"]{width:100%; height:38px; padding:3px; background:var(--panel-2); border:1px solid var(--border); border-radius:7px; cursor:pointer;}
  #aaMacroTerminal .settings-check{display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-dim); cursor:pointer;}
  #aaMacroTerminal .settings-check input{width:16px; height:16px; accent-color:var(--accent);}

  /* ---------- News feed view ---------- */
  #aaMacroTerminal .news-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border-soft);}
  #aaMacroTerminal .news-count{font-family:var(--font-mono); font-size:.7rem; color:var(--text-faint); margin-left:auto;}
  #aaMacroTerminal .news-filters{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-bottom:18px;}
  /* Sticky feed header: the title + filters stay put while the headline list scrolls */
  #aaMacroTerminal .news-topbar{
    position:sticky; top:0; z-index:15;
    background:var(--bg); margin:-22px -18px 16px; padding:16px 18px 12px;
    border-bottom:1px solid var(--border-soft);
  }
  #aaMacroTerminal .news-topbar .news-head{margin-bottom:12px; padding-bottom:0; border-bottom:none;}
  #aaMacroTerminal .news-topbar .news-filters{margin-bottom:0;}
  #aaMacroTerminal .chip-row{display:flex; flex-wrap:wrap; gap:6px;}
  #aaMacroTerminal .chip{
    font-family:var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.02em;
    padding:6px 12px; border-radius:999px; border:1px solid var(--border); cursor:pointer;
    background:var(--panel-2); color:var(--text-dim); transition:all .15s ease;
  }
  #aaMacroTerminal .chip:hover{color:var(--text); border-color:var(--border-strong);}
  #aaMacroTerminal .chip.active{background:var(--accent-dim); color:var(--accent); border-color:rgba(79,168,232,.4);}
  #aaMacroTerminal .news-search{min-width:200px; flex:1;}
  #aaMacroTerminal #newsAssetSelect{width:170px;}

  #aaMacroTerminal .news-list{display:flex; flex-direction:column; gap:10px;}
  #aaMacroTerminal .news-item{display:flex; gap:14px; padding:14px; background:var(--panel); border:1px solid var(--border); border-radius:12px; transition:border-color .15s ease;}
  #aaMacroTerminal .news-item:hover{border-color:var(--border-strong);}
  #aaMacroTerminal .news-thumb{width:76px; height:76px; object-fit:cover; border-radius:9px; flex-shrink:0; background:var(--panel-2);}
  #aaMacroTerminal .news-avatar{width:76px; height:76px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-weight:700; font-size:1.15rem; color:#EAF0F7; letter-spacing:.02em;}
  #aaMacroTerminal .news-body{display:flex; flex-direction:column; gap:6px; min-width:0;}
  #aaMacroTerminal .news-title{color:var(--text); text-decoration:none; font-size:.92rem; font-weight:600; line-height:1.4;}
  #aaMacroTerminal .news-title:hover{color:var(--accent);}
  #aaMacroTerminal .news-snippet{margin:0; color:var(--text-dim); font-size:.76rem; line-height:1.5;}
  #aaMacroTerminal .news-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--font-mono); font-size:.66rem; color:var(--text-faint);}
  #aaMacroTerminal .news-source{color:var(--text-dim); font-weight:600;}
  #aaMacroTerminal .news-dot{opacity:.5;}
  #aaMacroTerminal .news-tags{display:flex; gap:4px; flex-wrap:wrap; margin-left:2px;}
  #aaMacroTerminal .news-tag{background:var(--accent-dim); color:var(--accent); border-radius:4px; padding:1px 6px; font-size:.62rem; font-weight:600;}
  #aaMacroTerminal .news-empty{text-align:center; color:var(--text-faint); font-family:var(--font-mono); font-size:.8rem; padding:50px 20px; line-height:1.6;}

  /* ---------- Pair deep-dive overlay + blackhole warp ---------- */
  #aaMacroTerminal #pairsMain .card{cursor:pointer;}
  #aaMacroTerminal #pairsMain .card:hover{transform:translateY(-2px);}
  #aaMacroTerminal #pairDetail{
    position:fixed; inset:0; z-index:60; overflow:hidden;
    background:var(--bg); visibility:hidden; pointer-events:none;
  }
  #aaMacroTerminal #pairDetail.open{visibility:visible; pointer-events:auto;}
  /* Premium blackhole warp: accretion ring + singularity flash + lensed reveal */
  #aaMacroTerminal .bh-core{
    position:absolute; left:var(--ox,50%); top:var(--oy,50%); width:22px; height:22px;
    margin:-11px 0 0 -11px; border-radius:50%; opacity:0; pointer-events:none; z-index:2;
    background:radial-gradient(circle, #fff 0%, var(--accent) 42%, transparent 72%);
    box-shadow:0 0 70px 26px rgba(79,168,232,.55), 0 0 140px 60px rgba(124,58,237,.35);
  }
  #aaMacroTerminal .bh-ring{
    position:absolute; left:var(--ox,50%); top:var(--oy,50%); width:72vmax; height:72vmax;
    margin:-36vmax 0 0 -36vmax; border-radius:50%; opacity:0; pointer-events:none;
    background:conic-gradient(from 0deg,
      transparent 0%, rgba(79,168,232,0) 8%, var(--accent) 26%, #8B5CF6 42%,
      #05070b 52%, #8B5CF6 62%, var(--accent) 78%, transparent 94%);
    filter:blur(11px) drop-shadow(0 0 44px rgba(124,58,237,.5));
    mix-blend-mode:screen;
  }
  #aaMacroTerminal #pairDetail.warp .bh-ring{animation:mt_bhRing .82s cubic-bezier(.16,1,.3,1) both;}
  #aaMacroTerminal #pairDetail.warp .bh-core{animation:mt_bhCore .66s cubic-bezier(.16,1,.3,1) both;}
  #aaMacroTerminal #pairDetail.warp .detail-inner{animation:mt_bhIn .88s cubic-bezier(.16,1,.3,1) both;}
  #aaMacroTerminal #pairDetail.closing .detail-inner{animation:mt_bhOut .36s cubic-bezier(.4,0,1,1) both;}
  @keyframes mt_bhRing{
    0%{opacity:0; transform:scale(2.9) rotate(0deg);}
    22%{opacity:.95;}
    70%{opacity:.5;}
    100%{opacity:0; transform:scale(0) rotate(300deg);}
  }
  @keyframes mt_bhCore{
    0%{opacity:0; transform:scale(0);}
    38%{opacity:1; transform:scale(1.5);}
    100%{opacity:0; transform:scale(0);}
  }
  @keyframes mt_bhIn{
    0%{clip-path:circle(0% at var(--ox,50%) var(--oy,50%)); transform:scale(.92); opacity:0; filter:blur(14px);}
    42%{opacity:1;}
    100%{clip-path:circle(165% at var(--ox,50%) var(--oy,50%)); transform:none; opacity:1; filter:blur(0);}
  }
  @keyframes mt_bhOut{
    0%{opacity:1; transform:none; filter:blur(0);}
    100%{opacity:0; transform:scale(.96); filter:blur(9px);}
  }
  #aaMacroTerminal .detail-inner{
    position:absolute; inset:0; overflow-y:auto; padding:26px 22px 90px;
    max-width:1100px; margin:0 auto;
  }
  #aaMacroTerminal .detail-close{
    position:sticky; top:0; float:right; z-index:2;
    font-family:var(--font-mono); font-size:.72rem; font-weight:600;
    padding:8px 14px; border-radius:8px; border:1px solid var(--border);
    background:var(--panel-2); color:var(--text-dim); cursor:pointer;
  }
  #aaMacroTerminal .detail-close:hover{border-color:var(--accent); color:var(--accent);}
  #aaMacroTerminal .detail-id{font-family:var(--font-mono); font-weight:700; font-size:2rem; letter-spacing:.02em;}
  #aaMacroTerminal .detail-name{color:var(--text-faint); font-size:.9rem; margin-bottom:12px;}
  #aaMacroTerminal .detail-topline{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 18px;}
  #aaMacroTerminal .leg-inline{font-family:var(--font-mono); font-size:.74rem; color:var(--text-dim); padding:4px 9px; border:1px solid var(--border); border-radius:6px;}
  #aaMacroTerminal .leg-inline b{color:var(--text);}
  #aaMacroTerminal .detail-section{margin:22px 0; padding-top:16px; border-top:1px solid var(--border-soft);}
  #aaMacroTerminal .detail-section h3{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin:0 0 10px; font-family:var(--font-mono);}
  #aaMacroTerminal .detail-section p{color:var(--text-dim); line-height:1.65; margin:0 0 10px; font-size:.9rem;}
  #aaMacroTerminal .detail-list{margin:0; padding-left:18px; color:var(--text-dim); line-height:1.7; font-size:.88rem;}
  #aaMacroTerminal .detail-list li{margin-bottom:6px;}
  #aaMacroTerminal .case-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  #aaMacroTerminal .case{padding:14px; border-radius:10px; border:1px solid var(--border);}
  #aaMacroTerminal .case.bull{background:var(--bull-dim); border-color:rgba(52,211,153,.3);}
  #aaMacroTerminal .case.bear{background:var(--bear-dim); border-color:rgba(251,107,107,.3);}
  #aaMacroTerminal .case h4{margin:0 0 8px; font-size:.8rem; font-family:var(--font-mono);}
  #aaMacroTerminal .case.bull h4{color:var(--bull);} #aaMacroTerminal .case.bear h4{color:var(--bear);}
  #aaMacroTerminal .detail-caveat{
    background:var(--neutral-dim); border:1px solid rgba(232,184,75,.3); border-radius:10px;
    padding:12px 14px; color:var(--text-dim); font-size:.8rem; line-height:1.6; margin:16px 0;
  }
  #aaMacroTerminal .detail-caveat strong{color:var(--neutral);}
  #aaMacroTerminal .detail-loading{display:flex; align-items:center; gap:10px; color:var(--text-dim); font-family:var(--font-mono); font-size:.82rem; padding:20px 0;}
  #aaMacroTerminal .detail-spin{width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:mt_spin .8s linear infinite;}
  @keyframes mt_spin{to{transform:rotate(360deg);}}
  @media (max-width:640px){ #aaMacroTerminal .case-grid{grid-template-columns:1fr;}}
  @media (prefers-reduced-motion:reduce){
    #aaMacroTerminal #pairDetail.warp .bh-ring, #aaMacroTerminal #pairDetail.warp .bh-core, #aaMacroTerminal #pairDetail.warp .detail-inner, #aaMacroTerminal #pairDetail.closing .detail-inner{animation:none;}}

  /* ---------- Economic calendar (rendered natively, styled like the news feed) ---------- */
  #aaMacroTerminal .ev-day{
    font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:.1em;
    color:var(--text-faint); text-transform:uppercase; margin:16px 2px 8px; padding-bottom:6px;
    border-bottom:1px solid var(--border-soft);
  }
  #aaMacroTerminal .ev-day:first-child{margin-top:0;}
  #aaMacroTerminal .ev-flag{
    width:56px; height:56px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-weight:700; font-size:.9rem; letter-spacing:.02em; color:#EAF0F7;
  }
  #aaMacroTerminal .imp-high{--imp:var(--bear);} #aaMacroTerminal .imp-med{--imp:var(--neutral);} #aaMacroTerminal .imp-low{--imp:var(--accent);} #aaMacroTerminal .imp-hol{--imp:var(--text-faint);}
  #aaMacroTerminal .ev-flag.imp-high{background:var(--bear-dim); color:var(--bear);}
  #aaMacroTerminal .ev-flag.imp-med{background:var(--neutral-dim); color:var(--neutral);}
  #aaMacroTerminal .ev-flag.imp-low{background:var(--accent-dim); color:var(--accent);}
  #aaMacroTerminal .ev-flag.imp-hol{background:var(--panel-2); color:var(--text-faint);}
  #aaMacroTerminal .ev-badge{font-weight:700; padding:1px 7px; border-radius:4px; font-size:.62rem; text-transform:uppercase; letter-spacing:.04em;}
  #aaMacroTerminal .ev-badge.imp-high{color:var(--bear); background:var(--bear-dim);}
  #aaMacroTerminal .ev-badge.imp-med{color:var(--neutral); background:var(--neutral-dim);}
  #aaMacroTerminal .ev-badge.imp-low{color:var(--accent); background:var(--accent-dim);}
  #aaMacroTerminal .ev-badge.imp-hol{color:var(--text-faint); background:var(--panel-2);}
  #aaMacroTerminal .ev-time{color:var(--text);}
  #aaMacroTerminal .ev-vals{display:flex; gap:12px; flex-wrap:wrap; margin-left:2px; color:var(--text-faint);}
  #aaMacroTerminal .ev-vals b{color:var(--text-dim); font-weight:600;}
  #aaMacroTerminal .ev-source{font-family:var(--font-mono); font-size:.64rem; color:var(--text-faint); text-align:right; margin-top:8px;}
  #aaMacroTerminal .ev-clickable{cursor:pointer;}
  #aaMacroTerminal .ev-clickable:hover{border-color:var(--border-strong);}
  #aaMacroTerminal .ev-cta{margin-left:auto; color:var(--accent); font-weight:600; white-space:nowrap;}
  #aaMacroTerminal .ev-released{margin-left:8px; font-size:.56rem; font-weight:700; letter-spacing:.06em; color:var(--bull); background:var(--bull-dim); padding:1px 6px; border-radius:4px; vertical-align:middle;}
  #aaMacroTerminal .ev-actual{color:var(--text-dim);} #aaMacroTerminal .ev-actual b{color:var(--text);}

  /* ---------- Chart view: chart FILLS the frame; watchlist is a panel OUTSIDE the frame ---------- */
  /* Watchlist collapses by animating WIDTH; a fixed-width inner keeps the content
     from reflowing (which was the source of the jank), so it slides cleanly. */
  #aaMacroTerminal .watchlist{
    width:240px; flex:0 0 auto; display:none; overflow:hidden;
    transition:width .28s cubic-bezier(.4,0,.2,1), max-height .28s cubic-bezier(.4,0,.2,1), opacity .2s ease, margin-right .28s cubic-bezier(.4,0,.2,1);
    will-change:width;
  }
  #aaMacroTerminal.view-chart .watchlist{display:block;}
  #aaMacroTerminal.view-chart.wl-collapsed .watchlist{width:0; opacity:0; margin-right:-12px; pointer-events:none;}
  #aaMacroTerminal .wl-inner{
    width:240px; height:100%; display:flex; flex-direction:column;
    background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden;
  }
  #aaMacroTerminal .wl-head{padding:12px 12px 10px; border-bottom:1px solid var(--border-soft);}
  #aaMacroTerminal .wl-head-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
  #aaMacroTerminal .wl-collapse{background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:.95rem; line-height:1; padding:2px 4px;}
  #aaMacroTerminal .wl-collapse:hover{color:var(--text);}
  #aaMacroTerminal .wl-tabs{display:flex; gap:5px; margin-top:9px;}
  #aaMacroTerminal .wl-tab{
    flex:1; font-family:var(--font-mono); font-size:.68rem; font-weight:600; padding:6px 8px;
    border-radius:7px; border:1px solid var(--border); background:var(--panel-2); color:var(--text-dim); cursor:pointer;
  }
  #aaMacroTerminal .wl-tab.active{background:var(--accent); color:#06121C; border-color:var(--accent);}
  #aaMacroTerminal .wl-list{flex:1; overflow-y:auto; padding:6px;}
  #aaMacroTerminal .wl-cat{font-family:var(--font-mono); font-size:.6rem; font-weight:700; letter-spacing:.1em; color:var(--text-faint); text-transform:uppercase; padding:10px 8px 4px;}
  #aaMacroTerminal .wl-item{display:flex; align-items:center; gap:8px; padding:8px; border-radius:8px; cursor:pointer; transition:background .12s ease;}
  #aaMacroTerminal .wl-item:hover{background:var(--panel-2);}
  #aaMacroTerminal .wl-item.active{background:var(--accent-dim);}
  #aaMacroTerminal .wl-star{background:none; border:none; cursor:pointer; color:var(--text-faint); font-size:.95rem; line-height:1; padding:0; width:16px;}
  #aaMacroTerminal .wl-star.on{color:var(--neutral);}
  #aaMacroTerminal .wl-id{font-family:var(--font-mono); font-weight:700; font-size:.78rem; color:var(--text);}
  #aaMacroTerminal .wl-badge{margin-left:auto; font-family:var(--font-mono); font-size:.72rem; font-weight:700; color:var(--text-faint);}
  #aaMacroTerminal .wl-badge.bullish{color:var(--bull);} #aaMacroTerminal .wl-badge.bearish{color:var(--bear);} #aaMacroTerminal .wl-badge.neutral{color:var(--neutral);}
  #aaMacroTerminal .wl-empty{color:var(--text-faint); font-family:var(--font-mono); font-size:.72rem; padding:16px 10px; line-height:1.6;}

  #aaMacroTerminal #chartMain{padding:0; height:100%;}
  #aaMacroTerminal .chart-area{position:relative; height:100%; width:100%; display:flex; flex-direction:column;}
  #aaMacroTerminal .chart-toolbar{flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:8px 10px; border-bottom:1px solid var(--border-soft);}
  #aaMacroTerminal .tf-row{display:flex; gap:3px;}
  #aaMacroTerminal .tf-btn{font-family:var(--font-mono); font-size:.68rem; font-weight:600; padding:6px 11px; border-radius:7px; border:1px solid var(--border); background:var(--panel-2); color:var(--text-dim); cursor:pointer;}
  #aaMacroTerminal .tf-btn:hover{color:var(--text);}
  #aaMacroTerminal .tf-btn.active{background:var(--accent); color:#06121C; border-color:var(--accent);}
  #aaMacroTerminal .chart-head-right{margin-left:auto; display:flex; align-items:center; gap:10px;}
  #aaMacroTerminal .chart-sym{font-family:var(--font-mono); font-size:.75rem; font-weight:700; color:var(--text-dim);}
  #aaMacroTerminal #chartBias:empty{display:none;}
  #aaMacroTerminal .chart-host{flex:1 1 auto; min-height:0; width:100%;}
  #aaMacroTerminal .chart-host .tradingview-widget-container, #aaMacroTerminal .chart-host iframe{width:100% !important; height:100% !important;}

  /* ---------- Economic calendar filters ---------- */
  #aaMacroTerminal #eventsRegionSelect{width:190px;}

  @media (max-width:760px){
    #aaMacroTerminal{flex-direction:column;}
    /* rail becomes a bottom bar on small screens */
    /* Bottom tab bar: 5 equal-width tabs, icon over a full readable label (no truncation). */
    #aaMacroTerminal .nav-rail{
      order:2; position:static; width:auto; flex-direction:row; align-items:stretch; gap:2px;
      overflow:visible; border-right:none; border-top:1px solid var(--border);
      padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    #aaMacroTerminal .nav-rail:hover{width:auto;}
    #aaMacroTerminal .rail-brand{display:none;}
    #aaMacroTerminal .rail-btn{
      flex:1 1 0; min-width:0; flex-direction:column; align-items:center; justify-content:center;
      gap:3px; padding:6px 2px; text-align:center; white-space:normal; overflow:visible; border-radius:10px;
    }
    #aaMacroTerminal .rail-ico{width:20px; height:20px;}
    #aaMacroTerminal .rail-ico svg{width:19px; height:19px;}
    #aaMacroTerminal .rail-label{opacity:1; font-size:.585rem; line-height:1.1; letter-spacing:0; white-space:nowrap; overflow:visible; text-overflow:clip;}
    #aaMacroTerminal .rail-clock{display:none;}
    #aaMacroTerminal .rail-sub{display:none !important;}   /* sub-toggles live at the page bottom on compact */
    #aaMacroTerminal .stage{flex-direction:column; padding:6px 8px 8px;}
    #aaMacroTerminal .watchlist{width:100%; max-height:220px;}
    #aaMacroTerminal .wl-inner{width:100%;}
    #aaMacroTerminal.view-chart.wl-collapsed .watchlist{width:100%; max-height:0; opacity:0; margin-right:0; border:none;}
    #aaMacroTerminal .frame-scroll > main{padding:16px 12px 22px;}
    #aaMacroTerminal #chartMain{min-height:62vh;}
    #aaMacroTerminal .news-item{flex-direction:column;}
    #aaMacroTerminal .news-thumb, #aaMacroTerminal .news-avatar{width:100%; height:120px;}
    #aaMacroTerminal .settings-row{grid-template-columns:1fr;}
    #aaMacroTerminal .card-grid{grid-template-columns:1fr;}}

  @keyframes mt_pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(1.3);}}
  @keyframes mt_shimmer{0%{background-position:100% 0;} 100%{background-position:-100% 0;}}
  @keyframes mt_scrollTicker{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  @keyframes mt_fadeDown{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);}}
  @keyframes mt_fadeUp{from{opacity:0;} to{opacity:1;}}

  @media (prefers-reduced-motion:reduce){
    #aaMacroTerminal .ticker-track{animation:none;}
    #aaMacroTerminal .live-dot.pulse{animation:none;}
    #aaMacroTerminal .card[data-state="loading"] .driver{animation:none;}
    #aaMacroTerminal .category, #aaMacroTerminal .topbar{animation:none;}
    #aaMacroTerminal .watchlist, #aaMacroTerminal .nav-rail{transition:none;}}

/* ============================= Alien Algo chart bridge ============================= */
/* The skin is an absolutely-positioned layer inside #aaApp. It stays hidden until
   the user signs in (the platform toggles [hidden]). */
#aaApp.aa-terminal-active{position:relative;}
#aaMacroTerminal{position:absolute; inset:0; z-index:900;}
#aaMacroTerminal[hidden]{display:none !important;}

/* When the skin is live, the app's native top chrome + mobile tabs are hidden —
   their content lives inside the skin's Chart tab instead. The side panel is NOT
   hidden: it slides in above the skin when the user opens Account/AI/Calendar. */
#aaApp.aa-terminal-active > header,
#aaApp.aa-terminal-active > .trade-bar,
#aaApp.aa-terminal-active > .aa-mobile-tabs{ display:none !important; }
#aaApp.aa-terminal-active .aa-side-panel{ z-index:1200 !important; }

/* The skin's own Chart toolbar is redundant — the real Alien Algo toolbar (moved
   in with the chart) provides symbol/timeframe/drawing tools. */
#aaMacroTerminal .chart-toolbar{ display:none !important; }
/* Chart-appearance controls in the skin's Settings tab drove the old TradingView
   widget; the Alien Algo chart has its own gear/settings, so hide the dead block. */
#aaMacroTerminal .settings-chart{ display:none !important; }

/* #chartHost now hosts the app's real chart column (header + trade-bar + chart-stack).
   The chart FILLS the top; the pair/timeframe lane (header) + OHLC lane (trade-bar) sit at the
   BOTTOM via flex order (DOM order is untouched, so the app's logic is unaffected). */
#aaMacroTerminal #chartHost{ display:flex; flex-direction:column; padding:0; }
#aaMacroTerminal #chartHost > header,
#aaMacroTerminal #chartHost > .trade-bar{ flex:0 0 auto; }
#aaMacroTerminal #chartHost > header{ order:3; border-bottom:none; border-top:1px solid var(--border-soft); }
#aaMacroTerminal #chartHost > .trade-bar{ order:2; }
#aaApp.aa-terminal-active #chartHost > .chart-stack,
#aaApp.aa-terminal-active #chartHost > .aa-chart-page{
  order:1; flex:1 1 auto; min-height:0; height:auto !important;
}
#aaMacroTerminal .chart-area{ height:100%; }
/* Full-screen chart: with the watchlist sidebar gone, the frame fills the whole stage. */
#aaMacroTerminal.view-chart .app-frame{ padding:0; }
#aaMacroTerminal.view-chart .frame-scroll{ overflow:hidden; }

/* ---- Watchlist + Settings tabs backed by the real Alien Algo panels ----
   The app's own Watchlist/Settings panel pages are relocated into these skin mains
   (see AAChartBridge.aaMountPanelsIntoTerminal). Lay them out to fill the tab and hide
   the skin's old Mistral-key Settings block. */
#aaMacroTerminal #settingsMain > .settings-panel{ display:none !important; }  /* hide Mistral API key UI entirely */
#aaMacroTerminal #settingsMain,
#aaMacroTerminal #watchlistMain{ padding:0 !important; height:100%; display:flex; flex-direction:column; min-height:0; }
/* Our display:flex above beats the UA [hidden] rule — restore hiding for inactive tabs. */
#aaMacroTerminal #settingsMain[hidden],
#aaMacroTerminal #watchlistMain[hidden]{ display:none !important; }
#aaMacroTerminal #settingsMain > .aa-panel-page,
#aaMacroTerminal #watchlistMain > .aa-panel-page{ flex:1 1 auto; min-height:0; height:100% !important; width:100%; }
/* Center the Settings page on wide screens; the watchlist stays full-width. */
#aaMacroTerminal #settingsMain > .aa-panel-page{ max-width:860px; margin-inline:auto; }
/* v1032 — Settings sub-pages were only given a proper "fixed stage" inside the compact
   @media(max-width:820px) block, so on the always-full-screen terminal (desktop widths) opening a
   sub-page collapsed the settings page to 0 height and the list bled through. Mirror that stage
   treatment here for every width: the page clips, the main list fills + scrolls, and each absolute
   sub-page fills the page so it slides in cleanly. */
#aaMacroTerminal #settingsMain > .aa-panel-page[data-panel-page="settings"]{
  /* Opening a settings sub-page strips the app's `.active` class off this page (its native drawer
     flow), which would collapse it via `.aa-panel-page{display:none}`. In the terminal the page is
     the tab body, so keep it shown whenever the Settings tab is open (#settingsMain[hidden] hides
     the whole tab when inactive). */
  display:flex !important;
  position:relative !important; height:100% !important; max-height:100% !important; overflow:hidden !important;
}
#aaMacroTerminal #settingsMain > .aa-panel-page[data-panel-page="settings"] > .settings-panel-inline{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
#aaMacroTerminal #settingsMain > .aa-panel-page[data-panel-page="settings"] > .aa-settings-subpage{
  position:absolute !important; inset:0 !important; height:100% !important;
}

/* In skin mode the app's own side drawer stays CLOSED for Settings/Watchlist (they render
   inside the skin tabs); AI + Calendar still slide in as drawers over the skin. */
#aaApp.aa-terminal-active[data-panel="settings"] .aa-side-panel,
#aaApp.aa-terminal-active[data-panel="watchlist"] .aa-side-panel{ transform:translateX(104%) !important; box-shadow:none !important; }

/* ---- Watchlist tab: let the relocated Alien Algo watchlist scroll WITHIN the frame
   (it was getting cut off), and keep its floating Watchlist/Trade-signals switch anchored. */
#aaMacroTerminal #watchlistMain{ overflow:hidden; position:relative; }
#aaMacroTerminal #watchlistMain > .aa-panel-page{ position:relative; height:100% !important; min-height:0; overflow:auto; padding-bottom:64px; -webkit-overflow-scrolling:touch; }

/* ---- Compact-mode News sub-toggle pinned to the bottom of the News page (Data Feed / News
   Events). Hidden on desktop (the nav rail carries the sub-buttons there). */
#aaMacroTerminal .mt-news-bottomsub{ display:none; }
@media (max-width:760px){
  #aaMacroTerminal #railNewsSub{ display:none !important; }   /* de-clutter the bottom tab bar */
  #aaMacroTerminal #newsMain{ position:relative; }
  #aaMacroTerminal .mt-news-bottomsub{
    display:flex; gap:8px; position:sticky; bottom:0; z-index:20;
    margin:14px -12px -22px; padding:10px 12px;
    background:var(--float-bg); backdrop-filter:blur(8px); border-top:1px solid var(--border);
  }
  #aaMacroTerminal .mt-news-subbtn{
    flex:1; font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.02em;
    padding:11px 10px; border-radius:9px; border:1px solid var(--border);
    background:var(--panel-2); color:var(--text-dim); cursor:pointer;
  }
  #aaMacroTerminal .mt-news-subbtn.active{ background:var(--accent); color:#06121C; border-color:var(--accent); }
}

/* ---- Full-screen chart (app's #aaFullscreenBtn toggles .aa-fullscreen). In skin mode the
   app's grid rules can't reach the embedded chart, so hide the skin chrome (nav rail + ticker)
   and drop the frame chrome to make the chart fill the viewport. The bottom pair/timeframe +
   OHLC lanes stay put so the exit-fullscreen button remains reachable. */
#aaApp.aa-terminal-active.aa-fullscreen .nav-rail,
#aaApp.aa-terminal-active.aa-fullscreen .sticky-top{ display:none !important; }
#aaApp.aa-terminal-active.aa-fullscreen .stage{ padding:0 !important; }
#aaApp.aa-terminal-active.aa-fullscreen .app-frame{ padding:0 !important; border:none !important; border-radius:0 !important; box-shadow:none !important; }
#aaApp.aa-terminal-active.aa-fullscreen .frame-scroll{ border:none !important; border-radius:0 !important; }

/* ==========================================================================
   Theme: follow the Alien Algo app theme (html[data-theme]) instead of the OS
   colour scheme, using the Alien Algo brand palette (logo green accent). These
   data-theme rules outrank the OS-based defaults above, so the skin always
   matches whatever theme the user picked in the app.
   ========================================================================== */
html[data-theme="dark"] #aaMacroTerminal{
  --bg:#05070b; --bg-2:#080b12; --panel:#0d1320; --panel-2:#121a2a;
  --border:#202939; --border-soft:#161d2a; --border-strong:#334155;
  --text:#f8fafc; --text-dim:#94a3b8; --text-faint:#64748b;
  --accent:#00f0a3; --accent-dim:rgba(0,240,163,.14);
  --bull:#24f29d; --bull-dim:rgba(36,242,157,.13);
  --bear:#ff5555; --bear-dim:rgba(255,85,85,.13);
  --neutral:#f5c451; --neutral-dim:rgba(245,196,81,.13);
  --chrome-bg:rgba(8,11,18,.9); --float-bg:rgba(8,11,18,.94);
  --shadow:rgba(0,0,0,.5); --glow-1:rgba(0,240,163,.06); --glow-2:rgba(36,242,157,.045);
}
html[data-theme="light"] #aaMacroTerminal{
  --bg:#eef1f6; --bg-2:#e7ebf1; --panel:#ffffff; --panel-2:#f3f6fb;
  --border:#d4dae4; --border-soft:#e5eaf1; --border-strong:#c0c9d6;
  --text:#0f1720; --text-dim:#51607a; --text-faint:#8a94a6;
  --accent:#0aa06b; --accent-dim:rgba(10,160,107,.12);
  --bull:#0f9d53; --bull-dim:rgba(15,157,83,.12);
  --bear:#e5484d; --bear-dim:rgba(229,72,77,.12);
  --neutral:#b5820a; --neutral-dim:rgba(181,130,10,.13);
  --chrome-bg:rgba(255,255,255,.9); --float-bg:rgba(255,255,255,.95);
  --shadow:rgba(60,72,96,.16); --glow-1:rgba(10,160,107,.06); --glow-2:rgba(15,157,83,.04);
}
/* Green accent buttons keep dark text for contrast in both themes. */
html[data-theme="light"] #aaMacroTerminal .rail-btn.active,
html[data-theme="dark"] #aaMacroTerminal .rail-btn.active{ color:#04120c; }

/* ---- Premium zoom controls on the chart page (a polish rule hides the app's zoom
   buttons; re-enable the floating −/+/⟳ box in skin mode, bottom-right, works in
   fullscreen too since it lives inside the chart canvas wrap). */
/* :not([hidden]) — only show when the app un-hides the box, i.e. when the current bar is
   scrolled off-screen (currentBarNeedsRecoveryControls). When the current bar is in view the
   app sets [hidden] and the controls disappear. */
#aaApp.aa-terminal-active #aaChartFloatControls:not([hidden]){
  display:flex !important; flex-direction:row; gap:5px;
  left:50%; right:auto; top:auto; bottom:12px; transform:translateX(-50%); z-index:14;
  padding:4px; border-radius:11px; border:1px solid var(--border);
  background:var(--float-bg); box-shadow:0 10px 28px var(--shadow); backdrop-filter:blur(9px);
}
#aaApp.aa-terminal-active #aaChartFloatControls button{
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid var(--border); background:var(--panel-2);
  color:var(--text); font-weight:800; font-size:.9rem; line-height:1; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
#aaApp.aa-terminal-active #aaChartFloatControls button:hover{ border-color:var(--accent); color:var(--accent); background:var(--panel); }
#aaApp.aa-terminal-active #aaChartFloatControls button:active{ transform:translateY(1px); }
/* Nudge it up in fullscreen so it clears the bottom pair/timeframe lane. */
#aaApp.aa-terminal-active.aa-fullscreen #aaChartFloatControls{ bottom:20px; }

/* Compact: shrink the chart zoom/refresh controls and center them at the bottom of the chart
   (near the AlienAlgoAI.com watermark) instead of a big column on the right. Refresh still fires
   the app's manual chart reload. */
@media (max-width:760px){
  #aaApp.aa-terminal-active #aaChartFloatControls:not([hidden]){
    flex-direction:row; gap:5px; left:50%; right:auto; top:auto; bottom:10px;
    transform:translateX(-50%); padding:4px; border-radius:11px;
  }
  #aaApp.aa-terminal-active #aaChartFloatControls button{ width:27px; height:27px; font-size:.85rem; border-radius:8px; }
  #aaApp.aa-terminal-active.aa-fullscreen #aaChartFloatControls:not([hidden]){ bottom:14px; }
}

/* ==========================================================================
   COMPACT (mobile) — full-screen premium. Remove the "frame card" chrome so
   every page is edge-to-edge like a native app; keep tasteful content padding.
   ========================================================================== */
@media (max-width:760px){
  #aaMacroTerminal .stage{ padding:0 !important; gap:0; }
  #aaMacroTerminal .app-frame{
    padding:0 !important; border:none !important; border-radius:0 !important;
    box-shadow:none !important; background:transparent !important;
  }
  #aaMacroTerminal .frame-scroll{ border:none !important; border-radius:0 !important; background:var(--bg); }
  #aaMacroTerminal .frame-scroll > main{ padding:14px 14px 22px; }
  #aaMacroTerminal #chartMain,
  #aaMacroTerminal #watchlistMain,
  #aaMacroTerminal #settingsMain{ padding:0 !important; }
  /* sticky headers span the full width now that side padding shrank */
  #aaMacroTerminal .news-topbar{ margin:-14px -14px 14px; padding:14px 14px 12px; }
  #aaMacroTerminal .category-head{ padding:12px 0 9px; }
  /* premium: respect the notch, keep the ticker flush to the top */
  #aaMacroTerminal .sticky-top{ background:var(--bg); padding-top:env(safe-area-inset-top, 0px); }
  #aaMacroTerminal .ticker{ border-radius:0; }
  /* the relocated Settings page shouldn't be width-capped on a phone */
  #aaMacroTerminal #settingsMain > .aa-panel-page{ max-width:none; }
}

/* Chart page: hide the scrolling headlines ticker on COMPACT only (the mobile chart needs the
   vertical space). On DESKTOP the headlines ticker stays visible on the chart page so users can
   read the scrolling headlines while charting. */
@media (max-width:760px){
  #aaMacroTerminal.view-chart .sticky-top{ display:none !important; }
}

/* ==========================================================================
   DESKTOP chart chrome (min-width:761px)
   - Nav rail expands as an OVERLAY on hover (no stage push) so the chart never
     resizes/janks while hovering the rail/sub-buttons — bars keep their positions.
   - Remove the OHLC trade-bar lane; Undo/Redo was moved up into the header lane by
     AAChartBridge, and AI Chat/Calendar/Settings lived in that bar and go with it.
   - Reveal + slim the News Bias label in the pair/timeframe (header) lane.
   ========================================================================== */
@media (min-width:761px){
  #aaMacroTerminal .nav-rail{ position:absolute; left:0; top:0; bottom:0; }
  #aaMacroTerminal .main-col{ margin-left:56px; }
  #aaApp.aa-terminal-active #chartHost > #tradeBar,
  #aaApp.aa-terminal-active #chartHost > .trade-bar{ display:none !important; }
  #aaApp.aa-terminal-active #chartHost > header .tv-newsbias{
    display:inline-flex !important; height:22px; padding:0 9px; margin-left:8px;
    font-size:10.5px; font-weight:800; max-width:220px; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; cursor:pointer;
  }
  #aaApp.aa-terminal-active #chartHost > header .tv-newsbias .k{ margin-right:4px; }
}
/* Remove the Account/MT5 button from the chart header (account is in the Settings tab). */
#aaApp.aa-terminal-active .account-btn{ display:none !important; }

/* v1039 — GUEST SECURITY WALL. A signed-out visitor must NEVER see the app/chart (no bypassing the
   auth dialog to peek at the platform). We hide the whole app + terminal for guests and paint a
   branded backdrop; the auth <dialog> is a top-layer body sibling, so it still shows above this. */
body.aa-guest-locked{ background:#05060a !important; }
body.aa-guest-locked #aaApp,
body.aa-guest-locked #aaMacroTerminal{ visibility:hidden !important; pointer-events:none !important; }
@media (prefers-color-scheme: light){ body.aa-guest-locked{ background:#f3f6fa !important; } }
html[data-theme="light"] body.aa-guest-locked, body.aa-guest-locked[data-theme="light"]{ background:#f3f6fa !important; }

/* Brand logo in the nav rail — DESKTOP ONLY (never in the compact bottom tab bar). */
@media (min-width:761px){
  #aaMacroTerminal .rail-brand{ display:flex; align-items:center; }
  #aaMacroTerminal .mt-brand-logo{
    width:34px; height:34px; border-radius:9px; object-fit:cover; display:block;
    /* Clean alien-head icon (the wordmark JPEG turned to mush at 34px). No translateZ/backface
       compositing — those forced a low-res raster layer that only made it blurrier on hover. */
    image-rendering:auto; background:#fff;
    border:1px solid var(--border);
  }
}
@media (max-width:760px){ #aaMacroTerminal .rail-brand{ display:none !important; } }

/* v1030 — GLOBAL CREDIT LOCK. Out of daily Alien credits ⇒ chart + drawings only. The AI-board nav
   tabs (Macro Bias, News) show a lock badge and dim; they still tap (to surface the upgrade nudge)
   but bounce back to the chart. Chart / Watchlist / Settings stay fully usable. */
#aaMacroTerminal.mt-credit-locked #viewPairsBtn,
#aaMacroTerminal.mt-credit-locked #viewNewsBtn{ opacity:.42; position:relative; }
#aaMacroTerminal.mt-credit-locked #viewPairsBtn .rail-ico::after,
#aaMacroTerminal.mt-credit-locked #viewNewsBtn .rail-ico::after{
  content:'🔒'; position:absolute; top:-4px; right:-4px; font-size:10px; line-height:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));
}

/* Favorites bar collapse — animated (max-width/opacity, since display:none can't transition).
   The ⋮ grip stays and remains draggable when collapsed. */
#aaChartFavoritesBar .aa-chart-fav-rows{
  overflow:hidden; transition:max-width .22s cubic-bezier(.4,0,.2,1), opacity .18s ease;
  max-width:680px; opacity:1;
}
#aaChartFavoritesBar.aa-fav-collapsed .aa-chart-fav-rows{ max-width:0; opacity:0; }
#aaChartFavoritesBar{ transition:padding .2s ease; }
#aaChartFavoritesBar.aa-fav-collapsed{ padding:2px !important; }
#aaChartFavoritesBar .aa-chart-fav-drag{ cursor:pointer; touch-action:none; }