:root {
  color-scheme: light;
  --canvas: #f3f6f8;
  --surface: #fff;
  --surface-soft: #f8fafb;
  --ink: #17242b;
  --muted: #53646d;
  --line: #dbe3e7;
  --green: #1c5848;
  --green-hover: #164637;
  --green-pale: #eaf4ef;
  --amber: #85551c;
  --amber-pale: #fbf2e5;
  --red: #b42318;
  --red-pale: #fff0ee;
  --focus: #2868b2;
  --radius-control: 8px;
  --radius-card: 12px;
  --shadow-card: 0 2px 8px rgb(23 36 43 / 5%);
  --content-width: 1240px;
  --batch-space: 150px;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-padding-block: 16px; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; touch-action: manipulation; }
button:enabled { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .56; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  position: relative;
  z-index: 1;
}

.shell { width: min(var(--content-width), 100%); margin-inline: auto; padding-inline: 24px; }
.topbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; font-size: 17px; font-weight: 700; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--green); color: white; }
.brand-mark svg { width: 21px; height: 21px; }
.brand small { display: block; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .08em; line-height: 1.2; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; min-width: 0; }
.identity { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.page { min-height: calc(100dvh - 70px); padding-block: 30px 64px; }
.eyebrow { margin: 0; color: var(--muted); font-size: 12px; font-weight: 650; }
.heading { margin: 4px 0 0; font-size: clamp(25px, 3vw, 30px); line-height: 1.25; letter-spacing: -.035em; overflow-wrap: anywhere; }
.subheading { margin: 7px 0 0; color: var(--muted); max-width: 68ch; }

.btn, .icon-btn {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 13px; white-space: normal; text-align: center; line-height: 1.35; }
.btn:hover:not(:disabled), .icon-btn:hover:not(:disabled) { border-color: #9eafb5; background: #f7f9fa; }
.btn:active:not(:disabled), .icon-btn:active:not(:disabled) { background: #edf1f3; }
.btn.primary { color: #fff; background: var(--green); border-color: var(--green); }
.btn.primary:hover:not(:disabled) { background: var(--green-hover); border-color: var(--green-hover); }
.btn.ghost { background: transparent; }
.btn.small { min-height: 36px; padding: 6px 10px; font-size: 13px; }
.btn.danger { color: var(--red); }
.btn.danger:hover:not(:disabled) { background: var(--red-pale); border-color: #edb6b1; }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; font-size: 20px; flex: 0 0 auto; }
.icon-btn svg { width: 19px; height: 19px; }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0 14px; }
.section-head h2 { margin: 0; font-size: 19px; }
.section-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.cabinet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.empty, .panel, .cabinet-card, .item-card, .login-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.cabinet-card { min-width: 0; min-height: 192px; display: flex; flex-direction: column; padding: 18px; }
.cabinet-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cabinet-icon, .upload-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: var(--green-pale); color: var(--green); }
.cabinet-icon svg, .upload-icon svg { width: 22px; height: 22px; }
.pill { display: inline-flex; align-items: center; max-width: 100%; padding: 4px 9px; border-radius: 999px; background: var(--green-pale); color: var(--green); font-size: 12px; font-weight: 650; line-height: 1.3; white-space: normal; }
.pill.out { background: var(--amber-pale); color: var(--amber); }
.cabinet-card h3 { margin: 14px 0 2px; font-size: 17px; overflow-wrap: anywhere; }
.location { min-height: 20px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; }
.stats { display: flex; flex-wrap: wrap; gap: 5px 13px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.stats b { color: var(--ink); }
.card-footer > .toolbar { justify-content: flex-end; flex-wrap: wrap; }
.admin-tools, .admin-card-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.admin-card-tools { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

.login-wrap { width: min(470px, 100%); margin: 44px auto; }
.login-card { padding: 28px; }
.login-card h1 { margin: 5px 0 7px; font-size: 25px; line-height: 1.3; overflow-wrap: anywhere; }
.login-card > p { margin: 0 0 20px; color: var(--muted); }
.recovery-link { width: 100%; margin-top: 10px; color: var(--green); }
.recovery-instructions { margin: 4px 0 14px; color: var(--muted); font-size: 13px; }
.recovery-status { min-width: 0; margin-bottom: 16px; padding: 14px; border: 1px solid #c5dbd0; border-radius: 10px; background: var(--green-pale); overflow-wrap: anywhere; }
.recovery-status > strong { display: block; }
.recovery-status > p { margin: 5px 0 0; font-size: 13px; }
.recovery-code-value { display: block; margin-top: 12px; padding: 12px; border: 1px solid #c5dbd0; border-radius: 8px; background: white; color: var(--ink); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; user-select: all; }
.recovery-code-actions { justify-content: flex-start; margin-top: 10px; }
.field { display: grid; gap: 6px; min-width: 0; margin: 14px 0; }
.field label { font-size: 13px; font-weight: 650; }
.field input, .field select, .search {
  width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px;
  border: 1px solid #cbd6db; border-radius: var(--radius-control); background: var(--surface); color: var(--ink);
}
.field input:focus, .field select:focus, .search:focus { border-color: var(--green); }
.field .hint, .hint { color: var(--muted); font-size: 13px; }
.hint { margin: 5px 0; overflow-wrap: anywhere; }
.form-error { margin-top: 8px; color: var(--red); font-size: 13px; overflow-wrap: anywhere; }

.toolbar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cabinet-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.cabinet-intro > .toolbar { justify-content: flex-end; flex-wrap: wrap; }
.cabinet-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.stat-box { min-width: 0; padding: 12px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.stat-box span { display: block; color: var(--muted); font-size: 12px; }
.stat-box strong { display: block; margin-top: 2px; font-size: 23px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; overflow-wrap: anywhere; }
.notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 15px; border-radius: 10px; background: var(--amber-pale); color: var(--amber); }
.notice .btn { margin-left: auto; }

.upload-section { margin: 16px 0; }
.upload-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px dashed #9fb4ac; border-radius: var(--radius-card); background: #edf5f1; }
.upload-copy { display: flex; align-items: center; gap: 12px; min-width: 0; }
.upload-copy > div { min-width: 0; }
.upload-copy strong, .upload-copy span { display: block; }
.upload-copy span { margin-top: 2px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.upload-panel .toolbar { flex-wrap: wrap; }
.hidden { display: none !important; }
.progress-list { display: grid; gap: 8px; margin-top: 10px; }
.upload-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; }
.upload-row .filename { min-width: 0; overflow-wrap: anywhere; }
.upload-row .toolbar, .queue-toolbar .toolbar { flex-wrap: wrap; gap: 6px; }
.progress { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 99px; background: #e7edef; }
.progress i { display: block; height: 100%; background: var(--green); transition: width .15s ease; }
.upload-error { grid-column: 1 / -1; color: var(--red); font-size: 12px; overflow-wrap: anywhere; }
.queue-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.completed-uploads { margin-top: 12px; color: var(--muted); font-size: 13px; }
.completed-uploads summary { padding: 8px 0; cursor: pointer; }

.inventory-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 28px 0 12px; }
.inventory-head > div:first-child { min-width: 170px; }
.inventory-head h2 { margin: 0; font-size: 19px; }
.inventory-head .hint { margin: 3px 0 0; }
.searchbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; min-width: 0; }
.search { width: min(250px, 32vw); }
.tabs { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #e9eef0; }
.tab { min-height: 34px; padding: 5px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; }
.tab:hover { color: var(--ink); }
.tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(23 36 43 / 12%); }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); align-items: start; gap: 14px; }
.item-card { min-width: 0; overflow: hidden; }
.photo-wrap { position: relative; min-width: 0; background: #e7edef; }
.photo { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; padding: 0; border: 0; border-radius: 0; background: #e7edef; cursor: zoom-in; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #66777d; font-size: 30px; }
.select-check { position: absolute; top: 10px; left: 10px; width: 24px; height: 24px; margin: 0; accent-color: var(--green); cursor: pointer; }
.photo-status { position: absolute; top: 9px; right: 9px; pointer-events: none; box-shadow: 0 1px 5px rgb(23 36 43 / 16%); }
.item-info { min-width: 0; padding: 11px 12px 12px; }
.item-name { min-width: 0; font-weight: 650; overflow-wrap: anywhere; }
.item-date { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.item-bottom { display: flex; align-items: center; justify-content: flex-start; gap: 7px; flex-wrap: wrap; min-width: 0; margin-top: 10px; }
.item-bottom > .status-toggle { margin-right: auto; }
.status-toggle { min-width: 62px; min-height: 36px; padding: 6px 10px; border: 1px solid transparent; border-radius: 999px; background: var(--green-pale); color: var(--green); font-size: 12px; font-weight: 700; }
.status-toggle.out { background: var(--amber-pale); color: var(--amber); }
.item-card.selected { outline: 2px solid var(--green); outline-offset: -2px; }
.list-view { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.list-view .item-card { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: stretch; }
.list-view .photo-wrap { width: 78px; }
.list-view .photo { height: 100%; min-height: 78px; aspect-ratio: auto; }
.list-view .photo-status { top: auto; right: 4px; bottom: 4px; left: 4px; justify-content: center; padding: 3px 5px; font-size: 10px; }
.list-view .item-info { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(130px, .8fr) auto; align-items: center; gap: 4px 14px; padding: 10px 14px; }
.list-view .item-name { grid-column: 1; grid-row: 1; }
.list-view .item-date { grid-column: 2; grid-row: 1; margin: 0; }
.list-view .item-info > .hint { grid-column: 1 / 3; grid-row: 2; margin: 0; }
.list-view .item-bottom { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
.list-view .item-bottom .btn.small { min-height: 38px; }
.empty { padding: 42px 18px; text-align: center; color: var(--muted); overflow-wrap: anywhere; }
.empty .empty-icon { margin-bottom: 8px; color: var(--green); }
.empty strong { display: block; color: var(--ink); font-size: 16px; }
.empty p { margin: 5px 0 0; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 20px 0 8px; font-size: 13px; font-variant-numeric: tabular-nums; }

.has-batch .page { padding-bottom: calc(var(--batch-space) + env(safe-area-inset-bottom)); }
.selection-bar { position: fixed; z-index: 5; right: max(0px, calc((100vw - var(--content-width)) / 2)); bottom: 0; left: max(0px, calc((100vw - var(--content-width)) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); border: 1px solid #477568; border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--green); color: white; box-shadow: 0 -5px 20px rgb(23 36 43 / 16%); }
.selection-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.selection-bar .btn { min-height: 40px; border-color: rgb(255 255 255 / 38%); background: rgb(255 255 255 / 9%); color: white; }
.selection-bar .btn:hover:not(:disabled) { background: rgb(255 255 255 / 18%); border-color: white; }
body.is-selecting .toast { bottom: calc(var(--batch-space) + 12px + env(safe-area-inset-bottom)); }

.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 20px; background: rgb(12 25 30 / 64%); }
.modal { width: min(480px, 100%); max-height: min(92dvh, 900px); overflow: auto; overscroll-behavior: contain; padding: 22px; border: 1px solid rgb(255 255 255 / 60%); border-radius: 14px; background: var(--surface); box-shadow: 0 20px 64px rgb(0 0 0 / 24%); scroll-padding: 16px; }
.wide-modal { width: min(800px, 100%); }
.modal h2 { margin: 0 0 4px; font-size: 20px; line-height: 1.35; overflow-wrap: anywhere; }
.modal p { color: var(--muted); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.modal-heading > div { min-width: 0; }
.modal-heading p { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.modal-heading .icon-btn { margin: -4px -4px 0 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.photo-modal { position: relative; width: min(920px, 100%); padding: 10px; }
.photo-modal img, .full-photo { display: block; max-width: 100%; max-height: 78dvh; margin: auto; border-radius: 10px; object-fit: contain; }
.photo-modal .close { position: absolute; top: 16px; right: 16px; }
.qr-image { display: block; width: min(220px, 70vw); aspect-ratio: 1; margin: 14px auto; border: 1px solid var(--line); border-radius: 10px; background: white; object-fit: contain; }
.check-fields { display: grid; gap: 8px; margin: 15px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.check-fields legend { padding-inline: 5px; color: var(--muted); font-size: 13px; }
.check-fields label, .check-label { display: flex; align-items: flex-start; gap: 10px; min-height: 36px; padding: 5px 0; overflow-wrap: anywhere; }
.check-fields input, .check-label input { width: 20px; height: 20px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--green); }
.user-list { display: grid; gap: 8px; margin-top: 16px; }
.user-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.user-row > div { min-width: 0; overflow-wrap: anywhere; }
.user-row p { margin: 3px 0 0; }
.event-list { display: grid; gap: 0; }
.event { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.event:last-child { border-bottom: 0; }
.event > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.event p { margin: 4px 0; overflow-wrap: anywhere; }
.event .hint { margin: 4px 0 0; }
.event time { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.event-thumb { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 7px; object-fit: cover; }
.backup-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.backup-fields .field[hidden] { display: none; }
.backup-enabled { margin: 4px 0 14px; }
.backup-enabled input { width: 20px; height: 20px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--green); }
.backup-timezone { align-content: start; }
.field-label { color: var(--muted); font-size: 13px; }
.backup-form-actions { justify-content: flex-start; margin: 4px 0 18px; }
.backup-status { margin-top: 14px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.backup-status p { margin: 5px 0 0; overflow-wrap: anywhere; }
.backup-status .hint { font-size: 12px; }
.backup-status-line { display: flex; align-items: center; gap: 8px; }
.backup-indicator { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }
.backup-indicator.is-ready { background: var(--green); }
.backup-warning { color: var(--amber) !important; }
.backup-active { color: var(--green) !important; font-weight: 650; }
.backup-history { margin-top: 22px; }
.backup-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.backup-history-heading h3 { margin: 0; font-size: 16px; }
.backup-job-list { display: grid; }
.backup-job { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.backup-job:last-child { border-bottom: 0; }
.backup-job-info { min-width: 0; overflow-wrap: anywhere; }
.backup-job-info p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.backup-job-actions { display: flex; flex: 0 1 280px; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.backup-job-actions .btn, .backup-form-actions .btn, .backup-status .btn { min-height: 44px; }
.backup-job-info { flex: 1 1 0; }
.backup-job-info .backup-copy-status { color: var(--ink); font-weight: 650; }
.backup-kind { display: inline-flex; align-items: center; min-height: 24px; margin-right: 8px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 12px; font-weight: 650; }
.backup-kind.is-full { background: var(--green-pale); color: var(--green); border-color: #c5dbd0; }
.backup-kind[hidden] { display: none; }
.restore-decrypt { padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.restore-decrypt[hidden] { display: none; }
.restore-decrypt .btn, #f-restore-mode, #f-restore-decrypt-password { min-height: 44px; }
.restore-upload { margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.restore-upload[hidden] { display: none; }
.restore-upload input { width: 100%; min-height: 44px; }
.restore-upload .btn { min-height: 44px; }
.restore-upload .btn[hidden] { display: none; }
.remote-file-toolbar { display: flex; justify-content: flex-end; margin: 12px 0 4px; }
.remote-file-list { display: grid; min-width: 0; }
.remote-file-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 13px 0; border-bottom: 1px solid var(--line); }
.remote-file-info { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.remote-file-info > strong { display: block; font-size: 14px; }
.remote-file-info p { margin: 3px 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.remote-file-record { display: inline-flex; margin-top: 2px; padding: 3px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11px; }
.remote-file-record.is-known { background: var(--green-pale); color: var(--green); }
.remote-file-unavailable { color: var(--amber) !important; }
.remote-file-row > .btn { min-height: 44px; flex: 0 0 auto; }
.remote-file-empty { padding: 22px 14px; }
.remote-file-pagination { gap: 10px; }
.remote-file-page { min-width: 52px; text-align: center; }
.backup-local-note { margin: 0 0 18px; padding: 14px; border: 1px solid #c5dbd0; border-radius: 10px; background: var(--green-pale); }
.backup-local-note p { margin: 4px 0 0; font-size: 13px; }
.restore-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 16px 0; }
.restore-counts .stat-box { min-width: 0; }
.restore-consent { min-height: 44px; align-items: flex-start; padding-block: 8px; }
.restore-consent input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--green); }
#f-remote-mode, #f-restore-password { min-height: 44px; }
.backup-form-actions > [hidden] { display: none; }
.remote-storage-fields .field[hidden] { display: none; }
.remote-storage-fields .field { align-content: start; }
.remote-storage-fields .hint { margin: 0; }
.remote-field-wide { grid-column: 1 / -1; }
.backup-empty { padding: 16px; box-shadow: none; }
.photo-storage-fields .field { min-width: 0; align-content: start; }
.photo-storage-fields .hint { margin: 0; }
.photo-storage-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 20px; }
.photo-storage-stats .stat-box { min-width: 0; }
.photo-migration-form { margin-top: 22px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.photo-migration-form h3 { margin: 0 0 14px; font-size: 16px; }
.photo-migration-form p { overflow-wrap: anywhere; }
.photo-history-heading { flex-wrap: wrap; }
.photo-history-heading h3 { flex: 1 1 180px; }
.photo-history-heading select { width: auto; min-width: 120px; }
.photo-history-heading .btn, .photo-migration-form .btn, .photo-storage-dialog .btn,
[id^="f-photo-"] { min-height: 44px; }
#f-photo-paused { min-height: 20px; }
.photo-sync-state { margin: 5px 0 0; color: var(--amber); font-size: 12px; }
.photo-sync-state.is-failed { color: var(--red); }
.toast { position: fixed; z-index: 30; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; width: max-content; max-width: calc(100vw - 32px); padding: 10px 15px; transform: translate(-50%, 10px); border-radius: 9px; background: #17242b; color: white; box-shadow: 0 5px 18px rgb(0 0 0 / 18%); opacity: 0; pointer-events: none; font-size: 14px; transition: opacity .16s ease, transform .16s ease; overflow-wrap: anywhere; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (min-width: 1440px) {
  .shell { padding-inline: 32px; }
  .item-grid:not(.list-view) { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
}
@media (max-width: 1023px) {
  .cabinet-intro { align-items: flex-start; flex-direction: column; }
  .cabinet-intro > .toolbar { justify-content: flex-start; }
  .searchbar { justify-content: flex-start; }
  .search { width: min(280px, 100%); }
  .selection-bar { left: 0; right: 0; }
}
@media (max-width: 767px) {
  :root { --batch-space: 188px; }
  .shell { padding-inline: 16px; }
  .topbar { min-height: 62px; align-items: center; gap: 10px; padding-block: 9px; }
  .brand { gap: 8px; font-size: 15px; }
  .brand-mark { width: 32px; height: 32px; }
  .top-actions { gap: 6px; }
  .identity { flex-basis: 100%; text-align: right; font-size: 12px; }
  .top-actions .btn { min-height: 44px; padding-inline: 9px; font-size: 12px; }
  .page { min-height: calc(100dvh - 62px); padding-block: 23px 44px; }
  .heading { font-size: 25px; }
  .subheading { font-size: 14px; }
  .section-head { align-items: flex-start; }
  .section-head > .btn { flex: 0 0 auto; }
  .cabinet-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
  .cabinet-card { min-height: 170px; }
  .stat-row { gap: 7px; margin: 17px 0; }
  .stat-box { padding: 10px; }
  .stat-box span { font-size: 12px; }
  .stat-box strong { font-size: 20px; }
  .upload-panel { align-items: flex-start; flex-direction: column; }
  .upload-panel .toolbar { width: 100%; }
  .upload-panel .toolbar .btn { flex: 1 1 auto; }
  .inventory-head { align-items: stretch; flex-direction: column; gap: 8px; }
  .inventory-head > div:first-child { min-width: 0; }
  .searchbar { justify-content: flex-start; gap: 7px; }
  .searchbar .search { flex: 1 0 100%; width: 100%; font-size: 16px; }
  .searchbar > .tabs { flex: 1 1 auto; }
  .searchbar > .tabs .tab { flex: 1 1 auto; }
  .searchbar > .btn { min-height: 44px; }
  .item-grid:not(.list-view) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .item-info { padding: 9px; }
  .item-bottom { gap: 6px; }
  .item-bottom .btn.small { min-height: 44px; padding-inline: 8px; }
  .status-toggle { min-height: 40px; min-width: 64px; }
  .item-date { font-size: 12px; }
  .list-view .item-card { grid-template-columns: 68px minmax(0, 1fr); }
  .list-view .photo-wrap { width: 68px; }
  .list-view .photo { min-height: 68px; }
  .list-view .item-info { display: block; padding: 8px 10px; }
  .list-view .item-name { line-height: 1.35; }
  .list-view .item-date { margin-top: 3px; }
  .list-view .item-info > .hint { margin: 2px 0 0; }
  .list-view .item-bottom { margin-top: 6px; }
  .selection-bar { align-items: stretch; flex-direction: column; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .selection-actions { width: 100%; justify-content: flex-start; gap: 6px; }
  .selection-actions .btn { flex: 1 1 auto; }
  body.is-selecting .toast { bottom: calc(var(--batch-space) + 12px + env(safe-area-inset-bottom)); }
  .modal-backdrop { place-items: end center; padding: 10px 10px max(10px, env(safe-area-inset-bottom)); }
  .modal { width: 100%; max-height: min(90dvh, 900px); padding: 18px; border-radius: 14px; }
  .modal-heading .icon-btn { width: 44px; height: 44px; }
  .modal-actions { justify-content: stretch; }
  .modal-actions .btn { flex: 1 1 auto; }
  .user-row { align-items: flex-start; flex-wrap: wrap; }
  .user-row .btn { flex: 0 0 auto; }
  .event { gap: 9px; }
  .backup-fields { grid-template-columns: minmax(0, 1fr); }
  .backup-job { align-items: flex-start; flex-direction: column; }
  .remote-file-row { align-items: stretch; flex-direction: column; gap: 9px; }
  .remote-file-row > .btn { width: 100%; }
  .remote-file-pagination { gap: 7px; }
  .backup-job-actions { width: 100%; flex-basis: auto; justify-content: flex-start; }
  .backup-job-actions .btn { flex: 1 1 auto; }
  .event time { max-width: 35%; overflow-wrap: anywhere; text-align: right; }
  .event-thumb { width: 40px; height: 40px; }
  .login-wrap { margin: 24px auto; }
  .login-card { padding: 22px 18px; }
}
@media (max-width: 390px) {
  .shell { padding-inline: 12px; }
  .topbar { align-items: flex-start; }
  .top-actions { max-width: 68%; }
  .top-actions .btn { padding-inline: 7px; }
  .stat-box { padding: 9px 7px; }
  .stat-box span { font-size: 12px; }
  .item-grid:not(.list-view) { gap: 7px; }
  .item-info { padding: 8px; }
  .item-bottom { gap: 4px; }
  .item-bottom .btn.small { padding-inline: 6px; font-size: 12px; }
  .status-toggle { min-width: 58px; padding-inline: 7px; }
  .selection-bar { padding-inline: 10px; }
  .selection-actions .btn { min-height: 44px; padding-inline: 7px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 767px) {
  .btn, .btn.small, .tab, .status-toggle, .list-view .item-bottom .btn.small,
  .check-label, .brand { min-height: 44px; }
}

.setup-page { display: grid; place-items: start center; }
.setup-page .login-wrap { width: min(560px, 100%); }
.setup-card .btn { width: 100%; min-height: 44px; }
.setup-card .hint, .site-preview code { overflow-wrap: anywhere; }
.setup-confirm { margin-block: 12px 18px; align-items: flex-start; }
.onboarding-panel { padding: 20px; margin-block: 20px; background: var(--green-pale); border: 1px solid #c5dbd0; border-radius: var(--radius-card); }
.onboarding-panel h2 { margin: 5px 0; font-size: 20px; }
.onboarding-panel p { margin: 5px 0 16px; color: var(--muted); }
.site-preview { min-width: 0; padding: 16px; margin-block: 16px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; }
.site-preview code { display: block; margin-block: 8px; white-space: normal; color: var(--ink); font-size: 14px; }
.site-warning { padding: 12px; background: var(--amber-pale); color: var(--amber); border-radius: 8px; font-size: 14px; }
.site-form .btn { min-height: 44px; }
.site-rebase[hidden] { display: none; }
@media (max-width: 767px) {
  .onboarding-panel { padding: 16px; }
  .onboarding-panel .toolbar .btn { flex: 1 1 auto; }
  .setup-page { padding-top: 12px; }
  .setup-page .login-wrap { margin-block: 10px; }
}


/* Backup center: one task workspace, calm overview, progressive settings. */
.admin-tool-groups { align-items: center; gap: 18px; padding: 18px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-card); }
.admin-tool-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-tool-label { font-size: 13px; font-weight: 700; color: var(--muted); padding-right: 4px; }
.backup-entry { margin-left: auto; }
.backup-center { min-width: 0; }
.backup-center-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 10px; }
.backup-center-heading .heading { margin-top: 7px; }
.backup-back { margin: -8px 0 16px -12px; }
.backup-center-actions { display: flex; flex-shrink: 0; gap: 8px; padding-bottom: 7px; }
.backup-run-status { min-height: 24px; margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.backup-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.backup-overview-card { background: var(--surface); padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); min-width: 0; }
.backup-overview-label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.backup-overview-card strong { font-size: 19px; font-weight: 650; display: block; }
.backup-overview-card p { margin: 7px 0 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.backup-overview-card.has-warning { background: var(--amber-pale); border-color: #e7cfaa; }
.backup-center-error { grid-column: 1 / -1; margin: 0; }
.backup-tabs { display: flex; gap: 5px; padding: 0; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.backup-tab { position: relative; appearance: none; background: transparent; border: 0; color: var(--muted); font: inherit; font-weight: 600; padding: 13px 23px; min-height: 48px; cursor: pointer; border-radius: 7px 7px 0 0; }
.backup-tab:hover { background: var(--green-pale); color: var(--green); }
.backup-tab[aria-selected=true] { color: var(--green); background: var(--green-pale); }
.backup-tab[aria-selected=true]::after { content: ''; height: 3px; background: var(--green); position: absolute; bottom: -1px; left: 18px; right: 18px; border-radius: 3px 3px 0 0; }
.backup-center-panel { min-width: 0; }
.backup-section { background: var(--surface); padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-card); min-width: 0; }
.backup-section-heading { margin-bottom: 24px; }
.backup-section-heading h2 { margin: 0 0 7px; font-size: 20px; }
.backup-section-heading p { margin: 0; }
.backup-center .backup-section .backup-history { border: 0; padding: 0; margin: 0; }
.backup-center .backup-history-heading h3 { display: none; }
.backup-center .backup-job { background: var(--surface-soft); gap: 20px; padding: 20px; }
.backup-center .backup-job-info { min-width: 0; flex: 1; }
.backup-center .backup-job-info > strong { margin-left: 10px; }
.backup-center .backup-job-info p { margin: 8px 0 0; overflow-wrap: anywhere; }
.backup-center .backup-job-actions { align-self: flex-start; max-width: 360px; justify-content: flex-end; }
.backup-copy-details { margin-top: 10px; color: var(--muted); font-size: 13px; }
.backup-copy-details summary { cursor: pointer; padding: 9px 0; min-height: 44px; }
.backup-more-actions { position: relative; font-size: 14px; }
.backup-more-actions summary { cursor: pointer; padding: 11px 13px; min-height: 44px; border-radius: var(--radius-control); border: 1px solid var(--line); background: var(--surface); }
.backup-more-menu { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 0; justify-content: flex-end; max-width: 290px; }
.backup-center .btn.small { min-height: 44px; }
.backup-center .backup-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.backup-center .field { max-width: 100%; }
.backup-center .field input:not([type=checkbox]), .backup-center .field select { min-height: 46px; }
.backup-center .backup-timezone { margin-bottom: 18px; }
.backup-center .backup-status { margin-top: 22px; }
.backup-center .backup-form-actions { justify-content: flex-start; margin-top: 22px; }
.backup-center .backup-local-note { background: var(--surface-soft); }
.backup-center .backup-status p, .backup-center .backup-local-note p { max-width: 86ch; }
.backup-plan-layout { display: grid; gap: 18px; }
.backup-encryption { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); min-width: 0; }
.backup-encryption > summary { cursor: pointer; padding: 22px 26px; min-height: 64px; }
.backup-encryption > summary strong { font-size: 16px; }
.backup-encryption > summary span { margin-left: 16px; color: var(--muted); font-size: 13px; }
.backup-encryption-body .backup-section { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.backup-encryption-body .backup-section-heading { display: none; }
.backup-loading { padding: 60px 24px; text-align: center; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.backup-restore-layout { display: grid; gap: 20px; }
.backup-restore-intro > h2 { margin: 0; font-size: 20px; }
.backup-restore-intro > p { color: var(--muted); margin: 8px 0 24px; }
.backup-restore-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.backup-restore-sources article { padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.backup-restore-sources strong { font-size: 16px; }
.backup-restore-sources p { margin: 10px 0 22px; color: var(--muted); min-height: 46px; }
.backup-restore-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.backup-center .remote-file-row { min-width: 0; }
.backup-center .remote-file-info { min-width: 0; }
.backup-center [hidden] { display: none !important; }
@media (max-width: 800px) {
  .admin-tool-groups { align-items: stretch; }
  .admin-tool-group { width: 100%; }
  .backup-entry { margin-left: 0; }
  .backup-center-heading { flex-direction: column; align-items: stretch; gap: 10px; }
  .backup-center-actions { padding: 0; }
  .backup-overview { gap: 10px; }
  .backup-overview-card { padding: 16px; }
  .backup-overview-card strong { font-size: 17px; }
  .backup-section { padding: 20px; }
  .backup-center .backup-job { flex-direction: column; gap: 14px; }
  .backup-center .backup-job-actions { align-self: stretch; justify-content: flex-start; max-width: none; }
  .backup-more-menu { justify-content: flex-start; }
}
@media (max-width: 540px) {
  .backup-overview { grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; }
  .backup-overview-card { display: grid; grid-template-columns: 90px 1fr; column-gap: 8px; padding: 13px 16px; }
  .backup-overview-label { grid-row: 1 / 3; align-self: center; margin: 0; }
  .backup-overview-card strong { font-size: 16px; }
  .backup-overview-card p { font-size: 12px; }
  .backup-tabs { gap: 0; }
  .backup-tab { flex: 1; padding: 12px 5px; font-size: 14px; }
  .backup-tab[aria-selected=true]::after { left: 10px; right: 10px; }
  .backup-section { padding: 18px 16px; }
  .backup-section-heading { margin-bottom: 18px; }
  .backup-center .backup-fields, .backup-restore-sources { grid-template-columns: 1fr; gap: 16px; }
  .backup-restore-sources article { padding: 18px; }
  .backup-restore-sources p { min-height: 0; }
  .backup-encryption > summary { padding: 18px 16px; }
  .backup-encryption > summary span { display: block; margin: 7px 0 0 17px; }
  .backup-restore-foot { flex-direction: column; align-items: flex-start; }
  .backup-center .pagination { flex-wrap: wrap; gap: 8px; }
  .backup-center .backup-job { padding: 16px; }
}

.backup-center .btn { min-height: 44px; }

.backup-center .backup-fields > .field { margin: 0; }

.backup-action-source { flex-basis: 100%; color: var(--muted); font-size: 12px; text-align: right; }
@media (max-width: 800px) { .backup-action-source { text-align: left; } }

.backup-rules { color: var(--muted); font-size: 13px; }
.backup-rules summary { cursor: pointer; min-height: 44px; padding: 10px 0; }
/* Admin workspace: three clear destinations, consistent section navigation. */
.admin-page { padding-top: 24px; }
.admin-page-title { margin-bottom: 26px; }
.admin-page-title .heading { font-size: clamp(26px, 3vw, 32px); letter-spacing: -.02em; }
.admin-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.admin-module { display: flex; flex-direction: column; min-width: 0; min-height: 328px; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; transition: border-color .14s ease, background-color .14s ease; }
.admin-module:hover { border-color: #89a79b; background: #fcfefd; }
.admin-module-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.admin-module-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--green); background: var(--green-pale); }
.admin-module-icon svg { width: 27px; height: 27px; }
.module-settings .admin-module-icon { background: #eff3f7; color: #365977; }
.module-backups .admin-module-icon { background: #f5f1e9; color: #785a29; }
.admin-module-detail { color: var(--muted); font-size: 13px; }
.admin-module h2 { font-size: 24px; line-height: 1.3; margin: 22px 0 8px; }
.admin-module-description { margin: 0; color: var(--muted); line-height: 1.65; }
.admin-module-tasks { list-style: none; padding: 0; margin: 18px 0 22px; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--muted); }
.admin-module-tasks li { border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.admin-module-open { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); color: var(--green); font-weight: 650; }
.admin-module-open > span:last-child { font-size: 26px; line-height: 1; font-weight: 400; }
.admin-navigation { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.admin-home-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 8px; min-height: 44px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.admin-home-link svg { width: 18px; height: 18px; }
.admin-navigation-links { display: flex; align-items: center; gap: 5px; }
.admin-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; font-weight: 600; border-radius: 8px; color: var(--muted); }
.admin-nav-link:hover, .admin-home-link:hover { color: var(--green); background: var(--green-pale); }
.admin-nav-link.active { background: var(--green-pale); color: var(--green); }
.admin-management-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.admin-management-tools h2 { margin: 0; font-size: 18px; }
.admin-management-tools p { margin: 4px 0 0; color: var(--muted); }
.admin-management-tools .btn { flex-shrink: 0; }
.admin-page .btn { min-height: 44px; }
.admin-settings-groups { display: flex; flex-direction: column; gap: 30px; }
.admin-settings-group { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 30px; align-items: start; }
.admin-settings-label { padding-top: 16px; }
.admin-settings-label h2 { margin: 0; font-size: 18px; }
.admin-settings-label p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.admin-settings-entries { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.admin-setting-entry { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 94px; padding: 20px 22px; text-align: left; border: 0; border-radius: 0; background: var(--surface); }
.admin-setting-entry + .admin-setting-entry { border-top: 1px solid var(--line); }
.admin-setting-entry:hover { background: var(--surface-soft); }
.admin-setting-symbol { width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; border-radius: 9px; color: var(--green); background: var(--green-pale); }
.admin-setting-symbol svg { width: 20px; height: 20px; }
.admin-setting-copy { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.admin-setting-copy strong { font-size: 16px; font-weight: 650; }
.admin-setting-copy > span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.admin-setting-chevron { color: var(--muted); font-size: 26px; line-height: 1; }
.admin-setting-entry:focus-visible { outline-offset: -4px; }
@media (max-width: 860px) {
  .admin-modules { gap: 12px; }
  .admin-module { padding: 20px; }
  .admin-module-top { align-items: flex-start; flex-direction: column; gap: 12px; }
  .admin-settings-group { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .admin-page { padding-top: 20px; }
  .admin-modules { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
  .admin-module { min-height: 0; padding: 22px; }
  .admin-module-top { flex-direction: row; align-items: center; }
  .admin-module h2 { font-size: 22px; margin-top: 18px; }
  .admin-module-tasks { margin-block: 14px 18px; }
  .admin-navigation { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 22px; padding-bottom: 12px; }
  .admin-home-link { align-self: flex-start; padding-left: 0; }
  .admin-navigation-links { display: grid; grid-template-columns: 1fr 1fr 1.65fr; gap: 4px; }
  .admin-nav-link { padding: 10px 8px; font-size: 14px; }
  .admin-management-tools { padding: 18px; gap: 14px; flex-wrap: wrap; }
  .admin-management-tools p { font-size: 14px; }
  .admin-settings-groups { gap: 26px; }
  .admin-settings-group { display: block; }
  .admin-settings-label { padding: 0 0 12px; }
  .admin-setting-entry { padding: 18px 16px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-module { transition: none; }
}

/* Cabinet photos stay separate from the compact inside-item preview strip. */
.cabinet-card.has-cover { overflow: hidden; }
.cabinet-cover { margin: -18px -18px 16px; aspect-ratio: 16 / 8; background: var(--green-pale); overflow: hidden; }
.cabinet-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cabinet-cover-fallback { height: 100%; display: grid; place-items: center; color: var(--green); }
.cabinet-cover-fallback svg { width: 48px; height: 48px; }
.cabinet-previews { margin-top: 18px; min-width: 0; }
.cabinet-previews-label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.cabinet-preview-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cabinet-preview-strip figure { margin: 0; min-width: 0; }
.cabinet-preview-strip img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--green-pale); }
.cabinet-preview-strip figcaption { margin-top: 5px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabinet-cover-editor { margin: 10px 0; display: grid; place-items: center; min-height: 92px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-soft, #f5f8f6); overflow: hidden; }
.cabinet-cover-editor img { display: block; width: 100%; max-height: 200px; object-fit: contain; }
.cabinet-cover-editor .hint { margin: 20px; text-align: center; }
.photo-storage-fields > .field[hidden], .photo-source-field[hidden] { display: none; }

/* Unified account entry keeps role and public guest access visibly separate. */
.login-role-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; margin: 20px 0; }
.login-role { min-height: 44px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-weight: 650; }
.login-role.active { background: var(--surface); border-color: var(--line); color: var(--green); box-shadow: 0 2px 5px #162d2010; }
.login-role:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.login-card form > .btn { width: 100%; }
.login-card .btn, .login-modal-content .btn, .admin-account-form .btn { min-height: 44px; }
.login-guest-section { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); }
.login-guest-section p { margin: 0; }
.login-guest { width: 100%; min-height: 44px; }
.login-modal-content h1 { font-size: 24px; margin: 6px 0 8px; }
.login-description { color: var(--muted); margin: 0; }
.cabinet-guest-access { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface-soft); margin-bottom: 16px; }
.cabinet-guest-access .hint { margin: 5px 0 0; }
.api-token-list { border: 1px solid var(--line); border-radius: 10px; padding: 0 16px; }
.api-token-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.api-token-row + .api-token-row { border-top: 1px solid var(--line); }
.api-token-row > div { min-width: 0; overflow-wrap: anywhere; }
.api-token-row .hint { margin: 5px 0 0; }
.api-token-row .btn { flex-shrink: 0; min-height: 44px; }
.api-token-secret { border: 1px solid var(--green); border-radius: 10px; padding: 16px; background: var(--green-pale); }
.api-token-secret code { user-select: all; overflow-wrap: anywhere; }
.api-token-secret .btn { margin: 8px 8px 0 0; min-height: 44px; }
.api-token-form .btn { min-height: 44px; }