:root {
  --bg: #0a0e14; --panel: #1e2635; --muted: #b0b8ca; --line: #374151;
  --text: #e5e7eb; --accent: #8b5cf6; --accent2: #34d399; --accent3: #2dd4bf;
  --shadow: 0 6px 16px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.1);
  --highlight: #8b5cf644; --radius: 10px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="light"] {
  --bg: #f9fafb; --panel: #fefefe; --muted: #6b7280; --line: #d1d5db;
  --text: #111827; --accent: #7c3aed; --accent2: #10b981; --accent3: #14b8a6;
  --highlight: #7c3aed44; --shadow: 0 6px 16px rgba(0,0,0,0.15), inset 0 1px 2px rgba(0,0,0,0.05);
}
* { box-sizing: border-box; }
html, body { 
  margin: 0; padding: 0; min-height: 100vh; 
  background: radial-gradient(circle at top left, var(--bg), color-mix(in srgb, var(--bg) 80%, var(--accent3) 20%)); 
  color: var(--text); 
  font: 400 clamp(13px, 3.5vw, 14px)/1.6 system-ui, -apple-system, sans-serif;
  overscroll-behavior: none; -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
  scroll-padding-top: 110px; /* Prevent header overlap */
  scroll-padding-bottom: 160px; /* Prevent footer overlap */
  overflow-y: auto; /* Ensure scrolling */
  scroll-behavior: smooth; /* Smooth scrolling */
}
.wrap { 
  max-width: 1280px; margin: 0 auto; padding: 100px 16px 180px; 
  min-height: calc(100vh - 280px); /* Space for header/footer */
}
header { 
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; 
  backdrop-filter: blur(16px); 
  background: color-mix(in srgb, var(--bg) 85%, transparent); 
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
}
header .bar { 
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; 
  min-height: 54px; max-width: 1280px; margin: 0 auto;
}
h1 { font-size: clamp(16px, 4vw, 18px); margin: 0 8px 0 0; letter-spacing: 0.5px; font-weight: 700; }
input[type="text"], textarea { 
  width: 100%; background: var(--panel); border: 1px solid var(--line); 
  color: var(--text); border-radius: var(--radius); padding: 8px 12px; 
  outline: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); transition: var(--transition);
  font-size: clamp(12px, 3.3vw, 13px); letter-spacing: 0.3px;
}
input[type="text"]:focus, textarea:focus { 
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--highlight), 0 0 10px var(--accent); 
  transform: scale(1.01); animation: glow 0.6s ease-in-out;
}
textarea { min-height: 120px; resize: vertical; font-family: inherit; }
.btn { 
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--accent2) 30%)); 
  border: none; color: #fff; 
  padding: 8px 14px; border-radius: var(--radius); cursor: pointer; 
  font-weight: 600; font-size: clamp(12px, 3.3vw, 13px); min-width: 48px; height: 34px; 
  position: relative; overflow: hidden; transition: var(--transition); letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2), inset 0 -1px 2px rgba(0,0,0,0.1);
}
.btn::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.35s;
}
.btn:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.btn:hover::before { left: 100%; }
.btn:active { transform: scale(0.98); animation: bounce 0.25s; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.grow { flex: 1; min-width: 120px; }
.card { 
  background: var(--panel); border: 1px solid var(--line); 
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
  animation: slideIn 0.3s ease-out; max-width: 100%; transition: var(--transition);
}
.card:hover { transform: scale(1.03); box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.grid { display: grid; gap: 32px; }
#notes { padding-bottom: 32px; } /* Prevent footer overlap */
@media(min-width: 960px) { 
  .cols { display: grid; grid-template-columns: 400px 1fr; gap: 48px; }
  .wrap { padding: 100px 20px 180px; }
  header .bar { padding: 10px 16px; }
}
@media(max-width: 959px) {
  .cols { display: flex; flex-direction: column; gap: 40px; }
  .wrap { padding: 100px 16px 200px; }
  header .bar { gap: 6px; padding: 6px 10px; }
  .row { justify-content: stretch; gap: 6px; }
  .btn, input[type="text"] { height: 32px; }
  textarea { min-height: 140px; }
  h1 { font-size: clamp(15px, 3.8vw, 17px); }
}
@media(max-width: 480px) {
  .wrap { padding: 100px 12px 200px; }
  .cols { gap: 32px; }
  .grid { gap: 28px; }
  .row { gap: 6px; }
  .btn, input[type="text"] { height: 30px; font-size: clamp(11px, 3.2vw, 12px); }
  textarea { min-height: 120px; }
  h1 { font-size: clamp(14px, 3.7vw, 16px); }
}
.muted { color: var(--muted); font-size: clamp(11px, 3.2vw, 12px); margin-bottom: 8px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; overflow-x: auto; }
.chip { 
  display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; 
  border-radius: 999px; border: 1px solid var(--line); 
  background: linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--panel) 85%, var(--accent3) 15%)); 
  cursor: pointer; font-size: clamp(11px, 3.2vw, 12px); transition: var(--transition);
  animation: fadeIn 0.3s ease-out; max-width: 100px; overflow-wrap: break-word; word-break: break-all;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.chip:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.05); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.suggestion { background: linear-gradient(135deg, var(--accent3), color-mix(in srgb, var(--accent3) 70%, var(--panel) 30%)); }
