:root {
  --bg:#050810; --bg2:#080c14; --ink:#e8f4ff; --ink2:#94a8c4;
  --brand:#00ff88; --brand2:#00cc6a; --line:#162236; --card:#0a0f1aee; 
  --red:#ff3366; --gold:#ffd700; --purple:#8b5cf6;
  --topbar-h: 60px;
  --glow: 0 0 20px rgba(0,255,136,0.3);
  --chart-bg-gradient-start: #050a12;
  --chart-bg-gradient-mid: #06131f;
  --chart-bg-gradient-end: #081726;
  --grid-color: #122335;
  --axis-text: #b7c3d6;
  --axis-line: #203245;
  --crosshair-bg: rgba(11,20,32,.9);
  --crosshair-line: rgba(255,255,255,.2);
}
/* ===== QUANTUM MOBILE VIEWPORT SYSTEM ===== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  touch-action: none; /* Prevent all browser gestures */
}

/* Viewport-locked main container */
#main-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
/* Hide interactive UI during boot to prevent default-layout flash */
html.booting #main-content,
html.booting #windows,
html.booting #indicator-panel {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Optional (nice fade-in once restored) */
#main-content, #windows, #indicator-panel {
  transition: visibility 0s linear 150ms; /* keeps timing smooth */
}

/* ===== MOBILE/TABLET UNIFIED LAYOUT ===== */
@media (max-width: 1024px) {
  :root {
    --topbar-h: 50px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Mobile-specific topbar */
  header.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-h);
    padding-top: var(--safe-area-top);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Hide desktop elements */
  .tb-left .user-info,
  .tb-center,
  .tb-right > *:not(.mobile-menu-btn) {
    display: none !important;
  }

  /* Center logo */
  .tb-left {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Mobile menu button */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--brand);
    border-radius: 8px;
    color: var(--brand);
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    right: 1rem;
  }

  /* Mobile dropdown menu */
  .mobile-menu-dropdown {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    width: min(320px, 90vw);
    max-height: calc(100vh - var(--topbar-h));
    background: var(--card);
    border: 1px solid var(--brand);
    border-radius: 0 0 0 16px;
    box-shadow: -10px 10px 30px rgba(0,0,0,0.5);
    z-index: 9998;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-menu-dropdown.active {
    display: flex !important;
  }

  /* Windows container - VIEWPORT LOCKED */
  #windows {
    position: fixed !important;
    top: var(--topbar-h);
    left: 0;
    width: 100vw;
    height: calc(100vh - var(--topbar-h));
    overflow: hidden !important;
    touch-action: none;
  }

  /* Windows - ABSOLUTE CONTAINMENT */
  .window {
    position: absolute !important;
    min-width: 200px;
    min-height: 150px;
    max-width: calc(100vw - 10px) !important;
    max-height: calc(100vh - var(--topbar-h) - 10px) !important;
  }

  /* Prevent any overflow */
  .window-content {
    overflow: hidden !important;
    max-height: 100%;
  }

  /* Touch resize handle always visible */
  .touch-resize-handle {
    display: block !important;
    width: 50px !important;
    height: 50px !important;
    opacity: 0.8 !important;
  }
}
/* ——— Header collapse system ——— */
header.topbar { 
  position: sticky; /* already set for desktop; keep it */
  top: 0;
  z-index: 100;
  transition: transform .25s ease, height .25s ease;
}

/* Bigger, centered header toggle tab */
#topbar-tab {
  position: fixed;
  left: 12px;
  top: var(--topbar-h);           /* sit exactly under the header */
  width: 44px;                    /* larger touch/click target */
  height: 44px;
  display: flex;                  /* center the arrow perfectly */
  align-items: center;
  justify-content: center;
  line-height: 1;                 /* no baseline drift */
  font-size: 35px;                /* bigger arrow glyph */
  border-radius: 0 0 12px 12px;   /* slightly rounder tab corners */
  border: 1px solid rgba(0,255,136,.35);
  border-top: none;
  background: linear-gradient(180deg, rgba(0,255,136,.10), rgba(0,255,136,.05));
  color: var(--ink);
  cursor: pointer;
  z-index: 10001;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
/* Smooth arrow rotate */
#topbar-tab { transition: transform .25s ease; }

/* Collapsed: flip the chevron (we rely on this, JS no longer swaps text) */
body.topbar-hidden #topbar-tab { transform: rotate(180deg); }

/* When the header is hidden, keep the tab in a reachable, consistent spot */
body.topbar-hidden #topbar-tab {
  top: 8px;                       /* already in your CSS; keep this behavior */
  transform: rotate(180deg);      /* ▾ vs ▴ handled by rotation */
}


/* Collapsed state toggled on <body> */
body.topbar-hidden { --topbar-h: 0px; }                     /* mobile/tablet windows auto-expand */
body.topbar-hidden header.topbar { transform: translateY(-100%); }
body.topbar-hidden #topbar-tab { 
  top: 8px;              /* keep the tab reachable when bar is hidden */
  transform: rotate(180deg);  /* show ▾ instead of ▴ by flipping */
}

/* Mobile/tablet: your #windows already uses --topbar-h for full-screen.
   This line just documents the behavior you already have: */
@media (max-width: 1024px) {
  /* #windows respects --topbar-h, so when we set it to 0 in .topbar-hidden,
     it becomes full-screen (top:0; height:100vh). No extra CSS needed. */
}

/* Mobile Menu Items */
.mobile-menu-item {
  padding: 1rem;
  border-bottom: 1px solid rgba(0,255,136,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s;
}

.mobile-menu-item:hover {
  background: rgba(0,255,136,0.05);
}

.mobile-menu-label {
  flex: 1;
  color: var(--ink);
  font-size: 0.95rem;
}

.mobile-menu-value {
  color: var(--brand);
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
  background: rgba(0,255,136,0.1);
  border-radius: 6px;
}

/* Mobile market selector */
.mobile-market-select {
  width: 100%;
  padding: 0.8rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--brand);
  color: var(--ink);
  border-radius: 8px;
  font-size: 1rem;
  margin: 0.5rem 0;
}

/* Ensure inputs don't zoom on iOS */
input, select, textarea {
  font-size: 16px !important;
}
/* Light mode colors */
:root.light-mode {
  --bg:#ffffff; --bg2:#f8f9fa; --ink:#1a1d23; --ink2:#6c757d;
  --line:#dee2e6; --card:#ffffffee;
  --glow: 0 0 20px rgba(0,204,106,0.2);
  --chart-bg-gradient-start: #ffffff;
  --chart-bg-gradient-mid: #f8f9fa;
  --chart-bg-gradient-end: #f0f2f5;
  --grid-color: #e0e3e8;
  --axis-text: #495057;
  --axis-line: #ced4da;
  --crosshair-bg: rgba(255,255,255,.95);
  --crosshair-line: rgba(0,0,0,.15);
}

* { margin:0; padding:0; box-sizing:border-box; }

html,body{
  height:100%;background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;overflow:hidden;
}

/* Loading Screen */
#loading-screen {
  position:fixed;inset:0;z-index:10000;
  background:radial-gradient(ellipse at center, #0a1628 0%, #030509 100%);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
}
.light-mode #loading-screen {
  background:radial-gradient(ellipse at center, #f0f2f5 0%, #ffffff 100%);
}

