:root {
  color-scheme: light;
  --brown: #3f382e;
  --espresso: #1f1810;
  --blue: #445567;
  --blue-soft: #8ea2b6;
  --ink: #2e2721;
  --cream: #f5f0e7;
  --paper: #fbf8f1;
  --accent: #5f788e;
  --muted: #746d66;
  --line: rgba(63, 56, 46, 0.16);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

button, input, textarea { font: inherit; }
button { cursor: pointer; }

.eyebrow {
  display: block;
  color: var(--accent);
  font: 600 0.72rem/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.22em;
}

.send-page {
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 0%, rgba(142, 162, 182, 0.2), transparent 36%),
    linear-gradient(150deg, var(--paper) 0%, #efe8dc 100%);
}

.send-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image: radial-gradient(rgba(63, 56, 46, 0.14) 0.6px, transparent 0.6px);
  background-size: 7px 7px;
}

.send-shell {
  position: relative;
  width: min(100%, 600px);
  margin: 0 auto;
  padding: max(42px, env(safe-area-inset-top)) 18px max(36px, env(safe-area-inset-bottom));
}

.send-heading { padding: 0 6px 24px; }
.send-heading h1 { margin: 12px 0 7px; font-size: clamp(2rem, 10vw, 3.15rem); font-weight: 600; letter-spacing: -0.06em; }
.send-heading p { margin: 0; color: var(--muted); font: 400 1rem/1.7 ui-sans-serif, system-ui, sans-serif; }

.submission-card {
  padding: 22px;
  border: 1px solid rgba(63, 56, 46, 0.12);
  border-radius: 22px;
  background: rgba(251, 248, 241, 0.9);
  box-shadow: 0 20px 55px rgba(46, 39, 33, 0.1);
  backdrop-filter: blur(16px);
}

