/* TopLink UI V2 - global premium shell */
:root{
  --tl-bg:#06152e;
  --tl-bg2:#081b3a;
  --tl-panel:rgba(9,28,65,.82);
  --tl-panel2:rgba(13,40,88,.72);
  --tl-line:rgba(79,154,255,.28);
  --tl-line-soft:rgba(255,255,255,.10);
  --tl-text:#eef7ff;
  --tl-muted:#9fb9de;
  --tl-brand:#00aaff;
  --tl-brand2:#37e8ff;
  --tl-primary:#3d8cff;
  --tl-ok:#28d17c;
  --tl-bad:#ff5b6b;
  --tl-warn:#ffc857;
  --tl-radius:18px;
  --tl-radius-sm:13px;
  --tl-shadow:0 18px 50px rgba(0,0,0,.32);
  --tl-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
}

html,body{
  background:
    radial-gradient(900px 520px at 68% -10%, rgba(0,170,255,.18), transparent 62%),
    radial-gradient(800px 500px at 5% 0%, rgba(55,232,255,.10), transparent 60%),
    linear-gradient(180deg,var(--tl-bg),#041126) !important;
  color:var(--tl-text) !important;
  font-family:var(--tl-font) !important;
}

body{
  min-height:100vh;
}

a{color:inherit}

.sidebar,
aside.sidebar{
  background:linear-gradient(180deg,rgba(8,26,62,.92),rgba(5,16,39,.94)) !important;
  border-left:1px solid var(--tl-line) !important;
  box-shadow:-18px 0 45px rgba(0,0,0,.18);
}

.brand,
.tl-brand,
.logo,
[class*="brand"]{
  letter-spacing:.2px;
}

.brand,
.sidebar .brand{
  color:var(--tl-text) !important;
  font-weight:950 !important;
  direction:ltr !important;
  text-align:left !important;
}

.brand .dot,
.brand:after{
  background:var(--tl-brand) !important;
  box-shadow:0 0 0 5px rgba(0,170,255,.16),0 0 22px rgba(55,232,255,.45) !important;
}

.nav a,
.sidebar a,
button,
.btn{
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.nav a,
.sidebar .nav a{
  border:1px solid var(--tl-line-soft) !important;
  background:rgba(255,255,255,.045) !important;
  color:var(--tl-muted) !important;
  border-radius:14px !important;
  font-weight:900 !important;
}

.nav a:hover,
.sidebar .nav a:hover,
.nav a.active,
.sidebar .nav a.active{
  background:linear-gradient(135deg,rgba(61,140,255,.26),rgba(55,232,255,.08)) !important;
  border-color:rgba(61,140,255,.52) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(0,90,255,.14);
}

.btn,
button:not(.unstyled){
  border-radius:14px !important;
  border:1px solid var(--tl-line-soft) !important;
  background:rgba(255,255,255,.065) !important;
  color:var(--tl-text) !important;
  font-weight:900 !important;
}

.btn:hover,
button:not(.unstyled):hover{
  transform:translateY(-1px);
  border-color:rgba(61,140,255,.42) !important;
  background:rgba(61,140,255,.12) !important;
}

.btn.primary,
button.primary,
.btn.ok,
.btn.green{
  background:linear-gradient(135deg,#227dff,#35c7ff) !important;
  border-color:rgba(99,190,255,.7) !important;
  color:#fff !important;
  box-shadow:0 10px 25px rgba(0,120,255,.18);
}

.btn.danger,
.btn.red,
button.danger{
  background:rgba(255,91,107,.14) !important;
  border-color:rgba(255,91,107,.38) !important;
  color:#ffd7dc !important;
}

.topbar,
.panel,
.card,
.stat,
.modalBox,
.box,
section,
.main-card,
.tableWrap,
.cardsTopbarUnified,
.tl-card{
  border-color:var(--tl-line) !important;
  background:linear-gradient(180deg,var(--tl-panel),rgba(7,23,55,.70)) !important;
  box-shadow:var(--tl-shadow);
  border-radius:var(--tl-radius) !important;
}

input,
select,
textarea{
  background:rgba(4,15,38,.70) !important;
  border:1px solid var(--tl-line-soft) !important;
  color:var(--tl-text) !important;
  border-radius:13px !important;
  outline:none !important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(55,232,255,.60) !important;
  box-shadow:0 0 0 4px rgba(0,170,255,.12) !important;
}

table{
  border-collapse:separate !important;
  border-spacing:0 !important;
}

th{
  color:#dff2ff !important;
  background:rgba(38,116,211,.18) !important;
}

td,th{
  border-color:rgba(255,255,255,.08) !important;
}

.modal,
.tl-modal{
  backdrop-filter:blur(12px);
}

.tl-v2-floating{
  position:fixed;
  top:14px;
  left:14px;
  z-index:99999;
  display:flex;
  align-items:center;
  gap:8px;
  direction:ltr;
}

.tl-v2-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid rgba(79,154,255,.35);
  background:rgba(7,23,55,.78);
  color:#eef7ff;
  border-radius:999px;
  padding:8px 11px;
  box-shadow:0 12px 32px rgba(0,0,0,.22);
  backdrop-filter:blur(12px);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  user-select:none;
}

.tl-v2-pill:hover{
  border-color:rgba(55,232,255,.65);
  background:rgba(16,50,106,.88);
}

.tl-v2-lang b{
  color:var(--tl-brand2);
}

.tl-v2-telegram{
  text-decoration:none;
  display:none;
}

.tl-v2-telegram.show{
  display:inline-flex;
}

.tl-v2-mobile-menu{
  display:none;
}

.tl-v2-mobile-backdrop{
  display:none;
}

@media (max-width: 900px){
  html,body{
    overflow-x:hidden !important;
  }

  .tl-v2-floating{
    top:10px;
    left:10px;
  }

  .tl-v2-pill{
    padding:7px 10px;
    font-size:12px;
  }

  .tl-v2-mobile-menu{
    display:inline-flex;
  }

  .app,
  body > .app{
    display:block !important;
    min-height:100vh;
  }

  .sidebar,
  aside.sidebar{
    position:fixed !important;
    top:0 !important;
    bottom:0 !important;
    right:0 !important;
    width:min(82vw,310px) !important;
    max-width:310px !important;
    z-index:99990 !important;
    transform:translateX(110%);
    transition:transform .22s ease !important;
    overflow:auto !important;
    border-left:1px solid var(--tl-line) !important;
    border-bottom:none !important;
  }

  html[dir="ltr"] .sidebar,
  html[dir="ltr"] aside.sidebar{
    right:auto !important;
    left:0 !important;
    transform:translateX(-110%);
    border-left:none !important;
    border-right:1px solid var(--tl-line) !important;
  }

  body.tl-v2-menu-open .sidebar,
  body.tl-v2-menu-open aside.sidebar{
    transform:translateX(0) !important;
  }

  .tl-v2-mobile-backdrop{
    position:fixed;
    inset:0;
    z-index:99980;
    background:rgba(0,0,0,.48);
    backdrop-filter:blur(4px);
  }

  body.tl-v2-menu-open .tl-v2-mobile-backdrop{
    display:block;
  }

  .content,
  main,
  .main,
  .page,
  .container,
  .wrap{
    width:100% !important;
    max-width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .topbar,
  .cardsTopbarUnified{
    margin-top:48px !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }

  .grid,
  .stats,
  .cards,
  .row,
  .cardsGrid{
    grid-template-columns:1fr !important;
  }

  .row{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .field,
  .field.small{
    width:100% !important;
    min-width:0 !important;
    flex:auto !important;
  }

  .btn,
  button{
    min-height:42px;
    white-space:normal !important;
  }

  .actions,
  .toolbar,
  .action-row{
    display:flex !important;
    overflow-x:auto !important;
    gap:8px !important;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }

  .actions .btn,
  .toolbar .btn,
  .action-row .btn{
    flex:0 0 auto;
  }

  .modal,
  .modal.show{
    align-items:stretch !important;
    justify-content:center !important;
    padding:10px !important;
  }

  .modalBox,
  .modal .box,
  .box{
    width:100% !important;
    max-width:100% !important;
    max-height:92vh !important;
    overflow:auto !important;
    border-radius:20px !important;
  }

  table{
    min-width:720px;
  }

  .tableWrap,
  .table-like,
  .tableLike,
  .table-responsive{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
}

/* ===== TopLink UI V2 first cleanup ===== */

/* خلي زر اللغة صغير ومايضربش الهيدر */
.tl-v2-floating{
  top:102px !important;
  left:14px !important;
  z-index:9000 !important;
}
.tl-v2-pill{
  min-height:auto !important;
  padding:7px 10px !important;
  line-height:1 !important;
  font-size:12px !important;
}

/* لا تبوظ مكان تسجيل الخروج */
.sidebar .footer,
.sidebar .logout,
aside.sidebar .footer,
aside.sidebar .logout,
.logout{
  margin-top:auto !important;
  background:transparent !important;
  box-shadow:none !important;
  border-color:transparent !important;
}

/* مودالات وقوائم أوضح، بلاش شفافية زيادة */
.modalBox,
.modal .box,
.box,
.dropdown,
.menu,
.popover,
[role="dialog"]{
  background:linear-gradient(180deg,rgba(10,31,72,.98),rgba(6,20,48,.98)) !important;
  border:1px solid rgba(79,154,255,.34) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.52) !important;
  backdrop-filter:none !important;
}

/* إضافة باقة / select / option أوضح */
select,
option,
input,
textarea{
  background-color:#071a3a !important;
  color:#eef7ff !important;
}
option{
  color:#eef7ff !important;
  background:#071a3a !important;
}

/* قلل تأثير section العام عشان مايفرش كل أجزاء الصفحة ككروت شفافة */
section:not(.card):not(.panel):not(.main-card):not(.tl-card){
  box-shadow:none !important;
}

/* معاينة تصميم الكارت: صغر مساحة العرض وشيل الكلام الطويل */
#designModal .previewStage,
#cardDesignModal .previewStage,
.modal .previewStage,
.previewStage.freePreview{
  min-height:0 !important;
  height:auto !important;
  padding:14px !important;
  justify-content:center !important;
  align-items:center !important;
}

#designModal .previewStage .a4Hint,
#cardDesignModal .previewStage .a4Hint,
.previewStage .a4Hint{
  display:none !important;
}

#designModal .previewStage > p,
#cardDesignModal .previewStage > p,
.previewStage > p{
  display:none !important;
}

.designBoxCompact,
.modalBox.designBoxCompact{
  max-height:86vh !important;
}

.designFree,
.design{
  align-items:start !important;
}

.design-card-stage,
.voucher{
  margin:auto !important;
}

/* خلي أزرار التحكم أوضح */
button,
.btn{
  text-shadow:none !important;
}
.btn.primary,
button.primary{
  color:#fff !important;
}

/* حل ظهور خلفية اللي ورا المودال زيادة */
.modal.show,
.modal{
  background:rgba(0,0,0,.72) !important;
}

/* موبايل */
@media (max-width:900px){
  .tl-v2-floating{
    top:10px !important;
    left:10px !important;
  }
  .modalBox,
  .modal .box,
  .box{
    background:linear-gradient(180deg,rgba(10,31,72,.99),rgba(6,20,48,.99)) !important;
  }
  #designModal .previewStage,
  #cardDesignModal .previewStage,
  .modal .previewStage,
  .previewStage.freePreview{
    padding:10px !important;
  }
}

/* ===== Final quick restore: card design back + dim bright buttons ===== */

/* اخفاء زر EN مؤقتًا بالكامل */
#tlV2LangBtn,
.tl-v2-lang,
#tlV2Floating{
  display:none !important;
}

/* إلغاء اللوجو التجريبي الغلط */
.sidebar .brand::before,
aside.sidebar .brand::before{
  content:none !important;
  display:none !important;
}

/* ارجع البراند النصي مؤقتًا لحد ما ناخد لوجو صفحة العميل الصحيح */
.sidebar .brand,
aside.sidebar .brand{
  font-size:20px !important;
  line-height:1.2 !important;
  height:auto !important;
  padding:8px 12px !important;
  display:block !important;
  text-align:left !important;
  direction:ltr !important;
}

/* طفي كل الأزرار المنورة زيادة وخليها كلها نفس الدرجة */
html body .btn,
html body button,
html body a.btn,
html body .btn.primary,
html body button.primary,
html body a.btn.primary,
html body .btn.ok,
html body .btn.green,
html body button.ok,
html body button.green,
html body [class*="primary"],
html body [class*="download"],
html body #downloadClientBtn,
html body #downloadAppBtn,
html body #createGroupBtn,
html body #createAccountBtn{
  background:rgba(255,255,255,.075) !important;
  border:1px solid rgba(120,170,245,.28) !important;
  color:#eef7ff !important;
  box-shadow:none !important;
  filter:none !important;
  text-shadow:none !important;
  opacity:1 !important;
}

html body .btn:hover,
html body button:hover,
html body a.btn:hover,
html body .btn.primary:hover,
html body button.primary:hover,
html body a.btn.primary:hover,
html body [class*="primary"]:hover{
  background:rgba(61,140,255,.14) !important;
  border-color:rgba(80,170,255,.46) !important;
  color:#fff !important;
  box-shadow:none !important;
  transform:none !important;
}

html body .btn:active,
html body button:active,
html body a.btn:active,
html body .btn:focus,
html body button:focus,
html body a.btn:focus{
  background:rgba(61,140,255,.14) !important;
  border-color:rgba(80,170,255,.46) !important;
  color:#fff !important;
  box-shadow:none !important;
  transform:none !important;
}

/* زر الحذف يفضل أحمر هادي مش منور */
html body .btn.danger,
html body .btn.red,
html body button.danger,
html body button.red{
  background:rgba(255,91,107,.13) !important;
  border-color:rgba(255,91,107,.36) !important;
  color:#ffdce1 !important;
}

/* رجوع تصميم الكارت القديم بالظبط: المعاينة شمال/يمين الإعدادات زي ما كانت */
.designBoxCompact,
.modalBox.designBoxCompact{
  width:min(1080px,96vw) !important;
  max-height:90vh !important;
  overflow:hidden !important;
  padding:16px !important;
}

.designFree{
  grid-template-columns:minmax(0,1fr) 330px !important;
  gap:16px !important;
  align-items:start !important;
}

.compactControls{
  max-height:72vh !important;
  overflow:auto !important;
  padding-left:4px !important;
  overflow-x:hidden !important;
  display:block !important;
  max-width:none !important;
}

.freePreview{
  min-height:420px !important;
  justify-content:flex-start !important;
  width:auto !important;
}

.design-card-stage{
  touch-action:none !important;
  max-width:100% !important;
}

.previewStage .a4Hint,
.freePreview .a4Hint,
.previewStage p:not(.muted),
.freePreview p:not(.muted){
  display:none !important;
}

@media(max-width:1100px){
  .designFree{
    grid-template-columns:1fr !important;
  }
  .designBoxCompact{
    max-height:92vh !important;
    overflow:auto !important;
  }
  .compactControls{
    max-height:none !important;
    padding-left:0 !important;
  }
  .freePreview{
    min-height:300px !important;
  }
}

/* ===== TopLink scoped card designer layout - safe: no zoom/transform on cardStage ===== */
/* يطبق فقط داخل مودال تصميم الكارت في /cards و /reseller/cards */

#modalDesign .modalBox.designBoxCompact{
  width:min(1120px,96vw) !important;
  max-height:92vh !important;
  overflow:auto !important;
  padding:16px !important;
}

#modalDesign .design.designFree{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  align-items:start !important;
}

