*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --orange:    #FF7140;
      --orange-d:  #e85e2e;
      --bg:        #111113;
      --artboard:  #161618;
      --surface:   #1c1c20;
      --surface-2: #242428;
      --surface-3: #2e2e36;
      --border:    rgba(255,255,255,.065);
      --border-hi: rgba(255,255,255,.13);
      --text:      #ededf0;
      --text-2:    #96959f;
      --text-3:    #525160;
      --yellow:    #f59e0b;
      --red:       #ef4444;
      --navy:      #1B2A4A;
    }

    html, body {
      height: 100%;
      font-family: 'Vazirmatn', sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 32px 24px 48px;
      min-height: 100%;
    }

    /* ═══ ARTBOARD ═══ */
    .artboard {
      width: 100%;
      max-width: 1440px;
      display: flex;
      flex-direction: column;
      gap: 0;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.04) inset;
    }

    /* ═══ TOPBAR ═══ */
    .topbar {
      height: 50px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .topbar-brand {
      display: flex; align-items: center; gap: 9px;
      font-size: 13px; font-weight: 600; color: var(--text);
    }
    .topbar-title {
      position: absolute; left: 50%; transform: translateX(-50%);
      font-size: 15px; font-weight: 600; color: var(--text-2);
      letter-spacing: -.01em; pointer-events: none;
    }
    .brand-dot {
      width: 24px; height: 24px; border-radius: 8px;
      background: var(--orange);
      display: grid; place-items: center;
      flex-shrink: 0;
    }
    .brand-dot svg { width: 13px; height: 13px; }

    .topbar-actions { display: flex; align-items: center; gap: 8px; }

    /* Author card (bottom of right panel) */
    .author-card {
      padding: 14px 16px;
      border-top: 1px solid var(--border);
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      direction: ltr; text-align: left;
    }
    .author-info { display: flex; flex-direction: column; gap: 2px; }
    .author-name  { font-size: 12px; font-weight: 600; color: var(--text-2); }
    .author-role  { font-size: 11px; color: var(--text-3); }
    .author-email-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
      border: 1px solid var(--border-hi); color: var(--text-3);
      text-decoration: none; transition: border-color .15s, color .15s, background .15s;
    }
    .author-email-icon:hover { border-color: var(--orange); color: var(--orange); background: rgba(255,113,64,.07); }
    .topbar-actions {
      display: flex; align-items: center; gap: 8px;
    }
    .import-btn {
      display: flex; align-items: center; gap: 6px;
      padding: 7px 14px; background: transparent; color: var(--orange);
      border: 1.5px solid var(--orange); border-radius: 8px; font-size: 12px; font-weight: 600;
      cursor: pointer; font-family: inherit;
      transition: background .15s, transform .1s, border-color .15s;
    }
    .import-btn:hover { background: rgba(255,113,64,.1); border-color: var(--orange-d); }
    .import-btn:active { transform: scale(.97); }
    .export-wrap {
      position: relative;
    }
    .export-btn {
      display: flex; align-items: center; gap: 6px;
      padding: 7px 14px; background: var(--orange); color: #fff;
      border: none; border-radius: 8px; font-size: 12px; font-weight: 600;
      cursor: pointer; font-family: inherit;
      transition: background .15s, transform .1s;
    }
    .export-btn:hover { background: var(--orange-d); }
    .export-btn:active { transform: scale(.97); }
    .chevron { transition: transform .2s; }
    .export-wrap.open .chevron { transform: rotate(180deg); }
    .export-menu {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      min-width: 170px;
      background: var(--surface-2);
      border: 1px solid var(--border-hi);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0,0,0,.5);
      z-index: 200;
    }
    .export-wrap.open .export-menu { display: block; }
    .export-option {
      display: flex; align-items: center; gap: 8px;
      width: 100%; padding: 10px 14px;
      background: none; border: none; color: var(--text-2);
      font-size: 12px; font-weight: 500; font-family: inherit;
      cursor: pointer; direction: rtl; text-align: right;
      transition: background .12s, color .12s;
    }
    .export-option:hover { background: var(--surface-3); color: var(--text); }
    .export-option + .export-option { border-top: 1px solid var(--border); }

    /* ═══ THREE-COLUMN WORKSPACE ═══ */
    .workspace {
      display: grid;
      grid-template-columns: 260px 1fr 300px;
      height: 680px;
      min-height: unset;
      background: var(--artboard);
      overflow: hidden;
    }

    /* ─── Left panel: Banner type + Colors + Reset ─── */
    .panel-left {
      background: var(--surface);
      border-left: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }

    /* ─── Center canvas ─── */
    .canvas-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 32px 24px 32px;
      gap: 16px;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255,113,64,.04) 0%, transparent 70%),
        var(--artboard);
    }

    /* Inbox center: justify from top so scaled card + note always visible */
    #inboxCenterCanvas {
      justify-content: center;
      align-items: center;
      padding-top: 24px;
      overflow: hidden;
    }

    .canvas-note {
      font-size: 10px; color: var(--text-3);
      letter-spacing: .02em;
    }

    /* ─── Right panel: Form fields + Upload ─── */
    .panel-right {
      background: var(--surface);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }
    .panel-section {
      padding: 16px;
      border-bottom: 1px solid var(--border);
    }
    .panel-section:last-child { border-bottom: none; flex: 1; }

    .section-label {
      font-size: 11px; font-weight: 700;
      color: var(--text-3); letter-spacing: .1em;
      text-transform: uppercase; margin-bottom: 12px;
    }

    /* Size pills */
    .size-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    }
    .pill {
      padding: 9px 8px; border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--text-2); font-size: 13px; font-weight: 500;
      cursor: pointer; font-family: inherit; text-align: center;
      transition: border-color .15s, color .15s, background .15s;
      line-height: 1.2;
    }
    .pill:hover { border-color: var(--border-hi); color: var(--text); }
    .pill.active {
      border-color: var(--orange);
      color: var(--orange);
      background: rgba(255,113,64,.09);
    }
    .pill:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
    }

    /* Variant tabs */
    .vtabs {
      display: flex; gap: 4px;
      background: var(--surface-2);
      padding: 3px; border-radius: 9px;
    }
    .vtab {
      flex: 1; padding: 8px 4px;
      border-radius: 6px; border: none;
      background: transparent; color: var(--text-2);
      font-size: 12px; font-weight: 500;
      cursor: pointer; font-family: inherit; text-align: center;
      transition: background .15s, color .15s;
    }
    .vtab.active { background: var(--surface-3); color: var(--text); }

    /* Top variant selector — 2×2 grid (با دکمه/بدون دکمه × یک خطی/دو خطی) */
    .vgrid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
      background: var(--surface-2); padding: 3px; border-radius: 9px;
    }
    .vgrid-btn {
      flex: none; display: flex; flex-direction: column; align-items: center;
      gap: 2px; padding: 9px 6px; line-height: 1.25;
    }
    .vgrid-btn .vgrid-main { font-size: 12px; font-weight: 600; }
    .vgrid-btn .vgrid-sub  { font-size: 10px; font-weight: 400; color: var(--text-3); }
    .vgrid-btn.active .vgrid-sub { color: var(--text-2); }

    /* Color swatches */
    .color-rows { display: flex; flex-direction: column; gap: 1px; }
    .color-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 7px 8px; border-radius: 7px; transition: background .1s;
    }
    .color-row:hover { background: var(--surface-2); }
    .color-row-label { font-size: 13px; color: var(--text-2); }
    .color-swatch {
      width: 30px; height: 20px; border-radius: 5px;
      border: 1px solid var(--border-hi); overflow: hidden;
      position: relative; cursor: pointer;
    }
    .color-swatch input[type="color"] {
      position: absolute; inset: -4px;
      width: calc(100% + 8px); height: calc(100% + 8px);
      opacity: 0; cursor: pointer;
    }
    .swatch-fill { width: 100%; height: 100%; pointer-events: none; }

    /* Reset */
    .reset-btn {
      width: 100%; padding: 9px; font-size: 14px; font-weight: 500;
      color: var(--text-2); background: var(--surface-2);
      border: 1px solid var(--border); border-radius: 8px;
      cursor: pointer; font-family: inherit;
      transition: border-color .15s, color .15s;
    }
    .reset-btn:hover { border-color: var(--border-hi); color: var(--text); }

    /* Fields */
    .field { margin-bottom: 14px; }
    .field:last-child { margin-bottom: 0; }

    .field-label {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 6px;
    }
    .field-label span { font-size: 12px; font-weight: 500; color: var(--text-2); }
    .counter { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
    .counter.warn-yellow { color: var(--yellow); }
    .counter.warn-red    { color: var(--red); }

    .field input[type="text"] {
      width: 100%; padding: 9px 12px;
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: 8px; color: var(--text); font-size: 13px;
      font-family: 'Vazirmatn', sans-serif; direction: rtl;
      outline: none; transition: border-color .15s;
    }
    .field input[type="text"] + input[type="text"] { margin-top: 6px; }
    .field input[type="text"]:focus { border-color: var(--orange); }
    .field input[type="text"].warn-yellow { border-color: var(--yellow); }
    .field input[type="text"].warn-red    { border-color: var(--red); }

    .field-hint { font-size: 11px; margin-top: 4px; color: var(--text-3); }
    .field-hint.warn-yellow { color: var(--yellow); }
    .field-hint.warn-red    { color: var(--red); }

    /* Upload */
    .upload-zone {
      position: relative; border: 1px dashed var(--border-hi);
      border-radius: 9px; padding: 16px; text-align: center;
      cursor: pointer; background: var(--surface-2);
      transition: border-color .15s;
    }
    .upload-zone:hover { border-color: var(--orange); }
    .upload-zone input[type="file"] {
      position: absolute; inset: 0; opacity: 0;
      cursor: pointer; width: 100%; height: 100%;
    }
    .uz-icon  { font-size: 20px; margin-bottom: 4px; }
    .uz-label { font-size: 13px; color: var(--text-2); }
    .uz-sub   { font-size: 11px; color: var(--text-3); margin-top: 2px; }
    .upload-preview {
      display: none; align-items: center; gap: 8px;
      font-size: 13px; color: var(--text-2);
    }
    .upload-preview img { width: 32px; height: 32px; object-fit: contain; border-radius: 4px; }
    .upload-note { font-size: 11px; color: var(--text-3); margin-top: 6px; }
    .upload-err  { font-size: 11px; color: var(--red); margin-top: 4px; display: none; }
    .remove-btn {
      margin-top: 8px; padding: 4px 10px;
      font-size: 12px; color: var(--red); background: none;
      border: 1px solid rgba(239,68,68,.22); border-radius: 5px;
      cursor: pointer; font-family: inherit; display: none;
    }
    .remove-btn:hover { background: rgba(239,68,68,.06); }

    /* ═══ BANNER SHELL ═══ */
    /* ─── Top banner contextual preview (status bar + content sheet) ─── */
    #bannerStage {
      display: flex; flex-direction: column; align-items: center;
      flex-shrink: 0; position: relative;
    }
    #bannerStage.is-top {
      border-radius: 22px; overflow: hidden;
      box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 48px rgba(0,0,0,.6);
    }
    #topStatusBar { display: none; }
    #bannerStage.is-top #topStatusBar {
      display: flex; align-items: center; justify-content: space-between;
      direction: ltr; box-sizing: border-box;
      height: 34px; padding: 0 16px;
      font-family: 'Vazirmatn', sans-serif; font-weight: 600; font-size: 14px;
      color: #15100a;
    }
    #topStatusBar #topSbTime { display: inline-flex; align-items: center; }
    #topStatusBar .sb-icons { display: inline-flex; align-items: center; gap: 6px; }
    #topStatusBar .sb-icons svg, #topStatusBar #topSbTime svg { display: block; }
    #bannerStage.is-top #bannerShell { border-radius: 0; box-shadow: none; }
    #topSheet { display: none; }
    #bannerStage.is-top #topSheet {
      display: block; height: 64px; background: #fff;
      border-top-left-radius: 36px; border-top-right-radius: 36px;
    }

    #bannerShell {
      position: relative; border-radius: 12px;
      overflow: hidden; flex-shrink: 0;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.08),
        0 12px 48px rgba(0,0,0,.6);
      transition: width .2s, height .2s;
    }
    #bannerVisual {
      position: absolute;
      display: flex; align-items: center; justify-content: center;
      z-index: 0; transition: all .2s;
      overflow: hidden;
    }
    #bannerVisual.no-img { background: rgba(0,0,0,.08); }
    #bannerVisual img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; display: block; }
    #bannerVisual .placeholder { font-size: 9px; color: rgba(0,0,0,.2); text-align: center; line-height: 1.5; }
    #bannerText {
      position: absolute; display: flex; flex-direction: column;
      text-align: right; direction: rtl; z-index: 2; transition: all .2s;
    }
    #bannerTitle {
      font-family: 'Vazirmatn', sans-serif; font-weight: 600; color: var(--navy);
      line-height: 1.3; word-break: break-word;
    }
    #bannerDesc {
      font-family: 'Vazirmatn', sans-serif; font-weight: 400; color: var(--navy);
      line-height: 1.4; word-break: break-word;
    }
    #bannerBtn {
      position: absolute; border-radius: 999px;
      display: inline-flex; align-items: center; gap: 6px;
      font-family: 'Vazirmatn', sans-serif; font-weight: 500; direction: rtl;
      white-space: nowrap; z-index: 10;
      background: var(--navy); color: #f5efe0;
      transition: bottom .2s, right .2s, height .2s, font-size .2s, padding .2s;
    }
    #bannerBtnText { white-space: nowrap; }
    #bannerDescArrow { display: inline-flex; align-items: center; margin-right: 4px; flex-shrink: 0; }
    #bannerDescArrow2 { display: inline-flex; align-items: center; margin-right: 3px; flex-shrink: 0; }
    #bannerDescRow {
      display: flex; align-items: center; direction: rtl;
      font-family: 'Vazirmatn', sans-serif; font-weight: 400; color: var(--navy);
      line-height: 1.4;
    }

    /* Error toast */
    /* Smart recommend toast */
    .notify-toast {
      display: none;
      position: fixed; top: 66px; left: 50%;
      transform: translateX(-50%);
      align-items: center; gap: 8px;
      background: #2a1418; border: 1px solid var(--red); color: #ffdada;
      border-radius: 12px; padding: 11px 16px;
      font-size: 13px; font-weight: 500;
      max-width: 440px;
      box-shadow: 0 8px 40px rgba(0,0,0,.6);
      backdrop-filter: blur(20px);
      z-index: 260; direction: rtl;
      animation: toastIn .2s ease;
    }
    .notify-toast.visible { display: flex; }

    .recommend-toast {
      display: none;
      position: fixed; top: 66px; left: 50%;
      transform: translateX(-50%);
      background: #1e1e24;
      border: 1px solid var(--border-hi);
      border-radius: 14px;
      padding: 12px 16px;
      min-width: 320px; max-width: 420px;
      box-shadow: 0 8px 40px rgba(0,0,0,.6);
      backdrop-filter: blur(20px);
      z-index: 200;
      direction: rtl;
      animation: toastIn .2s ease;
    }
    .recommend-toast.visible { display: block; }
    @keyframes toastIn {
      from { opacity:0; transform: translateX(-50%) translateY(-8px); }
      to   { opacity:1; transform: translateX(-50%) translateY(0); }
    }
    .toast-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 8px;
    }
    .toast-title {
      display: flex; align-items: center; gap: 6px;
      font-size: 12px; font-weight: 600; color: var(--yellow);
    }
    .toast-close {
      background: none; border: none; color: var(--text-3);
      cursor: pointer; font-size: 14px; padding: 0; line-height: 1;
      transition: color .15s;
    }
    .toast-close:hover { color: var(--text); }
    .toast-body { font-size: 12px; color: var(--text-2); line-height: 1.6; margin-bottom: 10px; }
    .toast-actions { display: flex; gap: 6px; justify-content: flex-end; }
    .toast-btn {
      padding: 6px 14px; border-radius: 8px; font-size: 11px; font-weight: 600;
      cursor: pointer; font-family: inherit; border: none;
      transition: background .15s;
    }
    .toast-btn-primary {
      background: var(--orange); color: #fff;
    }
    .toast-btn-primary:hover { background: var(--orange-d); }
    .toast-btn-secondary {
      background: var(--surface-3); color: var(--text-2);
    }
    .toast-btn-secondary:hover { background: var(--border-hi); }

    /* ═══ BOTTOM NAV ═══ */
    .bottom-nav {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex; align-items: center; gap: 4px;
      background: rgba(20,20,26,.88);
      border: 1px solid var(--border-hi);
      border-radius: 999px;
      padding: 5px;
      box-shadow: 0 4px 24px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.05) inset;
      backdrop-filter: blur(16px);
      z-index: 20;
      direction: rtl;
      white-space: nowrap;
    }
    .nav-btn {
      display: flex; align-items: center; gap: 7px;
      padding: 9px 20px; border-radius: 999px;
      border: none; background: transparent;
      color: var(--text-3); font-size: 13px; font-weight: 500;
      cursor: pointer; font-family: inherit;
      transition: background .15s, color .15s;
      white-space: nowrap;
    }
    .nav-btn svg { flex-shrink: 0; transition: color .15s; }
    .nav-btn:hover { color: var(--text-2); }
    .nav-btn.active {
      background: var(--orange);
      color: #fff;
    }
    .nav-btn.active svg { color: #fff; }

    /* ═══ PAGES ═══ */
    .page { display: none; width: 100%; flex: 1; }
    .page.active { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 32px 24px 100px; }
    .page-placeholder {
      max-width: 1440px; width: 100%;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-height: 480px;
      border-radius: 16px;
      background: var(--surface);
      border: 1px dashed var(--border-hi);
      gap: 12px;
    }
    .page-placeholder-icon { font-size: 40px; opacity: .4; }
    .page-placeholder-title { font-size: 20px; font-weight: 600; color: var(--text-2); }
    .page-placeholder-sub   { font-size: 13px; color: var(--text-3); }
    .panel-left::-webkit-scrollbar,
    .panel-right::-webkit-scrollbar { width: 3px; }
    .panel-left::-webkit-scrollbar-track,
    .panel-right::-webkit-scrollbar-track { background: transparent; }
    .panel-left::-webkit-scrollbar-thumb,
    .panel-right::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }

    /* ═══ KV TRANSFORM CONTROLS ═══ */
    .kv-controls-wrap {
      display: none;
      flex-direction: column;
      gap: 8px;
      margin-top: 10px;
      padding: 10px 12px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 10px;
    }
    .kv-controls-wrap.visible { display: flex; }
    .kv-control-row {
      display: flex; align-items: center; gap: 8px; direction: rtl;
    }
    .kv-control-label {
      font-size: 11px; color: var(--text-3); min-width: 44px; flex-shrink: 0; text-align: right;
    }
    .kv-control-row input[type="range"] {
      flex: 1; height: 4px; accent-color: var(--orange); cursor: pointer;
    }
    .kv-control-val {
      font-size: 11px; color: var(--text-2); min-width: 38px; text-align: left;
      font-variant-numeric: tabular-nums;
    }
    .kv-flip-row {
      display: flex; gap: 6px; margin-top: 2px;
    }
    .kv-flip-btn {
      flex: 1; padding: 5px 4px; border-radius: 6px;
      border: 1px solid var(--border); background: var(--surface-3);
      color: var(--text-3); font-size: 11px; font-weight: 500;
      cursor: pointer; font-family: inherit; text-align: center;
      transition: border-color .15s, color .15s, background .15s;
      display: flex; align-items: center; justify-content: center; gap: 4px;
    }
    .kv-flip-btn:hover { border-color: var(--border-hi); color: var(--text); }
    .kv-flip-btn.active { border-color: var(--orange); color: var(--orange); background: rgba(255,113,64,.09); }
    .kv-reset-btn {
      width: 100%; padding: 6px; border-radius: 7px;
      border: 1px solid var(--border); background: none;
      color: var(--text-3); font-size: 11px; font-weight: 500;
      cursor: pointer; font-family: inherit; text-align: center;
      margin-top: 2px;
      transition: border-color .15s, color .15s;
    }
    .kv-reset-btn:hover { border-color: var(--border-hi); color: var(--text); }
    .kv-section-label {
      font-size: 10px; font-weight: 700; color: var(--text-3);
      letter-spacing: .08em; text-transform: uppercase;
      margin-bottom: 2px; margin-top: 2px;
    }
    .kv-divider {
      height: 1px; background: var(--border); margin: 2px 0;
    }
    /* Banner KV drag cursor */
    #bannerVisual.kv-draggable { cursor: grab; }
    #bannerVisual.kv-dragging  { cursor: grabbing; }

    /* ═══ TOGGLE SWITCH ═══ */
    .toggle-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
    .toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
    .toggle-track {
      width: 34px; height: 20px; background: var(--surface-3);
      border-radius: 999px; border: 1px solid var(--border-hi);
      transition: background .2s, border-color .2s; position: relative;
    }
    .toggle-thumb {
      position: absolute; top: 2px; right: 2px;
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--text-3); transition: transform .2s, background .2s;
    }
    .toggle-switch input:checked + .toggle-track { background: var(--orange); border-color: var(--orange); }
    .toggle-switch input:checked + .toggle-track .toggle-thumb { background: #fff; transform: translateX(-14px); }

    /* ═══ PROMO CARD ITEM (right panel) ═══ */
    .promo-card-item {
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: 10px; margin-bottom: 8px; overflow: hidden;
      transition: border-color .15s;
    }
    .promo-card-item:hover { border-color: var(--border-hi); }
    .promo-card-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 12px; cursor: pointer; direction: rtl;
    }
    .promo-card-header-left { display: flex; align-items: center; gap: 8px; }
    .promo-card-num {
      width: 20px; height: 20px; border-radius: 6px;
      background: var(--surface-3); color: var(--text-3);
      font-size: 11px; font-weight: 700;
      display: grid; place-items: center; flex-shrink: 0;
    }
    .promo-card-name { font-size: 12px; font-weight: 500; color: var(--text-2); }
    .promo-card-actions { display: flex; align-items: center; gap: 4px; }
    .promo-card-del {
      width: 24px; height: 24px; border-radius: 6px;
      background: none; border: none; color: var(--text-3);
      cursor: pointer; display: grid; place-items: center;
      transition: color .12s, background .12s;
    }
    .promo-card-del:hover { color: var(--red); background: rgba(239,68,68,.08); }
    .promo-card-chevron {
      width: 24px; height: 24px; border-radius: 6px;
      background: none; border: none; color: var(--text-3);
      display: grid; place-items: center; transition: transform .2s; flex-shrink:0;
    }
    .promo-card-item.open .promo-card-chevron { transform: rotate(180deg); }
    .promo-card-body { display: none; padding: 0 12px 12px; direction: rtl; }
    .promo-card-item.open .promo-card-body { display: block; }

    /* Image upload inside card */
    .card-img-upload {
      position: relative; border: 1px dashed var(--border-hi);
      border-radius: 8px; padding: 10px; text-align: center;
      cursor: pointer; background: var(--surface-3);
      transition: border-color .15s; margin-bottom: 10px;
    }
    .card-img-upload:hover { border-color: var(--orange); }
    .card-img-upload input[type="file"] {
      position: absolute; inset: 0; opacity: 0;
      cursor: pointer; width: 100%; height: 100%;
    }
    .card-img-thumb {
      width: 48px; height: 48px; object-fit: contain;
      border-radius: 6px; display: none; margin: 0 auto 4px;
    }
    .card-img-label { font-size: 11px; color: var(--text-3); }

    /* Badge row */
    .badge-row { display: flex; gap: 6px; margin-bottom: 10px; }
    .badge-type-btn {
      flex: 1; padding: 7px 4px; border-radius: 7px;
      border: 1px solid var(--border); background: var(--surface-3);
      color: var(--text-3); font-size: 11px; font-weight: 500;
      cursor: pointer; font-family: inherit; text-align: center;
      transition: border-color .15s, color .15s;
    }
    .badge-type-btn.active { border-color: var(--orange); color: var(--orange); background: rgba(255,113,64,.09); }

    /* Preview card (center) */
    .promo-preview-card {
      flex-shrink: 0; border-radius: 12px; overflow: hidden;
      font-family: 'Vazirmatn', sans-serif; direction: rtl;
      position: relative;
      box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }
    .promo-preview-card-img {
      width: 100%; display: block; object-fit: cover;
    }
    .promo-preview-badge {
      position: absolute; top: 6px; left: 6px;
      border-radius: 8px; padding: 4px 6px; text-align: center;
      font-size: 10px; font-weight: 700; line-height: 1.2;
      background: #FF7140; color: #fff; min-width: 36px;
    }
    .promo-preview-more {
      flex-shrink: 0; border-radius: 12px; overflow: hidden;
      font-family: 'Vazirmatn', sans-serif; direction: rtl;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      background: rgba(255,255,255,.6); gap: 4px;
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }

    /* Promo view mode toggle */
    .promo-view-toggle {
      display: flex; gap: 4px; background: var(--surface-2);
      padding: 3px; border-radius: 9px; margin-bottom: 12px;
      width: 360px; flex-shrink: 0;
    }
    .promo-view-btn {
      width: 174px; flex-shrink: 0;
      padding: 7px 8px; border-radius: 6px; border: none;
      background: transparent; color: var(--text-2);
      font-size: 11px; font-weight: 500; cursor: pointer;
      font-family: inherit; text-align: center;
      transition: background .15s, color .15s;
    }
    .promo-view-btn.active { background: var(--surface-3); color: var(--text); }

    /* Zoom toggle (shown only in full mode) */
    .promo-zoom-toggle {
      display: none; gap: 4px; background: var(--surface-2);
      padding: 3px; border-radius: 9px; margin-bottom: 8px;
      width: 360px; flex-shrink: 0;
    }
    .promo-zoom-toggle.visible { display: flex; }
    .promo-zoom-btn {
      flex: 1; padding: 6px 8px; border-radius: 6px; border: none;
      background: transparent; color: var(--text-2);
      font-size: 11px; font-weight: 500; cursor: pointer;
      font-family: inherit; text-align: center;
      transition: background .15s, color .15s;
    }
    .promo-zoom-btn.active { background: var(--surface-3); color: var(--text); }

    /* Scrollbar hide for preview */
    #promoCardsRow::-webkit-scrollbar { display: none; }
    #promoCardsRow { cursor: grab; user-select: none; }
    #promoCardsRow.dragging { cursor: grabbing; }

    /* ═══ INBOX STYLES ═══ */
    .inbox-sub-tabs {
      display: flex; gap: 4px;
      background: var(--surface-2);
      padding: 3px; border-radius: 9px;
      margin: 14px 16px 0;
    }
    .inbox-sub-tab {
      flex: 1; padding: 8px 4px;
      border-radius: 6px; border: none;
      background: transparent; color: var(--text-2);
      font-size: 12px; font-weight: 500;
      cursor: pointer; font-family: inherit; text-align: center;
      transition: background .15s, color .15s;
    }
    .inbox-sub-tab.active { background: var(--surface-3); color: var(--text); }

    /* Inbox banner variant pills */
    .inbox-variant-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    }
    .inbox-variant-pill {
      padding: 9px 8px; border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--text-2); font-size: 11px; font-weight: 500;
      cursor: pointer; font-family: inherit; text-align: center;
      transition: border-color .15s, color .15s, background .15s;
      line-height: 1.3;
    }
    .inbox-variant-pill:hover { border-color: var(--border-hi); color: var(--text); }
    .inbox-variant-pill.active {
      border-color: var(--orange); color: var(--orange);
      background: rgba(255,113,64,.09);
    }

    /* Gradient controls */
    .gradient-controls { display: flex; flex-direction: column; gap: 10px; }
    .gradient-type-row {
      display: flex; gap: 4px;
      background: var(--surface-2); padding: 3px; border-radius: 7px;
    }
    .gradient-type-btn {
      flex: 1; padding: 6px 4px; border-radius: 5px; border: none;
      background: transparent; color: var(--text-2);
      font-size: 11px; font-weight: 500; cursor: pointer;
      font-family: inherit; text-align: center;
      transition: background .15s, color .15s;
    }
    .gradient-type-btn.active { background: var(--surface-3); color: var(--text); }
    .angle-row {
      display: flex; align-items: center; gap: 8px;
    }
    .angle-row label { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
    .angle-row input[type="range"] {
      flex: 1; accent-color: var(--orange); height: 3px;
    }
    .angle-val {
      font-size: 11px; color: var(--text-2);
      width: 34px; text-align: left; flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }
    .gradient-stops { display: flex; flex-direction: column; gap: 6px; }
    .gradient-stop-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 5px 8px; border-radius: 7px; transition: background .1s;
    }
    .gradient-stop-row:hover { background: var(--surface-2); }
    .gradient-stop-row label { font-size: 12px; color: var(--text-2); }

    /* KV drag controls */
    .kv-controls {
      display: flex; flex-direction: column; gap: 10px; margin-top: 10px;
    }
    .kv-control-row {
      display: flex; flex-direction: column; gap: 3px;
    }
    .kv-control-row-header {
      display: flex; align-items: center; justify-content: space-between;
    }
    .kv-control-row label {
      font-size: 11px; color: var(--text-3);
    }
    .kv-control-row input[type="range"] {
      width: 100%; accent-color: var(--orange); height: 3px; display: block;
      box-sizing: border-box;
    }
    .kv-control-val {
      font-size: 11px; color: var(--text-2);
      font-variant-numeric: tabular-nums; direction: ltr;
    }

    /* pbb section box */
    .pbb-section-box {
      background: var(--surface-2); border-radius: 10px;
      padding: 12px; margin-bottom: 4px;
      box-sizing: border-box; overflow: hidden;
    }
    .pbb-section-title {
      font-size: 11px; font-weight: 600; color: var(--text-2);
      margin: 14px 0 7px; letter-spacing: .02em;
    }
    .pbb-field-label {
      font-size: 11px; color: var(--text-3); margin-bottom: 6px; font-weight: 500;
    }

    /* pbb slider row — label راست، value inline انتهای ردیف */
    .pbb-slider-row {
      display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;
    }
    .pbb-slider-header {
      display: flex; align-items: center; justify-content: space-between;
    }
    .pbb-slider-row-label {
      font-size: 11px; color: var(--text-3);
    }
    .pbb-slider-inner {
      display: flex; align-items: center; gap: 0;
    }
    .pbb-slider-inner input[type="range"] {
      flex: 1; accent-color: var(--orange); height: 3px; min-width: 0;
    }
    .pbb-slider-val {
      font-size: 10px; color: var(--text-2); width: 26px;
      text-align: right; flex-shrink: 0;
      font-variant-numeric: tabular-nums; direction: ltr;
    }

    /* Inbox canvas */
    #inboxBannerShell {
      position: relative; border-radius: 0;
      overflow: hidden; flex-shrink: 0;
      box-shadow: none;
      transition: background .2s;
    }
    #inboxKvLayer {
      position: absolute; inset: 0;
      overflow: hidden; border-radius: 0;
    }
    #inboxKvImg {
      position: absolute;
      transform-origin: 0 0;
      cursor: grab;
      user-select: none;
      touch-action: none;
    }
    #inboxKvImg:active { cursor: grabbing; }
    #inboxTextLayer {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      pointer-events: none;
    }

    /* Inbox message detail preview */
    .inbox-detail-preview {
      width: 360px; flex-shrink: 0;
      background: #fff; border-radius: 16px; overflow: hidden;
      box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 48px rgba(0,0,0,.6);
      font-family: 'Vazirmatn', sans-serif; direction: rtl;
      max-height: 800px;
      display: flex; flex-direction: column;
    }
    .inbox-detail-banner {
      width: 100%; display: block; object-fit: cover;
      background: #f0f0f0; flex-shrink: 0;
    }
    .inbox-detail-body {
      padding: 16px;
      overflow-y: auto;
      flex: 1;
    }
    .inbox-detail-title {
      font-size: 16px; font-weight: 400; color: #111;
      line-height: 24px; margin-bottom: 4px; text-align: right;
    }
    .inbox-detail-meta {
      font-size: 12px; color: #888; text-align: left;
      direction: ltr; margin-bottom: 12px;
    }
    .inbox-detail-desc {
      font-size: 14px; font-weight: 400; color: #333;
      line-height: 24px; text-align: right; margin-bottom: 16px;
    }
    .inbox-discount-box {
      background: #f5f5f5; border-radius: 10px;
      padding: 12px 14px; margin-bottom: 12px;
      display: flex; align-items: center; justify-content: space-between;
      direction: rtl;
    }
    .inbox-discount-label { font-size: 11px; color: #888; margin-bottom: 2px; }
    .inbox-discount-code {
      font-size: 16px; font-weight: 500; color: #111; direction: ltr;
    }
    .inbox-discount-copy {
      display: flex; align-items: center; gap: 4px;
      font-size: 12px; color: #555; cursor: pointer;
    }
    .inbox-cta-btn {
      width: 100%; padding: 14px 16px;
      background: rgba(255,87,34,.08);
      border: none; border-radius: 10px;
      display: flex; align-items: center; justify-content: space-between;
      font-family: 'Vazirmatn', sans-serif;
      cursor: pointer; direction: rtl;
    }
    .inbox-cta-btn span { font-size: 14px; font-weight: 400; color: #FF5722; }
    .inbox-cta-btn svg { color: #FF5722; }

    /* Inside page preview */
    .inbox-inside-preview {
      width: 360px; flex-shrink: 0;
      background: #fff; border-radius: 16px; overflow: hidden;
      box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 48px rgba(0,0,0,.6);
      font-family: 'Vazirmatn', sans-serif; direction: rtl;
    }
    .inbox-inside-topbar {
      display: flex; align-items: center; justify-content: flex-end;
      padding: 12px 16px 8px;
      border-bottom: 1px solid #f0f0f0;
    }
    .inbox-inside-topbar-title {
      font-size: 16px; font-weight: 600; color: #111;
    }
    .inbox-inside-item {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 14px 16px; border-bottom: 1px solid #f0f0f0;
      direction: rtl;
    }
    .inbox-inside-thumb {
      width: 60px; height: 60px; border-radius: 8px;
      background: #eee; flex-shrink: 0; object-fit: cover;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .inbox-inside-content { flex: 1; min-width: 0; }
    .inbox-inside-item-title {
      font-size: 14px; font-weight: 400; color: #111;
      line-height: 20px; margin-bottom: 3px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .inbox-inside-item-desc {
      font-size: 12px; color: #888;
      line-height: 18px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .inbox-inside-date {
      font-size: 12px; color: #aaa; margin-top: 4px; direction: ltr;
    }

    /* Textarea field */
    .field textarea {
      width: 100%; padding: 9px 12px;
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: 8px; color: var(--text); font-size: 13px;
      font-family: 'Vazirmatn', sans-serif; direction: rtl;
      outline: none; transition: border-color .15s;
      resize: vertical; min-height: 68px; line-height: 1.6;
    }
    .field textarea:focus { border-color: var(--orange); }
    .field textarea.warn-yellow { border-color: var(--yellow); }
    /* ═══ PROMO BANNER BUILDER ═══ */
    .pbb-mode-tabs {
      display: flex; gap: 4px;
      background: var(--surface-2); padding: 3px; border-radius: 8px;
      margin-bottom: 12px;
    }
    .pbb-mode-tab {
      flex: 1; padding: 7px 4px; border-radius: 6px; border: none;
      background: transparent; color: var(--text-2);
      font-size: 11px; font-weight: 500; cursor: pointer;
      font-family: inherit; text-align: center;
      transition: background .15s, color .15s;
    }
    .pbb-mode-tab.active { background: var(--surface-3); color: var(--text); }

    /* layout toggle: text-top / text-bottom */
    .pbb-layout-row {
      display: flex; gap: 6px; margin-bottom: 10px;
    }
    .pbb-layout-btn {
      flex: 1; padding: 8px 4px; border-radius: 8px;
      border: 1px solid var(--border); background: var(--surface-2);
      color: var(--text-3); font-size: 11px; font-weight: 500;
      cursor: pointer; font-family: inherit; text-align: center;
      transition: border-color .15s, color .15s, background .15s;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
    }
    .pbb-layout-btn.active {
      border-color: var(--orange); color: var(--orange);
      background: rgba(255,113,64,.09);
    }
    .pbb-layout-icon {
      width: 24px; height: 32px; border-radius: 4px;
      border: 1.5px solid currentColor; display: flex;
      flex-direction: column; overflow: hidden; gap: 2px; padding: 2px;
    }
    .pbb-layout-icon-text {
      background: currentColor; border-radius: 2px; opacity: .7;
    }
    .pbb-layout-icon-img {
      flex: 1; background: currentColor; border-radius: 2px; opacity: .3;
    }

    /* size S/M/L pills for font */
    .pbb-size-pills {
      display: flex; gap: 4px;
    }
    .pbb-size-pill {
      flex: 1; padding: 5px 4px; border-radius: 6px;
      border: 1px solid var(--border); background: var(--surface-2);
      color: var(--text-3); font-size: 11px; font-weight: 600;
      cursor: pointer; font-family: inherit; text-align: center;
      transition: border-color .15s, color .15s, background .15s;
    }
    .pbb-size-pill.active {
      border-color: var(--orange); color: var(--orange);
      background: rgba(255,113,64,.09);
    }
    /* weight pills */
    .pbb-weight-pills {
      display: flex; gap: 4px;
    }
    .pbb-weight-pill {
      flex: 1; padding: 5px 4px; border-radius: 6px;
      border: 1px solid var(--border); background: var(--surface-2);
      color: var(--text-3); font-size: 11px;
      cursor: pointer; font-family: inherit; text-align: center;
      transition: border-color .15s, color .15s, background .15s;
    }
    .pbb-weight-pill.active {
      border-color: var(--orange); color: var(--orange);
      background: rgba(255,113,64,.09);
    }

    /* pbb preview — sticky بالای panel-section */
    #pbBannerPreviewWrap {
      display: flex;
      justify-content: center;
      padding: 10px 0 12px;
    }
    #pbBannerCanvas {
      border-radius: 12px;
      box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 4px 20px rgba(0,0,0,.5);
      cursor: default;
      display: block;
    }


    /* ═══ GUIDELINE & GUIDE PAGES ═══ */
    .info-page {
      display: none;
      width: 100%;
      background: var(--artboard);
      height: 680px;
      overflow-y: auto;
      direction: rtl;
    }
    .info-page.active {
      display: block;
    }
    .info-page-inner {
      max-width: 760px;
      margin: 0 auto;
      padding: 40px 24px 80px;
    }
    .info-page-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 32px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border);
    }
    .info-page-icon {
      width: 40px; height: 40px; border-radius: 12px;
      background: rgba(255,113,64,.12);
      border: 1px solid rgba(255,113,64,.2);
      display: grid; place-items: center; flex-shrink: 0;
    }
    .info-page-title {
      font-size: 20px; font-weight: 700; color: var(--text);
    }
    .info-page-subtitle {
      font-size: 13px; color: var(--text-3); margin-top: 2px;
    }

    /* Section card */
    .info-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px 22px;
      margin-bottom: 16px;
    }
    .info-section-title {
      font-size: 13px; font-weight: 700; color: var(--text);
      margin-bottom: 14px;
      display: flex; align-items: center; gap: 8px;
    }
    .info-section-title-icon {
      width: 26px; height: 26px; border-radius: 7px;
      background: var(--surface-2);
      display: grid; place-items: center; flex-shrink: 0;
    }

    /* Char limit table */
    .char-table {
      width: 100%; border-collapse: collapse;
      font-size: 12px; direction: rtl;
    }
    .char-table th {
      text-align: right; padding: 7px 10px;
      color: var(--text-3); font-weight: 600;
      border-bottom: 1px solid var(--border);
      font-size: 11px; letter-spacing: .04em;
    }
    .char-table td {
      padding: 8px 10px; color: var(--text-2);
      border-bottom: 1px solid var(--border);
      font-variant-numeric: tabular-nums;
    }
    .char-table tr:last-child td { border-bottom: none; }
    .char-table tr:hover td { background: var(--surface-2); }
    .char-table td:first-child { color: var(--text); font-weight: 500; }

    /* Dos/Don'ts rows */
    .dos-donts { display: flex; flex-direction: column; gap: 7px; }
    .dos-donts-row {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 9px 12px; border-radius: 9px;
      font-size: 12px; color: var(--text-2); line-height: 1.6;
    }
    .dos-donts-row.do   { background: rgba(34,197,94,.07);  border: 1px solid rgba(34,197,94,.15); }
    .dos-donts-row.dont { background: rgba(239,68,68,.07);  border: 1px solid rgba(239,68,68,.15); }
    .dos-donts-icon { flex-shrink: 0; margin-top: 1px; font-size: 13px; }

    /* KV spec row */
    .spec-rows { display: flex; flex-direction: column; gap: 6px; }
    .spec-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 7px 10px; border-radius: 8px;
      background: var(--surface-2);
      font-size: 12px;
    }
    .spec-row-label { color: var(--text-3); }
    .spec-row-value { color: var(--text); font-weight: 500; direction: ltr; }

    /* CTA buttons at bottom of guideline */
    .info-cta-group {
      display: flex; flex-direction: column; gap: 10px;
      margin-top: 28px;
    }
    .info-cta-label {
      font-size: 12px; color: var(--text-3); margin-bottom: 4px;
    }
    .info-cta-btn {
      display: flex; align-items: center; gap: 10px;
      padding: 13px 18px; border-radius: 11px;
      border: 1px solid var(--border-hi);
      background: var(--surface);
      color: var(--text); font-size: 13px; font-weight: 600;
      text-decoration: none; direction: rtl;
      transition: border-color .15s, background .15s;
      cursor: pointer; font-family: inherit;
    }
    .info-cta-btn:hover {
      border-color: var(--orange);
      background: rgba(255,113,64,.06);
    }
    .info-cta-btn-icon {
      width: 32px; height: 32px; border-radius: 8px;
      background: rgba(255,113,64,.12);
      display: grid; place-items: center; flex-shrink: 0;
    }
    .info-cta-btn-sub {
      font-size: 11px; color: var(--text-3); font-weight: 400; margin-top: 1px;
    }
    .info-cta-btn-texts { display: flex; flex-direction: column; }
    .info-cta-btn-arrow {
      margin-right: auto; color: var(--text-3);
      transition: color .15s;
    }
    .info-cta-btn:hover .info-cta-btn-arrow { color: var(--orange); }

    /* Guide steps */
    .guide-steps { display: flex; flex-direction: column; gap: 0; }
    .guide-step {
      display: flex; gap: 14px; position: relative;
    }
    .guide-step-left {
      display: flex; flex-direction: column; align-items: center;
      flex-shrink: 0;
    }
    .guide-step-num {
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--orange); color: #fff;
      font-size: 12px; font-weight: 700;
      display: grid; place-items: center; flex-shrink: 0;
    }
    .guide-step-line {
      width: 1px; flex: 1; background: var(--border);
      margin: 4px 0; min-height: 20px;
    }
    .guide-step:last-child .guide-step-line { display: none; }
    .guide-step-body {
      padding-bottom: 20px; padding-top: 3px; flex: 1;
    }
    .guide-step-title {
      font-size: 13px; font-weight: 700; color: var(--text);
      margin-bottom: 6px;
    }
    .guide-step-desc {
      font-size: 12px; color: var(--text-2); line-height: 1.75;
    }

    /* Tab sections inside guide */
    .guide-tab-section {
      background: var(--surface-2); border-radius: 10px;
      padding: 14px 16px; margin-bottom: 8px;
    }
    .guide-tab-section-title {
      font-size: 12px; font-weight: 700; color: var(--text);
      margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
    }
    .guide-tab-badge {
      font-size: 10px; font-weight: 600; padding: 2px 7px;
      border-radius: 99px; background: rgba(255,113,64,.15);
      color: var(--orange); border: 1px solid rgba(255,113,64,.2);
    }
    .guide-tab-desc {
      font-size: 12px; color: var(--text-2); line-height: 1.75;
    }
    .guide-tab-desc li {
      margin-bottom: 4px; padding-right: 4px;
    }
    .guide-tab-desc ul {
      padding-right: 18px; margin-top: 6px;
    }

    /* Accordion header */
    .info-section-header {
      display: flex; align-items: center; justify-content: space-between;
      cursor: pointer; user-select: none;
      margin-bottom: 0;
    }
    .info-section-header:hover .info-section-title { color: var(--text); }
    .info-section-chevron {
      color: var(--text-3); transition: transform .2s;
      flex-shrink: 0; margin-right: auto; padding-right: 4px;
    }
    .info-section-body { display: none; margin-top: 14px; }

    /* Video button */
    .video-btn {
      display: flex; align-items: center; gap: 12px;
      width: 100%; padding: 16px 18px; border-radius: 12px;
      border: 1px solid var(--border-hi);
      background: var(--surface);
      color: var(--text); font-size: 14px; font-weight: 600;
      text-decoration: none; direction: rtl;
      transition: border-color .15s, background .15s;
      cursor: pointer; font-family: inherit;
      margin-top: 6px;
    }
    .video-btn:hover {
      border-color: var(--orange);
      background: rgba(255,113,64,.06);
    }
    .video-btn-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: rgba(255,113,64,.15);
      border: 1px solid rgba(255,113,64,.25);
      display: grid; place-items: center; flex-shrink: 0;
    }
    .video-btn-texts { display: flex; flex-direction: column; gap: 2px; }
    .video-btn-sub {
      font-size: 11px; color: var(--text-3); font-weight: 400;
    }
    .video-btn-arrow { margin-right: auto; color: var(--text-3); }
    .video-btn:hover .video-btn-arrow { color: var(--orange); }

    /* Hidden element for measuring title line count */
    #_titleLineTester {
      position: absolute; visibility: hidden; pointer-events: none;
      width: 328px; /* ~360px preview width minus 2×16px padding */
      font-family: 'Vazirmatn', sans-serif;
      font-size: 16px; font-weight: 400; line-height: 24px;
      direction: rtl; text-align: right;
      word-break: break-word; white-space: pre-wrap;
      overflow: hidden;
    }