* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: #0b0b0d; }
body { min-height: 100%; background: #0b0b0d; color: #f2f2f2; font-family: Arial, "Microsoft YaHei", sans-serif; }
button, input, textarea { font-family: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.wrap { max-width: 640px; margin: 0 auto; padding: 0 16px 96px; }
.topbar { position: relative; overflow: hidden; padding: 16px 0 12px; background: #0b0b0d; }
.topbar h1 { float: left; font-size: 22px; line-height: 36px; }
.top-actions { float: right; }
.topbar .iconbtn { margin-left: 8px; }
.iconbtn { border: 0; border-radius: 10px; background: #1c1c1e; color: #f2f2f2; padding: 8px 14px; font-size: 14px; }
.iconbtn:hover { background: #27272a; }
.iconbtn:active { opacity: .72; }
.statusline { min-height: 26px; padding: 0 2px 10px; color: #6f6f78; font-size: 12px; }
.statusline.warn { color: #f59e0b; }
.login { max-width: 420px; padding-top: 16vh; text-align: center; }
.login .logo { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 15px; background: #3b82f6; color: #fff; font-size: 32px; line-height: 58px; font-weight: bold; }
.login h2 { margin-bottom: 7px; font-size: 22px; }
.login > p { margin-bottom: 22px; color: #9a9aa2; font-size: 13px; }
.field-label { display: block; margin: 0 0 5px; color: #b8b8bf; font-size: 13px; text-align: left; }
.login input { display: block; width: 100%; margin-bottom: 14px; padding: 14px; border: 1px solid #2a2a2e; border-radius: 12px; outline: 0; background: #1c1c1e; color: #f2f2f2; font-size: 15px; }
.login input:focus, .editor input:focus, .editor textarea:focus { border-color: #3b82f6; }
.primary { width: 100%; padding: 14px; border: 0; border-radius: 12px; background: #3b82f6; color: #fff; font-size: 16px; font-weight: bold; }
.primary:hover { background: #2563eb; }
.primary:disabled { opacity: .5; }
.error { min-height: 20px; color: #ff6666; font-size: 13px; }
.login .error { margin-top: 12px; }
.legacy-warning { margin-top: 12px !important; color: #f59e0b !important; }
.note { margin-bottom: 10px; padding: 14px 16px; border: 1px solid transparent; border-radius: 14px; background: #1c1c1e; cursor: pointer; }
.note:hover { background: #222225; }
.note:active { border-color: #3b82f6; }
.note-head { overflow: hidden; }
.note h3 { float: left; max-width: 72%; overflow: hidden; color: #f2f2f2; font-size: 16px; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; }
.note time { float: right; color: #6f6f78; font-size: 12px; line-height: 20px; }
.note .pin { float: left; margin-right: 8px; color: #f59e0b; font-size: 13px; line-height: 20px; }
.note .preview { margin-top: 6px; overflow: hidden; color: #9a9aa2; font-size: 14px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.empty { padding-top: 80px; color: #6f6f78; font-size: 14px; line-height: 2; text-align: center; }
.fab { position: fixed; right: 20px; bottom: 24px; width: 58px; height: 58px; border: 0; border-radius: 29px; background: #3b82f6; box-shadow: 0 6px 20px rgba(59,130,246,.45); color: #fff; font-size: 30px; line-height: 54px; }
.fab:hover { background: #2563eb; }
.editor { position: fixed; z-index: 20; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; background: #0b0b0d; }
.editor .ebar { display: flex; padding: 14px 16px 10px; }
.editor .spacer { flex: 1; }
.editor .ebar button { margin-left: 8px; }
.editor .ebar button:first-child { margin-left: 0; }
.editor input.title { margin: 0 16px 10px; padding: 12px 14px; border: 1px solid #2a2a2e; border-radius: 12px; outline: 0; background: #1c1c1e; color: #f2f2f2; font-size: 17px; font-weight: bold; }
.editor textarea { flex: 1; margin: 0 16px; padding: 14px; border: 1px solid #2a2a2e; border-radius: 12px; outline: 0; background: #141416; color: #f2f2f2; font-size: 15px; line-height: 1.7; resize: none; }
.editor-error { margin: 8px 18px 0; }
.ebottom { padding: 12px 16px 14px; }
.danger { background: #2a1214; color: #ff6666; }
.danger:hover { background: #3a181b; }
#toast { position: fixed; z-index: 30; left: 50%; bottom: 100px; max-width: 80%; padding: 10px 18px; border-radius: 20px; background: #2a2a2e; color: #f2f2f2; font-size: 14px; opacity: 0; pointer-events: none; text-align: center; transform: translateX(-50%); }
#toast.show { opacity: 1; }
@media (max-width: 520px) { .wrap { padding-right: 12px; padding-left: 12px; } .topbar h1 { font-size: 20px; } .iconbtn { padding-right: 12px; padding-left: 12px; } }