.loading-content { text-align:center;animation:fadeInUp 0.8s ease-out; }
.loading-logo {
  font-family:'Orbitron',sans-serif;font-size:4rem;font-weight:900;
  background:linear-gradient(135deg, var(--brand), #00ffff, var(--brand2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:2rem;letter-spacing:2px;animation:pulse 2s ease-in-out infinite;
}
.loading-bars { display:flex;gap:8px;height:60px;align-items:flex-end;margin-bottom:2rem; }
.bar { width:12px;background:linear-gradient(180deg, var(--brand), var(--brand2));
  border-radius:6px;animation:barAnimation 1.2s ease-in-out infinite;box-shadow:0 0 15px rgba(0,255,136,0.5); }
.bar:nth-child(1){animation-delay:0s}.bar:nth-child(2){animation-delay:.1s}.bar:nth-child(3){animation-delay:.2s}.bar:nth-child(4){animation-delay:.3s}.bar:nth-child(5){animation-delay:.4s}
.loading-text{color:var(--ink2);font-size:1rem;letter-spacing:2px;text-transform:uppercase;animation:fadeInOut 2s ease-in-out infinite}
@keyframes barAnimation{0%,100%{height:20px}50%{height:60px}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes fadeInOut{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* Auth Screen */
#auth-screen {
  position:fixed;inset:0;z-index:9000;display:none;
  background:linear-gradient(135deg, #0a0f1a 0%, #050810 50%, #0a0f1a 100%);
  overflow-y:auto;
}
.light-mode #auth-screen {
  background:linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
}
.auth-container { min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem; }
.auth-card { width:min(480px,100%);background:rgba(10,15,26,0.95);
  border:1px solid rgba(0,255,136,0.2);border-radius:24px;padding:3rem 2.5rem;
  box-shadow:0 25px 60px rgba(0,0,0,0.8),var(--glow);backdrop-filter:blur(20px); }
.light-mode .auth-card { 
  background:rgba(255,255,255,0.98);
  border:1px solid rgba(0,204,106,0.3);
  box-shadow:0 25px 60px rgba(0,0,0,0.1),var(--glow);
}
.auth-logo{text-align:center;margin-bottom:2rem}
.auth-logo h1{
  font-family:'Orbitron',sans-serif;font-size:2.8rem;font-weight:900;
  background:linear-gradient(135deg, var(--brand), #00ffff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:1px;margin-bottom:.5rem;
}
.auth-logo p{color:var(--ink2);font-size:.95rem;letter-spacing:.5px}
.auth-tabs{display:flex;gap:1rem;margin-bottom:2rem}
.auth-tab{flex:1;padding:.75rem;background:transparent;border:1px solid var(--line);
  border-radius:12px;color:var(--ink2);cursor:pointer;transition:all .3s;font-weight:500;letter-spacing:.5px}
.auth-tab.active{background:linear-gradient(135deg, rgba(0,255,136,.1), rgba(0,255,136,.05));
  border-color:var(--brand);color:var(--brand);box-shadow:0 0 20px rgba(0,255,136,.2)}
.auth-form{display:none}.auth-form.active{display:block;animation:fadeIn .3s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.form-group{margin-bottom:1.5rem}
.form-group label{display:block;margin-bottom:.5rem;color:var(--ink2);font-size:.9rem;font-weight:500;letter-spacing:.3px}
.form-group input{width:100%;padding:.9rem 1rem;background:rgba(8,12,20,.8);border:1px solid rgba(22,34,54,.8);border-radius:12px;color:var(--ink);font-size:1rem;transition:all .3s}
.light-mode .form-group input{
  background:rgba(248,249,250,.9);
  border:1px solid var(--line);
}
.form-group input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,255,136,.1),inset 0 0 20px rgba(0,255,136,.05)}
.form-group input::placeholder{color:rgba(148,168,196,.5)}
.auth-submit{width:100%;padding:1rem;background:linear-gradient(135deg, var(--brand), var(--brand2));border:none;border-radius:12px;color:#000;font-weight:600;font-size:1rem;letter-spacing:.5px;cursor:pointer;transition:all .3s;margin-top:1.5rem;text-transform:uppercase}
.auth-submit:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,255,136,.4);color:var(--brand) !important;background:rgba(0,255,136,.15)}
.auth-footer{text-align:center;margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(22,34,54,.5)}
.light-mode .auth-footer{border-top:1px solid var(--line)}
.auth-footer a{color:var(--brand);text-decoration:none;font-size:.9rem;transition:all .3s}
.auth-footer a:hover{text-shadow:0 0 10px rgba(0,255,136,.5)}

/* Top Bar */
header.topbar{
  height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;border-bottom:1px solid rgba(0,255,136,0.1);
  background:linear-gradient(180deg, rgba(10,15,26,0.98), rgba(8,12,20,0.95));
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(0,0,0,0.5);
}
.light-mode header.topbar{
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,249,250,0.95));
  border-bottom:1px solid rgba(0,204,106,0.2);box-shadow:0 2px 20px rgba(0,0,0,0.1);
}
.tb-left{display:flex;align-items:center;gap:1rem;}
.tb-center{display:flex;align-items:center;gap:1rem;flex:1;justify-content:center;margin:0 1rem;}
.tb-right{display:flex;align-items:center;gap:0.75rem;}
.logo{
  font-family:'Orbitron',sans-serif;font-size:1.6rem;font-weight:900;
  background:linear-gradient(135deg, var(--brand), #00ffff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;user-select:none;letter-spacing:1px;
  filter:drop-shadow(0 0 20px rgba(0,255,136,.3));cursor:pointer;transition:all .3s;white-space:nowrap;
}
.logo:hover{transform:scale(1.05);filter:drop-shadow(0 0 30px rgba(0,255,136,.5))}
.user-info{display:flex;align-items:center;gap:0.75rem;padding:.4rem .8rem;background:rgba(0,255,136,.05);border:1px solid rgba(0,255,136,.2);border-radius:10px;white-space:nowrap;}
.light-mode .user-info{background:rgba(0,204,106,.05);border:1px solid rgba(0,204,106,.2);}
.user-email{color:var(--ink2);font-size:.8rem;}
.subscription-badge{padding:.25rem .6rem;border-radius:6px;font-size:.7rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.badge-premium{background:linear-gradient(135deg, var(--gold), #ffed4e);color:#000;box-shadow:0 0 10px rgba(255,215,0,.3);}
.badge-markets{background:linear-gradient(135deg, var(--brand), var(--brand2));color:#000;box-shadow:0 0 10px rgba(0,255,136,.3);}
.badge-free{background:rgba(148,168,196,.2);color:var(--ink2);border:1px solid rgba(148,168,196,.3);}
select,input,button{background:rgba(10,15,26,.8);color:var(--ink);border:1px solid rgba(22,34,54,.8);padding:.5rem .8rem;border-radius:8px;font-family:inherit;transition:all .3s;font-size:.85rem;}
.light-mode select,.light-mode input,.light-mode button{background:rgba(255,255,255,.9);color:var(--ink);border:1px solid var(--line);}
select:hover,input:hover,button:hover{border-color:rgba(0,255,136,.3);background:rgba(10,15,26,.95)}
.light-mode select:hover,.light-mode input:hover,.light-mode button:hover{border-color:rgba(0,204,106,.4);background:rgba(255,255,255,1)}
button{cursor:pointer;font-weight:500;white-space:nowrap;}
button.primary{background:linear-gradient(135deg, rgba(0,255,136,.1), rgba(0,204,106,.1));border:1px solid rgba(0,255,136,.3);color:var(--brand)}
.light-mode button.primary{background:linear-gradient(135deg, rgba(0,204,106,.1), rgba(0,255,136,.1));border:1px solid var(--brand2);color:var(--brand2);}
button.primary:hover{box-shadow:0 0 15px rgba(0,255,136,.3),inset 0 0 15px rgba(0,255,136,.1);transform:translateY(-1px)}
button.premium-btn{background:linear-gradient(135deg, var(--gold), #ffed4e);border:none;color:#000;font-weight:600;letter-spacing:.5px;box-shadow:0 0 15px rgba(255,215,0,.3);padding:.5rem 1rem;}
button.premium-btn:hover{transform:translateY(-2px);box-shadow:0 0 25px rgba(255,215,0,.5)}

/* Theme toggle button */
.theme-toggle{
  background:transparent;border:1px solid var(--line);padding:.4rem;border-radius:8px;
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  color:var(--ink2);font-size:1.1rem;transition:all .3s;
}
.theme-toggle:hover{background:rgba(0,255,136,.1);border-color:var(--brand);color:var(--brand);}
.light-mode .theme-toggle:hover{background:rgba(0,204,106,.1);border-color:var(--brand2);}

/* Market select locks */
.market-select-wrapper{position:relative;display:inline-block}
#symbol optgroup{color:var(--ink);font-weight:600}
#symbol option.locked{color:rgba(148,168,196,.5)}
#symbol option.locked::after{content:" 🔒"}

/* Social Proof Popup */
#social-proof-popup {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: linear-gradient(135deg, rgba(10,15,26,0.98), rgba(15,26,40,0.95));
  border: 1px solid rgba(0,255,136,0.3);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7), 0 0 20px rgba(0,255,136,0.2);
  backdrop-filter: blur(15px);
  z-index: 9999;
  min-width: 320px;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: slideInLeft 0.4s ease-out;
  transition: all 0.3s ease;
}

.light-mode #social-proof-popup {
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,249,250,0.95));
  border-color: rgba(0,204,106,0.3);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15), 0 0 20px rgba(0,204,106,0.2);
}

#social-proof-popup.show {
  display: flex;
}

#social-proof-popup.hide {
  animation: slideOutLeft 0.4s ease-out forwards;
}

.proof-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

.proof-content {
  flex: 1;
  min-width: 0;
}

.proof-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}

.proof-action {
  color: var(--ink2);
  font-size: 0.85rem;
  line-height: 1.3;
}

.proof-action strong {
  color: var(--brand);
  font-weight: 600;
}

.proof-close {
  background: transparent;
  border: none;
  color: var(--ink2);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.proof-close:hover {
  background: rgba(255,90,124,0.2);
  color: var(--red);
}

@keyframes slideInLeft {
  from {
    transform: translateX(-400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-400px);
    opacity: 0;
  }
}

/* Subscription Modal */
.subscription-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.9);backdrop-filter:blur(10px);z-index:5000}
.light-mode .subscription-modal{background:rgba(255,255,255,.95);}
.subscription-card{width:min(500px,92vw);background:linear-gradient(135deg,#0a0f1a,#0f1a28);border:1px solid rgba(255,215,0,.3);border-radius:20px;padding:2.5rem;box-shadow:0 30px 70px rgba(0,0,0,.8),0 0 40px rgba(255,215,0,.2)}
.light-mode .subscription-card{
  background:linear-gradient(135deg,#ffffff,#f8f9fa);
  border:1px solid rgba(255,215,0,.4);
  box-shadow:0 30px 70px rgba(0,0,0,.15),0 0 40px rgba(255,215,0,.3);
}
.subscription-header{text-align:center;margin-bottom:2rem}
.subscription-header h2{
  font-family:'Orbitron',sans-serif;font-size:2rem;font-weight:700;
  background:linear-gradient(135deg, var(--gold), #ffed4e);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem
}
.price-display{font-size:3rem;font-weight:900;color:var(--gold);text-shadow:0 0 20px rgba(255,215,0,.5)}
.price-period{font-size:1.2rem;color:var(--ink2);font-weight:400}
.features-list{list-style:none;margin:2rem 0}
.features-list li{padding:.8rem 0;border-bottom:1px solid rgba(22,34,54,.5);display:flex;align-items:center;gap:.8rem}
.light-mode .features-list li{border-bottom:1px solid var(--line);}
.features-list li::before{content:"✔";color:var(--brand);font-weight:bold;font-size:1.2rem}
.stripe-button{width:100%;padding:1.2rem;background:linear-gradient(135deg, var(--gold), #ffed4e);border:none;border-radius:12px;color:#000;font-weight:700;font-size:1.1rem;letter-spacing:.5px;cursor:pointer;text-transform:uppercase;transition:all .3s;box-shadow:0 10px 30px rgba(255,215,0,.3)}
.stripe-button:hover{transform:translateY(-2px);box-shadow:0 15px 40px rgba(255,215,0,.5)}
.modal-close{position:absolute;right:1.5rem;top:1.5rem;background:transparent;border:none;color:var(--ink2);cursor:pointer;font-size:1.5rem;width:32px;height:32px;border-radius:8px;transition:all .3s;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:rgba(255,90,124,.2);color:var(--red)}

/* Windows */
.window{background:var(--card);border:1px solid rgba(0,255,136,.1);position:absolute;width:700px;height:450px;top:100px;left:100px;border-radius:16px;box-shadow:0 15px 40px rgba(0,0,0,.6),0 0 30px rgba(0,255,136,.1);overflow:hidden;display:flex;flex-direction:column;backdrop-filter:blur(10px)}
.light-mode .window{
  background:rgba(255,255,255,.98);
  border:1px solid rgba(0,204,106,.2);
  box-shadow:0 15px 40px rgba(0,0,0,.1),0 0 30px rgba(0,204,106,.15);
}
.window-header{background:linear-gradient(135deg,rgba(10,15,26,.98),rgba(15,26,40,.95));padding:.7rem 1rem;display:flex;align-items:center;gap:.7rem;border-bottom:1px solid rgba(0,255,136,.1);cursor:move}
.light-mode .window-header{
  background:linear-gradient(135deg,rgba(248,249,250,.98),rgba(255,255,255,.95));
  border-bottom:1px solid rgba(0,204,106,.2);
}
.window-title{font-weight:600;font-size:.95rem;color:var(--ink);letter-spacing:.5px;margin-right:.5rem;text-transform:uppercase}
.header-spacer{flex:1}
.window-controls{display:flex;gap:.4rem}
.window-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--ink2);cursor:pointer;padding:.3rem .6rem;border-radius:8px;font-size:.8rem;transition:all .3s;min-width:28px;display:flex;align-items:center;justify-content:center}
.light-mode .window-btn{
  background:rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.1);
}
.window-btn:hover{background:rgba(0,255,136,.1);color:var(--brand);border-color:rgba(0,255,136,.3);transform:translateY(-1px)}
.window-btn.close:hover{background:rgba(255,58,102,.2);border-color:var(--red);color:var(--red)}
.window-btn.latest{background:linear-gradient(135deg, rgba(0,255,136,.1), rgba(0,204,106,.1));border-color:rgba(0,255,136,.3);padding:.3rem .8rem;color:var(--brand)}
.zoom-btn{user-select:none;font-weight:bold}
.window-content{flex:1;position:relative;overflow:hidden;background:linear-gradient(180deg, rgba(5,8,16,.5), rgba(8,12,20,.8))}
.light-mode .window-content{
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(248,249,250,.8));
}
.chart-canvas{position:absolute;inset:0;display:block;cursor:crosshair;width:100%;height:100%}
.embed-iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Main Content */
#main-content{display:none;position:relative;height:calc(100vh - var(--topbar-h));background:linear-gradient(135deg, #050810 0%, #0a0f1a 50%, #050810 100%)}
.light-mode #main-content{background:linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%)}
#windows{position:relative;width:100%;height:100%}
#dock{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;gap:.6rem;background:rgba(10,15,26,.95);padding:.7rem;border-radius:14px;border:1px solid rgba(0,255,136,.2);backdrop-filter:blur(15px);box-shadow:0 15px 40px rgba(0,0,0,.7),0 0 30px rgba(0,255,136,.1);z-index:10;min-height:45px;align-items:center}
.light-mode #dock{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(0,204,106,.3);
  box-shadow:0 15px 40px rgba(0,0,0,.1),0 0 30px rgba(0,204,106,.15);
}
#dock:empty{display:none}
.dock-item{background:linear-gradient(135deg,rgba(0,255,136,.05),rgba(0,255,136,.02));border:1px solid rgba(0,255,136,.2);color:var(--ink);padding:.6rem 1.2rem;border-radius:10px;cursor:pointer;font-size:.9rem;transition:all .3s;white-space:nowrap;font-weight:500}
.light-mode .dock-item{
  background:linear-gradient(135deg,rgba(0,204,106,.08),rgba(0,204,106,.04));
  border:1px solid rgba(0,204,106,.3);
}
.dock-item:hover{background:linear-gradient(135deg,rgba(0,255,136,.15),rgba(0,255,136,.08));border-color:var(--brand);transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,255,136,.3)}

