@media (max-width: 550px) {
  .sidebar {
    inset: auto 0 0;
    width: auto;
    height: var(--studio-mobile-nav-height);
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 6px 12px 8px;
    border-right: 0;
    border-top: 1px solid var(--line);
  }
  .sidebar .brand,
  .rail-foot {
    display: none;
  }
  .sidebar nav {
    display: contents;
  }
  .rail-item,
  .rail-new {
    width: 72px;
    min-height: 58px;
    padding: 6px 2px;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
  }
  .rail-new {
    box-shadow: none;
  }
  .rail-item.active {
    background: var(--accent-soft);
  }
  .app-shell {
    margin-left: 0;
    padding-bottom: 72px;
  }
  .topbar {
    height: 57px;
    padding: 0 18px;
  }
  .topbar strong {
    font-size: 16px;
  }
  .header-divider,
  #page-title {
    display: none;
  }
  .topbar > div {
    gap: 7px;
  }
  .feature-tabs {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    padding: 0 12px;
    gap: 4px;
  }
  .feature-tabs button {
    justify-content: center;
    font-size: 15px;
    gap: 6px;
    min-height: 54px;
    padding: 13px 3px;
  }
  .feature-tabs .icon {
    width: 18px;
    height: 18px;
  }
  main {
    padding: 0 17px 30px;
  }
  .page-hero {
    padding: 28px 0 24px;
  }
  .page-hero h1 {
    font-size: 25px;
    line-height: 1.5;
  }
  .page-hero p {
    font-size: 13px;
    line-height: 1.8;
  }
  .eyebrow {
    font-size: 13px;
    margin-bottom: 6px;
  }
  .creation-card {
    padding: 18px 16px 0;
    border-radius: 10px;
  }
  .card-heading h2 {
    font-size: 15px;
  }
  .upload-zone {
    min-height: 190px;
  }
  #upload-empty {
    padding: 19px 10px;
    gap: 10px;
  }
  #upload-empty strong {
    font-size: 14px;
  }
  #upload-empty span {
    font-size: 13px;
  }
  .attachment {
    padding: 12px;
    gap: 12px;
  }
  .attachment img {
    width: 61px;
    height: 88px;
  }
  .attachment strong {
    font-size: 13px;
  }
  .attachment span,
  .attachment small {
    font-size: 13px;
  }
  .attachment .text-button {
    font-size: 13px;
  }
  .field-label {
    font-size: 13px;
    flex-wrap: wrap;
    gap: 5px;
  }
  .field-label span {
    font-size: 13px;
  }
  .source-actions {
    margin-bottom: 18px;
  }
  .source-actions .text-button {
    font-size: 13px;
  }
  textarea {
    padding: 12px;
    font-size: 14px;
  }
  .creation-bottom {
    gap: 10px;
    padding: 16px 0 18px;
  }
  .template-chip {
    padding: 9px 8px;
    font-size: 13px;
    gap: 5px;
  }
  .template-chip small {
    font-size: 13px;
    padding-left: 5px;
  }
  .template-chip .icon {
    width: 16px;
    height: 16px;
  }
  .primary-button {
    padding: 10px 14px;
    font-size: 13px;
    gap: 9px;
  }
  .advanced {
    margin: 0 -16px;
    padding: 13px 16px;
  }
  .advanced-grid {
    grid-template-columns: 1fr;
  }
  .workflow-note {
    font-size: 13px;
    gap: 6px;
    flex-wrap: wrap;
    margin: 18px 0 27px;
  }
  .section-heading h2 {
    font-size: 16px;
  }
  .works-grid,
  .assets-grid {
    gap: 12px;
  }

  .work-info {
    padding: 12px;
  }
  .work-info strong {
    font-size: 13px;
  }
  .work-info small {
    font-size: 13px;
  }
  .work-badge {
    font-size: 13px;
  }
  .asset-card img {
    height: 170px;
  }
  .asset-card strong {
    padding: 10px 11px 0;
    font-size: 13px;
  }
  .asset-card small {
    font-size: 13px;
    padding: 5px 11px 12px;
  }
  .tool-submit {
    align-items: flex-end;
    gap: 13px;
  }
  .tool-submit > span {
    font-size: 13px;
    max-width: 155px;
  }
  .result-grid {
    grid-template-columns: 1fr;
  }
  .result-block {
    padding: 16px;
  }
  .media-result-layout {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .media-result-layout video {
    max-height: 320px;
    object-fit: contain;
    background: #171b22;
  }
  .media-result-content > h3 {
    font-size: 15px;
  }
  .tool-form .card-heading .text-button {
    font-size: 13px;
  }
  .filter-tabs {
    gap: 3px;
  }
  .filter-tabs button {
    font-size: 13px;
    padding: 6px 7px;
  }
  footer {
    padding: 0 18px 20px;
    font-size: 13px;
  }
  footer span {
    max-width: 170px;
    text-align: right;
  }
  .download-actions {
    gap: 8px;
  }
  .download-actions a,
  .download-actions .primary-button {
    font-size: 13px;
    padding: 8px 12px;
  }
}

@media(max-width:550px) {
  .sidebar .rail-item .icon { width: 22px; height: 22px; }
  .sidebar .rail-item.active { color: var(--accent); font-weight: 600; }
  .sidebar .rail-item.active .icon { color: var(--highlight); }
}

@media (max-width:550px) {
  .page-hero { padding: 17px 0 14px; }
  .page-hero h1 { font-size: 23px; line-height: 1.35; }
  .page-hero p { margin-top: 5px; line-height: 1.6; }
  .creation-hero { padding: 16px 0 12px; }
  .tool-form { padding-top: 15px; }
  .tool-form .card-heading { margin-bottom: 10px; }
  #media-url { min-height: 92px; }
  #rewrite-text { min-height: 156px; }
  #rewrite-brief { min-height: 74px; }
  .local-source { margin-top: 12px; padding: 11px 0; }
  .tool-submit { padding: 14px 0; }
  .filter-tabs button { font-size: 15px; padding: 8px 6px; min-height:44px; }
  .filter-tabs { flex-wrap:nowrap; gap:1px; }
  .works-heading { gap:6px; }
  .works-actions { gap:2px; }
  .works-actions .text-button { padding-inline:5px; }
}