.chip.suggestion:hover { background: var(--accent3); color: #fff; }
.note { 
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; 
  background: var(--panel); transition: transform 0.3s, box-shadow 0.3s;
  animation: slideIn 0.3s ease-out; max-width: 100%;
}
.note:hover { transform: scale(1.03); box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.note .title { font-weight: 700; font-size: clamp(16px, 4vw, 18px); margin: 0 0 10px; }
.note .body { 
  white-space: pre-wrap; font-size: clamp(12px, 3.3vw, 13px); line-height: 1.6; 
  overflow-wrap: break-word; word-break: break-all; max-width: 100%;
}
.note .body p { margin: 0 0 12px; }
.note .body ul, .note .body ol { margin: 0 0 12px; padding-left: 20px; }
.note .body code { background: var(--line); padding: 3px 6px; border-radius: 6px; }
.note .body pre { background: var(--line); padding: 10px; border-radius: 8px; overflow-x: auto; }
.note .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; max-width: 100%; overflow-x: auto; }
.tag { 
  font-size: clamp(10px, 3vw, 11px); background: var(--panel); border: 1px solid var(--line); 
  padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: var(--transition);
  max-width: 90px; overflow-wrap: break-word; word-break: break-all; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.tag:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.05); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.danger { background: linear-gradient(135deg, #ef4444, #f87171); }
.danger:hover { background: #dc2626; }
.footer { 
  opacity: 0.9; text-align: center; padding: 16px; font-size: clamp(11px, 3.2vw, 12px); 
  position: fixed; bottom: 0; left: 0; right: 0; background: color-mix(in srgb, var(--bg) 85%, transparent); 
  border-top: 1px solid var(--line); z-index: 800; box-shadow: var(--shadow); backdrop-filter: blur(16px);
}
.footer a { color: var(--accent); text-decoration: none; font-weight: 500; }
.footer a:hover { text-decoration: underline; color: var(--accent2); }
.count { font-size: clamp(11px, 3.2vw, 12px); opacity: 0.9; font-weight: 500; }
.hl { 
  color: #fff; background: var(--accent); padding: 4px 10px; 
  border-radius: 6px; font-weight: 600; animation: pulse 1.6s infinite;
}
.theme-toggle { 
  background: none; border: none; padding: 8px; cursor: pointer; 
  font-size: clamp(16px, 4vw, 18px); color: var(--text); transition: var(--transition);
}
.theme-toggle:hover { transform: rotate(360deg); transition: transform 0.35s; }
.suggestions { position: relative; }
.suggestions-list { 
  position: absolute; top: calc(100% + 14px); left: 0; right: 0; z-index: 1400; 
  background: color-mix(in srgb, var(--panel) 90%, transparent); border: 1px solid var(--line); 
  border-radius: var(--radius); max-height: 120px; overflow-y: auto; padding: 8px; 
  box-shadow: var(--shadow); animation: slideDown 0.3s ease-out; max-width: 90vw; 
  pointer-events: auto; backdrop-filter: blur(12px);
}
.suggestions-list[style*="display: none"] { pointer-events: none; }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(15px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes glow {
  0% { box-shadow: 0 0 0 3px var(--highlight); }
  50% { box-shadow: 0 0 12px var(--accent); }
  100% { box-shadow: 0 0 0 3px var(--highlight); }
}
@keyframes bounce {
  0%, 100% { transform: scale(0.98); }
  50% { transform: scale(1.03); }
}