#modalDesign .previewStage.freePreview{
  min-height:240px !important;
  padding:14px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  overflow:visible !important;
}

/* ممنوع تصغير بصري للكارت: نخليه بحجمه الحقيقي عشان السحب يفضل مظبوط */
#modalDesign #cardStage.design-card-stage{
  touch-action:none !important;
  max-width:100% !important;
  margin:0 auto !important;
  transform:none !important;
  scale:1 !important;
  zoom:1 !important;
}

#modalDesign .designControls.compactControls{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(190px,1fr)) !important;
  gap:10px !important;
  max-height:none !important;
  overflow:visible !important;
  padding:0 !important;
  width:100% !important;
}

#modalDesign .designControls.compactControls > .controlBox{
  min-width:0 !important;
  padding:10px !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

#modalDesign .designControls.compactControls > .row{
  grid-column:1 / -1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

#modalDesign .controlBox .two,
#modalDesign .controlBox .checks{
  gap:8px !important;
}

#modalDesign .controlBox label{
  margin-bottom:5px !important;
}

#modalDesign .a4Hint{
  display:none !important;
}

@media(max-width:1050px){
  #modalDesign .designControls.compactControls{
    grid-template-columns:repeat(2,minmax(190px,1fr)) !important;
  }
}

@media(max-width:620px){
  #modalDesign .designControls.compactControls{
    grid-template-columns:1fr !important;
  }
}

