/* v1.7.2 - recursos separados para smartphone e PC */
.mobile-feature-bar,
.desktop-shortcut-toast,
.mobile-feature-only,
.desktop-feature-only {
  display: none;
}

body.is-smartphone {
  overscroll-behavior-y: contain;
  -webkit-text-size-adjust: 100%;
}

body.is-smartphone .app-shell {
  padding-bottom: max(76px, calc(76px + env(safe-area-inset-bottom)));
}

body.is-smartphone button,
body.is-smartphone .menu-item,
body.is-smartphone input,
body.is-smartphone select {
  touch-action: manipulation;
}

body.is-smartphone .mobile-feature-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 19;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(28, 6, 11, 0.76);
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(18px);
}

body.is-smartphone.media-open .mobile-feature-bar,
body.is-smartphone.menu-open .mobile-feature-bar,
body.is-smartphone.tag-popup-open .mobile-feature-bar,
body.is-smartphone[data-view="immersive"] .mobile-feature-bar {
  display: none;
}

.mobile-feature-button {
  min-height: 44px;
  border: 0;
  border-radius: 18px;
  color: rgba(255, 247, 225, 0.94);
  background: rgba(255, 255, 255, 0.075);
  font: inherit;
  font-size: 0.73rem;
  font-weight: 950;
  cursor: pointer;
}

.mobile-feature-button.is-primary {
  color: #2b1114;
  background: linear-gradient(135deg, #ffe17a, #ff9f12);
}

body.is-desktop .desktop-shortcut-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 110;
  display: block;
  max-width: min(320px, calc(100vw - 36px));
  padding: 12px 14px;
  border-radius: 18px;
  color: rgba(255, 247, 225, 0.94);
  background: rgba(24, 5, 10, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
  font-size: 0.82rem;
  font-weight: 850;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

body.is-desktop .desktop-shortcut-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.is-desktop .desktop-shortcut-toast strong {
  color: #ffe17a;
}

@media (min-width: 980px) {
  body.is-desktop .archive-grid,
  body.is-desktop .media-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.immersive-device-tips {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.immersive-device-tip {
  display: none;
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.055);
}

.immersive-device-tip strong {
  display: block;
  margin-bottom: 3px;
  color: #ffe17a;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.immersive-device-tip span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

body.is-smartphone .mobile-feature-only,
body.is-desktop .desktop-feature-only {
  display: block;
}

button.mobile-feature-only,
button.desktop-feature-only,
a.mobile-feature-only,
a.desktop-feature-only {
  display: none;
}

body.is-smartphone button.mobile-feature-only,
body.is-smartphone a.mobile-feature-only,
body.is-desktop button.desktop-feature-only,
body.is-desktop a.desktop-feature-only {
  display: inline-flex;
}

.media-share-button,
.media-copy-id-button {
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 191, 36, 0.22);
  border-radius: 999px;
  color: rgba(255, 247, 225, 0.92);
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.media-share-button:focus-visible,
.media-copy-id-button:focus-visible {
  outline: 3px solid rgba(255, 191, 36, 0.22);
  outline-offset: 2px;
}