/* dashboard.css
   @ver 1.3.0 (2025-09-06)
   - Updated in-play row highlight: removed yellow/gold border
   - New subtle background color applied for rows marked .in-play
   - Works in both dark and light modes
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Base styles */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

body {
  font-size: 16px;
  background: #f9f9f9;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  padding-top: 55px;
  margin: 0 !important;
  box-sizing: border-box;
}
body.sidebar-open { overflow: hidden; }

.main-content {
  width: 100%;
  max-width: 100%;   /* ensure container is full width */
  min-height: 100vh;
  padding: 70px 15px 104px 15px;     /* some padding around */
  box-sizing: border-box;
   background: 
    radial-gradient(
      circle at center,
      rgba(33, 255, 122, 0.25) 0%,
      rgba(33, 208, 122, 0.18) 20%,
      rgba(33, 208, 122, 0.10) 40%,
      rgba(33, 208, 122, 0.04) 65%,
      #222 100%
    ),
    radial-gradient(
      circle at 80% 20%, /* off-center secondary glow */
      rgba(33, 255, 122, 0.05) 0%,
      transparent 60%
    );
  background-attachment: fixed;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.toolbar-hidden .main-content { 
  padding-top: 15px;
}

.news-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1;
  background: #ffe9a6;
  color: #6b4b00;
  border: 1px solid #f3d27a;
  vertical-align: middle;
  margin-left: .4rem;
}
body.dark-mode .news-badge {
  background: #3a2f00;
  color: #ffd25e;
  border-color: #5a4a0a;
}
.news-badge[hidden] { display: none !important; }

h1 {
  font-size: 1.2rem;
}

form {
  margin-bottom: 20px;
}

input[type="text"] {
  padding: 10px;
  font-size: 1rem;
  width: 100%;
  max-width: 250px;
  box-sizing: border-box;
}

input[type="submit"] {
  background-color: #007bff; /* bootstrap-style blue */
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #0069d9;
}

.input-field {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: var(--panel);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.input-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--ring);
}

@media (max-width: 600px) {
  .input-field {
    padding: 10px;
    font-size: 14px;
    width: 100%;
  }
}

/* Dark mode style */
body.dark-mode input[type="submit"] {
  background-color: #1e88e5; /* softer deep blue */
  color: white;
}

body.dark-mode input[type="submit"]:hover {
  background-color: #1565c0; /* slightly darker on hover */
}

header.toolbar { display: flex; }
nav#mobile-bottombar { display: none; }

.toolbar {
   z-index: 1300;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 70px;
  width: 100%;
  background-color: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 15px;
  z-index: 1300;
  gap: 15px;
  overflow: visible; /* ensure buttons aren’t cut off */
  box-sizing: border-box;
  justify-content: space-between;
}

  .toolbar-hidden, body.dark-mode.toolbar-hidden {
    padding-top: 0 !important;
  }

    .toolbar-hidden .toolbar {
      display: none;
    }

/* Hide the second injected toolbar inside header.toolbar */
header.toolbar .toolbar-right-inject:nth-of-type(2) {
  display: none !important;
}

.toolbar-title {
  flex-grow: 1;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-size: 18px;
}

.toolbar-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

/* ensure action icons/buttons don't show underline/border */
a.toolbar-btn {
  text-decoration: none !important;
  border: none;
}

.toolbar-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* mobile bottombar */


/* Mobile bottom bar */
#mobile-bottombar {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%);
  width: min(95vw, 600px);
  background: #111;
  border-radius: 35px;
  display: flex;
  justify-content: space-between; /* space evenly */
  padding: 15px 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
  z-index: 2147483000;
  /* create its own layer to avoid jitter */
  will-change: transform;
  -webkit-transform: translateX(-50%); /* iOS */
  pointer-events: auto;
}

#mobile-bottombar { backface-visibility: hidden; }
.toolbar-hidden #mobile-bottombar  {
  display: none;
}

/* If you previously put transforms on ancestors, keep bar safe */
html, body { transform: none !important; } /* (only if you don’t rely on page-level transforms) */

/* Optional iOS-only nudge */
@supports (-webkit-touch-callout: none) {
  #mobile-bottombar { position: fixed; }
}

#mobile-bottombar {
  background: rgba(17, 17, 17, 0.9); /* slight transparency */
  backdrop-filter: blur(8px);        /* frosted glass effect */
  -webkit-backdrop-filter: blur(8px);
}

#mobile-bottombar .mb-item {
  flex: 1;                    /* equal width */
  display: flex;
  flex-direction: column;     /* icon above text */
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #eee;
  background: none;
  border: none;
  font-size: 0.8rem;
  padding: 6px 0;
  cursor: pointer;
}

/* Base mobile bottom bar button style */
#mobile-bottombar .mb-item {
  color: #ccc;
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: color .2s, transform .08s ease;
}

/* Icon size */
#mobile-bottombar .mb-item svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  margin-bottom: 4px;
}

/* When actively pressed or current */
#mobile-bottombar .mb-item.active,
#mobile-bottombar .mb-item:active {
  color: #ffe08a;
  transform: translateY(1px);
}

/* Optional: subtle highlight on hover (desktop) */
@media (hover:hover) {
  #mobile-bottombar .mb-item:hover {
    color: #ffe08a;
  }
}

#mobile-bottombar .mb-item.active {
  color: #ffe08a;         /* gold highlight */
}

#mobile-bottombar .mb-item.active svg {
  fill: #ffe08a;          /* icon gold */
}

#mobile-bottombar .mb-item.active span {
  color: #ffe08a;         /* label gold */
}

#mobile-bottombar .mb-item svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

#mobile-bottombar .mb-item span {
  font-size: 0.75rem;
  line-height: 1;
}

/* Lift page content so bar doesn't overlap bottom buttons */
@supports(padding-bottom: env(safe-area-inset-bottom)){
  .has-mobile-bottombar{ padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* Show only on small screens */
@media (max-width: 768px){
  #mobile-bottombar{ display: flex; justify-content: space-between; }
  .ip-status {
    bottom: 108px !important;
    right: 15px !important;
  }
}

/* Optional dark-mode alignment (your site already dark) */
body.dark-mode #mobile-bottombar{
  background: rgba(16, 18, 22, 0.92);
}


/* end mobile bottombar */


#openSidebar {
  width: 36px;  /* adjust as needed to fit both icons */
  height: 36px;
  display: flex;
  justify-content: center;
  padding: 0;
  font-size: 24px; /* icon size */
  transition: none; /* no size transitions */
}

/* Dark mode */

body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
   width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  padding-top: 70px !important;
  margin: 0 !important;
  box-sizing: border-box;
}

body.dark-mode table {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none;
}

body.dark-mode th, 
body.dark-mode td {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode button, 
body.dark-mode a {
  background-color: #333;
  color: #eee;
  border-color: #555;
}

body.dark-mode button:hover, 
body.dark-mode a:hover {
  background-color: #555;
}

/* -------- ALERTS: Dot + Popover -------- */

/* Right-side slot beside the title/dark-mode */
.toolbar-right-inject {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Anchor for the popover; doesn't affect toolbar positioning */
.alerts-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.alerts-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35.5px;
  height: 35.5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  color: #ffe08a;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: all .2s ease;
}

.alerts-btn:hover {
  background: rgba(255,224,138,0.1);
  transform: translateY(-1px);
}

.alerts-btn:active {
  transform: translateY(1px);
  background: rgba(255,224,138,0.15);
}

.alerts-btn .bell-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* The glowing alert dot */
.alerts-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe08a 0%, #ffb84d 100%);
  box-shadow: 0 0 6px 2px rgba(255,224,138,0.6);
  animation: pulse 1.8s ease-in-out infinite;
}

/* Animate gently to draw attention */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}

/* Popover still needs positioning; anchor to the wrapper (not the toolbar) */

#alertsPopover {
  display: none;   /* hidden until opened */
}
#alertsPopover[hidden] {
  display: none;   /* HTML5 hidden attribute */
}

