:root {
  color-scheme: light;
  --ink: #292b2a;
  --muted: #898985;
  --paper: #f8f7f4;
  --white: #fff;
  --line: #eae8e2;
  --green: #466c5c;
  --green-dark: #355747;
  --green-pale: #edf3ee;
  --rose: #bc817c;
  --rose-pale: #f8efed;
  --gold: #b6965e;
  --shadow: 0 12px 36px rgba(49, 48, 41, .07);
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.65; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.serif { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 5.2%; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; border: 0; padding: 0; background: none; color: var(--ink); text-align: left; }
.brand-mark { width: 35px; height: 35px; flex: 0 0 auto; border-radius: 9px; }
.brand-name { font-family: Georgia, "Yu Mincho", serif; font-size: 20px; letter-spacing: .06em; line-height: 1.1; }
.brand-caption { margin-top: 3px; color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.top-actions { display: flex; align-items: center; gap: 15px; }
.avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: var(--green-dark); background: #e9eee7; font-weight: 700; }
.user-chip { display: flex; align-items: center; gap: 9px; }
.user-name { font-size: 12px; font-weight: 700; }
.user-group { color: var(--muted); font-size: 10px; }
.text-button { padding: 6px 0; border: 0; color: var(--muted); background: transparent; font-size: 12px; }
.text-button:hover { color: var(--green); }
.page { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 43px 0 72px; }
.eyebrow { margin: 0 0 8px; color: var(--rose); font-size: 10px; font-weight: 700; letter-spacing: .2em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(26px, 4vw, 36px); font-weight: 500; letter-spacing: .03em; }
.lead { margin: 0; color: var(--muted); font-size: 13px; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 32px; }
.hero-copy { max-width: 620px; }
.tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 24px; }
.tab { position: relative; padding: 12px 1px 14px; border: 0; color: var(--muted); background: transparent; font-size: 13px; }
.tab.active { color: var(--green-dark); font-weight: 700; }
.tab.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--green); content: ""; }
.toolbar { display: flex; align-items: center; gap: 10px; }
.select { min-height: 37px; padding: 0 32px 0 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); color: #565752; font-size: 12px; }
.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid transparent; border-radius: 4px; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; transition: background .16s, transform .16s; }
.button:hover { background: var(--green-dark); transform: translateY(-1px); }
.button.secondary { border-color: var(--line); background: #fff; color: #555751; }
.button.secondary:hover { border-color: #b8c6ba; background: var(--green-pale); color: var(--green-dark); }
.button.danger { border-color: #ecd7d3; background: #fff; color: #a45f57; }
.button.danger:hover { background: var(--rose-pale); }
.button.small { min-height: 32px; padding: 0 11px; font-size: 11px; }
.button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.button.upload-button { width: 44px; min-height: 44px; flex-shrink: 0; padding: 0; }
.upload-button svg { display: block; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px 20px; }
.photo-card { min-width: 0; overflow: hidden; border: 1px solid #eeece7; border-radius: 6px; background: var(--white); box-shadow: 0 3px 14px rgba(45,44,39,.025); }
.photo-wrap { position: relative; height: 245px; overflow: hidden; background: #e8e6df; }
.photo-wrap::after { position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(22,25,22,.24)); content: ""; pointer-events: none; }
.photo-img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.photo-card:hover .photo-img { transform: scale(1.035); }
.photo-img.broken { opacity: 0; }
.fallback { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg,#d9e0d4,#ead8d0 52%,#e7d4b8); font-size: 45px; }
.visibility-badge { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.45); border-radius: 3px; background: rgba(255,255,255,.92); color: #536759; font-size: 10px; }
.photo-body { padding: 14px 15px 13px; }
.photo-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.photo-author { display: flex; min-width: 0; align-items: center; gap: 8px; }
.photo-author .avatar { width: 29px; height: 29px; flex: 0 0 auto; font-size: 11px; }
.author-name { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.photo-date { color: var(--muted); font-size: 10px; white-space: nowrap; }
.photo-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 0 37px; }
.photo-group { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.photo-actions { display: flex; gap: 6px; }
.mini-action { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: #686962; text-decoration: none; font-size: 13px; }
.mini-action:hover { border-color: #b8c6ba; color: var(--green); }
.empty { grid-column: 1 / -1; padding: 70px 20px; border: 1px dashed #d9d7d0; border-radius: 6px; color: var(--muted); text-align: center; }
.empty-icon { margin-bottom: 10px; font-size: 32px; }
.empty strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 15px; }
.page-footer { margin-top: 48px; color: #aaa9a1; font-size: 10px; text-align: center; }
.admin-banner { display: flex; align-items: center; gap: 10px; margin: -10px 0 20px; padding: 10px 13px; border: 1px solid #e8ddc4; border-radius: 4px; background: #f8f3e8; color: #796941; font-size: 11px; }
.admin-nav { display: flex; gap: 8px; margin-bottom: 22px; }
.admin-nav .tab { padding: 9px 13px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.admin-nav .tab.active { border-color: #b8c6ba; background: var(--green-pale); }
.admin-nav .tab.active::after { display: none; }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 22px; }
.stat-card { padding: 17px 19px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.stat-label { color: var(--muted); font-size: 11px; }
.stat-value { margin-top: 4px; font-family: Georgia,serif; font-size: 27px; }
.table-card { overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.table-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.table-tools strong { font-size: 13px; }
.search { width: min(260px,100%); height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 4px; outline: none; }
.search:focus, .field:focus, .select:focus { border-color: #86a191; outline: 2px solid rgba(70,108,92,.12); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 12px 15px; border-bottom: 1px solid #f0eee9; text-align: left; white-space: nowrap; }
th { background: #faf9f6; color: #777770; font-size: 10px; font-weight: 600; }
tr:last-child td { border-bottom: 0; }
.status { display: inline-flex; padding: 3px 8px; border-radius: 20px; background: var(--green-pale); color: var(--green-dark); font-size: 10px; }
.status.paused { background: #f3efeb; color: #84796e; }
.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 18px; background: rgba(28,31,29,.46); }
.modal { width: min(490px,100%); max-height: calc(100vh - 36px); overflow-y: auto; border-radius: 7px; background: #fff; box-shadow: var(--shadow); }
.modal-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; padding: 22px 24px 12px; }
.modal-head h2 { margin: 0; font-size: 20px; font-weight: 500; }
.modal-close { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f4f3ef; color: #696a64; font-size: 17px; }
.modal-content { padding: 12px 24px 24px; }
.field-label { display: block; margin: 14px 0 6px; color: #555751; font-size: 11px; font-weight: 700; }
.field { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 4px; outline: none; background: #fff; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-note { margin: 12px 0 0; color: var(--muted); font-size: 10px; }
.modal-actions { display: flex; justify-content: end; gap: 8px; margin-top: 20px; }
.radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.radio-card { display: flex; align-items: center; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font-size: 12px; }
.radio-card:has(input:checked) { border-color: #90a997; background: var(--green-pale); }
.dropzone { display: grid; min-height: 130px; place-items: center; padding: 20px; border: 1px dashed #bfc9bf; border-radius: 5px; background: #fafbf8; color: #71766f; text-align: center; cursor: pointer; }
.dropzone:hover { border-color: var(--green); background: var(--green-pale); }
.dropzone input { display: none; }
.drop-icon { display: block; margin-bottom: 5px; color: var(--green); font-size: 27px; }
.dropzone-hint { display: block; font-size: 10px; }
.queue-list { display: grid; gap: 8px; margin-top: 12px; }
.queue-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 4px; background: #f6f5f1; font-size: 11px; }
.queue-status { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.queue-status.done { color: var(--green); }
.queue-status.failed { color: #b35249; }
.toast { position: fixed; z-index: 20; right: 22px; bottom: 22px; max-width: min(420px,calc(100% - 44px)); padding: 12px 17px; border-radius: 5px; background: #343a35; color: #fff; box-shadow: var(--shadow); font-size: 12px; animation: appear .2s ease-out; }
@keyframes appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.auth-screen { display: grid; min-height: 100vh; grid-template-columns: 1.1fr .9fr; background: #fff; }
.auth-art { position: relative; display: flex; min-height: 100vh; align-items: end; padding: 8%; overflow: hidden; background: linear-gradient(180deg,rgba(34,43,37,.02),rgba(30,40,34,.55)),url("https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1400&q=85") center 48% / cover,linear-gradient(135deg,#d5ded2,#e7d6ce); color: #fff; }
.auth-art-copy { position: relative; max-width: 470px; }
.auth-art .eyebrow { color: #f1d9ca; }
.auth-art h1 { font-family: "Yu Mincho",serif; font-size: clamp(30px,4vw,49px); line-height: 1.45; }
.auth-art p { margin: 0; color: rgba(255,255,255,.84); font-size: 13px; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 30px; }
.auth-box { width: min(365px,100%); }
.auth-box .brand { margin-bottom: 42px; }
.auth-box h2 { margin: 0 0 7px; font-size: 23px; font-weight: 500; }
.auth-box .muted { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.auth-link { display: inline-block; margin-top: 15px; border: 0; padding: 0; background: none; color: var(--green); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.demo-box { margin-top: 26px; padding: 12px; border-radius: 4px; background: #f7f6f2; color: #77766f; font-size: 10px; }
.demo-box strong { display: block; margin-bottom: 4px; color: #4f534e; font-size: 10px; }
[hidden] { display: none !important; }
@media (max-width: 800px) {
  .gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .photo-wrap { height: 225px; }
  .auth-screen { grid-template-columns: .8fr 1.2fr; }
  .auth-art { padding: 7%; }
}
@media (max-width: 600px) {
  .topbar { height: 62px; padding: 0 16px; }
  .user-chip > div:last-child, .top-actions > .text-button { display: none; }
  .page { width: calc(100% - 32px); padding-top: 30px; }
  .hero { display: block; margin-bottom: 23px; }
  .tabs-row { align-items: end; flex-wrap: wrap-reverse; gap: 8px; }
  .tabs { gap: 15px; white-space: nowrap; }
  .tab { font-size: 11px; }
  .toolbar { gap: 6px; margin-left: auto; }
  .toolbar .select { max-width: 118px; min-height: 34px; padding-left: 8px; font-size: 10px; }
  .gallery { gap: 12px; }
  .photo-wrap { height: clamp(145px,45vw,220px); }
  .photo-body { padding: 10px; }
  .photo-author { gap: 6px; }
  .photo-author .avatar { width: 25px; height: 25px; }
  .author-name { font-size: 10px; }
  .photo-date { font-size: 9px; }
  .photo-bottom { margin: 9px 0 0; }
  .photo-group { font-size: 9px; }
  .mini-action { width: 27px; height: 27px; }
  .auth-screen { display: block; }
  .auth-art { min-height: 230px; padding: 24px; }
  .auth-art h1 { margin-bottom: 4px; font-size: 27px; }
  .auth-art p { font-size: 11px; }
  .auth-panel { padding: 30px 24px 45px; }
  .auth-box .brand { margin-bottom: 27px; }
  .stats { gap: 7px; }
  .stat-card { padding: 12px; }
  .stat-value { font-size: 22px; }
  .admin-nav { overflow-x: auto; }
  .admin-nav .tab { flex: 0 0 auto; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .radio-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---- Additions for the server-rendered application ---- */
a.brand, a.tab, a.button { text-decoration: none; }
a.tab { display: inline-block; }
.inline-form { display: contents; }
/* Paint the photo above the absolutely positioned .fallback (it stays visible behind broken images). */
.photo-img { position: relative; display: block; }
.toast.error { background: #8b4842; }
.fallback span { display: grid; justify-items: center; gap: 6px; }
.fallback small { color: #6f6a60; font-size: 11px; }
.queue-summary { margin: 10px 0 0; color: var(--muted); font-size: 10px; }
.queue-item span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.radio-card:has(input:disabled) { cursor: not-allowed; }
.select:disabled { opacity: .6; }
/* The mock hides the topbar logout on narrow screens; keep a logout at the end of the page instead. */
.mobile-logout { display: none; }
@media (max-width: 600px) {
  .topbar-logout .text-button { display: none; }
  .mobile-logout { display: flex; justify-content: center; margin-top: 22px; }
}

/* ---- Full-screen photo viewer ---- */
.photo-wrap:has(.photo-img[role="button"]) { cursor: zoom-in; }
/* The photo fills its frame, so the default focus ring has to be drawn inside it. */
.photo-img:focus-visible { outline-offset: -4px; }
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: #0b0d0c; color: #fff; cursor: zoom-out; animation: fade-in .18s ease-out; touch-action: none; -webkit-user-select: none; user-select: none; }
.lightbox.is-zoomed { cursor: grab; }
.lightbox.is-zoomed:active { cursor: grabbing; }
.lightbox::backdrop { background: none; }
.lightbox-img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.lightbox-close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(12,14,13,.55); color: #fff; font-size: 22px; line-height: 1; }
.lightbox-close:hover { background: rgba(12,14,13,.85); }
/* Lock the page behind the viewer; --scrollbar-gap (set by app.js) stands in for the vanished scrollbar. */
html:has(.lightbox) { overflow: hidden; overscroll-behavior: none; padding-right: var(--scrollbar-gap, 0px); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }