* {
  box-sizing: border-box;
}

html, body, #root {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

/* Liquid Background with Purple Theme */
.liquid-bg {
  background: linear-gradient(135deg, #FAF8FF 0%, #F5F0FF 50%, #EDE5FF 100%);
  position: relative;
  overflow: hidden;
}

/* Blob container */
.blob-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Animated Lilac Blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  will-change: transform;
}

.blob-1 {
  width: 340px; height: 340px;
  background: radial-gradient(circle at 30% 30%, #DDD6FE 0%, #C4B5FD 50%, #DDD6FE 100%);
  top: -8%; left: -6%;
  animation: float1 26s ease-in-out infinite;
}
.blob-2 {
  width: 280px; height: 280px;
  background: radial-gradient(circle at 70% 30%, #E9E5FF 0%, #DDD6FE 50%, #D0C7FE 100%);
  top: 5%; right: 15%;
  animation: float2 30s ease-in-out infinite;
}
.blob-3 {
  width: 260px; height: 260px;
  background: radial-gradient(circle at 50% 50%, #D0C7FE 0%, #DDD6FE 50%, #E5DEFF 100%);
  bottom: -6%; left: 30%;
  animation: float3 23s ease-in-out infinite;
}
.blob-4 {
  width: 220px; height: 220px;
  background: radial-gradient(circle at 40% 60%, #E5DEFF 0%, #DDD6FE 50%, #D0C7FE 100%);
  bottom: 25%; right: -4%;
  animation: float4 28s ease-in-out infinite;
}
.blob-5 {
  width: 200px; height: 200px;
  background: radial-gradient(circle at 60% 40%, #D0C7FE 0%, #C4B5FD 60%, #DDD6FE 100%);
  top: 45%; left: 8%;
  animation: float5 21s ease-in-out infinite;
}
.blob-6 {
  width: 240px; height: 240px;
  background: radial-gradient(circle at 30% 70%, #DDD6FE 0%, #D0C7FE 50%, #C4B5FD 100%);
  top: 15%; left: 45%;
  animation: float6 25s ease-in-out infinite;
}
.blob-7 {
  width: 180px; height: 180px;
  background: radial-gradient(circle at 50% 30%, #E5DEFF 0%, #DDD6FE 50%, #D0C7FE 100%);
  bottom: 10%; right: 30%;
  animation: float7 27s ease-in-out infinite;
}

@keyframes float1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(80px, 60px) scale(1.08); }
  50% { transform: translate(40px, 120px) scale(0.95); }
  75% { transform: translate(-40px, 80px) scale(1.04); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-70px, 80px) scale(1.05); }
  50% { transform: translate(-100px, 40px) scale(1.08); }
  75% { transform: translate(-50px, -40px) scale(0.95); }
}
@keyframes float3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(60px, -50px) scale(1.06); }
  50% { transform: translate(120px, -80px) scale(0.93); }
  75% { transform: translate(40px, -30px) scale(1.03); }
}
@keyframes float4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-60px, -70px) scale(0.95); }
  50% { transform: translate(-30px, 50px) scale(1.08); }
  75% { transform: translate(40px, -20px) scale(1.02); }
}
@keyframes float5 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(50px, -40px) scale(1.1); }
  50% { transform: translate(70px, 30px) scale(0.92); }
  75% { transform: translate(20px, 60px) scale(1.04); }
}
@keyframes float6 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-50px, -40px) scale(1.06); }
  50% { transform: translate(-30px, -80px) scale(0.94); }
  75% { transform: translate(25px, -50px) scale(1.07); }
}
@keyframes float7 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-35px, 50px) scale(0.94); }
  50% { transform: translate(45px, 40px) scale(1.1); }
  75% { transform: translate(25px, -25px) scale(1.02); }
}

/* Header mini-blobs */
.header-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.3) 0%, rgba(221,214,254,0.15) 100%);
  pointer-events: none;
  will-change: transform;
}