/* ===== TopLink card designer responsive safe layout v15 ===== */
/* Scoped only to #modalDesign. No zoom/transform on #cardStage. */

#modalDesign{
  padding:10px !important;
  align-items:center !important;
  justify-content:center !important;
}

#modalDesign .modalBox.designBoxCompact{
  width:min(1120px,96vw) !important;
  max-width:96vw !important;
  max-height:92vh !important;
  overflow:auto !important;
  padding:16px !important;
  border-radius:18px !important;
}

#modalDesign .modalHead{
  position:sticky !important;
  top:0 !important;
  z-index:20 !important;
  background:linear-gradient(180deg,rgba(10,31,72,.98),rgba(8,25,58,.96)) !important;
  padding:4px 0 10px !important;
}

#modalDesign .design.designFree{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  align-items:start !important;
}

#modalDesign .previewStage.freePreview{
  min-height:220px !important;
  padding:12px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

/* مهم: لا تصغير بصري ولا transform للكارت، السحب يعتمد على getBoundingClientRect */
#modalDesign #cardStage.design-card-stage{
  touch-action:none !important;
  margin:0 auto !important;
  transform:none !important;
  scale:1 !important;
  zoom:1 !important;
  flex:0 0 auto !important;
}

#modalDesign .designControls.compactControls{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(180px,1fr)) !important;
  gap:10px !important;
  max-height:none !important;
  overflow:visible !important;
  padding:0 !important;
  width:100% !important;
}

#modalDesign .designControls.compactControls > .controlBox{
  min-width:0 !important;
  padding:10px !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

#modalDesign .designControls.compactControls > .row{
  grid-column:1 / -1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  padding-bottom:4px !important;
}

#modalDesign .controlBox .two{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}

#modalDesign .controlBox .checks{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}

#modalDesign .checkTile{
  min-width:0 !important;
  padding:10px !important;
}

#modalDesign input,
#modalDesign select{
  min-height:42px !important;
}

#modalDesign .a4Hint{
  display:none !important;
}

#modalDesign #tlTemplateButtonsBox .tl-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

#modalDesign #tlTemplateButtonsBox .tl-card-template-btn{
  height:64px !important;
}

/* تابلت */
@media(max-width:1050px){
  #modalDesign .designControls.compactControls{
    grid-template-columns:repeat(2,minmax(180px,1fr)) !important;
  }
}

/* موبايل */
@media(max-width:680px){
  #modalDesign{
    padding:0 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
  }

  #modalDesign .modalBox.designBoxCompact{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    padding:10px !important;
  }

  #modalDesign .modalHead{
    padding:8px 0 10px !important;
  }

  #modalDesign .modalHead h3{
    font-size:18px !important;
  }

  #modalDesign .previewStage.freePreview{
    min-height:190px !important;
    padding:10px !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
  }

  #modalDesign #cardStage.design-card-stage{
    margin:0 auto !important;
  }

  #modalDesign .designControls.compactControls{
    grid-template-columns:1fr !important;
    gap:9px !important;
  }

  #modalDesign .controlBox .two,
  #modalDesign .controlBox .checks{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #modalDesign #tlTemplateButtonsBox .tl-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #modalDesign #tlTemplateButtonsBox .tl-card-template-btn{
    height:58px !important;
  }

  #modalDesign .designControls.compactControls > .row{
    position:sticky !important;
    bottom:0 !important;
    z-index:15 !important;
    background:linear-gradient(180deg,rgba(7,18,42,.88),rgba(7,18,42,.98)) !important;
    padding:10px 0 2px !important;
  }
}

/* موبايل صغير جدًا */
@media(max-width:390px){
  #modalDesign .controlBox .two,
  #modalDesign .controlBox .checks{
    grid-template-columns:1fr !important;
  }

  #modalDesign .previewStage.freePreview{
    align-items:flex-start !important;
  }
}

/* ===== TopLink card designer final compact clean v16 ===== */
/* هدفه: مودال أصغر + بدون مساحة فاضية + بدون سكرول داخلي على الديسكتوب قدر الإمكان */
/* Scoped فقط داخل #modalDesign وبدون أي zoom/transform على #cardStage */

#modalDesign{
  padding:10px !important;
  align-items:center !important;
  justify-content:center !important;
}

#modalDesign .modalBox.designBoxCompact{
  width:min(1040px,95vw) !important;
  max-width:95vw !important;
  max-height:88vh !important;
  overflow:hidden !important;
  padding:14px !important;
  border-radius:18px !important;
}

#modalDesign .modalHead{
  margin-bottom:10px !important;
  padding-bottom:4px !important;
}

#modalDesign .modalHead h3{
  font-size:18px !important;
  margin:0 !important;
}

/* ديسكتوب: المعاينة جنب الإعدادات لتقليل الارتفاع */
#modalDesign .design.designFree{
  display:grid !important;
  grid-template-columns:minmax(360px,430px) minmax(0,1fr) !important;
  gap:12px !important;
  align-items:start !important;
  max-height:calc(88vh - 72px) !important;
  overflow:hidden !important;
}

#modalDesign .previewStage.freePreview{
  min-height:250px !important;
  height:100% !important;
  padding:12px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  overflow:hidden !important;
}

/* مهم جدًا: لا نلمس أبعاد السحب بصريًا */
#modalDesign #cardStage.design-card-stage{
  touch-action:none !important;
  margin:0 auto !important;
  transform:none !important;
  scale:1 !important;
  zoom:1 !important;
  flex:0 0 auto !important;
  max-width:100% !important;
}

#modalDesign .previewStage .a4Hint,
#modalDesign .freePreview .a4Hint{
  display:none !important;
}

#modalDesign .designControls.compactControls{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(220px,1fr)) !important;
  gap:10px !important;
  align-content:start !important;
  align-items:start !important;
  max-height:none !important;
  overflow:visible !important;
  padding:0 !important;
}

/* خلي أول 3 بوكسات صغيرة ومنظمة */
#modalDesign .designControls.compactControls > .controlBox{
  min-width:0 !important;
  padding:10px !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

/* بوكس الخلفية والقوالب ياخد عرض أكبر */
#modalDesign .designControls.compactControls > .controlBox:nth-of-type(4){
  grid-column:1 / -1 !important;
}

/* أزرار الحفظ والاسترجاع في صف كامل */
#modalDesign .designControls.compactControls > .row{
  grid-column:1 / -1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin-top:0 !important;
}

#modalDesign .controlBox b{
  display:block !important;
  margin-bottom:8px !important;
}

#modalDesign .controlBox .two{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}

#modalDesign .controlBox .checks{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}

#modalDesign .checkTile{
  min-width:0 !important;
  padding:9px 10px !important;
}

#modalDesign label{
  margin-bottom:4px !important;
}

#modalDesign input,
#modalDesign select{
  min-height:40px !important;
  padding-top:9px !important;
  padding-bottom:9px !important;
}

#modalDesign input[type="file"]{
  min-height:auto !important;
  padding:7px 8px !important;
}

/* القوالب الجاهزة داخل نفس بوكس الخلفية بشكل أهدى وأصغر */
#modalDesign #tlTemplateButtonsBox{
  margin-top:8px !important;
  padding:8px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.03) !important;
}

#modalDesign #tlTemplateButtonsBox .tl-title{
  margin-bottom:6px !important;
  font-size:14px !important;
}

