:root { --bg:#0f1220; --fg:#e6e8f0; --muted:#8b90a8; --accent:#5b8cff; --danger:#ff5b6e; --card:#1a1f33; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,sans-serif; background:var(--bg); color:var(--fg); }
#app { max-width:680px; margin:0 auto; padding:24px 16px 64px; }
header { display:flex; align-items:center; justify-content:space-between; }
h1 { font-size:1.4rem; margin:.2em 0; }
.hidden { display:none !important; }
.status { color:var(--muted); min-height:1.4em; }
.status.error { color:var(--danger); }
.hint { color:var(--muted); font-size:.9rem; }
button { font:inherit; padding:.5em 1em; border-radius:8px; border:1px solid #2c3350; background:var(--card); color:var(--fg); cursor:pointer; }
button:hover { border-color:var(--accent); }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.toolbar { display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; }
#noteList { list-style:none; padding:0; margin:8px 0; }
#noteList li { padding:12px 14px; background:var(--card); border:1px solid #2c3350; border-radius:8px; margin-bottom:8px; cursor:pointer; }
#noteList li:hover { border-color:var(--accent); }
#editor { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
input, textarea { font:inherit; padding:.6em; border-radius:8px; border:1px solid #2c3350; background:#11152480; color:var(--fg); width:100%; }
textarea { resize:vertical; }
section { margin-top:16px; }
#gate input { margin-bottom:10px; }
#gate .primary { width:100%; }
#provision { margin-top:18px; padding:12px 14px; background:var(--card); border:1px solid #2c3350; border-radius:8px; }
#provision code { color:var(--accent); }
pre { background:#0b0e1a; border:1px solid #2c3350; border-radius:8px; padding:12px; overflow-x:auto; font-size:.85rem; white-space:pre-wrap; word-break:break-all; }