:root { color-scheme: light; font: 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #26313b; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer { width: min(100% - 40px, 940px); margin: auto; }
header { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid #e3e7eb; }
nav, .actions, .heading { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
nav { font-size: 14px; }
nav form, .actions form { margin: 0; }
main { padding: 30px 0 70px; }
footer { padding: 18px 0 28px; border-top: 1px solid #e3e7eb; color: #5d6b77; font-size: 13px; }
footer a { color: inherit; }
h1 { margin: 0 0 24px; font-size: clamp(26px, 5vw, 36px); line-height: 1.25; font-weight: 650; letter-spacing: -.025em; overflow-wrap: anywhere; }
h2 { font-size: 20px; line-height: 1.4; margin: 0 0 14px; overflow-wrap: anywhere; }
a { color: #245788; text-underline-offset: 3px; }
figure { margin: 0 0 40px; }
figure img { display: block; width: auto; max-width: 100%; height: auto; border: 1px solid #e3e7eb; border-radius: 6px; }
.image-description { margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.image-actions { display: flex; align-items: center; justify-content: flex-start; margin-top: 12px; gap: 8px; color: #5d6b77; font-size: 14px; white-space: normal; }
.image-download { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; height: 40px; border-radius: 6px; color: #5d6b77; }
.image-download:hover { background: #f5f7f9; color: #26313b; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input:not([type="hidden"]), textarea { width: 100%; border: 1px solid #aeb8c2; border-radius: 6px; padding: 10px 12px; background: #fff; color: inherit; font: inherit; }
textarea { resize: vertical; }
input { margin-bottom: 20px; }
button, .button { display: inline-block; border: 1px solid #263d50; border-radius: 6px; padding: 9px 15px; background: #263d50; color: #fff; font: inherit; line-height: 1.4; text-decoration: none; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
.secondary { background: #fff; color: #263d50; border-color: #b9c3cc; }
.text-button { border: 0; padding: 0; background: none; color: #245788; text-decoration: underline; text-underline-offset: 3px; }
.danger { color: #a32a32; }
:focus-visible { outline: 3px solid #4a85bd; outline-offset: 3px; }
.hint { color: #5d6b77; font-size: 14px; font-weight: 400; }
#upload-area { padding: 25px; margin: 8px 0 24px; border: 1px dashed #99a9b8; border-radius: 8px; background: #f8fafb; text-align: center; }
#upload-area p { margin: 4px 0 14px; }
#upload-area .hint { margin: 10px 0 0; }
#files { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#upload-area:focus-within { outline: 2px solid #4a85bd; outline-offset: 3px; }
.image-tile { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid #e3e7eb; }
.image-tile img { width: 150px; height: 140px; object-fit: contain; background: #f5f7f9; border-radius: 4px; }
.tile-fields .actions { gap: 12px; margin-top: 10px; font-size: 14px; }
#editor-status { min-height: 26px; white-space: pre-wrap; }
.heading { justify-content: space-between; margin-bottom: 24px; }
.heading h1 { margin: 0; }
.share-row { padding: 22px 0; border-bottom: 1px solid #e3e7eb; }
.login { max-width: 380px; margin: 20px auto; }
.saved-link { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  header, main, footer { width: calc(100% - 32px); }
  header { align-items: flex-start; flex-direction: column; gap: 12px; }
  main { padding-top: 24px; }
  .image-tile { grid-template-columns: 1fr; gap: 12px; }
  .image-tile img { width: 100%; height: 180px; }
  nav { gap: 20px; }
}