#modalDesign #tlTemplateButtonsBox .tl-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:6px !important;
}

#modalDesign #tlTemplateButtonsBox .tl-card-template-btn{
  height:52px !important;
  border-radius:10px !important;
}

/* خلي choose file فوق ثم التصميمات الجاهزة تحته بشكل طبيعي */
#modalDesign #bgFile{
  margin-bottom:8px !important;
}

/* تابلت */
@media(max-width:980px){
  #modalDesign .modalBox.designBoxCompact{
    width:min(980px,96vw) !important;
    max-height:92vh !important;
    overflow:auto !important;
  }

  #modalDesign .design.designFree{
    grid-template-columns:1fr !important;
    max-height:none !important;
    overflow:visible !important;
  }

  #modalDesign .previewStage.freePreview{
    min-height:210px !important;
    overflow:auto !important;
  }

  #modalDesign .designControls.compactControls{
    grid-template-columns:repeat(2,minmax(180px,1fr)) !important;
  }
}

/* موبايل */
@media(max-width:640px){
  #modalDesign{
    padding:0 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
  }

  #modalDesign .modalBox.designBoxCompact{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    overflow:auto !important;
    padding:10px !important;
  }

  #modalDesign .design.designFree{
    grid-template-columns:1fr !important;
    gap:10px !important;
    max-height:none !important;
    overflow:visible !important;
  }

  #modalDesign .previewStage.freePreview{
    min-height:185px !important;
    padding:10px !important;
    overflow:auto !important;
  }

  #modalDesign .designControls.compactControls{
    grid-template-columns:1fr !important;
    gap:9px !important;
  }

  #modalDesign .designControls.compactControls > .controlBox:nth-of-type(4){
    grid-column:auto !important;
  }

  #modalDesign .controlBox .two,
  #modalDesign .controlBox .checks{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #modalDesign #tlTemplateButtonsBox .tl-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #modalDesign #tlTemplateButtonsBox .tl-card-template-btn{
    height:58px !important;
  }
}

/* موبايل صغير جدًا */
@media(max-width:390px){
  #modalDesign .controlBox .two,
  #modalDesign .controlBox .checks{
    grid-template-columns:1fr !important;
  }
}

/* ===== TopLink card designer final polish v17 ===== */
/* Scoped to #modalDesign only. No zoom/transform on #cardStage. */

#modalDesign .modalBox.designBoxCompact{
  width:min(1030px,94vw) !important;
  max-width:94vw !important;
  max-height:86vh !important;
  overflow:hidden !important;
  padding:14px !important;
}

#modalDesign .design.designFree{
  grid-template-columns:minmax(390px,430px) minmax(0,1fr) !important;
  gap:12px !important;
  max-height:calc(86vh - 70px) !important;
  overflow:hidden !important;
}

#modalDesign .previewStage.freePreview{
  min-height:0 !important;
  height:100% !important;
  max-height:calc(86vh - 82px) !important;
  padding:12px !important;
  overflow:hidden !important;
  justify-content:flex-start !important;
}

#modalDesign #cardStage.design-card-stage{
  transform:none !important;
  scale:1 !important;
  zoom:1 !important;
  touch-action:none !important;
  margin:0 auto !important;
}

#modalDesign .designControls.compactControls{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(230px,1fr)) !important;
  grid-auto-rows:minmax(158px,auto) !important;
  gap:10px !important;
  overflow:visible !important;
  align-content:start !important;
  padding:0 !important;
}

/* ترتيب البوكسات */
#modalDesign .designControls.compactControls > .controlBox:nth-of-type(1){
  order:1 !important;
}
#modalDesign .designControls.compactControls > .controlBox:nth-of-type(2){
  order:2 !important;
}
#modalDesign .designControls.compactControls > .controlBox:nth-of-type(3){
  order:3 !important;
}
#modalDesign .designControls.compactControls > .controlBox:nth-of-type(4){
  order:4 !important;
  grid-column:auto !important;
}

/* كل المربعات شبه بعض */
#modalDesign .designControls.compactControls > .controlBox{
  min-height:158px !important;
  height:auto !important;
  padding:10px !important;
  border-radius:14px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}

/* تصميمات جاهزة مع رفع التصميم */
#modalDesign .designControls.compactControls > .controlBox:nth-of-type(4){
  min-height:158px !important;
}

#modalDesign .controlBox b{
  font-size:15px !important;
  margin-bottom:7px !important;
}

#modalDesign .controlBox label{
  font-size:12px !important;
  margin-bottom:4px !important;
}

#modalDesign .controlBox .two,
#modalDesign .controlBox .checks{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}

#modalDesign .checkTile{
  min-height:52px !important;
  padding:8px 9px !important;
  align-items:center !important;
  justify-content:flex-start !important;
}

#modalDesign input,
#modalDesign select{
  min-height:38px !important;
  padding:8px 10px !important;
}

#modalDesign input[type="file"]{
  min-height:36px !important;
  padding:6px 8px !important;
}

/* خلي القوالب داخل نفس مربع الخلفية والقوالب */
#modalDesign #tlTemplateButtonsBox{
  margin-top:8px !important;
  padding:7px !important;
  border-radius:12px !important;
  flex:1 1 auto !important;
}

#modalDesign #tlTemplateButtonsBox .tl-title{
  font-size:14px !important;
  margin-bottom:5px !important;
  text-align:right !important;
}

#modalDesign #tlTemplateButtonsBox .tl-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:6px !important;
}

#modalDesign #tlTemplateButtonsBox .tl-card-template-btn{
  height:49px !important;
  min-height:49px !important;
}

/* أزرار الحفظ يمين الصفحة */
#modalDesign .designControls.compactControls > .row{
  order:5 !important;
  grid-column:1 / -1 !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:0 !important;
  min-height:42px !important;
  padding:0 !important;
}

#modalDesign #designHint{
  font-weight:900 !important;
  color:#7dd3fc !important;
  padding-inline-start:8px !important;
}

/* تابلت */
@media(max-width:980px){
  #modalDesign .modalBox.designBoxCompact{
    width:min(980px,96vw) !important;
    max-height:92vh !important;
    overflow:auto !important;
  }

  #modalDesign .design.designFree{
    grid-template-columns:1fr !important;
    max-height:none !important;
    overflow:visible !important;
  }

  #modalDesign .previewStage.freePreview{
    height:auto !important;
    max-height:none !important;
    min-height:210px !important;
    overflow:auto !important;
  }

  #modalDesign .designControls.compactControls{
    grid-template-columns:repeat(2,minmax(190px,1fr)) !important;
    grid-auto-rows:auto !important;
  }
}

/* موبايل */
@media(max-width:640px){
  #modalDesign .modalBox.designBoxCompact{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow:auto !important;
    border-radius:0 !important;
  }

  #modalDesign .designControls.compactControls{
    grid-template-columns:1fr !important;
  }

  #modalDesign .designControls.compactControls > .controlBox{
    min-height:auto !important;
  }

  #modalDesign #tlTemplateButtonsBox .tl-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #modalDesign #tlTemplateButtonsBox .tl-card-template-btn{
    height:56px !important;
  }
}

/* ===== TopLink real clean card modal layout v18 ===== */
/* Scoped only to #modalDesign. No transform/zoom/scale on #cardStage. */

#modalDesign .modalBox.designBoxCompact{
  width:min(1000px,93vw) !important;
  max-width:93vw !important;
  max-height:84vh !important;
  overflow:hidden !important;
  padding:14px !important;
}

#modalDesign .modalHead{
  margin-bottom:8px !important;
}

#modalDesign .design.designFree{
  display:grid !important;
  grid-template-columns:minmax(390px,430px) minmax(0,1fr) !important;
  gap:12px !important;
  max-height:calc(84vh - 62px) !important;
  overflow:hidden !important;
  align-items:stretch !important;
}

#modalDesign .previewStage.freePreview{
  height:100% !important;
  min-height:0 !important;
  max-height:calc(84vh - 74px) !important;
  padding:12px !important;
  overflow:hidden !important;
  justify-content:flex-start !important;
}

