.palette-page main { max-width: 1200px; padding-bottom: 24px; }
.palette-page .header-nav a { text-decoration: none; }
.palette-catalog { padding: 28px; }
.palette-controls { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 18px; align-items: end; }
.palette-controls .form-field { margin: 0; font-size: 14px; }
.palette-controls input, .palette-controls select, .palette-controls .button { min-height: 46px; font-size: 14px; }
.palette-heading { display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; margin: 26px 0 18px; }
.palette-heading h2 { font-size: 18px; margin: 0; }
.palette-heading p { color: #65745d; font-size: 13px; margin: 0; }
.palette-credits { margin: 0 0 20px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.palette-credits summary { display: list-item; min-height: 44px; padding: 12px 0; color: var(--green); font-size: 14px; cursor: pointer; }
.palette-credits summary:focus-visible { outline: 3px solid #7fba9c; outline-offset: 4px; }
.color-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 14px; }
.color-card { min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.catalog-swatch { display: block; height: 62px; border: 1px solid #263a3226; border-radius: 10px; }
.color-card > span:last-child { font-size: 12px; color: #65745d; }
.palette-note { font-size: 13px; color: #65745d; line-height: 1.8; overflow-wrap: anywhere; }
.palette-note a { text-underline-offset: 3px; }
#downloadStatus { font-size: 14px; line-height: 1.8; }
#loginDialog .public-palette-link { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); line-height: 1.8; }
.public-palette-link a { display: inline-flex; align-items: center; min-height: 44px; color: var(--green); }
@media (max-width: 700px), (max-width: 980px) and (max-height: 500px) {
  .palette-page main { padding: 22px 14px; }
  .palette-page .app-header { flex-wrap: nowrap; }
  .palette-page .header-nav { margin-left: auto; gap: 14px; }
  .palette-page .nav-current { display: flex; font-size: 13px; white-space: nowrap; border: 0; padding: 8px 0; min-height: 44px; }
  .palette-page .nav-button { font-size: 13px; }
  .palette-catalog { padding: 18px; }
  .palette-controls { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .palette-controls input, .palette-controls select { font-size: 16px; }
  .palette-heading { margin-top: 22px; }
  .color-cards { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px 10px; }
}
@media (min-width: 701px) and (max-width: 980px) and (max-height: 500px) {
  .palette-page main { padding-top: 16px; }
  .palette-page .page-heading { padding-bottom: 18px; }
  .palette-controls { grid-template-columns: 150px minmax(0, 1fr) auto; }
}