:root {
  color-scheme: dark;
  --bg: #061522;
  --panel: rgba(13, 42, 63, .90);
  --panel2: rgba(18, 55, 80, .94);
  --line: rgba(118, 205, 255, .20);
  --text: #f6fbff;
  --muted: #a9c1d1;
  --accent: #4dd5ff;
  --accent2: #50e3a4;
  --danger: #ff6b7d;
  --shadow: 0 18px 46px rgba(0,0,0,.30);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { background:
  radial-gradient(circle at 10% 0%, rgba(57, 180, 255, .18), transparent 34%),
  radial-gradient(circle at 88% 18%, rgba(80, 227, 164, .12), transparent 26%),
  linear-gradient(180deg, #071d2d 0%, #061522 48%, #04101a 100%);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(77, 213, 255, .45); outline-offset: 2px; }
.hidden { display: none !important; }
.app-shell { max-width: 880px; margin: 0 auto; min-height: 100vh; padding-bottom: calc(84px + var(--safe-bottom)); }
.topbar { position: sticky; top: 0; z-index: 20; display:flex; align-items:center; justify-content:space-between; gap:12px; padding: calc(12px + var(--safe-top)) 16px 12px; background: rgba(5, 20, 32, .88); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.brand-wrap { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-icon { width:46px; height:46px; border-radius:14px; box-shadow:0 8px 24px rgba(51,199,255,.18); }
h1 { margin:0; font-size:18px; line-height:1.15; letter-spacing:.1px; }
.brand-wrap p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.icon-btn { width:44px; height:44px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); font-size:24px; }
.content { padding:16px; }
.notice-card { display:flex; align-items:flex-start; gap:12px; padding:14px; border:1px solid rgba(80,227,164,.30); border-radius:18px; background:linear-gradient(135deg,rgba(41,113,135,.42),rgba(20,88,78,.34)); box-shadow:var(--shadow); margin-bottom:14px; }
.notice-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.10); flex:0 0 auto; font-size:22px; }
.notice-copy { display:flex; flex-direction:column; gap:4px; flex:1; }
.notice-copy strong { font-size:14px; }
.notice-copy span { color:#c8e5e8; font-size:12.5px; line-height:1.45; }
.notice-close { border:0; background:transparent; color:#d9f9ff; font-size:22px; padding:0 2px; }
.mode-switch { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:5px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid var(--line); margin-bottom:14px; }
.mode-btn { border:0; border-radius:12px; padding:10px 7px; min-height:46px; color:var(--muted); background:transparent; font-size:12.5px; font-weight:700; }
.mode-btn.active { color:#032031; background:linear-gradient(135deg,var(--accent),#8fe8ff); box-shadow:0 7px 20px rgba(77,213,255,.22); }
.toolbar-card { display:grid; grid-template-columns:1fr auto; gap:10px; margin-bottom:18px; }
.search-wrap { display:flex; align-items:center; gap:8px; padding:0 13px; min-height:48px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.05); }
.search-wrap input { width:100%; border:0; outline:none; color:var(--text); background:transparent; }
.search-wrap input::placeholder { color:#829cad; }
.primary-btn, .secondary-btn, .danger-btn, .small-btn { border:0; border-radius:14px; font-weight:800; min-height:48px; padding:11px 16px; }
.primary-btn { color:#042231; background:linear-gradient(135deg,var(--accent),#7ff5c4); box-shadow:0 10px 24px rgba(56,207,220,.16); }
.secondary-btn { color:var(--text); background:rgba(255,255,255,.07); border:1px solid var(--line); }
.danger-btn { color:#fff; background:rgba(255,80,106,.18); border:1px solid rgba(255,107,125,.40); }
.small-btn { min-height:38px; padding:8px 12px; color:#dff7ff; background:rgba(77,213,255,.11); border:1px solid rgba(77,213,255,.24); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:4px 2px 10px; }
.section-head h2 { margin:0; font-size:17px; }
.section-head p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.collection-list { display:grid; gap:11px; }
.collection-card { border:1px solid var(--line); border-radius:18px; padding:14px; background:linear-gradient(180deg,rgba(16,49,73,.90),rgba(10,35,54,.94)); box-shadow:0 14px 32px rgba(0,0,0,.18); }
.collection-top { display:flex; gap:12px; align-items:center; }
.collection-badge { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; font-size:23px; background:linear-gradient(135deg,rgba(77,213,255,.20),rgba(80,227,164,.12)); border:1px solid rgba(77,213,255,.18); }
.collection-main { min-width:0; flex:1; }
.collection-main h3 { margin:0; font-size:15px; overflow-wrap:anywhere; }
.collection-main p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.collection-actions { display:flex; gap:8px; margin-top:12px; }
.collection-actions button { flex:1; min-height:40px; border-radius:12px; }
.empty-state { text-align:center; padding:36px 20px; border:1px dashed var(--line); border-radius:18px; color:var(--muted); }
.empty-icon { font-size:38px; }
.empty-state h3 { color:var(--text); margin:10px 0 4px; }
.empty-state p { font-size:13px; line-height:1.5; }
.bottom-nav { position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:25; width:min(880px,100%); display:grid; grid-template-columns:repeat(4,1fr); gap:2px; padding:8px 8px calc(8px + var(--safe-bottom)); background:rgba(4,16,26,.94); backdrop-filter:blur(20px); border-top:1px solid var(--line); }
.nav-btn { min-height:56px; border:0; border-radius:14px; color:#87a7b9; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.nav-btn span { font-size:22px; line-height:1; }
.nav-btn small { font-size:11px; font-weight:700; }
.nav-btn.active { color:#c8f7ff; background:rgba(77,213,255,.10); }
.drawer { position:fixed; inset:0; z-index:50; display:none; background:rgba(0,0,0,.50); }
.drawer.open { display:block; }
.drawer-panel { margin-left:auto; width:min(360px,88vw); height:100%; padding:calc(16px + var(--safe-top)) 14px 24px; background:#081d2c; border-left:1px solid var(--line); box-shadow:-20px 0 50px rgba(0,0,0,.35); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--line); }
.drawer-item { width:100%; text-align:left; padding:14px 12px; border:0; border-bottom:1px solid rgba(255,255,255,.06); background:transparent; color:var(--text); font-weight:700; }
.drawer-note { display:flex; flex-direction:column; gap:4px; margin-top:14px; padding:13px; border-radius:14px; background:rgba(255,255,255,.05); color:var(--muted); font-size:12px; }
.drawer-note strong { color:var(--text); font-size:13px; }
.drawer-note.accent { border:1px solid rgba(80,227,164,.22); }
.modal { position:fixed; inset:0; z-index:60; display:grid; align-items:end; background:rgba(0,0,0,.58); }
.modal-sheet { width:min(880px,100%); max-height:92vh; margin:0 auto; overflow:auto; background:#0a2234; border:1px solid var(--line); border-bottom:0; border-radius:24px 24px 0 0; padding-bottom:var(--safe-bottom); box-shadow:0 -24px 60px rgba(0,0,0,.40); }
.modal-head { position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:rgba(10,34,52,.96); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.modal-head h2 { margin:0; font-size:17px; }
.modal-body { padding:16px; }
.form-grid { display:grid; gap:12px; }
.field { display:grid; gap:6px; }
.field label { color:#c9e3ef; font-size:12px; font-weight:700; }
.field input, .field textarea, .field select { width:100%; min-height:46px; border-radius:13px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--text); padding:11px 12px; }
.field textarea { min-height:100px; resize:vertical; }
.button-row { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.button-row.three { grid-template-columns:repeat(3,1fr); }
.capture-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.capture-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:104px; border:1px solid var(--line); border-radius:17px; color:var(--text); background:rgba(255,255,255,.05); font-weight:800; }
.capture-tile span { font-size:30px; }
.help-card, .status-card { padding:14px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.045); margin-bottom:12px; }
.help-card h3, .status-card h3 { margin:0 0 6px; font-size:14px; }
.help-card p, .status-card p { margin:0; color:var(--muted); font-size:12.5px; line-height:1.55; }
.entry-list { display:grid; gap:10px; margin-top:14px; }
.entry-card { padding:12px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.04); }
.entry-head { display:flex; gap:10px; align-items:flex-start; }
.entry-type { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(77,213,255,.12); font-size:20px; flex:0 0 auto; }
.entry-meta { min-width:0; flex:1; }
.entry-meta strong { display:block; overflow-wrap:anywhere; }
.entry-meta small { color:var(--muted); display:block; margin-top:3px; }
.entry-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.entry-actions button { min-height:36px; padding:7px 10px; border-radius:11px; }
.media-preview { width:100%; max-height:420px; object-fit:contain; border-radius:14px; background:#02070b; margin:10px 0; }
.hash { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; color:#8fb6c8; overflow-wrap:anywhere; }
.audio-status { text-align:center; padding:20px; border:1px solid var(--line); border-radius:16px; margin-bottom:12px; }
.audio-dot { display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--danger); margin-right:8px; box-shadow:0 0 0 6px rgba(255,107,125,.12); }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(88px + var(--safe-bottom)); z-index:100; max-width:calc(100% - 28px); padding:11px 14px; border-radius:13px; background:#eefbff; color:#092133; box-shadow:0 16px 40px rgba(0,0,0,.35); font-size:13px; font-weight:800; }
@media (max-width: 560px) {
  .content { padding:13px; }
  .toolbar-card { grid-template-columns:1fr; }
  .mode-btn { font-size:11.3px; padding-inline:4px; }
  .button-row.three { grid-template-columns:1fr; }
}
@media (min-width: 700px) {
  .collection-list { grid-template-columns:repeat(2,1fr); }
  .capture-grid { grid-template-columns:repeat(4,1fr); }
}
@media print {
  .topbar,.bottom-nav,.notice-card,.mode-switch,.toolbar-card,.section-head,.drawer { display:none !important; }
  body { background:#fff; color:#111; }
  .app-shell,.content { max-width:none; padding:0; }
}


/* v1.0.3 coordinated timeline */
.timeline-group { margin-top: 16px; }
.timeline-date-label {
  display:inline-flex; align-items:center; min-height:30px; padding:6px 11px; margin:0 0 8px 18px;
  border-radius:999px; color:#dff8ff; background:rgba(77,213,255,.10);
  border:1px solid rgba(77,213,255,.22); font-size:11.5px; font-weight:800; letter-spacing:.2px;
}
.timeline-rail { position:relative; display:grid; gap:10px; padding-left:18px; }
.timeline-rail::before {
  content:""; position:absolute; left:11px; top:0; bottom:0; width:3px; border-radius:999px;
  background:linear-gradient(180deg,#42d7ff 0%,#8c6cff 28%,#ff5e91 52%,#55dfa7 76%,#f8c85f 100%);
  box-shadow:0 0 18px rgba(77,213,255,.24);
}
.timeline-entry { --entry-color:#4dd5ff; --entry-soft:rgba(77,213,255,.12); position:relative; margin-left:16px; padding:0; overflow:visible; border-left:4px solid var(--entry-color); background:linear-gradient(135deg,var(--entry-soft),rgba(10,34,52,.93) 44%); }
.timeline-entry.type-photo { --entry-color:#45d8ff; --entry-soft:rgba(69,216,255,.16); }
.timeline-entry.type-video { --entry-color:#9b72ff; --entry-soft:rgba(155,114,255,.16); }
.timeline-entry.type-audio { --entry-color:#ff6f9c; --entry-soft:rgba(255,111,156,.15); }
.timeline-entry.type-note { --entry-color:#58dfa8; --entry-soft:rgba(88,223,168,.15); }
.timeline-entry.type-file { --entry-color:#f2c65d; --entry-soft:rgba(242,198,93,.14); }
.timeline-dot {
  position:absolute; left:-37px; top:16px; width:34px; height:34px; display:grid; place-items:center;
  border-radius:50%; background:#081b2a; border:3px solid var(--entry-color); box-shadow:0 0 0 4px rgba(6,21,34,.92),0 0 18px var(--entry-soft);
  z-index:2;
}
.timeline-dot span { font-size:16px; }
.entry-content { padding:13px 13px 12px; }
.entry-title-row { display:flex; gap:8px; align-items:flex-start; justify-content:space-between; }
.entry-title-row strong { flex:1; min-width:0; }
.entry-kind {
  flex:0 0 auto; border-radius:999px; padding:4px 8px; background:var(--entry-soft); color:#eafcff;
  border:1px solid var(--entry-color); font-size:10px; font-weight:800;
}
.timeline-entry .entry-meta small { color:#b9d1dd; font-weight:700; }
.timeline-entry .entry-actions { border-top:1px solid rgba(255,255,255,.07); padding-top:9px; }

/* First-run mode selector */
.mode-choice-grid { display:grid; gap:10px; }
.mode-choice {
  width:100%; min-height:86px; display:grid; grid-template-columns:52px 1fr; grid-template-rows:auto auto;
  text-align:left; gap:2px 12px; align-items:center; padding:13px; border-radius:17px;
  border:1px solid var(--line); color:var(--text);
  background:linear-gradient(135deg,rgba(77,213,255,.08),rgba(80,227,164,.04));
}
.mode-choice > span { grid-row:1 / 3; width:50px; height:50px; display:grid; place-items:center; border-radius:15px; font-size:25px; background:rgba(255,255,255,.06); }
.mode-choice strong { font-size:14px; align-self:end; }
.mode-choice small { color:var(--muted); align-self:start; }

/* Local PIN lock */
.lock-screen {
  position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:calc(20px + var(--safe-top)) 18px calc(20px + var(--safe-bottom));
  background:
    radial-gradient(circle at 20% 0%,rgba(77,213,255,.22),transparent 34%),
    radial-gradient(circle at 85% 16%,rgba(80,227,164,.13),transparent 28%),
    linear-gradient(180deg,#071d2d,#04101a);
}
.lock-card {
  width:min(420px,100%); padding:24px 20px; border-radius:24px; border:1px solid rgba(118,205,255,.24);
  background:rgba(8,29,44,.95); box-shadow:0 28px 70px rgba(0,0,0,.45); text-align:center;
}
.lock-icon { width:72px; height:72px; border-radius:20px; box-shadow:0 16px 36px rgba(77,213,255,.18); }
.lock-card h2 { margin:14px 0 5px; font-size:20px; }
.lock-card > p { margin:0 0 18px; color:var(--muted); font-size:13px; }
.lock-card .field { text-align:left; }
.lock-message { min-height:20px; color:#ff9aab; font-size:12px; font-weight:700; }

@media (max-width: 560px) {
  .entry-title-row { flex-direction:column; align-items:flex-start; }
  .entry-kind { align-self:flex-start; }
  .timeline-entry .entry-actions { display:grid; grid-template-columns:repeat(2,1fr); }
  .timeline-entry .entry-actions button { width:100%; }
}