/* حذف فونت‌های قبلی و افزودن فونت‌های جدید مطابق درخواست */
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

/* ===== ROOT SYSTEM TOKENS – پالت رنگی جدید ===== */
:root { 
  --bg-main: #000000; 
  --bg-panel: #000000; 
  --bg-glass: rgba(0,0,0,0.96); 
  --border: #FFFFFF; 
  --border-secondary: #333333; 
  --border-tertiary: #FFFFFF; 
  --divider: #222222; 
  --text-main: #FFFFFF; 
  --text-muted: #CCCCCC; 
  --text-accent: #FFFFFF; 
  --highlight: #CCCCCC; 
  --highlight-strong: #FFFFFF; 
  --radius: 0; 
  --transition: .09s cubic-bezier(.58,1.5,.5,1); 
  --shadow: 0 2px 10px 0 #00000040; 
  --shadow-hover: 0 0 0 2px var(--text-accent),0 2px 8px 0 #0000001c; 
  --input-bg: #000000; 
  --input-border: #333333; 
  --input-focus: #FFFFFF; 
  --input-placeholder: #777777; 
  --chip-bg: #000000; 
  --chip-hover-bg: #000000; 
  --chip-active-bg: #000000; 
  --chip-hover-text: #FFFFFF; 
  --chip-active-text: #FFFFFF; 
  --button-bg: #000000; 
  --button-hover-bg: #000000; 
  --button-text: #FFFFFF; 
  --button-hover-text: #FFFFFF; 
  --button-focus-outline: #FFFFFF; 
  --notification-bg: #000000; 
  --notification-border: #FFFFFF; 
  --notification-text: #FFFFFF; 
  --field-label-bright: #CCCCCC; 
  --focus-outline: 2px solid #FFFFFF; 
  --active-outline: 2px solid #FFFFFF; 
  --scrollbar-thumb: #FFFFFF; 
  --scrollbar-track: #222222; 
  --error-underline: #FFFFFF; 
  --warning-underline: #FF9900; 
  --code-bg: #000000; 
  --code-border: #FFFFFF; 
  --code-accent: #FFFFFF; 
  --code-keyword: #FFFFFF; 
  --code-variable: #FFFFFF; 
  --code-string: #00CC66; 
  --code-comment: #777777; 
  --code-function: #FFFFFF; 
  --code-number: #FFCC00; 
  --code-line: #333333; 
  --code-line-active: #1A1A1A; 
  --code-linenum: #555555; 
  --code-linenum-bg: #181818; 
  --code-suggestion-bg: #1E1E1E; 
  --code-suggestion-border: #FFFFFF; 
}

/* ===== GLOBAL RESET ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
  height: 100%;
}
body {
  background: var(--bg-main);
  color: var(--text-main);
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
  font-size: clamp(.85rem,.8rem + .1vw,.95rem);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  background-image: none;
  background-size: unset;
  margin: 0;
  letter-spacing: 0.01em;
}

/* ===== LTR DIRECTION ADJUSTMENTS ===== */
.text-field, .user-square, .field-input {
  direction: ltr;
  text-align: left;
}

/* ===== MAIN CONTAINER ===== */
.customizable-text-container {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding: 1.2rem 1.2rem;
  background: var(--bg-main) !important;
  background-image: none !important;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), border-color var(--transition);
  position: relative;
  /* overflow: hidden; */ /* REMOVE THIS LINE */
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
  font-size: .95em;
  /* --- ADDED FOR REQUEST --- */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.customizable-text-container::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: none !important;
  mix-blend-mode: unset;
}
.customizable-text-container > * {
  position: relative;
  z-index: 1;
}
.customizable-text-container:hover,
.customizable-text-container:focus-within {
  border-color: var(--highlight);
}

/* ===== NEURAL GENE SECTION WRAPPER (NEW) ===== */
.neural-gene-section {
  background: var(--bg-panel);
  border: 2px solid var(--border-tertiary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
  margin-top: 0.5rem;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  padding: 0;
  /* Make sure it stands out as a section */
}

/* ==== SECTION TITLES ==== */
.neural-gene-section .neural-gene-title,
.section-title,
#variablesSection .section-title {
  color: var(--text-main);
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--divider);
  padding: .85rem 1.2rem .85rem 1.2rem;
  background: var(--bg-panel);
}
.section-title,
#variablesSection .section-title {
  font-size: .92rem !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  margin-bottom: .5rem !important;
  border-bottom: 1px solid var(--divider) !important;
  padding-bottom: .5rem !important;
}
.section-title svg {
  width: 15px;
  height: 15px;
  color: var(--highlight);
  stroke: var(--highlight);
}

/* ==== BLOCK TITLES & VARIABLE TITLES ==== */
.square-title,
.variable-controls .section-title,
.variable-controls .variable-title {
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: .91em;
  margin-bottom: 0.3em;
  text-align: center;
  width: 100%;
  display: block;
}

/* ==== TEXT IN BLOCKS ==== */
.text-field,
.user-square,
.locked-square,
.block-modal-content {
  font-family: 'Kanit', Arial, Helvetica, sans-serif;
  font-weight: 400;
}

/* ==== VARIABLE STYLE ==== */
.variable {
  color: var(--text-accent);
  font-weight: 400;
  background: #1A1A1A;
  border-radius: var(--radius);
  padding: 0 3px;
  margin: 0 1px;
  font-size: .93em;
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
  font-weight: 400;
}

/* ==== FIELD INPUTS ==== */
.field-input {
  font-family: 'Kanit', Arial, Helvetica, sans-serif;
  font-weight: 400;
}

/* ==== MAIN CONSOLE CONTAINER ==== */
.neural-gene-section .main-console-container {
  width: 100%;
  max-width: 100%;
  padding: 1.2rem 1.2rem 1.2rem 1.2rem;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
}

/* Adjust the main prompt container and its children to fit inside the new wrapper */
@media (max-width:768px) {
  .neural-gene-section {
    margin-bottom: .8rem;
    margin-top: .3rem;
    padding: 0;
  }
  .neural-gene-section .neural-gene-title,
  .section-title,
  #variablesSection .section-title {
    font-size: .92rem;
    padding: .7rem .5rem .7rem .5rem;
  }
  .neural-gene-section .main-console-container {
    padding: .7rem .5rem .7rem .5rem;
  }
}

