:root {
  --paper: #fffdf7;
  --paper-edge: #fff;
  --ink: #2c2a26;
  --muted: #8a857a;
  --rule: #a9d4e8;
  --margin: #e8a6a0;
  --accent: #0a84ff;
  --accent-strong: #4da3ff;
  --fg: #f5f5f7;
  --fg-muted: rgba(245, 245, 247, 0.6);
  --glass: rgba(255, 255, 255, 0.08);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.14);
  --bg: #000000;
  --shadow: rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(10, 132, 255, 0.15), transparent 60%),
    radial-gradient(1000px 700px at 110% 110%, rgba(175, 82, 222, 0.12), transparent 55%),
    linear-gradient(160deg, #0b0b0d, #000000);
  min-height: 100vh;
  color: var(--fg);
  display: flex;
  flex-direction: column;
}

.app { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- Toolbar ---------- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 28px;
  background: rgba(20, 20, 22, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 6px 24px var(--shadow);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo {
  filter: drop-shadow(0 2px 8px rgba(10, 132, 255, 0.45));
}
.brand h1 { color: var(--fg); font-size: 1.25rem; font-weight: 500; letter-spacing: 0.2px; }

.actions { display: flex; align-items: center; gap: 14px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }

.title-input {
  flex: 1;
  min-width: 200px;
  max-width: 340px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fg);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.title-input::placeholder { color: var(--fg-muted); font-weight: 400; }
.title-input:focus {
  border-color: var(--accent);
  background: var(--glass-strong);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.18);
}

.actions-buttons { display: flex; gap: 8px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  font-family: 'Outfit', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass);
  color: var(--fg);
  cursor: pointer;
  transition: transform 0.08s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:hover { background: var(--glass-strong); border-color: rgba(255,255,255,0.22); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn .icon { display: inline-flex; align-items: center; line-height: 0; }

.btn-primary {
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(10, 132, 255, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #3d9bff, #0a84ff);
  border-color: transparent;
  box-shadow: 0 6px 22px rgba(10, 132, 255, 0.55), inset 0 1px 0 rgba(255,255,255,0.2);
}

.btn-close {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  border-color: var(--glass-border);
  color: var(--fg-muted);
  background: var(--glass);
}
.btn-close:hover { color: var(--fg); background: var(--glass-strong); border-color: rgba(255,255,255,0.22); }

/* ---------- Main / Book ---------- */
.main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 40px 24px;
}

.book {
  position: relative;
  width: 100%;
  max-width: 860px;
  perspective: 1600px;
}

.page {
  position: relative;
  background:
    linear-gradient(90deg, var(--paper-edge) 0px, var(--paper) 34px) padding-box,
    linear-gradient(180deg, #f8f2e4, #f1ead9) border-box;
  border: 1px solid rgba(255,255,255,0.18);
  border-left: 6px solid rgba(255,255,255,0.45);
  border-radius: 2px 16px 16px 2px;
  box-shadow:
    -18px 0 30px -8px rgba(0,0,0,0.55),
    0 30px 60px -14px var(--shadow);
  padding: 48px 54px 24px 74px;
}

/* ---- Notebook ruled paper ---- */
/* The sheet grows with its content so the rule lines always stay
   glued underneath each line of text (lines and text share the same
   34px rhythm and scroll together as one continuous page). */
.notebook {
  position: relative;
  /* red vertical margin line */
  background:
    linear-gradient(90deg, transparent 0, transparent 2px, var(--margin) 2px, var(--margin) 3px, transparent 3px);
  background-position: 38px 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* continuous horizontal rule lines across the whole growing sheet */
.notebook::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--rule) 0px,
    var(--rule) 1px,
    transparent 1px,
    transparent 34px
  );
  background-position: 0 10px;
  pointer-events: none;
}

/* the sheet itself expands to fit every line of text */
.note-body {
  position: relative;
  display: block;
  width: 100%;
  min-height: 72vh;
  padding: 18px 12px 30px 46px;
  overflow: hidden;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Segoe Print', 'Comic Sans MS', 'Bradley Hand', cursive, Georgia, serif;
  font-size: 1.1rem;
  line-height: 34px;
  color: var(--ink);
  caret-color: var(--accent);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.note-body::placeholder { color: var(--muted); opacity: 0.6; }

.page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid #e2d8c2;
  color: var(--muted);
  font-family: 'Outfit', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-size: 0.82rem;
}
.status { color: #0a84ff; font-weight: 500; }

.hint {
  text-align: center;
  padding: 14px;
  color: var(--fg-muted);
  font-size: 0.85rem;
  font-family: 'Outfit', -apple-system, 'Segoe UI', system-ui, sans-serif;
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal.hidden { display: none; }

.modal-content {
  background: rgba(30, 30, 34, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  color: var(--fg);
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.modal-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0.1px;
}
.modal-subtitle {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--fg-muted);
  margin-left: 8px;
}

.empty {
  padding: 40px 22px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 0.95rem;
  font-family: 'Outfit', -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.empty.hidden { display: none; }

.notes-list {
  list-style: none;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.note-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  font-family: 'Outfit', -apple-system, 'Segoe UI', system-ui, sans-serif;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}
.note-item:hover { border-color: var(--accent); background: rgba(10,132,255,0.14); }
.note-item:active { transform: scale(0.99); }

.note-item .note-meta { overflow: hidden; }
.note-item .note-title {
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-item .note-time {
  color: var(--fg-muted);
  font-size: 0.76rem;
  font-weight: 400;
  margin-top: 3px;
}

.note-item .trash {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  padding: 0;
}
.note-item .trash:hover {
  color: #ff6b6b;
  background: rgba(255,107,107,0.14);
  border-color: rgba(255,107,107,0.4);
}
.note-item .trash svg { width: 15px; height: 15px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(28, 28, 32, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  color: var(--fg);
  padding: 12px 22px;
  border-radius: 30px;
  border: 1px solid var(--glass-border);
  font-family: 'Outfit', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-size: 0.9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
/* ---------- Splash screen ---------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(10, 132, 255, 0.18), transparent 60%),
    radial-gradient(1000px 700px at 110% 110%, rgba(175, 82, 222, 0.12), transparent 55%),
    #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.splash.out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.splash-logo {
  filter: drop-shadow(0 4px 20px rgba(10,132,255,0.5));
  animation: logoIn 0.6s ease both;
}
.splash-title {
  font-family: 'Outfit', -apple-system, sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: #f5f5f7;
  letter-spacing: 0.4px;
  animation: logoIn 0.6s 0.1s ease both;
}
.splash-bar-track {
  width: 140px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  animation: logoIn 0.6s 0.2s ease both;
}
.splash-bar-fill {
  width: 0%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #4da3ff, #0a84ff);
  box-shadow: 0 0 12px rgba(10,132,255,0.6);
  transition: width 0.35s ease;
}
@keyframes logoIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
  .page { padding: 36px 20px 18px 34px; }
  .note-body { padding-left: 24px; }
  .notebook { background-position: 20px 0; }
  .notebook::after { background-position: 0 6px; }
  .notebook::before { top: 6px; }
  .actions { justify-content: flex-start; }
}