:root{
  --paper:#F1F3F6;
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --ink:#14181F;
  --ink-2:#4A5260;
  --ink-3:#7C8695;
  --line:#DCE0E7;
  --line-2:#EBEEF2;
  --accent:#1F6F6B;
  --accent-ink:#175652;
  --on-accent:#FFFFFF;
  --danger:#A33B32;
  --danger-soft:#F6E5E3;
  --ui:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --read:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1116; --surface:#171B22; --surface-2:#1D222A;
    --ink:#E7EAF0; --ink-2:#A2ACBA; --ink-3:#7A8494;
    --line:#2A313B; --line-2:#222831;
    --accent:#5EBDB3; --accent-ink:#8AD4CB; --on-accent:#0E1116;
    --danger:#E28378; --danger-soft:#33201D;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1116; --surface:#171B22; --surface-2:#1D222A;
  --ink:#E7EAF0; --ink-2:#A2ACBA; --ink-3:#7A8494;
  --line:#2A313B; --line-2:#222831;
  --accent:#5EBDB3; --accent-ink:#8AD4CB; --on-accent:#0E1116;
  --danger:#E28378; --danger-soft:#33201D;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.app{
  max-width:640px;margin:0 auto;height:100%;
  display:flex;flex-direction:column;
  background:var(--surface);
}
@media (min-width:680px){
  body{padding:24px}
  .app{height:calc(100% - 48px);border:1px solid var(--line);border-radius:14px;overflow:hidden}
}

.appbar{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top));
  border-bottom:1px solid var(--line-2);background:var(--surface-2);
  min-height:52px;
}
.appbar .title{
  flex:1;font-size:15px;font-weight:600;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.iconbtn{
  font:inherit;font-size:13px;color:var(--ink-2);
  background:transparent;border:1px solid var(--line);
  border-radius:7px;padding:6px 11px;cursor:pointer;white-space:nowrap;
}
.iconbtn:hover{color:var(--ink);border-color:var(--ink-3)}
.iconbtn:focus-visible,.submit:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.iconbtn.danger{color:var(--danger);border-color:var(--danger)}
.filebtn{display:inline-block}

.body{flex:1;overflow-y:auto;min-height:0;position:relative}
.pane{padding:22px 18px;display:flex;flex-direction:column;gap:16px}

h2{font-family:var(--read);font-size:20px;font-weight:600;margin:0;text-align:center}
.hint{margin:0;color:var(--ink-2);font-size:14px}
.sub{margin:-10px 0 0;text-align:center;color:var(--ink-3);font-size:13.5px}
.warn{
  margin:0;font-size:13px;color:var(--ink-2);
  border-left:2px solid var(--danger);padding-left:10px;
}
.vaultmark{display:flex;justify-content:center;color:var(--ink)}
.lock{justify-content:center;min-height:60vh}

.field{display:flex;flex-direction:column;gap:7px}
.field label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
}
input[type=password]{
  font-family:var(--mono);font-size:16px;letter-spacing:.06em;
  padding:11px 12px;width:100%;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
}
.submit{
  font:inherit;font-weight:600;font-size:15px;
  padding:12px 14px;border:0;border-radius:8px;
  background:var(--accent);color:var(--on-accent);cursor:pointer;width:100%;
}
.submit:hover{filter:brightness(1.06)}
.submit[disabled]{opacity:.6;cursor:progress}

.err{
  color:var(--danger);background:var(--danger-soft);
  border-radius:7px;padding:9px 11px;font-size:13.5px;
}
.shake{animation:shake .4s}
@keyframes shake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)}
  40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){.shake{animation:none}}

/* список */
.list-pane{padding:0}
.list{display:flex;flex-direction:column}
.item{
  display:flex;gap:12px;align-items:flex-start;padding:14px;
  border:0;border-bottom:1px solid var(--line-2);
  background:transparent;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
}
.item:hover{background:var(--surface-2)}
.item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.thumb{
  width:44px;height:44px;border-radius:7px;flex:none;
  border:1px solid var(--line-2);object-fit:cover;background:var(--surface-2);
}
.thumb.empty{display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:17px}
.item .meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.item .nm{font-weight:600;font-size:15px}
.item .ex,.item .dt{
  font-size:13px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.item .dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em}
.empty-state{padding:48px 22px;text-align:center;color:var(--ink-3);font-size:14.5px}

.fab-row{
  position:sticky;bottom:20px;margin:20px 18px 20px auto;
  display:flex;gap:10px;align-items:center;
}
.fab{
  width:52px;height:52px;border-radius:50%;border:0;flex:none;
  background:var(--accent);color:var(--on-accent);
  font-size:26px;line-height:1;cursor:pointer;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.4);
}
.fab-secondary{
  border-radius:22px;border:1px solid var(--line-2);background:var(--surface-2);
  color:var(--ink);font:inherit;font-size:13.5px;padding:0 16px;height:44px;
  cursor:pointer;white-space:nowrap;box-shadow:0 6px 20px -6px rgba(0,0,0,.4);
}

/* заметка */
.note-title{
  font-family:var(--read);font-size:21px;font-weight:600;
  border:0;background:transparent;color:var(--ink);padding:0;width:100%;
}
.note-title:focus{outline:none;border-bottom:1px solid var(--accent)}
.stamp{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.07em}
.note-body{
  font-family:var(--read);font-size:16px;line-height:1.6;
  border:0;background:transparent;color:var(--ink);
  padding:0;width:100%;min-height:180px;resize:vertical;
}
.note-body:focus{outline:none}

.images{display:flex;flex-wrap:wrap;gap:10px}
.imgwrap{position:relative;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.imgwrap img{display:block;max-width:160px;max-height:160px;cursor:zoom-in}
.imgwrap button{
  position:absolute;top:5px;right:5px;width:24px;height:24px;
  border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.62);color:#fff;font-size:14px;line-height:1;
}
.note-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--line-2)}
.saved{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.07em;min-height:14px}

dialog.viewer{
  border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh;
}
dialog.viewer::backdrop{background:rgba(0,0,0,.82)}
dialog.viewer img{max-width:96vw;max-height:96vh;display:block;border-radius:8px}

.linkbtn{
  font:inherit;font-size:14px;
  background:transparent;border:0;color:var(--accent-ink);
  cursor:pointer;padding:6px;text-align:center;
}
.linkbtn:hover{text-decoration:underline}
.linkbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

input[type=text]{
  font-size:16px;
  padding:11px 12px;width:100%;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
}

.busy{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.06em;text-align:center;min-height:14px;
}