:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: Inter, Segoe UI, Arial, sans-serif; background: #101218; color: #f5f5f5; }
button, input { font: inherit; }
button { border: 0; border-radius: 10px; padding: 9px 12px; background: #293044; color: #fff; cursor: pointer; }
button:hover { background: #343d56; }
input { border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,.05); color: #fff; outline: none; }
.app { min-height: 100vh; display: grid; place-items: center; }
.hidden { display: none !important; }
.login-card { width: min(420px, calc(100vw - 32px)); display: grid; gap: 12px; padding: 24px; border-radius: 22px; background: #181b24; }
.login-card h1 { margin: 0; }
.login-card p { margin: 0 0 8px; color: rgba(255,255,255,.62); }
.status { font-size: 12px; color: rgba(255,255,255,.58); line-height: 1.35; }
.notes-app { width: 100vw; height: 100vh; display: grid; grid-template-columns: 320px 1fr; }
.sidebar { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #151821; border-right: 1px solid rgba(255,255,255,.06); overflow: auto; }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tree { display: grid; gap: 5px; margin-top: 8px; }
.item { display: flex; gap: 9px; align-items: center; padding: 8px 9px; border-radius: 10px; color: rgba(255,255,255,.72); cursor: pointer; }
.item:hover, .item.active { background: rgba(255,255,255,.07); color: #fff; }
.dot { width: 8px; height: 8px; border-radius: 99px; background: #8b9bff; flex: 0 0 auto; }
.editor { display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: 26px; overflow: hidden; }
.title { width: 100%; border: 0; background: transparent; font-size: 36px; font-weight: 760; padding: 0; }
.toolbar { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0 10px; }
.toolbar button { padding: 6px 10px; background: rgba(255,255,255,.06); }
.content { overflow: auto; outline: none; line-height: 1.55; font-size: 16px; padding-right: 12px; }
.content:empty::before { content: attr(data-placeholder); color: rgba(255,255,255,.35); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; }


.danger-button { background: rgba(224, 76, 76, .18); color: #ffb8b8; }
.danger-button:hover:not(:disabled) { background: rgba(224, 76, 76, .28); }
.danger-button:disabled { opacity: .38; cursor: default; }