@media (max-width: 768px) {
  body {
    padding: 20px 10px;
  }

  .container {
    padding: 30px;
    border-radius: 20px;
  }

  #main-title {
    font-size: 2rem;
  }

  .button-group {
    flex-direction: column;
  }

  button {
    width: 100%;
  }
}

@media (max-width: 980px) { .studio-grid, .preview-toolbar { grid-template-columns: 1fr; display: grid; } .template-gallery { grid-template-columns: repeat(3, minmax(180px, 1fr)); } textarea#notes { min-height: 320px; } }
@media (max-width: 640px) { .studio-shell { width: min(100% - 12px, 100%); margin: 6px auto; padding: 14px; border-radius: 22px; } .field-row, .section-toggles { grid-template-columns: 1fr; } .template-gallery { grid-template-columns: 1fr; overflow: visible; } .copy-grid, .button-group { display:grid; grid-template-columns: 1fr 1fr; } button { padding: 12px 10px; } .styled-note-card header { padding: 20px; flex-direction: column; } .output-section, .styled-note-card footer { margin: 10px; padding: 14px; } }