@media (max-width: 640px) {
  .topbar { height: 64px; padding: 0 16px; }
  .brand { font-size: 16px; gap: 7px; }
  .brand-mark { width: 31px; height: 31px; }
  .brand i { display: none; }
  .page { padding: 25px 14px 55px; }
  .survey-header h1 { font-size: 28px; }
  .survey-header p { font-size: 14px; }
  .question-card { padding: 18px 16px; margin: 12px 0; }
  .question-title { font-size: 16px; }
  .option { padding: 12px; }
  .submit-row .btn { width: 100%; }
  .admin-main { padding: 22px 14px 45px; }
  .admin-main h1 { font-size: 27px; }
  .sidebar { position: sticky; top: 0; z-index: 3; gap: 3px; border-bottom: 1px solid #ffffff2a; }
  .side-link { padding: 9px 10px; font-size: 13px; }
  .panel { padding: 16px; border-radius: 13px; }
  .panel-head { align-items: flex-start; gap: 11px; }
  .panel-head > input.text-input { width: 100% !important; }
  .admin-question { align-items: flex-start; flex-wrap: wrap; padding: 13px; }
  .admin-question .q-copy { min-width: calc(100% - 76px); }
  .admin-question .btn { padding: 8px 11px; font-size: 12px; }
  .icon-button { padding: 4px; }
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .modal-wrap { align-items: end; padding: 0; }
  .modal { width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0; padding: 22px 18px; }
  .modal-actions .btn { flex: 1; }
}