:root {
      --bg-primary: #344464;
      --bg-secondary: #0f2640;
      --text-primary: #d3a77b;
      --text-secondary: #efc776;
      --accent-color: #d3a77b;
      --card-bg: #344464;
      --top-bar-bg: rgba(13, 27, 42, 0.95);
      --border-color: #d3a77b;
      --modal-bg: #5f799a;
      --button-bg: #182949;
      --button-text: #d3a77b;
      --input-bg: #182949;
      --hover-bg: #586c85;
  }

  .light-theme {
      --bg-primary: #c7d3ec;
      --bg-secondary: #f8e2cb;
      --text-primary: #182949;
      --text-secondary: #344464;
      --accent-color: #1444a1;
      --card-bg: #d3e2f5;
      --top-bar-bg: #e2ebff;
      --border-color: #1444a1;
      --modal-bg: #c4defd;
      --button-bg: #e2ebff;
      --button-text: #d3a77b;
      --input-bg: #e2ebff;
      --hover-bg: #c7d3ec;
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      transition:
          background-color 0.3s,
          color 0.3s,
          border-color 0.3s;
  }

  html {
      font-size: 16px;
      /* 1rem = 16px */
  }

  body,
  html {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: sans-serif;
      overflow: hidden;
  }

  /*
#container {
    display: flex;

    flex-grow: 1;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    font-family: "Tajawal", sans-serif;
    direction: rtl;
    background-color: var(--bg-secondary);
}
*/

  #threejs-container,
  #canvas {
      flex-grow: 1;
      transition: all var(--transition-speed) ease-in-out;
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
      min-width: 0;
      flex-basis: auto;
      z-index: 1;
      justify-content: center;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.1);
      border: 2px dashed rgba(255, 255, 255, 0.2);
      color: var(--text-primary);
      font-size: 1.2rem;
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  }

  #image-editor-container {
      display: none;
      flex-direction: column;
      background-color: rgba(245, 247, 255, 0.95);
      border: 1px solid var(--border-color);
      box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      flex-shrink: 0;
      transition: all var(--transition-speed) ease-in-out;
      z-index: 1000;
      position: fixed;
      width: 100%;
      height: 44%;
      bottom: 60px;
      left: 0;
  }

  @media (orientation: portrait) {
      #image-editor-container {
          display: none;
          width: 100%;
          height: 44%;
          bottom: 60px;
          left: 0;
          border-top: 1px solid var(--border-color);
          border-left: none;
          border-radius: 0;
      }
  }

  @media (orientation: landscape) {
      #image-editor-container {
          display: none;
          width: 50%;
          height: 48%;
          right: 20px;
          bottom: 80px;
          border-radius: 8px;
      }
  }

  /* حالة الإخفاء */
  /*
#image-editor-container.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}
*/

  #bottom-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: var(--bottom-bar-height);
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 1000;
      box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
      padding: 0 10px;
  }

  .top-bar {
      position: fixed;
      top: 30px;
      left: 0;
      right: 0;
      height: var(--top-bar-height);
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 2000;
      box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
      padding: 0 10px;
  }

  .top-bar button {
      background-color: var(--button-bg);
      color: var(--button-text);
      border: solid 2px var(--border-color);
      padding: 5px;
      margin: 5px;
      border-radius: 5px;
      cursor: pointer;
  }

  .controls {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 10px;
      border-radius: 10px;
      z-index: 1000;
      display: none;
      flex-direction: row;
      gap: 1px;
      color: var(--text-primary);
      font-size: 12px;
      height: fit-content;
      align-items: center;
      justify-content: center;
      text-align: center;
  }

  .controls.show,
  .controls.active {
      display: block;
  }

  #background-controls {
      top: 34%;
      left: 200px;
  }

  #ground-controls {
      top: 33%;
      left: 350px;
  }

  .controls button:hover,
  .controls-grid button:hover {
      background-color: var(--hover-bg);
      border-color: var(--border-color);
      color: var(--text-primary);
      transform: scale(1.05);
  }

  .controls button:hover svg,
  .controls-grid button:hover svg {
      fill: var(--text-primary);
      color: var(--text-primary);
  }

  .controls-grid,
  .ground-controls,
  .background-controls,
  .model-controls {
      display: flex;
      border-radius: 5px;
      gap: 1px;
      justify-content: center;
      max-width: 600px;
      margin: auto;
  }

  .controls-grid .gradient {
      display: flex;
      flex-direction: row;
      gap: 1px;
  }

  input[type="color"],
  input[type="file"],
  button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      background-color: var(--button-bg);
      border: 2px solid var(--border-color);
      color: var(--button-text);
      border-radius: 5px;
      cursor: pointer;
  }

  .color-picker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
  }

  .color-picker input[type="color"] {
      position: absolute;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
  }

  .color-picker-label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background-color: var(--button-bg);
      border: 2px solid var(--border-color);
      border-radius: 5px;
  }

  .color-picker-label svg {
      fill: var(--button-text);
      width: 24px;
      height: 24px;
  }

  input[type="file"] {
      display: none;
  }

  .color-inputs {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      gap: 2px;
      margin-bottom: 10px;
  }

  .controls-grid button,
  .controls-grid {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
  }

  input[type="color"],
  input[type="file"],
  button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      background-color: var(--button-bg);
      border: 2px solid var(--border-color);
      color: var(--button-text);
      border-radius: 5px;
      cursor: pointer;
  }

  .color-picker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
  }

  .color-picker input[type="color"] {
      position: absolute;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
  }

  .color-picker-label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background-color: var(--button-bg);
      border: 2px solid var(--border-color);
      border-radius: 5px;
  }

  .color-picker-label svg {
      fill: var(--button-text);
      width: 24px;
      height: 24px;
  }

  input[type="file"] {
      display: none;
  }

  .color-inputs {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      gap: 2px;
      margin-bottom: 10px;
  }

  .controls-grid button,
  .controls-grid {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
  }

  .gradient input {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 48px;
  }


  .gradient {
      display: flex;
      flex-direction: column;
      gap: 1px;
      margin-right: 1px;
  }

  .gradient .rect {
      width: 10px;
      height: 10px;
      background-color: var(--hover-bg);
      border-radius: 2px;
  }

  .color-input {
      display: none;
  }

  .bottom-slide.active {
      bottom: 0;
  }

  .icon-button .gradient input {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 48px;
  }


  #skybox-thumbnails {
      position: fixed;
      top: 0;
      right: -100px;
      width: 75px;
      height: 100vh;
      background-color: var(--bg-primary);
      border-color: var(--border-color);
      color: var(--text-primary);
      border-radius: 5px;
      box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.5);
      transition: right 0.3s ease;
      overflow-y: auto;
      z-index: 1000;
  }

  #skybox-thumbnails.active {
      right: 0;
  }

  .skybox-grid {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 5px;
  }

  #skybox-thumbnails img {
      width: 100%;
      height: auto;
      cursor: pointer;
      border: 2px solid transparent;
      border-radius: 5px;
      transition: border-color 0.3s ease;
  }

  #skybox-thumbnails img:hover {
      border-color: var(--border-color);
  }

  #model-skybox-picker {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 8px;
  }

  #texture-thumbnails {
      position: fixed;
      top: 0;
      left: -100px;
      width: 75px;
      height: 100vh;
      background-color: var(--bg-primary);
      border-color: var(--border-color);
      color: var(--text-primary);
      border-radius: 5px;
      box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.5);
      transition: right 0.3s ease;
      overflow-y: auto;
      z-index: 1000;
  }

  #texture-thumbnails.active {
      left: 0;
  }

  .texture-grid {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 5px;
  }

  #texture-thumbnails img {
      width: 100%;
      height: auto;
      cursor: pointer;
      border: 2px solid transparent;
      border-radius: 5px;
      transition: border-color 0.3s ease;
  }

  #texture-thumbnails img:hover {
      border-color: var(--border-color);
  }

  #model-texture-picker {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 5px;
  }

  .sidebar {
      padding: 15px 10px;
      display: none;
      position: fixed;
      top: 100px;
      left: -320px;
      width: 150px;
      bottom: 60px;
      background: linear-gradient(135deg, var(--button-bg) 0%, var(--hover-bg) 100%);
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 999;
      transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      border: 2px solid var(--border-color);
      border-left: none;
      border-radius: 0 20px 20px 0;
      box-shadow: 0 0 30px var(--bg-primary);
      gap: 12px;
  }

  .sidebar.active {
      display: block;
      left: 0;
  }

  /* تخصيص شريط التمرير للشريط الجانبي */
  .sidebar::-webkit-scrollbar {
      width: 8px;
  }

  .sidebar::-webkit-scrollbar-track {
      background: var(--bg-primary);
      border-radius: 4px;
      margin: 5px 0;
  }

  .sidebar::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, var(--border-color), #b38c5f);
      border-radius: 4px;
  }

  .sidebar::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(135deg, #e5b98a, var(--border-color));
  }

  /* تنسيق مدخلات النطاق */
  .range-input {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: var(--input-bg);
      color: var(--button-text);
      border: 2px solid var(--border-color);
      border-radius: 12px;
      padding: 12px 8px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      height: 85px;
      text-align: center;
      font-size: 13px;
      box-shadow: 0 2px 8px #c1cbdd;
      position: relative;
      overflow: hidden;
  }

  .range-input::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--border-color), transparent);
  }

  .range-input:hover {
      background-color: var(--hover-bg);
      color: var(--text-primary);
      border-color: var(--accent-color);
      transform: translateY(-3px);
      box-shadow: 0 5px 15px var(--bg-primary);
  }

  /* تخصيص عناصر التحكم بالنطاق */
  input[type="range"] {
      width: 90%;
      height: 25px;
      background: transparent;
      border: none;
      outline: none;
      margin: 8px 0;
  }

  input[type="range"]::-webkit-slider-runnable-track {
      height: 10px;
      background: linear-gradient(90deg, var(--input-bg), var(--border-color));
      border-radius: 8px;
      border: 1px solid var(--border-color);
      box-shadow: inset 0 1px 3px var(--bg-primary);
  }

  input[type="range"]::-webkit-slider-thumb {
      width: 22px;
      height: 22px;
      background: linear-gradient(135deg, var(--border-color), #b38c5f);
      border: 2px solid var(--button-bg);
      border-radius: 50%;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      transition: all 0.2s ease;
  }

  input[type="range"]::-webkit-slider-thumb:hover {
      transform: scale(1.1);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  }

  input[type="range"]::-moz-range-track {
      height: 10px;
      background: var(--input-bg);
      border-radius: 8px;
      border: 1px solid var(--border-color);
  }

  input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background: var(--border-color);
      border: 2px solid var(--button-bg);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }

  input[type="color"] {
      width: 80%;
      height: 30px;
      border: 2px solid var(--border-color);
      border-radius: 8px;
      background: var(--input-bg);
      cursor: pointer;
      margin-top: 8px;
  }

  /* تنسيق الأزرار */
  .Ground-grid {
      display: flex;
      flex-direction: column;
      margin-bottom: 15px;
  }

  .Ground-grid span.range-input {
      margin-bottom: 10px;
      height: 50px;
  }

  .Ground-grid button {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background-color: var(--button-bg);
      color: var(--button-text);
      border: 2px solid var(--border-color);
      border-radius: 12px;
      padding: 12px 8px;
      margin: 8px 0;
      cursor: pointer;
      transition: all 0.3s ease;
      width: 100%;
      height: 50px;
      text-align: center;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  }

  .Ground-grid button:hover {
      background-color: var(--accent-color);
      border-color: var(--hover-bg);
      color: var(--hover-bg);
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }

  /* زر التحكم في الشريط الجانبي */
  .sidebar-toggle {
      position: fixed;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      z-index: 1000;
      background: linear-gradient(135deg, var(--button-bg), var(--hover-bg));
      border: 2px solid var(--border-color);
      border-left: none;
      border-radius: 0 12px 12px 0;
      padding: 15px 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }

  .sidebar-toggle:hover {
      background: linear-gradient(135deg, var(--hover-bg), var(--button-bg));
      padding-left: 12px;
  }

  /* تنسيق التبديل */
  #toggleVisibility {
      width: 50px;
      height: 25px;
      appearance: none;
      background: var(--input-bg);
      border-radius: 25px;
      position: relative;
      cursor: pointer;
      border: 2px solid var(--border-color);
      margin: 10px 0;
  }

  #toggleVisibility:checked {
      background: var(--accent-color);
  }

  #toggleVisibility::before {
      content: '';
      position: absolute;
      width: 21px;
      height: 21px;
      border-radius: 50%;
      background: white;
      top: 1px;
      left: 1px;
      transition: all 0.3s ease;
  }

  #toggleVisibility:checked::before {
      left: 26px;
  }

  /* تحسينات للشاشات الصغيرة */
  /*
        @media (max-width: 600px) {
            .sidebar {
                top: 80px;
                left: -280px;
                width: 150px;
                bottom: 50px;
            }
            
            .sidebar-toggle {
                padding: 12px 6px;
            }
        }
        */


  #filter-buttons-container {
      display: none;
      position: fixed;
      bottom: 15%;
      height: calc(100% - 50px);
      background: var(--button-bg);
      overflow-y: auto;
      padding: 5px;
      box-sizing: border-box;
      z-index: 2002;
      flex-direction: column;
      align-items: flex-start;
  }

  #filterToggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0 5px;
      padding: 8px 8px;
      font-size: 16px;
  }

  #filterSlider {
      display: none;
      position: absolute;
      z-index: 2002;
      flex-wrap: nowrap;
      background-color: var(--button-bg);
      color: var(--button-text);
      border: solid 2px var(--border-color);
      justify-content: start;
      padding: 10px;
      top: 10px;
      bottom: auto;
      width: 90%;
      left: 5%;
      gap: 8px;
      max-height: 280px;
      overflow-x: auto;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }

  /* تخصيص شريط التمرير لجميع المتصفحات */
  #filterSlider::-webkit-scrollbar {
      height: 12px;
      border-radius: 6px;
  }

  #filterSlider::-webkit-scrollbar-track {
      background: linear-gradient(90deg, #1a252f, #2c3e50);
      border-radius: 6px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  }

  #filterSlider::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #d3a77b, #b38c5f);
      border-radius: 6px;
      border: 2px solid #1a252f;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  #filterSlider::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(135deg, #e5b98a, #c99a6d);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }

  #filterSlider::-webkit-scrollbar-thumb:active {
      background: linear-gradient(135deg, #b38c5f, #9a754f);
  }

  /* دعم فايرفوكس */
  @supports (scrollbar-color: auto) {
      #filterSlider {
          scrollbar-color: #d3a77b #1a252f;
          scrollbar-width: thin;
      }
  }

  /* تأثيرات إضافية للحاوية */
  #filterSlider::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #d3a77b, transparent);
      border-radius: 1px;
  }

  #filterSlider::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #d3a77b, transparent);
      border-radius: 1px;
  }

  .filter-thumb {
      z-index: 2002;
      text-align: center;
      width: 80px;
      flex: 0 0 auto;
  }

  .filter-thumb img:hover {
      transform: scale(1.05);
  }

  .filter-thumb div {
      text-align: center;
  }

  #upload-btn,
  #video-upload-btn {
      display: none;
  }

  #floating-menu {
      display: flex !important;
      position: absolute;
      bottom: 70px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 5px;
      padding: 5px;
      z-index: 5;
      white-space: nowrap;
      overflow-x: auto;
  }

  @media (orientation: landscape) {
      #floating-menu {
          left: auto;
          right: 10px;
          bottom: 10px;
          transform: none;
      }
  }

  #floating-menu button {
      color: var(--button-text);
      width: 36px;
      height: 36px;
      padding: 2px 2px;
      margin: 2px;
      border-radius: 3px;
      cursor: pointer;
      flex-shrink: 0;
  }

  #floating-menu button:hover {
      background: var(--accent-color);
      color: var(--button-bg);
  }

  #stickers-panel {
      width: 100%;
      position: fixed;
      bottom: 90px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      display: none;
      padding: 1px;
      z-index: 2002;
      max-height: 250px;
      overflow-y: auto;
  }

  #stickers-panel .sticker-item {
      border: solid 1px var(--border-color);
      background: var(--hover-bg);
      color: var(--text-primary);
      width: 30px;
      height: 30px;
      margin: 1px;
      cursor: pointer;
      padding: 1px;
  }

  /* تبويب التصنيفات فقط */
  .stickers-tabs {
      display: flex;
      background: var(--bg-primary);
      border-bottom: 1px solid var(--border-color);
      padding: 5px;
      overflow-x: auto;
  }

  .stickers-tab {
      padding: 5px 10px;
      margin: 0 2px;
      background: var(--hover-bg);
      border: 1px solid var(--border-color);
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
      font-size: 12px;
      color: var(--text-primary);
  }

  .stickers-tab:hover {
      background: var(--border-color);
      color: var(--bg-primary);
  }

  .stickers-tab.active {
      background: var(--border-color);
      color: var(--bg-primary);
  }

  #font-buttons-container {
      background-color: var(--button-bg);
      display: none;
      position: absolute;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;
      overflow-x: auto;
      padding: 10px;
      white-space: nowrap;
      z-index: 2002;
      top: 10px;
      bottom: auto;
      /* تحديد عرض ثابت للحاوية */
      width: 90%;
      left: 5%;
      /* لتوسيط الحاوية */
      border: solid 2px var(--border-color);
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      max-height: 120px;
  }

  /* تخصيص شريط التمرير لجميع المتصفحات */
  #font-buttons-container::-webkit-scrollbar {
      height: 12px;
      border-radius: 6px;
  }

  #font-buttons-container::-webkit-scrollbar-track {
      background: linear-gradient(90deg, #1a252f, #2c3e50);
      border-radius: 6px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
      margin: 0 10px;
  }

  #font-buttons-container::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #d3a77b, #b38c5f);
      border-radius: 6px;
      border: 2px solid #1a252f;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  #font-buttons-container::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(135deg, #e5b98a, #c99a6d);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }

  #font-buttons-container::-webkit-scrollbar-thumb:active {
      background: linear-gradient(135deg, #b38c5f, #9a754f);
  }

  /* دعم فايرفوكس */
  @supports (scrollbar-color: auto) {
      #font-buttons-container {
          scrollbar-color: #d3a77b #1a252f;
          scrollbar-width: thin;
      }
  }

  /* تأثيرات إضافية للحاوية */
  #font-buttons-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #d3a77b, transparent);
      border-radius: 1px;
  }

  #font-buttons-container::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #d3a77b, transparent);
      border-radius: 1px;
  }

  .font-btn {
      flex: 0 0 auto;
      padding: 8px 12px;
      margin: 2px;
      min-width: 70px;
      height: 35px;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold;
      color: var(--text-secondary);
      border: 1px solid var(--text-secondary);
      background-color: var(--card-bg);
      transition: all 0.3s ease;
      display: flex;
      justify-content: center;
      align-items: center;
      text-overflow: ellipsis;
      z-index: 2002;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .font-btn:hover {
      color: var(--card-bg);
      border: 1px solid var(--button-bg);
      background: linear-gradient(135deg, #d3a77b, #b38c5f);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .font-btn:active {
      transform: translateY(0);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  #color-input {
      width: 40px;
      height: 40px;
      padding: 0;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      background: none;
      cursor: pointer;
      vertical-align: middle;
  }

  .animate-buttons {
      position: fixed;
      top: 100px;
      left: 0;
      width: 100%;
      padding: 5px;
      margin: 5px;
      display: none;
      z-index: 2000;
      justify-content: center;
      /* لتوسيط الأزرار */
  }

  .animate-buttons ul {
      list-style: none;
      margin: 5px;
      padding: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      /* إضافة مسافة بين الأزرار */
  }

  .animate-buttons button {
      background-color: var(--button-bg);
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
      border-radius: 5px;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  /*
.animate-bar {
    position: fixed;
    top: 200px;
    left: 0;
    width: 100%;
    padding: 5px;
    margin: 5px;
    display: none;
    z-index: 2000;
    justify-content: center;
}

.animate-bar ul {
    list-style: none;
    margin: 5px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.animate-bar button {
    background-color: var(--button-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}        
*/
  /* أنماط قائمة النماذج الموحدة */
  #model-list-overlay {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 95%;
      height: 75%;
      max-width: 2000px;
      z-index: 10;
      overflow-y: auto;
      background-color: var(--modal-bg);
      border-radius: 10px;
      border: 2px solid var(--text-secondary);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }

  #model-list-container {
      background-color: var(--button-bg);
      color: var(--text-secondary);
      margin: 0;
      padding: 10px;
      border-radius: 10px;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
  }

  #model-search {
      background-color: var(--card-bg);
      color: var(--text-color);
      border: 1px solid var(--text-secondary);
      width: calc(100% - 20px);
      margin: 10px;
      padding: 10px;
      border-radius: 8px;
      font-size: 12px;
  }

  #model-search:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
  }

  /* قائمة التصنيفات الموحدة */
  .categories-container {
      display: flex;
      margin-bottom: 15px;
      border-bottom: 1px solid var(--card-bg);
      padding: 12px 15px;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      align-items: center;
  }

  .category-tab {
      padding: 10px 16px;
      background-color: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s;
      font-weight: 500;
      font-size: 13px;
      white-space: nowrap;
      flex-shrink: 0;
      color: var(--text-color);
      text-align: center;
  }

  .category-tab:hover {
      background-color: var(--hover-color);
      transform: translateY(-2px);
  }

  .category-tab.active {
      background-color: var(--primary-color);
      color: var(--text-secondary);
      border-color: var(--primary-color);
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
  }

  .category-count {
      background: var(--bg-secondary);
      color: var(--primary-color);
      border-radius: 50%;
      border: 1px solid var(--text-secondary);
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      margin-right: 5px;
  }

  /* الشبكة والبطاقات الموحدة */
  #model-grid {
      display: grid;
      grid-gap: 15px;
      padding: 15px;
      overflow-y: auto;
      flex-grow: 1;
  }

  /* البطاقات الأساسية الموحدة */
  .model-card,
  .model-item {
      opacity: 80%;
      cursor: pointer;
      text-align: center;
      border: 1px solid var(--text-secondary);
      border-radius: 8px;
      padding: 15px;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      background-color: var(--card-bg);
      overflow: hidden;
      height: 100%;
      min-height: 250px;
  }

  .model-card:hover,
  .model-item:hover {
      opacity: 100%;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .model-card.selected,
  .model-item.selected {
      border-color: var(--primary-color);
      background-color: rgba(52, 152, 219, 0.1);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
      opacity: 100%;
  }

  /* الصور الموحدة */
  .model-card img,
  .model-image {
      width: 100%;
      height: 160px;
      object-fit: contain;
      border-radius: 5px;
      margin-bottom: 12px;
      background-color: var(--primary-color);
      flex-shrink: 0;
  }

  /* النصوص الموحدة */
  .model-name {
      font-weight: 600;
      font-size: 14px;
      color: var(--text-color);
      line-height: 1.3;
      word-wrap: break-word;
      overflow-wrap: break-word;
      width: 100%;
      text-align: center;
      margin-top: auto;
      padding: 5px 0;
  }

  .model-category {
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 8px;
      background: var(--primary-color);
      padding: 3px 8px;
      border-radius: 10px;
      flex-shrink: 0;
  }

  /* تخصيص شريط التمرير الموحد */
  #model-grid::-webkit-scrollbar {
      width: 8px;
  }

  #model-grid::-webkit-scrollbar-track {
      background: var(--card-bg);
      border-radius: 4px;
  }

  #model-grid::-webkit-scrollbar-thumb {
      background: var(--primary-color);
      border-radius: 4px;
  }

  #model-grid::-webkit-scrollbar-thumb:hover {
      background: var(--secondary-color);
  }

  /* وسائط الاستعلام الموحدة لجميع الشاشات */

  /* الشاشات الصغيرة جداً - أقل من 480px */
  @media (max-width: 480px) {
      .categories-container {
          padding: 10px 12px;
          gap: 6px;
          justify-content: center;
      }

      .category-tab {
          padding: 8px 12px;
          font-size: 11px;
      }

      #model-grid {
          grid-template-columns: repeat(2, 1fr);
          grid-gap: 10px;
          padding: 10px;
      }

      .model-card,
      .model-item {
          min-height: 200px;
          padding: 12px 8px;
      }

      .model-card img,
      .model-image {
          height: 120px;
          margin-bottom: 8px;
      }

      .model-name {
          font-size: 11px;
          padding: 3px 0;
      }

      .model-category {
          font-size: 10px;
          margin-bottom: 5px;
      }
  }

  /* الشاشات الصغيرة - 481px إلى 600px */
  @media (min-width: 481px) and (max-width: 600px) {
      .categories-container {
          padding: 12px 15px;
          gap: 7px;
          justify-content: center;
      }

      .category-tab {
          padding: 9px 14px;
          font-size: 12px;
      }

      #model-grid {
          grid-template-columns: repeat(2, 1fr);
          grid-gap: 12px;
          padding: 12px;
      }

      .model-card,
      .model-item {
          min-height: 220px;
          padding: 12px 10px;
      }

      .model-card img,
      .model-image {
          height: 130px;
      }

      .model-name {
          font-size: 12px;
      }
  }

  /* الشاشات المتوسطة - 601px إلى 768px */
  @media (min-width: 601px) and (max-width: 768px) {
      .categories-container {
          padding: 12px 15px;
          gap: 8px;
          justify-content: flex-start;
      }

      .category-tab {
          padding: 10px 16px;
          font-size: 13px;
      }

      #model-grid {
          grid-template-columns: repeat(2, 1fr);
          grid-gap: 15px;
          padding: 15px;
      }

      .model-card,
      .model-item {
          min-height: 240px;
          padding: 15px;
      }

      .model-card img,
      .model-image {
          height: 140px;
      }

      .model-name {
          font-size: 13px;
      }
  }

  /* الشاشات الكبيرة - 769px إلى 1024px */
  @media (min-width: 769px) and (max-width: 1024px) {
      .categories-container {
          padding: 12px 18px;
          gap: 10px;
          justify-content: flex-start;
      }

      .category-tab {
          padding: 11px 18px;
          font-size: 14px;
      }

      #model-grid {
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 18px;
          padding: 18px;
      }

      .model-card,
      .model-item {
          min-height: 260px;
          padding: 18px;
      }

      .model-card img,
      .model-image {
          height: 150px;
      }

      .model-name {
          font-size: 14px;
      }
  }

  /* الشاشات الكبيرة جداً - 1025px إلى 1440px */
  @media (min-width: 1025px) and (max-width: 1440px) {
      .categories-container {
          padding: 15px 20px;
          gap: 12px;
          justify-content: flex-start;
      }

      .category-tab {
          padding: 12px 20px;
          font-size: 15px;
      }

      #model-grid {
          grid-template-columns: repeat(4, 1fr);
          grid-gap: 20px;
          padding: 20px;
      }

      .model-card,
      .model-item {
          min-height: 280px;
          padding: 20px;
      }

      .model-card img,
      .model-image {
          height: 160px;
      }

      .model-name {
          font-size: 15px;
      }
  }

  /* الشاشات الكبيرة جداً - 1441px فما فوق */
  @media (min-width: 1441px) {
      .categories-container {
          padding: 15px 25px;
          gap: 15px;
          justify-content: flex-start;
      }

      .category-tab {
          padding: 12px 22px;
          font-size: 16px;
      }

      #model-grid {
          grid-template-columns: repeat(4, 1fr);
          grid-gap: 25px;
          padding: 25px;
      }

      .model-card,
      .model-item {
          min-height: 300px;
          padding: 20px;
      }

      .model-card img,
      .model-image {
          height: 180px;
      }

      .model-name {
          font-size: 16px;
      }
  }

  /* تحسينات للشاشات الطويلة */
  @media (max-height: 600px) {
      #model-list-overlay {
          height: 85%;
      }

      .model-card,
      .model-item {
          min-height: 180px;
      }

      .model-card img,
      .model-image {
          height: 100px;
      }
  }

  /* تحسينات إضافية لضمان ظهور الصور بوضوح */
  .model-card img,
  .model-image {
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      image-rendering: high-quality;
  }

  /* تأثيرات النقر الموحدة */
  .model-card:active,
  .model-item:active {
      transform: scale(0.98);
  }

  /* تحسينات للعناوين الطويلة */
  .model-name {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  /* تحسينات الوصول */
  @media (prefers-reduced-motion: reduce) {

      .model-card,
      .model-item,
      .category-tab {
          transition: none;
          transform: none;
      }
  }

  .lang-dropdown {
      padding: 5px;
      border: 2px solid var(--border-color);
      border-radius: 4px;
      background-color: var(--button-bg);
      cursor: pointer;
      font-size: 16px;
      width: 60px;
  }

  .lang-dropdown:hover {
      background-color: var(--button-bg);
      color: var(--text-secondary);
  }

  .action-btn {
      padding: 12px 24px;
      margin: 10px 5px;
      cursor: pointer;
      background-color: var(--bg-primary);
      color: var(--text-primary);
      border: 2px solid var(--border-color);
      border-radius: 4px;
      transition: background-color 0.3s;
  }

  .action-btn:hover {
      background-color: var(--accent-color);
      color: var(--button-bg);
  }

  [data-tooltip] {
      position: relative;
  }

  [data-tooltip]:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: var(--button-bg);
      color: var(--button-text);
      padding: 6px 12px;
      border: 2px solid var(--border-color);
      border-radius: 4px;
      font-size: 14px;
      white-space: nowrap;
      pointer-events: none;
  }

  .tooltip {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      padding: 5px 10px;
      background-color: var(--button-bg);
      color: var(--button-text);
      border: 1px solid var(--border-color);
      border-radius: 5px;
      white-space: nowrap;
      font-size: 12px;
      opacity: 0;
      transition: opacity 0.3s;
  }

  .title {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      padding: 5px 10px;
      background-color: var(--button-bg);
      color: var(--button-text);
      border: 1px solid var(--border-color);
      border-radius: 5px;
      white-space: nowrap;
      font-size: 12px;
      opacity: 0;
      transition: opacity 0.3s;
  }

  .button:hover .tooltip {
      opacity: 1;
  }

  .button:hover .title {
      opacity: 1;
  }

  lang-switcher {
      margin-bottom: 30px;
  }

  .logo {
      font-size: 24px;
      font-weight: 700;
      color: var(--accent-color);
      display: flex;
      align-items: center;
  }

  .logo-icon {
      margin-left: 10px;
      color: var(--accent-color);
  }

  .nav-links {
      display: flex;
      list-style: none;
  }

  .nav-links li {
      margin: 0 15px;
  }

  .nav-links a {
      text-decoration: none;
      color: var(--text-secondary);
      font-weight: 500;
      transition: color 0.3s;
      position: relative;
      padding: 5px 0;
  }

  .nav-links a:hover {
      color: var(--accent-color);
  }

  .nav-links a::after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      width: 0;
      height: 2px;
      background-color: var(--accent-color);
      transition: width 0.3s;
  }

  .nav-links a:hover::after {
      width: 100%;
  }

  .about-container {
      position: relative;
      display: inline-block;
  }

  .about-btn {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 10px 15px;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
  }

  .about-btn:hover {
      background: var(--hover-bg);
      border-color: var(--accent-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(211, 167, 123, 0.2);
  }

  .about-container:hover .tooltip {
      opacity: 1;
      visibility: visible;
      bottom: -45px;
  }

  .dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      background: var(--top-bar-bg);
      backdrop-filter: blur(10px);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 15px;
      min-width: 70px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.3s;
      z-index: 1001;
      display: flex;
      flex-direction: column;
      gap: 15px;
  }

  .about-container:hover .dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  .dropdown-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      cursor: pointer;
      transition: all 0.3s;
      position: relative;
  }

  .dropdown-item:hover {
      background: var(--hover-bg);
      border-color: var(--accent-color);
      transform: scale(1.1);
  }

  .dropdown-item-tooltip {
      position: absolute;
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
      background: var(--top-bar-bg);
      color: var(--accent-color);
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 14px;
      white-space: nowrap;
      margin-right: 10px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
      border: 1px solid var(--border-color);
  }

  .dropdown-item:hover .dropdown-item-tooltip {
      opacity: 1;
      visibility: visible;
  }

  .theme-toggle {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .theme-icon {
      transition: transform 0.5s ease;
  }

  .light-theme .theme-icon {
      transform: rotate(180deg);
  }

  .modal {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 2000;
      overflow-y: auto;
      padding: 20px;
  }

  .modal-content {
      background: var(--modal-bg);
      border-radius: 12px;
      padding: 30px;
      max-width: 900px;
      margin: 40px auto;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      border: 1px solid var(--border-color);
      position: relative;
      animation: modalFadeIn 0.3s ease-out;
  }

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

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

  .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--border-color);
  }

  .modal-title {
      color: var(--accent-color);
      font-size: 28px;
      margin: 0;
  }

  .close-modal {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 28px;
      cursor: pointer;
      transition: color 0.3s;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
  }

  .close-modal:hover {
      color: var(--accent-color);
      background: rgba(211, 167, 123, 0.1);
  }

  .modal-body {
      max-height: 70vh;
      overflow-y: auto;
      padding: 10px 5px;
  }

  .content-section {
      display: none;
  }

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

  .tabs {
      display: flex;
      margin-bottom: 25px;
      border-bottom: 1px solid var(--border-color);
      flex-wrap: wrap;
  }

  .tab {
      padding: 12px 20px;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      transition: all 0.3s;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .tab:hover {
      color: var(--accent-color);
  }

  .tab.active {
      color: var(--accent-color);
      border-bottom-color: var(--accent-color);
  }

  .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
  }

  .card {
      background: var(--card-bg);
      border-radius: 10px;
      padding: 20px;
      border: 1px solid var(--border-color);
  }

  .card h3 {
      color: var(--accent-color);
      margin-bottom: 15px;
      font-size: 18px;
  }

  .card ul,
  .card ol {
      padding-right: 20px;
      margin-bottom: 15px;
  }

  .card li {
      margin-bottom: 8px;
      line-height: 1.5;
  }

  .comparison-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 15px;
  }

  .comparison-table th,
  .comparison-table td {
      padding: 10px;
      text-align: right;
      border: 1px solid var(--border-color);
  }

  .comparison-table th {
      background: rgba(211, 167, 123, 0.1);
      color: var(--accent-color);
  }

  .faq-item {
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--border-color);
  }

  .faq-item h4 {
      color: var(--accent-color);
      margin-bottom: 8px;
  }

  .highlight {
      background: rgba(211, 167, 123, 0.1);
      border-right: 4px solid var(--accent-color);
      padding: 20px;
      border-radius: 8px;
      margin: 25px 0;
  }

  .highlight h3 {
      color: var(--accent-color);
      margin-bottom: 10px;
  }

  .content {
      max-width: 800px;
      margin: 0 auto;
      padding: 40px 20px;
      text-align: center;
  }

  h1 {
      font-size: 42px;
      margin-bottom: 20px;
      color: var(--accent-color);
  }

  p {
      font-size: 18px;
      line-height: 1.6;
      margin-bottom: 30px;
  }

  .instructions {
      background: var(--card-bg);
      border-radius: 12px;
      padding: 20px;
      margin-top: 40px;
      border: 1px solid var(--border-color);
  }

  .instructions h2 {
      color: var(--accent-color);
      margin-bottom: 15px;
  }

  @media (max-width: 768px) {
      .nav-links {
          display: none;
      }

      .top-bar {
          padding: 15px 20px;
      }

      h1 {
          font-size: 32px;
      }

      .dropdown {
          left: auto;
          right: 0;
      }

      .dropdown-item-tooltip {
          right: auto;
          top: 100%;
          margin-right: 0;
          margin-left: 10px;
      }

      .modal-content {
          padding: 20px;
          margin: 20px auto;
      }

      .modal-title {
          font-size: 20px;
      }

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

      .tabs {
          flex-direction: column;
      }

      .tab {
          border-bottom: 1px solid var(--border-color);
          border-right: none;
      }

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

  .contact-section {
      background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
      border-radius: 20px;
      padding: 40px;
      text-align: center;
      color: var(--text-primary);
      margin-top: 20px;
      position: relative;
      overflow: hidden;
  }

  .contact-section:before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
      z-index: 0;
  }

  .contact-content {
      position: relative;
      z-index: 10;
  }

  .contact-section h3 {
      font-size: 1.8rem;
      margin-bottom: 15px;
  }

  .contact-section p {
      max-width: 600px;
      margin: 0 auto 25px;
      opacity: 0.9;
  }

  .contact-btn {
      display: inline-block;
      background: var(--accent-color);
      color: var(--bg-primary);
      text-decoration: none;
      padding: 14px 35px;
      border-radius: 50px;
      font-weight: 600;
      transition: all 0.3s ease;
  }

  .contact-btn:hover {
      transform: translateY(-3px);
  }

  .contact-btn i {
      margin-right: 8px;
  }

  footer {
      text-align: center;
      margin-top: 50px;
      padding-top: 30px;
      color: var(--text-secondary);
      font-size: 0.95rem;
      border-top: 1px solid var(--border-color);
  }

  .copyright {
      margin-top: 10px;
  }

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

      h1 {
          font-size: 2rem;
      }

      .section-title h2 {
          font-size: 1.7rem;
      }

      .contact-section {
          padding: 30px 20px;
      }

      .card {
          padding: 25px;
      }
  }

  @media (max-width: 480px) {
      header {
          padding: 2rem 0;
      }

      .logo-container {
          width: 80px;
          height: 80px;
      }

      h1 {
          font-size: 1.7rem;
      }

      .subtitle {
          font-size: 1rem;
      }
  }

  .last-updated {
      background: var(--button-bg);
      display: inline-block;
      padding: 5px 15px;
      border-radius: 20px;
      margin-top: 15px;
      font-size: 0.9rem;
  }

  .comparison-table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
      margin-top: 15px;
      font-family: Arial, sans-serif;
  }

  .comparison-table th,
  .comparison-table td {
      padding: 12px 10px;
      border: 1px solid var(--border-color);
  }

  .comparison-table thead th {
      background-color: var(--card-bg);
      font-weight: bold;
  }

  .comparison-table tbody tr:nth-child(even) {
      background-color: var(--hover-bg);
  }

  .comparison-table tbody tr:hover {
      background-color: var(--card-bg);
  }

  .comparison-table td:first-child {
      text-align: left;
      font-weight: 500;
  }

  .stars span {
      font-size: 28px;
      cursor: pointer;
      color: var(--text-secondary);
      transition: color 0.2s;
  }

  .stars span.filled {
      color: var(--accent-color);
  }

  .review {
      border-bottom: 1px solid var(--border-color);
      padding: 15px 0;
      margin-bottom: 15px;
  }

  .review-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
  }

  .review-date {
      color: var(--text-secondary);
      font-size: 0.9em;
  }

  .review-rating {
      color: var(--accent-color);
      font-size: 1.2em;
      margin-bottom: 8px;
  }

  .stars span {
      cursor: pointer;
      font-size: 24px;
      transition: color 0.2s;
      user-select: none;
  }

  #rating-stars {
      font-size: 1.5em;
      color: var(--accent-color);
      margin: 10px 0;
  }

  #rating-result {
      font-weight: bold;
      margin-bottom: 20px;
  }

  .stars span {
      cursor: pointer;
      font-size: 24px;
      transition: color 0.2s;
      user-select: none;
  }

  #rating-stars {
      font-size: 1.5em;
      color: var(--accent-color);
      margin: 10px 0;
  }

  #rating-result {
      font-weight: bold;
      margin-bottom: 20px;
  }

  .share-icons-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 60%;
      margin: 20px auto;
      gap: 10px;
  }

  .share-icon-wrapper {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-primary);
      font-size: 1.4rem;
      cursor: pointer;
      transition:
          transform 0.3s ease,
          background 0.3s ease;
  }

  .share-icon-wrapper:hover {
      transform: scale(1.2);
  }

  .social-icons {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 50%;
      margin: 20px auto;
  }

  .social-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-primary);
      font-size: 1.5rem;
      transition:
          transform 0.3s ease,
          background 0.3s ease;
  }

  .social-icon:hover {
      transform: scale(1.2);
  }

  .facebook {
      background: #3b5998;
  }

  .twitter {
      background: #1da1f2;
  }

  .instagram {
      background: #e1306c;
  }

  .linkedin {
      background: #0077b5;
  }

  .tiktok {
      background: #000000;
  }

  .youtube {
      background: #ff0000;
  }

  .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--button-bg);
      z-index: 1000;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.3s;
  }

  .modal.active {
      display: flex;
      opacity: 1;
  }

  .modal-content {
      background: var(--modal-bg);
      border-radius: 12px;
      width: 100%;
      max-width: 800px;
      max-height: 90vh;
      overflow-y: auto;
      transform: translateY(20px);
      transition: transform 0.3s;
  }

  .modal.active .modal-content {
      transform: translateY(0);
  }

  .modal-header {
      padding: 20px;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .modal-title {
      color: var(--accent-color);
      margin: 0;
      font-size: 24px;
  }

  .close-modal {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 24px;
      cursor: pointer;
      transition: color 0.3s;
  }

  .close-modal:hover {
      color: var(--accent-color);
  }

  .modal-body {
      padding: 20px;
  }

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

  .tab {
      padding: 10px 20px;
      cursor: pointer;
      color: var(--text-secondary);
      border-bottom: 2px solid transparent;
      transition: all 0.3s;
  }

  .tab:hover,
  .tab.active {
      color: var(--accent-color);
      border-bottom-color: var(--accent-color);
  }

  .content-section {
      display: none;
      animation: fadeIn 0.3s;
  }

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

  .card {
      background: var(--card-bg);
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      border: 1px solid var(--border-color);
  }

  .card h3 {
      color: var(--accent-color);
      margin-bottom: 15px;
      font-size: 18px;
  }

  .card p,
  .card li {
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 10px;
  }

  .card ul {
      padding-right: 20px;
  }

  .faq-item {
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border-color);
  }

  .faq-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
  }

  .faq-item h4 {
      color: var(--accent-color);
      margin-bottom: 10px;
      font-size: 16px;
  }

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

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

  .media-menu {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      padding: 5px;
      margin: 5px;
      width: 70%;
      height: 50px;
      display: none;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 5px;
      z-index: 99;
  }

  .media-menu.media {
      bottom: 200px;
  }

  .media-menu.ccapture {
      bottom: 200px;
  }

  button {
      padding: 5px;
      margin: 5px;
      border: solid 2px var(--border-color);
      color: var(--button-bg);
      cursor: pointer;
      border-radius: 5px;
      font-size: 14px;
      transition: 0.3s;
  }

  select {
      width: 40px;
      padding: 5px;
      margin: 5px;
      border: 2px solid var(--border-color);
      border-radius: 3px;
      font-size: 14px;
      background: var(--input-bg);
      color: var(--button-text);
  }

  .bottom-controls {
      position: fixed;
      bottom: -100px;
      left: 0;
      width: 60%;
      background: rgba(24, 41, 73, 0.9);
      padding: 5px;
      margin: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      transition: bottom 0.3s ease;
      z-index: 1000;
      flex-wrap: wrap;
  }

  .bottom-controls.show {
      padding: 5px;
      margin: 5px;
      bottom: 0;
  }

  .bottom-controls button {
      background: var(--hover-bg);
      color: var(--text-primary);
      border: none;
      padding: 5px;
      margin: 5px;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.3s ease;
      white-space: nowrap;
  }

  .bottom-controls button:hover {
      background: var(--hover-bg);
  }

  .media {
      display: none;
      left: 60%;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      gap: 5px;
      align-items: flex-start;
      padding: 10px;
      border-radius: 8px;
      margin: 10px;
  }

  .control-group {
      display: flex;
      flex-direction: column;
      min-width: 150px;
  }

  .control-group label {
      color: var(--text-primary);
      margin-bottom: 5px;
      font-size: 0.9em;
  }

  .media-select {
      padding: 5px;
      width: 40px;
      border-radius: 4px;
      border: 1px solid var(--border-color);
      background: var(--input-bg);
      color: var(--text-primary);
      cursor: pointer;
  }

  .media-controls {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-top: 10px;
      width: 100%;
  }

  .video-buttons {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
  }

  .action-btn {
      padding: 8px 15px;
      border: none;
      border-radius: 4px;
      background: var(--accent-color);
      color: var(--bg-primary);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: background-color 0.3s;
  }

  .action-btn:hover {
      background: var(--button-hover);
      color: var(--text-primary);
  }

  .action-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
  }

  .action-btn i {
      font-size: 1em;
  }

  @media (max-width: 768px) {
      .media {
          flex-direction: row;
          align-items: stretch;
      }

      .control-group {
          width: 100%;
      }

      .video-buttons {
          flex-direction: row;
      }

      .action-btn {
          justify-content: center;
      }
  }

  .media-btn {
      position: fixed;
      top: 20px;
      left: 20px;
      padding: 12px 20px;
      background: var(--accent-color);
      color: var(--text-secondary);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      z-index: 2002;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .media-btn:hover {
      background: var(--text-primary);
      transform: translateY(-2px);
  }

  .media-menu {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      padding: 5px;
      width: 80%;
      display: none;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 5px;
      z-index: 2002;
      border-radius: 15px;
      backdrop-filter: blur(10px);
  }

  .media-menu.media {
      bottom: 200px;
  }

  .media-menu.visible {
      display: flex !important;
  }

  button.recording {
      background: var(--card-bg);
      color: var(--text-primary);
      border-color: var(--text-primary);
      animation: pulse 1.5s infinite;
  }

  @keyframes pulse {
      0% {
          transform: scale(1);
      }

      50% {
          transform: scale(1.05);
      }

      100% {
          transform: scale(1);
      }
  }

  #startRecordingBtn.recording {
      background: var(--card-bg);
      color: var(--text-primary);
      border-color: var(--text-primary);
      animation: recordingPulse 1s infinite;
  }

  @keyframes recordingPulse {
      0% {
          box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7);
      }

      70% {
          box-shadow: 0 0 0 10px rgba(255, 68, 68, 0);
      }

      100% {
          box-shadow: 0 0 0 0 rgba(255, 68, 68, 0);
      }
  }

  .icon {
      width: 16px;
      height: 16px;
      transition: all 0.3s ease;
  }

  .record-icon {
      fill: currentColor;
  }

  .stop-icon {
      fill: currentColor;
  }

  select {
      padding: 8px;
      border: 2px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      background: var(--input-bg);
      color: var(--button-text);
      cursor: pointer;
      width: 100px;
      position: relative;
  }

  .preview-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      z-index: 2002;
      justify-content: center;
      align-items: center;
  }

  .preview-content {
      background: var(--button-bg);
      border: 3px solid var(--border-color);
      border-radius: 15px;
      padding: 20px;
      max-width: 90%;
      max-height: 90%;
      position: relative;
      text-align: center;
      z-index: 2002;
  }

  .preview-video {
      max-width: 100%;
      max-height: 70vh;
      border-radius: 10px;
      margin-bottom: 15px;
  }

  .preview-record {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
  }

  .preview-btn {
      padding: 10px 20px;
      font-size: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .close-btn {
      position: absolute;
      top: 10px;
      left: 10px;
      background: var(--card-bg);
      border: none;
      color: var(--text-primary);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  #videorecord {
      display: none;
      align-items: center;
      gap: 10px;
      background: var(--card-bg);
      padding: 8px 12px;
      border-radius: 8px;
  }

  #startRecordingBtn:hover {
      background: var(--accent-color);
      color: var(--button-bg);
  }

  #previewRecordingBtn {
      display: none;
      padding: 5px 10px;
      background: var(--button-bg);
      color: var(--button-text);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      cursor: pointer;
  }

  #previewRecordingBtn:hover {
      background: var(--accent-color);
      color: var(--button-bg);
  }

  #startRecordingBtn span,
  #previewRecordingBtn span {
      display: none;
  }

  #downloadPreview[title]:hover::after,
  #closePreview[title]:hover::after,
  #closePreviewBtn[title]:hover::after {
      content: attr(title);
      position: absolute;
      background: var(--button-bg);
      color: var(--button-text);
      padding: 5px 10px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      margin-top: 5px;
      z-index: 2002;
      white-space: nowrap;
  }

  #startRecordingBtn[data-i18n-tooltip]:hover::after,
  #previewRecordingBtn[data-i18n-tooltip]:hover::after {
      content: attr(data-i18n-tooltip);
      position: absolute;
      background: var(--button-bg);
      color: var(--button-text);
      padding: 5px 10px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      margin-top: -30px;
      z-index: 2002;
      white-space: nowrap;
      direction: rtl;
  }

  .duration-input {
      width: 50px;
      height: 40px;
      padding: 5px;
      border-radius: 4px;
      border: 1px solid var(--border-color);
      background: var(--input-bg);
      color: var(--text-primary);
      text-align: center;
  }

  #previewToggle {
      display: none;
  }

  [data-i18n-tooltip] {
      position: relative;
  }

  [data-i18n-tooltip]:hover::after {
      content: attr(data-i18n-tooltip);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(24, 41, 73, 0.95);
      color: var(--button-text);
      padding: 8px 12px;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      font-size: 12px;
      white-space: nowrap;
      z-index: 2002;
      margin-bottom: 5px;
  }

  select[data-i18n-tooltip]:hover::after,
  .duration-input[data-i18n-tooltip]:hover::after {
      width: 50px;
      height: 40px;
      bottom: auto;
      top: 100%;
      margin-top: 5px;
  }

  .progress-bar {
      width: 100%;
      height: 4px;
      background: rgba(211, 167, 123, 0.3);
      border-radius: 2px;
      margin-top: 5px;
      overflow: hidden;
      display: none;
  }

  .progress-fill {
      height: 100%;
      background: var(--accent-color);
      width: 0%;
      transition: width 0.1s linear;
  }

  @media (max-width: 768px) {
      .media-menu {
          flex-direction: row;
          flex-wrap: wrap;
          width: 95%;
          padding: 10px;
      }

      .preview-record {
          flex-direction: row;
      }

      .preview-btn {
          width: 100%;
          justify-content: center;
      }

      [data-i18n-tooltip]:hover::after {
          font-size: 10px;
          padding: 6px 8px;
      }
  }

  #videoControls span {
      color: #d3a77b;
  }

  #startRecordingBtn {
      padding: 5px 10px;
      background: #182949;
      color: #d3a77b;
      border: 1px solid #d3a77b;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
  }

  .recording-button {
      padding: 5px 10px;
      background: #182949;
      color: #d3a77b;
      border: 1px solid #d3a77b;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
  }

  .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
  }

  /* تنسيقات الواقع المعزز المحسنة */
  .ar-toggle-btn {
      background: var(--button-bg);
      border: 1px solid var(--border-color);
      color: var(--border-color);
      padding: 4px;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.3s ease;
      font-size: 14px;
  }

  .ar-toggle-btn:hover {
      background: var(--button-bg);
      transform: translateY(-2px);
  }

  .ar-popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      height: 80%;
      max-width: 800px;
      background: var(--button-bg);
      border: 2px solid var(--border-color);
      border-radius: 15px;
      z-index: 10000;
      display: none;
      flex-direction: column;
  }

  .ar-popup.active {
      display: flex;
  }

  /*
.ar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--button-bg);
    border-bottom: 1px solid var(--border-color);
    border-radius: 15px 15px 0 0;
}
*/

  /*
.ar-header h3 {
    color: var(--border-color);
    margin: 0;
    font-size: 18px;
}
*/

  .close-ar-btn {
      background: none;
      border: none;
      color: var(--border-color);
      font-size: 20px;
      cursor: pointer;
      padding: 5px;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .close-ar-btn svg {
      transition:
          transform 0.3s ease,
          fill 0.3s ease;
      fill: var(--border-color);
      /* لون مبدئي للـ SVG */
  }

  .close-ar-btn:hover {
      background: var(--border-color);
      color: var(--bg-secondary);
  }

  .close-ar-btn:hover svg {
      transform: scale(1.2);
      /* تكبير بسيط عند الـ hover */
      fill: var(--bg-secondary);
      /* تغيير لون الـ SVG */
  }

  .ar-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 20px;
      gap: 15px;
  }

  #ar-scene-container {
      flex: 1;
      position: relative;
      background: var(--button-bg);
      border-radius: 10px;
      overflow: hidden;
      min-height: 400px;
  }

  .ar-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
  }

  .ar-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
  }

  .ar-loading {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: var(--border-color);
      background: var(--button-bg);
      z-index: 3;
  }

  .ar-controls {
      display: flex;
      gap: 10px;
      justify-content: center;
      align-items: center;
      width: 25%;
      height: 10%;
      flex-wrap: wrap;
  }

  .ar-control-btn {
      background: var(--button-bg);
      border: 2px solid var(--border-color);
      color: var(--border-color);
      width: 100px;
      height: 40px;
      padding: 10px 10px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 14px;
  }

  .ar-control-btn:hover {
      background: var(--border-color);
      color: var(--bg-secondary);
  }

  .ar-control-btn:hover svg {
      transform: scale(1.2);
      fill: var(--bg-secondary);
  }

  .ar-control-btn.stop-btn {
      background: rgba(231, 76, 60, 0.1);
      border-color: var(--border-color);
      color: var(--border-color);
  }

  .ar-control-btn.stop-btn:hover {
      background: var(--border-color);
  }

  .ar-instructions {
      text-align: center;
      color: var(--border-color);
      font-size: 12px;
      opacity: 0.8;
  }

  /* طبقة الخلفية المعتمة */
  .ar-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--button-bg);
      z-index: 9999;
      display: none;
  }

  .ar-overlay.active {
      display: block;
  }

  /* تنسيقات للهاتف */
  @media (max-width: 768px) {
      .ar-popup {
          width: 95%;
          height: 85%;
          max-width: none;
      }

      .ar-controls {
          flex-direction: column;
      }

      .ar-control-btn {
          width: 100%;
      }

      #ar-scene-container {
          min-height: 300px;
      }
  }

  /* تنسيقات إضافية للواقع المعزز */
  .ar-video {
      filter: brightness(1.1) contrast(1.1);
  }

  .ar-canvas {
      mix-blend-mode: normal;
  }

  /* تحسين الظهور على خلفيات مختلفة */
  .ar-popup {
      backdrop-filter: blur(10px);
  }

  #ar-scene-container {
      background: linear-gradient(45deg, #1a1a2e, #16213e);
  }

  #side-ad-right,
  #side-ad-left {
      position: fixed;
      top: 100px;
      width: 160px;
      height: auto;
      z-index: 9999;
  }

  #side-ad-right {
      right: 20px;
  }

  #side-ad-left {
      left: 20px;
  }

  /* إخفاء الإعلانات على الشاشات الصغيرة */
  @media (max-width: 1024px) {

      #side-ad-right,
      #side-ad-left {
          display: none;
      }
  }

  margin: 20px 0;
  text-align: center;
  }

  .ad-container {
      margin: 20px 0;
      text-align: center;
  }

  .ad-in-article {
      /* تنسيقات خاصة للإعلان داخل المقال */
  }

  .ad-image {
      /* تنسيقات خاصة للإعلان الصوري */
  }

  .ad-relaxed {
      /* تنسيقات خاصة لنمط الإعلان المريح */
  }

  .current-ratio {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 100;
      color: var(--text-primary);
      background-color: rgba(0, 0, 0, 0.5);
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: bold;
      pointer-events: none;
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.1);
  }