/* ------------------------------------------------------------
   TEXT FIELD & CONTROLS
------------------------------------------------------------ */
.text-field-container {
  position: relative;
  margin: 0 auto 2.2rem;
  width: 100%;
}
.text-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: .5rem;
  flex-wrap: wrap;
  gap: .35rem;
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
  font-size: .93em;
}
.copy-button-container {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  order: 0;
  margin-left: auto;
}
.model-container {
  order: 1;
  margin-right: .15rem;
}
.architecture-container {
  order: 2;
  margin-right: .15rem;
}
.char-count {
  order: 3;
}

/* ------------------------------ ACTION BUTTONS ------------------------------ */
.action-button {
  background: var(--button-bg);
  border: 2px solid var(--border-tertiary);
  color: var(--button-text);
  padding: 3px 9px;
  min-width: 36px;
  min-height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
  font-size: .85rem;
  font-weight: 500;
  text-transform: uppercase;
  transition: background var(--transition),color var(--transition),border-color var(--transition),box-shadow .09s cubic-bezier(.43,1.7,.58,1),transform .09s cubic-bezier(.43,1.7,.58,1);
  box-shadow: none;
  outline: none;
  position: relative;
  user-select: none;
  line-height: 1.15;
  overflow: hidden;
  z-index: 1;
  border-radius: 0;
  letter-spacing: 0.04em;
}
.action-button:focus-visible {
  outline: var(--focus-outline);
  border-color: var(--highlight);
}
.action-button:active {
  transform: scale(.97);
}
.action-button svg {
  width: 14px;
  height: 14px;
  stroke: var(--highlight);
  transition: stroke var(--transition);
}
.action-button:hover,
.action-button:focus {
  background: var(--button-hover-bg);
  color: var(--button-hover-text);
  border-color: var(--highlight);
}
.action-button:hover svg,
.action-button:focus svg {
  stroke: var(--button-hover-text);
}
.copy-button {
  border-color: var(--highlight);
  color: var(--highlight);
  background: var(--button-bg);
  box-shadow: none;
}
.copy-button:hover,
.copy-button:focus {
  background: var(--highlight);
  color: var(--button-hover-text);
  border-color: var(--highlight);
}

/* ------------------------------ CHAR COUNT ------------------------------ */
.char-count {
  color: var(--highlight);
  font-size: .85rem;
  padding: 2px 7px;
  min-width: 32px;
  text-align: right;
  display: flex;
  align-items: center;
  gap: .15em;
  user-select: none;
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
}
.char-count .token-label {
  opacity: .76;
  margin-left: 2px;
}

/* ------------------------------ TEXT FIELD ------------------------------ */
.text-field {
  background: var(--bg-panel);
  color: #EDEAE0 !important;
  padding: .7rem .7rem .4rem;
  border: 2px solid var(--highlight);
  border-radius: var(--radius);
  min-height: 54px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'Kanit', Arial, Helvetica, sans-serif;
  font-size: .92rem;
  font-weight: 400;
  box-shadow: none;
  transition: border-color var(--transition),box-shadow var(--transition);
  outline: none;
  overflow-x: auto;
  margin-bottom: .03rem;
  letter-spacing: 0.01em;
}
.text-field:hover,
.text-field:focus {
  border-color: var(--highlight-strong);
}
.text-field:focus-visible {
  outline: var(--focus-outline);
}
.variable {
  color: var(--text-accent);
  font-weight: 400;
  background: #1A1A1A;
  border-radius: var(--radius);
  padding: 0 3px;
  margin: 0 1px;
  font-size: .93em;
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
  font-weight: 400;
}

/* ------------------------------------------------------------
   CONTROL SECTIONS
------------------------------------------------------------ */
.controls-section,
.variable-controls {
  background: var(--bg-panel);
  padding: .8rem .8rem .3rem;
  border-radius: var(--radius);
  margin-bottom: .8rem;
  border: 2px solid var(--border-secondary);
  box-shadow: none;
  transition: border-color var(--transition),box-shadow var(--transition);
  position: relative;
  width: 100%;
  max-width: 100%;
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
  font-size: .93em;
}
.controls-section:hover,
.controls-section:focus-within,
.variable-controls:hover,
.variable-controls:focus-within {
  border-color: var(--highlight);
}

/* ------------------------------ FIELD GROUPS ------------------------------ */
.field-group {
  display: flex;
  justify-content: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: .7rem;
}
.field-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 92px;
  max-width: 132px;
}
.variable-controls .field-container {
  flex: 1 1 0;
  max-width: 100%;
  min-width: 140px;
}
.variable-controls .field-input {
  width: 100%;
}

/* ------------------------------ LABELS & INPUTS ------------------------------ */
.field-label {
  color: var(--field-label-bright);
  margin-bottom: .15rem;
  font-weight: 600;
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
  text-transform: capitalize;
  font-size: .87rem;
  letter-spacing: .01em;
  text-align: center;
  user-select: none;
}

/* =================== تغییر اختصاصی: بوردر سفید کمرنگ برای فیلدهای ورودی متغیرها (به جز لاکد) =================== */
#variablesInner .field-input:not(.locked-var) {
  border: 2px solid rgba(255,255,255,0.45) !important;
  border-radius: 0;
  transition: border-color var(--transition),box-shadow var(--transition),background var(--transition);
}
#variablesInner .field-input:not(.locked-var):focus,
#variablesInner .field-input:not(.locked-var):focus-visible {
  border: 2px solid #fff !important;
  background: #181818;
  color: var(--highlight);
  outline: var(--focus-outline);
}
/* =================== پایان تغییر اختصاصی =================== */

/* ========== CUSTOM OVERRIDES FOR INPUT FIELDS ========== */
.field-input {
  background: var(--input-bg);
  color: #EDEAE0 !important;
  border: 1px solid var(--border-tertiary);
  border-radius: var(--radius);
  padding: 2px 4px; /* thinner padding */
  width: 60%;       /* less width */
  font-size: .62rem; /* smaller font */
  font-family: 'Kanit', Arial, Helvetica, sans-serif;
  font-weight: 400;
  transition: border-color var(--transition),box-shadow var(--transition),background var(--transition);
  box-shadow: none;
  outline: none;
  margin-bottom: 1px;
  letter-spacing: .01em;
}
.field-input:focus-visible,
.field-input:focus {
  outline: var(--focus-outline);
  border-color: var(--input-focus);
  background: #181818;
  color: var(--highlight);
}
.field-input::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
  font-weight: 300;
  font-size: .6rem;
}
.variable-controls .field-input {
  border-color: var(--text-accent)!important;
  width: 50%; /* even thinner in variables section */
  font-size: .56rem; /* even smaller font in variables section */
}
.variable-controls .field-input:focus {
  border-color: var(--input-focus)!important;
}