/* ========= RANGE OVERLAY (MT5 only) ========= */
.rb-toggle{
  position:absolute; top:8px; right:8px; z-index:3;
  background:linear-gradient(135deg,#0f1a14,#162520); border:1px solid #1e3c2a; color:#cfead8;
  padding:.35rem .6rem; border-radius:.5rem; font-size:.8rem;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.rb-toggle:hover{box-shadow:0 0 0 2px #1e3c2a,0 8px 22px rgba(35,224,106,.18)}

/* Overlay container: allow handles/panel to show; canvas keeps pointer-events:none */
.rb-overlay{
  position:absolute; /* left/top/width/height set via JS */
  z-index:2; display:none; pointer-events:auto;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px; overflow:visible; box-shadow:0 14px 28px rgba(0,0,0,.35);
  background:transparent;
}
.rb-overlay .rb-canvas{
  position:absolute; inset:0; display:block; width:100%; height:100%;
  opacity:1; pointer-events:none; /* MT5 still clickable */
}

/* Drag handle tab */
.rb-tab{
  position:absolute; top:0; left:50%; transform:translate(-50%, -100%);
  background:linear-gradient(135deg,#0f1a14,#162520); border:1px solid #1e3c2a;
  color:#cfead8; padding:.25rem .6rem; border-bottom-left-radius:.5rem; border-bottom-right-radius:.5rem;
  font-size:.8rem; z-index:6; pointer-events:auto; cursor:grab;
  box-shadow:0 6px 18px rgba(0,0,0,.35); user-select:none;
}
.rb-tab:active{ cursor:grabbing }

/* Top-left controls: gear + zoom */
.rb-ctl{ position:absolute; top:6px; left:6px; z-index:7; display:flex; gap:6px; }
.rb-btn{
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  background:#0f1a14; border:1px solid #1e3c2a; color:#cfead8; cursor:pointer;
  border-radius:4px; box-shadow:0 8px 18px rgba(0,0,0,.35); font-size:14px; line-height:1; user-select:none;
}
.rb-btn:hover{box-shadow:0 0 0 2px #1e3c2a,0 8px 22px rgba(35,224,106,.18)}

/* Compact, scrollable settings panel */
.rb-panel{
  position:absolute; top:42px; left:6px; z-index:7; display:none;
  background:#0b1422; border:1px solid rgba(255,255,255,.15); border-radius:10px; padding:.6rem;
  box-shadow:0 20px 40px rgba(0,0,0,.55); width:auto; max-width:92vw;
  max-height: min(65vh, calc(100% - 14px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.rb-panel .grid{display:grid; grid-template-columns: minmax(180px,1fr) minmax(180px,1fr); gap:.6rem .8rem}
.rb-panel .field{display:flex; flex-direction:column; gap:.25rem}
.rb-panel label{font-size:.72rem; color:#9fb1c9}
.rb-panel input, .rb-panel select, .rb-panel button{
  padding:.35rem .5rem; font-size:.8rem; background:#0e1624; color:#e8f1ff;
  border:1px solid rgba(255,255,255,.15); border-radius:6px;
}
.rb-panel .rb-sym{ border-radius:0; text-transform:uppercase }
.rb-panel .hint{font-size:.68rem; color:#7f94b2; line-height:1.25}
.rb-panel .row-btns{display:flex; gap:.5rem; margin-top:.2rem; flex-wrap:wrap}
.rb-panel .full{grid-column: 1 / -1}

/* Resizers (corners) */
.rb-resize{
  position:absolute; width:14px; height:14px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); border-radius:3px;
  z-index:7; pointer-events:auto; cursor:nwse-resize;
}
.rb-resize.ne{ top:-7px; right:-7px; cursor:nesw-resize }
.rb-resize.nw{ top:-7px; left:-7px;  cursor:nwse-resize }
.rb-resize.se{ bottom:-7px; right:-7px; cursor:nwse-resize }
.rb-resize.sw{ bottom:-7px; left:-7px;  cursor:nesw-resize }

/* Align-mode badge */
.rb-align-badge{
  position:absolute; right:10px; bottom:10px; z-index:7; display:none;
  background:rgba(255,255,255,.06); border:1px dashed #3a5d48; color:#cfead8;
  padding:.25rem .5rem; border-radius:.4rem; font-size:.75rem;
}

/* Range Overlay button */
.rb-toggle{position:absolute;top:10px;right:10px;z-index:3;background:linear-gradient(135deg, rgba(0,255,136,.1), rgba(0,204,106,.1));border:1px solid rgba(0,255,136,.3);color:var(--brand);padding:.4rem .8rem;border-radius:8px;font-size:.85rem;font-weight:500;box-shadow:0 8px 20px rgba(0,0,0,.4);letter-spacing:.3px}
.rb-toggle:hover{box-shadow:0 0 0 2px rgba(0,255,136,.3),0 10px 25px rgba(0,255,136,.2)}

/* Config Modal */
#modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:linear-gradient(135deg,#0a0f1a,#0f1a28);border:1px solid rgba(0,255,136,0.2);
  padding:2rem;z-index:1000;border-radius:16px;box-shadow:0 25px 50px rgba(0,0,0,0.7),0 0 30px rgba(0,255,136,0.1);display:none;}
.light-mode #modal{
  background:linear-gradient(135deg,#ffffff,#f8f9fa);
  border:1px solid rgba(0,204,106,0.3);
  box-shadow:0 25px 50px rgba(0,0,0,0.15),0 0 30px rgba(0,204,106,0.2);
}
#modal h3{margin-bottom:1.5rem;font-family:'Orbitron',sans-serif;color:var(--brand);}
#modal label{display:block;margin-bottom:.5rem;color:var(--ink2);font-size:.9rem;}
#modal input{width:100%;margin-bottom:1rem;}
#modal .modal-explain{
  margin: -0.25rem 0 1rem 0;
  padding: .6rem .75rem;
  font-size: .9rem;
  line-height: 1.35;
  color: var(--ink2);
  background: rgba(0,255,136,.06);
  border: 1px solid rgba(0,255,136,.25);
  border-radius: 10px;
}
.light-mode #modal .modal-explain{
  color: var(--ink2);
  background: rgba(0,204,106,.08);
  border-color: rgba(0,204,106,.30);
}

#close_modal{position:absolute;right:1rem;top:1rem;background:transparent;border:none;color:var(--ink2);cursor:pointer;font-size:1.5rem;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;}

/* MT5 and Abbado Modals */
#mt5-modal, #abbado-modal {
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.9);backdrop-filter:blur(10px);z-index:5000;
}
.light-mode #mt5-modal, .light-mode #abbado-modal {
  background:rgba(255,255,255,.95);
}

/* Indicator Panel */
.indicator-panel {
  position:fixed;
  top:calc(var(--topbar-h) + 20px);
  right:20px;
  width:280px;
  max-height:70vh;
  background:rgba(10,15,26,0.95);
  border:1px solid rgba(0,255,136,0.2);
  border-radius:16px;
  box-shadow:0 15px 40px rgba(0,0,0,0.7),0 0 30px rgba(0,255,136,0.1);
  backdrop-filter:blur(15px);
  z-index:90;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform 0.3s ease;
}
.light-mode .indicator-panel {
  background:rgba(255,255,255,0.98);
  border:1px solid rgba(0,204,106,0.3);
  box-shadow:0 15px 40px rgba(0,0,0,0.1),0 0 30px rgba(0,204,106,0.15);
}
.indicator-panel.collapsed {
  transform:translateX(calc(100% + 20px));
}
.indicator-toggle {
  position:fixed;
  top:calc(var(--topbar-h) + 20px);
  right:20px;
  width:48px;
  height:48px;
  background:linear-gradient(135deg, rgba(0,255,136,.15), rgba(0,204,106,.1));
  border:1px solid rgba(0,255,136,0.3);
  border-radius:12px;
  color:var(--brand);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:91;
  transition:all 0.3s;
  font-size:1.3rem;
}
/* Force text label on the indicator toggle */
#indicator-toggle .menu-icon { display: none !important; }
#indicator-toggle .badge-label { display: inline !important; }

.indicator-toggle:hover {
  background:linear-gradient(135deg, rgba(0,255,136,.25), rgba(0,204,106,.2));
  transform:scale(1.05);
  box-shadow:0 8px 20px rgba(0,255,136,0.3);
}
.indicator-header {
  padding:1rem;
  border-bottom:1px solid rgba(0,255,136,0.1);
  background:linear-gradient(135deg,rgba(10,15,26,.98),rgba(15,26,40,.95));
}
.light-mode .indicator-header {
  background:linear-gradient(135deg,rgba(248,249,250,.98),rgba(255,255,255,.95));
  border-bottom:1px solid rgba(0,204,106,0.2);
}
.indicator-header h3 {
  margin:0;
  font-family:'Orbitron',sans-serif;
  font-size:1.1rem;
  color:var(--brand);
  letter-spacing:0.5px;
}
.indicator-search {
  margin-top:0.8rem;
  position:relative;
}
.indicator-search input {
  width:100%;
  padding:0.6rem 2.5rem 0.6rem 0.8rem;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(0,255,136,0.1);
  border-radius:8px;
  color:var(--ink);
  font-size:0.85rem;
}
.light-mode .indicator-search input {
  background:rgba(248,249,250,0.8);
  border:1px solid var(--line);
}
.indicator-search-icon {
  position:absolute;
  right:0.8rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--ink2);
  pointer-events:none;
}
.indicator-categories {
  flex:1;
  overflow-y:auto;
  padding:0.5rem;
}
.indicator-category {
  margin-bottom:0.5rem;
}
.category-title {
  padding:0.5rem 0.8rem;
  color:var(--ink2);
  font-size:0.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.indicator-item {
  padding:0.8rem;
  margin:0.3rem;
  background:rgba(0,255,136,0.05);
  border:1px solid rgba(0,255,136,0.1);
  border-radius:10px;
  cursor:grab;
  transition:all 0.3s;
  display:flex;
  align-items:center;
  gap:0.8rem;
}
.light-mode .indicator-item {
  background:rgba(0,204,106,0.08);
  border:1px solid rgba(0,204,106,0.2);
}
.indicator-item:hover {
  background:rgba(0,255,136,0.1);
  border-color:var(--brand);
  transform:translateX(-5px);
  box-shadow:0 4px 12px rgba(0,255,136,0.2);
}
.indicator-item.dragging {
  opacity:0.5;
  cursor:grabbing;
}
.indicator-icon {
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  border-radius:6px;
  color:#000;
  font-weight:bold;
  font-size:0.7rem;
}
.indicator-name {
  flex:1;
  font-weight:500;
  font-size:0.9rem;
  color:var(--ink);
}
.indicator-badge {
  padding:0.2rem 0.5rem;
  background:rgba(255,215,0,0.2);
  color:var(--gold);
  border-radius:4px;
  font-size:0.65rem;
  font-weight:600;
  text-transform:uppercase;
}
.drop-zone-overlay {
  position:absolute;
  inset:0;
  background:rgba(0,255,136,0.1);
  border:2px dashed var(--brand);
  border-radius:12px;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  pointer-events:none;
}
.drop-zone-overlay.active {
  display:flex;
}
.drop-zone-text {
  padding:1rem 2rem;
  background:rgba(0,255,136,0.2);
  border-radius:8px;
  color:var(--brand);
  font-weight:600;
  font-size:1.1rem;
  text-transform:uppercase;
  letter-spacing:1px;
}

/* Active indicators on chart */
.chart-indicators {
  position:absolute;
  top:10px;
  left:10px;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  z-index:5;
}
.active-indicator {
  padding:0.4rem 0.8rem;
  background:rgba(0,255,136,0.1);
  border:1px solid rgba(0,255,136,0.3);
  border-radius:8px;
  color:var(--brand);
  font-size:0.75rem;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.active-indicator .remove-indicator {
  cursor:pointer;
  color:var(--red);
  font-weight:bold;
  margin-left:0.5rem;
}
.active-indicator .remove-indicator:hover {
  transform:scale(1.2);
}

/* Oscillator panel within window */
.oscillator-panel {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:120px;
  background:linear-gradient(180deg, rgba(5,8,16,.5), rgba(8,12,20,.8));
  border-top:1px solid rgba(0,255,136,0.2);
  overflow:hidden;
}
.light-mode .oscillator-panel {
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(248,249,250,.8));
  border-top:1px solid rgba(0,204,106,0.2);
}
.oscillator-canvas {
  width:100%;
  height:100%;
}
.oscillator-header {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:24px;
  background:rgba(0,0,0,0.2);
  display:flex;
  align-items:center;
  padding:0 10px;
  font-size:0.75rem;
  color:var(--ink2);
  border-bottom:1px solid rgba(0,255,136,0.1);
}
.oscillator-title {
  flex:1;
  font-weight:600;
  color:var(--brand);
}
.oscillator-settings {
  cursor:pointer;
  padding:2px 6px;
  background:rgba(0,255,136,0.1);
  border:1px solid rgba(0,255,136,0.2);
  border-radius:4px;
  font-size:0.7rem;
  margin-right:5px;
}
.oscillator-settings:hover {
  background:rgba(0,255,136,0.2);
}
.oscillator-close {
  cursor:pointer;
  color:var(--red);
  font-weight:bold;
}

/* Settings popup */
.indicator-settings-popup {
  position:absolute;
  top:30px;
  left:10px;
  background:rgba(10,15,26,0.98);
  border:1px solid rgba(0,255,136,0.3);
  border-radius:8px;
  padding:1rem;
  z-index:1000;
  box-shadow:0 10px 30px rgba(0,0,0,0.7);
  min-width:200px;
  display:none;
}
.light-mode .indicator-settings-popup {
  background:rgba(255,255,255,0.98);
  border:1px solid rgba(0,204,106,0.3);
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
}
.settings-row {
  margin-bottom:0.8rem;
}
.settings-label {
  display:block;
  font-size:0.75rem;
  color:var(--ink2);
  margin-bottom:0.3rem;
}
.settings-input {
  width:100%;
  padding:0.4rem;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(0,255,136,0.2);
  border-radius:4px;
  color:var(--ink);
  font-size:0.8rem;
}
.settings-apply {
  width:100%;
  padding:0.5rem;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  border:none;
  border-radius:6px;
  color:#000;
  font-weight:600;
  cursor:pointer;
  font-size:0.8rem;
}

/* NEW MENU ADDITIONS */
.menu-btn {
  background: transparent;
  border: 1px solid rgba(0,255,136,0.2);
  color: var(--ink);
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  font-family: inherit;
  transition: all 0.3s;
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
}

.menu-btn:hover {
  border-color: rgba(0,255,136,0.4);
  background: rgba(0,255,136,0.05);
  color: var(--brand);
}

.light-mode .menu-btn {
  background: transparent;
  border: 1px solid var(--line);
}

.light-mode .menu-btn:hover {
  border-color: rgba(0,204,106,0.4);
  background: rgba(0,204,106,0.08);
}

/* Live Sessions Modal */
#live-sessions-modal .sessions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.session-card {
  background: linear-gradient(135deg, rgba(0,255,136,0.05), rgba(0,255,136,0.02));
  border: 1px solid rgba(0,255,136,0.2);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s;
}

.light-mode .session-card {
  background: linear-gradient(135deg, rgba(0,204,106,0.08), rgba(0,204,106,0.04));
  border-color: rgba(0,204,106,0.25);
}

.session-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0,255,136,0.2);
  border-color: var(--brand);
}

