/* Four customer-selectable palettes; layout and data stay the same. */
:root {
  --ink: #442a34; --muted: #79656c; --line: #e7d5c5; --paper: #faf0e4;
  --highlight: #582039; --lime: var(--highlight); --accent: #582039;
  --on-highlight: #fff4e5; --highlight-hover: #3e1528;
  --sidebar: #f3d3ae; --sidebar-end: #edbf92; --sidebar-text: #582039; --sidebar-muted: #7a4d48;
  --surface: #fffdfa; --soft: #faead7; --input: #fff9f0;
  --brand-bg: #f3d3ae; --brand-ink: #582039;
  --focus: #9b526e; --focus-ring: #9b526e25; --disabled: #e9ddd5; --disabled-ink: #806d70;
  --badge: #f6e4d0; --badge-ink: #582039;
}
:root[data-theme="wine"] {
  --ink: #392631; --muted: #7e6f75; --line: #e7dedb; --paper: #f5f1ec;
  --highlight: #e7cdaa; --accent: #6b2b45; --on-highlight: #48172c; --highlight-hover: #dcc096;
  --sidebar: #48172c; --sidebar-end: #260b1b; --sidebar-text: #f2e3e9; --sidebar-muted: #cbb3be;
  --surface: #fff; --soft: #f4eceb; --input: #fdfaf6;
  --brand-bg: #48172c; --brand-ink: #f1d9b9;
  --focus: #a17c54; --focus-ring: #a17c5426; --disabled: #e7dfe0; --disabled-ink: #887780;
  --badge: #ecddc7; --badge-ink: #713d54;
}
:root[data-theme="navy"] {
  --ink: #203553; --muted: #63738a; --line: #dce4ee; --paper: #f2f5fa;
  --highlight: #2867d8; --accent: #245fc4; --on-highlight: #fff; --highlight-hover: #1c54bc;
  --sidebar: #173660; --sidebar-end: #102341; --sidebar-text: #dfebfc; --sidebar-muted: #abc0de;
  --surface: #fff; --soft: #eaf0fa; --input: #f9fbfe;
  --brand-bg: #173660; --brand-ink: #78b5ff;
  --focus: #5089dd; --focus-ring: #5089dd26; --disabled: #dfe6ef; --disabled-ink: #687b97;
  --badge: #dceaff; --badge-ink: #315d98;
}