/* ------------------------------------------------------------
   MODEL & ARCHITECTURE DROPDOWNS
------------------------------------------------------------ */
.architecture-container,
.model-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.architecture-menu,
.model-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-panel);
  border: 2px solid var(--border-secondary);
  border-top: none;
  min-width: 145px;
  max-height: 210px;
  overflow-y: auto;
  box-shadow: none;
  z-index: 9900;
  display: none;
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
  font-size: .87rem;
}
.architecture-option,
.model-item {
  padding: 6px 10px;
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
  font-size: .87rem;
  cursor: pointer;
  color: var(--text-main);
  transition: background var(--transition),color var(--transition);
}
.architecture-option:hover,
.model-item:hover {
  background: var(--chip-hover-bg);
  color: var(--chip-hover-text);
}
.architecture-option.active,
.model-item.active {
  background: var(--chip-active-bg);
  color: var(--chip-active-text);
}

/* ------------------------------------------------------------
   USER SQUARES
------------------------------------------------------------ */
.user-square {
  background: var(--bg-panel);
  border: 2px solid var(--border-tertiary);
  border-radius: var(--radius);
  box-shadow: none;
  padding: .5em;
  min-height: 100px;
  white-space: pre-wrap;
  color: #EDEAE0 !important;
  transition: border-color var(--transition),box-shadow var(--transition),background var(--transition);
  overflow: auto;
  font-family: 'Kanit', Arial, Helvetica, sans-serif;
  font-size: .92em;
}
.user-square:focus,
.user-square:hover {
  border-color: var(--highlight);
  outline: none;
}
.square-title {
  font-weight: 400;
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
  font-size: .91em;
  margin-bottom: 0.3em;
  text-align: center;
  width: 100%;
  display: block;
}

/* ------------------------------------------------------------
   EXAMPLES SECTION
------------------------------------------------------------ */
.example-row {
  margin-bottom: 1em;
  padding: .5em 0;
  border-bottom: 1px solid var(--divider);
}
.example-row input.field-input {
  max-width: 100%;
}

/* ------------------------------------------------------------
   ADJUST SIDE PANEL (MOBILE) – NATIVE SCROLLBAR TWEAKS
------------------------------------------------------------ */
#adjustPopup {
  scrollbar-gutter: stable;
}
#adjustPopup::-webkit-scrollbar {
  width: 6px;
}
#adjustPopup::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
#adjustPopup::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 0;
}

/* ------------------------------------------------------------
   RESPONSIVE TWEAKS
------------------------------------------------------------ */
@media (max-width:768px) {
  .text-controls {
    gap: .25rem;
  }
  .action-button {
    font-size: .75rem;
    padding: 2px 7px;
    min-width: 28px;
  }
  .char-count {
    font-size: .7rem;
  }
  .architecture-menu,
  .model-menu {
    min-width: 120px;
  }
  .user-square {
    flex: 1 1 100%;
  }
  .customizable-text-container {
    width: 100%;
    margin: 0;
    padding: .7rem .5rem;
    min-height: 100vh;
  }
  .text-field {
    font-size: .8rem;
  }
  .field-input {
    font-size: .52rem;
    padding: 1px 3px;
    width: 75%;
  }
  .variable-controls .field-input {
    font-size: .46rem;
    width: 60%;
  }
}
@media (max-width:600px) {
  .block-modal-content {
    min-width: 0;
    padding: .7em 0.3em .7em 0.3em;
  }
}

/* ------------------------------------------------------------
   MODEL SELECTION SECTION (kept hidden)
------------------------------------------------------------ */
.model-selection-section {
  display: none!important;
}

/* ======= CUSTOM OVERRIDES (PREVIOUS REQUESTS) ======= */
#variablesContainer > h3[data-i18n="customize_variables"] {
  display: none!important;
}
#variablesInner label {
  display: none!important;
}
#variablesInner > div > div:first-child {
  text-align: center!important;
}

/* ======================================================================
   MOBILE-SPECIFIC OVERRIDES – FULL-WIDTH CONSOLE & COMPACT TOP CONTROLS
====================================================================== */
@media (max-width:768px) {
  #mainTextControls .model-container,
  #mainTextControls .architecture-container {
    display: none!important;
  }
  .text-controls {
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: .2rem;
  }
  .copy-button-container {
    flex-wrap: nowrap;
  }
  body {
    font-size: clamp(.75rem,.7rem + .1vw,.84rem);
  }
  .action-button {
    font-size: .7rem;
    padding: 2px 6px;
    min-width: 24px;
    min-height: 18px;
  }
  .char-count {
    font-size: .7rem;
    padding: 1px 5px;
    white-space: nowrap;
  }
  .text-field {
    font-size: .75rem;
  }
  .copy-button-container .button-text {
    display: none!important;
  }
}

/* =======================================================================
   NEW OVERRIDES – REMOVE WRAPPING CONTAINER AROUND BLOCKS & VARIABLES
======================================================================= */
#customizationSection {
  padding: 0!important;
  background: transparent!important;
  border: none!important;
  box-shadow: none!important;
}
#customizationSection > .section-title {
  margin-bottom: .8rem!important;
  border: none!important;
  padding-bottom: .45rem!important;
}
#customizationSection > .controls-section {
  margin-bottom: .8rem!important;
}
#blocksSection,
#variablesSection {
  width: 100%!important;
}

/* =======================================================================
   NEW OVERRIDE – REMOVE “CUSTOMIZATION” TITLE
======================================================================= */
#customizationSection > .section-title {
  display: none!important;
}

/* =========================================================================
   FULL-WIDTH MOBILE “ADJUST” SIDEMENU + ACCORDION-STYLE DROPDOWNS
========================================================================= */
#adjustPopup .architecture-container,
#adjustPopup .model-container {
  width: 100%;
  display: block;
  margin: 0 0 .65rem 0;
}
#adjustPopup .architecture-container > .action-button,
#adjustPopup .model-container > .action-button {
  width: 100%;
  justify-content: space-between;
  padding: 7px 10px;
  font-size: .85rem;
}
#adjustPopup .architecture-menu,
#adjustPopup .model-menu {
  position: relative;
  top: 0;
  right: auto;
  left: 0;
  width: 100%;
  min-width: 100%;
  border: 2px solid var(--border-secondary);
  border-top: none;
  max-height: 210px;
  overflow-y: auto;
  display: none;
  box-shadow: none;
}
#adjustPopup .architecture-menu,
#adjustPopup .model-menu {
  border-left: none;
  border-right: none;
}
#adjustPopup .architecture-menu.open,
#adjustPopup .model-menu.open {
  display: block;
}
#adjustPopup .architecture-option,
#adjustPopup .model-item {
  width: 100%;
  padding: 7px 10px;
  font-size: .85rem;
}
@media (max-width:768px) {
  #adjustPopup .architecture-container > .action-button,
  #adjustPopup .model-container > .action-button {
    padding: 8px 12px;
    font-size: .8rem;
  }
  #adjustPopup .architecture-option,
  #adjustPopup .model-item {
    padding: 8px 12px;
  }
}

