/* assets/qmomo.css */



/* Page wrapper */

.qmomo-wrap{

  width: 100%;

  padding: 8px 6px;

}



/* Description */

.qmomo-desc{

  max-width: 1000px;

  margin: 10px auto 18px auto;

  font-size: .9em;

  line-height: 1.5;

  color: rgba(176,190,197,.95);

  text-align: center;

}



/* Filters layout (card body) */

.qmomo-filters{

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.qmomo-filter-grid{

  display: grid;

  grid-template-columns: repeat(4, minmax(160px, 1fr));

  gap: 12px;

}



@media (max-width: 1100px){

  .qmomo-filter-grid{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }

}

@media (max-width: 680px){

  .qmomo-filter-grid{ grid-template-columns: 1fr; }

}



.qmomo-filter{

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.qmomo-label{

  font-size: .72rem;

  opacity: .85;

  margin: 0;

}



.qmomo-filter-actions{

  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

}



.qmomo-meta{

  margin-left: auto;

  font-size: .82rem;

  opacity: .75;

}



/* Table container */

.qmomo-table-wrap{

  width: 100%;

  overflow: auto;

}



/* Reuse Stage2 table look via .screener-table.

   Only add qmomo specifics below. */

.qmomo-table .ticker-cell{

  display: inline-flex;

  align-items: center;

  gap: 8px;

  justify-content: flex-start;

  text-align: left;

}



.qmomo-table .logo-container{

  display: inline-block;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  background: rgba(255,255,255,.12);

  overflow: hidden;

  flex: 0 0 auto;

}



.qmomo-table .logo-container img{

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.ticker-link{

  cursor: pointer;

  text-decoration: none;

  color: inherit;

}



.ticker-link:hover b{

  font-weight: 900;

}



/* Positive / negative growth */

.pos{ color: #2ecc71; font-weight: 800; }

.neg{ color: #ff5252; font-weight: 800; }

.muted{ opacity: .75; }



/* Pills (Alpha / Squeeze) */

.pill{

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 34px;

  padding: 2px 8px;

  border-radius: 999px;

  font-size: .78rem;

  font-weight: 900;

  letter-spacing: .2px;

  border: 1px solid rgba(255,255,255,.10);

  background: rgba(255,255,255,.04);

}



.pill-na{

  opacity: .75;

}



.pill-dim{

  background: rgba(255,255,255,.04);

}



/* Alpha coding (legacy mapping) */

.pill-alpha-67{ background: rgba(46,125,50,.80); border-color: rgba(46,125,50,.95); color: #fff; }

.pill-alpha-89{ background: rgba(56,142,60,.80); border-color: rgba(56,142,60,.95); color: #fff; }

.pill-alpha-10{ background: rgba(67,160,71,.85); border-color: rgba(67,160,71,.95); color: #fff; }



/* Squeeze coding (legacy mapping) */

.pill-sq-1{ background: rgba(191,167,0,.95); border-color: rgba(191,167,0,1); color: #111; }

.pill-sq-23{ background: rgba(230,195,0,.95); border-color: rgba(230,195,0,1); color: #111; }

.pill-sq-4{ background: rgba(255,179,0,.95); border-color: rgba(255,179,0,1); color: #111; }



.qmomo-table .logo-container{

  background: rgba(255,255,255,.12);

}



.qmomo-table .logo-container img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.qmomo-wrap{

  padding: 10px 10px 18px 10px;

}



.qmomo-filter-grid{

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;

}



@media (max-width: 1100px){

  .qmomo-filter-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 700px){

  .qmomo-filter-grid{ grid-template-columns: 1fr; }

}