#modalDesign #cardStage.design-card-stage{
  transform:none !important;
  scale:1 !important;
  zoom:1 !important;
  touch-action:none !important;
  margin:0 auto !important;
  flex:0 0 auto !important;
}

/* يمين المودال: شبكة ثابتة 2×2 + أزرار */
#modalDesign .designControls.compactControls{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(230px,1fr)) !important;
  grid-template-rows:auto auto auto !important;
  gap:10px !important;
  overflow:hidden !important;
  align-content:start !important;
  padding:0 !important;
}

/* كل المربعات نفس الشكل والحجم */
#modalDesign .designControls.compactControls > .controlBox{
  min-height:150px !important;
  height:150px !important;
  padding:10px !important;
  border-radius:14px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}

/* ترتيب ثابت */
#modalDesign .designControls.compactControls > .controlBox:nth-of-type(1){
  order:1 !important;
}
#modalDesign .designControls.compactControls > .controlBox:nth-of-type(2){
  order:2 !important;
}
#modalDesign .designControls.compactControls > .controlBox:nth-of-type(3){
  order:3 !important;
}
#modalDesign .designControls.compactControls > .tl-bg-templates-box{
  order:4 !important;
}

/* منع ظهور بوكسات قديمة متكررة خارج التحكم */
#modalDesign .designControls.compactControls > #tlTemplateButtonsBox{
  display:none !important;
}

#modalDesign .controlBox b{
  display:block !important;
  font-size:15px !important;
  margin-bottom:7px !important;
}

#modalDesign .controlBox label{
  font-size:12px !important;
  margin-bottom:4px !important;
}

#modalDesign .controlBox .two,
#modalDesign .controlBox .checks{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}

#modalDesign .checkTile{
  min-height:47px !important;
  padding:7px 9px !important;
}

#modalDesign input,
#modalDesign select{
  min-height:36px !important;
  padding:7px 9px !important;
}

#modalDesign input[type="file"]{
  min-height:34px !important;
  padding:5px 7px !important;
  margin-bottom:6px !important;
}

/* بوكس خلفية وقوالب: Choose File فوق والتصميمات تحته */
#modalDesign .tl-bg-templates-box{
  grid-column:auto !important;
}

#modalDesign .tl-bg-templates-box #tlTemplateButtonsBox{
  display:block !important;
  margin-top:5px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  flex:1 1 auto !important;
  overflow:hidden !important;
}

#modalDesign .tl-bg-templates-box #tlTemplateButtonsBox .tl-title{
  font-size:14px !important;
  line-height:1.2 !important;
  margin:0 0 5px !important;
  text-align:right !important;
}

#modalDesign .tl-bg-templates-box #tlTemplateButtonsBox .tl-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:5px !important;
}

#modalDesign .tl-bg-templates-box #tlTemplateButtonsBox .tl-card-template-btn{
  height:43px !important;
  min-height:43px !important;
  border-radius:9px !important;
}

/* أزرار الحفظ والاسترجاع على يمين الصفحة وتحت البوكسات */
#modalDesign .designControls.compactControls > .row{
  order:5 !important;
  grid-column:1 / -1 !important;
  display:flex !important;
  flex-direction:row !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:10px !important;
  min-height:38px !important;
  margin:0 !important;
  padding:0 !important;
}

#modalDesign #designHint{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:34px !important;
  min-height:28px !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  font-weight:900 !important;
  color:#bff7ff !important;
  background:transparent !important;
}

#modalDesign #designHint.tl-done{
  background:rgba(34,211,238,.14) !important;
  border:1px solid rgba(34,211,238,.28) !important;
}

/* تابلت */
@media(max-width:980px){
  #modalDesign .modalBox.designBoxCompact{
    width:min(980px,96vw) !important;
    max-height:92vh !important;
    overflow:auto !important;
  }

  #modalDesign .design.designFree{
    grid-template-columns:1fr !important;
    max-height:none !important;
    overflow:visible !important;
  }

  #modalDesign .previewStage.freePreview{
    height:auto !important;
    min-height:210px !important;
    max-height:none !important;
    overflow:auto !important;
  }

  #modalDesign .designControls.compactControls{
    overflow:visible !important;
    grid-template-columns:repeat(2,minmax(190px,1fr)) !important;
  }
}

/* موبايل */
@media(max-width:640px){
  #modalDesign .modalBox.designBoxCompact{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow:auto !important;
    border-radius:0 !important;
  }

  #modalDesign .designControls.compactControls{
    grid-template-columns:1fr !important;
  }

  #modalDesign .designControls.compactControls > .controlBox{
    height:auto !important;
    min-height:auto !important;
  }

  #modalDesign .tl-bg-templates-box #tlTemplateButtonsBox .tl-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #modalDesign .tl-bg-templates-box #tlTemplateButtonsBox .tl-card-template-btn{
    height:56px !important;
  }
}

/* ===== TopLink final close card modal v19 ===== */
/* الهدف: الكلام يظهر مظبوط + التصميمات الجاهزة داخل مربع المعاينة */

#modalDesign .modalBox.designBoxCompact{
  width:min(1010px,94vw) !important;
  max-width:94vw !important;
  max-height:86vh !important;
  overflow:hidden !important;
  padding:14px !important;
}

#modalDesign .design.designFree{
  display:grid !important;
  grid-template-columns:minmax(410px,450px) minmax(0,1fr) !important;
  gap:12px !important;
  max-height:calc(86vh - 68px) !important;
  overflow:hidden !important;
  align-items:stretch !important;
}

#modalDesign .previewStage.freePreview{
  min-height:0 !important;
  height:100% !important;
  max-height:calc(86vh - 82px) !important;
  padding:12px !important;
  overflow:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
}

#modalDesign #cardStage.design-card-stage{
  transform:none !important;
  scale:1 !important;
  zoom:1 !important;
  touch-action:none !important;
  margin:0 auto !important;
  flex:0 0 auto !important;
}

#modalDesign #stageDim{
  margin-bottom:2px !important;
}

/* التصميمات الجاهزة داخل مربع المعاينة */
#modalDesign .previewStage.freePreview #tlTemplateButtonsBox{
  width:100% !important;
  margin-top:6px !important;
  padding-top:8px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  background:transparent !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-title{
  font-size:14px !important;
  text-align:right !important;
  margin-bottom:6px !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:6px !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn{
  height:54px !important;
  min-height:54px !important;
  border-radius:10px !important;
}

/* يمين: المربعات */
#modalDesign .designControls.compactControls{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(230px,1fr)) !important;
  grid-auto-rows:auto !important;
  gap:10px !important;
  overflow:hidden !important;
  align-content:start !important;
  padding:0 !important;
}

#modalDesign .designControls.compactControls > .controlBox{
  min-height:172px !important;
  height:auto !important;
  padding:10px !important;
  border-radius:14px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}

#modalDesign .designControls.compactControls > .tl-bg-upload-box{
  min-height:118px !important;
}

#modalDesign .controlBox b{
  display:block !important;
  font-size:15px !important;
  line-height:1.2 !important;
  margin-bottom:8px !important;
}

#modalDesign .controlBox label{
  font-size:12px !important;
  line-height:1.25 !important;
  margin-bottom:4px !important;
}

#modalDesign .controlBox .two,
#modalDesign .controlBox .checks{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}

#modalDesign .checkTile{
  min-height:46px !important;
  padding:8px 10px !important;
  font-size:12px !important;
  line-height:1.2 !important;
  white-space:normal !important;
  overflow:hidden !important;
}

#modalDesign .checkTile.wide{
  grid-column:1 / -1 !important;
}

#modalDesign input,
#modalDesign select{
  min-height:38px !important;
  padding:8px 10px !important;
  font-size:13px !important;
}

#modalDesign input[type="file"]{
  min-height:36px !important;
  padding:6px 8px !important;
}

#modalDesign .tl-bg-upload-box #tlTemplateButtonsBox{
  display:none !important;
}

/* الأزرار */
#modalDesign .designControls.compactControls > .row{
  grid-column:1 / -1 !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:10px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:0 !important;
}

#modalDesign #designHint{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:34px !important;
  min-height:28px !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  font-weight:900 !important;
}

#modalDesign #designHint.tl-done{
  background:rgba(34,211,238,.14) !important;
  border:1px solid rgba(34,211,238,.28) !important;
}