/* ------------------------------------------------------------
   ACCESSIBILITY: PREFER-REDUCED-MOTION
------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition: none!important;
    animation-duration: 0ms!important;
  }
}

/* =======================================================================
   NEW OVERRIDES – REMOVE GLOW EFFECT
======================================================================= */
.customizable-text-container:hover,
.customizable-text-container:focus-within,
.action-button:hover,
.action-button:focus,
.action-button:active,
.copy-button:hover,
.copy-button:focus,
.text-field:hover,
.text-field:focus,
.controls-section:hover,
.controls-section:focus-within,
.variable-controls:hover,
.variable-controls:focus-within,
.user-square:focus,
.user-square:hover {
  box-shadow: none!important;
}
.text-field-container {
  margin-bottom: .8em!important;
}
.controls-section {
  margin-top: .8em!important;
}
.controls-section .section-title {
  margin-bottom: 0.3em!important;
}

/* ===== Locked (non-editable) square style ===== */
.locked-square {
  border: 2px solid var(--border-tertiary)!important;
  background: var(--bg-panel);
  padding: .7em;
  border-radius: 0;
  overflow: auto;
  min-width: 180px;
  min-height: 100px;
  box-sizing: border-box;
  font-family: 'Kanit', Arial, Helvetica, sans-serif;
  font-size: .85em;
  line-height: 1.25em;
  direction: ltr;
  user-select: text;
  white-space: pre-wrap;
  color: #EDEAE0 !important;
}
.user-square,
.locked-square {
  flex: 1 1 180px;
  max-width: 100%;
  height: 100%;
}
.variable {
  font-weight: 400;
  color: var(--highlight);
}
.field-input.locked-var {
  border: 2px solid var(--border-tertiary)!important;
}
.block-controls-row {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3em;
}
.block-controls-row .action-button {
  padding: 2px 7px;
  min-width: 22px;
  min-height: 18px;
  font-size: .85em;
}
.square-title {
  font-weight: 400;
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
  font-size: .91em;
  margin-bottom: 0.3em;
  text-align: center;
  width: 100%;
  display: block;
}
/* جداکننده بین بلاک‌های قفل‌شده و معمولی */
.locked-blocks-row {
  display: flex;
  gap: .7em;
  flex-wrap: wrap;
  margin-bottom: 1em;
  border-bottom: 2px dashed var(--border-tertiary);
  padding-bottom: .8em;
}
.user-blocks-row {
  display: flex;
  gap: .7em;
  flex-wrap: wrap;
  margin-top: .8em;
}
/* ========== تغییرات بوردر برای بلوک‌های کاربری (user-blocks-row) ========== */
.user-blocks-row > div {
  border: 2px solid var(--border-secondary);
  border-radius: 0;
  margin-bottom: .7em;
  background: var(--bg-panel, #18191f);
  box-shadow: none;
  padding: .7em .7em .3em .7em;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* ========== تغییرات بوردر برای کنترل‌های بلاک ========== */
.block-controls-row {
  border-top: 1px solid var(--border-secondary);
}
/* ========== تغییرات بوردر برای مودال نمایش کامل متن ========== */
.block-modal-content {
  border: 2px solid var(--border-tertiary);
  border-radius: 0;
}
/* ========== تغییرات بوردر برای منوهای مدل و معماری ========== */
.architecture-menu,
.model-menu,
#adjustPopup .architecture-menu,
#adjustPopup .model-menu {
  border: 2px solid var(--border-secondary);
  border-radius: 0;
}
/* ========== تغییرات بوردر برای فیلدهای ورودی معمولی ========== */
.field-input:not(.locked-var) {
  border: 2px solid var(--border-tertiary);
  border-radius: 0;
}
/* ========== تغییرات بوردر برای notification ========== */
#notification,
.notification {
  border: 2px solid var(--border-tertiary);
  border-radius: 0;
}

/* =================== اسکرول‌بار =================== */
::-webkit-scrollbar {
  width: 7px;
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 0;
}
::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

/* =================== استایل کد =================== */
pre, code, .code-block {
  font-family: 'JetBrains Mono', 'Fira Code', 'IBM Plex Mono', 'Consolas', 'monospace';
  font-variant-ligatures: contextual;
  background: var(--code-bg);
  color: var(--code-variable);
  border: 2px solid var(--code-border);
  border-radius: 0;
  padding: .8em .9em .8em .9em;
  margin: .7em 0;
  font-size: .89em;
  line-height: 1.5;
  overflow-x: auto;
  position: relative;
  box-shadow: none;
  direction: ltr;
  tab-size: 2;
  letter-spacing: 0.01em;
}
/* خطوط عمودی نشانگر تورفتگی */
pre, code, .code-block {
  background: var(--code-bg);
  box-shadow: none;
}
.code-block .indent-guide,
pre .indent-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--code-line);
  left: calc(var(--indent-level, 1) * 1.5em);
  z-index: 1;
  opacity: 0.7;
}
/* شماره خطوط سمت راست (برای فارسی) */
.code-block, pre {
  counter-reset: linenumber;
  direction: ltr;
}
.code-block code, pre code {
  display: block;
  padding-right: 2.2em;
  position: relative;
}
.code-block code > span, pre code > span {
  display: block;
  position: relative;
  padding-right: 0.3em;
}
.code-block code > span::after, pre code > span::after {
  counter-increment: linenumber;
  content: counter(linenumber);
  position: absolute;
  right: -2.1em;
  top: 0;
  color: var(--code-linenum);
  background: var(--code-linenum-bg);
  min-width: 1.7em;
  text-align: center;
  font-size: 0.88em;
  font-family: inherit;
  opacity: 0.95;
  border-radius: 0;
  padding: 0 0.15em;
  direction: rtl;
  user-select: none;
}
/* هایلایت خط فعال */
.code-block code > span.active, pre code > span.active {
  background: var(--code-line-active);
}
/* سینتکس هایلایت */
.token.keyword, .hljs-keyword {
  color: var(--code-keyword);
  font-weight: 700;
}
.token.variable, .hljs-variable, .token.constant {
  color: var(--code-variable);
}
.token.string, .hljs-string {
  color: var(--code-string);
}
.token.comment, .hljs-comment {
  color: var(--code-comment);
  font-style: italic;
}
.token.function, .hljs-function, .hljs-title.function_ {
  color: var(--code-function);
}
.token.number, .hljs-number {
  color: var(--code-number);
}
.token.operator, .hljs-operator {
  color: var(--code-accent);
}
.token.class-name, .hljs-class {
  color: var(--code-function);
  font-weight: 600;
}
.token.punctuation, .hljs-punctuation {
  color: var(--code-variable);
}
.token.property, .hljs-attr {
  color: var(--code-variable);
}
.token.selector, .hljs-selector-tag {
  color: var(--code-keyword);
}
.token.tag, .hljs-tag {
  color: var(--code-keyword);
}
.token.attr-name, .hljs-attribute {
  color: var(--code-variable);
}
.token.builtin, .hljs-built_in {
  color: var(--code-function);
}
.token.regex, .hljs-regexp {
  color: #FFCC00;
}
.token.symbol, .hljs-symbol {
  color: var(--code-accent);
}
.token.deleted, .hljs-deletion {
  color: #2c60ac;
  background: #330000;
}
.token.inserted, .hljs-addition {
  color: #00CC66;
  background: #003322;
}
/* خط موج‌دار خطا و هشدار */
.code-block .error-underline, pre .error-underline {
  border-bottom: 2px wavy var(--error-underline);
}
.code-block .warning-underline, pre .warning-underline {
  border-bottom: 2px wavy var(--warning-underline);
}
/* تکمیل کد */
.code-suggestion-list {
  background: var(--code-suggestion-bg);
  border: 2px solid var(--code-suggestion-border);
  border-radius: 0;
  box-shadow: none;
  font-family: 'JetBrains Mono', 'Fira Code', 'IBM Plex Mono', 'Consolas', 'monospace';
  color: var(--text-main);
  padding: 0.2em 0;
  margin-top: 0.1em;
  min-width: 120px;
  z-index: 10000;
  position: absolute;
  right: 0;
  left: auto;
  animation: fadeInFast .13s;
  font-size: .85em;
}
.code-suggestion-list .suggestion-item {
  padding: 0.25em .7em;
  cursor: pointer;
  transition: background .09s;
  border-radius: 0;
}
.code-suggestion-list .suggestion-item.selected,
.code-suggestion-list .suggestion-item:hover {
  background: var(--button-hover-bg);
  color: var(--button-hover-text);
}
/* انیمیشن سریع */
@keyframes fadeInFast {
  from { opacity: 0; transform: translateY(8px);}
  to { opacity: 1; transform: none;}
}
/* سایه کم فقط برای جداسازی لایه‌ها */
.block-modal-content {
  box-shadow: 0 8px 32px 0 #00000044;
}

