/* components/notes.css */

/* Base container */
.note, .note-section {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-left: 5px solid #2c3e50;
  border-radius: var(--radius-md);
  padding: 24px;
  margin: 20px 0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  font-family: var(--font-system);
}

/* Header */
.note__header, .note-header { display: flex; align-items: center; margin-bottom: 20px; gap: 12px; }
.note__icon, .note-icon { font-size: 28px; line-height: 1; }
.note__title, .note-header h3 { margin: 0; color: #2c3e50; font-size: 20px; font-weight: 600; }

/* Content */
.note__content, .note-content { color: #34495e; line-height: 1.6; }
.note__intro, .note-intro { margin: 0 0 16px 0; font-size: 15px; font-weight: 500; }

/* Panels */
.note__panel, .note-requirement, .note-important, .note-mobile {
  background: rgba(255,255,255,0.7); padding: 14px 16px; margin: 12px 0;
  border-radius: 6px; border-left: 3px solid #3498db;
}
.note__panel--danger, .note-important { border-left-color: #e74c3c; background: rgba(231,76,60,0.05); }
.note__panel--success, .note-mobile   { border-left-color: #27ae60; background: rgba(39,174,96,0.05); }

/* Text inside panels */
.note__panel strong, .note-requirement strong, .note-important strong, .note-mobile strong {
  color: #2c3e50; display: block; margin-bottom: 8px; font-size: 14px; /* fixed '14 px' */
}
.note__panel p, .note-requirement p, .note-important p, .note-mobile p { margin: 0; font-size: 14px; }

/* Lists */
.note__item-list, .mobile-settings { margin: 8px 0 0 0; padding-left: 24px; list-style-type: none; }
.note__item, .mobile-settings li { padding: 6px 0; font-size: 14px; position: relative; }
.note__item::before, .mobile-settings li:before { content: "✓"; position: absolute; left: -18px; color: #27ae60; font-weight: bold; }

/* Dark mode tune-up for notes (optional) */
:root[data-theme="dark"] .note, 
@media (prefers-color-scheme: dark) {
  .note, .note-section {
    background: linear-gradient(135deg, #1b2330 0%, #0f141b 100%);
    border-left-color: #90a4b8;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  }
}