* {
   margin: 0;
   padding: 0;


 }

 body {
   background: linear-gradient(135deg, #1a2a6c, #2c3e50);
 }

 .container {
   box-sizing: border-box;
   color: #f5f5f5;
   width: 100%;
   max-width: 1400px;
   min-width: 1100px;
   margin: 20px auto;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .container * {
   box-sizing: border-box;
 }

 .container header {
   text-align: center;
   margin-bottom: 20px;
   animation: fadeIn 1s ease-out;
 }

 .container h1 {
   font-size: 2.6rem;
   margin-bottom: 15px;
   background: linear-gradient(90deg, #3498db, #2ecc71);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 .subtitle {
   font-size: 1.2rem;
   color: #bdc3c7;
   max-width: 90%;
   margin: 0 auto;
   line-height: 1.6;
 }

 .main-content {
   display: flex;
   gap: 20px;
 }

 .tool-section {
   flex: 4;
   background: rgba(30, 30, 46, 0.85);
   border-radius: 20px;
   padding: 35px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .examples-section {
   flex: 2;
   background: rgba(30, 30, 46, 0.85);
   border-radius: 20px;
   padding: 35px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   overflow: hidden;
 }

 .section-title {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 25px;
   font-size: 1.6rem;
   color: #2ecc71;
   padding-bottom: 12px;
   border-bottom: 2px solid rgba(46, 204, 113, 0.3);
 }

 .input-group {
   margin-bottom: 25px;
 }

 label {
   display: block;
   margin-bottom: 10px;
   font-size: 1.1rem;
   color: #ecf0f1;
 }

 textarea {
   width: 100%;
   height: 140px;
   padding: 15px;
   background: rgba(20, 20, 36, 0.7);
   border: 2px solid rgba(127, 140, 141, 0.3);
   border-radius: 12px;
   color: #ecf0f1;
   font-size: 1.1rem;
   resize: vertical;
   transition: all 0.3s ease;
 }

 textarea:focus {
   outline: none;
   border-color: #3498db;
   background: rgba(20, 20, 36, 0.9);
   box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
 }

 .buttons {
   display: flex;
   gap: 15px;
   margin: 25px 0;
 }

 .btn {
   flex: 1;
   padding: 16px 25px;
   border: none;
   border-radius: 12px;
   font-size: 1.1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
 }

 .btn-encode {
   background: linear-gradient(135deg, #3498db, #2980b9);
   color: white;
 }

 .btn-decode {
   background: linear-gradient(135deg, #2ecc71, #27ae60);
   color: white;
 }

 .btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 }

 .btn:active {
   transform: translateY(0);
 }

 .result-container {
   position: relative;
 }

 .result-label {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .result-box {
   background: rgba(20, 20, 36, 0.7);
   border: 2px solid rgba(127, 140, 141, 0.3);
   border-radius: 12px;
   padding: 15px;
   min-height: 140px;
   color: #f1c40f;
   font-size: 1.1rem;
   overflow-wrap: break-word;
   white-space: pre-wrap;
 }

 .examples-table {
   width: 100%;
   border-collapse: collapse;
   margin-top: 10px;
 }

 .examples-table th {
   background: rgba(44, 62, 80, 0.7);
   padding: 15px;
   text-align: left;
   font-weight: 600;
 }

 .examples-table td {
   padding: 15px;
   border-bottom: 1px solid rgba(127, 140, 141, 0.2);
 }

 .examples-table tr:nth-child(even) {
   background: rgba(25, 35, 45, 0.5);
 }

 .examples-table tr:hover {
   background: rgba(41, 128, 185, 0.2);
 }

 .copy-btn {
   position: absolute;
   top: 10px;
   right: 10px;
   background: rgba(30, 30, 46, 0.7);
   border: 1px solid rgba(127, 140, 141, 0.3);
   color: #ecf0f1;
   padding: 8px 15px;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
 }

 .copy-btn:hover {
   background: rgba(52, 152, 219, 0.3);
 }

 .explanation {
   background: rgba(25, 35, 45, 0.6);
   border-radius: 15px;
   padding: 15px;
   margin-top: 20px;
   line-height: 1.7;
   border-left: 4px solid #3498db;
 }

 .explanation h3 {
   margin-bottom: 15px;
   color: #3498db;
 }

 .explanation p {
   margin-bottom: 10px;
 }

 .emoji {
   font-size: 1.5rem;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(-20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .pulse {
   animation: pulse 2s infinite;
 }

 @keyframes pulse {
   0% {
     box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4);
   }

   70% {
     box-shadow: 0 0 0 12px rgba(46, 204, 113, 0);
   }

   100% {
     box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
   }
 }

 footer {
   margin-top: 40px;
   text-align: center;
   color: #bdc3c7;
   font-size: 0.9rem;
   width: 100%;
   padding: 20px;
   border-top: 1px solid rgba(127, 140, 141, 0.2);
 }