/* ============================================================
   CV Builder — style.css
   Corrected responsive preview version
   ============================================================ */

@font-face{
  font-family:"SiteFont";
  src:url("NizarbeINSportBlack.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#0c111d;
  --bg2:#141b2e;
  --panel:rgba(255,255,255,.06);
  --panel-solid:#161d30;
  --ink:#eef1f8;
  --muted:#9aa5bb;
  --line:rgba(255,255,255,.12);
  --brand:#3b82f6;
  --brand2:#6366f1;
  --radius:16px;
  --shadow:0 14px 40px rgba(0,0,0,.35);
  --accent:#2563eb;
  --site-font:"SiteFont","Cairo","Inter",system-ui,sans-serif;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  overflow-x:hidden;
}

body{
  font-family:var(--site-font);
  background:radial-gradient(1200px 700px at 50% -15%, #2b3a67 0%, #141b2e 55%, #0c111d 100%) fixed;
  color:var(--ink);
  min-height:100vh;
}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:12px 22px;
  background:rgba(12,17,29,.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:18px;
  flex-shrink:0;
}

.brand-mark{
   color:#fff; 
  border-radius:11px;
  display:grid;
  place-items:center;
  font-size:14px;
  letter-spacing:.5px; 
}

.controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.ctrl{
  display:flex;
  flex-direction:column;
  font-size:11px;
  color:var(--muted);
  gap:3px;
}

.ctrl select,
.ctrl input[type="color"]{
  font-size:13px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:9px;
  background:rgba(255,255,255,.06);
  color:var(--ink);
  cursor:pointer;
}

.ctrl select option{
  background:#161d30;
  color:#eef1f8;
}

.ctrl input[type="color"]{
  padding:2px;
  width:46px;
  height:34px;
}

/* ---------- Buttons ---------- */
.btn{
  border:none;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  padding:10px 16px;
  border-radius:11px;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
  font-family:inherit;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:7px;
  letter-spacing:.2px;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{transform:translateY(0);}

.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
  box-shadow:0 6px 18px rgba(59,130,246,.4);
}
.btn-primary:hover{ box-shadow:0 10px 26px rgba(59,130,246,.55); filter:brightness(1.05); }

.btn-ghost{
  background:rgba(255,255,255,.07);
  color:var(--ink);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(4px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); }

/* subtle leading dot/icon feel via emoji-free clean look; give the primary
   button a tiny shine on the left for a more "app" feel */
.btn-primary::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.85); box-shadow:0 0 8px rgba(255,255,255,.7);
}

.btn-add{
  background:rgba(59,130,246,.2);
  color:#93b4ff;
  padding:6px 12px;
  font-size:12px;
  border:1px solid rgba(59,130,246,.35);
}

.btn-add:hover{background:rgba(59,130,246,.32);}

.btn-remove{
  background:rgba(220,38,38,.15);
  color:#ff8a8a;
  border:1px solid rgba(220,38,38,.35);
  font-size:12px;
  padding:5px 10px;
  border-radius:7px;
  cursor:pointer;
}

.btn-remove:hover{background:rgba(220,38,38,.28);}

/* ---------- Layout ---------- */
.layout{
  display:grid;
  grid-template-columns:minmax(320px,420px) minmax(0,1fr);
  gap:22px;
  padding:22px;
  align-items:start;
}

/* ---------- Form side ---------- */
.form-pane{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-height:calc(100vh - 110px);
  overflow-y:auto;
  padding-right:4px;
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(6px);
}

.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.card-title{
  font-size:15px;
  margin:0 0 12px;
  font-weight:700;
  color:var(--ink);
}

.card-head .card-title{margin:0;}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:10px;
}

.field:last-child{margin-bottom:0;}

.field label{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}

.field input,
.field textarea,
.field select{
  width:100%;
  font-family:inherit;
  font-size:13px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:rgba(255,255,255,.05);
  color:var(--ink);
  transition:.15s;
}

.field input::placeholder,
.field textarea::placeholder{
  color:#6b7691;
}

.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color:var(--brand);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(59,130,246,.25);
}

.field input[type="file"]{
  padding:7px;
  color:var(--muted);
}

.field textarea{resize:vertical;}

/* ---------- Dynamic rows ---------- */
.repeat-item{
  border:1px solid var(--line);
  border-radius:11px;
  padding:13px;
  margin-bottom:11px;
  background:rgba(255,255,255,.04);
  position:relative;
}

.repeat-item:last-child{margin-bottom:0;}

.repeat-head{
  display:flex;
  justify-content:flex-end;
  margin-bottom:8px;
}