/* =================== سایر استایل‌های کد اصلی =================== */
.locked-square-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  opacity: 0.7;
  pointer-events: none;
}
.locked-block-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 180px;
  max-width: 100%;
}
.block-controls-row {
  display: flex;
  gap: 0.3em;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--border-secondary);
  margin-top: 0.4em;
  padding-top: 0.2em;
  background: none;
  box-shadow: none;
  width: 100%;
}
.block-controls-row .action-button {
  margin: 0;
  border: none;
  background: none;
  box-shadow: none;
  outline: none;
  padding: 0 0.15em;
  min-width: 0;
  min-height: 0;
  font-size: .85em;
  display: flex;
  align-items: center;
  transition: background 0.09s;
}
.block-controls-row .action-button:active,
.block-controls-row .action-button:focus {
  background: none;
  outline: none;
}
.block-controls-row .reset-block-btn {
  margin-right: 0.05em;
  margin-left: 0;
  order: 0;
}
.block-controls-row .copy-block-btn {
  order: 1;
}
.block-controls-row .delete-block-btn {
  order: 2;
}
.user-blocks-row > div {
  border: 2px solid var(--border-secondary);
  border-radius: 0;
  margin-bottom: .7em;
  background: var(--bg-panel, #18191f);
  box-shadow: none;
  padding: .7em .7em .3em .7em;
  display: flex;
  flex-direction: column;
  position: relative;
}
.user-square {
  min-height: 40px;
  outline: none;
  margin-bottom: 0.1em;
  font-family: inherit;
  font-size: .92em;
  background: none;
  border: none;
  padding: 0;
  word-break: break-word;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  transition: box-shadow 0.09s;
}
.user-square--clamped {
  max-height: calc(1.5em * 10 + 2px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 1.2em;
  box-shadow: none;
}
.user-square-fade {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  height: 2em;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(18,18,18,0) 0%, rgba(18,18,18,0.85) 80%, rgba(18,18,18,1) 100%);
  border-radius: 0 0 0 0;
  transition: opacity 0.09s;
  opacity: 1;
}
.user-square-fade-icon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.3em;
  z-index: 3;
  cursor: pointer;
  background: rgba(18,18,18,0.85);
  border-radius: 0;
  padding: 0.15em;
  box-shadow: 0 2px 8px 0 #00000033;
  transition: background 0.09s, box-shadow 0.09s;
  opacity: 0.85;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-square-fade-icon:hover {
  background: #23242a;
  opacity: 1;
  box-shadow: 0 4px 16px 0 #00000044;
}
/* برای دکمه‌ها فقط آیکن نمایش داده شود */
.block-controls-row .button-text {
  display: none;
}
/* فاصله کم بین دکمه ری‌ست و کپی */
.block-controls-row .reset-block-btn {
  margin-right: 0.05em;
}
.block-controls-row .copy-block-btn {
  margin-left: 0.05em;
  margin-right: 0.05em;
}
.block-controls-row .delete-block-btn {
  margin-left: 0.05em;
}
/* دکمه‌ها هاور ساده */
.block-controls-row .action-button:hover {
  background: #23242a22;
  border-radius: 0;
}
/* مودال نمایش کامل متن */
.block-modal-overlay {
  position: fixed;
  z-index: 10010;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.block-modal-content {
  background: var(--bg-panel, #18191f);
  border-radius: 0;
  border: 2px solid var(--border-tertiary);
  box-shadow: 0 8px 32px 0 #00000055;
  padding: 1.2em 1em 1em 1em;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  min-width: 220px;
  min-height: 80px;
  font-size: .89em;
  line-height: 1.3em;
  color: #EDEAE0 !important;
  word-break: break-word;
}
.block-modal-close {
  position: absolute;
  top: .7em;
  right: .7em;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.09s;
  z-index: 2;
}
.block-modal-close:hover {
  opacity: 1;
}

/* =================== تغییر رنگ متن اصلی پرامپت و متن درون بلاک‌ها =================== */
.text-field,
.user-square,
.locked-square,
.block-modal-content {
  color: #EDEAE0 !important;
}

/* =================== تغییر رنگ locked block ها به #EDEAE0 =================== */
.locked-square {
  color: #EDEAE0 !important;
}
.text-field [data-locked="true"],
.text-field .locked-indicator,
.text-field .locked-block-text,
#promptContent [class*="locked"]:not(.locked-square),
.prompt-area [class*="locked"]:not(.locked-square) {
  color: #EDEAE0 !important;
}
.text-field [locked],
.text-field [data-type="locked"] {
  color: #EDEAE0 !important;
}
.text-field *[class*="lock"]:not(.locked-square) {
  color: #EDEAE0 !important;
}

/* =================== تغییر رنگ همه متون معمولی (به جز عنوان‌ها) =================== */
body,
.customizable-text-container,
.controls-section,
.variable-controls,
.field-label,
.field-group,
.field-container,
.text-controls,
.copy-button-container,
.model-container,
.architecture-container,
.char-count,
.user-blocks-row,
.locked-blocks-row,
.example-row,
.block-controls-row,
.block-modal-content,
.code-block,
pre,
code,
.score-value,
.criterion-item,
#promptRatingPanel,
.history-nav-btns-container,
.add-block-btn-wrapper,
.add-example-btn-wrapper,
.add-block-btn,
.add-example-btn,
.ch-white,
.ch-blue,
.ch-yellow,
.ch-red,
.ch-light {
  color: #EDEAE0 !important;
}

/* اما عنوان‌ها و section-title و square-title و variable title رنگ خود را حفظ می‌کنند */

/* =================== عنوان متغیرها در بخش variables کوچکتر و هم‌اندازه عنوان بلاک =================== */
#variablesSection .section-title {
  font-size: .92rem !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  margin-bottom: .5rem !important;
  border-bottom: 1px solid var(--divider) !important;
  padding-bottom: .5rem !important;
}

/* Rating System Styles */
.criterion-item {
  transition: background var(--transition);
}
.criterion-item:hover {
  background: var(--button-hover-bg) !important;
}
.score-value {
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}
#ratePromptBtn:active {
  transform: translateY(0) !important;
}
#promptRatingPanel {
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), border-color var(--transition);
}
#promptRatingPanel:hover {
  border-color: var(--highlight);
}