.platform-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.platform-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  color: var(--brand);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.platform-desc {
  color: var(--ink2);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.watch-btn {
  width: 100%;
  padding: 0.8rem;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border: none;
  border-radius: 10px;
  color: #000;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.watch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(0,255,136,0.5);
  background: transparent !important;
  border: 1px solid var(--brand) !important;
  color: var(--brand) !important;
}

/* FORCE GREEN TEXT ON HOVER */
#live-sessions-modal .watch-btn:hover {
  color: #00ff88 !important;
  background: transparent !important;
  border: 2px solid #00ff88 !important;
  box-shadow: 0 0 20px rgba(0,255,136,0.5) !important;
}

/* IMPROVED MANAGE MODAL */
.subs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:1.5rem}
@media (max-width:900px){.subs-grid{grid-template-columns:1fr}}

.sub-card{
  background:linear-gradient(135deg, rgba(0,255,136,.05), rgba(0,255,136,.02));
  border:1px solid rgba(0,255,136,.2);border-radius:16px;padding:1.5rem;
  display:flex;flex-direction:column;gap:1rem;
}
.light-mode .sub-card{
  background:linear-gradient(135deg, rgba(0,204,106,.08), rgba(0,204,106,.04));
  border-color:rgba(0,204,106,.25);
}

.sub-card h4{
  font-family:'Orbitron',sans-serif;color:var(--brand);
  font-size:1.2rem;margin:0;letter-spacing:0.5px;
}

.price-tag{
  font-size:2rem;font-weight:900;color:var(--brand);line-height:1;
}
.price-tag span{font-size:0.9rem;font-weight:400;color:var(--ink2);margin-left:0.3rem}

.sub-card .desc{color:var(--ink2);font-size:0.95rem;line-height:1.5;flex:1}

.status-row{
  display:flex;gap:0.5rem;align-items:center;padding:0.5rem 0;
  border-top:1px solid rgba(0,255,136,0.1);
}
.status-label{font-size:0.85rem;color:var(--ink2)}
.status-value{
  font-weight:600;font-size:0.85rem;padding:0.25rem 0.6rem;
  border-radius:6px;text-transform:uppercase;letter-spacing:0.5px;
}
.status-value.active{background:rgba(0,255,136,0.2);color:var(--brand)}
.status-value.inactive{background:rgba(148,168,196,0.1);color:var(--ink2)}

.sub-btn{
  width:100%;padding:0.9rem;border-radius:10px;border:none;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#000;font-weight:700;font-size:0.95rem;
  cursor:pointer;transition:all 0.3s;text-transform:uppercase;
  letter-spacing:0.5px;
}
.sub-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,255,136,0.4)}

.selection-summary{
  display:flex;gap:1rem;align-items:center;padding:0.6rem 1rem;
  background:rgba(0,255,136,0.1);border:1px solid rgba(0,255,136,0.3);
  border-radius:10px;
}
.summary-count{
  font-size:1.5rem;font-weight:900;color:var(--brand);
}
.summary-price{
  font-size:0.9rem;color:var(--ink2);font-weight:600;
}

.market-selector{
  display:flex;flex-direction:column;gap:1rem;
}

.selector-controls{display:flex;flex-direction:column;gap:0.8rem}

.market-search{
  width:100%;padding:0.8rem 1rem;background:rgba(0,0,0,0.2);
  border:1px solid rgba(0,255,136,0.2);border-radius:10px;
  color:var(--ink);font-size:0.95rem;
}
.light-mode .market-search{background:rgba(248,249,250,0.8);border-color:var(--line)}
.market-search:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,255,136,0.1);
}

.category-filters{display:flex;gap:0.5rem;flex-wrap:wrap}
.cat-filter{
  padding:0.5rem 1rem;background:rgba(0,255,136,0.05);
  border:1px solid rgba(0,255,136,0.2);border-radius:8px;
  color:var(--ink2);font-size:0.85rem;font-weight:500;
  cursor:pointer;transition:all 0.3s;text-transform:capitalize;
}
.cat-filter:hover{background:rgba(0,255,136,0.1);color:var(--brand)}
.cat-filter.active{
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  border-color:var(--brand);color:#000;font-weight:700;
}

.market-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:0.6rem;max-height:400px;overflow-y:auto;
  padding:0.5rem;background:rgba(0,0,0,0.1);border-radius:10px;
}
.light-mode .market-grid{background:rgba(248,249,250,0.5)}

.market-item{
  display:flex;align-items:center;gap:0.6rem;padding:0.7rem 0.9rem;
  background:rgba(0,255,136,0.03);border:1px solid rgba(0,255,136,0.15);
  border-radius:8px;cursor:pointer;transition:all 0.2s;
}
.market-item:hover{
  background:rgba(0,255,136,0.08);border-color:rgba(0,255,136,0.3);
  transform:translateX(-2px);
}
.market-item.selected{
  background:rgba(0,255,136,0.15);border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(0,255,136,0.2);
}
.market-item.unlocked{
  background:rgba(0,255,136,0.08);border-color:rgba(0,255,136,0.25);
  cursor:default;opacity:0.7;
}
.market-item.unlocked:hover{transform:none}

.market-item input[type="checkbox"]{
  width:18px;height:18px;margin:0;cursor:pointer;
  accent-color:var(--brand);
}
.market-item.unlocked input{cursor:not-allowed}

.market-symbol{
  flex:1;font-weight:600;font-size:0.9rem;color:var(--ink);
}

.unlocked-badge{
  font-size:0.7rem;color:var(--brand);font-weight:600;
  padding:0.2rem 0.5rem;background:rgba(0,255,136,0.15);
  border-radius:4px;
}
.price-badge{
  font-size:0.75rem;color:var(--ink2);font-weight:600;
}

.selector-actions{
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding-top:0.5rem;border-top:1px solid rgba(0,255,136,0.1);
}

.bulk-actions{display:flex;gap:0.5rem}
.action-btn{
  padding:0.6rem 1rem;background:rgba(0,255,136,0.05);
  border:1px solid rgba(0,255,136,0.2);border-radius:8px;
  color:var(--ink);font-size:0.85rem;font-weight:500;
  cursor:pointer;transition:all 0.3s;
}
.action-btn:hover{
  background:rgba(0,255,136,0.1);border-color:var(--brand);
  color:var(--brand);
}

#manage-sub-modal .subscription-card{width:min(1200px,95vw);max-height:90vh;overflow-y:auto}
#manage-sub-modal .subscription-header h2{font-size:1.6rem}

/* OMEGA minimal styles (append-only) */
.omega-label{position:absolute;right:8px;bottom:6px;padding:.15rem .4rem;
  font-size:.7rem;border:1px solid rgba(0,255,136,.25);border-radius:6px;
  color:var(--brand);background:rgba(0,255,136,.06);display:none;z-index:6}
.oscillator-panel .hover-readout{position:absolute;right:8px;top:26px;
  font-size:.75rem;color:var(--ink2);background:rgba(0,0,0,.25);
  padding:.15rem .35rem;border-radius:6px;border:1px solid rgba(255,255,255,.15)}


/* Responsive */
@media (max-width: 768px) {
  .topbar{padding:0 1rem}
  .logo{font-size:1.4rem}
  .user-info{flex-direction:column;gap:.5rem;padding:.5rem}
  .auth-card{padding:2rem 1.5rem}
  .auth-logo h1{font-size:2rem}
  .indicator-panel{width:240px;right:10px;top:calc(var(--topbar-h) + 10px)}
  .indicator-toggle{right:10px;top:calc(var(--topbar-h) + 10px)}
  #social-proof-popup {
    left: 10px;
    right: 10px;
    min-width: unset;
    max-width: unset;
    bottom: 10px;
  }
  #market-selector ul {
    flex-direction: column;
  }
  .modal-content {
    width: 90%;
  }
}
/* Additional Subscription Modal Styles */
.status-value.active {
  background: rgba(0,255,136,0.2) !important;
  color: var(--brand) !important;
}

.status-value.inactive {
  background: rgba(148,168,196,0.1) !important;
  color: var(--ink2) !important;
}

.sub-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,215,0,0.4);
}

.cat-filter.active {
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  border-color: var(--brand) !important;
  color: #000 !important;
  font-weight: 700;
}

.market-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: rgba(0,255,136,0.03);
  border: 1px solid rgba(0,255,136,0.15);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.market-item:hover {
  background: rgba(0,255,136,0.08);
  border-color: rgba(0,255,136,0.3);
  transform: translateX(-2px);
}

.market-item.selected {
  background: rgba(0,255,136,0.15);
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(0,255,136,0.2);
}

