:root {
  color-scheme: dark;
  --background: #101211;
  --foreground: #f2f2ed;
  --muted: #a4a8a2;
  --gap: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--background);
  color: var(--foreground);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 0;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-underline-offset: 3px; }
button:focus-visible, a:focus-visible { outline-offset: 4px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: -100px;
  z-index: 2;
  padding: 12px 16px;
  color: #101211;
  background: #f2f2ed;
}
.skip-link:focus { inset-block-start: 16px; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 96px;
  padding-block: 20px;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

.page-heading, .page-meta { min-width: 0; }
.page-heading h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.5px;
}
.page-heading p, .page-meta p { margin: 5px 0 0; }
.page-heading p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 2px;
}
.page-meta {
  text-align: end;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.5;
}
.page-meta .home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 24px;
  text-decoration: none;
}

main {
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
}

.gallery {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.photo-tile { position: absolute; margin: 0; padding: 0; }
.photo-button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--foreground);
  background: #1d211e;
  cursor: zoom-in;
}
.photo-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.photo-button:focus-visible {
  outline-offset: -5px;
  z-index: 1;
}
.photo-fallback {
  display: grid;
  place-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 12px;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
}
.photo-fallback span:last-child { color: var(--muted); }

.gallery-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50vh;
  min-height: 50dvh;
  padding: 32px 16px;
  text-align: center;
  overflow-wrap: anywhere;
}
.gallery-state h2 { margin: 0; font-size: 18px; font-weight: 500; }
.gallery-state p { max-width: 40rem; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.text-button {
  min-height: 44px;
  margin-block-start: 4px;
  padding: 10px 18px;
  border: 1px solid #6d746d;
  border-radius: 0;
  color: var(--foreground);
  background: transparent;
  cursor: pointer;
}
.noscript-message { margin: 24px; line-height: 1.7; }

.page-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 28px max(28px, env(safe-area-inset-bottom));
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}
.page-footer p { margin: 0; }
.page-footer a { display: inline; }

body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--foreground);
  background: #070908;
}
.lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr) calc(64px + env(safe-area-inset-right)); grid-template-rows: minmax(0, 1fr); }
.lightbox::backdrop { background: rgb(0 0 0 / .72); }
.lightbox-toolbar {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: max(4px, env(safe-area-inset-top)) calc(4px + env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) 4px;
  border-inline-start: 1px solid rgb(255 255 255 / .08);
  background: rgb(9 11 10 / .92);
}
.lightbox-close, .lightbox-nav {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border: 1px solid #626a63;
  border-radius: 0;
  color: var(--foreground);
  background: transparent;
  cursor: pointer;
}
.lightbox-close { font-size: 12px; }
.lightbox-nav:disabled { opacity: 0.4; cursor: default; }
.lightbox-stage {
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding-inline: 16px;
}
.lightbox-stage img {
  user-select: none;
  -webkit-user-drag: none;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}
.lightbox-error { padding: 24px; color: var(--muted); text-align: center; }