/* دکمه‌های برگشت و جلو */
.history-nav-btn {
  background: var(--bg-panel);
  border: none !important;
  border-radius: var(--radius);
  min-width: 28px;
  min-height: 28px;
  padding: 2px 5px;
  margin: 0 0.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-main);
  font-size: .9em;
}
.history-nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.history-nav-btn svg {
  display: block;
}
.history-nav-btn .button-text {
  display: none;
}
.history-nav-btns-container {
  display: flex;
  align-items: center;
  gap: 0.1em;
  margin-left: 0.5em;
  flex-direction: row-reverse;
}

/* =================== تغییرات اختصاصی درخواست =================== */
/* دکمه‌های + پایین-وسط، فقط آیکن، بدون بوردر، شبیه دکمه بلاک‌ها */
.add-block-btn-wrapper,
.add-example-btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.7em;
  margin-bottom: 0.2em;
  width: 100%;
}
.add-block-btn,
.add-example-btn {
  background: none;
  border: none;
  color: var(--highlight);
  box-shadow: none;
  outline: none;
  border-radius: 0;
  padding: 0.18em 0.18em;
  min-width: 0;
  min-height: 0;
  font-size: 1.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.09s, color 0.09s;
  cursor: pointer;
}
.add-block-btn svg,
.add-example-btn svg {
  width: 28px;
  height: 28px;
  stroke: var(--highlight);
  display: block;
}
.add-block-btn:hover,
.add-block-btn:focus,
.add-example-btn:hover,
.add-example-btn:focus {
  background: #23242a22;
  color: var(--button-hover-text);
}
.add-block-btn:active,
.add-example-btn:active {
  background: #23242a33;
}
.add-block-btn .button-text,
.add-example-btn .button-text {
  display: none !important;
}
/* دکمه‌های COPY و RESET کوچکتر */
.copy-button-container .action-button {
  font-size: .78em;
  padding: 2px 6px;
  min-width: 22px;
  min-height: 18px;
  border-radius: 0;
}
.copy-button-container .action-button svg {
  width: 13px;
  height: 13px;
}
.copy-button-container .button-text {
  display: none !important;
}
@media (max-width:768px) {
  .add-block-btn svg,
  .add-example-btn svg {
    width: 22px;
    height: 22px;
  }
  .add-block-btn,
  .add-example-btn {
    font-size: 1.2em;
  }
  .copy-button-container .action-button {
    font-size: .7em;
    padding: 1px 4px;
    min-width: 18px;
    min-height: 14px;
  }
  .copy-button-container .action-button svg {
    width: 11px;
    height: 11px;
  }
}

/* =================== FUTURISTIC SCROLLABLE PROMPT CONTENT =================== */
#promptContent {
  position: relative;
  max-height: 400px;
  min-height: 80px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid #2c60ac;
  border-radius: 8px;
  padding: 15px;
  background: linear-gradient(135deg, #1a1b23 0%, #23242a 100%);
  box-shadow: 0 4px 15px rgba(44, 96, 172, 0.1);
  /* For Firefox */
  scrollbar-width: thin;
  scrollbar-color: #00d4ff #1a1b23;
  /* Make sure it doesn't shrink if flex parent */
  flex-shrink: 0;
  flex-grow: 0;
  /* Prevent container from growing with content */
  width: 100%;
  box-sizing: border-box;
  /* For stacking scroll indicators */
  z-index: 2;
}

