    body{font-family:'Vazirmatn',sans-serif;background:#fff;margin:0;padding:20px}
    main {  width: 100%;  max-width: 720px;  margin: 0 auto;}
    .langs{display:flex;gap:16px;justify-content:flex-end;margin-bottom:20px}
    .langs a{padding:6px 10px;text-decoration:none;color:#555;font-weight:600}
    .langs a.active{color:#000;text-decoration:underline}
    h1 {
            color: white;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            font-size: 28px;
        }
        
        .show-button {
            display: inline-block;
            background: linear-gradient(to right, #ff512f, #dd2476);
            color: white;
            padding: 16px 40px;
            font-size: 18px;
            font-weight: bold;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.4s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .show-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }
        
        .hidden-creature {
            height: 0;
            overflow: hidden;
            opacity: 0;
            transition: all 0.5s ease;
            margin-top: 0;
            background: linear-gradient(135deg, #8E2DE2, #4A00E0);
            border-radius: 15px;
            color: white;
        }
        
        #toggle:checked ~ .hidden-creature {
            height: auto;
            opacity: 1;
            margin: 10px;
        }
        
        .creature-image {
            width: 150px;
            height: 150px;
            margin: 20px auto;
            background: linear-gradient(135deg, #f46b45, #eea849);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 80px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            animation: pulse 2s infinite;
        }
        
        .creature-content {
            padding: 20px;
        }
        
        .creature-content h2 {
            margin-bottom: 15px;
            color: #ffcc00;
            font-size: 24px;
        }
        
        .creature-content p {
            line-height: 1.8;
            margin-bottom: 20px;
            font-size: 16px;
        }
        
        .close-button {
            display: inline-block;
            background: linear-gradient(to right, #ff5e62, #ff9966);
            color: white;
            padding: 12px 30px;
            font-size: 16px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        
        .close-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        }
        
        #toggle {
            display: none;
        }
        
        .close-label {
            display: inline-block;
            margin-top: 20px;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        @media (max-width: 600px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 24px;
            }
            
            .show-button {
                padding: 14px 30px;
                font-size: 16px;
            }
            
            #toggle:checked ~ .hidden-creature {
                height: 450px;
            }
        }

    .level1,.level2{cursor:pointer}
    .level1{display: block ruby;background:#e91e63;color:#fff;padding:26px;font-size:28px;border-radius: 12px 12px 0px 0px;font-weight:800;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
    .level2{background:#009874;color:#fff;padding:12px 16px;font-size:20px;font-weight:700;margin:6px 0;display:flex;justify-content:space-between;align-items:center}
    .level3 { background: #f2f2f2;padding: 10px 15px;margin: 5px 0;border-radius: 6px;}
    .level1-h1 {  font-size: 24px;  color: #FFF;}
    .item{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
    .thumbnail{width:80px;height:80px;object-fit:cover;border-radius:6px;flex-shrink:0}
    .item-info{flex:1}
    .item-info strong{font-size:18px;display:block;margin-bottom:4px}
    .item-info p{margin:4px 0;color:#444;font-size:14px}
    .price{font-weight:700;color:#000;margin-top:6px}
    .actions{margin-top:6px;font-size:14px;color:#f5f5f5;}
    .actions span{cursor:pointer;padding:0px}
    .actions span:hover{color:#e91e63}
    .hidden{display:none}
    .delete-level1, .edit-level1, .add-level1,
    .delete-level2, .edit-level2, .add-level2 {
      background:#ffe6e6;
      padding:10px;
      margin:6px 0;
      border-radius:6px;
      border:1px solid #ff9999;
      position:relative;
    }
    .close-btn {
      position: absolute;
      left: 10px;
      top: 10px;
      cursor: pointer;
      font-weight: bold;
      font-size: 18px;
      color: #e91e63;
    }
.form-main {
  background-color: #5e49722e; /* رنگ پس‌زمینه مشابه تصویر */
  padding: 20px;
  border-radius: 8px;
  font-family: vazirmatn;
  margin:2%;
}

.form-main h3 {
  margin-bottom: 15px;
}

/* گروه فیلدها */
.form-group {
  margin-bottom: 15px;
}

/* استایل input */
.form-group input {
  width: 94%;
  padding: 2% 3%;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  color: #333;
}

/* placeholder کم‌رنگ */
.form-group input::placeholder {
  color: #aaa;
  transition: opacity 0.3s ease;
}

/* وقتی input فوکوس شد، placeholder ناپدید */
.form-group input:focus::placeholder {
  opacity: 0;
}

/* افکت فوکوس */
.form-group input:focus {
  border-color: #007bff;
  box-shadow: 0 0 6px rgba(0, 123, 255, 0.3);
  color: #000;
}

/* دکمه‌ها */
.form-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-submit {
  background-color: #007bff;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-submit:hover {
  background-color: #0056b3;
}

.btn-cancel {
  background-color: #ddd;
  color: #333;
  padding: 10px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-cancel:hover {
  background-color: #bbb;
}

.delete-level3 {
    background: #ffe6e6;
    padding: 15px;
    margin: 10px 0;
    border-radius: 6px;
    border: 1px solid #ff9999;
    position: relative;
}


/* پیام‌ها */
.message {
  position: relative;
  padding: 15px 40px 15px 15px;
  margin-bottom: 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: fadeIn 0.5s ease;
}
.message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.message.hidden {
  display: none;
}
#message-close {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  margin-left: 15px;
  color: inherit;
}
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(-10px);}
  to {opacity: 1; transform: translateY(0);}
}

.level1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e91e63;
  color: #fff;
  padding: 20px;
  font-size: 24px;
  border-radius: 12px 12px 0 0;
  font-weight: 800;
  margin-bottom: 6px;
}
.level2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-weight: 800;
}
.level2-h1 {
  flex: 1;
  text-align: right;
  font-size: 18px;
  padding: 0px 10px 0px 0px;
}

.up-down-class {
  display: flex;
  gap: 10px;
  font-size: 16px;
}

.level1-h1 {
  flex: 1;
  text-align: right;
  font-size: 24px;
  padding: 0px 10px 0px 0px;
}

.action3 {
  display: flex;
  gap: 10px;
  font-size: 16px;
}
.actions-sub2 { color: #202322;}
strong {  flex: 1;  padding: 0px 10px;  font-size: 18px;  font-weight: normal;}
.tit {  display: flex;margin: 5px 0px 15px 0px;}
.level3-h3 {  flex: 1;}