.market-item.unlocked {
  background: rgba(0,255,136,0.08);
  border-color: rgba(0,255,136,0.25);
  cursor: default;
  opacity: 0.7;
}

.market-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--brand);
}

.unlocked-badge {
  font-size: 0.7rem;
  color: var(--brand);
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  background: rgba(0,255,136,0.15);
  border-radius: 4px;
}

.price-badge {
  font-size: 0.75rem;
  color: var(--ink2);
  font-weight: 600;
}
/* ===== IMPROVED MANAGE MODAL ===== */
.subs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:1.5rem}
@media (max-width:900px){.subs-grid{grid-template-columns:1fr}}

.sub-card{
  background:linear-gradient(135deg, rgba(0,255,136,.05), rgba(0,255,136,.02));
  border:1px solid rgba(0,255,136,.2);border-radius:16px;padding:1.5rem;
  display:flex;flex-direction:column;gap:1rem;
}
.light-mode .sub-card{
  background:linear-gradient(135deg, rgba(0,204,106,.08), rgba(0,204,106,.04));
  border-color:rgba(0,204,106,.25);
}

.sub-card h4{
  font-family:'Orbitron',sans-serif;color:var(--brand);
  font-size:1.2rem;margin:0;letter-spacing:0.5px;
}

.price-tag{
  font-size:2rem;font-weight:900;color:var(--brand);line-height:1;
}
.price-tag span{font-size:0.9rem;font-weight:400;color:var(--ink2);margin-left:0.3rem}

.sub-card .desc{color:var(--ink2);font-size:0.95rem;line-height:1.5;flex:1}

.status-row{
  display:flex;gap:0.5rem;align-items:center;padding:0.5rem 0;
  border-top:1px solid rgba(0,255,136,0.1);
}
.status-label{font-size:0.85rem;color:var(--ink2)}
.status-value{
  font-weight:600;font-size:0.85rem;padding:0.25rem 0.6rem;
  border-radius:6px;text-transform:uppercase;letter-spacing:0.5px;
}
.status-value.active{background:rgba(0,255,136,0.2);color:var(--brand)}
.status-value.inactive{background:rgba(148,168,196,0.1);color:var(--ink2)}

.sub-btn{
  width:100%;padding:0.9rem;border-radius:10px;border:none;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#000;font-weight:700;font-size:0.95rem;
  cursor:pointer;transition:all 0.3s;text-transform:uppercase;
  letter-spacing:0.5px;
}
.sub-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,255,136,0.4)}

.selection-summary{
  display:flex;gap:1rem;align-items:center;padding:0.6rem 1rem;
  background:rgba(0,255,136,0.1);border:1px solid rgba(0,255,136,0.3);
  border-radius:10px;
}
.summary-count{
  font-size:1.5rem;font-weight:900;color:var(--brand);
}
.summary-price{
  font-size:0.9rem;color:var(--ink2);font-weight:600;
}

.market-selector{
  display:flex;flex-direction:column;gap:1rem;
}

.selector-controls{display:flex;flex-direction:column;gap:0.8rem}

.market-search{
  width:100%;padding:0.8rem 1rem;background:rgba(0,0,0,0.2);
  border:1px solid rgba(0,255,136,0.2);border-radius:10px;
  color:var(--ink);font-size:0.95rem;
}
.light-mode .market-search{background:rgba(248,249,250,0.8);border-color:var(--line)}
.market-search:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,255,136,0.1);
}

.category-filters{display:flex;gap:0.5rem;flex-wrap:wrap}
.cat-filter{
  padding:0.5rem 1rem;background:rgba(0,255,136,0.05);
  border:1px solid rgba(0,255,136,0.2);border-radius:8px;
  color:var(--ink2);font-size:0.85rem;font-weight:500;
  cursor:pointer;transition:all 0.3s;text-transform:capitalize;
}
.cat-filter:hover{background:rgba(0,255,136,0.1);color:var(--brand)}
.cat-filter.active{
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  border-color:var(--brand);color:#000;font-weight:700;
}

.market-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:0.6rem;max-height:400px;overflow-y:auto;
  padding:0.5rem;background:rgba(0,0,0,0.1);border-radius:10px;
}
.light-mode .market-grid{background:rgba(248,249,250,0.5)}

.market-item{
  display:flex;align-items:center;gap:0.6rem;padding:0.7rem 0.9rem;
  background:rgba(0,255,136,0.03);border:1px solid rgba(0,255,136,0.15);
  border-radius:8px;cursor:pointer;transition:all 0.2s;
}
.market-item:hover{
  background:rgba(0,255,136,0.08);border-color:rgba(0,255,136,0.3);
  transform:translateX(-2px);
}
.market-item.selected{
  background:rgba(0,255,136,0.15);border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(0,255,136,0.2);
}
.market-item.unlocked{
  background:rgba(0,255,136,0.08);border-color:rgba(0,255,136,0.25);
  cursor:default;opacity:0.7;
}
.market-item.unlocked:hover{transform:none}

.market-item input[type="checkbox"]{
  width:18px;height:18px;margin:0;cursor:pointer;
  accent-color:var(--brand);
}
.market-item.unlocked input{cursor:not-allowed}

.market-symbol{
  flex:1;font-weight:600;font-size:0.9rem;color:var(--ink);
}

.unlocked-badge{
  font-size:0.7rem;color:var(--brand);font-weight:600;
  padding:0.2rem 0.5rem;background:rgba(0,255,136,0.15);
  border-radius:4px;
}
.price-badge{
  font-size:0.75rem;color:var(--ink2);font-weight:600;
}

.selector-actions{
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding-top:0.5rem;border-top:1px solid rgba(0,255,136,0.1);
}

.bulk-actions{display:flex;gap:0.5rem}
.action-btn{
  padding:0.6rem 1rem;background:rgba(0,255,136,0.05);
  border:1px solid rgba(0,255,136,0.2);border-radius:8px;
  color:var(--ink);font-size:0.85rem;font-weight:500;
  cursor:pointer;transition:all 0.3s;
}
.action-btn:hover{
  background:rgba(0,255,136,0.1);border-color:var(--brand);
  color:var(--brand);
}
/* Stripe Checkout Modal */
#stripe-checkout-modal .subscription-card {
  position: relative;
}

#stripe-checkout-modal iframe {
  background: var(--bg);
}

/* Notification Toast */
#notification-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background: linear-gradient(135deg, rgba(10,15,26,0.98), rgba(15,26,40,0.95));
  border: 1px solid rgba(0,255,136,0.3);
  border-radius: 16px;
  padding: 2rem;
  min-width: 400px;
  max-width: 500px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.8), 0 0 40px rgba(0,255,136,0.2);
  backdrop-filter: blur(20px);
  animation: toastSlideIn 0.4s ease-out;
  text-align: center;
}

.light-mode #notification-toast {
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,249,250,0.95));
  border-color: rgba(0,204,106,0.4);
  box-shadow: 0 25px 60px rgba(0,0,0,0.15), 0 0 40px rgba(0,204,106,0.3);
}

.toast-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.toast-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 0.5rem;
}

.toast-message {
  color: var(--ink2);
  font-size: 1rem;
  line-height: 1.5;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 768px) {
  #notification-toast {
    min-width: 90vw;
    padding: 1.5rem;
  }
}
/* MOBILE OPTIMIZATIONS - Desktop remains UNTOUCHED */
@media only screen and (max-width: 768px) {
  /* Mobile mode */
  #sidebar {
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    width: 100%;
    flex-direction: row;
    background: linear-gradient(180deg, #0a1628, #050a12);
    z-index: 10000;
    padding: 0 10px;
  }
  
  #sidebar-menu {
    flex-direction: row;
    gap: 15px;
    justify-content: space-around;
    width: 100%;
  }
  
  .sidebar-item {
    font-size: 10px;
    padding: 5px;
  }
  
  #windows {
    height: calc(100vh - 60px) !important;
  }
  
  .window {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 60px) !important;
    border-radius: 0 !important;
  }
  
  .window-header {
    touch-action: none;
    height: 44px; /* Apple HIG standard */
  }
  
  .window-btn {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Hide desktop-only elements */
  .ui-resizable-handle {
    display: none !important;
  }
  
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  /* Tablet mode - Split screen support */
  .window {
    max-width: 50%;
  }
  
  .window-btn {
    min-width: 44px;
    min-height: 44px;
  }
}
/* MOBILE DROPDOWN MENU */
@media only screen and (max-width: 768px) {
  .tb-center {
    position: relative;
    flex-direction: column;
  }
  
  /* Mobile menu button */
  .mobile-menu-toggle {
    display: flex !important;
    background: linear-gradient(135deg, rgba(0,255,136,.1), rgba(0,204,106,.1));
    border: 1px solid rgba(0,255,136,.3);
    color: var(--brand);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    align-items: center;
    gap: 0.5rem;
  }
  
  .mobile-menu-toggle:after {
    content: '▼';
    font-size: 0.7rem;
  }
  
  /* Mobile dropdown container */
  .mobile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10,15,26,0.98);
    border: 1px solid rgba(0,255,136,0.2);
    border-radius: 12px;
    padding: 0.5rem;
    margin-top: 0.5rem;
    min-width: 280px;
    max-width: 90vw;
    z-index: 1000;
    box-shadow: 0 15px 40px rgba(0,0,0,0.7);
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .light-mode .mobile-dropdown {
    background: rgba(255,255,255,0.98);
    border-color: rgba(0,204,106,0.3);
  }
  
  .mobile-dropdown.active {
    display: flex !important;
  }
  
  /* Hide desktop buttons on mobile */
  .tb-center > button:not(.mobile-menu-toggle),
  .tb-center > select {
    display: none !important;
  }
}

/* Desktop - hide mobile menu toggle */
@media only screen and (min-width: 769px) {
  .mobile-menu-toggle,
  .mobile-dropdown {
    display: none !important;
  }
}
@media only screen and (max-width: 768px) {
  .window-btn {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0.2rem 0.4rem !important;
    font-size: 0.7rem !important;
  }
  
  .window-btn.latest {
    padding: 0.2rem 0.6rem !important;
    font-size: 0.65rem !important;
  }
  
  .zoom-btn {
    min-width: 28px !important;
    min-height: 28px !important;
  }
  
  .window-header {
    padding: 0.5rem 0.8rem;
    gap: 0.4rem;
  }
  
  .window-title {
    font-size: 0.85rem;
  }
}
/* Touch resize handle for mobile */
.touch-resize-handle {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, transparent 50%, rgba(0,255,136,0.3) 50%);
  border-bottom-right-radius: 16px;
  cursor: nwse-resize;
  z-index: 10;
}

@media only screen and (max-width: 1024px) {
  .touch-resize-handle {
    display: block !important;
  }
}

/* Visual indicator on hover/touch */
.touch-resize-handle:active {
  background: linear-gradient(135deg, transparent 50%, rgba(0,255,136,0.5) 50%);
}

/* Ensure dropdowns work on all touch devices */
@supports (-webkit-touch-callout: none) {
  select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1em;
    padding-right: 2.5rem;
  }
}
/* Critical Mobile Touch Resize Styles */
@media (pointer: coarse) {
  .touch-resize-handle {
    display: block !important;
    touch-action: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    pointer-events: auto !important;
  }
  
  .window.resizing {
    opacity: 0.95;
    transition: none !important;
  }
  
  .window.resizing .chart-canvas {
    pointer-events: none !important;
  }
  
  .window {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
/* CRITICAL MOBILE FIXES */
@media only screen and (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.5rem 1rem !important;
  }
  
  .window {
    position: absolute !important; /* Changed from fixed */
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - var(--topbar-h) - 20px) !important;
  }
  
  .touch-resize-handle {
    width: 60px !important;
    height: 60px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  #windows {
    position: relative !important;
    overflow: hidden !important;
    touch-action: none !important;
  }
}
/* === Unified Mobile/Tablet Window Layout === */
@media (max-width: 1024px) {
  :root { --topbar-h: 54px; }

  body { overflow: hidden; }

  header.topbar { position: sticky; top: 0; z-index: 1000; }

  #windows {
    position: relative;            /* IMPORTANT: let jQuery UI compute containment */
    width: 100%;
    height: calc(100vh - var(--topbar-h));
    overflow: hidden;
  }

  .window {
    position: absolute;            /* allows drag within #windows */
    max-width: 95vw;
    max-height: calc(100vh - var(--topbar-h) - 16px);
    border-radius: 14px;
  }

  /* Hide desktop-only center controls; show mobile menu toggle */
  .tb-center > button:not(.mobile-menu-toggle),
  .tb-center > select { display: none !important; }

  .mobile-menu-toggle { display: inline-flex !important; }

  /* Touch resize handle visible on touch viewports */
  .touch-resize-handle { display: block !important; }
}

