:root{
  --primary: #0b5ed7;
  --bg: #f7f9fc;
  --card: #fff;
  --muted: #6c757d;
  --radius: 10px;
}

/* Reset / base */
* { box-sizing: border-box; }
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin: 0;
  background: var(--bg);
  color: #111;
  line-height: 1.4;
}

/* Container: edge-to-edge content */
.container {
  width: 100%;
  max-width: none;   /* allow full width */
  margin: 0;         /* no centering */
  padding: 20px;     /* breathing room on the sides */
}

/* Full-width header/nav/footer */
.site-header,
.navbar,
.site-footer {
  width: 100%;
  margin: 0;
  padding: 0; /* inner spacing handled by inner .container */
}

/* Header visuals (original) */
.site-header{
  background: linear-gradient(90deg, var(--primary), #0a58ca);
  color: white;
  padding: 14px 0;
}
.site-header .container{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand {
  margin: 0;
  font-size: 1.15rem;
}
.user {
  display: flex;
  gap: 12px;
  align-items: center;
}
.logout-form { display: inline; }

/* Footer visuals */
.site-footer{
  padding: 12px 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 40px;
}

/* Card & form */
.card{
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 6px 18px rgba(12,36,60,0.06);
  width: 100%;
  margin-bottom: 20px;
}
.center-card{ max-width: 420px; margin: 36px auto; }

.form label{ display: block; margin-bottom: 10px; font-size: 0.95rem; }
.form input{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e6e9ee;
  border-radius: 8px;
  margin-top: 6px;
  font-size: 1rem;
}

.btn{
  display: inline-block;
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  margin-top: 12px;
}
.btn.small{ padding: 6px 10px; font-size: 0.9rem; }
.btn:hover{ opacity: 0.95; }

.error{ color: #b00020; margin-top: 10px; }
.muted{ color: var(--muted); font-size: 0.9rem; margin-top: 10px; }

/* NAVBAR: default desktop (original) */
.navbar {
  background: #fff;
  border-top: 1px solid #e6e9ee;
  border-bottom: 1px solid #e6e9ee;
}
.navbar .container {
  /* display: flex; */
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
}

/* nav-flex kept for compatibility */
.nav-flex {
  display: flex;
  justify-content: space-between; /* spread left vs right */
  align-items: center;
  padding: 10px 0;
  gap: 16px;
}

.nav-left {
  display: flex;
  gap: 16px;
  align-items: center;
}
/* nav links */
.nav-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  padding: 6px 8px;
  border-radius: 6px;
}
.nav-link:hover {
  text-decoration: underline;
  background: rgba(11,94,215,0.04);
}

/* ACTIVE link style */
.nav-link.active {
  background: rgba(11,94,215,0.12);
  color: var(--primary);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 rgba(11,94,215,0.18);
}

/* Make logout button align with nav items */
/* logout always right in desktop */
.logout-form {
  margin-left: auto;
}
.logout-form .btn.small {
  padding: 6px 10px;
}
/* Header flex layout (for the top header area) */
.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Menu toggle button (hamburger) - hidden on desktop */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
}
.menu-toggle:focus {
  outline: 2px solid rgba(255,255,255,0.25);
}

/* MOBILE responsive styles (original) */
@media (max-width: 768px) {
  /* Show hamburger in header */
  .menu-toggle {
    display: block;
  }

  /* Navbar collapsed by default */
  .navbar {
    display: none;
    border-top: 0;
    border-bottom: 0;
  }

  /* When toggled open we add the 'open' class in JS */
  .navbar.open {
    display: block;
  }

  /* Make inner container stack vertically for nav */
  .navbar .container {
    display: block;
    padding: 10px 16px;
  }

        .nav-flex {
        flex-direction: column;
        align-items: stretch;
        }

        .nav-left {
        flex-direction: column;
        align-items: stretch;
        }

        .logout-form {
        width: 100%;
        margin-left: 0;
        }
        .logout-form .btn {
        width: 100%;
        text-align: center;
        }


        /* Slightly reduce header padding on small screens */
        .site-header .container {
            padding-left: 12px;
            padding-right: 12px;
        }
        }

/* Optional: smoother mobile menu open/close (simple fade) */
.navbar,
.navbar.open {
  transition: max-height 0.25s ease, opacity 0.2s ease;
  overflow: hidden;
}
@media (max-width: 768px) {
  .navbar { max-height: 0; opacity: 0; }
  .navbar.open { max-height: 1000px; opacity: 1; } /* large enough for content */
}

/* Utility helpers (nice to have) */
.text-center { text-align: center; }
.flex { display: flex; }
.gap-8 { gap: 8px; }

.suggestions { box-shadow: 0 6px 18px rgba(12,36,60,0.06); border-radius:6px; }
.suggestion-item:hover { background:#f7fbff; }

/* autosuggest + tokens */
.token-chip { font-size: 0.95rem; }
#stockSuggestions .suggestion-item:hover,
#stockSuggestions .suggestion-item.focused { background:#f1f5fb; }
#stockSuggestions { box-shadow: 0 8px 20px rgba(12,36,60,0.06); }

/* AI recommendation spinner + modal (original) */
.ai-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(0,0,0,0.08);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: ai-spin 1s linear infinite;
  vertical-align: middle;
  margin-left: 6px;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* modal */
.ai-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.ai-modal {
  max-width: 820px;
  width: 94%;
  background: white;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  padding: 18px;
  max-height: 90vh;
  overflow: auto;
}
.ai-modal h3 { margin-top: 0; margin-bottom: 8px; }
.ai-modal .ai-modal-body { font-size: 0.95rem; color: #111; line-height: 1.45; white-space: pre-wrap; }
.ai-modal .ai-modal-footer { margin-top: 12px; display:flex; justify-content:flex-end; gap:8px; }
.btn.ai-close { background:#6c757d; color:white; padding:8px 12px; border-radius:6px; border:none; cursor:pointer; }
.btn.ai-copy { background:var(--primary); color:white; padding:8px 12px; border-radius:6px; border:none; cursor:pointer; }

/* ---------------------------------------------------
   Enhanced header + brand + profile dropdown styles
   (polished appearance; appended after original styles)
   --------------------------------------------------- */

/* compact header wrapper used in EJS: .header-appeal */
.header-appeal { padding: 10px 18px; }
.header-appeal .container { padding-left: 12px; padding-right: 12px; }

/* brand */
.brand-wrap { display:flex; align-items:center; gap:12px; cursor:default; }
.brand-mark svg { filter: drop-shadow(0 3px 8px rgba(0,0,0,0.06)); border-radius:6px; }
.brand-text { display:flex; flex-direction:column; line-height:1; }
.brand { margin:0; font-size:1.05rem; color: #fff; font-weight:700; }
.brand-sub { font-size:0.78rem; color: rgba(255,255,255,0.88); opacity:0.95; margin-top:2px; }

/* styled tooltip (data-tooltip attribute) */
.brand-wrap[data-tooltip] { position:relative; outline: none; }
.brand-wrap[data-tooltip]:hover::after,
.brand-wrap[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -36px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  z-index: 999;
}

/* nav pills */
.navbar .nav-left { display:flex; gap:10px; align-items:center; }
.navbar .nav-link {
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.06);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight:600;
  transition: transform .12s ease, background .12s ease;
}
.navbar .nav-link:hover { transform: translateY(-2px); background: rgba(255,255,255,0.12); text-decoration:none; }
.navbar .nav-link.active { background: rgba(255,255,255,0.2); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }

/* small nav action (search icon) */
.icon-btn { background: transparent; border: none; color: rgba(255,255,255,0.95); font-size:1.05rem; cursor:pointer; padding:6px; border-radius:6px; }
.icon-btn:hover { background: rgba(255,255,255,0.04); }

/* header-right / user block */
.header-right { display:flex; align-items:center; gap:10px; margin-left: 12px; }
.user-block { position: relative; display:flex; align-items:center; gap:10px; background: rgba(255,255,255,0.03); padding:6px 8px; border-radius:999px; cursor:pointer; }
.user-block:focus { box-shadow: 0 6px 18px rgba(0,0,0,0.12); outline: none; }
.avatar {
  width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
  color: #fff; font-weight:700; font-size:0.92rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.user-meta { text-align:left; line-height:1; min-width:90px; }
.user-label { font-size:0.72rem; color: rgba(255,255,255,0.85); }
.user-name { font-size:0.92rem; color: #fff; font-weight:700; }

/* small down-chevron */
.chev { background:transparent; border:none; color: rgba(255,255,255,0.9); font-size:0.9rem; padding:0 4px; }

/* profile dropdown */
.profile-menu {
  display:none;
  position:absolute;
  right:0;
  top: calc(100% + 8px);
  background: #fff;
  color:#111;
  border-radius:8px;
  box-shadow: 0 12px 40px rgba(2,8,23,0.14);
  min-width:160px;
  overflow:hidden;
  z-index: 1000;
  padding:8px;
}
.profile-menu a { display:block; padding:8px 10px; color:#111; text-decoration:none; border-radius:6px; font-weight:600; }
.profile-menu a:hover { background:#f4f7fb; }
.menu-logout { padding:8px 10px; }
.menu-logout .btn.small { width:100%; }

/* show dropdown when parent has .open */
.user-block.open .profile-menu { display:block; }

/* responsive: collapse nav-left on mobile; hide brand-sub earlier */
@media (max-width: 768px) {
  .nav-left { display:none; } /* collapsed by default on mobile */
  #navbar.open .nav-left { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
  .brand-sub { display:none; }
  .header-flex { gap:10px; }
  .menu-toggle { display:block; color:white; background:transparent; border:none; font-size:1.2rem; padding:6px; }
}

/* ---------------------------------------------------
   Compact header tweaks (reduce height & tighten spacing)
   Paste this at the end to override header paddings
   ---------------------------------------------------*/
.header-appeal {
  padding: 6px 14px;     /* less vertical space */
}
r
/* tighten the main header container layout */
.header-appeal .container {
  padding-left: 12px;
  padding-right: 12px;
}

/* brand smaller */
.brand { font-size: 0.98rem; }       /* slightly smaller title */
.brand-sub { font-size: 0.72rem;     /* smaller subtitle */
            margin-top: 0;
            opacity: 0.9; }

/* reduce SVG mark size a touch */
.brand-mark svg { width: 22px; height: 22px; }

/* nav: tighter pills */
.navbar .nav-left .nav-link {
  padding: 6px 10px;
  font-size: 0.92rem;
  border-radius: 999px; /* keep pill look */
}

/* reduce nav-actions padding */
.icon-btn { padding: 4px; font-size: 0.96rem; }

/* header-right: shrink user block */
.header-right { gap: 8px; margin-left: 8px; }
.user-block { padding: 4px 6px; border-radius: 999px; background: rgba(255,255,255,0.03); }
.avatar { width: 30px; height: 30px; font-size: 0.86rem; }
.user-meta { min-width: 70px; }
.user-label { font-size: 0.68rem; opacity: 0.95; }
.user-name { font-size: 0.86rem; }

/* chevron smaller */
.chev { font-size: 0.85rem; padding-left: 4px; }

/* mobile: hide brand-sub earlier to save vertical space */
@media (max-width: 920px) {
  .brand-sub { display: none; }
  .header-appeal { padding: 6px 10px; }
}

/* make navbar container slightly slimmer */
.navbar .container { padding-top: 6px; padding-bottom: 6px; }

/* reduce site header shadow for lighter look */
.site-header { box-shadow: 0 2px 8px rgba(4,10,30,0.05); }

/* -------------------------
  Make navbar "blue" (match header) + active underline animation
  Paste at the END of theme.css
--------------------------*/

/* If navbar is inside the header, remove its white background so the
   header's blue gradient shows through. Also remove borders. */
.site-header .navbar {
  background: transparent;
  border-top: none;
  border-bottom: none;
  box-shadow: none;
}

/* Ensure the container inside the navbar is transparent too */
.site-header .navbar .container {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

/* Make nav links clearly visible on blue background; keep pill look */
.site-header .navbar .nav-link {
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.06);
  transition: background .14s ease, transform .12s ease, color .12s ease;
}

/* On hover lift slightly */
.site-header .navbar .nav-link:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-2px);
}

/* Animated underline for hover/active:
   We use a pseudo-element scaled from 0 -> 1 for smooth animation. */
.site-header .navbar .nav-link {
  position: relative;
  overflow: visible;
}
.site-header .navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -6px;
  height: 3px;
  background: rgba(255,255,255,0.95);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms cubic-bezier(.2,.9,.3,1);
  pointer-events: none;
  opacity: 0.95;
}

/* show underline on hover or when the link is active */
.site-header .navbar .nav-link:hover::after,
.site-header .navbar .nav-link.active::after {
  transform: scaleX(1);
}

/* mobile: when navbar is opened we want a slightly tinted blue background
   so the stacked links remain readable. Keep it subtle so it looks cohesive. */
@media (max-width: 768px) {
  .site-header .navbar.open {
    background: linear-gradient(90deg, rgba(11,94,215,0.12), rgba(10,88,202,0.10));
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
  }
  .site-header .navbar.open .nav-left .nav-link {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.95);
  }
}

/* If you have any pages where the navbar is not inside the header and
   you *still* want a blue bar, add the .navbar-blue class to the element:
   <nav class="navbar navbar-blue">...</nav>
*/
.navbar-blue {
  background: linear-gradient(90deg, var(--primary), #0a58ca);
  border-top: none;
  border-bottom: none;
  color: white;
}
.navbar-blue .nav-link { color: rgba(255,255,255,0.98); background: rgba(255,255,255,0.05); }

/* small tweak: push the underline a bit closer on smaller screens */
@media (max-width: 920px) {
  .site-header .navbar .nav-link::after { bottom: -5px; left: 10%; right: 10%; }
}







/* ---------- Stronger, bolder brand styling ---------- */
/* Paste at end of theme.css so it overrides prior rules */

/* make the mark more substantial */
.brand-mark {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  margin-right: 10px;
}

/* stronger wordmark */
.brand-text { display:flex; flex-direction:column; justify-content:center; line-height:1; }
.brand { margin:0; }

/* very bold, compact uppercase wordmark */
.brand-strong {
  display:inline-block;
  font-weight:800;                 /* heavier */
  font-size:1.08rem;               /* slightly larger */
  letter-spacing:0.8px;
  text-transform:uppercase;        /* assertive */
  color: #fff;
  text-shadow: 0 6px 18px rgba(0,0,0,0.22); /* lift off the header */
  line-height: 1;
}

/* short underline 'bar' to emphasize brand (subtle) */
.brand-strong::after {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin-top: 6px;
  background: rgba(255,255,255,0.95);
  border-radius: 3px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  opacity: 0.95;
}

/* slightly reduce subtitle opacity so main wordmark stands out */
.brand-sub { color: rgba(255,255,255,0.85); font-size:0.72rem; margin-top:2px; }

/* make sure compact mobile still looks good */
@media (max-width: 768px) {
  .brand-mark { width: 28px; height: 28px; margin-right:8px; }
  .brand-strong { font-size: 0.95rem; letter-spacing:0.6px; }
  .brand-strong::after { width: 36px; height:3px; margin-top:4px; }
  .brand-sub { display: none; } /* keep it tidy on small screens */
}


.nav-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;   /* remove gap entirely */
}

.nav-flex .nav-link {
  margin: 0 6px;  /* control space manually */
  padding: 6px 8px;
}




/* ---------------- Mobile: hamburger left + floating overlay menu ---------------- */
@media (max-width: 768px) {
  /* make header container positioned so absolute children are based on it */
  .site-header .container { position: relative; padding-left: 48px; padding-right: 12px; }

  /* hamburger moved to extreme left (absolute) - visible only on mobile */
  .menu-toggle {
    display: block;
    position: absolute;
    left: 12px;                       /* extreme left inside container */
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: white;
    border: none;
    font-size: 1.25rem;
    padding: 8px 10px;
    z-index: 1200;
    border-radius: 8px;
  }

  /* hide the header-right's hamburger duplicate if present (keeps avatar visible) */
  .header-right .menu-toggle { display: none; }

  /* ensure center-nav doesn't change header height (we will float it) */
  .center-nav { position: relative; }

  /* floating menu: hidden by default */
  .site-header .navbar {
    display: none;      /* default hidden on mobile */
    position: absolute; /* will be toggled to an overlay when open */
    left: 8px;
    right: 8px;
    top: calc(100% + 8px); /* float below header */
    margin: 0;
    z-index: 1199;
    width: auto;
    border-radius: 10px;
    overflow: visible;
    box-shadow: 0 12px 40px rgba(2,8,23,0.18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: opacity .15s ease, transform .18s ease;
    transform-origin: top center;
    opacity: 0;
    pointer-events: none;
  }

  /* when open: make it visible and slightly slide down */
  .site-header .navbar.open {
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(6px);
    background: linear-gradient(180deg, rgba(11,94,215,0.10), rgba(10,88,202,0.06));
    border: 1px solid rgba(255,255,255,0.06);
    padding: 12px;
  }

  /* stacked menu items in the floating panel */
  .site-header .navbar .nav-flex {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  .site-header .navbar .nav-link {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.98);
    font-weight:700;
    text-align: left;
  }
  .site-header .navbar .nav-link:hover { background: rgba(255,255,255,0.06); transform: none; }

  /* tap/click outside overlay should be possible - we place a full-screen invisible backdrop when open */
  .site-header .navbar.open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1188; /* behind the menu but above rest of page */
    background: transparent; /* invisible but catches clicks in JS if needed */
  }

  /* compact the header a bit so it doesn't feel taller */
  .header-appeal { padding-top: 8px; padding-bottom: 8px; }
}





/* ===== Mobile: place hamburger on extreme left and use floating overlay menu ===== */
@media (max-width: 768px) {
  /* ensure container is positioned for absolute children */
  .site-header .container { position: relative; padding-left: 48px; padding-right: 12px; }

  /* show/position hamburger at extreme left */
  .menu-toggle {
    display: block !important;          /* force visible on mobile */
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent;
    color: white;
    border: none;
    font-size: 1.2rem;
    padding: 6px 8px;
    z-index: 1300;
    border-radius: 8px;
  }

  /* If some rules hide the hamburger when inside .header-right, override that too */
  .header-right .menu-toggle { display: none; }        /* keep the right-side one hidden if present */
  .site-header > .container .menu-toggle { display: block; }

  /* Floating overlay menu styling */
  .site-header .navbar {
    display: none;
    position: absolute;
    left: 8px;
    right: 8px;
    top: calc(100% + 8px);
    margin: 0;
    z-index: 1299;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(2,8,23,0.18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transform-origin: top center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .18s ease;
  }

  .site-header .navbar.open {
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(6px);
    background: linear-gradient(180deg, rgba(11,94,215,0.10), rgba(10,88,202,0.06));
    border: 1px solid rgba(255,255,255,0.06);
    padding: 12px;
  }

  /* stacked list inside floating menu */
  .site-header .navbar .nav-flex {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  .site-header .navbar .nav-link {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.98);
    font-weight: 700;
    text-align: left;
  }
  .site-header .navbar .nav-link:hover { background: rgba(255,255,255,0.06); }

  /* subtle backdrop catcher to ease outside-click handling (in case JS needs it) */
  .site-header .navbar.open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1188;
    background: transparent;
  }

  /* keep header compact */
  .header-appeal { padding-top: 8px; padding-bottom: 8px; }
}


/* Debug / safety: ensure open class shows the floating menu */
@media (max-width: 768px) {
  .site-header .navbar {
    display: none;
    opacity: 0;
    pointer-events: none;
  }
  .site-header .navbar.open {
    display: block;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid rgba(255,255,255,0.12); /* visible during debug */
  }
}




/* safety: if .open present, ensure navbar visible (useful fallback) */
@media (max-width: 768px) {
  .site-header .navbar.open {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(6px) !important;
  }
}





/* ======================
   Analysis toolbar: keep action buttons on one line (shrink-to-fit)
   ====================== */

/* container around the buttons */
.analysis-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;            /* spacing between buttons */
  justify-content: flex-start;
  flex-wrap: nowrap;    /* never wrap to next line */
  width: 100%;
  box-sizing: border-box;
}

/* make buttons able to shrink but not disappear */
.analysis-actions .btn {
  flex: 0 1 auto;      /* allow shrink, do not force grow */
  min-width: 56px;     /* prevent completely collapsing */
  white-space: nowrap; /* keep text on one line inside button */
  text-overflow: ellipsis;
  overflow: hidden;
}

/* slightly smaller / tighter buttons for small screens */
@media (max-width: 520px) {
  .analysis-actions { gap: 8px; }
  .analysis-actions .btn {
    padding: 6px 9px;
    font-size: 0.86rem;
    min-width: 48px;
  }
  .analysis-actions .btn.small { padding: 5px 8px; font-size: 0.82rem; }
}

/* if you have icon-only buttons, allow them to remain compact */
.analysis-actions .icon-btn {
  flex: 0 0 auto;      /* don't grow or shrink */
  padding: 6px;
}

/* ensure card padding contains the toolbar and prevents overflow */
.card .analysis-actions {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-right: 6px;  /* small breathing room */
  overflow: hidden;    /* prevent children from overflowing the card edge */
}








/* Billing period toggle active state */
.billing-toggle button {
  transition: all 0.2s ease;
  color: var(--muted);
  background: transparent;
}

.billing-toggle button.active {
  background: var(--primary);
  color: darkblue;
  box-shadow: 0 4px 10px rgba(11,94,215,0.25);
}
/* responsive iframe wrapper for video cards */
.video-iframe-wrapper { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; border-radius: 8px; }
.video-iframe-wrapper iframe { position: absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* play button hover */
.video-thumb-wrap:hover .video-play-button { transform: translate(-50%,-50%) scale(1.02); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }



/* Video lightbox modal (if using external CSS rather than inline styles) */
#videoLightboxOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
#videoLightbox {
  max-width: 1100px;
  width: 100%;
  background: transparent;
  border-radius: 10px;
  position: relative;
  outline: 0;
}
#videoLightbox iframe {
  border: 0;
}
#videoLightboxClose {
  position: absolute;
  right: -8px;
  top: -8px;
  background: #fff;
  border-radius: 999px;
  border: 0;
  width: 44px;
  height: 44px;
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

/* Play button hover effect */
.video-thumb-wrap:hover .video-play-button {
  transform: translate(-50%,-50%) scale(1.02);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}




/* --- Shorts feed styles --- */

/* container layout */
.video-shorts-feed {
  display: block;
  height: calc(100vh - 220px); /* adjust if header/footer height changes */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

/* each short occupies the viewport */
.short-card {
  position: relative;
  width: 100%;
  height: 100vh;
  scroll-snap-align: center;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* placeholder for iframe */
.short-player-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

/* overlay meta (title / channel) */
.short-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* let clicks pass to placeholder for toggles */
}
.short-meta {
  position: absolute;
  left: 14px;
  bottom: 16px;
  color: #fff;
  pointer-events: auto;
  max-width: 68%;
}
.short-title { font-size: 1.05rem; font-weight: 600; margin-bottom:6px; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.short-channel { font-size: 0.85rem; color: rgba(255,255,255,0.9); margin-bottom:6px; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }

/* controls (unmute/info) */
.short-controls { display:flex; gap:8px; margin-top:6px; }
.short-unmute-btn, .short-info-btn {
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  padding:6px 10px;
  border-radius:6px;
  cursor: pointer;
  font-size:0.85rem;
}

/* grid layout fallback */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

/* grid card */
.grid-card {
  border:1px solid #eee;
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
}
.grid-card .thumb img { width:100%; height:140px; object-fit:cover; display:block; }
.grid-card .meta { padding:8px; }
.grid-card .title { font-weight:600; margin-bottom:6px; }
.grid-card .channel { font-size:0.85rem; color:#666; margin-bottom:6px; }
.grid-card .desc { font-size:0.82rem; color:#444; height:40px; overflow:hidden; }

/* small responsive tweaks */
@media (max-width:720px) {
  .short-meta { max-width: 86%; left: 10px; bottom: 12px; }
  .video-shorts-feed { height: calc(100vh - 160px); }
}



/* Shorts / vertical full-viewport feed */
#videoResults.shorts-mode {
  display: block;
  height: calc(100vh - 120px);
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
#videoResults.shorts-mode .short-card {
  display: block;
  width: 100%;
  height: 100vh;
  border-radius: 0;
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start;
  background: #000;
  color: #fff;
}
.short-player-placeholder,
.short-iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



canvas {
  transition: opacity 0.3s ease-in-out;
}
canvas.updating {
  opacity: 0.5;
}



/* ---------- dashboard grid & cards ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 18px; }
.page-title { font-size: 1.6rem; margin-bottom: 8px; font-weight:700; }

/* summary grid */
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin:12px 0; }
.summary-card { background: #fff; padding:14px; border-radius:10px; box-shadow: 0 6px 18px rgba(20,20,60,0.04); min-height:72px; }
.summary-card .muted { color:#667; font-size:0.9rem; }
.summary-card .summary-value { font-weight:700; margin-top:6px; font-size:1.1rem; }

/* section sep */
.section-sep { margin: 14px 0; border: none; border-top: 1px solid #f1f3f6; }

/* dashboard grid for charts */
.dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }

/* chart card */
.chart-card { background: #fff; padding: 10px; border-radius: 10px; box-shadow: 0 8px 26px rgba(20,20,60,0.05); display:flex; flex-direction:column; min-height: 400px; }
.card-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.card-title { font-weight:700; display:flex; align-items:center; gap:8px; }
.card-controls { margin-left:auto; }
.card-controls .chart-toggle { padding:6px 10px; font-size:0.85rem; border-radius:8px; border:1px solid #e6e9ee; background:#fff; cursor:pointer; }
.chart-body { flex: 1 1 auto; min-height:240px; height:260px; margin-bottom:8px; }
.card-list { max-height:120px; overflow:auto; padding-top:8px; border-top:1px dashed #f1f3f6; }

/* ticker / marquee */
.marquee-wrap { margin-bottom:12px; }
.market-ticker {
  display:flex; gap:14px; background:#0d1115; color:#fff; padding:10px 12px; border-radius:8px; overflow:hidden;
  white-space:nowrap; align-items:center;
  box-shadow: inset 0 -6px 18px rgba(0,0,0,0.25);
}
.market-ticker .ticker-item { display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:6px; background: rgba(255,255,255,0.03); min-width:160px; }
.ticker-item .tk-symbol { font-weight:700; color:#fff; margin-right:6px; }
.ticker-item .tk-price { color:#e6edf3; }
.ticker-item .tk-delta { font-weight:700; }

/* brighter colors */
.ticker-item .tk-delta.up { color:#22cc22; }
.ticker-item .tk-delta.down { color:#ff3333; }

/* pause class (used for hover) */
.market-ticker.paused { animation-play-state: paused !important; }

/* smaller devices */
@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: repeat(2,1fr); }
}

/* make charts have comfortable padding inside canvas area */
canvas { padding: 4px; }

/* Ensure lists inside card are visually tidy */
.card-list ul { list-style:none; padding-left:10px; margin:0; font-size:0.95rem; }
.card-list li { margin-bottom:6px; color:#222; }
.card-list .muted { color:darkgreen; font-size:0.9rem; }

/* subtle hover for toggles */
.card-controls .chart-toggle:hover { background:#f4f6f9; }

/* keep footer spacing */
.site-footer { margin-top:30px; padding:18px 0; text-align:center; color:#6b7280; }

/* improve contrast of green/red text used in header ticker items */
.market-ticker .tk-delta { text-shadow: 0 0 6px rgba(255,255,255,0.03); }

/* reduce chart height in small screens */
@media (max-width:600px) {
  .chart-body { height:200px; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
}




/* Ticker styles */



/* Minimal stable ticker CSS */
.home-ticker {
  background:#000; color:#fff; border-radius:6px; overflow:visible;
  --tk-gap:22px; --tk-consec-gap:6px; --tk-font-size:0.92rem;
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* viewport */
.home-ticker__wrap {
  width:100%; overflow:hidden; position:relative; box-sizing:border-box;
}

/* animated lane (animation lives here). JS may set --marquee-distance and --marquee-duration */
.home-ticker__inner {
  display:inline-flex; align-items:center; gap:0;
  white-space:nowrap; font-size:0; padding:0; will-change:transform;
  --marquee-duration:30s;
  --marquee-distance: -50%;
  animation: marquee var(--marquee-duration) linear infinite;
  transform-origin:0 0;
}

/* pause by toggling .paused on wrapper */
.home-ticker__wrap.paused .home-ticker__inner { animation-play-state:paused !important; }

/* items (reset child font-size so font-size:0 on inner is safe) */
.tk-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--tk-font-size);
  padding: 0;                /* no padding */
  line-height: 1.6;          /* increase this to make text look taller */
  margin-right: var(--tk-gap);
  white-space: nowrap;
  font-weight: 600;
  border-radius: 6px;
}


.tk-item.tk-consec { margin-right:var(--tk-consec-gap) !important; }
.home-ticker__inner .tk-item:last-child { margin-right:0; }

/* small parts */
.tk-symbol{ font-weight:800; margin-right:4px; }
.tk-close{ color:#ddd; font-weight:700; min-width:20px; text-align:right; display:inline-block; overflow:hidden; text-overflow:ellipsis; }
.tk-delta{ font-weight:900; margin-left:6px; min-width:50px; text-align:right; display:inline-block; overflow:hidden; text-overflow:ellipsis; }
.tk-delv{ color:#bbb; margin-left:6px; font-weight:600; }

/* up/down */
.tk-up{ color:#00e05a !important; } .tk-down{ color:#ff3b3b !important; } .tk-neutral{ color:#bbb !important; }

/* use translate3d and the CSS var for exact pixel distance (JS may set --marquee-distance to "-12345px") */
@keyframes marquee {
  0%   { transform: translate3d(0,0,0); }
  100%{ transform: translate3d(var(--marquee-distance, -50%), 0, 0); }
}

/* responsive tweak (optional, small) */
@media (max-width:900px){
  .home-ticker{ --tk-gap:12px; --tk-consec-gap:4px; --tk-font-size:0.86rem; }
  .tk-item{ padding:4px 6px; gap:4px; }
}
/* remove baseline gaps and force exact vertical sizing */
.home-ticker { /* ensure variable present */ --tk-font-size: 1.1rem; }

.home-ticker__inner { align-items: center; } /* already present but keep for safety */



/* if you prefer a slightly taller look, increase multiplier above */
/* ---- Fix ticker vertical centering (remove lower gap) ---- */
.home-ticker__inner { line-height: 0; }  /* collapse line box */
.tk-item {
  line-height: 1;               /* keep internal text normal */
  align-items: baseline;        /* align spans precisely */
  transform: translateY(10px);   /* nudge entire text down slightly */
}





/* --- COMPACT SINGLE-ROW NAVBAR --- */

/* reduce overall header height */
.site-header {
  background: linear-gradient(90deg, var(--primary), #0a58ca);
  padding: 4px 0;                  /* minimal top/bottom padding */
}

/* flatten container layout */
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
}

/* brand mark smaller and aligned */
.brand-mark svg.sb-mark {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
.brand {
  font-size: 0.95rem;
  margin: 0 4px;
  line-height: 1;
}
.brand-text {
  display: inline-flex;
  align-items: center;
}

/* nav links tight */
.nav-flex {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.nav-link {
  color: #fff;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 2px 6px;
  border-radius: 4px;
  text-decoration: none;
}
.nav-link:hover,
.nav-link.active {
  background: rgba(255,255,255,0.15);
  text-decoration: none;
}

/* compact sign-in/up buttons */
.site-header .btn {
  padding: 4px 8px;
  font-size: 0.85rem;
  border-radius: 4px;
  line-height: 1;
}
.site-header .btn.small {
  padding: 3px 6px;
  font-size: 0.82rem;
}

/* hide 'Welcome' text for compactness, keep avatar aligned */
.user-block .user-meta { display: none; }
.avatar { width: 26px; height: 26px; font-size: 0.85rem; }

/* tighter profile button cluster */
.user-block {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* remove any vertical stacking in nav */
.navbar, .header-flex { align-items: center; }

/* compact footer optional */
.site-footer { padding: 6px 0; font-size: 0.85rem; }

/* responsive: keep single row on desktop, collapse on small screens only */
@media (max-width: 768px) {
  .site-header { padding: 6px 0; }
  .nav-flex {
    flex-wrap: wrap;
    justify-content: center;
  }
}
/* ensure all header buttons stay on one line */
.site-header .btn,
.site-header .btn.small {
  white-space: nowrap;     /* never wrap text */
  display: inline-flex;     /* keep content inline & center aligned */
  align-items: center;
  justify-content: center;
}