:root { color-scheme: dark; --bg:#07080c; --fg:#f2f2ee; --line:rgba(242,242,238,.16); --lime:#d4ff3a; --mut:rgba(242,242,238,.7); }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.45 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:14px 24px; border-bottom:1px solid var(--line); }
.brand { display:flex; flex-direction:column; gap:0; text-decoration:none; color:inherit; min-width:0; }
.brand strong { font-size:1.2rem; letter-spacing:-.02em; }
.brand span { color:var(--mut); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.header-end { display:flex; align-items:center; gap:12px; flex-shrink:0; }
#who { font-size:14px; font-weight:600; }
header button, button { background:var(--lime); color:#111; border:0; border-radius:999px; padding:.55em 1em; font-weight:650; cursor:pointer; white-space:nowrap; }
.lang-select{width:auto; margin:0; color-scheme:dark;appearance:none;-webkit-appearance:none;background:#07080c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23f2f2ee' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .65em center;color:#f2f2ee;border:1px solid var(--line);border-radius:12px;padding:.4em 1.9em .4em .7em;font-size:14px;cursor:pointer}
.lang-select option{background:#07080c;color:#f2f2ee}
#login { max-width: 420px; margin: 12vh auto 0; }
main { max-width:1180px; margin:0 auto; padding:28px 20px 64px; }
body:has(#vault:not([hidden])) main { max-width:none; padding:0; }
form, li { border:1px solid var(--line); border-radius:16px; padding:16px; background:rgba(255,255,255,.03); }
aside.side { border:0; border-right:1px solid var(--line); border-radius:0; background:#10141c; }
label { display:block; margin:10px 0; font-size:13px; color:var(--mut); }
.field { display:flex; align-items:center; gap:4px; }
.field input { flex:1; }
button.icon { background:transparent; color:var(--mut); border:0; border-radius:8px; padding:.35em; width:34px; height:34px; }
button.icon svg { width:18px; height:18px; display:block; }
button.icon.on { color:var(--lime); }
form input[type="text"], form input[type="password"], form input[type="search"], form input:not([type]), form select, .listhead input {
  width:100%; margin-top:4px; background:#0c0e14; color:var(--fg); border:1px solid var(--line); border-radius:10px; padding:.6em .7em;
}
[hidden] { display: none !important; }
.shell { display:grid; grid-template-columns: 240px minmax(0,1fr); align-items:stretch; min-height:calc(100vh - 74px); }
.side { background:#10141c; border-right:1px solid var(--line); padding:18px 12px 14px; display:flex; flex-direction:column; }
.side-label { margin:4px 10px 10px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); }
.side-btn { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:transparent; color:var(--fg); border:0; border-radius:10px; padding:.55em .75em; font-weight:600; }
.side-btn svg { width:18px; height:18px; }
.side-btn.on, #tree button.nav.on, #all-keys.on { background:rgba(212,255,58,.16); }
.side-foot { margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
#settings-menu { padding-left:18px; }
#new-folder { margin:10px; background:transparent; color:var(--fg); border:1px solid var(--line); }
.stage { padding:22px 18px; min-width:0; }
.tool { border:1px solid var(--line); border-radius:16px; padding:18px; background:rgba(255,255,255,.03); }
.panes { display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:14px; align-items:start; }
aside.side { padding:18px 12px 14px; }
#tree button.nav, #all-keys { display:block; width:100%; text-align:left; background:transparent; color:var(--fg); border:0; border-radius:8px; padding:.35em .4em; font-weight:550; }
#tree button.nav.on { background:rgba(212,255,58,.16); }
#tree .kids { margin-left:14px; }
.listhead { display:flex; gap:8px; margin-bottom:10px; }
.listhead input { margin:0; }
li.on { outline:1px solid var(--lime); }
@media (max-width: 980px) { .panes { grid-template-columns: 1fr; } }
.uses { display:flex; gap:16px; margin:8px 0 14px; }
.err { color:#ff8d8d; min-height:1.2em; }
ul { list-style:none; padding:0; display:grid; gap:12px; }
li { display:grid; gap:4px; }
li b { font-size:1.05rem; }
.meta { color:var(--mut); font-size:13px; }
.row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.row button { margin-left:0; background:transparent; color:var(--fg); border:1px solid var(--line); }
.tag { font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line); border-radius:999px; padding:.15em .55em; }
h1,h2 { margin:0 0 8px; font-size:1.25rem; }