@media (max-width: 36rem) {
  .page-header {
    min-height: 88px;
    gap: 16px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .page-heading h1 { font-size: 19px; }
  .page-meta { max-width: 44%; font-size: 12px; }
  main {
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
  }
  .page-footer {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    font-size: 10px;
  }
  .lightbox-stage { padding-inline: 4px; }
  .keyboard-hint { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox-close, .lightbox-nav, .text-button { transition: background-color 140ms ease; }
}
@media (hover: hover) {
  .lightbox-close:hover, .lightbox-nav:not(:disabled):hover, .text-button:hover { background: #252b26; }
}

.collection-bar,.manager-toolbar,.form-actions {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.collection-bar {padding:0 24px 20px;justify-content:flex-start;}
.collection-bar label,.manager-toolbar label {display:flex;align-items:center;gap:12px;}
.collection-bar .text-button,.manager-toolbar .text-button {margin:0;}
select,input,textarea {width:100%;min-width:0;border:1px solid #626a63;border-radius:0;background:#171b18;color:var(--foreground);padding:12px;font:inherit;font-size:16px;}
input[type=file] {padding:10px;}
textarea {resize:vertical;}
select {min-height:44px;}
label {display:grid;gap:8px;font-size:14px;line-height:1.5;}
.collection-bar select,.manager-toolbar select {width:auto;max-width:65vw;}
.load-more-row {text-align:center;padding:20px;}
.gallery-pagination {min-height:1px;text-align:center;}
.gallery-pagination p {margin:12px 0;color:var(--muted);font-size:14px;line-height:1.5;}
.photo-action-icon {display:block;width:18px;height:18px;filter:drop-shadow(0 1px 2px #000);}
.photo-icon-button {border-color:transparent;border-radius:50%;}
.lightbox-toolbar .photo-icon-button {width:36px;height:36px;min-width:36px;min-height:36px;padding:8px;}
.lightbox-toolbar .photo-action-icon {width:16px;height:16px;}
.lightbox-toolbar a {text-decoration:none;}
.photo-caption {margin:0;min-width:0;max-width:100%;color:var(--muted);text-align:center;font-size:11px;font-variant-numeric:tabular-nums;line-height:1.5;overflow-wrap:anywhere;}
.photo-actions {display:flex;flex-direction:column;align-items:center;gap:0;}
#photo-info[aria-expanded="true"] {background:#252b26;}
.photo-view {position:relative;grid-column:1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr);min-width:0;min-height:0;overflow:hidden;padding:0;}
.lightbox-stage {padding:0;}
.photo-image-wrap,.photo-edit-figure {position:relative;min-width:0;}
.photo-pins {position:absolute;inset:0;pointer-events:none;}
.photo-pin {position:absolute;transform:scale(var(--photo-zoom-inverse,1)) translate(-50%,-50%);transform-origin:0 0;pointer-events:auto;width:36px;height:36px;border:2px solid #101211;border-radius:50%;background:#f2f2ed;color:#101211;font-weight:700;cursor:pointer;}
.photo-zoomed {cursor:grab;}
.photo-zoomed.photo-dragging {cursor:grabbing;}
.photo-details {position:absolute;z-index:2;inset-block-start:16px;inset-inline-end:16px;width:300px;max-width:calc(100% - 32px);max-height:calc(100% - 32px);padding:20px;overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere;border:1px solid rgb(255 255 255 / .1);border-radius:12px;font-size:14px;line-height:1.5;background:rgb(16 19 17 / .97);box-shadow:0 4px 12px rgb(0 0 0 / .2),0 16px 48px rgb(0 0 0 / .3);}
.photo-details h3 {font-size:12px;font-weight:400;color:var(--muted);margin:0 0 8px;}
.photo-details .photo-details-title {margin:0 0 20px;font-size:14px;font-weight:500;color:var(--foreground);}
.photo-details p {white-space:pre-wrap;margin:0;}
.photo-details dl {margin:0;}
.photo-details dt {margin:0 0 4px;color:var(--muted);font-size:12px;}
.photo-details dd {margin:0;font-variant-numeric:tabular-nums;}
.photo-equipment {display:grid;gap:16px;}
.photo-equipment dd {font-size:16px;font-weight:500;line-height:1.4;}
.photo-equipment div:first-child dd {font-size:18px;}
.photo-details .photo-exposure {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-block-start:20px;padding-block-start:16px;border-block-start:1px solid rgb(255 255 255 / .08);}
.photo-exposure dd {font-size:16px;}
.photo-details .photo-capture,.photo-detail-section {margin-block-start:20px;padding-block-start:16px;border-block-start:1px solid rgb(255 255 255 / .08);}
.photo-details ol {padding-left:20px;margin:0;}
.photo-details li+li {margin-block-start:8px;}
.form-dialog,.editor-dialog {border:1px solid #626a63;background:#101211;color:var(--foreground);padding:24px;width:min(92vw,480px);max-height:90vh;max-height:90dvh;overflow:auto;overscroll-behavior:contain;}
.form-dialog::backdrop,.editor-dialog::backdrop {background:rgb(0 0 0 / .8);}
.form-dialog h2 {font-size:20px;}.form-error {color:#ffb7ac;min-height:1.2em;line-height:1.5;}
.form-actions {justify-content:flex-end;}.form-actions .muted {margin-right:auto;}
.manager-shell {max-width:1440px;margin:auto;padding:16px 24px 60px;}
.manager-panel {padding:24px;border:1px solid #424a43;margin-bottom:24px;}
.manager-panel summary {font-size:18px;cursor:pointer;min-height:44px;}
.manager-panel form {margin-top:16px;}
.manager-panel h2 {margin-top:0;}
.form-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.span-all {grid-column:1/-1;}.muted {color:var(--muted);font-size:13px;line-height:1.6;}
.manager-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;}
.manager-card {padding:14px;border:1px solid #424a43;min-width:0;}
.manager-card img {width:100%;height:190px;object-fit:contain;background:#171b18;}
.manager-card h3 {font-size:17px;font-weight:500;overflow-wrap:anywhere;}
.manager-card p {overflow-wrap:anywhere;}
.editor-dialog {width:min(96vw,1300px);}
.editor-columns {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;}
.photo-edit-figure {margin:0 0 16px;}.photo-edit-figure img {display:block;width:100%;height:auto;}
.annotation-row {display:flex;gap:12px;align-items:flex-start;margin-top:16px;}.annotation-row label {flex:1;}
@media(max-width:720px){
  .lightbox[open] {grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);}
  .lightbox-toolbar {grid-column:1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) repeat(3,44px);align-items:center;gap:0;padding:max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 4px max(12px,env(safe-area-inset-left));border-inline-start:0;border-block-end:1px solid rgb(255 255 255 / .08);}
  .lightbox-toolbar .photo-caption {grid-column:1;grid-row:1;text-align:start;padding-inline-end:8px;font-size:12px;}
  .lightbox-toolbar .photo-actions {display:contents;}
  .lightbox-toolbar .photo-icon-button {width:44px;height:44px;min-width:44px;min-height:44px;}
  #photo-info {grid-column:2;grid-row:1;}
  #download-photo {grid-column:3;grid-row:1;}
  #lightbox-close {grid-column:4;grid-row:1;}
  .photo-view {grid-row:2;}
  .photo-details {inset-block-start:auto;inset-block-end:12px;inset-inline-end:12px;width:300px;max-width:calc(100% - 24px);max-height:min(48%,380px);padding:16px;}
  .collection-bar {padding-inline:16px;}
  .manager-shell {padding-inline:16px;}
  .manager-panel {padding:16px;}
  .editor-columns,.form-grid {grid-template-columns:minmax(0,1fr);}
  .editor-dialog,.form-dialog {padding:16px;}
  .span-all {grid-column:auto;}
}
@media(pointer:coarse){.photo-pin{width:44px;height:44px;}}
@media(pointer:coarse){.lightbox-toolbar .photo-icon-button{width:44px;height:44px;min-width:44px;min-height:44px;}}