/* Webkit browsers (Chrome, Safari, Edge) */
#promptContent::-webkit-scrollbar {
  width: 12px;
}
#promptContent::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #1a1b23 0%, #23242a 50%, #1a1b23 100%);
  border-radius: 10px;
  border: 1px solid #2c60ac;
  box-shadow: inset 0 0 5px rgba(44, 96, 172, 0.2);
}
#promptContent::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00d4ff 0%, #2c60ac 50%, #0099cc 100%);
  border-radius: 10px;
  border: 2px solid #1a1b23;
  box-shadow: 
    0 0 10px rgba(0, 212, 255, 0.5),
    inset 0 0 5px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
}
#promptContent::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #00ffff 0%, #00d4ff 50%, #2c60ac 100%);
  box-shadow: 
    0 0 15px rgba(0, 255, 255, 0.8),
    inset 0 0 8px rgba(255, 255, 255, 0.3);
  transform: scaleY(1.1);
}
#promptContent::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #ffffff 0%, #00ffff 50%, #00d4ff 100%);
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.9),
    inset 0 0 10px rgba(0, 212, 255, 0.5);
}
#promptContent::-webkit-scrollbar-corner {
  background: #1a1b23;
}

/* Futuristic glow effect for scrollbar */
#promptContent::-webkit-scrollbar-thumb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent);
  border-radius: 10px;
  animation: scrollGlow 2s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes scrollGlow {
  0% { opacity: 0.3; }
  100% { opacity: 0.7; }
}

/* Firefox scrollbar styling */
@supports (scrollbar-width: thin) {
  #promptContent {
    scrollbar-width: thin;
    scrollbar-color: #00d4ff #1a1b23;
  }
}

/* Scroll indicators (top and bottom fade) */
#promptContent::before,
#promptContent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#promptContent::before {
  top: 0;
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.2) 0%, transparent 100%);
}
#promptContent::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 212, 255, 0.2) 0%, transparent 100%);
}
#promptContent.has-scroll::before,
#promptContent.has-scroll::after {
  opacity: 1;
}

/* Futuristic glow effect when scrolling */
#promptContent.scrolling {
  box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.3);
}

/* Custom scrollbar indicators */
#promptContent::selection {
  background: #00d4ff;
  color: #1a1b23;
}

