@media (max-width: 900px) {
  .topbar {
    position: sticky;
    top: 0;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
    margin: 10px;
    border-radius: 18px;
  }

  .top-brand { justify-content: flex-start; }
  .top-search { width: 100%; }
  .top-search input { width: 100%; margin: 0; min-height: 46px; }
  .top-actions { justify-content: space-between; gap: 10px; width: 100%; }
  .top-actions > * { flex: 1; }

  .app-layout {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 10px 10px;
  }

  .sidebar {
    position: relative;
    top: 0;
    height: auto;
    padding: 12px;
    border-radius: 18px;
  }

  .sidebar-profile { margin-bottom: 12px; padding: 10px; }

  .sidebar nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .nav-btn {
    margin: 0;
    min-height: 48px;
    justify-content: center;
    padding: 12px 10px;
    border-radius: 14px;
  }

  .nav-btn span { font-size: 13px; }
  .main { padding-bottom: 18px; }

  .page-head,
  .section-head,
  .filters,
  .row,
  .actions,
  .meta {
    flex-direction: column;
    align-items: stretch;
  }

  .page-head > *,
  .section-head > *,
  .filters > *,
  .row > *,
  .actions > * {
    width: 100%;
  }

  .hero-banner,
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero-banner { padding: 18px; }
  .hero-banner h2 { font-size: 28px; line-height: 1.15; }

  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .mini-stat {
    padding: 12px 8px;
    border-radius: 14px;
  }

  .mini-stat strong { font-size: 22px; }

  .card {
    padding: 16px;
    border-radius: 18px;
  }

  .story-grid,
  .story-grid.compact {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .story-card .cover { height: 170px; }

  .story-title {
    font-size: 20px;
    line-height: 1.2;
  }

  .tags { gap: 6px; }

  .tag,
  .pill,
  .badge-age {
    font-size: 11px;
    padding: 6px 10px;
  }

  input,
  textarea,
  select,
  button {
    min-height: 46px;
  }

  textarea { min-height: 110px; }

  .author-header,
  .sidebar-profile {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-info h3 { font-size: 24px; }

  .author-stats-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .author-stat {
    text-align: center;
    padding: 10px;
  }

  .profile-tabs,
  .library-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .tab-btn,
  .library-tab-btn {
    width: 100%;
    min-height: 44px;
  }

  .chapter-editor,
  .chapter-card {
    padding: 12px;
    border-radius: 16px;
  }

  .chapter-read-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .chapter-read-nav > * { width: 100%; }

  .read-box {
    padding: 18px;
    border-radius: 16px;
  }

  .chat-box {
    min-height: 300px;
    max-height: 52vh;
    padding: 10px;
    border-radius: 16px;
  }

  .msg {
    max-width: 88%;
    padding: 10px 12px;
  }

  .upload-box {
    padding: 12px;
    border-radius: 16px;
  }

  .cover-preview { max-height: 220px; }

  .toast-container {
    right: 10px;
    left: 10px;
    top: 10px;
  }

  .toast {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .admin-item {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-actions { width: 100%; }
  .admin-actions > * { flex: 1; }
}

@media (max-width: 640px) {
  .topbar {
    margin: 8px;
    padding: 10px;
  }

  .logo-chip {
    width: 52px;
    height: 52px;
  }

  .logo-chip.sm {
    width: 40px;
    height: 40px;
  }

  .brand-title { font-size: 20px; }
  .brand-sub { font-size: 11px; }

  .app-layout { padding: 0 8px 12px; }
  .sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .nav-btn {
    min-height: 44px;
    padding: 10px 8px;
    font-size: 13px;
  }

  .nav-btn span { font-size: 12px; }

  .hero-banner h2 { font-size: 24px; }
  .hero-banner p { font-size: 14px; }

  .hero-stats { grid-template-columns: 1fr 1fr 1fr; }

  .mini-stat strong { font-size: 18px; }
  .mini-stat span { font-size: 11px; }

  .page-head h2,
  .section-head h3 { margin: 0; }

  .story-card .cover { height: 155px; }
  .story-title { font-size: 18px; }

  .avatar.xl {
    width: 84px;
    height: 84px;
  }

  .author-stats-row { grid-template-columns: 1fr 1fr; }

  .profile-tabs,
  .library-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .read-box { font-size: 16px !important; }
}


@media (max-width: 900px) {
  .pix-box{
    flex-direction:column;
    align-items:stretch;
  }
  .admin-shortcut{
    margin-top:12px;
  }
}


@media (max-width: 900px) {
  .site-footer{
    flex-direction:column;
    align-items:flex-start;
  }

  .story-card .cover{
    width:min(100%, 180px);
  }

  .cover.big{
    width:100%;
  }

  .simple-page-hero h1{
    font-size:30px;
  }
}


@media (max-width: 900px) {
  #storyDiscoveryBox{
    grid-template-columns:1fr !important;
  }
}


@media (max-width: 900px) {
  .auth-logo{
    width:78px;
    height:78px;
    margin-bottom:10px;
  }
  .top-logo{
    width:40px;
    height:40px;
  }
  .page-logo,
  .admin-page-logo{
    width:72px;
    height:72px;
  }
}

@media (max-width: 640px) {
  .auth-logo{
    width:70px;
    height:70px;
  }
  .top-logo{
    width:36px;
    height:36px;
  }
}