.repeat-list:empty{display:none;}

.inline-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.custom-items{
  margin-top:10px;
  border-top:1px dashed var(--line);
  padding-top:10px;
}

/* ---------- Preview side ---------- */
.preview-pane{
  position:sticky;
  top:96px;
  min-width:0;
}

.preview-scroll{
  max-height:calc(100vh - 120px);
  overflow:auto;
  border-radius:14px;
  display:flex;
  justify-content:center;
  padding:6px;
}

/* ---------- A4 CV ---------- */
.cv{
  width:210mm;
  min-height:297mm;
  background:#fff;
  color:#111;
  padding:18mm 16mm;
  box-shadow:0 10px 40px rgba(0,0,0,.15);
  font-size:12.5px;
  line-height:1.5;
  transform-origin:top center;
  flex-shrink:0;
}

/* Desktop scaling */
@media (max-width:1500px){
  .cv:not(.exporting){
    transform:scale(.82);
    margin-bottom:-90mm;
  }
}

@media (max-width:1100px){
  .cv:not(.exporting){
    transform:none;
    margin-bottom:0;
  }
}

/* ---------- PDF Export ---------- */
.cv.exporting{
  transform:none !important;
  margin:0 !important;
  width:794px !important;
  min-height:1123px !important;
  padding:64px 56px;
  box-shadow:none;
}

.cv.exporting.cv-modern{padding:0;}
.cv.exporting.cv-modern .cv-main{padding:60px 44px;}
.cv.exporting.cv-modern .cv-sidebar{padding:60px 32px;}

/* ---------- CV content ---------- */
.cv-section{margin-bottom:16px;}
.cv-section:last-child{margin-bottom:0;}

.cv h1{
  font-size:26px;
  margin:0;
}

.cv .cv-role{
  font-size:14px;
  margin:2px 0 0;
}

.cv-contact{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  font-size:11.5px;
  margin-top:8px;
}

.cv-contact span{white-space:nowrap;}

.cv-sec-title{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin:0 0 8px;
  padding-bottom:4px;
}

.cv-item{margin-bottom:10px;}
.cv-item:last-child{margin-bottom:0;}

.cv-item-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.cv-item-title{
  font-weight:700;
  font-size:12.5px;
}

.cv-item-sub{
  color:#444;
  font-size:11.5px;
}

.cv-item-date{
  color:#666;
  font-size:11px;
  white-space:nowrap;
}

.cv-desc{
  margin-top:3px;
  font-size:11.5px;
  color:#333;
  white-space:pre-wrap;
}

.cv-skill-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.cv-skill-tags span{
  font-size:11.5px;
  padding:3px 10px;
  border-radius:20px;
  background:#eef1f6;
}

.cv-langs{
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
}

.cv-lang{font-size:11.5px;}
.cv-lang b{font-weight:700;}

.cv-avatar{
  width:90px;
  height:90px;
  border-radius:50%;
  object-fit:cover;
  background:#dfe5ee;
  display:block;
  flex-shrink:0;
}

.cv-header-row{
  display:flex;
  gap:18px;
  align-items:center;
}

.cv-header-text{flex:1;}

.cv a{
  color:inherit;
  text-decoration:none;
}

/* ---------- Classic template ---------- */
.cv-classic{font-family:var(--site-font);}

.cv-classic .cv-sec-title{
  border-bottom:2px solid #111;
  color:#111;
}

.cv-classic .cv-skill-tags span{
  background:#f0f0f0;
  border:1px solid #ddd;
}

