@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#f5f6f8;--panel:#fff;--text:#14171c;--muted:#707782;--line:#e5e7eb;--accent:#20252c;--r:18px}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}.app-shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}.sidebar{padding:24px 18px;background:#11151a;color:#fff;display:flex;flex-direction:column;gap:28px}.brand{display:flex;gap:12px;align-items:center}.logo{width:38px;height:38px;border-radius:12px;background:#fff;color:#11151a;display:grid;place-items:center;font-weight:800}.brand span{display:block;color:#89919b;font-size:12px;margin-top:2px}.sidebar nav{display:grid;gap:8px}.nav-btn{border:0;background:transparent;color:#c8cdd3;text-align:left;padding:11px 12px;border-radius:10px;cursor:pointer}.nav-btn.active,.nav-btn:hover{background:#232931;color:#fff}.badge{float:right;background:#353d47;padding:1px 7px;border-radius:999px;font-size:12px}.sidebar-note{margin-top:auto;color:#89919b;font-size:12px;line-height:1.5}.main{padding:34px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}.topbar h1{margin:0 0 5px;font-size:28px}.topbar p{margin:0;color:var(--muted)}button{cursor:pointer}.primary,.ghost,.small{border-radius:12px;padding:10px 14px;border:1px solid var(--line);background:#fff}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.ghost:hover,.small:hover{background:#f1f2f4}.danger{color:#b91c1c}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,440px));gap:18px}.quiz-card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 30px rgba(17,24,39,.035)}.quiz-card{padding:22px}.quiz-card h3{margin:12px 0 8px}.quiz-meta{color:var(--muted);font-size:13px}.status{display:inline-flex;font-size:12px;padding:5px 8px;border-radius:999px;background:#ecfdf5;color:#047857}.card-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}.view,.project-pane{display:none}.view.active,.project-pane.active{display:block}.editor-head{display:flex;justify-content:space-between;margin-bottom:14px}.editor-actions{display:flex;gap:8px}.project-tabs{display:flex;gap:8px;background:#e9ebee;padding:5px;border-radius:14px;width:max-content;margin-bottom:18px}.project-tab{border:0;background:transparent;border-radius:10px;padding:9px 16px;font-weight:650;color:#68707b}.project-tab.active{background:#fff;color:#15191e;box-shadow:0 2px 10px rgba(0,0,0,.06)}.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px}.panel{padding:20px;margin-bottom:16px}.intro-panel{background:#161b21;color:#fff;padding:26px}.intro-panel h2{font-size:24px;line-height:1.18;margin:7px 0 8px}.intro-panel p{margin:0;color:#aeb5bd;line-height:1.55}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#8c949f;font-weight:800}.block-head{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:6px}.block-head h3{margin:4px 0 0;font-size:19px}.switch-line{display:flex;align-items:center;gap:7px;font-size:12px!important;font-weight:500!important;color:var(--muted);white-space:nowrap}.switch-line input{width:auto}.repeat-list{display:grid;gap:10px;margin-top:12px}.repeat-item{border:1px solid var(--line);background:#fafbfb;border-radius:14px;padding:14px}.repeat-item .mini-title{font-size:12px;font-weight:750;margin-bottom:5px}.repeat-item .grid2{margin-top:0}label{display:block;font-size:13px;font-weight:650;margin:12px 0 7px}input,select,textarea{width:100%;border:1px solid #d1d5db;border-radius:10px;padding:11px 12px;background:#fff;outline:none;resize:vertical}input:focus,select:focus,textarea:focus{border-color:#9ca3af;box-shadow:0 0 0 3px rgba(17,24,39,.05)}.big-input{font-size:21px;font-weight:700}.section-title{display:flex;justify-content:space-between;align-items:center;margin:20px 0 10px}.question-card{position:relative}.q-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}.q-number{flex:1}.drag{color:#9ca3af}.icon-btn{border:0;background:transparent;font-size:22px;color:#6b7280}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.option-row{display:grid;grid-template-columns:1fr 34px;gap:8px;margin:8px 0}.option-row button{border:0;background:#f1f2f4;border-radius:8px}.options-block.hidden{display:none}.sticky{position:sticky;top:24px}.url-box{background:#f1f2f4;border-radius:10px;padding:10px;font-size:12px;word-break:break-all}.full{width:100%;margin-top:10px}.muted{color:var(--muted);font-size:12px;line-height:1.5}.settings-narrow{max-width:700px}.toolbar{display:flex;gap:8px;margin-bottom:12px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:780px}th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);font-size:13px}th{color:var(--muted);font-weight:600;background:#fafafa}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}.stat b{display:block;font-size:26px;margin-top:8px}.stat span{color:var(--muted);font-size:13px}.analytics-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.funnel-row,.drop-row{margin:16px 0}.funnel-label,.drop-label{display:flex;justify-content:space-between;font-size:13px}.bar{height:9px;background:#eef0f2;border-radius:999px;margin-top:7px;overflow:hidden}.bar i{display:block;height:100%;background:#111827;border-radius:999px}dialog:not(.app-modal):not(.block-dialog):not(.preview-modal){width:min(1180px,96vw);height:min(850px,94vh);border:0;border-radius:20px;padding:0;box-shadow:0 30px 80px rgba(0,0,0,.25)}dialog::backdrop{background:rgba(0,0,0,.45)}.dialog-head{height:54px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}iframe{width:100%;height:calc(100% - 54px);border:0}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.main{padding:18px}.editor-layout,.analytics-grid{grid-template-columns:1fr}.editor-side{order:-1}.sticky{position:static}.stats{grid-template-columns:1fr 1fr}.topbar{gap:12px}.topbar h1{font-size:24px}.project-tabs{width:100%;overflow:auto}.project-tab{white-space:nowrap}.grid2{grid-template-columns:1fr}}

.block-builder-title{align-items:flex-end}.no-margin{margin:4px 0 0}.dynamic-block{padding:0;overflow:hidden}.dynamic-block.is-disabled{opacity:.62}.block-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 18px;border-bottom:1px solid var(--line);background:#fbfbfc}.block-title-wrap{display:flex;align-items:center;gap:14px;min-width:0}.block-title-wrap h3{margin:0 0 3px;font-size:17px}.block-title-wrap p{margin:0;color:var(--muted);font-size:12px}.block-index{width:36px;height:36px;border-radius:10px;background:#11151a;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}.block-actions{display:flex;gap:5px}.icon-action{width:35px;height:35px;padding:0;border:1px solid var(--line);background:#fff;border-radius:9px;color:#555d68}.icon-action:hover:not(:disabled){background:#f0f1f3}.icon-action:disabled{opacity:.28;cursor:default}.danger-icon{color:#b91c1c}.block-state-note{padding:8px 18px;background:#f5f6f7;color:#727984;font-size:11px;border-bottom:1px solid var(--line)}.block-fields{padding:4px 18px 20px}.repeat-item-head{display:flex;justify-content:space-between;align-items:center}.tiny-danger{width:27px;height:27px;border:0;background:#f4f4f5;border-radius:7px;color:#a11;font-size:17px}.add-block-bottom{width:100%;border:1.5px dashed #cfd3d8;background:transparent;border-radius:16px;padding:17px;color:#59616c;font-weight:700;margin:2px 0 30px}.add-block-bottom:hover{background:#fff;border-color:#9da4ad}.block-dialog{width:min(760px,94vw);height:auto;max-height:88vh}.block-dialog .dialog-head{height:auto;min-height:68px}.block-picker{padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.block-choice{border:1px solid var(--line);background:#fff;border-radius:14px;text-align:left;padding:16px;display:flex;gap:13px;align-items:flex-start}.block-choice:hover{background:#f6f7f8;border-color:#c8ccd1}.block-choice>span{width:36px;height:36px;border-radius:10px;background:#11151a;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}.block-choice b{display:block;margin:1px 0 5px}.block-choice p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}.empty-blocks{text-align:center;padding:48px 20px}
@media(max-width:700px){.block-toolbar{align-items:flex-start;display:block}.block-actions{margin-top:12px}.block-picker{grid-template-columns:1fr}.block-builder-title{align-items:flex-start;gap:12px}.block-builder-title .primary{white-space:nowrap}}

