*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #07060f; -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0e0c1a; }
::-webkit-scrollbar-thumb { background: #2a2448; border-radius: 3px; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.offline-banner {
  display: none;
  background: #1c0808;
  border-bottom: 1px solid #7f1d1d;
  color: #fca5a5;
  font-family: monospace;
  font-size: 12px;
  text-align: center;
  padding: 6px 12px;
}
.offline-banner.show { display: block; }

.desktop-tabs {
  display: flex;
  border-bottom: 1px solid #1c1830;
  background: #0a0817;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }

  .desktop-tabs { display: none !important; }

  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0a0817;
    border-top: 1px solid #1c1830;
    z-index: 1000;
    padding: 0 0 env(safe-area-inset-bottom, 0);
  }

  .bottom-nav button {
    flex: 1;
    min-width: 56px;
    background: none;
    border: none;
    color: #635e80;
    padding: 8px 4px 6px;
    cursor: pointer;
    font-size: 9px !important;
    font-family: monospace;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    transition: color 0.2s;
  }

  .bottom-nav button.active {
    color: #a78bfa;
  }

  .bottom-nav button .nav-icon {
    font-size: 18px !important;
    line-height: 1;
  }

  .app-content {
    padding-bottom: 70px !important;
  }

  .genre-selector-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .genre-selector-wrap::-webkit-scrollbar { height: 0; }

  .genre-selector-wrap > div {
    flex-wrap: nowrap !important;
  }

  .header-inner {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .header-right {
    width: 100%;
    justify-content: flex-start !important;
  }

  .settings-grid-3 {
    grid-template-columns: 1fr !important;
  }

  .settings-grid-2 {
    grid-template-columns: 1fr !important;
  }

  .stats-bar {
    gap: 6px !important;
  }

  .stats-bar > div {
    min-width: 70px !important;
    padding: 10px 8px !important;
  }

  .stats-bar > div > div:first-child {
    font-size: 18px !important;
  }

  .filter-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }

  .filter-bar::-webkit-scrollbar { height: 0; }

  .draft-actions {
    flex-direction: column;
    gap: 6px !important;
  }

  .draft-actions button {
    width: 100%;
    justify-content: center;
  }

  .draft-header-badges {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  .features-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .account-grid {
    grid-template-columns: 100px 1fr !important;
    gap: 8px 12px !important;
  }

  .upgrade-features-grid {
    grid-template-columns: 1fr !important;
  }

  .monetize-grid {
    grid-template-columns: 1fr !important;
  }

  .affiliate-grid {
    grid-template-columns: 1fr !important;
  }

  .discover-results-grid {
    grid-template-columns: 1fr !important;
  }

  .search-input-row {
    flex-direction: column;
  }

  .search-input-row input {
    width: 100% !important;
  }

  .search-input-row button {
    width: 100%;
  }

  .platform-publish-btns {
    flex-direction: column;
    gap: 6px !important;
  }

  .schedule-row {
    flex-direction: column;
    gap: 4px !important;
  }

  .schedule-row > div:first-child {
    min-width: auto !important;
  }

  .landing-hero h1 {
    font-size: 28px !important;
  }

  .landing-hero p {
    font-size: 15px !important;
  }

  .landing-cta-row {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }

  .landing-cta-row button {
    width: 100%;
  }

  .wrap-content {
    padding: 20px 12px 80px !important;
  }
}

@media (max-width: 400px) {
  .features-grid {
    grid-template-columns: 1fr !important;
  }

  .bottom-nav button {
    min-width: 48px;
    font-size: 8px !important;
  }

  .bottom-nav button .nav-icon {
    font-size: 16px !important;
  }
}