/* ─── DASHBOARD APP OVERLAY ─── */
#app{display:none;position:fixed;inset:0;background:var(--black);z-index:800;overflow-y:auto}
#app.open{display:block}
.app-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:var(--dark);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.app-logo{font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--white)}
.app-logo em{font-style:normal;color:var(--cyan)}
.app-tabs{display:flex;gap:0}
.app-tab{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;padding:0.6rem 1.2rem;background:transparent;border:none;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all 0.2s}
.app-tab.active{color:var(--cyan);border-bottom-color:var(--cyan)}
#upgrade-plans-grid{ grid-template-columns:1fr 1fr 1fr; }
.app-close{font-family:var(--font-mono);font-size:0.68rem;color:var(--muted);background:transparent;border:1px solid var(--border);padding:0.4rem 0.8rem;cursor:pointer;letter-spacing:0.1em;text-transform:uppercase;transition:all 0.2s}
.app-close:hover{border-color:var(--red);color:var(--red)}

/* ── AUTH MODAL ─────────────────────────────────────────────── */

/* Cursor visible inside auth modals */
#auth-overlay,#auth-overlay *,
#outcome-modal,#outcome-modal *{cursor:auto !important}
#auth-overlay input,#auth-overlay button,
#auth-overlay span[onclick],#auth-overlay .auth-tab,
#auth-overlay .auth-btn,#auth-overlay .auth-forgot,
#auth-overlay .auth-close,#auth-overlay .auth-switch span{cursor:pointer !important}
#auth-overlay input[type=text],
#auth-overlay input[type=email],
#auth-overlay input[type=password]{cursor:text !important}
#auth-overlay{display:flex;visibility:hidden;opacity:0;pointer-events:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:opacity 0.2s}
#auth-overlay.open{visibility:visible;opacity:1;pointer-events:all}
.auth-box{background:#0d1117;border:1px solid #1e2836;width:420px;max-width:92vw;min-height:300px;padding:2.5rem;position:relative;animation:authSlide 0.2s ease;box-sizing:border-box;}
@keyframes authSlide{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.auth-logo{font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--white);margin-bottom:0.4rem}
.auth-logo em{font-style:normal;color:var(--cyan)}
.auth-tagline{font-family:var(--font-mono);font-size:0.65rem;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:2rem}
.auth-tabs{display:flex;gap:0;margin-bottom:1.8rem;border-bottom:1px solid #1e2836}
.auth-tab{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;padding:0.6rem 1.2rem;background:transparent;border:none;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.2s}
.auth-tab.active{color:var(--cyan);border-bottom-color:var(--cyan)}
.auth-field{margin-bottom:1.1rem}
.auth-label{font-family:var(--font-mono);font-size:0.65rem;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;display:block;margin-bottom:0.4rem}
.auth-input{width:100%;background:#080b0e;border:1px solid #1e2836;color:var(--white);font-family:var(--font-mono);font-size:0.85rem;padding:0.75rem 1rem;outline:none;box-sizing:border-box;transition:border-color 0.2s}
.auth-input:focus{border-color:var(--cyan)}
.auth-btn{width:100%;background:var(--cyan);color:#000;font-family:var(--font-display);font-weight:700;font-size:0.85rem;padding:0.9rem;border:none;cursor:pointer;margin-top:0.5rem;transition:background 0.2s;letter-spacing:0.05em}
.auth-btn:hover{background:var(--green)}
.auth-btn:disabled{background:var(--muted);cursor:not-allowed}
.auth-error{font-family:var(--font-mono);font-size:0.72rem;color:#ff4560;margin-top:0.8rem;min-height:1.2rem;text-align:center}
.auth-success{font-family:var(--font-mono);font-size:0.72rem;color:#1ddd8a;margin-top:0.8rem;text-align:center}
.auth-switch{font-family:var(--font-mono);font-size:0.65rem;color:var(--muted);text-align:center;margin-top:1.2rem}
.auth-switch span{color:var(--cyan);cursor:pointer;text-decoration:underline}
.auth-close{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1}
.auth-close:hover{color:var(--red)}

/* Password eye toggle */
.pwd-wrapper{position:relative;display:block}
.pwd-wrapper .auth-input{width:100%;padding-right:2.8rem;box-sizing:border-box}
.pwd-toggle{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer !important;color:#5a7a96;
  font-size:1rem;line-height:1;padding:0;display:flex;align-items:center}
.pwd-toggle:hover{color:var(--cyan)}
.auth-forgot{font-family:var(--font-mono);font-size:0.65rem;color:#5a7a96;text-align:right;margin-bottom:0.8rem;cursor:pointer;transition:color 0.2s}
.auth-forgot:hover{color:var(--cyan)}
.auth-success{font-family:var(--font-mono);font-size:0.72rem;color:#1ddd8a;margin-top:0.8rem;text-align:center}
/* plan badge in app header */
.plan-badge{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;padding:3px 8px;border-radius:3px;background:#00e5c815;color:var(--cyan);border:1px solid #00e5c830}
.plan-badge.free{background:#f5c01815;color:#f5c018;border-color:#f5c01830}
.plan-badge.pro{background:#a855f715;color:#a855f7;border-color:#a855f730}
.plan-badge.elite{background:#ff456015;color:#ff4560;border-color:#ff456030}
/* user info strip in app header */
#auth-user-strip{display:none;align-items:center;gap:0.6rem;font-family:var(--font-mono);font-size:0.65rem;color:var(--muted)}
#auth-user-strip.show{display:flex}
#auth-logout-btn{background:transparent;border:1px solid #1e2836;color:var(--muted);font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.08em;text-transform:uppercase;padding:3px 8px;cursor:pointer;transition:all 0.2s}
#auth-logout-btn:hover{border-color:var(--red);color:var(--red)}
.app-body{padding:2rem;max-width:1400px;margin:0 auto}

/* app cards */
.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem}
.app-card{background:var(--card);border:1px solid var(--border);padding:1.5rem}
.app-card-label{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:0.5rem}
.app-card-val{font-family:var(--font-display);font-weight:700;font-size:1.8rem;color:var(--white);letter-spacing:-0.04em}
.app-card-val.g{color:var(--green)}
.app-card-val.r{color:var(--red)}
.app-card-val.c{color:var(--cyan)}
.app-card-sub{font-family:var(--font-mono);font-size:0.62rem;color:var(--muted);margin-top:0.3rem}

/* news card */
.news-card {
  background:var(--card);
  border:1px solid var(--border);
  padding:14px 16px;
  border-radius:6px;
  cursor:pointer;
  transition:all 0.18s ease;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.news-card:hover{
  border-color:rgba(0,229,200,0.3);
  background:rgba(0,229,200,0.03);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.news-source-row{
  display:flex;
  align-items:center;
  gap:6px;
}
.news-favicon{
  width:14px;
  height:14px;
  border-radius:2px;
  flex-shrink:0;
}
.news-source-name{
  font-family:var(--font-mono);
  font-size:0.6rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.news-time{
  font-family:var(--font-mono);
  font-size:0.58rem;
  color:#2d3f52;
  margin-left:auto;
}
.news-title{
  font-family:var(--font-body);
  font-size:0.88rem;
  color:var(--white);
  line-height:1.45;
  font-weight:500;
}

/* app signal table */

.app-table{
  background:var(--card);
  border:1px solid var(--border);
  overflow-x:auto;       /* horizontal scroll on mobile */
  overflow-y:hidden;
  margin-bottom:1.5rem;
  -webkit-overflow-scrolling:touch; /* smooth scroll on iOS */
}
.app-table-head{
  display:grid;
  grid-template-columns:1.6fr 0.8fr 1fr 1fr 1fr 0.8fr 1fr 1fr 1.6fr;
  padding:1rem 1.2rem;
  background:var(--dark);
  border-bottom:1px solid var(--border);
  min-width:900px;       /* never shrink below this — forces scroll */
}
.app-table-head span{
  font-family:var(--font-mono);
  font-size:0.65rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
}
/* FIRST COLUMN LEFT */
.app-table-head span:first-child{
  text-align:left;
  padding-left:10px;
}

/* ROW */
.app-row{
  display:grid;
  grid-template-columns:1.6fr 0.8fr 1fr 1fr 1fr 0.8fr 1fr 1fr 1.6fr;
  padding:1rem 1.2rem;
  border-bottom:1px solid var(--border);
  align-items:center;
  transition: all 0.2s ease;
  cursor: pointer;
  min-width:900px;       /* matches header — forces horizontal scroll on mobile */
}

.app-row:hover{
  /*background:rgba(255,255,255,0.04);*/
  background: rgba(0, 229, 200, 0.08);
}
.app-row:hover .ar-stock {
    color: #00E5C8;
}
.app-row:last-child{
  border-bottom:none;
}
/* RS rows have 6 columns on desktop, not 9 */
.rs-row{
  grid-template-columns:1.6fr 0.8fr 0.8fr 1fr 1.2fr 0.8fr !important;
  min-width:600px;
}
/* ─── CRITICAL FIX: mobile wrapper divs must be transparent to the grid ───
   .mobile-price-row and .mobile-meta-row are plain divs sitting inside the
   9-column .app-row grid. Without display:contents each wrapper occupies ONE
   grid cell as a block, collapsing all 6 price/meta columns into nothing.
   display:contents removes the wrapper box so its children (ar-val spans)
   participate directly as individual grid cells — same as .rs-row already did. */
.app-row .mobile-price-row,
.app-row .mobile-meta-row,
.rs-row  .mobile-price-row,
.rs-row  .mobile-meta-row{
  display:contents;
}
.app-row .mobile-price-row .ar-val,
.app-row .mobile-meta-row  .ar-val,
.rs-row  .mobile-price-row .ar-val,
.rs-row  .mobile-meta-row  .ar-val{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
/* mob-label: hidden on desktop, shown on mobile */
.mob-label{ display:none; }
.app-row:nth-child(even){
  background:rgba(255,255,255,0.012);
}
.app-row:hover{
  background: rgba(0,229,200,0.06) !important;
  transform: translateX(2px);
  transition: all 0.15s ease;
}
/* STOCK */
.ar-stock{
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.95rem;
  color:var(--white);
  text-align:left;
  padding-left:10px;
}
.ar-stock:hover{
  color: var(--cyan);
  cursor: pointer;
}
/* SCORE */
.ar-score{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--cyan);
  text-align:center;
}

/* VALUES */
.ar-val{
  font-family:var(--font-mono);
  font-size:0.82rem;
  color:var(--text);
  text-align:center;
}

.ar-val button {
  width: 100%;
}
/* ENTRY / SL / TARGET COLORS */
.ar-entry{
  color:#cfd8dc;
}
.ar-sl{
  color:#ff4d4f;
  font-weight:500;
}
.ar-target{
  color:#00e676;
  font-weight:500;
}
/* BUTTON */
.ar-btn{
  font-family:var(--font-mono);
  font-size:0.65rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:0.4rem 0.8rem;
  background:rgba(0,229,200,0.08);
  border:1px solid rgba(0,229,200,0.25);
  color:var(--cyan);
  cursor:pointer;
  transition:all 0.2s;
  text-align:center;
}
.ar-btn:hover{
  background:rgba(0,229,200,0.2);
}

/* ── WIN / LOSS / OPEN outcome buttons ── */
.outcome-btn {
  flex: 1;
  padding: 3px 0;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  border: 1px solid transparent;
  background: transparent;
}
/* Default ghost — barely visible until hovered */
.outcome-btn.win  { border-color: #1ddd8a25; color: #1ddd8a50; }
.outcome-btn.loss { border-color: #ff456025; color: #ff456050; }
.outcome-btn.open { border-color: #3d506825; color: #3d506870; }
/* Hover */
.outcome-btn.win:hover  { background: rgba(29,221,138,0.08);  border-color: #1ddd8a70; color: #1ddd8a; }
.outcome-btn.loss:hover { background: rgba(255,69,96,0.08);   border-color: #ff456070; color: #ff4560; }
.outcome-btn.open:hover { background: rgba(61,80,104,0.12);   border-color: #3d5068;   color: var(--text); }
/* Active / selected state */
.outcome-btn.win.active  { background: rgba(29,221,138,0.12);  border-color: #1ddd8a; color: #1ddd8a; }
.outcome-btn.loss.active { background: rgba(255,69,96,0.12);   border-color: #ff4560; color: #ff4560; }
.outcome-btn.open.active { background: rgba(61,80,104,0.18);   border-color: #5a7a96; color: var(--text); }

/* Left-border accent on row by outcome */
.app-row.outcome-win  { border-left: 3px solid #1ddd8a !important; }
.app-row.outcome-loss { border-left: 3px solid #ff4560 !important; }
.app-row.outcome-open { border-left: 3px solid #3d5068 !important; }
/* scan button */
.scan-btn{display:flex;align-items:center;gap:0.8rem;background:var(--cyan);color:var(--black);font-family:var(--font-display);font-weight:700;font-size:0.88rem;padding:0.9rem 2rem;border:none;cursor:pointer;transition:all 0.2s;margin-bottom:1.5rem}
.scan-btn:hover{background:var(--green)}
.scan-btn:disabled{background:var(--muted);cursor:not-allowed}
.scan-loader{width:14px;height:14px;border:2px solid rgba(0,0,0,0.3);border-top-color:var(--black);border-radius:50%;animation:spin 0.6s linear infinite;display:none}
.scan-loader.show{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── News sentiment 3-column grid ── */
.news-sentiment-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1rem;
  margin-bottom:1rem;
}
.news-sentiment-box{
  background:var(--card);
  border:1px solid var(--border);
  padding:1.25rem 1.5rem;
}
.news-sentiment-box .sentiment-label{
  font-family:var(--font-mono);
  font-size:0.6rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:0.75rem;
  display:block;
}
.news-sentiment-box .sentiment-value{
  font-family:var(--font-display);
  font-weight:700;
  font-size:2rem;
  letter-spacing:-0.02em;
}
@media(max-width:600px){
  .news-sentiment-grid{ grid-template-columns:1fr; }
}