:root {
      --primary-color: #00ff00; /* Phosphorescent Green */
      --background-color: #1a1a1a;
      --text-color: #e0e0e0;
      --card-background: #2a2a2a;
      --border-color: var(--primary-color);
      --button-background: var(--primary-color);
      --button-text-color: #000000;
      --button-hover-background: #00cc00;
      --input-background: #333;
      --input-border: #444;
      --font-family: 'Vazirmatn', sans-serif;
      --tab-inactive-background: #444;
      --tab-active-background: var(--card-background);
      --tab-active-border: var(--primary-color);
    }

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

    html {
      font-size: 16px;
    }

    body {
      font-family: var(--font-family);
      background-color: var(--background-color);
      color: var(--text-color);
      line-height: 1.6;
      direction: rtl; /* Default to RTL for Persian UI */
      display: flex;
      justify-content: center;
      padding: 20px;
    }

    .container {
      max-width: 900px;
      width: 100%;
      background-color: var(--card-background);
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
      border: 1px solid var(--border-color);
      display: flex; /* Use flexbox for layout */
      flex-direction: column; /* Stack elements vertically */
    }

    header {
      text-align: center;
      margin-bottom: 20px; /* Reduced margin */
      color: var(--primary-color);
    }

    header h1 {
      font-size: 2.5rem;
      font-weight: 700;
      text-shadow: 0 0 10px var(--primary-color);
    }

    /* Tab Navigation */
    .tab-navigation {
      display: flex;
      margin-bottom: 0; /* Remove bottom margin */
      border-bottom: 1px solid var(--border-color); /* Add border below tabs */
    }

    .tab-button {
      padding: 10px 20px;
      cursor: pointer;
      background-color: var(--tab-inactive-background);
      color: var(--text-color);
      border: none;
      border-bottom: 3px solid transparent; /* For active indicator */
      font-family: var(--font-family);
      font-size: 1rem;
      font-weight: bold;
      transition: background-color 0.3s ease, border-color 0.3s ease;
      border-radius: 5px 5px 0 0; /* Rounded top corners */
      margin-left: 5px; /* Spacing between tabs */
      margin-top: 0; /* Reset margin */
    }
     .tab-button:first-child {
        margin-right: 0; /* No margin for the first tab */
     }


    .tab-button:hover {
      background-color: #555;
    }

    .tab-button.active {
      background-color: var(--tab-active-background);
      color: var(--primary-color);
      border-bottom: 3px solid var(--tab-active-border);
    }

    /* Tab Content Area */
    .tab-content {
       /* Takes remaining space */
       padding-top: 20px; /* Add padding above content */
    }


    .tab-panel {
      display: none; /* Hide panels by default */
      animation: fadeIn 0.5s ease; /* Add fade-in animation */
    }

    .tab-panel.active {
      display: block; /* Show active panel */
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }


    /* Keep other styles for card, form-group, inputs, etc. */
    .card {
        background-color: transparent; /* Make card background transparent as container handles it */
        padding: 0; /* Remove card padding */
        margin-bottom: 0; /* Remove card margin */
        border: none; /* Remove card border */
        box-shadow: none; /* Remove card shadow */
    }

    h2 {
      color: var(--primary-color);
      margin-bottom: 20px;
      border-bottom: 1px solid var(--primary-color);
      padding-bottom: 10px;
      font-size: 1.8rem;
    }

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

    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      color: var(--text-color);
    }

    input[type="text"],
    input[type="password"],
    select,
    textarea {
      width: 100%;
      padding: 12px;
      background-color: var(--input-background);
      border: 1px solid var(--input-border);
      border-radius: 5px;
      color: var(--text-color);
      font-family: var(--font-family);
      font-size: 1rem;
      transition: border-color 0.3s ease;
    }

    input[type="text"]:focus,
    input[type="password"]:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
    }

    select {
      appearance: none;
      background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300FF00%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
      background-repeat: no-repeat;
      background-position: left 10px center;
      background-size: 12px;
      padding-left: 30px;
    }

    select:disabled {
        background-color: #444;
        cursor: not-allowed;
        opacity: 0.7;
    }


    button {
      background-color: var(--button-background);
      color: var(--button-text-color);
      border: none;
      padding: 12px 25px;
      border-radius: 5px;
      cursor: pointer;
      font-family: var(--font-family);
      font-size: 1rem;
      font-weight: bold;
      transition: background-color 0.3s ease, transform 0.1s ease;
      margin-top: 10px;
    }

    button:hover:not(:disabled) { /* Apply hover only if not disabled */
      background-color: var(--button-hover-background);
      transform: translateY(-1px);
    }

     button:active:not(:disabled) { /* Apply active only if not disabled */
       transform: translateY(0px);
     }

    button:disabled {
      background-color: #555;
      cursor: not-allowed;
      opacity: 0.6;
    }

    /* Specific section styles */
    .translator-section .language-selectors {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 20px;
    }

    .translator-section .language-selectors .form-group {
      flex: 1;
      margin-bottom: 0;
    }

    .translator-section .text-areas {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
    }

    .translator-section .text-area-container {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .translator-section textarea {
      height: 200px;
      resize: vertical;
      font-size: 1.1rem;
      flex-grow: 1;
    }

    .translator-section .toolbar {
        display: flex;
        gap: 5px;
        margin-top: 5px;
        justify-content: flex-end;
    }

    .translator-section .toolbar button {
        padding: 5px 10px;
        font-size: 0.8rem;
        background-color: #444;
        color: var(--primary-color);
        margin-top: 0;
    }

    .translator-section .toolbar button:hover:not(:disabled) {
        background-color: #555;
    }


    .translator-section #outputText {
      background-color: #222;
    }

    footer {
      text-align: center;
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid rgba(0, 255, 0, 0.3);
      font-size: 0.9rem;
      color: #aaa;
    }

    .status-message {
        margin-top: 10px;
        font-size: 0.9rem;
        min-height: 1.2em;
    }

    #settings-status.success, #translate-status.success {
        color: var(--primary-color);
    }
     #settings-status.error, #translate-status.error {
        color: #ff4d4d;
     }
     #translate-status.loading, #settings-status.loading {
        color: #ffa500; /* Orange for loading */
     }


    /* Text alignment utilities */
    .text-align-right {
        text-align: right;
        direction: rtl;
    }
    .text-align-left {
        text-align: left;
        direction: ltr;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .container {
        padding: 15px; /* Slightly reduce padding */
      }
      header h1 {
        font-size: 2rem;
      }
      .tab-button {
          padding: 8px 15px;
          font-size: 0.9rem;
      }
      .translator-section .language-selectors,
      .translator-section .text-areas {
        flex-direction: column;
      }
      .translator-section textarea {
        height: 150px;
      }
    }
     @media (max-width: 480px) {
        header h1 {
            font-size: 1.8rem;
        }
        .tab-button {
            padding: 8px 10px;
            font-size: 0.85rem;
        }
        button {
            padding: 10px 20px;
            font-size: 0.9rem;
        }
        .translator-section textarea {
            height: 120px;
        }
     }