h1{
    text-align: center;
}
.text-center{
    text-align: center;
    font-size: var(--fs-para);
    font-size: var(--fs-para);
    color: var(--para-color);
}
.input-section {
       margin-bottom: 30px;
       max-width: 650px;
       width: 100%;
   }

   .output-section {
       max-width: 650px;
       width: 100%;
   }

   .section-title {
       font-size: 1.3rem;
       font-weight: 600;
       margin-bottom: 8px;
       color: #374151;
   }

   textarea {
       width: 100%;
       min-height: 170px;
       padding: 16px 12px;
       border: 2px solid #E5E7EB;
       border-radius: 12px;
       font-family: 'Courier New', monospace;
       font-size: 14px;
       resize: vertical;
       transition: border-color 0.3s;
   }

   textarea:focus {
       outline: none;
       border-color: var(--sky);
       box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
   }

   .controls {
       display: flex;
       gap: 15px;
       margin: 8px 0;
       flex-wrap: wrap;
       justify-content: right;
   }

   .btn {padding: 8px 12px;
    color: white;
    background-color: var(--accent);
    border: none;
    position: relative;
       cursor: pointer;
       transition: all 0.3s;
       border-radius: 8px;
       line-height: 14px;
       

   }

   .btn-primary {
background: var(--accent);
    color: white;
    max-width: 200px !important;
   }

   .btn-primary:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
   }

   .btn-secondary {
       background: #F3F4F6;
       color: #374151;
       border: 2px solid #E5E7EB;
   }

   .btn-secondary:hover {
       background: #E5E7EB;
   }

   .btn-danger {
       background: linear-gradient(135deg, #EF4444, #DC2626);
       color: white;
   }

   .btn-danger:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
   }

   .stats-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       gap: 20px;
       margin:0 0 30px 0;
   }

   .stat-card {
       transition: .3s;
       border: .5px #1E2A3859;
       box-shadow: 0 0 4px 0 #00000026;
       padding: 8px 12px;
       background: #F5FCFF;
       border-radius: 8px;
   }

   .stat-number {
font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    color: rgb(0, 0, 0);
   }

   .stat-label {
color: var(--accent);
    font-size: 18px;
    line-height: 24px;
   }

   .unicode-display {
       background: #1F2937;
       color: #F9FAFB;
       padding: 20px;
       border-radius: 12px;
       font-family: 'Courier New', monospace;
       font-size: 13px;
       min-height: 150px;
       margin: 20px 0;
       overflow-x: auto;
       white-space: pre-wrap;
   }

   .unicode-char {
       display: inline;
       margin: 2px;
       padding: 4px 6px;
       border-radius: 4px;
       font-size: 11px;
       font-weight: bold;
   }

   .invisible-char {
       background: #EF4444;
       color: white;
   }

   .visible-char {
       background: #10B981;
       color: white;
   }

   .normal-char {
       background: #6B7280;
       color: white;
   }

   .controls-row {
       display: flex;
       gap: 10px;
       margin: 15px 0;
       align-items: center;
       flex-wrap: wrap;
   }
.controls-row span{
    font-size: 12px;
 
}
   .toggle-switch {
       position: relative;
    display: inline-block;
    width: 35px;
    height: 17px;
   }

   .toggle-switch input {
       opacity: 0;
       width: 0;
       height: 0;
   }

   .slider {
       position: absolute;
       cursor: pointer;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: #ccc;
       transition: .4s;
       border-radius: 24px;
   }

   .slider:before {
position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 1px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
   }

   input:checked+.slider {
       background-color: var(--sky);
   }

   input:checked+.slider:before {
       transform: translateX(20px);
   }

   .legend {
       display: flex;
       gap: 20px;
       margin: 15px 0;
       flex-wrap: wrap;
   }

   .legend-item {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 0.9rem;
   }

   .legend-color {
       width: 16px;
       height: 16px;
       border-radius: 3px;
   }

   .detected-chars {
       max-height: 200px;
       overflow-y: auto;
       background: #F9FAFB;
       border: 2px solid #E5E7EB;
       border-radius: 8px;
       padding: 15px;
       margin: 15px 0;
       display: flex;
       flex-direction: column;
       gap: 8px;
   }

   .char-info {
       background: white;
       padding: 10px;
       margin: 5px 0;
       border-radius: 6px;
       border-left: 4px solid var(--sky);
       font-family: 'Courier New', monospace;
       font-size: 12px;
       box-shadow: 0 0 4px 0 #00000026;
   }

   .alert {
       padding: 15px;
       border-radius: 8px;
       margin: 15px 0;
   }

   .alert-info {
       background: #DBEAFE;
       border: 1px solid #93C5FD;
       color: #1E40AF;
   }

   .partition {
       display: flex;
       justify-content: space-between;
       gap: 20px;
   }

   @media (max-width: 768px) {
       .partition{
              flex-direction: column;
       }

       .controls {
           justify-content: center;
       }

       .stats-grid {
           grid-template-columns: 1fr;
       }
   }