:root {
  --bg: #070a0e;
  --bg2: #0d131a;
  --panel: #121a24;
  --panel2: #182230;
  --line: #243041;
  --text: #edf2f7;
  --muted: #8fa0b5;
  --accent: #5eead4;
  --accent2: #2dd4bf;
  --warn: #fbbf24;
  --danger: #fb7185;
  --ok: #34d399;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --font: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, #12303a 0%, transparent 55%),
              radial-gradient(900px 500px at 100% 0%, #1a1430 0%, transparent 50%),
              var(--bg);
  line-height: 1.45;
}
.bg-grid {
  position: fixed; inset: 0; pointer-events: none; opacity: .22;
  background-image:
    linear-gradient(rgba(94,234,212,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,234,212,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}
#app { position: relative; max-width: 920px; margin: 0 auto; padding: 28px 18px 72px; }
.top { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 28px; flex-wrap: wrap; }
.brand { display: flex; gap: 14px; align-items: center; }
.mark {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, #5eead4, #6366f1 70%);
  box-shadow: 0 0 0 1px rgba(94,234,212,.35), 0 10px 30px rgba(94,234,212,.2);
}
h1 { margin: 0; font-size: 1.45rem; letter-spacing: .02em; font-weight: 700; }
.tag { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.top-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(18,26,36,.8); color: var(--accent);
}
.pill.muted { color: var(--muted); }
.panel {
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border: 1px solid var(--line); border-radius: 18px; padding: 28px;
  box-shadow: var(--shadow); max-width: 460px;
}
.panel-head h2 { margin: 0 0 6px; font-size: 1.25rem; }
.sub { margin: 0 0 18px; color: var(--muted); font-size: .92rem; }
.field { display: block; margin: 0 0 14px; color: var(--muted); font-size: .82rem; font-weight: 500; }
.field input, .field textarea, .search {
  display: block; width: 100%; margin-top: 6px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: #0a1017; color: var(--text);
  font: 500 15px/1.3 var(--font); outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .search:focus {
  border-color: rgba(94,234,212,.55);
  box-shadow: 0 0 0 3px rgba(94,234,212,.12);
}
.strength { min-height: 1.2em; font-size: .82rem; margin: -4px 0 12px; color: var(--muted); }
.strength[data-level="0"], .strength[data-level="1"] { color: var(--danger); }
.strength[data-level="2"] { color: var(--warn); }
.strength[data-level="3"], .strength[data-level="4"], .strength[data-level="5"] { color: var(--ok); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
button, .file {
  appearance: none; cursor: pointer; border: 0; border-radius: 10px;
  padding: 11px 16px; font: 600 14px/1 var(--font);
}
.primary { background: linear-gradient(180deg, var(--accent), var(--accent2)); color: #042f2e; }
.primary:hover { filter: brightness(1.05); }
.ghost, .file {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
}
.ghost:hover, .file:hover { border-color: #3a4d66; }
.danger { background: transparent; color: var(--danger); border: 1px solid rgba(251,113,133,.45); }
.flash { min-height: 1.25em; color: var(--muted); font-size: .88rem; margin: 12px 0 0; }
.bullets { margin: 22px 0 0; padding: 0 0 0 18px; color: var(--muted); font-size: .88rem; }
.bullets li { margin: 6px 0; }
.hidden { display: none !important; }
.vault-bar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 16px; padding: 12px; border-radius: 14px;
  background: rgba(18,26,36,.85); border: 1px solid var(--line);
}
.who-wrap { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; min-width: 140px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.search { flex: 1; min-width: 160px; margin: 0; }
.grid { display: grid; gap: 12px; }
.entry {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; display: grid; gap: 6px;
  transition: border-color .15s, transform .15s;
}
.entry:hover { border-color: #3a506a; transform: translateY(-1px); }
.entry h4 { margin: 0; font-size: 1.02rem; }
.entry .meta { color: var(--muted); font-size: .86rem; word-break: break-all; font-family: var(--mono); }
.entry .actions { margin-top: 8px; }
.sheet {
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel);
  color: var(--text); padding: 24px; width: min(440px, 92vw);
  box-shadow: var(--shadow);
}
.sheet::backdrop { background: rgba(3,6,10,.72); backdrop-filter: blur(4px); }
.sheet h3 { margin: 0 0 14px; }
.foot {
  margin-top: 40px; color: var(--muted); font-size: .8rem;
  display: flex; gap: 8px; justify-content: center; align-items: center;
}
.sep { opacity: .5; }
@media (max-width: 640px) {
  .panel { padding: 20px; }
  .vault-bar { padding: 10px; }
}