/* === Ultimate Keywords — orbit animation + sidebar scroll fix + Vibe Mode === */

/* ---- Sidebar nav list scroll, styled to match the active theme instead
   of a generic grey/white browser scrollbar. ---- */
.sidebar{overflow:hidden}
.nav-list{flex:1 1 auto;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--cyan) transparent}
.nav-list::-webkit-scrollbar{width:6px}
.nav-list::-webkit-scrollbar-track{background:transparent}
.nav-list::-webkit-scrollbar-thumb{background:var(--cyan);opacity:.55;border-radius:6px}

/* ---- Headings that were rendering unreadably dark ---- */
.settings-panel h2,.section-heading h2,.panel-heading h2,.panel h2{color:var(--text)!important}

/* ---- Orbit: rings stay still, only the 4 spheres actually orbit ---- */
.orbit,.orbit-1,.orbit-2,.orbit-3,.orbit-4{animation:none!important}

.orbit-carrier{position:absolute;inset:0;display:flex;justify-content:center;pointer-events:none;animation:orbitSpin linear infinite}
.carrier-1{width:100%;height:100%;animation-duration:12s}
.carrier-2{width:75%;height:75%;top:12.5%;left:12.5%;animation-duration:18s}
.carrier-3{width:56%;height:56%;top:22%;left:22%;animation-duration:24s}
.carrier-4{width:38%;height:38%;top:31%;left:31%;animation-duration:9s}
@keyframes orbitSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.orbit-node{position:absolute!important;top:-15px;left:50%;right:auto!important;bottom:auto!important;margin-left:-15.5px;animation:counterSpin linear infinite}
.carrier-1 .orbit-node{animation-duration:12s}
.carrier-2 .orbit-node{animation-duration:18s}
.carrier-3 .orbit-node{animation-duration:24s}
.carrier-4 .orbit-node{animation-duration:9s}
@keyframes counterSpin{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}

/* ---- Vibe Mode: colorful shifting light glow layered behind all content.
   Present in both the regular and max tiers. ---- */
.vibe-lights{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;z-index:1;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,90,160,.22), transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(90,180,255,.22), transparent 35%),
    radial-gradient(circle at 30% 80%, rgba(255,210,90,.20), transparent 35%),
    radial-gradient(circle at 80% 85%, rgba(140,255,170,.20), transparent 35%);
  animation:vibeDrift 14s ease-in-out infinite alternate,vibeHue 9s linear infinite;
}
body.vibe-mode .vibe-lights{opacity:1}
@keyframes vibeHue{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
@keyframes vibeDrift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.15) translate(3vw,-2vw)}}

