:root {
      /* Color variables remain the same */
      --color-default-bg: #e9f5e9;
      --color-default-border: #c8e6c9;
      --color-default-text: #1b5e20;
      --color-red-bg: #ffebee;
      --color-red-border: #ffcdd2;
      --color-red-text: #c62828;
      --color-blue-bg: #e3f2fd;
      --color-blue-border: #bbdefb;
      --color-blue-text: #1565c0;
      --color-green-bg: #e8f5e9;
      --color-green-border: #c8e6c9;
      --color-green-text: #2e7d32;
      --color-yellow-bg: #fffde7;
      --color-yellow-border: #fff9c4;
      --color-yellow-text: #f9a825;
      --color-purple-bg: #f3e5f5;
      --color-purple-border: #e1bee7;
      --color-purple-text: #6a1b9a;
      --color-orange-bg: #fff3e0;
      --color-orange-border: #ffe0b2;
      --color-orange-text: #ef6c00;
      --color-teal-bg: #e0f2f1;
      --color-teal-border: #b2dfdb;
      --color-teal-text: #00695c;
      --color-pink-bg: #fce4ec;
      --color-pink-border: #f8bbd0;
      --color-pink-text: #ad1457;
      --color-gray-bg: #f5f5f5;
      --color-gray-border: #e0e0e0;
      --color-gray-text: #424242;

      --primary-color: #4CAF50; /* Keeping green theme for now */
      --primary-dark: #388E3C;
      --sidebar-bg: #f1f1f1;
      --sidebar-width: 230px;
      --text-color: #333;
      --light-text-color: #666;
      --border-color: #ddd;
      --modal-overlay-color: rgba(0,0,0,0.6);
    }

    body {
      font-family: 'Vazirmatn', sans-serif;
      margin: 0;
      background-color: #f8f8f8;
      color: var(--text-color);
    }

    .container {
      display: flex;
      min-height: 100vh;
    }

    /* Sidebar Styles */
    .sidebar {
      width: var(--sidebar-width);
      background-color: var(--sidebar-bg);
      padding: 20px;
      border-left: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      height: 100vh;
      position: sticky;
      top: 0;
      overflow-y: auto;
    }

    .sidebar h2, .sidebar h3 {
      color: var(--primary-dark);
      margin-top: 0;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border-color);
      font-size: 1.2em;
    }
    .sidebar h3 {
        margin-top: 25px;
        font-size: 1.1em;
    }

    .sidebar nav ul, #sidebar-tags-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .sidebar nav li a, #sidebar-tags-list li a {
      display: block;
      padding: 10px 15px;
      color: var(--text-color);
      text-decoration: none;
      border-radius: 4px;
      margin-bottom: 5px;
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    .sidebar nav li a i, #sidebar-tags-list li a i {
        margin-left: 8px;
        width: 1.2em;
        text-align: center;
    }


    .sidebar nav li a:hover, #sidebar-tags-list li a:hover {
      background-color: #e0e0e0;
    }

    .sidebar nav li a.active {
      background-color: var(--primary-color);
      color: white;
      font-weight: bold;
    }
    #sidebar-tags-list li a.active {
        background-color: var(--primary-dark);
        color: white;
    }

    #sidebar-tags-list small {
        color: var(--light-text-color);
        padding: 10px 15px;
        display: block;
    }


    /* Main Content Styles */
    .main-content {
      flex-grow: 1;
      padding: 30px;
      display: flex;
      flex-direction: column;
    }

    h1 {
      text-align: center;
      color: var(--primary-dark);
      margin-bottom: 30px;
      font-size: 2em;
    }

    h2 {
      text-align: center;
      color: var(--primary-color);
    }
    /* Changed ID */
    #note-list-title {
        margin-top: 30px;
        margin-bottom: 20px;
    }

    /* Changed ID */
    #add-note-section {
      background-color: #fff;
      padding: 25px;
      margin-bottom: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
     /* Changed ID */
     #add-note-section h2 {
         text-align: right;
         font-size: 1.3em;
         margin-bottom: 20px;
         color: var(--primary-dark);
     }
      /* Changed ID */
     #add-note-section h2 i {
         margin-left: 8px;
     }


    .form-group {
      margin-bottom: 15px;
    }

    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

    .form-group input[type="text"],
    .form-group input[type="url"],
    .form-group textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      box-sizing: border-box;
      font-family: inherit;
    }

     .form-group small {
        font-size: 0.8em;
        color: var(--light-text-color);
        display: block;
        margin-top: 4px;
     }

    button[type="submit"] {
      background-color: var(--primary-color);
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      font-family: inherit;
      transition: background-color 0.2s ease;
    }
    button[type="submit"] i {
        margin-left: 6px;
    }

    button[type="submit"]:hover {
      background-color: var(--primary-dark);
    }

    hr {
      border: 0;
      height: 1px;
      background: var(--border-color);
      margin: 30px 0;
    }

    /* Color Palette Styles */
    #color-palette {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    #color-palette input[type="radio"] {
      display: none;
    }

    #color-palette .color-swatch {
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }

    #color-palette input[type="radio"]:checked + .color-swatch {
      border-color: #555;
      transform: scale(1.1);
    }

    .color-swatch.default { background-color: var(--color-default-bg); border: 1px dashed #ccc; }
    .color-swatch.red { background-color: var(--color-red-bg); }
    .color-swatch.blue { background-color: var(--color-blue-bg); }
    .color-swatch.green { background-color: var(--color-green-bg); }
    .color-swatch.yellow { background-color: var(--color-yellow-bg); }
    .color-swatch.purple { background-color: var(--color-purple-bg); }
    .color-swatch.orange { background-color: var(--color-orange-bg); }
    .color-swatch.teal { background-color: var(--color-teal-bg); }
    .color-swatch.pink { background-color: var(--color-pink-bg); }
    .color-swatch.gray { background-color: var(--color-gray-bg); }


    /* Note List and Card Styles */
    /* Changed ID */
    #note-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      flex-grow: 1;
      padding-bottom: 20px;
    }

    /* Changed Class Name */
    .note-card {
      border-radius: 6px;
      padding: 15px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      overflow: hidden;
      transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
      display: flex;
      flex-direction: column;
      position: relative;
      background-color: var(--color-default-bg);
      border: 1px solid var(--color-default-border);
    }

    /* Apply specific color styles */
    .note-card.color-red { background-color: var(--color-red-bg); border-color: var(--color-red-border); }
    .note-card.color-blue { background-color: var(--color-blue-bg); border-color: var(--color-blue-border); }
    .note-card.color-green { background-color: var(--color-green-bg); border-color: var(--color-green-border); }
    .note-card.color-yellow { background-color: var(--color-yellow-bg); border-color: var(--color-yellow-border); }
    .note-card.color-purple { background-color: var(--color-purple-bg); border-color: var(--color-purple-border); }
    .note-card.color-orange { background-color: var(--color-orange-bg); border-color: var(--color-orange-border); }
    .note-card.color-teal { background-color: var(--color-teal-bg); border-color: var(--color-teal-border); }
    .note-card.color-pink { background-color: var(--color-pink-bg); border-color: var(--color-pink-border); }
    .note-card.color-gray { background-color: var(--color-gray-bg); border-color: var(--color-gray-border); }


    .note-card:not(.trashed):hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .note-card .card-content {
        flex-grow: 1;
        cursor: pointer;
    }


    .note-card img.main-image {
      max-width: 100%;
      height: 150px;
      object-fit: cover;
      display: block;
      margin-bottom: 10px;
      border-radius: 4px;
      margin-left: auto;
      margin-right: auto;
    }

    .note-card h3 {
      margin-top: 0;
      margin-bottom: 10px;
      font-size: 1.1em;
      color: var(--color-default-text);
    }
    .note-card.color-red h3 { color: var(--color-red-text); }
    .note-card.color-blue h3 { color: var(--color-blue-text); }
    .note-card.color-green h3 { color: var(--color-green-text); }
    .note-card.color-yellow h3 { color: var(--color-yellow-text); }
    .note-card.color-purple h3 { color: var(--color-purple-text); }
    .note-card.color-orange h3 { color: var(--color-orange-text); }
    .note-card.color-teal h3 { color: var(--color-teal-text); }
    .note-card.color-pink h3 { color: var(--color-pink-text); }
    .note-card.color-gray h3 { color: var(--color-gray-text); }


    /* Changed Class Name */
    .note-card .content-preview {
      margin-bottom: 10px;
      font-size: 0.9em;
      flex-grow: 1;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      white-space: normal;
      word-wrap: break-word;
      color: var(--light-text-color);
    }
     .note-card .content-preview img,
     .note-card .content-preview a {
        display: none;
    }

    /* Changed Class Name */
    .note-tags {
        margin-top: auto;
        padding-top: 10px;
    }

    .note-tags span {
      background-color: rgba(0, 0, 0, 0.08);
      color: var(--light-text-color);
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 0.8em;
      margin-left: 5px;
      display: inline-block;
      margin-bottom: 5px;
    }
    /* Style tags based on card color */
    .note-card.color-red .note-tags span { background-color: #ffcdd2; color: var(--color-red-text); }
    .note-card.color-blue .note-tags span { background-color: #bbdefb; color: var(--color-blue-text); }
    .note-card.color-green .note-tags span { background-color: #c8e6c9; color: var(--color-green-text); }
    .note-card.color-yellow .note-tags span { background-color: #fff9c4; color: var(--color-yellow-text); }
    .note-card.color-purple .note-tags span { background-color: #e1bee7; color: var(--color-purple-text); }
    .note-card.color-orange .note-tags span { background-color: #ffe0b2; color: var(--color-orange-text); }
    .note-card.color-teal .note-tags span { background-color: #b2dfdb; color: var(--color-teal-text); }
    .note-card.color-pink .note-tags span { background-color: #f8bbd0; color: var(--color-pink-text); }
    .note-card.color-gray .note-tags span { background-color: #e0e0e0; color: var(--color-gray-text); }


    /* Card Action Buttons */
    .card-actions {
      position: absolute;
      top: 8px;
      left: 8px;
      display: flex;
      gap: 5px;
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
      z-index: 1;
    }

    .note-card:hover .card-actions {
      opacity: 1;
    }
    .note-card.trashed .card-actions {
        opacity: 1;
        position: static;
        margin-top: 15px;
        justify-content: center;
    }


    .card-actions button {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.1);
      color: var(--text-color);
      border-radius: 50%;
      width: 30px;
      height: 30px;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: background-color 0.2s ease, color 0.2s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .card-actions button:hover {
      background: white;
      border-color: rgba(0, 0, 0, 0.2);
    }

    .card-actions button.favorite-btn.active {
      color: #e91e63;
      background-color: #fce4ec;
      border-color: #f8bbd0;
    }
    .card-actions button.delete-btn:hover,
    .card-actions button.delete-perm-btn:hover {
        background-color: #ffebee;
        color: #d32f2f;
        border-color: #ffcdd2;
    }
     .card-actions button.restore-btn:hover {
        background-color: #e8f5e9;
        color: #388e3c;
        border-color: #c8e6c9;
    }


    /* Trashed Card Styles */
    .note-card.trashed {
      opacity: 0.7;
      background-color: #eee !important;
      border-color: #ccc !important;
      cursor: default;
    }
    .note-card.trashed .card-content {
        cursor: default;
    }
    .note-card.trashed h3 {
        color: #777 !important;
        text-decoration: line-through;
    }
    .note-card.trashed .content-preview,
    .note-card.trashed .note-tags,
    .note-card.trashed img.main-image {
        opacity: 0.6;
    }


    /* Modal Styles */
    /* Changed ID */
    #note-modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: var(--modal-overlay-color);
      padding-top: 60px;
    }

    .modal-content {
      background-color: var(--color-default-bg); /* Default background */
      margin: 5% auto;
      padding: 30px;
      border: 1px solid #888;
      width: 80%;
      max-width: 700px;
      border-radius: 8px;
      position: relative;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      animation-name: animatetop;
      animation-duration: 0.4s;
      transition: background-color 0.3s ease;
    }
    /* Modal color variants */
    .modal-content.color-red { background-color: var(--color-red-bg); }
    .modal-content.color-blue { background-color: var(--color-blue-bg); }
    .modal-content.color-green { background-color: var(--color-green-bg); }
    .modal-content.color-yellow { background-color: var(--color-yellow-bg); }
    .modal-content.color-purple { background-color: var(--color-purple-bg); }
    .modal-content.color-orange { background-color: var(--color-orange-bg); }
    .modal-content.color-teal { background-color: var(--color-teal-bg); }
    .modal-content.color-pink { background-color: var(--color-pink-bg); }
    .modal-content.color-gray { background-color: var(--color-gray-bg); }


    @keyframes animatetop {
      from {top: -300px; opacity: 0}
      to {top: 0; opacity: 1}
    }

    .close-button {
      color: #aaa;
      position: absolute;
      left: 25px;
      top: 10px;
      font-size: 28px;
      font-weight: bold;
      z-index: 1;
    }

    .close-button:hover,
    .close-button:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    /* Changed ID */
    #modal-note-image {
        max-width: 100%;
        height: auto;
        max-height: 300px;
        display: block;
        margin: 15px auto; /* Center image */
        border-radius: 5px;
    }

     /* Changed ID */
     #modal-note-content {
        white-space: normal;
        word-wrap: break-word;
        max-height: 50vh;
        overflow-y: auto;
        background-color: transparent;
        padding: 15px;
        border-radius: 4px;
        border: 1px solid rgba(0,0,0,0.1);
        margin-top: 5px;
        line-height: 1.6;
     }

     /* Styles for content inside modal */
     #modal-note-content img {
         max-width: 90%;
         height: auto;
         display: block;
         margin: 10px auto;
         border-radius: 4px;
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
     #modal-note-content a {
         color: var(--primary-dark);
         text-decoration: none;
         font-weight: bold;
     }
     #modal-note-content a:hover {
         text-decoration: underline;
     }
     #modal-note-content,
     #modal-note-content p,
     #modal-note-content li,
     #modal-note-content blockquote {
         color: var(--text-color);
     }

     #modal-note-content h1,
     #modal-note-content h2,
     #modal-note-content h3 {
         margin-top: 1.2em;
         margin-bottom: 0.6em;
         color: var(--color-default-text); /* Default */
     }
     .modal-content.color-red #modal-note-content h1,
     .modal-content.color-red #modal-note-content h2,
     .modal-content.color-red #modal-note-content h3 { color: var(--color-red-text); }
     .modal-content.color-blue #modal-note-content h1,
     .modal-content.color-blue #modal-note-content h2,
     .modal-content.color-blue #modal-note-content h3 { color: var(--color-blue-text); }
     .modal-content.color-green #modal-note-content h1,
     .modal-content.color-green #modal-note-content h2,
     .modal-content.color-green #modal-note-content h3 { color: var(--color-green-text); }
     .modal-content.color-yellow #modal-note-content h1,
     .modal-content.color-yellow #modal-note-content h2,
     .modal-content.color-yellow #modal-note-content h3 { color: var(--color-yellow-text); }
     .modal-content.color-purple #modal-note-content h1,
     .modal-content.color-purple #modal-note-content h2,
     .modal-content.color-purple #modal-note-content h3 { color: var(--color-purple-text); }
     .modal-content.color-orange #modal-note-content h1,
     .modal-content.color-orange #modal-note-content h2,
     .modal-content.color-orange #modal-note-content h3 { color: var(--color-orange-text); }
     .modal-content.color-teal #modal-note-content h1,
     .modal-content.color-teal #modal-note-content h2,
     .modal-content.color-teal #modal-note-content h3 { color: var(--color-teal-text); }
     .modal-content.color-pink #modal-note-content h1,
     .modal-content.color-pink #modal-note-content h2,
     .modal-content.color-pink #modal-note-content h3 { color: var(--color-pink-text); }
     .modal-content.color-gray #modal-note-content h1,
     .modal-content.color-gray #modal-note-content h2,
     .modal-content.color-gray #modal-note-content h3 { color: var(--color-gray-text); }


     #modal-note-content ul,
     #modal-note-content ol {
         padding-right: 20px;
         margin-bottom: 1em;
     }
     #modal-note-content li {
         margin-bottom: 0.4em;
     }
     #modal-note-content code {
        background-color: rgba(0,0,0,0.08);
        padding: 2px 4px;
        border-radius: 3px;
        font-family: monospace;
        color: var(--text-color);
     }
     #modal-note-content pre {
        background-color: rgba(0,0,0,0.08);
        padding: 10px;
        border-radius: 4px;
        overflow-x: auto;
     }
     #modal-note-content blockquote {
        border-right: 3px solid rgba(0,0,0,0.15);
        padding-right: 10px;
        margin-right: 0;
        margin-left: 0;
        color: var(--light-text-color);
     }


    /* Changed ID */
    #modal-note-tags {
        margin-top: 15px;
    }

    #modal-note-tags span {
        background-color: rgba(0, 0, 0, 0.1);
        color: var(--text-color);
        padding: 4px 10px;
        border-radius: 14px;
        font-size: 0.9em;
        margin-left: 8px;
        display: inline-block;
        margin-bottom: 5px;
    }
    /* Style modal tags based on modal color */
    .modal-content.color-red #modal-note-tags span { background-color: #ffcdd2; color: var(--color-red-text); }
    .modal-content.color-blue #modal-note-tags span { background-color: #bbdefb; color: var(--color-blue-text); }
    .modal-content.color-green #modal-note-tags span { background-color: #c8e6c9; color: var(--color-green-text); }
    .modal-content.color-yellow #modal-note-tags span { background-color: #fff9c4; color: var(--color-yellow-text); }
    .modal-content.color-purple #modal-note-tags span { background-color: #e1bee7; color: var(--color-purple-text); }
    .modal-content.color-orange #modal-note-tags span { background-color: #ffe0b2; color: var(--color-orange-text); }
    .modal-content.color-teal #modal-note-tags span { background-color: #b2dfdb; color: var(--color-teal-text); }
    .modal-content.color-pink #modal-note-tags span { background-color: #f8bbd0; color: var(--color-pink-text); }
    .modal-content.color-gray #modal-note-tags span { background-color: #e0e0e0; color: var(--color-gray-text); }

    /* Footer Styles */
    footer {
      margin-top: auto;
      padding: 15px 0;
      text-align: center;
      font-size: 0.9em;
      color: var(--light-text-color);
      border-top: 1px solid var(--border-color);
    }