/* Indicator panel should be accessible on mobile (slide-in, not display:none) */
.indicator-panel { z-index: 11000; }
.indicator-toggle { z-index: 11001; }

/* Collapsed state slides it off screen; toggle removes transform */
@media (max-width: 1024px) {
  .indicator-panel { display: block; transform: translateX(110%); transition: transform .25s ease; }
  .indicator-panel:not(.collapsed) { transform: translateX(0); }
}
/* Mobile indicator panel: slide-in instead of display:none */
#indicator-panel { z-index: 11000; }
#indicator-toggle { z-index: 11001; }

@media (max-width: 1024px) {
  #indicator-panel {
    display: block;                   /* ensure it can show */

    top: var(--topbar-h);
    right: 0;
    width: min(92vw, 420px);

    background: var(--card);
    border-left: 1px solid rgba(0,255,136,0.25);
    transform: translateX(110%);
    transition: transform .25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #indicator-panel:not(.collapsed) {
    transform: translateX(0);
  }
}
/* === MOBILE/TABLET GEOMETRY (single source of truth) === */
@media (max-width: 1024px) {
  :root { --topbar-h: 54px; }

  body {
    position: static;          /* was fixed in old code */
    overflow: hidden;          /* prevent iOS bounce without breaking geometry */
    width: 100%;
  }

  header.topbar { position: sticky; top: 0; z-index: 1000; }

  /* the window stage: must be relative for jQuery UI containment math */
  #windows {
    position: relative;        /* critical */
    top: var(--topbar-h);
    width: 100%;
    height: calc(100vh - var(--topbar-h));
    overflow: hidden;
  }

  /* windows are absolutely positioned inside #windows, not fixed to viewport */
  .window {
    position: absolute;
    max-width: 95vw;
    max-height: calc(100vh - var(--topbar-h) - 16px);
    border-radius: 14px;
  }

  /* optional: show only the mobile toggle in center if you have extra buttons */
  .tb-center > button:not(.mobile-menu-toggle),
  .tb-center > select { display: none !important; }

  .mobile-menu-toggle { display: inline-flex !important; }
}
/* === Touch drag/resize control (do not override elsewhere) === */
.window,
.window-header,
.touch-resize-handle {
  touch-action: none;            /* prevent browser panning from stealing drags */
}

.window-header {
  pointer-events: auto;          /* just in case anything disabled it */
  -webkit-user-select: none;
  user-select: none;
}

.touch-resize-handle {
  pointer-events: auto;          /* must be clickable on iOS */
  z-index: 1001;                 /* above canvas */
}
/* MOBILE-OPTIMIZED MODALS */
@media (max-width: 768px) {
  /* Manage Subscription Modal */
  #manage-sub-modal .subscription-card {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 1.5rem !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  
  #manage-sub-modal .subs-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  #manage-sub-modal .sub-card {
    padding: 1.2rem !important;
  }
  
  #manage-sub-modal .market-grid {
    grid-template-columns: 1fr !important;
    max-height: 300px !important;
  }
  
  #manage-sub-modal .category-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0.5rem !important;
  }
  
  #manage-sub-modal .selector-actions {
    flex-direction: column !important;
    gap: 0.8rem !important;
  }
  
  #manage-sub-modal .bulk-actions {
    width: 100% !important;
    justify-content: space-between !important;
  }
  
  /* Platforms Modal */
  #platforms-modal .subscription-card {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 1.5rem !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  
  #platforms-modal .subscription-card > div {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 !important;
  }
  
  #platforms-modal h3 {
    font-size: 1.1rem !important;
  }
  
  #platforms-modal button {
    width: 100% !important;
    padding: 0.8rem !important;
  }
  
  /* Ensure scrollable content */
  .subscription-modal {
    padding: 1rem !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }
}
/* === FINAL MOBILE/TABLET WINDOWING FIXES (OVERRIDES) === */

/* Lock the window workspace to the visible viewport (accounts for mobile URL bars) */
#windows {
  position: fixed !important;
  top: var(--topbar-h);
  left: 0;
  width: 100vw;
  height: calc(100dvh - var(--topbar-h)) !important; /* dvh = dynamic viewport height */
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
}

/* Windows behave like a proper panel: header stays, content fills the rest */
.window {
  position: absolute !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;

  /* Hard clamps so nothing can spawn off-screen */
  max-width: calc(100vw - 12px) !important;
  max-height: calc(100dvh - var(--topbar-h) - 12px) !important;

  /* Improve GPU compositing on mobile */
  transform: translateZ(0);
  -webkit-tap-highlight-color: transparent;
}
/* Blocks iframe mouse events *only while resizing* */
.iframe-shield {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 3;         /* above the iframe, below the header */
  background: transparent;
}

/* Header stays fixed height, content flexes */
.window-header { flex: 0 0 auto; }
.window-content {
  position: relative !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  max-height: none !important; /* let flex control height */
}

/* Charts & iframes always fill the content area */
.chart-canvas,
.embed-iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* Touch resize handle — visible and always inside the window */
.touch-resize-handle {
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid var(--brand) !important;
  box-shadow: 0 0 10px rgba(0,0,0,0.3) !important;
  z-index: 3 !important;
  touch-action: none !important; /* prevent page scroll while resizing */
}

/* Subscription / Platforms modals fit perfectly on small screens */
@media (max-width: 768px) {
  .subscription-modal {
    padding: 0.5rem !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }
  .subscription-card {
    width: 96vw !important;
    max-width: 96vw !important;
    height: calc(100dvh - var(--topbar-h) - 16px) !important;
    max-height: calc(100dvh - var(--topbar-h) - 16px) !important;
    overflow: auto !important;
  }
  #platforms-modal .subscription-card {
    width: 96vw !important;
    max-width: 96vw !important;
    padding: 1rem !important;
    height: calc(100dvh - var(--topbar-h) - 16px) !important;
  }
  #platforms-modal h3 { font-size: 1.05rem !important; }
  #platforms-modal button {
    width: 100% !important;
    padding: 0.75rem !important;
  }
}
/* === QUANTUM ORIENTATION PORTAL === */
#orientation-portal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: linear-gradient(135deg, #050810 0%, #0a1628 50%, #050810 100%);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(20px);
  animation: portalFadeIn 0.6s ease-out;
}

.orientation-vortex {
  position: relative;
  padding: 3rem;
  text-align: center;
  max-width: 90vw;
}

.orientation-ring {
  position: absolute;
  inset: -50px;
  border: 2px solid var(--brand);
  border-radius: 50%;
  opacity: 0.2;
  animation: ringPulse 3s ease-in-out infinite;
}

.orientation-ring::before,
.orientation-ring::after {
  content: '';
  position: absolute;
  inset: -20px;
  border: 1px solid rgba(0,255,136,0.1);
  border-radius: 50%;
  animation: ringExpand 4s ease-in-out infinite;
}

.orientation-ring::after {
  animation-delay: 2s;
}

.orientation-core {
  position: relative;
  background: radial-gradient(ellipse at center, rgba(0,255,136,0.1) 0%, transparent 70%);
  padding: 2rem;
  border-radius: 20px;
}

.rotate-icon {
  color: var(--brand);
  margin-bottom: 1.5rem;
  animation: rotateHint 4s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(0,255,136,0.6));
}

.rotate-icon svg {
  width: 80px;
  height: 80px;
}

.orientation-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--brand), #00ffff, var(--brand));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
  letter-spacing: 2px;
  animation: gradientShift 3s ease-in-out infinite;
}

.orientation-msg {
  color: var(--ink2);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 320px;
  margin: 0 auto 2rem;
}

.orientation-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, transparent, rgba(0,255,136,0.05));
  border-radius: 50%;
  animation: pulsate 2s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}


@keyframes portalFadeIn {
  from { opacity: 0; transform: scale(1.1); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.2; }
  50% { transform: scale(1.1); opacity: 0.4; }
}

@keyframes ringExpand {
  0% { transform: scale(0.8); opacity: 0; }
  50% { opacity: 0.3; }
  100% { transform: scale(1.3); opacity: 0; }
}

@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-30deg); }
  75% { transform: rotate(30deg); }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes pulsate {
  0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

/* Hide portal in landscape */
@media (orientation: landscape) {
  #orientation-portal {
    display: none !important;
  }
}

/* Show portal only on mobile portrait */
@media (max-width: 768px) and (orientation: portrait) {
  #orientation-portal.active {
    display: flex !important;
  }
}
/* Quantum Payment Loading Animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Enhanced mobile payment button states */
@media (max-width: 768px) {
  .sub-btn:disabled {
    opacity: 0.7;
    cursor: wait !important;
    position: relative;
  }
  
  .sub-btn:disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
}

/* Mobile-optimized notification positioning */
@media (max-width: 768px) {
  #notification-toast {
    top: var(--topbar-h);
    transform: translateX(-50%);
    width: calc(100vw - 20px);
    max-width: none;
    min-width: auto;
  }
}
/* ===== QUANTUM UNIFIED MENU SYSTEM ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: relative;
}

.tb-logo-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.tb-menu-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;      /* space between indicator & hamburger */
  margin-left: auto;
  z-index: 101;
}


.quantum-menu-btn {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(0,255,136,0.3);
  border-radius: 8px;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1.5rem;
}

.quantum-menu-btn:hover {
  background: rgba(0,255,136,0.1);
  box-shadow: 0 0 20px rgba(0,255,136,0.3);
}

.quantum-dropdown {
  position: fixed;
  top: var(--topbar-h);  
  right: 1.5rem;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(320px, 90vw);
  background: var(--card);
  border: 1px solid rgba(0,255,136,0.3);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.7), 0 0 30px rgba(0,255,136,0.1);
  z-index: 10000;
  display: none;
  backdrop-filter: blur(20px);
  overflow-y: auto;
  animation: quantumSlide 0.3s ease-out;
}

.quantum-dropdown.active {
  display: block;
}

@keyframes quantumSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quantum-user-section {
  padding: 1rem;
  border-bottom: 1px solid rgba(0,255,136,0.1);
}

.quantum-user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.quantum-market-section {
  padding: 0.8rem;
  border-bottom: 1px solid rgba(0,255,136,0.1);
}

.quantum-market-select{
  /* reset native look */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 100%;
  padding: 0.85rem 2.75rem 0.85rem 0.9rem; /* room for chevron */
  border-radius: 12px;

  /* glassy base + subtle brand glow */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.05)) padding-box,
    radial-gradient(120% 100% at 20% 0%, rgba(0,255,136,.12), rgba(0,255,136,0) 60%) border-box;
  border: 1px solid rgba(0,255,136,0.28);
  color: var(--ink);

  font: 600 0.95rem/1.2 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: .2px;
  cursor: pointer;

  /* motion + polish */
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 18px rgba(0,0,0,.25), 0 0 0 0 rgba(0,255,136,0);
  transition: box-shadow .18s ease, border-color .18s ease, transform .08s ease;

  /* custom chevron */
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2300ff88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 20px;
}

.quantum-market-select:hover{
  border-color: rgba(0,255,136,.45);
  box-shadow: 0 10px 20px rgba(0,0,0,.28), 0 0 0 2px rgba(0,255,136,.12);
}

