:root {
         --primary-color: #4361ee;
         --secondary-color: #3f37c9;
         --success-color: #4cc9f0;
         --text-color: #2b2d42;
         --light-gray: #f8f9fa;
         --medium-gray: #e9ecef;
         --dark-gray: #6c757d;
         --white: #ffffff;
         --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

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

     body {
         font-family: 'Inter', sans-serif;
         line-height: 1.6;
         color: var(--text-color);
         background-color: var(--light-gray);
         padding: 20px;
     }

     .container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 20px;
     }

     h1, h2, h3 {
         color: var(--primary-color);
         margin-bottom: 20px;
     }

     .card {
         background: var(--white);
         border-radius: 8px;
         box-shadow: var(--box-shadow);
         padding: 25px;
         margin-bottom: 30px;
     }

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

     label {
         display: block;
         margin-bottom: 8px;
         font-weight: 500;
         color: var(--text-color);
     }

     input[type="text"],
     input[type="url"],
     input[type="datetime-local"],
     textarea,
     select {
         width: 100%;
         padding: 12px 15px;
         border: 1px solid var(--medium-gray);
         border-radius: 6px;
         font-size: 16px;
         transition: border-color 0.3s;
     }

     input[type="text"]:focus,
     input[type="url"]:focus,
     input[type="datetime-local"]:focus,
     textarea:focus,
     select:focus {
         outline: none;
         border-color: var(--primary-color);
     }

     textarea {
         min-height: 120px;
         resize: vertical;
     }

     .btn {
         display: inline-block;
         background-color: var(--primary-color);
         color: var(--white);
         padding: 12px 24px;
         border: none;
         border-radius: 6px;
         cursor: pointer;
         font-size: 16px;
         font-weight: 500;
         text-align: center;
         transition: background-color 0.3s;
     }

     .btn:hover {
         background-color: var(--secondary-color);
     }

     .btn-small {
         padding: 8px 16px;
         font-size: 14px;
     }

     .preview-section {
         display: flex;
         flex-wrap: wrap;
         gap: 20px;
         margin-top: 30px;
     }

     .notification-preview {
         flex: 1;
         min-width: 300px;
     }

     .preview-card {
         background: var(--white);
         border-radius: 8px;
         box-shadow: var(--box-shadow);
         padding: 20px;
         margin-top: 10px;
     }

     .notification-image {
         width: 100%;
         height: 200px;
         object-fit: cover;
         border-radius: 6px;
         margin-bottom: 15px;
     }

     .notification-title {
         font-weight: 700;
         font-size: 20px;
         margin-bottom: 10px;
         color: #d63447;
     }

     .preview-card.news, .notification-item.news {
         border-left: 4px solid #28a745;
         background-color: #e6f4ea;
     }

     .preview-card.offer, .notification-item.offer {
         border-left: 4px solid #d63447;
         background-color: #fff8f8;
     }

     .preview-card.update, .notification-item.update {
         border-left: 4px solid #007bff;
         background-color: #e7f1ff;
     }

     .preview-card.alert, .notification-item.alert {
         border-left: 4px solid #ffc107;
         background-color: #fff3cd;
     }

     .notification-message {
         color: var(--dark-gray);
         margin-bottom: 15px;
     }

     .notification-url {
         color: var(--primary-color);
         text-decoration: none;
         display: inline-block;
         margin-top: 10px;
     }

     .notification-url:hover {
         text-decoration: underline;
     }

     .tabs {
         display: flex;
         border-bottom: 1px solid var(--medium-gray);
         margin-bottom: 20px;
     }

     .tab {
         padding: 10px 20px;
         cursor: pointer;
         border-bottom: 3px solid transparent;
     }

     .tab.active {
         border-bottom: 3px solid var(--primary-color);
         font-weight: 500;
     }

     .tab-content {
         display: none;
     }

     .tab-content.active {
         display: block;
     }

     .notification-list {
         margin-top: 20px;
     }

     .notification-item {
         border: 1px solid var(--medium-gray);
         border-radius: 6px;
         padding: 15px;
         margin-bottom: 15px;
         transition: transform 0.3s, box-shadow 0.3s;
     }

     .notification-item:hover {
         transform: translateY(-2px);
         box-shadow: var(--box-shadow);
     }

     .notification-item-title {
         font-weight: 600;
         margin-bottom: 5px;
     }

     .notification-item-date {
         font-size: 12px;
         color: var(--dark-gray);
         margin-bottom: 5px;
     }

     .notification-stats {
         display: flex;
         gap: 15px;
         font-size: 12px;
         color: var(--dark-gray);
         margin-bottom: 5px;
     }

     .notification-item img {
         max-width: 100px;
         max-height: 100px;
         object-fit: cover;
         border-radius: 4px;
         margin-right: 10px;
     }

     @media (max-width: 768px) {
         .preview-section {
             flex-direction: column;
         }
         
         .card {
             padding: 15px;
         }
     }

     .alert {
         padding: 15px;
         border-radius: 6px;
         margin-bottom: 20px;
         display: none;
     }

     .alert-success {
         background-color: #d4edda;
         color: #155724;
         border: 1px solid #c3e6cb;
     }

     .alert-error {
         background-color: #f8d7da;
         color: #721c24;
         border: 1px solid #f5c6cb;
     }