/* =================== رنگ‌های سفارشی =================== */
.ch-white { color: #EDEAE0 !important; }
.ch-blue { color: #EDEAE0 !important; }
.ch-yellow { color: #EDEAE0 !important; }
.ch-red { color: #EDEAE0 !important; }
.ch-light { color: #EDEAE0 !important; }


/* =================== NEURAL GENE SECTION: ADJUSTMENTS FOR INNER CONSOLE =================== */
/* Make sure the main prompt container fits inside the new section */
.neural-gene-section .main-console-container > .text-controls,
.neural-gene-section .main-console-container > .text-field-container {
  width: 100%;
  max-width: 100%;
}

/* Remove extra margin from .text-field-container when inside neural-gene-section */
.neural-gene-section .main-console-container > .text-field-container {
  margin-bottom: 1.2rem !important;
}

@media (max-width:768px) {
  .neural-gene-section .main-console-container > .text-field-container {
    margin-bottom: .7rem !important;
  }
}

/* Ensure the neural-gene-section is always above blocks section visually */
#blocksSection {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =================== COPIED TO CLIPBOARD NOTIFICATION FIX =================== */
#notification,
.notification {
  position: fixed !important;
  left: 50% !important;
  bottom: 32px !important;
  transform: translateX(-50%) !important;
  z-index: 10050 !important;
  min-width: 180px;
  max-width: 90vw;
  text-align: center;
  pointer-events: none;
  background: var(--notification-bg);
  color: var(--notification-text);
  border: 2px solid var(--notification-border);
  border-radius: 0;
  padding: 0.7em 1.2em;
  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: 400;
  box-shadow: 0 4px 24px 0 #00000055;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(.43,1.7,.58,1), visibility 0.22s cubic-bezier(.43,1.7,.58,1);
}
#notification.show,
.notification.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: notifFadeIn 0.22s cubic-bezier(.43,1.7,.58,1);
}
@keyframes notifFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(16px);}
  to   { opacity: 1; transform: translateX(-50%) translateY(0);}
}
/* ===================== Custom Futuristic Slider Styles ===================== */

/* Make the slider fill the full width of its container */
.field-slider {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  height: 2.2em;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: box-shadow 0.18s, filter 0.18s;
  filter: drop-shadow(0 0 0.5em #2c60ac33);
}

/* Remove background and border for a clean look */
.field-slider::-webkit-slider-runnable-track {
  height: 0.38em;
  background: linear-gradient(90deg, #2c60ac 0%, #e3e3e3 100%);
  border-radius: 7px;
  box-shadow: 0 0 0 1.5px #2c60ac33;
  transition: background 0.18s;
}
.field-slider:focus::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #2c60ac 0%, #d2e3fa 100%);
  box-shadow: 0 0 0 2px #2c60ac55;
}

.field-slider::-moz-range-track {
  height: 0.38em;
  background: linear-gradient(90deg, #2c60ac 0%, #e3e3e3 100%);
  border-radius: 7px;
  box-shadow: 0 0 0 1.5px #2c60ac33;
  transition: background 0.18s;
}
.field-slider:focus::-moz-range-track {
  background: linear-gradient(90deg, #2c60ac 0%, #d2e3fa 100%);
  box-shadow: 0 0 0 2px #2c60ac55;
}

.field-slider::-ms-fill-lower {
  background: #2c60ac;
  border-radius: 7px;
}
.field-slider::-ms-fill-upper {
  background: #e3e3e3;
  border-radius: 7px;
}
.field-slider:focus::-ms-fill-lower {
  background: #2c60ac;
}
.field-slider:focus::-ms-fill-upper {
  background: #d2e3fa;
}

/* Thumb styles: simple, futuristic, blue border, no shadow */
.field-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #2c60ac;
  box-shadow: 0 0 0 2px #2c60ac22;
  transition: border-color 0.15s, box-shadow 0.18s;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.field-slider:focus::-webkit-slider-thumb {
  border-color: #1a3a6e;
  box-shadow: 0 0 0 3px #2c60ac55;
}

.field-slider::-moz-range-thumb {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #2c60ac;
  box-shadow: 0 0 0 2px #2c60ac22;
  transition: border-color 0.15s, box-shadow 0.18s;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.field-slider:focus::-moz-range-thumb {
  border-color: #1a3a6e;
  box-shadow: 0 0 0 3px #2c60ac55;
}

.field-slider::-ms-thumb {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #2c60ac;
  box-shadow: 0 0 0 2px #2c60ac22;
  transition: border-color 0.15s, box-shadow 0.18s;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.field-slider:focus::-ms-thumb {
  border-color: #1a3a6e;
  box-shadow: 0 0 0 3px #2c60ac55;
}

/* Remove default outline and border for all browsers */
.field-slider:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px #2c60ac55;
  filter: drop-shadow(0 0 0.7em #2c60ac44);
}

/* Hide the tooltip on IE */
.field-slider::-ms-tooltip {
  display: none;
}

/* Remove background for the input itself */
.field-slider {
  background: transparent !important;
}

/* Hide ticks for a clean look */
.field-slider::-webkit-slider-thumb:before,
.field-slider::-webkit-slider-thumb:after,
.field-slider::-webkit-slider-runnable-track:before,
.field-slider::-webkit-slider-runnable-track:after {
  display: none !important;
}

/* Remove border for the input itself */
.field-slider {
  border: none !important;
}

/* Remove extra padding/margin for the slider */
.field-slider {
  padding: 0 !important;
  margin: 0 !important;
}

/* Make the slider thumb slightly glow on hover/focus */
.field-slider:hover::-webkit-slider-thumb,
.field-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px #2c60ac33, 0 0 0.5em #2c60ac44;
}
.field-slider:hover::-moz-range-thumb,
.field-slider:focus::-moz-range-thumb {
  box-shadow: 0 0 0 4px #2c60ac33, 0 0 0.5em #2c60ac44;
}
.field-slider:hover::-ms-thumb,
.field-slider:focus::-ms-thumb {
  box-shadow: 0 0 0 4px #2c60ac33, 0 0 0.5em #2c60ac44;
}

/* Remove focus outline for all browsers */
.field-slider:focus-visible {
  outline: none !important;
}

/* Make sure the slider is always full width of its container */
.variablesInner .field-slider,
#variablesInner .field-slider,
.variables-inner .field-slider {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block;
}

/* Slider label (variable name) above the slider */
.slider-label,
.field-slider-label {
  display: block;
  font-family: 'Titillium Web', 'Montserrat', 'Inter', sans-serif;
  font-size: 1.09em;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #2c60ac;
  margin-bottom: 0.25em;
  margin-top: 0.1em;
  text-align: left;
  text-shadow: 0 1px 0 #fff, 0 0 0.5em #e3e3e3;
  user-select: none;
  pointer-events: none;
}

/* If the label is generated as a <label> above the slider */
.variablesInner label[for^="slider_"],
#variablesInner label[for^="slider_"] {
  display: block;
  font-family: 'Titillium Web', 'Montserrat', 'Inter', sans-serif;
  font-size: 1.09em;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #2c60ac;
  margin-bottom: 0.25em;
  margin-top: 0.1em;
  text-align: left;
  text-shadow: 0 1px 0 #fff, 0 0 0.5em #e3e3e3;
  user-select: none;
  pointer-events: none;
}

/* Slider options (numbers) below the slider */
.slider-options,
.field-slider-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 0.18em;
  font-size: 0.97em;
  font-family: 'Titillium Web', 'Montserrat', 'Inter', sans-serif;
  color: #2c60ac;
  letter-spacing: 0.01em;
  min-height: 1.5em;
  user-select: none;
}

.variablesInner .slider-options span,
#variablesInner .slider-options span,
.field-slider-options span {
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  opacity: 0.65;
  font-weight: 400;
  cursor: pointer;
  transition: opacity 0.12s, font-weight 0.12s, color 0.12s;
  color: #23242a;
  border-radius: 4px;
  padding: 0.05em 0.18em;
  background: transparent;
  outline: none;
  border: none;
}

.variablesInner .slider-options span.selected,
#variablesInner .slider-options span.selected,
.field-slider-options span.selected {
  opacity: 1;
  font-weight: 700;
  color: #2c60ac;
  background: #e3e3e3;
  box-shadow: 0 0 0 2px #2c60ac22;
}

/* On hover, highlight the number */
.variablesInner .slider-options span:hover,
#variablesInner .slider-options span:hover,
.field-slider-options span:hover {
  opacity: 1;
  color: #2c60ac;
  background: #d2e3fa;
  font-weight: 700;
  box-shadow: 0 0 0 2px #2c60ac22;
}

/* Responsive: make sure slider and options never overflow */
@media (max-width: 600px) {
  .field-slider,
  .slider-options,
  .field-slider-options {
    font-size: 0.95em;
    min-width: 0 !important;
    max-width: 100vw !important;
  }
}

/* Add a subtle futuristic glow to the slider track on focus */
.field-slider:focus::-webkit-slider-runnable-track {
  box-shadow: 0 0 0 2.5px #2c60ac55, 0 0 0.5em #2c60ac33;
}
.field-slider:focus::-moz-range-track {
  box-shadow: 0 0 0 2.5px #2c60ac55, 0 0 0.5em #2c60ac33;
}
.field-slider:focus::-ms-fill-lower,
.field-slider:focus::-ms-fill-upper {
  box-shadow: 0 0 0 2.5px #2c60ac55, 0 0 0.5em #2c60ac33;
}

/* Remove outline on click for all browsers */
.field-slider:active,
.field-slider:focus {
  outline: none !important;
}

/* Hide default ticks and marks for a minimal look */
.field-slider::-webkit-slider-thumb:before,
.field-slider::-webkit-slider-thumb:after,
.field-slider::-webkit-slider-runnable-track:before,
.field-slider::-webkit-slider-runnable-track:after {
  display: none !important;
}
.field-slider::-ms-tooltip {
  display: none;
}

/* Make sure the slider is always visually centered */
.field-slider {
  vertical-align: middle;
  display: block;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Add a subtle blue glow to the slider thumb on hover/focus */
.field-slider:hover::-webkit-slider-thumb,
.field-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px #2c60ac22, 0 0 0.5em #2c60ac44;
}
.field-slider:hover::-moz-range-thumb,
.field-slider:focus::-moz-range-thumb {
  box-shadow: 0 0 0 6px #2c60ac22, 0 0 0.5em #2c60ac44;
}
.field-slider:hover::-ms-thumb,
.field-slider:focus::-ms-thumb {
  box-shadow: 0 0 0 6px #2c60ac22, 0 0 0.5em #2c60ac44;
}

/* Hide the outline for the slider input on click/focus for all browsers */
.field-slider:focus-visible {
  outline: none !important;
}

/* ===================== End Custom Futuristic Slider Styles ===================== */

@media (max-width:600px) {
  #notification,
  .notification {
    bottom: 16px !important;
    min-width: 120px;
    font-size: .92em;
    padding: 0.5em 0.7em;
  }
}