.info-box{margin-top:14px;padding:14px 16px;border-radius:12px;background:#f5f6f7;color:#69717c;font-size:12px;line-height:1.5}

.option-row-rich{align-items:flex-start}.option-fields{display:grid;grid-template-columns:1fr 1.15fr;gap:8px;flex:1}.option-row-rich>button{margin-top:1px}.option-image{font-size:12px}.primary,.ghost,.small,.add-block-bottom,.icon-action{font-family:'Roboto',Arial,sans-serif;font-weight:700}.primary{padding:12px 18px;border-radius:11px;font-size:14px}
@media(max-width:700px){.option-fields{grid-template-columns:1fr}}

/* v7 button typography */
button,.primary,.ghost,.small,.add-block-bottom,.icon-action{
  font-family:'Roboto',Arial,sans-serif !important;
  letter-spacing:0 !important;
}
.primary{font-weight:600 !important;font-size:14px !important;}

/* v9 editor button typography */
button,.primary,.ghost,.small,.add-block-bottom,.icon-action{
  font-family:'Roboto',Arial,sans-serif !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
.primary{font-size:14px !important;font-weight:500 !important;}
.ghost,.small{font-size:13px !important;font-weight:500 !important;}

button,.primary,.ghost,.small,.add-block-bottom{
  -webkit-font-smoothing:antialiased !important;
  text-rendering:optimizeLegibility !important;
  font-synthesis:none !important;
}
.primary{font-weight:500 !important;letter-spacing:.006em !important;}
.ghost,.small{font-weight:400 !important;letter-spacing:.004em !important;}

.add-work-btn{
  margin-top:10px !important;
  padding:12px 16px !important;
  border-radius:11px !important;
  border:1px solid #d7d9dd !important;
  background:#fff !important;
  font-weight:500 !important;
}
.add-demo-work{
  margin-top:10px !important;
  font-size:12px !important;
}
.works-editor-hint{
  margin-top:12px;
  padding:11px 13px;
  border-radius:10px;
  background:#f7f7f8;
  color:#73777f;
  font-size:12px;
  line-height:1.45;
}

/* v14 cabinet polish */
.block-state-note{
  font-size:13px !important;
  line-height:1.4 !important;
  padding:11px 18px !important;
  font-weight:500 !important;
  color:#626872 !important;
}

/* Bigger, softer checkbox */
input[type="checkbox"]{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  border-radius:7px !important;
  accent-color:#20252c;
  cursor:pointer;
}
label:has(input[type="checkbox"]){
  font-size:14px !important;
  line-height:1.35 !important;
  font-weight:500 !important;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Visibility button */
.toggle-block{
  width:42px !important;
  height:42px !important;
  border-radius:12px !important;
  font-size:19px !important;
  background:#fff !important;
  border:1px solid #dfe2e6 !important;
  box-shadow:0 3px 10px rgba(0,0,0,.03);
}
.toggle-block:hover{
  background:#f6f7f8 !important;
  border-color:#cfd3d8 !important;
}

.block-title-wrap h3{
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
}
.block-title-wrap p{
  font-size:13px !important;
  line-height:1.35 !important;
}

/* Works editor */
.works-editor-head{
  margin:18px 0 8px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid #e1e4e8;
  border-radius:14px;
  background:#fafbfc;
}
.works-editor-head>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.works-editor-head b{
  font-size:15px;
  font-weight:600;
}
.works-editor-head span{
  font-size:12px;
  color:#888e97;
}
.add-work-top{
  min-height:42px !important;
  margin:0 !important;
  padding:11px 16px !important;
  border-radius:11px !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  white-space:nowrap;
}
.add-work-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  margin-top:14px !important;
  padding:12px 18px !important;
  border-radius:12px !important;
  border:1px solid #d5d8dd !important;
  background:#fff !important;
  color:#26292e !important;
  font-size:14px !important;
  font-weight:500 !important;
}
.works-editor-hint{
  margin-top:12px !important;
  padding:11px 13px !important;
  border-radius:10px !important;
  background:#f7f7f8 !important;
  color:#73777f !important;
  font-size:13px !important;
  line-height:1.45 !important;
}

.required-block-badge{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  background:#f1f3f5;
  color:#6d737c;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}
.restore-blocks-btn{
  width:100%;
  margin:-16px 0 32px;
  border:0;
  background:transparent;
  color:#737983;
  font-family:'Roboto',Arial,sans-serif;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  padding:10px;
}
.restore-blocks-btn:hover{color:#26292e;text-decoration:underline;}

/* v16 optional promo block */
.dynamic-block[data-block] .required-block-badge{user-select:none}

/* v18 cabinet spacing */
.editor-main .repeat-item{margin-bottom:14px !important}
.editor-main .repeat-list + .small,
.editor-main .add-item{margin-top:14px !important;margin-bottom:12px !important}
.editor-main .small,.editor-main .ghost,.editor-main .primary{margin-right:8px;margin-bottom:10px}
.promo-control-card{
  margin:12px 0 18px;padding:14px 16px;border:1px solid #e2e4e8;border-radius:14px;
  background:#fafbfc;display:flex;align-items:center;justify-content:space-between;gap:18px
}
.promo-control-card>div:first-child{display:flex;flex-direction:column;gap:3px}
.promo-control-card b{font-size:15px;font-weight:600}.promo-control-card span{font-size:12px;color:#858b94}
.promo-control-actions{display:flex;gap:8px;flex-wrap:wrap}.promo-control-actions button{margin:0 !important}
@media(max-width:700px){
 .promo-control-card{align-items:flex-start;flex-direction:column}
 .promo-control-actions{width:100%}.promo-control-actions button{flex:1;min-width:130px}
}

/* v19 mandatory quiz */
.required-block-badge{white-space:nowrap}

/* v20 collapsible blocks */
.dynamic-block.is-collapsed .block-state-note,
.dynamic-block.is-collapsed .block-fields{
  display:none !important;
}
.dynamic-block .collapse-block{
  width:42px !important;
  height:42px !important;
  border-radius:12px !important;
  font-size:18px !important;
  transition:transform .18s ease, background .18s ease;
}
.dynamic-block:not(.is-collapsed) .collapse-block{
  transform:rotate(180deg);
}
.dynamic-block.is-collapsed .block-toolbar{
  border-bottom:0 !important;
}
.dynamic-block.is-collapsed{
  margin-bottom:12px !important;
}
.dynamic-block:not(.is-collapsed){
  margin-bottom:18px !important;
}

/* v22 drag & drop */
.block-toolbar{
  position:relative;
}
.drag-handle{
  width:34px;
  height:42px;
  flex:none;
  border:0;
  background:transparent;
  color:#9aa0a8;
  border-radius:9px;
  font-size:20px;
  line-height:1;
  cursor:grab;
  letter-spacing:-4px;
  padding:0 9px 0 4px;
}
.drag-handle:hover{
  background:#f0f2f4;
  color:#5f6670;
}
.drag-handle:active{
  cursor:grabbing;
}
.dynamic-block[draggable="true"]{
  cursor:default;
}
.dynamic-block.is-dragging{
  opacity:.45;
  transform:scale(.995);
}
.dynamic-block.drag-over-top{
  box-shadow:0 -3px 0 #20252c, 0 10px 30px rgba(0,0,0,.04) !important;
}
.dynamic-block.drag-over-bottom{
  box-shadow:0 3px 0 #20252c, 0 10px 30px rgba(0,0,0,.04) !important;
}

/* Keep toolbar visually aligned with handle */
.dynamic-block .block-toolbar{
  gap:8px;
}
.dynamic-block .block-title-wrap{
  flex:1;
}

/* v23 layout presets */
.layout-presets{
  margin:12px 0 16px;
  padding:14px 16px;
  border:1px solid #e2e4e8;
  border-radius:14px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.layout-presets>div:first-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.layout-presets b{font-size:15px;font-weight:600}
.layout-presets span{font-size:12px;color:#858b94}
.layout-preset-actions{display:flex;gap:8px;flex-wrap:wrap}
.layout-preset-actions button{margin:0 !important}

/* smoother and clearer drag */
.dynamic-block{
  transition:transform .18s ease, opacity .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.drag-handle{
  transition:background .15s ease,color .15s ease,transform .15s ease !important;
}
.drag-handle:hover{
  transform:scale(1.04);
}
.dynamic-block.is-dragging{
  opacity:.32 !important;
  transform:scale(.985) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.08) !important;
}
.dynamic-block.drag-over-top::before,
.dynamic-block.drag-over-bottom::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  height:4px;
  border-radius:999px;
  background:#20252c;
  z-index:5;
  box-shadow:0 0 0 4px rgba(32,37,44,.08);
}
.dynamic-block.drag-over-top::before{top:-8px}
.dynamic-block.drag-over-bottom::after{bottom:-8px}
.dynamic-block{
  position:relative;
}

@media(max-width:700px){
  .layout-presets{align-items:flex-start;flex-direction:column}
  .layout-preset-actions{width:100%}
  .layout-preset-actions button{flex:1;min-width:140px}
}

/* v24 — pointer drag */
.drag-source-hidden{
  visibility:hidden !important;
}
.drag-floating{
  position:fixed !important;
  z-index:99999 !important;
  pointer-events:none !important;
  opacity:.92 !important;
  transform:rotate(.25deg) scale(1.005);
  box-shadow:0 24px 60px rgba(0,0,0,.18) !important;
  background:#fff !important;
  border-radius:16px !important;
}
.drag-placeholder{
  margin:10px 0 !important;
  border:2px dashed #9aa0a8;
  border-radius:16px;
  background:rgba(32,37,44,.035);
  transition:height .12s ease, transform .12s ease;
}
body.is-pointer-dragging{
  user-select:none !important;
  cursor:grabbing !important;
}
.drag-handle{
  touch-action:none;
}

/* Quiz question cards collapsed by default */
.question-card,
.quiz-question-card{
  position:relative;
}
.quiz-collapse-btn{
  margin-left:auto;
  width:38px;
  height:38px;
  border:1px solid #dfe2e6;
  background:#fff;
  border-radius:11px;
  font-size:18px;
  line-height:1;
  color:#646b75;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}
.quiz-question-collapsed .quiz-collapse-btn{
  transform:rotate(0deg);
}
.question-card:not(.quiz-question-collapsed) .quiz-collapse-btn,
.quiz-question-card:not(.quiz-question-collapsed) .quiz-collapse-btn{
  transform:rotate(180deg);
}
.quiz-question-collapsed .question-body,
.quiz-question-collapsed .q-body,
.quiz-question-collapsed .question-content,
.quiz-question-collapsed .options-block{
  display:none !important;
}

/* Fallback for current template structure:
   hide editable controls except header row while collapsed */
.quiz-question-collapsed > :not(:first-child){
  display:none !important;
}
.quiz-question-collapsed > :first-child{
  display:flex !important;
  align-items:center;
}

/* Preset buttons clearer */
.layout-preset-actions button{
  min-height:42px;
  padding:11px 16px !important;
  border-radius:11px !important;
  font-size:13.5px !important;
  font-weight:500 !important;
}

/* v25 drag stability */
.drag-floating{
  position:fixed !important;
  z-index:99999 !important;
  pointer-events:none !important;
  height:auto !important;
  min-height:76px !important;
  max-height:110px !important;
  overflow:hidden !important;
  opacity:.97 !important;
  transform:scale(1.01);
  box-shadow:0 22px 55px rgba(0,0,0,.18) !important;
  background:#fff !important;
  border:1px solid #dfe2e6 !important;
  border-radius:16px !important;
}
.drag-floating .block-actions{
  pointer-events:none !important;
}
.drag-floating .drag-handle{
  display:none !important;
}
.drag-source-hidden{
  display:none !important;
}
.drag-placeholder{
  min-height:76px !important;
  border:2px dashed #858c96 !important;
  border-radius:16px !important;
  background:rgba(32,37,44,.04) !important;
  margin:10px 0 !important;
}
body.is-pointer-dragging *{
  cursor:grabbing !important;
}

/* preset state */
.layout-preset-actions button.is-active{
  background:#20252c !important;
  color:#fff !important;
  border-color:#20252c !important;
}
.layout-preset-actions button:not(.is-active):hover{
  background:#f4f5f6 !important;
}

/* quiz collapse */
.question-card.quiz-question-collapsed > label,
.question-card.quiz-question-collapsed > input,
.question-card.quiz-question-collapsed > .grid2,
.question-card.quiz-question-collapsed > .options-block{
  display:none !important;
}
.question-card .q-head{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
.question-card .q-head .q-number{
  flex:1 !important;
}
.quiz-collapse-btn{
  width:38px !important;
  height:38px !important;
  border:1px solid #dfe2e6 !important;
  background:#fff !important;
  border-radius:11px !important;
  font-size:18px !important;
  color:#646b75 !important;
  cursor:pointer !important;
  transition:transform .18s ease,background .18s ease !important;
}
.question-card:not(.quiz-question-collapsed) .quiz-collapse-btn{
  transform:rotate(180deg);
}
.question-card.quiz-question-collapsed{
  padding-bottom:16px !important;
}

/* v26 clean presets + clearer quiz question creation */
.quiz-questions-meta{
  margin:12px 0 10px;
  padding:12px 14px;
  border:1px solid #e2e4e8;
  border-radius:12px;
  background:#fafbfc;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.quiz-questions-meta b{
  font-size:14px;
  font-weight:600;
}
.quiz-questions-meta span{
  font-size:12px;
  color:#7b818a;
}
.question-card.question-just-added{
  border-color:#9ca3ad !important;
  box-shadow:0 0 0 4px rgba(32,37,44,.07),0 12px 32px rgba(0,0,0,.06) !important;
  transition:box-shadow .2s ease,border-color .2s ease;
}
#addQuestionBtn{
  min-height:44px !important;
  padding:12px 18px !important;
  border-radius:12px !important;
  font-size:14px !important;
  font-weight:500 !important;
}

/* v27 */
.dynamic-block[data-block] select[data-field="layout"]{
  min-height:44px;
  border-radius:11px;
}

/* v28 visual About picker */
.about-layout-picker{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:8px 0 18px;
}
.about-layout-option{
  appearance:none;
  border:1px solid #dfe2e6;
  background:#fff;
  border-radius:13px;
  padding:10px;
  text-align:left;
  cursor:pointer;
  min-width:0;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,transform .16s ease;
}
.about-layout-option:hover{
  border-color:#b9bec6;
  transform:translateY(-1px);
}
.about-layout-option.is-selected{
  border-color:#20252c;
  box-shadow:0 0 0 2px rgba(32,37,44,.08);
  background:#fafafa;
}
.about-layout-option strong{
  display:block;
  margin-top:9px;
  font-size:13px;
  line-height:1.2;
  font-weight:600;
  color:#20252c;
}
.about-layout-option small{
  display:block;
  margin-top:3px;
  font-size:11px;
  line-height:1.3;
  color:#7c828b;
}
.about-layout-preview{
  height:72px;
  display:grid;
  gap:6px;
  padding:7px;
  border-radius:9px;
  background:#f2f3f5;
  overflow:hidden;
}
.about-layout-preview i,
.about-layout-preview b{
  display:block;
  border-radius:6px;
}
.about-layout-preview i{background:#cfd3d8}
.about-layout-preview b{
  position:relative;
  background:#fff;
}
.about-layout-preview b::before,
.about-layout-preview b::after{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  height:5px;
  border-radius:999px;
  background:#d9dde2;
}
.about-layout-preview b::before{top:14px}
.about-layout-preview b::after{top:25px;right:22px}
.preview-left{grid-template-columns:.85fr 1.15fr}
.preview-right{grid-template-columns:1.15fr .85fr}
.preview-right i{order:2}
.preview-right b{order:1}
.preview-text{grid-template-columns:1fr}
.preview-text i{display:none}
.preview-text b::before{
  top:18px;
  left:18%;
  right:18%;
}
.preview-text b::after{
  top:31px;
  left:28%;
  right:28%;
}

@media(max-width:760px){
  .about-layout-picker{
    grid-template-columns:1fr;
  }
  .about-layout-option{
    display:grid;
    grid-template-columns:110px 1fr;
    column-gap:12px;
    align-items:center;
  }
  .about-layout-preview{
    grid-row:1/3;
  }
  .about-layout-option strong{margin-top:0}
}

/* v29 visual layout choices */
.layout-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 18px}
.layout-choice{border:1px solid #dfe2e6;background:#fff;border-radius:14px;padding:10px;text-align:left;cursor:pointer}
.layout-choice.is-selected{border-color:#20252c;box-shadow:0 0 0 2px rgba(32,37,44,.08)}
.layout-choice strong,.layout-choice small{display:block}.layout-choice small{color:#7c828b;margin-top:3px}
.layout-mini{display:block;height:54px;border-radius:9px;background:linear-gradient(90deg,#e7e9ec 31%,transparent 31% 34%,#e7e9ec 34% 65%,transparent 65% 68%,#e7e9ec 68%)}
@media(max-width:760px){.layout-choice-grid{grid-template-columns:1fr}}

/* v30 explicit visual Works picker */
.works-layout-picker{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:8px 0 18px;
}
.works-layout-option{
  border:1px solid #dfe2e6;
  background:#fff;
  border-radius:14px;
  padding:10px;
  text-align:left;
  cursor:pointer;
  min-width:0;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.works-layout-option:hover{
  border-color:#b9bec6;
  transform:translateY(-1px);
}
.works-layout-option.is-selected{
  border-color:#20252c;
  box-shadow:0 0 0 2px rgba(32,37,44,.08);
}
.works-layout-option strong,
.works-layout-option small{display:block}
.works-layout-option strong{
  margin-top:9px;
  font-size:13px;
  font-weight:600;
}
.works-layout-option small{
  margin-top:3px;
  font-size:11px;
  line-height:1.3;
  color:#7c828b;
}
.works-layout-preview{
  height:78px;
  border-radius:9px;
  background:#f2f3f5;
  padding:8px;
  display:grid;
  align-items:stretch;
  gap:6px;
  overflow:hidden;
}
.works-layout-preview i{
  display:block;
  border-radius:7px;
  background:linear-gradient(180deg,#cfd3d8 0 68%,#fff 68%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.03);
}
.works-preview-three{
  grid-template-columns:repeat(3,1fr);
}
.works-preview-two{
  grid-template-columns:repeat(2,1fr);
}
.works-preview-slider{
  grid-template-columns:18px 1fr 18px;
  align-items:center;
}
.works-preview-slider i{
  height:58px;
}
.works-preview-slider button-like{
  width:18px;
  height:28px;
  border-radius:9px;
  background:#fff;
  display:grid;
  place-items:center;
  color:#7f858e;
  font-size:16px;
}
@media(max-width:760px){
  .works-layout-picker{grid-template-columns:1fr}
  .works-layout-option{
    display:grid;
    grid-template-columns:130px 1fr;
    column-gap:12px;
    align-items:center;
  }
  .works-layout-preview{grid-row:1/3}
  .works-layout-option strong{margin-top:0}
}

/* v32: previews correspond to the actual Works layout */
.works-layout-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
.works-preview-slider3,.works-preview-slider4{
  grid-template-columns:16px minmax(0,1fr) 16px;
  align-items:center;gap:5px;
}
.works-preview-slider3 .works-mini-cards,
.works-preview-slider4 .works-mini-cards{
  display:grid;gap:5px;height:58px;
}
.works-preview-slider3 .works-mini-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.works-preview-slider4 .works-mini-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.works-preview-slider3 .works-mini-cards i,
.works-preview-slider4 .works-mini-cards i{height:58px;min-width:0}
.works-preview-slider3 button-like,
.works-preview-slider4 button-like{
  width:16px;height:28px;border-radius:8px;background:#fff;display:grid;place-items:center;
  color:#7f858e;font-size:15px;
}
@media(max-width:1100px){.works-layout-picker{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.works-layout-picker{grid-template-columns:1fr}}

.layout-mini-icons{background:radial-gradient(circle at 17% 50%,#c8ccd1 0 9px,transparent 10px),radial-gradient(circle at 50% 50%,#c8ccd1 0 9px,transparent 10px),radial-gradient(circle at 83% 50%,#c8ccd1 0 9px,transparent 10px),#f1f2f4}
.layout-mini-band{background:linear-gradient(90deg,#e1e4e7 0 32%,#f8f8f9 32% 34%,#e1e4e7 34% 66%,#f8f8f9 66% 68%,#e1e4e7 68%)}
.layout-mini-timeline{background:radial-gradient(circle at 17% 50%,#c8ccd1 0 6px,#fff 7px 10px,transparent 11px),radial-gradient(circle at 50% 50%,#c8ccd1 0 6px,#fff 7px 10px,transparent 11px),radial-gradient(circle at 83% 50%,#c8ccd1 0 6px,#fff 7px 10px,transparent 11px),linear-gradient(transparent 48%,#d4d7db 48% 52%,transparent 52%)}
.layout-mini-split{background:linear-gradient(90deg,transparent 49%,#d7dade 49% 51%,transparent 51%),linear-gradient(135deg,#e3e5e8 0 23%,transparent 23% 42%,#e3e5e8 42% 66%,transparent 66%)}

/* v34 — sticky Page actions */
.sticky-page-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px;
}
.sticky-page-actions button{
  min-height:44px;
  margin:0 !important;
  border-radius:11px !important;
  font-size:13px !important;
  font-weight:500 !important;
}
.editor-side .sticky{
  top:18px !important;
}
@media(max-width:980px){
  .sticky-page-actions{
    grid-template-columns:1fr;
  }
}

/* v35 color presets */
.color-presets{display:flex;flex-wrap:wrap;gap:8px;margin:7px 0 10px}
.color-presets button{width:34px;height:34px;border-radius:10px;border:2px solid transparent;background:var(--sw);cursor:pointer;box-shadow:0 0 0 1px #dfe2e6}
.color-presets button.is-active{border-color:#fff;box-shadow:0 0 0 2px #20252c}

/* Thank-you page picker */
.thanks-layout-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 20px}
.thanks-layout-option{border:1px solid #dfe2e6;background:#fff;border-radius:14px;padding:10px;text-align:left;cursor:pointer}
.thanks-layout-option.is-selected{border-color:#20252c;box-shadow:0 0 0 2px rgba(32,37,44,.08)}
.thanks-layout-option strong,.thanks-layout-option small{display:block}
.thanks-layout-option strong{margin-top:9px;font-size:13px}.thanks-layout-option small{margin-top:3px;font-size:11px;color:#7c828b}
.thanks-preview{height:82px;border-radius:10px;background:#f2f3f5;display:grid;place-items:center;position:relative;padding:10px}
.thanks-preview i{width:34px;height:34px;border-radius:50%;background:#cdd2d8}
.thanks-preview b{width:58%;height:9px;border-radius:8px;background:#fff;position:absolute;bottom:14px}
.thanks-preview-progress em{position:absolute;left:14px;right:14px;bottom:10px;height:3px;background:#cbd0d6;border-radius:99px}
.thanks-preview-contact em{position:absolute;right:15px;top:15px;width:38px;height:20px;background:#fff;border-radius:12px}
@media(max-width:760px){.thanks-layout-picker{grid-template-columns:1fr}}

/* v36 notification settings */
.settings-section{padding:18px 0;border-top:1px solid #e5e7ea}
.settings-section:first-of-type{border-top:0;padding-top:4px}
.settings-section h3{margin:0 0 8px;font-size:16px}
.notify-toggle{display:flex!important;align-items:center;gap:10px;margin:14px 0 8px!important;font-weight:600}
.notify-toggle input{width:20px;height:20px;accent-color:#20252c}
.notify-fields{transition:opacity .18s ease}
.notify-fields.is-disabled{opacity:.4}
.notify-fields.is-disabled input{pointer-events:none}
.small-note{font-size:12px!important;line-height:1.45}

/* v37 — softer controls */

/* Custom rounded checkbox */
.notify-toggle{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:16px 0 10px !important;
  font-weight:600 !important;
  cursor:pointer !important;
}
.notify-toggle input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  border:1.5px solid #aeb4bc !important;
  border-radius:8px !important;
  background:#fff !important;
  display:grid !important;
  place-items:center !important;
  cursor:pointer !important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .12s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.notify-toggle input[type="checkbox"]:hover{
  border-color:#7f8791 !important;
  box-shadow:0 0 0 4px rgba(32,37,44,.05);
}
.notify-toggle input[type="checkbox"]:checked{
  background:#20252c !important;
  border-color:#20252c !important;
}
.notify-toggle input[type="checkbox"]:checked::after{
  content:"";
  width:8px;
  height:14px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
.notify-toggle input[type="checkbox"]:active{
  transform:scale(.96);
}

/* Inputs in notification section a little softer */
.settings-section .notify-fields input{
  min-height:48px !important;
  border-radius:14px !important;
}

/* Color control: make the browser picker trigger itself look like a proper card/button */
#pageAccent{
  width:100% !important;
  height:52px !important;
  padding:4px !important;
  border:1px solid #cfd4da !important;
  border-radius:15px !important;
  background:#fff !important;
  cursor:pointer !important;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
#pageAccent::-webkit-color-swatch-wrapper{
  padding:0 !important;
}
#pageAccent::-webkit-color-swatch{
  border:0 !important;
  border-radius:11px !important;
}
#pageAccent::-moz-color-swatch{
  border:0 !important;
  border-radius:11px !important;
}

/* Preset swatches slightly rounder / more tactile */
.color-presets button{
  width:36px !important;
  height:36px !important;
  border-radius:12px !important;
  box-shadow:0 0 0 1px #dfe2e6,0 2px 6px rgba(0,0,0,.04) !important;
  transition:transform .14s ease,box-shadow .14s ease;
}
.color-presets button:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 1px #c9ced5,0 5px 12px rgba(0,0,0,.07) !important;
}
.color-presets button.is-active{
  border-color:#fff !important;
  box-shadow:0 0 0 2px #20252c,0 5px 12px rgba(0,0,0,.07) !important;
}

/* General input rounding in settings */
.settings-narrow input,
.settings-narrow textarea,
.settings-narrow select{
  border-radius:14px !important;
}

/* v38 — custom modern color picker, always open */
.custom-color-picker{
  margin-top:10px;
}
.color-current{
  width:100%;
  min-height:58px;
  border:1px solid #d6dae0;
  border-radius:16px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px;
  cursor:default;
}
.color-current>span:first-child{
  width:58px;
  height:40px;
  border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.color-current-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.color-current-text b{
  font-size:13px;
  font-weight:600;
}
.color-current-text small{
  font-size:12px;
  color:#80868f;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.color-picker-panel{
  margin-top:10px;
  padding:12px;
  border:1px solid #dfe2e6;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.05);
}
.sv-area{
  --pure-hue:#ff9568;
  position:relative;
  height:220px;
  overflow:hidden;
  border-radius:14px;
  background:var(--pure-hue);
  cursor:crosshair;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
  touch-action:none;
}
.sv-white,
.sv-black{
  position:absolute;
  inset:0;
}
.sv-white{background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.sv-black{background:linear-gradient(0deg,#000,rgba(0,0,0,0))}
.sv-handle{
  position:absolute;
  width:20px;height:20px;
  border:3px solid #fff;
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px #20252c,0 2px 8px rgba(0,0,0,.25);
}
.color-row{
  margin-top:14px;
}
.color-row label{
  display:block;
  margin-bottom:7px;
  font-size:12px;
  color:#737983;
}
.hue-range{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:12px;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00) !important;
  cursor:pointer;
}
.hue-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:#fff;border:3px solid #fff;
  box-shadow:0 0 0 2px #20252c,0 2px 6px rgba(0,0,0,.2);
}
.hue-range::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid #fff;
  box-shadow:0 0 0 2px #20252c,0 2px 6px rgba(0,0,0,.2);
}
.color-values{
  display:grid;
  grid-template-columns:1.3fr repeat(3,.7fr);
  gap:8px;
  margin-top:14px;
}
.color-values label{
  margin:0 !important;
}
.color-values label span{
  display:block;
  margin:0 0 6px;
  font-size:11px;
  color:#7c828a;
  text-align:center;
}
.color-values input{
  width:100%;
  min-height:42px !important;
  padding:8px 9px !important;
  border-radius:11px !important;
  text-align:center;
  font-size:13px !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media(max-width:760px){
  .sv-area{height:180px}
  .color-values{grid-template-columns:1fr 1fr}
}

/* v39 — compact color picker: presets visible, advanced picker opens on click */
.color-current{
  position:relative;
  cursor:pointer !important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.color-current:hover{
  border-color:#bcc2ca;
  background:#fafbfc;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.color-current::after{
  content:"⌄";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:#f2f3f5;
  color:#616873;
  font-size:18px;
  font-weight:600;
  transition:transform .18s ease,background .18s ease;
}
.color-current[aria-expanded="true"]::after{
  transform:translateY(-50%) rotate(180deg);
  background:#e9ebee;
}
.color-current-text{
  padding-right:46px;
}
.color-picker-panel{
  max-height:700px;
  opacity:1;
  overflow:hidden;
  transform:translateY(0);
  transition:max-height .22s ease,opacity .18s ease,transform .18s ease,margin-top .18s ease,padding .18s ease,border-width .18s ease;
}
.color-picker-panel.is-collapsed{
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
  margin-top:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  border-width:0 !important;
  pointer-events:none;
}

/* v40 — exact icon centering */
.color-current::after{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  padding:0 !important;
  text-align:center !important;
  font-family:Arial,sans-serif !important;
  font-size:18px !important;
  font-weight:700 !important;
}

/* v41 — optically centered CSS chevrons instead of font glyphs */
.color-current::after{
  content:"" !important;
  width:10px !important;
  height:10px !important;
  border-right:2px solid #646b75 !important;
  border-bottom:2px solid #646b75 !important;
  border-radius:0 !important;
  background:transparent !important;
  position:absolute !important;
  right:19px !important;
  top:50% !important;
  transform:translateY(-62%) rotate(45deg) !important;
  display:block !important;
}
.color-current[aria-expanded="true"]::after{
  transform:translateY(-38%) rotate(225deg) !important;
}

/* v42 — color value inputs: no clipping */
.color-values{
  grid-template-columns:1.35fr repeat(3,minmax(72px,.72fr)) !important;
  gap:10px !important;
}
.color-values label{
  min-width:0 !important;
}
.color-values input{
  min-width:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:9px 10px !important;
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
#colorR,#colorG,#colorB{
  appearance:textfield;
  -moz-appearance:textfield;
}
#colorR::-webkit-outer-spin-button,
#colorR::-webkit-inner-spin-button,
#colorG::-webkit-outer-spin-button,
#colorG::-webkit-inner-spin-button,
#colorB::-webkit-outer-spin-button,
#colorB::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
@media(max-width:760px){
  .color-values{
    grid-template-columns:1.25fr repeat(3,minmax(68px,1fr)) !important;
  }
  .color-values input{
    font-size:14px !important;
    padding:8px 7px !important;
  }
}

/* v43 — compact color value fields without clipping */
.color-values{
  display:grid !important;
  grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,.72fr)) !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
}
.color-values label{
  min-width:0 !important;
  width:100% !important;
}
.color-values input{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  padding:8px 8px !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:400 !important;
  text-align:center !important;
  overflow:hidden !important;
}
#colorHexInput{
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
#colorR,#colorG,#colorB{
  font-size:14px !important;
  font-weight:400 !important;
}
@media(max-width:760px){
  .color-values{
    grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,.75fr)) !important;
    gap:7px !important;
  }
  .color-values input{
    padding:8px 6px !important;
    font-size:13px !important;
  }
  #colorHexInput{
    font-size:12.5px !important;
  }
}

/* v44 — Domain tab */
.domain-card{padding:24px!important}
.domain-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}
.domain-card-head h3{margin:0 0 4px;font-size:18px}
.domain-card-head p{margin:0}
.domain-status{display:inline-flex;align-items:center;white-space:nowrap;padding:7px 10px;border-radius:999px;background:#f1f2f4;color:#737983;font-size:11px;font-weight:600}
.domain-status.is-ready{background:#edf7f0;color:#3d7450}
.domain-status.is-pending{background:#fff6e7;color:#95651d}
.domain-slug-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border:1px solid #d6dae0;border-radius:14px;overflow:hidden;background:#fff}
.domain-slug-row input{border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important}
.domain-slug-row span{padding:0 15px;color:#6f7680;font-size:13px;border-left:1px solid #e1e4e7;white-space:nowrap}
.domain-hint{font-size:11px;color:#8a9098;margin:7px 2px 17px}
.domain-check{display:flex!important;align-items:center!important;gap:10px!important;margin:18px 0 0!important;font-size:13px;font-weight:500;cursor:pointer}
.domain-check input{appearance:none;-webkit-appearance:none;width:24px!important;height:24px!important;min-width:24px!important;border:1.5px solid #b8bec6!important;border-radius:7px!important;background:#fff!important;display:grid!important;place-items:center!important}
.domain-check input:checked{background:#20252c!important;border-color:#20252c!important}
.domain-check input:checked:after{content:"";width:7px;height:12px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.domain-connect-btn{margin-top:12px!important}
.domain-instruction{margin-top:20px;padding:18px;border:1px solid #e1e4e7;border-radius:16px;background:#fafafa}
.domain-instruction.is-hidden{display:none}
.domain-instruction h4{margin:0 0 7px;font-size:14px}.domain-instruction p{margin:0;color:#747b84;font-size:12px;line-height:1.5}
.dns-demo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.dns-demo>div{padding:12px;border-radius:12px;background:#fff;border:1px solid #e6e8eb}
.dns-demo small,.dns-demo strong{display:block}.dns-demo small{color:#8b9199;font-size:10px;margin-bottom:4px}.dns-demo strong{font-size:12px}
.domain-note{margin-top:12px!important}
.domain-preview-box{padding:14px;border-radius:14px;background:#f5f6f7;border:1px solid #e3e5e8;margin:10px 0}
.domain-preview-box small,.domain-preview-box strong{display:block}.domain-preview-box small{font-size:10px;color:#8a9098;margin-bottom:5px}.domain-preview-box strong{font-size:13px;overflow-wrap:anywhere}
.domain-side-note{font-size:11px!important;line-height:1.45}
@media(max-width:700px){
 .domain-card-head{display:block}.domain-status{margin-top:10px}
 .domain-slug-row{grid-template-columns:1fr}.domain-slug-row span{border-left:0;border-top:1px solid #e1e4e7;padding:10px 14px}
 .dns-demo{grid-template-columns:1fr}
}

/* v45 — precise modern checkbox */
.domain-check input{
  position:relative!important;
  display:inline-block!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  vertical-align:middle!important;
}
.domain-check input:checked:after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:46%!important;
  width:6px!important;
  height:11px!important;
  border:solid #fff!important;
  border-width:0 2px 2px 0!important;
  transform:translate(-50%,-50%) rotate(45deg)!important;
  transform-origin:center!important;
}

/* v46 — legal documents */
.legal-mode-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 6px}
.legal-mode-option{border:1px solid #dfe2e6;background:#fff;border-radius:14px;padding:10px;text-align:left;cursor:pointer;transition:.16s ease}
.legal-mode-option:hover{border-color:#bcc2ca;transform:translateY(-1px)}
.legal-mode-option.is-selected{border-color:#20252c;box-shadow:0 0 0 2px rgba(32,37,44,.08)}
.legal-mode-option strong,.legal-mode-option small{display:block}
.legal-mode-option strong{margin-top:9px;font-size:13px}.legal-mode-option small{margin-top:3px;font-size:11px;line-height:1.35;color:#7c828b}
.legal-mode-preview{height:72px;border-radius:10px;background:#f3f4f6;display:grid;grid-template-columns:32px 1fr;gap:8px;padding:10px;position:relative}
.legal-mode-preview i{border-radius:8px;background:#d1d5da}.legal-mode-preview b{border-radius:8px;background:#fff}
.legal-preview-auto em{position:absolute;left:50px;right:12px;bottom:14px;height:5px;border-radius:99px;background:#d8dce1}
.legal-preview-external:after{content:"↗";position:absolute;right:13px;top:12px;color:#90969e;font-size:15px}
.legal-auto-section.is-hidden,.legal-own-section.is-hidden,.legal-external-section.is-hidden{display:none}
.legal-subhead{margin-top:24px!important}
.legal-data-grid{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.legal-checkbox{display:inline-flex!important;align-items:center!important;gap:9px!important;margin:0!important;padding:10px 12px;border:1px solid #e0e3e7;border-radius:12px;background:#fff;font-size:12px;font-weight:500;cursor:pointer}
.legal-checkbox input{appearance:none;-webkit-appearance:none;width:22px!important;height:22px!important;min-width:22px!important;margin:0!important;border:1.5px solid #b9bfc7!important;border-radius:7px!important;background:#fff!important;position:relative}
.legal-checkbox input:checked{background:#20252c!important;border-color:#20252c!important}
.legal-checkbox input:checked:after{content:"";position:absolute;left:50%;top:46%;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg)}
.legal-doc-preview{margin-top:22px;padding:17px;border-radius:16px;background:#f7f8f9;border:1px solid #e3e5e8}
.legal-doc-preview-head b,.legal-doc-preview-head span{display:block}.legal-doc-preview-head b{font-size:13px}.legal-doc-preview-head span{font-size:11px;color:#878d95;margin-top:2px}
.legal-doc-list{display:grid;gap:7px;margin-top:13px}.legal-doc-list>div{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:11px;background:#fff;border:1px solid #e8eaed}
.legal-doc-list span{font-size:10px;color:#969ca4}.legal-doc-list strong{font-size:12px}
.legal-side-status{padding:12px;border:1px solid #e4e6e9;border-radius:12px;background:#f7f8f9;margin-top:8px}
.legal-side-status small,.legal-side-status strong{display:block}.legal-side-status small{font-size:10px;color:#8e949c;margin-bottom:4px}.legal-side-status strong{font-size:12px}
@media(max-width:760px){.legal-mode-picker{grid-template-columns:1fr}.legal-data-grid{display:grid;grid-template-columns:1fr 1fr}}

/* v47 — consistent vertical rhythm for stacked option rows */
#tab-documents .panel > .legal-checkbox + .legal-checkbox,
#tab-settings .notify-toggle + .notify-fields + .notify-toggle{
  margin-top:12px !important;
}
#tab-documents .panel > .legal-checkbox{
  width:100%;
  min-height:50px;
}
#tab-documents .panel > .legal-checkbox + .legal-checkbox{
  margin-bottom:18px !important;
}
#tab-documents .panel > h3 + .legal-checkbox{
  margin-top:14px !important;
}
.contact-method-settings{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid #e5e7ea;
}
.contact-method-checks{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:10px;
}
.contact-method-checks .legal-checkbox{
  width:auto !important;
}

/* v49 — question images */
.question-image-editor{margin:15px 0 18px;padding:14px;border:1px solid #e1e4e8;border-radius:14px;background:#fafbfc}
.muted-inline{font-size:11px;color:#8a9098;font-weight:400}
.question-image-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:start}
.question-image-preview{height:110px;border-radius:12px;background:#eef0f2;border:1px dashed #d6dae0;overflow:hidden;display:grid;place-items:center;color:#949aa2;font-size:11px}
.question-image-preview img{width:100%;height:100%;object-fit:cover;display:block}
.question-image-actions{min-width:0}
.question-image-actions>small{display:block;margin-top:7px;color:#8a9098;font-size:10.5px;line-height:1.4}
.question-image-buttons{display:flex;gap:8px;margin-top:8px}
.upload-btn,.option-upload-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 12px;border:1px solid #d8dce1;border-radius:10px;background:#fff;font-size:11px;font-weight:600;cursor:pointer;color:#3c424a}
.upload-btn input,.option-upload-btn input{display:none}
.q-image-remove:disabled{opacity:.4;cursor:default}
.option-image-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}
.option-upload-btn{min-height:40px;white-space:nowrap}
@media(max-width:700px){
 .question-image-row{grid-template-columns:1fr}
 .question-image-preview{height:160px}
}

/* v50 — image upload for site blocks */
.site-image-field{margin:14px 0}
.site-image-preview{height:160px;border:1px dashed #d6dae0;border-radius:14px;background:#f2f3f5;display:grid;place-items:center;overflow:hidden;color:#9298a0;font-size:11px;margin-bottom:9px}
.site-image-preview img{width:100%;height:100%;object-fit:cover;display:block}
.site-image-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.site-upload-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:42px;padding:9px 13px!important;border:1px solid #d8dce1;border-radius:11px;background:#fff;font-size:11px!important;font-weight:600!important;cursor:pointer;margin:0!important;white-space:nowrap}
.site-upload-btn input{display:none}
.item-image-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}
@media(max-width:700px){
 .site-image-controls{grid-template-columns:1fr 1fr}
 .site-image-controls>input{grid-column:1/-1}
 .site-image-preview{height:190px}
}

/* v54 — quiz editor cleanup */
.question-image-editor{
  padding:18px !important;
  border-radius:16px !important;
}
.question-image-row{
  grid-template-columns:220px minmax(0,1fr) !important;
  gap:18px !important;
  align-items:stretch !important;
}
.question-image-preview{
  min-height:160px !important;
  height:100% !important;
  border-radius:14px !important;
  cursor:pointer !important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
}
.question-image-preview:hover{
  border-color:#aeb5be !important;
  background:#f7f8f9 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.05) !important;
  transform:translateY(-1px);
}
.question-image-preview span{
  width:100%;
  height:100%;
  min-height:150px;
  padding:18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  text-align:center !important;
  line-height:1.35 !important;
}
.question-image-preview span b{
  font-size:24px !important;
  line-height:1 !important;
  font-weight:400 !important;
}
.question-image-actions{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-width:0 !important;
}
.question-image-buttons{
  margin-top:0 !important;
}
.primary-upload{
  min-height:44px !important;
  padding:10px 16px !important;
  border-radius:12px !important;
}
.link-toggle,
.option-url-toggle{
  border:0;
  background:transparent;
  padding:8px 0;
  color:#767d86;
  font:500 11px Roboto,Arial,sans-serif;
  cursor:pointer;
  text-align:left;
}
.link-toggle:hover,
.option-url-toggle:hover{color:#30353b}
.link-toggle span,
.option-url-toggle span{
  display:inline-block;
  transition:transform .16s ease;
}
.link-toggle.is-open span,
.option-url-toggle.is-open span{transform:rotate(180deg)}
.collapsed-url,
.option-url-wrap{
  display:none;
}
.collapsed-url.is-open,
.option-url-wrap.is-open{
  display:block;
  margin-top:4px;
}
.question-image-actions > small{
  margin-top:9px !important;
}

/* Answer options: clean three-part row */
.option-row-rich{
  align-items:center !important;
  gap:10px !important;
}
.option-row-rich .option-fields{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 108px !important;
  gap:12px !important;
  align-items:center !important;
}
.option-row-rich .option-text{
  min-height:58px !important;
  margin:0 !important;
}
.option-image-tools{
  display:grid !important;
  grid-template-columns:72px 1fr !important;
  gap:7px !important;
  align-items:center !important;
  min-width:0 !important;
}
.option-image-preview{
  width:72px !important;
  height:58px !important;
  border-radius:12px !important;
  cursor:pointer !important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.option-image-preview:hover{
  border-color:#adb4bd !important;
  background:#f8f9fa !important;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.option-image-preview span{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1px !important;
  line-height:1 !important;
}
.option-image-preview span b{
  font-size:17px !important;
  font-weight:400 !important;
}
.option-image-preview span small{
  font-size:9px !important;
}
.option-url-toggle{
  width:100%;
  height:34px;
  padding:0 8px !important;
  border:1px solid #e1e4e7;
  border-radius:9px;
  background:#fafbfc;
  text-align:center;
}
.option-url-wrap{
  grid-column:1/-1;
}
.option-url-wrap input{
  min-height:40px !important;
  margin:0 !important;
  font-size:12px !important;
}
.option-delete{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  border-radius:10px !important;
  align-self:center !important;
}
.options-list{
  display:grid;
  gap:10px;
}
@media(max-width:800px){
  .question-image-row{grid-template-columns:1fr !important}
  .question-image-preview{height:180px !important}
  .option-row-rich .option-fields{grid-template-columns:1fr !important}
  .option-image-tools{grid-template-columns:72px minmax(0,1fr) !important}
}

/* v55 — global select arrows: give the chevron breathing room */
select{
  -webkit-appearance:none !important;
  appearance:none !important;
  padding-right:46px !important;
  background-color:#fff !important;
  background-image:
    linear-gradient(45deg,transparent 50%,#555c65 50%),
    linear-gradient(135deg,#555c65 50%,transparent 50%) !important;
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50% !important;
  background-size:6px 6px,6px 6px !important;
  background-repeat:no-repeat !important;
}
select:focus{
  background-image:
    linear-gradient(45deg,transparent 50%,#30353b 50%),
    linear-gradient(135deg,#30353b 50%,transparent 50%) !important;
}

/* v55 — quiz answer editor: remove native file controls and give actions space */
.option-row-rich{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 42px !important;
  gap:12px !important;
  align-items:center !important;
  margin:10px 0 !important;
}
.option-row-rich .option-fields{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 250px !important;
  gap:14px !important;
  align-items:center !important;
  min-width:0 !important;
}
.option-row-rich .option-text{
  min-height:58px !important;
  margin:0 !important;
}
.option-image-tools{
  display:grid !important;
  grid-template-columns:104px 128px !important;
  gap:10px !important;
  align-items:center !important;
  min-width:0 !important;
}
.option-image-preview{
  width:104px !important;
  height:58px !important;
  border:1px dashed #cfd4da !important;
  border-radius:12px !important;
  background:#f7f8f9 !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  cursor:pointer !important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease !important;
}
.option-image-preview:hover{
  border-color:#9fa7b1 !important;
  background:#fff !important;
  box-shadow:0 5px 14px rgba(0,0,0,.06) !important;
  transform:translateY(-1px);
}
.option-image-preview input[type="file"],
.question-image-preview input[type="file"],
.clickable-upload input[type="file"]{
  display:none !important;
}
.option-image-preview span{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  width:100% !important;
  height:100% !important;
  text-align:center !important;
  color:#6d747d !important;
}
.option-image-preview span b{
  font-size:20px !important;
  line-height:1 !important;
  font-weight:400 !important;
}
.option-image-preview span small{
  font-size:10px !important;
  line-height:1.1 !important;
}
.option-image-preview img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.option-url-toggle{
  width:128px !important;
  min-height:40px !important;
  padding:0 12px !important;
  border:1px solid #e0e3e7 !important;
  border-radius:10px !important;
  background:#f7f8f9 !important;
  color:#717881 !important;
  font-size:11px !important;
  font-weight:500 !important;
  text-align:center !important;
  cursor:pointer !important;
}
.option-url-toggle:hover{
  border-color:#c4cad1 !important;
  background:#fff !important;
  color:#30353b !important;
}
.option-url-toggle span{
  margin-left:5px !important;
}
.option-url-wrap{
  display:none !important;
  grid-column:1/-1 !important;
  margin-top:2px !important;
}
.option-url-wrap.is-open{
  display:block !important;
}
.option-url-wrap input{
  min-height:42px !important;
  margin:0 !important;
  font-size:12px !important;
}
.option-delete{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:11px !important;
  align-self:center !important;
  margin:0 !important;
  font-size:17px !important;
}

/* Question image upload zone should look clickable */
.question-image-preview{
  cursor:pointer !important;
}
.question-image-preview:hover{
  border-color:#aeb5be !important;
  background:#fff !important;
  box-shadow:0 5px 16px rgba(0,0,0,.05) !important;
}

/* Keep the controls clean on narrower editor widths */
@media(max-width:1100px){
  .option-row-rich .option-fields{
    grid-template-columns:minmax(0,1fr) 220px !important;
  }
  .option-image-tools{
    grid-template-columns:92px 118px !important;
    gap:8px !important;
  }
  .option-image-preview{width:92px !important}
  .option-url-toggle{width:118px !important}
}
@media(max-width:820px){
  .option-row-rich .option-fields{
    grid-template-columns:1fr !important;
  }
  .option-image-tools{
    grid-template-columns:110px 130px !important;
    justify-content:start !important;
  }
  .option-image-preview{width:110px !important}
  .option-url-toggle{width:130px !important}
}

/* v56 — site image uploader feels clickable */
.site-image-preview{
  cursor:pointer !important;
  position:relative !important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease !important;
}
.site-image-preview:hover{
  border-color:#9fa8b2 !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(0,0,0,.06) !important;
  transform:translateY(-1px);
}
.site-image-preview:hover span strong{
  color:#30363d !important;
}
.site-image-preview span{
  flex-direction:column !important;
  gap:5px !important;
  text-align:center !important;
  padding:16px !important;
}
.site-image-preview span strong{
  font-size:12px !important;
  font-weight:600 !important;
  color:#6e757e !important;
}
.site-image-preview span small{
  max-width:360px;
  font-size:10px !important;
  line-height:1.4 !important;
  font-weight:400 !important;
  color:#9aa0a7 !important;
}
.site-image-hint{
  margin:-1px 2px 9px;
  font-size:10.5px;
  line-height:1.4;
  color:#8d949c;
}

/* Make the upload button react too */
.site-upload-btn{
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease !important;
}
.site-upload-btn:hover{
  border-color:#afb6bf !important;
  background:#f8f9fa !important;
  box-shadow:0 4px 12px rgba(0,0,0,.05) !important;
  transform:translateY(-1px);
}

/* v57 — image optimization feedback */
.image-optimization-toast{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:99999;
  min-width:250px;
  max-width:340px;
  padding:13px 15px;
  border:1px solid #dfe3e7;
  border-radius:14px;
  background:rgba(255,255,255,.97);
  box-shadow:0 14px 38px rgba(0,0,0,.14);
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  backdrop-filter:blur(8px);
}
.image-optimization-toast.show{
  opacity:1;
  transform:translateY(0);
}
.image-optimization-toast b,
.image-optimization-toast span{
  display:block;
}
.image-optimization-toast b{
  font-size:12px;
  font-weight:650;
  color:#23282e;
}
.image-optimization-toast span{
  margin-top:3px;
  font-size:11px;
  line-height:1.4;
  color:#777f88;
}
@media(max-width:700px){
  .image-optimization-toast{
    left:14px;
    right:14px;
    bottom:14px;
    max-width:none;
    min-width:0;
  }
}

/* v58 — Hero image promo controls */
.hero-image-promo-editor{margin:18px 0;padding:16px;border:1px solid #e1e4e8;border-radius:14px;background:#fafbfc}
.hero-image-promo-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hero-image-promo-head b,.hero-image-promo-head span{display:block}
.hero-image-promo-head b{font-size:13px;font-weight:650}
.hero-image-promo-head span{margin-top:2px;font-size:11px;color:#878d95}
.hero-promo-switch{margin:0!important}
.hero-image-promo-fields{margin-top:14px;padding-top:12px;border-top:1px solid #e5e7ea}
.hero-image-promo-fields.is-disabled{opacity:.45;pointer-events:none}

/* v59 — AI fill */
.ai-fill-panel{position:relative;overflow:hidden;padding:22px!important;margin-bottom:24px!important;border:1px solid #dde2e7!important;background:linear-gradient(180deg,#fff,#fafbfc)!important}
.ai-fill-panel:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-85px;top:-100px;background:var(--accent,#ff9568);opacity:.08;pointer-events:none}
.ai-title-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ai-title-row h2{margin:0!important;font-size:19px!important}
.ai-spark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:9px;background:var(--accent,#ff9568);color:#fff;font-size:13px;flex:0 0 auto}
.ai-free-badge{padding:4px 8px;border-radius:999px;background:#eef8f1;color:#38744a;font-size:10px;font-weight:700}
.ai-fill-head p{max-width:760px;margin:8px 0 18px;color:#707780;font-size:12px;line-height:1.55}
.ai-brief{min-height:150px!important;resize:vertical!important;border-radius:13px!important;padding:14px 15px!important;line-height:1.55!important}
.ai-brief:focus{border-color:#aeb6bf!important;box-shadow:0 0 0 3px rgba(40,48,58,.05)!important}
.ai-brief-help{margin:7px 2px 0;color:#90969e;font-size:10.5px;line-height:1.45}
.ai-fill-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.ai-fill-actions button{min-height:42px}
.ai-main-action{padding-left:17px!important;padding-right:17px!important}
.ai-status{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:11px;line-height:1.45}
.ai-status b,.ai-status span,.ai-status small{display:block}
.ai-status small{margin-top:2px;color:#818891}
.ai-status.loading{display:flex;align-items:center;gap:10px;background:#f4f6f8;color:#3d444c}
.ai-status.success{background:#eef8f1;color:#326a43}
.ai-status.error{background:#fff1f0;color:#9a3d38}
.ai-status.info{background:#f4f6f8;color:#555d66}
.ai-status code{font-size:10px;background:#e9ecef;padding:2px 5px;border-radius:5px}
.ai-loader{width:17px;height:17px;border:2px solid #d4d9de;border-top-color:#4d555e;border-radius:50%;animation:aiSpin .7s linear infinite}
@keyframes aiSpin{to{transform:rotate(360deg)}}
.ai-plan-note{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid #e7e9ec;color:#707780}
.ai-plan-note span{font-size:10.5px;font-weight:600}
.ai-plan-note small{font-size:10px;color:#9a9fa6}
.ai-quiz-entry{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 18px!important;margin-bottom:18px!important}
.ai-quiz-entry>div{display:grid;grid-template-columns:28px 1fr;column-gap:9px;align-items:center}
.ai-quiz-entry b{font-size:13px}
.ai-quiz-entry p{grid-column:2;margin:2px 0 0;color:#858b93;font-size:10.5px}
@media(max-width:700px){
 .ai-fill-actions{display:grid;grid-template-columns:1fr}
 .ai-quiz-entry{align-items:flex-start;flex-direction:column}
 .ai-quiz-entry button{width:100%}
}

/* v60 — AI panel collapsed by default */
.ai-fill-panel{
  padding:0 !important;
}
.ai-fill-collapse-head{
  width:100%;
  min-height:78px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 34px;
  gap:11px;
  align-items:center;
  padding:16px 18px;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
}
.ai-fill-collapse-head:hover{
  background:#fafbfc;
}
.ai-fill-head-copy{
  min-width:0;
}
.ai-fill-head-copy .ai-title-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.ai-fill-head-copy .ai-title-row b{
  font-size:15px;
  font-weight:650;
  color:#252a30;
}
.ai-fill-head-copy small{
  display:block;
  margin-top:4px;
  color:#858c95;
  font-size:10.5px;
  line-height:1.4;
}
.ai-collapse-chevron{
  width:10px;
  height:10px;
  border-right:2px solid #6e7680;
  border-bottom:2px solid #6e7680;
  transform:rotate(45deg) translate(-2px,-2px);
  justify-self:center;
  transition:transform .18s ease;
}
.ai-fill-collapse-head[aria-expanded="true"] .ai-collapse-chevron{
  transform:rotate(225deg) translate(-1px,-1px);
}
.ai-fill-body{
  max-height:1200px;
  opacity:1;
  overflow:hidden;
  padding:0 22px 22px;
  transition:max-height .25s ease,opacity .18s ease,padding .2s ease;
}
.ai-fill-panel.is-collapsed .ai-fill-body{
  max-height:0;
  opacity:0;
  padding-top:0;
  padding-bottom:0;
  pointer-events:none;
}
.ai-fill-panel.is-collapsed:before{
  display:none;
}
.ai-fill-head p{
  margin-top:0 !important;
}

/* v61 — client/admin cabinets */
.nav-separator{height:1px;background:rgba(255,255,255,.09);margin:10px 8px}
.sidebar-account{position:relative;margin-top:auto;padding:10px 8px 0}
.account-card{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) 18px;gap:9px;align-items:center;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.055);padding:9px;color:#fff;text-align:left;cursor:pointer}
.account-card:hover{background:rgba(255,255,255,.09)}
.account-avatar{width:36px;height:36px;border-radius:11px;background:#fff;color:#20242a;display:grid;place-items:center;font-size:13px;font-weight:700}
.account-copy{min-width:0}.account-copy b,.account-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-copy b{font-size:11px}.account-copy small{margin-top:2px;color:#9da5ae;font-size:9.5px}
.account-chevron{width:7px;height:7px;border-right:1.5px solid #9ca4ad;border-bottom:1.5px solid #9ca4ad;transform:rotate(45deg) translateY(-2px)}
.account-popover{display:none;position:absolute;left:8px;right:8px;bottom:60px;padding:6px;background:#fff;border:1px solid #dde1e5;border-radius:12px;box-shadow:0 16px 38px rgba(0,0,0,.2);z-index:40}
.account-popover.is-open{display:block}
.account-popover button{width:100%;border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:8px;font-size:11px;cursor:pointer}
.account-popover button:hover{background:#f3f4f6}.account-popover>div{height:1px;background:#eceef0;margin:5px}
.account-popover .muted-action{color:#777e87}
.admin-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.admin-mini-stat{padding:17px;border:1px solid var(--line);border-radius:15px;background:#fff}
.admin-mini-stat span{display:block;color:#858b93;font-size:10px}.admin-mini-stat b{display:block;margin-top:7px;font-size:24px}
.admin-table-panel{padding:0!important;overflow:hidden}
.admin-table-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}
.admin-table-head h2{margin:0;font-size:18px}.admin-table-head p{margin:3px 0 0;color:#858b93;font-size:10.5px}
.admin-filter{width:min(310px,40%)}.admin-filter input{margin:0}
.admin-table{min-width:850px}
.table-user{display:flex;align-items:center;gap:9px}.table-user>span{width:30px;height:30px;border-radius:9px;background:#f0f2f4;display:grid;place-items:center;font-size:11px;font-weight:700}
.table-user b{font-size:12px}
.plan-badge,.project-status{display:inline-flex;padding:5px 8px;border-radius:999px;background:#f1f2f4;font-size:9.5px;font-weight:600;color:#646b74}
.project-status.published{background:#edf7f0;color:#3e7650}
.domain-chip{font:10.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:#5f6770}
.table-sub{display:block;margin-top:3px;color:#9298a0;font-size:9px}
@media(max-width:900px){.admin-summary{grid-template-columns:1fr 1fr}}

.hero-promo-mode{display:flex;gap:8px;margin:12px 0 16px}
.hero-promo-mode-btn{border:1px solid #dfe3e8;background:#f5f6f7;border-radius:12px;padding:10px 16px;font:inherit;font-weight:750;cursor:pointer;color:#68707c}
.hero-promo-mode-btn:hover{background:#eceff2;color:#20242a}
.hero-promo-mode-btn.is-active{background:#20242a;color:#fff;border-color:#20242a}
.hero-image-promo-fields .field-hint{margin:-4px 0 12px;color:#8a919c;font-size:13px;line-height:1.45}

/* ── App Toast ── */
.app-toast{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  background:#1f2937;color:#fff;padding:14px 20px;
  border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,0.18);
  font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(12px);transition:all .22s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;max-width:380px;
}
.app-toast.show{opacity:1;transform:translateY(0);pointer-events:auto}
.app-toast.success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0;box-shadow:0 12px 30px rgba(22,101,52,.14)}
.app-toast.error{background:#991b1b;color:#fef2f2}
.app-toast.info{background:#1f2937;color:#f9fafb}

/* ── App Modals (Fixed compact sizing) ── */
dialog.app-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(420px, 92vw) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 90vh !important;
  border: 0 !important;
  border-radius: 18px !important;
  padding: 0 !important;
  background: #ffffff !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35) !important;
  margin: 0 !important;
  overflow: hidden !important;
}
dialog.app-modal::backdrop {
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
}
.app-modal .dialog-head {
  height: auto !important;
  padding: 16px 20px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #f0f2f5 !important;
  background: #ffffff !important;
}
.app-modal .dialog-head b {
  font-size: 16px !important;
  font-weight: 750 !important;
  color: #111827 !important;
  display: block !important;
}
.app-modal .dialog-head .muted {
  font-size: 12px !important;
  color: #6b7280 !important;
  margin-top: 2px !important;
}
.modal-form {
  padding: 16px 20px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.modal-form label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #374151 !important;
  margin-bottom: -4px !important;
}
.modal-form input[type="text"],
.modal-form input[type="email"],
.modal-form input[type="password"],
.modal-form select {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 13px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  color: #111827 !important;
  background: #f9fafb !important;
  transition: all .15s ease !important;
}
.modal-form input:focus,
.modal-form select:focus {
  outline: none !important;
  border-color: #111827 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08) !important;
}
.slug-input-row {
  display: flex !important;
  align-items: center !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #f9fafb !important;
  overflow: hidden !important;
  transition: all .15s ease !important;
}
.slug-input-row:focus-within {
  border-color: #111827 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08) !important;
}
.slug-input-row input {
  border: 0 !important;
  background: transparent !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #111827 !important;
  flex: 1 !important;
  box-shadow: none !important;
  outline: none !important;
}
.slug-tag {
  padding: 0 11px !important;
  font-size: 12px !important;
  color: #6b7280 !important;
  font-weight: 650 !important;
  background: #f3f4f6 !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  border-left: 1px solid #e5e7eb !important;
  user-select: none !important;
}
.slug-preview-bar {
  font-size: 11.5px !important;
  color: #6b7280 !important;
  margin-top: -3px !important;
  background: #f8fafc !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
}
.slug-preview-bar b {
  color: #0f172a !important;
  font-family: ui-monospace, monospace !important;
}
.modal-error {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: 1px solid #fee2e2 !important;
}
.modal-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding-top: 8px !important;
  margin-top: 4px !important;
  border-top: 1px solid #f3f4f6 !important;
}
.modal-actions button {
  padding: 9px 16px !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  cursor: pointer !important;
}

/* ── Profile Dialog ── */
.profile-view-form {
  padding: 22px !important;
}
.profile-avatar-banner {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
}
.profile-circle {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: #111827 !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}
.profile-titles strong {
  display: block !important;
  font-size: 16px !important;
  color: #111827 !important;
}
.profile-titles span {
  font-size: 12.5px !important;
  color: #6b7280 !important;
}
.profile-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 0 !important;
  font-size: 13px !important;
  border-bottom: 1px solid #f3f4f6 !important;
}
.profile-row span {
  color: #6b7280 !important;
}
.profile-row strong {
  color: #111827 !important;
}
.profile-row code {
  background: #f1f5f9 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-family: ui-monospace, monospace !important;
}

/* ── Account Popover & Sidebar fixes ── */
.sidebar-account {
  position: relative !important;
  cursor: pointer !important;
  user-select: none !important;
}
.sidebar-account:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
.account-popover {
  display: none;
  position: absolute !important;
  left: 6px !important;
  right: 6px !important;
  bottom: calc(100% + 8px) !important;
  padding: 5px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.22) !important;
  z-index: 99999 !important;
  box-sizing: border-box !important;
}
.account-popover.is-open {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.admin-only {
  display: none !important;
}
body.is-admin .admin-only {
  display: flex !important;
}
body.is-admin nav .admin-only {
  display: block !important;
}

.account-popover button {
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  padding: 7px 9px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  color: #334155 !important;
  cursor: pointer !important;
  display: flex;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.12s ease !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}
.account-popover button svg {
  flex-shrink: 0 !important;
  opacity: 0.6 !important;
  transition: opacity 0.12s ease !important;
}
.account-popover button:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
.account-popover button:hover svg {
  opacity: 1 !important;
}
.account-popover button.danger-item:hover {
  background: #fef2f2 !important;
  color: #ef4444 !important;
}
.account-popover button.danger-item:hover svg {
  color: #ef4444 !important;
  opacity: 1 !important;
}
.account-popover .popover-divider {
  height: 1px !important;
  background: #f1f5f9 !important;
  margin: 3px 0 !important;
}

/* ══════════════════════════════════════════════════
   LIVE PREVIEW MODAL (Tilda-style Device Switcher)
   ══════════════════════════════════════════════════ */
dialog#previewDialog.preview-modal {
  width: min(1320px, 98vw) !important;
  height: min(920px, 96vh) !important;
  padding: 0 !important;
  border-radius: 20px !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.28) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #0f172a !important;
}
dialog#previewDialog:not([open]) {
  display: none !important;
}
dialog#previewDialog::backdrop {
  background: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(6px) !important;
}
.preview-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 20px !important;
  background: #1e293b !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
  color: #f8fafc !important;
}
.preview-toolbar-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14.5px !important;
}
.preview-badge {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.preview-device-switch {
  display: flex !important;
  align-items: center !important;
  background: #0f172a !important;
  padding: 3px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  gap: 3px !important;
}
.preview-device-btn {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.preview-device-btn:hover {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.preview-device-btn.active {
  background: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4) !important;
}
.preview-toolbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.preview-toolbar-actions button.ghost {
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.preview-toolbar-actions button.ghost:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
.preview-frame-container {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 16px !important;
  overflow: hidden !important;
  background: #090d16 !important;
  transition: all 0.3s ease !important;
  min-height: 0 !important;
}
.preview-frame-container iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s ease !important;
  box-sizing: border-box !important;
}
.preview-frame-container.is-tablet iframe {
  width: min(768px, 94vw) !important;
  height: 100% !important;
  border-radius: 18px !important;
  border: 8px solid #1e293b !important;
  box-sizing: border-box !important;
}
.preview-frame-container.is-mobile iframe {
  width: auto !important;
  max-width: min(390px, 92vw) !important;
  height: 100% !important;
  max-height: calc(100% - 10px) !important;
  aspect-ratio: 9 / 19.5 !important;
  border: 10px solid #1e293b !important;
  border-radius: 38px !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6) !important;
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════
   MODERN COMPACT PROFILE MODAL
   ══════════════════════════════════════════════════ */
dialog#profileDialog.profile-modal-compact {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(380px, 92vw) !important;
  height: auto !important;
  max-height: 90vh !important;
  padding: 0 !important;
  border-radius: 18px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  margin: 0 !important;
}
dialog#profileDialog:not([open]) {
  display: none !important;
}
.profile-header-gradient {
  position: relative !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  padding: 16px 18px 14px !important;
  color: #ffffff !important;
}
.profile-close-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  color: #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.profile-close-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}
.profile-hero-badge {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.profile-hero-badge .profile-circle {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35) !important;
  flex-shrink: 0 !important;
}
.profile-user-info h3 {
  margin: 0 0 2px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}
.profile-role-pill {
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #93c5fd !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.profile-modal-body {
  padding: 14px 16px 16px !important;
}
.profile-info-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 2px 12px !important;
  display: flex !important;
  flex-direction: column !important;
}
.profile-card-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid #edf2f7 !important;
  font-size: 12.5px !important;
}
.profile-card-item:last-child {
  border-bottom: none !important;
}
.profile-item-label {
  color: #64748b !important;
  font-weight: 500 !important;
}
.profile-item-value {
  color: #0f172a !important;
  font-weight: 600 !important;
}
.profile-id-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.profile-id-group code {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  font-size: 10.5px !important;
  color: #475569 !important;
  max-width: 125px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.copy-id-btn {
  background: #e2e8f0 !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 2px 6px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.copy-id-btn:hover {
  background: #cbd5e1 !important;
  color: #0f172a !important;
}
.profile-modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 14px !important;
}
.profile-modal-footer button {
  padding: 8px 14px !important;
  font-size: 12px !important;
}
.profile-modal-footer .danger-action {
  color: #ef4444 !important;
  border-color: #fecaca !important;
}
.profile-modal-footer .danger-action:hover {
  background: #fef2f2 !important;
}

/* ══════════════════════════════════════════════════
   CUSTOM SITE CONFIRM DIALOG (In-app confirmation)
   ══════════════════════════════════════════════════ */
dialog#confirmModalDialog.confirm-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(390px, 92vw) !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 18px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.35) !important;
  background: #ffffff !important;
  margin: 0 !important;
  overflow: hidden !important;
  animation: modalFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.confirm-modal-wrap {
  padding: 22px 20px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.confirm-icon-wrap {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
}
.confirm-icon-wrap.is-danger {
  background: #fef2f2 !important;
  color: #ef4444 !important;
  border: 1px solid #fee2e2 !important;
}
.confirm-content {
  margin-bottom: 20px !important;
}
.confirm-title {
  margin: 0 0 6px !important;
  font-size: 16.5px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
}
.confirm-message {
  margin: 0 !important;
  font-size: 13px !important;
  color: #64748b !important;
  line-height: 1.45 !important;
}
.confirm-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
}
.confirm-actions button {
  flex: 1 !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.danger-action-btn {
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 1px solid #dc2626 !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}
.danger-action-btn:hover {
  background: #dc2626 !important;
}

/* ══════════════════════════════════════════════════
   FULL-WIDTH RESPONSIVE CARDS & EMPTY STATE
   ══════════════════════════════════════════════════ */
.cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
}

.cards .empty-blocks,
#quizCards .empty-blocks {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  padding: 68px 32px !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ══════════════════════════════════════════════════
   ADMIN IMPERSONATION BANNER (Return to Admin)
   ══════════════════════════════════════════════════ */
.impersonation-banner {
  background: linear-gradient(90deg, #1e1b4b 0%, #312e81 100%) !important;
  color: #ffffff !important;
  padding: 10px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  z-index: 999999 !important;
  box-shadow: 0 4px 16px rgba(30, 27, 75, 0.35) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  position: sticky !important;
  top: 0 !important;
}
.impersonation-banner-inner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.impersonation-pulse {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #38bdf8 !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.3) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}
.impersonation-return-btn {
  background: #ffffff !important;
  color: #1e1b4b !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 7px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.impersonation-return-btn:hover {
  background: #e0e7ff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Card action link buttons - clean pill style without default link underlines */
.card-actions a.ghost, .card-actions a.card-link-btn {
  text-decoration: none !important;
  color: #14171c !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
.card-actions a.ghost:hover, .card-actions a.card-link-btn:hover {
  text-decoration: none !important;
  color: #14171c !important;
  background: #f1f2f4 !important;
}

.ai-preset-btn.active {
  border-color: #0f172a !important;
  background: #f8fafc !important;
  box-shadow: 0 0 0 2px #0f172a !important;
}



/* v63 — September editor refinements */
@media(min-width:901px){
  .sidebar{position:sticky;top:0;height:100vh;min-height:100vh;overflow:visible}
  .sidebar-account{margin-top:auto!important;flex:none}
}
.preview-toolbar-actions #previewOpenTabBtn{
  background:#0f172a!important;
  color:#fff!important;
  border-color:#475569!important;
}
.preview-toolbar-actions #previewOpenTabBtn:hover{background:#334155!important;color:#fff!important}
.preview-frame-container.is-mobile iframe{
  width:390px!important;
  max-width:calc(100vw - 48px)!important;
  height:calc(100% - 8px)!important;
  max-height:none!important;
  aspect-ratio:auto!important;
}
@media(max-width:760px){
  dialog#previewDialog.preview-modal{width:100vw!important;height:100dvh!important;max-height:none!important;border-radius:0!important}
  .preview-toolbar{padding:8px!important;gap:8px!important;flex-wrap:wrap!important}
  .preview-toolbar-title{display:none!important}
  .preview-device-switch{order:1;flex:1!important;justify-content:center!important}
  .preview-toolbar-actions{order:2!important}
  .preview-device-btn{padding:6px 9px!important}
  .preview-device-btn span{display:none!important}
  .preview-frame-container{padding:8px!important;align-items:stretch!important}
  .preview-frame-container.is-mobile iframe{width:min(390px,calc(100vw - 24px))!important;margin:auto!important}
}
.favicon-editor{display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:start}
.favicon-preview{width:74px;height:74px;border:1px solid var(--line);border-radius:14px;background:#f8fafc;display:grid;place-items:center;overflow:hidden;color:var(--muted);font-size:10px;text-align:center;padding:6px}
.favicon-preview img{width:42px;height:42px;object-fit:contain}
.favicon-fields{display:grid;gap:8px}.favicon-fields input{margin:0}.favicon-fields .site-upload-btn{margin:0;width:max-content}
.works-mini-stack{display:grid!important;gap:2px;width:70%!important}.works-mini-stack i{display:block!important;width:100%!important;height:6px!important}
.domain-status.is-pending{background:#fff1d6!important;color:#a85f00!important;border:1px solid #ffd18a!important;font-weight:750!important}


/* v61 — direct video upload in About block */
.video-upload-box{display:grid;gap:8px}
.video-upload-box>input{margin:0}
.video-upload-btn{width:max-content}
.video-upload-status{min-height:18px;font-size:12px;font-weight:650;color:#68707c}
.video-upload-status:not(:empty)::before{content:'●';display:inline-block;margin-right:7px;font-size:9px;vertical-align:1px}
@media(max-width:640px){.video-upload-btn{width:100%}}

/* v64 — fixed account footer + favicon editor polish */
@media(min-width:901px){
  .app-shell{grid-template-columns:230px minmax(0,1fr)!important}
  .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:230px!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    z-index:100!important;
  }
  .sidebar nav{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:thin;
  }
  .sidebar-account{
    margin-top:0!important;
    flex:0 0 auto!important;
    padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
  }
  .main{
    grid-column:2!important;
    min-width:0!important;
  }
}
.favicon-hint{
  margin:7px 0 0!important;
  max-width:430px;
  font-size:11px!important;
  line-height:1.45!important;
}


/* v65 — compact sidebar + mobile logo crop + video optimization prompt */
@media(min-width:901px){
  .sidebar{gap:18px!important}
  .sidebar nav{display:grid!important;grid-auto-rows:max-content!important;align-content:start!important;gap:4px!important;padding-top:2px!important}
  .nav-btn{padding:10px 12px!important;min-height:40px!important}
  .nav-separator{margin:8px 8px!important}
}
.mobile-logo-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.mobile-logo-tools span{color:#858c95;font-size:10.5px;line-height:1.35}
.mobile-logo-tools button:disabled{opacity:.45;cursor:default}
dialog.mobile-logo-dialog{width:min(520px,94vw)!important;height:auto!important;max-height:92vh!important;border:0!important;border-radius:20px!important;padding:0!important;overflow:hidden!important}
.mobile-logo-editor-wrap{padding:20px}
.mobile-logo-editor-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}
.mobile-logo-editor-head b,.mobile-logo-editor-head span{display:block}.mobile-logo-editor-head b{font-size:17px}.mobile-logo-editor-head span{font-size:11px;color:#7b838d;margin-top:4px;line-height:1.45}
.mobile-logo-stage{display:grid;place-items:center;background:#eef1f4;border-radius:16px;padding:24px}
.mobile-logo-crop-frame{width:min(280px,70vw);aspect-ratio:1;border-radius:24px;background:#fff;overflow:hidden;position:relative;box-shadow:0 8px 30px rgba(15,23,42,.1);touch-action:none;cursor:grab}
.mobile-logo-crop-frame:active{cursor:grabbing}.mobile-logo-crop-frame img{position:absolute;max-width:none!important;user-select:none;pointer-events:none}
.mobile-logo-controls{padding-top:16px}.mobile-logo-controls label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;margin:0}.mobile-logo-controls input{padding:0}.mobile-logo-controls small{display:block;margin-top:8px;color:#8a919a;font-size:10.5px}
.mobile-logo-editor-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.video-optimize-choice{display:grid!important;grid-template-columns:22px 1fr!important;gap:10px!important;align-items:start!important;margin:2px 0 4px!important;padding:12px 13px!important;border:1px solid #dfe4e9!important;border-radius:12px!important;background:#f8fafb!important;cursor:pointer}
.video-optimize-choice input{margin-top:2px!important}.video-optimize-choice b,.video-optimize-choice small{display:block}.video-optimize-choice b{font-size:12.5px;color:#22272d}.video-optimize-choice small{margin-top:3px;color:#747c86;font-size:10.5px;line-height:1.45;font-weight:400}

/* v66 — review pass: typography guard, image cropping and clearer block settings */
.typography-override-box,.image-requirements{margin-top:10px;padding:12px 13px;border:1px solid var(--line);border-radius:13px;background:#fafbfc}
.typography-override-box>.switch-line{margin:0!important}.typography-warning{margin-top:10px!important}
.image-requirements{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.image-requirements b,.image-requirements span{display:block}.image-requirements b{font-size:11.5px}.image-requirements span{font-size:10.5px;color:#7b838d}.image-requirements button{margin-left:auto}
.item-image-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.item-image-controls>input{flex:1 1 250px}.item-crop-btn{white-space:nowrap}
dialog.image-crop-dialog{width:min(680px,95vw)!important;height:auto!important;max-height:92vh!important;border:0!important;border-radius:20px!important;padding:0!important;overflow:hidden!important}.image-crop-wrap{padding:20px}.image-crop-stage{display:grid;place-items:center;background:#eef1f4;border-radius:16px;padding:22px}.image-crop-frame{width:min(540px,80vw);max-height:55vh;background:#fff;overflow:hidden;position:relative;border-radius:15px;box-shadow:0 8px 30px rgba(15,23,42,.1);touch-action:none;cursor:grab}.image-crop-frame:active{cursor:grabbing}.image-crop-frame img{position:absolute;max-width:none!important;user-select:none;pointer-events:none}
.quiz-edit-info{margin-bottom:8px}.go-quiz-settings{margin-top:0}
@media(max-width:640px){.image-requirements{display:grid}.image-requirements button{margin-left:0;width:100%}.item-image-controls{display:grid}.item-image-controls>input{width:100%}}


/* v67 — compact secondary controls, clearer hints and revised layout previews */
.field-hint{
  margin:6px 0 10px;
  color:#7f8791;
  font-size:12.5px;
  line-height:1.42;
  font-weight:400;
}
.typography-override-box{
  padding:10px 12px;
  border-radius:13px;
  background:#fafbfc;
}
.typography-override-box>.switch-line{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  white-space:normal!important;
  color:#626a74!important;
  font-size:14px!important;
  line-height:1.3!important;
  font-weight:620!important;
}
.typography-override-box>.switch-line input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:23px!important;
  height:23px!important;
  min-width:23px;
  margin:0!important;
  padding:0!important;
  border:1.5px solid #aeb5be;
  border-radius:6px;
  background:#fff;
  cursor:pointer;
  transition:.16s ease;
}
.typography-override-box>.switch-line input[type="checkbox"]:checked{
  border-color:#20252c;
  background:#20252c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12 4 4L19 7'/%3E%3C/svg%3E") center/15px 15px no-repeat;
}
.typography-override-box>.field-hint{
  margin:5px 0 0 32px;
  max-width:650px;
  font-size:11.5px;
  color:#8a919b;
}
.image-requirements b{font-size:12px!important}
.image-requirements span{font-size:11px!important;line-height:1.4}

/* Reviews choices are secondary settings, not large content cards. */
.review-choice-picker{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  max-width:760px;
  gap:10px!important;
  margin:7px 0 16px!important;
}
.review-choice-picker .about-layout-option{
  min-height:74px;
  padding:12px 14px!important;
  border-radius:14px!important;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
}
.review-choice-picker .about-layout-option strong{
  margin:0!important;
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:650!important;
}
.review-choice-picker .about-layout-option small{
  margin-top:5px!important;
  font-size:12px!important;
  line-height:1.35!important;
  color:#808791!important;
}
.review-choice-picker .about-layout-option.is-selected{
  border-color:#6f7680!important;
  background:#fafbfc!important;
  box-shadow:0 0 0 1px rgba(32,37,44,.08)!important;
}

/* "Лента + Ещё" preview now mirrors 2×2 result. */
.works-preview-more{
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px!important;
}
.works-preview-more .works-mini-stack{
  width:82%!important;
  height:54px;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:4px!important;
}
.works-preview-more .works-mini-stack i{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,#cfd3d8 0 70%,#fff 70%)!important;
}
.works-mini-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:13px;
  padding:0 7px;
  border-radius:999px;
  background:#fff;
  color:#8a9098;
  font-size:7px;
  line-height:1;
}
@media(max-width:760px){
  .review-choice-picker{grid-template-columns:1fr!important;max-width:none}
  .review-choice-picker .about-layout-option{display:flex!important;min-height:68px}
}


/* v68 — final alignment audit and quieter secondary controls */
.typography-override-box{padding:10px 12px!important;border-radius:14px!important;background:#fafbfc!important}
.typography-override-box>.switch-line{gap:9px!important;align-items:center!important}
.typography-override-box>.switch-line span{font-size:14px!important;font-weight:650!important;color:#656d78!important}
.typography-override-box>.switch-line input[type="checkbox"]{width:22px!important;height:22px!important;border-radius:6px!important;border:1.5px solid #9aa2ad!important}
.typography-override-box>.field-hint,.field-hint{font-size:12px!important;line-height:1.45!important;color:#89919c!important;font-weight:400!important}
.item-image-controls,.item-video-controls{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;gap:10px!important;align-items:center!important}
.item-video-controls{grid-template-columns:minmax(0,1fr) auto!important}
.item-image-controls>input,.item-video-controls>input,.item-image-controls .option-upload-btn,.item-video-controls .option-upload-btn,.item-image-controls button{height:44px!important;min-height:44px!important;display:flex!important;align-items:center!important;margin:0!important}
.item-image-controls .option-upload-btn,.item-video-controls .option-upload-btn{justify-content:center!important;white-space:nowrap!important;padding:0 14px!important}
.item-image-controls button{justify-content:center!important;padding:0 16px!important}
.align-bottom-hint{align-self:end!important;padding-bottom:10px!important}
.repeat-item-head{align-items:center!important}.repeat-item label{margin-top:10px!important}
.image-requirements{align-items:center!important;gap:10px!important}
.image-requirements b{font-size:12.5px!important}.image-requirements span{font-size:11.5px!important}
.mobile-logo-controls label{position:relative}.crop-centered-range{position:relative}.crop-centered-range:after{content:"";position:absolute;left:50%;top:50%;width:2px;height:14px;background:#8f98a3;transform:translate(-50%,-50%);pointer-events:none}
@media(max-width:760px){.item-image-controls,.item-video-controls{grid-template-columns:1fr!important}.item-image-controls>* ,.item-video-controls>*{width:100%!important}}


/* v69 — compact promo editor + explicit save workflow */
.editor-save-state{font-size:12px;color:#7d8590;white-space:nowrap}.editor-save-state.is-dirty{color:#a56622;font-weight:650}
#publishBtn.has-unsaved,#stickySaveBtn.has-unsaved{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#ff9568) 18%,transparent)}
#publishBtn:disabled,#stickySaveBtn:disabled{opacity:.58;cursor:default}
.unsaved-dialog{position:fixed!important;inset:auto!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;width:min(520px,calc(100vw - 32px))!important;border:0!important;border-radius:22px!important;padding:0!important;box-shadow:0 24px 80px #0003!important}
.unsaved-dialog::backdrop{background:#11182766;backdrop-filter:blur(2px)}.unsaved-dialog-body{padding:26px}.unsaved-dialog-body h3{margin:0 0 8px;font-size:23px}.unsaved-dialog-body p{margin:0;color:#6f7680;line-height:1.55}.unsaved-dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.unsaved-dialog-actions button{min-height:44px}.danger-text{color:#a53127!important}
.promo-info-box{margin-bottom:12px!important}.promo-compact-editor{display:flex;flex-direction:column;gap:8px;margin-top:12px}.promo-compact-row{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(180px,260px);gap:9px;align-items:center;padding:8px 10px;border:1px solid #e4e7eb;border-radius:13px;background:#fbfcfd}.promo-row-number{width:24px;height:24px;border-radius:7px;background:#eef1f4;display:grid;place-items:center;font-size:11px;font-weight:800;color:#69717d}.promo-compact-row>input{margin:0!important;min-height:40px!important;height:40px!important}.compact-icon-select{display:grid;grid-template-columns:38px minmax(0,1fr);gap:7px;align-items:center}.compact-icon-preview{width:38px;height:38px;border:1px solid #dde2e7;border-radius:10px;background:#fff;display:grid;place-items:center;font-size:18px;color:#59616c}.compact-icon-select select{margin:0!important;height:40px!important;min-height:40px!important;padding-top:0!important;padding-bottom:0!important}.promo-card-layout-choice{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 10px;padding:10px 12px;border-radius:13px;background:#f7f8fa;border:1px solid #e7e9ed}.promo-card-layout-choice b,.promo-card-layout-choice small{display:block}.promo-card-layout-choice b{font-size:13px}.promo-card-layout-choice small{font-size:11px;color:#8a919a;margin-top:2px}.promo-position-buttons{display:flex;gap:6px}.promo-position-btn{margin:0!important}.promo-position-btn.is-active{background:#20252c!important;color:#fff!important;border-color:#20252c!important}.promo-live-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}.promo-live-preview>span{border:1px solid #e2e5e9;border-radius:12px;background:#fff;padding:10px;display:flex;gap:8px;align-items:center;min-width:0}.promo-live-preview i{font-style:normal;width:28px;height:28px;border-radius:8px;background:#f2f4f6;display:grid;place-items:center;flex:0 0 auto}.promo-live-preview em{font-style:normal;font-size:11px;line-height:1.25;color:#555d68;overflow:hidden}.promo-live-preview.promo-preview-top>span{flex-direction:column;align-items:flex-start}.promo-live-preview.promo-preview-top i{width:32px;height:32px}
@media(max-width:760px){.editor-save-state{display:none}.promo-compact-row{grid-template-columns:24px 1fr}.compact-icon-select{grid-column:2}.promo-card-layout-choice{align-items:flex-start;flex-direction:column}.promo-live-preview{grid-template-columns:1fr}.unsaved-dialog-actions{flex-direction:column}.unsaved-dialog-actions button{width:100%}}
\n\n/* v70 — live preview + compact Hero editor */
.block-type-hero .block-fields{display:flex;flex-direction:column;gap:8px}
.block-type-hero .block-fields>label{margin-top:8px}
.block-type-hero .site-image-field{
  display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-areas:
    "label label"
    "preview controls";gap:8px 12px;align-items:start;margin:10px 0;
}
.block-type-hero .site-image-field>label{grid-area:label;margin:0}
.block-type-hero .site-image-preview{grid-area:preview;width:220px;height:138px;margin:0;border-radius:12px}
.block-type-hero .site-image-controls{grid-area:controls;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.block-type-hero .site-image-controls>input{grid-column:1/-1}
.block-type-hero .image-requirements{margin:0 0 8px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center}
.block-type-hero .image-requirements>b,.block-type-hero .image-requirements>span{grid-column:1}
.block-type-hero .image-requirements>button{grid-column:2;grid-row:1/3;margin:0!important}
.block-type-hero .hero-image-promo-editor{margin:10px 0;padding:12px}
.block-type-hero .hero-image-promo-fields{margin-top:10px;padding-top:10px}
.block-type-hero .hero-image-promo-editor .site-image-field{grid-template-columns:170px minmax(0,1fr)}
.block-type-hero .hero-image-promo-editor .site-image-preview{width:170px;height:112px}
.block-type-hero .typography-override-box{margin:8px 0!important;padding:10px 12px!important}
.block-type-hero textarea{min-height:66px}
@media(max-width:760px){
 .block-type-hero .site-image-field,.block-type-hero .hero-image-promo-editor .site-image-field{grid-template-columns:1fr;grid-template-areas:"label" "preview" "controls"}
 .block-type-hero .site-image-preview,.block-type-hero .hero-image-promo-editor .site-image-preview{width:100%;height:170px}
 .block-type-hero .image-requirements{grid-template-columns:1fr}
 .block-type-hero .image-requirements>b,.block-type-hero .image-requirements>span,.block-type-hero .image-requirements>button{grid-column:1;grid-row:auto}
}

/* v71 — unified rounded checkboxes + compact Hero image-promo editor */

/* One softer checkbox style across the admin/editor UI */
input[type="checkbox"]{
  -webkit-appearance:none !important;
  appearance:none !important;
  box-sizing:border-box !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  padding:0 !important;
  margin:0 !important;
  border:1.5px solid #c4c9d0 !important;
  border-radius:7px !important;
  background:#fff !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:13px 13px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
  cursor:pointer !important;
  vertical-align:middle !important;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .12s ease !important;
}
input[type="checkbox"]:hover{
  border-color:#9ea6b0 !important;
}
input[type="checkbox"]:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#20252c) 15%,transparent) !important;
}
input[type="checkbox"]:checked{
  border-color:var(--accent,#20252c) !important;
  background-color:var(--accent,#20252c) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.3 8.2 6.5 11.2 12.8 4.9' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
input[type="checkbox"]:disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
}

/* Keep checkbox labels visually aligned without making them bulky */
label:has(> input[type="checkbox"]),
.switch-line{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
}
.hero-promo-switch{
  min-height:34px;
}

/* Hero image badge/promo: settings on the left, small preview/editor on the right */
.block-type-hero .hero-image-promo-editor{
  padding:14px !important;
}
.block-type-hero .hero-image-promo-fields:has(.site-image-field){
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 250px !important;
  grid-template-areas:
    "mode mode"
    "settings media"
    "hint media" !important;
  column-gap:16px !important;
  row-gap:10px !important;
  align-items:start !important;
}
.block-type-hero .hero-image-promo-fields:has(.site-image-field) > .hero-promo-mode{
  grid-area:mode !important;
  margin-bottom:2px !important;
}
.block-type-hero .hero-image-promo-fields:has(.site-image-field) > .grid2{
  grid-area:settings !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  margin:0 !important;
}
.block-type-hero .hero-image-promo-fields:has(.site-image-field) > .field-hint{
  grid-area:hint !important;
  margin:0 !important;
  align-self:start !important;
}
.block-type-hero .hero-image-promo-fields:has(.site-image-field) > .site-image-field{
  grid-area:media !important;
  display:flex !important;
  flex-direction:column !important;
  width:250px !important;
  max-width:250px !important;
  margin:0 !important;
  gap:7px !important;
}
.block-type-hero .hero-image-promo-fields:has(.site-image-field) > .site-image-field > label{
  margin:0 !important;
  font-size:12px !important;
}
.block-type-hero .hero-image-promo-fields:has(.site-image-field) .site-image-preview{
  width:250px !important;
  height:150px !important;
  margin:0 !important;
  border-radius:12px !important;
}
.block-type-hero .hero-image-promo-fields:has(.site-image-field) .site-image-preview img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  background:#f5f6f7 !important;
}
.block-type-hero .hero-image-promo-fields:has(.site-image-field) .site-image-controls{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:7px !important;
  width:100% !important;
}
.block-type-hero .hero-image-promo-fields:has(.site-image-field) .site-image-controls > input{
  grid-column:1/-1 !important;
  height:38px !important;
  min-height:38px !important;
  padding:8px 10px !important;
  font-size:11px !important;
}
.block-type-hero .hero-image-promo-fields:has(.site-image-field) .site-upload-btn,
.block-type-hero .hero-image-promo-fields:has(.site-image-field) .site-image-clear{
  min-height:38px !important;
  height:38px !important;
  padding:0 11px !important;
  font-size:11px !important;
  margin:0 !important;
}
.block-type-hero .hero-image-promo-fields:has(.site-image-field) .site-image-clear{
  justify-self:end !important;
}

/* Tablet/mobile: stack naturally again */
@media(max-width:900px){
  .block-type-hero .hero-image-promo-fields:has(.site-image-field){
    grid-template-columns:1fr !important;
    grid-template-areas:
      "mode"
      "media"
      "settings"
      "hint" !important;
  }
  .block-type-hero .hero-image-promo-fields:has(.site-image-field) > .site-image-field{
    width:100% !important;
    max-width:320px !important;
  }
  .block-type-hero .hero-image-promo-fields:has(.site-image-field) .site-image-preview{
    width:100% !important;
    height:170px !important;
  }
}


/* v72 — promo crop control */
.block-type-hero .hero-image-promo-fields:has(.site-image-field) .promo-image-crop-btn{width:100%!important;height:38px!important;min-height:38px!important;margin:0!important;font-size:12px!important}

/* v73 — main Hero image editor: larger preview + requirements use the free right side */
.block-type-hero .hero-main-image-editor{
  display:grid !important;
  grid-template-columns:340px minmax(0,1fr) !important;
  gap:16px !important;
  align-items:start !important;
  margin:10px 0 8px !important;
}
.block-type-hero .hero-main-image-editor > .site-image-field{
  display:flex !important;
  flex-direction:column !important;
  width:340px !important;
  max-width:340px !important;
  margin:0 !important;
  gap:8px !important;
}
.block-type-hero .hero-main-image-editor > .site-image-field > label{
  margin:0 !important;
}
.block-type-hero .hero-main-image-editor .site-image-preview{
  width:340px !important;
  height:210px !important;
  margin:0 !important;
  border-radius:14px !important;
}
.block-type-hero .hero-main-image-editor .site-image-controls{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:8px !important;
}
.block-type-hero .hero-main-image-editor .site-image-controls > input{
  grid-column:1/-1 !important;
}
.block-type-hero .hero-main-image-requirements{
  margin:28px 0 0 !important;
  min-height:210px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:7px !important;
  padding:18px 20px !important;
}
.block-type-hero .hero-main-image-requirements > b,
.block-type-hero .hero-main-image-requirements > span,
.block-type-hero .hero-main-image-requirements > button{
  grid-column:auto !important;
  grid-row:auto !important;
  margin:0 !important;
}
.block-type-hero .hero-main-image-requirements > b{font-size:13px!important}
.block-type-hero .hero-main-image-requirements > span{font-size:12px!important;line-height:1.45}
.block-type-hero .hero-main-image-requirements > button{margin-top:6px!important}
@media(max-width:900px){
  .block-type-hero .hero-main-image-editor{
    grid-template-columns:1fr !important;
  }
  .block-type-hero .hero-main-image-editor > .site-image-field{
    width:100% !important;
    max-width:100% !important;
  }
  .block-type-hero .hero-main-image-editor .site-image-preview{
    width:100% !important;
    height:220px !important;
  }
  .block-type-hero .hero-main-image-requirements{
    margin:0 !important;
    min-height:0 !important;
    padding:13px !important;
  }
}

/* v74 — Hero main image: larger preview left; URL/upload/delete stay right; requirements are added below */
.block-type-hero .hero-main-image-editor{
  display:grid !important;
  grid-template-columns:390px minmax(0,1fr) !important;
  grid-template-areas:
    "label ."
    "preview controls"
    "preview requirements" !important;
  column-gap:18px !important;
  row-gap:9px !important;
  align-items:start !important;
  margin:10px 0 10px !important;
}
.block-type-hero .hero-main-image-editor > .site-image-field{
  display:contents !important;
}
.block-type-hero .hero-main-image-editor > .site-image-field > label{
  grid-area:label !important;
  margin:0 !important;
}
.block-type-hero .hero-main-image-editor .site-image-preview{
  grid-area:preview !important;
  width:390px !important;
  height:260px !important;
  margin:0 !important;
  border-radius:14px !important;
}
.block-type-hero .hero-main-image-editor .site-image-controls{
  grid-area:controls !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:9px !important;
  align-self:start !important;
  margin:0 !important;
}
.block-type-hero .hero-main-image-editor .site-image-controls > input{
  grid-column:1/-1 !important;
  width:100% !important;
}
.block-type-hero .hero-main-image-requirements{
  grid-area:requirements !important;
  margin:0 !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:5px 12px !important;
  padding:14px 16px !important;
}
.block-type-hero .hero-main-image-requirements > b{
  grid-column:1 !important;
  grid-row:1 !important;
  font-size:13px !important;
  margin:0 !important;
}
.block-type-hero .hero-main-image-requirements > span{
  grid-column:1 !important;
  grid-row:2 !important;
  font-size:12px !important;
  line-height:1.45 !important;
  margin:0 !important;
}
.block-type-hero .hero-main-image-requirements > button{
  grid-column:2 !important;
  grid-row:1/3 !important;
  margin:0 !important;
  align-self:center !important;
}
@media(max-width:980px){
  .block-type-hero .hero-main-image-editor{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "label"
      "preview"
      "controls"
      "requirements" !important;
  }
  .block-type-hero .hero-main-image-editor .site-image-preview{
    width:100% !important;
    height:240px !important;
  }
  .block-type-hero .hero-main-image-requirements{
    grid-template-columns:1fr auto !important;
  }
}

/* v75 — tidy Hero main image controls */
.block-type-hero .hero-main-image-editor .site-image-controls{
  grid-template-columns:minmax(0,1fr) 150px !important;
  align-items:stretch !important;
}
.block-type-hero .hero-main-image-editor .site-image-controls > input{
  grid-column:1/-1 !important;
  height:44px !important;
  min-height:44px !important;
}
.block-type-hero .hero-main-image-editor .site-upload-btn,
.block-type-hero .hero-main-image-editor .site-image-clear{
  height:44px !important;
  min-height:44px !important;
  margin:0 !important;
  align-self:stretch !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.block-type-hero .hero-main-image-editor .site-upload-btn{
  width:100% !important;
}
.block-type-hero .hero-main-image-editor .site-image-clear{
  width:150px !important;
  justify-self:stretch !important;
}

/* Recommendation/crop card: cleaner two-column composition */
.block-type-hero .hero-main-image-requirements{
  grid-template-columns:minmax(0,1fr) 190px !important;
  grid-template-rows:auto auto !important;
  column-gap:18px !important;
  row-gap:6px !important;
  padding:18px 20px !important;
  align-items:center !important;
}
.block-type-hero .hero-main-image-requirements > b{
  grid-column:1 !important;
  grid-row:1 !important;
  align-self:end !important;
  font-size:14px !important;
  line-height:1.35 !important;
  max-width:330px !important;
}
.block-type-hero .hero-main-image-requirements > span{
  grid-column:1 !important;
  grid-row:2 !important;
  align-self:start !important;
  font-size:12.5px !important;
  line-height:1.45 !important;
  max-width:360px !important;
}
.block-type-hero .hero-main-image-requirements > button{
  grid-column:2 !important;
  grid-row:1/3 !important;
  width:190px !important;
  min-height:46px !important;
  height:46px !important;
  margin:0 !important;
  align-self:center !important;
  justify-self:end !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}

@media(max-width:1180px){
  .block-type-hero .hero-main-image-requirements{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
  }
  .block-type-hero .hero-main-image-requirements > b,
  .block-type-hero .hero-main-image-requirements > span,
  .block-type-hero .hero-main-image-requirements > button{
    grid-column:1 !important;
  }
  .block-type-hero .hero-main-image-requirements > b{grid-row:1 !important;}
  .block-type-hero .hero-main-image-requirements > span{grid-row:2 !important;}
  .block-type-hero .hero-main-image-requirements > button{
    grid-row:3 !important;
    justify-self:start !important;
    margin-top:4px !important;
  }
}

@media(max-width:980px){
  .block-type-hero .hero-main-image-editor .site-image-controls{
    grid-template-columns:minmax(0,1fr) 130px !important;
  }
  .block-type-hero .hero-main-image-editor .site-image-clear{
    width:130px !important;
  }
}

/* v76 — Hero main image panel aligned to image height */
.block-type-hero .hero-main-image-editor{
  grid-template-columns:390px minmax(0,1fr) !important;
  grid-template-areas:
    "label ."
    "preview controls"
    "preview requirements"
    "note ." !important;
  grid-template-rows:auto auto 1fr auto !important;
  align-items:stretch !important;
}
.block-type-hero .hero-main-image-editor .site-image-preview{
  height:300px !important;
  align-self:stretch !important;
}
.block-type-hero .hero-main-image-editor .site-image-controls{
  align-self:start !important;
}
.block-type-hero .hero-main-image-requirements{
  align-self:stretch !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 190px !important;
  grid-template-rows:1fr !important;
  align-items:center !important;
  padding:18px 20px !important;
}
.block-type-hero .hero-main-image-requirements > b{
  grid-column:1 !important;
  grid-row:1 !important;
  align-self:center !important;
  max-width:360px !important;
  font-size:14px !important;
  line-height:1.4 !important;
  margin:0 !important;
}
.block-type-hero .hero-main-image-requirements > button{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:center !important;
  justify-self:end !important;
  width:190px !important;
  height:46px !important;
  margin:0 !important;
}
.block-type-hero .hero-main-image-note{
  grid-area:note !important;
  margin:2px 0 0 !important;
  padding:0 2px !important;
  font-size:11.5px !important;
  line-height:1.4 !important;
  color:#8a929d !important;
}

@media(max-width:1180px){
  .block-type-hero .hero-main-image-requirements{
    grid-template-columns:minmax(0,1fr) 170px !important;
  }
  .block-type-hero .hero-main-image-requirements > button{
    width:170px !important;
  }
}

@media(max-width:980px){
  .block-type-hero .hero-main-image-editor{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "label"
      "preview"
      "note"
      "controls"
      "requirements" !important;
    grid-template-rows:auto !important;
  }
  .block-type-hero .hero-main-image-editor .site-image-preview{
    height:260px !important;
  }
  .block-type-hero .hero-main-image-requirements{
    grid-template-columns:1fr auto !important;
  }
}

/* v77 — polished Hero image settings */
.block-type-hero .hero-main-image-note{
  text-align:center !important;
  padding:0 12px !important;
  margin:8px 0 0 !important;
  font-size:11.5px !important;
  line-height:1.4 !important;
  color:#8a929d !important;
}

/* Right card: simple centered composition, text above button */
.block-type-hero .hero-main-image-requirements{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:16px !important;
  padding:24px !important;
  text-align:center !important;
}
.block-type-hero .hero-main-image-requirements .hero-main-image-size{
  display:block !important;
  max-width:360px !important;
  margin:0 auto !important;
  font-size:14px !important;
  line-height:1.45 !important;
  font-weight:400 !important;
  color:#565d67 !important;
  letter-spacing:0 !important;
}
.block-type-hero .hero-main-image-requirements > button{
  width:auto !important;
  min-width:190px !important;
  height:46px !important;
  min-height:46px !important;
  margin:0 auto !important;
  align-self:center !important;
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}

@media(max-width:980px){
  .block-type-hero .hero-main-image-requirements{
    padding:20px !important;
    gap:14px !important;
  }
}

/* v78 — proximity rhythm for Hero image helper text
   Related helper copy sits close to the image; the next section gets a clearly larger gap. */
.block-type-hero .hero-main-image-editor{
  margin-bottom:18px !important;
}
.block-type-hero .hero-main-image-note{
  margin:2px 0 16px !important;
  padding:0 14px !important;
  text-align:center !important;
  font-size:11.5px !important;
  line-height:1.35 !important;
  color:#8a929d !important;
}
.block-type-hero .hero-main-image-editor + .hero-image-promo-editor{
  margin-top:10px !important;
}

@media(max-width:980px){
  .block-type-hero .hero-main-image-note{
    margin:4px 0 18px !important;
  }
}

/* v80 — header logo editor + global action-button alignment */
.site-image-controls{align-items:stretch!important}
.site-image-controls .site-upload-btn,
.site-image-controls .site-image-clear,
.site-image-controls button,
.image-requirements button,
.mobile-logo-tools button,
.header-logo-crop-tools button{
  min-height:44px!important;
  height:44px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  line-height:1.1!important;
}
.site-image-controls .site-upload-btn,.site-image-controls .site-image-clear{align-self:stretch!important}

.header-logo-editor{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(420px,1.28fr);gap:18px;align-items:start;margin-top:4px}
.header-logo-left,.header-logo-right{min-width:0}
.header-logo-right .site-image-field{display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-areas:'label label' 'preview controls';gap:10px 14px;align-items:start}
.header-logo-right .site-image-field>label{grid-area:label;margin-bottom:0}
.header-logo-right .site-image-preview{grid-area:preview;width:300px;height:160px;margin:0;border-radius:14px}
.header-logo-right .site-image-preview img{width:100%;height:100%;object-fit:contain;background:#f6f7f8}
.header-logo-right .site-image-controls{grid-area:controls;display:grid!important;grid-template-columns:minmax(0,1fr) 120px!important;gap:9px!important;align-content:start!important}
.header-logo-right .site-image-controls>input{grid-column:1/-1!important;height:44px!important;min-height:44px!important}
.header-logo-right .site-image-clear{width:120px!important}
.header-logo-crop-tools{display:grid;grid-template-columns:minmax(190px,1fr) auto auto;gap:9px;align-items:end;margin-top:12px}
.header-logo-crop-tools>div>label{margin-top:0}
.header-logo-crop-tools select{height:44px}
.header-logo-crop-tools button{white-space:nowrap;padding-inline:14px!important}
.header-logo-hint{margin-top:8px!important}

@media(max-width:1100px){
 .header-logo-editor{grid-template-columns:1fr}
 .header-logo-crop-tools{grid-template-columns:1fr 1fr}
 .header-logo-crop-tools>div{grid-column:1/-1}
}
@media(max-width:760px){
 .header-logo-right .site-image-field{grid-template-columns:1fr;grid-template-areas:'label' 'preview' 'controls'}
 .header-logo-right .site-image-preview{width:100%;height:170px}
 .header-logo-crop-tools{grid-template-columns:1fr}
 .header-logo-crop-tools>div{grid-column:auto}
}

/* v81 — clean Header logo editor + global action alignment */

/* Action buttons: same baseline/height everywhere */
.site-image-controls,
.header-logo-upload-row,
.header-logo-format-row{
  align-items:stretch !important;
}
.site-image-controls .site-upload-btn,
.site-image-controls .site-image-clear,
.header-logo-upload-row .site-upload-btn,
.header-logo-upload-row .site-image-clear,
.header-logo-format-row button,
.header-logo-mobile-row button{
  box-sizing:border-box !important;
  height:44px !important;
  min-height:44px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1.1 !important;
}

/* New header logo workspace */
.header-logo-editor-v2{
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
  gap:24px;
  align-items:start;
  margin-top:4px;
}
.header-logo-fallback,
.header-logo-main{min-width:0}

.header-logo-workspace{
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(300px,.95fr);
  gap:18px;
  align-items:start;
}
.header-logo-desktop-preview{
  position:relative;
  overflow:hidden;
  background:#f6f7f8;
  border:1px dashed #cbd1d8;
  border-radius:16px;
  min-height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:default;
}
.header-logo-desktop-preview.is-wide{aspect-ratio:3.2/1}
.header-logo-desktop-preview.is-square{
  aspect-ratio:1;
  width:min(100%,260px);
  justify-self:start;
}
.header-logo-desktop-preview img,
.header-logo-mobile-preview img{
  position:absolute;
  max-width:none !important;
  user-select:none;
  pointer-events:none;
}
.header-logo-desktop-preview > span{
  color:#8a929d;
  font-size:13px;
  text-align:center;
}
.header-logo-desktop-preview > span b{font-size:20px}

.header-logo-controls-v2{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.header-logo-controls-v2 > input{
  width:100%;
  height:44px;
  min-height:44px;
}
.header-logo-upload-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 120px;
  gap:10px;
}
.header-logo-upload-row .site-image-clear{width:120px !important}

.header-logo-format-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end !important;
  margin-top:4px;
}
.header-logo-format-row > div{min-width:0}
.header-logo-format-row > div > label{margin-top:0}
.header-logo-format-row select{height:44px}
.header-logo-format-row button{white-space:nowrap;padding-inline:16px !important}

.header-logo-mobile-row{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  margin-top:16px;
  padding:14px;
  border:1px solid #e1e5e9;
  border-radius:14px;
  background:#fafafa;
}
.header-logo-mobile-preview{
  width:72px;
  height:72px;
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:#fff;
  border:1px dashed #cbd1d8;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9aa1aa;
  font-size:12px;
}
.header-logo-mobile-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.header-logo-mobile-copy b{
  font-size:13px;
  line-height:1.3;
}
.header-logo-mobile-copy span{
  font-size:11.5px;
  line-height:1.4;
  color:#8a929d;
}
.header-logo-mobile-row button{
  white-space:nowrap;
  padding-inline:15px !important;
}

.header-brand-meta{margin-top:18px}

@media(max-width:1180px){
  .header-logo-editor-v2{grid-template-columns:1fr}
  .header-logo-workspace{grid-template-columns:minmax(280px,.9fr) minmax(280px,1fr)}
}
@media(max-width:820px){
  .header-logo-workspace{grid-template-columns:1fr}
  .header-logo-desktop-preview{width:100% !important;max-width:100%}
  .header-logo-mobile-row{
    grid-template-columns:64px 1fr;
  }
  .header-logo-mobile-preview{width:64px;height:64px}
  .header-logo-mobile-row button{
    grid-column:1/-1;
    width:100%;
  }
}
@media(max-width:560px){
  .header-logo-upload-row,
  .header-logo-format-row{grid-template-columns:1fr}
  .header-logo-upload-row .site-image-clear{width:100% !important}
  .header-logo-format-row button{width:100%}
}

/* Crop dialogs must stay above the editor and be visibly interactive */
#mobileLogoCropDialog,
#imageCropDialog{
  z-index:99999 !important;
}
#mobileLogoCropDialog::backdrop,
#imageCropDialog::backdrop{
  background:rgba(18,22,28,.42) !important;
}
.mobile-logo-crop-frame,
.image-crop-frame{
  outline:1px solid #d8dde3;
}

/* v82 — Header logo layout: mobile crop moves under fallback name */
.header-logo-editor-v3{
  display:grid;
  grid-template-columns:minmax(260px,.74fr) minmax(0,1.26fr);
  gap:28px;
  align-items:start;
  margin-top:6px;
}
.header-logo-left-v3,
.header-logo-main-v3{min-width:0}

.header-logo-mobile-card-v3{
  margin-top:18px;
  padding:14px;
  border:1px solid #e1e5e9;
  border-radius:14px;
  background:#fafafa;
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  grid-template-areas:
    "title title"
    "preview button"
    "hint hint";
  gap:10px 12px;
  align-items:center;
}
.header-logo-mobile-title{
  grid-area:title;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
}
.header-logo-mobile-card-v3 .header-logo-mobile-preview{
  grid-area:preview;
  width:76px;
  height:76px;
  margin:0;
}
.header-logo-mobile-card-v3 .edit-mobile-logo{
  grid-area:button;
  width:100%;
  min-width:0;
}
.header-logo-mobile-hint{
  grid-area:hint;
  margin:0 !important;
  font-size:11.5px !important;
  line-height:1.4 !important;
}

.header-logo-main-v3{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.header-logo-main-v3 > label{
  margin:0 !important;
}
.header-logo-main-v3 .header-logo-desktop-preview{
  width:100%;
  min-height:210px;
  margin:0;
}
.header-logo-main-v3 .header-logo-desktop-preview.is-wide{
  aspect-ratio:3.2/1;
}
.header-logo-main-v3 .header-logo-desktop-preview.is-square{
  width:min(100%,280px);
  aspect-ratio:1;
}

.header-logo-controls-v3{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.header-logo-controls-v3 > input{
  height:44px;
  min-height:44px;
  width:100%;
}

.header-logo-upload-row,
.header-logo-format-row{
  display:grid;
  gap:10px;
  align-items:stretch !important;
}
.header-logo-upload-row{
  grid-template-columns:minmax(0,1fr) 120px;
}
.header-logo-upload-row .site-upload-btn,
.header-logo-upload-row .site-image-clear,
.header-logo-format-row button{
  height:44px !important;
  min-height:44px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.header-logo-upload-row .site-image-clear{
  width:120px !important;
}
.header-logo-format-row{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end !important;
}
.header-logo-format-row > div{min-width:0}
.header-logo-format-row > div > label{margin-top:0}
.header-logo-format-row select{height:44px}
.header-logo-format-row button{
  white-space:nowrap;
  padding-inline:16px !important;
}

.header-brand-meta{
  margin-top:22px;
}

@media(max-width:1180px){
  .header-logo-editor-v3{
    grid-template-columns:1fr 1.15fr;
    gap:22px;
  }
}
@media(max-width:900px){
  .header-logo-editor-v3{
    grid-template-columns:1fr;
  }
  .header-logo-left-v3{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    align-items:start;
  }
  .header-logo-mobile-card-v3{
    margin-top:0;
  }
}
@media(max-width:650px){
  .header-logo-left-v3{
    grid-template-columns:1fr;
  }
  .header-logo-upload-row,
  .header-logo-format-row{
    grid-template-columns:1fr;
  }
  .header-logo-upload-row .site-image-clear{
    width:100% !important;
  }
  .header-logo-format-row button{
    width:100%;
  }
  .header-logo-mobile-card-v3{
    grid-template-columns:72px 1fr;
  }
  .header-logo-mobile-card-v3 .header-logo-mobile-preview{
    width:72px;
    height:72px;
  }
}

/* v83 — Header/logo editor rebuilt around clear grouping */

.header-logo-editor-v4{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:6px;
}
.header-logo-fallback-v4{
  max-width:560px;
}
.header-logo-card-v4{
  border:1px solid #e1e5e9;
  border-radius:16px;
  background:#fff;
  padding:18px;
}
.header-logo-card-head-v4{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.header-logo-card-head-v4 > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.header-logo-card-head-v4 b{
  font-size:15px;
  line-height:1.3;
}
.header-logo-card-head-v4 span{
  color:#8a929d;
  font-size:12px;
  line-height:1.4;
}

.header-logo-card-body-v4{
  display:grid;
  grid-template-columns:minmax(300px,1.15fr) minmax(280px,.85fr);
  gap:18px;
  align-items:start;
}
.header-logo-preview-v4{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
  border:1px dashed #cbd1d8;
  border-radius:14px;
  background:#f7f8f9;
}
.header-logo-preview-v4.wide{
  aspect-ratio:3.2/1;
}
.header-logo-preview-v4.square{
  width:min(100%,300px);
  aspect-ratio:1;
}
.header-logo-preview-v4.auto{
  aspect-ratio:3.2/1;
}
.header-logo-preview-v4 img,
.header-logo-mobile-preview img{
  position:absolute;
  max-width:none!important;
  user-select:none!important;
  pointer-events:none!important;
}
.header-logo-preview-v4 > span{
  color:#9aa1aa;
  font-size:13px;
}
.header-logo-actions-v4{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.header-logo-actions-v4 > input{
  height:44px;
  min-height:44px;
}
.action-row-v4{
  display:grid;
  grid-template-columns:minmax(0,1fr) 120px;
  gap:10px;
  align-items:stretch;
}
.action-row-v4 .site-upload-btn,
.action-row-v4 .site-image-clear,
.crop-main-action-v4{
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.action-row-v4 .site-image-clear{
  width:120px!important;
}
.crop-main-action-v4{
  width:100%;
}

.header-logo-mobile-body-v4{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:16px;
  align-items:center;
}
.header-logo-mobile-body-v4 .header-logo-mobile-preview{
  width:92px;
  height:92px;
  border-radius:16px;
}
.header-logo-mobile-actions-v4{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:520px;
}

.header-brand-meta{
  margin-top:20px;
}

/* Desktop logo crop dialog — clearly different wide/square frames */
#desktopLogoCropDialog{
  width:min(760px,96vw)!important;
  max-height:94vh!important;
  border:0!important;
  border-radius:20px!important;
  padding:0!important;
  overflow:hidden!important;
  z-index:99999!important;
}
#desktopLogoCropDialog::backdrop{
  background:rgba(18,22,28,.48)!important;
}
.desktop-logo-editor-wrap{
  padding:20px;
}
.desktop-logo-ratio-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:16px 0 12px;
  padding:5px;
  background:#f1f3f5;
  border-radius:12px;
}
.desktop-logo-ratio-switch button{
  border:0;
  border-radius:9px;
  min-height:40px;
  background:transparent;
  color:#69717c;
  font-weight:600;
  cursor:pointer;
}
.desktop-logo-ratio-switch button.active{
  background:#fff;
  color:#20252c;
  box-shadow:0 1px 4px rgba(16,24,40,.08);
}
.desktop-logo-stage{
  background:#eef1f4;
  border-radius:16px;
  padding:22px;
}
.desktop-logo-crop-shell{
  width:min(620px,82vw);
  margin:0 auto;
  position:relative;
}
.desktop-logo-crop-frame{
  width:100%;
  aspect-ratio:3.2/1;
  position:relative;
  overflow:hidden;
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 30px rgba(15,23,42,.10);
  touch-action:none;
  cursor:grab;
  outline:2px solid rgba(32,37,44,.16);
}
.desktop-logo-crop-frame:active{cursor:grabbing}
.desktop-logo-crop-frame img{
  position:absolute;
  max-width:none!important;
  user-select:none!important;
  pointer-events:none!important;
}
.desktop-logo-crop-grid{
  pointer-events:none;
  position:absolute;
  inset:0;
  border-radius:14px;
  background:
    linear-gradient(to right, transparent 33.1%, rgba(32,37,44,.13) 33.2%, rgba(32,37,44,.13) 33.5%, transparent 33.6%, transparent 66.3%, rgba(32,37,44,.13) 66.4%, rgba(32,37,44,.13) 66.7%, transparent 66.8%),
    linear-gradient(to bottom, transparent 33.1%, rgba(32,37,44,.13) 33.2%, rgba(32,37,44,.13) 33.5%, transparent 33.6%, transparent 66.3%, rgba(32,37,44,.13) 66.4%, rgba(32,37,44,.13) 66.7%, transparent 66.8%);
}
.desktop-logo-crop-help{
  text-align:center;
  color:#8a929d;
  font-size:11.5px;
  margin-top:10px;
}
.desktop-logo-controls{
  margin-top:14px;
}
.desktop-logo-controls label{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:12px;
  align-items:center;
}
.desktop-logo-controls label > span{
  font-size:13px;
  font-weight:600;
}
.desktop-logo-zoom-scale{
  display:grid;
  grid-template-columns:84px 1fr auto;
  align-items:center;
  gap:12px;
  margin-top:2px;
  color:#9aa1aa;
  font-size:11px;
}
.desktop-logo-zoom-scale b{
  justify-self:center;
  color:#69717c;
  font-weight:500;
}

/* Mobile crop frame gets a stronger visual crop boundary too */
.mobile-logo-crop-frame{
  outline:2px solid rgba(32,37,44,.16)!important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#e6e9ed,#cfd5dc) border-box!important;
}

@media(max-width:820px){
  .header-logo-card-body-v4{
    grid-template-columns:1fr;
  }
  .header-logo-preview-v4.square{
    width:min(100%,260px);
  }
}
@media(max-width:560px){
  .header-logo-card-v4{padding:14px}
  .action-row-v4{grid-template-columns:1fr}
  .action-row-v4 .site-image-clear{width:100%!important}
  .header-logo-mobile-body-v4{
    grid-template-columns:72px 1fr;
  }
  .header-logo-mobile-body-v4 .header-logo-mobile-preview{
    width:72px;height:72px;
  }
}

/* v84 — compact logo cards + modal crop only */

.header-logo-editor-v5{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:6px;
}
.header-logo-fallback-v5{
  max-width:560px;
}
.header-logo-card-v5{
  border:1px solid #e1e5e9;
  border-radius:16px;
  background:#fff;
  padding:16px;
}
.header-logo-card-title-v5{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:12px;
}
.header-logo-card-title-v5 b{
  font-size:15px;
  line-height:1.3;
}
.header-logo-card-title-v5 span{
  font-size:12px;
  color:#8a929d;
  line-height:1.4;
}
.header-logo-desktop-row-v5{
  display:grid;
  grid-template-columns:minmax(300px,420px) minmax(280px,1fr);
  gap:18px;
  align-items:start;
}
.header-logo-preview-v5{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed #cbd1d8;
  border-radius:14px;
  background:#f7f8f9;
  width:100%;
}
.header-logo-preview-v5.desktop.wide{
  aspect-ratio:3.2/1;
  min-height:150px;
}
.header-logo-preview-v5.desktop.square{
  width:min(100%,240px);
  aspect-ratio:1;
  min-height:0;
}
.header-logo-preview-v5 img,
.header-logo-mobile-preview img{
  position:absolute;
  max-width:none!important;
  user-select:none!important;
  pointer-events:none!important;
}
.header-logo-preview-v5 > span{
  color:#9aa1aa;
  font-size:13px;
}
.header-logo-actions-v5{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.header-logo-actions-v5 > input{
  height:44px;
  min-height:44px;
}
.action-row-v5{
  display:grid;
  grid-template-columns:minmax(0,1fr) 120px;
  gap:10px;
  align-items:stretch;
}
.action-row-v5 .site-upload-btn,
.action-row-v5 .site-image-clear,
.crop-main-action-v5{
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.action-row-v5 .site-image-clear{
  width:120px!important;
}
.crop-main-action-v5{
  width:100%;
}

.header-logo-mobile-row-v5{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:16px;
  align-items:center;
}
.header-logo-mobile-row-v5 .header-logo-mobile-preview{
  width:112px;
  height:112px;
  border-radius:16px;
}
.header-logo-mobile-actions-v5{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:520px;
}

.header-brand-meta{margin-top:18px}

@media(max-width:900px){
  .header-logo-desktop-row-v5{
    grid-template-columns:1fr;
  }
  .header-logo-preview-v5.desktop.square{
    width:min(100%,220px);
  }
}
@media(max-width:560px){
  .header-logo-card-v5{padding:14px}
  .action-row-v5{grid-template-columns:1fr}
  .action-row-v5 .site-image-clear{width:100%!important}
  .header-logo-mobile-row-v5{
    grid-template-columns:88px 1fr;
  }
  .header-logo-mobile-row-v5 .header-logo-mobile-preview{
    width:88px;height:88px;
  }
}

/* v85 — real, visible logo cropping */

#desktopLogoCropDialog{
  width:min(780px,96vw)!important;
  max-height:92vh!important;
  overflow:auto!important;
}
.desktop-logo-editor-wrap{
  padding:20px!important;
}
.desktop-logo-stage{
  padding:18px!important;
}
.desktop-logo-crop-shell{
  margin:0 auto!important;
  transition:width .18s ease!important;
}
.desktop-logo-crop-shell.is-wide{
  width:min(620px,82vw)!important;
}
.desktop-logo-crop-shell.is-square{
  width:min(380px,72vw,48vh)!important;
}
.desktop-logo-crop-frame{
  width:100%!important;
  max-height:48vh!important;
}
.desktop-logo-crop-frame img{
  position:absolute!important;
  max-width:none!important;
  max-height:none!important;
}
.desktop-logo-crop-help{
  margin-top:10px!important;
  text-align:center!important;
  font-size:11.5px!important;
  color:#7f8791!important;
}
.desktop-logo-controls{
  margin-top:12px!important;
}
.desktop-logo-controls label{
  display:grid!important;
  grid-template-columns:80px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
}
.desktop-logo-zoom-scale{
  display:grid!important;
  grid-template-columns:80px 1fr auto!important;
  gap:12px!important;
  align-items:center!important;
  margin-top:3px!important;
  font-size:10.5px!important;
  color:#9aa1aa!important;
}
.desktop-logo-zoom-scale b{
  justify-self:center!important;
  color:#626a75!important;
  font-weight:500!important;
}

/* Mobile crop: compact square and visible controls */
#mobileLogoCropDialog{
  width:min(600px,96vw)!important;
  max-height:92vh!important;
  overflow:auto!important;
}
.mobile-logo-stage{
  padding:16px!important;
}
.mobile-logo-crop-frame{
  width:min(360px,76vw,46vh)!important;
  height:auto!important;
  aspect-ratio:1/1!important;
  margin:0 auto!important;
  overflow:hidden!important;
  position:relative!important;
}
.mobile-logo-crop-frame img{
  position:absolute!important;
  max-width:none!important;
  max-height:none!important;
}
.mobile-logo-crop-help{
  text-align:center!important;
  margin-top:9px!important;
  color:#7f8791!important;
  font-size:11.5px!important;
}
.mobile-logo-controls{
  margin-top:12px!important;
}
.mobile-logo-controls label{
  display:grid!important;
  grid-template-columns:80px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
}
.mobile-logo-zoom-value{
  text-align:center!important;
  font-size:11.5px!important;
  color:#626a75!important;
  margin-top:4px!important;
}

@media(max-width:560px){
  .desktop-logo-crop-shell.is-square{
    width:min(320px,76vw,42vh)!important;
  }
  .desktop-logo-crop-shell.is-wide{
    width:min(92vw,560px)!important;
  }
  .mobile-logo-crop-frame{
    width:min(300px,78vw,42vh)!important;
  }
}

/* v87 — second crop mode: manual selection like Paint */
.logo-crop-actions-v87{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
.logo-crop-actions-v87 button{height:44px!important;min-height:44px!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important}
.manual-logo-crop-dialog{width:min(860px,96vw)!important;max-height:94vh!important;border:0!important;border-radius:20px!important;padding:0!important;overflow:auto!important;z-index:100000!important}
.manual-logo-crop-dialog::backdrop{background:rgba(18,22,28,.5)!important}
.manual-logo-crop-wrap{padding:20px!important}
.manual-logo-crop-toolbar{display:flex!important;align-items:center!important;gap:8px!important;margin:14px 0 12px!important}
.manual-logo-crop-toolbar>span{margin-right:auto!important;font-size:12px!important;font-weight:600!important;color:#69717c!important}
.manual-logo-crop-toolbar button{min-height:36px!important;padding:0 12px!important}
.manual-logo-crop-stage{display:flex!important;align-items:center!important;justify-content:center!important;min-height:260px!important;padding:18px!important;background:#eef1f4!important;border-radius:16px!important;overflow:auto!important}
.manual-logo-image-wrap{position:relative!important;overflow:hidden!important;flex:0 0 auto!important;background:#fff!important;box-shadow:0 8px 30px rgba(15,23,42,.12)!important;touch-action:none!important;user-select:none!important}
.manual-logo-source{display:block!important;width:100%!important;height:100%!important;object-fit:fill!important;pointer-events:none!important;user-select:none!important}
.manual-logo-selection{position:absolute!important;box-sizing:border-box!important;border:2px solid #20252c!important;box-shadow:0 0 0 9999px rgba(17,24,39,.38)!important;cursor:move!important;min-width:8px!important;min-height:8px!important}
.manual-logo-selection i{position:absolute!important;width:12px!important;height:12px!important;border-radius:3px!important;background:#fff!important;border:2px solid #20252c!important;box-sizing:border-box!important;z-index:2!important}
.manual-logo-selection i[data-handle="nw"]{left:-7px;top:-7px;cursor:nwse-resize}.manual-logo-selection i[data-handle="n"]{left:50%;top:-7px;transform:translateX(-50%);cursor:ns-resize}.manual-logo-selection i[data-handle="ne"]{right:-7px;top:-7px;cursor:nesw-resize}.manual-logo-selection i[data-handle="e"]{right:-7px;top:50%;transform:translateY(-50%);cursor:ew-resize}.manual-logo-selection i[data-handle="se"]{right:-7px;bottom:-7px;cursor:nwse-resize}.manual-logo-selection i[data-handle="s"]{left:50%;bottom:-7px;transform:translateX(-50%);cursor:ns-resize}.manual-logo-selection i[data-handle="sw"]{left:-7px;bottom:-7px;cursor:nesw-resize}.manual-logo-selection i[data-handle="w"]{left:-7px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.manual-logo-crop-help{text-align:center!important;margin:10px auto 0!important;max-width:700px!important;font-size:11.5px!important;line-height:1.4!important;color:#7f8791!important}
.manual-logo-crop-meta{display:flex!important;justify-content:center!important;margin:8px 0 2px!important;font-size:11.5px!important;color:#606873!important}
@media(max-width:620px){.logo-crop-actions-v87{grid-template-columns:1fr!important}.manual-logo-crop-toolbar{flex-wrap:wrap!important}.manual-logo-crop-toolbar>span{width:100%!important;margin-right:0!important}.manual-logo-crop-stage{padding:10px!important;min-height:220px!important}.manual-logo-crop-wrap{padding:14px!important}}

/* v88 — preserve source proportions + explicit mobile crop shape */
.manual-logo-source{
  object-fit:contain!important;
}

.manual-logo-mobile-shape{
  display:flex!important;
  gap:6px!important;
  padding:4px!important;
  border-radius:10px!important;
  background:#f1f3f5!important;
}
.manual-logo-mobile-shape[hidden]{
  display:none!important;
}
.manual-logo-mobile-shape button{
  min-height:32px!important;
  padding:0 10px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:#69717c!important;
  font-size:11.5px!important;
  font-weight:600!important;
  cursor:pointer!important;
}
.manual-logo-mobile-shape button.active{
  background:#fff!important;
  color:#20252c!important;
  box-shadow:0 1px 3px rgba(16,24,40,.08)!important;
}

.header-logo-mobile-preview.is-square{
  width:112px!important;
  height:112px!important;
}
.header-logo-mobile-preview.is-wide{
  width:190px!important;
  height:60px!important;
  border-radius:12px!important;
}
@media(max-width:560px){
  .header-logo-mobile-preview.is-square{
    width:88px!important;
    height:88px!important;
  }
  .header-logo-mobile-preview.is-wide{
    width:150px!important;
    height:48px!important;
  }
  .manual-logo-mobile-shape{
    width:100%!important;
  }
  .manual-logo-mobile-shape button{
    flex:1 1 0!important;
  }
}

/* v89 — cleaner manual crop toolbar + square-logo tagline option */
.manual-logo-crop-toolbar{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto auto !important;
  gap:10px !important;
  align-items:center !important;
  margin:14px 0 12px !important;
}
.manual-logo-crop-toolbar > .manual-logo-crop-mode{
  margin:0 !important;
  min-width:0 !important;
  font-size:12px !important;
  font-weight:600 !important;
  color:#69717c !important;
}
.manual-logo-crop-toolbar > button{
  min-height:38px !important;
  height:38px !important;
  margin:0 !important;
  padding:0 14px !important;
  white-space:nowrap !important;
}
.manual-logo-crop-toolbar.is-mobile{
  grid-template-columns:minmax(270px,1fr) auto auto !important;
}
.manual-logo-crop-toolbar.is-mobile > .manual-logo-crop-mode{
  display:none !important;
}
.manual-logo-crop-toolbar.is-mobile > .manual-logo-mobile-shape{
  width:100% !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:5px !important;
  padding:4px !important;
  margin:0 !important;
}
.manual-logo-crop-toolbar.is-mobile > .manual-logo-mobile-shape button{
  width:100% !important;
  min-width:0 !important;
  min-height:38px !important;
  height:38px !important;
  padding:0 10px !important;
  white-space:nowrap !important;
}
.square-tagline-setting{
  margin-top:10px !important;
  padding:12px !important;
  border:1px solid #e3e7eb !important;
  border-radius:12px !important;
  background:#fafbfc !important;
}
.square-tagline-setting > label{
  margin:0 0 7px !important;
  font-size:12px !important;
  font-weight:600 !important;
  color:#59616b !important;
}
.square-tagline-setting select{
  height:42px !important;
  min-height:42px !important;
  margin:0 !important;
}
@media(max-width:760px){
  .manual-logo-crop-toolbar,
  .manual-logo-crop-toolbar.is-mobile{
    grid-template-columns:1fr 1fr !important;
  }
  .manual-logo-crop-toolbar > .manual-logo-crop-mode{
    grid-column:1/-1 !important;
  }
  .manual-logo-crop-toolbar.is-mobile > .manual-logo-mobile-shape{
    grid-column:1/-1 !important;
  }
  .manual-logo-crop-toolbar > .manual-logo-crop-full,
  .manual-logo-crop-toolbar > .manual-logo-crop-center{
    width:100% !important;
  }
}
@media(max-width:460px){
  .manual-logo-crop-toolbar,
  .manual-logo-crop-toolbar.is-mobile{
    grid-template-columns:1fr !important;
  }
  .manual-logo-crop-toolbar > *{
    grid-column:1 !important;
  }
}

/* v90 — manual crop polish */

/* Two-row toolbar: shape control first, utility actions second. */
.manual-logo-crop-toolbar,
.manual-logo-crop-toolbar.is-mobile{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px !important;
  margin:14px 2px 14px !important;
}
.manual-logo-crop-toolbar.is-mobile > .manual-logo-mobile-shape{
  flex:1 1 100% !important;
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:5px !important;
  padding:4px !important;
  margin:0 !important;
}
.manual-logo-crop-utils{
  display:flex !important;
  gap:8px !important;
  align-items:center !important;
  justify-content:flex-end !important;
  margin-left:auto !important;
  max-width:100% !important;
}
.manual-logo-crop-utils > button{
  min-height:38px !important;
  height:38px !important;
  margin:0 !important;
  padding:0 15px !important;
  white-space:nowrap !important;
}
.manual-logo-crop-toolbar.is-mobile > .manual-logo-crop-utils{
  flex:1 1 100% !important;
  justify-content:flex-end !important;
  padding-right:2px !important;
}

/* Softer selection frame – closer to the rest of the editor UI. */
.manual-logo-selection{
  border:1.5px solid #667085 !important;
  border-radius:5px !important;
  box-shadow:0 0 0 9999px rgba(31,41,55,.24) !important;
}
.manual-logo-selection i{
  width:11px !important;
  height:11px !important;
  border:1.5px solid #667085 !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 1px 3px rgba(16,24,40,.12) !important;
}
.manual-logo-selection i[data-handle="nw"]{left:-6px!important;top:-6px!important}
.manual-logo-selection i[data-handle="n"]{top:-6px!important}
.manual-logo-selection i[data-handle="ne"]{right:-6px!important;top:-6px!important}
.manual-logo-selection i[data-handle="e"]{right:-6px!important}
.manual-logo-selection i[data-handle="se"]{right:-6px!important;bottom:-6px!important}
.manual-logo-selection i[data-handle="s"]{bottom:-6px!important}
.manual-logo-selection i[data-handle="sw"]{left:-6px!important;bottom:-6px!important}
.manual-logo-selection i[data-handle="w"]{left:-6px!important}

.manual-logo-crop-stage{
  border-radius:16px !important;
  padding:20px !important;
  background:#f2f4f6 !important;
}
.manual-logo-image-wrap{
  border-radius:8px !important;
  box-shadow:0 6px 22px rgba(15,23,42,.08) !important;
}
.manual-logo-crop-help{
  margin-top:14px !important;
  line-height:1.45 !important;
}
.manual-logo-crop-meta{
  margin-top:8px !important;
}

/* Give the bottom actions some breathing room as well. */
.manual-logo-crop-wrap > .mobile-logo-editor-actions{
  margin-top:16px !important;
}

@media(max-width:620px){
  .manual-logo-crop-utils{
    width:100% !important;
    justify-content:stretch !important;
  }
  .manual-logo-crop-utils > button{
    flex:1 1 0 !important;
  }
}

/* v92 — only add square option to the working v90 desktop manual crop */
.manual-logo-desktop-shape{
  display:flex !important;
  gap:6px !important;
  padding:4px !important;
  border-radius:10px !important;
  background:#f1f3f5 !important;
}
.manual-logo-desktop-shape[hidden]{
  display:none !important;
}
.manual-logo-desktop-shape button{
  min-height:32px !important;
  padding:0 12px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:#69717c !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  white-space:nowrap !important;
}
.manual-logo-desktop-shape button.active{
  background:#fff !important;
  color:#20252c !important;
  box-shadow:0 1px 3px rgba(16,24,40,.08) !important;
}
.manual-logo-crop-toolbar:not(.is-mobile) > .manual-logo-desktop-shape{
  margin-right:auto !important;
}
@media(max-width:620px){
  .manual-logo-desktop-shape{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }
  .manual-logo-desktop-shape[hidden]{
    display:none !important;
  }
  .manual-logo-desktop-shape button{
    width:100% !important;
  }
}

/* v93 — true visible aspect ratio in manual logo crop */
.manual-logo-image-wrap{
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
}
.manual-logo-source{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
}
/* A fixed 1:1 selection now renders as a literal square on screen. */
.manual-logo-selection{
  box-sizing:border-box !important;
}

/* v98 — editor top actions aligned with the project title */
.main{
  position:relative;
}
#view-editor .editor-head{
  justify-content:flex-start !important;
  align-items:center !important;
  margin-bottom:18px !important;
}
#view-editor .editor-actions{
  position:absolute !important;
  top:34px !important;
  right:34px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 !important;
  z-index:20 !important;
}
#view-editor .editor-actions .editor-save-state{
  display:flex !important;
  align-items:center !important;
  min-height:42px !important;
  margin:0 !important;
}
#view-editor .editor-actions #previewBtn,
#view-editor .editor-actions #publishBtn{
  min-height:42px !important;
  height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
}

@media(max-width:1100px){
  #view-editor .editor-actions{
    position:static !important;
    margin-left:auto !important;
  }
  #view-editor .editor-head{
    justify-content:space-between !important;
  }
}
@media(max-width:760px){
  #view-editor .editor-actions{
    gap:7px !important;
  }
  #view-editor .editor-actions .editor-save-state{
    display:none !important;
  }
}


/* v101 — quiz sticky actions use the same visual rhythm as page actions */
.quiz-sticky-actions{
  margin-top:12px !important;
}


/* v102 — quiz question drag & drop */
#questionsList .question-card .drag{
  cursor:grab;
  user-select:none;
  touch-action:none;
  padding:5px 4px;
  margin:-5px -2px -5px -4px;
  border-radius:7px;
}
#questionsList .question-card .drag:hover{
  background:#f1f3f5;
  color:#4b5563;
}
#questionsList .question-card.is-question-dragging{
  opacity:.46;
  border-style:dashed;
  box-shadow:0 14px 34px rgba(17,24,39,.10);
}
#questionsList .question-card.is-question-dragging .drag{
  cursor:grabbing;
}


/* v103 — quiz explanatory text */
.q-description-wrap{
  margin-top:12px;
}
.q-description-wrap.hidden{
  display:none !important;
}
.q-description-wrap textarea{
  min-height:72px;
  resize:vertical;
}
.q-description-wrap small{
  display:block;
  margin-top:6px;
  color:#8a919b;
  line-height:1.4;
}


/* v108 — Yandex Metrika guidance */
.metrika-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.metrika-title-row h3{margin-bottom:0}
.metrika-status{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 9px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
}
.metrika-status.is-empty{
  background:#f3f4f6;
  color:#6b7280;
}
.metrika-status.is-ok{
  background:#ecfdf5;
  color:#047857;
}
.metrika-status.is-warn{
  background:#fff7ed;
  color:#c2410c;
}
.metrika-project-info{
  margin-top:10px;
  padding:12px 13px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fafafa;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12.5px;
  line-height:1.45;
}
.metrika-project-info b{color:#111827}
.metrika-project-info span{color:#6b7280}
.metrika-help-toggle{
  width:100%;
  margin-top:9px;
  padding:0;
  border:0;
  background:none;
  color:#374151;
  font:inherit;
  font-size:12.5px;
  font-weight:650;
  text-align:left;
  cursor:pointer;
}
.metrika-help-toggle span{
  display:inline-block;
  margin-left:3px;
  transition:transform .18s ease;
}
.metrika-help-toggle.is-open span{transform:rotate(180deg)}
.metrika-help{
  display:none;
  margin-top:9px;
  padding:13px 14px;
  border-left:3px solid #f5c542;
  border-radius:8px;
  background:#fffaf0;
  color:#5f6470;
  font-size:12.5px;
  line-height:1.5;
}
.metrika-help.is-open{display:block}
.metrika-help p{margin:0 0 8px}
.metrika-help p:last-of-type{margin-bottom:10px}
.metrika-help a{
  color:#111827;
  font-weight:700;
  text-decoration:none;
}
.metrika-help a:hover{text-decoration:underline}


/* v111 — Metrika apply + bottom save */
.metrika-input-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
}
.metrika-apply-btn{
  min-width:104px;
  height:42px;
  white-space:nowrap;
}
.metrika-status.is-pending{
  background:#fff7ed;
  color:#c2410c;
}
.page-bottom-save{
  margin-top:18px;
  padding:16px 18px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.page-bottom-save>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.page-bottom-save b{
  color:#111827;
  font-size:14px;
}
.page-bottom-save span{
  color:#6b7280;
  font-size:12.5px;
}
.page-bottom-save button{
  min-width:170px;
}
@media (max-width:720px){
  .metrika-input-row{grid-template-columns:1fr}
  .metrika-apply-btn{width:100%}
  .page-bottom-save{
    align-items:stretch;
    flex-direction:column;
  }
  .page-bottom-save button{width:100%}
}


/* v123 — email verification reminder */
.email-verify-banner{
  margin:0 0 18px;
  padding:14px 16px;
  border:1px solid #fecaca;
  background:#fff1f2;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.email-verify-banner__text{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.email-verify-banner__text strong{
  color:#b42318;
  font-size:14px;
  line-height:1.25;
}
.email-verify-banner__text span{
  color:#7f1d1d;
  font-size:13px;
  line-height:1.45;
}
.email-verify-banner__actions{
  flex:0 0 auto;
}
.email-verify-banner__btn{
  border:1px solid #fca5a5;
  background:#fff;
  color:#b42318;
  border-radius:10px;
  padding:9px 12px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.email-verify-banner__btn:hover{
  background:#fff7f7;
}
.email-verify-banner__btn:disabled{
  opacity:.6;
  cursor:default;
}
@media(max-width:720px){
  .email-verify-banner{
    margin:0 0 14px;
    align-items:flex-start;
    flex-direction:column;
  }
  .email-verify-banner__actions,
  .email-verify-banner__btn{
    width:100%;
  }
}


/* v124 — mobile contact settings */
#mobileContactBarSettings .panel{
  box-shadow:none;
}
#mobileContactBarSettings h3{
  font-size:15px;
}


/* v126 — compact collapsible contact settings */
.contact-settings-collapsible{
  margin-top:24px !important;
  padding:0 !important;
  overflow:hidden;
}
.contact-settings-summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:22px 26px;
  cursor:pointer;
}
.contact-settings-summary::-webkit-details-marker{display:none}
.contact-settings-summary h2{
  margin:5px 0 4px !important;
  font-size:22px !important;
}
.contact-settings-summary p{
  margin:0 !important;
  font-size:13px !important;
}
.contact-settings-chevron{
  width:10px;
  height:10px;
  flex:0 0 10px;
  border-right:2px solid #7b8491;
  border-bottom:2px solid #7b8491;
  transform:rotate(45deg);
  transition:transform .18s ease;
  margin-right:4px;
}
.contact-settings-collapsible[open] .contact-settings-chevron{
  transform:rotate(225deg);
}
.contact-settings-body{
  border-top:1px solid #e7e9ed;
  padding:18px 26px 24px;
}
.contact-settings-row{
  margin-top:14px;
}
.contact-action-card{
  margin-top:14px;
  padding:16px;
  border:1px solid #e3e6ea;
  border-radius:14px;
  background:#fafbfc;
}
.contact-action-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.contact-action-head h3{
  margin:0 !important;
  font-size:14px !important;
}
.compact-toggle{
  margin:0 !important;
}
.contact-target-label{
  margin-top:12px !important;
}
.contact-settings-hint{
  margin:7px 0 0 !important;
  font-size:12px !important;
}
@media(max-width:720px){
  .contact-settings-collapsible{margin-top:16px !important}
  .contact-settings-summary{padding:18px}
  .contact-settings-body{padding:16px 18px 20px}
  .contact-action-head{align-items:flex-start}
}


/* v128 — hero promo image editor cleanup */
.hero-promo-image-settings{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 18px;
  margin-top:16px;
}
.hero-promo-setting{
  min-width:0;
}
.hero-promo-setting label{
  display:block;
  margin:0 0 7px !important;
}
.hero-promo-setting select{
  width:100%;
}
.hero-promo-setting .field-hint{
  position:static !important;
  display:block;
  margin:7px 0 0 !important;
  line-height:1.4;
}
.hero-promo-scale-setting{
  grid-column:1 / -1;
}
.hero-promo-scale-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.hero-promo-scale-head label{
  margin-bottom:6px !important;
}
.hero-promo-scale-head b{
  font-size:12px;
  color:#747b84;
}
.hero-promo-scale-setting input[type="range"]{
  width:100%;
  height:auto;
  padding:0;
}
.hero-promo-final-hint{
  position:static !important;
  margin:14px 0 0 !important;
  line-height:1.5;
}
.hero-promo-text-settings{
  margin-top:14px;
}
.hero-promo-text-settings label{
  display:block;
  margin:12px 0 7px !important;
}
.hero-promo-text-settings label:first-child{
  margin-top:0 !important;
}
.hero-promo-text-settings input,
.hero-promo-text-settings textarea{
  width:100%;
}
.hero-promo-text-settings .field-hint{
  position:static !important;
  margin:8px 0 0 !important;
}
@media(max-width:760px){
  .hero-promo-image-settings{grid-template-columns:1fr}
  .hero-promo-scale-setting{grid-column:auto}
}


/* v130 — About image options */
.about-layout-preview.preview-wide{
  display:grid;
  grid-template-rows:18px 1fr;
  grid-template-columns:1fr;
}
.about-layout-preview.preview-wide i{
  display:block;
  grid-column:1;
  background:#d7dce2;
  border-radius:5px;
}
.about-layout-preview.preview-wide b{
  display:block;
  grid-column:1;
  background:#eef0f3;
  border-radius:5px;
}
.about-image-display-settings{
  margin-top:12px;
  padding:14px;
  border:1px solid #e3e6ea;
  border-radius:13px;
  background:#fafbfc;
}
.about-image-display-settings label{
  display:block;
  margin:0 0 7px!important;
}
.about-image-display-settings .field-hint{
  position:static!important;
  margin:7px 0 0!important;
}
.about-image-crop-btn{
  margin-top:10px;
}


/* v131 — About layout previews */
.about-layout-preview.preview-side-compact{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:4px;
}
.about-layout-preview.preview-side-compact i{
  background:#d7dce2;
  border-radius:5px;
}
.about-layout-preview.preview-side-compact b{
  background:#eef0f3;
  border-radius:5px;
}


/* v132 — editor responsive QA */
@media(max-width:1100px){
  .grid2{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .grid2{grid-template-columns:1fr}
}


/* v134 — portfolio layout guidance */
.works-mini-vertical{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:3px;
  width:100%;
  height:100%;
  align-items:center;
}
.works-mini-vertical i{
  display:block;
  aspect-ratio:3/4;
  border-radius:3px;
  background:#d9dde2;
}
.works-navigation-settings{
  margin:14px 0 16px;
  padding:14px;
  border:1px solid #e2e5e9;
  border-radius:13px;
  background:#fafbfc;
}
.works-navigation-settings label{
  display:block;
  margin:0 0 7px!important;
}
.works-navigation-settings .field-hint{
  position:static!important;
  margin:7px 0 0!important;
}
.works-size-hint{
  min-height:48px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border:1px solid #d7dbe0;
  border-radius:12px;
  background:#fff;
  font-weight:700;
  color:#59616c;
}


/* v140 — compact Metrika/Direct goals guide */
.metrika-goals-mini,
.metrika-mini-steps{
  margin-top:14px;
  padding:13px 14px;
  border:1px solid #e2e5e9;
  border-radius:13px;
  background:#fafbfc;
}
.metrika-goals-mini>b,
.metrika-mini-steps>b{
  display:block;
  margin-bottom:9px;
  font-size:13px;
}
.metrika-goal-row{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding:7px 0;
  border-top:1px solid #eceef1;
}
.metrika-goal-row:first-of-type{
  border-top:0;
}
.metrika-goal-row code,
.metrika-mini-steps code{
  font:700 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#eef1f4;
  color:#343a42;
  border-radius:7px;
  padding:4px 7px;
}
.metrika-goal-row span{
  font-size:12px;
  line-height:1.45;
  color:#6f7680;
}
.metrika-mini-steps ol{
  margin:0;
  padding-left:20px;
}
.metrika-mini-steps li{
  margin:7px 0;
  font-size:12px;
  line-height:1.5;
  color:#646b75;
}
@media(max-width:640px){
  .metrika-goal-row{
    grid-template-columns:1fr;
    gap:5px;
  }
  .metrika-goal-row code{
    width:max-content;
  }
}


/* v143 — wide portfolio layout preview */
.works-mini-wide{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:4px;
  width:100%;
  height:100%;
  align-items:center;
}
.works-mini-wide i{
  display:block;
  width:100%;
  aspect-ratio:2/1;
  border-radius:3px;
  background:#d9dde2;
}


/* v145 — owner-controlled custom code settings */
.custom-code-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:14px;
}
.custom-code-title-row h3{margin-bottom:5px}
.custom-code-title-row p{margin:0;max-width:720px}
.custom-code-enable{flex:0 0 auto;margin-top:1px}
.custom-code-warning{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:12px 14px;
  margin:12px 0 14px;
  border:1px solid #f1dfb6;
  border-radius:14px;
  background:#fffaf0;
  font-size:13px;
  line-height:1.45;
}
.custom-code-warning span{color:#737982}
.custom-code-details{
  border:1px solid #e3e6ea;
  border-radius:14px;
  background:#fff;
  margin-top:10px;
  overflow:hidden;
}
.custom-code-details summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  cursor:pointer;
  padding:13px 15px;
  font-weight:700;
  list-style:none;
}
.custom-code-details summary::-webkit-details-marker{display:none}
.custom-code-details summary span{
  color:#8a9098;
  font-size:12px;
  font-weight:500;
  text-align:right;
}
.custom-code-details[open] summary{border-bottom:1px solid #eceef1}
.custom-code-textarea{
  width:100%;
  min-height:135px;
  resize:vertical;
  border:0!important;
  border-radius:0!important;
  padding:14px 15px!important;
  background:#11161c!important;
  color:#eef2f6!important;
  font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important;
  box-shadow:none!important;
}
.custom-code-textarea::placeholder{color:#7f8994}
.custom-code-save-note{margin:12px 2px 0}
.custom-code-section.is-disabled .custom-code-details,
.custom-code-section.is-disabled .custom-code-warning,
.custom-code-section.is-disabled .custom-code-save-note{
  opacity:.52;
}
@media(max-width:700px){
  .custom-code-title-row{flex-direction:column;gap:10px}
  .custom-code-details summary{align-items:flex-start;flex-direction:column;gap:3px}
  .custom-code-details summary span{text-align:left}
}

/* v147 — separate mobile crop controls for About photo */
.about-mobile-crop{margin-top:10px;border:1px solid #e4e7ea;border-radius:12px;padding:0 12px;background:#fafbfc}
.about-mobile-crop summary{cursor:pointer;font-weight:700;padding:11px 0}
.about-mobile-crop .field-hint{margin:0 0 12px}
.about-mobile-crop label{display:flex!important;justify-content:space-between;align-items:center;margin:9px 0 3px!important}
.about-mobile-crop label span{font-size:12px;color:#8a9098;font-weight:500}
.about-mobile-crop input[type="range"]{width:100%;margin:0 0 8px}


/* v148 — visual mobile crop editor for About */
.about-mobile-crop-btn{
  margin-top:8px!important;
  font-weight:500!important;
}
.about-mobile-crop-hint{
  margin-top:6px!important;
}
.about-mobile-crop{
  display:none!important;
}

/* Match the ordinary editor controls — no heavy accordion/arrow */
.about-image-display-settings .about-image-crop-btn,
.about-image-display-settings .about-mobile-crop-btn{
  min-height:40px!important;
  padding:9px 14px!important;
  border-radius:10px!important;
  border:1px solid #dfe3e8!important;
  background:#fff!important;
  color:#20252b!important;
  box-shadow:none!important;
  font-size:14px!important;
  line-height:1.2!important;
}
.about-image-display-settings .about-mobile-crop-btn:hover,
.about-image-display-settings .about-image-crop-btn:hover{
  background:#f5f7f9!important;
}

/* Phone-like crop preview */
#imageCropDialog.about-mobile-crop-dialog{
  width:min(620px,95vw)!important;
}
#imageCropDialog.about-mobile-crop-dialog .image-crop-stage{
  padding:20px!important;
}
#imageCropDialog.about-mobile-crop-dialog .about-mobile-preview-frame{
  width:min(390px,78vw)!important;
  max-height:58vh!important;
  border-radius:22px!important;
  box-shadow:0 10px 34px rgba(15,23,42,.14)!important;
}
#imageCropDialog.about-mobile-crop-dialog .about-mobile-preview-frame::after{
  content:'Мобильный экран';
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:3;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(20,24,29,.68);
  color:#fff;
  font-size:10px;
  line-height:1;
  pointer-events:none;
}