/* تابلت */
@media(max-width:980px){
  #modalDesign .modalBox.designBoxCompact{
    width:min(980px,96vw) !important;
    max-height:92vh !important;
    overflow:auto !important;
  }

  #modalDesign .design.designFree{
    grid-template-columns:1fr !important;
    max-height:none !important;
    overflow:visible !important;
  }

  #modalDesign .previewStage.freePreview{
    max-height:none !important;
    height:auto !important;
  }

  #modalDesign .designControls.compactControls{
    overflow:visible !important;
  }
}

/* موبايل */
@media(max-width:640px){
  #modalDesign .modalBox.designBoxCompact{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow:auto !important;
    border-radius:0 !important;
  }

  #modalDesign .designControls.compactControls{
    grid-template-columns:1fr !important;
  }

  #modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn{
    height:58px !important;
  }
}

/* ===== TopLink final equal boxes + actions right + done left v20 ===== */
/* Scoped only to #modalDesign */

#modalDesign .designControls.compactControls{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(230px,1fr)) !important;
  gap:10px !important;
  align-items:stretch !important;
  align-content:start !important;
}

/* كل المربعات نفس الارتفاع */
#modalDesign .designControls.compactControls > .controlBox{
  height:188px !important;
  min-height:188px !important;
  max-height:188px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  padding:10px !important;
  border-radius:14px !important;
}

/* ضبط النصوص داخل المربعات */
#modalDesign .controlBox b{
  display:block !important;
  font-size:15px !important;
  line-height:1.2 !important;
  margin-bottom:8px !important;
}

#modalDesign .controlBox label{
  font-size:12px !important;
  line-height:1.25 !important;
  margin-bottom:4px !important;
}

#modalDesign .controlBox .two,
#modalDesign .controlBox .checks{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  align-items:start !important;
}

#modalDesign .checkTile{
  min-height:48px !important;
  padding:8px 10px !important;
  font-size:12px !important;
  line-height:1.2 !important;
  white-space:normal !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}

#modalDesign .checkTile.wide{
  grid-column:1 / -1 !important;
}

#modalDesign input,
#modalDesign select{
  min-height:38px !important;
  height:38px !important;
  padding:7px 10px !important;
  font-size:13px !important;
}

#modalDesign input[type="file"]{
  min-height:36px !important;
  height:36px !important;
  padding:5px 7px !important;
}

/* مربع الخلفية يفضل نفس الارتفاع */
#modalDesign .designControls.compactControls > .tl-bg-upload-box{
  height:188px !important;
  min-height:188px !important;
  max-height:188px !important;
}

/* الأزرار يمين تحت */
#modalDesign .designControls.compactControls > .row{
  grid-column:1 / -1 !important;
  display:flex !important;
  flex-direction:row !important;
  direction:ltr !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  min-height:42px !important;
  margin:0 !important;
  padding:0 !important;
}

/* خلي رسالة تم على الشمال */
#modalDesign #designHint{
  order:-1 !important;
  margin-right:auto !important;
  margin-left:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:34px !important;
  min-height:28px !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  font-weight:900 !important;
  font-size:13px !important;
  color:#c9f7ff !important;
  background:transparent !important;
}

/* علامة صح + تم */
#modalDesign #designHint.tl-done{
  background:rgba(34,211,238,.14) !important;
  border:1px solid rgba(34,211,238,.28) !important;
}

#modalDesign #designHint.tl-done::before{
  content:"✓" !important;
  display:inline-block !important;
  margin-right:6px !important;
  font-weight:900 !important;
  color:#7ee7ff !important;
}

/* على التابلت والموبايل نسيب الارتفاعات مرنة */
@media(max-width:980px){
  #modalDesign .designControls.compactControls > .controlBox,
  #modalDesign .designControls.compactControls > .tl-bg-upload-box{
    height:auto !important;
    min-height:188px !important;
    max-height:none !important;
  }
}

@media(max-width:640px){
  #modalDesign .designControls.compactControls{
    grid-template-columns:1fr !important;
  }

  #modalDesign .designControls.compactControls > .controlBox,
  #modalDesign .designControls.compactControls > .tl-bg-upload-box{
    height:auto !important;
    min-height:auto !important;
    max-height:none !important;
  }

  #modalDesign .designControls.compactControls > .row{
    justify-content:flex-end !important;
  }
}

/* ===== TopLink final visual align v21 ===== */
/* آخر رتشة: صغر check boxes + محاذاة المعاينة + تكبير القوالب */

#modalDesign .modalBox.designBoxCompact{
  width:min(1010px,94vw) !important;
  max-height:85vh !important;
  overflow:hidden !important;
}

/* خلي العمودين متساويين بصريًا */
#modalDesign .design.designFree{
  grid-template-columns:minmax(410px,450px) minmax(0,1fr) !important;
  gap:12px !important;
  max-height:calc(85vh - 68px) !important;
  overflow:hidden !important;
  align-items:stretch !important;
}

/* مربع المعاينة نفس لون باقي المربعات وارتفاعه يقف مع آخر المربعات */
#modalDesign .previewStage.freePreview{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:14px !important;
  height:100% !important;
  min-height:0 !important;
  max-height:calc(85vh - 82px) !important;
  padding:12px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
}

/* مهم: الكارت نفسه بدون أي transform */
#modalDesign #cardStage.design-card-stage{
  transform:none !important;
  scale:1 !important;
  zoom:1 !important;
  touch-action:none !important;
  margin:0 auto !important;
  flex:0 0 auto !important;
}

/* التصميمات الجاهزة تاخد المساحة الفاضية لحد آخر المعاينة */
#modalDesign .previewStage.freePreview #tlTemplateButtonsBox{
  width:100% !important;
  flex:1 1 auto !important;
  margin-top:10px !important;
  padding-top:10px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-title{
  font-size:15px !important;
  line-height:1.2 !important;
  margin:0 0 8px !important;
  text-align:right !important;
  color:#eef7ff !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-grid{
  flex:1 1 auto !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,1fr) !important;
  gap:7px !important;
  min-height:124px !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn{
  height:auto !important;
  min-height:58px !important;
  border-radius:10px !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* يمين: ضبط المربعات */
#modalDesign .designControls.compactControls{
  grid-template-columns:repeat(2,minmax(230px,1fr)) !important;
  gap:10px !important;
  align-items:stretch !important;
}

/* كل المربعات نفس الحجم */
#modalDesign .designControls.compactControls > .controlBox{
  height:188px !important;
  min-height:188px !important;
  max-height:188px !important;
  overflow:hidden !important;
  padding:10px !important;
}

/* صغر مربعات علامة الصح عشان الخمسة يدخلوا مظبوط */
#modalDesign .controlBox .checks{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:6px !important;
}

#modalDesign .checkTile{
  min-height:40px !important;
  height:40px !important;
  padding:6px 8px !important;
  font-size:12px !important;
  line-height:1.1 !important;
  border-radius:11px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
}

#modalDesign .checkTile input{
  width:14px !important;
  height:14px !important;
  flex:0 0 14px !important;
  margin:0 !important;
}

/* TopLink / الهاتف ياخد عرض الصف لكن بنفس ارتفاع صغير */
#modalDesign .checkTile.wide{
  grid-column:1 / -1 !important;
  height:40px !important;
  min-height:40px !important;
}

/* تقليل النصوص عشان مفيش قص */
#modalDesign .controlBox b{
  font-size:15px !important;
  margin-bottom:7px !important;
}

#modalDesign .controlBox label{
  font-size:12px !important;
  line-height:1.2 !important;
  margin-bottom:3px !important;
}

#modalDesign input,
#modalDesign select{
  height:36px !important;
  min-height:36px !important;
  padding:6px 9px !important;
  font-size:13px !important;
}

#modalDesign input[type="file"]{
  height:34px !important;
  min-height:34px !important;
  padding:5px 7px !important;
}

/* أزرار الحفظ والاسترجاع يمين وتحت */
#modalDesign .designControls.compactControls > .row{
  grid-column:1 / -1 !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
  min-height:40px !important;
}

