:root {
  --paper: #EFE8EB; --paper-2: #F8F3F5; --ink: #2B1F29; --ink-soft: #6F5D6B;
  --skin: #E39C82; --skin-deep: #C97C62; --mauve: #A5869E; --line: rgba(43,31,41,.14);
  --ok: #4E8A6A; --warn: #B8713E;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: clamp(16px, 4vw, 48px);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; padding-bottom: 120px; }
b { font-weight: 600; }
code { background: var(--paper-2); padding: 1px 6px; border-radius: 4px; font-size: .92em; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--skin-deep); outline-offset: 3px; }

.m-head { padding: var(--pad); display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.m-back { font-size: 13px; color: var(--ink-soft); text-decoration: none; }
.m-back:hover { color: var(--ink); }
h1 { font-family: var(--display); font-weight: 300; font-size: clamp(40px, 6vw, 64px); line-height: 1; letter-spacing: -.02em; margin: 10px 0 14px; font-variation-settings: "SOFT" 100, "opsz" 96; }
.m-intro { margin: 0; max-width: 58ch; color: var(--ink-soft); }
.m-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.btn { font: inherit; font-weight: 500; padding: 11px 18px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .2s ease; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--ink); color: var(--paper-2); }
.btn-primary:hover { background: #3d2c3a; }
.btn-primary[disabled] { opacity: .45; cursor: default; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--paper-2); }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--skin-deep); cursor: pointer; text-decoration: underline; }

.m-note, .m-empty, .m-summary { margin: 0 var(--pad); }
.m-note { padding: 14px 18px; border-radius: 8px; background: #F6E4D9; color: #6B3E27; }
.m-note p, .m-empty p, .m-summary p { margin: 0; }
.m-empty { padding: 48px 0; color: var(--ink-soft); border-top: 1px solid var(--line); }
.m-hint { font-size: 13px; margin-top: 10px !important; max-width: 60ch; }
.m-summary { padding: 18px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; }
.m-legend { font-size: 12px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }

.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; }
.tag-exif { background: #DDEBE3; color: #2F5C45; }
.tag-file { background: #F6E4D9; color: #7A4526; }
.tag-manual { background: #E4DAE8; color: #4F3760; }
.tag-new { background: var(--ink); color: var(--paper-2); }
.tag-missing { background: #EED4D4; color: #7A2E2E; }

.m-list { padding: 0 var(--pad); }
.row { display: grid; grid-template-columns: 160px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); animation: row-in .5s ease both; }
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } }
.row-thumb { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--mauve) 35%, var(--paper)); }
.row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.row-file { font-weight: 600; word-break: break-all; }
.row-tags { display: flex; gap: 6px; }
.row-fields { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.row-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); }
.row-date { font: inherit; font-size: 15px; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.row-date:focus { border-color: var(--skin-deep); outline: none; }
.row-age { display: flex; flex-direction: column; line-height: 1.2; padding-bottom: 6px; }
.row-age-label { font-family: var(--display); font-weight: 500; font-size: 24px; color: var(--skin-deep); font-variation-settings: "SOFT" 100, "opsz" 32; }
.row-age-detail { font-size: 13px; color: var(--ink-soft); }
.row-meta { margin-top: 12px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--ink-soft); }
.row-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink); }
.row-check input { accent-color: var(--skin-deep); }
.row-warn { margin: 10px 0 0; font-size: 13px; color: var(--warn); }
.row.is-hidden .row-thumb { opacity: .35; }
.row.is-missing .row-thumb { opacity: .25; }

.m-save { position: fixed; left: 0; right: 0; bottom: 0; padding: 14px var(--pad); background: rgba(43,31,41,.92); color: var(--paper-2); backdrop-filter: blur(10px); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.m-save p { margin: 0; font-size: 14px; }
.m-save .btn-ghost { color: var(--paper-2); border-color: rgba(255,255,255,.25); }
.m-save .btn-ghost:hover { background: rgba(255,255,255,.08); }
.m-save .btn-primary { background: var(--skin); color: var(--ink); }
.m-save .btn-primary:hover { background: #ecab93; }
.m-save > div { display: flex; gap: 10px; }

@media (max-width: 640px) {
  .row { grid-template-columns: 96px 1fr; gap: 14px; }
  .m-head { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .row { animation: none; } }