:root{
  --brand-1:#00b3e6;  /* תכלת */
  --brand-2:#0077cc;  /* כחול */
  --accent:#1db954;   /* ירוק עלה */
  --bg:#f7fafc;
  --card:#ffffff;
  --text:#0b1021;
  --muted:#667085;
  --border:#e4e7ec;
  --radius:16px;
  --shadow:0 6px 24px rgba(0,0,0,.06);
}

/* RTL בסיסי */
html{direction:rtl}
body{
  margin:0;
  font-family: "Rubik","Assistant","Heebo",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:linear-gradient(180deg,#f0fbff 0%, #f7fafc 40%, #f7fafc 100%);
}

/* Header */
.vw-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
  color:#fff;
  box-shadow: var(--shadow);
}
.vw-header-inner{
  max-width:1100px; margin:auto; display:flex; align-items:center; gap:14px;
  padding:12px 20px;
}
.vw-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
.vw-logo img{ height:68px; width:auto; border-radius:5px; background:#fff; padding:2px; }
.vw-title{ font-weight:700; letter-spacing:.3px; }
.vw-title .small{ font-size:12px; opacity:.9; margin-inline-start:10px; font-weight:400; }
.vw-nav{ margin-inline-start:auto; display:flex; gap:14px; align-items:center; }
.vw-nav a{ color:#fff; text-decoration:none; font-size:14px; opacity:.95; }
.vw-nav a:hover{ opacity:1; text-decoration:underline; }

/* Layout */
.vw-container{ max-width:1100px; margin:24px auto; padding:0 16px; }
.vw-grid{
  display:grid; gap:16px;
  grid-template-columns: 1.2fr .8fr;     /* מוכן לפאנל מידע */
}
@media (max-width: 900px){ .vw-grid{ grid-template-columns:1fr; } }

/* כרטיס מייל */
.vw-card{
  background:var(--card); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.vw-card .vw-card-head{
  padding:16px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.vw-badge{
  font-size:12px; color:#fff; background: linear-gradient(90deg,var(--brand-1),var(--brand-2));
  padding:6px 10px; border-radius:999px; box-shadow:0 2px 10px rgba(0,153,255,.2);
}
.vw-card-body{ padding:18px; line-height:1.75; }
.vw-card-body .vw-mail{ white-space:pre-wrap; }

/* פאנל מידע צד */
.vw-side{
  background:var(--card); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding:16px 18px;
}
.vw-side h3{ margin:0 0 8px; font-size:16px; }
.vw-kv{ display:grid; grid-template-columns: 120px 1fr; gap:6px 10px; font-size:14px; color:var(--muted); }
.vw-kv b{ color:var(--text); font-weight:600; }

/* Feedback bar */
.vw-actions{
  display:flex; gap:12px; align-items:center; justify-content:flex-start;
  background: #f9fbff; border-top:1px solid var(--border);
  padding:14px 18px; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius);
}
.vw-btn{
  appearance:none; border:1px solid transparent; cursor:pointer; font-weight:600;
  border-radius:14px; padding:10px 16px; transition:.2s ease; box-shadow: var(--shadow);
}
.vw-btn--primary{ color:#fff; background:linear-gradient(90deg,var(--brand-1),var(--brand-2)); }
.vw-btn--danger{ color:#fff; background:#e53935; }
.vw-btn:hover{ transform: translateY(-1px); }
.vw-note{ color:var(--muted); font-size:12.5px; margin-inline-start:auto; }

/* Spinner / מצב בהמתנה */
.vw-spinner{
  position: fixed; inset:0; display:none; place-items:center; background:rgba(255,255,255,.6); z-index:99;
}
.vw-spinner::after{
  content:""; width:42px; height:42px; border-radius:50%;
  border:4px solid #d1eaff; border-top-color: var(--brand-2); animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg);} }
body.is-loading .vw-spinner{ display:grid; }

/* טקסט עזר */
.muted{ color:var(--muted); font-size:13px; }
/* ---------- Feedback layout ---------- */
#feedbackSection{ margin-top:16px; }

#feedbackSection .vw-rating{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:nowrap;
  margin:8px 0 14px;
  direction: rtl; /* לשמירה על ימין->שמאל */
}

/* "גרוע" ו"טוב מאוד" בקצות הסקאלה */
#feedbackSection .vw-rating .end{
  min-width:56px;
  font-size:14px;
  color: var(--vw-muted, #6b7280);
}

/* שורת הכפתורים 1–5 */
#feedbackSection .vw-rating .scale{
  display:flex;
  gap:22px;             /* מרווח בין הציונים */
  align-items:flex-start;
}

/* כל ציון: עיגול למעלה ומספר מתחתיו */
#feedbackSection .vw-rating .scale label{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.1;
  font-size:14px;
  cursor:pointer;
}

/* רווח קטן בין הרדיובוקס למספר */
#feedbackSection .vw-rating .scale input[type="radio"]{
  margin-bottom:6px;
}

/* תיבת ההערות רחבה ונוחה */
#comments{
  width:100%;
  min-height:80px;
  box-sizing:border-box;
  resize:vertical;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  font: inherit;
}
/* סטטוס והודעות כלליות */
#status {
  font-size: 16px;
  color: var(--text);
  font-weight: 500;
}