#alertsPopover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-height: 480px;
  background: var(--surface, #0f172a);
  color: var(--text, #e5e7eb);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 3000;
}

/* --- Popover internals (same as before; include your existing .ap-* rules) --- */
.ap-header{ padding:10px 12px 8px; border-bottom:1px solid var(--border,#334155); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ap-header h3{ margin:0; font-size:14px; font-weight:700; }
.ap-controls{ display:flex; align-items:center; gap:8px; }
.pill-group{ display:inline-flex; gap:6px; }
.pill{ border:1px solid var(--border,#334155); background:#111827; padding:4px 8px; border-radius:999px; font-size:12px; color:#cbd5e1; cursor:pointer; }
.pill.active{ background:#1e293b; border-color:#475569; }
.link-btn{ background:none; border:none; padding:0; font-size:12px; color:#94a3b8; cursor:pointer; }
.link-btn:hover{ text-decoration:underline; }

.ap-body{ position:relative; overflow-y:auto; }
.ap-list{ list-style:none; margin:0; padding:6px 8px; }
.ap-item{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:8px; border-radius:10px; }
.ap-item:hover{ background:#0b1220; }
.ap-item.is-new{ outline:2px solid #1d4ed8; outline-offset:0; }
.ap-item-main{ min-width:0; }
.ap-line-1{ display:flex; align-items:baseline; gap:8px; overflow:hidden; }
.ap-symbol{ font-weight:700; letter-spacing:.2px; }
.ap-type{ font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:#94a3b8; }
.ap-time{ margin-left:auto; font-size:12px; color:#94a3b8; }
.ap-line-2{ font-size: 12px;
  color: #cbd5e1;
  overflow: hidden;
  line-height: 1.4em;
  padding: 5px 0; }
.ap-item-actions{ display:inline-flex; gap:6px; align-items:center; float:right; }
.btn-pill{ box-sizing: border-box; border:1px solid #334155; background:#0f172a; font-size:12px; padding:4px 8px; border-radius:999px; color:#e5e7eb; cursor:pointer; }
.btn-pill:hover{ background:#111827; }

.ap-footer{ border-top:1px solid #334155; padding:10px; display:flex; justify-content:center; }

/* Empty + skeleton states if you use them */
.ap-empty,.ap-empty-new{ padding:28px 14px; text-align:center; color:#94a3b8; }
.ap-empty-emoji{ font-size:24px; margin-bottom:6px; }
.skeleton .ap-item.sk{ pointer-events:none; }
.sk-line{ height:10px; background:linear-gradient(90deg,#1f2937 25%,#111827 37%,#1f2937 63%); background-size:400% 100%; border-radius:6px; margin:6px 0; animation:sk 1.2s infinite ease-in-out; }
.sk-long{ width:70%; }
@keyframes sk{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }

/* Make social buttons lighter and inline */
.ap-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.ap-item-actions .btn-pill {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  font-size: 12px;
  padding: 4px 10px;         /* slightly tighter for balance */
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;          /* consistent with pill tabs */
  box-shadow: none;
  line-height: 1.4;          /* keeps them vertically compact */
  white-space: nowrap;       /* stop long text from wrapping */
}

.ap-item-actions .btn-pill:hover {
  background: var(--rowhover, #f3f4f6);
  box-shadow: none !important;
}

body.dark-mode .ap-item-actions .btn-pill {
  background: #0f172a;
  border-color: #334155;
  color: #e5e7eb;
}

body.dark-mode .ap-item-actions .btn-pill:hover {
  background: #1e293b;
  box-shadow: none !important;
}

.ap-list.ap-list-data { padding: 6px 8px; }
.ap-item-link {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 6px;
}
.ap-item-link:hover { background: var(--rowhover, #f8fafc); }
.ap-item-link.is-new { outline: 2px solid #dbeafe; }

/* Social alerts have an icon + message */
.ap-item-link .ap-icon {
  font-size: 14px;
  margin-right: 6px;
}

.ap-item-link .ap-message {
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ap-item-link .ap-icon { font-size: 14px; margin-right: 6px; }
.ap-item-link .ap-message { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; }


/* Actions stack neatly under the message */
.ap-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.ap-close-btn {
  display: none;
}

/* ================= MOBILE ALERTS (≤480px) ================= */
@media (max-width: 480px) {
  /* Popover becomes full-screen */
  #alertsPopover {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
    border: none;
    z-index: 9999; /* on top of everything */
  }

  /* Header stacks vertically */
  .ap-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px;
  }

  .ap-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    display: block;
  }

  .ap-controls {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  /* Body takes full remaining height */
  .ap-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px;
  }

  /* Footer stays pinned at bottom */
  .ap-footer {
    border-top: 1px solid var(--border, #e5e7eb);
    padding: 12px;
    position: sticky;
    bottom: 0;
    background: var(--surface, #fff);
  }

  /* Make items a bit larger for touch */
  .ap-item-link {
    padding: 12px;
    margin-bottom: 8px;
    font-size: 14px;
  }

  .ap-symbol { font-size: 16px; }
  .ap-line-2 { font-size: 13px; }

  /* Empty states centered more nicely */
  .ap-empty,
  .ap-empty-new {
    padding: 40px 20px;
    font-size: 14px;
  }
}

/* ========== Mobile full-screen + swipe-to-close support ========== */
@media (max-width: 480px) {
  #alertsPopover.mobile-full {
    position: fixed;
    top: 50px;
    /*! inset: 0; */
    /*! width: 100vw; */
    /*! height: 100vh; */
    max-width: none;
    /*! max-height: none; */
    border-radius: 35px;
    border: none;
    margin: 15px 0;
    z-index: 9999;

    /* swipe sheet behavior */
    transform: translateY(0);
    transition: transform .25s ease;
    /*! will-change: transform; */
    background: var(--surface, #fff);
    /*! width: min(95vw, 600px); */
    /*! left: 50%; */
    /*! transform: translateX(-50%); */
    left: 50%;
    transform: translateX(-50%) !important;
    width: min(95vw, 600px);
    padding: 15px 5px;
    box-sizing: border-box;
    max-height: calc(100vh - 184px);
  }
  body.dark-mode #alertsPopover.mobile-full {
    background: #0f172a;
  }

  /* while finger is dragging, disable the transition for instant tracking */
  #alertsPopover.dragging {
    transition: none !important;
  }

  /* close button (we added earlier) */
  .ap-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    display: block;
  }

  /* Make header/body/footer flow nicely on mobile (from earlier) */
  .ap-header { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; }
  .ap-controls { width: 100%; display: flex; justify-content: space-between; }
  .ap-body { flex: 1; overflow-y: auto; padding: 0 8px; }
  .ap-footer { border-top: 1px solid var(--border, #e5e7eb); padding: 12px; position: sticky; bottom: 0; background: var(--surface,#fff); }
  body.dark-mode .ap-footer { background: #0f172a; }

  .modal-sheet{
  width: 100%;
  }
}

/* -------- End Alerts CSS -------- */

/* ========== Action bar ========== */
.action-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #e3e6ea;
  background: #f7f9fb; /* light background */
}

/* Make the action bar a flex row (if it isn't already) */
.action-bar { display:flex; align-items:center; gap:8px; }

/* Push the switcher to the far right */
.action-bar .wl-switch { margin-left:auto; display:flex; align-items:center; gap:8px; }
.action-bar .wl-switch select { padding:6px 8px; border-radius:8px; border:1px solid #ddd; }
body.dark-mode .action-bar .wl-switch select { background:#151515; border-color:#333; color:#ddd; }

/* Dark mode */
body.dark-mode .action-bar {
  border-color: #2a2a2a;
  background: #1a1a1a;
}

/* ========== Pill buttons ========== */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #d2d7de;
  background: #ffffff;   /* force white in light mode */
  color: #1e293b;        /* dark gray text in light mode */
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, border-color .15s;
  text-decoration: none;
}

.btn-pill:hover {
  background: #f3f6f9;
  border-color: #c7cdd6;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

.btn-pill {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(128,128,128,.3);
  background: rgba(40,200,120,.12);
  cursor: pointer;
}
.btn-pill:hover { background: rgba(40,200,120,.2); }
.btn-pill:disabled { opacity: .6; cursor: default; }

.btn-pill:active {
  transform: translateY(0.5px);
}

.btn-pill.primary {
  cursor: pointer;
  color: #052214 !important;
  background: linear-gradient(180deg, var(--accent, #21D07A), #1ab86b) !important;
  box-shadow: 0 14px 28px rgba(33,208,122,0.38);
  transition: transform .06s, box-shadow .2s, filter .2s;
  border: none !important;
}

.btn-pill.primary:hover {
  filter: brightness(1.02);
  box-shadow: 0 16px 36px rgba(33,208,122,0.48);
}

.btn-pill.primary:active {
  transform: translateY(1px);
}

/* Dark mode pills */
body.dark-mode .btn-pill {
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  color: #e7e7e7;
}

body.dark-mode .btn-pill:hover {
  background: #262626;
  border-color: #3a3a3a;
}

/* Spinner */
.btn-pill.has-spinner { position: relative; }
.btn-pill .btn__spinner {
  display: none;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn-pill.is-loading .btn__text,
.btn-pill.is-loading .btn__icon { opacity: .55; }
.btn-pill.is-loading .btn__spinner { display: inline-block; }


/* Base small pill */
.btn-pill-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem !important;        /* smaller text */
  line-height: 1.2 !important;
  padding: 2px 8px !important;          /* tighter padding */
  border-radius: 4px !important;        /* less rounded */
  font-weight: 500 !important;
  text-decoration: none;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
  margin: 2px 0 !important;
  min-width: 60px !important;           /* ensures a nice button shape */
}

/* Label span for consistent spacing */
.btn-pill-small .btn-label {
  display: inline-block;
}

#btn-delete-watchlist {
  height: 100%;              /* match parent row height */
  line-height: normal;       /* prevent extra padding */
  padding: 0 12px;           /* tighter sides so it still looks pill-like */
  font-size: 0.9rem;         /* keep it balanced */
  margin-left: 8px;          /* spacing from the select */
  display: inline-flex;      
  align-items: center;       /* vertical centering */
  min-height: 44px;
  max-height: 44px;
}

/* Color variants */
.btn-pill-small.btn-pill-ghost {
  background: #f8f9f8;
  color: #333;
  border: 1px solid #ccc;
}
.btn-pill-small.btn-pill-ghost:hover {
  background: #ecefec;
}

.btn-pill-small.btn-pill-primary {
  background: #cfe8cf;   /* pale green */
  color: #225522;
  border: 1px solid #a0caa0;
}
.btn-pill-small.btn-pill-primary:hover {
  background: #b6dbb6;
}

.btn-pill.btn-pill-warn {
  background-color: #d9534f !important;   /* Bootstrap-style red */
  color: #fff;
}

.btn-pill.btn-pill-warn:hover {
  background-color: #c9302c !important;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 7px;   /* space between buttons */
}


@keyframes spin { to { transform: rotate(360deg); } }

/* Toggle state for New only */
.btn-pill.is-active {
  outline: 2px solid rgba(59,130,246,.3);
  outline-offset: 1px;
}

/* ---------- Add bar: align input + button heights ---------- */
:root { --ctl-h: 56px; } /* adjust if you want a different size */

#add-symbol-form{
  display:flex;
  align-items:stretch;        /* make tops align */
  gap:12px;
  margin-bottom:12px;
}

#add-symbol-form input[name="new_symbol"]{
  height:var(--ctl-h) !important;
  padding:0 16px !important;
  line-height:var(--ctl-h) !important;
  border-radius:18px;         /* keep your pill look */
  box-sizing: border-box; 
  margin-bottom: 0 !important;
}

#add-symbol-form input[type="submit"]{
  height:var(--ctl-h) !important;
  line-height:var(--ctl-h) !important;
  border-radius:18px;
  padding:0 24px !important;             /* keeps text centered vertically */
  box-sizing: border-box; 
  width: auto !important;
  
}

/* ---------- Action bar: mobile layout ---------- */
@media (max-width: 640px){
  .action-bar{
    display:block;            /* stack sections */
  }

  .action-bar .actions-left{
    display:flex;             /* pills on one row */
    gap:10px;
    flex-wrap:nowrap;         /* keep them in a single row */
    overflow-x:auto;          /* allow horizontal scroll if tight */
    padding-bottom:6px;       /* room for scroll shadow if any */
  }
  .action-bar .actions-left .btn-pill{
    flex:0 0 auto;            /* don’t stretch pills */
    white-space:nowrap;
    font-size: 0.795em;
  }

  .action-bar .wl-switch{
    margin-top:12px;          /* dropdown sits under the pills */
  }
}

/* Optional: tidy select height to match pills (mobile & desktop) */
.wl-switch select{
  height:44px;
  border-radius:12px;
  padding:0 12px;
  width: 90%
}

/* end action bar */

/* Optional: subtle highlight of NEW rows (kept minimal) */
tr.row-new td:first-child{ border-left:3px solid color-mix(in srgb, var(--accent, #21d07a) 65%, transparent); }
tr.row-new{ background: color-mix(in srgb, Canvas 96%, var(--accent, #21d07a) 4%); }

/* Table styles */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.card.table-card {
  margin-bottom: 20px;
}

.card .table th, .card .table td, .table-card thead hd, .table-card tbody td {
  word-break: normal;
}

/* ---- Admin table: lean, consistent, and filter-safe ---- */
.admin-table{
  width: 100%;
  min-width: 1700px;
  table-layout: auto;             /* was fixed; auto plays nicer with long text */
  border-collapse: separate;      /* keep borders independent of hidden rows */
  border-spacing: 0;
  background: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.admin-table thead th{
  border-bottom: 1px solid #e5e7eb; /* header divider */
}

.admin-table td,
.admin-table th{
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 100px;
  /* no per-cell border-top; we draw row lines via bottom border on <td> */
}

.admin-table tbody td{
  border-bottom: 1px solid #e5e7eb; /* row separators that survive hidden rows */
}

/* column-specific widths (adjust if your column order changes) */
.admin-table th:nth-child(1),
.admin-table td:nth-child(1){
  min-width: 44px;                 /* star column */
}

.admin-table th:nth-child(9),
.admin-table td:nth-child(9){
  min-width: 144px;                /* tweak as needed for that column */
}

table, th, td {
  border: 1px solid #ddd !important;
  border-collapse: collapse;
}

table {
  border-collapse: collapse;
  width: 100%;
  background: white;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

tbody#starred-rows:empty::before {
   content: "\00a0"; /* non-breaking space */
  display: block;
  height: 0;
  visibility: hidden;
}

tbody#starred-rows:empty {
  display: none;
}

th, td {
  padding: 12px 15px;
  border: 1px solid #ddd;
  text-align: center;
  font-size: 1.1rem;
  word-break: break-word;
  vertical-align: middle;
}

table .news-cell {
    max-width: 220px !important;
}

/* News column */
.news-cell {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 0.85em !important;
  line-height: 1.3em !important;
  padding: 6px !important;             /* balanced padding around cell */
  vertical-align: top !important;
  text-align: center !important;
}



/* Headline link styled as plain text */
.news-cell .news-link {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3em;
  /*max-height: 2.6em;*/
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  padding: 3px 0;           /* small top & bottom padding just for the title */
}

.news-cell .news-link:hover {
  text-decoration: underline;
  color: #333;
}

/* Time under headline */
.news-cell .news-time {
  font-size: 0.75em;
  color: #666;
  margin-top: 2px;
}

.star {
  cursor: pointer;
  font-size: 1.8rem;
  user-select: none;
}

.starred {
  color: gold;
}

.not-starred {
  color: lightgray;
}

.star-icon {
  color: gray; /* default star color */
  cursor: pointer;
  font-size: 18px; /* or whatever size fits */
  user-select: none;
  transition: color 0.3s ease;
  font-size: 1.3em !important;
}

.star-icon.starred {
  color: gold;
  opacity: 1;
}

.star-icon:hover {
  color: orange;
}

.alpha-badge {
    display:inline-block;
    padding:2px 6px;
    border-radius:4px;
    font-weight:bold;
    background:#ffe066; /* yellow highlight */
    color:#333;
    font-size:0.9em;
}
.alpha-badge.off {
    background:#eee;
    color:#aaa;
}

/* Tiny subtle “new” dot shown before symbol when data-is-new=1 */
.new-dot{
  display:inline-block;
  width:6px;height:6px;border-radius:50%;
  margin-right:6px; vertical-align:middle;
  background: #4ade80; /* soft green; tweak to taste */
  box-shadow: 0 0 0 2px rgba(74,222,128,.15);
}

/* when filtering, we hide non-new rows (JS toggles .show-only-new) */
.show-only-new tr[data-is-new="0"] { display: none; }

/* small filter chip/button */
.btn-chip {
  display:inline-flex; align-items:center; gap:6px;
  font: inherit; font-size: 13px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(128,128,128,.35);
  background: transparent; color: inherit; cursor: pointer;
}
.btn-chip .chip-dot {
  width:8px; height:8px; border-radius:50%;
  background:#21d07a; box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.btn-chip.active {
  background: color-mix(in srgb, Canvas 88%, #21d07a 12%);
  border-color: rgba(33,208,122,.6);
}

.btn { position:inline-flex; display:inline-flex; align-items:center; gap:.5rem; }
.btn__icon { line-height:1; }
.btn__spinner {
  display:none;
  width:1em; height:1em; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Loading state */
.btn.has-spinner.is-loading { opacity:.85; pointer-events:none; }
.btn.has-spinner.is-loading .btn__icon,
.btn.has-spinner.is-loading .btn__text { opacity:.75; }
.btn.has-spinner.is-loading .btn__spinner { display:inline-block; }

#btn-eval-inplay.is-busy { opacity: 0.75; pointer-events: none; }

button {
  font-size: 1rem;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  background-color: #ff4d4d;
  color: white;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #e04343;
}

.view-chart::before {
  content: "📊";
}

.delete-btn::before {
  content: "🗑";
}

.refresh-btn::before {
  content: "🔄";
}

td button, td a {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

td button:first-child, td a:first-child {
  margin-left: 0;
}

/* Fade out animation for rows */
.fade-out {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.fade-out.hide {
  opacity: 0;
}

/* Button click effect */
button {
  transition: transform 0.1s ease, filter 0.1s ease;
  cursor: pointer;
}

button:active {
  transform: scale(0.95);
  filter: brightness(0.9);
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

.suggested {
  background-color: #fffae6; /* light yellow */
  border-left: 5px solid gold;
  transition: background-color 0.3s ease;
}

body.dark-mode .suggested {
  background-color: #4a3c00; /* dark golden brown */
  border-left: 5px solid #ffbf00; /* brighter gold */
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Sidebar styling */
.sidebar {
  position: fixed;
  top: 50px; left: calc(-250px + -40px); /* Hidden to the left */
}

/* Show sidebar */
.sidebar.active {
  left: 0;
}

/* Close button inside sidebar */
.close-btn {
  background: none;
  border: none;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  float: right;
}

/* Open button */
.open-btn {
  position: fixed;
  top: 15px;
  left: 15px;
  font-size: 25px;
  background: #222;
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 1100;
  padding: 8px 12px;
  border-radius: 4px;
}

.open-btn.hidden {
  display: none;
}

/* Sidebar nav styling */
.sidebar nav ul {
  list-style: none;
  padding: 0;
}

.sidebar nav ul li {
  margin: 20px 0;
}

.sidebar nav ul li a {
  color: #ccc;
  text-decoration: none;
  font-size: 18px;
  display: block;
  transition: color 0.2s;
  padding: 12px 10px;
}

.sidebar nav ul li a:hover {
  color: #fff;
}

/* Container for the add form */
.add-symbol-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Label style */
.add-symbol-form label {
  font-weight: 500;
  font-size: 1rem;
  color: #333;
}

/* Input style */
.add-symbol-form input[type="text"] {
  padding: 8px 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
  transition: all 0.2s ease-in-out;
}

.add-symbol-form input[type="text"]:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.4);
}

/* Submit button (light mode default) */
.add-symbol-form input[type="submit"] {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.add-symbol-form input[type="submit"]:hover {
  background-color: #0056b3;
}

/* DARK MODE */
body.dark-mode .add-symbol-form label {
  color: #ddd;
}

body.dark-mode .add-symbol-form input[type="text"] {
  background-color: #2a2a2a;
  border: 1px solid #555;
  color: #eee;
}

body.dark-mode .add-symbol-form input[type="text"]:focus {
  border-color: #1e88e5;
  box-shadow: 0 0 5px rgba(30, 136, 229, 0.4);
}

body.dark-mode .add-symbol-form input[type="submit"] {
  background-color: #43a047; /* green in dark mode */
}

body.dark-mode .add-symbol-form input[type="submit"]:hover {
  background-color: #2e7d32;
}

#toast-container {
  position: fixed;
  top: 60px; /* below toolbar */
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #333;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  font-size: 1rem;
  opacity: 0;
  transform: translateX(100%);
  animation: slideIn 0.3s forwards;
  cursor: default;
}

body.dark-mode #toast-container .toast {
  background-color: #222;
  color: #eee;
  box-shadow: 0 2px 12px rgba(255,255,255,0.1);
}

.toast.success {
  background-color: #4CAF50;
}

.toast.info {
  background-color: #2196F3;
}

.toast.warning {
  background-color: #ff9800;
}

.toast.error {
  background-color: #f44336;
}

.toast .close-btn {
  margin-left: 15px;
  background: none;
  border: none;
  color: inherit;
  font-weight: bold;
  font-size: 1.2rem;
  cursor: pointer;
  user-select: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.toast .close-btn:hover {
  opacity: 1;
}

/* In-play row highlight */
tr.in-play {
  background: color-mix(in srgb, var(--row-bg, Canvas) 90%, #ffeb99 10%);
}

/* Dark mode tweak */
body.dark-mode tr.in-play {
  background: color-mix(in srgb, var(--row-bg, #0f0f0f) 85%, #665c00 15%);
}

/* Badge next to symbol */
.in-play-badge {
  margin-left: 8px;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 10px;
  background: #ffa500;
  color: #222;
  font-weight: 600;
  vertical-align: middle;
}

.in-play-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background-color: #666; /* default gray */
}

/* new in play badge */

/* Base badge styling (reusable) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 9999px;
  padding: .2rem .55rem;
  font-size: .8rem;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.15);
  opacity: .95;
  white-space: nowrap;
}

/* In-Play palette */
.badge-inplay {
  background: rgba(16,185,129,.12);   /* emerald-ish */
  color: #34d399;
  border-color: rgba(16,185,129,.35);
  animation:pulseGlow 2s infinite;
}

/* Alpha badge */
.badge-alpha {
  background: rgba(0,100,255,0.12);
  color: #6ab4ff;
  border-color: rgba(0,100,255,0.35);
  animation: pulseCalm 4s infinite;
}

/* Optional tiers if you want them (like in-play) */
.badge-alpha.low  { background: rgba(0,100,255,.10); color:#6ab4ff; }
.badge-alpha.mid  { background: rgba(0,100,255,.16); color:#3b82f6; border-color: rgba(0,100,255,.45); }
.badge-alpha.high { background: rgba(0,100,255,.22); color:#3b82f6; border-color: rgba(0,100,255,.55);
                     box-shadow: 0 0 0 2px rgba(0,100,255,.08) inset; }
.badge-alpha.off  { background: rgba(148,163,184,.12); color:#cbd5e1; border-color: rgba(148,163,184,.25); animation:none }

.badge-inplay.off {
  animation: none;
}


.badge-inplay::before {
  content: '';
  width: .45rem; height: .45rem;
  border-radius: 9999px;
  background: currentColor;
  opacity: .85;
}

/* Tiers */
.badge-inplay.low  { background: rgba(16,185,129,.10); color:#34d399; }
.badge-inplay.mid  { background: rgba(16,185,129,.16); color:#22c55e; border-color: rgba(16,185,129,.45); }
.badge-inplay.high { background: rgba(16,185,129,.22); color:#22c55e; border-color: rgba(16,185,129,.55);
                     box-shadow: 0 0 0 2px rgba(16,185,129,.08) inset; }
.badge-inplay.off  { background: rgba(148,163,184,.12); color:#cbd5e1; border-color: rgba(148,163,184,.25); }

/* (Optional) Light mode tweaks */
:root:not(.dark-mode) .badge {
  border-color: rgba(0,0,0,.12);
}
:root:not(.dark-mode) .badge-inplay.off {
  background: rgba(0,0,0,.06); color:#475569; border-color: rgba(0,0,0,.12);
}

/* Base VWAP badge style */
.badge.vwap {
  background: var(--panel, #f5f5f5);
  color: var(--text, #222);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* When above VWAP (buyers in control) */
.badge.vwap.above {
  background: rgba(34,197,94,0.15);   /* light green */
  color: #16a34a;                     /* green text */
}

/* When below VWAP (sellers in control) */
.badge.vwap.below {
  background: rgba(239,68,68,0.15);   /* light red */
  color: #dc2626;                     /* red text */
}

.ip-badge {
  display: inline-block;
  min-width: 50px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  text-align: center;
}

.ip-badge.vwap.above {
  background: rgba(34,197,94,0.15);
  color: #16a34a;
}

.ip-badge.vwap.below {
  background: rgba(239,68,68,0.15);
  color: #dc2626;
}

.in-play-badge.off {
  background-color: #999;
  color: #eee;
  font-weight: normal;
}

/* Score-based colors */
.in-play-badge.score-low {
  background-color: #e74c3c; /* red */
}
.in-play-badge.score-mid {
  background-color: #f39c12; /* orange */
}
.in-play-badge.score-high {
  background-color: #27ae60; /* green */
}

body.dark-mode tr.in-play {
  outline-color: rgba(255, 165, 0, 0.35);
}

body.dark-mode .in-play-badge {
  background: #cc8400;
  color: #fff;
}

.pc-pos   { color: limegreen; font-weight: bold; }
.pc-neg   { color: red; font-weight: bold; }
.pc-zero  { color: #999; }

.gap-pos  { color: limegreen; }
.gap-neg  { color: red; }
.gap-zero { color: #999; }

.rvol-strong { color: limegreen; font-weight: bold; }
.rvol-normal { color: #4CAF50; }
.rvol-weak   { color: #999; }

/* Modal shell */
.modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: grid; place-items: center;
  z-index: 1000;
}
.modal-sheet{
  width: min(720px, 92vw);
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow: hidden;
}
body.dark-mode .modal-sheet{ background:#1c1c1c; } /* matches your dark mode */ /*  */

.modal-head, .modal-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px; border-bottom: 1px solid #e8e8e8;
}
.modal-foot{ border-top: 1px solid #e8e8e8; border-bottom: none; }
.modal-title{ margin:0; font-size:16px; }
.modal-x{ border:none; background:transparent; font-size:22px; line-height:1; cursor:pointer; }

.modal-body{ padding: 14px; display:flex; flex-direction:column; gap:14px; }
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field .label{ font-size:12px; color:#666; }
.field input{ padding:6px 8px; width:160px; }

.grid{
  display:grid; grid-template-columns: repeat(3, minmax(180px,1fr));
  gap: 10px;
}
.card{
  border:1px solid #ddd; border-radius:8px; padding:10px;
  display:flex; flex-direction:column; gap:6px;
}
.card div{ font-size:12px; color:#666; }
.card strong{ font-size:16px; }

/* new change css */

/* percent change */
td.percent-change.pc-pos { color: #18b26b; }   /* green */
td.percent-change.pc-neg { color: #e05252; }   /* red  */
td.percent-change.pc-zero { opacity: .8; }

/* gap % (optional mirror styling) */
td.gap-pct.gap-pos { color: #18b26b; }
td.gap-pct.gap-neg { color: #e05252; }
td.gap-pct.gap-zero { opacity: .8; }

.bull {
  color: #18b26b;
}

.bear {
  color: #e05252;
}

.wl-toolbar{
  position: sticky; top: 0; z-index: 5;
  display:flex; justify-content: space-between; align-items: center;
  gap:12px; padding:10px 0; background: #fff; border-bottom:1px solid #eee;
}
body.dark-mode .wl-toolbar{ background:#111; border-color:#222; }

.wl-row{ display:flex; align-items:center; gap:8px; }
.wl-row select{ padding:6px 8px; border-radius:8px; border:1px solid #ddd; }
body.dark-mode .wl-row select{ border-color:#333; background:#151515; color:#ddd; }

.wl-metrics{ display:flex; gap:8px; align-items:center; }
.badge{
  font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.04);
}
.badge-new{ background: rgba(40,200,120,.12); border-color: rgba(40,200,120,.25); }

.empty-state{
  margin:18px 0; padding:28px; border:1px dashed #ddd; border-radius:12px; text-align:center;
}
body.dark-mode .empty-state{ border-color:#333; }
.empty-state h3{ margin:0 0 6px; }
.empty-state .muted{ color:#777; }

/* === Sidebar Navigation (brand aware) === */
.sb__nav {
  padding: 1rem;
}

.sb__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sb__list li {
  margin: 0.4rem 0;
}

.sb__list a {
  text-decoration: none;
  color: var(--muted);
  display: block;
  padding: 6px 10px;
  border-radius: 4px;
  transition: background .2s, color .2s;
}

.sb__list a:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

.sb__list a.active {
  background: var(--accent);
  color: #052214; /* keeps same contrast as your buttons */
  font-weight: 600;
}

.sb__list hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 1rem 0;
}

.muted {
  color: #999;
  font-size: 0.85em;
}

.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
}
.modal.hidden { display: none; }
.modal-content {
  background: var(--panel);
  color: var(--text);
  padding: 20px;
  border-radius: 12px;
  width: min(400px, 90%);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.modal-content label {
  display: block; margin: 12px 0;
}
.modal-content input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
.modal-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* === Undo Discover Bar === */
#undo-discover {
  display: none; /* shown by JS */
  display: flex; /* flex layout */
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid transparent;
}

/* Light mode */
body:not(.dark-mode) #undo-discover {
  background: #f1fdf4;
  border-color: #c9ebd5;
  color: #064420;
}

/* Dark mode */
body.dark-mode #undo-discover {
  background: rgba(30, 60, 40, 0.85);
  border-color: rgba(100, 200, 140, 0.35);
  color: #d1fae5;
}

/* Symbol preview list */
#undo-discover .undo-list {
  font-family: monospace, monospace;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1; /* expand to take all middle space */
}

/* Count badge */
#undo-discover .undo-count {
  font-weight: 600;
  margin-right: 6px;
}

/* Undo button pinned right */
#btn-undo-discover {
  margin-left: auto; /* push it to far right */
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  background: #10b981;  /* green */
  color: #fff;
  transition: background 0.2s;
}

#btn-undo-discover:hover:not(:disabled) {
  background: #059669;
}

#btn-undo-discover:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== Add-to-Watchlist: Popover picker ===== */
#wlPicker[hidden] { display: none !important; }
.wl-picker {
  position: fixed; inset: 0; z-index: 3600;
  background: rgba(0,0,0,.45);
  display: grid; place-items: center;
  padding: 16px;
  backdrop-filter: saturate(120%) blur(2px);
}
.wl-picker__card {
  width: 100%; max-width: 420px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(148,163,184,.22);
  background: var(--surface, #0f172a);
  color: var(--text, #e5e7eb);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  display: flex; flex-direction: column;
}
.wl-picker__head {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px; border-bottom:1px solid rgba(148,163,184,.15);
}
.wl-picker__head h3 { margin:0; font-size:14px; font-weight:800; letter-spacing:.2px; }
.wl-symbol { opacity:.85; font-weight:700; }
.wl-picker__close {
  border: none;
  background: rgba(148,163,184,.15);
  color: var(--text, #e5e7eb);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}
.wl-picker__close:hover {
  background: rgba(148,163,184,.25);
  color: #fff;
}
.wl-picker__body { padding:10px 10px 0; max-height: 50vh; overflow:auto; }
.wl-search { margin-bottom:8px; }
.wl-search input {
  width:100%; padding:9px 10px; border-radius:10px;
  border:1px solid rgba(148,163,184,.25);
  background:#0b1220; color:#e5e7eb;
}
.wl-list { list-style:none; margin:0; padding:0; padding-bottom: 20px; font-size: 0.8em  }
.wl-item { padding:6px 6px; border-radius:10px; }
.wl-item:hover { background: rgba(148,163,184,.08); }
.wl-item label { display:flex; align-items:center; gap:10px; cursor:pointer; }
.wl-item input[type="checkbox"] { accent-color:#22c55e; }
.wl-name { flex:1; }
.wl-badge {
  font-size:11px; padding:2px 8px; border-radius:999px;
  border:1px solid rgba(148,163,184,.25);
  background: rgba(2,6,23,.6);
}
.wl-badge--owner { border-color: rgba(74,222,128,.35); }
.wl-badge--default { border-color: rgba(96,165,250,.35); }
.wl-item[data-disabled="1"] { opacity:.6; }
.wl-item label.is-disabled { cursor:not-allowed; }

.sym-ticker .btn-pill {
  position: relative;
  top: -10px;
  margin-left: 8px;
  font-size: 11px;
  padding: 4px 9px;
}

.wl-picker__foot {
  display:flex; justify-content:flex-end; gap:8px;
  padding:10px; border-top:1px solid rgba(148,163,184,.15);
}

.ip-status {
  position: fixed;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,.7);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  z-index: 9999;
}

/* --- Profile page (light defaults) --- */
.profile-wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }
.p-head { display:flex; gap:16px; align-items:center; margin-bottom: 14px; }
.p-av { width:72px; height:72px; border-radius: 50%; overflow:hidden; background:#eee; }
.p-meta { display:flex; flex-direction:column; gap:4px; }
.p-name { font-weight:800; font-size:20px; }
.p-sub { opacity:.75; font-size:13px; }

.p-grid { display:grid; grid-template-columns: 1.4fr .9fr; gap:16px; }
@media (max-width: 960px){ .p-grid { grid-template-columns: 1fr; } }

.card { background: var(--surface, #fff); border:1px solid var(--border,#e5e7eb);
        border-radius: 10px; padding: 14px 16px; }
.card h2 { margin:0 0 10px; font-size:16px; font-weight:800; }

.wl-list { display:flex; flex-direction:column; gap:10px; }
.wl-row { display:flex; justify-content:space-between; align-items:center; gap:10px;
          border:1px dashed rgba(128,128,128,.25); border-radius:8px; padding:8px 10px; }
.wl-name { font-weight:700; }
.wl-meta { font-size:12px; opacity:.75; }

.star-grid { display:flex; gap:6px; flex-wrap:wrap; }
.star-chip { font-size:12px; padding:6px 8px; border:1px solid var(--border,#e5e7eb);
            border-radius:999px; background:var(--panel,#fafafa); }

.act-list { display:flex; flex-direction:column; gap:10px; }
.act-item { border:1px dashed rgba(128,128,128,.25); border-radius:8px; padding:10px; }
.act-meta { font-size:12px; opacity:.75; margin-bottom:6px; }

.sett-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0;
            border-top:1px dashed rgba(128,128,128,.25); }
.sett-row:first-child { border-top:none; }
.muted { opacity:.7; }
a.btn { display:inline-block; padding:6px 10px; border:1px solid var(--border,#e5e7eb); border-radius:8px; }

/* --- Dark mode overrides --- */
.dark-mode {
  --surface: #11161c;
  --panel:   #0c1117;
  --border:  rgba(255,255,255,.12);
  --text:    #e6eef7;
  --muted:   rgba(230,238,247,.65);
}

.dark-mode body,
.dark-mode .profile-wrap { color: var(--text); }

.dark-mode .card { background: var(--surface); border-color: var(--border); }
.dark-mode .p-sub,
.dark-mode .muted { color: var(--muted); }

.dark-mode .wl-row { border-color: var(--border); }
.dark-mode .star-chip { background: var(--panel); border-color: var(--border); }

.dark-mode .act-item { border-color: var(--border); }
.dark-mode a.btn { border-color: var(--border); color: var(--text); }
.dark-mode a.btn:hover { background: #1a222d; }

/* admin-stars */

#toast-container{position:fixed;right:16px;bottom:16px;z-index:99999;display:flex;flex-direction:column;gap:10px}
.toast{min-width:220px;max-width:360px;padding:10px 12px;border-radius:8px;background:#333;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;transform:translateY(10px);transition:opacity .18s,transform .18s;font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{background:#1e7e34}
.toast.error{background:#c0392b}
.toast.info{background:#1f6feb}
.toast.warn{background:#b36b00}

/* ===== Discover modal: preview area ===== */
#discoverModal .discover-preview {
  display: none;            /* JS flips to block when there are results */
  margin-top: 10px;
}

#discoverModal .discover-preview .preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
}

.discover-preview.hasResults {
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 10px;

  border-radius: 8px;
  background-color: var(--panel);
  color: var(--text);

  padding: 10px;

}

/* Only apply scroll when results are present */
#discoverModal .discover-preview.hasResults .preview-body {
  margin-top: 8px;
  padding: 8px;
  border-top: 1px dashed rgba(0,0,0,0.12);
  max-height: 280px;   /* cap height */
  overflow-y: auto;    /* scroll if needed */
  overflow-x: hidden;
  border: 1px solid #ddd;
}

.modal-card-foot {
  padding-top: 18px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  margin-top: 20px;
}

/* Dark mode border tone */
body.dark-mode #discoverModal .discover-preview .preview-body {
  border-top-color: rgba(255,255,255,0.15);
}

body.dark-mode .modal-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  background-color: #121212;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  padding: clamp(24px,4vw,40px);
  box-shadow: 0 16px 50px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.04);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* Symbol chips */
#discoverModal .discover-preview .preview-body .chip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: rgba(0,0,0,0.06);
  white-space: nowrap;
}

body.dark-mode #discoverModal .discover-preview .preview-body .chip {
  background: rgba(255,255,255,0.09);
}

/* Make sure long lists wrap nicely */
#discoverModal .discover-preview .preview-body {
  display: block;           /* ensure inline chips wrap normally */
  word-wrap: break-word;
}

.wl-badge {
  font-size: 10px;
  padding: 2px 5px;
  margin-left: 4px;
  border-radius: 4px;
  background: #eee;
  color: #555;
}
.wl-badge.owned { background: #d1fae5; color: #065f46; }   /* greenish */
.wl-badge.public { background: #e0e7ff; color: #3730a3; } /* bluish */

/* === Modal Overlay === */
/* ========= Modal (overlay) ========= */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 4000; /* above toolbar/popovers */
  background: rgba(0,0,0,.55);
  backdrop-filter: saturate(120%) blur(4px);
  align-items: center;
  justify-content: center;
  padding: 16px;               /* mobile breathing room */
  opacity: 0;
  transition: opacity .18s ease;
}
.modal.show { display: flex !important; opacity: 1; }

/* ========= Card ========= */
.modal-card {
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  padding: 18px 18px 14px;
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  border: 1px solid rgba(148,163,184,.18);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
    #0b1220;                          /* dark surface */
  color: #e5e7eb;
  animation: modalFIn .22s ease;
}

.modal-card {
  max-height: 80vh;
  overflow-y: auto;
}

@keyframes modalFIn { from { transform: translateY(-6px); opacity:.9; } to { transform:none; opacity:1; } }

.modal-card h2 {
  font-size: 1.4rem;   /* ~22px */
  font-weight: 600;
  margin-bottom: 1rem;
}

.modal-card h3 {
  font-size: 1.1rem;   /* ~18px */
  font-weight: 600;
  margin: 0.0rem 0 1.2rem;
}

/* ========= Form ========= */
.form-group { margin-bottom: 12px; }
.form-group label { display:block; margin-bottom:6px; font-size:13px; color:#cbd5e1; }

.form-group input[type="text"]{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(2,6,23,.8);
  color: #f8fafc;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-group input[type="text"]::placeholder{ color:#94a3b8; }
.form-group input[type="text"]:focus{
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,.18);
}

/* ========= Toggle (Public) ========= */

.switch{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none;
}
.switch input{ position:absolute; opacity:0; pointer-events:none; }
.switch-track{
  position:relative; width:46px; height:26px; border-radius:999px;
  background:#334155; transition: background .15s ease;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.25);
}
.switch-track::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#e5e7eb; transition: transform .18s ease, background .15s ease;
}
.switch input:checked + .switch-track{ background:#16a34a; }
.switch input:checked + .switch-track::after{ transform: translateX(20px); background:#fff; }
.switch-label{ font-size:13px; color:#cbd5e1; }

/* ========= Actions ========= */
.modal-actions{
  display:flex; justify-content:flex-end; gap:10px; margin-top: 14px;
}

/* Modal-local pill buttons (so you don’t have to touch global styles) */
.modal-card .btn-pill{
  appearance:none; border:1px solid rgba(148,163,184,.25);
  background: rgba(2,6,23,.6); color:#e5e7eb;
  border-radius: 999px; padding: 8px 14px; font-size: 13px; cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .02s;
}
.modal-card .btn-pill:hover{ background:#0b1220; }
.modal-card .btn-pill:active{ transform: translateY(1px); }

.modal-card .btn-pill.primary{
  border-color: rgba(34,197,94,.5);
  background: radial-gradient(120% 120% at 30% -20%, rgba(74,222,128,.20), transparent 60%), #0b1220;
  box-shadow: 0 0 0 2px rgba(34,197,94,.15), 0 8px 20px rgba(34,197,94,.18);
}
.modal-card .btn-pill.primary:hover{
  border-color: rgba(34,197,94,.75);
  box-shadow: 0 0 0 2px rgba(34,197,94,.22), 0 10px 26px rgba(34,197,94,.25);
}

/* ========= Close (×) ========= */
.modal-close{
  position:absolute; top:20px; right:20px;
  width:30px; height:30px; border-radius:8px;
  border:1px solid rgba(148,163,184,.25);
  background: rgba(2,6,23,.6);
  color:#e5e7eb; font-size:16px; line-height:28px; text-align:center;
  cursor:pointer; padding:0; transition: background .15s, border-color .15s;
}
.modal-close:hover{ background:#0b1220; border-color:#94a3b8; }

/* ========= Light mode safety ========= */
@media (prefers-color-scheme: light){
  .modal-card{
    background:
      radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.6) 60%),
      #ffffff;
    color:#111827; border-color: rgba(0,0,0,.08);
  }
  .form-group input[type="text"]{ background:#fff; color:#111827; border-color:#e5e7eb; }
  .form-group input[type="text"]:focus{ box-shadow: 0 0 0 3px rgba(96,165,250,.25); }
  .switch-track{ background:#e5e7eb; box-shadow: inset 0 0 0 1px #e5e7eb; }
  .switch input:checked + .switch-track{ background:#16a34a; }
  .modal-card .btn-pill{ background:#f8fafc; color:#111827; border-color:#e5e7eb; }
  .modal-card .btn-pill:hover{ background:#eef2f7; }
  .modal-close{ background:#f8fafc; color:#111827; border-color:#e5e7eb; }
}

/* Fix "Public" label hidden behind the switch */

/* override the generic .form-group label rule */
.form-group label.switch {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin: 0;                 /* no extra spacing */
}

/* make sure text renders beside and above any overlap */
.switch-label {
  color: #cbd5e1;            /* light text in dark modal */
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

/* keep the track inline, not stretching */
.switch-track {
  display: inline-block;
  vertical-align: middle;
}

.discover-preview.has-data .preview-body {
  max-height: 260px;
  overflow: auto;
  border: 1px dashed rgba(0,0,0,0.12);
  padding: 10px;
  border-radius: 8px;
}
.discover-preview .preview-body .sym {
display: inline-block;
margin: 0 10px 6px 0;
white-space: nowrap;
opacity: .9;
}
.discover-preview.is-collapsed .preview-body { display: none; }

/* Watchlist Public */

/* ===== Watchlist Hero ===== */

.wl-hero {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  /* subtle border for light mode; rely on vars if you have them */
  border: 1px solid var(--border, rgba(0,0,0,.08));
  margin: 12px 0 16px;
  min-height: 180px;
  background: #0c1117; /* fallback while bg loads */
}

/* Gradient (shown when no cover image is applied to this layer) */
.wl-hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0c1117 0%, #0f1b13 40%, #22c55e 100%);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Darken overlay so text is legible on any cover/gradient */
.wl-hero__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 60% at 20% 0%, rgba(0,0,0,.35), rgba(0,0,0,.6)),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  z-index: 1;
}

.wl-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 18px;
}

.wl-hero__left {
  flex: 1 1 auto;
  min-width: 0; /* guards against long titles pushing layout */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 14px;
  grid-row-gap: 8px;
  align-items: center;
}

.wl-hero__avatar-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  grid-row: span 2; /* sit beside title + tagline */
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.2);
}

.wl-hero__avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Settings cog on avatar */
.wl-settings-btn {
  position: absolute;
  right: -6px;
  bottom: -6px;
  transform: translate(0,0);
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.4);
  background: rgba(255,255,255,.9);
  color: #0c1117;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.wl-settings-btn:hover { background: #fff; }
.wl-settings-btn:active { transform: translate(0,0) scale(.98); }

/* Titles & meta */
.wl-hero__meta { min-width: 0; }
.wl-hero__title {
  margin: 0;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.wl-hero__tagline {
  margin: 2px 0 6px;
  color: rgba(255,255,255,.9);
  font-size: 13px;
  line-height: 1.35;
}
.wl-hero__owner {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.85);
  font-size: 13px;
}
.wl-hero__owner-label { opacity: .8; }
.wl-hero__owner-link {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.wl-hero__owner-link:hover { text-decoration: underline; }

.wl-hero__socials {
  display: inline-flex;
  gap: 8px;
  margin-left: 8px;
}
.wl-hero__socials a {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: 14px;
}
.wl-hero__socials a:hover { background: rgba(255,255,255,.16); }

/* Stats/badges */
.wl-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.wl-stat,
.wl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  backdrop-filter: blur(2px);
}
.wl-badge.wl-badge-public {
  /* green chip (same style family as stats) */
  background: rgba(34, 197, 94, .9);
  border-color: rgba(34, 197, 94, .95);
}
.wl-badge.wl-badge-private {
  background: rgba(108, 117, 125, .9);
  border-color: rgba(108, 117, 125, .95);
}

/* Right-side CTA column (auto width) */
.wl-hero__right {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* If you decide to hide the right column (e.g., private to non-owner),
   just don't render it, or add .is-hidden to collapse it. */
.wl-hero__right.is-hidden { display: none !important; }

/* Cover image block */
.wlconf-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 1;      /* 1600x400 = 4:1 */
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
.wlconf-cover.has-image {
  border: none;
  background: var(--cover) center/cover no-repeat;
}
.wlconf-cover-preview {
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  pointer-events: none;
}

/* Avatar block */
.wlconf-avatar {
  position: relative;
  width: 120px;
  height: 120px;
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wlconf-avatar.has-image {
  border: none;
  background: var(--avatar) center/cover no-repeat;
}
.wlconf-avatar-preview {
  color: rgba(255,255,255,0.4);
  font-size: 20px;
  pointer-events: none;
}

/* --- Kill any inherited multi-column layout inside the settings modal --- */
#wlSettings .wlconf-section,
#wlSettings .wlconf-upload,
#wlSettings .wlconf-cover,
#wlSettings .wlconf-avatar,
#wlSettings .wlconf-cover-preview,
#wlSettings .wlconf-avatar-preview {
  column-count: 1;
  columns: auto;
  column-gap: normal;
  column-rule: none;
  -webkit-column-count: 1;
  -moz-column-count: 1;
}

/* --- Ensure the upload blocks are vertical, not side-by-side --- */
#wlSettings .wlconf-cover,
#wlSettings .wlconf-avatar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Avatar preview box --- */
#wlSettings .wlconf-avatar-preview {
  width: 160px;
  aspect-ratio: 1 / 1;
  border: 1px dashed rgba(255,255,255,.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}

/* --- Cover preview box (keeps single column) --- */
#wlSettings .wlconf-cover-preview {
  width: 100%;
  max-width: 480px;         /* or whatever you like */
  height: 140px;            /* hint size only */
  border: 1px dashed rgba(255,255,255,.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}

/* Make file inputs behave predictably */
#wlSettings .wlconf-file {
  max-width: 100%;
}

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .wl-hero__inner {
    flex-direction: column;
    gap: 14px;
    padding: 16px;
  }
  .wl-hero__left {
    grid-template-columns: 56px 1fr;
  }
  .wl-hero__avatar-wrap {
    width: 56px; height: 56px; border-radius: 10px;
  }
  .wl-hero__title { font-size: 18px; }
  .wl-hero__right { width: 100%; }
  .wl-hero__right .btn-pill { width: 100%; justify-content: center; }
}

#wlSettings .modal-actions {
  position: sticky;
  bottom: 0;
  background: var(--surface-muted, #f8f9fa); /* light grey in light mode */
  border-top: 1px solid var(--border-color, #e5e5e5);
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  z-index: 10000;
}
body.dark-mode #wlSettings .modal-actions {
  background: #1c1c1c !important; /* match dark modal */
  border-top: 1px solid #333 !important;
  padding: 16px;
}

/* Section cards */
#wlSettings .wlconf-section {
  border-radius: 10px;
  padding: 14px;
  border: 1px solid rgba(0,0,0,.08); /* neutral border */
}

/* Dark mode */
body.dark-mode #wlSettings .wlconf-section {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

/* Light mode */
body:not(.dark-mode) #wlSettings {
  background: #e3e6ea;   /* subtle solid fill */
  border-color: rgba(0,0,0,0.1);
}

  body:not(.dark-mode) #wlSettings .wlconf-section {
    background: #f9f9f9;   /* subtle solid fill */
    border-color: rgba(0,0,0,0.1);
  }

@media (max-width: 768px) {
  .wl-settings-grid {
    grid-template-columns: 1fr; /* stack vertically on small screens */
  }
  .toolbar-title {
    display: none;
  }  
  #openSidebar {
    display: none;
  }
  nav#mobile-bottombar { display: flex; }
  /* optional: lift content so bar doesn’t overlap bottom content */
  html.has-mobilebar, body.has-mobilebar {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
  }
  .sidebar {
    top: 0px;
  }
}

/* ================================
   Watchlist Settings (scoped)
   Markup parent:  <div class="modal-card wlconf-card" id="wlSettings">
   ================================ */

/* Card chrome */
#wlSettings.wlconf-card{
  border-radius:16px;
  padding:20px;
  background:var(--surface, rgba(255,255,255,.06));
  border:1px solid var(--border, rgba(255,255,255,.10));
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  max-width:980px;
  width:92vw;
  margin:0 auto;
}

/* Titles */
#wlSettings .wlconf-title{
  margin:0 0 4px;
  font-size:24px;
  font-weight:800;
  letter-spacing:.2px;
}
#wlSettings .wlconf-sub{
  margin:0 0 16px;
  opacity:.8;
  font-size:13px;
}

/* Grid layout (left/right columns) */
#wlSettings .wlconf-grid{
  display:flex;
  align-items:flex-start;
  gap:16px;
}

/* Left fills space */
#wlSettings .wl-hero__left{
  flex:1 1 auto;
  min-width:0;
}

/* Right is a fixed column */
#wlSettings .wl-hero__right{
  flex:0 0 320px;
  max-width:420px;
}

/* Panels */
#wlSettings .wlconf-section{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:12px;
}
#wlSettings .wlconf-h3{
  margin:0 0 10px;
  font-size:15px;
  font-weight:800;
}

/* Fields */
#wlSettings .wlconf-field{ margin:0 0 12px; }
#wlSettings label{ font-size:12px; font-weight:700; display:block; margin:0 0 6px; }
#wlSettings .wlconf-help{ font-size:12px; opacity:.7; margin-top:6px; }

/* Inputs */
#wlSettings input[type="text"],
#wlSettings input[type="url"],
#wlSettings textarea{
  width:100%;
  box-sizing:border-box;
  padding:9px 10px;
  border-radius:8px;
  border:1px solid var(--border, rgba(255,255,255,.12));
  background:var(--panel, rgba(0,0,0,.18));
  color:var(--text, #e8eaed);
  font:inherit;
}
#wlSettings textarea{ resize:vertical; }

/* Placeholder tint (works in dark mode) */
#wlSettings input::placeholder,
#wlSettings textarea::placeholder{ color:rgba(255,255,255,.55); }

/* Radio choice pills */
#wlSettings .wlconf-choice{ display:flex; gap:10px; flex-wrap:wrap; }
#wlSettings .wlconf-radio{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  cursor:pointer; user-select:none;
}
#wlSettings .wlconf-radio input{ accent-color:#22c55e; }

/* Switch */
#wlSettings .wlconf-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
#wlSettings .wlconf-switch-track{
  position:relative; width:40px; height:22px; border-radius:999px;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.12);
  display:inline-block; vertical-align:middle;
}
#wlSettings .wlconf-switch input{ position:absolute; opacity:0; pointer-events:none; }
#wlSettings .wlconf-switch-track::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#fff; transform:translateX(0); transition:transform .18s ease;
}
#wlSettings .wlconf-switch input:checked + .wlconf-switch-track{ background:#22c55e; }
#wlSettings .wlconf-switch input:checked + .wlconf-switch-track::after{ transform:translateX(18px); }
#wlSettings .wlconf-switch-label{ font-size:13px; }

/* Upload blocks */
#wlSettings .wlconf-upload{ margin:0 0 12px; }
#wlSettings .wlconf-upload-label{ font-size:12px; font-weight:700; display:block; margin:0 0 6px; }
/* container chrome */
#wlSettings .wlconf-cover,
#wlSettings .wlconf-avatar {
  border: 1px dashed rgba(255,255,255,.18);
  background-color: rgba(255,255,255,.03);  /* ← was `background:` */
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* when you apply a preview image to the same element */
#wlSettings .wlconf-cover,
#wlSettings .wlconf-avatar {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#wlSettings .wlconf-cover-preview{ height:90px; display:grid; place-items:center; opacity:.7; }
#wlSettings .wlconf-avatar-preview{ height:80px; display:grid; place-items:center; opacity:.7; }
#wlSettings .wlconf-file{ margin-top:8px; width:100%; }

/* Coming soon */
#wlSettings .wlconf-comingsoon .wlconf-tag{
  background:rgba(255,255,255,.14); padding:2px 6px; border-radius:999px;
  font-size:11px; margin-left:6px;
}
#wlSettings .wlconf-switch-disabled{ opacity:.55; cursor:not-allowed; }

/* Actions row */
#wlSettings .wlconf-actions{
  display:flex; justify-content:flex-end; gap:10px; margin-top:12px;
  background:transparent; border:none; padding:0;
}


/* === Fix: stack fields vertically inside settings sections === */
#wlSettings .wl-hero__left,
#wlSettings .wl-hero__right {
  display: block;         /* kill any inherited flex/grid */
}

#wlSettings .wlconf-section {
  display: block;         /* ensure the section itself isn't flex */
}

#wlSettings .wlconf-section > * {
  display: block;         /* stack direct children */
  width: 100%;            /* take full width of the section */
  max-width: 100%;
}

/* Fields & uploads should not become columns */
#wlSettings .wlconf-field,
#wlSettings .wlconf-upload {
  display: block;
  width: 100%;
}

/* Inputs really full width */
#wlSettings input[type="text"],
#wlSettings input[type="url"],
#wlSettings input[type="file"],
#wlSettings textarea {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* Choice groups can wrap but not squish inputs into columns */
#wlSettings .wlconf-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#wlSettings .wlconf-radio {
  white-space: nowrap;
}

/* Right column width stays fixed; left fills the rest */
#wlSettings .wlconf-grid {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
#wlSettings .wl-hero__left  { flex: 1 1 auto; min-width: 0; }
#wlSettings .wl-hero__right { flex: 0 0 320px; max-width: 420px; }

/* Reset hero inner padding inside the settings modal */
#wlSettings .wl-hero__inner {
  padding: 0;     /* remove side padding */
  margin: 0;      /* remove auto margins if any */
}

/* Add spacing below the grid inside modal */
#wlSettings .wl-hero__inner {
  padding: 0;
  margin: 0 0 20px 0;   /* 20px gap at bottom */
}

/* Container: two columns that match height of the tallest */
#wlSettings .wl-hero__inner {
  display: flex !important;      /* override any grid/contents */
  align-items: stretch;           /* key: make children equal height */
  gap: 16px;
  padding: 0;                     /* you already liked this */
  margin: 0 0 20px;               /* bottom gap before next section */
}

/* Left section grows; right can be fixed width */
#wlSettings .wl-hero__left.wlconf-section {
  flex: 1 1 auto;                 /* fill remaining width */
  display: flex;                  /* so its background fills full height */
  flex-direction: column;
}

/* Right section fixed width (adjust as you like) */
#wlSettings .wl-hero__right.wlconf-section {
  flex: 0 0 360px;                /* fixed column width */
  max-width: 360px;
  display: flex;                  /* make its background fill full height */
  flex-direction: column;
}

/* When the right section is hidden, left naturally becomes full width */
#wlSettings .wl-hero__right.wlconf-section[hidden] {
  display: none !important;
}

/* Optional: make the card backgrounds themselves fill the stretched height */
#wlSettings .wlconf-section {
  height: auto;                   /* allow flex to size it */
}

/* Ensure left section expands fully when right is hidden */
#wlSettings .wl-hero__left {
  flex: 1 1 100%;
  max-width: 100%;
}

/* Pills */
.jr-pills { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px; }
.jr-pill {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 6px 10px; border-radius: 999px; font-size: 13px; cursor: pointer;
}
.jr-pill:hover { transform: translateY(-1px); }
.jr-pill.is-alpha { border-color: rgba(34,197,94,.5); box-shadow: 0 0 0 1px rgba(34,197,94,.2) inset; }
.jr-pill__sym { font-weight: 600; letter-spacing: .2px; }
.jr-pill__tag { margin-left: 6px; font-size: 11px; padding: 2px 6px; border-radius: 999px; background: #163d28; color: #22c55e; }

/* P&L badges */
.jr-pnl-row { display:flex; gap:16px; align-items:flex-end; }
.jr-pnl-label { font-size:12px; opacity:.75; margin-bottom:4px; }
.jr-pnl-badge {
  display:inline-block; min-width: 88px; text-align:center;
  padding:6px 10px; border-radius:8px; background: #1f2937; color:#e5e7eb; font-weight:600;
}
.jr-pnl-badge--muted { background:#111827; color:#9ca3af; }
.jr-pnl-badge.is-gain { background:#073a23; color:#22c55e; }
.jr-pnl-badge.is-loss { background:#3a0b0b; color:#f87171; }

/* container */
.jr-symbol-field { position: relative; }

/* Autocomplete styling */
.autocomplete-list {
  position: absolute;
  background: var(--card-bg, #fff);
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 2px;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  z-index: 1000;
  display: none;
}

.autocomplete-item {
  padding: 6px 10px;
  cursor: pointer;
  color: #000;
}

.autocomplete-item:hover {
  background: #22c55e;
  color: #fff;
}

/* Base field styling (catch the symbol input too) */
#tradeJournalModal input[type="text"],
#tradeJournalModal input[type="number"],
#tradeJournalModal textarea {
  background: var(--field-bg, rgba(255,255,255,.06));
  color: var(--text, #e6e6e6);
  border: 1px solid rgba(255,255,255,.15);
  -webkit-appearance: none;
  appearance: none;
}

/* Placeholder tint */
#tradeJournalModal input::placeholder,
#tradeJournalModal textarea::placeholder {
  color: rgba(230,230,230,.5);
}

/* iOS/Safari autofill fix (forces our dark bg + text) */
#tradeJournalModal input:-webkit-autofill,
#tradeJournalModal input:-webkit-autofill:hover,
#tradeJournalModal input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg, rgba(255,255,255,.06)) inset !important;
  -webkit-text-fill-color: var(--text, #e6e6e6) !important;
  caret-color: var(--text, #e6e6e6);
  transition: background-color 9999s ease-out 0s; /* suppress flash */
}

/* Remove any white inner bevels on iOS */
#tradeJournalModal input[type="text"] {
  background-clip: padding-box;
}

.jr-chart-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 320px; /* adjust as you like */
}

/* Toolbar row above the table */
.table-toolbar-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 12px 4px; /* match your card spacing */
  margin-bottom: 10px;
}

/* Left side holds the search form; keep it flexible */
.table-toolbar-row .toolbar-left{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;         /* lets inputs wrap on small screens */
}

/* Right side pushes to the edge */
.table-toolbar-row .toolbar-right{
  margin-left:auto;       /* pushes pill to the right */
  display:flex;
  align-items:center;
}

/* Keep your existing .suggest-pill responsiveness */
.suggest-pill .pill-icon { margin-right:.4rem; }
.suggest-pill .pill-text,
.suggest-pill .pill-badge { display:inline; }
@media (max-width:600px){
  .suggest-pill .pill-text,
  .suggest-pill .pill-badge{ display:none; }
  .suggest-pill .pill-icon{ margin-right:0; }
}

/* Default desktop view */
.suggest-pill .pill-icon { margin-right: .4rem; }
.suggest-pill .pill-text,
.suggest-pill .pill-badge { display: inline; }

/* Generic pill badge style */
.pill-badge {
  padding:.15rem .5rem;
  border-radius:9999px;
  opacity:.8;
}

h1 .pill-badge {
  font-size: 0.7em;
  overflow: visible;
  margin-left: 0.5em;
}

/* State colors */
.pill-badge.live {
  background:rgba(0,200,80,0.15); /* subtle green glow */
  color:#4be477;
  border-color:rgba(0,200,80,0.25);
  font-weight:600;
  animation:pulseGlow 2s infinite;
}

.pill-badge.alpha-live {
  background:rgba(0,100,255,0.12);
  color:#6ab4ff;
  animation:pulseCalm 4s infinite; /* slower and smoother */
  border-color:rgba(0,200,80,0.25);
  font-weight:600;
}

.pill-badge.soon {
  background:rgba(255,200,0,0.15);
  color:#ffcd4b;
  border-color:rgba(255,200,0,0.25);
}

.pill-badge.closed {
  background:rgba(200,0,0,0.15);
  color:#ff6b6b;
  border-color:rgba(200,0,0,0.25);
}


@keyframes pulseGlow {
  0%, 100% {
    box-shadow:0 0 0 0 rgba(75,228,119,0.6);
  }
  50% {
    box-shadow:0 0 0 8px rgba(75,228,119,0);
  }
}

@keyframes pulseCalm {
  0%, 100% {
    box-shadow:0 0 0 0 rgba(106,180,255,0.5);
  }
  50% {
    box-shadow:0 0 0 12px rgba(106,180,255,0);
  }
}

.live-window {
  position: fixed;
  bottom: 50px;
  right: 20px;
  width: 400px;
  height: 480px;
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  resize: both;
  overflow: hidden;
  display: none;
}

.live-header {
  background: #222;
  color: #eee;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
}

.live-actions button {
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 14px;
  margin-left: 4px;
  cursor: pointer;
}

.live-actions button:hover {
  color: #fff;
}

.live-iframe {
  flex: 1;
  border: none;
  width: 100%;
  height: 100%;
}

/* Directory grid layout */

/* ===== Directory: wrappers / crumbs ===== */
.dir-wrap { padding:16px; }
.dir-wrap a { text-decoration: none }

/* Breadcrumbs */
.dir-wrap .crumbs { margin-bottom:8px; }
.dir-wrap .crumbs a { color:inherit; text-decoration:none; }

/* Controls / search / pills */
.dir-wrap .controls,
.dir-wrap .bar,
.dir-wrap .dir-head {
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px;
}
.dir-wrap .search { flex:1; min-width:260px; }
.dir-wrap .search input {
  width:100%; padding:.55rem .7rem; border-radius:8px;
  border:1px solid var(--border, #2a2f36);
  background:transparent; color:inherit;
}
.dir-wrap .pill {
  display:inline-flex; align-items:center; cursor:pointer;
  border:1px solid var(--border, #2a2f36);
  border-radius:9999px; padding:.35rem .75rem; font-size:.9rem; background:transparent;
}
.dir-wrap .pill.active { background:transparent; border-color:#6a4df5; }

/* Cards / grid */
.dir-wrap .dir-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px;
}
.dir-wrap .dir-card {
  padding:12px; border:1px solid var(--border, #2a2f36); border-radius:10px; background:none;
}

.dir-wrap .dir-card {
  padding:12px;
  border:1px solid var(--border, #2a2f36);
  border-radius:10px;
  background:none;
  transition:border-color .2s ease;
}

.dir-wrap .dir-card:hover {
  border-color:#6a4df5; /* subtle highlight on hover */
  background: none;
}

.dir-wrap .dir-card a { color:inherit; text-decoration:none; }
.dir-wrap .dir-title { font-weight:700; margin-bottom:6px; }
.dir-wrap .meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }

/* Badges (no background tint) */
.dir-wrap .badge {
  display:inline-flex; align-items:center; gap:.35rem;
  border-radius:9999px; padding:.15rem .5rem; font-size:.8rem;
  border:1px solid var(--border, #2a2f36);
}
.dir-wrap .b-hot   { border-color:#eab30833; color:#eab308; }
.dir-wrap .b-alpha { border-color:#3b82f633; color:#3b82f6; }
.dir-wrap .b-inp   { border-color:#10b98133; color:#10b981; }

/* Optional colored dot inside badges */
.dir-wrap .badge .dot {
  width:.5rem; height:.5rem; border-radius:50%;
  background:currentColor; display:inline-block;
}

/* Symbols grid */
.dir-wrap .sym-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:8px;
}
.dir-wrap .sym-card {
  padding:10px; border:1px solid var(--border, #2a2f36); border-radius:10px; background:none;
}
.dir-wrap .sym-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.dir-wrap .sym-t { font-weight:700; color: #FFF; font-size: 14px }

/* Key/values */
.dir-wrap .kv {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; font-size:.9em;
}
.dir-wrap .kv div strong { opacity:1; font-size:inherit; }

/* Buttons */
.dir-wrap .actions { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.dir-wrap .btn {
  display:inline-flex; align-items:center; text-decoration:none;
  border:1px solid var(--border, #2a2f36);
  border-radius:9999px; padding:.35rem .7rem; font-size:.9rem; background:transparent;
}
.dir-wrap .btn-primary { background:#6a4df5; color:#fff; border-color:#6a4df5; }
.dir-wrap .btn:hover,
.dir-wrap .pill:hover { filter:brightness(1.05); }

.sym-card .company-name {
  font-size: 0.85em;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 2px;
}

/* DASHBOARD */

 /* ===== Light mode (no .dark-mode on body) ===== */
body:not(.dark-mode) .dash-wrap {
  --panel: #ffffff;
  --text:  #0f1720;
  --muted: rgba(0,0,0,.55);
  --border: rgba(0,0,0,.08);
  --pos: #15803d;
  --neg: #b91c1c;
  color: var(--text);
}

/* Cards & panels */
body:not(.dark-mode) .ms-card,
body:not(.dark-mode) .panel {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

/* Head accents */
body:not(.dark-mode) .dash-head h1 { color:#2563eb; }
body:not(.dark-mode) .panel__head h2 { color:#1e3a8a; }

/* Chips on cards */
body:not(.dark-mode) .ms-card .chip {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
}

/* Ticker links */
body:not(.dark-mode) .ticker-table a { color:#2563eb; }

/* Sidebar rows */
body:not(.dark-mode) .wl__row{
  background: rgba(0,0,0,.02);
  border-color: var(--border);
}

/* Badges tuned for light */
body:not(.dark-mode) .badge { border-color: rgba(0,0,0,.12); }
body:not(.dark-mode) .badge-inplay { background: rgba(16,185,129,.12); color:#0f766e; }
body:not(.dark-mode) .badge-alpha { background: rgba(59,130,246,.14); color:#1d4ed8; }

/* Hover lift (softer than dark) */
body:not(.dark-mode) .ms-card:hover,
body:not(.dark-mode) .panel:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

/* Dashboard wrap — soft green nucleus on light */
body:not(.dark-mode) .dashboard-wrap {
  background:
    radial-gradient(
      circle at center,
      rgba(33, 208, 122, 0.08) 0%,   /* softer core */
      rgba(33, 208, 122, 0.05) 24%,  /* gentle corona */
      rgba(33, 208, 122, 0.03) 48%,  /* faint halo */
      #f6f8fb 100%                   /* light paper backdrop */
    );
  box-shadow:
    0 0 80px rgba(33, 208, 122, 0.10),
    0 0 140px rgba(33, 208, 122, 0.06);
  backdrop-filter: blur(10px);
}

/* Chart placeholder stroke on light */
body:not(.dark-mode) .hero-chart .chart-placeholder::after{
  opacity:.85;
  filter: saturate(.9);
}
  
  /* Layout */
.dash-wrap {
  --panel: var(--panel, #11161e);
  --text:  var(--text, #e6eef7);
  --muted: rgba(255,255,255,.55);
  --border: rgba(255,255,255,.08);
  --pos: #22c55e;
  --neg: #ef4444;

  color: var(--text);
  display: grid;
  grid-template-columns: 1fr 320px; /* main + sidebar */
  gap: 1.25rem;
  padding: 1.25rem;
}

.dash-wrap {
  display: grid;
  grid-template-columns: 1fr 320px; /* left main + sidebar */
  gap: 1.25rem;
  padding: 1.25rem;
}

.dash-head,
.ms-cards {
  grid-column: 1 / -1; /* span full width */
}

.dash-main {
  display: grid;
  gap: 1.25rem;
  grid-column: 1 / 2; /* force into left column */
}

/*.dash-side {
  display: grid;
  gap: 1.25rem;
  grid-column: 2 / 3; /* force into right column */
}*/

.dash-head { grid-column: 1 / -1; }
.dash-head h1 { margin: 0 0 .75rem; font-size: 1.1rem; color: #8ab4ff; }

/* Summary cards row */
.ms-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ms-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .9rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.ms-card__top { display:flex; align-items:center; gap:.5rem; }
.ms-card .name { color: var(--muted); font-weight: 600; }
.ms-card .chip, .badges .chip {
  margin-left: auto;
  padding: .2rem .45rem;
  border-radius: 999px;
  font-size: .75rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
}
.badges .chip {
  margin-top: 1em;
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid transparent;
}

/* Membership level colors */
.chip-free {
  background: rgba(34,197,94,.12);   /* soft green */
  color: #22c55e;
  border-color: rgba(34,197,94,.35);
}

.chip-pro {
  background: rgba(59,130,246,.12);  /* soft blue */
  color: #3b82f6;
  border-color: rgba(59,130,246,.35);
}

.chip-premium {
  background: rgba(234,179,8,.12);   /* soft gold */
  color: #eab308;
  border-color: rgba(234,179,8,.35);
}
.chip-pos { color: var(--pos); }
.chip-neg { color: var(--neg); }
.ms-card__value { margin-top:.35rem; font-size:1.4rem; font-weight:700; }

/* Main + side columns */
.dash-main { display: grid; gap: 1.25rem; }
/*.dash-side { display: grid; gap: 1.25rem; }*/
.dash-side  section {
  margin-bottom: 20px;
}

/* Panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.panel__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.panel__head h2 { margin:0; font-size:.95rem; color:#9db8ff; }
.head-actions .pill {
  background: transparent; color: var(--text);
  border:1px solid var(--border); border-radius:999px; padding:.25rem .6rem; font-size:.8rem;
}
.head-actions .pill.is-active { background: rgba(100,140,255,.15); border-color: rgba(100,140,255,.35); }

/* Hero chart placeholder */
.hero-chart .chart-placeholder{
  height: 320px; border-radius: 10px; position: relative;
  background:
    radial-gradient(1200px 300px at -10% 120%, rgba(100,140,255,.15), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  overflow: hidden;
}
.hero-chart .chart-placeholder::after{
  content:"";
  position:absolute; inset:0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="320" viewBox="0 0 1200 320"><path d="M0,280 C200,260 260,200 420,220 C580,240 680,120 840,160 C1000,200 1060,140 1200,180" fill="none" stroke="%2360a5fa" stroke-width="3" stroke-linecap="round"/></svg>') center/cover no-repeat;
  opacity:.9;
}
.axis { display:flex; justify-content:space-between; color:var(--muted); font-size:.75rem; margin-top:.35rem; }

/* Tiles */
.tile-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap:.75rem; }
.tile {
  display:flex; flex-direction:column; text-align:left;
  padding:.75rem; border-radius:10px; border:1px dashed var(--border);
  background: rgba(255,255,255,.02); color:var(--text); cursor:pointer;
}
.tile__name{ font-weight:600; }
.tile__meta{ color:var(--muted); font-size:.8rem; }

/* Ticker table */
.ticker-table {
  max-width:100%; overflow-x:scroll
}

/* Hover highlight */
body.dark-mode .ticker-table tr:hover {
  background: rgba(33, 255, 122, 0.08);
  transition: background 0.2s ease;
}

.ticker-table {
  font-size: 16px;
}

body.dark-mode table, .ticker-table table { 
    width:100%; 
    border-collapse: collapse; 
    background: transparent;
    border-color: transparent !important;
}
/* ... Same as before except remove border lines ... */

body.dark-mode th, 
.ticker-table th,
.ticker-table th + th {
  text-transform: uppercase;
  text-align: left;
  font-size: 0.8em;
}

/* Remove cell borders */
body.dark-mode th, 
body.dark-mode td, 
.ticker-table th,
.ticker-table th + th,
.ticker-table td,
.ticker-table td + td {
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-color: transparent !important;
  word-break: normal;
}

body.dark-mode td, 
.ticker-table td,
.ticker-table td + td {
  text-align: left;
  border-bottom: 0.0625rem solid rgb(255, 255, 255, .08) !important;
  padding: 20px 15px;
  font-size: 0.95em;
}

.ticker-table td.num, 
.ticker-table th.num {
  font-variant-numeric: tabular-nums;
}

/* Optional:
.ticker-table th, .ticker-table td {
  padding:.45rem .5rem; border-bottom:1px solid var(--border);
  word-break: normal;
}
.ticker-table a { color:#9db8ff; text-decoration:none; }
.pc-pos{ color: var(--pos); } .pc-neg{ color: var(--neg); }

/* Sidebar watchlist */
.wl { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.wl__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .7rem; border-radius:10px; border:1px solid var(--border);
  background: rgba(255,255,255,.03) !important; text-decoration:none; color:var(--text);
}
  .wl__row:hover {
    background: rgba(33, 255, 122, 0.08) !important;
    transition: background 0.2s ease !important;
  }
.wl__left{ display:flex; flex-direction:column; }
.wl__sym{ font-weight:700; letter-spacing:.3px; }
.wl__sub{ color:var(--muted); font-size:.8rem; }
.wl__chg{ font-weight:600; }

/* Simple list blocks */
.list{ list-style:none; margin:0; padding:0; }
.list li{ padding:.5rem 0; border-bottom:1px solid var(--border); }
.list a{ color:#c9d8ff; text-decoration:none; }

/* Badges (reuse your new style) */
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  border-radius:9999px; padding:.15rem .5rem; font-size:.78rem;
  border:1px solid rgba(255,255,255,.15); opacity:.95;
}
.badge-inplay{ background:rgba(0,200,80,.12); color:#4be477; }
.badge-alpha{ background:rgba(0,100,255,.12); color:#6ab4ff; }

.ms-card:hover, .panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(33, 255, 122, 0.25),
              0 0 35px rgba(33, 208, 122, 0.15);
}

.dashboard-wrap {
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 
    0 0 120px rgba(33, 255, 122, 0.25),   /* wide atmospheric glow */
    0 0 200px rgba(33, 255, 122, 0.10);   /* long, soft fade */
  backdrop-filter: blur(14px);            /* heavier blur for mist effect */
  transition: box-shadow .25s, filter .25s;
}

.dash-wrap .ms-card, 
.dash-wrap .card,
.dash-wrap .panel {
  background: linear-gradient(
    127deg,
    rgba(6, 20, 10, 0.85) 0%,   /* deep green-tinted base */
    rgba(10, 25, 15, 0.55) 100% /* softer fade */
  );
  border-radius: 12px;
  border: 1px solid rgba(33, 255, 122, 0.1); /* faint neon edge */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); /* depth */
  backdrop-filter: blur(6px); /* glassy feel if supported */
}

/* ===== Mobile & Tablet Tweaks ===== */

/* <= 1024px: stack main + sidebar, widen gaps a touch */
@media (max-width: 1024px) {
  .dash-wrap {
    grid-template-columns: 1fr;       /* one column layout */
    gap: 1rem;
    padding: 1rem;
  }
  .dash-side { order: 3; }            /* ensure side panels come after main */
  .panel.hero-chart .chart-placeholder { height: 380px; }
}

/* <= 768px: 2×2 metrics, bigger chart, friendlier tap targets */
@media (max-width: 768px) {
  /* Metrics row becomes 2 columns */
  .ms-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .ms-card { padding: 0.8rem; }
  .ms-card__value { font-size: 1.85rem; line-height: 1.2; }

  /* Journal gets the stage */
  .panel.hero-chart { padding: 0.9rem; }
  .panel.hero-chart .chart-placeholder { height: 420px; }
  .panel__head h2 { font-size: 1rem; }
  .head-actions .pill {
    padding: .35rem .7rem;             /* comfortable taps */
    font-size: .85rem;
  }

  /* Tables & lists breathe */
  .ticker-table table { font-size: .95rem; }
  .list li { padding: .65rem 0; }

  /* Cards & badges spacing */
  .badge { font-size: .8rem; padding: .2rem .55rem; }
}

/* <= 480px: single-column feel, tighter paddings, taller chart */
@media (max-width: 480px) {
  .dashboard-wrap { padding: 10px; border-radius: 10px; }
  .dash-wrap      { padding: 0px; gap: .85rem; }

  .ms-cards { gap: .6rem; }
  .ms-card__value { font-size: 1.7rem; }

  .panel { padding: .8rem; border-radius: 10px; }
  .panel.hero-chart .chart-placeholder { height: 460px; }

  .axis { font-size: .8rem; }
  .wl__row { padding: .55rem .6rem; }
  .head-actions {
    text-align: right;
  }
}

/* Small elements */
.chip {
  display:inline-flex; align-items:center; gap:.4ch;
  padding:4px 10px; border-radius:999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px; color:#e9ffee;
}
.chip.success { background: rgba(33,255,122,.12); border-color: rgba(33,255,122,.25); color:#cffff0; }
.chip.warn    { background: rgba(255,193,7,.12);   border-color: rgba(255,193,7,.25);   color:#ffeab3; }
.chip.danger  { background: rgba(239,68,68,.14);   border-color: rgba(239,68,68,.28);   color:#ffd1d1; }

.btn-link {
  color:#9eeec7; text-decoration:none; font-weight:600;
}
.btn-link:hover { color:#c0ffde; text-decoration:underline; }

/* Compact density option */
.table--compact .modern-table td { padding: 9px 12px; }
.table--compact .modern-table thead th { padding: 10px 12px; }

/* Responsive: turn rows into cards under 700px */
@media (max-width: 700px) {
  .modern-table, .modern-table thead, .modern-table tbody, .modern-table th, .modern-table td, .modern-table tr {
    display: block; width: 100%;
  }
  .modern-table thead { display: none; }
  .modern-table tbody tr {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    margin: 10px 12px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08));
  }
  .modern-table td {
    border: 0; border-bottom: 1px dashed rgba(255,255,255,.08);
    display: grid; grid-template-columns: 140px 1fr; gap: 10px;
    padding: 10px 14px;
  }
  .modern-table td:last-child { border-bottom: 0; }
  .modern-table td::before {
    content: attr(data-label);
    color:#9bcfb2; font-weight:600; text-transform: uppercase; letter-spacing:.03em;
    font-size: 11px;
  }
  .modern-table td.num { text-align: left; }
}

/* Optional: prevent the hero chart from shrinking too much in split views */
@media (max-width: 360px) {
  .panel.hero-chart .chart-placeholder { height: 500px; }
}

/* Force dash-main into one column on mobile */
@media (max-width: 768px) {
  .dash-main {
    display: grid;
    grid-template-columns: 1fr !important; /* single column */
    gap: 1rem; /* spacing between panels */
  }
}

@media (max-width: 768px) {
  .dash-main > .panel {
    grid-column: 1 / -1; /* span full width */
  }
}

/* Collapse the whole dashboard to one column */
@media (max-width: 900px) {
  .dash-wrap {
    grid-template-columns: 1fr !important;   /* one column */
  }
  .dash-main,
  .dash-side {
    grid-column: 1 / -1;                     /* span full width */
  }
  /* journal first, sidebar after */
  .dash-main { order: 1; }
  .dash-side { order: 2; }
}

/* Tablet: 2 cards per row */
@media (max-width: 768px) {
  .ms-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small mobile: 1 card per row */
@media (max-width: 520px) {
  .ms-cards {
    grid-template-columns: 1fr;
  }
}

/* Tighten padding on small screens */
@media (max-width: 520px) {
  .panel { padding: .75rem; }
}


/* END DASHBOARD */

/* Collapse on small screens */
@media (max-width: 600px) {
  .suggest-pill .pill-text,
  .suggest-pill .pill-badge {
    display: none;
  }
  .suggest-pill .pill-icon {
    margin-right: 0; /* center just the sparkle */
  }
}

@media (min-width: 900px) {
  .jr-chart-wrap { height: 380px; }
}


@media (prefers-color-scheme: light) {
  .jr-ac { background: #fff; border-color: #e6e8eb; }
  .jr-ac-item:hover, .jr-ac-item.is-active { background: #f3f5f7; }
}

/* Responsive table wrapper */
.card > .table,
.table-wrap { width:100%; overflow-x:auto; }
.table { width:100%; min-width:720px; border-collapse: collapse; }
.table th, .table td { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.08); }

/* Modal base (assuming your existing styles; only ensure .show toggles) */
.modal { display:none; }
.modal.show { display:block; }

/* Mobile: single column */
@media (max-width: 760px){
  #wlSettings .wlconf-grid { flex-direction: column; }
  #wlSettings .wl-hero__right { flex: 1 1 auto; max-width: none; }
}

/* Responsive collapse */
@media (max-width: 760px){
  #wlSettings .wlconf-grid{ flex-direction:column; }
  #wlSettings .wl-hero__right{ flex:1 1 auto; max-width:none; }
}

/* If you ever hide the right column, left naturally fills.
   (No extra CSS needed; flex takes care of it.)
*/

/* Responsive */
@media (max-width:820px){
  .wl-hero__inner{ flex-direction:column; align-items:flex-start; padding:18px; }
  .wl-hero__right{ align-self:stretch; }
}
@media (max-width:420px){
  .wl-hero__avatar{ width:68px; height:68px; border-radius:12px; }
  .wl-hero__tagline{ font-size:13px; }
  .btn-pill{ width:100%; text-align:center; }
}


/* Light mode safety (if your site supports) */
@media (prefers-color-scheme: light){
  .wl-picker__card{ background:#ffffff; color:#111827; border-color:#e5e7eb; }
  .wl-picker__head{ border-color:#e5e7eb; }
  .wl-search input{ background:#fff; color:#111827; border-color:#e5e7eb; }
  .wl-item:hover{ background:#f8fafc; }
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Responsive tweaks for mobile and tablets */
@media (max-width: 768px) {
  body {
    padding: 20px 15px;
    font-size: 18px !important;
  }

  h1 {

  }

  input[type="text"] {
    max-width: 100%;
    margin-bottom: 12px;
  }

  input[type="submit"] {
    width: 100%;
    font-size: 1.2rem !important;
    padding: 14px 0;
  }

  table, thead, tbody, th, td, tr {

  }

  th, td {

  }

  tr {
    /* height on rows can be tricky; rely on padding */
  }

  button {
 
  }

  .controls.rvol-queue label {

    width: 100%;
    display: block;
    margin-bottom: 10px;
    line-height: 2em;

  }

    .controls.rvol-queue label input {
      width: 100%;
      margin-top: 5px;
      box-sizing: border-box;
    }

    .controls.rvol-queue button {
      margin-bottom: 5px;
    }


}

/* Neutralize the old .sidebar panel styles (wrapper only now) */
#sidebar.sidebar {
  position: static;       /* was fixed/left-based; not needed */
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
}

/* The actual drawer panel */
.sb {
  position: fixed;
  top: 0; left: 0;
  height: 100dvh;
  width: min(420px, 92vw);
  transform: translateX(-105%);        /* hidden by default */
  transition: transform .28s ease;
  background: rgba(17,17,17,.92);       /* glassy */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #eaeaea;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  z-index: 1400;
  background: transparent;
}

/* OPEN when your existing JS adds .active to #sidebar */
#sidebar.active .sb { transform: translateX(0); }

/* Mobile: full width */
@media (max-width: 768px) {
  .sb { width: 100vw; border-radius: 0; }
}

/* List + chevrons */
.sb__list { list-style: none; margin: 0; padding: 8px 0; }
.sb__list li { border-bottom: 1px solid rgba(255,255,255,.08); }
.sb__list li:last-child { border-bottom: 0; }
.sb__list a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  color: #eaeaea; text-decoration: none;
}
.sb__list a:hover { background: rgba(255,255,255,.06); }
.sb__list a::after {
  content: "›"; margin-left: auto; opacity: .55;
  font-size: 20px; line-height: 1;
}

/* Sidebar Navigation */
.sidebar nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar nav ul li {
  margin: 10px 0;
}
.sidebar nav ul li a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  color: #cbd3dd;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background 0.2s, color 0.2s;
}
.sidebar nav ul li a svg {
  width: 20px;
  height: 20px;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.sidebar nav ul li a:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.sidebar nav ul li a:hover svg {
  opacity: 1;
}

/* Highlight for active section */
.sidebar nav ul li.active a {
  background: #1e2630;
  color: #ffe08a;
}

/* icon at start */
.sb__list > li > a .sb__ico{
  width: 20px; height: 20px; flex: 0 0 20px; opacity: .9;
  background: currentColor;
  mask: var(--ico) center/20px 20px no-repeat;     /* modern browsers */
  -webkit-mask: var(--ico) center/20px 20px no-repeat;
}

/* ===== Icon masks (compact, inline SVG data URIs) ===== */
:root{
  /* Right-chevron */
  --chev: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">\
<path d="M9 6l6 6-6 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>\
</svg>');

--ico-support: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'>\
<path d='M4 3h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 5v-5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/>\
<circle cx='9' cy='9.5' r='1.5'/>\
<circle cx='12' cy='9.5' r='1.5'/>\
<circle cx='15' cy='9.5' r='1.5'/>\
</svg>");

  /* Set per-row via a modifier class (examples below) */
  --ico-dashboard: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>\
<path d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/></svg>");
  --ico-watch: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>\
<path d='M3 5h18v2H3V5zm0 6h18v2H3v-2zm0 6h18v2H3v-2z'/></svg>");
  --ico-user: url(\"data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>\
<path d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5z'/></svg>\");
  --ico-book: url(\"data:image/svg+xml;utf8,\
<svg width='24' height='24' viewBox='0 0 24 24' fill='#fff' xmlns='http://www.w3.org/2000/svg'><path d='M18 2H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h12c.55 0 1-.45 1-1s-.45-1-1-1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h11v16h2V4a2 2 0 0 0-2-2z'/><path d='M14 4v6l-2.5-1.5L9 10V4h5z'/></svg>\");
  --ico-settings: url(\"data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>\
<path d='M19.14 12.94a7.43 7.43 0 0 0 0-1.88l2.03-1.58-2-3.46-2.39.96a7.6 7.6 0 0 0-1.63-.95l-.36-2.54h-4l-.36 2.54a7.6 7.6 0 0 0-1.63.95l-2.39-.96-2 3.46 2.03 1.58a7.43 7.43 0 0 0 0 1.88L2.78 14.5l2 3.46 2.39-.96c.5.39 1.05.71 1.63.95l.36 2.55h4l.36-2.55c.58-.24 1.13-.56 1.63-.95l2.39.96 2-3.46-2.03-1.56zM12 15.5A3.5 3.5 0 1 1 15.5 12 3.5 3.5 0 0 1 12 15.5z'/></svg>\");
  --ico-logout: url(\"data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>\
<path d='M10 17l1.41-1.41L8.83 13H20v-2H8.83l2.58-2.59L10 7l-5 5 5 5zm9 4H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h15v2H4v14h15v2z'/></svg>\");
}

/* Icon helpers (apply to the <span class="sb__ico"> inside the link) */
.sb__ico--dashboard{ --ico: var(--ico-dashboard); }
.sb__ico--watch    { --ico: var(--ico-watch);     }
.sb__ico--user     { --ico: var(--ico-user);      }
.sb__ico--book     { --ico: var(--ico-book);      }
.sb__ico--settings { --ico: var(--ico-settings);  }
.sb__ico--logout   { --ico: var(--ico-logout);    }
.sb__ico--support  { --ico: var(--ico-support);    }

/* Wrapper (#sidebar) is just a container now */
#sidebar.sidebar { position: static; background: transparent; box-shadow: none; }

/* Header */
.sb__header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sb__header-left{ display:flex; align-items:center; gap:12px; }
.sb__avatar{
  width:48px; height:48px; border-radius:50%;
  object-fit:cover; background:#2a2a2a;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.sb__avatar--fallback{ display:grid; place-items:center; font-weight:700; }
.sb__user .sb__name{ font-size:1.05rem; font-weight:600; line-height:1.2; }
.sb__user .sb__email{ font-size:.85rem; opacity:.75; }

/* Header chips (Profile / Logout) */
.sb__header-actions{ display:flex; align-items:center; gap:8px; }
.sb__chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px;
  font-size:.9rem; text-decoration:none; color:#eaeaea;
  background: rgba(255,255,255,.08);
  transition: background .18s ease, transform .06s ease;
}
.sb__chip:hover{ background: rgba(255,255,255,.14); }
.sb__chip:active{ transform: translateY(1px); }
.sb__chip--danger{ background: rgba(244,67,54,.18); }
.sb__chip--danger:hover{ background: rgba(244,67,54,.26); }

/* Icons (use your existing sprite/fonts or swap in SVG) */
.sb__ico{ width:18px; height:18px; display:inline-block; opacity:.9; }
.sb__ico--user::before{ content:"👤"; }
.sb__ico--logout::before{ content:"⎋"; }  /* ⎋ or 🔒 */

/* Mobile: full width */
@media (max-width: 768px){
  .sb{ width: 100vw; border-radius: 0; }
  .sb__chip-text {
    display: none;
  }
  .sb__chip {
    text-align: center;
  }
}

/* Backdrop behind the drawer */
.sb__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1380;          /* below the drawer (.sb has 1400) */
}

/* When the drawer is open (your existing #sidebar.active) */
#sidebar.active .sb__backdrop{
  opacity: 1;
  pointer-events: auto;
}

/* Optional: reduce overscroll while open */
html.is-drawer-open{
  overflow: hidden;           /* desktop browsers */
  overscroll-behavior: contain;
  height: 100%;
}

/* Pull-to-refresh indicator */
.ptr {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0) + 0px);
  left: 50%;
  transform: translate3d(-50%, -120%, 0); /* hidden above top */
  transition: transform .18s ease, opacity .18s ease;
  z-index: 3000;
  background: rgba(0,0,0,.8);
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.ptr__icon {
  width: 16px; height: 16px; display: inline-block;
}
.ptr__spinner {
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  width: 16px; height: 16px;
  animation: ptrSpin .8s linear infinite;
  display: none;
}
.ptr.refreshing .ptr__spinner { display: inline-block; }
.ptr.refreshing .ptr__arrow   { display: none; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* Progrress */

/* Top progress bar (if you don't already have it) */
#page-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg,#ffe08a,#ffd04a);
  transform: scaleX(0); transform-origin: 0 0;
  transition: transform .2s ease-out, opacity .2s ease-out;
  opacity: 0; z-index: 99999;
}

/* Bottom bar button busy/active feedback */
#mobile-bottombar .mb-item {
  position: relative; user-select: none; touch-action: manipulation;
}
#mobile-bottombar .mb-item:active {
  transform: translateY(1px); opacity: .9;
}
#mobile-bottombar .mb-item.is-loading {
  pointer-events: none; opacity: .85;
}
#mobile-bottombar .mb-item.is-loading::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: inplaySpin .8s linear infinite;
}
@keyframes inplaySpin { to { transform: rotate(360deg); } }

/* Optional: active color for the currently “selected” button */
#mobile-bottombar .mb-item.is-active {
  color: #ffe08a;
}

/* profile */

.p-av {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: #eee;
  max-height: 72px;
  max-width: 72px;
  min-width: 72px;
  min-height: 72px;
}

.plan-pill {
  display: inline-block;
  border-radius: 999px;
  overflow: hidden; /* ensures hover background fills perfectly */
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease;
}

/* Make the anchor fill the pill */
.plan-pill a {
  display: block;
  padding: 6px 14px;
  color: #ffe08a;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
  background: transparent !important;
}

/* Hover/active states */
.plan-pill:hover,
.plan-pill a:hover {
  background: rgba(255, 224, 138, 0.25);
  color: #fff;
}

.plan-pill:active,
.plan-pill a:active {
  background: rgba(255, 224, 138, 0.35);
  transform: scale(0.98);
}


/* Hide when aria-hidden="true" */
.symbol-menu[aria-hidden="true"] {
  display: none;
}

/* Show when aria-hidden="false" */
.symbol-menu[aria-hidden="false"] {
  display: block;
  position: absolute;  /* needed if it should float over other elements */
  /* add your other styles: background, border, box-shadow, etc */
}


.col-symbol { position: relative; white-space: nowrap; }
.col-symbol .ticker a { text-decoration: none; }
.symbol-menu-btn {
  margin-left: .4rem; border: 0; background: transparent; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 6px; color: #aaa;
}
.symbol-menu-btn:focus { outline: 2px solid #555; border-radius: 4px; }

.symbol-menu {
  position: absolute; top: 70%; left: 0; margin-top: .3rem; min-width: 180px;
  background: #111; border: 1px solid #2a2a2a; border-radius: 8px; padding: .25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); display: none; z-index: 50;
}
.symbol-menu[aria-hidden="false"] { display: block; }
.symbol-menu [role="menuitem"] {
  display: block; width: 100%; text-align: left; padding: .55rem .65rem;
  background: transparent; border: 0; color: #ddd; font-size: 0.92rem; border-radius: 6px;
  margin-left: 0; box-sizing: border-box
}
.symbol-menu a[role="menuitem"] { text-decoration: none; margin-left: 0; box-sizing: border-box;}
.symbol-menu [role="menuitem"]:hover { background: #1a1a1a; color: #fff }

.symbol-menu .wl-inline { min-width: 240px; max-width: 300px; }
.symbol-menu .wl-inline__hd { font-weight: 600; margin: 4px 6px 6px; }
.symbol-menu .wl-inline__loading,
.symbol-menu .wl-inline__empty { padding: 8px 10px; opacity: .8; }

.symbol-menu .wl-filter {
  width: calc(100% - 12px);
  margin: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #2a3446;
  background: #0c0f14; color: #e6ebf2;
}

.symbol-menu .wl-list {
  max-height: 220px; overflow: auto; padding: 4px 6px;
}
.symbol-menu .wl-row {
  display: flex; gap: 8px; align-items: center;
  padding: 6px 6px; border-radius: 6px; cursor: pointer;
}
.symbol-menu .wl-row:hover { background: rgba(255,255,255,.06); }
.symbol-menu .wl-row input { margin: 0; }

.symbol-menu .wl-inline__ft {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 6px; margin-top: 6px;
}
.symbol-menu .btn-small { padding: 6px 10px; border-radius: 6px; }
.symbol-menu .btn-primary { background: #2563eb; color: #fff; border: 0; }
.symbol-menu .btn-small:hover { filter: brightness(1.05); }

.loading-link.disabled {
  pointer-events: none;
  opacity: 0.6;
}
.loading-link .spinner-inline {
  display: none;
  margin-left: 8px;
  vertical-align: middle;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.6);
  border-top-color: #ffe08a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.loading-link.loading .spinner-inline {
  display: inline-block;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.ai-summary-body strong { color: #10b981; font-size: inherit; }      /* accent for numbers */
.ai-summary-body em { color: #6b7280; font-style: normal; } /* muted */
.ai-summary-body .risk { color: #ef4444; font-weight: 500; }

.ema20-cell { text-align:center; vertical-align:middle; }
.ema-wrap { display:flex; flex-direction:column; align-items:center; gap:3px; }

/* Pill (relation chip) */
.chip-ema {
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  line-height:1.4;
  border:1px solid transparent;
  margin-bottom: 3px;
}
.chip-ema.rel-above { background:rgba(0,160,60,.12); border-color:rgba(0,160,60,.35); color:#1c7a32; }
.chip-ema.rel-below { background:rgba(200,40,40,.12); border-color:rgba(200,40,40,.35); color:#a02727; }
.chip-ema.rel-unknown { background:rgba(128,128,128,.1); border-color:rgba(128,128,128,.25); color:#777; }

/* Tag under pill */
.tag {
  font-size:11px;
  font-weight:600;
  padding:2px 10px;
  border-radius:4px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  min-width:60px;
}
.tag-long  {
  background:rgba(0,160,60,.18);
  color:#0b7728;
  border:1px solid rgba(0,160,60,.3);
}
.tag-short {
  background:rgba(200,40,40,.18);
  color:#a02727;
  border:1px solid rgba(200,40,40,.3);
}

.flash-up {
  animation: flashTextUp 0.6s ease;
}

.flash-down {
  animation: flashTextDown 0.6s ease;
}

@keyframes flashTextUp {
  0%   { color: #4fff4f; }   /* bright green */
  100% { color: inherit; }   /* fade back to normal */
}

@keyframes flashTextDown {
  0%   { color: #ff4f4f; }   /* bright red */
  100% { color: inherit; }
}