:root {
  --bg-main: #0a0b0d;
  --bg-card: #141619;
  --border-color: #24272c;
  --primary: #3b82f6;
  --text-main: #f3f4f6;
  --text-sub: #6b7280;
  --danger: #ef4444;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace; }
body { background: var(--bg-main); color: var(--text-main); display: flex; justify-content: center; min-height: 100vh; }
.app-shell { width: 100%; max-width: 640px; padding: 20px 16px; display: flex; flex-direction: column; }
.app-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.brand { font-size: 17px; font-weight: 700; color: var(--primary); }

.notes-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.note-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.note-header { display: flex; justify-content: space-between; align-items: center; }
.note-title { font-size: 15px; font-weight: 600; color: #fff; }
.btn-del { background: none; border: none; color: var(--text-sub); cursor: pointer; font-size: 12px; }
.btn-del:hover { color: var(--danger); }

/* 🌟 防偷窥核心样式：默认高斯模糊处理 */
.note-body-wrapper { position: relative; cursor: pointer; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,0.25); padding: 10px; }
.note-content { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: #e5e7eb; transition: filter 0.25s ease; }
.note-body-wrapper.blurred .note-content { filter: blur(7px); user-select: none; }
.blur-mask-hint { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 12px; color: var(--primary); font-weight: 600; background: rgba(0,0,0,0.3); }
.note-body-wrapper.blurred .blur-mask-hint { display: flex; }
.note-time { font-size: 11px; color: var(--text-sub); }

.modal-backdrop, .lock-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; }
.modal-box, .lock-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; width: 100%; max-width: 440px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.lock-box { text-align: center; align-items: center; }
.lock-icon { font-size: 36px; }

input[type="text"], input[type="password"], textarea { width: 100%; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 8px; color: #fff; padding: 10px 14px; font-size: 14px; outline: none; }
textarea { height: 160px; resize: none; }
button { cursor: pointer; border: none; outline: none; border-radius: 8px; font-weight: 600; font-size: 14px; padding: 10px 16px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-secondary { background: var(--border-color); color: var(--text-main); }
.full-width { width: 100%; }
.actions-row { display: flex; justify-content: flex-end; gap: 10px; }
.empty-tip { text-align: center; color: var(--text-sub); font-size: 13px; padding: 50px 0; }