.quantum-market-select:focus,
.quantum-market-select:focus-visible{
  outline: none;
  border-color: rgba(0,255,136,.6);
  box-shadow: 0 0 0 3px rgba(0,255,136,.25), 0 10px 24px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

.quantum-market-select:disabled{
  opacity: .7;
  cursor: not-allowed;
  filter: grayscale(.2);
}

/* dropdown list colors where supported */
.quantum-market-select option{
  background: var(--bg2);
  color: var(--ink);
}

/* hide legacy IE arrow */
.quantum-market-select::-ms-expand{ display:none; }
.light-mode .quantum-market-select{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.55)) padding-box,
    radial-gradient(120% 100% at 20% 0%, rgba(0,204,106,.12), rgba(0,204,106,0) 60%) border-box;
  color: #0b1220;
  border-color: rgba(0,204,106,.35);
  box-shadow: 0 8px 18px rgba(0,0,0,.15), 0 0 0 0 rgba(0,204,106,0);
}

.light-mode .quantum-market-select:hover{
  border-color: rgba(0,204,106,.55);
  box-shadow: 0 10px 20px rgba(0,0,0,.18), 0 0 0 2px rgba(0,204,106,.10);
}

.light-mode .quantum-market-select:focus,
.light-mode .quantum-market-select:focus-visible{
  box-shadow: 0 0 0 3px rgba(0,204,106,.22), 0 10px 24px rgba(0,0,0,.22);
}

.light-mode .quantum-market-select option{
  background: #ffffff;
  color: #0b1220;
}


.quantum-menu-items {
  padding: 0.5rem;
}

.quantum-menu-item {
  width: 100%;
  padding: 0.8rem 1rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.95rem;
  text-align: left;
}

.quantum-menu-item:hover {
  background: rgba(0,255,136,0.1);
  transform: translateX(5px);
}

.quantum-menu-item .menu-icon {
  width: 24px;
  font-size: 1.1rem;
}

.quantum-menu-divider {
  height: 1px;
  background: rgba(0,255,136,0.1);
  margin: 0.5rem 0;
}

/* Light mode adjustments */
.light-mode .quantum-dropdown {
  background: var(--card);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 0 30px rgba(0,204,106,0.2);
}

.light-mode .quantum-market-select {
  background: rgba(248,249,250,0.9);
}

/* Responsive - but SAME menu everywhere! */
@media (max-width: 768px) {
  .topbar {
    padding: 0 1rem;
  }
  
  .quantum-dropdown {
    right: 0.5rem;
    width: calc(100vw - 1rem);
  }
}
/* Continue Session Screen */
#continue-session-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: linear-gradient(135deg, #0a0f1a 0%, #050810 50%, #0a0f1a 100%);
  overflow-y: auto;
}

.light-mode #continue-session-screen {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
}

#continue-session-screen .auth-card {
  animation: fadeInUp 0.8s ease-out;
}

#continue-session-btn {
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  box-shadow: 0 10px 30px rgba(0,255,136,0.3);
  transition: all 0.3s;
}

#continue-session-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(0,255,136,0.5);
}

#use-different-account:hover {
  color: var(--brand) !important;
  text-decoration: underline !important;
}
/* ===== Header Collapse: definitive overrides ===== */

/* Make the tab look crisp and clickable */
#topbar-tab{
  --tab-w: 44px;
  --tab-h: 24px;
  position: fixed;
  left: 12px;
  top: calc(var(--topbar-h) - 1px);
  width: var(--tab-w);
  height: var(--tab-h);
  line-height: var(--tab-h);
  font-size: 35px;                 /* bigger glyph */
  text-align: center;
  border-radius: 0 0 10px 10px;
  border: 1px solid rgba(0,255,136,.35);
  border-top: none;
  background: linear-gradient(180deg, rgba(0,255,136,.12), rgba(0,255,136,.06));
  color: var(--ink);
  cursor: pointer;
  z-index: 10001;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .2s ease, top .2s ease, opacity .2s ease, background .2s ease;
}
#topbar-tab:hover{ background: linear-gradient(180deg, rgba(0,255,136,.18), rgba(0,255,136,.10)); }

/* Animate the header itself and ensure no visual leftovers */
header.topbar{
  transition: transform .25s ease, height .25s ease, opacity .2s ease, padding .2s ease, box-shadow .2s ease, border .2s ease;
}

/* Collapsed state: remove every pixel of header, fully off-screen, no clicks */
body.topbar-hidden header.topbar{
  transform: translateY(-100%) !important;
  height: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Keep the tab reachable when hidden, flip the chevron */
body.topbar-hidden #topbar-tab{
  top: 8px !important;
  transform: rotate(180deg);
}

/* Workspace must truly fill the screen when header is hidden */
body.topbar-hidden #windows{
  top: 0 !important;
  height: 100vh !important;
}
/* ===== Admin modal ===== */
.admin-card { gap: 12px; }
.admin-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; padding:6px 12px; }
@media (max-width:900px){ .admin-stats{ grid-template-columns:1fr 1fr; } }
.admin-stat { border:1px solid rgba(0,255,136,.2); border-radius:12px; padding:10px; background:linear-gradient(180deg, rgba(0,255,136,.06), rgba(0,255,136,.03)); }
.admin-stat .k { color:var(--ink2); font-size:.85rem; }
.admin-stat .v { font-size:1.2rem; font-weight:800; margin-top:6px; }

.admin-controls { display:grid; grid-template-columns: 2fr 1fr 100px auto auto; gap:10px; padding:0 12px; }
@media (max-width:900px){ .admin-controls{ grid-template-columns:1fr 1fr; } }
.admin-input { width:100%; padding:.7rem .8rem; border:1px solid rgba(0,255,136,.2); border-radius:10px; background:rgba(10,15,26,.8); color:var(--ink); }
.admin-table-wrap { overflow:auto; border:1px solid rgba(0,255,136,.2); border-radius:12px; margin:0 12px; }
.admin-table { width:100%; border-collapse:separate; border-spacing:0; }
.admin-table thead th { position:sticky; top:0; background:#0c1426; border-bottom:1px solid rgba(0,255,136,.2); padding:10px; text-align:left; font-size:.85rem; }
.admin-table tbody td { padding:10px; border-bottom:1px dashed rgba(0,255,136,.15); }
.td-actions { text-align:right; white-space:nowrap; }
.admin-chip { padding:6px 8px; border:1px solid #21324f; border-radius:8px; background:#0b1426; color:var(--ink); font-size:.85rem; cursor:pointer; }
.admin-chip.warn { border-color:#50421a; background:#1c1606; color:#ffe6a6; }
.admin-chip.danger { border-color:#4f1e2b; background:#1a0810; color:#ffd2db; }
.admin-muted { color:var(--ink2); font-size:.9rem; margin-left:8px; }
.admin-pager { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; }
/* Ensure admin modal is above the unified dropdown */
#admin-modal { z-index: 12000 !important; }
/* ===== Affiliate / Share modal layout ===== */
.share-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2rem;
}
@media (max-width: 900px) {
  .share-grid { grid-template-columns: 1fr; }
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
}
.form-grid label { display:block; color: var(--ink2); font-size:.9rem; }
.form-grid input { width:100%; }
.prefix-input {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem;
  align-items: center;
}
.prefix-input .prefix {
  padding: .6rem .75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8,12,20,.8);
  color: var(--ink2);
  font-size: .9rem;
  white-space: nowrap;
}
.prefix-input input {
  width: 100%;
}

.masked-list {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
}
.masked-list li {
  padding:.35rem 0;
  border-bottom:1px dashed rgba(0,255,136,.15);
}
/* Ensure Share content always accepts clicks */
#share-modal .subscription-card { pointer-events: auto; }
#share-modal * { pointer-events: auto; }
/* ===== Desktop Dock ===== */
@media (min-width: 1024px) {
  .dock {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 44px;
    background: var(--bg2);
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    z-index: 9999;
    backdrop-filter: blur(6px);
  }
  .dock.hidden { display: none; }
  .dock-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dock-item .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand);
    flex: 0 0 auto;
  }
  .dock-item .label {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Hide dock entirely on touch/smaller screens */
@media (max-width: 1023px), (pointer: coarse) {
  .dock { display: none !important; }
}
/* Hide the dock when it's empty (removes the black bar) */
#dock:empty { 
  display: none !important; 
  min-height: 0;
  border: 0;
  padding: 0;
}

/* Dock is desktop-only; never show on mobile anyway */
@media (max-width: 1023px), (pointer: coarse) {
  #dock { display: none !important; }
}
/* ===== Themed scrollbars (global) ===== */
:root {
  --scrollbar-thumb: rgba(0,255,136,.35);
  --scrollbar-thumb-hover: rgba(0,255,136,.6);
  --scrollbar-track: rgba(0,255,136,.06);
}

/* Firefox */
html, body, .quantum-dropdown, .admin-table-wrap, .window .window-content, #windows {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* WebKit (Chromium/Safari/Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent; /* or var(--scrollbar-track) if you want a faint rail */
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid transparent;  /* inset look */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Make sure the dropdown specifically inherits the same look */
.quantum-dropdown::-webkit-scrollbar { width: 10px; }
/* === AlgoBars Round Badge (compact, for the indicator toggle) === */
#indicator-toggle {
  /* Let the badge dictate size/shape; remove square button chrome */
  background: transparent !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
}

/* Hide the text-based icon the JS toggles; we keep it for logic only */
#indicator-toggle .menu-icon {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* Badge root */
.ab-badge{
  --size: 40px;                  /* size of the icon in the header */
  width:var(--size); aspect-ratio:1/1;
  position:relative; border-radius:50%;
  display:grid; place-items:center; isolation:isolate;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(0,255,136,.20) 0%, transparent 45%),
    radial-gradient(120% 120% at 70% 80%, rgba(0,204,106,.15) 0%, transparent 50%),
    linear-gradient(180deg, #0a1320 0%, #070c16 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 8px 18px rgba(0,0,0,.35),
    0 0 18px rgba(0,255,136,.18);
  overflow:hidden;
}

/* Star sparkle */
.ab-badge .sparkle{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(2px 2px at 22% 28%, rgba(255,255,255,.55) 0 40%, transparent 45%),
    radial-gradient(1.5px 1.5px at 76% 64%, rgba(255,255,255,.45) 0 40%, transparent 45%),
    radial-gradient(1.5px 1.5px at 40% 78%, rgba(255,255,255,.35) 0 40%, transparent 45%);
  animation: ab-twinkle 3.2s ease-in-out infinite;
}

/* Glass plate */
 .ab-badge .plate{
   position:absolute; inset:8px; border-radius:50%;
  background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 40%, rgba(0,0,0,.25) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 12px 28px rgba(0,0,0,.35);
  z-index:2;
  overflow:hidden;
}

/* Grid */
 .ab-badge .grid{
   position:absolute; inset:6px; border-radius:50%; z-index:2; overflow:hidden;
 }
.ab-badge .grid::before,
.ab-badge .grid::after{
  content:""; position:absolute; inset:0;
  --axis: rgba(255,255,255,.10);
  background:
    repeating-linear-gradient(0deg, var(--axis) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, var(--axis) 0 1px, transparent 1px 10px);
  opacity:.35;
  transform-origin:50% 50%;
  animation: ab-drift 18s linear infinite;
}
.ab-badge .grid::after{
  filter: blur(0.6px);
  opacity:.18;
  animation-duration: 30s;
  animation-direction: reverse;
}

/* Chart SVG */
 .ab-badge .chart{
   position:absolute; inset:6px; z-index:4;
   filter: drop-shadow(0 0 4px rgba(0,255,136,.35));
 }
 /* Keep spark + candle strokes readable even when the SVG scales */
.ab-badge .chart * { vector-effect: non-scaling-stroke; }