/* הערה תחת הכפתורים */
.vw-note {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
}

/* הודעת אישור העתקה – בולטת במיוחד */
#copyConfirm {
  font-size: 16px;
  color: #b91c1c;            /* אדום כהה */
  font-weight: 700;
  background: #fee2e2;       /* רקע אדום בהיר */
  border: 1px solid #fca5a5; /* גבול אדום */
  padding: 10px 14px;
  border-radius: 12px;
}
/* שדות טפסים */
input[type="email"],
input[type="password"] {
  width: 50%;
  padding: 14px 12px;   /* גובה גדול יותר */
  margin-top: 6px;
  margin-bottom: 16px;  /* רווח אנכי נוח יותר */
  font-size: 16px;      /* פונט גדול וברור */
  border-radius: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* טפסי לוגין/הרשמה */
.vw-form-group {
  display: flex;
  flex-direction: column; /* שים אחד מתחת לשני כברירת מחדל */
  margin-bottom: 15px;
}

.vw-form-group label {
  margin-bottom: 6px;
  font-weight: 500;
}

.vw-form-group input {
  width: 100%;       /* שליטה ברוחב דרך ה־container */
  max-width: 400px;  /* מגביל שהשדות לא יהיו ענקיים */
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}
/* התאמת Select לשדות הטקסט */
.vw-form-group select{
  width:100%;
  max-width:400px;
  padding:10px;
  font-size:1rem;
  border:1px solid #ccc;
  border-radius:6px;
  background:#fff;
}

/* עטיפת טפסים כללית (לא חובה, אך נוח אם יש לך div/tags מסביב לטופס) */
.vw-card-body form { display:block; }

/* שדות טקסט/אימייל/טלפון/סיסמה — רוחב מלא ואחיד */
.vw-card-body input[type="text"],
.vw-card-body input[type="email"],
.vw-card-body input[type="tel"],
.vw-card-body input[type="password"],
.vw-card-body select,
.vw-card-body textarea {
  width: 100%;
  max-width: 560px;     /* כדי שלא יהיו ארוכים מדי במסכים רחבים */
  padding: 12px 10px;
  margin: 6px 0 14px;
  font-size: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-sizing: border-box;
}

/* טקסט־אזור */
.vw-card-body textarea {
  min-height: 120px;
  resize: vertical;
}

/* סליידרים (range) — לא משנה טווחים/לוגיקה, רק מייפה מעט */
.vw-card-body input[type="range"] {
  width: 100%;
  max-width: 560px;
  margin: 8px 0 16px;
}

/* תוויות ליד הסליידר (הטקסט שמציג מצב מילולי) אפשר להשאיר עם ה־ID הקיים שלך;
   כאן רק קצת טיפוגרפיה */
.vw-card-body .slider-label,
.vw-card-body .range-text,
.vw-card-body .help {
  display: inline-block;
  margin-inline-start: 8px;
  color: var(--muted);
  font-size: 14px;
}

/* קבוצה אופקית של תיבה + תווית (אם משתמשים ב־checkbox "אקראי") */
.vw-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* כפתורי השמירה/איפוס הקיימים שלך ייראו כחלק מה־UI */
.vw-card-body .vw-btn {
  margin-inline-end: 6px;
  
  /* שתי עמודות לטופס ההגדרות */
.settings-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;    /* ימין: בסיס, שמאל: סליידרים */
  gap: 24px;
  align-items:start;
}

/* צר מ- 900px: עמודה אחת, הכול אנכי */
@media (max-width: 900px){
  .settings-grid{ grid-template-columns: 1fr; }
}

/* כפתורי שמירה/איפוס – גדולים וברורים */
#saveBtn, #resetBtn{
  padding: 12px 18px;
  font-size: 16px;
  border-radius: 12px;
  line-height: 1.2;
}

/* טיפוסיות: שמירה = עיקרי, איפוס = קווי */
#saveBtn{
  color:#fff;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  border: none;
  box-shadow: var(--shadow);
}
#saveBtn:hover{ transform: translateY(-1px); }

#resetBtn{
  background:#fff;
  border:1px solid var(--border);
  color: var(--text);
}
#resetBtn:hover{ background:#f7fafc; }

/* ריווח ברור בין תיאור הסליידר לבין הכותרת של הבא בתור */
.slider-row .help,
.slider-row .muted,
.slider-row .desc{
  display:block;
  margin: 6px 0 14px;   /* רווח תחתון גבוה לפני הכותרת הבאה */
  color: var(--muted);
  font-size: 13px;
}

