@media (max-width: 600px) {
  body { padding: 0; background: #f7fbfd; }
  .app { border-radius: 0; min-height: 100vh; min-height: 100dvh; max-width: none; box-shadow: none; }
  .hero { padding-top: max(21px, env(safe-area-inset-top)); border-radius: 0; }
  .content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 360px) {
  .hero { padding-left: 19px; padding-right: 19px; }
  h1 { font-size: 26px; }
  .content { padding-left: 14px; padding-right: 14px; }
  .card-meta { gap: 6px; font-size: 10px; }
  .field-grid { gap: 9px; }
  .field input, .field select { padding-left: 9px; padding-right: 9px; }
}

@media (min-width: 960px) {
  body { padding: 20px; }
  .app { max-width: 1440px; height: calc(100vh - 118px); height: calc(100dvh - 118px); min-height: 0; padding-bottom: 0; display: flex; flex-direction: column; border-radius: 24px; }
  .hero, .hero.is-collapsed { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 86px; padding: 18px 26px; border-radius: 24px 24px 0 0; }
  .hero .brand { font-size: 21px; }
  .hero .brand-symbol { width: 38px; height: 38px; }
  .hero .greeting, .hero h1 { display: none; }
  .hero .brand-row { min-width: 0; gap: 18px; }
  .hero .edition, .hero.is-collapsed .edition { display: inline-flex; max-width: 210px; }
  .hero .hero-description { display: block; margin-right: auto; font-size: 13px; }
  .hero .hero-stats { margin: 0; flex-direction: row; align-items: center; gap: 18px; }
  .hero .hero-stat { font-size: 12px; }
  .hero .hero-stat strong { font-size: 23px; }
  .hero .stats-divider { display: block; }
  .content { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 18px 96px; position: static; border-right: 1px solid #dcecf2; }
  .desktop-workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #f6fbfd; }
}

@media (min-width: 960px) and (max-width: 1199px) {
  .hero .hero-description { display: none; }
}

@media (min-width: 960px) and (max-height: 760px) {
  .hero, .hero.is-collapsed { height: 72px; padding-top: 12px; padding-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}