.ab-badge .chart .spark{
  stroke: var(--brand, #00ff88); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  filter: drop-shadow(0 0 6px rgba(0,255,136,.35));
  animation: ab-draw 3.2s ease-in-out infinite alternate;
}

/* Candles */
.ab-badge .candle line{ stroke-width:1.3; stroke-linecap:round; opacity:.9 }
.ab-badge .candle rect{ rx:1 }
.ab-badge .candle.g line, .ab-badge .candle.g rect{
  stroke:var(--green, #00d27a);
  fill: color-mix(in oklab, var(--green, #00d27a) 35%, transparent);
}
.ab-badge .candle.r line, .ab-badge .candle.r rect{
  stroke:var(--red, #ff3b5c);
  fill: color-mix(in oklab, var(--red, #ff3b5c) 35%, transparent);
}
.ab-badge .candle{ animation: ab-bob 2.2s ease-in-out infinite; transform-origin:50% 50% }
.ab-badge .candle:nth-child(1){ animation-delay: .0s }
.ab-badge .candle:nth-child(2){ animation-delay: .20s }
.ab-badge .candle:nth-child(3){ animation-delay: .4s }
.ab-badge .candle:nth-child(4){ animation-delay: .6s }
.ab-badge .candle:nth-child(5){ animation-delay: .8s }

/* Center monogram */
.ab-badge .brand-dot{
  position:absolute; width:32px; height:32px; border-radius:50%; z-index:6;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.14), rgba(255,255,255,.02) 60%, rgba(0,0,0,.35) 100%),
              linear-gradient(180deg, rgba(0,255,136,.18), rgba(0,204,106,.10));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 16px rgba(0,255,136,.35);
  display:grid; place-items:center;
}
.ab-badge .brand-dot span{
  font:900 11px/1 Orbitron,system-ui; letter-spacing:.6px;
  color:var(--ink,#e8f4ff); text-shadow:0 0 10px rgba(0,255,136,.45);
  filter: drop-shadow(0 0 2px rgba(0,0,0,.6));
}

/* Shine sweep */
.ab-badge .shine{
  position:absolute; inset:0; border-radius:50%; z-index:7; overflow:hidden; pointer-events:none;
}
.ab-badge .shine::before{
  content:""; position:absolute; inset:-60%;
  background:conic-gradient(from 0deg, transparent 0 85%, rgba(255,255,255,.16) 90%, transparent 95% 100%);
  animation: ab-sweep 5.0s ease-in-out infinite;
}

/* Keyframes (namespaced) */
@keyframes ab-drift{
  0%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(12deg) scale(1.02)}
  100%{transform:rotate(0deg) scale(1)}
}
@keyframes ab-draw{
  0%{stroke-dashoffset:1; filter: drop-shadow(0 0 6px rgba(0,255,136,.35))}
  100%{stroke-dashoffset:0; filter: drop-shadow(0 0 10px rgba(0,255,136,.55))}
}
@keyframes ab-bob{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-1.2px) }
}
@keyframes ab-sweep{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@keyframes ab-twinkle{
  0%,100%{opacity:.35}
  50%{opacity:.7}
}
/* ==== FINAL OVERRIDES: quantum dropdown positioning & visibility ==== */
.quantum-dropdown {
  position: fixed !important;
  top: var(--topbar-h) !important;                     /* directly below the header */
  right: 1.5rem !important;
  width: min(320px, 90vw) !important;
   height: auto !important; /* content-height */
  max-height: calc(100vh - var(--topbar-h) - 12px) !important; /* cap if content gets long */
  padding-bottom: max(12px, env(safe-area-inset-bottom)); /* safe area without forcing height */
  display: none;                                       /* default hidden */
  overflow-y: auto;
  z-index: 10000;
}

.quantum-dropdown.active { 
  display: block !important; 
}
/* Minimized windows are completely hidden */
/* Keep minimized windows alive but invisible */
[data-minimized="1"] {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  /* keep layout/size so iframes & canvases don't reboot */
}

/* === Indicators button — Light mode skin ================================== */
.light-mode #indicator-toggle .ab-badge{
  /* softer, brighter panel */
  background: linear-gradient(180deg, rgba(0,204,106,.12), rgba(0,204,106,.06));
  border: 1px solid rgba(0,204,106,.30);
  box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 0 16px rgba(0,204,106,.22);
}

.light-mode #indicator-toggle .ab-badge .grid{
  /* lighten the inner grid */
  opacity: .75;
  filter: brightness(1.05) contrast(.95);
}

.light-mode #indicator-toggle .ab-badge .spark{
  /* trend spark line */
  stroke: rgba(16,185,129,.75);
}

.light-mode #indicator-toggle .ab-badge .candle.g line,
.light-mode #indicator-toggle .ab-badge .candle.g rect{
  stroke: #14b8a6; /* teal-green */
  fill: color-mix(in oklab, #14b8a6 30%, transparent);
}
.light-mode #indicator-toggle .ab-badge .candle.r line,
.light-mode #indicator-toggle .ab-badge .candle.r rect{
  stroke: #ef4444; /* soft red */
  fill: color-mix(in oklab, #ef4444 30%, transparent);
}

.light-mode #indicator-toggle .ab-badge .brand-dot{
  background:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.85), rgba(255,255,255,.35) 60%, rgba(0,0,0,.06) 100%),
    linear-gradient(180deg, rgba(0,204,106,.20), rgba(0,204,106,.08));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 0 16px rgba(0,204,106,.22);
}
.light-mode #indicator-toggle .ab-badge .brand-dot span{
  color: #0f1720;            /* deep ink on light */
  text-shadow: none;
  filter: none;
}

.light-mode #indicator-toggle .ab-badge .shine{
  opacity: .65;
  filter: brightness(1.05);
}
/* ========================================================================== */
/* Ensure the badge is not clipped by the button box */
#indicator-toggle { overflow: visible; line-height: 1; }
/* Withdrawal status badges */
.status-badge{
  padding:.25rem .5rem; border-radius:6px;
  border:1px solid rgba(255,255,255,.15); font-size:.8rem;
}
.status-pending { color:#ffe6a6; background:#1c1606; border-color:#50421a; }
.status-approved{ color:#8afac3; background:#062116; border-color:#1e4f3a; }
.status-rejected{ color:#ffd2db; background:#1a0810; border-color:#4f1e2b; }
/* ===== Admin layout normalization (uniform section heights + panel scroll) ===== */
:root{
  /* tune once, all sections follow the same visual height */
  --admin-sec-h: clamp(240px, 32vh, 340px);
}

/* Make the whole Admin card scroll vertically (header stays in the card) */
.subscription-modal .subscription-card.admin-card{
  overflow-y: auto !important;   /* was overflow:hidden inline */
  overscroll-behavior: contain;  /* no bounce chaining */
}

/* Every admin table section gets the same viewport-based height cap */
#admin-modal .admin-table-wrap{
  max-height: var(--admin-sec-h) !important;
  /* keep internal scroll only when a list truly overflows its section */
  overflow: auto;
}

/* Ensure lower sections open tall enough even when they have few rows */
#admin-modal #adAffWrap,
#admin-modal #adWdwWrap{
  min-height: var(--admin-sec-h) !important;
}

/* Subtle polish so headers don’t “kiss” each section */
#admin-modal .admin-section-title{
  margin: .8rem 12px 0 !important;
}
/* === Fix: All Users section collapsed height in flex card === */
:root{
  /* unify section heights; tune once if you want a bit taller */
  --admin-sec-h: clamp(240px, 32vh, 340px);
}

/* the admin card itself can scroll; keep this if you already set it */
.subscription-modal .subscription-card.admin-card{
  overflow-y: auto !important;
}

/* all admin tables can scroll inside their own section */
#admin-modal .admin-table-wrap{
  max-height: var(--admin-sec-h) !important;
  overflow: auto;
}

/* ensure every section has a visible block height */
#admin-modal #adUsersWrap,
#admin-modal #adAffWrap,
#admin-modal #adWdwWrap{
  min-height: var(--admin-sec-h) !important;
}
/* Start Here button — scoped to the main menu trigger */
#quantum-menu-btn {
  width: auto;                 /* allow text width */
  padding: 0 14px;             /* same height, more horizontal room */
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--brand);         /* use platform brand color */
  border-color: rgba(0,255,136,0.5);
  background: linear-gradient(180deg, rgba(0,255,136,0.14), rgba(0,255,136,0.06));
}

#quantum-menu-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,255,136,0.20);
}

/* Hide any old hamburger icon if cached */
#quantum-menu-btn .menu-icon,
#quantum-menu-btn svg { display: none; }

#quantum-menu-btn .menu-label {
  display: inline-block;
  line-height: 44px;           /* match existing button height */
}
/* Indicators button — scoped to the indicator toggle only */
#indicator-toggle {
  width: auto;                 /* allow text */
  padding: 0 14px;             /* same height, a bit wider */
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--brand);         /* platform brand color */
  border-color: rgba(0,255,136,0.5);
  background: linear-gradient(180deg, rgba(0,255,136,0.14), rgba(0,255,136,0.06));
}

#indicator-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,255,136,0.20);
}

/* Hide any old icon/animation if it’s still in cached HTML */
#indicator-toggle .menu-icon,
#indicator-toggle svg { display: none; }

#indicator-toggle .menu-label {
  display: inline-block;
  line-height: 44px;           /* match existing button height */
}
/* Pro Plan Enhancements */
.pro-card {
  background: linear-gradient(135deg, rgba(0,255,136,0.1) 0%, rgba(0,255,136,0.02) 100%);
  position: relative;
  overflow: hidden;
}

.pro-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--brand), transparent, var(--brand));
  z-index: -1;
  animation: shimmer 3s linear infinite;
  opacity: 0.3;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.market-checkbox {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  margin: 0.5rem;
}

.market-checkbox:hover:not(.disabled) {
  border-color: var(--brand);
  background: rgba(0,255,136,0.05);
}

.market-checkbox.selected {
  background: rgba(0,255,136,0.15);
  border-color: var(--brand);
}

.market-checkbox.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.market-checkbox input {
  margin-right: 0.5rem;
}

.market-category {
  margin-bottom: 1.5rem;
}

.market-category h5 {
  color: var(--brand);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.market-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}
/* Admin Pro Plan Highlights */
.admin-stat:has(#adPro) {
  position: relative;
  overflow: hidden;
}

.admin-stat:has(#adPro)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,136,0.3), transparent);
  animation: shimmer 3s infinite;
}

.admin-table td:has(span:contains("PRO")) {
  background: rgba(0,255,136,0.05);
}
/* Quantum Announcement Bar */
.announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(90deg, #0a0f1b 0%, #1a1f2b 50%, #0a0f1b 100%);
  border-bottom: 1px solid var(--brand);
  z-index: 99999;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,255,136,0.2);
}
.announcement-content {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  position: relative;
  animation: scroll-announcement 20s linear infinite;
  will-change: transform;
}


.announcement-text,
#announcement-text-clone {
  color: var(--brand);
  font-weight: 600;
  font-size: 14px;
  padding: 0 100px;
  display: inline-block;
  white-space: nowrap;
}


@keyframes scroll-announcement {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}





.announcement-close {
  position: absolute;
  right: 10px;
  background: rgba(0,255,136,0.2);
  border: 1px solid var(--brand);
  color: var(--brand);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.announcement-close:hover {
  background: var(--brand);
  color: var(--bg);
}

/* Push main content down when announcement is visible */
body.has-announcement #main-content {
  margin-top: 32px;
}

body.has-announcement #auth-screen {
  padding-top: 32px;
}
/* Affiliate Dashboard Enhancements */
.aff-nav-item:hover {
  background: rgba(0,255,136,0.05) !important;
}

.aff-nav-item.active:hover {
  background: rgba(0,255,136,0.15) !important;
}

.stat-card {
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,255,136,0.2);
}

.aff-section {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar styling for dashboard */
.aff-section::-webkit-scrollbar {
  width: 8px;
}

.aff-section::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

.aff-section::-webkit-scrollbar-thumb {
  background: rgba(0,255,136,0.3);
  border-radius: 4px;
}

.aff-section::-webkit-scrollbar-thumb:hover {
  background: rgba(0,255,136,0.5);
}