.cv-classic h1{color:#111;}

/* ---------- Modern template ---------- */
.cv-modern{
  font-family:var(--site-font);
  padding:0;
  display:flex;
}

.cv-modern .cv-sidebar{
  background:var(--accent);
  color:#fff;
  width:34%;
  padding:16mm 9mm;
  flex-shrink:0;
  min-width:0;
}

.cv-modern .cv-main{
  padding:16mm 12mm;
  flex:1;
  min-width:0;   /* lets the main column fill width and wrap text properly */
}

.cv-modern h1{
  color:#fff;
  font-size:23px;
}

.cv-modern .cv-role{color:#eef;}

.cv-modern .cv-avatar{
  width:96px;
  height:96px;
  border:3px solid rgba(255,255,255,.6);
  margin:0 auto 12px;
}

.cv-modern .cv-sidebar .cv-sec-title{
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.5);
}

.cv-modern .cv-main .cv-sec-title{
  color:var(--accent);
  border-bottom:2px solid var(--accent);
}

.cv-modern .cv-sidebar .cv-contact{
  flex-direction:column;
  gap:6px;
}

.cv-modern .cv-sidebar .cv-skill-tags span{
  background:rgba(255,255,255,.18);
  color:#fff;
}

.cv-modern .cv-sidebar a,
.cv-modern .cv-sidebar .cv-desc{
  color:#fff;
}

.cv-modern .cv-main .cv-item-title{color:#111;}

/* ---------- RTL ---------- */
[dir="rtl"] body,
body[dir="rtl"]{
  font-family:var(--site-font);
}

.cv[dir="rtl"]{font-family:var(--site-font);}

.cv[dir="rtl"] .cv-item-head{
  flex-direction:row-reverse;
}

[dir="rtl"] .ctrl{align-items:flex-start;}

.cv[dir="rtl"] .cv-sec-title{
  text-transform:none;
  letter-spacing:0;
}

.cv[dir="rtl"]{text-rendering:auto;}

.ltr-fix{
  unicode-bidi:isolate;
  direction:ltr;
  display:inline-block;
}

/* ============================================================
   RESPONSIVE FIX
   ============================================================ */

@media (max-width:1100px){
  .layout{
    display:flex;
    flex-direction:column;
    padding:16px;
    gap:18px;
  }

  .form-pane{
    width:100%;
    max-height:none;
    overflow:visible;
    padding-right:0;
  }

  .preview-pane{
    width:100%;
    position:static;
  }

  .preview-scroll{
    width:100%;
    max-height:none;
    overflow-x:auto;
    overflow-y:hidden;
    padding:14px;
    justify-content:center;
  }

  .grid-2,
  .inline-2{
    grid-template-columns:1fr;
  }

  .card{padding:15px;}
}

@media (max-width:700px){
  .topbar{
    padding:10px 14px;
    gap:10px;
  }

  .brand{font-size:16px;}
  .brand-mark{
    
    
  }

  .controls{
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-start;
  }

  .ctrl{font-size:10px;}
  .ctrl select{padding:6px 7px;font-size:12px;}
  .btn{padding:8px 11px;font-size:12px;}

  .layout{
    padding:12px;
  }

  .card{
    border-radius:12px;
    padding:13px;
  }

  .field input,
  .field textarea,
  .field select{
    font-size:14px;
  }

  .preview-scroll{
    width:100%;
    overflow:hidden;
    justify-content:center;
    padding:12px;
  }
}

@media (max-width:430px){
  .preview-scroll{
    justify-content:center;
    padding:10px;
  }
}

/* ============================================================
   PRINT
   ============================================================ */

@media print{
  @page{
    size:A4 portrait;
    margin:0;
  }

  .no-print{
    display:none !important;
  }

  body{
    background:#fff;
  }

  .layout{
    display:block;
    padding:0;
    margin:0;
  }

  .preview-pane{
    position:static;
  }

  .preview-scroll{
    max-height:none;
    overflow:visible;
    padding:0;
    display:block;
  }

  .cv{
    transform:none !important;
    margin:0 !important;
    box-shadow:none;
    width:210mm;
    min-height:297mm;
  }
}

/* ============================================================
   Ad slots + footer
   ============================================================ */

.ad-slot{
  width: min(100%, 970px);
  min-height: 90px;
  margin: 20px auto;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  font-size: 14px;
  text-align: center;
}

@media (max-width: 768px){
  .ad-slot{
    width: calc(100% - 24px);
    min-height: 70px;
    margin: 14px auto;
    font-size: 13px;
  }
}
.ad-slot ins{
  display:block;
  width:100%;
}

@media (max-width:1100px){
  .ad-slot{
    padding:0 16px;
    min-height:90px;
  }
}

@media (max-width:700px){
  .ad-slot{
    margin-top:12px;
    padding:0 12px;
    min-height:60px;
  }
}

@media (max-width:430px){
  .ad-slot{
    min-height:50px;
    padding:0 10px;
  }
}

.site-footer{
  margin-top:30px;
  padding:25px 15px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(8px);
}

.footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.footer-links a{
  color:#93b4ff;
  text-decoration:none;
  font-size:14px;
  transition:.2s;
}

.footer-links a:hover{
  color:#ffffff;
  text-decoration:none;
}

.footer-copy{
  color:var(--muted);
  font-size:13px;
}

@media (max-width:700px){
  .site-footer{
    padding:20px 12px;
  }

  .footer-links{
    flex-direction:column;
    gap:10px;
  }

  .footer-links a{
    display:block;
    width:100%;
  }
}
/* ============================================================
   PER-SECTION COLOR (set via --sec-color on .cv-section)
   When a section has a chosen color, recolor its heading,
   underline and key accents. Falls back to template defaults.
   ============================================================ */
.cv-section[style*="--sec-color"] .cv-sec-title{
  color:var(--sec-color) !important;
  border-bottom-color:var(--sec-color) !important;
}
.cv-section[style*="--sec-color"] .cv-item-title{
  color:var(--sec-color) !important;
}
.cv-section[style*="--sec-color"] .cv-desc,
.cv-section[style*="--sec-color"] .cv-item-sub,
.cv-section[style*="--sec-color"] .cv-lang,
.cv-section[style*="--sec-color"] .cv-skill-tags span{
  color:var(--sec-color);
}
/* in the modern sidebar the text is on a colored background, so only the
   heading + underline take the custom color (keep body text readable) */
.cv-modern .cv-sidebar .cv-section[style*="--sec-color"] .cv-desc,
.cv-modern .cv-sidebar .cv-section[style*="--sec-color"] .cv-skill-tags span{
  color:#fff;
}

/* ============================================================
   PER-SECTION FONT SIZE (set via --sec-scale on .cv-section)
   Multiplies that section's text sizes by the chosen factor.
   ============================================================ */
.cv-section[style*="--sec-scale"] .cv-sec-title{ font-size:calc(13px * var(--sec-scale)); }
.cv-section[style*="--sec-scale"] .cv-item-title{ font-size:calc(12.5px * var(--sec-scale)); }
.cv-section[style*="--sec-scale"] .cv-item-sub{ font-size:calc(11.5px * var(--sec-scale)); }
.cv-section[style*="--sec-scale"] .cv-item-date{ font-size:calc(11px * var(--sec-scale)); }
.cv-section[style*="--sec-scale"] .cv-desc{ font-size:calc(11.5px * var(--sec-scale)); }
.cv-section[style*="--sec-scale"] .cv-lang{ font-size:calc(11.5px * var(--sec-scale)); }
.cv-section[style*="--sec-scale"] .cv-skill-tags span{ font-size:calc(11.5px * var(--sec-scale)); }
.cv-section[style*="--sec-scale"] .cv-contact{ font-size:calc(11.5px * var(--sec-scale)); }

/* ============================================================
   Gender icon buttons + Section-color UI
   ============================================================ */
.gender-pick{display:flex;gap:8px;flex-wrap:wrap;}
.btn-gender{
  flex:1;min-width:70px;cursor:pointer;
  padding:8px 10px;font-size:13px;font-family:inherit;
  border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);color:var(--ink);transition:.15s;
}
.btn-gender:hover{background:rgba(255,255,255,.12);}
.btn-gender.active{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;border-color:transparent;
}
.cv-avatar-icon{object-fit:cover;background:#dfe5ee;}

.hint{font-size:12px;color:var(--muted);margin:0 0 10px;}
.seccolor-grid{display:flex;flex-direction:column;gap:8px;}
.seccolor-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:13px;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:9px;padding:8px 11px;
}
.seccolor-right{display:flex;align-items:center;gap:8px;}
.seccolor-row select.seccolor-size{
  font-family:inherit;font-size:12px;padding:5px 6px;
  border:1px solid var(--line);border-radius:7px;
  background:rgba(255,255,255,.06);color:var(--ink);cursor:pointer;
}
.seccolor-row select.seccolor-size option{background:#161d30;color:#eef1f8;}
.seccolor-row input[type="color"]{
  width:40px;height:28px;padding:2px;border:1px solid var(--line);
  border-radius:7px;background:transparent;cursor:pointer;
}
.seccolor-reset{
  width:26px;height:26px;border-radius:7px;cursor:pointer;line-height:1;
  border:1px solid var(--line);background:rgba(255,255,255,.06);
  color:var(--muted);font-size:16px;
}
.seccolor-reset:hover{background:rgba(220,38,38,.2);color:#ff8a8a;}

/* ============================================================
   PER-FIELD-TYPE FONT SIZE + COLOR
   Variables set by applyFieldStyles() on the .cv root. Each rule
   falls back to its original size if the variable is unset.
   (Per-section --sec-scale rules above have higher specificity
    via the [style] attribute selector, so they still win when set.)
   ============================================================ */
.cv h1{ font-size:var(--fs-name,26px); }
.cv .cv-role{ font-size:var(--fs-role,14px); }
.cv-sec-title{ font-size:var(--fs-head,13px); }
.cv-item-title{ font-size:var(--fs-title,12.5px); }
.cv-item-sub{ font-size:var(--fs-sub,11.5px); }
.cv-item-date{ font-size:var(--fs-date,11px); }
.cv-desc{ font-size:var(--fs-desc,11.5px); }
.cv-skill-tags span{ font-size:var(--fs-skill,11.5px); }
.cv-contact{ font-size:var(--fs-contact,11.5px); }

/* colors (only applied when the var is set) */
.cv h1[style], .cv h1{ }
.cv.has-fc-name h1{ }
/* color via variables with graceful fallback to currentColor */
.cv h1{ color:var(--fc-name, #111); }
.cv .cv-role{ color:var(--fc-role, inherit); }
.cv-sec-title{ color:var(--fc-head, inherit); }
.cv-item-title{ color:var(--fc-title, inherit); }
.cv-item-sub{ color:var(--fc-sub, #444); }
.cv-item-date{ color:var(--fc-date, #666); }
.cv-desc{ color:var(--fc-desc, #333); }
.cv-contact{ color:var(--fc-contact, inherit); }

/* keep template-specific colors winning where they matter:
   modern sidebar text must stay light, classic heading stays dark
   unless the user explicitly set a field color. */
.cv-modern h1{ color:var(--fc-name, #fff); }
.cv-modern .cv-role{ color:var(--fc-role, #eef); }
.cv-modern .cv-sidebar .cv-sec-title{ color:var(--fc-head, #fff); }
.cv-modern .cv-main .cv-sec-title{ color:var(--fc-head, var(--accent)); }
.cv-classic .cv-sec-title{ color:var(--fc-head, #111); }

/* ============================================================
   LANGUAGE PROGRESS BAR
   ============================================================ */
.cv-lang{ margin-bottom:8px; }
.cv-lang-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:3px; }
.cv-lang-pct{ font-size:10.5px; color:#666; }
.cv-lang-bar{
  height:6px; border-radius:6px; background:#e7ebf1; overflow:hidden;
}
.cv-lang-bar > span{
  display:block; height:100%; border-radius:6px;
  background:var(--accent);
}
.cv-classic .cv-lang-bar > span{ background:#333; }      /* B&W classic */
.cv-classic .cv-lang-bar{ background:#ddd; }
.cv-modern .cv-sidebar .cv-lang-bar{ background:rgba(255,255,255,.3); }
.cv-modern .cv-sidebar .cv-lang-bar > span{ background:#fff; }
.cv-modern .cv-sidebar .cv-lang-pct{ color:#eef; }

/* ============================================================
   PHOTO SETTINGS CONTROLS
   ============================================================ */
.photo-ctrls{ display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.pc-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); }
.pc-row input[type="range"]{ flex:1; max-width:160px; }
.pc-row select{
  font-family:inherit; font-size:12px; padding:5px 7px; border-radius:7px;
  border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--ink); cursor:pointer;
}
.pc-row select option{ background:#161d30; color:#eef1f8; }

/* range slider for language level + photo, themed */
.range-box{ display:flex; align-items:center; gap:10px; }
.range-box input[type="range"]{ flex:1; accent-color:var(--brand); }
.range-val{ font-size:12px; color:var(--ink); min-width:38px; text-align:right; }

/* language level slider should span the full row inside the 2-col grid */
.inline-2 .field:has(.range-box){ grid-column:1 / -1; }

/* ============================================================
   Image toggle buttons (Hide / Show)
   ============================================================ */
.btn-imgtoggle{
  display:inline-block;cursor:pointer;font-family:inherit;font-size:12px;
  padding:6px 12px;border-radius:8px;margin-inline-end:6px;
  border:1px solid var(--line);background:rgba(255,255,255,.07);color:var(--ink);
  transition:.15s;
}
.btn-imgtoggle:hover{background:rgba(255,255,255,.16);}

/* ============================================================
   Ad-disclaimer modal
   ============================================================ */
.ad-modal-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(6,10,18,.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:adfade .2s ease;
}
@keyframes adfade{from{opacity:0}to{opacity:1}}
.ad-modal{
  max-width:460px;width:100%;
  background:linear-gradient(180deg,#1a2236,#141b2e);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:26px 24px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  text-align:center;
}
.ad-modal-title{
  margin:0 0 12px;font-size:20px;font-weight:700;color:#fff;
}
.ad-modal-body{
  margin:0 0 22px;font-size:14px;line-height:1.8;color:#c7cfdf;
}
.ad-modal-ok{
  min-width:140px;justify-content:center;
}