.field-block + .field-block { margin-top: 21px; }
.field-title-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.field-title { display: block; margin-bottom: 9px; font: 650 0.92rem/1.3 ui-sans-serif, system-ui, sans-serif; }
.field-title-row .field-title { margin-bottom: 0; }
.optional { color: #8e857c; font: 500 0.78rem/1.2 ui-sans-serif, system-ui, sans-serif; }

.photo-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.photo-strip { display: flex; min-height: 194px; align-items: center; gap: 0; margin: 0 -4px; padding: 14px 15px 17px 5px; overflow-x: auto; overflow-y: hidden; border: 1.5px dashed rgba(68,85,103,.34); border-radius: 16px; background: rgba(68,85,103,.045); scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(68,85,103,.32) transparent; }
.photo-strip::-webkit-scrollbar { height: 5px; }
.photo-strip::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(68,85,103,.32); }
.photo-add-card { display: grid; flex: 0 0 128px; height: 158px; margin-left: 12px; place-items: center; align-content: center; gap: 9px; border: 1.5px dashed rgba(68,85,103,.42); border-radius: 14px; color: #687582; background: rgba(255,255,255,.72); cursor: pointer; scroll-snap-align: start; font: 650 .82rem/1.3 ui-sans-serif, system-ui, sans-serif; transition: border-color 160ms, background 160ms; }
.photo-add-card:hover { border-color: var(--blue); background: #fff; }
.photo-add-card[hidden] { display: none; }
.photo-add-card.is-empty { flex-basis: calc(100% - 12px); margin-left: 4px; }
.photo-add-card.is-loading { opacity: .55; pointer-events: none; }
.photo-add-card .plus { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 50%; color: var(--blue); background: white; box-shadow: 0 6px 18px rgba(46,39,33,.1); font: 400 1.65rem/1 ui-sans-serif, system-ui, sans-serif; }
.selected-photo { position: relative; flex: 0 0 154px; width: 154px; height: 166px; margin: 0 -7px 0 5px; overflow: hidden; border: 4px solid #fff; border-radius: 13px; background: #dfe4e7; box-shadow: 0 10px 24px rgba(46,39,33,.18); transform: rotate(var(--preview-tilt)); scroll-snap-align: start; }
.selected-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.selected-photo-number { position: absolute; top: 7px; left: 7px; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: white; background: rgba(31,24,16,.72); font: 700 .72rem/1 ui-sans-serif, system-ui, sans-serif; backdrop-filter: blur(5px); }
.selected-photo-actions { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding-top: 24px; background: linear-gradient(transparent, rgba(20,24,28,.85)); }
.selected-photo-actions button { min-height: 37px; border: 0; color: white; background: rgba(31,24,16,.58); font: 650 .76rem/1 ui-sans-serif, system-ui, sans-serif; }
.selected-photo-actions button + button { border-left: 1px solid rgba(255,255,255,.18); }
.selected-photo-actions button:disabled { cursor: wait; opacity: .6; }
.photo-strip-hint { margin: 7px 2px 0; color: #8e857c; font: 500 .74rem/1.5 ui-sans-serif, system-ui, sans-serif; }
.photo-message { min-height: 20px; margin: 4px 2px 0; color: #8b3341; font: 650 .78rem/1.5 ui-sans-serif, system-ui, sans-serif; }

textarea, input[type="text"], input:not([type]) {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: 0;
  color: var(--ink);
  background: white;
  font: 400 1rem/1.65 ui-sans-serif, system-ui, sans-serif;
  transition: border-color 160ms, box-shadow 160ms;
}

textarea { min-height: 112px; padding: 13px 14px; resize: vertical; }
input[type="text"], input:not([type]) { height: 48px; padding: 0 14px; }
textarea:focus, input:focus { border-color: rgba(68, 85, 103, 0.62); box-shadow: 0 0 0 3px rgba(68, 85, 103, 0.1); }

.identity-grid { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; margin-top: 21px; }
.field-block.compact { margin: 0; }
.anonymous-switch { display: flex; min-height: 48px; align-items: center; gap: 9px; white-space: nowrap; color: var(--brown); font: 600 0.86rem/1 ui-sans-serif, system-ui, sans-serif; }
.anonymous-switch input { position: absolute; opacity: 0; }
.switch-track { position: relative; width: 43px; height: 25px; border-radius: 999px; background: #cec7bd; transition: background 180ms; }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.16); transition: transform 180ms; }
.anonymous-switch input:checked + .switch-track { background: var(--blue); }
.anonymous-switch input:checked + .switch-track .switch-knob { transform: translateX(18px); }

.form-message { min-height: 21px; margin: 14px 0 4px; color: var(--brown); text-align: center; font: 600 0.84rem/1.5 ui-sans-serif, system-ui, sans-serif; }
.submit-button { width: 100%; height: 54px; border: 0; border-radius: 14px; color: white; background: linear-gradient(135deg, #5f788e, #394b5e); box-shadow: 0 11px 24px rgba(68, 85, 103, 0.25); font: 650 1rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.08em; }
.submit-button:disabled { cursor: wait; opacity: 0.6; }
.privacy-note { margin: 12px 0 0; color: #8d847b; text-align: center; font: 400 0.74rem/1.5 ui-sans-serif, system-ui, sans-serif; }

.success-layer { position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; padding: 28px; text-align: center; color: var(--ink); background: rgba(245, 240, 231, 0.97); }
.success-layer[hidden] { display: none; }
.success-mark { display: grid; width: 74px; height: 74px; margin: 0 auto 20px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font: 400 2.4rem/1 ui-sans-serif, system-ui, sans-serif; box-shadow: 0 14px 36px rgba(68, 85, 103, 0.24); }
.success-layer h2 { margin: 0 0 10px; font-size: 1.8rem; }
.success-layer p { margin: 0 0 28px; color: var(--muted); font: 400 0.96rem/1.7 ui-sans-serif, system-ui, sans-serif; }
.success-layer button { height: 48px; padding: 0 25px; border: 1px solid var(--line); border-radius: 999px; color: var(--blue); background: white; font: 650 0.9rem/1 ui-sans-serif, system-ui, sans-serif; }

.screen-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  color: #f3ede2;
  background:
    radial-gradient(circle at 52% 78%, rgba(68, 85, 103, 0.42), transparent 42%),
    linear-gradient(140deg, #332b24 0%, #141a20 58%, #2e4151 100%);
}

.screen-grain { position: fixed; inset: 0; pointer-events: none; opacity: 0.12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); }
.screen-header { position: relative; z-index: 2; display: flex; height: 15vh; min-height: 104px; align-items: center; justify-content: space-between; padding: 2.5vh 4.6vw 1vh; }
.screen-header h1 { margin: 1.1vh 0 0; font-size: clamp(2.4rem, 4.1vw, 5.2rem); font-weight: 500; letter-spacing: -0.055em; }
.screen-header .eyebrow { font-size: clamp(0.7rem, 0.85vw, 1rem); }
.screen-qr { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(10px, 1vw, 30px); padding: clamp(7px, .55vw, 18px); border: 1px solid rgba(255,255,255,.15); border-radius: clamp(14px, 1.1vw, 32px); background: rgba(255,255,255,.06); box-shadow: 0 18px 50px rgba(0,0,0,.2); backdrop-filter: blur(12px); }
.screen-qr img { display: block; width: clamp(90px, 6.5vw, 250px); height: auto; border-radius: clamp(7px, .45vw, 14px); background: white; }

.screen-stage { position: relative; height: 78vh; }
.barrage-stage { position: relative; height: 25%; overflow: hidden; }
.welcome-copy { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; text-align: center; color: rgba(243, 237, 226, .46); }
.welcome-copy[hidden] { display: none; }
.welcome-copy p { margin: 0 0 1.3vh; font: 500 clamp(.78rem, 1vw, 1.15rem)/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .1em; }
.welcome-copy strong { font-size: clamp(1.2rem, 1.8vw, 2.1rem); font-weight: 400; }
.barrage-item { position: absolute; left: 100%; display: flex; align-items: center; gap: 1em; max-width: 72vw; padding: .7em 1.05em; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; background: rgba(63, 56, 46, .78); box-shadow: 0 10px 28px rgba(0,0,0,.2); backdrop-filter: blur(8px); white-space: nowrap; animation: barrage linear forwards; font: 500 clamp(1rem, 1.45vw, 1.75rem)/1.2 ui-sans-serif, system-ui, sans-serif; }
.barrage-item b { color: #b8cad8; font-size: .72em; font-weight: 600; }
@keyframes barrage { to { transform: translateX(calc(-100vw - 100%)); } }

.film-window { position: relative; height: 75%; display: grid; align-content: center; overflow: hidden; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.2); }
.film-edge { position: absolute; z-index: 4; left: 0; right: 0; height: 2.4vh; min-height: 18px; opacity: .68; background-image: repeating-linear-gradient(90deg, transparent 0 1.4vw, #9b876f 1.4vw 2.1vw, transparent 2.1vw 3.5vw); }
.film-edge-top { top: 0; border-bottom: 1px solid rgba(155, 135, 111, .3); }
.film-edge-bottom { bottom: 0; border-top: 1px solid rgba(155, 135, 111, .3); }
.film-viewport { overflow: hidden; }
.film-track { display: flex; width: max-content; align-items: center; gap: 1.4vw; padding: 0 1.4vw; animation: film-scroll var(--film-duration, 52s) linear infinite; }
.film-track.is-paused { animation-play-state: paused; }
@keyframes film-scroll { to { transform: translateX(-50%); } }
.film-card { position: relative; width: 27vw; min-width: 340px; height: 45vh; min-height: 280px; overflow: hidden; border: .24vw solid #e9e1d5; outline: 0; background: #1a2026; box-shadow: 0 16px 45px rgba(0,0,0,.48); transform: rotate(var(--tilt)); isolation: isolate; cursor: zoom-in; }
.film-card:focus-visible { box-shadow: 0 0 0 5px rgba(184,202,216,.88), 0 16px 45px rgba(0,0,0,.48); }
.film-card.is-landscape { width: 40vw; min-width: 560px; height: auto; min-height: 280px; aspect-ratio: 16 / 10; }
.film-card .photo-backdrop { position: absolute; inset: -7%; z-index: 0; width: 114%; height: 114%; object-fit: cover; filter: blur(22px) brightness(.62) saturate(.84); transform: scale(1.08); }
.film-card .photo-main { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 16px rgba(0,0,0,.32)); }
.film-card figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 5vh 1.15vw 1.2vh; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.76)); font: 600 clamp(.78rem, .9vw, 1.15rem)/1.2 ui-sans-serif, system-ui, sans-serif; }
.empty-film { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(243,237,226,.34); font: 500 clamp(.88rem, 1vw, 1.2rem)/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .12em; }
.empty-film[hidden] { display: none; }

.screen-footer { position: relative; z-index: 3; display: flex; height: 7vh; align-items: center; justify-content: space-between; padding: 0 4.6vw; color: rgba(243,237,226,.46); font: 500 clamp(.7rem, .82vw, 1rem)/1 ui-sans-serif, system-ui, sans-serif; }

.photo-focus { position: fixed; inset: 0; z-index: 20; display: grid; padding: clamp(18px, 3vw, 70px); place-items: center; background: rgba(9,12,15,.86); opacity: 0; backdrop-filter: blur(18px); transition: opacity 220ms ease; }
.photo-focus[hidden] { display: none; }
.photo-focus.is-visible { opacity: 1; }
.photo-focus-frame { position: relative; display: grid; width: min(92vw, 1700px); height: min(86vh, 1050px); overflow: hidden; place-items: center; border: clamp(4px, .35vw, 10px) solid #e9e1d5; border-radius: clamp(10px, .7vw, 22px); background: #131a20; box-shadow: 0 30px 100px rgba(0,0,0,.65); transform: scale(.9); transition: transform 240ms cubic-bezier(.22,.8,.24,1); isolation: isolate; }
.photo-focus.is-visible .photo-focus-frame { transform: scale(1); }
.photo-focus-backdrop { position: absolute; inset: -5%; z-index: 0; width: 110%; height: 110%; object-fit: cover; filter: blur(34px) brightness(.48) saturate(.8); transform: scale(1.06); }
.photo-focus-image { position: relative; z-index: 1; display: block; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 12px 28px rgba(0,0,0,.45)); }
.photo-focus-copy { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: clamp(70px, 10vh, 150px) clamp(20px, 3vw, 60px) clamp(20px, 2.2vh, 38px); color: white; background: linear-gradient(transparent, rgba(0,0,0,.82)); pointer-events: none; }
.photo-focus-copy p { margin: 0 0 .35em; font-size: clamp(1rem, 1.55vw, 2rem); line-height: 1.5; }
.photo-focus-copy strong { color: #b8cad8; font: 650 clamp(.78rem, 1vw, 1.3rem)/1.3 ui-sans-serif, system-ui, sans-serif; }
.photo-focus-close { position: fixed; z-index: 22; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); display: grid; width: clamp(44px, 3.5vw, 70px); height: clamp(44px, 3.5vw, 70px); padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: white; background: rgba(31,24,16,.72); font: 300 clamp(1.7rem, 2.1vw, 2.8rem)/1 ui-sans-serif, system-ui, sans-serif; backdrop-filter: blur(10px); }
.photo-focus-close:focus-visible { outline: 3px solid #b8cad8; outline-offset: 3px; }
.photo-focus-progress { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; height: clamp(3px, .3vh, 7px); overflow: hidden; background: rgba(255,255,255,.16); }
.photo-focus-progress span { display: block; width: 100%; height: 100%; background: #b8cad8; transform-origin: left; animation: photo-focus-countdown 6s linear forwards; }
@keyframes photo-focus-countdown { to { transform: scaleX(0); } }

@media (min-width: 2500px) and (orientation: landscape) {
  .screen-header { padding-left: 5vw; padding-right: 5vw; }
  .screen-header h1 { font-size: clamp(5rem, 4vw, 8.5rem); }
  .screen-header .eyebrow { font-size: 1.35rem; }
  .film-card { border-width: 7px; }
  .film-card figcaption { font-size: 1.45rem; }
  .screen-footer { font-size: 1.25rem; }
}

@media (max-height: 700px) and (orientation: landscape) {
  .screen-header { height: 17vh; min-height: 0; padding-top: 2vh; }
  .screen-header h1 { margin-top: .5vh; font-size: clamp(1.5rem, 6vh, 2.65rem); }
  .screen-header .eyebrow { font-size: clamp(.55rem, 1.8vh, .78rem); }
  .screen-qr { gap: 8px; padding: 4px; border-radius: 10px; }
  .screen-qr img { width: clamp(58px, 8.2vw, 76px); border-radius: 5px; }
  .screen-stage { height: 76vh; }
  .barrage-stage { height: 24%; }
  .film-window { height: 76%; }
  .film-edge { height: 3.4vh; min-height: 12px; }
  .film-card { width: 28vw; min-width: 210px; height: 49vh; min-height: 170px; border-width: 3px; }
  .film-card.is-landscape { width: 46vw; min-width: 340px; height: auto; min-height: 170px; }
  .film-card figcaption { padding: 8vh 1.4vw 1.6vh; font-size: clamp(.62rem, 2.2vh, .82rem); }
  .screen-footer { height: 7vh; }
}

@media (orientation: portrait) and (max-width: 1024px) {
  .screen-header { height: 18dvh; min-height: 0; padding: max(14px, env(safe-area-inset-top)) 16px 8px; }
  .screen-header h1 { margin-top: 6px; font-size: clamp(1.65rem, 7vw, 3.2rem); line-height: 1.08; }
  .screen-header .eyebrow { font-size: clamp(.58rem, 1.8vw, .8rem); }
  .screen-qr { flex: none; gap: 0; padding: 5px; border-radius: 11px; }
  .screen-qr img { width: clamp(58px, 17vw, 82px); border-radius: 6px; }
  .screen-stage { display: grid; height: 74dvh; grid-template-rows: 40% 60%; }
  .barrage-stage { z-index: 5; height: auto; min-height: 0; border-top: 1px solid rgba(255,255,255,.05); background: rgba(31,24,16,.22); }
  .welcome-copy { padding: 0 18px; }
  .welcome-copy p { margin-bottom: 10px; font-size: .8rem; }
  .welcome-copy strong { font-size: clamp(1.05rem, 4.6vw, 1.4rem); }
  .barrage-item { z-index: 6; max-width: 88vw; padding: .65em .9em; font-size: clamp(.9rem, 3.8vw, 1.1rem); }
  .film-window { z-index: 1; height: auto; min-height: 0; }
  .film-edge { height: 18px; min-height: 14px; background-image: repeating-linear-gradient(90deg, transparent 0 14px, #9b876f 14px 21px, transparent 21px 35px); }
  .film-track { gap: 4vw; padding: 0 4vw; }
  .film-card { width: min(72vw, 560px); min-width: min(72vw, 560px); height: 38dvh; min-height: 0; border-width: 4px; }
  .film-card.is-landscape { width: 88vw; min-width: 88vw; height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .film-card figcaption { padding: 54px 13px 11px; font-size: .82rem; }
  .screen-footer { height: 8dvh; padding: 0 16px max(4px, env(safe-area-inset-bottom)); font-size: .72rem; }
  .photo-focus { padding: 54px 10px 18px; }
  .photo-focus-frame { width: 96vw; height: 80dvh; }
  .photo-focus-copy { padding-right: 16px; padding-left: 16px; }
}

@media (max-width: 520px) {
  .send-shell { padding-left: 14px; padding-right: 14px; }
  .submission-card { padding: 18px; border-radius: 19px; }
  .identity-grid { grid-template-columns: 1fr; gap: 7px; }
  .anonymous-switch { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

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

.admin-page {
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(145deg, var(--paper), #efe8dc);
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.admin-shell { width: min(1120px, 100%); margin: 0 auto; padding: 44px 22px 72px; }
.admin-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.admin-heading h1 { margin: 9px 0 6px; font-family: "Noto Serif SC", "Songti SC", serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 600; letter-spacing: -.05em; }
.admin-heading p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.admin-login { width: min(100%, 520px); padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.82); box-shadow: 0 20px 60px rgba(46,39,33,.09); }
.admin-login[hidden], #admin-dashboard[hidden] { display: none; }
.admin-login h2 { margin: 0 0 7px; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 1.45rem; }
.admin-login > p { margin: 0 0 23px; color: var(--muted); line-height: 1.5; }
.admin-login label { display: block; margin-bottom: 8px; font-size: .9rem; font-weight: 700; }
.login-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.login-row input, .admin-search input { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: #fff; font-size: 1rem; }
.login-row input:focus, .admin-search input:focus { border-color: rgba(68,85,103,.62); box-shadow: 0 0 0 3px rgba(68,85,103,.1); }
.admin-primary, .quiet-button, .delete-button, .move-button, .visibility-button { min-height: 44px; border-radius: 11px; font-size: .9rem; font-weight: 700; }
.admin-primary { padding: 0 22px; border: 0; color: white; background: var(--blue); }
.quiet-button { padding: 0 16px; border: 1px solid var(--line); color: var(--blue); background: rgba(255,255,255,.72); }
.admin-message { min-height: 22px; margin: 12px 0 0; color: var(--brown); font-size: .88rem; line-height: 1.5; }
.admin-settings { margin-bottom: 16px; padding: 19px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.78); }
.admin-settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.admin-settings-heading h2 { margin: 0 0 5px; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 1.25rem; }
.admin-settings-heading p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.admin-settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 17px; }
.admin-settings-fields label { display: grid; gap: 7px; color: var(--brown); font-size: .86rem; font-weight: 700; }
.admin-settings-fields select { width: 100%; height: 46px; padding: 0 40px 0 13px; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: var(--ink); background: #fff; font-size: .95rem; }
.admin-settings-fields select:focus { border-color: rgba(68,85,103,.62); box-shadow: 0 0 0 3px rgba(68,85,103,.1); }
.admin-settings .admin-message { margin-bottom: -5px; }
.admin-settings .admin-primary:disabled { cursor: wait; opacity: .6; }
.admin-toolbar { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; gap: 12px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.78); }
.admin-stats { display: flex; align-items: baseline; gap: 7px; min-width: 110px; }
.admin-stats strong { color: var(--blue); font-family: "Noto Serif SC", "Songti SC", serif; font-size: 1.8rem; }
.admin-stats span { color: var(--muted); font-size: .88rem; }
.admin-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.admin-card { display: flex; min-width: 0; min-height: 178px; overflow: hidden; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 12px 34px rgba(46,39,33,.07); }
.admin-card.is-hidden { opacity: .68; background: rgba(241,239,235,.88); }
.admin-photo-section { border-bottom: 1px solid rgba(68,85,103,.12); background: rgba(68,85,103,.045); }
.admin-photo-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 0; color: #71808c; }
.admin-photo-heading strong { color: var(--blue); font-size: .84rem; }
.admin-photo-heading span { font-size: .74rem; }
.admin-photo-gallery { display: flex; gap: 9px; padding: 10px 12px 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(68,85,103,.3) transparent; }
.admin-photo-gallery::-webkit-scrollbar { height: 5px; }
.admin-photo-gallery::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(68,85,103,.3); }
.admin-photo-item { position: relative; flex: 0 0 132px; height: 112px; margin: 0; overflow: hidden; border: 1px solid rgba(68,85,103,.2); border-radius: 12px; background: #dfe4e7; scroll-snap-align: start; }
.admin-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.admin-photo-number { position: absolute; top: 7px; left: 7px; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: white; background: rgba(31,24,16,.72); font-size: .72rem; font-weight: 800; backdrop-filter: blur(6px); }
.photo-delete-button { position: absolute; right: 7px; bottom: 7px; min-height: 34px; padding: 0 10px; border: 1px solid rgba(255,255,255,.42); border-radius: 9px; color: white; background: rgba(125,28,44,.88); box-shadow: 0 5px 16px rgba(0,0,0,.2); font-size: .82rem; font-weight: 800; backdrop-filter: blur(7px); }
.photo-delete-button:disabled { cursor: wait; opacity: .65; }
.admin-photo-empty { display: grid; min-height: 92px; place-items: center; border-bottom: 1px solid rgba(68,85,103,.1); color: #71808c; background: rgba(68,85,103,.045); font-family: "Noto Serif SC", "Songti SC", serif; font-size: 1rem; }
.admin-card-body { display: flex; min-width: 0; flex-direction: column; padding: 17px; }
.admin-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.admin-meta strong { overflow: hidden; color: var(--blue); font-size: .94rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-order-number { flex: none; color: #887f76; font-size: .74rem; }
.admin-hidden-badge { flex: none; padding: 4px 7px; border-radius: 999px; color: #715536; background: #eee1cd; font-size: .7rem; font-weight: 800; }
.admin-details { display: grid; gap: 3px; margin-top: 8px; color: #887f76; font-size: .75rem; line-height: 1.45; }
.admin-private-name { color: var(--blue); font-weight: 700; }
.admin-copy { display: -webkit-box; margin: 12px 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 1.65; }
.admin-copy.is-muted { color: #8d857d; }
.admin-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.admin-card-footer code { color: #8d857d; font-size: .75rem; }
.admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.move-button { min-height: 38px; padding: 0 11px; border: 1px solid rgba(68,85,103,.2); color: var(--blue); background: #f8fafb; }
.move-button:disabled { cursor: not-allowed; opacity: .42; }
.visibility-button { min-height: 38px; padding: 0 12px; border: 1px solid rgba(113,85,54,.24); color: #715536; background: #fffaf2; }
.visibility-button:disabled { cursor: wait; opacity: .6; }
.delete-button { min-height: 38px; padding: 0 14px; border: 1px solid rgba(164,26,49,.22); color: #a31a31; background: #fff7f7; }
.delete-button:disabled { cursor: wait; opacity: .6; }
.admin-empty { margin-top: 18px; padding: 70px 20px; border: 1px dashed rgba(68,85,103,.28); border-radius: 18px; color: #71808c; text-align: center; }

@media (max-width: 820px) {
  .admin-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .admin-shell { padding: 30px 14px 54px; }
  .admin-heading { align-items: flex-start; }
  .admin-heading p { font-size: .9rem; }
  .admin-toolbar { grid-template-columns: 1fr auto; }
  .admin-settings-heading { display: grid; }
  .admin-settings-heading .admin-primary { width: 100%; }
  .admin-settings-fields { grid-template-columns: 1fr; }
  .admin-search { grid-column: 1 / -1; grid-row: 2; }
  .admin-card { min-height: 154px; }
  .admin-photo-item { flex-basis: 118px; height: 102px; }
  .admin-card-body { padding: 14px; }
  .admin-meta { align-items: center; }
  .admin-copy { margin: 11px 0; -webkit-line-clamp: 2; }
  .admin-card-footer { align-items: flex-end; }
  .admin-card-footer code { display: none; }
}