:root {
  --bg: #faf8f4;
  --surface: #ffffff;
  --text: #1c1f27;
  --muted: #6b7080;
  --border: #e6e2da;
  --primary: #212530;
  --primary-text: #ffffff;
  --accent: #e2783c;
  --ok: #2f9e6a;
  --danger: #c4413a;
  --radius: 12px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161c;
    --surface: #1d2028;
    --text: #eceef3;
    --muted: #9198a8;
    --border: #2c303b;
    --primary: #eceef3;
    --primary-text: #14161c;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
  padding-bottom: calc(84px + var(--safe-bottom));
  overscroll-behavior-y: none;
}

svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Header */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: calc(10px + var(--safe-top)) 12px 10px 16px;
  background: #212530; color: #fff;
}
.bar h1 { flex: 1; margin: 0; font-size: 19px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { background: none; border: 0; color: inherit; padding: 8px; border-radius: 8px; display: grid; place-items: center; }
.icon-btn:active { background: rgba(255,255,255,.12); }
.icon-btn circle { fill: currentColor; stroke: none; }
.status { font-size: 12px; padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,.12); white-space: nowrap; }
.status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: var(--ok); vertical-align: 1px; }
.status.offline::before { background: var(--accent); }

.menu {
  position: fixed; z-index: 20; right: 10px; top: calc(56px + var(--safe-top));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.18); min-width: 250px; overflow: hidden;
}
.menu button { display: block; width: 100%; text-align: left; padding: 14px 16px; background: none; border: 0; border-bottom: 1px solid var(--border); color: var(--text); font: inherit; }
.menu button:active { background: var(--bg); }
.menu-info { margin: 0; padding: 10px 16px 12px; font-size: 13px; color: var(--muted); }

/* List */
.search-wrap { padding: 12px 16px 4px; }
input[type="search"] {
  width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit;
}
.cards { list-style: none; margin: 0; padding: 8px 16px; display: grid; gap: 10px; }
.card {
  display: flex; gap: 12px; padding: 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; min-width: 0;
}
.card:active { transform: scale(.99); }
.thumb {
  width: 84px; height: 56px; flex: none; border-radius: 6px; object-fit: cover;
  background: var(--bg); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--muted);
}
.card-body { min-width: 0; flex: 1; }
.card-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-org, .card-notes { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-notes { color: var(--text); opacity: .8; }
.card-meta { display: flex; gap: 6px; align-items: center; margin-top: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.card-meta .event { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card-meta .badge { flex: none; margin-left: auto; }
.badge { padding: 1px 7px; border-radius: 99px; border: 1px solid var(--border); font-size: 11px; }
.badge.local { color: var(--accent); border-color: currentColor; }
.version { text-align: center; font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.empty { text-align: center; color: var(--muted); padding: 60px 32px; }
.empty-title { font-size: 18px; font-weight: 600; color: var(--text); }

/* Editor */
.photos { padding: 14px 16px 6px; }
.photo-strip { display: flex; gap: 10px; overflow-x: auto; margin-bottom: 10px; }
.photo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.photo { position: relative; flex: none; }
.photo img { display: block; height: 150px; max-width: 78vw; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); }
.photo .remove {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; padding: 0;
}
.photo .remove svg { width: 16px; height: 16px; }
.photo-label {
  position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 99px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 12px;
}
.add-photo {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px;
  border: 1.5px dashed var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 14px;
}
.add-photo svg { width: 18px; height: 18px; }
.add-photo.reread { border-style: solid; color: var(--accent); }
.ocr-status { display: flex; align-items: center; gap: 10px; padding: 4px 16px; font-size: 13px; color: var(--muted); }
.progress { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progress div { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.indeterminate .progress div { width: 35% !important; animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
#extracted-by { font-size: 12px; margin-left: 6px; }
.ai-error { margin: 6px 0; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--danger); border: 1px solid currentColor; }
#handwriting-status { font-style: normal; font-weight: 400; color: var(--accent); }
#extracted-by:not(:empty)::before { content: "· "; }

form { padding: 8px 16px 16px; display: grid; gap: 12px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label { display: grid; gap: 4px; min-width: 0; }
label span { font-size: 13px; color: var(--muted); font-weight: 500; }
input, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 16px;
}
input:focus, textarea:focus, input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
textarea { resize: vertical; }
.notes-field textarea { min-height: 120px; }
.raw summary { color: var(--muted); font-size: 14px; padding: 6px 0; }
.raw pre { white-space: pre-wrap; font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin: 6px 0; }
.link-btn { background: none; border: 0; color: var(--accent); font: inherit; font-size: 14px; padding: 6px 0; }
.meta { font-size: 12px; color: var(--muted); margin: 0; }

/* Bottom actions */
.actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.btn {
  border: 0; border-radius: 12px; padding: 14px 20px; font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.btn.primary { background: var(--primary); color: var(--primary-text); flex: 1; }
.btn.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn:active { opacity: .85; }
#edit-actions .btn.primary { flex: none; min-width: 120px; }
.saved { flex: 1; font-size: 13px; color: var(--muted); }

.toast {
  position: fixed; left: 50%; bottom: calc(90px + var(--safe-bottom)); transform: translateX(-50%); z-index: 30;
  background: #212530; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px;
  max-width: calc(100vw - 32px); box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

.lightbox {
  position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.92);
  display: grid; place-items: center; padding: var(--safe-top) 8px var(--safe-bottom);
}
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }

.login {
  position: fixed; inset: 0; z-index: 35; background: var(--bg);
  display: grid; place-items: center; padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
}
.login-box { width: 100%; max-width: 380px; display: grid; gap: 12px; }
.login-box h2 { margin: 0; }
.login-box p { margin: 0; color: var(--muted); font-size: 14px; }
.login-box .login-error { color: var(--danger); min-height: 1.2em; }

/* Until the account is confirmed only the sign-in screen is shown. */
body.locked > :not(.login):not(.toast) { display: none !important; }

[hidden] { display: none !important; }