/* אם אין לך wrapper בשם .slider-row סביב כל סליידר – עדיין נוסיף ריווח
   בין ה-range לבין מה שאחריו, כדי שלא יידבק לכותרת הבאה */
input[type="range"]{
  margin-bottom: 14px;
}

/* שדות טקסט/בחירה בטופס (גובה נעים) – בלי לשנות IDs/לוגיקה */
.col-basic input[type="text"],
.col-basic input[type="email"],
.col-basic input[type="tel"],
.col-basic select{
  width: 100%;
  padding: 12px 10px;
  font-size: 15px;
  border:1px solid #e5e7eb;
  border-radius: 10px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
}

/* עמודת הסליידרים – שהשורות יהיו מרווחות גם כשאין עטיפות */
.col-sliders label{ font-weight:600; display:block; margin: 0 0 4px; }
.col-sliders .random-row{ margin-top:6px; margin-bottom:10px; }  /* “אקראי” */

}
/* ===== Settings: two-column grid ===== */
.vw-settings-grid{
  display:grid;
  grid-template-columns: 420px 1fr;  /* ימין – פרטים; שמאל – סליידרים */
  gap:24px;
}
@media (max-width: 900px){
  .vw-settings-grid{ grid-template-columns:1fr; }
}

/* עמודת הימין (שדות טקסט) */
.vw-col-right .vw-field{ margin-bottom:14px; }

/* עמודת השמאל (סליידרים) */
.vw-col-left .vw-field{ margin-bottom:22px; }

/* תיאור מילולי של ערך הסליידר – רווח ברור מתחתיו */
.vw-help{ display:block; color:var(--muted); margin:6px 0 12px; }

/* כפתורים גדולים יותר */
.vw-btn--lg{ font-size:16px; padding:12px 22px; border-radius:14px; }


/* === Settings: range rows – align like original === */
.slider-row{
  /* 0 | [==== range ====] | 100 | [value badge] */
  display: grid;
  grid-template-columns: 3ch minmax(220px,1fr) 4ch max-content;
  align-items: center;
  gap: 8px;
  direction: ltr;         /* הסליידר עצמו שמאלה>ימינה */
}

.slider-row span{ 
  white-space: nowrap; 
  font-variant-numeric: tabular-nums;
}

.slider-row > span:first-child{ text-align: start; } /* 0 */
.slider-row > span:nth-child(3){ text-align: end; }  /* 100 */

.slider-row .badge{
  justify-self: end;      /* המספר תמיד בצד ימין של השורה */
  min-width: 3.2ch;
}

/* מרווח ברור בין תווית הטווח לבין הכותרת של הסליידר הבא */
.slider-row + .small{
  margin-top: 6px;
  margin-bottom: 14px;
  display: block;
}

/* ה־toggle ("אקראי") נשאר מעל השורה, רק יישור קל ורווח קטן */
.toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

/* מראה אחיד ונעים לסרגל עצמו (לא חובה, אבל תורם) */
.slider-row input[type="range"]{
  -webkit-appearance: none;
  height: 6px;
  border-radius: 999px;
  background: #e6eef7;
}
.slider-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(90deg,var(--brand-1),var(--brand-2));
  border: 0;
}
.slider-row input[type="range"]::-moz-range-thumb{
  width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: linear-gradient(90deg,var(--brand-1),var(--brand-2));
}

/* הוספה לקוד — באדג' לערך המספרי (מציג רקע מובחן) */
.badge{
  display:inline-block;
  background:#eef2ff;       /* רקע עדין שמבדיל מהמספרים 0/100 */
  color:#1e3a8a;
  border-radius:999px;
  padding:.15rem .5rem;
  font-size:.8rem;
  min-width:3.2ch;
  text-align:center;
  font-variant-numeric: tabular-nums;
}


/* הוספה לקוד — מצב מנוטרל כשהוגדר "אקראי" */
.slider-row.dim{
  opacity:.5;
  filter: grayscale(.6);
}
input[type="range"]:disabled{
  cursor: not-allowed;
}

/* הוספה לקוד — כותרת מימין ו"אקראי" משמאל */
.slider-head{
  display:flex;
  align-items:center;
  justify-content:space-between;  /* כותרת בצד ימין, "אקראי" בצד שמאל (RTL) */
  margin-bottom:.35rem;
}
.vw-field > .slider-row{ margin-top:.1rem; }     /* יציבות קלה לשורה 2 */
.slider-row + .small{                            /* שורה 3 */
  margin-top:6px;
  margin-bottom:14px;
  display:block;
}
.slider-head .toggle{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin-inline-start:auto;       /* דוחף את האקראי לקצה השמאלי */
}

/* (אופציונלי) כיתוב עזר קטן */
.small{ font-size:.85rem; color:#555; }