.header-blob-1 { width: 12px; height: 12px; top: 20%; left: 8%; animation: hblob1 6s ease-in-out infinite; }
.header-blob-2 { width: 16px; height: 16px; top: 60%; left: 25%; animation: hblob2 8s ease-in-out infinite; }
.header-blob-3 { width: 10px; height: 10px; top: 30%; left: 50%; animation: hblob3 5s ease-in-out infinite; }
.header-blob-4 { width: 14px; height: 14px; top: 70%; left: 72%; animation: hblob4 7s ease-in-out infinite; }
.header-blob-5 { width: 9px; height: 9px; top: 40%; left: 90%; animation: hblob5 6.5s ease-in-out infinite; }

@keyframes hblob1 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(25px,8px)} 66%{transform:translate(-15px,-6px)} }
@keyframes hblob2 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(-20px,-10px)} 66%{transform:translate(18px,5px)} }
@keyframes hblob3 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(15px,12px)} 66%{transform:translate(-22px,-4px)} }
@keyframes hblob4 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(-18px,7px)} 66%{transform:translate(12px,-10px)} }
@keyframes hblob5 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(20px,-8px)} 66%{transform:translate(-10px,12px)} }

/* Purple Banner */
.purple-banner {
  background: linear-gradient(90deg, #EDE9FE 0%, #DDD6FE 50%, #EDE9FE 100%);
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  position: relative;
  overflow: hidden;
}

/* Attribution Button */
.attribution-btn {
  border: 1.5px solid rgba(139, 92, 246, 0.25);
  transition: all 0.2s ease;
}
.attribution-btn:hover {
  border-color: #8B5CF6;
  background: rgba(139, 92, 246, 0.08);
}

/* RIMICO Home Button */
.rimico-home-btn {
  background: rgba(139, 92, 246, 0.1);
  border: 1.5px solid rgba(139, 92, 246, 0.25);
  text-decoration: none;
  transition: all 0.2s ease;
}
.rimico-home-btn:hover {
  background: rgba(139, 92, 246, 0.18);
  border-color: #8B5CF6;
  transform: scale(1.03);
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.15);
}

/* Toolbar */
.toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #6b7280;
  transition: all 0.15s ease;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.toolbar-btn:hover {
  background: rgba(139, 92, 246, 0.12);
  color: #8B5CF6;
}
.toolbar-btn.active {
  background: rgba(139, 92, 246, 0.18);
  color: #7C3AED;
}

/* Font selector */
.font-selector {
  outline: none;
  transition: all 0.15s ease;
}
.font-selector:focus {
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}

/* Editor content area */
.editor-content {
  min-height: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.editor-content:focus {
  outline: none;
  box-shadow: none;
}

.editor-content h1 {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: #1f2937;
  line-height: 1.3;
}

.editor-content h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: #374151;
  line-height: 1.35;
}

.editor-content p {
  margin-bottom: 0.5rem;
}

.editor-content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.editor-content ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.editor-content li {
  margin-bottom: 0.25rem;
}

.editor-content blockquote {
  border-left: 3px solid #C4B5FD;
  padding-left: 1rem;
  margin-left: 0;
  margin-bottom: 0.5rem;
  color: #6b7280;
  font-style: italic;
}

/* Title input */
.title-input {
  border: none;
  outline: none;
  background: transparent;
  caret-color: #7C3AED;
}
.title-input::placeholder {
  color: #d1d5db;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(139, 92, 246, 0.08);
  border-radius: 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #C4B5FD;
  border-radius: 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #8B5CF6;
}

/* Toast animation */
@keyframes toastIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(20px); opacity: 0; }
}

.toast-enter {
  animation: toastIn 0.25s ease-out forwards;
}
.toast-exit {
  animation: toastOut 0.2s ease-in forwards;
}

/* Focus States */
input:focus, button:focus, select:focus {
  outline: none;
}

/* Note item hover */
.note-item {
  transition: all 0.15s ease;
}

/* Delete confirmation modal */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}