/* ============ SMENA shared styles ============ */
@media (max-width: 767px) {
  body { padding-bottom: 76px; }
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.tight { letter-spacing: -0.03em; }
.tighter { letter-spacing: -0.04em; }

.grain {
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.04) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Marquee */
.marquee {
  animation: scroll 30s linear infinite;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.chip {
  transition: all .15s ease;
}
.chip:hover {
  transform: translateY(-2px);
  background: #DEFF1A;
  border-color: #0A0A0A;
}

.card-hover {
  transition: all .2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.12);
}

details summary::-webkit-details-marker { display:none; }
details summary::after {
  content: '+';
  font-size: 32px;
  line-height: 1;
  transition: transform .2s ease;
}
details[open] summary::after { content: '−'; }

.blink::after {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  margin-left: 8px;
  border-radius: 50%;
  background: #FF4D00;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.2); }
}

/* Sticker / wobble */
.sticker {
  display: inline-block;
  transform: rotate(-2deg);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sticker:hover { transform: rotate(2deg) scale(1.05); }

.wobble:hover { animation: wobble .5s ease; }
@keyframes wobble {
  0%,100% { transform: translateY(0); }
  25% { transform: translateY(-3px) rotate(-1deg); }
  75% { transform: translateY(-2px) rotate(1deg); }
}

.top-tick { animation: tickx 50s linear infinite; }
@keyframes tickx {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.dot-live {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #DEFF1A;
  box-shadow: 0 0 0 0 rgba(222,255,26,0.7);
  animation: live 1.6s ease-in-out infinite;
}
@keyframes live {
  0% { box-shadow: 0 0 0 0 rgba(222,255,26,0.7); }
  70% { box-shadow: 0 0 0 6px rgba(222,255,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(222,255,26,0); }
}

/* Mini histogram */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
  margin-top: 10px;
}
.bars > div {
  flex: 1;
  border-radius: 2px;
  background: #E8E8E0;
  min-height: 3px;
  position: relative;
}
.bars > div.b5 { background: #DEFF1A; border: 1px solid #0A0A0A; }
.bars > div.b4 { background: #0A0A0A; opacity: .35; }
.bars > div.b3 { background: #0A0A0A; opacity: .18; }
.bars-cap {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 700;
  color: #8A8A85;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

/* Map dots */
.map-dot {
  fill: #DEFF1A;
  stroke: #0A0A0A;
  stroke-width: 1.5;
  transition: all .2s ease;
  cursor: pointer;
}
.map-dot:hover {
  fill: #FF4D00;
  transform: scale(1.3);
  transform-origin: center;
}
.map-mini { fill: #0A0A0A; opacity: 0.25; }

/* Metro station dots */
.metro-station {
  fill: #FFFFFF;
  stroke: #0A0A0A;
  stroke-width: 2;
  cursor: pointer;
  transition: all .15s ease;
}
.metro-station:hover {
  fill: #DEFF1A;
  stroke-width: 3;
  transform: scale(1.3);
  transform-origin: center;
}
.metro-station.hot { fill: #DEFF1A; stroke-width: 2.5; }
.metro-line { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .35; }
.metro-line.red { stroke: #DC241F; }
.metro-line.green { stroke: #4CAF50; }
.metro-line.blue { stroke: #2196F3; }
.metro-line.orange { stroke: #FF7F00; }
.metro-line.violet { stroke: #8B4789; }
.metro-line.brown { stroke: #8B4513; }