/* Sidebar text color-cycling, present in both tiers. */
@keyframes vibeTextCycle{
  0%{color:#ff5aa0}20%{color:#ffd25a}40%{color:#78ffaa}60%{color:#5ab4ff}80%{color:#b478ff}100%{color:#ff5aa0}
}
body.vibe-mode .nav-item{animation:vibeTextCycle 6s linear infinite}
body.vibe-mode .nav-item span{animation:vibeTextCycle 6s linear infinite reverse}
body.vibe-mode .nav-item.active{background:transparent;box-shadow:none}

.nav-list .nav-item:nth-child(1){animation-delay:-.25s}
.nav-list .nav-item:nth-child(2){animation-delay:-.5s}
.nav-list .nav-item:nth-child(3){animation-delay:-.75s}
.nav-list .nav-item:nth-child(4){animation-delay:-1s}
.nav-list .nav-item:nth-child(5){animation-delay:-1.25s}
.nav-list .nav-item:nth-child(6){animation-delay:-1.5s}
.nav-list .nav-item:nth-child(7){animation-delay:-1.75s}
.nav-list .nav-item:nth-child(8){animation-delay:-2s}
.nav-list .nav-item:nth-child(9){animation-delay:-2.25s}
.nav-list .nav-item:nth-child(10){animation-delay:-2.5s}
.nav-list .nav-item:nth-child(11){animation-delay:-2.75s}
.nav-list .nav-item:nth-child(12){animation-delay:-3s}
.nav-list .nav-item:nth-child(13){animation-delay:-3.25s}
.nav-list .nav-item:nth-child(14){animation-delay:-3.5s}
.nav-list .nav-item:nth-child(15){animation-delay:-3.75s}
.nav-list .nav-item:nth-child(16){animation-delay:-4s}
.nav-list .nav-item:nth-child(17){animation-delay:-4.25s}
.nav-list .nav-item:nth-child(18){animation-delay:-4.5s}
.nav-list .nav-item:nth-child(19){animation-delay:-4.75s}
.nav-list .nav-item:nth-child(20){animation-delay:-5s}
.nav-list .nav-item:nth-child(21){animation-delay:-5.25s}
.nav-list .nav-item:nth-child(22){animation-delay:-5.5s}
.nav-list .nav-item:nth-child(23){animation-delay:-5.75s}
.nav-list .nav-item:nth-child(24){animation-delay:-6s}

/* ---- Regular tier (first click): each element type gets its own fixed,
   low-intensity glow color — no animation, no bright pulsing. ---- */
body.vibe-mode:not(.vibe-max) .panel{box-shadow:0 0 8px 1px rgba(255,90,160,.22)}
body.vibe-mode:not(.vibe-max) .metric-card{box-shadow:0 0 8px 1px rgba(90,180,255,.22)}
body.vibe-mode:not(.vibe-max) .module-card{box-shadow:0 0 8px 1px rgba(120,255,170,.22)}
body.vibe-mode:not(.vibe-max) .data-panel{box-shadow:0 0 8px 1px rgba(255,210,90,.22)}
body.vibe-mode:not(.vibe-max) .nav-item{box-shadow:0 0 6px 1px rgba(180,120,255,.18)}
body.vibe-mode:not(.vibe-max) .icon-button{box-shadow:0 0 6px 1px rgba(255,90,160,.2)}
body.vibe-mode:not(.vibe-max) .primary-button{box-shadow:0 0 6px 1px rgba(90,180,255,.2)}
body.vibe-mode:not(.vibe-max) .ghost-button{box-shadow:0 0 6px 1px rgba(120,255,170,.2)}

/* ---- Max tier (second click): bright animated color-cycling glow,
   overriding the regular tier's static glow on the same elements. ---- */
@keyframes vibeBorderCycle{
  0%{box-shadow:0 0 16px 1px rgba(255,90,160,.5)}
  20%{box-shadow:0 0 16px 1px rgba(255,210,90,.5)}
  40%{box-shadow:0 0 16px 1px rgba(120,255,170,.5)}
  60%{box-shadow:0 0 16px 1px rgba(90,180,255,.5)}
  80%{box-shadow:0 0 16px 1px rgba(180,120,255,.5)}
  100%{box-shadow:0 0 16px 1px rgba(255,90,160,.5)}
}
body.vibe-mode.vibe-max .panel,
body.vibe-mode.vibe-max .metric-card,
body.vibe-mode.vibe-max .module-card,
body.vibe-mode.vibe-max .data-panel,
body.vibe-mode.vibe-max .nav-item,
body.vibe-mode.vibe-max .icon-button,
body.vibe-mode.vibe-max .primary-button,
body.vibe-mode.vibe-max .ghost-button{animation:vibeBorderCycle 6s linear infinite}

/* ---- Flask flash messages: visible feedback for registration, verification,
   login, logout, password reset, and validation errors. ---- */
.flash-messages{position:fixed;top:1rem;right:1rem;z-index:10000;display:grid;gap:.75rem;width:min(28rem,calc(100vw - 2rem));pointer-events:none}
.flash{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.9rem 1rem;border:1px solid transparent;border-radius:.8rem;box-shadow:0 .85rem 2.25rem rgba(0,0,0,.28);font-size:.94rem;line-height:1.4;pointer-events:auto;animation:flashEnter 180ms ease-out}
.flash-success{color:#d9ffec;background:rgba(12,91,56,.96);border-color:rgba(97,236,167,.52)}
.flash-warning{color:#fff3c4;background:rgba(112,76,8,.97);border-color:rgba(255,207,72,.56)}
.flash-error{color:#ffe0e4;background:rgba(128,24,41,.97);border-color:rgba(255,122,143,.54)}
.flash-dismiss{flex:0 0 auto;width:1.65rem;height:1.65rem;margin:-.2rem -.25rem -.15rem 0;border:0;border-radius:.4rem;color:currentColor;background:transparent;cursor:pointer;font-size:1.35rem;line-height:1;opacity:.85}
.flash-dismiss:hover,.flash-dismiss:focus-visible{background:rgba(255,255,255,.14);opacity:1;outline:none}
@keyframes flashEnter{from{opacity:0;transform:translateY(-.55rem)}to{opacity:1;transform:translateY(0)}}

@media(max-width:640px){
  .flash-messages{top:.75rem;right:.75rem;width:calc(100vw - 1.5rem)}
}

@media (max-width: 1000px) {
  /* Background lights: drop the hue-rotate filter (the expensive part)
     and keep only the drift transform, which is cheap to animate since
     transform is GPU-compositable without a repaint. */
  .vibe-lights {
    animation: vibeDrift 14s ease-in-out infinite alternate !important;
    filter: none !important;
  }

  /* Nav item box-shadow color cycle: replace with a border-color cycle.
     Border-color changes are far cheaper to repaint than a blurred
     box-shadow, since there's no blur radius to recompute every frame. */
  @keyframes vibeBorderCycleMobile {
    0%   { border-color: rgba(255,90,160,.9); box-shadow: none; }
    20%  { border-color: rgba(255,210,90,.9); box-shadow: none; }
    40%  { border-color: rgba(120,255,170,.9); box-shadow: none; }
    60%  { border-color: rgba(90,180,255,.9); box-shadow: none; }
    80%  { border-color: rgba(180,120,255,.9); box-shadow: none; }
    100% { border-color: rgba(255,90,160,.9); box-shadow: none; }
  }

  body.vibe-mode.vibe-max .panel,
  body.vibe-mode.vibe-max .metric-card,
  body.vibe-mode.vibe-max .module-card,
  body.vibe-mode.vibe-max .data-panel,
  body.vibe-mode.vibe-max .nav-item,
  body.vibe-mode.vibe-max .icon-button,
  body.vibe-mode.vibe-max .primary-button,
  body.vibe-mode.vibe-max .ghost-button {
    animation: vibeBorderCycleMobile 6s linear infinite !important;
    border-width: 1px;
    border-style: solid;
  }

  /* Regular-tier static glow also uses box-shadow; drop it to a
     border-color instead on mobile for the same repaint-cost reason,
     even though it's not animated (a permanently-rendered blurred
     shadow is still more expensive to composite/scroll than a border,
     and helps scroll performance while Vibe Mode is on). */
  body.vibe-mode:not(.vibe-max) .panel { box-shadow: none !important; border-color: rgba(255,90,160,.4) !important; }
  body.vibe-mode:not(.vibe-max) .metric-card { box-shadow: none !important; border-color: rgba(90,180,255,.4) !important; }
  body.vibe-mode:not(.vibe-max) .module-card { box-shadow: none !important; border-color: rgba(120,255,170,.4) !important; }
  body.vibe-mode:not(.vibe-max) .data-panel { box-shadow: none !important; border-color: rgba(255,210,90,.4) !important; }
  body.vibe-mode:not(.vibe-max) .nav-item { box-shadow: none !important; border-color: rgba(180,120,255,.35) !important; }
}

.source-toggle,
.source-toggle span,
.source-toggle b{
  color: var(--text) !important;
}

.profile-menu{position:relative}
.profile-caret{margin-left:4px;color:var(--muted);font-size:10px}
.profile-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:280px;background:var(--panel-solid);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px;z-index:40}
.profile-dropdown[hidden]{display:none}
.profile-dropdown-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.profile-dropdown-head b{display:block;font-size:12px}
.profile-dropdown-head small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.profile-dropdown-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:var(--text);text-align:left;padding:10px 8px;border-radius:8px;font-size:12px;font-weight:700}
.profile-dropdown-item:hover{background:rgba(255,255,255,.05)}
.profile-dropdown-item span:first-child{width:16px;text-align:center;color:var(--cyan)}
.profile-dropdown-danger{color:var(--coral)}
.profile-dropdown-danger span:first-child{color:var(--coral)}
.profile-dropdown-divider{height:1px;background:var(--line);margin:10px 0}
.profile-dropdown-label{font:9px "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 8px;margin:0 0 6px}
.profile-dropdown-row{display:flex;align-items:center;justify-content:space-between;padding:8px 8px;font-size:12px}
.profile-dropdown-row>span:first-child{display:flex;align-items:center;gap:8px;color:var(--text)}
.profile-dropdown-stack{padding:2px 8px 6px;display:flex;flex-direction:column;gap:8px}
.profile-dropdown-select{background:#132836;border:1px solid var(--line);border-radius:7px;color:var(--text);padding:8px;font-size:11px;width:100%}
.profile-dropdown-logout{margin:0}
body[data-theme="white"] .profile-dropdown{background:#ffffff}
body[data-theme="white"] .profile-dropdown-select{background:#ffffff;color:var(--text);border-color:var(--line)}

.finding-source.tier-quick-win{color:var(--green)}
.finding-source.tier-priority{color:var(--cyan)}
.finding-source.tier-watch{color:var(--gold)}
.finding-source.tier-long-shot{color:var(--muted)}

body.calm *,
body.calm *::before,
body.calm *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

body.calm .vibe-lights,
body.calm .orbit-carrier,
body.calm .orbit-node,
body.calm .aurora {
  animation: none !important;
  box-shadow: none !important;
}