:root {
  --bg: #e9f0f4;
  --paper: #f8fbfd;
  --surface: #fff;
  --surface-soft: #f1f6fa;
  --ink: #243744;
  --muted: #607482;
  --quiet: #778995;
  --line: #dfe9ef;
  --line-strong: #cbdce6;
  --primary: #233c4c;
  --primary-hover: #304f63;
  --accent: #5083a3;
  --accent-soft: #e3eff7;
}
body {
  background: radial-gradient(ellipse at 10% 12%, #d5e7f3 0, transparent 52%),
    radial-gradient(ellipse at 96% 85%, #e1eff1 0, transparent 48%), #edf3f7;
  background-attachment: fixed;
}
.app-shell { max-width: 1840px; margin: auto; padding: 30px 40px 40px; gap: 26px; }
.brand-panel { justify-content: space-between; gap: 20px; border: 0; padding: 4px 4px 0; }
.brand-lockup { flex-wrap: wrap; gap: 12px; }
h1 { font-weight: 650; letter-spacing: -.8px; }
.mode-note { font-size: 14px; font-weight: 400; }
.preview-badge { flex-shrink: 0; border: 1px solid #ffffffc9; background: #ffffff70; padding: 9px 14px; border-radius: 30px; font-size: 12px; color: #536f82; }
.workspace { gap: 24px; grid-template-rows: minmax(210px, 23vh) auto auto; }
.drop-zone { border: 1px solid #ffffffdc; border-radius: 26px; gap: 12px; background: linear-gradient(120deg, #f8fcffdc, #e8f2fad9 65%, #edf6f5d9); box-shadow: inset 0 0 0 6px #ffffff35, 0 12px 40px #38596e07; }
.drop-zone:hover, .drop-zone.dragging { background: linear-gradient(120deg, #fff, #dfeef8 65%, #e6f3f4); border-color: #9dbfd4; box-shadow: 0 12px 40px #38596e0d; }
.drop-zone:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.upload-icon { border: 0; background: #233c4c; width: 42px; height: 42px; box-shadow: 0 6px 14px #233c4c19; }
.upload-icon span::before, .upload-icon span::after { background: white; }
.upload-icon span::before { height: 2px; top: 9px; }
.upload-icon span::after { width: 2px; left: 9px; }
.drop-zone strong { font-size: 24px; font-weight: 550; letter-spacing: -.6px; }
.drop-zone small { font-weight: 400; }
.upload-progress { width: min(220px, calc(100% - 44px)); gap: 7px; }
.upload-progress-track { height: 4px; background: #d0e1eb; }
.upload-progress-count { font-weight: 500; }
.main-grid { gap: 24px; grid-template-columns: minmax(0, 1fr) 370px; }
.thumb-pane, .editor-pane { border-radius: 24px; border-color: #ffffffdb; background: #ffffffb8; box-shadow: 0 8px 36px #34566a06; }
.thumb-pane { min-height: 500px; }
.pane-head { min-height: 82px; padding: 18px 22px; flex-wrap: wrap; }
.pane-head h2 { font-size: 20px; font-weight: 550; letter-spacing: -.5px; }
.thumb-help { padding: 14px 22px; font-weight: 400; font-size: 14px; border: 0; }
.thumb-list { padding: 8px 20px 22px; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
.thumb-list:empty::before { content: 'Your photos will appear here'; grid-column: 1 / -1; text-align: center; padding: 100px 12px; font-size: 14px; color: var(--muted); }
.thumb-card { border-radius: 16px; grid-template-rows: 124px auto; transition: box-shadow .16s ease; }
.thumb-card img, .thumb-fallback { height: 124px; }
.thumb-card.selected { background: #e6f1f8; box-shadow: 0 0 0 3px #5083a31a; }
.thumb-name { font-weight: 500; padding: 12px 10px; }
.selection-marquee { background: #5083a320; }
.icon-button, .ghost-button, .primary-button { border-radius: 999px; font-size: 14px; font-weight: 550; min-height: 40px; }
.toolbar .ghost-button { min-width: auto; width: auto; }
.primary-button { box-shadow: 0 5px 12px #24374412; }
.metadata-form { padding: 24px; gap: 20px; }
.section-label { font-size: 18px; font-weight: 550; letter-spacing: -.4px; }
.field span { font-size: 14px; font-weight: 450; text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea { border-radius: 12px; background-color: #ffffffc9; font-size: 14px; border-color: #d9e5ec; }
.field textarea { min-height: 126px; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 3px #5083a319; }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: #edf3f6; }
.rename-panel { margin: 0 24px; padding: 22px 0; }
.preview-panel { border-radius: 14px; }
.preview-head { flex-wrap: wrap; padding: 12px; gap: 6px; }
.preview-head h3, .preview-head span { font-weight: 500; }
th { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; background: #f7fafc; }
th, td { border-color: var(--line); }
.actions { padding: 18px 24px; }
.status-line { padding-inline: 24px; font-weight: 450; }
body.has-images .drop-zone { grid-template-columns: auto auto minmax(140px, 220px); gap: 24px; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1060px) {
  .app-shell { padding: 24px; }
  .main-grid { grid-template-columns: 1fr; }
  .brand-panel { flex-wrap: wrap; }
  .thumb-pane { min-height: 360px; }
}
@media (max-width: 560px) {
  .app-shell { padding: 16px; gap: 20px; }
  .workspace { gap: 18px; }
  .pane-head { padding: 18px; }
  .toolbar { flex-wrap: wrap; }
  .thumb-list { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); padding: 10px 14px 18px; }
  body.has-images .drop-zone { grid-template-columns: auto auto; gap: 10px; padding: 16px; }
  body.has-images .workspace { grid-template-rows: auto auto auto; }
  body.has-images .upload-progress { grid-column: 1 / -1; }
  .metadata-form { padding: 20px; }
  .rename-panel { margin-inline: 20px; }
}

.appearance-controls { display: flex; align-items: center; gap: 10px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 2px; width: 72px; height: 44px; padding: 4px; border: 0; border-radius: 24px; background: #dfe9f0; color: #233c4c; cursor: pointer; }
.theme-toggle span { display: flex; align-items: center; justify-content: center; width: 30px; height: 32px; border-radius: 50%; opacity: .55; }
.theme-toggle svg { display: block; width: 17px; height: 17px; }
.theme-toggle .theme-sun { background: #fff; opacity: 1; }
[data-theme="dark"] .theme-toggle { background: #233b4b; color: #d5e7f3; }
[data-theme="dark"] .theme-toggle .theme-sun { background: transparent; opacity: .55; }
[data-theme="dark"] .theme-toggle .theme-moon { background: #405a6c; opacity: 1; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14212c; --paper: #1a2b38; --surface: #233746; --surface-soft: #203340;
  --ink: #e5eff5; --muted: #aec1cf; --quiet: #91a9ba;
  --line: #344c5d; --line-strong: #466174;
  --primary: #b5d8ef; --primary-hover: #d1e9f7;
  --accent: #8cbede; --accent-soft: #294c64;
}
[data-theme="dark"] body { background: radial-gradient(ellipse at 10% 12%, #223f55 0, transparent 52%), radial-gradient(ellipse at 96% 85%, #203c43 0, transparent 48%), #14212c; background-attachment: fixed; }
[data-theme="dark"] .preview-badge { color: #adc6d8; border-color: #486172; background: #263d4c80; }
[data-theme="dark"] .drop-zone { background: linear-gradient(120deg, #213a4c, #203547 65%, #244049); border-color: #425b6d; box-shadow: inset 0 0 0 6px #ffffff03; }
[data-theme="dark"] .drop-zone:hover, [data-theme="dark"] .drop-zone.dragging { background: linear-gradient(120deg, #29485c, #274256 65%, #2b4952); border-color: var(--accent); }
[data-theme="dark"] .thumb-pane, [data-theme="dark"] .editor-pane { background: #1c2e3be8; border-color: #385162; }
[data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea { background-color: #233b4b; border-color: #405a6c; }
[data-theme="dark"] .field input:disabled, [data-theme="dark"] .field select:disabled, [data-theme="dark"] .field textarea:disabled { background: #1b2c38; }
[data-theme="dark"] .thumb-card.selected { background: #2a4a60; box-shadow: 0 0 0 3px #8cbede24; }
[data-theme="dark"] .upload-progress-track { background: #40596a; }
[data-theme="dark"] .primary-button { color: #152a39; }
[data-theme="dark"] th { background: #243c4d; color: var(--ink); }
[data-theme="dark"] td { color: var(--muted); }
[data-theme="dark"] .empty-cell, [data-theme="dark"] .unselected-row td { color: var(--quiet); }
[data-theme="dark"] .status-line.ready { color: #91d8bd; }
[data-theme="dark"] .status-line.error { color: #ffacb3; }

/* A2 photo-window wordmark. */
.brand-wordmark { margin: 0; flex-shrink: 0; line-height: 0; }
.brand-wordmark .wordmark { display: block; width: 140px; height: auto; color: #233c4c; --logo-accent: #5083a3; }
[data-theme="dark"] .brand-wordmark .wordmark { color: #ffffff; --logo-accent: #b9dbed; }
@media (max-width: 600px) {
  .brand-wordmark .wordmark { width: 124px; }
}