/* v259 Settings: a sticky section list + one column of full-width sections, each a list of rows
   (what it is on the left, the real controls on the right). Desktop Garden only — the row wrappers
   are display:contents everywhere else, so phones and the other looks lay out exactly as before. */
.vc259-row, .vc259-l, .vc259-r{ display:contents; }
.vc259-syn{ display:none; }

@media (min-width:1024px){
html.vc-garden.vc-web-studio.vc-vd #vd-settings .vc259-layout{
  display:grid !important; grid-template-columns:232px minmax(0, 1fr) !important; gap:28px !important; align-items:start; max-width:1180px; margin:0 auto;
}
html.vc-garden.vc-web-studio.vc-vd #vd-settings .vc244-settings-hero{ max-width:1180px; margin-left:auto; margin-right:auto; min-height:0 !important; padding-top:26px !important; padding-bottom:26px !important; }
/* section list */
#vd-settings .vc259-nav{ position:sticky; top:88px; display:flex; flex-direction:column; gap:2px; padding:16px 12px; border-radius:22px;
  background:var(--card,#fff); border:1px solid var(--line,#e6dfcf); box-shadow:0 8px 24px -18px rgba(6,40,34,.35); }
#vd-settings .vc259-nav-h{ font:800 11px/1 var(--font, sans-serif); letter-spacing:.08em; text-transform:uppercase; color:#4f5d57; padding:10px 10px 6px; }
#vd-settings .vc259-nav-h:not(:first-child){ margin-top:10px; border-top:1px solid var(--line,#e6dfcf); padding-top:16px; }
#vd-settings .vc259-nav > button, #vd-settings .vc259-nav > a{ display:flex !important; align-items:center; gap:10px; width:100%; text-align:left; min-height:40px; padding:8px 10px !important;
  border-radius:12px !important; border:0 !important; background:transparent !important; color:var(--ink,#062822) !important; font:600 14px/1.25 var(--font, sans-serif) !important; text-decoration:none; cursor:pointer; box-shadow:none !important; }
#vd-settings .vc259-nav > button:hover, #vd-settings .vc259-nav > a:hover{ background:#eef5f1 !important; }
#vd-settings .vc259-nav > button[aria-current="true"]{ background:#e3f1ec !important; color:#0b4f45 !important; font-weight:800 !important; box-shadow:inset 3px 0 0 #0F766E !important; }
#vd-settings .vc259-fact{ margin-top:14px; padding:14px !important; border-radius:16px !important; gap:10px !important; }
#vd-settings .vc259-fact > div:first-child{ width:34px !important; height:34px !important; font-size:16px !important; }

/* sections */
#vd-settings .vc259-main{ display:flex; flex-direction:column; gap:22px; min-width:0; }
#vd-settings .vc259-card{ scroll-margin-top:90px; border-radius:24px; background:var(--card,#fff); border:1px solid var(--line,#e6dfcf);
  box-shadow:0 10px 30px -22px rgba(6,40,34,.4); overflow:hidden; }
#vd-settings .vc259-card > header{ display:flex; align-items:center; gap:14px; padding:20px 26px; border-bottom:1px solid var(--line,#e6dfcf);
  background:linear-gradient(180deg, #f3f8f4, #fbfaf5); }
#vd-settings .vc259-ic{ width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:14px; background:#fff; border:1px solid var(--line,#e6dfcf); font-size:20px; }
#vd-settings .vc259-card h2{ margin:0; font:700 21px/1.2 'Fraunces', Georgia, serif; color:#062822; }
#vd-settings .vc259-card header p{ margin:3px 0 0; font:500 13px/1.4 var(--font, sans-serif); color:#4f5d57; }
#vd-settings .vc259-body{ padding:4px 26px 8px; }

/* the groups inside a section lose their own card chrome */
#vd-settings .vc259-body details.st-group, #vd-settings .vc259-body .st-top{ border:0 !important; background:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; border-radius:0 !important; }
#vd-settings .vc259-body details.st-group > summary{ display:none !important; }
#vd-settings .vc259-body .progress-collapsible-body{ padding:0 !important; margin:0 !important; border:0 !important; background:none !important; }
#vd-settings .vc259-body > div, #vd-settings .vc259-group, #vd-settings .vc259-theme{ margin:0 !important; padding:0 !important; }

/* rows: label column + control column, a hairline between rows */
#vd-settings .vc259-row, #vd-settings .vc259-body .st-top > .st-row, #vd-settings .vc259-body .st-top > .vc-ui-lang-row, #vd-settings .vc259-theme > .st-row{
  display:grid !important; grid-template-columns:minmax(180px, 34%) minmax(0, 1fr); column-gap:32px; row-gap:6px; align-items:start;
  padding:18px 0 !important; margin:0 !important; border:0 !important; border-top:1px solid #ece6d8 !important; background:none !important; border-radius:0 !important; }
#vd-settings .vc259-body > div:first-child .st-top > :first-child, #vd-settings .vc259-body > :first-child.vc259-theme > .st-row{ border-top:0 !important; }
#vd-settings .vc259-l, #vd-settings .vc259-r{ display:block; min-width:0; }
#vd-settings .vc259-l{ grid-column:1; }
#vd-settings .vc259-r{ grid-column:2; display:flex; flex-direction:column; gap:10px; }
#vd-settings .vc259-syn, #vd-settings .vc259-l h4.st-h, #vd-settings .st-top .st-label, #vd-settings .vc259-theme .st-label, #vd-settings .vc-ui-lang-row-label{
  display:block; margin:0 !important; padding:0 !important; font:800 15px/1.3 var(--font, sans-serif) !important; color:#062822 !important; text-transform:none !important; letter-spacing:0 !important; border:0 !important; }
#vd-settings .vc259-l .section-note, #vd-settings .st-top .st-note{ margin:4px 0 0 !important; font:500 13px/1.45 var(--font, sans-serif) !important; color:#4f5d57 !important; }
#vd-settings .vc259-r .section-note{ margin:0 !important; }
#vd-settings .vc259-r .section-note:empty{ display:none; }
/* the top card's own rows: label (+ note) left, everything else right */
#vd-settings .st-top > .st-row > .st-label, #vd-settings .st-top > .vc-ui-lang-row > .vc-ui-lang-row-label, #vd-settings .vc259-theme > .st-row > .st-label{ grid-column:1; grid-row:1; align-self:center; }
#vd-settings .st-top > .st-row.st-col > .st-label{ align-self:start; }
#vd-settings .st-top > .st-row > .st-note{ grid-column:1; grid-row:2; }
#vd-settings .st-top > .st-row > :not(.st-label):not(.st-note), #vd-settings .st-top > .vc-ui-lang-row > :not(.vc-ui-lang-row-label), #vd-settings .vc259-theme > .st-row > :not(.st-label){ grid-column:2; min-width:0; }
#vd-settings .st-top > .st-row.st-col > :not(.st-label):not(.st-note){ grid-row:auto; }
#vd-settings .vc259-theme > .st-row{ grid-template-columns:minmax(180px, 34%) auto 1fr; }
#vd-settings .vc259-theme > .st-row > .st-colors{ grid-column:3; justify-self:start; }
#vd-settings .vc259-body .st-seg, #vd-settings .vc259-body .vc-ui-lang-seg{ max-width:420px; }
#vd-settings .vc259-body #dialectSelector, #vd-settings .vc259-body .speed-toggle, #vd-settings .vc259-body .st-envoice{ max-width:560px; }
#vd-settings .vc259-r .st-btns{ display:flex; flex-wrap:wrap; gap:8px; margin:0 !important; }
#vd-settings .vc259-r select.type-input, #vd-settings .vc259-r .vd-st-sandbox, #vd-settings .vc259-r input.vd-search{ max-width:420px; }
#vd-settings .vc259-r #settingsInstallRow{ margin:0 !important; display:flex; flex-wrap:wrap; gap:8px; }
#vd-settings .vc259-r #settingsInstallRow > *{ flex:1 1 220px; margin:0 !important; }
#vd-settings .vc259-r .vc-look{ margin:0 !important; }
#vd-settings .vc259-r .vc-look-h{ display:none; }   /* the row's own label says it */
#vd-settings .vc259-r #downloadOffline, #vd-settings .vc259-r #resetProgress{ align-self:flex-start; }
#vd-settings .vc259-store #vdStStore > *{ margin:0 !important; max-width:560px; }
}
@media (min-width:1024px) and (max-width:1279px){
  html.vc-garden.vc-web-studio.vc-vd #vd-settings .vc259-layout{ grid-template-columns:200px minmax(0, 1fr) !important; gap:20px !important; }
  #vd-settings .vc259-row, #vd-settings .vc259-body .st-top > .st-row, #vd-settings .vc259-body .st-top > .vc-ui-lang-row, #vd-settings .vc259-theme > .st-row{ grid-template-columns:minmax(150px, 30%) minmax(0, 1fr); column-gap:20px; }
}
body.dark-mode #vd-settings .vc259-nav, body.dark-mode #vd-settings .vc259-card{ background:#14201d; border-color:#2a3a35; }
body.dark-mode #vd-settings .vc259-card > header{ background:#18261f; border-color:#2a3a35; }
body.dark-mode #vd-settings .vc259-card h2, body.dark-mode #vd-settings .vc259-syn, body.dark-mode #vd-settings .vc259-l h4.st-h, body.dark-mode #vd-settings .st-top .st-label, body.dark-mode #vd-settings .vc259-nav > button, body.dark-mode #vd-settings .vc259-nav > a{ color:#e8f1ed !important; }
body.dark-mode #vd-settings .vc259-row, body.dark-mode #vd-settings .vc259-body .st-top > .st-row{ border-top-color:#2a3a35 !important; }
@media (min-width:1024px){
  html.vc-garden.vc-web-studio.vc-vd #vd-settings :is(#settingsTopCard, #stGroupLearning, #stGroupApp, #stGroupData){ border:0 !important; background:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; border-radius:0 !important; }
}