:root[data-theme="olive"] {
  --ink: #173b39; --muted: #637875; --line: #dce6da; --paper: #f3f7f4;
  --highlight: #ddf483; --accent: #235e52; --on-highlight: #173b32; --highlight-hover: #d3ed70;
  --sidebar: #e4ece4; --sidebar-end: #dce8dd; --sidebar-text: #244b3b; --sidebar-muted: #637a67;
  --surface: #fff; --soft: #edf4ed; --input: #f6f9f5;
  --brand-bg: #163c36; --brand-ink: #ddf483;
  --focus: #658f70; --focus-ring: #a1bc9026; --disabled: #dbe4dc; --disabled-ink: #617269;
  --badge: #e8efdf; --badge-ink: #4f6d52;
}
:root[data-theme="olive"] .nav.active { background: var(--surface); color: #244b3b; }
:root[data-theme="olive"] .dropzone { border-color: #bfd1c1; }

body { background: var(--paper); }
header { height: auto; min-height: 84px; padding-top: 16px; padding-bottom: 12px; flex-wrap: wrap; row-gap: 12px; background: var(--surface); border-color: var(--line); }
.brand { color: var(--ink); }
.brand .brand-initials { background: var(--brand-bg); color: var(--brand-ink); }
.language-setting select, #login-form input { background: var(--input); border-color: var(--line); }
header .account-controls .text-button { color: var(--muted); }
header .account-controls .text-button:hover { background: var(--soft); border-color: var(--line); }
aside { background: linear-gradient(165deg, var(--sidebar), var(--sidebar-end)); }
.section-label { color: var(--sidebar-muted); }
.nav { color: var(--sidebar-text); }
.nav.active, .primary { background: var(--highlight); color: var(--on-highlight); border-color: var(--highlight); }
.primary:hover { background: var(--highlight-hover); }
.nav b, .nav.active b { background: var(--badge); color: var(--badge-ink); }
.panel, .capture-column .panel, #login-form, .contact-card, #users-dialog, #language-chooser, .card-camera { background: var(--surface); border-color: var(--line); }
.panel-title p, #photo-empty span, .notes-panel .helper, footer { color: var(--muted); }
.capture-panel .panel-title::before, .notes-panel .panel-title::before { background-color: var(--soft); }
.dropzone { background: var(--input); border-color: var(--line); }
#photo-empty strong, .empty-card-art, .secondary, .voice, .text-button, .optional-fields > summary, #login-form label { color: var(--ink); }
.empty-card-art rect:nth-child(1), .empty-card-art rect:nth-child(3) { fill: var(--badge); }
.empty-card-art rect:nth-child(2) { fill: var(--surface); }
.secondary { background: var(--surface); border-color: var(--line); }
.secondary:hover, .voice:hover { background: var(--badge); }
.voice { background: var(--soft); border-color: var(--line); }
.voice.recording { background: #fff0ec; color: #9d3930; border-color: #f1c5bd; }
input, textarea, select { color: var(--ink); border-color: var(--line); }
.notes-panel textarea { background: var(--input); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline-color: var(--focus); }
.dark { background: var(--accent); color: #fff; border-color: var(--accent); }
.dark:not(:disabled):hover { filter: brightness(.9); background: var(--accent); }
#ocr-button:disabled { background: var(--disabled); border-color: var(--disabled); color: var(--disabled-ink); }
.avatar { background: var(--badge); color: var(--badge-ink); }
.contact-card:hover { border-color: var(--focus); }
.theme-picker { display: flex; flex: 1 0 100%; align-items: center; justify-content: flex-end; gap: 12px; }
.theme-label { font-size: 11px; color: var(--muted); }
.theme-options { display: flex; gap: 6px; }
.theme-choice { display: flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); }
.theme-choice[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 650; }
.theme-choice:hover { background: var(--soft); }
.theme-swatch { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; border: 1px solid #00000012; }
[data-theme-choice="apricot"] .theme-swatch { background: linear-gradient(90deg, #f3d3ae 50%, #582039 50%); }
[data-theme-choice="wine"] .theme-swatch { background: linear-gradient(90deg, #48172c 50%, #e7cdaa 50%); }
[data-theme-choice="navy"] .theme-swatch { background: linear-gradient(90deg, #173660 50%, #2867d8 50%); }
@media (max-width: 800px) {
  header { row-gap: 5px; }
  .theme-picker { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
  .theme-label { display: none; }
  .theme-options { display: grid; grid-template-columns: repeat(4, 44px); width: auto; gap: 6px; }
  aside { background: transparent; }
  .side-top { background: var(--sidebar); border-color: var(--sidebar); }
  .nav { color: var(--sidebar-text); }
  .nav.active { color: var(--on-highlight); }
}

:root[data-theme="navy"] .capture-panel .panel-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23365f99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Ccircle cx='8' cy='10' r='1.5'/%3E%3Cpath d='M6 15h4m4-6h4m-4 4h4'/%3E%3C/svg%3E"); }

:root[data-theme="navy"] .notes-panel .panel-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23365f99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='3' width='7' height='12' rx='3.5'/%3E%3Cpath d='M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3m-3 0h6'/%3E%3C/svg%3E"); }

[data-theme-choice="olive"] .theme-swatch { background: linear-gradient(90deg, #315848 50%, #ddf483 50%); }

/* Shared account contacts, with a separate collection for older device-only records. */
.sync-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 24px; padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.sync-banner p { margin:0; font-size:13px; line-height:1.5; color:var(--muted); }
.sync-banner .text-button { flex-shrink:0; min-height:44px; padding:6px 8px; }
.sync-banner[data-state="syncConflicts"],.sync-banner[data-state="syncError"],.sync-banner[data-state="syncOffline"] { border-color:var(--focus); background:var(--soft); }
.contact-group-title { grid-column:1/-1; font-size:17px; margin:18px 0 0; }
.contact-group-title:first-child { margin-top:0; }
.contact-group-help { grid-column:1/-1; margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.contact-sync-label { display:block; margin-top:10px; font-size:11px; color:var(--muted); }
.sync-conflict-panel { padding:20px; margin-bottom:24px; background:var(--soft); border:1px solid var(--focus); border-radius:12px; }
.sync-conflict-panel h2 { font-size:18px; margin:0 0 10px; }
.sync-conflict-panel p { font-size:14px; line-height:1.6; }
.sync-conflict-actions { display:flex; flex-wrap:wrap; gap:12px; }
#review-notes { margin-top:24px; }
#review-notes .notes-panel { padding:20px 0 0; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; }
#review-notes .notes-panel textarea { min-height:120px; }
.success-label { color:var(--ink); background:var(--soft); }
@media (min-width:900px) {
 #add-nav,#new-from-list,#back-capture,#capture-step { display:none!important; }
 #list-view { max-width:1100px; margin:0 auto; }
 #list-view .page-heading { margin-top:10px; }
}
@media (max-width:550px) {
 .sync-banner { padding:8px 12px; margin-bottom:16px; gap:8px; }
 .sync-banner p { font-size:11px; }
 .sync-banner .text-button { font-size:11px; }
 .sync-conflict-actions { display:grid; }
}

:root[data-theme="olive"] .capture-panel .panel-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232d5d4c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Ccircle cx='8' cy='10' r='1.5'/%3E%3Cpath d='M6 15h4m4-6h4m-4 4h4'/%3E%3C/svg%3E"); }

:root[data-theme="olive"] .notes-panel .panel-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232d5d4c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='3' width='7' height='12' rx='3.5'/%3E%3Cpath d='M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3m-3 0h6'/%3E%3C/svg%3E"); }