/* تم بعلامة صح على الشمال */
#modalDesign #designHint{
  order:-1 !important;
  margin-right:auto !important;
  margin-left:0 !important;
}

#modalDesign #designHint.tl-done::before{
  content:"✓" !important;
  margin-right:6px !important;
  color:#7ee7ff !important;
  font-weight:900 !important;
}

/* تابلت */
@media(max-width:980px){
  #modalDesign .modalBox.designBoxCompact{
    max-height:92vh !important;
    overflow:auto !important;
  }

  #modalDesign .design.designFree{
    grid-template-columns:1fr !important;
    max-height:none !important;
    overflow:visible !important;
  }

  #modalDesign .previewStage.freePreview{
    height:auto !important;
    max-height:none !important;
    overflow:auto !important;
  }

  #modalDesign .designControls.compactControls > .controlBox{
    height:auto !important;
    min-height:188px !important;
    max-height:none !important;
  }
}

/* موبايل */
@media(max-width:640px){
  #modalDesign .designControls.compactControls{
    grid-template-columns:1fr !important;
  }

  #modalDesign .designControls.compactControls > .controlBox{
    height:auto !important;
    min-height:auto !important;
    max-height:none !important;
  }

  #modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:auto !important;
  }

  #modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn{
    min-height:58px !important;
  }
}

/* ===== TopLink final template normal + exact visual alignment v22 ===== */
/* رجوع شكل كروت التصميمات طبيعي + محاذاة مربع المعاينة مع مربعات اليمين */

#modalDesign .modalBox.designBoxCompact{
  width:min(1010px,94vw) !important;
  max-width:94vw !important;
  max-height:84vh !important;
  overflow:hidden !important;
}

/* خلي العمود الشمال واليمين نفس النهاية */
#modalDesign .design.designFree{
  grid-template-columns:minmax(410px,450px) minmax(0,1fr) !important;
  gap:12px !important;
  align-items:start !important;
  max-height:none !important;
  overflow:visible !important;
}

/* مربع المعاينة ينتهي عند نفس خط نهاية مربعات اليمين */
#modalDesign .previewStage.freePreview{
  height:424px !important;
  min-height:424px !important;
  max-height:424px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:14px !important;
  padding:12px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
}

/* ممنوع لمس السحب */
#modalDesign #cardStage.design-card-stage{
  transform:none !important;
  scale:1 !important;
  zoom:1 !important;
  touch-action:none !important;
  margin:0 auto !important;
  flex:0 0 auto !important;
}

/* تصميمات جاهزة تحت الكارت وتملأ المساحة بدون قص */
#modalDesign .previewStage.freePreview #tlTemplateButtonsBox{
  width:100% !important;
  flex:1 1 auto !important;
  margin-top:8px !important;
  padding-top:8px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  background:transparent !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-title{
  font-size:15px !important;
  line-height:1.2 !important;
  margin:0 0 7px !important;
  text-align:right !important;
  color:#eef7ff !important;
}

/* رجوع شكل الكروت الطبيعي: بدون قص */
#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-grid{
  flex:1 1 auto !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,1fr) !important;
  gap:7px !important;
  min-height:0 !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn{
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  border-radius:10px !important;
  background:#f8fafc !important;
  overflow:hidden !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#fff !important;
  display:block !important;
}

/* اليمين: 4 مربعات متساوية + صف أزرار */
#modalDesign .designControls.compactControls{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(230px,1fr)) !important;
  gap:10px !important;
  align-content:start !important;
  align-items:start !important;
  overflow:visible !important;
}

#modalDesign .designControls.compactControls > .controlBox{
  height:188px !important;
  min-height:188px !important;
  max-height:188px !important;
  overflow:hidden !important;
  padding:10px !important;
  border-radius:14px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}

/* مربع الخلفية نفس الحجم بالظبط */
#modalDesign .designControls.compactControls > .tl-bg-upload-box{
  height:188px !important;
  min-height:188px !important;
  max-height:188px !important;
}

/* تصغير مربعات الصح عشان الخمسة يظهروا كاملين */
#modalDesign .controlBox .checks{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:6px !important;
}

#modalDesign .checkTile{
  height:39px !important;
  min-height:39px !important;
  max-height:39px !important;
  padding:5px 8px !important;
  font-size:12px !important;
  line-height:1.1 !important;
  border-radius:11px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
}

#modalDesign .checkTile input{
  width:14px !important;
  height:14px !important;
  flex:0 0 14px !important;
  margin:0 !important;
}

#modalDesign .checkTile.wide{
  grid-column:1 / -1 !important;
  height:39px !important;
  min-height:39px !important;
  max-height:39px !important;
}

/* النصوص والحقول */
#modalDesign .controlBox b{
  font-size:15px !important;
  line-height:1.2 !important;
  margin-bottom:7px !important;
}

#modalDesign .controlBox label{
  font-size:12px !important;
  line-height:1.2 !important;
  margin-bottom:3px !important;
}

#modalDesign input,
#modalDesign select{
  height:36px !important;
  min-height:36px !important;
  padding:6px 9px !important;
  font-size:13px !important;
}

#modalDesign input[type="file"]{
  height:34px !important;
  min-height:34px !important;
  padding:5px 7px !important;
}

/* الأزرار يمين تحت، خارج خط المحاذاة */
#modalDesign .designControls.compactControls > .row{
  grid-column:1 / -1 !important;
  display:flex !important;
  flex-direction:row !important;
  direction:ltr !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:0 !important;
}

#modalDesign #designHint{
  order:-1 !important;
  margin-right:auto !important;
  margin-left:0 !important;
}

#modalDesign #designHint.tl-done::before{
  content:"✓" !important;
  margin-right:6px !important;
  color:#7ee7ff !important;
  font-weight:900 !important;
}

/* تابلت وموبايل */
@media(max-width:980px){
  #modalDesign .modalBox.designBoxCompact{
    max-height:92vh !important;
    overflow:auto !important;
  }

  #modalDesign .design.designFree{
    grid-template-columns:1fr !important;
  }

  #modalDesign .previewStage.freePreview{
    height:auto !important;
    min-height:360px !important;
    max-height:none !important;
    overflow:auto !important;
  }

  #modalDesign .designControls.compactControls > .controlBox,
  #modalDesign .designControls.compactControls > .tl-bg-upload-box{
    height:auto !important;
    min-height:188px !important;
    max-height:none !important;
  }
}

@media(max-width:640px){
  #modalDesign .designControls.compactControls{
    grid-template-columns:1fr !important;
  }

  #modalDesign .designControls.compactControls > .controlBox,
  #modalDesign .designControls.compactControls > .tl-bg-upload-box{
    min-height:auto !important;
  }

  #modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:auto !important;
  }

  #modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn{
    min-height:58px !important;
  }
}

/* ===== TopLink final preview line fix v23 ===== */
/* رجوع شكل كروت القوالب الطبيعي + إنهاء مربع المعاينة عند نفس خط مربعات اليمين */

#modalDesign .modalBox.designBoxCompact{
  width:min(1010px,94vw) !important;
  max-width:94vw !important;
  max-height:84vh !important;
  overflow:hidden !important;
}

/* نخلي اليمين كما هو، والشمال ينتهي عند نفس الخط */
#modalDesign .design.designFree{
  grid-template-columns:minmax(410px,450px) minmax(0,1fr) !important;
  gap:12px !important;
  align-items:start !important;
}

/* ده أهم جزء: ارتفاع مربع المعاينة نفسه */
#modalDesign .previewStage.freePreview{
  height:392px !important;
  min-height:392px !important;
  max-height:392px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:14px !important;
  padding:12px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
}

/* الكارت نفسه كما هو بدون أي لعب */
#modalDesign #cardStage.design-card-stage{
  transform:none !important;
  scale:1 !important;
  zoom:1 !important;
  touch-action:none !important;
  margin:0 auto !important;
  flex:0 0 auto !important;
}

/* صندوق التصميمات الجاهزة تحت الكارت لكن بدون تمدد زيادة */
#modalDesign .previewStage.freePreview #tlTemplateButtonsBox{
  width:100% !important;
  flex:0 0 auto !important;
  margin-top:8px !important;
  padding-top:8px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  display:block !important;
  overflow:hidden !important;
  background:transparent !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-title{
  font-size:15px !important;
  line-height:1.2 !important;
  margin:0 0 7px !important;
  text-align:right !important;
  color:#eef7ff !important;
}

