/* LIT STUDIOS · v4.1 · builder.css
   Dacă înlocuiești fișiere pe server, versiunea de aici îți spune
   ce ai urcat. Trebuie să se potrivească cu ?v=4.1 din HTML. */
/* ==========================================================================
   LIT STUDIOS — Builder (aplicația)
   ========================================================================== */
/* Pagina derulează NORMAL (ca orice site). Topbar și sidebar sunt sticky.
   Fără overflow:hidden, fără grile cu înălțime fixă — scroll garantat. */
body.builder { background: var(--surface); }

.app{ min-height:100vh; }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; height:60px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 18px; background:#fff; border-bottom:1px solid var(--line); z-index:60;
}
.topbar-left{ display:flex; align-items:center; gap:16px; }
.top-divider{ width:1px; height:26px; background:var(--line); }
.save-state{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--muted); }
.save-state .dot{ width:8px; height:8px; border-radius:50%; background:#28C840; }
.save-state.saving .dot{ background:#FFBE2E; }
.topbar-right{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:40px; height:40px; border:1px solid var(--line); background:#fff; border-radius:10px;
  display:grid; place-items:center; cursor:pointer; color:var(--slate); transition:.15s ease;
}
.icon-btn:hover{ border-color:var(--blue-300); color:var(--blue); }
.icon-btn.active{ background:var(--sky); border-color:var(--blue-300); color:var(--blue); }

/* comutator device (desktop / tabletă / mobil) */
.device-toggle{ display:flex; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:3px; }
.device-toggle button{
  width:38px; height:34px; border:0; background:none; border-radius:8px; cursor:pointer;
  color:var(--muted); display:grid; place-items:center; transition:.14s ease;
}
.device-toggle button:hover{ color:var(--navy); }
.device-toggle button.active{ background:#fff; color:var(--blue); box-shadow:var(--shadow-sm); }

/* ---------- Corpul: sidebar + canvas ---------- */
.body{ display:flex; align-items:flex-start; }

/* Sidebar: sticky sub topbar, cu scroll propriu */
.sidebar{
  position:sticky; top:60px; height:calc(100vh - 60px); width:300px; flex:none;
  background:#FBFDFF; overflow-y:auto; padding:18px 16px 60px;
  /* v2.18 (pct 10): panoul de control iese în evidență — contur albastru
     subtil + umbră de ocluziune spre canvas => ierarhie vizuală clară */
  border-right:1px solid rgba(10,110,242,.28);
  box-shadow:10px 0 28px -18px rgba(10,37,64,.35);
  z-index:5;
}
.sidebar h5{
  font-family:var(--font-display); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:22px 4px 12px; font-weight:700;
}
.sidebar h5:first-child{ margin-top:4px; }
.add-list{ display:grid; gap:8px; }
.add-item{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line);
  border-radius:11px; background:#fff; cursor:pointer; text-align:left; width:100%;
  transition:.15s ease; font-family:var(--font-body);
}
.add-item:hover{ border-color:var(--blue-300); background:var(--sky); transform:translateX(2px); }
.add-item .ai-ico{ width:34px; height:34px; border-radius:9px; background:var(--surface); color:var(--blue); display:grid; place-items:center; flex:none; }
.add-item:hover .ai-ico{ background:#fff; }
.add-item .ai-txt strong{ display:block; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--navy); }
.add-item .ai-txt small{ font-size:12px; color:var(--muted); }
.add-item .ai-plus{ margin-left:auto; color:var(--blue); opacity:0; transition:.15s ease; }
.add-item:hover .ai-plus{ opacity:1; }

/* Panoul de temă */
.theme-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 4px; }
.theme-row label{ font-size:13px; font-weight:600; color:var(--slate); }
.swatches{ display:flex; gap:8px; flex-wrap:wrap; padding:4px; }
.swatch{ width:30px; height:30px; border-radius:8px; cursor:pointer; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); transition:.12s ease; }
.swatch:hover{ transform:scale(1.08); }
.swatch.on{ box-shadow:0 0 0 2px var(--navy); }
.font-select{ width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:10px; font-family:var(--font-body); font-size:14px; color:var(--navy); background:#fff; cursor:pointer; }

/* ---- Panou Design site ---- */
.design-panel{ display:grid; gap:8px; }
.dp-label{ font-size:12px; font-weight:700; color:var(--slate); margin:10px 4px 2px; font-family:var(--font-display); }
.dp-label:first-child{ margin-top:0; }

/* segmented control (colțuri butoane) */
.seg-group{ display:flex; gap:6px; }
.seg{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:9px 4px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font-size:11px; font-weight:600; color:var(--slate); font-family:var(--font-body); transition:.14s ease; }
.seg:hover{ border-color:var(--blue-300); }
.seg.on{ border-color:var(--blue); background:var(--sky); color:var(--blue); }
.seg-demo{ width:26px; height:16px; background:currentColor; opacity:.85; display:block; }

/* logo */
.logo-wrap{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.logo-prev{ height:40px; padding:6px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); display:grid; place-items:center; }
.logo-prev img{ max-height:28px; max-width:120px; width:auto; display:block; }
.mini-btn{ padding:9px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font-size:13px; font-weight:700; color:var(--navy); font-family:var(--font-body); transition:.14s ease; }
.mini-btn:hover{ border-color:var(--blue-300); color:var(--blue); }
.danger-btn{ width:100%; margin-top:18px; color:#E5484D; }
.danger-btn:hover{ border-color:#F3B0AE; background:#FFF5F5; color:#C0332B; }

/* ---- Panou setări secțiune ---- */
.back-btn{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; color:var(--slate); font-weight:700; font-size:13px; cursor:pointer; padding:4px 0 10px; font-family:var(--font-display); }
.back-btn:hover{ color:var(--blue); }
.variant-picker{ display:grid; gap:8px; }
.variant-opt{ display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:#fff; cursor:pointer; text-align:left; width:100%; font-size:14px; font-weight:600; color:var(--navy); font-family:var(--font-body); transition:.14s ease; }
.variant-opt:hover{ border-color:var(--blue-300); background:var(--sky); }
.variant-opt.on{ border-color:var(--blue); background:var(--sky); color:var(--blue); }
.vo-check{ color:var(--blue); font-size:14px; }
.settings-tip{ font-size:12px; color:var(--muted); line-height:1.5; margin:16px 4px 0; padding:12px; background:var(--surface); border-radius:10px; }

/* ---------- Canvas ---------- */
.canvas-wrap{ flex:1; min-width:0; padding:16px 18px; }
/* v2.20 (pct 4): cadrul are colțuri DREPTE — site-ul se vede exact ca în realitate */
.frame{
  width:100%; background:#fff; border-radius:0; box-shadow:var(--shadow-md);
  border:1px solid var(--line); overflow:hidden; min-height:calc(100vh - 92px); margin:0 auto 28px;
  transition:max-width .28s ease;
}
/* Lățimea cadrului în funcție de device-ul ales din topbar.
   Container queries din sections.css rearanjează conținutul la aceste lățimi. */
.canvas-wrap[data-device="desktop"] .frame{ max-width:1500px; }
.canvas-wrap[data-device="tablet"]  .frame{ max-width:800px; }
.canvas-wrap[data-device="mobile"]  .frame{ max-width:390px; }
.canvas-wrap[data-device="tablet"],
.canvas-wrap[data-device="mobile"]{ background:
  repeating-linear-gradient(45deg,#EEF3F8,#EEF3F8 10px,#F4F7FA 10px,#F4F7FA 20px); }

/* Stare goală */
.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  min-height:calc(100vh - 160px); text-align:center; color:var(--muted); padding:40px;
}
.empty .big{ width:72px; height:72px; border-radius:20px; background:var(--sky); color:var(--blue); display:grid; place-items:center; }
.empty h3{ color:var(--navy); font-size:20px; }
.empty p{ max-width:34ch; margin:0; }

/* Wrapper de secțiune în editor (controalele) */
/* v2.18 (pct 9): secțiunile stau lipite una de alta, exact ca pe site-ul final —
   fără gap inestetic. Bara de unelte plutește ÎN interiorul secțiunii. */
.canvas.editor{ padding-top:0; }
.ls-section{ position:relative; margin-top:0; overflow:visible; }
.ls-section.selected{ outline:2px solid var(--blue); outline-offset:-2px; }
.preview .ls-toolbar{ display:none !important; }
.ls-toolbar{
  position:absolute; top:10px; right:12px; z-index:20; display:flex; gap:4px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:4px; box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(-4px); transition:.16s ease; pointer-events:none;
}
.ls-section:hover .ls-toolbar, .ls-section.selected .ls-toolbar{ opacity:1; transform:none; pointer-events:auto; }
.ls-toolbar button{
  width:32px; height:32px; border:0; background:none; border-radius:7px; cursor:pointer;
  color:var(--slate); display:inline-flex; align-items:center; justify-content:center; transition:.12s ease; padding:0;
}
.ls-toolbar button svg{ display:block; }
.ls-toolbar button:hover{ background:var(--surface); color:var(--navy); }
.ls-toolbar button.danger:hover{ background:#FFECEB; color:#E5484D; }
.ls-toolbar .tb-label{ font-size:11px; font-weight:700; color:var(--muted); padding:0 8px; display:flex; align-items:center; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; }

/* Editable */
[data-field]{ outline:none; transition:box-shadow .12s ease; }
.editor [data-field]:hover{ box-shadow:0 0 0 2px var(--ls-accent-soft); }
.editor [data-field]:focus{ box-shadow:0 0 0 2px var(--ls-accent); }
.preview [data-field]{ cursor:default; }

/* ---------- Modal ---------- */
.modal-bg{ position:fixed; inset:0; background:rgba(10,37,64,.5); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-bg.open{ display:flex; }
.modal{ background:#fff; border-radius:18px; width:100%; max-width:460px; box-shadow:var(--shadow-lg); overflow:hidden; animation:pop .18s ease; }
@keyframes pop{ from{ transform:translateY(10px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }
.modal-head{ padding:26px 28px 0; }
.modal-head h3{ font-size:22px; font-weight:800; }
.modal-head p{ font-size:15px; color:var(--slate); margin:8px 0 0; }
.modal-body{ padding:22px 28px 28px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:6px; font-family:var(--font-display); }
.field input, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:11px; font-family:var(--font-body);
  font-size:15px; color:var(--navy); background:#fff; transition:.15s ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,110,242,.12); }
.field textarea{ resize:vertical; min-height:72px; }
.field.hp{ position:absolute; left:-9999px; }
.modal .btn{ width:100%; margin-top:6px; }
.modal-note{ font-size:12px; color:var(--muted); text-align:center; margin-top:12px; }
.modal-close{ position:absolute; }
.form-msg{ font-size:14px; padding:10px 12px; border-radius:10px; margin-bottom:14px; display:none; }
.form-msg.err{ display:block; background:#FFECEB; color:#C0332B; }
.form-msg.ok{ display:block; background:#E7F8EE; color:#0B7A3F; }
.success{ text-align:center; padding:20px 0; }
.success .check{ width:64px; height:64px; border-radius:50%; background:#E7F8EE; color:#0B7A3F; display:grid; place-items:center; margin:0 auto 16px; }
.success h3{ font-size:22px; }
.success p{ color:var(--slate); margin-top:8px; }

/* Toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--navy); color:#fff; padding:12px 20px; border-radius:12px; font-size:14px; font-weight:600; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:.24s ease; z-index:200; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ==========================================================================
   v2.20 (pct 8) — BUILDER PE MOBIL
   Structura: [topbar compact] [bandă de acțiuni] [canvas] [foaie de setări jos]
   ========================================================================== */
.sidebar-backdrop{ display:none; }
.mobile-only{ display:none; }
.mobile-actions, .mobile-actions-show{ display:none; }
#wantBtn .want-rocket{ display:none; }

@media (max-width: 860px){
  /* --- Topbar compact: încape tot pe lățimea telefonului --- */
  .topbar{ padding:0 10px; gap:6px; }
  .topbar-left{ gap:3px; min-width:0; flex:none; order:1; }
  .logo-word{ display:none; }                 /* rămâne doar „L" */
  .logo-mark{ width:30px; height:30px; font-size:16px; }
  .top-divider{ display:none; }
  .save-state{ font-size:0; padding:0 2px; gap:0; }   /* doar bulina de stare */
  .desk-only{ display:none !important; }
  .device-toggle{ display:none; }
  .mobile-only{ display:inline-grid !important; }
  .topbar-right{ gap:6px; margin-left:auto; }
  .topbar-right .icon-btn{ display:none; }          /* mutate în banda de acțiuni */
  .topbar-right .lit-tour-help{ display:none; }     /* mutat în banda de acțiuni */
  /* v2.23 (pct 2): pe mobil butonul arată la fel ca pe desktop — text + săgeată,
     doar compactat ca să încapă frumos în bară. Fără rachetă. */
  #wantBtn{
    height:36px; padding:0 12px; border-radius:9px; flex:none;
    font-size:12.5px; gap:5px; white-space:nowrap;
  }
  #wantBtn .want-txt{ display:inline; }
  #wantBtn .want-arrow{ display:block; width:14px; height:14px; }
  #wantBtn .want-rocket{ display:none; }

  /* v2.23 (pct 7): selectorul de pagini stă lângă butonul albastru, în dreapta */
  .page-picker{ order:2; margin-left:auto; }
  .topbar-right{ order:3; margin-left:6px; }
  .topbar{ flex-wrap:nowrap; }

  /* --- Banda de acțiuni, chiar sub meniu --- */
  .mobile-actions{
    display:flex; align-items:center; gap:6px;
    position:sticky; top:60px; z-index:60;
    background:#fff; border-bottom:1px solid var(--line);
    padding:7px 8px 7px 10px; box-shadow:0 4px 14px -10px rgba(10,37,64,.4);
  }
  .mobile-actions[hidden]{ display:none; }
  .ma-scroll{
    display:flex; gap:6px; overflow-x:auto; flex:1; min-width:0;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .ma-scroll::-webkit-scrollbar{ display:none; }
  .ma-btn{
    flex:none; display:inline-flex; align-items:center; gap:6px;
    padding:8px 12px; border:1px solid var(--line); border-radius:999px;
    background:#FBFDFF; color:var(--navy); font-family:var(--font-body);
    font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;
    transition:.15s ease;
  }
  .ma-btn:active{ transform:scale(.96); }
  .ma-btn:hover{ border-color:var(--blue-300); background:var(--sky); color:var(--blue); }
  .ma-close{
    flex:none; width:30px; height:30px; border-radius:8px; border:1px solid var(--line);
    background:#fff; color:var(--muted); display:grid; place-items:center; cursor:pointer;
  }
  .mobile-actions-show{
    display:flex; align-items:center; justify-content:center; gap:5px;
    position:sticky; top:60px; z-index:60; width:100%;
    padding:5px 10px; border:0; border-bottom:1px solid var(--line);
    background:#F6F9FC; color:var(--blue); cursor:pointer;
    font-family:var(--font-body); font-size:12px; font-weight:700;
  }
  .mobile-actions-show[hidden]{ display:none; }

  /* --- Canvas --- */
  .canvas-wrap{ padding:10px; }
  .frame{ border-radius:0; min-height:calc(100vh - 150px); }
  .canvas-wrap[data-device] .frame{ max-width:100%; }
  /* spațiu în josul paginii ca foaia de setări să nu acopere ultima secțiune */
  .body.sheet-open .canvas-wrap{ padding-bottom:38vh; }

  /* --- Foaia de setări: iese de jos, max 35% din ecran --- */
  .sidebar{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100%; height:auto; max-height:35vh; z-index:70;
    transform:translateY(101%); transition:transform .26s cubic-bezier(.32,.72,0,1);
    border-right:0; border-top:1px solid rgba(10,110,242,.32);
    border-radius:16px 16px 0 0; padding:0 14px 18px;
    box-shadow:0 -14px 40px -18px rgba(10,37,64,.5);
    overscroll-behavior:contain;
  }
  .sidebar.open{ transform:none; }
  .sidebar.tall{ max-height:74vh; }
  /* v2.23 (pct 5): mânerul e mai mare și mai ușor de nimerit */
  .sheet-grip{ width:52px; height:5px; }
  .sheet-head::after{
    content:""; position:absolute; inset:0 0 auto 0; height:26px; /* zonă de prindere */
  }
  /* fundalul NU se întunecă: vrem să vedem și să derulăm secțiunea în timp ce edităm */
  .sidebar-backdrop.show{ display:none; }

  /* antetul foii: mâner + taburi + închidere */
  .sheet-head{
    position:sticky; top:0; z-index:3; background:#FBFDFF;
    margin:0 -14px 10px; padding:7px 14px 0;
    border-radius:16px 16px 0 0;
    display:block !important;
  }
  .sheet-grip{
    display:block; width:38px; height:4px; border-radius:3px;
    background:#CBD5E1; margin:0 auto 8px; cursor:grab;
  }
  .sheet-tabs{ display:flex; gap:5px; padding-bottom:8px; padding-right:34px; }
  .sh-tab{
    flex:1; padding:8px 6px; border:1px solid var(--line); border-radius:9px;
    background:#fff; color:var(--slate); font-family:var(--font-display);
    font-size:12.5px; font-weight:800; cursor:pointer; transition:.15s ease;
  }
  .sh-tab.on{ background:var(--sky); border-color:var(--blue-300); color:var(--blue); }
  .sheet-x{
    position:absolute; top:15px; right:12px; width:28px; height:28px;
    border:1px solid var(--line); border-radius:8px; background:#fff;
    color:var(--muted); display:grid; place-items:center; cursor:pointer;
  }
  /* pe mobil arătăm doar tabul activ; antetele de grup devin inutile */
  .sidebar[data-tab] .panel-group{ display:none; border:0; padding:0; margin:0; }
  .sidebar[data-tab="mine"] .panel-group[data-group="mine"],
  .sidebar[data-tab="design"] .panel-group[data-group="design"]{ display:block; }
  .sidebar[data-tab] .panel-group .panel-toggle{ display:none; }
  .sidebar[data-tab] .panel-group .panel-body{ display:block !important; padding:0; }
  /* când sunt deschise setările unei secțiuni, taburile catalogului dispar */
  .sidebar.in-settings .sheet-tabs{ display:none; }
  .sidebar.in-settings .sheet-head{ padding-bottom:4px; }

  /* secțiunea aflată în editare rămâne evidențiată în timp ce derulezi */
  .ls-section.selected{ outline:3px solid var(--blue); outline-offset:-3px; }
}

@media (max-width: 560px){
  .ma-btn span{ display:none; }               /* doar iconițe pe ecrane mici */
  .ma-btn{ padding:8px 11px; }
  /* bara de sus rămâne pe un singur rând și pe telefoanele mici */
  #wantBtn{ padding:0 10px; font-size:12px; }
  #wantBtn .want-arrow{ display:none; }
  .pp-btn{ max-width:88px; padding:0 7px; }
  .pp-btn .pp-chev{ display:none; }
  .topbar-left .icon-btn{ width:34px; height:34px; }
  .save-state{ display:none; }                /* starea rămâne vizibilă în „Salvat" la salvare */
}
@media (max-width: 380px){
  #wantBtn .want-txt{ font-size:11.5px; }
  .pp-btn{ max-width:74px; }
}

/* ---- v1.2: controale noi în sidebar ---- */
.text-input{ width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:10px; font-family:var(--font-body); font-size:14px; color:var(--navy); background:#fff; }
.text-input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--sky); }
.dp-hint{ font-size:11px; color:var(--muted); line-height:1.45; margin:4px 4px 0; }
.opt-row{ display:flex; gap:9px; align-items:center; font-size:13px; font-weight:600; color:var(--navy); font-family:var(--font-body); padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; }
.opt-row:hover{ border-color:var(--blue-300); }
.opt-row input{ accent-color: var(--blue); width:15px; height:15px; }

/* ---- v1.4: panouri pliabile (dropdown cu toggle) ---- */
.panel-group{ border-bottom:1px solid var(--line); }
.panel-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; background:none; border:0; padding:15px 2px; cursor:pointer; font-family:var(--font-display); font-size:13px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.04em; }
.panel-toggle .chev{ width:9px; height:9px; border-right:2px solid var(--slate); border-bottom:2px solid var(--slate); transform:rotate(-45deg); transition:transform .18s ease; flex:none; margin-right:4px; }
.panel-group.open .panel-toggle .chev{ transform:rotate(45deg); }
.panel-body{ display:none; padding-bottom:16px; }
.panel-group.open .panel-body{ display:block; }

/* ---- „Pagina ta" — accent albastru ---- */
.mine-list{ display:flex; flex-direction:column; gap:7px; }
.mine-empty{ font-size:12.5px; color:var(--muted); padding:8px 4px 12px; line-height:1.5; }
.mine-item{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px 12px; border:1px solid var(--blue-100,#DCE9FF); border-left:3px solid var(--blue); border-radius:10px; background:var(--sky); cursor:pointer; transition:.14s ease; }
.mine-item:hover{ background:#DBEAFE; border-left-color:var(--blue); }
.mine-item.on{ box-shadow:0 0 0 2px var(--blue); }
.mine-item .mi-ico{ width:30px; height:30px; border-radius:8px; background:#fff; color:var(--blue); display:grid; place-items:center; flex:none; }
.mine-item .mi-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mine-item .mi-txt strong{ font-size:13.5px; color:var(--navy); font-family:var(--font-display); line-height:1.2; }
.mine-item .mi-txt small{ font-size:11.5px; color:var(--blue); }
.mine-item .mi-go{ color:var(--blue); display:grid; place-items:center; flex:none; }

/* ---- chip-uri fundal secțiune ---- */
.swatches.with-chips{ align-items:center; }
.swatch-chip{ padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; cursor:pointer; font-size:12px; font-weight:700; color:var(--slate); font-family:var(--font-body); transition:.14s ease; }
.swatch-chip:hover{ border-color:var(--blue-300); color:var(--blue); }
.swatch-chip.on{ border-color:var(--blue); background:var(--sky); color:var(--blue); }

/* ---- v1.6: setări per-secțiune (butoane/carduri) ---- */
.sec-style-group{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); }
.dp-sub{ font-size:12px; font-weight:800; color:var(--navy); font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.seg-group.with-chip{ flex-wrap:wrap; }
.seg-group.with-chip .swatch-chip{ flex:none; }

/* ---- v1.7: icon picker, hero img, note ---- */
.icon-row{ margin-bottom:12px; }
.icon-row small{ display:block; font-size:12px; font-weight:700; color:var(--slate); margin-bottom:6px; }
.icon-grid{ display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; }
.icon-opt{ aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--slate); cursor:pointer; padding:0; transition:.12s ease; }
.icon-opt:hover{ border-color:var(--blue-300); color:var(--blue); }
.icon-opt.on{ border-color:var(--blue); background:var(--sky); color:var(--blue); }

/* ---- v2.1: șabloane, palete, drag&drop, istoric ---- */
.tpl-modal{ max-width:640px; }
.tpl-sub{ font-size:13.5px; color:var(--slate); margin:6px 0 16px; }
.tpl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.tpl-card{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; text-align:left; transition:.14s ease; font-family:var(--font-body); }
.tpl-card:hover{ border-color:var(--blue); background:var(--sky); transform:translateY(-2px); }
.tpl-card .tpl-ico{ font-size:22px; }
.tpl-card strong{ font-size:13.5px; color:var(--navy); font-family:var(--font-display); }
.tpl-card small{ font-size:11.5px; color:var(--muted); line-height:1.35; }
.tpl-foot{ display:flex; justify-content:space-between; margin-top:16px; }
@media (max-width:640px){ .tpl-grid{ grid-template-columns:1fr 1fr; } }

.palette-row{ display:flex; gap:7px; flex-wrap:wrap; }
.palette-chip{ display:flex; gap:0; border:1px solid var(--line); border-radius:9px; overflow:hidden; cursor:pointer; padding:0; background:#fff; transition:.14s ease; }
.palette-chip span{ width:16px; height:26px; display:block; }
.palette-chip:hover{ transform:scale(1.08); border-color:var(--blue); }

.tb-drag{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:32px; color:var(--muted); cursor:grab; }
.tb-drag:active{ cursor:grabbing; }
.ls-section.dragging{ opacity:.45; }
.ls-section.drop-target{ outline:2px dashed var(--blue); outline-offset:-2px; }

#undoBtn:disabled, #redoBtn:disabled{ opacity:.35; cursor:default; }

/* ---- v2.2: padding modal șabloane + butoane cu iconițe + modal plată ---- */
.tpl-modal{ padding:26px; }
.tpl-foot{ gap:10px; }
.s-imgtools button, .mini-btn, .qa-add, .addcell{ display:inline-flex; align-items:center; gap:6px; }
.qa-del{ display:none; place-items:center; }
.editor .s-faq .qa:hover .qa-del{ display:grid; }
.addcell .ac-ic{ display:grid; place-items:center; }
.pay-modal{ padding:26px; max-width:430px; }
.pay-modal h3{ margin:0 0 8px; color:var(--navy); font-family:var(--font-display); }
.pay-modal p{ font-size:14px; color:var(--slate); margin:0 0 14px; line-height:1.55; }
.pay-modal .text-input{ margin-bottom:10px; }
.pay-actions{ display:flex; gap:10px; margin-top:6px; }
.pay-actions .btn-primary{ flex:1; background:var(--blue); color:#fff; border:0; border-radius:10px; padding:12px; font-weight:700; cursor:pointer; font-size:14px; }
.pay-actions .mini-btn{ flex:none; }
.pay-err{ color:#C0332B; font-size:13px; margin-top:8px; min-height:16px; }

/* ===== Acordeon setări (secțiuni + Design site) ===== */
.set-group{ border:1px solid var(--line,#e6ebf1); border-radius:12px; margin-bottom:10px; background:#fff; overflow:hidden; }
.set-group-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px;
  background:none; border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:14px; color:var(--ink,#0A2540); text-align:left; }
.set-group-head:hover{ background:#f6f9fc; }
.set-chev{ display:inline-flex; color:#8792a2; transition:transform .2s ease; flex:none; }
.set-group.open .set-chev{ transform:rotate(180deg); }
.set-group-body{ display:none; padding:4px 14px 14px; }
.set-group.open .set-group-body{ display:block; }
.set-group-body > .dp-label:first-child{ margin-top:2px; }

/* ===== Pop-up activare: cartonașe pachete ===== */
.act-cards{ display:grid; gap:12px; margin:16px 0 4px; }
.act-card{ position:relative; text-align:left; width:100%; border:1.5px solid var(--line,#e6ebf1); border-radius:14px;
  padding:16px 18px; background:#fff; cursor:pointer; font-family:inherit; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.act-card:hover{ border-color:var(--blue,#2563eb); box-shadow:0 14px 30px -16px rgba(37,99,235,.5); transform:translateY(-2px); }
.act-card.featured{ border-color:var(--blue,#2563eb); box-shadow:0 10px 26px -16px rgba(37,99,235,.45); }
.act-badge{ position:absolute; top:-10px; right:14px; background:var(--blue,#2563eb); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.act-price{ font-size:22px; font-weight:800; color:var(--ink,#0A2540); }
.act-title{ font-size:15px; font-weight:700; color:var(--ink,#0A2540); margin-top:2px; }
.act-desc{ font-size:13px; color:var(--muted,#64748b); margin-top:5px; line-height:1.45; }
.act-cta{ display:inline-block; margin-top:10px; color:var(--blue,#2563eb); font-weight:700; font-size:13px; }

/* ===== Pop-up descărcare (produs) ===== */
.pay-modal{ text-align:center; }
.pay-brand{ display:flex; align-items:center; justify-content:center; gap:8px; font-weight:800; color:#0A0A0A; font-size:14px; margin-bottom:14px; }
.pay-mark{ width:24px; height:24px; border-radius:6px; background:#0A0A0A; color:#fff; display:grid; place-items:center; font-weight:800; font-size:13px; }
.pay-shot{ border:1px solid var(--line,#e6ebf1); border-radius:12px; overflow:hidden; box-shadow:0 18px 40px -22px rgba(10,37,64,.5); margin:0 auto 18px; max-width:320px; background:#fff; }
.pay-shot-bar{ display:flex; gap:5px; padding:8px 10px; background:linear-gradient(#fff,#f7fafc); border-bottom:1px solid var(--line,#e6ebf1); }
.pay-shot-bar i{ width:8px; height:8px; border-radius:50%; background:#e2e8f0; }
.pay-shot-bar i:nth-child(1){ background:#ff5f57; } .pay-shot-bar i:nth-child(2){ background:#febc2e; } .pay-shot-bar i:nth-child(3){ background:#28c840; }
.pay-shot-body{ padding:14px; background:#f7fafc; }
.pay-shot-hero{ background:linear-gradient(135deg,#dcefff,#dbe4ff); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:7px; align-items:flex-start; }
.pay-shot-h{ width:70%; height:12px; border-radius:4px; background:rgba(10,37,64,.28); }
.pay-shot-p{ width:52%; height:7px; border-radius:4px; background:rgba(10,37,64,.16); }
.pay-shot-btn{ margin-top:4px; width:82px; height:20px; border-radius:6px; background:var(--blue,#2563eb); }
.pay-shot-row{ display:flex; gap:8px; margin-top:10px; }
.pay-shot-row span{ flex:1; height:34px; border-radius:8px; background:linear-gradient(135deg,#eaf1ff,#e2e8f0); }
.pay-price{ display:flex; align-items:baseline; justify-content:center; gap:6px; margin:6px 0 16px; }
.pay-amount{ font-size:30px; font-weight:800; color:var(--ink,#0A2540); }
.pay-vat{ font-size:14px; color:var(--muted,#64748b); font-weight:600; }
.pay-modal .text-input{ margin-bottom:8px; }
.pay-buy{ width:100%; padding:13px; border-radius:11px; background:var(--blue,#2563eb); color:#fff; font-weight:700; font-size:15px; border:0; cursor:pointer; margin-top:4px; box-shadow:0 12px 26px -12px rgba(37,99,235,.85); transition:transform .15s ease, box-shadow .15s ease; }
.pay-buy:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(37,99,235,.95); }
.pay-have-code{ margin:18px 0 8px; font-size:13px; color:var(--muted,#64748b); position:relative; }
.pay-code-row{ display:flex; gap:8px; }
.pay-code-row .text-input{ flex:1; margin-bottom:0; }
.pay-err{ color:#C0332B; font-size:13px; min-height:16px; margin:2px 0 6px; }
.pay-cancel-link{ display:block; margin:14px auto 0; background:none; border:0; color:var(--muted,#64748b); font-size:13px; cursor:pointer; text-decoration:underline; font-family:inherit; }

/* ===== Fix margini pop-up activare (3 cartonașe) ===== */
#actStep1, #actStep2{ padding:4px 26px 24px; }
#actStep1 .modal-head, #actStep2 .modal-head{ padding:22px 0 4px; }
#actStep2 .modal-body{ padding:16px 0 0; }
.act-cards{ margin:16px 0 6px; }

/* ===== Editor acțiuni per item de meniu ===== */
.nav-acts{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.nav-act-row{ display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid var(--line,#e6ebf1); border-radius:10px; background:#fbfdff; }
.nav-act-label{ font-weight:700; font-size:13px; color:var(--ink,#0A2540); }
.nav-act-row select, .nav-act-row input{ width:100%; }

/* ===== Succes comandă: bifă verde animată + logo ===== */
.ls-success{ text-align:center; padding:32px 28px 28px; }
.ls-success-check{ width:76px; height:76px; margin:0 auto 16px; }
.ls-success-check svg{ width:100%; height:100%; display:block; }
.ls-check-circle{ fill:none; stroke:#0A7D45; stroke-width:3; }
.ls-check-mark{ fill:none; stroke:#0A7D45; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.ls-success-check.go{ animation:lsPop .4s ease; }
.ls-success-check.go .ls-check-circle{ stroke-dasharray:151; stroke-dashoffset:151; animation:lsDraw .5s ease forwards; }
.ls-success-check.go .ls-check-mark{ stroke-dasharray:40; stroke-dashoffset:40; animation:lsDraw .35s ease .45s forwards; }
@keyframes lsDraw{ to{ stroke-dashoffset:0; } }
@keyframes lsPop{ 0%{ transform:scale(.6); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.ls-success-brand{ display:flex; align-items:center; justify-content:center; gap:8px; font-weight:800; color:#0A0A0A; font-size:15px; margin-bottom:10px; }
.ls-success-mark{ width:24px; height:24px; border-radius:6px; background:#0A0A0A; color:#fff; display:grid; place-items:center; font-weight:800; font-size:13px; }
.ls-success h3{ margin:0 0 6px; color:var(--navy); font-family:var(--font-display); }
.ls-success p{ color:var(--slate); font-size:14.5px; margin:0; line-height:1.5; }
.ls-success-order{ display:inline-block; margin-top:10px; font-size:13px; color:var(--muted,#64748b); }

/* ===== Formular lat pe 2 coloane (pachetul 1200 lei) ===== */
.modal.modal-wide{ max-width:660px; overflow-y:auto; max-height:calc(100vh - 40px); }
@media (min-width:640px){
  .modal-wide #actStep2 .modal-body{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; }
  .modal-wide #actStep2 .modal-body > .form-msg,
  .modal-wide #actStep2 .modal-body > #actDomains,
  .modal-wide #actStep2 .modal-body > #actComment,
  .modal-wide #actStep2 .modal-body > .field.hp,
  .modal-wide #actStep2 .modal-body > .btn,
  .modal-wide #actStep2 .modal-body > .modal-note{ grid-column:1 / -1; }
  .modal-wide #actDomains{ display:grid; grid-template-columns:1fr 1fr 1fr; column-gap:16px; }
  .modal-wide #actDomains .modal-note{ grid-column:1 / -1; }
}

/* ==========================================================================
   v2.18 — Lizibilitate + interacțiune panou de control
   ========================================================================== */

/* (pct 3) Antetul panoului de setări: eticheta „SETĂRI SECȚIUNE" + numele
   secțiunii, în albastrul LIT — clientul știe imediat unde se află. */
.settings-head{
  margin:2px 0 14px; padding:12px 14px; border-radius:12px;
  background:linear-gradient(135deg, #E7F0FF, #F2F7FF);
  border:1px solid rgba(10,110,242,.22);
}
.settings-head .sh-eyebrow{
  display:block; font-family:var(--font-display); font-size:10.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:2px;
}
.settings-head h5{
  margin:0; font-family:var(--font-display); font-size:17px; font-weight:800;
  color:var(--navy); text-transform:none; letter-spacing:-.01em;
}

/* (pct 4) Etichetele setărilor: mai mari, mai vizibile, cu accent de contrast */
.dp-label{
  font-size:13.5px; font-weight:800; color:var(--navy);
  margin:14px 2px 5px; display:flex; align-items:center; gap:6px;
}
.dp-label::before{
  content:""; width:3px; height:13px; border-radius:2px; background:var(--blue); flex:none; opacity:.85;
}

/* (pct 7) Semn albastru de întrebare lângă fiecare setare + bulă explicativă */
.help-q{
  width:17px; height:17px; border-radius:50%; border:0; padding:0; flex:none;
  background:var(--sky); color:var(--blue); font-size:11px; font-weight:800;
  font-family:var(--font-display); cursor:pointer; display:inline-grid; place-items:center;
  line-height:1; transition:.15s ease; margin-left:auto;
}
.help-q:hover{ background:var(--blue); color:#fff; transform:scale(1.1); }
.help-pop{
  font-size:12.5px; line-height:1.5; color:var(--slate);
  background:#fff; border:1px solid rgba(10,110,242,.3); border-left:3px solid var(--blue);
  border-radius:10px; padding:10px 12px; margin:6px 2px 8px;
  box-shadow:0 10px 24px -14px rgba(10,37,64,.35);
  animation:helpIn .18s ease;
}
@keyframes helpIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* (pct 5) Selector de culoare compact: „Implicit" + rotiță RGB nativă + hex.
   Înlocuiește grilele mari de pătrățele => câmp vizual mult mai mic. */
.clr-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:2px; }
.clr-well{ position:relative; width:64px; height:32px; flex:none; cursor:pointer; }
.clr-well .clr-input{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; border:0;
}
.clr-well .clr-prev{
  position:absolute; inset:0; border-radius:9px; pointer-events:none;
  border:2px solid #fff; box-shadow:0 0 0 1px var(--line), 0 2px 6px -2px rgba(10,37,64,.25);
  background-image:
    linear-gradient(45deg,#E6EBF1 25%,transparent 25%,transparent 75%,#E6EBF1 75%),
    linear-gradient(45deg,#E6EBF1 25%,transparent 25%,transparent 75%,#E6EBF1 75%);
  background-size:10px 10px; background-position:0 0,5px 5px; /* carouri = „nesetat" */
}
.clr-well:hover .clr-prev{ box-shadow:0 0 0 2px var(--blue-300), 0 2px 6px -2px rgba(10,37,64,.25); }
.clr-well.set .clr-prev{ background-image:none; }
.clr-hex{
  font-size:12px; font-weight:700; color:var(--muted); font-family:var(--font-body);
  letter-spacing:.02em; min-width:64px;
}
.clr-row .swatch-chip.on + .clr-well .clr-prev{ opacity:.7; }

/* Tooltip-uri mari și rapide pentru butoanele builder-ului (pct 1) */
.ls-tip{
  position:fixed; z-index:400; max-width:240px; pointer-events:none;
  background:var(--navy); color:#fff; font-family:var(--font-body);
  font-size:13px; font-weight:600; line-height:1.4; padding:9px 13px; border-radius:10px;
  box-shadow:0 14px 30px -12px rgba(10,37,64,.55);
  opacity:0; transform:translateY(4px) scale(.97); transition:opacity .16s ease, transform .16s ease;
}
.ls-tip.show{ opacity:1; transform:none; }
.ls-tip::before{
  content:""; position:absolute; left:var(--tip-arrow,50%); top:-5px; margin-left:-5px;
  border:5px solid transparent; border-top:0; border-bottom:5px solid var(--navy);
}
.ls-tip.above::before{ top:auto; bottom:-5px; border-bottom:0; border-top:5px solid var(--navy); }

/* (pct 1) Animații ușoare pe toggle-uri și panouri */
.set-group.open .set-group-body{ animation:setOpen .22s ease; }
.panel-group.open .panel-body{ animation:setOpen .22s ease; }
@keyframes setOpen{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }
.opt-row{ transition:border-color .16s ease, background-color .16s ease, transform .12s ease; }
.opt-row:active{ transform:scale(.985); }
.opt-row input{ transition:transform .14s ease; }
.opt-row input:checked{ transform:scale(1.12); }
.set-group{ transition:border-color .18s ease, box-shadow .18s ease; }
.set-group.open{ border-color:rgba(10,110,242,.35); box-shadow:0 6px 18px -12px rgba(10,37,64,.25); }

/* Titlurile grupurilor de panou, ușor accentuate când sunt deschise */
.panel-group.open > .panel-toggle{ color:var(--blue); }
.panel-group.open > .panel-toggle .chev{ border-color:var(--blue); }

/* ==========================================================================
   v2.20 — Bara de unelte inteligentă (pct 5) + „+" între secțiuni (pct 7)
   ========================================================================== */

/* v2.27 — La secțiunile scunde (meniu/navbar) bara coboară SUB secțiune, ca să
   nu acopere linkurile, numărul de telefon sau butonul din meniu.
   IMPORTANT: NU mai adăugăm `margin-bottom` pentru ea. Acel spațiu apărea și
   dispărea la fiecare re-randare (de exemplu când schimbi o culoare), ceea ce
   făcea pagina să tremure, și lăsa un gol inestetic sub meniu.
   Bara plutește acum peste secțiunea următoare, fără să ocupe loc în layout,
   iar ca să nu se suprapună peste bara secțiunii de dedesubt o deplasăm
   lateral — distanța e calculată în JS (vezi placeToolbars). */
.ls-section.tb-below .ls-toolbar{
  top:auto; bottom:-17px;
  right:var(--tb-shift, 12px);
  transform:translateY(4px);
  transition:opacity .16s ease, transform .16s ease, right .18s ease;
}
.ls-section.tb-below:hover .ls-toolbar,
.ls-section.tb-below.selected .ls-toolbar{ transform:translateY(0); }
/* Secțiuni de înălțime medie: bara coboară puțin, sub antet. */
.ls-section.tb-inset .ls-toolbar{ top:auto; bottom:10px; }
/* bara secțiunii scunde trece peste cea de dedesubt când e activă */
.ls-section.tb-below:hover .ls-toolbar,
.ls-section.tb-below.selected .ls-toolbar{ z-index:24; }

/* „+" între secțiuni: discret, apare la hover pe zona dintre secțiuni */
.ls-add-here{
  position:absolute; left:0; right:0; bottom:-13px; height:26px; z-index:18;
  display:flex; align-items:center; justify-content:center; gap:0;
  background:none; border:0; padding:0; cursor:pointer; opacity:0; transition:opacity .16s ease;
}
.ls-section:hover > .ls-add-here, .ls-add-here:focus-visible{ opacity:1; }
.ls-add-here .ah-line{
  position:absolute; left:8%; right:8%; top:50%; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--blue-300), transparent); opacity:.55;
}
.ls-add-here .ah-btn{
  position:relative; width:26px; height:26px; border-radius:50%;
  background:var(--blue); color:#fff; display:grid; place-items:center;
  box-shadow:0 4px 12px -2px rgba(10,110,242,.5); transition:transform .16s ease;
}
.ls-add-here:hover .ah-btn{ transform:scale(1.14); }
.ls-add-here .ah-tip{
  position:absolute; left:50%; margin-left:22px; white-space:nowrap;
  background:var(--navy); color:#fff; font-size:12.5px; font-weight:600;
  padding:6px 11px; border-radius:8px; opacity:0; transform:translateX(-6px);
  transition:opacity .16s ease, transform .16s ease; pointer-events:none;
  box-shadow:0 10px 24px -12px rgba(10,37,64,.55);
}
.ls-add-here:hover .ah-tip{ opacity:1; transform:none; }
/* pe ultima secțiune (footer) „+"-ul stă complet în interior */
.ls-section:last-child > .ls-add-here{ bottom:6px; }

/* Pop-up în editare: fundalul se întunecă puțin (cerință pct 2) */
.ls-section[data-type="popup"].selected .s-pop-stage{ background:rgba(10,37,64,.72); }
.ls-section[data-type="popup"] .s-pop-stage{ transition:background .22s ease; }

/* Avertisment roșu pentru acțiunile care nu pot funcționa (pct 3) */
.act-warn{
  display:flex; align-items:flex-start; gap:7px; margin:7px 2px 2px;
  font-size:12.5px; line-height:1.45; font-weight:600; color:#B42318;
  background:#FEF3F2; border:1px solid #FDA29B; border-left:3px solid #D92D20;
  border-radius:9px; padding:8px 10px;
  animation:helpIn .18s ease;
}
.act-warn svg{ flex:none; margin-top:1px; }
/* opțiunile indisponibile din listă: șterse și în italic */
.act-select .opt-missing{ color:#98A2B3; font-style:italic; }
.act-select{ transition:border-color .16s ease; }

/* ==========================================================================
   v2.22 — SELECTORUL DE PAGINI
   ========================================================================== */
.page-picker{ position:relative; }
.pp-btn{
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 11px;
  border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer;
  font-family:var(--font-display); font-size:13px; font-weight:800; color:var(--navy);
  transition:.15s ease; max-width:190px;
}
.pp-btn:hover{ border-color:var(--blue-300); background:var(--sky); color:var(--blue); }
.pp-btn[aria-expanded="true"]{ border-color:var(--blue); background:var(--sky); color:var(--blue); }
.pp-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-chev{ flex:none; opacity:.65; }
.pp-menu{
  position:absolute; top:calc(100% + 7px); left:0; z-index:200; width:296px;
  background:#fff; border:1px solid rgba(10,110,242,.28); border-radius:13px;
  box-shadow:0 20px 46px -18px rgba(10,37,64,.45); padding:9px;
  animation:helpIn .17s ease;
}
.pp-menu[hidden]{ display:none; }
.pp-head{
  font-family:var(--font-display); font-size:10.5px; font-weight:800; color:var(--blue);
  letter-spacing:.09em; text-transform:uppercase; padding:3px 5px 8px;
}
.pp-list{ display:flex; flex-direction:column; gap:3px; max-height:290px; overflow-y:auto; }
.pp-item{
  display:flex; align-items:center; gap:3px; border-radius:9px;
  border:1px solid transparent; transition:.14s ease;
}
.pp-item:hover{ background:#F6F9FC; border-color:var(--line); }
.pp-item.on{ background:var(--sky); border-color:var(--blue-300); }
.pp-go{
  flex:1; min-width:0; text-align:left; background:none; border:0; cursor:pointer;
  padding:8px 9px; display:flex; flex-direction:column; gap:2px;
}
.pp-t{
  font-family:var(--font-display); font-size:13.5px; font-weight:800; color:var(--navy);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pp-t em{ font-style:normal; font-weight:600; color:var(--muted); font-size:11px; }
.pp-item.on .pp-t{ color:var(--blue); }
.pp-sub{ font-size:11px; color:var(--muted); font-weight:600; }
.pp-tools{ display:flex; gap:1px; padding-right:5px; opacity:0; transition:opacity .14s ease; }
.pp-item:hover .pp-tools, .pp-item.on .pp-tools{ opacity:1; }
.pp-tools button{
  width:26px; height:26px; border:0; border-radius:7px; background:none; cursor:pointer;
  color:var(--muted); display:grid; place-items:center; transition:.14s ease;
}
.pp-tools button:hover{ background:#fff; color:var(--blue); box-shadow:0 2px 6px -2px rgba(10,37,64,.25); }
.pp-tools button.danger:hover{ color:#D92D20; }
.pp-add{
  width:100%; margin-top:7px; padding:9px; border:1px dashed var(--blue-300);
  border-radius:9px; background:var(--sky); color:var(--blue); cursor:pointer;
  font-family:var(--font-display); font-size:12.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:6px; transition:.15s ease;
}
.pp-add:hover{ background:var(--blue); color:#fff; border-style:solid; }
.pp-note{
  font-size:11px; color:var(--muted); line-height:1.45; padding:8px 5px 2px;
  border-top:1px solid var(--line); margin-top:8px;
}
/* secțiunile globale poartă o insignă în bara de unelte */
.ls-toolbar .tb-global{
  font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--blue); background:var(--sky); border-radius:5px; padding:2px 5px; margin-left:2px;
}
@media (max-width: 860px){
  .pp-btn{ max-width:112px; height:36px; padding:0 9px; font-size:12px; }
  .pp-menu{ width:min(300px, calc(100vw - 24px)); left:auto; right:0; }
}

/* ==========================================================================
   v2.24 (pct 2) — FERESTRELE MODALE SE ÎNCADREAZĂ ÎN ECRAN
   Problema: `.modal` avea `overflow:hidden` fără limită de înălțime, așa că
   pe telefon/tabletă ferestrele înalte („Alege punct de pornire", „Vreau acest
   design") ieșeau din ecran și conținutul de jos devenea inaccesibil.
   Soluția: fereastra nu depășește niciodată ecranul, iar corpul ei derulează.
   ========================================================================== */
.modal-bg{
  align-items:flex-start; justify-content:center;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.modal-bg.open{ display:flex; }
.modal{
  max-height:calc(100dvh - 32px);   /* dvh = înălțimea reală, fără bara browserului */
  display:flex; flex-direction:column;
  margin:auto 0;                    /* centrat când încape, lipit sus când nu */
  overflow:hidden;
}
/* antetul rămâne fix, corpul derulează */
.modal-head{ flex:none; }
.modal-body{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; min-height:0; }
.modal.modal-wide{ max-width:660px; max-height:calc(100dvh - 32px); overflow:hidden; }
/* la ferestrele cu grilă proprie, grila derulează, nu pagina */
.tpl-modal{ max-height:calc(100dvh - 32px); }
.tpl-modal .modal-body{ display:flex; flex-direction:column; }
.tpl-grid{ overflow-y:auto; overscroll-behavior:contain; min-height:0; padding:2px; }
.tpl-foot{ flex:none; }

@media (max-width: 860px){
  .modal-bg{ padding:12px; }
  .modal{ max-height:calc(100dvh - 24px); border-radius:16px; }
  .modal-head{ padding:20px 20px 0; }
  .modal-head h3{ font-size:19px; }
  .modal-head p{ font-size:14px; }
  .modal-body{ padding:16px 20px 20px; }
  .tpl-modal{ padding:0; }
  .tpl-grid{ grid-template-columns:1fr 1fr; gap:8px; }
}
@media (max-width: 480px){
  .tpl-grid{ grid-template-columns:1fr; }
  .tpl-card{ flex-direction:row; align-items:center; gap:10px; padding:11px 12px; }
  .tpl-card .tpl-ico{ font-size:19px; flex:none; }
  .tpl-card .tpl-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  .tpl-foot{ flex-direction:column-reverse; }
  .tpl-foot .btn{ width:100%; }
}

/* v2.24 (pct 3) — lista „Secțiunile paginii" mai compactă */
.mine-item{ padding:8px 9px; gap:8px; }
.mine-item .mi-ico{ width:28px; height:28px; }
.mine-item .mi-txt strong{ font-size:12.5px; }
.mine-item .mi-txt small{ font-size:11px; }
@media (max-width: 860px){
  /* setările: două coloane pe rândurile scurte, ca să încapă mai mult în 35% */
  .sidebar[data-tab] .panel-body{ padding-bottom:4px; }
  .mine-item{ padding:7px 8px; }
}

/* v2.24 (pct 3) — grupurile de setări mai dense, fără să pierdem lizibilitatea */
.set-group-body{ padding-top:4px; }
.dp-label{ margin:11px 2px 4px; }
.clr-row{ gap:7px; }
.settings-head{ padding:10px 12px; margin-bottom:11px; }

/* v2.25 (pct 1) — element nou adăugat: pulsează scurt ca să-l observi */
.just-added{
  animation:justAdded 2.2s ease;
  outline:2px solid var(--blue); outline-offset:3px; border-radius:10px;
}
@keyframes justAdded{
  0%{ outline-color:var(--blue); background-color:rgba(10,110,242,.12); }
  55%{ outline-color:var(--blue); background-color:rgba(10,110,242,.05); }
  100%{ outline-color:transparent; background-color:transparent; }
}

/* v2.25 (pct 3) — codul hex devine câmp editabil (copiezi culori între secțiuni) */
input.clr-hex{
  width:82px; min-width:0; padding:5px 7px;
  border:1px solid var(--line); border-radius:7px; background:#fff;
  font-family:var(--font-body); font-size:11.5px; font-weight:700;
  color:var(--navy); letter-spacing:.03em; text-transform:uppercase;
  transition:.15s ease;
}
input.clr-hex::placeholder{ color:var(--muted); text-transform:none; font-weight:600; letter-spacing:0; }
input.clr-hex:hover{ border-color:var(--blue-300); }
input.clr-hex:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--sky); }
input.clr-hex.bad{
  border-color:#D92D20; background:#FEF3F2; color:#B42318;
  animation:hexBad .3s ease;
}
@keyframes hexBad{ 0%,100%{ transform:none; } 25%{ transform:translateX(-3px); } 75%{ transform:translateX(3px); } }

/* v2.25 (pct 5) — în timpul glisării oprim tranziția, ca degetul să conducă */
.sidebar.dragging{ transition:none; }
.sidebar.dragging .sheet-grip{ background:var(--blue); }

/* ==========================================================================
   v2.28 (pct 3) — CĂUTARE DOMENIU + FORMULARE PE MOBIL ȘI TABLETĂ
   ========================================================================== */
.dom-box{
  margin:0 0 16px; padding:14px; border-radius:12px;
  background:var(--sky); border:1px solid rgba(10,110,242,.24);
}
.dom-label{
  display:block; font-family:var(--font-display); font-size:13px; font-weight:800;
  color:var(--navy); margin-bottom:8px;
}
/* câmp + extensie, lipite ca un singur control */
.dom-row{ display:flex; align-items:stretch; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.dom-row:focus-within{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,110,242,.15); }
.dom-row input{
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  padding:12px 13px; font-family:var(--font-body); font-size:16px; color:var(--navy);
}
.dom-row select{
  flex:none; border:0; border-left:1px solid var(--line); outline:none;
  background:#F6F9FC; color:var(--navy); cursor:pointer;
  font-family:var(--font-display); font-size:14px; font-weight:800;
  padding:0 30px 0 12px; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2540' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:13px;
}
/* buton mic + răspuns în dreapta lui */
.dom-act{ display:flex; align-items:center; gap:10px; margin-top:9px; }
.dom-check{
  flex:none; border:0; border-radius:9px; padding:9px 15px; cursor:pointer;
  background:var(--blue); color:#fff; font-family:var(--font-display);
  font-size:13px; font-weight:800; transition:.15s ease;
}
.dom-check:hover{ background:var(--blue-600); }
.dom-check:disabled{ opacity:.6; cursor:default; }
.dom-status{
  font-family:var(--font-display); font-size:13px; font-weight:800;
  display:inline-flex; align-items:center; gap:5px; opacity:0;
  transform:translateX(-4px); transition:opacity .2s ease, transform .2s ease;
}
.dom-status:not(:empty){ opacity:1; transform:none; }
.dom-status::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.dom-status.ok{ color:#067647; }
.dom-status.err{ color:#D92D20; }
.dom-status.warn{ color:#B54708; }
.dom-note{ font-size:11.5px; color:var(--muted); line-height:1.45; margin-top:8px; }
.dom-note.ok{ color:#067647; font-weight:700; }
.dom-note.err{ color:#B42318; font-weight:600; }

/* ---- FORMULARELE DIN FERESTRE, PE MOBIL ȘI TABLETĂ ----
   Câmpurile ieșeau din ecran sau erau prea înghesuite. Sub 700px trec pe
   toată lățimea, cu font de 16px (sub această valoare iOS mărește singur
   pagina la focus, ceea ce strica așezarea). */
.modal .field{ margin-bottom:12px; }
.modal .field label{
  display:block; font-family:var(--font-display); font-size:12.5px;
  font-weight:800; color:var(--navy); margin-bottom:5px;
}
.modal .field input,
.modal .field select,
.modal .field textarea{
  width:100%; box-sizing:border-box; padding:11px 13px;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  font-family:var(--font-body); font-size:16px; color:var(--navy);
}
.modal .field input:focus,
.modal .field select:focus,
.modal .field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,110,242,.15);
}
.modal .field textarea{ min-height:88px; resize:vertical; }

@media (max-width: 700px){
  .dom-box{ padding:12px; }
  .dom-row input{ font-size:16px; padding:12px; }
  .dom-row select{ font-size:13.5px; padding:0 26px 0 10px; }
  .dom-act{ flex-wrap:wrap; }
  .dom-check{ padding:11px 16px; font-size:13.5px; }
  .modal .act-cards{ grid-template-columns:1fr; gap:8px; }
  .modal .act-card{ padding:14px; }
  .modal-body{ padding-left:16px; padding-right:16px; }
  .modal-head{ padding-left:16px; padding-right:16px; }
}
@media (max-width: 420px){
  .dom-act{ flex-direction:column; align-items:stretch; gap:8px; }
  .dom-check{ width:100%; }
  .dom-status{ justify-content:center; }
}

/* v2.29 — butonul „Alege acest domeniu" + starea blocată a câmpului */
.dom-take{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; margin-top:9px; padding:11px 14px; cursor:pointer;
  border:0; border-radius:10px; background:#067647; color:#fff;
  font-family:var(--font-display); font-size:13.5px; font-weight:800;
  box-shadow:0 6px 16px -6px rgba(6,118,71,.5);
  animation:helpIn .2s ease; transition:.15s ease;
}
.dom-take:hover{ background:#05603A; }
.dom-take[hidden]{ display:none; }
.dom-check[hidden]{ display:none; }

/* câmpul „bifat": arată ca o alegere făcută, dar rămâne clicabil */
.dom-box.is-locked{ background:#ECFDF3; border-color:rgba(6,118,71,.32); }
.dom-box.is-locked .dom-row{ border-color:#067647; background:#fff; cursor:pointer; }
.dom-box.is-locked .dom-row input{
  cursor:pointer; font-weight:800; color:#05603A;
}
.dom-box.is-locked .dom-row select{
  background:#ECFDF3; color:#05603A; pointer-events:none; opacity:.9;
}
.dom-box.is-locked .dom-row::after{
  content:"✓"; align-self:center; padding:0 13px;
  color:#067647; font-weight:800; font-size:15px;
}
.dom-box.is-locked .dom-act{ margin-top:8px; }

/* v6 — în timpul ghidului, bara de unelte a secțiunii vizate rămâne vizibilă
   chiar fără hover, altfel clientul nu are ce să apese pe touch. */
.ls-section.force-toolbar .ls-toolbar{
  opacity:1 !important; transform:none !important; pointer-events:auto !important; z-index:26;
}

/* v3.0 → v3.5: cardurile de design, refolosite în norișor */
/* grila de designuri: max 200px, derulare proprie */
.sm-designs{
  border-top:1px solid var(--line); background:#FBFDFF;
  animation:smOpen .22s ease;
}
@keyframes smOpen{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.sm-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:8px;
  max-height:200px; overflow-y:auto; overscroll-behavior:contain;
}
.sm-grid::-webkit-scrollbar{ width:5px; }
.sm-grid::-webkit-scrollbar-thumb{ background:#D7E2EE; border-radius:3px; }
.sm-card{
  display:flex; flex-direction:column; gap:5px; padding:5px;
  border:1px solid var(--line); border-radius:8px; background:#fff;
  cursor:pointer; transition:.14s ease; text-align:center;
}
.sm-card:hover{
  border-color:var(--blue); background:var(--sky);
  transform:translateY(-2px); box-shadow:0 6px 14px -8px rgba(10,110,242,.5);
}
.sm-card:active{ transform:translateY(0) scale(.97); }
.sm-thumb{ display:block; border-radius:5px; overflow:hidden; border:1px solid #EDF2F7; }
.sm-thumb svg{ display:block; width:100%; height:auto; }
.sm-name{
  font-family:var(--font-body); font-size:10px; font-weight:700; color:var(--slate);
  line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sm-card:hover .sm-name{ color:var(--blue); }

/* ==========================================================================
   v3.1 — ASPECTUL SE ALEGE VIZUAL, PESTE TOT
   Același limbaj grafic în catalog și în setările secțiunii: schițe, nu
   cuvinte. Clientul vede forma înainte s-o aplice.
   ========================================================================== */

/* --- selectorul de așezare din setările secțiunii --- */
#variantPicker{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  max-height:230px; overflow-y:auto; overscroll-behavior:contain; padding:2px;
}
#variantPicker::-webkit-scrollbar{ width:5px; }
#variantPicker::-webkit-scrollbar-thumb{ background:#D7E2EE; border-radius:3px; }
.vpick{
  display:flex; flex-direction:column; gap:5px; padding:5px;
  border:1px solid var(--line); border-radius:9px; background:#fff;
  cursor:pointer; text-align:center; transition:.14s ease;
}
.vpick:hover{
  border-color:var(--blue); background:var(--sky);
  transform:translateY(-2px); box-shadow:0 6px 14px -8px rgba(10,110,242,.45);
}
.vpick:active{ transform:translateY(0) scale(.97); }
.vpick.on{
  border-color:var(--blue); background:var(--sky);
  box-shadow:0 0 0 2px rgba(10,110,242,.22);
}
.vp-thumb{ display:block; border-radius:5px; overflow:hidden; border:1px solid #EDF2F7; }
.vp-thumb svg{ display:block; width:100%; height:auto; }
.vpick.on .vp-thumb{ border-color:var(--blue-300); }
.vp-name{
  font-family:var(--font-body); font-size:10px; font-weight:700; color:var(--slate);
  line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vpick.on .vp-name{ color:var(--blue); font-weight:800; }

/* --- colțurile: forma reală, nu doar numele --- */
.seg-group{ display:flex; gap:5px; }
.seg{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:7px 4px; border:1px solid var(--line); border-radius:9px;
  background:#fff; cursor:pointer; transition:.14s ease;
}
.seg:hover{ border-color:var(--blue-300); background:var(--sky); }
.seg.on{ border-color:var(--blue); background:var(--sky); box-shadow:0 0 0 2px rgba(10,110,242,.18); }
.seg-demo{
  display:block; width:26px; height:15px; flex:none;
  background:var(--blue); opacity:.85; transition:border-radius .18s ease;
}
.seg.on .seg-demo{ opacity:1; }
.seg-lbl{
  font-family:var(--font-body); font-size:9.5px; font-weight:700; color:var(--muted);
  line-height:1.1; text-align:center;
}
.seg.on .seg-lbl{ color:var(--blue); }

/* --- iconițele: ascunse sub o listă, deschise la cerere --- */
.icon-row{
  border:1px solid var(--line); border-radius:9px; background:#fff;
  margin-bottom:5px; overflow:hidden; transition:border-color .15s ease;
}
.icon-row:hover{ border-color:var(--blue-300); }
.icon-row.open{ border-color:var(--blue); }
.icon-toggle{
  width:100%; display:flex; align-items:center; gap:8px; padding:7px 9px;
  background:none; border:0; cursor:pointer; text-align:left; font-family:var(--font-body);
}
.it-now{
  width:26px; height:26px; flex:none; border-radius:7px; background:var(--surface);
  color:var(--blue); display:grid; place-items:center;
}
.icon-row.open .it-now{ background:var(--blue); color:#fff; }
.it-name{
  flex:1; min-width:0; font-size:11.5px; font-weight:700; color:var(--navy);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.it-chev{ flex:none; color:var(--muted); display:grid; transition:transform .2s ease; }
.icon-row.open .it-chev{ transform:rotate(180deg); color:var(--blue); }
.icon-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:4px;
  padding:8px; border-top:1px solid var(--line); background:#FBFDFF;
  max-height:150px; overflow-y:auto; overscroll-behavior:contain;
  animation:smOpen .2s ease;
}
.icon-grid[hidden]{ display:none; }
.icon-opt{
  aspect-ratio:1; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); border-radius:7px; background:#fff;
  color:var(--slate); transition:.13s ease;
}
.icon-opt:hover{ border-color:var(--blue); background:var(--sky); color:var(--blue); }
.icon-opt.on{ border-color:var(--blue); background:var(--blue); color:#fff; }


@media (max-width: 860px){
  #variantPicker{ max-height:190px; }
  .icon-grid{ grid-template-columns:repeat(5, 1fr); max-height:130px; }
}

/* ==========================================================================
   v3.4 — FEREASTRA „CUM VREI SĂ ÎNCEPI?"
   ========================================================================== */
.start-modal{ max-width:640px; width:100%; }
.start-inner{ padding:38px 34px 34px; text-align:center; }
.start-title{
  font-family:var(--font-display); font-size:clamp(26px,4vw,34px); font-weight:800;
  letter-spacing:-.03em; color:var(--navy); margin:0 0 8px;
}
.start-sub{ font-size:15px; color:var(--slate); margin:0 0 28px; }
.start-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.start-opt{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:28px 20px 24px; cursor:pointer; text-align:center;
  border:1.5px solid var(--line); border-radius:18px; background:#fff;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.start-opt:hover{
  border-color:var(--blue); transform:translateY(-3px);
  box-shadow:0 16px 34px -18px rgba(10,110,242,.55);
}
.start-opt.featured{ border-color:var(--blue-300); background:linear-gradient(180deg,#fff,var(--sky)); }
.so-ico{
  width:74px; height:74px; border-radius:18px; background:var(--sky); color:var(--blue);
  display:grid; place-items:center; margin-bottom:4px; transition:.16s ease;
}
.so-ico svg{ width:46px; height:46px; }
.start-opt:hover .so-ico{ background:var(--blue); color:#fff; }
.start-opt strong{ font-family:var(--font-display); font-size:17px; font-weight:800; color:var(--navy); }
.start-opt small{ font-size:13px; line-height:1.5; color:var(--slate); max-width:230px; }
.so-badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--blue); color:#fff; font-family:var(--font-display);
  font-size:11px; font-weight:800; letter-spacing:.04em;
  padding:4px 11px; border-radius:999px; white-space:nowrap;
}
@media (max-width: 560px){
  .start-inner{ padding:30px 18px 22px; }
  .start-grid{ grid-template-columns:1fr; }
  .start-opt{ flex-direction:row; text-align:left; padding:18px; gap:14px; }
  .start-opt .so-ico{ width:56px; height:56px; flex:none; margin:0; }
  .start-opt .so-ico svg{ width:34px; height:34px; }
  .start-opt small{ max-width:none; }
}

/* ==========================================================================
   v3.4 — ZONA GOALĂ DINTRE MENIU ȘI SUBSOL („de la zero")
   ========================================================================== */
.ls-empty{
  margin:0; padding:clamp(56px,10vw,110px) 24px; text-align:center;
  background:repeating-linear-gradient(135deg, #FBFDFF 0 14px, #F4F8FC 14px 28px);
  border-top:1px dashed #D7E2EE; border-bottom:1px dashed #D7E2EE;
  animation:smOpen .3s ease;
}
.le-txt{
  font-family:var(--font-display); font-size:clamp(16px,2vw,19px); font-weight:700;
  color:var(--slate); max-width:440px; margin:0 auto 22px; line-height:1.45;
}
.le-plus{
  width:62px; height:62px; border-radius:50%; border:0; cursor:pointer;
  background:var(--blue); color:#fff; display:inline-grid; place-items:center;
  box-shadow:0 12px 28px -10px rgba(10,110,242,.7);
  transition:transform .18s ease, box-shadow .18s ease;
  animation:lePulse 2.4s ease-in-out infinite;
}
.le-plus:hover{ transform:scale(1.08); box-shadow:0 16px 34px -10px rgba(10,110,242,.85); }
@keyframes lePulse{
  0%,100%{ box-shadow:0 12px 28px -10px rgba(10,110,242,.7), 0 0 0 0 rgba(10,110,242,.35); }
  50%{ box-shadow:0 12px 28px -10px rgba(10,110,242,.7), 0 0 0 12px rgba(10,110,242,0); }
}

/* panoul, scos în evidență când îl deschide „+"-ul din zona goală */
.sidebar.attn{
  animation:panelAttn 2.6s ease;
  box-shadow:0 0 0 3px var(--blue), 14px 0 38px -12px rgba(10,110,242,.55) !important;
}
@keyframes panelAttn{
  0%{ transform:scale(1); }
  12%{ transform:scale(1.018); }
  30%{ transform:scale(1); }
  100%{ transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .le-plus, .sidebar.attn{ animation:none; }
}

/* ==========================================================================
   v3.4 — SEO ȘI SETĂRI AVANSATE
   ========================================================================== */
.seo-page{
  margin-left:auto; margin-right:8px; max-width:92px;
  font-family:var(--font-body); font-size:10.5px; font-weight:800;
  color:var(--blue); background:var(--sky); padding:3px 8px; border-radius:6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:none; letter-spacing:0;
}
.seo-note{
  font-size:12px; line-height:1.45; color:var(--slate); padding:9px 11px; margin:4px 0 6px;
  background:var(--sky); border-left:3px solid var(--blue); border-radius:0 8px 8px 0;
}
.seo-note b{ color:var(--blue); }
.seo-sub{
  font-family:var(--font-display); font-size:10.5px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin:18px 2px 2px;
  padding-top:14px; border-top:1px solid var(--line);
}
.seo-sub:first-of-type{ border-top:0; padding-top:0; margin-top:10px; }
.seo-area{ resize:vertical; min-height:62px; font-family:var(--font-body); line-height:1.45; }
.seo-code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
.seo-id{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; letter-spacing:.02em; }
.seo-id.bad{ border-color:#D92D20; background:#FEF3F2; }
.seo-count{ font-size:11px; color:var(--muted); text-align:right; margin:3px 2px 0; }
.seo-count.over{ color:#B54708; font-weight:700; }
.seo-copy{
  width:100%; margin-top:16px; padding:10px 12px; cursor:pointer;
  border:1.5px dashed var(--blue-300); border-radius:10px; background:#fff;
  color:var(--blue); font-family:var(--font-display); font-size:12.5px; font-weight:800;
  transition:.15s ease;
}
.seo-copy:hover{ background:var(--blue); color:#fff; border-style:solid; }

/* ==========================================================================
   v3.5 — PANOUL DE CONTROL RESTRUCTURAT
   ========================================================================== */
/* v3.6 (pct 3) BUG REPARAT: regula era globală și anula `position:fixed`
   de pe mobil (aceeași specificitate, dar venea mai târziu în fișier).
   Foaia de setări rămânea astfel în pagină și nu se mai putea închide. */
@media (min-width: 861px){
  .sidebar{ position:sticky; }
}
.sidebar{ overflow-x:hidden; }

/* --- „+ Adaugă secțiune", sus-stânga --- */
.add-trigger{
  display:flex; align-items:center; gap:10px; width:100%;
  margin:0 0 14px; padding:11px 12px; cursor:pointer; text-align:left;
  border:1.5px solid var(--blue); border-radius:12px; background:var(--blue); color:#fff;
  font-family:var(--font-display); font-size:14px; font-weight:800; letter-spacing:-.01em;
  box-shadow:0 8px 20px -10px rgba(10,110,242,.7);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.add-trigger:hover{ background:var(--blue-600); transform:translateY(-1px); box-shadow:0 12px 24px -10px rgba(10,110,242,.8); }
.add-trigger:active{ transform:translateY(0) scale(.98); }
.at-plus-ico{
  width:28px; height:28px; flex:none; border-radius:8px; background:rgba(255,255,255,.2);
  display:grid; place-items:center; transition:transform .25s ease;
}
.add-trigger:hover .at-plus-ico{ transform:rotate(90deg); }

/* --- glisarea: catalogul iese spre dreapta, vederea de adăugare intră --- */
#catalogView{ transition:transform .32s cubic-bezier(.32,.72,0,1), opacity .24s ease; }
.add-view{
  position:absolute; inset:0; z-index:6; background:#FBFDFF;
  display:flex; flex-direction:column; padding:18px 16px 0;
  transform:translateX(-100%); opacity:0; visibility:hidden;
  transition:transform .32s cubic-bezier(.32,.72,0,1), opacity .24s ease, visibility 0s linear .32s;
}
.sidebar.adding .add-view{
  transform:none; opacity:1; visibility:visible;
  transition:transform .32s cubic-bezier(.32,.72,0,1), opacity .24s ease, visibility 0s;
}
.sidebar.adding #catalogView{ transform:translateX(100%); opacity:0; pointer-events:none; }
.sidebar.adding #settingsView{ display:none !important; }

.av-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex:none; }
.av-back{
  width:34px; height:34px; flex:none; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--navy);
  display:grid; place-items:center; transition:.15s ease;
}
.av-back:hover{ border-color:var(--blue); color:var(--blue); background:var(--sky); }
.av-titles{ display:flex; flex-direction:column; min-width:0; }
.av-titles strong{ font-family:var(--font-display); font-size:16px; font-weight:800; color:var(--navy); letter-spacing:-.01em; }
.av-titles small{ font-size:11.5px; color:var(--muted); }

/* --- pătratele, pe două coloane, pe toată suprafața panoului --- */
#addList{
  flex:1; min-height:0; max-height:none; overflow-y:auto; overscroll-behavior:contain;
  padding:0 4px 20px 0; margin-right:-4px;
}
#addList::-webkit-scrollbar{ width:6px; }
#addList::-webkit-scrollbar-thumb{ background:#D7E2EE; border-radius:3px; }
#addList .sm-group-title{
  font-family:var(--font-display); font-size:10px; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); padding:4px 2px 8px;
}
#addList .av-grid + .sm-group-title{ margin-top:14px; }
.av-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.add-tile{
  position:relative; aspect-ratio:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; padding:10px 8px;
  border:1px solid var(--line); border-radius:14px; background:#fff;
  cursor:pointer; text-align:center; font-family:var(--font-body);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.add-tile:hover{ border-color:var(--blue); transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(10,110,242,.55); }
.add-tile.on{ border-color:var(--blue); background:var(--sky); box-shadow:0 0 0 2px rgba(10,110,242,.2); }
.add-tile .at-ico{
  width:42px; height:42px; border-radius:12px; background:var(--surface); color:var(--blue);
  display:grid; place-items:center; transition:.15s ease;
}
.add-tile .at-ico svg{ width:22px; height:22px; }
.add-tile:hover .at-ico, .add-tile.on .at-ico{ background:var(--blue); color:#fff; }
.add-tile .at-name{
  font-family:var(--font-display); font-size:12px; font-weight:800; color:var(--navy);
  line-height:1.2; letter-spacing:-.01em;
}
.add-tile.on .at-name{ color:var(--blue); }
.add-tile .at-count{
  position:absolute; top:7px; right:7px; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--sky); color:var(--blue);
  font-family:var(--font-display); font-size:10px; font-weight:800; display:grid; place-items:center;
}

/* --- norișorul cu designuri, PESTE pătrate --- */
.av-pop{
  position:absolute; left:10px; right:10px; bottom:12px; z-index:8;
  max-height:min(72%, 440px); display:flex; flex-direction:column;
  background:#fff; border:1px solid rgba(10,110,242,.3); border-radius:16px;
  box-shadow:0 -6px 30px -8px rgba(10,37,64,.28), 0 24px 48px -20px rgba(10,37,64,.45);
}
.av-pop[hidden]{ display:none; }
.av-pop.show{ animation:avpIn .26s cubic-bezier(.2,1.1,.4,1); }
@keyframes avpIn{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
.avp-head{
  display:flex; align-items:center; gap:10px; padding:12px 12px 10px;
  border-bottom:1px solid var(--line); flex:none;
}
.avp-ico{ width:32px; height:32px; flex:none; border-radius:9px; background:var(--blue); color:#fff; display:grid; place-items:center; }
.avp-titles{ flex:1; min-width:0; display:flex; flex-direction:column; }
.avp-titles strong{ font-family:var(--font-display); font-size:14px; font-weight:800; color:var(--navy); }
.avp-titles small{ font-size:11px; color:var(--muted); }
.avp-x{
  width:30px; height:30px; flex:none; border-radius:9px; border:1px solid var(--line);
  background:#fff; color:var(--muted); cursor:pointer; display:grid; place-items:center;
}
.avp-x:hover{ color:var(--navy); border-color:var(--blue-300); }
.av-pop .sm-grid{ max-height:none; flex:1; min-height:0; padding:10px; }

/* --- Aspect general: subtitluri + comutatorul de culori --- */
.gs-sub{
  font-family:var(--font-display); font-size:10.5px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin:16px 2px 6px;
  padding-top:13px; border-top:1px solid var(--line);
}
.gs-sub:first-child{ margin-top:6px; padding-top:0; border-top:0; }
.gs-toggle{
  width:100%; display:flex; align-items:center; gap:10px; margin-top:12px;
  padding:10px 11px; cursor:pointer; text-align:left; font-family:var(--font-body);
  border:1px solid var(--line); border-radius:11px; background:#fff; transition:.15s ease;
}
.gs-toggle:hover{ border-color:var(--blue-300); }
.gs-toggle.open{ border-color:var(--blue); background:var(--sky); border-radius:11px 11px 0 0; }
.gs-toggle-ico{
  width:30px; height:30px; flex:none; border-radius:9px; background:var(--surface); color:var(--blue);
  display:grid; place-items:center;
}
.gs-toggle.open .gs-toggle-ico{ background:var(--blue); color:#fff; }
.gs-toggle-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.gs-toggle-txt strong{ font-family:var(--font-display); font-size:13px; font-weight:800; color:var(--navy); }
.gs-toggle-txt small{ font-size:10.5px; color:var(--muted); line-height:1.3; }
.gs-toggle-chev{ flex:none; color:var(--muted); display:grid; transition:transform .2s ease; }
.gs-toggle.open .gs-toggle-chev{ transform:rotate(180deg); color:var(--blue); }
.gs-colors{
  border:1px solid var(--blue); border-top:0; border-radius:0 0 11px 11px;
  padding:4px 11px 12px; background:#FBFDFF; animation:smOpen .2s ease;
}
.gs-colors[hidden]{ display:none; }

/* --- telefon: vederea de adăugare umple foaia --- */
@media (max-width: 860px){
  .add-trigger{ margin-bottom:10px; }
  .sidebar.adding{ max-height:74vh; }
  .add-view{ padding:10px 14px 0; }
  .sidebar[data-tab] .panel-group{ display:none; }
  .sidebar[data-tab="mine"] .panel-group[data-group="mine"],
  .sidebar[data-tab="design"] .panel-group[data-group="design"]{ display:block; }
  .av-grid{ grid-template-columns:repeat(3, 1fr); gap:7px; }
  .add-tile{ aspect-ratio:auto; min-height:92px; }
  .av-pop{ max-height:78%; }
}
@media (prefers-reduced-motion: reduce){
  #catalogView, .add-view, .av-pop.show{ transition:none; animation:none; }
}
/* cât e deschisă vederea de adăugare, panoul nu mai derulează dedesubt */
.sidebar.adding{ overflow:hidden; }

/* v3.5 — pe mobil, „+ Adaugă" e un buton de acțiune în bara de taburi */
@media (max-width: 860px){
  .sh-tab.sh-add{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:4px;
    background:var(--blue); color:#fff; border-color:var(--blue); padding:8px 11px;
  }
  .sh-tab.sh-add:hover{ background:var(--blue-600); }
  /* vederea de adăugare acoperă foaia; taburile rămân ascunse sub ea */
  .sidebar.adding .sheet-tabs{ visibility:hidden; }
}

/* ==========================================================================
   v3.6 (pct 2) — PĂTRATELE DIN „ADAUGĂ SECȚIUNE", COMPACTE CA ÎN 2.33
   `aspect-ratio:1` le făcea cât lățimea coloanei (~140px) și nu mai
   încăpeau în panou. Revenim la înălțimea compactă din 2.33.
   ========================================================================== */
.add-tile{
  aspect-ratio:auto; min-height:84px; gap:7px; padding:12px 7px 10px;
  border-radius:12px;
}
.add-tile .at-ico{ width:32px; height:32px; border-radius:9px; }
.add-tile .at-ico svg{ width:17px; height:17px; }
.add-tile .at-name{ font-size:11.5px; line-height:1.25; }
.av-grid{ gap:7px; }
@media (min-width: 1500px){
  .add-tile{ min-height:80px; }
}

/* ==========================================================================
   v3.6 (pct 1) — DIALOGUL PROPRIU
   Același stil ca restul ferestrelor, centrat, cu emoji descriptiv.
   ========================================================================== */
#dlgBg{ z-index:12000; }
.modal.dlg{ max-width:420px; width:100%; }
.dlg-inner{ padding:30px 28px 24px; text-align:center; }
.dlg-emoji{
  font-size:44px; line-height:1; margin:0 auto 14px;
  width:78px; height:78px; display:grid; place-items:center;
  background:var(--sky); border-radius:22px;
  animation:dlgPop .34s cubic-bezier(.2,1.5,.45,1);
}
@keyframes dlgPop{ from{ transform:scale(.5); opacity:0; } to{ transform:none; opacity:1; } }
.dlg-title{
  font-family:var(--font-display); font-size:21px; font-weight:800;
  letter-spacing:-.02em; color:var(--navy); margin:0 0 8px; line-height:1.25;
}
.dlg-text{ font-size:14.5px; line-height:1.55; color:var(--slate); margin:0 auto 18px; max-width:340px; }
.dlg-text[hidden]{ display:none; }
.dlg-input{
  width:100%; box-sizing:border-box; padding:12px 14px; margin:0 0 6px;
  border:1.5px solid var(--line); border-radius:11px; background:#fff;
  font-family:var(--font-body); font-size:16px; color:var(--navy); text-align:left;
}
.dlg-input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,110,242,.15); }
.dlg-input[readonly]{ background:var(--surface); font-size:13.5px; color:var(--slate); }
.dlg-err{ font-size:12.5px; font-weight:700; color:#B42318; text-align:left; margin:2px 2px 10px; }
.dlg-err[hidden]{ display:none; }
.dlg-actions{ display:flex; gap:9px; margin-top:16px; }
.dlg-btn{
  flex:1; padding:12px 14px; border-radius:11px; cursor:pointer;
  font-family:var(--font-display); font-size:14px; font-weight:800; transition:.15s ease;
}
.dlg-btn[hidden]{ display:none; }
.dlg-btn.ghost{ background:#fff; color:var(--navy); border:1.5px solid var(--line); }
.dlg-btn.ghost:hover{ border-color:var(--blue-300); background:var(--sky); }
.dlg-btn.primary{ background:var(--blue); color:#fff; border:1.5px solid var(--blue); }
.dlg-btn.primary:hover{ background:var(--blue-600); }
.dlg-btn.primary.danger{ background:#D92D20; border-color:#D92D20; }
.dlg-btn.primary.danger:hover{ background:#B42318; }
@media (max-width: 480px){
  .dlg-inner{ padding:24px 18px 18px; }
  .dlg-actions{ flex-direction:column-reverse; }
}

/* v3.6 (pct 3) — foaia urmărește degetul; tranziția revine la eliberare */
@media (max-width: 860px){
  .sidebar{ will-change:transform; }
  .sidebar.dragging{ transition:none !important; }
  .sidebar.snapping{ transition:transform .3s cubic-bezier(.32,.72,0,1), max-height .3s cubic-bezier(.32,.72,0,1); }
  /* zonă de prindere mai generoasă și mânerul evidențiat */
  .sheet-head{ touch-action:none; cursor:grab; }
  .sheet-head:active{ cursor:grabbing; }
  .sheet-grip{ width:44px; height:5px; background:#CBD5E1; transition:background .2s ease, width .2s ease; }
  .sidebar.dragging .sheet-grip{ background:var(--blue); width:56px; }
  .sheet-x{ z-index:4; }
}

/* ==========================================================================
   v3.6 (pct 7) — SELECTORUL DE ASPECT: 2 COLOANE, FĂRĂ BARĂ ORIZONTALĂ
   Cauza barei: coloanele `1fr` înseamnă „cel puțin cât conținutul", iar
   numele variantelor nu se rup pe rânduri. Un nume lung împingea coloana
   peste lățimea panoului. `minmax(0, 1fr)` le ține strict pe jumătate.
   Am scos și limita de înălțime, ca schițele să fie mai mari și lizibile.
   ========================================================================== */
#variantPicker{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px; max-height:none; overflow:visible; padding:0;
}
.vpick{ min-width:0; padding:6px; gap:6px; }
.vp-thumb{ border-radius:7px; }
.vp-name{
  font-size:11px; white-space:normal; line-height:1.25;
  overflow:visible; text-overflow:clip; min-height:2.5em;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width: 860px){
  #variantPicker{ max-height:none; }
}

/* ==========================================================================
   v3.6 (pct 8) — FEREASTRA DE ȘABLOANE: DESCRIEREA SUB NUME
   Numele și descrierea stăteau pe coloană doar pe mobil; pe desktop erau
   în linie, lipite una de alta.
   ========================================================================== */
.tpl-card .tpl-txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.tpl-card .tpl-txt strong{ display:block; }
.tpl-card .tpl-txt small{ display:block; }

/* ==========================================================================
   v3.7 (pct 5) — NORIȘORUL SE DESCHIDE DIN PĂTRATUL APĂSAT
   Înainte apărea mereu jos, departe de pătratul ales. Acum se așază sub el
   (sau deasupra, dacă nu încape) și se extinde din el.
   ========================================================================== */
.av-pop{
  transform-origin:50% 0;
  transform:scale(.82) translateY(-6px);
  opacity:0;
  transition:transform .24s cubic-bezier(.22,1.2,.36,1), opacity .18s ease;
}
.av-pop.show{ transform:none; opacity:1; }
.av-pop.from-below{ transform:scale(.82) translateY(6px); }
.av-pop.from-below.show{ transform:none; }
/* pătratul din care s-a deschis rămâne evidențiat */
.add-tile.opened{
  border-color:var(--blue); background:var(--sky);
  box-shadow:0 0 0 2px rgba(10,110,242,.25);
}
.add-tile.opened .at-ico{ background:var(--blue); color:#fff; }
.add-tile.opened .at-name{ color:var(--blue); }
/* săgeata care leagă norișorul de pătrat */
.av-pop::before{
  content:""; position:absolute; top:-7px; left:var(--pop-arrow, 50%);
  width:14px; height:14px; margin-left:-7px; background:#fff;
  border-left:1px solid rgba(10,110,242,.3); border-top:1px solid rgba(10,110,242,.3);
  transform:rotate(45deg); border-radius:2px 0 0 0;
}
.av-pop.from-below::before{ top:auto; bottom:-7px; transform:rotate(225deg); }
@media (prefers-reduced-motion: reduce){
  .av-pop{ transition:opacity .15s ease; transform:none; }
}

/* ==========================================================================
   v3.8 (pct 4) — SALUTUL DE LA PRIMA INTRARE
   ========================================================================== */
#welcomeBg{ z-index:11000; }
.welcome-modal{ max-width:440px; width:100%; }
.wl-inner{ padding:34px 30px 26px; text-align:center; }
.wl-logo{
  display:inline-block; font-family:var(--font-display); font-weight:700;
  font-size:13px; letter-spacing:.18em; color:var(--navy);
  text-transform:uppercase; margin-bottom:16px;
}
.wl-logo b{ color:var(--blue); font-weight:800; }
.wl-title{
  font-family:var(--font-display); font-size:clamp(22px,3.2vw,27px); font-weight:800;
  letter-spacing:-.025em; color:var(--navy); margin:0 0 9px; line-height:1.22;
}
.wl-sub{ font-size:14.5px; line-height:1.55; color:var(--slate); margin:0 auto 22px; max-width:330px; }
.wl-field{ text-align:left; margin-bottom:12px; }
.wl-field label{
  display:block; font-family:var(--font-display); font-size:12.5px; font-weight:800;
  color:var(--navy); margin-bottom:5px;
}
.wl-field input{
  width:100%; box-sizing:border-box; padding:12px 14px;
  border:1.5px solid var(--line); border-radius:11px; background:#fff;
  font-family:var(--font-body); font-size:16px; color:var(--navy);
}
.wl-field input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,110,242,.15); }
.wl-err{ font-size:12.5px; font-weight:700; color:#B42318; text-align:left; margin:-4px 2px 10px; }
.wl-err[hidden]{ display:none; }
.wl-go{
  width:100%; margin-top:6px; padding:13px 16px; cursor:pointer;
  border:0; border-radius:11px; background:var(--blue); color:#fff;
  font-family:var(--font-display); font-size:15px; font-weight:800;
  box-shadow:0 8px 20px -8px rgba(10,110,242,.6); transition:.15s ease;
}
.wl-go:hover{ background:var(--blue-600); }
.wl-skip{
  width:100%; margin-top:9px; padding:9px; cursor:pointer;
  border:0; background:none; color:var(--muted);
  font-family:var(--font-body); font-size:13px; font-weight:600;
}
.wl-skip:hover{ color:var(--blue); text-decoration:underline; }
.wl-note{ font-size:11.5px; color:var(--muted); margin:14px 0 0; }
@media (max-width: 480px){
  .wl-inner{ padding:26px 18px 20px; }
}

/* ==========================================================================
   v3.8 (pct 5) — FEREASTRA DE COMANDĂ PE MOBIL
   Cauza: fereastra e coloană flexibilă, dar pașii (#actStep1/#actStep2) sunt
   învelișuri obișnuite între ea și corpul derulabil. Corpul nu primea
   înălțime, iar `overflow:hidden` de pe fereastră tăia restul — butonul de
   trimitere rămânea sub marginea ecranului, inaccesibil.
   ========================================================================== */
#modalBg .modal > div[id^="actStep"],
#modalBg .modal > .modal-body{
  display:flex; flex-direction:column; min-height:0; flex:1 1 auto;
}
#modalBg .modal > div[id^="actStep"] > .modal-head{ flex:none; }
#modalBg .modal > div[id^="actStep"] > .modal-body{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
/* butonul de trimitere rămâne mereu la vedere, lipit de baza ferestrei */
#modalBg .act-foot, #modalBg .modal-body > .act-submit-wrap{
  position:sticky; bottom:0; z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,0), #fff 28%);
  padding-top:12px; margin-top:4px;
}
#actSubmit{ width:100%; }

@media (max-width: 860px){
  /* pe telefon folosim aproape tot ecranul, cu margini mici */
  #modalBg .modal{ max-height:calc(100dvh - 16px); width:100%; }
  #modalBg .modal-head{ padding:18px 16px 0; }
  #modalBg .modal-head h3{ font-size:18px; }
  #modalBg .modal-body{ padding:14px 16px 16px; }
  /* cardurile de pachet pe o coloană, ca să rămână loc pentru formular */
  #modalBg .act-cards{ grid-template-columns:1fr; gap:8px; }
  #modalBg .act-card{ padding:13px 14px; }
  #modalBg .field{ margin-bottom:10px; }
  #modalBg .field input, #modalBg .field select, #modalBg .field textarea{ font-size:16px; }
  #modalBg .field textarea{ min-height:70px; }
}
@media (max-width: 480px){
  #modalBg .modal{ max-height:calc(100dvh - 8px); border-radius:14px; }
}

/* ==========================================================================
   v3.9 (pct 6) — PANOUL SEMNALEAZĂ CĂ S-A SCHIMBAT
   Când deschizi setările unei secțiuni, panoul face un mic „pop" și capătă
   margine albastră, ca să știi imediat pe ce lucrezi.
   ========================================================================== */
.sidebar.switched{
  animation:panelPop .42s cubic-bezier(.2,1.4,.4,1);
  box-shadow:0 0 0 2px var(--blue), 12px 0 34px -14px rgba(10,110,242,.5) !important;
  border-right-color:var(--blue) !important;
}
@keyframes panelPop{
  0%{ transform:scale(1); }
  38%{ transform:scale(1.015); }
  100%{ transform:scale(1); }
}
/* antetul „Setări secțiune" pulsează scurt, ca privirea să meargă acolo */
.sidebar.switched .settings-head{
  animation:headPulse 1.2s ease;
}
@keyframes headPulse{
  0%{ box-shadow:0 0 0 0 rgba(10,110,242,.45); }
  60%{ box-shadow:0 0 0 7px rgba(10,110,242,0); }
  100%{ box-shadow:0 0 0 0 rgba(10,110,242,0); }
}
@media (max-width: 860px){
  /* pe mobil foaia urcă oricum; păstrăm doar marginea, fără scalare */
  .sidebar.switched{ animation:none; box-shadow:0 -12px 34px -14px rgba(10,110,242,.55), 0 0 0 2px var(--blue) !important; }
}
@media (prefers-reduced-motion: reduce){
  .sidebar.switched, .sidebar.switched .settings-head{ animation:none; }
}

/* ==========================================================================
   v4.0 (pct 3) — SETĂRILE OCUPĂ MAI PUȚIN PE TELEFON
   Panoul acoperea prea mult din ecran și nu mai vedeai ce editezi. Totul în
   interiorul lui e redus la 0.6 din dimensiunea de până acum, iar foaia
   pornește mai joasă. Textele rămân peste pragul de lizibilitate.
   ========================================================================== */
@media (max-width: 860px){
  .sidebar{ max-height:26vh; }            /* era 35vh */
  .sidebar.tall{ max-height:62vh; }       /* era 74vh */
  .sidebar.adding{ max-height:62vh; }

  /* conținutul panoului, compactat */
  .sidebar{ padding:0 10px 12px; font-size:13px; }
  .sheet-head{ margin:0 -10px 7px; padding:5px 10px 0; }
  .sheet-grip{ width:34px; height:4px; margin-bottom:6px; }
  .sh-tab{ padding:6px 5px; font-size:11.5px; border-radius:7px; }
  .sheet-x{ top:11px; right:9px; width:24px; height:24px; }

  .settings-head{ padding:7px 9px; margin-bottom:8px; }
  .settings-head .sh-eyebrow{ font-size:9px; }
  .settings-head h5{ font-size:14px; }

  .set-group-head, .panel-toggle{ padding:8px 9px; font-size:12.5px; }
  .set-group-body, .panel-body{ padding:8px 9px 10px; }
  .dp-label{ font-size:12px; margin:8px 2px 3px; }
  .dp-hint{ font-size:10.5px; }

  /* schițele de aspect și pătratele de secțiuni: mai mici, dar încă clare */
  #variantPicker{ gap:6px; }
  .vpick{ padding:4px; gap:4px; }
  .vp-name{ font-size:9.5px; min-height:2.2em; }
  .add-tile{ min-height:66px; padding:9px 5px 7px; gap:5px; }
  .add-tile .at-ico{ width:26px; height:26px; border-radius:7px; }
  .add-tile .at-ico svg{ width:14px; height:14px; }
  .add-tile .at-name{ font-size:10px; }

  /* controale: mai joase, dar peste 16px la câmpuri (iOS nu mărește pagina) */
  .text-input, .font-select{ padding:8px 10px; font-size:16px; border-radius:8px; }
  .clr-well{ width:52px; height:27px; }
  input.clr-hex{ width:70px; padding:4px 6px; font-size:10.5px; }
  .seg{ padding:5px 3px; gap:3px; }
  .seg-demo{ width:21px; height:12px; }
  .seg-lbl{ font-size:8.5px; }
  .mine-item{ padding:6px 7px; gap:7px; }
  .mine-item .mi-ico{ width:24px; height:24px; }
  .mine-item .mi-txt strong{ font-size:11.5px; }
  .mine-item .mi-txt small{ font-size:10px; }
  .icon-toggle{ padding:6px 8px; }
  .icon-grid{ gap:3px; padding:6px; max-height:112px; }
}

/* v4.0 (pct 3) — indicator de micșorare */
.zoom-badge{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 12px); z-index:68;
  background:rgba(10,37,64,.9); color:#fff; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:12px; font-weight:700;
  padding:7px 14px; border-radius:999px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.zoom-badge.show{ opacity:1; pointer-events:auto; }
.zoom-badge.dim{ opacity:.35; }
.canvas-wrap.zoomed{ overflow-x:hidden; }
/* cât timp foaia de setări e deschisă, indicatorul urcă deasupra ei */
.body.sheet-open .zoom-badge{ bottom:calc(28vh + 12px); }

/* ==========================================================================
   v4.0 (pct 4) — FEREASTRA DE ȘABLOANE PE TELEFON
   Cardurile erau lipite de marginile ecranului, iar denumirile lungi
   („Clinică / Cabinet medical") se tăiau la colțul cardului. Acum fereastra
   are margine, textul se rupe pe rânduri și nimic nu mai iese din card.
   ========================================================================== */
@media (max-width: 860px){
  #tplModalBg{ padding:14px; }
  .tpl-modal{ width:100%; max-width:none; }
  .tpl-modal .modal-head{ padding:20px 18px 0; }
  .tpl-modal .modal-body{ padding:14px 18px 18px; }
  .tpl-grid{ gap:9px; padding:2px; }
  .tpl-card{
    gap:12px; padding:13px 14px; align-items:center;
    min-width:0;                      /* fără asta, textul lung umflă cardul */
  }
  .tpl-card .tpl-ico{ font-size:21px; width:30px; text-align:center; }
  .tpl-card .tpl-txt{ flex:1; min-width:0; gap:3px; }
  /* denumirile lungi se rup pe rânduri în loc să fie tăiate la colț */
  .tpl-card strong{
    font-size:13.5px; line-height:1.25;
    white-space:normal; overflow-wrap:anywhere; hyphens:auto;
  }
  .tpl-card small{ font-size:11.5px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
}
@media (max-width: 420px){
  #tplModalBg{ padding:10px; }
  .tpl-modal .modal-head{ padding:18px 14px 0; }
  .tpl-modal .modal-body{ padding:12px 14px 14px; }
  .tpl-card{ padding:12px; gap:10px; }
  .tpl-card .tpl-ico{ font-size:19px; width:26px; }
  .tpl-card strong{ font-size:13px; }
}

/* ==========================================================================
   v4.1 (pct 4) — ASISTENT DE PORNIRE
   Pagini care glisează lateral. Pe telefon, fereastra folosește aproape tot
   ecranul și conținutul derulează — altfel butoanele rămân sub margine.
   ========================================================================== */
#wizBg{ z-index:11500; }
.wiz-modal{
  max-width:620px; width:100%; max-height:calc(100dvh - 32px);
  display:flex; flex-direction:column; overflow:hidden;
}
.wiz-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 10px; flex:none;
}
.wiz-steps{ display:flex; gap:6px; }
.wiz-dot{
  width:26px; height:4px; border-radius:3px; background:var(--line);
  transition:background .2s ease, width .2s ease;
}
.wiz-dot.on{ background:var(--blue); width:38px; }
.wiz-dot.done{ background:var(--blue-300); }
.wiz-x{
  width:30px; height:30px; border:1px solid var(--line); border-radius:9px;
  background:#fff; color:var(--muted); cursor:pointer; display:grid; place-items:center;
}
.wiz-x:hover{ border-color:var(--blue-300); color:var(--blue); }

/* banda cu paginile */
.wiz-track{
  display:flex; flex:1 1 auto; min-height:0;
  transition:transform .34s cubic-bezier(.32,.72,0,1);
}
.wiz-slide{
  flex:0 0 100%; min-width:100%; box-sizing:border-box;
  padding:4px 24px 18px; overflow-y:auto; overscroll-behavior:contain;
  opacity:.35; transition:opacity .25s ease;
}
.wiz-slide.on{ opacity:1; }
.wiz-title{
  font-family:var(--font-display); font-size:clamp(20px,3vw,25px); font-weight:800;
  letter-spacing:-.025em; color:var(--navy); margin:0 0 6px; line-height:1.25;
}
.wiz-sub{ font-size:14px; line-height:1.5; color:var(--slate); margin:0 0 18px; }

/* opțiunile */
.wiz-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; }
.wiz-opt{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:14px 10px; cursor:pointer; text-align:center;
  border:1.5px solid var(--line); border-radius:12px; background:#fff;
  transition:.15s ease;
}
.wiz-opt:hover{ border-color:var(--blue-300); background:var(--sky); }
.wiz-opt.on{ border-color:var(--blue); background:var(--sky); box-shadow:0 0 0 2px rgba(10,110,242,.18); }
.wo-ico{ font-size:24px; line-height:1; }
.wo-lbl{ font-family:var(--font-display); font-size:12.5px; font-weight:800; color:var(--navy); line-height:1.25; }
.wiz-opt.on .wo-lbl{ color:var(--blue); }
.wo-desc{ font-size:11px; color:var(--muted); line-height:1.3; }
.wiz-style .wiz-opt{ align-items:flex-start; text-align:left; padding:13px 14px; }

/* câmpuri */
.wiz-field{ margin-bottom:12px; }
.wiz-field label{
  display:block; font-family:var(--font-display); font-size:12.5px; font-weight:800;
  color:var(--navy); margin-bottom:5px;
}
.wiz-field input{
  width:100%; box-sizing:border-box; padding:11px 13px;
  border:1.5px solid var(--line); border-radius:10px; background:#fff;
  font-family:var(--font-body); font-size:16px; color:var(--navy);
}
.wiz-field input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,110,242,.15); }
.wiz-field small{ display:block; font-size:11.5px; color:var(--muted); margin-top:4px; }
.wiz-err{ font-size:12.5px; font-weight:700; color:#B42318; margin:-4px 0 10px; }
.wiz-err[hidden]{ display:none; }
.wiz-consent{
  display:flex; gap:9px; align-items:flex-start; margin-top:14px;
  padding:11px 12px; border-radius:10px; background:var(--surface);
  font-size:12px; line-height:1.5; color:var(--slate); cursor:pointer;
}
.wiz-consent input{ margin-top:2px; flex:none; width:16px; height:16px; accent-color:var(--blue); }
.wiz-consent b{ color:var(--navy); }

/* variantele finale */
.wiz-badge{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:10px;
  padding:5px 12px; border-radius:999px; background:var(--sky);
  font-family:var(--font-display); font-size:12px; font-weight:800; color:var(--blue);
}
.wiz-badge span{ opacity:.5; }
.wiz-cards{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.wiz-card{
  position:relative; display:flex; flex-direction:column; gap:8px; padding:8px;
  border:1.5px solid var(--line); border-radius:13px; background:#fff; cursor:pointer;
  transition:.16s ease;
}
.wiz-card:hover{
  border-color:var(--blue); transform:translateY(-3px);
  box-shadow:0 14px 28px -16px rgba(10,110,242,.5);
}
.wc-vis{
  display:flex; flex-direction:column; gap:4px; padding:9px;
  border-radius:9px; min-height:104px; border:1px solid rgba(10,37,64,.07);
}
.wc-bar{ height:6px; border-radius:3px; width:46%; }
.wc-h{ height:8px; border-radius:3px; opacity:.85; }
.wc-h.sm{ width:64%; opacity:.5; }
.wc-btn{ height:12px; width:50%; border-radius:999px; margin-top:2px; }
.wc-row{ display:flex; gap:4px; margin-top:auto; }
.wc-row i{ flex:1; height:18px; border-radius:4px; border:1px solid rgba(10,37,64,.07); }
.wc-name{ font-family:var(--font-display); font-size:11.5px; font-weight:800; color:var(--navy); text-align:center; }
.wiz-card:hover .wc-name{ color:var(--blue); }
.wc-tag{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:var(--blue); color:#fff; font-size:10px; font-weight:800;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}

/* subsolul */
.wiz-foot{
  display:flex; gap:9px; justify-content:space-between;
  padding:12px 18px 16px; border-top:1px solid var(--line); flex:none;
  background:#fff;
}
.wiz-btn{
  padding:11px 20px; border-radius:10px; cursor:pointer;
  font-family:var(--font-display); font-size:14px; font-weight:800; transition:.15s ease;
}
.wiz-btn.ghost{ background:#fff; color:var(--navy); border:1.5px solid var(--line); }
.wiz-btn.ghost:hover{ border-color:var(--blue-300); background:var(--sky); }
.wiz-btn.primary{ background:var(--blue); color:#fff; border:1.5px solid var(--blue); margin-left:auto; }
.wiz-btn.primary:hover{ background:var(--blue-600); }
.wiz-btn.primary:disabled{ opacity:.45; cursor:default; }
.wiz-btn[hidden]{ display:none; }

@media (max-width: 640px){
  #wizBg{ padding:8px; }
  .wiz-modal{ max-height:calc(100dvh - 12px); border-radius:16px; }
  .wiz-slide{ padding:2px 16px 14px; }
  .wiz-grid{ grid-template-columns:1fr 1fr; gap:7px; }
  /* variantele una sub alta, cu derulare — se văd întregi */
  .wiz-cards{ grid-template-columns:1fr; gap:9px; }
  .wiz-card{ flex-direction:row; align-items:center; gap:12px; padding:10px; }
  .wc-vis{ flex:0 0 108px; min-height:84px; }
  .wc-name{ text-align:left; font-size:13px; }
  .wc-tag{ left:auto; right:10px; top:-8px; transform:none; }
  .wiz-foot{ padding:10px 14px 14px; }
  .wiz-btn{ padding:11px 16px; font-size:13.5px; }
}