/* رجوع كروت القوالب لشكلها الطبيعي */
#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2, 90px) !important;
  gap:7px !important;
  min-height:auto !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn{
  height:90px !important;
  min-height:90px !important;
  max-height:90px !important;
  padding:0 !important;
  border-radius:10px !important;
  background:#f8fafc !important;
  overflow:hidden !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#fff !important;
  display:block !important;
}

/* اليمين: خليه ثابت وموحد */
#modalDesign .designControls.compactControls > .controlBox{
  height:188px !important;
  min-height:188px !important;
  max-height:188px !important;
}

#modalDesign .designControls.compactControls > .tl-bg-upload-box{
  height:188px !important;
  min-height:188px !important;
  max-height:188px !important;
}

/* صف الأزرار يفضل كما هو */
#modalDesign .designControls.compactControls > .row{
  grid-column:1 / -1 !important;
  display:flex !important;
  flex-direction:row !important;
  direction:ltr !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:0 !important;
}

/* تم على الشمال */
#modalDesign #designHint{
  order:-1 !important;
  margin-right:auto !important;
  margin-left:0 !important;
}

/* تابلت وموبايل */
@media(max-width:980px){
  #modalDesign .modalBox.designBoxCompact{
    max-height:92vh !important;
    overflow:auto !important;
  }

  #modalDesign .design.designFree{
    grid-template-columns:1fr !important;
  }

  #modalDesign .previewStage.freePreview{
    height:auto !important;
    min-height:360px !important;
    max-height:none !important;
    overflow:auto !important;
  }

  #modalDesign .designControls.compactControls > .controlBox,
  #modalDesign .designControls.compactControls > .tl-bg-upload-box{
    height:auto !important;
    min-height:188px !important;
    max-height:none !important;
  }
}

@media(max-width:640px){
  #modalDesign .designControls.compactControls{
    grid-template-columns:1fr !important;
  }

  #modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:auto !important;
  }

  #modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn{
    height:86px !important;
    min-height:86px !important;
    max-height:86px !important;
  }
}

/* ===== TopLink template natural fix v24 ===== */
/* رجوع شكل كروت التصميمات الجاهزة للطبيعي + إظهار الصفين كاملين + تقليل فرق الزيادة تحت */

#modalDesign .previewStage.freePreview{
  height:378px !important;
  min-height:378px !important;
  max-height:378px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:14px !important;
  padding:12px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
}

/* الكارت الرئيسي يفضل كما هو */
#modalDesign #cardStage.design-card-stage{
  transform:none !important;
  scale:1 !important;
  zoom:1 !important;
  touch-action:none !important;
  margin:0 auto !important;
  flex:0 0 auto !important;
}

/* عنوان المقاس تحت الكارت */
#modalDesign #stageDim{
  margin-bottom:2px !important;
}

/* صندوق التصميمات الجاهزة طبيعي بدون فرد زيادة */
#modalDesign .previewStage.freePreview #tlTemplateButtonsBox{
  width:100% !important;
  flex:0 0 auto !important;
  margin-top:6px !important;
  padding-top:6px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  background:transparent !important;
  overflow:hidden !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-title{
  font-size:15px !important;
  line-height:1.2 !important;
  margin:0 0 6px !important;
  text-align:right !important;
  color:#eef7ff !important;
}

/* رجوع التنظيم الطبيعي للكروت */
#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-auto-rows:78px !important;
  gap:7px !important;
  min-height:auto !important;
  align-items:stretch !important;
}

/* الكارت نفسه طبيعي ومش مقصوص */
#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn{
  height:78px !important;
  min-height:78px !important;
  max-height:78px !important;
  padding:0 !important;
  border-radius:10px !important;
  background:#ffffff !important;
  overflow:hidden !important;
  display:block !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#ffffff !important;
  display:block !important;
}

/* اليمين يفضل ثابت */
#modalDesign .designControls.compactControls > .controlBox{
  height:188px !important;
  min-height:188px !important;
  max-height:188px !important;
}

#modalDesign .designControls.compactControls > .tl-bg-upload-box{
  height:188px !important;
  min-height:188px !important;
  max-height:188px !important;
}

/* الأزرار كما هي */
#modalDesign .designControls.compactControls > .row{
  grid-column:1 / -1 !important;
  display:flex !important;
  flex-direction:row !important;
  direction:ltr !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
}

/* تم على الشمال */
#modalDesign #designHint{
  order:-1 !important;
  margin-right:auto !important;
  margin-left:0 !important;
}

/* موبايل وتابلت */
@media(max-width:980px){
  #modalDesign .previewStage.freePreview{
    height:auto !important;
    min-height:340px !important;
    max-height:none !important;
    overflow:auto !important;
  }

  #modalDesign .designControls.compactControls > .controlBox,
  #modalDesign .designControls.compactControls > .tl-bg-upload-box{
    height:auto !important;
    min-height:188px !important;
    max-height:none !important;
  }
}

@media(max-width:640px){
  #modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:76px !important;
  }

  #modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn{
    height:76px !important;
    min-height:76px !important;
    max-height:76px !important;
  }
}

/* ===== TopLink tiny height tune v25 ===== */
/* زيادة بسيطة فقط لمربع المعاينة والقوالب حتى يقفل مع الخط الأسود */

#modalDesign .previewStage.freePreview{
  height:394px !important;
  min-height:394px !important;
  max-height:394px !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox{
  margin-top:7px !important;
  padding-top:7px !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-grid{
  grid-auto-rows:78px !important;
}

/* تابلت وموبايل يفضلوا مرنين */
@media(max-width:980px){
  #modalDesign .previewStage.freePreview{
    height:auto !important;
    min-height:340px !important;
    max-height:none !important;
  }
}

/* ===== TopLink final millimeter align + hide CSS text v26 ===== */

/* شيل "CSS أو خلفية" وأي خانة CSS قديمة من مربع خلفية وقوالب */
#modalDesign .tl-bg-upload-box #bgCssInput,
#modalDesign .tl-bg-upload-box label[for="bgCssInput"]{
  display:none !important;
}

#modalDesign .tl-bg-upload-box label:last-of-type{
  display:none !important;
}

#modalDesign .tl-bg-upload-box label{
  display:block !important;
}

#modalDesign .tl-bg-upload-box label:last-of-type{
  display:none !important;
}

/* تسوية مربع المعاينة مع الخط الأسود */
#modalDesign .previewStage.freePreview{
  height:400px !important;
  min-height:400px !important;
  max-height:400px !important;
  overflow:hidden !important;
}

/* نفس شكل القوالب الطبيعي بدون قص */
#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-grid{
  grid-auto-rows:78px !important;
  gap:7px !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn{
  height:78px !important;
  min-height:78px !important;
  max-height:78px !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn img{
  object-fit:contain !important;
  background:#fff !important;
}

/* الموبايل والتابلت يفضلوا مرنين */
@media(max-width:980px){
  #modalDesign .previewStage.freePreview{
    height:auto !important;
    min-height:340px !important;
    max-height:none !important;
    overflow:auto !important;
  }
}

/* ===== TopLink decrease preview height final v27 ===== */
/* تصغير مربع المعاينة فقط عشان يساوي مربعات اليمين */

#modalDesign .previewStage.freePreview{
  height:386px !important;
  min-height:386px !important;
  max-height:386px !important;
  overflow:hidden !important;
}

/* نخلي القوالب زي ما هي، بس من غير تمديد لتحت */
#modalDesign .previewStage.freePreview #tlTemplateButtonsBox{
  flex:0 0 auto !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-grid{
  grid-auto-rows:78px !important;
}

#modalDesign .previewStage.freePreview #tlTemplateButtonsBox .tl-card-template-btn{
  height:78px !important;
  min-height:78px !important;
  max-height:78px !important;
}

@media(max-width:980px){
  #modalDesign .previewStage.freePreview{
    height:auto !important;
    min-height:340px !important;
    max-height:none !important;
  }
}